/**
 * ND54 — единая дизайн-система (общий слой для сайта и кабинетов).
 * Требует предварительного подключения nd54-tokens.css (через nd54_compat_head_assets).
 * Legacy: nd54-theme.css, nd54-lively.css — не расширять, постепенно мигрировать сюда.
 */

/* --- Кнопки --- */
.nd54-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--nd54-radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--nd54-transition), color var(--nd54-transition), box-shadow var(--nd54-transition), transform var(--nd54-transition);
}

.nd54-btn:focus-visible {
    outline: 2px solid var(--nd54-primary);
    outline-offset: 2px;
}

.nd54-btn--primary {
    background: var(--nd54-primary);
    color: #fff;
    box-shadow: var(--nd54-shadow-sm);
}

.nd54-btn--primary:hover {
    background: var(--nd54-primary-dark);
    color: #fff;
}

.nd54-btn--outline-light {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.nd54-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* --- Карточки --- */
.nd54-card {
    background: var(--nd54-surface);
    border: 1px solid var(--nd54-border);
    border-radius: var(--nd54-radius-xl);
    box-shadow: var(--nd54-shadow);
}

/* --- Chip / badge --- */
.nd54-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--nd54-surface-muted);
    color: var(--nd54-text);
    border: 1px solid var(--nd54-border);
}

/* --- Приоритеты (L1–L4) — для будущей иерархии, без правок кабинетов --- */
.nd54-priority-l1 { box-shadow: var(--nd54-shadow-lg); }
.nd54-priority-l2 { opacity: 1; }
.nd54-priority-l3 { opacity: 0.94; font-size: 0.95em; }
.nd54-priority-l4 { opacity: 0.88; font-size: 0.9em; }

/* --- Скелетон загрузки --- */
.nd54-skeleton-block {
    border-radius: var(--nd54-radius);
    background: linear-gradient(90deg, #edf2fb 0%, #dde7f9 50%, #edf2fb 100%);
    background-size: 220% 100%;
    animation: nd54SkeletonFlow 1.2s linear infinite;
}

@keyframes nd54SkeletonFlow {
    0% { background-position: 200% 0; }
    100% { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nd54-btn,
    .nd54-skeleton-block {
        transition: none !important;
        animation: none !important;
    }
}