/* ==========================================================================
   Excklusive IT — тема оформления CRM (подключается ПОСЛЕ app.css)
   Цвета бренда: #0a0a0a / #ffd60a / #00ff88 / #ff3355
   Шрифты: Onest (интерфейс, кириллица), Bricolage Grotesque (заголовки),
           JetBrains Mono (цифры, время, подписи)
   ========================================================================== */

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(./fonts/onest-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(./fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(./fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./fonts/jetbrains-mono-cyrillic-400-normal.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./fonts/jetbrains-mono-cyrillic-600-normal.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* --------------------------------------------------------------------------
   Токены
   -------------------------------------------------------------------------- */
:root {
    --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-normal: 14px;
    --fs-small: 12px;
    --fs-large: 17px;
    --fs-xl: 22px;

    --height-normal: 40px;
    --height-small: 30px;
    --height-large: 52px;
    --header-height: 64px;
    --header-height-mobile: 60px;
    --checkbox-size: 20px;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --sidebar-w: 236px;
}

[data-theme="dark"] {
    --x-bg: #0a0a0a;
    --x-surface: #111111;
    --x-surface-2: #161616;
    --x-surface-3: #1d1d1d;
    --x-hover: rgba(255, 255, 255, 0.045);
    --x-border: #222222;
    --x-border-strong: #2f2f2f;
    --x-text: #ededed;
    --x-text-2: #b4b4b4;
    --x-mute: #7c7c7c;
    --x-accent: #ffd60a;
    --x-accent-hover: #ffe24d;
    --x-accent-ink: #0a0a0a;
    --x-accent-soft: rgba(255, 214, 10, 0.10);
    --x-accent-ring: rgba(255, 214, 10, 0.22);
    --x-green: #00ff88;
    --x-green-text: #3ee895;
    --x-red: #ff3355;
    --x-red-text: #ff6b84;
    --x-red-soft: rgba(255, 51, 85, 0.12);
    --x-blue: #5aa9ff;
    --x-header-bg: rgba(10, 10, 10, 0.82);
    --x-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.35);
    --x-bubble-own: #ffd60a;
    --x-bubble-own-ink: #0a0a0a;

    /* переопределяем переменные исходной темы */
    --color-bg-primary: var(--x-bg);
    --color-bg-secondary: var(--x-surface-3);
    --color-bg-secondary-op: var(--x-hover);
    --color-bg-dark: var(--x-bg);
    --color-border: var(--x-border);
    --color-primary: var(--x-accent);
    --color-secondary: var(--x-text);
    --color-text-primary: var(--x-text);
    --color-text-mute: var(--x-mute);
    --color-link: var(--x-blue);
    --color-success-primary: #00d677;
    --color-success-secondary: var(--x-green-text);
    --color-danger-primary: var(--x-red);
    --color-danger-secondary: var(--x-red-text);
    --color-danger-secondary-op: var(--x-red-soft);
    --color-bright-primary: var(--x-blue);
    --color-bright-secondary: #c9e2ff;
    --color-warning: #ff9f1a;
    --color-modal-background: rgba(0, 0, 0, 0.6);
    --color-modal-dialog: var(--x-surface);
    --shadow: none;
}

[data-theme="light"] {
    --x-bg: #f6f6f3;
    --x-surface: #ffffff;
    --x-surface-2: #fbfbf9;
    --x-surface-3: #f0f0ec;
    --x-hover: rgba(0, 0, 0, 0.04);
    --x-border: #e6e6e1;
    --x-border-strong: #d6d6d0;
    --x-text: #121212;
    --x-text-2: #3d3d3d;
    --x-mute: #75756f;
    --x-accent: #ffd60a;
    --x-accent-hover: #ffcc00;
    --x-accent-ink: #0a0a0a;
    --x-accent-soft: rgba(255, 214, 10, 0.22);
    --x-accent-ring: rgba(230, 190, 0, 0.30);
    --x-green: #00b862;
    --x-green-text: #00995a;
    --x-red: #e5153d;
    --x-red-text: #d81b43;
    --x-red-soft: rgba(229, 21, 61, 0.08);
    --x-blue: #1f6feb;
    --x-header-bg: rgba(255, 255, 255, 0.85);
    --x-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    --x-bubble-own: #ffd60a;
    --x-bubble-own-ink: #0a0a0a;

    --color-bg-primary: var(--x-bg);
    --color-bg-secondary: var(--x-surface);
    --color-bg-secondary-op: var(--x-hover);
    --color-bg-dark: var(--x-surface);
    --color-border: var(--x-border);
    --color-primary: #c9a600;
    --color-secondary: var(--x-text);
    --color-text-primary: var(--x-text);
    --color-text-mute: var(--x-mute);
    --color-link: var(--x-blue);
    --color-success-primary: #00a656;
    --color-success-secondary: var(--x-green-text);
    --color-danger-primary: var(--x-red);
    --color-danger-secondary: var(--x-red-text);
    --color-danger-secondary-op: var(--x-red-soft);
    --color-bright-primary: var(--x-blue);
    --color-warning: #d97706;
    --color-modal-background: rgba(20, 20, 20, 0.35);
    --color-modal-dialog: var(--x-surface);
    --shadow: none;
}


/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
* {
    font-family: var(--font-ui);
    letter-spacing: 0;
}
html, body {
    background-color: var(--x-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}
.fa-solid, .fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
}
::selection {
    background: var(--x-accent);
    color: var(--x-accent-ink);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--x-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--x-border-strong);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

.red-color { color: var(--x-red-text); }
.green-color { color: var(--color-success-primary); }
.light-green-color { color: var(--x-green-text); }


/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.header {
    height: var(--header-height);
    padding: 0 24px;
    background-color: var(--x-header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--x-border);
}
.header-logo {
    align-items: center;
    gap: 12px;
}
.header-logo__img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}
.header-logo__text {
    justify-content: center;
    gap: 2px;
}
.header-logo__text-large {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--x-text);
    line-height: 1.1;
}
.header-logo__text-small {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--x-mute);
}
.header-menu {
    gap: 8px;
    align-items: center;
}
.header-menu__item a { font-weight: 500; }
.header-menu__item-profile {
    height: 36px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    background-color: var(--x-surface-2);
    border: 1px solid var(--x-border);
    color: var(--x-text);
    gap: 10px;
    transition: border-color .15s, background-color .15s;
}
.header-menu__item-profile:hover {
    border-color: var(--x-border-strong);
    background-color: var(--x-surface-3);
}
.header-menu__item-profile__text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--x-text);
}
.header-menu__item-profile__text i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--x-accent);
    color: var(--x-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.header-menu__item-profile__balance {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--x-green-text);
    padding-left: 10px;
    border-left: 1px solid var(--x-border);
}
.header-menu__item a:hover { color: inherit; }
.header-menu__item-logout {
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--x-mute);
    font-size: 13px;
    font-weight: 500;
    transition: color .15s, background-color .15s;
}
.header-menu__item-logout:hover {
    color: var(--x-text) !important;
    background-color: var(--x-hover);
}
.loader {
    top: 14px;
    left: 20px;
    width: 38px;
    height: 38px;
    border-width: 3px;
    border-color: var(--x-accent);
    border-bottom-color: transparent;
}


