/* ============================================================
   БАРАХОЛКА72 — REFRESH 2026
   Современный «реалистичный» слой поверх app.css.
   Подключается ПОСЛЕ app.css и мягко переопределяет оформление:
   многослойные тени, глубина, стекло, аккуратные градиенты,
   микроанимации. Ничего не ломает — только улучшает вид.
   ============================================================ */

/* ------------------------------------------------------------
   1. ТОКЕНЫ ДИЗАЙНА
   ------------------------------------------------------------ */
:root {
    /* Глубина: реалистичные многослойные тени */
    --shadow-xs: 0 1px 2px rgba(28, 20, 10, .05);
    --shadow-sm: 0 1px 3px rgba(28, 20, 10, .07), 0 1px 2px rgba(28, 20, 10, .04);
    --shadow-md: 0 4px 8px -2px rgba(28, 20, 10, .08), 0 2px 4px -2px rgba(28, 20, 10, .05);
    --shadow-lg: 0 12px 20px -6px rgba(28, 20, 10, .10), 0 4px 8px -4px rgba(28, 20, 10, .05);
    --shadow-xl: 0 24px 38px -12px rgba(28, 20, 10, .14), 0 8px 14px -8px rgba(28, 20, 10, .07);

    /* Акцент: добавляем глубокий тон для градиентов */
    --accent-3: #d95a00;
    --accent-soft: rgba(239, 108, 0, .10);
    --ring: 0 0 0 3px rgba(239, 108, 0, .16);

    /* Поверхности */
    --surface: #ffffff;
    --surface-2: #fbfaf7;
    --hairline: rgba(28, 20, 10, .07);

    /* Радиусы */
    --radius-xs: 8px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    /* Плавность */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 20px -6px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .4);
    --shadow-xl: 0 24px 38px -12px rgba(0, 0, 0, .7), 0 8px 14px -8px rgba(0, 0, 0, .5);
    --accent-3: #ff7a1a;
    --accent-soft: rgba(255, 143, 46, .14);
    --ring: 0 0 0 3px rgba(255, 143, 46, .22);
    --surface: #1e1b17;
    --surface-2: #232019;
    --hairline: rgba(255, 255, 255, .07);
}

/* ------------------------------------------------------------
   2. БАЗА: фон, типографика, скроллбар
   ------------------------------------------------------------ */
body {
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(255, 183, 77, .16), transparent 60%),
        radial-gradient(900px 500px at 92% 4%, rgba(239, 108, 0, .10), transparent 55%),
        linear-gradient(180deg, #fbfaf7 0%, #f4f1ea 100%);
    background-attachment: fixed;
    letter-spacing: -.005em;
}
[data-theme="dark"] body {
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(255, 143, 46, .10), transparent 60%),
        radial-gradient(900px 500px at 92% 4%, rgba(255, 143, 46, .06), transparent 55%),
        linear-gradient(180deg, #17140f 0%, #100e0b 100%);
    background-attachment: fixed;
}

/* Аккуратный скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* Заголовки — плотнее и выразительнее */
h1, h2, h3, .page-title, .hero h1, .listing-h1 {
    letter-spacing: -.025em;
    text-wrap: balance;
}
.page-title {
    font-weight: 900;
    background: linear-gradient(180deg, var(--text) 55%, color-mix(in srgb, var(--text) 72%, transparent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Внутри заголовка могут быть кнопки/ссылки/иконки — им градиент не нужен,
   иначе текст становится прозрачным (баг с кнопкой «Позвонить»). */
.page-title .btn,
.page-title a,
.page-title button,
.page-title .badge-count,
.page-title .ti {
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}
.page-title .btn-accent { color: #fff; }
.page-title .btn:not(.btn-accent) { color: var(--text); }

/* ------------------------------------------------------------
   3. ШАПКА: стекло + глубина
   ------------------------------------------------------------ */
.header {
    background: color-mix(in srgb, var(--bg-2) 78%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, var(--shadow-xs);
}
[data-theme="dark"] .header {
    background: color-mix(in srgb, var(--bg-2) 80%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--shadow-xs);
}
.logo { letter-spacing: -.04em; }
.logo-icon {
    filter: drop-shadow(0 2px 4px rgba(239, 108, 0, .35));
    transition: transform .35s var(--ease-out);
}
.logo:hover .logo-icon { transform: rotate(-8deg) scale(1.08); }
.logo .badge {
    background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3));
    box-shadow: 0 2px 6px rgba(239, 108, 0, .35), 0 1px 0 rgba(255, 255, 255, .35) inset;
}

.desktop-nav a { border-radius: 10px; transition: all .2s var(--ease); }
.desktop-nav a:hover { transform: translateY(-1px); }
.desktop-nav a.active {
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}

.header-search input {
    background: color-mix(in srgb, var(--bg-3) 70%, transparent);
    border-color: var(--hairline);
    transition: all .2s var(--ease);
}
.header-search input:focus { background: var(--bg-2); box-shadow: var(--ring); }
.header-search button {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    box-shadow: 0 2px 8px rgba(239, 108, 0, .3), 0 1px 0 rgba(255, 255, 255, .3) inset;
    transition: transform .15s var(--ease), box-shadow .2s;
}
.header-search button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 108, 0, .38); }

/* ------------------------------------------------------------
   4. КНОПКИ: реалистичный объём
   ------------------------------------------------------------ */
.btn {
    border-radius: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
    box-shadow: var(--shadow-xs), 0 1px 0 rgba(255, 255, 255, .7) inset;
    transition: transform .16s var(--ease), box-shadow .2s var(--ease),
                background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, .7) inset; }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-xs); }

