:root {
    /* Нейтральные поверхности: от фона приложения к активному контролу. */
    --background-canvas: rgb(34, 34, 34);
    --background-deep: rgb(26, 26, 26);
    --background-panel: rgb(40, 40, 40);
    --background-field: rgb(56, 56, 56);
    --background-inset: rgb(32, 32, 32);
    --background-control: rgb(74, 74, 74);
    --background-muted: rgb(60, 60, 60);
    --background-control-hover: rgb(102, 102, 102);
    --background-control-active: rgb(51, 51, 51);
    --background-control-disabled: rgb(50, 50, 50);
    --background-control-muted-hover: rgb(45, 45, 45);

    /* Локальные роли полей: они сохраняют различимость составных input. */
    --background-field-dark: rgb(48, 48, 48);
    --background-handle: rgb(52, 52, 52);
    --background-suggestion-hover: rgb(80, 80, 80);
    --background-scrollbar-thumb: rgb(100, 100, 100);
    --background-scrollbar-thumb-hover: rgb(120, 120, 120);
    --background-warning: rgb(204, 102, 102);
    --background-blocked: repeating-linear-gradient(
        -45deg,
        rgb(50, 50, 50) 0px,
        rgb(50, 50, 50) 10px,
        rgb(46, 46, 46) 10px,
        rgb(46, 46, 46) 20px
    );
    --background-passive: repeating-linear-gradient(
        -45deg,
        rgb(62, 62, 62) 0px,
        rgb(62, 62, 62) 10px,
        rgb(54, 54, 54) 10px,
        rgb(54, 54, 54) 20px
    );
    --background-badge-active: rgb(44, 44, 44);
    --background-emphasis: rgb(46, 46, 46);
    --background-row-hover: rgb(58, 58, 58);
    --background-strong-inset: rgb(24, 24, 24);
    --background-status-idle: rgb(66, 66, 66);
    --background-status-active: rgb(180, 180, 180);
    --background-overlay-hover: rgba(255, 255, 255, 0.1);
    --background-backdrop: rgba(0, 0, 0, 0.4);
    --background-notification-success: #4CAF50;
    --background-notification-error: #f44336;
    --background-notification-warning: #ff9800;
    --background-notification-info: #2196F3;
    --background-scrollbar-global-thumb: rgba(255, 255, 255, 0.2);
    --background-scrollbar-global-thumb-hover: rgba(255, 255, 255, 0.3);
    --background-scrollbar-global-thumb-active: rgba(255, 255, 255, 0.4);
    --background-bar-thumb: rgb(220, 220, 220);
    --background-bar-base: repeating-linear-gradient(
        -45deg,
        rgb(30, 30, 30) 0px,
        rgb(30, 30, 30) 4px,
        rgb(34, 34, 34) 4px,
        rgb(34, 34, 34) 8px
    );

    /* Функциональные цвета bar: не участвуют в HSL-градиентах ColorBar. */
    --color-bar-success: #51cf66;
    --color-bar-positive: hsl(120, 60%, 50%);
    --color-bar-negative: hsl(0, 60%, 50%);

    /* Границы нейтральных материалов. */
    --border-structural: 1px solid rgb(50, 50, 50);
    --border-field: 1px solid rgb(66, 66, 66);
    --border-overlay: 1px solid rgb(86, 86, 86);
    --border-suggestion: 1px solid rgb(100, 100, 100);
    --border-divider: 1px solid rgb(80, 80, 80);
    --border-embed-accent: 4px solid rgb(92, 92, 92);
    --border-card-accent: 4px solid rgb(95, 95, 95);
    --border-structural-dark: 1px solid rgb(38, 38, 38);
    --border-form-control: 2px solid rgb(100, 100, 100);
    --border-form-control-hover: 2px solid rgb(120, 120, 120);
    --border-form-control-selected: 2px solid rgb(196, 196, 196);
    --border-focus: 2px solid #4d90fe;
    --border-table: 1px solid rgb(60, 60, 60);

    /* Базовые уровни elevation. */
    --shadow-field: 0 0 3px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-floating: 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-selection: 0 0 0 3px rgb(150, 150, 150);
    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-embed-hover: 0 6px 22px rgba(0, 0, 0, 0.5);
    --shadow-box-hover: 0 8px 25px rgba(0, 0, 0, 0.5);
    --shadow-image-fade-hover: -10px 0 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-shell: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-inset-raised: inset 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-inset-seam: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-flanking: 2px 0 6px rgba(0, 0, 0, 0.4);
    --shadow-bar-thumb-ring: 0 0 0 4px rgb(56, 56, 56);
    --shadow-attachment-hover: 0 3px 9px rgba(0, 0, 0, 0.4);
    --shadow-notification: 0 3px 10px rgba(0, 0, 0, 0.2);
    --shadow-raised-subtle: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-snackbar-hover: 0 3px 9px rgba(0, 0, 0, 0.3);
    --shadow-embed-handle: 0 -2px 4px rgba(0, 0, 0, 0.2);
    --shadow-form-focus: 0 0 3px rgba(77, 144, 254, 0.5);
    --outline-bar-focus: 2px solid white;

    /* Направленные тени для верхнего и нижнего стыка соседних поверхностей. */
    --shadow-seam-upper: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-seam-lower: 0 -1px 3px rgba(0, 0, 0, 0.4);
    --shadow-seam-lower-raised: 0 -2px 6px rgba(0, 0, 0, 0.4);
    --shadow-seam-lower-floating: 0 -4px 10px rgba(0, 0, 0, 0.4);

    /* Переходы нейтральных материалов; их можно объединять в component CSS. */
    --transition-background-fast: background-color 0.2s ease;
    --transition-background: background-color 0.3s ease;
    --transition-shadow: box-shadow 0.3s ease;
    --transition-shadow-slow: box-shadow 0.5s ease;
    --transition-transform-press: transform 0.1s ease;
    --transition-transform: transform 0.3s ease;
    --transition-transform-slow: transform 0.5s ease;
    --transition-card: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, min-height 0.4s ease;
    --transition-overlay: all 0.3s ease-in-out;
    --transition-notification: transform 0.2s ease-out, opacity 0.2s;
    --transition-snackbar: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    --transition-color-fast: color 0.2s ease;
    --transition-scrollbar: background 0.2s ease;
    --transition-form-control: all 0.3s ease;
    --transition-tooltip: opacity 0.2s ease, visibility 0.2s ease;

    /* Глобальная foreground-палитра. */
    --color-text: rgba(255, 255, 255, 0.70);
    --color-link: #b0b0b0;
    --color-link-hover: #ffffff;
    --color-link-active: #cccccc;
    --color-form-control-selected: rgb(196, 196, 196);
}

