body.training-mode-active [data-train] {
    outline: 1px dashed color-mix(in srgb, var(--tl-accent) 75%, var(--tl-primary));
    outline-offset: -3px;
    border-radius: var(--tl-radius-sm);
    cursor: help;
}

body.training-mode-active [data-train].btn:hover:not(:disabled):not(.btn-link),
body.training-mode-active [data-train].btn:focus-visible:not(:disabled):not(.btn-link),
body.training-mode-active [data-train].nav-link:hover,
body.training-mode-active [data-train].type-card:hover,
body.training-mode-active [data-train].placement-card:hover,
body.training-mode-active [data-train].size-card:hover {
    transform: none;
}

body.training-mode-active .admin-actions [data-train],
body.training-mode-active .d-flex.gap-1 [data-train],
body.training-mode-active .d-flex.gap-2 [data-train],
body.training-mode-active .d-flex.flex-wrap.gap-2 [data-train] {
    position: relative;
    z-index: 1;
}

body.training-mode-active [data-train]:hover,
body.training-mode-active [data-train]:focus-visible {
    z-index: 2;
}

.training-mode-banner {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tl-accent) 22%, #fff), color-mix(in srgb, var(--survey-primary) 12%, #fff));
    border: 1px solid color-mix(in srgb, var(--tl-accent) 45%, var(--tl-border));
    border-radius: var(--tl-radius);
    padding: .55rem .85rem;
    font-size: .84rem;
    color: var(--tl-dark);
    margin-bottom: 1rem;
}

.training-mode-nav-btn {
    font-size: .8rem !important;
    padding: .35rem .65rem !important;
    border-radius: var(--tl-radius-sm) !important;
    white-space: nowrap;
    margin-right: .35rem;
}

#training-tip {
    position: fixed;
    z-index: 4000;
    max-width: min(360px, calc(100vw - 24px));
    padding: .7rem .9rem;
    background: var(--tl-dark);
    color: #f4f8fa;
    border-radius: var(--tl-radius);
    box-shadow: 0 12px 32px rgba(33, 59, 76, .28);
    font-size: .84rem;
    line-height: 1.5;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--tl-ease);
    will-change: left, top;
}

#training-tip.visible {
    opacity: 1;
}

#training-tip::before {
    content: 'Подсказка';
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tl-accent) 85%, #fff);
    margin-bottom: .35rem;
}