.btn-accent {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-3) 100%);
    box-shadow: 0 2px 8px rgba(239, 108, 0, .32),
                0 1px 0 rgba(255, 255, 255, .35) inset,
                0 -1px 0 rgba(0, 0, 0, .08) inset;
}
.btn-accent:hover {
    box-shadow: 0 6px 18px rgba(239, 108, 0, .38),
                0 1px 0 rgba(255, 255, 255, .4) inset,
                0 -1px 0 rgba(0, 0, 0, .08) inset;
}
.btn-outline {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.btn-outline:hover { background: var(--accent-soft); }
.btn-danger {
    background: linear-gradient(180deg, #e53935, #c62828);
    box-shadow: 0 2px 8px rgba(198, 40, 40, .3), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.btn-sm { border-radius: 10px; }

/* ------------------------------------------------------------
   5. КАРТОЧКИ: поверхность, глубина, hover
   ------------------------------------------------------------ */
.card {
    background: linear-gradient(180deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 96%, var(--bg-3)) 100%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, .6) inset;
}
[data-theme="dark"] .card { box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, .03) inset; }

/* ------------------------------------------------------------
   6. HERO: живой mesh-градиент
   ------------------------------------------------------------ */
.hero {
    background:
        radial-gradient(700px 340px at 8% 0%, rgba(255, 193, 94, .55), transparent 62%),
        radial-gradient(620px 320px at 96% 12%, rgba(255, 138, 101, .42), transparent 60%),
        radial-gradient(560px 300px at 50% 118%, rgba(129, 199, 132, .30), transparent 62%),
        linear-gradient(135deg, #fffdf7 0%, #fff6e8 55%, #fdeee6 100%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(255, 255, 255, .9) inset;
    isolation: isolate;
}
[data-theme="dark"] .hero {
    background:
        radial-gradient(700px 340px at 8% 0%, rgba(255, 143, 46, .18), transparent 62%),
        radial-gradient(620px 320px at 96% 12%, rgba(255, 138, 101, .12), transparent 60%),
        radial-gradient(560px 300px at 50% 118%, rgba(102, 187, 106, .10), transparent 62%),
        linear-gradient(135deg, #241d13 0%, #221a12 55%, #241a1c 100%);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.hero::before, .hero::after {
    filter: blur(2px);
    animation: heroFloat 14s ease-in-out infinite;
}
.hero::after { animation-delay: -7s; }
@keyframes heroFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(14px, -12px, 0) scale(1.08); }
}
.hero h1 { font-weight: 900; }
.hero h1 span {
    background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-stat {
    padding: 8px 16px; border-radius: 14px;
    background: color-mix(in srgb, var(--bg-2) 55%, transparent);
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .hero-stat { border-color: rgba(255, 255, 255, .07); }
.hero-stat .num { font-weight: 900; letter-spacing: -.03em; }

/* ------------------------------------------------------------
   7. КАРТОЧКИ ОБЪЯВЛЕНИЙ: реалистичный объём
   ------------------------------------------------------------ */
.listing-card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, .6) inset;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s;
    will-change: transform;
}
.listing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl), 0 1px 0 rgba(255, 255, 255, .6) inset;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.listing-card .thumb { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.listing-card .thumb::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, transparent 32%, transparent 62%, rgba(0, 0, 0, .34) 100%);
    opacity: .9; transition: opacity .3s;
}
.listing-card:hover .thumb img { transform: scale(1.06); }
.listing-card .thumb img { transition: transform .6s var(--ease-out); }