/*
 * Материал применяется парой классов: .material.material--<variant>.
 * Компонент хранит свою семантику и геометрию, материал — нейтральную поверхность.
 * Legacy-классы Button временно связаны с material--control, чтобы покрыть
 * статическую разметку и JS-генераторы без изменения buttons.css.
 */
.material,
.regular_button,
.icon_button {
    background-color: var(--material-background);
    border: var(--material-border);
    box-shadow: var(--material-shadow);
    transition: var(--material-transition);
}

/* Базовые поверхности и структурные оболочки. */
.material--canvas {
    --material-background: var(--background-canvas);
    --material-border: none;
    --material-shadow: none;
    --material-transition: none;
}

.material--deep {
    --material-background: var(--background-deep);
    --material-border: none;
    --material-shadow: none;
    --material-transition: none;
}

.material--panel {
    --material-background: var(--background-panel);
    --material-border: var(--border-structural);
    --material-shadow: var(--shadow-raised);
    --material-transition: var(--transition-shadow);
}

/* Поля и интерактивные поверхности. */
.material--field {
    --material-background: var(--background-field);
    --material-border: var(--border-field);
    --material-shadow: var(--shadow-field);
    --material-transition: var(--transition-shadow);
}

.material--control,
.regular_button,
.icon_button {
    --material-background: var(--background-control);
    --material-border: none;
    --material-shadow: none;
    --material-transition: var(--transition-background), var(--transition-transform);
}