/* --------------------------------------------------------------------------
   Основной макет и сайдбар
   -------------------------------------------------------------------------- */
.container-page {
    background-color: var(--x-bg);
}
.main-layout {
    gap: 28px;
    padding: 20px 24px 24px 16px;
}
.main-layout__sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: flex-start;
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
}
.main-layout__content {
    min-width: 0;
}
.page { padding: 0; }

.sidebar { gap: 2px; }
.sidebar-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--x-text-2);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .12s, color .12s;
    position: relative;
}
.sidebar-menu__item i {
    width: 18px;
    text-align: center;
    color: var(--x-mute);
    font-size: 14px;
    transition: color .12s;
}
.sidebar-menu__item:hover {
    color: var(--x-text);
    background-color: var(--x-hover);
}
.sidebar-menu__item:hover i { color: var(--x-text-2); }
.sidebar-menu__item.active {
    color: var(--x-text);
    background-color: var(--x-accent-soft);
    font-weight: 600;
}
.sidebar-menu__item.active i { color: var(--x-accent); }
[data-theme="light"] .sidebar-menu__item.active i { color: #8a7100; }
.sidebar-menu__item.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--x-accent);
}
.sidebar-menu__divider {
    padding-top: 0;
    margin: 10px 12px;
    border-bottom: 1px solid var(--x-border);
}
.sidebar-menu__badge {
    background-color: var(--x-red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
}
.sidebar-menu__theme-switcher_container {
    justify-content: flex-start;
    padding: 20px 12px 0;
}
.sidebar .footer {
    border-top: 1px solid var(--x-border);
    margin: 20px 0 0;
    padding: 16px 12px 4px;
    justify-content: flex-start;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    color: var(--x-mute);
}
.footer * { color: inherit; font-size: inherit; }

.theme-switcher {
    width: 52px;
    height: 28px;
    padding: 3px;
    border: 1px solid var(--x-border-strong);
    background-color: var(--x-surface-2);
    border-radius: 999px;
}
.theme-switcher__selector {
    --size: 20px;
    background-color: var(--x-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.theme-switcher__text i {
    color: var(--x-mute);
    font-size: 11px;
}


/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.btn {
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
    white-space: nowrap;
}
.btn.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn.btn-lg { height: 48px; font-size: 15px; padding: 0 24px; border-radius: 10px; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--x-accent-ring); }

.btn.btn-primary {
    color: var(--x-accent-ink);
    background-color: var(--x-accent);
    border: 1px solid var(--x-accent);
}
.btn.btn-primary:hover {
    color: var(--x-accent-ink);
    background-color: var(--x-accent-hover);
    border-color: var(--x-accent-hover);
}
.btn.btn-primary i, .btn.btn-primary span { color: var(--x-accent-ink); }

.btn.btn-primary-outline,
.btn.btn-secondary-outline,
.btn.btn-bright-outline,
.btn.btn-secondary,
.btn.btn-light {
    color: var(--x-text);
    background-color: var(--x-surface-2);
    border: 1px solid var(--x-border);
}
.btn.btn-primary-outline i { color: var(--x-accent); }
[data-theme="light"] .btn.btn-primary-outline i { color: #8a7100; }
.btn.btn-primary-outline:hover,
.btn.btn-secondary-outline:hover,
.btn.btn-bright-outline:hover,
.btn.btn-secondary:hover,
.btn.btn-light:hover {
    color: var(--x-text);
    background-color: var(--x-surface-3);
    border-color: var(--x-border-strong);
}
.btn.btn-bright {
    color: #fff;
    background-color: var(--x-blue);
    border-color: var(--x-blue);
}
.btn.btn-bright:hover { filter: brightness(1.08); color: #fff; background-color: var(--x-blue); }
.btn.btn-danger {
    color: #fff;
    background-color: var(--x-red);
    border: 1px solid var(--x-red);
}
.btn.btn-danger:hover {
    background-color: var(--x-red);
    border-color: var(--x-red);
    filter: brightness(1.1);
}
[data-theme="light"] .btn.btn-danger { color: #fff; }
.btn.btn-danger-outline {
    color: var(--x-red-text);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--x-red) 45%, transparent);
}
.btn.btn-danger-outline:hover {
    color: #fff;
    background-color: var(--x-red);
    border-color: var(--x-red);
}
.btn.btn-transparent {
    color: var(--x-text-2);
    background-color: transparent;
    border: 1px solid transparent;
}
.btn.btn-transparent:hover {
    color: var(--x-text);
    background-color: var(--x-hover);
}


/* --------------------------------------------------------------------------
   Поля ввода
   -------------------------------------------------------------------------- */
.input__text,
.text__text,
.select .ss-main {
    background-color: var(--x-surface) !important;
    border: 1px solid var(--x-border) !important;
    border-radius: 8px !important;
    transition: border-color .12s, box-shadow .12s;
}
.input__text:hover,
.text__text:hover,
.select .ss-main:hover {
    border-color: var(--x-border-strong) !important;
}
.input__text:focus-within,
.text__text:focus,
.select .ss-main.ss-open-below,
.select .ss-main.ss-open-above,
.select .ss-main:focus {
    border-color: var(--x-accent) !important;
    box-shadow: 0 0 0 3px var(--x-accent-ring) !important;
}
.input__text-input {
    height: 38px;
    font-size: 14px;
    color: var(--x-text);
    padding: 0 12px;
}
.input__text-input::placeholder,
.text__text::placeholder,
.chat__search input::placeholder { color: var(--x-mute); }
.input__text-icon { color: var(--x-mute); width: 36px; }
.input__text-icon + .input__text-input { padding-left: 0; }
.input__text-password-icon { color: var(--x-mute); }
.input__text-password-icon:hover { color: var(--x-text); }
.input__text--error, .text__text--error, .select--error {
    border-color: var(--x-red) !important;
    box-shadow: 0 0 0 3px var(--x-red-soft) !important;
}
.text__text { padding: 10px 12px; line-height: 1.5; }
.select .ss-main { height: 40px; padding: 0 8px; }
.select .ss-main .ss-values { font-size: 14px; }
.ss-content {
    background-color: var(--x-surface) !important;
    border: 1px solid var(--x-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    padding: 4px;
    margin-top: 4px;
}
.ss-content .ss-list .ss-option {
    border-radius: 6px;
    padding: 8px 10px;
}
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
    background-color: var(--x-hover) !important;
    color: var(--x-text) !important;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    background-color: var(--x-accent-soft) !important;
    color: var(--x-text) !important;
    font-weight: 600;
}
.ss-content .ss-search input {
    background-color: var(--x-surface-2) !important;
    border: 1px solid var(--x-border) !important;
    border-radius: 6px;
    color: var(--x-text);
}
.checkbox .checkmark {
    background-color: var(--x-surface) !important;
    border: 1px solid var(--x-border-strong) !important;
    border-radius: 6px;
    font-size: 12px;
}
.checkbox input:checked ~ .checkmark {
    background-color: var(--x-accent) !important;
    border-color: var(--x-accent) !important;
}
.checkbox input:checked ~ .checkmark i { color: var(--x-accent-ink); }

.form { gap: 20px; }
.form-row { gap: 20px; }
.form-control { gap: 7px; }
.form-control label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--x-text-2);
}
.form-control.required label:after { color: var(--x-red); }
.form-control .hint { color: var(--x-mute); }

.password-requirements {
    font-size: 12.5px;
    line-height: 1.7;
}

.air-datepicker {
    background-color: var(--x-surface);
    border: 1px solid var(--x-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    --adp-accent-color: var(--x-accent);
    --adp-cell-background-color-selected: var(--x-accent);
    --adp-cell-background-color-selected-hover: var(--x-accent-hover);
    --adp-color-current-date: var(--x-accent);
    --adp-background-color-hover: var(--x-hover);
    --adp-border-radius: 6px;
}
.air-datepicker-cell.-selected- { color: var(--x-accent-ink) !important; }


/* --------------------------------------------------------------------------
   Вкладки
   -------------------------------------------------------------------------- */
.tabs { gap: 4px; }
.tabs-tab {
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--x-mute);
    font-weight: 500;
    border: 1px solid transparent;
}
.tabs-tab:hover { color: var(--x-text); background-color: var(--x-hover); }
.tabs-tab.active {
    color: var(--x-text);
    background-color: var(--x-surface-2);
    border-color: var(--x-border);
}
.tabs-tab.active i { color: var(--x-accent); }
.tabs-line { height: 1px; background-color: var(--x-border); }
.tabs:not(.no_line) .tabs-tab { border-radius: 8px 8px 0 0; }
.tabs:not(.no_line) .tabs-tab.active { border-bottom-color: var(--x-surface-2); }


/* --------------------------------------------------------------------------
   Списки
   -------------------------------------------------------------------------- */
.common-list { gap: 8px; }
.row {
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 12px;
    padding: 14px 18px;
    gap: 20px;
    align-items: center;
    transition: border-color .12s, background-color .12s;
}
.row:hover {
    border-color: var(--x-border-strong);
    background-color: var(--x-surface-2);
}
.row.no-pointer:hover { background-color: var(--x-surface); }
.column .title {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--x-mute);
    margin-bottom: 5px;
}
.column .content {
    font-size: 14px;
    color: var(--x-text);
    font-weight: 500;
}
[class*="-column__id"] .content,
[class*="-column__balance"] .content,
[class*="-column__amount"] .content,
[class*="-column__salary"] .content,
[class*="-column__rate"] .content,
[class*="-column__price"] .content,
[class*="-column__date"] .content,
[class*="-column__created"] .content,
[class*="-column__sent"] .content,
[class*="-column__seq"] .content,
[class*="-column__phone"] .content {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
}
[class*="-column__id"] .content { color: var(--x-mute); }
[class*="-column__date"] .content,
[class*="-column__created"] .content,
[class*="-column__sent"] .content { font-size: 12px; line-height: 1.5; }
[class*="-column__balance"] .content,
[class*="-column__amount"] .content { font-weight: 600; }