.listing-card .badge-cond,
.listing-card .badge-boost,
.listing-card .sale-badge,
.listing-card .price-tag,
.listing-card .price-old,
.listing-card .badge-shop {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .25) inset;
    border-radius: 9px;
}
.listing-card .price-tag { font-weight: 900; letter-spacing: -.02em; }
.listing-card .body { padding: 12px 14px 14px; gap: 3px; }
.listing-card .title { font-weight: 700; font-size: .88rem; }
.listing-card .meta { margin-top: 6px; }

/* ------------------------------------------------------------
   8. ФОРМЫ: аккуратные поля с фокус-кольцом
   ------------------------------------------------------------ */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
    border-radius: 12px;
    border-color: var(--hairline);
    background: color-mix(in srgb, var(--bg) 60%, var(--bg-2));
    box-shadow: 0 1px 2px rgba(28, 20, 10, .04) inset;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus {
    background: var(--bg-2);
    border-color: var(--accent);
    box-shadow: var(--ring);
    outline: none;
}

/* ------------------------------------------------------------
   9. НИЖНЯЯ НАВИГАЦИЯ И МЕНЮ
   ------------------------------------------------------------ */
.bottom-bar {
    background: color-mix(in srgb, var(--bg-2) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset, 0 -4px 20px rgba(28, 20, 10, .06);
}
.bottom-bar a { transition: color .2s var(--ease), transform .2s var(--ease); }
.bottom-bar a:active { transform: scale(.94); }
.bottom-bar a .create-btn {
    background: linear-gradient(180deg, var(--accent-2), var(--accent) 60%, var(--accent-3));
    box-shadow: 0 8px 22px rgba(239, 108, 0, .42),
                0 1px 0 rgba(255, 255, 255, .4) inset,
                0 -2px 0 rgba(0, 0, 0, .1) inset;
}
.mobile-menu {
    box-shadow: var(--shadow-xl);
    border-right: 1px solid var(--hairline);
}
.mobile-menu-body a { border-radius: 12px; margin: 2px 8px; transition: background .18s var(--ease); }

/* ------------------------------------------------------------
   10. ПРОЧЕЕ: пагинация, бейджи, флеш, футер
   ------------------------------------------------------------ */
.pagination a, .pagination span {
    border-radius: 11px; border-color: var(--hairline);
    box-shadow: var(--shadow-xs);
    transition: all .18s var(--ease);
}
.pagination a:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pagination .current, .pagination .pagination-link.active {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(239, 108, 0, .32), 0 1px 0 rgba(255, 255, 255, .3) inset;
}

.flash {
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border-width: 1px;
    animation: flashIn .35s var(--ease-out);
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.badge-count {
    box-shadow: 0 2px 6px rgba(198, 40, 40, .4), 0 1px 0 rgba(255, 255, 255, .3) inset;
}

.footer {
    background: color-mix(in srgb, var(--bg-3) 60%, transparent);
    border-top: 1px solid var(--hairline);
    backdrop-filter: blur(8px);
}
.footer-links a { transition: color .2s var(--ease); }

/* ------------------------------------------------------------
   11. МИКРОАНИМАЦИИ ПОЯВЛЕНИЯ
   ------------------------------------------------------------ */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.grid-listings > .listing-card {
    animation: riseIn .5s var(--ease-out) both;
}
.grid-listings > .listing-card:nth-child(1) { animation-delay: .02s; }
.grid-listings > .listing-card:nth-child(2) { animation-delay: .06s; }
.grid-listings > .listing-card:nth-child(3) { animation-delay: .10s; }
.grid-listings > .listing-card:nth-child(4) { animation-delay: .14s; }
.grid-listings > .listing-card:nth-child(5) { animation-delay: .18s; }
.grid-listings > .listing-card:nth-child(6) { animation-delay: .22s; }
.grid-listings > .listing-card:nth-child(n+7) { animation-delay: .26s; }

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ------------------------------------------------------------
   12. АДАПТИВ
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .hero { border-radius: var(--radius-lg); }
    .hero-stat { padding: 6px 12px; }
    .listing-card:hover { transform: none; }
    .card { border-radius: var(--radius); }
}

/* ------------------------------------------------------------
   13. НАВИГАЦИЯ В ШАПКЕ (аккуратное меню)
   ------------------------------------------------------------ */
.desktop-nav { gap: 4px; }

/* Основные ссылки */
.desktop-nav > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px;
    font-size: .9rem; font-weight: 550; color: var(--text-muted);
    transition: color .18s var(--ease), background .18s var(--ease);
}
.desktop-nav > a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.desktop-nav > a.active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}