.material--control:hover,
.regular_button:hover,
.icon_button:hover {
    --material-background: var(--background-control-hover);
    background-color: var(--material-background);
}

.material--control:active,
.regular_button:active,
.icon_button:active {
    --material-background: var(--background-control-active);
    background-color: var(--material-background);
}

.material--control-disabled,
.regular_button.disabled,
.icon_button.disabled-button {
    --material-background: var(--background-control-disabled);
    background-color: var(--material-background);
}

.material--control-muted {
    --material-background: var(--background-muted);
    --material-border: none;
    --material-shadow: none;
    --material-transition: var(--transition-background);
}

.material--inset {
    --material-background: var(--background-inset);
    --material-border: none;
    --material-shadow: none;
    --material-transition: none;
}

/* Приподнятые, overlay- и информационные поверхности. */
.material--card {
    --material-background: var(--background-control);
    --material-border: none;
    --material-shadow: var(--shadow-raised);
    --material-transition: var(--transition-transform), var(--transition-shadow);
}

.material--overlay {
    --material-background: var(--background-canvas);
    --material-border: var(--border-structural);
    --material-shadow: var(--shadow-raised);
    --material-transition: var(--transition-shadow);
}

.material--notice {
    --material-background: var(--background-field);
    --material-border: var(--border-overlay);
    --material-shadow: var(--shadow-raised);
    --material-transition: var(--transition-transform), var(--transition-shadow);
}

.material--floating {
    --material-background: var(--background-control);
    --material-border: var(--border-overlay);
    --material-shadow: var(--shadow-floating);
    --material-transition: var(--transition-shadow);
}

/* Legacy-привязки Chip: материал управляет поверхностью, не геометрией частей. */
.chip-part {
    background-color: var(--background-control);
    border: none;
    box-shadow: none;
    transition:
        border-radius 0.3s ease,
        margin 0.3s ease,
        padding 0.3s ease,
        var(--transition-background);
}

.chip-part--dark {
    background-color: var(--background-muted);
}

.chip--clickable:hover .chip-part {
    background-color: var(--background-control-hover);
}

.chip--clickable:hover .chip-part--dark {
    background-color: var(--background-control-muted-hover);
}

.chip-hidden-part {
    background-color: var(--background-control);
    border: none;
    box-shadow: none;
    transition:
        border-radius 0.3s ease,
        margin 0.3s ease,
        var(--transition-background);
}

.chip-hidden-part:hover {
    background-color: var(--background-control-hover);
}

.chip-hidden-part:active {
    background-color: var(--background-control-active);
}

.chip--active {
    box-shadow: var(--shadow-selection);
}

/* Legacy-привязки Grip: вторичный control с локальной механикой раскрытия. */
.grip {
    background-color: var(--background-muted);
    border: none;
    box-shadow: none;
    transition:
        height 0.3s ease,
        var(--transition-background),
        var(--transition-transform);
}

.grip--dark {
    background-color: var(--background-deep);
}

.grip-hint-point {
    background-color: var(--background-control);
}

/*
 * Legacy-привязки input-семейства: textareas.css по-прежнему описывает
 * геометрию, типографику и расположение, а поверхности собраны здесь.
 */
.input-box {
    background-color: var(--background-field);
    border: var(--border-field);
    box-shadow: var(--shadow-field);
}

.input-box--dark {
    background-color: var(--background-field-dark);
    border: var(--border-structural);
}

.input-box--upper {
    box-shadow: var(--shadow-seam-upper);
}

.input-box--lower {
    box-shadow: var(--shadow-seam-lower);
}

.input-addon,
.input-prefix {
    background-color: var(--background-control);
    border: none;
    box-shadow: none;
}

.input-handle-filler,
.input-handle {
    background-color: var(--background-handle);
    border: none;
    box-shadow: none;
}

.search-suggestions-list {
    background-color: var(--background-muted);
    border: var(--border-suggestion);
    box-shadow: none;
}

.search-suggestion-item {
    border-bottom: var(--border-divider);
}