[class*="-column__actions"] .action {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    color: var(--x-mute) !important;
    border-radius: 8px !important;
}
[class*="-column__actions"] .action:hover {
    color: var(--x-red-text) !important;
    background-color: var(--x-red-soft) !important;
}
[class*="-column__status"] .content i,
.template-column__active .content i { color: var(--x-accent); }

.grid-empty {
    background-color: var(--x-surface);
    border: 1px dashed var(--x-border-strong);
    border-radius: 14px;
    color: var(--x-mute);
    font-size: 15px;
    padding: 48px 32px;
}
.grid-actions { font-size: 18px; }
.pager { align-items: center; }
.pager-items { gap: 6px; align-items: center; }
.pager-items > span, .pager-items > div:not(.btn) {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--x-mute);
}
.pager-info, .pager-footer {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--x-mute);
}
.common-pager { margin-top: 18px; }


/* --------------------------------------------------------------------------
   Заголовки страниц, настройки, профиль
   -------------------------------------------------------------------------- */
.page-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--x-text);
    letter-spacing: -0.01em;
}
.page-title-line {
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--x-accent);
    margin: 12px 0 20px;
}
.options-divider,
[data-theme="light"] .options-divider {
    background: transparent;
    color: var(--x-text);
    padding: 0 0 10px;
    margin: 36px 0 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--x-border);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.options-divider.suppress-margin { margin-top: 0; }
