/* Шапка: меню растёт вширь; перенос на 2 строки — только когда места нет.
     Каждая кнопка имеет высоту своего текста (1 или 2 строки), а не самой высокой. */
  @media (min-width: 769px) {
    html body .header-nav .nav-container { height: auto; min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
    html body .header-nav .brand-logo { flex: 0 0 auto; white-space: nowrap; }
    html body .header-nav .nav-menu { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; align-items: center; }
    html body .header-nav .nav-item { flex: 0 1 auto; min-width: 0; align-self: center; }
    html body .header-nav .nav-btn { text-align: center; line-height: 1.25; }
    /* Профиль, отправка контента, модерация, выход — всегда одна строка */
    html body .header-nav .user-actions { flex: 0 0 auto; white-space: nowrap; }
    html body .header-nav #user-actions-container { flex-wrap: nowrap; }
    html body .header-nav .user-actions .btn,
    html body .header-nav .user-actions .user-badge,
    html body .header-nav .user-actions .theme-toggle-btn { white-space: nowrap; flex: 0 0 auto; }
  }
  

  .burger-btn, #mobile-drawer, #mobile-drawer-backdrop { display: none; }
  .mobile-only { display: none; }
  @media (max-width: 768px) {
    html body .header-nav .nav-container { flex-wrap: nowrap !important; height: 56px !important; min-height: 56px !important; padding: 6px 12px !important; gap: 8px !important; align-items: center !important; }
    html body .header-nav .nav-container .brand-logo { order: 1; flex: 0 0 auto; }
    html body .header-nav .nav-container .user-actions { order: 2; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: auto !important; padding: 0 !important; gap: 8px !important; justify-content: flex-end !important; }
    html body .header-nav .nav-container .theme-toggle-btn { position: static !important; width: 38px !important; height: 38px !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
    html body .header-nav .burger-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input); cursor: pointer; flex: 0 0 auto; }
    .burger-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-main); transition: transform .25s ease, opacity .2s ease; }
    .burger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .burger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    body.md-open { overflow: hidden; }
    #mobile-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 2147483646; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    #mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    #mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); height: 100vh; height: 100dvh; z-index: 2147483647; background: var(--bg-card); color: var(--text-main); border-left: 1px solid var(--border-color); box-shadow: -12px 0 40px rgba(0,0,0,.45); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
    #mobile-drawer.open { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; }
    #mobile-drawer .md-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-color); flex: 0 0 auto; }
    #mobile-drawer .md-title { font-weight: 800; font-size: 18px; }
    #mobile-drawer .md-close { width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input); color: var(--text-main); font-size: 24px; line-height: 1; cursor: pointer; }
    #mobile-drawer .md-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 10px 24px; }
    #mobile-drawer .md-divider { height: 1px; background: var(--border-color); margin: 12px 4px; }

    /* меню разделов — вертикальный список с раскрывающимися подразделами */
    html body #mobile-drawer #md-slot-menu .nav-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: visible !important; white-space: normal !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; gap: 2px !important; }
    html body #mobile-drawer #md-slot-menu .nav-item { display: block !important; position: static !important; width: 100% !important; flex: none !important; }
    html body #mobile-drawer #md-slot-menu .nav-btn { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; font-size: 15px; text-align: left; white-space: normal; border-radius: 8px; text-decoration: none; color: var(--text-main); }
    html body #mobile-drawer #md-slot-menu .nav-btn:hover { background: transparent; color: var(--text-main); }
    html body #mobile-drawer #md-slot-menu .nav-btn.active { color: var(--accent-pink); background: var(--tag-bg); }
    html body #mobile-drawer #md-slot-menu .nav-btn:active { background: var(--accent-pink); color: #fff; }

    html body #mobile-drawer #md-slot-menu :is(.dropdown-menu, .sub-dropdown-menu) { display: none !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 2px 0 6px 12px !important; padding: 0 0 0 8px !important; background: transparent !important; border: 0 !important; border-left: 2px solid var(--border-color) !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; z-index: auto !important; }
    html body #mobile-drawer #md-slot-menu :is(.nav-item.open > .dropdown-menu, .dropdown-item.open > .sub-dropdown-menu) { display: block !important; }
    html body #mobile-drawer #md-slot-menu .mobile-only { display: list-item !important; }
    html body #mobile-drawer #md-slot-menu :is(.dropdown-menu, .sub-dropdown-menu) li { list-style: none; display: block; position: static !important; }
    html body #mobile-drawer #md-slot-menu :is(.dropdown-item > button, .sub-dropdown-menu button, .dropdown-menu > li > button) { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; font-size: 14px; text-align: left; background: transparent !important; color: var(--text-main) !important; border: 0; border-radius: 8px; cursor: pointer; }
    html body #mobile-drawer #md-slot-menu :is(.dropdown-item > button, .sub-dropdown-menu button):active { background: var(--accent-pink) !important; color: #fff !important; }
    html body #mobile-drawer #md-slot-menu .nav-item.open > .nav-btn, html body #mobile-drawer #md-slot-menu .dropdown-item.open > button { color: var(--accent-pink) !important; }

    /* кнопки аккаунта внутри панели */
    html body #mobile-drawer #user-actions-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; }
    html body #mobile-drawer #user-actions-container > * { width: 100%; justify-content: center; text-align: center; white-space: normal; padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
    html body #mobile-drawer #user-actions-container .user-badge { display: block; }
  }
  

  /* Liquid Glass для бургер-меню (включается тем же переключателем «Liquid Glass» в профиле) */
  @media (max-width: 768px) {
    html body.liquid-glass #mobile-drawer-backdrop { background: radial-gradient(120% 80% at 80% 0%, rgba(125,145,255,.14), transparent 60%), var(--lg-dim, rgba(6,9,16,.38)) !important; -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%); }
    html body.liquid-glass #mobile-drawer {
      border: 1px solid var(--lg-rim-lo, rgba(255,255,255,.18)) !important;
      border-right: 0 !important;
      border-radius: 28px 0 0 28px !important;
      background:
        radial-gradient(260px circle at 100% -6%, rgba(255,255,255,.30), transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,.27) 0%, rgba(255,255,255,.07) 28%, rgba(255,255,255,0) 52%, rgba(255,255,255,.04) 76%, rgba(255,255,255,.17) 100%),
        linear-gradient(var(--lg-tint, rgba(20,24,36,.30)), var(--lg-tint, rgba(20,24,36,.30))) !important;
      -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.1) !important;
      backdrop-filter: blur(30px) saturate(1.7) brightness(1.1) !important;
      box-shadow:
        inset 1.5px 1.5px .5px -1px var(--lg-rim-hi, rgba(255,255,255,.7)),
        inset -1.5px -1.5px .5px -1px var(--lg-rim-hi2, rgba(255,255,255,.34)),
        inset 14px 16px 26px -20px rgba(255,255,255,.6),
        inset 0 0 30px rgba(255,255,255,.05),
        -18px 0 50px -12px var(--lg-drop, rgba(0,0,0,.44)) !important;
    }
    html body.liquid-glass #mobile-drawer :is(.md-head, .md-body) { text-shadow: var(--lg-text-sh, 0 1px 2px rgba(0,0,0,.45)); }
    html body.liquid-glass #mobile-drawer .md-head { border-bottom: 1px solid var(--lg-rim-lo, rgba(255,255,255,.18)); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
    html body.liquid-glass #mobile-drawer .md-divider { background: linear-gradient(90deg, transparent, var(--lg-rim-hi2, rgba(255,255,255,.34)), transparent); height: 1px; }
    html body.liquid-glass #mobile-drawer :is(.md-close) , html body.liquid-glass .header-nav .burger-btn {
      background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--lg-field, rgba(255,255,255,.075)) !important;
      border: 1px solid var(--lg-field-border, rgba(255,255,255,.17)) !important;
      border-radius: 999px !important;
      box-shadow: inset 1px 1px .5px -.5px var(--lg-rim-hi, rgba(255,255,255,.7)), inset -1px -1px .5px -.5px var(--lg-rim-hi2, rgba(255,255,255,.34)), 0 4px 12px -6px var(--lg-drop, rgba(0,0,0,.44)) !important;
    }
    html body.liquid-glass #mobile-drawer #md-slot-menu .nav-btn { border-radius: 16px; transition: background-color .2s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
    html body.liquid-glass #mobile-drawer #md-slot-menu .nav-btn.active,
    html body.liquid-glass #mobile-drawer #md-slot-menu .nav-item.open > .nav-btn {
      background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.04)), var(--lg-tint-soft, rgba(255,255,255,.09)) !important;
      box-shadow: inset 1px 1px .5px -.5px var(--lg-rim-hi, rgba(255,255,255,.7)), inset -1px -1px .5px -.5px var(--lg-rim-hi2, rgba(255,255,255,.34)), 0 6px 16px -8px var(--lg-drop, rgba(0,0,0,.44));
    }
    html body.liquid-glass #mobile-drawer #md-slot-menu .nav-btn:active,
    html body.liquid-glass #mobile-drawer #md-slot-menu :is(.dropdown-item > button, .sub-dropdown-menu button):active {
      background-color: var(--accent-pink) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 55%) !important;
      transform: scale(.98);
    }
    html body.liquid-glass #mobile-drawer #md-slot-menu :is(.dropdown-menu, .sub-dropdown-menu) { border-left-color: var(--lg-rim-hi2, rgba(255,255,255,.34)) !important; }
    html body.liquid-glass #mobile-drawer #md-slot-menu :is(.dropdown-item > button, .sub-dropdown-menu button, .dropdown-menu > li > button) { border-radius: 14px; }
    html body.liquid-glass #mobile-drawer #user-actions-container .btn { border-radius: 999px !important; }
    html body.liquid-glass #mobile-drawer #user-actions-container .btn:not(.btn-outline) { background-image: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 55%); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.18), 0 8px 18px -6px rgba(0,0,0,.42) !important; border: 1px solid rgba(255,255,255,.22); }
    html body.liquid-glass #mobile-drawer #user-actions-container .btn-outline { background: var(--lg-field, rgba(255,255,255,.075)) !important; border: 1px solid var(--lg-field-border, rgba(255,255,255,.17)) !important; }
    html body.liquid-glass #mobile-drawer #user-actions-container .user-badge { background: var(--lg-field, rgba(255,255,255,.075)); border: 1px solid var(--lg-field-border, rgba(255,255,255,.17)); border-radius: 999px; box-shadow: inset 1px 1px .5px -.5px var(--lg-rim-hi, rgba(255,255,255,.7)); }
  }
  @media (max-width: 768px) and (prefers-reduced-transparency: reduce) {
    html body.liquid-glass #mobile-drawer { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-card) !important; }
  }
  