.search-suggestion-item:hover {
    background-color: var(--background-suggestion-hover);
}

.search-suggestions-list::-webkit-scrollbar-track {
    background-color: var(--background-control-disabled);
}

.search-suggestions-list::-webkit-scrollbar-thumb {
    background-color: var(--background-scrollbar-thumb);
}

.search-suggestions-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--background-scrollbar-thumb-hover);
}

/*
 * Legacy-привязки embed-семейства: классы компонентов сохраняют свою
 * структуру, а materials управляет поверхностями, elevation и состояниями.
 */
.embed {
    background-color: var(--background-control);
    border-left: var(--border-embed-accent);
    box-shadow: var(--shadow-raised);
    transition: var(--transition-transform-slow), var(--transition-shadow-slow);
}

.embed:hover {
    box-shadow: var(--shadow-embed-hover);
}

.embed-image-container {
    box-shadow: none;
    transition: var(--transition-shadow-slow);
}

.image-fade:hover img {
    box-shadow: var(--shadow-image-fade-hover);
}

.embed .chip[data-type="content_warning"],
.embed .chip[data-type="content_warning"]:hover {
    background-color: var(--background-warning);
}

.embed-header-chip {
    background-color: var(--background-muted);
    border: none;
    box-shadow: none;
}

.card {
    background-color: var(--background-control);
    border-left: var(--border-card-accent);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

.box {
    background-color: var(--background-control);
    border: none;
    box-shadow: var(--shadow-raised);
    transition: var(--transition-transform), var(--transition-shadow);
}

.box-blocked {
    background: var(--background-blocked);
}

.box-passive {
    background: var(--background-passive);
}

.box:hover {
    box-shadow: var(--shadow-box-hover);
}

.box-passive:hover,
.box-blocked:hover {
    box-shadow: none;
}

/*
 * Legacy-привязки badges и rows: materials управляет слоями поверхности,
 * status-точками и elevation, не вмешиваясь в размеры и компоновку.
 */
.badge {
    background-color: var(--background-canvas);
    border: none;
    box-shadow: none;
    transition: var(--transition-background), width 0.4s ease;
}

.badge-active {
    background-color: var(--background-badge-active);
}

.badge-small:hover {
    background-color: var(--background-field);
}

.badge--dark {
    background-color: var(--background-inset);
}

.badge-avatar {
    background-color: var(--background-emphasis);
}

.badge-status-point-main {
    background-color: var(--background-canvas);
}

.badge-status-point-additional {
    background-color: var(--background-status-idle);
}

.badge-body {
    background-color: var(--background-canvas);
    box-shadow: var(--shadow-seam-lower-raised);
    transition: var(--transition-shadow-slow), margin 0.5s ease;
}

.badge:hover .badge-body {
    box-shadow: var(--shadow-seam-lower-floating);
}

.badge-additional-body {
    background-color: var(--background-canvas);
    box-shadow: var(--shadow-seam-lower);
    transition: var(--transition-shadow-slow), margin 0.5s ease;
}

.badge:hover .badge-additional-body {
    box-shadow: var(--shadow-seam-lower-raised);
}

.badge-signs-chip {
    background-color: var(--background-strong-inset);
    border: none;
    box-shadow: var(--shadow-seam-lower-raised);
    transition: var(--transition-shadow-slow);
}

.badge:hover .badge-signs-chip {
    box-shadow: var(--shadow-seam-lower-floating);
}

.badge-big .badge-avatar-container,
.portrait-big .badge-avatar-container {
    box-shadow: var(--shadow-seam-lower-raised);
    transition: var(--transition-shadow-slow);
}

.badge-big:hover .badge-avatar-container {
    box-shadow: var(--shadow-seam-lower-floating);
}

.portrait {
    background-color: var(--background-control);
    border: none;
    box-shadow: var(--shadow-seam-upper);
    transition: var(--transition-background);
}

.portrait:hover {
    background-color: var(--background-control-hover);
}

.chat-indicator--active {
    background-color: var(--background-status-active);
}

.advanced-row {
    background-color: var(--background-panel);
    border: none;
    box-shadow: none;
    transition: var(--transition-background), margin 0.4s ease, border-radius 0.6s ease;
}

.advanced-row-holder:hover .advanced-row {
    background-color: var(--background-row-hover);
}

.advanced-row-holder--active .advanced-row {
    background-color: var(--background-emphasis);
}

/*
 * Legacy-привязки structure: глобальная раскладка остаётся в structure.css,
 * а нейтральные поверхности shell-слоёв централизованы в materials.
 */
body {
    background-color: var(--background-canvas);
}

.divider {
    background-color: var(--background-muted);
}

.body-box-dark {
    background-color: var(--background-deep);
    border-bottom: var(--border-structural-dark);
    box-shadow: var(--shadow-shell);
}

.body-box-main {
    background-color: var(--background-panel);
    border-top: var(--border-structural);
    border-right: var(--border-structural);
    border-left: var(--border-structural);
    box-shadow: var(--shadow-inset-raised);
}

.body-box-flanking {
    background-color: var(--background-canvas);
    border: var(--border-structural);
    box-shadow: var(--shadow-flanking);
}

/* Legacy-привязки Drawer: поверхность появляется только у divider и link. */
.drawer-title-divider {
    background-color: var(--background-control-disabled);
}

.drawer-chapters-link {
    background-color: transparent;
    border: none;
    box-shadow: none;
    transition: var(--transition-background);
}

.drawer-chapters-link:hover {
    background-color: var(--background-overlay-hover);
}

/*
 * Legacy-привязки Bars и Slotbar: геометрия шкал, thumb и частей slot
 * остаётся в исходных CSS, materials хранит их нейтральные поверхности.
 */
.horizontal-bar-filled,
.bar-marker,
.vertical-bar-deviation {
    background-color: var(--color-bar-success);
}

.horizontal-bar-empty {
    background-color: var(--background-strong-inset);
}

.bar-thumb {
    background-color: var(--background-bar-thumb);
    border: none;
    box-shadow: none;
}

.colorbar .bar-thumb {
    box-shadow: var(--shadow-bar-thumb-ring);
}

.colorbar .bar-thumb:focus-visible {
    outline: var(--outline-bar-focus);
}

.deviation-positive {
    background-color: var(--color-bar-positive);
}

.deviation-negative {
    background-color: var(--color-bar-negative);
}

.vertical-bar-base {
    background: var(--background-bar-base);
}

.slot-part,
.slot-gap {
    background-color: var(--background-inset);
    border: none;
    box-shadow: none;
}

.slot-gap-upper-element,
.slot-gap-bottom-element {
    background-color: var(--background-field);
    border: none;
    box-shadow: none;
}

/* Legacy-привязки Popover и Popup: overlay-механика остаётся в их CSS. */
.popover,
.popup {
    background-color: var(--background-canvas);
    border: var(--border-structural);
    box-shadow: var(--shadow-raised);
}

.popup-overlay {
    background-color: var(--background-backdrop);
    backdrop-filter: blur(4px);
    transition: var(--transition-overlay);
}

.popup-box-main {
    background-color: var(--background-panel);
    border-top: var(--border-structural);
    box-shadow: var(--shadow-inset-seam);
}

.popup-horizontal-divider {
    background-color: var(--background-control-disabled);
}

/* Legacy-привязки Message и Attachment: pending/preview остаются локальными. */
.message {
    background-color: var(--background-control);
    border: none;
    box-shadow: var(--shadow-seam-upper);
}

.attachment {
    background-color: var(--background-row-hover);
    border: none;
    box-shadow: var(--shadow-seam-upper);
    transition: var(--transition-transform), var(--transition-shadow);
}

.attachment:hover {
    box-shadow: var(--shadow-attachment-hover);
}

/* Legacy-привязки Notification и Snackbar: показ/скрытие остаётся локальным. */
.notification {
    background-color: var(--background-control);
    border: none;
    box-shadow: var(--shadow-notification);
    transition: var(--transition-notification);
}

.notification.success {
    background: var(--background-notification-success);
}

.notification.error {
    background: var(--background-notification-error);
}

.notification.warning {
    background: var(--background-notification-warning);
}

.notification.info {
    background: var(--background-notification-info);
}

.snackbar-box {
    background-color: var(--background-field);
    border: var(--border-overlay);
    box-shadow: var(--shadow-raised-subtle);
    transition: var(--transition-snackbar);
}

.snackbar-box:hover {
    box-shadow: var(--shadow-snackbar-hover);
}

.snackbar-button {
    background-color: var(--background-control);
    border: none;
    box-shadow: none;
    transition: var(--transition-background), var(--transition-transform);
}

.snackbar-button:hover {
    background-color: var(--background-control-hover);
}

.snackbar-button:active {
    background-color: var(--background-control-active);
}

/* Legacy-привязки Embed handle: passive-hover сохраняет исходное поведение. */
.embed-handle {
    background-color: var(--background-control);
    border: none;
    box-shadow: var(--shadow-embed-handle);
    transition: var(--transition-background);
}

.embed-handle:not(.embed-handle--passive):hover {
    background-color: var(--background-overlay-hover);
}

.embed-handle--passive {
    background-color: var(--background-control-disabled);
}

/* Legacy-привязки body: типографика и font-face остаются в body.css. */
body {
    --text-color: var(--color-text);
    --link-color: var(--color-link);
    color: var(--color-text);
}

a {
    color: var(--color-link);
    transition: var(--transition-color-fast);
}

a:hover {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-active);
}