.options-option { margin-bottom: 16px; }
.options-divider-thin { border-bottom-color: var(--x-border); }

.profile-menu {
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 14px;
    padding: 20px;
    gap: 16px;
}
.profile-menu__item { padding: 10px 12px; border-radius: 8px; }
.profile-menu__item.active { background-color: var(--x-accent-soft); color: var(--x-text); }

.form-alert {
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 14px;
}


/* --------------------------------------------------------------------------
   Авторизация
   -------------------------------------------------------------------------- */
.rlr-form-container {
    min-height: calc(100vh - var(--header-height));
    padding: 48px 16px;
}
.rlr-form {
    width: 420px;
    max-width: 100%;
    gap: 18px;
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 18px;
    padding: 32px;
    box-shadow: var(--x-shadow), 0 0 0 1px rgba(255, 214, 10, 0.03), 0 30px 120px -20px rgba(255, 214, 10, 0.10);
}
.rlr-form__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
}
.rlr-form__buttons { padding-top: 8px; }
.rlr-form .btn.btn-lg { width: 100%; }


/* --------------------------------------------------------------------------
   Модальные окна
   -------------------------------------------------------------------------- */
.modal-background {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.modal-dialog {
    background: var(--x-surface);
    border: 1px solid var(--x-border-strong);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.modal-dialog.second { background: var(--x-surface); border-color: var(--x-border-strong); }
.modal-body { padding: 28px; }
.modal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.modal-text { color: var(--x-text-2); line-height: 1.5; }
.modal-footer { padding: 0 28px 24px; gap: 10px; }


/* --------------------------------------------------------------------------
   Календарь
   -------------------------------------------------------------------------- */
.calendar { gap: 16px; }
.calendar__current-switcher { gap: 6px; }
.calendar__current-switcher__text {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--x-text);
}
.calendar__header .btn-transparent.active,
.calendar__header .btn.active {
    background-color: var(--x-surface-2);
    border-color: var(--x-border);
    color: var(--x-text);
}
.calendar__view-month_days,
[data-theme="light"] .calendar__view-month_days {
    --gap: 1px;
    --line-color: var(--x-border);
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 14px;
}
.calendar__view-monthday { min-height: 112px; }
.calendar__view-monthday.today {
    box-shadow: inset 0 0 0 1px var(--x-accent);
    background-color: color-mix(in srgb, var(--x-accent) 4%, transparent);
}
.calendar__view-monthday.today .monthday-header {
    color: var(--x-accent);
    font-weight: 600;
}
[data-theme="light"] .calendar__view-monthday.today .monthday-header { color: #8a7100; }
.monthday-header {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--x-text-2);
    padding: 8px 10px 4px;
}
.monthday-header.weekend { color: var(--x-red-text); opacity: .75; }
.monthday-lessons { padding: 2px 6px 8px; gap: 4px; }
.monthday-lesson,
.weekday-lesson {
    background-color: var(--x-surface-3);
    border-radius: 7px;
    padding: 6px 8px 6px 11px;
    transition: background-color .12s;
}
[data-theme="light"] .monthday-lesson,
[data-theme="light"] .weekday-lesson { background-color: var(--x-surface-3); }
.monthday-lesson:hover, .weekday-lesson:hover { background-color: var(--x-border-strong); }
[data-theme="light"] .monthday-lesson:hover { background-color: #e6e6e0; }
.monthday-lesson__left_marker,
.weekday-lesson__left_marker {
    width: 3px;
    top: 5px;
    bottom: 5px;
    height: auto;
    left: 4px;
    border-radius: 3px;
}
.monthday-lesson__row { gap: 6px; align-items: baseline; }
.monthday-lesson__time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--x-text);
    white-space: nowrap;
}
.monthday-lesson__time * { font-family: var(--font-mono); font-size: 11px; }
.monthday-lesson__subject {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}
.monthday-hatching {
    background: repeating-linear-gradient(135deg, transparent 0 7px, var(--x-hover) 7px 8px);
    opacity: .55;
}
.monthday-hovering:hover { background-color: var(--x-hover); }