/* Подчёркиваем полосу прокрутки у уже существующих списков, не создавая новых меню */
:where([role="listbox"],[role="menu"],[role="tree"],.dropdown-menu,.sub-dropdown-menu,.dropdown-content,.select-options,.custom-select-options,.autocomplete-list,.suggestions,.suggestion-list,.options-list,.menu-list,.modal-box,.modal-content,.popup,.popover,[data-scrollable]) {
  scrollbar-width: auto;
  scrollbar-color: #8da5d2 rgba(130,150,190,.18);
}
:where([role="listbox"],[role="menu"],[role="tree"],.dropdown-menu,.sub-dropdown-menu,.dropdown-content,.select-options,.custom-select-options,.autocomplete-list,.suggestions,.suggestion-list,.options-list,.menu-list,.modal-box,.modal-content,.popup,.popover,[data-scrollable])::-webkit-scrollbar { width: 11px; height: 11px; }
:where([role="listbox"],[role="menu"],[role="tree"],.dropdown-menu,.sub-dropdown-menu,.dropdown-content,.select-options,.custom-select-options,.autocomplete-list,.suggestions,.suggestion-list,.options-list,.menu-list,.modal-box,.modal-content,.popup,.popover,[data-scrollable])::-webkit-scrollbar-track { background: rgba(130,150,190,.18); border-radius: 10px; }
:where([role="listbox"],[role="menu"],[role="tree"],.dropdown-menu,.sub-dropdown-menu,.dropdown-content,.select-options,.custom-select-options,.autocomplete-list,.suggestions,.suggestion-list,.options-list,.menu-list,.modal-box,.modal-content,.popup,.popover,[data-scrollable])::-webkit-scrollbar-thumb { background: #8da5d2; border: 2px solid rgba(235,240,250,.8); border-radius: 10px; }

/* Выпадающие меню — выше любых элементов страницы */
html body .header-nav { position: sticky; z-index: 2147483000 !important; overflow: visible !important; }
html body .header-nav .nav-container,
html body .header-nav .nav-menu,
html body .header-nav .nav-item,
html body .header-nav .dropdown-item { overflow: visible !important; }
html body .dropdown-menu { z-index: 2147483001 !important; }
html body .sub-dropdown-menu { z-index: 2147483002 !important; }
html body :is(.custom-select-options,.select-options,.autocomplete-list,.suggestions,.suggestion-list,.options-list,.dropdown-content,[role="listbox"]) { z-index: 2147483001 !important; }

/* Жидкое стекло под стиль сайта */
html body :is(.dropdown-menu,.sub-dropdown-menu,.custom-select-options,.select-options,.autocomplete-list,.dropdown-content) {
  background: rgba(30, 34, 48, .42);
  background: color-mix(in srgb, var(--bg-card, #1e2230) 46%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.35);
}
html body :is(.dropdown-menu,.sub-dropdown-menu) button { background: transparent; border-radius: 12px; }
html body :is(.dropdown-menu,.sub-dropdown-menu) button:hover { background: var(--accent-pink, #e0457b); color: #fff; }

/* Шапка всегда в своём слое над контентом (в т.ч. над стеклом с рефракцией) */
html body .header-nav { isolation: isolate; transform: translateZ(0); will-change: transform; }
html body main, html body .main-container { position: relative; z-index: 0; }
html body :is(.search-bar-box,.hero-banner,.card,.upload-box) { z-index: auto; }

select.pdd-native{display:none!important}
.pdd-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left;font:inherit;color:inherit;max-width:100%}
.pdd-trigger .pdd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pdd-trigger svg{flex:none;width:14px;height:14px;transition:transform .2s;opacity:.75}
.pdd-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.pdd-trigger:disabled{opacity:.5;cursor:not-allowed}
.pdd-list{position:fixed;inset:auto;margin:0;padding:7px;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  z-index:2147483647;color:var(--text-main,#fff);border-radius:18px;
  background:rgba(30,34,48,.42);background:color-mix(in srgb,var(--bg-card,#1e2230) 46%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.1),0 16px 40px rgba(0,0,0,.35)}
.pdd-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;cursor:pointer;font-size:14px;line-height:1.25;user-select:none}
.pdd-item .pdd-ck{width:14px;flex:none;font-size:13px;opacity:0}
.pdd-item[aria-selected="true"]{background:rgba(110,130,230,.22);font-weight:700}
.pdd-item[aria-selected="true"] .pdd-ck{opacity:1}
.pdd-item:hover,.pdd-item.pdd-act{background:rgba(255,255,255,.22)}
.pdd-item[aria-disabled="true"]{opacity:.4;pointer-events:none}
.pdd-group{padding:8px 11px 4px;font-size:12px;opacity:.6;font-weight:700}

/* Приветственное окно настройки профиля */
.onboarding-box{max-width:440px;text-align:center}
.onboarding-ico{font-size:42px;line-height:1;margin-bottom:8px}
.onboarding-box h3{margin-bottom:10px}
.onboarding-box p{color:var(--text-muted);font-size:14px;line-height:1.55;margin-bottom:18px}
.onboarding-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}