/*
 * Служебные страницы: ошибка (404, 403, 500…).
 */
.err {
    max-width: 560px;
    margin: var(--space-8) auto var(--space-12);
    text-align: center;
}
.err__code {
    font-size: clamp(5rem, 3rem + 10vw, 9rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.err__title {
    margin: var(--space-4) 0 var(--space-3);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.err__text {
    margin: 0 auto;
    max-width: 440px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}
.err__detail {
    margin: var(--space-3) auto 0;
    max-width: 440px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.err__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.err__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 48px;
    padding: 0 var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.err__btn:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}
.err__btn--primary {
    border-color: transparent;
    background: var(--gradient-brand);
    color: #fff;
}
.err__btn--primary:hover {
    border-color: transparent;
    background: var(--gradient-brand-hover);
    color: #fff;
}
.err__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.err__links {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}
.err__links-title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.err__links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.err__links a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
}
.err__links a:hover {
    background: var(--color-bg-muted);
}
@media (max-width: 575.98px) {
    .err {
        margin-top: var(--space-4);
    }
    .err__btn {
        flex: 1 1 100%;
    }
}
.err-suggest {
    margin-top: calc(var(--space-6) * -1);
}
.err-suggest .cat-section-title {
    text-align: center;
}

/* «Настройки» в меню пользователя — теперь ссылка на /user/edit, а не кнопка */
a.user-menu-btn-item {
    color: inherit;
    text-decoration: none;
}

/* Подсказка «Подключите Telegram» под шапкой (layouts/main.php) */
.tg-hint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}
.tg-hint svg {
    flex-shrink: 0;
    color: #229ED9;
}
.tg-hint strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}
.tg-hint__text {
    flex: 1;
    min-width: 0;
}
.tg-hint__cta {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: #229ED9;
    color: #fff;
    font-weight: var(--font-weight-semibold);
}
.tg-hint:hover {
    color: var(--color-text-secondary);
}
.tg-hint:hover .tg-hint__cta {
    background: #1B8BC2;
}
@media (max-width: 575.98px) {
    .tg-hint__cta {
        display: none;
    }
}

/* Кнопка пустого состояния (includes/_empty_state.php) */
.empty-state__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    padding: 0 var(--space-6);
    text-decoration: none;
}
.empty-state__cta:hover {
    color: #fff;
}