.calendar__view-weekday {
    background-color: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: 14px;
    overflow: hidden;
}
.calendar__view-weekday.today {
    box-shadow: none;
    border-color: var(--x-accent);
}
.weekday-header,
[data-theme="light"] .weekday-header {
    height: 38px;
    background-color: var(--x-surface-2);
    border-bottom: 1px solid var(--x-border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--x-text-2);
}
.weekday-header.weekend { background-color: var(--x-surface-2); color: var(--x-red-text); }
.weekday-lessons, [data-theme="light"] .weekday-lessons { background-color: transparent; padding: 8px; }
.weekday-lesson__time span {
    background-color: transparent;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--x-text);
}
.weekday-lesson__about-subject { font-size: 13.5px; font-weight: 700; }
.weekday-lesson__about-teacher,
.weekday-lesson__about-student_or_group { color: var(--x-mute); font-size: 12px; }


/* --------------------------------------------------------------------------
   Чат
   -------------------------------------------------------------------------- */
.chat {
    grid-template-columns: 320px 1fr;
    height: calc(100vh - var(--header-height) - 44px);
    background-color: var(--x-border);
    border: 1px solid var(--x-border);
    border-radius: 16px;
}
.chat__sidebar { background-color: var(--x-surface); }
.chat__search {
    background-color: var(--x-surface);
    border-bottom: 1px solid var(--x-border);
    padding: 12px 14px;
    height: 56px;
}
.chat__search input { font-size: 14px; }
.chat__dialog {
    padding: 12px 14px;
    border-bottom: 1px solid var(--x-border);
    border-left: 2px solid transparent;
}
.chat__dialog:hover { background-color: var(--x-hover); }
.chat__dialog.active {
    background-color: var(--x-accent-soft);
    border-left: 2px solid var(--x-accent);
}
.chat__dialog-avatar,
.chat-thread__avatar {
    width: 38px;
    height: 38px;
    background-color: var(--x-surface-3);
    color: var(--x-accent);
    border: 1px solid var(--x-border-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
}
[data-theme="light"] .chat__dialog-avatar,
[data-theme="light"] .chat-thread__avatar { color: #8a7100; }
.chat__dialog-name { font-size: 14px; font-weight: 600; }
.chat__dialog-pair { font-size: 12px; color: var(--x-text-2); margin-top: 1px; }
.chat__dialog-last { font-family: var(--font-mono); font-size: 11px; color: var(--x-mute); margin-top: 2px; }
.chat__dialog-unread { background-color: var(--x-red); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.chat__content { background-color: var(--x-bg); }
[data-theme="light"] .chat__content { background-color: var(--x-surface-2); }
.chat__placeholder i { font-size: 40px; opacity: .25; }
.chat__placeholder { font-size: 14px; }
.chat-thread__header {
    height: 56px;
    background-color: var(--x-surface);
    border-bottom: 1px solid var(--x-border);
    padding: 0 16px;
}
.chat-thread__name { font-size: 14.5px; }
.chat-thread__sub { color: var(--x-mute); }
.chat-thread__badge {
    background-color: var(--x-surface-2);
    border: 1px solid var(--x-border);
    color: var(--x-text-2);
    font-family: var(--font-mono);
    font-size: 11px;
}
.chat-thread__list { padding: 20px 24px; gap: 6px; }
.chat-thread__day span {
    background-color: var(--x-surface-2);
    border: 1px solid var(--x-border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--x-mute);
}
.chat-message__bubble {
    background-color: var(--x-surface-3);
    border: 1px solid transparent;
    border-radius: 14px 14px 14px 4px;
    padding: 9px 13px;
    font-size: 14px;
}
[data-theme="light"] .chat-message__bubble {
    background-color: var(--x-surface);
    border-color: var(--x-border);
}
.chat-message_own .chat-message__bubble,
[data-theme="light"] .chat-message_own .chat-message__bubble {
    background-color: var(--x-bubble-own);
    border-color: var(--x-bubble-own);
    border-radius: 14px 14px 4px 14px;
}
.chat-message_own .chat-message__bubble * { color: var(--x-bubble-own-ink); }
.chat-message__sender { color: var(--x-accent); font-size: 12px; }
[data-theme="light"] .chat-message__sender { color: #8a7100; }
.chat-message__footer { font-family: var(--font-mono); font-size: 10.5px; opacity: .6; }
.chat-message__footer * { font-family: var(--font-mono); }
.chat-attachment {
    background-color: rgba(0, 0, 0, .18);
    border-radius: 10px;
}
.chat-composer,
.chat-thread__composer {
    border-top: 1px solid var(--x-border);
    background-color: var(--x-surface);
}
.chat-composer__input,
.chat-composer textarea {
    background-color: var(--x-surface-2) !important;
    border: 1px solid var(--x-border) !important;
    border-radius: 10px !important;
    color: var(--x-text);
}
.chat-composer__input:focus,
.chat-composer textarea:focus {
    border-color: var(--x-accent) !important;
    box-shadow: 0 0 0 3px var(--x-accent-ring);
}
.chat-composer__send {
    background-color: var(--x-accent) !important;
    color: var(--x-accent-ink) !important;
    border-radius: 10px !important;
}
.chat-composer__send * { color: var(--x-accent-ink) !important; }
.chat-composer__attach { color: var(--x-mute); border-radius: 10px; }
.chat-composer__attach:hover { color: var(--x-text); background-color: var(--x-hover); }


/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .header { padding: 0 14px; height: var(--header-height-mobile); justify-content: center; }
    .header-logo__text-small { display: none; }
    .main-layout { padding: 14px 12px; }
    .header-menu { background-color: var(--x-bg); padding: 72px 16px 24px; justify-content: flex-start; align-items: stretch; }
    .header-menu__item { align-items: stretch; }
    .header-menu .sidebar-menu__item { font-size: 16px; padding: 12px 14px; }
    .header-menu .sidebar-menu__item.active::before { display: none; }
    .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row dense;
        align-items: start;
        gap: 12px 16px;
        padding: 14px 16px;
    }
    .row .column { width: auto !important; min-width: 0 !important; }
    .row .column .content { overflow-wrap: anywhere; }
    .row [class*="-column__fio"],
    .row [class*="-column__email"],
    .row [class*="-column__user_info"],
    .row [class*="-column__comment"],
    .row [class*="-column__text"] { grid-column: 1 / -1; }
    .row [class*="-column__actions"] {
        grid-column: 1 / -1;
        justify-content: flex-end !important;
        border-top: 1px solid var(--x-border);
        padding-top: 8px;
    }
    .calendar__view-month_days { grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: 10px; }
    .monthday-header { font-size: 10px; padding: 5px 4px 2px; flex-direction: column; align-items: flex-start; line-height: 1.2; }
    .monthday-lessons { padding: 2px 3px 5px; gap: 3px; }
    .monthday-lesson { padding: 3px 3px 3px 7px; border-radius: 5px; }
    .monthday-lesson__left_marker { left: 2px; width: 2px; }
    .monthday-lesson__time, .monthday-lesson__time * { font-size: 9.5px; white-space: normal; }
    .calendar__current-switcher__text { width: auto; min-width: 180px; font-size: 18px; }
    .chat { height: calc(100vh - var(--header-height-mobile) - 28px); grid-template-columns: 1fr; }
    .rlr-form { padding: 24px; }
    .calendar__view-monthday { min-height: 64px; }
}


/* ==========================================================================
   ЦВЕТНЫЕ АКЦЕНТЫ — яркие иконки и кнопки на тёмном фоне
   ========================================================================== */
:root {
    --c-yellow: #ffd60a;
    --c-amber:  #ffae00;
    --c-green:  #00e887;
    --c-teal:   #2dd4bf;
    --c-cyan:   #22d3ee;
    --c-blue:   #4f8cff;
    --c-violet: #a78bfa;
    --c-pink:   #ff5ca8;
    --c-orange: #ff8a3d;
    --c-red:    #ff3d5e;
    --c-lime:   #a3e635;
}
[data-theme="light"] {
    --c-yellow: #d9a800;
    --c-amber:  #e08a00;
    --c-green:  #00a864;
    --c-teal:   #0d9488;
    --c-cyan:   #0891b2;
    --c-blue:   #2563eb;
    --c-violet: #7c3aed;
    --c-pink:   #db2777;
    --c-orange: #ea580c;
    --c-red:    #e11d48;
    --c-lime:   #65a30d;
}

/* ---------- Сайдбар: иконки в цветных плашках ---------- */
.sidebar-menu__item { --c: var(--c-yellow); padding: 7px 10px; gap: 12px; }
.sidebar-menu__item i.fa-calendar-days      { --c: var(--c-yellow); }
.sidebar-menu__item i.fa-comments           { --c: var(--c-green); }
.sidebar-menu__item i.fa-credit-card        { --c: var(--c-cyan); }
.sidebar-menu__item i.fa-user-group         { --c: var(--c-blue); }
.sidebar-menu__item i.fa-people-line        { --c: var(--c-violet); }
.sidebar-menu__item i.fa-bell               { --c: var(--c-orange); }
.sidebar-menu__item i.fa-person-chalkboard  { --c: var(--c-pink); }
.sidebar-menu__item i.fa-user-gear          { --c: var(--c-teal); }
.sidebar-menu__item i.fa-book               { --c: var(--c-lime); }
.sidebar-menu__item i.fa-graduation-cap     { --c: var(--c-violet); }
.sidebar-menu__item i.fa-file               { --c: var(--c-cyan); }
.sidebar-menu__item i.fa-gear               { --c: var(--c-amber); }

.sidebar-menu__item i,
.sidebar-menu__item:hover i,
.sidebar-menu__item.active i,
[data-theme="light"] .sidebar-menu__item.active i {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--c);
    background-color: color-mix(in srgb, var(--c) 14%, transparent);
    transition: background-color .15s, color .15s, transform .15s;
}
.sidebar-menu__item:hover i {
    background-color: color-mix(in srgb, var(--c) 22%, transparent);
    transform: translateY(-1px);
}
.sidebar-menu__item.active i {
    color: #0a0a0a;
    background-color: var(--c);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent);
}
[data-theme="light"] .sidebar-menu__item.active i { color: #fff; }
.sidebar-menu__item.active {
    background-color: var(--x-hover);
    color: var(--x-text);
}
.sidebar-menu__item.active::before { display: none; }
.sidebar-menu__item:has(i.fa-comments)          { --c: var(--c-green); }
.sidebar-menu__item:has(i.fa-credit-card)       { --c: var(--c-cyan); }
.sidebar-menu__item:has(i.fa-user-group)        { --c: var(--c-blue); }
.sidebar-menu__item:has(i.fa-people-line)       { --c: var(--c-violet); }
.sidebar-menu__item:has(i.fa-bell)              { --c: var(--c-orange); }
.sidebar-menu__item:has(i.fa-person-chalkboard) { --c: var(--c-pink); }
.sidebar-menu__item:has(i.fa-user-gear)         { --c: var(--c-teal); }
.sidebar-menu__item:has(i.fa-book)              { --c: var(--c-lime); }
.sidebar-menu__item:has(i.fa-graduation-cap)    { --c: var(--c-violet); }
.sidebar-menu__item:has(i.fa-file)              { --c: var(--c-cyan); }
.sidebar-menu__item:has(i.fa-gear)              { --c: var(--c-amber); }
.sidebar-menu__item.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 85%);
}