/* Акцентная кнопка «Подать» */
.desktop-nav > a.nav-cta {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-3) 100%);
    box-shadow: 0 2px 8px rgba(239, 108, 0, .3), 0 1px 0 rgba(255, 255, 255, .35) inset;
    font-weight: 650;
}
.desktop-nav > a.nav-cta:hover {
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 108, 0, .38), 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.desktop-nav > a.nav-cta .ti { font-size: 1.05rem; }

/* Выпадающие контейнеры */
.nav-more, .nav-user { position: relative; }

.nav-more-btn, .nav-user-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-muted);
    font: inherit; font-size: .9rem; font-weight: 550; cursor: pointer;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-more-btn:hover, .nav-user-btn:hover,
.nav-more.open .nav-more-btn, .nav-user.open .nav-user-btn {
    color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent);
}
.nav-more-btn .ti-chevron-down, .nav-user-btn .ti-chevron-down {
    font-size: .95rem; transition: transform .2s var(--ease);
}
.nav-more.open .nav-more-btn .ti-chevron-down,
.nav-user.open .nav-user-btn .ti-chevron-down { transform: rotate(180deg); }

/* Панели выпадающих меню */
.nav-more-menu, .nav-user-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 232px; padding: 8px;
    background: var(--bg-2);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index: 120;
}
.nav-more.open .nav-more-menu, .nav-user.open .nav-user-menu {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.nav-more-menu a, .nav-user-menu a, .nav-user-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text);
    font: inherit; font-size: .88rem; font-weight: 500; text-align: left;
    cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-more-menu a:hover, .nav-user-menu a:hover, .nav-user-item:hover {
    background: var(--accent-soft); color: var(--accent);
}
.nav-more-menu a .ti, .nav-user-menu a .ti, .nav-user-item .ti {
    font-size: 1.1rem; color: var(--text-muted); flex-shrink: 0;
}
.nav-more-menu a:hover .ti, .nav-user-menu a:hover .ti, .nav-user-item:hover .ti { color: var(--accent); }
.nav-more-menu a .badge-count, .nav-user-menu a .badge-count { margin-left: auto; }
.nav-more-sep { height: 1px; margin: 6px 8px; background: var(--hairline); }

/* Иконки-действия (сообщения, уведомления) */
.nav-actions { display: inline-flex; align-items: center; gap: 2px; }
.nav-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    color: var(--text-muted); font-size: 1.25rem;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-icon-btn:hover { color: var(--accent); background: var(--accent-soft); }
.nav-icon-btn .badge-count {
    position: absolute; top: 3px; right: 3px; margin: 0;
    min-width: 17px; height: 17px; padding: 0 4px;
    font-size: .62rem; border: 2px solid var(--bg-2);
}

/* Меню пользователя */
.nav-user-btn { padding: 5px 10px 5px 5px; }
.nav-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.nav-avatar-initial {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    color: #fff; font-weight: 700; font-size: .85rem;
    box-shadow: 0 1px 3px rgba(239, 108, 0, .3);
}
.nav-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px;
}
.nav-user-head .nav-avatar { width: 38px; height: 38px; font-size: 1rem; }
.nav-user-meta { display: flex; flex-direction: column; min-width: 0; }
.nav-user-meta b { font-size: .9rem; color: var(--text); }
.nav-user-meta span {
    font-size: .76rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-user-logout:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.nav-user-logout:hover .ti { color: var(--red); }

/* На средних экранах прячем имя пользователя, оставляя аватар */
@media (max-width: 1100px) {
    .nav-user-name { display: none; }
    .nav-user-btn { padding: 5px; }
    .nav-user-btn .ti-chevron-down { display: none; }
}
@media (max-width: 980px) {
    .desktop-nav > a { padding: 8px 9px; font-size: .86rem; }
    .nav-more-btn { padding: 8px 9px; }
}