code,
pre {
    background-color: var(--background-muted);
    border: none;
    box-shadow: none;
}

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

::-webkit-scrollbar-thumb {
    background: var(--background-scrollbar-global-thumb);
    transition: var(--transition-scrollbar);
}

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

::-webkit-scrollbar-thumb:active {
    background: var(--background-scrollbar-global-thumb-active);
}

* {
    scrollbar-color: var(--background-scrollbar-global-thumb) transparent;
}

/* Legacy-привязки Form: text-label остаётся ответственностью body.css. */
.checkmark,
.radiomark {
    background-color: var(--background-muted);
    border: var(--border-form-control);
    box-shadow: none;
    transition: var(--transition-form-control);
}

.form-checkbox:hover .checkmark,
.form-radio:hover .radiomark {
    background-color: var(--background-suggestion-hover);
    border: var(--border-form-control-hover);
}

.form-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: var(--background-control);
    border: var(--border-form-control-selected);
}

.form-radio input[type="radio"]:checked + .radiomark {
    border: var(--border-form-control-selected);
}

.form-checkbox input[type="checkbox"]:checked + .checkmark::after,
.form-radio input[type="radio"]:checked + .radiomark::after {
    color: var(--color-form-control-selected);
}

.form-radio input[type="radio"]:checked + .radiomark::after {
    background-color: var(--color-form-control-selected);
}