/* ---------- Кнопки ---------- */
.btn.btn-primary {
    background: linear-gradient(135deg, var(--c-yellow), var(--c-amber));
    border: 1px solid transparent;
    color: #0a0a0a;
    box-shadow: 0 4px 16px rgba(255, 190, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.btn-primary:hover {
    background: linear-gradient(135deg, #ffe34d, #ffbf1f);
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(255, 190, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}
.btn.btn-primary i, .btn.btn-primary span { color: #0a0a0a !important; }

/* цветная «тонированная» кнопка: цвет задаётся через --c */
.btn.btn-primary-outline,
.btn.btn-secondary-outline,
.btn.btn-bright-outline,
.btn.btn-light,
.btn.btn-secondary {
    --c: var(--c-yellow);
    color: var(--x-text);
    background-color: color-mix(in srgb, var(--c) 9%, var(--x-surface));
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.btn.btn-primary-outline i,
.btn.btn-secondary-outline i,
.btn.btn-bright-outline i,
.btn.btn-light i,
.btn.btn-secondary i,
[data-theme="light"] .btn.btn-primary-outline i { color: var(--c); }
.btn.btn-primary-outline:hover,
.btn.btn-secondary-outline:hover,
.btn.btn-bright-outline:hover,
.btn.btn-light:hover,
.btn.btn-secondary:hover {
    color: var(--x-text);
    background-color: color-mix(in srgb, var(--c) 18%, var(--x-surface));
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    transform: translateY(-1px);
}
.btn.btn-bright-outline { --c: var(--c-blue); }

/* «Добавить …» — зелёная заливка */
.btn.btn-primary-outline:has(i.fa-plus) {
    background: linear-gradient(135deg, var(--c-green), var(--c-teal));
    border-color: transparent;
    color: #04130c;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--c-green) 25%, transparent);
}
.btn.btn-primary-outline:has(i.fa-plus) i,
.btn.btn-primary-outline:has(i.fa-plus) span { color: #04130c !important; }
.btn.btn-primary-outline:has(i.fa-plus):hover {
    filter: brightness(1.08);
    background: linear-gradient(135deg, var(--c-green), var(--c-teal));
    color: #04130c;
}
[data-theme="light"] .btn.btn-primary-outline:has(i.fa-plus),
[data-theme="light"] .btn.btn-primary-outline:has(i.fa-plus) i { color: #fff !important; }

.btn:has(i.fa-xmark)                 { --c: var(--c-red); }
.btn:has(i.fa-rotate)                { --c: var(--c-cyan); }
.btn:has(i.fa-link)                  { --c: var(--c-violet); }
.btn:has(i.fa-calendar-check)        { --c: var(--c-green); }
.btn:has(i[class*="fa-angle"])       { --c: var(--c-blue); }
.btn:has(i.fa-magnifying-glass)      { --c: var(--c-cyan); }

/* Кнопки вида календаря (День / Неделя / Месяц) и навигация */
.calendar__header .btn { --c: var(--c-yellow); }
.calendar__header .btn:has(i.fa-calendar-day)   { --c: var(--c-cyan); }
.calendar__header .btn:has(i.fa-calendar-week)  { --c: var(--c-violet); }
.calendar__header .btn:has(i.fa-calendar-days)  { --c: var(--c-yellow); }
.calendar__header .btn.btn-transparent i { color: var(--c); }
.calendar__header .btn.btn-transparent:hover {
    background-color: color-mix(in srgb, var(--c) 12%, transparent);
}
.calendar__header .btn:not(.btn-transparent):not(.btn-primary) {
    background-color: color-mix(in srgb, var(--c) 14%, var(--x-surface));
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
}

.btn.btn-danger {
    background: linear-gradient(135deg, var(--c-red), #ff6b3d);
    border-color: transparent;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--c-red) 28%, transparent);
}
.btn.btn-bright {
    background: linear-gradient(135deg, var(--c-blue), var(--c-violet));
    border-color: transparent;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--c-blue) 28%, transparent);
}

/* ---------- Вкладки: иконки цветные ---------- */
.tabs-tab { --c: var(--c-yellow); }
.tabs-tab i { color: color-mix(in srgb, var(--c) 75%, var(--x-mute)); }
.tabs-tab:nth-child(1) { --c: var(--c-yellow); }
.tabs-tab:nth-child(2) { --c: var(--c-blue); }
.tabs-tab:nth-child(3) { --c: var(--c-violet); }
.tabs-tab:nth-child(4) { --c: var(--c-green); }
.tabs-tab:nth-child(5) { --c: var(--c-cyan); }
.tabs-tab:nth-child(6) { --c: var(--c-pink); }
.tabs-tab.active i { color: var(--c); }
.tabs-tab.active {
    background-color: color-mix(in srgb, var(--c) 12%, var(--x-surface));
    border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
.tabs:not(.no_line) .tabs-tab.active { border-bottom-color: transparent; }

/* ---------- Шапка ---------- */
.header-menu__item-profile__text i {
    background: linear-gradient(135deg, var(--c-yellow), var(--c-pink));
    color: #0a0a0a;
}
.header-menu__item-logout i { color: var(--c-red); }
.header-menu__item-logout:hover { background-color: color-mix(in srgb, var(--c-red) 12%, transparent); }
.header-menu-button > * { color: var(--c-yellow); }

/* ---------- Списки ---------- */
[class*="-column__actions"] .action {
    color: var(--c-red) !important;
    background-color: color-mix(in srgb, var(--c-red) 10%, transparent) !important;
}
[class*="-column__actions"] .action:hover {
    color: #fff !important;
    background-color: var(--c-red) !important;
}
.row { position: relative; overflow: hidden; }
.row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-yellow), var(--c-pink));
    opacity: 0;
    transition: opacity .15s;
}
.row:hover::before { opacity: 1; }
.student-column__fio .content,
.teacher-column__fio .content,
.admin-column__fio .content { font-weight: 600; }
.teacher-column__fio .content::before,
.student-column__fio .content::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    margin-right: 8px;
    background: var(--c-green);
    box-shadow: 0 0 8px color-mix(in srgb, var(--c-green) 60%, transparent);
}

/* ---------- Чат ---------- */
.chat__dialog-avatar,
.chat-thread__avatar,
[data-theme="light"] .chat__dialog-avatar,
[data-theme="light"] .chat-thread__avatar {
    border: none;
    color: #0a0a0a;
    background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
}
.chat__dialog:nth-child(4n+2) .chat__dialog-avatar { background: linear-gradient(135deg, var(--c-green), var(--c-teal)); }
.chat__dialog:nth-child(4n+3) .chat__dialog-avatar { background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); }
.chat__dialog:nth-child(4n+4) .chat__dialog-avatar { background: linear-gradient(135deg, var(--c-pink), var(--c-orange)); }
.chat-message__sender { color: var(--c-yellow); }
.chat-composer__send {
    background: linear-gradient(135deg, var(--c-yellow), var(--c-amber)) !important;
    box-shadow: 0 4px 16px rgba(255, 190, 0, 0.25);
}
.chat-composer__attach { color: var(--c-cyan); }
.chat-attachment i { color: var(--c-cyan); }

/* ---------- Прочее ---------- */
.theme-switcher__selector { background: linear-gradient(135deg, var(--c-yellow), var(--c-amber)); }
.page-title-line { background: linear-gradient(90deg, var(--c-yellow), var(--c-pink)); width: 56px; }
.options-divider { border-bottom: 1px solid var(--x-border); position: relative; }
.options-divider::after {
    content: "";
    position: absolute; left: 0; bottom: -1px;
    width: 48px; height: 2px;
    background: linear-gradient(90deg, var(--c-yellow), var(--c-pink));
}
.checkbox input:checked ~ .checkmark { background: linear-gradient(135deg, var(--c-green), var(--c-teal)) !important; border-color: transparent !important; }
.btn.btn-secondary-outline, .btn.btn-secondary { --c: var(--x-mute); }