.form-checkbox input[type="checkbox"]:focus + .checkmark,
.form-radio input[type="radio"]:focus + .radiomark {
    border: var(--border-focus);
    box-shadow: var(--shadow-form-focus);
}

.form-checkbox.disabled .checkmark,
.form-radio.disabled .radiomark {
    background-color: var(--background-suggestion-hover);
    border: var(--border-form-control);
}

/* Legacy-привязки Dropdown: размещение и открытие остаются в dropdowns.js. */
.dropdown {
    background-color: var(--background-emphasis);
    border: var(--border-suggestion);
    box-shadow: var(--shadow-raised-subtle);
}

/* Legacy-привязки Tooltip: позиционирование и visibility остаются локальными. */
.tooltip {
    background-color: var(--background-control);
    border: var(--border-overlay);
    box-shadow: var(--shadow-floating);
    transition: var(--transition-tooltip);
}

/* Legacy-привязки Table: модуль используется только на overview stop-странице. */
table {
    background-color: var(--background-control);
    border: none;
    box-shadow: none;
}

th,
td {
    border: var(--border-table);
    box-shadow: none;
}

th,
tfoot td {
    background-color: var(--background-control-active);
}

tbody tr:hover {
    background-color: var(--background-control-hover);
    transition: var(--transition-background-fast);
}