/* =====================================================================
   DollGallery CSS (refactor)
   Стандартизированная структура, убраны дубли и конфликтующие правила.
   Блоки: Reset/Vars → Typography → Layout → Nav → Buttons → Forms → Utilities
           → Filters → Gallery → Card → Overlays → Modals → Upload
           → Messages → Lightbox → Details → Admin → Toasts/Rating/Support
           → Media queries
   ===================================================================== */

@import url('/fonts/inter/inter.css');

/* =========================
   0) Reset & Variables
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* iOS: убираем серую подсветку при тапе */
    -webkit-tap-highlight-color: transparent;
}

/* Desktop light theme: keep the text caret black in every existing comment composer. */
@media (min-width: 641px) {
    body:not(.dg-theme-dark) :is(
        #dollModal,
        #shortModal,
        #heroShortsViewerWrap,
        #profileModal,
        #dg-article-root,
        .dg-post-comments-panel
    ) .comment-form .comment-input {
        caret-color: #000 !important;
    }
}

/* DG: light theme uses a black text caret in search, publication editors and chat. */
:root:not(.dg-theme-dark) body:not(.dg-theme-dark) :is(
    .search-container input,
    .threads-search-input,
    .dg-post-editor,
    .blog-article-editor,
    #chatInput
) {
    caret-color: #000 !important;
}

/* Живая запись видеокружка в личных сообщениях. */
.dg-video-note-recorder {
  position:fixed;
  inset:0;
  z-index:var(--dg-z-portal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(6, 10, 18, .82);
  backdrop-filter:blur(8px);
}

.dg-video-note-recorder__panel {
  width:min(100%, 380px);
  color:#fff;
  text-align:center;
}

.dg-video-note-recorder__preview {
  width:min(78vw, 320px);
  aspect-ratio:1;
  margin:0 auto;
  overflow:hidden;
  border:3px solid rgba(255, 255, 255, .9);
  border-radius:50%;
  background:#111827;
  box-shadow:0 18px 60px rgba(0, 0, 0, .45);
}

.dg-video-note-recorder__preview video {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}

.dg-video-note-recorder__time {
  min-height:24px;
  margin-top:14px;
  font-variant-numeric:tabular-nums;
  font-size:18px;
  font-weight:700;
}

.dg-video-note-recorder.is-recording .dg-video-note-recorder__time::before {
  content:'';
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:8px;
  border-radius:50%;
  background:#ef4444;
}

.dg-video-note-recorder__hint {
  min-height:38px;
  margin:8px auto 16px;
  color:rgba(255, 255, 255, .72);
  font-size:13px;
  line-height:1.4;
}

.dg-video-note-recorder__actions {
  display:grid;
  grid-template-columns:1fr 72px 1fr;
  align-items:center;
  gap:14px;
}

.dg-video-note-recorder__actions button:not(.dg-video-note-recorder__record) {
  justify-self:start;
  padding:10px 4px;
  border:0;
  color:#fff;
  background:transparent;
  font:inherit;
}

.dg-video-note-recorder__record {
  width:68px;
  height:68px;
  padding:0;
  border:5px solid #fff;
  border-radius:50%;
  background:#ef4444;
  box-shadow:inset 0 0 0 4px rgba(0, 0, 0, .12);
}

.dg-video-note-recorder.is-recording .dg-video-note-recorder__record {
  border-width:20px;
  border-color:#fff;
  border-radius:18px;
  background:#ef4444;
}

@media (max-height:600px) {
  .dg-video-note-recorder__preview { width:min(58vh, 280px); }
  .dg-video-note-recorder__hint { margin-bottom:8px; }
}

:root {
    /* Единая шкала корневых слоёв приложения. */
    --dg-z-nav: 100;
    --dg-z-dropdown: 200;
    --dg-z-modal: 1000;
    --dg-z-portal: 1100;
    --dg-z-notice: 1200;
    --dg-z-viewer: 1300;
    --dg-z-fullscreen: 1400;

    /* Цвета */
    --c-bg: #FFFFFF;
    /* фон полотна страницы (светлая тема): под шапкой, как на проде — не чистый #fff */
    --c-bg-canvas: #F8F9FA;
    --c-text: #2C2C2C;
    --c-muted: #6B7280;
    --c-border: #E5E7EB;
    --c-primary: #8B5CF6;
    --c-primary-rgb: 139, 92, 246;
    --c-primary-600: #7C3AED;
    --c-border-rgb: 229, 231, 235;
    --c-bg-light: #F3F4F6;
    /* Stories */
    --dg-story-unviewed-border: var(--c-primary);
    --dg-story-unviewed-border-width: 3px;
    --c-success: #10B981;
    --c-warning: #F59E0B;
    --c-error: #EF4444;
    --c-overlay: rgba(0,0,0,.40);
    /* Типографика: единая фиксированная шкала ролей без раздувания на широких экранах */
    --dg-font-family: 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --dg-font-xs: 12px;
    --dg-font-sm: 13px;
    --dg-font-ui: 14px;
    --dg-font-body: 16px;
    --dg-font-lead: 16px;
    --dg-font-card-title: 16px;
    --dg-font-modal-title: 18px;
    --dg-font-h3: 18px;
    --dg-font-h2: 22px;
    --dg-font-h1: 28px;
    --dg-line-body: 1.6;
    --dg-line-reading: 1.7;
    --dg-line-heading: 1.2;
    --dg-reading-width: 720px;
    /* Радиусы/тени/скорости */
    --r-8: 8px;
    --r-10: 10px;
    --r-12: 12px;
    --r-14: 14px;
    --shadow-1: 0 1px 3px rgba(0,0,0,.1);
    --shadow-2: 0 4px 12px rgba(0,0,0,.15);
    --shadow-3: 0 20px 25px rgba(0,0,0,.10);
    --ease: cubic-bezier(.22,.61,.36,1);
    /* Safe areas / scroll lock */
    --dg-chat-keyboard-offset: 0px; /* динамически задаём из JS, чтобы приподнимать чат над клавиатурой */
    /* ✅ iOS YaBrowser: доп. “строка подсказок” над клавиатурой (по умолчанию) */
    --dg-ios-yandex-suggest: 54px;
    /* ✅ выставляется из JS только когда фокус в чате и это YaBrowser iOS */
    --dg-chat-suggest-offset: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    /* Строка навигации (.nav-container) + safe-top — совпадает с липкой шапкой */
    --dg-navbar-inner-h: 64px;
    --dg-navbar-stack: calc(var(--dg-navbar-inner-h) + max(0px, var(--safe-top)));
    --scroll-lock-top: 0px;
    /* 🔹 динамическая высота формы ввода в чате (мобилка); обновляется из JS; 80px надёжнее чем 66px до первого applyLayout */
    --dg-chat-input-height: 80px;
    /* ✅ iOS VisualViewport: компенсируем сдвиг (offsetTop), чтобы чат не “улетал” вверх */
    --dg-chat-vv-top: 0px;
    /* ── Surface system tokens ── */
    --dg-pattern-size-mobile: 680px;
    --dg-pattern-size-desktop: 840px;
    --dg-glass-blur: 14px;
    --dg-surface-light: rgba(255,255,255,0.78);
    --dg-surface-dark: rgba(24,24,30,0.72);
    --dg-surface-border-light: rgba(120,110,150,0.12);
    --dg-surface-border-dark: rgba(255,255,255,0.10);
    --dg-pill-light: rgba(255,255,255,0.72);
    --dg-pill-dark: rgba(255,255,255,0.06);
    --dg-pill-border-light: rgba(120,110,150,0.14);
    --dg-pill-border-dark: rgba(255,255,255,0.10);
    /* Единая видимость паттерна для всех браузеров.
       Светлая тема: показываем исходный white_bg.png без высветления.
       Тёмная тема: показываем исходный dark_bg.png с затемнением 10%. */
    --dg-page-overlay-light: rgba(255,255,255,0.80);
    --dg-page-overlay-dark: rgba(15,15,18,0.80);
    /* Светлая тема: фон как у пузырей сообщений */
    --dg-message-surface-light: rgba(17, 24, 39, 0.09);
    --dg-message-surface-light-soft: rgba(17, 24, 39, 0.07);
    --dg-message-surface-light-hover: rgba(17, 24, 39, 0.11);
    --dg-message-border-light: rgba(0, 0, 0, 0.08);
    --dg-message-border-light-soft: rgba(0, 0, 0, 0.06);
    --dg-message-glass-blur: 1px;
}

.dg-theme-dark {
    color-scheme: dark;
    /* темная схема (как просил: темно-серый фон/текст, без “инверт негатива”) */
    --c-bg: #0F1013;
    --c-bg-canvas: #0F1013;
    --c-text: #E5E7EB;
    --c-muted: #A7AFBF;
    --c-border: #2A2F36;
    --c-overlay: rgba(0,0,0,.60);
}

/* ВАЖНО: отключаем инверсию, иначе ломается контраст в dropdown/модалках */
body.dg-theme-dark,
html.dg-theme-dark {
    filter: none !important;
}

    body.dg-theme-dark img,
    html.dg-theme-dark img {
        filter: none !important;
    }

/* Точечные переопределения для ключевых компонентов */
body.dg-theme-dark {
    background: var(--c-bg);
    color: var(--c-text);
}

    body.dg-theme-dark .modal-content {
        background: var(--c-bg);
        color: var(--c-text);
        -webkit-text-fill-color: var(--c-text);
    }

    body.dg-theme-dark .modal-header {
        border-bottom-color: var(--c-border);
    }

    body.dg-theme-dark .modal-close {
        background: rgba(255,255,255,0.08);
        color: var(--c-text);
        box-shadow: none;
    }

    body.dg-theme-dark .dropdown {
        background: var(--c-bg);
        border-color: var(--c-border);
    }

    body.dg-theme-dark .dropdown-item {
        color: var(--c-text);
    }

        body.dg-theme-dark .dropdown-item:hover {
            background: rgba(255,255,255,0.08);
        }

    body.dg-theme-dark .search-container {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.12);
    }

        body.dg-theme-dark .search-container input {
            color: var(--c-text);
        }

            body.dg-theme-dark .search-container input::placeholder {
                color: var(--c-muted);
            }

html {
    min-height: 100%;
    height: -webkit-fill-available; /* важно для iPhone fullscreen */
    color-scheme: light; /* светлая тема: нейтральные цвета контролов в WebKit/iOS */
}

html, body {
    min-height: 100%;
    background: var(--c-bg-canvas);
    color: var(--c-text);
    font-size: var(--dg-font-body);
    line-height: var(--dg-line-body);
    /* 🔹 фиксим "широкую" страницу на айфоне */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--dg-font-family);
    /* плавный скролл на iOS */
    -webkit-overflow-scrolling: touch;
}

/* Тонкий скроллбар внутри контейнеров (Windows/Chromium) — как у Apple/macOS */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.32);
    }

::-webkit-scrollbar-corner {
    background: transparent;
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

body.dg-theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

    body.dg-theme-dark ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.38);
    }

body.dg-theme-dark * {
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}


/* Плавные переходы между страницами: появление при загрузке, исчезновение при уходе */
body.dg-page-enter {
    opacity: 0;
    transition: opacity 0.22s ease-out;
}

    body.dg-page-enter.dg-page-enter--ready {
        opacity: 1;
    }

body.dg-page-leave {
    opacity: 0;
    transition: opacity 0.16s ease-in;
}

/* DG: на переходах светлая тема — тот же фон полотна, что и у страницы */
body.dg-page-enter:not(.dg-theme-dark) {
    background: var(--c-bg-canvas) !important;
}

body.dg-page-leave:not(.dg-theme-dark) {
    background: var(--c-bg-canvas) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.dg-page-enter {
        opacity: 1;
        transition: none;
    }

        body.dg-page-enter.dg-page-enter--ready {
            opacity: 1;
        }

    body.dg-page-leave {
        transition: none;
    }
}

/* Резерв места под иконки Lucide до загрузки скрипта — меньше «прыжка» при плохом интернете */
[data-lucide] {
    display: inline-block;
    min-width: 20px;
    min-height: 20px;
    vertical-align: middle;
}

img {
    max-width: 100%;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 16px;
}

/* iOS zoom prevention on small inputs */
input, textarea, select, button {
    font-size: 16px;
}

/* ✅ Мгновенный отклик на тап (убираем задержку 300ms на мобильных) */
button,
a,
label,
summary,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
[role="button"],
.btn,
.clickable,
.tab-btn,
.filter-tag,
.modal-close,
.dg-mobile-nav-item,
.chat-send-btn,
.like-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   1) Typography
   ========================= */
h1 {
    font-size: var(--dg-font-h1);
    line-height: var(--dg-line-heading);
    font-weight: 700;
}

h2 {
    font-size: var(--dg-font-h2);
    line-height: var(--dg-line-heading);
    font-weight: 600;
}

h3 {
    font-size: var(--dg-font-h3);
    line-height: 1.25;
    font-weight: 600;
}

.text-large {
    font-size: var(--dg-font-body);
}

.text-base {
    font-size: var(--dg-font-ui);
}

.text-small {
    font-size: var(--dg-font-xs);
}

.text-secondary {
    color: var(--c-muted);
}

/* DG: овальные кнопки Войти / Регистрация в шапке */
#loginBtn,
#registerBtn {
    border-radius: 999px !important;
}

/* DG: мобильные кнопки Войти / Регистрация — растянуть по ширине, отступ справа */
@media (max-width: 640px) {
    .nav-actions {
        flex: 1;
        gap: 6px;
    }

        .nav-actions #loginBtn,
        .nav-actions #registerBtn {
            flex: 1;
            min-width: 0;
            justify-content: center;
        }

        .nav-actions #registerBtn {
            margin-right: 6px;
        }
}

/* =========================
   2) Layout
   ========================= */
.container,
.nav-container,
.gallery-container,
.filters-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 1024px) {
    .container, .nav-container, .gallery-container, .filters-container {
        max-width: 1400px;
    }
}

@media (min-width: 1280px) {
    .container, .nav-container, .gallery-container, .filters-container {
        max-width: 1520px;
    }
}

@media (min-width: 1536px) {
    .container, .nav-container, .gallery-container, .filters-container {
        max-width: 1680px;
    }
}

@media (min-width: 1800px) {
    .container, .nav-container, .gallery-container, .filters-container {
        max-width: 1840px;
    }
}

/* =========================
   3) Navigation
   ========================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: var(--dg-z-nav);
    background: rgba(255,255,255,0.84);
    border-bottom: 1px solid rgba(120,110,150,0.11);
    box-shadow: none;
    padding-top: max(0px,var(--safe-top));
    backdrop-filter: blur(var(--dg-glass-blur));
    -webkit-backdrop-filter: blur(var(--dg-glass-blur));
    overflow: visible;
}

.nav-container {
    height: 64px;
    min-height: 64px; /* ✅ Layout Shift: фиксированная высота при загрузке */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

.nav-brand {
    margin-left: 0px;
}

    .nav-brand h1 {
        color: var(--c-primary);
        font-size: 24px;
        font-weight: 700;
    }

.nav-search {
    flex: 0 1 auto; /* ❗ перестаём растягивать, поиск смещается влево */
    max-width: 400px;
    margin: 0 16px 0 24px; /* приближаем к логотипу */
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    /* чуть больше отступ слева, чтобы иконка ушла внутрь */
    padding: 0 12px 0 12px;
    border: 1px solid var(--dg-pill-border-light);
    border-radius: 999px; /* ✅ DG: овальная форма как у тегов */
    background: var(--dg-pill-light);
    transition: .2s;
}

    .search-container i,
    .search-container .nav-search-icon,
    .search-container svg.nav-search-icon {
        position: absolute;
        left: 16px; /* иконку сдвигаем правее от края */
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: var(--c-muted);
        pointer-events: none;
    }

    .search-container svg.nav-search-icon {
        stroke: currentColor;
    }

    .search-container input {
        width: 100%;
        padding: 10px 0 10px 44px; /* слева отступ под иконку лупы, текст не налезает */
        font-size: 16px;
        border: none; /* убираем рамку у самого input */
        background: transparent; /* фон берём у контейнера */
        outline: none;
    }

    /* подсветка при фокусе на input */
    .search-container:focus-within {
        border-color: var(--c-primary);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(139,92,246,.1);
    }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; /* 👉 уезжают вправо, логотип+поиск остаются слева */
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Desktop-only administrator moderator switcher. */
@media (min-width: 641px) {
    .dg-admin-moderators {
        position: relative;
        display: flex;
        align-items: center;
    }

    .dg-admin-moderators__toggle {
        min-height: 36px;
        padding: 7px 12px;
        border: 1px solid var(--dg-pill-border-light);
        border-radius: 999px;
        background: var(--dg-pill-light);
        color: var(--c-text);
        font: inherit;
        font-size: 13px;
        font-weight: 650;
        cursor: pointer;
    }

    .dg-admin-moderators__toggle:hover,
    .dg-admin-moderators__toggle:focus-visible,
    .dg-admin-moderators__toggle[aria-expanded="true"] {
        border-color: var(--c-primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
    }

    .dg-admin-moderators__panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: var(--dg-z-dropdown);
        width: min(320px, calc(100vw - 32px));
        max-height: min(520px, calc(100vh - 96px));
        overflow: hidden;
        border: 1px solid var(--c-border);
        border-radius: 16px;
        background: var(--c-surface, #fff);
        color: var(--c-text);
        box-shadow: 0 18px 50px rgba(25, 20, 42, .18);
    }

    .dg-admin-moderators__panel[hidden] { display: none !important; }

    .dg-admin-moderators__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 14px 10px;
        border-bottom: 1px solid var(--c-border);
    }

    .dg-admin-moderators__head > button {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--c-muted);
        font-size: 24px;
        line-height: 28px;
        cursor: pointer;
    }

    .dg-admin-moderators__head > button:hover,
    .dg-admin-moderators__head > button:focus-visible {
        background: rgba(139, 92, 246, .10);
        color: var(--c-text);
        outline: none;
    }

    .dg-admin-moderators__list {
        max-height: min(450px, calc(100vh - 160px));
        overflow: auto;
        padding: 6px;
    }

    .dg-admin-moderators__row {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        width: 100%;
        padding: 9px 8px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .dg-admin-moderators__row:hover,
    .dg-admin-moderators__row:focus-visible {
        background: rgba(139, 92, 246, .09);
        outline: none;
    }

    .dg-admin-moderators__row:disabled {
        opacity: .52;
        cursor: not-allowed;
    }

    .dg-admin-moderators__row > img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
    }

    .dg-admin-moderators__identity,
    .dg-admin-moderators__name { min-width: 0; }
    .dg-admin-moderators__identity { display: grid; gap: 2px; }
    .dg-admin-moderators__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 650;
    }
    .dg-admin-moderators__status { color: var(--c-muted); font-size: 12px; }
    .dg-admin-moderators__presence {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 7px;
        border-radius: 50%;
        background: var(--c-muted);
    }
    .dg-admin-moderators__presence.is-online { background: #22c55e; }
    .dg-admin-moderators__badge {
        min-width: 24px;
        padding: 3px 7px;
        border-radius: 999px;
        background: var(--c-primary);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }
    .dg-admin-moderators__empty {
        margin: 0;
        padding: 18px 12px;
        color: var(--c-muted);
        text-align: center;
        font-size: 13px;
    }
    .dg-admin-moderators__empty.is-error { color: var(--c-danger, #dc2626); }

    .dg-admin-impersonation-bar {
        position: sticky;
        top: 0;
        z-index: calc(var(--dg-z-nav) + 1);
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 6px 16px;
        border-bottom: 1px solid rgba(91, 33, 182, .25);
        background: #f3e8ff;
        color: #4c1d95;
        font-size: 13px;
    }
    .dg-admin-impersonation-bar[hidden] { display: none !important; }
    .dg-admin-impersonation-bar button {
        padding: 5px 11px;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    .dg-admin-impersonation-bar button:hover,
    .dg-admin-impersonation-bar button:focus-visible {
        background: rgba(76, 29, 149, .10);
        outline: 2px solid rgba(76, 29, 149, .25);
        outline-offset: 1px;
    }
    .navbar.dg-navbar--impersonating { top: 38px; }

    body.dg-theme-dark .dg-admin-moderators__toggle {
        border-color: rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .07);
        color: #fff;
    }
    body.dg-theme-dark .dg-admin-moderators__panel {
        border-color: rgba(255, 255, 255, .13);
        background: #18181c;
        color: #f5f5f6;
        box-shadow: 0 20px 54px rgba(0, 0, 0, .48);
    }
    body.dg-theme-dark .dg-admin-moderators__head { border-bottom-color: rgba(255, 255, 255, .10); }
    body.dg-theme-dark .dg-admin-moderators__status,
    body.dg-theme-dark .dg-admin-moderators__head > button,
    body.dg-theme-dark .dg-admin-moderators__empty { color: rgba(255, 255, 255, .62); }
    body.dg-theme-dark .dg-admin-moderators__row:hover,
    body.dg-theme-dark .dg-admin-moderators__row:focus-visible { background: rgba(185, 104, 255, .13); }
    body.dg-theme-dark .dg-admin-impersonation-bar {
        border-bottom-color: rgba(216, 180, 254, .25);
        background: #251b33;
        color: #f3e8ff;
    }
}

@media (max-width: 640px) {
    .dg-admin-moderators,
    .dg-admin-impersonation-bar { display: none !important; }
}

/* Иконка лупы в навбаре (по умолчанию скрыта, включаем только на мобиле) */
.nav-search-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

    .nav-search-toggle i {
        width: 20px;
        height: 20px;
    }

/* переключение иконок лупа/крестик */
.nav-search-toggle__icon {
    display: none;
}

.nav-search-toggle__icon--search {
    display: inline-flex;
}

.nav-search-toggle.nav-search-toggle--open .nav-search-toggle__icon--search {
    display: none;
}

.nav-search-toggle.nav-search-toggle--open .nav-search-toggle__icon--close {
    display: inline-flex;
}

/* === DG: базовый стиль кнопки-иконки (нужен и на десктопе тоже) === */
.nav-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 2px solid var(--c-border);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    color: inherit;
    text-decoration: none;
}

    .nav-icon-btn:hover {
        border-color: var(--c-primary);
    }

    /* lucide после init становится svg.lucide — поэтому страхуем оба варианта */
    .nav-icon-btn i,
    .nav-icon-btn .lucide {
        width: 21px;
        height: 21px;
    }

/* DG: “⋯” внутри иконки сообщений (как в бейджах комментов) */
.nav-msg-btn {
    position: relative;
}

    .nav-msg-btn .nav-msg-dots {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scaleX(0.7); /* ✅ точки плотнее, центр не смещён */
        font-size: 16px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 1px; /* ✅ точки ближе друг к другу */
        color: currentColor;
        pointer-events: none;
        user-select: none;
    }


/* бейдж на иконке */
.nav-icon-btn .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    margin-left: 0 !important;
    pointer-events: none;
}

/* DG: на телефоне уменьшаем "пилюли", чтобы влезало больше тегов */
@media (max-width: 640px) {
    .tag-dropdown {
        gap: 6px;
        padding: 6px;
        max-height: min(60vh, 360px);
    }

    /* === NEW: иконка уведомлений слева от аватарки === */
    .nav-icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 9999px;
        border: 2px solid var(--c-border);
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        position: relative;
        transition: border-color .2s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

        .nav-icon-btn:hover {
            border-color: var(--c-primary);
        }

        /* lucide после init становится svg.lucide — поэтому страхуем оба варианта */
        .nav-icon-btn i,
        .nav-icon-btn .lucide {
            width: 20px;
            height: 20px;
        }

        /* бейдж на иконке */
        .nav-icon-btn .badge {
            position: absolute;
            top: -6px;
            right: -6px;
            margin-left: 0 !important;
            pointer-events: none;
        }

    /* ✅ show messages button only on phone */
    #navMessagesBtn {
        display: inline-flex;
    }

    .navbar.navbar--search-open #navMessagesBtn {
        display: none !important;
    }

    /* DG: на телефоне при открытом поиске прячем кнопку уведомлений */
    .navbar.navbar--search-open #notificationsBtn {
        display: none !important;
    }

    /* ✅ DG: на телефоне "Сообщения" в dropdown не показываем (кнопка будет в шапке) */
    #messagesBtn {
        display: none !important;
    }

}

/* Состояние входа с первого кадра (без ожидания JS) — как в соцсетях */
body.dg-auth-logged-in .anon-only {
    display: none !important;
}

body.dg-auth-logged-in .auth-only {
    display: flex !important;
}

.user-menu {
    position: relative;
    /* чтобы иконка была СЛЕВА от аватарки, а не сверху */
    display: flex; /* НЕ перебиваем inline display:none для гостя */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 40px;
    flex: 0 0 40px; /* DG: не даём флексу сжимать аватарку */
    min-width: 40px; /* доп. страховка */
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--c-border);
    transition: border-color .2s;
    object-fit: cover; /* чтобы не “сплющивало” картинку */
}

    .user-avatar:hover {
        border-color: var(--c-primary);
    }

/* === DG: unified nav indicator (messages + notifications) === */
.nav-icon-btn {
    position: relative;
}

    .nav-icon-btn .indicator-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: var(--c-primary);
        display: none;
        pointer-events: none;
    }

/* ❌ Activity — без индикатора (Safari/iOS фикс) */
#activityBtn .indicator-dot {
    display: none !important;
}

/* старый бейдж больше не используется */
#navMessagesBadge {
    display: none !important;
}

/* мобильное исключение */
@media (max-width: 640px) {
    #avatarDot {
        display: none !important;
    }
}



.dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    z-index: var(--dg-z-dropdown);
    display: none;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-8);
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
    /* ▼ добавлено */
    -webkit-transform: translateZ(0.001px);
    transform: translateZ(0.001px);
    backface-visibility: hidden;
    isolation: isolate;
}

.dropdown-item {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color .2s;
}

    .dropdown-item i {
        width: 16px;
        height: 16px;
    }

    .dropdown-item:hover {
        background: var(--c-bg-light);
    }

/* Tag dropdown (upload tags) */
.tag-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    z-index: var(--dg-z-dropdown);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-8);
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

    .tag-dropdown label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

        /* DG: прячем нативный чекбокс, чтобы не было "квадратиков" над пилюлями */
        .tag-dropdown label > input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
            margin: 0;
            padding: 0;
            pointer-events: none;
        }



    .tag-dropdown span {
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid var(--c-border);
        background: var(--c-bg-light);
        color: var(--c-muted, #374151);
        font-size: 14px;
        transition: .2s;
        pointer-events: none;
    }

@media (max-width: 640px) {
    .tag-dropdown span {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 16px;
    }
}

    /* активная «пилюля» — общий селектор */
    .tag-dropdown input:checked + span {
        background: var(--c-primary);
        border-color: var(--c-primary);
        color: #fff;
    }



/* DG: на десктопе/планшетах мобильная кнопка скрыта */
.filters .mobile-filter-btn {
    display: none;
}

/* =========================
   Mobile version
   ========================= */
@media (max-width: 640px) {

        /* 1) по умолчанию скрываем ВСЕ теги в линии */
        .filters .filter-tag {
            display: none;
        }

        /* 2) показываем кнопку фильтра */
        /* DG: компактнее теги в линии на мобиле */
        .filters .filter-tag {
            padding: 6px 10px;
            font-size: 13px;
            line-height: 1;
            min-height: 28px;
        }

        /* DG: кнопка фильтра — отдельный размер, чтобы не раздувать остальные */
        .filters .mobile-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            width: 34px;
            min-width: 34px;
            height: 28px;
            min-height: 28px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
        }

            .filters .mobile-filter-btn img,
            .filters .mobile-filter-btn svg,
            .filters .mobile-filter-btn i {
                width: 18px;
                height: 18px;
            }

        /* 3) показываем только ключевые теги */
        .filters .filter-tag[data-tag=""],
        .filters .filter-tag[data-tag="Other"],
        .filters .filter-tag[data-tag="for_sale"],
        .filters .filter-tag[data-tag="Wanted"] {
            display: inline-flex;
        }

    /* ✅ модалка фильтров под modalStack: ниже navbar; на телефоне опускаем, чтобы были видны кнопки Применить/Закрыть */
    .dg-filters-modal.modal {
        position: fixed;
        left: 0;
        right: 0;
        /* Вырезаем область под нижнюю фиксированную навигацию (сквозное перекрытие ломает скролл) */
        /* +16px: оставляем больший зазор, чтобы модалка была короче и скролл не упирался в панель */
        bottom: calc(var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        top: var(--dg-nav-h, 0px);
        -webkit-tap-highlight-color: transparent;
        /* Важно для мобильного: разрешаем вертикальный свайп, иначе список внутри не скроллится */
        touch-action: pan-y;
        user-select: none;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    @media (max-width: 640px) {
        /* На всю высоту между верхним поиском и нижней панелью (как на проде) */
        .dg-filters-modal.modal {
            top: var(--dg-nav-h, 0px) !important;
            bottom: calc(var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)))) !important;
            height: auto !important;
            max-height: none !important;
            align-items: stretch !important;
            justify-content: stretch !important;
        }
    }

    /* контент фильтра — полноэкранный внутри модалки */
    .dg-filters-sheet.modal-content {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        background: rgba(248,248,252,0.98);
        display: flex;
        flex-direction: column;
        touch-action: pan-y;
        padding-top: 0;
        padding-bottom: var(--safe-bottom);
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0.001px);
        transform: translateZ(0.001px);
        backface-visibility: hidden;
        isolation: isolate;
    }

    .dg-filters-header {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        position: relative;
    }

    .dg-filters-header-left {
        position: absolute;
        left: 12px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .dg-filters-header-right {
        position: absolute;
        right: 12px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
    }


    .dg-filters-title {
        text-align: center;
        font-size: 18px;
        font-weight: 800;
        color: #111;
    }

    .dg-filters-nav {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: none;
        background: #fff;
        color: #111;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-text-fill-color: #111;
    }

        .dg-filters-nav.dg-modal-back-btn {
            font-size: 0;
        }

        /* иконки внутри кнопок фильтра — ВСЕГДА чёрные */
        .dg-filters-nav svg,
        .dg-filters-nav svg *,
        .dg-filters-nav .lucide,
        .dg-filters-nav i {
            stroke: #111 !important;
            fill: none !important;
        }



        .dg-filters-nav:active {
            transform: scale(0.94);
        }


        .dg-filters-nav:active {
            opacity: 0.7;
        }

    .dg-filters-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px 12px 18px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-gutter: stable both-edges;
    }

    .dg-filters-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .dg-filters-item {
        background: rgba(255,255,255,0.88);
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid rgba(120,110,150,0.11);
        overflow: hidden;
        transition: background-color .18s ease, border-color .18s ease, border-radius .18s ease;
    }

        .dg-filters-item.is-active {
            border-color: rgba(var(--c-primary-rgb), 0.6);
            background: rgba(var(--c-primary-rgb), 0.10);
        }

        .dg-filters-item.is-expanded {
            box-shadow: 0 10px 20px rgba(0,0,0,0.06);
            border-radius: 16px; /* ✅ раскрыто = как поле ввода */
        }

        .dg-filters-item.dg-multiline {
            border-radius: 16px; /* ✅ 2 строки в заголовке = как поле ввода */
        }

    .dg-filters-main {
        width: 100%;
        padding: 8px 14px;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 15px;
        font-weight: 800;
        color: #111;
        text-align: left;
        border-radius: 9999px; /* ✅ 1 строка = овал */
        white-space: normal;
        transition: background-color .18s ease, border-radius .18s ease;
    }

    .dg-filters-item.is-expanded .dg-filters-main,
    .dg-filters-item.dg-multiline .dg-filters-main {
        border-radius: 16px; /* ✅ 2 строки/раскрыто = норм форма */
    }


    .dg-filters-main__label {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal; /* ✅ 2 строки = просто растёт */
        overflow-wrap: anywhere;
        line-height: 1.15;
    }

    .dg-filters-main__chev {
        flex: 0 0 auto;
        align-self: center;
    }

    /* ❌ убрали искусственное "увеличение" при раскрытии — теперь как в чате */
    .dg-filters-item.is-expanded .dg-filters-main {
        padding: 8px 14px;
        font-size: 15px;
    }


    .dg-filters-main__chev {
        color: var(--c-primary);
        font-size: 20px;
        line-height: 1;
        transform: translateY(-1px);
        transition: transform .18s ease, font-size .18s ease;
    }

    .dg-filters-item.is-expanded .dg-filters-main__chev {
        transform: rotate(90deg);
        font-size: 26px; /* как было визуально */
    }

    .dg-filters-subwrap {
        padding: 0 14px 14px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }



    .dg-filters-subtags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 12px;
    }

    .dg-filters-chip {
        border: 1px solid var(--dg-pill-border-light);
        background: var(--dg-pill-light);
        color: #111;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

        .dg-filters-chip.is-active {
            background: rgba(var(--c-primary-rgb), 0.12);
            border-color: rgba(var(--c-primary-rgb), 0.55);
            box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.35);
        }

    #subtagRow {
        /* DG: позволяем JS управлять отображением подтегов (вместо принудительного display:none) */
        display: block;
    }

    /* DG: блокировка скролла, пока открыт мобильный фильтр */
    body.dg-filter-open {
        overflow: hidden;
        width: 100%;
    }
}


/* =========================
   4) Buttons
   ========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px; /* как btn-xs */
    padding: 6px 12px; /* как btn-xs */
    border: 0;
    border-radius: 999px; /* овальная */
    font-size: var(--dg-font-xs); /* как btn-xs */
    font-weight: 600; /* как btn-xs */
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    line-height: 1;
}


.btn-primary {
    background: var(--c-primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--c-primary-600);
        transform: translateY(-1px);
    }

/* DG: кнопка "Оформить подписку" в профиле */
#subscribeBtn {
    min-height: 36px; /* как остальные кнопки в профиле */
    padding: 6px 14px; /* как остальные */
    font-size: var(--dg-font-sm); /* как остальные */
    border-radius: 999px; /* полностью овальная */
    font-weight: 600;
}

/* DG: кнопка "Написать" в модалке картинки (dollModal) — овальная и ниже по высоте */
#writeToAuthorBtn {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--dg-font-sm);
}

@media (max-width: 640px) {
    #writeToAuthorBtn,
    #profileModal #messageBtn,
    #profileModal #editProfileBtn,
    #profileModal #btnAuthorReviews {
        min-height: 36px;
        font-size: 14px;
        line-height: 1.2;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}


.btn-secondary {
    background: #fff;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

    .btn-secondary:hover {
        background: var(--c-bg-light);
    }

.btn-ghost {
    background: transparent;
    color: var(--c-muted);
}

    .btn-ghost:hover {
        background: var(--c-bg-light);
        color: var(--c-text);
    }

.btn-full {
    width: 100%;
}

/* DG: маленькие овальные кнопки (используются в отзывах: Ответить/Редактировать/Пожаловаться/Удалить) */
.btn-xs {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
    font-weight: 600;
}

/* =========================
   5) Forms
   ========================= */
.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--c-text);
    }

    .form-group input, .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--c-border);
        border-radius: var(--r-8);
        font-size: 16px;
        line-height: 1.4;
        transition: border-color .2s;
    }

/* DG: auth (login/register) — инпуты как кнопки (pill) */
#loginModal .form-group input:not([type="checkbox"]),
#registerModal .form-group input:not([type="checkbox"]) {
    border-radius: 999px;
}


/* DG: upload placeholders — полупрозрачные подсказки внутри полей */
#uploadModal .form-group input::placeholder,
#uploadModal .form-group textarea::placeholder {
    color: rgba(107, 114, 128, 0.65); /* близко к --c-muted */
    opacity: 1; /* Safari: иначе сам дополнительно "гасит" */
}
/* DG: upload — увеличенное поле описания по умолчанию */
#uploadModal #dollDescription {
    min-height: 160px; /* визуально ~7 строк */
    resize: vertical; /* пользователь может увеличить */
}

/* DG: upload post/Short — same rounded inputs as profile edit */
#uploadModal .form-group input:not([type="file"]):not([type="checkbox"]),
#uploadModal .form-group select,
#uploadModal #dollTagsInput,
#uploadModal #dollSubtagInput,
#dgShortTitle,
#dgShortTagsInput,
#dgShortSubtagInput {
    border-radius: 999px;
}

#uploadModal .form-group textarea,
#uploadModal #dollDescription,
#dgShortDescription {
    border-radius: 16px;
}

/* DG: тёмная тема — поля загрузки поста и Short (как #blogArticleUploadModal) */
body.dg-theme-dark #uploadModal #dollTitle,
body.dg-theme-dark #uploadModal #dollDescription,
body.dg-theme-dark #uploadModal #dollPrice,
body.dg-theme-dark #uploadModal #dollTagsInput,
body.dg-theme-dark #uploadModal #dollSubtagInput,
body.dg-theme-dark #dgShortTitle,
body.dg-theme-dark #dgShortDescription,
body.dg-theme-dark #dgShortTagsInput,
body.dg-theme-dark #dgShortSubtagInput {
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

body.dg-theme-dark #uploadModal #dollTitle:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollDescription:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollPrice:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollTagsInput:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollSubtagInput:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortTitle:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortDescription:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortTagsInput:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortSubtagInput:not(.dg-invalid):not([data-dg-invalid="1"]) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--c-border-rgb), 0.20) !important;
}

body.dg-theme-dark #uploadModal #dollTitle:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollDescription:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollPrice:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollTagsInput:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #uploadModal #dollSubtagInput:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortTitle:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortDescription:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortTagsInput:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #dgShortSubtagInput:focus:not(.dg-invalid):not([data-dg-invalid="1"]) {
    background-color: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.20) !important;
}

body.dg-theme-dark #uploadModal #dollTitle::placeholder,
body.dg-theme-dark #uploadModal #dollDescription::placeholder,
body.dg-theme-dark #uploadModal #dollPrice::placeholder,
body.dg-theme-dark #uploadModal #dollTagsInput::placeholder,
body.dg-theme-dark #uploadModal #dollSubtagInput::placeholder,
body.dg-theme-dark #dgShortTitle::placeholder,
body.dg-theme-dark #dgShortDescription::placeholder,
body.dg-theme-dark #dgShortTagsInput::placeholder,
body.dg-theme-dark #dgShortSubtagInput::placeholder {
    color: rgba(var(--c-border-rgb), 0.55) !important;
    -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.55) !important;
}

/* DG: тёмная тема — поля редактирования профиля.
   Делаем как поля загрузки поста/Short, но строго внутри #editProfileModal. */
body.dg-theme-dark #editProfileModal #editUsername,
body.dg-theme-dark #editProfileModal #editEmail,
body.dg-theme-dark #editProfileModal #editPhone,
body.dg-theme-dark #editProfileModal #editCurrentPassword,
body.dg-theme-dark #editProfileModal #editPassword,
body.dg-theme-dark #editProfileModal #editAbout,
body.dg-theme-dark #editProfileModal #editTelegram,
body.dg-theme-dark #editProfileModal #editVK,
body.dg-theme-dark #editProfileModal #editAvito,
body.dg-theme-dark #editProfileModal #editBoosty,
body.dg-theme-dark #editProfileModal #editInstagram,
body.dg-theme-dark #editProfileModal #editTiktok,
body.dg-theme-dark #editProfileModal #editAvatar {
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

body.dg-theme-dark #editProfileModal #editUsername:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editEmail:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editPhone:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editCurrentPassword:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editPassword:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAbout:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editTelegram:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editVK:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAvito:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editBoosty:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editInstagram:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editTiktok:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAvatar:not(.dg-invalid):not([data-dg-invalid="1"]) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--c-border-rgb), 0.20) !important;
}

body.dg-theme-dark #editProfileModal #editUsername:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editEmail:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editPhone:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editCurrentPassword:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editPassword:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAbout:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editTelegram:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editVK:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAvito:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editBoosty:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editInstagram:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editTiktok:focus:not(.dg-invalid):not([data-dg-invalid="1"]),
body.dg-theme-dark #editProfileModal #editAvatar:focus:not(.dg-invalid):not([data-dg-invalid="1"]) {
    background-color: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.20) !important;
}

body.dg-theme-dark #editProfileModal #editUsername::placeholder,
body.dg-theme-dark #editProfileModal #editEmail::placeholder,
body.dg-theme-dark #editProfileModal #editPhone::placeholder,
body.dg-theme-dark #editProfileModal #editCurrentPassword::placeholder,
body.dg-theme-dark #editProfileModal #editPassword::placeholder,
body.dg-theme-dark #editProfileModal #editAbout::placeholder,
body.dg-theme-dark #editProfileModal #editTelegram::placeholder,
body.dg-theme-dark #editProfileModal #editVK::placeholder,
body.dg-theme-dark #editProfileModal #editAvito::placeholder,
body.dg-theme-dark #editProfileModal #editBoosty::placeholder,
body.dg-theme-dark #editProfileModal #editInstagram::placeholder,
body.dg-theme-dark #editProfileModal #editTiktok::placeholder {
    color: rgba(var(--c-border-rgb), 0.55) !important;
    -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.55) !important;
}

/* DG: тёмная тема — кнопка Показать/Скрыть внутри поля пароля */
body.dg-theme-dark #editProfileModal .dg-password-toggle,
body.dg-theme-dark .dg-auth-new-password-modal .dg-password-toggle {
    color: var(--c-muted, #A7AFBF) !important;
    -webkit-text-fill-color: var(--c-muted, #A7AFBF) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dg-theme-dark #editProfileModal .dg-password-toggle:hover,
body.dg-theme-dark #editProfileModal .dg-password-toggle:focus,
body.dg-theme-dark #editProfileModal .dg-password-toggle:active,
body.dg-theme-dark #editProfileModal .dg-password-toggle:focus-visible,
body.dg-theme-dark .dg-auth-new-password-modal .dg-password-toggle:hover,
body.dg-theme-dark .dg-auth-new-password-modal .dg-password-toggle:focus,
body.dg-theme-dark .dg-auth-new-password-modal .dg-password-toggle:active,
body.dg-theme-dark .dg-auth-new-password-modal .dg-password-toggle:focus-visible {
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

#editProfileModal .form-group input:not([type="file"]),
.dg-auth-reset-email-modal .form-group input,
.dg-auth-new-password-modal .form-group input {
    border-radius: 999px;
}

#editProfileModal .form-group textarea {
    border-radius: 16px;
}

body.dg-theme-dark .dg-auth-reset-email-modal .form-group input,
body.dg-theme-dark .dg-auth-new-password-modal .form-group input {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--c-border-rgb), 0.20) !important;
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
    caret-color: var(--c-text, #E5E7EB) !important;
}

body.dg-theme-dark .dg-auth-reset-email-modal .form-group input:focus,
body.dg-theme-dark .dg-auth-new-password-modal .form-group input:focus {
    background-color: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.20) !important;
}

body.dg-theme-dark .dg-auth-reset-email-modal .form-group input::placeholder,
body.dg-theme-dark .dg-auth-new-password-modal .form-group input::placeholder {
    color: rgba(var(--c-border-rgb), 0.55) !important;
    -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.55) !important;
    opacity: 1 !important;
}

body.dg-theme-dark .dg-auth-reset-email-modal .form-group input:-webkit-autofill,
body.dg-theme-dark .dg-auth-reset-email-modal .form-group input:-webkit-autofill:focus,
body.dg-theme-dark .dg-auth-new-password-modal .form-group input:-webkit-autofill,
body.dg-theme-dark .dg-auth-new-password-modal .form-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 36, 0.98) inset !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
    caret-color: var(--c-text, #E5E7EB) !important;
}

#editProfileModal .dg-password-wrap > input,
.dg-auth-new-password-modal .dg-password-wrap > input {
    padding-right: 112px;
}

#editProfileModal #editEmail[readonly] {
    cursor: default;
}

body.dg-theme-dark #editProfileModal #editEmail[readonly] {
    opacity: 0.78;
}

/* DG: тёмная тема — контейнер дропдауна тегов/подтегов */
body.dg-theme-dark #uploadModal #tagDropdown,
body.dg-theme-dark #uploadModal #subtagDropdown,
body.dg-theme-dark #dgShortTagDropdown,
body.dg-theme-dark #dgShortSubtagDropdown {
    background: rgba(18, 18, 23, 0.97) !important;
    border-color: rgba(var(--c-border-rgb), 0.20) !important;
}

/* DG: тёмная тема — пилюли тегов/подтегов только в загрузке поста и Short */
body.dg-theme-dark #uploadModal #tagDropdown span,
body.dg-theme-dark #uploadModal #subtagDropdown span,
body.dg-theme-dark #dgShortTagDropdown span,
body.dg-theme-dark #dgShortSubtagDropdown span {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--c-border-rgb), 0.18) !important;
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

body.dg-theme-dark #uploadModal #tagDropdown input:checked + span,
body.dg-theme-dark #uploadModal #subtagDropdown input:checked + span,
body.dg-theme-dark #dgShortTagDropdown input:checked + span,
body.dg-theme-dark #dgShortSubtagDropdown input:checked + span {
    background: var(--c-primary, #8B5CF6) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* DG: mobile upload — larger tag/subtag controls for post and Short creation */
@media (max-width: 640px) {
    #uploadModal #dollTagsInput,
    #uploadModal #dollSubtagInput,
    #dgShortTagsInput,
    #dgShortSubtagInput {
        min-height: 48px;
        padding: 13px 14px;
        font-size: 16px;
        line-height: 1.25;
    }

    #uploadModal #tagDropdown,
    #uploadModal #subtagDropdown,
    #dgShortTagDropdown,
    #dgShortSubtagDropdown {
        gap: 8px;
        padding: 10px;
        max-height: min(62vh, 420px);
    }

    #uploadModal #tagDropdown label,
    #uploadModal #subtagDropdown label,
    #dgShortTagDropdown label,
    #dgShortSubtagDropdown label {
        min-height: 40px;
    }

    #uploadModal #tagDropdown span,
    #uploadModal #subtagDropdown span,
    #dgShortTagDropdown span,
    #dgShortSubtagDropdown span {
        padding: 9px 14px;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1.25;
    }

    html.dg-standalone-pwa body.ios-device #uploadModal #tagDropdown,
    html.dg-standalone-pwa body.ios-device #uploadModal #subtagDropdown,
    html.dg-standalone-pwa body.ios-device #dgShortTagDropdown,
    html.dg-standalone-pwa body.ios-device #dgShortSubtagDropdown {
        z-index: var(--dg-z-dropdown);
    }
}

/* Модалка «Загрузить»: пост / видео — <640px компактный ряд; от 640px — крупные плитки (как в проекте) */
.dg-upload-pick-modal {
    max-width: min(272px, calc(100vw - 20px));
    width: min(272px, calc(100vw - 20px));
}

    .dg-upload-pick-modal .modal-header {
        padding-bottom: 6px;
    }

        .dg-upload-pick-modal .modal-header h2 {
            margin: 0;
            font-size: var(--dg-font-modal-title);
            font-weight: 600;
        }

body:not(.dg-theme-dark) .dg-upload-pick-modal .modal-header h2 {
    color: var(--c-text, #111827);
}

body.dg-theme-dark .dg-upload-pick-modal .modal-header h2 {
    color: var(--c-text, #f4f4f5);
}

.dg-upload-pick-body {
    padding: 6px 10px 12px;
}

.dg-upload-type-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
/* Плитки: только геометрия; цвета — ниже по теме */
.dg-upload-type-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 108px;
    aspect-ratio: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 5px;
    border-radius: 14px;
    border-width: 1px;
    border-style: solid;
    gap: 4px;
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .dg-upload-type-tile:focus {
        outline: none;
    }

    .dg-upload-type-tile:focus-visible {
        outline: 2px solid var(--c-primary, #8b5cf6);
        outline-offset: 2px;
    }

    .dg-upload-type-tile:active {
        transform: translateY(0);
    }

.dg-upload-type-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .dg-upload-type-tile-icon svg,
    .dg-upload-type-tile-icon .lucide {
        width: 26px;
        height: 26px;
        stroke-width: 1.65;
    }

.dg-upload-type-tile-label {
    font-size: var(--dg-font-xs);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.dg-upload-type-tile-sub {
    font-size: 10px;
    line-height: 1.15;
    font-weight: 500;
}

/* От 640px — как в остальном проекте: крупнее окно и плитки */
@media (min-width: 640px) {
    .dg-upload-pick-modal {
        max-width: 346px;
        width: min(346px, calc(100vw - 32px));
    }

        .dg-upload-pick-modal .modal-header {
            padding-bottom: 10px;
        }

    .dg-upload-pick-body {
        padding: 10px 17px 19px;
    }

    .dg-upload-type-grid {
        gap: 14px;
    }

    .dg-upload-type-tile {
        flex: none;
        max-width: none;
        width: 142px;
        height: 142px;
        aspect-ratio: auto;
        padding: 12px 10px;
        border-radius: 22px;
        gap: 7px;
    }

    .dg-upload-type-tile-icon svg,
    .dg-upload-type-tile-icon .lucide {
        width: 41px;
        height: 41px;
    }

    .dg-upload-type-tile-label {
        font-size: var(--dg-font-card-title);
    }

    .dg-upload-type-tile-sub {
        font-size: var(--dg-font-sm);
    }
}

/* ——— Светлая тема ——— */
body:not(.dg-theme-dark) .dg-upload-type-tile {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--c-text, #111827);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

body:not(.dg-theme-dark) .dg-upload-type-tile-sub {
    color: var(--c-muted, #6b7280);
    opacity: 1;
}

body:not(.dg-theme-dark) .dg-upload-type-tile-icon {
    color: var(--c-primary, #7c3aed);
}

    body:not(.dg-theme-dark) .dg-upload-type-tile-icon svg.lucide,
    body:not(.dg-theme-dark) .dg-upload-type-tile-icon svg {
        stroke: var(--c-primary, #7c3aed) !important;
        fill: none !important;
    }

@media (hover: hover) and (pointer: fine) {
    body:not(.dg-theme-dark) .dg-upload-type-tile:hover {
        border-color: rgba(124, 58, 237, 0.45);
        background: rgba(var(--c-primary-rgb), 0.07);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
        transform: translateY(-1px);
    }
}

/* ——— Тёмная тема (в т.ч. стеклянный .modal-content) ——— */
body.dg-theme-dark .dg-upload-type-tile {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--c-border-rgb), 0.16);
    color: var(--c-text, #e4e4e7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body.dg-theme-dark .dg-upload-type-tile-sub {
    color: rgba(228, 228, 231, 0.65);
    opacity: 1;
}

body.dg-theme-dark .dg-upload-type-tile-icon {
    color: #c4b5fd;
}

    body.dg-theme-dark .dg-upload-type-tile-icon svg.lucide,
    body.dg-theme-dark .dg-upload-type-tile-icon svg {
        stroke: #c4b5fd !important;
        fill: none !important;
    }

@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-upload-type-tile:hover {
        border-color: rgba(167, 139, 250, 0.5);
        background: rgba(var(--c-primary-rgb), 0.16);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        transform: translateY(-1px);
    }
}


/* DG: подсветка обязательных полей при ошибке (upload) */
/* DG: если пометили обёртку кастом-селекта — красим и инпут внутри */
.dg-invalid,
.custom-tag-select.dg-invalid > input {
    border-color: var(--c-error, #EF4444) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.30) !important;
    background-color: rgba(239, 68, 68, 0.06) !important;
}




.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(139,92,246,.1);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .checkbox-label input[type="checkbox"] {
        width: auto;
    }

#uploadModal .checkbox-label input[type="checkbox"],
#uploadModal label.checkbox-label input[type="checkbox"],
#uploadForm .checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    margin: 1px 0 0;
    border: 1.5px solid rgba(139, 92, 246, 0.55);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    position: relative;
}

#uploadModal .checkbox-label input[type="checkbox"]:checked,
#uploadModal label.checkbox-label input[type="checkbox"]:checked,
#uploadForm .checkbox-label input[type="checkbox"]:checked {
    border-color: var(--c-primary, #8B5CF6);
    background: var(--c-primary, #8B5CF6);
}

#uploadModal .checkbox-label input[type="checkbox"]:checked::after,
#uploadModal label.checkbox-label input[type="checkbox"]:checked::after,
#uploadForm .checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#uploadModal .checkbox-label input[type="checkbox"]:focus-visible,
#uploadModal label.checkbox-label input[type="checkbox"]:focus-visible,
#uploadForm .checkbox-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* ПК: галочка "В продаже" в окне загрузки — чуть крупнее */
@media (min-width: 641px) {
    #uploadModal .checkbox-label input[type="checkbox"],
    #uploadModal label.checkbox-label input[type="checkbox"],
    #uploadForm .checkbox-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 6px;
    }

    #uploadModal .checkbox-label input[type="checkbox"]:checked::after,
    #uploadModal label.checkbox-label input[type="checkbox"]:checked::after,
    #uploadForm .checkbox-label input[type="checkbox"]:checked::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
    }
}

body.dg-theme-dark #uploadModal .checkbox-label input[type="checkbox"],
body.dg-theme-dark #uploadModal label.checkbox-label input[type="checkbox"],
body.dg-theme-dark #uploadForm .checkbox-label input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

body.dg-theme-dark #uploadModal .checkbox-label input[type="checkbox"]:checked,
body.dg-theme-dark #uploadModal label.checkbox-label input[type="checkbox"]:checked,
body.dg-theme-dark #uploadForm .checkbox-label input[type="checkbox"]:checked {
    border-color: var(--c-primary, #8B5CF6);
    background: var(--c-primary, #8B5CF6);
}

.custom-tag-select {
    position: relative;
}

/* =========================
   6) Utilities
   ========================= */
.hidden {
    display: none !important;
}


/* =========================
   DG) Apple-like appear
   ========================= */
.dg-appear {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dg-motion-reveal) var(--dg-motion-ease-out), transform var(--dg-motion-reveal) var(--dg-motion-ease-out);
    transition-delay: calc(clamp(0, var(--dg-enter-i, 0), 7) * 18ms);
}

.dg-appear.dg-appear--active {
    will-change:opacity, transform;
}


    .dg-appear.dg-appear--pending {
        opacity: 0;
        transform: translateY(6px);
    }

    .dg-appear.dg-appear--in {
        opacity: 1;
        transform: translateY(0);
    }

@media (prefers-reduced-motion: reduce) {
    .dg-appear {
        transition: none !important;
        transition-delay: 0ms !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

/* =========================
   DG) Mobile performance: disable blur filters
   ========================= */
@media (pointer: coarse), (max-width: 640px) {
    .dg-appear {
        /* blur на мобильных часто даёт repaint-джиттер при инерции */
        filter: none !important;
        transition: opacity 220ms var(--ease), transform 220ms var(--ease) !important;
    }

        .dg-appear.dg-appear--pending {
            filter: none !important;
        }

        .dg-appear.dg-appear--in {
            filter: none !important;
        }

    .dg-img {
        filter: none !important;
        transition: opacity 260ms var(--ease), transform 260ms var(--ease) !important;
        will-change: opacity, transform !important;
    }

        .dg-img.dg-img--pending {
            filter: none !important;
        }
}


/* =========================
   DG) Apple-like image fade
   ========================= */
.dg-img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter 260ms var(--ease);
    will-change: opacity, transform, filter;
}

    .dg-img.dg-img--pending {
        opacity: 0;
        transform: scale(1.02);
        filter: blur(6px);
    }


@media (prefers-reduced-motion: reduce) {
    .dg-img {
        transition: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}
/* =========================
   DG) Image skeleton (only inside .doll-image)
   ========================= */
.dg-imgwrap {
    position: relative; /* чтобы скелетон жил поверх фона, но под оверлеями */
}

    /* скелетон: полупрозрачный слой + “блик” */
    .dg-imgwrap.dg-imgwrap--skeleton::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.06);
        z-index: 0;
        pointer-events: none;
    }

    .dg-imgwrap.dg-imgwrap--skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.55), transparent );
        z-index: 1;
        pointer-events: none;
        animation: dgShimmer 1200ms linear infinite;
    }

/* До загрузки картинки блок имеет высоту, JS не ставит --span:1, карточки не схлопываются на мобиле */
.doll-card .doll-image.dg-imgwrap.dg-imgwrap--skeleton {
    aspect-ratio: 4 / 3;
}

/* ✅ ВАЖНО: НЕ трогаем position у overlay/бейджей/лайка (они уже absolute в твоём CSS)
   иначе ломается формат карточки. Поднимаем только z-index. */
.dg-imgwrap .dg-img {
    position: relative;
    z-index: 2;
}

.dg-imgwrap .for-sale-badge,
.dg-imgwrap .dg-card-badge,
.dg-imgwrap .like-button,
.dg-imgwrap .doll-overlay {
    z-index: 2;
}
/* ✅ DG: лайк всегда выше оверлеев/шиммера */
.dg-imgwrap .like-button {
    z-index: 30;
}


@media (prefers-reduced-motion: reduce) {
    .dg-imgwrap.dg-imgwrap--skeleton::after {
        animation: none !important;
    }
}


.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-4 {
    margin-top: 16px;
}

.clickable {
    cursor: pointer;
    transition: opacity .2s;
}

    .clickable:hover {
        opacity: .8;
    }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Scroll lock (универсально): блокируем фон при открытой модалке/лайтбоксе */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
    height: 100% !important;
}

/* Запрещаем "резиновые" протяжки/фоновые свайпы при открытой модалке */
body.no-scroll {
    overscroll-behavior: none;
    touch-action: none; /* фон не должен ловить свайпы */
}

    /* Фэйлсейф: если .no-scroll залип, но оверлеев нет — отпускаем прокрутку */
    body.no-scroll:not(:has(.modal.show)):not(:has(.dg-lightbox)),
    html.no-scroll:not(:has(.modal.show)):not(:has(.dg-lightbox)) {
        overflow: auto !important;
        height: auto !important;
        top: auto !important;
    }


@supports (-webkit-overflow-scrolling: touch) {
    #chatMessages {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* DG: отключаем браузерный scroll-anchoring у ленты сообщений.
   При догрузке lazy-картинок/аватаров браузер сам пытался удерживать
   видимый контент и менял scrollTop между нашими APPLY-ами — пользователь
   видел этот промежуточный кадр как «перематывание». Управляем позицией
   полностью сами через якорный pin. */
#chatMessages,
.chat-messages {
    overflow-anchor: none;
}
#chatMessages > *,
.chat-messages > * {
    overflow-anchor: none;
}

/* --- Safari (desktop + iOS): усиливаем scroll-lock и для .no-scroll --- */
@supports (-webkit-touch-callout: none) {
    html.no-scroll,
    body.no-scroll {
        overflow: hidden !important;
        position: fixed !important;
        width: 100%;
        left: 0;
        right: 0;
        top: var(--scroll-lock-top, 0px); /* ✅ держим фон на месте, НЕ улетаем в 0 */
    }
}
/* iOS WebKit (Safari / Chrome / Яндекс): тот же фикс по классу ios-device */
body.ios-device.no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100%;
    left: 0;
    right: 0;
    top: var(--scroll-lock-top, 0px); /* ✅ держим фон на месте, НЕ улетаем в 0 */
}



/* =========================
   DG: Left sidebar (Reddit-style, светлая тема под логотипом)
   ========================= */
.dg-layout-with-sidebar {
    display: flex;
    min-height: calc(100vh - var(--dg-navbar-stack));
}

.dg-left-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.84);
    border-right: 1px solid rgba(120,110,150,0.11);
    align-self: stretch;
    min-height: calc(100vh - var(--dg-navbar-stack));
    position: sticky;
    top: var(--dg-navbar-stack);
    max-height: calc(100vh - var(--dg-navbar-stack));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Desktop: лёгкий blur у sidebar (без blur на мобиле — вызывает jank при скролле) */
@media (min-width: 641px) {
    .dg-left-sidebar {
        backdrop-filter: blur(var(--dg-glass-blur));
        -webkit-backdrop-filter: blur(var(--dg-glass-blur));
    }
}

/* iOS Safari: при скролле не подсвечивать пункты «как при hover»; убираем серый flash тапа */
.dg-left-sidebar a,
.dg-left-sidebar button,
.dg-left-sidebar summary {
    -webkit-tap-highlight-color: transparent;
}

.dg-left-sidebar .dg-sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dg-left-sidebar .dg-sb-footer {
    margin-top: auto;
}

.dg-sidebar-inner {
    padding: 16px 0 24px;
}
/* Светлая тема: белый фон, чёрный текст, иконки */
.dg-sidebar-light {
    color: #111;
    font-size: 14px;
    line-height: 1.45;
}

    .dg-sidebar-light .dg-sb-section {
        padding: 12px 16px 14px;
        border-bottom: 1px solid rgba(120,110,150,0.09);
    }

        .dg-sidebar-light .dg-sb-section:last-of-type {
            border-bottom: none;
        }

    .dg-sidebar-light .dg-sb-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        margin: 0 0 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .dg-sidebar-light .dg-sb-title i {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

    .dg-sidebar-light .dg-sb-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px;
        color: #111;
        text-decoration: none;
        font-size: 14px;
        border-radius: 999px;
        transition: color .15s, background .15s;
    }

@media (hover: hover) and (pointer: fine) {
    .dg-sidebar-light .dg-sb-link:hover {
        color: var(--c-primary, #8B5CF6);
        background: rgba(120,110,150,0.07);
    }
}

.dg-sidebar-light .dg-sb-link--active {
    color: var(--c-primary, #8B5CF6);
    font-weight: 600;
    background: rgba(139,92,246,0.09);
}

.dg-sidebar-light .dg-sb-link--highlight {
    color: var(--c-primary, #8B5CF6);
}

.dg-sidebar-light .dg-sb-link i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: inherit;
}

.dg-sidebar-light .dg-sb-link-more {
    font-size: 13px;
    color: var(--c-primary, #8B5CF6);
    margin-top: 4px;
    display: inline-block;
}

.dg-sidebar-light .dg-sb-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dg-sidebar-light .dg-sb-nav--contacts .dg-sb-link {
    justify-content: flex-start;
    text-align: left;
}
/* Раскрывающиеся блоки */
.dg-sb-details {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e5e7eb;
}

    .dg-sb-details:last-of-type {
        border-bottom: none;
    }

.dg-sb-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    list-style: none;
    border-radius: 999px;
    transition: background .15s, color .15s;
    user-select: none;
}

    .dg-sb-summary::-webkit-details-marker {
        display: none;
    }

    .dg-sb-summary::after {
        content: "";
        margin-left: auto;
        width: 14px;
        height: 14px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s;
    }

.dg-sb-details[open] .dg-sb-summary::after {
    transform: rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
    .dg-sb-summary:hover {
        background: var(--c-bg-light);
        color: var(--c-primary, #8B5CF6);
    }
}

.dg-sb-summary i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dg-sb-details .dg-sb-nav,
.dg-sb-details .dg-sb-placeholder,
.dg-sb-details .dg-sb-link-more {
    padding: 4px 16px 12px;
}

.dg-sb-referral-text {
    padding: 4px 16px 12px 16px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--c-muted, #374151);
}

/* Мобилка: текст в сайдбаре влево; ширина пунктов как на ПК (stretch, не flex-start) */
@media (max-width: 640px) {
    .dg-sidebar-light .dg-sb-nav {
        align-items: stretch;
        text-align: left;
    }
}

.dg-sb-referral-text p {
    margin: 0 0 8px;
}

    .dg-sb-referral-text p:last-child {
        margin-bottom: 0;
    }
/* Реферальный блок в профиле */
.dg-referral-rewards-list {
    list-style: none;
    padding-left: 0;
}

.dg-ref-reward-item {
    margin-bottom: 4px;
}

.dg-ref-reward-done .dg-ref-reward-icon {
    color: var(--c-success, #10B981);
}

/* Страница «Реферальная программа» */
.dg-referral-page {
    padding-bottom: 48px;
}

.dg-referral-intro {
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-muted, #374151);
    margin: 0 0 28px;
}

.dg-referral-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 0 0 14px;
}

.dg-referral-progress-section {
    margin-bottom: 32px;
}

.dg-referral-progress-card {
    background: linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.08), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(var(--c-primary-rgb), 0.25);
    border-radius: 16px;
    padding: 24px;
    min-height: 120px;
}

.dg-referral-loading,
.dg-referral-guest {
    color: #6b7280;
    padding: 12px 0;
}

    .dg-referral-guest p {
        margin: 0;
    }

.dg-referral-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dg-referral-stat-box {
    flex: 1;
    min-width: 140px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    border: 1px solid rgba(var(--c-primary-rgb), 0.15);
}

.dg-referral-stat-num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--c-primary, #8B5CF6);
    line-height: 1.2;
}

.dg-referral-stat-label {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    display: block;
}

.dg-referral-progress-wrap {
    margin-bottom: 18px;
}

.dg-referral-progress-label {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 8px;
}

.dg-referral-progress-track {
    height: 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.dg-referral-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), #3b82f6);
    border-radius: 5px;
    transition: width 0.35s ease;
}

.dg-referral-rewards-inline {
    margin-bottom: 18px;
}

.dg-referral-rewards-inline-title {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.dg-referral-rewards-inline .dg-referral-rewards-list {
    padding-left: 20px;
    margin: 0;
}

.dg-referral-promo-wrap {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--c-primary-rgb), 0.2);
}

.dg-referral-promo-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.dg-referral-promo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dg-referral-promo-code {
    background: rgba(var(--c-primary-rgb), 0.15);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
}

.dg-referral-copy,
.dg-referral-share {
    gap: 8px;
}

.dg-referral-copy svg,
.dg-referral-share svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .dg-referral-promo-row {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .dg-referral-promo-code {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }

    .dg-referral-copy,
    .dg-referral-share {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        flex: 0 0 40px;
    }

    .dg-referral-action-text {
        display: none;
    }
}

.dg-referral-rewards-section {
    margin-bottom: 32px;
}

.dg-referral-rewards-desc {
    color: #4b5563;
    font-size: 14px;
    margin: 0 0 20px;
}

.dg-referral-rewards-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.dg-referral-reward-card {
    background: linear-gradient(145deg, rgba(var(--c-primary-rgb), 0.06), rgba(59, 130, 246, 0.04));
    border: 1px solid rgba(var(--c-primary-rgb), 0.2);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .dg-referral-reward-card:hover {
        border-color: rgba(var(--c-primary-rgb), 0.4);
        box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), 0.12);
    }

    .dg-referral-reward-card.dg-referral-reward-done {
        border-color: var(--c-success, #10B981);
        background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.04));
    }

    .dg-referral-reward-card .dg-referral-reward-icon {
        color: var(--c-primary, #8B5CF6);
    }

    .dg-referral-reward-card.dg-referral-reward-done .dg-referral-reward-icon {
        color: var(--c-success, #10B981);
    }

    .dg-referral-reward-card .dg-referral-reward-icon i,
    .dg-referral-reward-card .dg-referral-reward-icon svg {
        width: 28px;
        height: 28px;
    }

.dg-referral-reward-value {
    font-size: 24px;
    font-weight: 700;
    color: #111;
}

.dg-referral-reward-label {
    font-size: 12px;
    color: #6b7280;
}

.dg-referral-reward-premium {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-primary, #8B5CF6);
}

.dg-referral-reward-card.dg-referral-reward-done .dg-referral-reward-premium {
    color: var(--c-success, #10B981);
}
/* Блок «Что получает реферал» в начале страницы */
.dg-referral-benefits-block {
    margin-bottom: 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
    border: 1px solid rgba(var(--c-primary-rgb), 0.2);
    border-radius: 12px;
}

    .dg-referral-benefits-block .dg-referral-section-title {
        margin-top: 0;
    }

.dg-referral-benefits-list {
    margin-top: 12px;
}

.dg-referral-how-section {
    margin-bottom: 24px;
}

.dg-referral-how-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dg-referral-how-list li {
        margin-bottom: 12px;
        padding-left: 20px;
        position: relative;
        color: #4b5563;
        line-height: 1.5;
    }

        .dg-referral-how-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5em;
            width: 6px;
            height: 6px;
            background: var(--c-primary, #8B5CF6);
            border-radius: 50%;
        }

/* Список рефералов в модалке */
.dg-referral-list-wrap {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--c-primary-rgb), 0.2);
}

.dg-referral-list-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
}

.dg-referral-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 600px) {
    .dg-referral-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .dg-referral-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 599px) {
    .dg-referral-list {
        grid-template-columns: 1fr;
    }
}

.dg-ref-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(var(--c-primary-rgb), 0.15);
    border-radius: 10px;
    min-width: 0;
}

.dg-ref-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dg-ref-item-info {
    flex: 1;
    min-width: 0;
}

.dg-ref-item-name {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-ref-item-activity {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.dg-ref-activity {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #6b7280;
}

    .dg-ref-activity i,
    .dg-ref-activity svg {
        width: 14px;
        height: 14px;
        color: var(--c-primary, #8B5CF6);
    }

.dg-sb-link-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    transition: background .15s, color .15s;
    border: none;
    background: none;
    border-radius: 999px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sb-link-block:hover {
        background: var(--c-bg-light);
        color: var(--c-primary, #8B5CF6);
    }
}

.dg-sb-link-block i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dg-sb-link-button {
    appearance: none;
}

.dg-sidebar-light .dg-sb-link-button:focus,
.dg-sidebar-light .dg-sb-link-button:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

.dg-sb-newweek-wrap {
    padding: 4px 16px 12px;
}

.dg-sb-newweek-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.dg-sb-newweek-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    transition: border-color .15s, box-shadow .15s;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sb-newweek-card:hover {
        border-color: var(--c-primary, #8B5CF6);
        box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), .15);
    }
}

.dg-sb-newweek-card__img {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dg-sb-newweek-card__title {
    display: block;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* О сообществе (блок сверху) */
.dg-sb-community {
    padding-top: 8px !important;
}

.dg-sb-community-name {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}

.dg-sb-community-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.4;
}

.dg-sb-stats {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 13px;
    color: var(--c-muted, #374151);
}

    .dg-sb-stats li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
    }

        .dg-sb-stats li i {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

.dg-sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.dg-sb-btn-primary {
    background: var(--c-primary, #8B5CF6);
    color: #fff;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sb-btn-primary:hover {
        background: #7c3aed;
        color: #fff;
    }
}

.dg-sb-btn-full {
    width: 100%;
}

.dg-sb-rules-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    color: var(--c-muted, #374151);
}

    .dg-sb-rules-list li {
        padding: 2px 0 2px 18px;
        position: relative;
    }

        .dg-sb-rules-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--c-primary, #8B5CF6);
            font-weight: 600;
        }

.dg-sb-placeholder,
.dg-sb-articles-placeholder {
    font-size: 13px;
    color: #9ca3af;
    min-height: 24px;
}

.dg-sb-stats-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--c-muted, #374151);
}

    .dg-sb-stats-inline li {
        padding: 2px 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .dg-sb-stats-inline li i {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

.dg-sb-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px;
}

.dg-sb-footer {
    padding: 16px 16px 0;
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}

.dg-sb-footer-link {
    color: var(--c-primary, #8B5CF6);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sb-footer-link:hover {
        text-decoration: underline;
    }
}

.dg-sb-copy {
    margin: 8px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

.dg-sb-mobile-nav {
    display: none;
}

.dg-sb-tablet-flat {
    display: none;
}

/* Главная + инфо: единая яркость паттерна для всех браузеров */
.dg-main-with-sidebar {
    flex: 1;
    min-width: 0;
    background-image: linear-gradient(var(--dg-page-overlay-light), var(--dg-page-overlay-light)), url(/images/white_bg.png);
    background-repeat: repeat;
    background-size: auto, var(--dg-pattern-size-mobile) auto;
}

body.dg-theme-dark .dg-main-with-sidebar {
    background-image: linear-gradient(var(--dg-page-overlay-dark), var(--dg-page-overlay-dark)), url(/images/dark_bg.png);
    background-repeat: repeat;
    background-size: auto, var(--dg-pattern-size-mobile) auto;
}

/* Desktop: меняем только размер паттерна, яркость НЕ меняем */
@media (min-width: 641px) {
    .dg-main-with-sidebar {
        background-image: linear-gradient(var(--dg-page-overlay-light), var(--dg-page-overlay-light)), url(/images/white_bg.png);
        background-size: auto, var(--dg-pattern-size-desktop) auto;
    }

    body.dg-theme-dark .dg-main-with-sidebar {
        background-image: linear-gradient(var(--dg-page-overlay-dark), var(--dg-page-overlay-dark)), url(/images/dark_bg.png);
        background-size: auto, var(--dg-pattern-size-desktop) auto;
    }
}
/* Совместимость со старыми классами (если где-то остались) */
.dg-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: #111;
    text-decoration: none;
    font-size: 15px;
    transition: background .15s, color .15s;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sidebar-link:hover {
        background: var(--c-bg-light);
        color: #111;
    }
}

.dg-sidebar-link--active {
    background: rgba(var(--c-primary-rgb), .12);
    color: var(--c-primary, #8B5CF6);
}

.dg-sidebar-link i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .dg-left-sidebar {
        width: 56px;
        padding: 0;
        min-height: auto;
    }

    .dg-sidebar-inner {
        padding: 12px 0;
    }

    .dg-sb-mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 8px;
    }

    .dg-sidebar-light .dg-sb-section,
    .dg-sb-details,
    .dg-sb-footer {
        display: none !important;
    }

    .dg-sidebar-light .dg-sb-link {
        padding: 10px 12px;
        justify-content: center;
    }

    .dg-sidebar-light .dg-sb-mobile-nav .dg-sb-link span {
        display: none;
    }

    .dg-sidebar-light .dg-sb-link i {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat {
        display: none !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar {
        width: 56px;
        min-height: calc(100vh - var(--dg-navbar-stack));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sidebar-inner {
        padding: 12px 0 20px;
        min-height: 100%;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-mobile-nav,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-section,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-details,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-footer {
        display: none !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 8px 6px 12px;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        margin: 0 auto;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #111827;
        text-decoration: none;
        box-shadow: none;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item i,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item--active {
        background: rgba(var(--c-primary-rgb), 0.12);
        color: var(--c-primary, #8B5CF6);
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item--primary {
        position: relative;
        border-radius: 999px;
        background: linear-gradient(135deg, #9b6cff 0%, #7c3aed 100%);
        box-shadow: 0 10px 24px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px;
        overflow: hidden;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item--primary::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        font-weight: 500;
        text-indent: 0;
    }
}

@media (max-width: 480px) {
    .dg-left-sidebar {
        position: fixed;
        left: 0;
        top: var(--dg-navbar-stack);
        bottom: 0;
        z-index: 100;
        width: 56px;
    }

    .dg-main-with-sidebar {
        margin-left: 56px;
    }
}

@media (max-width: 640px) {
    .dg-left-sidebar {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)));
        width: 280px;
        max-width: 85vw;
        min-height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        z-index: var(--dg-z-nav);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: none;
        margin-left: 0 !important;
        /* mobile: без blur — вызывает jank при скролле */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* mobile: более плотный фон для читаемости поверх контента */
        background: rgba(255,255,255,0.97) !important;
    }

    /* Инфо + личный блог: top сайдбара = фактическая высота .dg-mobile-top-search (общие --dg-mts-*). */
    body.dg-page-info-blog-mobile:not(.dg-page-messages) {
        --dg-mts-pad-top: max(12px, var(--safe-top));
        --dg-mts-pad-bottom: 10px;
        --dg-mts-row: 46px;
        --dg-mobile-sidebar-top-inset: calc(var(--dg-mts-pad-top) + var(--dg-mts-pad-bottom) + var(--dg-mts-row));
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) {
        --dg-mts-pad-top: max(10px, var(--safe-top));
        --dg-mts-pad-bottom: 8px;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-mobile-top-search {
        padding: var(--dg-mts-pad-top) 12px var(--dg-mts-pad-bottom);
        padding-top: var(--dg-mts-pad-top);
        box-sizing: border-box;
    }

        body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-mobile-top-search .search-container {
            min-height: var(--dg-mts-row);
            box-sizing: border-box;
        }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-mobile-top-search {
        padding: var(--dg-mts-pad-top) 12px var(--dg-mts-pad-bottom) !important;
        padding-top: var(--dg-mts-pad-top) !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar {
        top: var(--dg-mobile-sidebar-top-inset);
        min-height: calc(100dvh - var(--dg-mobile-sidebar-top-inset) - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        height: calc(100dvh - var(--dg-mobile-sidebar-top-inset) - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages).dg-mobile-sidebar-open .dg-mobile-sidebar-backdrop {
        top: var(--dg-mobile-sidebar-top-inset);
    }

    body.dg-mobile-sidebar-open .dg-left-sidebar {
        transform: translateX(0);
        box-shadow: 2px 0 16px rgba(0,0,0,0.10), 1px 0 0 rgba(120,110,150,0.10);
    }

    .dg-main-with-sidebar {
        margin-left: 0 !important;
    }
    /* На мобильном в выезжающем сайдбаре показываем весь контент как на ПК (отмена правил 768px) */
    .dg-left-sidebar .dg-sb-section,
    .dg-left-sidebar .dg-sb-details,
    .dg-left-sidebar .dg-sb-footer {
        display: block !important;
    }

    /* Нижняя панель (z-index выше сайдбара): запас под неё + зазор, чтобы «© …» не упиралась в кнопки */
    .dg-left-sidebar .dg-sidebar-inner {
        padding: 16px 0 calc(40px + var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))) + 4px);
        position: relative;
        text-align: left;
    }

    .dg-left-sidebar .dg-sb-section,
    .dg-left-sidebar .dg-sb-details,
    .dg-left-sidebar .dg-sb-footer {
        text-align: left;
    }

        .dg-left-sidebar .dg-sidebar-light .dg-sb-link,
        .dg-left-sidebar .dg-sidebar-light .dg-sb-summary,
        .dg-left-sidebar .dg-sb-details .dg-sb-nav .dg-sb-link,
        .dg-left-sidebar .dg-sb-link-block,
        .dg-left-sidebar .dg-sb-btn,
        .dg-left-sidebar .dg-sb-btn-full,
        .dg-left-sidebar .dg-sb-title,
        .dg-left-sidebar .dg-sb-community-name,
        .dg-left-sidebar .dg-sb-community-desc,
        .dg-left-sidebar .dg-sb-nav,
        .dg-left-sidebar .dg-sb-stats li,
        .dg-left-sidebar .dg-sb-footer,
        .dg-left-sidebar .dg-sb-footer-link {
            justify-content: flex-start !important;
            text-align: left !important;
        }

        .dg-left-sidebar .dg-sb-section,
        .dg-left-sidebar .dg-sb-details .dg-sb-nav,
        .dg-left-sidebar .dg-sb-details .dg-sb-placeholder,
        .dg-left-sidebar .dg-sb-details .dg-sb-link-more {
            text-align: left !important;
        }

    .dg-left-sidebar .dg-sb-mobile-nav .dg-sb-link span {
        display: inline !important;
    }

    .dg-mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--dg-z-nav) - 1);
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.dg-mobile-sidebar-open .dg-mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .dg-sidebar-close-btn {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--c-muted, #374151);
        cursor: pointer;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
    }

    @media (hover: hover) and (pointer: fine) {
        .dg-sidebar-close-btn:hover {
            background: var(--c-bg-light);
        }
    }
    /* На телефоне убираем первые 5 кнопок (Галерея, Инфо, Правила, О нас, Обновления) и кнопку крестика */
    .dg-sb-mobile-nav {
        display: none !important;
    }

    .dg-sidebar-close-btn {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .dg-mobile-sidebar-backdrop {
        display: none !important;
    }

    .dg-sidebar-close-btn {
        display: none !important;
    }
}

/* Текстовые страницы: Правила, О нас */
.dg-text-page {
    max-width: var(--dg-reading-width);
    margin: 0 auto;
    padding: 24px 16px 72px;
    font-size: var(--dg-font-body);
    line-height: var(--dg-line-reading);
    color: var(--c-text);
    background: transparent;
}

.dg-text-page-title {
    font-size: var(--dg-font-h1);
    line-height: var(--dg-line-heading);
    font-weight: 600;
    margin: 0 0 clamp(18px, 1.2vw, 24px);
}
/* Страницы без hero: заголовок и хлебные крошки по центру, как в FAQ */
.dg-page-header--no-hero {
    text-align: center;
}
    /* Правила, Советы по фото, FAQ, Политика, Обновления, Конкурсы: крошки и заголовок слева, как на странице статей */
    .dg-page-header--no-hero.dg-page-header--align-left {
        text-align: left;
        max-width: var(--dg-reading-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

.dg-text-page .dg-page-header--no-hero.dg-page-header--align-left {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.dg-page-header--no-hero .dg-blog-breadcrumbs {
    margin-bottom: 1em;
}
/* Страницы с hero (Статьи, Новое на этой неделе): крошки по левому краю под hero */
.dg-page-header--with-hero .dg-blog-breadcrumbs {
    margin-bottom: 16px;
}

.dg-text-page-body h3 {
    font-size: var(--dg-font-h3);
    line-height: 1.25;
    margin: clamp(22px, 2vw, 30px) 0 12px;
    font-weight: 600;
}

    .dg-text-page-body h3:first-child {
        margin-top: 0;
    }

.dg-text-page-body h4 {
    font-size: var(--dg-font-body);
    line-height: 1.3;
    margin: 14px 0 6px;
    font-weight: 600;
}

.dg-text-page-body p {
    margin: 0 0 10px;
}

.dg-text-page-body ul {
    margin: 0 0 12px;
    padding-left: 1.5em;
}

.dg-text-page-body hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

/* Страница одного конкурса: статус, лидерборд, победители, о конкурсе */
.dg-contest-section {
    margin-top: 28px;
}

.dg-contest-section-title {
    font-size: var(--dg-font-h3);
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 12px;
}

.dg-contest-section-note {
    font-size: var(--dg-font-sm);
    color: var(--c-muted, #6b7280);
    margin: 0 0 12px;
}

.dg-contest-loading {
    margin: 0;
}

.dg-contest-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.dg-contest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dg-font-sm);
}

    .dg-contest-table th,
    .dg-contest-table td {
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
    }

    .dg-contest-table th {
        font-weight: 600;
        background: #f9fafb;
    }

    .dg-contest-table tbody tr:hover {
        background: #f9fafb;
    }

.dg-contest-your-rank {
    margin: 12px 0 0;
    font-size: var(--dg-font-sm);
    color: var(--c-muted, #374151);
}

.dg-contest-winners-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.dg-contest-table .dg-contest-cell-participant {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    overflow: visible;
}

.dg-contest-participant-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

    .dg-contest-table .dg-contest-cell-participant a {
        font-weight: 500;
    }

.dg-contest-public-title {
    color: var(--c-muted, #6b7280);
    font-size: var(--dg-font-xs);
    font-weight: 500;
    line-height: 1.2;
}

.dg-contest-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
}

.dg-contest-avatar--round {
    border-radius: 50%;
}

.dg-contest-empty {
    color: var(--c-muted, #6b7280);
    font-style: italic;
    padding: 16px !important;
}

.dg-contest-winners-list li {
    padding: 0;
    border-bottom: 1px solid var(--c-bg-light);
}

.dg-contest-winner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.dg-contest-winner-item--empty {
    color: var(--c-muted, #6b7280);
    font-style: italic;
}

.dg-contest-winner-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

.dg-contest-winner-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

    .dg-contest-winner-info a {
        font-weight: 500;
        min-width: 0;
    }

.dg-contest-winner-period {
    color: var(--c-muted, #6b7280);
    font-size: var(--dg-font-xs);
    width: 100%;
}

.dg-contest-description {
    margin: 0 0 16px;
}

.dg-contest-points-title {
    font-size: var(--dg-font-body);
    font-weight: 600;
    margin: 16px 0 8px;
}

.dg-contest-list {
    list-style: none;
    padding-left: 0;
    margin: 16px 0;
}

    .dg-contest-list li {
        margin: 8px 0;
    }

    .dg-contest-list a {
        font-weight: 500;
    }

.dg-updates-page .dg-updates-content {
    white-space: pre-wrap;
    word-break: break-word;
}

    .dg-updates-page .dg-updates-content h2 {
        font-size: var(--dg-font-h2);
        line-height: var(--dg-line-heading);
        margin: 1em 0 0.5em;
    }

    .dg-updates-page .dg-updates-content ul,
    .dg-updates-page .dg-updates-content ol {
        margin: 0.5em 0;
        padding-left: 1.5em;
    }

    .dg-updates-page .dg-updates-content p {
        margin: 0.5em 0;
    }

.dg-updates-empty {
    color: var(--c-muted, #6b7280);
    margin: 0;
}

/* О нас: секция и карточки */
.dg-about-page .seo-description {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(120,110,150,0.10);
    border-radius: 16px;
    padding: 24px 16px 72px;
    font-size: var(--dg-font-body);
    line-height: var(--dg-line-reading);
    color: var(--c-text);
}

.dg-about-page [data-grid] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-bottom: 50px;
}

.dg-about-page [data-card] {
    background: #fff;
    border: 1px solid #eef0f6;
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 2px 8px rgba(22, 28, 45, .04);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

    .dg-about-page [data-card]:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(22, 28, 45, .1);
        border-color: #dfe3f0;
    }

    .dg-about-page [data-card] h4 {
        margin: 0 0 8px;
        font-size: var(--dg-font-body);
        line-height: 1.3;
    }

    .dg-about-page [data-card] p {
        margin: 0;
        color: #555;
    }

.dg-about-page .dg-about-blockquote {
    background: #f8f8ff;
    border-left: 4px solid #c7c7ff;
    padding: 15px 20px;
    border-radius: 6px;
    color: #444;
}

    .dg-about-page .dg-about-blockquote p {
        margin: 0;
    }

.dg-about-page .dg-about-subtitle {
    color: #666;
}

.dg-about-page .dg-about-founders {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(120,110,150,0.16);
}

.dg-about-page .dg-about-founders h3 {
    margin: 0 0 14px;
    font-size: 20px;
}

.dg-about-page .dg-about-founders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 44px;
}

.dg-about-page .dg-about-founder p {
    margin: 0;
}

.dg-about-page .dg-about-founder-name {
    font-weight: 600;
    color: #333;
}

.dg-about-page .dg-about-founder-inn {
    color: #666;
}

/* О нас: тёмная тема — как остальной текст (фон страницы, светлый текст) */
body.dg-theme-dark .dg-about-page .seo-description {
    background: rgba(24,24,30,0.78) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--c-text) !important;
}

    body.dg-theme-dark .dg-about-page .seo-description h2,
    body.dg-theme-dark .dg-about-page .seo-description h3,
    body.dg-theme-dark .dg-about-page .seo-description h4,
    body.dg-theme-dark .dg-about-page .seo-description p,
    body.dg-theme-dark .dg-about-page .seo-description li,
    body.dg-theme-dark .dg-about-page .seo-description em {
        color: var(--c-text);
    }

body.dg-theme-dark .dg-about-page .dg-about-subtitle {
    color: var(--c-muted) !important;
}

body.dg-theme-dark .dg-about-page .dg-about-founders {
    border-top-color: rgba(255,255,255,0.10);
}

body.dg-theme-dark .dg-about-page .dg-about-founder-name {
    color: var(--c-text);
}

body.dg-theme-dark .dg-about-page .dg-about-founder-inn {
    color: var(--c-muted);
}

    body.dg-theme-dark .dg-about-page .dg-about-subtitle strong {
        color: var(--c-text);
    }

body.dg-theme-dark .dg-about-page [data-card] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--c-border);
    box-shadow: none;
}

    body.dg-theme-dark .dg-about-page [data-card] h4 {
        color: var(--c-text);
    }

    body.dg-theme-dark .dg-about-page [data-card] p {
        color: var(--c-muted);
    }

    body.dg-theme-dark .dg-about-page [data-card]:hover {
        border-color: rgba(var(--c-border-rgb), 0.22);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    }

body.dg-theme-dark .dg-about-page .dg-about-blockquote {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(var(--c-primary-rgb), 0.55);
    color: var(--c-text);
}

    body.dg-theme-dark .dg-about-page .dg-about-blockquote p {
        color: var(--c-text);
    }

@media (max-width: 560px) {
    .dg-text-page {
        padding: 12px 16px 60px;
    }

    .dg-text-page-title {
        margin-bottom: 16px;
    }

    .dg-text-page-body h3 {
        margin: 18px 0 8px;
    }

    .dg-about-page .seo-description {
        padding: 14px 12px 48px;
        border-radius: 12px;
    }

    .dg-about-page .dg-about-founders-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================
   7) Filters (home)
   ========================= */
.main-content {
    padding: 24px 0;
    min-height: 50vh; /* ✅ Layout Shift: блок не схлопывается до загрузки контента */
}

/* Hero-слайдер: ограниченная ширина по центру, компактная высота */
.dg-hero-slider {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 10px;
    padding: 0;
}

.dg-hero-slider__viewport {
    overflow: hidden;
}

.dg-hero-slider__track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.35s ease;
    width: 300%;
}

    .dg-hero-slider__track .dg-hero-slide {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        min-width: 33.333333%;
        min-height: 100px;
        display: flex;
        align-items: stretch;
    }

        .dg-hero-slider__track .dg-hero-slide > .home-hero {
            min-height: 100px;
            flex: 1;
        }

        .dg-hero-slider__track .dg-hero-slide > .dg-contest-week,
        .dg-hero-slider__track .dg-hero-slide > .dg-referral-hero,
        .dg-hero-slider__track .dg-hero-slide > .dg-doll-finds-hero {
            min-height: 100px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

.dg-hero-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 4px;
    margin-top: 2px;
}

.dg-hero-slider--single {
    margin-bottom: 0;
}

.dg-hero-slider--single .dg-hero-slider__viewport {
    overflow: visible;
}

.dg-hero-slider--single .dg-hero-slider__track {
    width: 100% !important;
}

.dg-hero-slider--single .dg-hero-slide {
    min-height: 0 !important;
}

.dg-hero-slider--single .dg-hero-slider__track .dg-hero-slide > .home-hero,
.dg-hero-slider--single .dg-hero-slider__track .dg-hero-slide > .dg-contest-week,
.dg-hero-slider--single .dg-hero-slider__track .dg-hero-slide > .dg-referral-hero,
.dg-hero-slider--single .dg-hero-slider__track .dg-hero-slide > .dg-giveaway-hero,
.dg-hero-slider--single .dg-hero-slider__track .dg-hero-slide > .dg-doll-finds-hero {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

.dg-hero-slider--single .dg-hero-slider__dots {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.dg-hero-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.2s ease;
}

    .dg-hero-slider__dot:hover {
        background: rgba(0,0,0,0.35);
    }

.dg-hero-slider__dot--active {
    background: var(--c-primary, #8B5CF6);
}

.dg-ad-hero {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    color: #fff;
}

.dg-ad-hero__picture,
.dg-ad-hero__picture img,
.dg-ad-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dg-ad-hero__picture img { object-fit: cover; }
.dg-ad-hero__shade { background: linear-gradient(90deg, rgba(38,18,50,.62) 0%, rgba(38,18,50,.27) 40%, rgba(38,18,50,.08) 58%, rgba(38,18,50,0) 74%); }

.dg-ad-hero__label {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.dg-ad-hero__content {
    position: absolute;
    z-index: 2;
    left: clamp(20px, 5vw, 64px);
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: min(520px, 68%);
    padding: 12px 0;
    box-sizing: border-box;
}

.dg-ad-hero__advertiser { font-size: 11px; line-height: 1.15; font-weight: 650; opacity: .82; }
.dg-ad-hero__content h2 {
    display: -webkit-box;
    margin: 3px 0 4px;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.dg-ad-hero__content p {
    margin: 0 0 8px;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dg-ad-hero__cta {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: #211522;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    font-weight: 750;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .dg-ad-hero__shade { background: linear-gradient(90deg, rgba(38,18,50,.62) 0%, rgba(38,18,50,.27) 40%, rgba(38,18,50,.08) 58%, rgba(38,18,50,0) 74%); }
    .dg-ad-hero__content { left: 14px; right: 64px; top:0; bottom:0; max-width:none; padding:8px 0; }
    .dg-ad-hero__advertiser { font-size:10px; }
    .dg-ad-hero__content h2 { margin:2px 0 3px; font-size:20px; }
    .dg-ad-hero__content p { margin-bottom:6px; font-size:11px; }
    .dg-ad-hero__cta { min-height:30px; padding:6px 11px; font-size:12px; }
    .dg-ad-hero__label { top:10px; right:10px; }
}

    .dg-hero-slider__dot--active:hover {
        background: var(--c-primary, #8B5CF6);
    }
/* Конкурс недели (hero): прошлый и текущий конкурс в одном слайде */
.dg-contest-week {
    position: relative;
    min-height: 134px;
    padding: 14px 18px;
    background: var(--dg-surface-light);
    border: 1px solid var(--dg-surface-border-light);
    border-radius: var(--r-12);
    box-shadow: none;
    overflow: hidden;
}

.dg-upload-type-bonus {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.38);
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    z-index: 2;
}

.dg-contest-week__split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0;
    height: 100%;
}

.dg-contest-week__panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
}

.dg-contest-week__panel--previous {
    padding-right: 22px;
}

.dg-contest-week__panel--current {
    padding-left: 22px;
    border-left: 1px solid rgba(var(--c-border-rgb), 0.12);
}

.dg-contest-week__eyebrow,
.dg-contest-week__future-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--c-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dg-contest-week__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-primary, #8B5CF6);
    box-shadow: 0 0 0 5px rgba(var(--c-primary-rgb), 0.12);
}

.dg-contest-week__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #111;
}

.dg-contest-week__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.dg-contest-week__title-row .dg-contest-week__title {
    min-width: 0;
}

.dg-contest-week__winner-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.dg-contest-week__winner-avatar {
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(var(--c-primary-rgb), 0.45);
    background: rgba(var(--c-primary-rgb), 0.1);
}

.dg-contest-week__winner-avatar--round {
    border-radius: 50%;
}

.dg-contest-week__winner-avatar--post {
    width: 86px;
    height: 86px;
    border-radius: 50%;
}

.dg-contest-week__winner-avatar img,
.dg-contest-week__top-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dg-contest-week__winner-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dg-contest-week__winner-label {
    font-size: 11px;
    color: var(--c-muted, #666);
}

.dg-contest-week__winner-value {
    max-width: 100%;
    color: var(--c-primary, #8B5CF6);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-contest-week__leader {
    margin: 0;
    font-size: var(--dg-font-xs);
    font-weight: 600;
    color: #111;
    line-height: 1.25;
}

.dg-contest-week__leader a {
    color: inherit;
    text-decoration: none;
}

.dg-contest-week__leaderboard {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding-top: 2px;
}

.dg-contest-week__leaderboard--empty {
    justify-content: space-between;
    gap: 16px;
    padding-right: 42px;
}

.dg-contest-week__top-avatar {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--dg-surface-light);
    background: rgba(var(--c-primary-rgb), 0.1);
    margin-left: -9px;
    text-decoration: none;
}

.dg-contest-week__top-avatar:first-child {
    margin-left: 0;
    z-index: 3;
}

.dg-contest-week__top-avatar + .dg-contest-week__top-avatar {
    z-index: 2;
}

.dg-contest-week__top-more {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: -9px;
    color: var(--c-primary, #8B5CF6);
    background: rgba(var(--c-primary-rgb), 0.14);
    border: 1px solid rgba(var(--c-primary-rgb), 0.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.dg-contest-week__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--c-muted, #666);
}

.dg-contest-week__timer {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.dg-hero-info-btn {
    position: absolute;
    z-index: 2;
    top: 88px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--c-primary, #8B5CF6);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(17, 24, 39, 0.44);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.42) inset;
    text-decoration: none;
}

.dg-hero-info-btn svg {
    width: 18px;
    height: 18px;
}

.dg-contest-week__empty,
.dg-contest-week__loading {
    color: var(--c-muted);
    font-size: 13px;
}

.dg-referral-hero {
    position: relative;
    min-height: 134px;
    padding: 14px 24px 18px;
    background: var(--dg-surface-light);
    border: 1px solid var(--dg-surface-border-light);
    border-radius: var(--r-12);
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
}

    .dg-referral-hero > * {
        min-width: 0;
}

.dg-referral-hero__content {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    min-width: 0;
}

.dg-referral-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.dg-referral-hero__eyebrow {
    z-index: 1;
    align-self: flex-start;
}

.dg-referral-hero__title {
    margin: 0;
    color: var(--c-primary, #8B5CF6);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
}

.dg-referral-hero__bonus {
    max-width: 360px;
    margin: 0;
    color: #111;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
}

.dg-referral-hero__visual {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.dg-referral-hero__avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(var(--c-primary-rgb), 0.14);
    border: 1px solid rgba(var(--c-primary-rgb), 0.26);
}

.dg-referral-hero__avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.82);
    background: rgba(var(--c-primary-rgb), 0.08);
}

.dg-referral-hero__crown {
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 34px;
    height: 34px;
    display: inline-block;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}

.dg-referral-hero__crown::before {
    content: "\01F451";
}

.dg-referral-hero__details-btn {
    z-index: 2;
    align-self: flex-end;
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 38px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: var(--c-primary, #8B5CF6);
    border: 1px solid rgba(var(--c-primary-rgb), 0.82);
    box-shadow: 0 10px 22px rgba(var(--c-primary-rgb), 0.22);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dg-referral-hero__details-btn:hover {
    color: #ffffff;
    background: var(--c-primary-600, #7C3AED);
    border-color: rgba(var(--c-primary-rgb), 0.95);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(var(--c-primary-rgb), 0.30);
}

@media (max-width: 980px) {
    .dg-referral-hero {
        padding-inline: 18px;
    }

    .dg-referral-hero__content {
        gap: 16px;
    }

    .dg-referral-hero__copy {
        max-width: none;
    }

    .dg-referral-hero__title {
        font-size: 24px;
    }

    .dg-referral-hero__details-btn {
        min-width: 104px;
        padding-inline: 14px;
    }
}

@media (max-width: 760px) {
    .dg-referral-hero {
        padding: 12px 14px 14px;
        gap: 10px;
        align-items: flex-start;
    }

    .dg-referral-hero__content {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "visual copy button";
        align-items: end;
        column-gap: 12px;
        row-gap: 0;
        justify-items: start;
        width: 100%;
    }

    .dg-referral-hero__copy {
        grid-area: copy;
        align-self: end;
        justify-self: start;
        text-align: left;
    }

    .dg-referral-hero__visual {
        grid-area: visual;
        justify-self: start;
    }

    .dg-referral-hero__details-btn {
        grid-area: button;
        justify-self: end;
        align-self: end;
        min-width: 92px;
        padding-inline: 12px;
    }
}

.dg-doll-finds-hero {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 24px 28px;
    border-radius: var(--r-12);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(17,24,39,.88), rgba(17,24,39,.34)),
        url('/images/background.jpg') center/cover no-repeat;
}

.dg-doll-finds-hero__copy {
    max-width: 460px;
}

.dg-doll-finds-hero__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.05;
}

.dg-doll-finds-hero__text {
    margin: 6px 0 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.35;
}

.dg-doll-finds-hero__details-btn {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(var(--c-primary-rgb), 0.32);
    background: var(--c-primary, #8B5CF6);
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(var(--c-primary-rgb), 0.24);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dg-doll-finds-hero__details-btn:hover {
    background: var(--c-primary-600, #7C3AED);
    border-color: rgba(var(--c-primary-rgb), 0.55);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(var(--c-primary-rgb), 0.30);
}

@media (max-width: 640px) {
    .dg-contest-week {
        padding: 12px;
    }

    .dg-contest-week__split {
        grid-template-columns: 1fr 1fr;
    }

    .dg-contest-week__panel--previous {
        padding-right: 12px;
    }

    .dg-contest-week__panel--current {
        padding-left: 12px;
        padding-right: 28px;
    }

    .dg-contest-week__title {
        font-size: 13px;
    }

    .dg-contest-week__leader {
        display: none;
    }

    .dg-contest-week__winner-card {
        align-items: flex-start;
    }

    .dg-contest-week__winner-avatar {
        width: 59px;
        height: 59px;
        border-radius: 50%;
    }

    .dg-contest-week__winner-avatar--round {
        border-radius: 50%;
    }

    .dg-contest-week__winner-avatar--post {
        width: 59px;
        height: 59px;
        border-radius: 50%;
    }

    .dg-contest-week__winner-value {
        font-size: 14px;
    }

    .dg-contest-week__top-avatar,
    .dg-contest-week__top-more {
        width: 36px;
        height: 36px;
        margin-left: -7px;
    }

    .dg-contest-week__top-more {
        font-size: 13px;
    }

    .dg-contest-week__footer {
        gap: 6px;
        font-size: 12px;
    }

    .dg-contest-week__timer {
        display: none;
    }

    .dg-contest-week__eyebrow {
        font-size: 9px;
    }

    .dg-hero-info-btn {
        top: 78px;
        right: 12px;
        width: 30px;
        height: 30px;
    }

    .dg-referral-hero {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "eyebrow eyebrow"
            "visual copy"
            ". button";
        padding: 12px;
        gap: 10px;
        align-items: end;
    }

    .dg-referral-hero__copy {
        gap: 5px;
        padding-right: 0;
    }

    .dg-referral-hero__eyebrow {
        justify-self: start;
    }

    .dg-referral-hero__title {
        font-size: 22px;
    }

    .dg-referral-hero__bonus {
        max-width: none;
        font-size: 12px;
        text-align: left;
    }

    .dg-referral-hero__visual {
        justify-self: start;
    }

    .dg-referral-hero__avatar-wrap {
        width: 58px;
        height: 58px;
        padding: 3px;
    }

    .dg-referral-hero__crown {
        right: -3px;
        bottom: -4px;
        width: 28px;
        height: 28px;
        font-size: 18px;
        line-height: 25px;
    }

    .dg-referral-hero__details-btn {
        justify-self: end;
        min-width: 88px;
        min-height: 32px;
        padding: 8px 11px;
        font-size: 12px;
    }

    .dg-doll-finds-hero {
        min-height: 0;
        padding: 18px 14px;
    }

    .dg-doll-finds-hero__copy {
        max-width: calc(100% - 104px);
    }

    .dg-doll-finds-hero__title {
        font-size: 24px;
        line-height: 1.05;
    }

    .dg-doll-finds-hero__text {
        margin-top: 24px;
        max-width: 220px;
        font-size: 12px;
        line-height: 1.3;
    }

    .dg-doll-finds-hero__details-btn {
        right: 12px;
        bottom: 12px;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .dg-hero-slider .dg-contest-week__timer {
        display: none;
    }
}

/* Слайд hero: розыгрыш — фиксированная высота, картинка обрезается (object-fit: cover). Кнопка справа внизу на картинке, как у конкурсов. */
/* Рекомендуемое разрешение картинки: 1000×600 px (соотношение ~1.67:1) — тогда не обрежется по краям. */
.dg-giveaway-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    background: var(--dg-surface-light);
    border: 1px solid var(--dg-surface-border-light);
    border-radius: var(--r-12);
    box-shadow: none;
    overflow: hidden;
}

.dg-giveaway-hero__img-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.dg-giveaway-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
}

.dg-giveaway-hero__details-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
    color: var(--c-primary, #8B5CF6);
    text-decoration: none;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

    .dg-giveaway-hero__details-btn:hover {
        background: #fff;
        color: var(--c-primary, #8B5CF6);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

/* Hero-блок: ограниченная ширина по центру, компактная высота */
.home-hero {
    max-width: 1000px;
    margin: 0 auto 10px;
    padding: 12px 16px;
    background: var(--dg-surface-light);
    border: 1px solid var(--dg-surface-border-light);
    border-radius: var(--r-12);
    box-shadow: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (min-width: 641px) {
    .home-hero {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@media (max-width: 640px) {
    .dg-hero-slider__track .dg-hero-slide:has(> .dg-contest-week) {
        min-height: 0;
        align-items: flex-start;
    }

    .dg-hero-slider__track .dg-hero-slide > .dg-contest-week {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
    }

    .home-hero,
    .dg-contest-week {
        padding: 10px 12px;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .dg-giveaway-hero {
        padding: 8px 10px;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

/* Рамка hero-слайдера убрана */

.home-hero-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.home-hero-text {
    margin: 0;
    font-size: 16px;
    color: var(--c-muted);
}

/* Текст «Ваша галерея кукол» убран; общая круглая кнопка «Создать» на главной и в блоге */
.home-hero .home-hero-text {
    display: none;
}

.home-hero-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* 🔑 важно для hover / scale */
    padding: 8px 6px;
    overflow: visible;
    align-items: center;
}

/* hero: ширина кнопки = ширине текста "Ваша галерея кукол" */
.home-hero-main {
    flex: 0 1 auto !important; /* перебиваем inline flex:1 1 auto */
    width: fit-content;
    max-width: 100%;
}

.home-hero-actions {
    width: 100%;
}

.home-hero-btn {
    min-width: 0; /* убрали фикс */
    width: 100%; /* равна ширине .home-hero-main (то есть ширине заголовка) */
    /* ✅ DG: делаем овальную кнопку как “теги”, но без изменения размеров */
    border-radius: 999px !important;
}

/* Общая круглая кнопка «Создать» в hero — по форме как кнопка «Блог» справа.
   Селектор по id чтобы гарантированно перебить .home-hero-btn и любой кэш. */
.dg-hero-create-btn,
#heroCreateGalleryBtn {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding: 0 8px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    box-sizing: border-box;
}

/* Hero (главная): кнопка «Создать галерею» только иконка, без фона под ней */
#heroCreateGalleryBtn {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    align-self: center;
    vertical-align: middle;
}

    #heroCreateGalleryBtn img {
        transform: translateY(1px);
    }

    #heroCreateGalleryBtn:hover,
    #heroCreateGalleryBtn:active,
    #heroCreateGalleryBtn:focus,
    #heroCreateGalleryBtn:focus-visible {
        background: transparent !important;
        box-shadow: none !important;
    }

body:not(.dg-auth-logged-in) #heroCreateGalleryBtn {
    display: none !important;
}

body[data-auth="0"] #anonHero #heroShortsBtn {
    display: none !important;
}

#heroShortsBtn {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    align-self: center;
    vertical-align: middle;
}

#heroShortsBtn img {
    transform: translateY(1px);
}

#heroShortsBtn:hover,
#heroShortsBtn:active,
#heroShortsBtn:focus,
#heroShortsBtn:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}

body.dg-auth-logged-in .dg-hero-video-story-btn,
.dg-hero-video-story-btn[hidden] {
    display: none !important;
}

.dg-hero-video-story-btn {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dg-hero-video-story-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: var(--dg-story-unviewed-border-width) solid transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.dg-hero-video-story-btn--unviewed::before {
    border-color: var(--dg-story-unviewed-border);
}

.dg-hero-video-story-btn__preview {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
    object-position: center top;
    background: #0f172a;
    background-image: url("/images/stella_video.png");
    background-position: center top;
    background-size: cover;
    pointer-events: none;
}

.dg-hero-video-story-btn__play {
    display: none !important;
}

    .dg-hero-video-story-btn__play svg,
    .dg-hero-video-story-btn__play .lucide {
        display: none !important;
    }

.dg-hero-video-story-btn:hover .dg-hero-video-story-btn__preview {
    filter: brightness(1.05);
}

.dg-hero-video-story-btn:active .dg-hero-video-story-btn__preview {
    transform: scale(0.97);
}

.dg-hero-video-story-viewer {
    padding: 0 !important;
    background: rgba(0,0,0,0.96);
}

.dg-hero-video-story-viewer__content {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: transparent;
}

.dg-hero-video-story-viewer__media-wrap {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url(/images/white_bg.png);
    background-repeat: repeat;
    background-size: auto, 680px auto;
}

body.dg-theme-dark .dg-hero-video-story-viewer__media-wrap {
    background-image: linear-gradient(rgba(15,15,18,0.85), rgba(15,15,18,0.85)), url(/images/dark_bg.png);
}

.dg-hero-video-story-viewer__video {
    width: 100%;
    height: 100%;
}

.dg-hero-video-story-viewer__video {
    object-fit: contain;
    background: transparent !important;
    max-height: none;
}

.dg-hero-video-story-viewer__stub {
    color: rgba(255, 255, 255, 0.86);
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dg-hero-video-story-viewer__close {
    position: fixed !important;
    top: max(12px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
    right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
    z-index: 20 !important;
}

/* Hero (Инфо/блог): бургер как у Activity/VK — без фона под иконкой */
#dgBlogHeroBurgerBtn {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

    #dgBlogHeroBurgerBtn:hover,
    #dgBlogHeroBurgerBtn:active,
    #dgBlogHeroBurgerBtn:focus,
    #dgBlogHeroBurgerBtn:focus-visible {
        background: transparent !important;
        box-shadow: none !important;
    }

.dg-blog-hero {
    max-width: 1000px;
    margin: 0 auto 10px;
}

/* Блог hero: на мобиле/ПК — кнопка галереи, бургер скрыт */
.dg-blog-hero-burger {
    display: none;
}

.dg-blog-hero-create-desktop {
    display: inline-flex !important;
}

/* ≤640px: в инфо показываем кнопку "Создать галерею" как на главной */
@media (max-width: 640px) {
    .dg-blog-hero-wrap .dg-blog-hero-burger {
        display: none !important;
    }

    .dg-blog-hero-wrap #heroCreateGalleryBtn {
        display: none !important;
    }

    .dg-blog-hero-wrap #heroShortsBtn {
        display: inline-flex !important;
    }
}

@media (min-width: 641px) {
    .dg-blog-hero-wrap .dg-blog-hero-burger {
        display: none !important;
    }
}

/* Выдвижная панель блога (мобильный ≤640px): от левого края до середины экрана */
.dg-blog-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--dg-z-nav) - 1);
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

    .dg-blog-drawer-backdrop.dg-blog-drawer-backdrop--open {
        opacity: 1;
        pointer-events: auto;
    }

.dg-blog-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50vw;
    z-index: var(--dg-z-nav);
    background: #fff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .dg-blog-drawer.dg-blog-drawer--open {
        transform: translateX(0);
    }

.dg-blog-drawer-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-muted, #374151);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .dg-blog-drawer-close:hover {
        background: var(--c-bg-light);
    }

.dg-blog-drawer-create {
    margin-top: 8px;
}


/* Мобильная адаптация hero — layout (padding/visual задан в canonical-блоке выше) */
@media (max-width: 640px) {
    .home-hero-title {
        font-size: 20px;
    }

    .home-hero-text {
        font-size: 16px;
    }

    .home-hero-actions {
        justify-content: flex-start;
    }

    /* ✅ DG: на телефоне держим кругляши СПРАВА от "Ваша галерея" + кнопки "Создать галерею" */
    #anonHero {
        flex-wrap: nowrap !important; /* было wrap → из-за этого кругляши падали вниз */
        align-items: center !important;
        gap: 12px !important;
    }

        /* ✅ левый блок должен уметь сжиматься, иначе он выталкивает правый вниз */
        #anonHero .home-hero-main {
            flex: 1 1 auto !important;
            min-width: 0 !important; /* критично для flex, чтобы текст мог ужаться */
            width: auto !important; /* перебиваем fit-content */
        }

        /* кнопка "Создать галерею" не должна раздувать ширину */
        #anonHero .home-hero-actions {
            width: auto !important; /* перебиваем width:100% из общего hero */
            padding: 6px 0 !important;
            margin-top: 6px !important;
        }

        #anonHero .home-hero-btn {
            width: auto !important; /* на мобиле не растягиваем на всю ширину */
            max-width: 100%;
            white-space: nowrap;
        }

            /* Круглая кнопка «Создать» перебивает общий .home-hero-btn и на мобиле остаётся круглой */
            #anonHero .home-hero-btn.dg-hero-create-btn {
                width: 68px !important;
                height: 68px !important;
                min-width: 68px !important;
                max-width: 68px !important;
            }

            #heroCreateGalleryBtn {
                display: none !important;
            }

            #heroShortsBtn {
                display: inline-flex !important;
            }

        /* ✅ правый блок с круглыми кнопками — фиксируем справа и не даём сжиматься */
        #anonHero .dg-hero-rounds {
            flex: 0 0 auto !important;
            margin-left: 8px !important;
        }

        #anonHero .dg-hero-rounds__viewport {
            padding: 8px 8px !important;
            margin: -8px -8px !important;
        }

        #anonHero .dg-hero-rounds__track {
            gap: 14px !important; /* чуть плотнее на мобиле */
        }
}

/* =========================
   DG) Hero Activity round button (like giveaway position)
   ========================= */

.hero-round-btn {
    width: 68px; /* как у кнопки розыгрыша */
    height: 68px;
    position: relative;
    border-radius: 50%;
    border: none;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary); /* основной фиолетовый */
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
    /* ✅ убираем ВСЕ системные подсветки/обводки */
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    /* чтобы не было “синей ебанины” при клике/выделении */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transform: translate3d(0,0,0) scale(1);
    transition:
        opacity 360ms cubic-bezier(.22, 1, .36, 1),
        transform 360ms cubic-bezier(.22, 1, .36, 1),
        filter 180ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 200ms cubic-bezier(.2, 0, 0, 1);
    will-change: transform, opacity;
}

    /* Firefox: внутренняя обводка кнопки */
    .hero-round-btn::-moz-focus-inner {
        border: 0;
    }

    /* ✅ на фокусе/клике никакой подсветки */
    .hero-round-btn:focus,
    .hero-round-btn:focus-visible,
    .hero-round-btn:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .hero-round-btn:hover {
        transform: translateY(-1px) scale(1.03);
        filter: brightness(1.03);
    }

    .hero-round-btn:active {
        transform: translateY(0) scale(0.97);
        filter: brightness(0.98);
    }

    .hero-round-btn:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent) !important;
    }

    /* =========================
   DG) Hero buttons: use drawn images (activity / vk)
   ========================= */

    /* общие для “кнопок-картинок” */
    .hero-round-btn.dg-hero-activity-btn,
    .hero-round-btn.dg-hero-round-btn--vk {
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: transparent !important;
        text-indent: -9999px; /* прячем текст "Активность"/"VK" */
        overflow: hidden;
    }

    /* Activity */
    .hero-round-btn.dg-hero-activity-btn {
        background: transparent !important;
    }

    /* VK */
    .hero-round-btn.dg-hero-round-btn--vk {
        background: transparent !important;
    }


/* DG: hero (anon) — по умолчанию слева/справа в один ряд */
#anonHero .home-hero-main {
    align-items: flex-start;
    text-align: left;
}


/* DG: hero anon — перебиваем inline (space-between) чтобы кнопки не улетали вправо */
#anonHero {
    justify-content: space-between !important; /* держим правый блок справа */
}

    /* Главная: кнопка "Создать галерею" должна стоять в одной линии
   с круглыми hero-кнопками (как в инфо). */
    #anonHero .home-hero-main {
        align-self: center;
    }

    #anonHero .home-hero-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 68px;
        display: flex;
        align-items: center;
    }

    #anonHero #heroCreateGalleryBtn {
        align-self: center;
    }

    #anonHero .dg-hero-rounds {
        align-self: center;
    }


/* =========================
   DG) Hero round buttons (slider)
   ========================= */

.dg-hero-rounds {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 16px;
    min-width: 0;
}

.dg-hero-rounds__viewport {
    /* ❗ НЕ режем hover/scale/dot */
    overflow: visible;
    max-width: 100%;
    /* небольшой запас, чтобы halo/dot не упирался */
    padding: 10px 10px;
    margin: -10px -10px; /* сохраняем прежнюю геометрию в строке */
}


.dg-hero-rounds__track {
    display: flex;
    align-items: center;
    gap: 24px; /* было 12 */
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: transform 420ms ease;
    /* ❗ чтобы псевдоэлементы (dot/halo) не резались внутри flex-контекста */
    overflow: visible;
}


/* конкретные кнопки внутри (уже есть общий стиль .hero-round-btn) */
.dg-hero-round-btn {
    flex: 0 0 auto;
}

/* Единая геометрия hero-кнопок: одинаковый размер и вертикальное выравнивание */
.dg-hero-rounds__track .hero-round-btn {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    align-self: center;
}

/* VK — фирменный синий */
.dg-hero-round-btn--vk {
    background: #0077FF;
    /* "логотип" текстом */
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* Блог / Кукольные находки — картинка без фоновой подложки */
.dg-hero-round-btn--blog,
.dg-hero-round-btn--doll-finds {
    background: transparent !important;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
}

/* =========================
   DG) Hero drawn image buttons (activity / vk)
   ========================= */

.hero-round-btn.dg-hero-img-btn {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.hero-round-btn.dg-hero-img-btn {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.hero-round-btn.dg-hero-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.hero-round-btn.dg-hero-enter-once {
    transition: none !important;
    animation: dgHeroEnterOnce 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-round-btn.dg-hero-visible:hover {
    transform: translateY(-1px) scale(1.03);
}

.hero-round-btn.dg-hero-visible:active {
    transform: translateY(0) scale(0.97);
}


@media (prefers-reduced-motion: reduce) {
    .hero-round-btn.dg-hero-enter-once {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes dgHeroEnterOnce {
    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.92);
    }

    62% {
        opacity: 1;
        transform: translate3d(0, -1px, 0) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


.hero-round-btn.dg-hero-img-btn .dg-hero-round-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: transform 160ms cubic-bezier(.2, 0, 0, 1), filter 160ms cubic-bezier(.2, 0, 0, 1);
}

/* Блог / Кукольные находки: показываем картинку внутри круглой кнопки */
.dg-hero-round-btn--blog .dg-hero-round-img,
.dg-hero-round-btn--doll-finds .dg-hero-round-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Одинаковая заметная реакция hover/press для кнопок-изображений (как у "Галереи") */
.dg-hero-rounds__track .hero-round-btn.dg-hero-img-btn:hover .dg-hero-round-img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.dg-hero-rounds__track .hero-round-btn.dg-hero-img-btn:active .dg-hero-round-img {
    transform: scale(0.97);
    filter: brightness(0.98);
}


/* =========================
   DG) Apple-like Activity Button (dot + hover/press)
   ========================= */

:root {
    /* iOS system red-ish */
    --dg-ios-red: #ff3b30;
}

@keyframes dgDotPop {
    0% {
        transform: scale(0.6);
    }

    55% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes dgDotHalo {
    0% {
        opacity: 0.0;
        transform: translate(6px, -6px) scale(0.6);
    }

    20% {
        opacity: 0.35;
    }

    100% {
        opacity: 0.0;
        transform: translate(6px, -6px) scale(1.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-round-btn,
    .hero-round-btn:hover,
    .hero-round-btn:active {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    #heroActivityBtn.dg-activity-attn::after,
    .dg-hero-activity-btn.dg-activity-attn::after,
    #heroActivityBtn.dg-activity-attn::before,
    .dg-hero-activity-btn.dg-activity-attn::before {
        animation: none !important;
    }
}


.filters-container {
    padding: 0 16px 24px;
    position: relative; /* + */
    z-index: 20; /* + фильтры поверх галереи */
}

@media (max-width: 640px) {
    .filters-container {
        padding: 0 12px 16px;
    }

    .filters {
        gap: 8px;
        padding-bottom: 4px;
    }
}
/* ✅ когда открыт мобильный фильтр — поднимаем слой фильтров выше карточек (бейджи 25/26, лайк 30) */
body.dg-filter-open .filters-container {
    z-index: 90; /* выше 30, но ниже navbar (100) */
}

.filters {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.filter-tag {
    padding: 8px 16px;
    border: 1px solid var(--dg-pill-border-light);
    border-radius: 20px;
    background: var(--dg-pill-light);
    color: var(--c-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}

    .filter-tag:hover {
        border-color: var(--c-primary);
        color: var(--c-primary);
    }

    /* ✅ DG: фиксированное выделение выбранного тега/сабтега (как hover/тап) */
    .filter-tag.active {
        border-color: var(--c-primary);
        color: var(--c-primary);
        box-shadow: 0 0 0 1px var(--c-primary) inset;
    }


/* FIX: кнопка "Фильтр" не должна заливаться фиолетовым — только контур */
.filters .mobile-filter-btn {
    -webkit-tap-highlight-color: transparent; /* iOS/Android убираем системный highlight */
}

    .filters .mobile-filter-btn.active,
    body.dg-filter-open .filters .mobile-filter-btn {
        background: var(--dg-message-surface-light) !important;
        color: var(--c-primary) !important;
        border-color: var(--c-primary) !important;
        box-shadow: 0 0 0 1px var(--c-primary) inset;
        backdrop-filter: blur(var(--dg-message-glass-blur));
        -webkit-backdrop-filter: blur(var(--dg-message-glass-blur));
    }


/* Светлая тема: фильтры как пузырь сообщения */
body:not(.dg-theme-dark) .filter-tag,
body:not(.dg-theme-dark) .filters .filter-tag,
body:not(.dg-theme-dark) .filters .mobile-filter-btn {
    background: var(--dg-message-surface-light) !important;
    border-color: var(--dg-message-border-light) !important;
    color: var(--c-muted) !important;
    backdrop-filter: blur(var(--dg-message-glass-blur));
    -webkit-backdrop-filter: blur(var(--dg-message-glass-blur));
    box-shadow: none;
}

    body:not(.dg-theme-dark) .filter-tag:hover,
    body:not(.dg-theme-dark) .filters .filter-tag:hover,
    body:not(.dg-theme-dark) .filters .mobile-filter-btn:hover {
        background: var(--dg-message-surface-light-hover) !important;
        border-color: var(--c-primary) !important;
        color: var(--c-primary) !important;
    }

    body:not(.dg-theme-dark) .filter-tag.active,
    body:not(.dg-theme-dark) .filters .filter-tag.active {
        background: var(--dg-message-surface-light) !important;
        border-color: var(--c-primary) !important;
        color: var(--c-primary) !important;
        box-shadow: 0 0 0 1px var(--c-primary) inset !important;
    }

/* =========================
   8) Gallery (Masonry-like)
   ========================= */
.gallery-container {
    padding: 0 16px;
}

@media (max-width: 420px) {
    .gallery-container {
        padding: 0 12px;
    }
}

/* ✅ Адаптивность: элементы не вылетают за края на телефонах */
@media (max-width: 640px) {
    .modal-content,
    .modal-content.modal-large {
        max-width: calc(100vw - var(--safe-left) - var(--safe-right)) !important;
    }

    .modal-body {
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
    }
        /* длинные слова/ссылки не раздувают экран */
        .modal-body p,
        .modal-body li,
        .chat-messages,
        .dg-chat-empty-text {
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
}

/* Горизонтальная раскладка по строкам */
.doll-gallery,
#dollGallery {
    display: grid;
    grid-auto-flow: row;
    /* базовая “высота строки” под masonry-лайаут, JS выставляет --span */
    grid-auto-rows: 8px;
    gap: 12px;
    align-items: start;
    /* убрали жёсткий contain/transform, чтобы iOS не глушил инерцию скролла */
}



/* те же брейкпоинты: 2/4/6 колонок */
@media (max-width: 679.98px) {
    .doll-gallery,
    #dollGallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 680px) and (max-width: 1279.98px) {
    .doll-gallery,
    #dollGallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .doll-gallery,
    #dollGallery {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* «Новое за неделю» — фиксированно 4 колонки по ширине */
@media (max-width: 640px) {
    #dollGallery.dg-gallery-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 641px) {
    #dollGallery.dg-gallery-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dg-newweek-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    padding: 4px 16px 72px;
}

    .dg-newweek-content .gallery-container {
        text-align: left;
    }

.dg-newweek-empty {
    font-size: 16px;
    color: var(--c-muted, #6b7280);
    margin: 24px 0;
    padding: 16px 0;
}

.dg-sidebar-light .dg-sb-link-active {
    background: rgba(var(--c-primary-rgb), 0.12);
    color: var(--c-primary, #8B5CF6);
    font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
    .dg-sidebar-light .dg-sb-link.dg-sb-link-active:hover {
        background: rgba(var(--c-primary-rgb), 0.18);
    }
}

/* Заголовок аккордеона, если внутри выбран пункт (ПК и мобилка) */
.dg-sidebar-light .dg-sb-details:has(.dg-sb-link-active) > .dg-sb-summary {
    background: rgba(var(--c-primary-rgb), 0.12);
    color: var(--c-primary, #8B5CF6);
    font-weight: 600;
}

.dg-sb-footer-link-active {
    color: var(--c-primary, #8B5CF6) !important;
    font-weight: 500;
}

/* Masonry на CSS-columns */
.doll-gallery.masonry {
    /* columns работают ТОЛЬКО с display:block */
    display: block;
    column-width: 320px; /* базовая ширина колонки (адаптируется) */
    column-gap: 16px; /* горизонтальный зазор между колонками */
}

    /* карточка не должна разрывать колонку */
    .doll-gallery.masonry .doll-card {
        display: inline-block; /* чтобы ширина вписывалась в колонку */
        width: 100%;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        margin: 0 0 16px; /* вертикальный зазор между карточками */
    }


/* Safari-only: только фон полей ввода, без тотального text-fill */
@supports (-webkit-touch-callout: none) {
    /* Safari: слегка темнее фон полей ввода текста */
    .form-group input,
    .form-group textarea,
    #chatForm #chatInput {
        background-color: var(--c-bg-light);
    }

        .form-group input:focus,
        .form-group textarea:focus,
        #chatForm #chatInput:focus {
            background-color: var(--c-border, #E5E7EB);
        }
}


/* карточка в гриде: без inline-block и column-break */
.doll-card {
    margin: 0 0 12px;
    background: transparent;
    border-radius: var(--r-12);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: .2s;
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    /* снова используем span по переменной, которую считает JS */
    grid-row-end: span var(--span, 1);
}

    /* ✅ DG: общий грид — “слишком широкие” превью (16:9 / 21:9) делаем выше через aspect-ratio + crop
   Идея: ограничиваем МАКСИМАЛЬНОЕ соотношение сторон, чтобы wide-картинки не были “приплюснутыми”. */
    .doll-card:not(.dg-sale-thumb):not(.doll-card--short) .doll-image.dg-thumb-capped {
        aspect-ratio: var(--thumb-ar, 4 / 3);
        overflow: hidden;
    }

        /* картинка заполняет заданную рамку и обрезается */
        .doll-card:not(.dg-sale-thumb):not(.doll-card--short) .doll-image.dg-thumb-capped > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


    .doll-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
    }

@media (hover: none) {
    .doll-card:hover {
        transform: none;
        box-shadow: var(--shadow-1);
    }
}

.doll-card.premium-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-12);
    pointer-events: none;
    z-index: 5;
    outline: 2px solid var(--c-warning);
    outline-offset: -2px;
}

/* Тематическое партнерское размещение: геометрия сайта, без свободной баннерной верстки. */
.dg-ad-card {
    color: #fff;
    text-decoration: none;
    background: var(--c-bg-light, #f3f4f6);
}

.dg-ad-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.dg-ad-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-ad-card__media::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(to top, rgba(20, 12, 24, .88), rgba(20, 12, 24, 0));
    pointer-events: none;
}

.dg-ad-card__label {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0,0,0,.72);
    backdrop-filter: none !important;
}

.dg-ad-card__overlay {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.dg-ad-card__advertiser {
    font-size: 12px;
    font-weight: 600;
    opacity: .82;
}

.dg-ad-card__title {
    font-size: 18px;
    line-height: 1.16;
    font-weight: 800;
}

.dg-ad-card__description {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    opacity: .92;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dg-ad-card__cta {
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    color: #211522;
    font-size: 12px;
    font-weight: 750;
}

/* ✅ DG: "В продаже" — превью не должны растягиваться по натуральной высоте */
.dg-sale-thumb .doll-image {
    aspect-ratio: 1 / 1; /* как плитка в избранном */
    height: auto;
    overflow: hidden;
}

    .dg-sale-thumb .doll-image > img {
        width: 100%;
        height: 100%; /* заполняем квадрат */
        object-fit: cover; /* без "раскрытия на максимум" */
        display: block;
    }


/* ✅ DG FIX: портретная подгонка нужна ТОЛЬКО в детальной карточке (модалке),
   но НЕ в превью гридов/папок, иначе карточка “раскрывается” по натуральной высоте */
.doll-detail-image > img.detail-main-img.portrait {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* страховка: в "В продаже" (плитки) портрет НИКОГДА не должен ломать квадрат */
.dg-sale-thumb .doll-image > img.portrait {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* бейдж «Валютный» */
.for-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: var(--c-success);
    color: #fff;
    z-index: 25; /* ← бейдж выше картинки */
    pointer-events: none; /* ← не перекрывает клики по фото */
    text-shadow: 0 1px 2px rgba(0,0,0,.25); /* читаемость на светлом фоне */
}

/* статусный бейдж — СПРАВА */
.dg-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 26;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    /* ✅ один механизм для всех бейджей */
    background: var(--dg-badge-bg, rgba(17, 24, 39, 0.75));
    border: 1px solid var(--dg-badge-brd, rgba(255,255,255,.12));
    box-shadow: none;
    transition: opacity .18s ease, transform .18s ease, background-color .22s ease, border-color .22s ease;
}

.dg-card-badge.dg-card-badge--entering,
.dg-card-badge.dg-card-badge--leaving {
    opacity: 0;
    transform: scale(.88);
}



/* ✅ FIX: когда открыт мобильный фильтр — бейджи не должны перекрывать окно */
body.dg-filter-open .for-sale-badge,
body.dg-filter-open .dg-card-badge {
    z-index: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.dg-card-badge svg,
.dg-card-badge .lucide,
.dg-card-badge i[data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
    flex-shrink: 0;
}

/* 🔥 на ПК чуть крупнее */
@media (min-width: 1024px) {
    .dg-card-badge svg,
    .dg-card-badge .lucide,
    .dg-card-badge i[data-lucide] {
        width: 18px;
        height: 18px;
    }
}




/* лайк (галерея) */
.like-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: none;
    border-radius: 9999px;
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-transform: translateZ(0.01px);
    transform: translateZ(0.01px);
    backface-visibility: hidden;
    will-change: transform;
    isolation: isolate; /* удерживает слой/контур на macOS Safari */
    box-shadow: 0 0 0 1px rgba(17,24,39,.08) inset, 0 1px 2px rgba(0,0,0,.06);
}

    .like-button:hover {
        background: #fff;
        transform: scale(1.04);
    }

    /* размер иконки на ПК */
    .like-button .lucide,
    .like-button svg.lucide,
    .like-button i[data-lucide="heart"] {
        width: 18px;
        height: 18px;
    }

/* счётчик не красим вообще — всегда обычный текст */
.like-button,
.like-btn {
    color: #111;
    -webkit-text-fill-color: #111;
}

    .like-button .count,
    .like-btn .count {
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        min-width: 0;
        text-align: left;
        font-variant-numeric: tabular-nums;
        color: var(--c-text);
        -webkit-text-fill-color: var(--c-text);
    }

    /* по умолчанию сердечко пустое */
    .like-button .lucide,
    .like-button svg.lucide,
    .like-button i[data-lucide="heart"],
    .like-btn .lucide,
    .like-btn svg.lucide,
    .like-btn i[data-lucide="heart"] {
        stroke: currentColor;
        fill: transparent;
    }

    /* ✅ закраска ТОЛЬКО для человека, который поставил лайк */
    .like-button.liked .lucide,
    .like-button.liked svg.lucide,
    .like-button.liked i[data-lucide="heart"],
    .like-btn.liked .lucide,
    .like-btn.liked svg.lucide,
    .like-btn.liked i[data-lucide="heart"] {
        stroke: var(--c-primary);
        fill: var(--c-primary);
    }


/* NEW — фиолетовый + меньше */
.dg-card-badge.dg-card-badge--new {
    --dg-badge-bg: rgba(var(--c-primary-rgb), 0.92);
    --dg-badge-brd: rgba(196, 181, 253, 0.95);
    --dg-badge-ring: rgba(139,92,246,.22);
    --dg-badge-glow: rgba(139,92,246,.18);
    height: 24px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.like-button.like-count-wide,
.like-btn.like-count-wide {
    width: auto;
    min-width: 38px;
    padding: 0 7px;
    gap: 1px;
}

.overlay-actions > .like-btn.like-count-wide,
.doll-actions-overlay > .like-btn.like-count-wide {
    min-width: 40px;
    padding: 0 8px;
}

/* Комменты — фиолетовый */
.dg-card-badge.dg-card-badge--discussed {
    --dg-badge-bg: rgba(var(--c-primary-rgb), 0.92);
    --dg-badge-brd: rgba(196, 181, 253, 0.95);
    --dg-badge-ring: rgba(0,0,0,0); /* ✅ убираем подсветку */
    --dg-badge-glow: rgba(0,0,0,0); /* ✅ убираем подсветку */
    height: 24px; /* ✅ как NEW */
    padding: 0 6px; /* ✅ как NEW */
    font-size: 10px; /* ✅ как NEW */
    font-weight: 900; /* ✅ как NEW */
    letter-spacing: .08em; /* ✅ как NEW */
    gap: 2px; /* ✅ место между иконкой и +1 */
}


    .dg-card-badge.dg-card-badge--discussed svg,
    .dg-card-badge.dg-card-badge--discussed .lucide,
    .dg-card-badge.dg-card-badge--discussed i[data-lucide] {
        width: 16px; /* ✅ иконка чуть меньше */
        height: 16px; /* ✅ иконка чуть меньше */
    }


    .dg-card-badge.dg-card-badge--discussed::after {
        content: "+1";
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        opacity: 0.95;
    }


/* Огонёк — ОРАНЖЕВЫЙ */
.dg-card-badge.dg-card-badge--active {
      --dg-badge-bg: rgba(249, 115, 22, 0.92);
      --dg-badge-brd: rgba(253, 186, 116, 0.95);
      --dg-badge-ring: rgba(249,115,22,.28);
      --dg-badge-glow: rgba(249,115,22,.22);
    height: 24px; /* ✅ как NEW и Discussed */
    padding: 0 6px; /* ✅ как Discussed (иконка) */
    font-size: 10px; /* ✅ как NEW/Discussed (на всякий) */
    font-weight: 900; /* ✅ как NEW/Discussed */
    letter-spacing: .08em;
    gap: 2px;
}

/* === Moderation pending === */
.dg-card--moderation-pending {
    outline: 1px solid rgba(124, 58, 237, 0.45);
    outline-offset: -1px;
}

.dg-moderation-inline-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: calc(100% - 20px);
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    color: #ffffff;
    background: rgba(124, 58, 237, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* В оверлее карточки — правый нижний угол */
.doll-overlay .dg-moderation-inline-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
}

.dg-modal-title-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.dg-moderation-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    padding: 5px 6px 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background: rgba(124, 58, 237, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}

.dg-moderation-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.dg-moderation-help-btn:hover,
.dg-moderation-help-btn:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.dg-moderation-help-btn svg,
.dg-moderation-help-btn .lucide {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.dg-moderation-info-modal-content {
    max-height: min(88dvh, 760px);
    overflow: hidden;
}

.dg-moderation-info-body {
    max-height: calc(min(88dvh, 760px) - 58px);
    overflow-y: auto;
    padding: 24px 28px 30px;
}

.dg-moderation-info-section {
    margin: 0 0 24px;
}

.dg-moderation-info-section:last-child {
    margin-bottom: 0;
}

.dg-moderation-info-section h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--c-text-main, #111827);
}

.dg-moderation-info-section p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-text-main, #111827);
}

.dg-moderation-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--c-text, #111827);
    -webkit-text-fill-color: currentColor;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.30);
}

@media (max-width: 640px) {
    #dollGallery .doll-card.dg-card--moderation-pending .doll-overlay .author-name {
        display: none;
    }
}

body.dg-theme-dark .dg-moderation-note,
html.dg-theme-dark .dg-moderation-note,
html[data-theme="dark"] .dg-moderation-note,
body.dark-theme .dg-moderation-note {
    color: var(--c-text, #f3f4f6);
    -webkit-text-fill-color: currentColor;
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(167, 139, 250, 0.36);
}

html[data-theme="dark"] .dg-moderation-info-section h3,
html[data-theme="dark"] .dg-moderation-info-section p,
body.dark-theme .dg-moderation-info-section h3,
body.dark-theme .dg-moderation-info-section p {
    color: var(--c-text-main, #f3f4f6);
}

@media (max-width: 640px) {
    .dg-modal-title-wrap:has(.dg-moderation-modal-badge) {
        align-items: flex-start;
        flex-direction: column;
    }

    .dg-post-title-overlay .dg-modal-title-wrap:has(.dg-moderation-modal-badge) {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .dg-post-title-overlay .dg-moderation-modal-badge {
        margin-left: auto;
        align-self: flex-start;
    }

    .dg-moderation-info-modal-content {
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .dg-moderation-info-body {
        max-height: calc(100dvh - 58px);
        padding: 22px 24px 34px;
    }

    .dg-moderation-info-section h3 {
        font-size: 21px;
    }

    .dg-moderation-info-section p {
        font-size: 16px;
    }
}



/* ===== DG: mobile — уменьшаем лайк в ОБЩЕЙ галерее ===== */
@media (max-width: 640px) {

    /* только общая галерея, не sale / не fav */
    .gallery-container .like-button {
        width: 35px; /* ~ -20% от 44px */
        height: 35px;
    }

        .gallery-container .like-button .lucide,
        .gallery-container .like-button svg.lucide {
            width: 18px; /* было ~22 */
            height: 18px;
        }

        .gallery-container .like-button .count {
            font-size: 11px; /* было 13 */
        }
}


/* подпись/оверлей на карточке */
.doll-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 84px;
    padding: 22px 12px 56px; /* ✅ было 12px сверху — опускаем заголовок ниже */
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 100%);
    opacity: 1;
    transition: opacity .2s;
    -webkit-text-fill-color: currentColor;
    -webkit-transform: translateZ(0.001px);
    transform: translateZ(0.001px);
    will-change: opacity;
    isolation: isolate;
}



/* оставляем — просто больше не влияет (на всякий случай не ломаем логику hover) */
.doll-card:hover .doll-overlay {
    opacity: 1;
}

@media (hover: none) {
    .doll-overlay {
        opacity: 1;
    }
}


.doll-overlay .doll-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    position: absolute;
    left: 10px;
    bottom: 52px; /* 10px (низ) + 36px (аватар) + 6px (зазор) */
    width: calc(100% - 20px - 56px); /* резерв справа под like-button */
    max-width: calc(100% - 20px - 56px);
    min-width: 0;
}

.doll-overlay .doll-author {
    display: flex;
    align-items: center;
    gap: 4px; /* ✅ DG: ник ближе к аватарке */
    position: absolute;
    left: 10px;
    bottom: 10px;
    /* ⬆️ поднимаем выше, чтобы точно не проигрывать слоям/гпу-фиксам */
    z-index: 40;
    opacity: .98;
    pointer-events: auto;
    cursor: pointer;
    /*
      ✅ ключ: резервируем справа место под кнопку лайка
      like-button: ~38px + отступы/воздух
    */
    width: calc(100% - 20px - 56px);
    max-width: calc(100% - 20px - 56px);
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ===== DG: author avatar (default — БЕЗ рамки) ===== */
.doll-overlay .author-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    flex: 0 0 36px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: transparent; /* ❌ убрали белый фон */
    border: none; /* ❌ убрали рамку */
    box-shadow: none;
}

    /* ===== DG: PREMIUM avatar ===== */
    .doll-overlay .author-avatar.premium {
        background: rgba(255,255,255,.10);
        border: 2px solid var(--c-warning);
        box-shadow: 0 0 3px rgba(203,161,53,.5);
    }


.doll-overlay .author-name {
    flex: 1 1 auto; /* ✅ ник занимает всё оставшееся */
    min-width: 0; /* ✅ иначе ellipsis не работает нормально */
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    #profileContent .dg-profile-shorts-grid .doll-card--short .doll-overlay .doll-author {
        display: none;
    }

    .doll-overlay .doll-author {
        /* like-button на мобиле ~35px, резерв чуть меньше */
        width: calc(100% - 20px - 52px);
        max-width: calc(100% - 20px - 52px);
    }

    .doll-overlay .author-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        flex: 0 0 32px;
        aspect-ratio: 1 / 1;
    }
}

/* =========================
   9) Loading / Spinner
   ========================= */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--c-border);
    border-top: 4px solid var(--c-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* мини-спиннер для кнопок */
.spinner--inline {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.load-more-container {
    text-align: center;
    padding: 24px;
}

body.dg-theme-dark .load-more-container .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .load-more-container .btn-secondary:hover,
body.dg-theme-dark .load-more-container .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* =========================
   10) Modals (unified)
   ========================= */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--c-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--dg-z-modal);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease), backdrop-filter 380ms var(--ease);
    will-change: opacity,backdrop-filter;
}

    .modal.show {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* ✅ DG: мягкое закрытие для modalStack.close()
   держим visibility, чтобы transition успел отработать */
    .modal.dg-closing {
        visibility: visible;
        opacity: 0;
        pointer-events: none;
    }

        .modal.dg-closing .modal-content {
            transform: scale(.985) translateY(10px);
            opacity: 0;
        }

/* ✅ DG: Messages fullscreen (body.dg-messages-page) — закрываем "экраном вниз",
   чтобы не было фазы: "галерея показалась" → "потом закрылось". */
body.dg-messages-page #messagesModal.dg-closing .modal-content,
body.dg-messages-page #messagesModal.dg-closing .modal-content.modal-large {
    opacity: 1 !important; /* не гасим контент раньше времени */
    transform: translateY(100%) !important; /* уезжает вниз целиком */
    transition: transform 220ms ease !important;
}

/* ✅ FIX: при закрытии "страницы сообщений" НЕ заливаем экран белым.
   Оставляем контейнер видимым (чтобы не было флэша), но фон делаем прозрачным. */
body.dg-messages-page #messagesModal.dg-closing {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    /* ✅ дополнительно: белую подложку "под клавиатурой" на время закрытия прячем,
   иначе она может давать белый экран снизу при slide-down */
    body.dg-messages-page #messagesModal.dg-closing::after {
        height: 0 !important;
    }

/* Начальное состояние сообщений задаётся только самому overlay и content. */
@media (max-width: 640px) {
    #messagesModal.dg-modal-opening:not(.show) .modal-content,
    #messagesModal.dg-modal-opening:not(.show) .modal-content.modal-large {
        opacity:0;
        transform:translateY(10px);
    }
}


.modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--r-12);
    width: min(96vw,1200px);
    /* ✅ критично для мобильных: ограничиваем по высоте и даём внутренний flex-скролл */
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* Скроллбар дочерних элементов остаётся внутри border-radius */
    contain: paint;
    box-shadow: var(--shadow-3);
    z-index: 1;
    transform: scale(.985) translateY(6px);
    opacity: 0;
    transition: transform 360ms var(--ease), opacity 320ms var(--ease), box-shadow 320ms ease;
    backface-visibility: hidden;
    will-change: transform,opacity;
    isolation: isolate;
}




.modal.show .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

.modal-content.modal-large {
    width: min(96vw,1200px);
}
/* уменьшенная ширина модалки редактирования профиля */
#editProfileModal .modal-content.modal-large {
    width: min(92vw, 620px) !important;
    max-width: 620px !important;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--c-border);
}

.modal-body {
    padding: 16px 24px 12px;
    /* ✅ вот это возвращает реальный скролл внутри модалок во всех WebKit/Chromium */
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    z-index: 20;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #111;
    cursor: pointer;
    -webkit-transform: translateZ(0.01px);
    transform: translateZ(0.01px);
    backface-visibility: hidden;
    will-change: transform;
}

    .modal-close:hover {
        background: #fff;
    }

@media (prefers-reduced-motion: reduce) {
    .modal, .modal-content {
        transition: none !important;
        transform: none !important;
    }
}

/* Auth / Register / Reset sizes */
.modal-content:has(#loginForm),
.modal-content:has(#registerForm),
.modal-content:has(#oauthRegistrationForm) {
    width: min(92vw,520px) !important;
    max-height: min(88vh,760px) !important;
}

.modal-header:has(+ .modal-body #loginForm),
.modal-header:has(+ .modal-body #registerForm) {
    padding: 16px 20px !important;
}

.modal-body:has(#loginForm),
.modal-body:has(#registerForm) {
    padding: 16px 20px !important;
    overflow: auto !important;
}

.modal-content:has(#reset-email),
.modal-content:has(#new-pass) {
    width: min(92vw,520px) !important;
    max-height: min(80vh,640px) !important;
    border-radius: var(--r-12);
}

.modal-header:has(+ .modal-body #reset-email),
.modal-header:has(+ .modal-body #new-pass) {
    padding: 16px 20px !important;
}

.modal-body:has(#reset-email),
.modal-body:has(#new-pass) {
    padding: 16px 20px !important;
    overflow: auto !important;
}

/* Login form actions */
#loginForm .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

/* Password toggle (Login + Register) */
.dg-password-wrap {
    position: relative;
}

    .dg-password-wrap > input {
        padding-right: 110px;
    }

.dg-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#loginModal .checkbox-label,
#registerModal .checkbox-label,
#oauthRegistrationModal .checkbox-label,
#currentLegalConsentModal .checkbox-label {
    align-items: flex-start;
    gap: 10px;
    line-height: 1.35;
    color: var(--c-text, #111827);
    -webkit-tap-highlight-color: transparent;
}

#loginModal .checkbox-label input[type="checkbox"],
#registerModal .checkbox-label input[type="checkbox"],
#oauthRegistrationModal .checkbox-label input[type="checkbox"],
#currentLegalConsentModal .checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    margin: 1px 0 0;
    border: 1.5px solid rgba(139, 92, 246, 0.55);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    position: relative;
}

#loginModal .checkbox-label input[type="checkbox"]:checked,
#registerModal .checkbox-label input[type="checkbox"]:checked,
#oauthRegistrationModal .checkbox-label input[type="checkbox"]:checked,
#currentLegalConsentModal .checkbox-label input[type="checkbox"]:checked {
    border-color: var(--c-primary, #8B5CF6);
    background: var(--c-primary, #8B5CF6);
}

#loginModal .checkbox-label input[type="checkbox"]:checked::after,
#registerModal .checkbox-label input[type="checkbox"]:checked::after,
#oauthRegistrationModal .checkbox-label input[type="checkbox"]:checked::after,
#currentLegalConsentModal .checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (min-width: 992px) {
    #loginModal .checkbox-label input[type="checkbox"],
    #registerModal .checkbox-label input[type="checkbox"],
    #oauthRegistrationModal .checkbox-label input[type="checkbox"],
    #currentLegalConsentModal .checkbox-label input[type="checkbox"] {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 7px;
    }

    #loginModal .checkbox-label input[type="checkbox"]:checked::after,
    #registerModal .checkbox-label input[type="checkbox"]:checked::after,
    #oauthRegistrationModal .checkbox-label input[type="checkbox"]:checked::after,
    #currentLegalConsentModal .checkbox-label input[type="checkbox"]:checked::after {
        left: 8px;
        top: 3px;
        width: 6px;
        height: 12px;
        border-width: 0 2.5px 2.5px 0;
    }
}

#loginModal .checkbox-label input[type="checkbox"]:focus-visible,
#registerModal .checkbox-label input[type="checkbox"]:focus-visible,
#oauthRegistrationModal .checkbox-label input[type="checkbox"]:focus-visible,
#currentLegalConsentModal .checkbox-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

body.dg-theme-dark #loginModal .checkbox-label,
body.dg-theme-dark #registerModal .checkbox-label,
body.dg-theme-dark #oauthRegistrationModal .checkbox-label,
body.dg-theme-dark #currentLegalConsentModal .checkbox-label {
    color: rgba(255, 255, 255, 0.90);
}

body.dg-theme-dark #loginModal .checkbox-label input[type="checkbox"],
body.dg-theme-dark #registerModal .checkbox-label input[type="checkbox"],
body.dg-theme-dark #oauthRegistrationModal .checkbox-label input[type="checkbox"],
body.dg-theme-dark #currentLegalConsentModal .checkbox-label input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

body.dg-theme-dark #loginModal .checkbox-label input[type="checkbox"]:checked,
body.dg-theme-dark #registerModal .checkbox-label input[type="checkbox"]:checked,
body.dg-theme-dark #oauthRegistrationModal .checkbox-label input[type="checkbox"]:checked,
body.dg-theme-dark #currentLegalConsentModal .checkbox-label input[type="checkbox"]:checked {
    border-color: var(--c-primary, #8B5CF6);
    background: var(--c-primary, #8B5CF6);
}

.dg-register-legal {
    display: grid;
    gap: 12px;
    margin: 2px 0 4px;
}

#registerModal .dg-register-consent,
#oauthRegistrationModal .dg-register-consent,
#currentLegalConsentModal .dg-register-consent {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
}

#registerModal .dg-register-consent a,
#oauthRegistrationModal .dg-register-consent a,
#currentLegalConsentModal .dg-register-consent a {
    color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#registerModal .dg-register-consent label,
#oauthRegistrationModal .dg-register-consent label,
#currentLegalConsentModal .dg-register-consent label {
    display: inline;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

#registerSubmitBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#currentLegalConsentSubmit:disabled,
#oauthRegistrationSubmit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#currentLegalConsentError,
#oauthRegistrationError {
    margin: 0;
    color: #dc2626;
}

.dg-legal-consent-actions {
    align-items: stretch;
    gap: 12px;
    margin-top: 4px;
}

.dg-legal-consent-actions .btn {
    flex: 1 1 0;
    min-height: 40px;
    padding: 10px 18px;
    font-size: var(--dg-font-sm);
}

#currentLegalConsentModal .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.9);
}

#currentLegalConsentModal .btn-secondary:hover,
#currentLegalConsentModal .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

#currentLegalConsentModal .btn-primary {
    background: var(--c-primary, #8B5CF6);
    border: 1px solid transparent;
    color: #fff;
}

#oauthRegistrationModal .btn-primary {
    background: var(--c-primary, #8B5CF6);
    border: 1px solid transparent;
    color: #fff;
}

#oauthRegistrationModal .dg-legal-consent-actions .btn {
    flex-basis: 100%;
}

#currentLegalConsentModal .btn-primary:hover,
#currentLegalConsentModal .btn-primary:focus-visible {
    background: var(--c-primary-600, #7C3AED);
}

#currentLegalConsentModal .btn-primary:disabled {
    background: rgba(var(--c-primary-rgb), 0.42);
    border-color: rgba(var(--c-primary-rgb), 0.16);
    color: rgba(255, 255, 255, 0.62);
    opacity: 1;
}

@media (max-width: 640px) {
    .dg-legal-consent-actions {
        flex-direction: column-reverse;
    }

    .dg-legal-consent-actions .btn {
        width: 100%;
    }
}

.dg-cookie-consent {
    position: fixed;
    z-index: var(--dg-z-notice);
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 16px;
    color: #fff;
}

.dg-cookie-consent__inner {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.98);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}

.dg-cookie-consent__copy {
    display: grid;
    gap: 5px;
    font-size: 13px;
    line-height: 1.45;
}

.dg-cookie-consent__copy strong {
    font-size: 15px;
}

.dg-cookie-consent__copy a {
    color: #c4b5fd;
    text-decoration: underline;
}

.dg-cookie-consent__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.dg-cookie-consent__actions [data-cookie-choice="accept"] {
    flex-shrink: 0;
}

.dg-cookie-consent__settings-link {
    border: 0;
    padding: 8px 4px;
    background: transparent;
    color: #c4b5fd;
    cursor: pointer;
    font: inherit;
    font-size: var(--dg-font-xs);
    text-decoration: underline;
}

.dg-cookie-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dg-cookie-setting span {
    display: grid;
    gap: 2px;
}

.dg-cookie-setting small {
    color: rgba(255, 255, 255, 0.72);
}

.dg-cookie-setting input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--c-primary);
}

.dg-cookie-setting--locked {
    opacity: 0.8;
}

.dg-cookie-consent__status {
    min-height: 1em;
    color: #fca5a5;
}

.dg-cookie-consent__actions .btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.dg-cookie-consent__actions .btn-ghost:hover,
.dg-cookie-consent__actions .btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

@media (max-width: 700px) {
    .dg-cookie-consent {
        right: 8px;
        left: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    .dg-cookie-consent__inner,
    .dg-cookie-consent__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dg-cookie-consent__actions [data-cookie-choice="analytics"] {
        order: -1;
    }
}

@media (max-width: 768px) {
    #loginModal .checkbox-label input[type="checkbox"],
    #registerModal .checkbox-label input[type="checkbox"] {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 1px;
        border-radius: 5px;
    }

    #loginModal .checkbox-label input[type="checkbox"]:checked::after,
    #registerModal .checkbox-label input[type="checkbox"]:checked::after {
        left: 5px;
        top: 1px;
        width: 5px;
        height: 9px;
    }
}


#loginForm .form-actions .btn {
    flex: 1 1 0;
}

.modal-content:has(#loginForm) .form-actions .btn {
    width: auto !important;
    min-height: 42px;
}

/* Social auth icon-only */
#loginForm .social-auth {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
}

    #loginForm .social-auth .btn-icon {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #loginForm .social-auth .yandex-mark {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: #FF0000;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        user-select: none;
    }

/* Register fixed footer (if used) */
.modal-content:has(#registerForm) {
    display: flex;
    flex-direction: column;
}

.modal-body:has(#registerForm) {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 8px;
}

.modal-footer:has(#registerForm) {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid #eee;
    background: #fff;
}

/* Subscription modal width */
.modal-content.subscription-modal {
    width: min(92vw,520px);
    max-height: 90vh;
    border-radius: var(--r-12);
}

.dg-premium-purchase-status {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(139, 92, 246, 0.34);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(17, 24, 39, 0.08));
}

.dg-premium-purchase-status > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8b5cf6;
    font-size: 17px;
}

.dg-premium-purchase-status p {
    margin: 6px 0 0;
    color: var(--c-muted);
    font-size: 14px;
}

.dg-premium-purchase-badge {
    padding: 3px 8px;
    border-radius: 999px;
    color: #ede9fe;
    background: #6d3eb5;
    font-size: 11px;
    font-weight: 700;
}

.dg-premium-purchase-status--inactive > div {
    color: var(--c-text);
}

.sub-price {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sub-price-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sub-price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.sub-price-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.sub-price-original {
    text-decoration: line-through;
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.sub-price-original--annual {
    font-size: 0.8125rem;
    font-weight: 700;
    opacity: 0.88;
}

.sub-price-discount {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-success, #10B981);
    margin-top: 0;
}

.sub-price-period {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 0;
    white-space: nowrap;
}

.sub-plan-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.sub-plan-card {
    margin-bottom: 0;
}

.sub-plan-card .sub-price {
    margin-bottom: 0;
}

.sub-plan-card--annual {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(255, 251, 235, 0.72);
}

.sub-plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.sub-expiring-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
    font-size: 0.9rem;
    font-weight: 600;
}

.sub-expiring-notice .btn {
    flex-shrink: 0;
    min-height: 32px;
    padding: 6px 12px;
}

@media (max-width: 480px) {
    .sub-expiring-notice {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Полноэкранные текстовые модалки (пользовательское соглашение / правила продажи) */
.dg-upload-sale-rules-link {
    display: inline-block;
    color: var(--c-muted, #6b7280);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dg-upload-sale-rules-link:hover {
    color: var(--c-text, #111827);
}

#termsModal .modal-content.modal-large,
#saleRulesModal .modal-content.modal-large {
    width: min(96vw, 900px);
    max-height: 95vh;
    height: 95vh;
    display: flex;
    flex-direction: column;
}

#termsModal .modal-body,
#saleRulesModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================
   Profile modal
   Высота по контенту в пределах max-height (без «пустого дна» на коротких вкладках).
   Скролл — на .profile-body (табы sticky внутри него на ПК и мобиле).
   ========================= */

/* Карточка по центру; не тянем min-height на весь экран — иначе пустота под коротким табом */
#profileModal .modal-content.modal-large {
    margin: 0 auto; /* центрируем по контейнеру */
    height: calc(100dvh - 40px); /* ✅ Android/iOS: корректная высота с учетом динамической панели браузера */
    max-height: calc(100dvh - 40px);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Внутри профиля: один вертикальный скролл (табы sticky внутри этого потока на ПК и моб.) */
.modal-body.profile-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
}

/* Контент по высоте данных, без заполнения «остатка» флексом — иначе пустой низ под табами */
#profileModal .profile-content {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Область вкладок: высота по контенту; скролл у предка .profile-body */
#profileModal .profile-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0;
}

/* Статистика / достижения / настройки: не отдельный flex-fill — скроллит предок .profile-body */
/* Статистика / достижения / настройки */
#profileModal .dg-profile-stats-block,
#profileModal .dg-profile-achievements-block,
#profileModal .dg-profile-settings-block {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

/* =========================
   ПК: один скролл-контейнер
   Скроллится окно целиком, липнут только:
   - заголовок "Профиль" + кнопка закрыть
   - табы (как на телефоне)
   ========================= */
@media (min-width: 641px) {
    /* Как на телефоне: скролл только у .profile-body — шапка «Профиль» не перекрывает сторис/табы */
    #profileModal .modal-content.modal-large {
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #profileModal.modal.show .modal-content.modal-large {
        transform: none !important;
        will-change: auto;
    }

    #profileModal .modal-body.profile-body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    #profileModal .profile-content {
        overflow: visible !important;
    }

    #profileModal .profile-scroll {
        overflow-y: visible !important;
    }

    #profileModal .dg-profile-stats-block,
    #profileModal .dg-profile-achievements-block,
    #profileModal .dg-profile-settings-block {
        width: 100%;
        max-width: 1300px;
        margin-inline: auto;
        box-sizing: border-box;
        overflow-y: visible !important;
    }

    #profileModal .dg-profile-modal-header {
        position: relative;
        flex-shrink: 0;
        z-index: auto;
        background: #fff !important;
    }

    /* Липнут к верху прокручиваемого .profile-body (сразу под шапкой модалки) */
    #profileModal .profile-tabs {
        position: sticky;
        top: 0 !important;
        background: #fff !important;
        z-index: 100 !important;
        isolation: isolate;
    }
}

/* Dark theme — корректный фон sticky */
body.dg-theme-dark #profileModal .dg-profile-modal-header {
    background: rgba(15, 15, 18, 0.86) !important;
}

body.dg-theme-dark #profileModal .profile-tabs {
    z-index: 100 !important;
}

body.dg-theme-dark .dg-profile-page-view .profile-tabs {
    background: rgba(15, 15, 18, 0.96) !important;
    border-bottom-color: var(--c-border);
}

#profileModal .dg-profile-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#profileModal .dg-profile-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border, #E5E7EB);
}

    #profileModal .dg-profile-settings-row:last-child {
        border-bottom: none;
    }

#profileModal .dg-profile-settings-desc {
    flex: 1 1 auto;
    min-width: 0;
}

#profileModal .dg-profile-settings-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}

#profileModal .dg-profile-settings-subtitle {
    font-size: 12px;
    color: var(--c-muted);
    margin-top: 2px;
}

#profileModal .dg-profile-settings-row--disabled {
    opacity: 0.65;
}

/* Мини-свитч для настроек */
.dg-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}

    .dg-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.dg-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c-border, #E5E7EB);
    border-radius: 999px;
    transition: background 0.2s ease;
}

    .dg-switch-slider::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }

.dg-switch input:checked + .dg-switch-slider {
    background: var(--c-primary, #8B5CF6);
}

    .dg-switch input:checked + .dg-switch-slider::before {
        transform: translateX(20px);
    }

.dg-switch input:disabled + .dg-switch-slider {
    cursor: not-allowed;
}

/* Вкладки профиля: панели внутри #profileContent; скрытые — [hidden] (display:none), без position:absolute — не раздувают scroll */
#profileModal .dg-profile-tab-panel {
    box-sizing: border-box;
}

    #profileModal .dg-profile-tab-panel[hidden] {
        display: none !important;
    }

#profileModal #profileContent.profile-content {
    padding-bottom: max(24px, var(--safe-bottom, 0px));
}

#profileModal .profile-infinite-sentinel {
    height: 1px;
    width: 100%;
}

/* ✅ DG: модалка «Создать статью» — скролл и внутри блока, и всего окна; кнопки всегда доступны */
#blogArticleUploadModal {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    box-sizing: border-box;
}

    #blogArticleUploadModal .modal-content.blog-article-modal-content {
        max-width: min(720px, 94vw);
        width: min(720px, 94vw);
        max-height: none;
        height: auto;
        margin: auto;
    }

    #blogArticleUploadModal .modal-header {
        flex-shrink: 0;
    }

/* Шапка «Создать статью» на весь экран по ширине: крестик слева, заголовок по центру, галочка справа (только ≤640px) */
.blog-article-screen-bar {
    display: none;
}

@media (max-width: 640px) {
    #blogArticleUploadModal .blog-article-screen-bar {
        display: grid !important;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        justify-items: stretch;
        gap: 4px 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        min-height: 48px;
        padding: 8px 10px;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid var(--c-border, #e5e7eb);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    }

    /* .modal-close глобально position:absolute; right — ломает сетку и клеит крестик к правому углу поверх «галочки» */
    #blogArticleUploadModal .blog-article-screen-close.modal-close,
    #blogArticleUploadModal .blog-article-screen-close {
        grid-column: 1;
        justify-self: start;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        z-index: 2 !important;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: var(--dg-modal-back-bg, rgba(0, 0, 0, 0.90)) !important;
        box-shadow: none !important;
        font-size: 0;
        line-height: 1;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-text-fill-color: #fff;
        -webkit-tap-highlight-color: transparent;
        transform: none !important;
    }

    #blogArticleUploadModal .blog-article-screen-title {
        grid-column: 2;
        flex: unset;
        min-width: 0;
        margin: 0;
        padding: 0 6px;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.25;
        color: #111827;
    }

    #blogArticleUploadModal .blog-article-screen-close svg,
    #blogArticleUploadModal .blog-article-screen-close .lucide {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.25;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    #blogArticleUploadModal .blog-article-screen-submit {
        grid-column: 3;
        justify-self: end;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--c-primary, #8B5CF6);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.35);
        -webkit-tap-highlight-color: transparent;
    }

        #blogArticleUploadModal .blog-article-screen-submit svg {
            display: block;
        }

    #blogArticleUploadModal .modal-header {
        display: none !important;
    }

    #blogArticleUploadModal .form-actions {
        display: none !important;
    }

    #blogArticleMobileSubmit {
        display: none !important;
    }
}

body.dg-theme-dark #blogArticleUploadModal .blog-article-screen-bar {
    background: var(--c-bg) !important;
    border-bottom-color: var(--c-border) !important;
}

body.dg-theme-dark #blogArticleUploadModal .blog-article-screen-close {
    color: #e5e7eb !important;
}

body.dg-theme-dark #blogArticleUploadModal .blog-article-screen-title {
    color: #fff !important;
}

/* Внизу: Отменить и Отправить — в один ряд. Кнопка .modal-close ведёт себя как .btn-secondary, не как круг в углу. */
#blogArticleUploadModal .form-actions .btn {
    min-height: 42px;
    padding: 6px 12px;
}

#blogArticleUploadModal #blogArticleSubmitBtn {
    position: relative;
    overflow: hidden;
}

#blogArticleUploadModal .blog-article-submit-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#blogArticleUploadModal .blog-article-submit-label {
    display: inline-block;
}

#blogArticleUploadModal .blog-article-submit-spinner,
#blogArticleUploadModal .blog-article-icon-spinner {
    position: relative;
    display: inline-block;
    border-radius: 999px;
    flex: 0 0 auto;
}

#blogArticleUploadModal .blog-article-submit-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.26);
    border-right-color: rgba(255, 255, 255, 0.92);
    border-top-color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: dg-blog-article-submit-spin 0.82s linear infinite;
}

#blogArticleUploadModal .blog-article-submit-spinner::after,
#blogArticleUploadModal .blog-article-icon-spinner::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

#blogArticleUploadModal #blogArticleSubmitBtn.is-loading,
#blogArticleUploadModal .blog-article-screen-submit.is-loading,
.blog-article-mobile-submit-btn.is-loading {
    cursor: progress;
}

#blogArticleUploadModal .blog-article-screen-submit.is-loading svg,
.blog-article-mobile-submit-btn.is-loading {
    color: #fff;
}

#blogArticleUploadModal .blog-article-screen-submit.is-loading svg {
    display: none;
}

#blogArticleUploadModal .blog-article-screen-submit.is-loading,
.blog-article-mobile-submit-btn.is-loading {
    box-shadow: 0 4px 18px rgba(var(--c-primary-rgb), 0.34);
}

#blogArticleUploadModal .blog-article-icon-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-right-color: rgba(255, 255, 255, 0.9);
    border-top-color: #fff;
    animation: dg-blog-article-submit-spin 0.82s linear infinite;
}

@keyframes dg-blog-article-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #blogArticleUploadModal .blog-article-submit-spinner,
    #blogArticleUploadModal .blog-article-icon-spinner {
        animation-duration: 1.6s;
    }
}

#blogArticleUploadModal .form-actions .modal-close {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    min-width: auto;
    border-radius: 999px;
    border: 1px solid var(--c-primary);
    background: #fff;
    color: var(--c-primary);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

    #blogArticleUploadModal .form-actions .modal-close:hover {
        background: var(--c-bg-light);
    }

#blogArticleUploadModal .form-actions .blog-article-cancel-btn {
    position: static;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid var(--c-primary);
    background: #fff;
    color: var(--c-primary);
    -webkit-text-fill-color: var(--c-primary) !important;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

    #blogArticleUploadModal .form-actions .blog-article-cancel-btn:hover {
        background: var(--c-bg-light);
    }

body.dg-theme-dark #blogArticleUploadModal .form-actions .blog-article-cancel-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

    body.dg-theme-dark #blogArticleUploadModal .form-actions .blog-article-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(var(--c-primary-rgb), 0.55) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

#blogArticleUploadModal .form-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
}

    #blogArticleUploadModal .form-actions .btn-icon {
        min-width: 40px;
        padding: 0 10px;
        font-size: 1.25rem;
        line-height: 1;
    }

#blogArticleUploadModal .modal-body#blogArticleFormWrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

#blogArticleUploadModal .form-group input::placeholder {
    color: rgba(107, 114, 128, 0.65);
    opacity: 1;
}

#blogArticleUploadModal #blogArticleTitle {
    border-radius: 999px;
}

#blogArticleUploadModal #blogArticleLinkAli,
#blogArticleUploadModal #blogArticleLinkOzon,
#blogArticleUploadModal #blogArticleLinkYandex,
#blogArticleUploadModal #blogArticleLinkWb {
    border-radius: 999px;
}

#blogArticleUploadModal .form-group {
    min-width: 0;
}

.blog-article-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 4px;
}

.blog-article-tb-btn {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--c-muted, #374151);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .blog-article-tb-btn:hover {
        background: var(--c-bg-light);
        border-color: var(--c-primary, #8B5CF6);
    }

    .blog-article-tb-btn.active,
    .blog-article-tb-btn[data-active="true"] {
        background: var(--c-primary, #8B5CF6);
        border-color: var(--c-primary, #8B5CF6);
        color: #fff;
    }

        .blog-article-tb-btn.active b,
        .blog-article-tb-btn.active i,
        .blog-article-tb-btn.active u,
        .blog-article-tb-btn[data-active="true"] b,
        .blog-article-tb-btn[data-active="true"] i,
        .blog-article-tb-btn[data-active="true"] u {
            color: #fff;
        }

        .blog-article-tb-btn.active:hover,
        .blog-article-tb-btn[data-active="true"]:hover {
            background: var(--c-primary-600, #7c3aed);
            border-color: var(--c-primary-600, #7c3aed);
        }

    .blog-article-tb-btn b {
        font-size: 13px;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
    }

    .blog-article-tb-btn i {
        font-size: 13px;
        font-weight: 400;
        font-style: italic;
        text-decoration: none;
    }

    .blog-article-tb-btn u {
        font-size: 13px;
        font-weight: 400;
        font-style: normal;
        text-decoration: underline;
    }

.blog-article-icon-clip {
    display: inline-flex;
    line-height: 0;
}

.blog-article-align-wrap {
    position: relative;
    display: inline-flex;
}

.blog-article-align-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.blog-article-align-icon {
    display: inline-flex;
    line-height: 0;
    color: currentColor;
}

.blog-article-align-arrow {
    font-size: 10px;
    opacity: 0.8;
    line-height: 1;
}

.blog-article-align-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
}

    .blog-article-align-dropdown[hidden] {
        display: none;
    }

.blog-article-align-opt {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--c-muted, #374151);
    cursor: pointer;
}

    .blog-article-align-opt:hover {
        background: var(--c-bg-light);
        border-color: var(--c-border, #e5e7eb);
    }

    .blog-article-align-opt:focus {
        outline: none;
    }

.dg-site-dialog__content {
    width: min(420px, calc(100vw - 32px));
    border-radius: 20px;
}

.dg-site-dialog__body {
    padding: 28px 24px 22px;
    text-align: center;
}

.dg-site-dialog__title {
    margin: 0;
    color: var(--c-text);
    font-size: 20px;
    line-height: 1.25;
}

.dg-site-dialog__message {
    margin: 10px 0 0;
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
}

.dg-site-dialog__field { display: block; margin-top: 18px; }
.dg-site-dialog__field[hidden] { display: none; }
.dg-site-dialog__field input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface, #fff);
    color: var(--c-text);
    padding: 10px 12px;
    font: inherit;
}
.dg-site-dialog__field input:focus {
    border-color: var(--c-primary);
    outline: 2px solid rgba(var(--c-primary-rgb), .18);
    outline-offset: 1px;
}
.dg-site-dialog__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.dg-site-dialog__actions .btn { min-width: 112px; }
.dg-site-dialog__actions .btn-danger {
    border-color: var(--c-error);
    background: var(--c-error);
    color: #fff;
}
.dg-site-dialog__actions .btn-danger:hover { filter: brightness(.94); }

body.dg-theme-dark .dg-site-dialog__content {
    border-color: rgba(255, 255, 255, .12);
    background: #15151a;
}
body.dg-theme-dark .dg-site-dialog__field input {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
}
body.dg-theme-dark .dg-site-dialog__field input::placeholder {
    color: var(--c-muted);
    -webkit-text-fill-color: var(--c-muted);
    opacity: 1;
}
body.dg-theme-dark .dg-site-dialog__field input:focus {
    border-color: var(--c-primary);
    background: rgba(255, 255, 255, .1);
}
body.dg-theme-dark .dg-site-dialog__actions .btn-secondary {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
}
body.dg-theme-dark .dg-site-dialog__actions .btn-secondary:hover { background: rgba(255, 255, 255, .13); }
body.dg-theme-dark .dg-site-dialog__actions .btn-primary {
    color: #fff;
    -webkit-text-fill-color: #fff;
}
body.dg-theme-dark .dg-site-dialog__actions .btn-danger {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

@media (max-width: 480px) {
    .dg-site-dialog__body { padding: 24px 18px 18px; }
    .dg-site-dialog__actions { flex-direction: column-reverse; }
    .dg-site-dialog__actions .btn { width: 100%; }
}

/* Draft confirm modal: кнопка «Отмена» */
.dg-draft-confirm-modal .dg-dc-cancel {
    width: 100%;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(var(--c-primary-rgb), 0.65);
    background: rgba(var(--c-primary-rgb), 0.08);
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    font-weight: 600;
    box-shadow: none;
}

    .dg-draft-confirm-modal .dg-dc-cancel:hover {
        background: rgba(var(--c-primary-rgb), 0.14);
    }

body.dg-theme-dark .dg-draft-confirm-modal .dg-dc-cancel {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

    body.dg-theme-dark .dg-draft-confirm-modal .dg-dc-cancel:hover {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(var(--c-primary-rgb), 0.55) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

/* Единый active-стиль для всех кнопок тулбара */
#blogArticleUploadModal .blog-article-tb-btn.active,
#blogArticleUploadModal .blog-article-tb-btn[data-active="true"],
#blogArticleUploadModal .blog-article-align-btn.active,
#blogArticleUploadModal .blog-article-align-btn[data-active="true"],
#blogArticleUploadModal .blog-article-align-opt.active,
#blogArticleUploadModal .blog-article-align-opt[data-active="true"] {
    background: var(--c-primary, #8B5CF6) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    #blogArticleUploadModal .blog-article-tb-btn.active svg,
    #blogArticleUploadModal .blog-article-tb-btn[data-active="true"] svg,
    #blogArticleUploadModal .blog-article-align-btn.active svg,
    #blogArticleUploadModal .blog-article-align-btn[data-active="true"] svg,
    #blogArticleUploadModal .blog-article-align-opt.active svg,
    #blogArticleUploadModal .blog-article-align-opt[data-active="true"] svg {
        stroke: currentColor !important;
        color: currentColor !important;
    }

/* Убрать focus-ring при клике мышью/тачем */
#blogArticleUploadModal .blog-article-tb-btn:focus:not(:focus-visible),
#blogArticleUploadModal .blog-article-align-btn:focus:not(:focus-visible),
#blogArticleUploadModal .blog-article-align-opt:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* aria-pressed как fallback для активных кнопок */
#blogArticleUploadModal .blog-article-tb-btn[aria-pressed="true"],
#blogArticleUploadModal .blog-article-align-btn[aria-pressed="true"],
#blogArticleUploadModal .blog-article-align-opt[aria-pressed="true"] {
    background: var(--c-primary, #8B5CF6) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Тулбар: flex-контейнер с переносом */
#blogArticleUploadModal .blog-article-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

/* SVG-иконки в кнопках тулбара */
#blogArticleUploadModal .blog-article-tb-btn {
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    -webkit-text-fill-color: currentColor !important;
}

    /* B / I / U и иконки — квадратные компактные */
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="bold"],
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="italic"],
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="underline"],
    #blogArticleUploadModal .blog-article-align-btn,
    #blogArticleUploadModal .blog-article-tb-btn.blog-article-addimg-btn,
    #blogArticleUploadModal .blog-article-tb-btn.blog-article-link-btn {
        width: 34px;
        min-width: 34px;
        padding: 0;
    }

    /* H2 и списки — по содержимому */
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="formatBlock"],
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="insertOrderedList"],
    #blogArticleUploadModal .blog-article-tb-btn[data-cmd="insertUnorderedList"] {
        min-width: 34px;
        padding: 0 8px;
    }

    #blogArticleUploadModal .blog-article-tb-btn svg,
    #blogArticleUploadModal .blog-article-align-opt svg {
        display: block;
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: currentColor;
    }

    #blogArticleUploadModal .blog-article-tb-btn *,
    #blogArticleUploadModal .blog-article-align-opt * {
        -webkit-text-fill-color: currentColor !important;
    }

/* Тёмная тема: тулбар desktop */
body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn:hover {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(var(--c-primary-rgb), 0.55) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn.active,
    body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn[data-active="true"] {
        background: var(--c-primary, #8B5CF6) !important;
        border-color: var(--c-primary, #8B5CF6) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

        body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn.active:hover,
        body.dg-theme-dark #blogArticleUploadModal .blog-article-tb-btn[data-active="true"]:hover {
            background: var(--c-primary-600, #7C3AED) !important;
            border-color: var(--c-primary-600, #7C3AED) !important;
        }

/* Тёмная тема: dropdown выравнивания */
body.dg-theme-dark #blogArticleUploadModal .blog-article-align-dropdown {
    background: rgba(24, 24, 30, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

body.dg-theme-dark #blogArticleUploadModal .blog-article-align-opt {
    color: var(--c-text, #E5E7EB) !important;
    -webkit-text-fill-color: var(--c-text, #E5E7EB) !important;
}

    body.dg-theme-dark #blogArticleUploadModal .blog-article-align-opt:hover {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(var(--c-primary-rgb), 0.45) !important;
    }

.blog-article-editor {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 320px;
    display: flow-root;
    padding: 12px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: var(--r-12, 12px);
    font-size: 15px;
    line-height: 1.6;
    color: #111;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.dg-theme-dark .blog-article-editor,
body.dg-theme-dark #blogArticleUploadModal #blogArticleTitle,
body.dg-theme-dark #blogArticleUploadModal .form-group input,
body.dg-theme-dark #blogArticleUploadModal .form-group textarea {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* iOS Safari: @supports .form-group input задаёт var(--c-bg-light) — серый фон полей как у модалки, не «белая таблетка» */
body.dg-theme-dark #blogArticleUploadModal #blogArticleTitle,
body.dg-theme-dark #blogArticleUploadModal .form-group input,
body.dg-theme-dark #blogArticleUploadModal .form-group textarea {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--c-border);
}

    body.dg-theme-dark #blogArticleUploadModal .form-group input:focus,
    body.dg-theme-dark #blogArticleUploadModal .form-group textarea:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    body.dg-theme-dark .blog-article-editor::placeholder,
    body.dg-theme-dark #blogArticleUploadModal .form-group input::placeholder {
        color: rgba(var(--c-border-rgb), 0.75) !important;
    }

    body.dg-theme-dark #blogArticleUploadModal .form-group input:-webkit-autofill,
    body.dg-theme-dark #blogArticleUploadModal .form-group input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px rgba(28, 28, 33, 0.98) inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff !important;
    }

body.dg-theme-dark .blog-article-editor {
    caret-color: #fff !important;
}

.blog-article-img-wrap {
    box-sizing: border-box;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    background: #f9fafb;
    cursor: move;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: none;
    max-width: 100%;
}

    .blog-article-img-wrap img {
        vertical-align: top;
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
    }

/* Старые черновики: абзац после картинки (раньше с clear:both) */
.blog-article-editor .blog-article-after-img {
    min-height: 1.15em;
    margin: 0.25em 0;
}

/* Раскладки: полная ширина / обтекание слева и справа (кнопка на превью) */
.blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--layout-full {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 !important;
    clear: both;
    vertical-align: unset;
}

    .blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--layout-full img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
    }

.blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--float,
.blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--layout-side-right {
    float: right;
    clear: right;
    max-width: min(50%, 100%);
    margin: 0 0 8px 12px !important;
    vertical-align: bottom;
}

.blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--layout-side-left {
    float: left;
    clear: left;
    max-width: min(50%, 100%);
    margin: 0 12px 8px 0 !important;
    vertical-align: bottom;
}

.blog-article-editor .blog-article-img-wrap.blog-article-img-wrap--layout-inline {
    float: none;
    vertical-align: bottom;
}

/* Старый формат (черновики): сетка из двух колонок на всю высоту — оставляем для совместимости */
.blog-article-editor .blog-article-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    margin: 0.4em 0;
}

.blog-article-editor .blog-article-split-row__text {
    min-width: 0;
    min-height: 2.5em;
    word-break: break-word;
    line-height: 1.55;
}

.blog-article-editor .blog-article-split-row__img {
    min-width: 0;
}

    .blog-article-editor .blog-article-split-row__img .blog-article-img-wrap {
        margin: 0 !important;
        max-width: 100% !important;
    }

.blog-article-img-layout-btn {
    position: absolute;
    top: 6px;
    right: 70px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.blog-article-img-fs-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.blog-article-img-del-btn {
    position: absolute;
    top: 6px;
    right: 38px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.88);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

    .blog-article-img-del-btn:hover {
        background: rgba(185, 28, 28, 0.95);
    }

.blog-article-img-layout-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

.blog-article-img-fs-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Выше соседних блоков (z-index: 1), иначе ol/li перехватывают клики по «крестику» и развороту; нижний край на строке — как якорь ввода */
.blog-article-editor .blog-article-img-wrap {
    z-index: 2;
    vertical-align: bottom;
}

.blog-article-editor > *:not(.blog-article-img-wrap) {
    position: relative;
    z-index: 1;
}

.blog-article-editor:focus {
    outline: none;
    border-color: var(--c-primary, #8B5CF6);
}

.blog-article-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(107, 114, 128, 0.65);
}

.blog-article-editor ol,
.blog-article-editor ul {
    padding-left: 2.25em;
    margin: 0.5em 0;
}

/* Мобильная версия редактора статьи (≤640px): в PWA floating-тулбар, на iPhone PWA inline-тулбар сразу под полем. */
@media (max-width: 640px) {
    .blog-article-mobile-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 10px max(8px, env(safe-area-inset-right));
        padding-left: max(8px, env(safe-area-inset-left));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--c-border, #e5e7eb);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .blog-article-mobile-toolbar::-webkit-scrollbar {
            display: none;
        }

        .blog-article-mobile-toolbar .blog-article-tb-btn {
            height: 32px;
            font-size: 12px;
            padding: 0 8px;
            flex-shrink: 0;
        }

            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="bold"],
            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="italic"],
            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="underline"],
            .blog-article-mobile-toolbar .blog-article-align-btn,
            .blog-article-mobile-toolbar .blog-article-tb-btn.blog-article-addimg-btn,
            .blog-article-mobile-toolbar .blog-article-tb-btn.blog-article-link-btn {
                width: 32px;
                min-width: 32px;
                padding: 0;
            }

    body.dg-theme-dark .blog-article-mobile-toolbar {
        background: #1e1b4b;
        border-top-color: #3730a3;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    }

        body.dg-theme-dark .blog-article-mobile-toolbar .blog-article-tb-btn {
            background: #312e81;
            border-color: #4338ca;
            color: var(--c-text, #E5E7EB);
        }

            body.dg-theme-dark .blog-article-mobile-toolbar .blog-article-tb-btn:hover {
                background: #3730a3;
                border-color: var(--c-primary, #8B5CF6);
            }

            body.dg-theme-dark .blog-article-mobile-toolbar .blog-article-tb-btn.active,
            body.dg-theme-dark .blog-article-mobile-toolbar .blog-article-tb-btn[data-active="true"] {
                background: var(--c-primary, #8B5CF6);
                border-color: var(--c-primary, #8B5CF6);
                color: #fff;
            }

    .blog-article-mobile-toolbar[hidden] {
        display: none !important;
    }

    /* Мобильный браузер (не PWA): без нижнего тулбара и без инлайн-форматирования в модалке статьи */
    html:not(.dg-standalone-pwa) #blogArticleUploadModal #blogArticleToolbar {
        display: none !important;
    }

    /* PWA: под «Текст статьи» инлайн-кнопки скрыты — форматирование только в нижней панели при фокусе */
    html.dg-standalone-pwa #blogArticleUploadModal #blogArticleToolbar {
        display: none !important;
    }

    /* В PWA нижний тулбар показывается при фокусе; в мобильном браузере остаёмся без него. */
    html:not(.dg-standalone-pwa) .blog-article-mobile-toolbar,
    html:not(.dg-standalone-pwa) .blog-article-mobile-submit-btn {
        display: none !important;
    }

    /* При открытой клавиатуре bottom задаётся в JS (над тулбаром + полоса Safari на iPhone) */
    .blog-article-mobile-submit-btn {
        position: fixed;
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
        left: max(12px, env(safe-area-inset-left));
        z-index: 11;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--c-primary);
        color: #fff;
        border: none;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.4);
        transition: background 0.2s, transform 0.2s;
    }

        .blog-article-mobile-submit-btn:hover {
            background: var(--c-primary-600, #7c3aed);
            transform: scale(1.05);
        }

        .blog-article-mobile-submit-btn[hidden] {
            display: none !important;
        }

    #blogArticleUploadModal .blog-article-toolbar.blog-article-toolbar-hidden-mobile {
        display: none !important;
    }

    /* Модалка «Создать статью»: на весь экран по высоте (иначе flex align-items:center оставлял ~20% пустоты снизу) */
    #blogArticleUploadModal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        overflow: hidden;
        min-height: 100dvh;
        min-height: 100svh;
    }

        #blogArticleUploadModal .modal-content.blog-article-modal-content {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            border-radius: 0 !important;
            min-height: 100dvh;
            min-height: 100svh;
            max-height: none !important;
            height: auto;
            flex: 1 1 auto;
            align-self: stretch;
            padding-top: calc(48px + env(safe-area-inset-top, 0px));
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-sizing: border-box;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            overflow-anchor: none;
        }

        /* Форма на всю высоту карточки: поле статьи растягивается, подсказка про модерацию — под редактором */

        #blogArticleUploadModal .modal-body#blogArticleFormWrap {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            display: block !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

        #blogArticleUploadModal #blogArticleForm {
            flex: none;
            min-height: auto;
            display: block;
            gap: 0;
        }

            #blogArticleUploadModal #blogArticleForm > .form-group:not(.blog-article-editor-field) {
                flex-shrink: 0;
            }

            #blogArticleUploadModal #blogArticleForm > .blog-article-editor-field {
                flex: none;
                min-height: auto;
                display: block;
                margin-bottom: 18px;
            }

                #blogArticleUploadModal #blogArticleForm > .blog-article-editor-field > label {
                    flex-shrink: 0;
                }

                #blogArticleUploadModal #blogArticleForm > .blog-article-editor-field #blogArticleToolbar {
                    flex-shrink: 0;
                }

                #blogArticleUploadModal #blogArticleForm > .blog-article-editor-field .blog-article-editor {
                    flex: none;
                    min-height: 220px;
                    width: 100%;
                    max-height: none !important;
                    overflow-x: hidden !important;
                    overflow-y: visible !important;
                    -webkit-overflow-scrolling: touch;
                    touch-action: pan-y;
                }

            #blogArticleUploadModal #blogArticleForm > p.text-secondary {
                flex-shrink: 0;
                margin-top: 0;
            }

            #blogArticleUploadModal.dg-article-input-focused #blogArticleForm > .blog-article-moderation-hint {
                display: none !important;
            }

            #blogArticleUploadModal #blogArticleForm > #blogArticleDollFindLinksWrap {
                position: relative;
                flex: none;
                flex-shrink: 0;
                clear: both;
                margin-top: 18px !important;
                margin-bottom: 18px !important;
            }

        /* iOS: при открытой клавиатуре по-прежнему скролл карточки (см. .dg-kb-open) */
        #blogArticleUploadModal .blog-article-editor {
            overflow-x: hidden !important;
        }

        /* Запас снизу: тулбар + ✓ + полоса над клавиатурой — строка ввода не уходит под «хром» */
        #blogArticleUploadModal.dg-kb-open .blog-article-modal-content {
            overflow-y: scroll !important;
            -webkit-overflow-scrolling: touch !important;
            touch-action: pan-y;
            padding-bottom: max(200px, calc(env(safe-area-inset-bottom, 0px) + 170px));
        }
}

@media (max-width: 380px) {
    .blog-article-mobile-toolbar {
        gap: 4px;
    }

        .blog-article-mobile-toolbar .blog-article-tb-btn {
            height: 30px;
            font-size: 11px;
            padding: 0 6px;
        }

            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="bold"],
            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="italic"],
            .blog-article-mobile-toolbar .blog-article-tb-btn[data-cmd="underline"],
            .blog-article-mobile-toolbar .blog-article-align-btn,
            .blog-article-mobile-toolbar .blog-article-tb-btn.blog-article-addimg-btn,
            .blog-article-mobile-toolbar .blog-article-tb-btn.blog-article-link-btn {
                width: 30px;
                min-width: 30px;
                padding: 0;
            }
}

/* ✅ DG: sticky toolbar при скролле — только десктоп ≥641px */
@media (min-width: 641px) {
    #blogArticleUploadModal .modal-content.blog-article-modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 32px);
        overflow: hidden;
    }

    /* Компактная desktop-шапка статьи.
       Mobile не трогаем: там работает .blog-article-screen-bar. */
    #blogArticleUploadModal .modal-header.dg-modal-header--back {
        min-height: 48px;
        padding: 10px 24px !important;
        padding-left: 64px !important;
        padding-right: 64px !important;
        border-bottom: none !important;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center !important;
        position: relative;
    }

    #blogArticleUploadModal .modal-header h2,
    #blogArticleUploadModal #blogArticleModalTitle {
        margin: 0;
        font-size: 18px !important;
        line-height: 1.2;
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #blogArticleUploadModal .modal-header.dg-modal-header--back .modal-close {
        position: absolute !important;
        left: 12px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        flex: 0 0 36px !important;
    }

    /* Скролл-контейнер без верхнего padding — иначе sticky top:0 даёт зазор */
    #blogArticleUploadModal .modal-body#blogArticleFormWrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 0 !important;
    }

    /* На ПК прокруткой всего содержимого владеет formWrap. Редактор может
       вырасти выше окна, поэтому колесо над ним должно продолжать скролл
       родителя, а не запираться на вложенном overscroll-контейнере. */
    #blogArticleUploadModal #blogArticleEditor {
        overscroll-behavior-y: auto;
    }

    /* Форма без верхнего отступа — воздух перенесён ниже тулбара */
    #blogArticleUploadModal #blogArticleForm {
        padding-top: 0;
    }

        /* Отступ сверху — перед полем заголовка, уже ниже sticky-тулбара */
        #blogArticleUploadModal #blogArticleForm > .form-group:first-child {
            margin-top: 12px;
        }

        /* Возвращаем нормальный зазор между "Текст статьи" и тулбаром */
        #blogArticleUploadModal #blogArticleForm > .blog-article-editor-field > label {
            margin-bottom: 8px !important;
        }

    /* Тулбар липкий, но без отрицательных margin */
    #blogArticleUploadModal #blogArticleToolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--c-surface, #fff);
        border-bottom: 1px solid var(--c-border, #e5e7eb);
        padding: 0 0 6px !important;
        margin: 0 !important;
    }

        /* Маска закрывает щель только визуально, без сдвига тулбара */
        #blogArticleUploadModal #blogArticleToolbar::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -8px;
            height: 8px;
            background: inherit;
            pointer-events: none;
        }

    body.dg-theme-dark #blogArticleUploadModal #blogArticleToolbar {
        background: var(--c-bg, #111827);
        border-bottom-color: var(--c-border, #E5E7EB);
    }
}

/* ✅ DG: Profile modal layout (перенесено из app.js) */
.modal-content.modal-small {
    max-width: 520px;
    width: min(92vw, 520px);
}

/* Заголовок модалки «Профиль» — компактно, без лишних отступов */
#profileModal .dg-profile-modal-header {
    padding: 10px 16px;
    min-height: 0;
    border-bottom: 1px solid var(--c-border);
}

#profileModal .dg-profile-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#profileModal .dg-profile-modal-header .modal-close {
    position: static;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 18px;
    padding: 0;
}

.dg-modal-back-btn {
    --dg-modal-back-bg: rgba(0, 0, 0, 0.90);
    --dg-modal-back-hover-bg: rgba(0, 0, 0, 0.96);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
}

body:not(.dg-theme-dark) .dg-modal-back-btn {
    --dg-modal-back-bg: #fff;
    --dg-modal-back-hover-bg: #f8fafc;
}

.dg-modal-back-btn:hover {
    background: var(--dg-modal-back-hover-bg) !important;
}

.modal-header .dg-modal-back-btn {
    left: 12px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    background: var(--dg-modal-back-bg);
    box-shadow: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 0;
}

.dg-modal-back-btn :is(svg, .lucide) {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

/* ——— Профиль: расположение элементов (десктоп — аватар | центр с текстом и достижением) ——— */
#profileModal .profile-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E1E8ED;
}
/* Центр: текст по содержимому, ачивка сразу после него */
#profileModal .dg-profile-center {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
}

    #profileModal #profileName,
    #profileModal .profile-title .author-rating {
        display: inline-block;
        transform: translateY(3px);
    }

    #profileModal .dg-profile-center .profile-info {
        flex: 0 1 auto;
        min-width: 0;
    }

    #profileModal .dg-profile-center .dg-profile-achievement-badge {
        flex: 0 0 64px;
    }

#profileModal .profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: 6px;
}

#profileModal .profile-avatar {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    flex: 0 0 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #E1E8ED;
}

#profileModal .dg-profile-avatar-premium {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 21px;
    line-height: 30px;
    text-align: center;
}

#profileModal .profile-avatar-wrap.has-premium .dg-profile-avatar-premium {
    display: inline-block;
}

#profileModal .dg-profile-avatar-premium::before {
    content: "\01F451";
}

#profileModal .dg-profile-title-placeholder {
    margin: 2px 0 8px;
    font-size: 13px;
    color: #000;
}

/* На ПК титул под ником с кнопкой редактирования — показываем */

#profileModal .dg-profile-title-edit {
    margin-left: 6px;
    font-size: 18px;
    opacity: 0.85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
/* Кнопку редактирования титула показываем только в своём профиле */
#profileModal:not([data-own-profile="true"]) .dg-profile-title-edit {
    display: none !important;
}

/* Модалка выбора титула: текст слева, замок справа без перекрытия */
.dg-profile-title-modal .dg-profile-title-modal-content {
    width: min(92vw, 360px);
    max-width: 360px;
    overflow: hidden;
}

.dg-profile-title-modal .dg-profile-title-modal-header {
    position: relative;
    min-height: 48px;
    padding: 10px 16px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
    flex-shrink: 0;
    justify-content: center !important;
    align-items: center !important;
}

.dg-profile-title-modal .dg-profile-title-modal-header h2 {
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--dg-font-h3) !important;
    line-height: 1.2;
    font-weight: 600;
}

.dg-profile-title-modal .dg-profile-title-modal-header .modal-close {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--dg-modal-back-bg, rgba(0, 0, 0, 0.90)) !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 20;
}

.dg-profile-title-modal .modal-body {
    padding: 16px 24px 12px;
}

.dg-profile-title-modal .dg-profile-titles-unlocked {
    font-size: 14px !important;
    line-height: 20px;
}

.dg-profile-title-modal .dg-profile-title-option {
    min-height: 44px;
    font-size: 16px;
    line-height: 20px;
}

    .dg-profile-title-modal .dg-profile-title-option:not(.dg-profile-title-option--locked):hover {
        background: rgba(0, 0, 0, 0.04);
    }

.dg-profile-title-modal .dg-profile-title-lock {
    flex-shrink: 0;
    margin-left: 8px;
}

/* Строка премиума: 2 колонки — слева премиум, справа иконки соцсетей (ПК) */
#profileModal .dg-profile-premium-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

#profileModal .dg-profile-premium-left {
    min-width: 0;
    flex: 1 1 auto;
}

#profileModal .dg-profile-premium-line--own {
    justify-content: flex-start;
}

#profileModal .dg-profile-premium-line--own .dg-profile-premium-left {
    flex: 0 1 auto;
}

#profileModal .dg-profile-premium-right {
    display: none;
}

.dg-profile-page-premium-line .dg-profile-promo-slot {
    margin-left: auto;
}

#profileModal .dg-profile-promo-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    margin-left: 10px;
    max-width: 52%;
}

#profileModal .dg-profile-promo-right .dg-profile-social-btn {
    display: none;
}

.dg-profile-page-premium-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(100%, 720px);
}

.dg-profile-page-premium-line .dg-profile-premium-left {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-profile-promo-slot {
    min-width: 0;
}

.dg-profile-promo-slot:empty {
    display: none;
}

.dg-profile-promo {
    --dg-profile-promo-text: #374151;
    --dg-profile-promo-code-bg: rgba(124, 58, 237, 0.12);
    --dg-profile-promo-code-text: #4c1d95;
    --dg-profile-promo-code-border: rgba(124, 58, 237, 0.2);
    --dg-profile-promo-copy-bg: rgba(17, 24, 39, 0.06);
    --dg-profile-promo-copy-text: #374151;
    --dg-profile-promo-copy-border: rgba(17, 24, 39, 0.12);
    --dg-profile-promo-control-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    color: var(--dg-profile-promo-text);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

body.dg-theme-dark .dg-profile-promo,
html.dg-theme-dark .dg-profile-promo {
    --dg-profile-promo-text: rgba(255, 255, 255, 0.82);
    --dg-profile-promo-code-bg: rgba(167, 139, 250, 0.2);
    --dg-profile-promo-code-text: #f5f3ff;
    --dg-profile-promo-code-border: rgba(196, 181, 253, 0.38);
    --dg-profile-promo-copy-bg: rgba(255, 255, 255, 0.1);
    --dg-profile-promo-copy-text: #f5f3ff;
    --dg-profile-promo-copy-border: rgba(255, 255, 255, 0.18);
}

.dg-profile-promo .dg-promo-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--dg-profile-promo-control-size);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--dg-profile-promo-code-bg);
    color: var(--dg-profile-promo-code-text);
    border: 1px solid var(--dg-profile-promo-code-border);
    padding: 4px 8px;
    border-radius: 999px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

.dg-profile-promo .dg-copy-promo {
    margin-left: 0;
    width: var(--dg-profile-promo-control-size);
    height: var(--dg-profile-promo-control-size);
    min-width: var(--dg-profile-promo-control-size);
    min-height: var(--dg-profile-promo-control-size);
    max-width: var(--dg-profile-promo-control-size);
    max-height: var(--dg-profile-promo-control-size);
    padding: 0 !important;
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: var(--dg-profile-promo-copy-bg);
    color: var(--dg-profile-promo-copy-text);
    border: 1px solid var(--dg-profile-promo-copy-border);
    box-shadow: none;
    line-height: 1;
}

.dg-profile-promo .dg-copy-promo i,
.dg-profile-promo .dg-copy-promo .lucide {
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    stroke-width: 2.1;
}

@media (max-width: 640px) {
    #profileModal .dg-profile-premium-line,
    .dg-profile-page-premium-line {
        flex-wrap: nowrap;
        gap: 8px;
    }

    #profileModal .dg-profile-premium-line--own {
        justify-content: space-between;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-premium-left {
        flex: 1 1 auto;
    }

    #profileModal .dg-profile-promo-right {
        margin-left: auto;
        max-width: 56%;
    }

    .dg-profile-promo-slot {
        display: flex;
        justify-content: flex-end;
    }

    .dg-profile-promo-slot .dg-profile-promo {
        justify-content: flex-end;
        gap: 5px;
    }

    .dg-profile-promo-slot .dg-profile-promo span {
        display: none;
    }

    .dg-profile-promo-slot .dg-profile-promo .dg-promo-code {
        max-width: 160px;
    }
}

@media (min-width: 641px) {
    #profileModal .dg-profile-premium-right {
        display: none;
    }

    #profileModal .dg-profile-promo-right {
        display: flex;
    }

    #profileModal .dg-profile-social-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #E1E8ED;
        color: #333;
        border: none;
        padding: 0;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

        #profileModal .dg-profile-social-btn:hover {
            background: #cbd5e0;
            color: #1a1a1a;
        }

        #profileModal .dg-profile-social-btn i,
        #profileModal .dg-profile-social-btn .lucide {
            width: 18px;
            height: 18px;
        }

    #profileModal .profile-actions {
        width: 100%;
    }

    #profileModal .dg-profile-actions-mobile {
        display: grid;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    #profileModal[data-own-profile="true"] .dg-profile-actions-mobile {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    }

    #profileModal:not([data-own-profile="true"]) .dg-profile-actions-mobile {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    }

    #profileModal:not([data-own-profile="true"]) #messageBtn {
        grid-column: 2;
    }

    #profileModal:not([data-own-profile="true"]) .dg-profile-pc-reviews {
        grid-column: 1 / 3;
    }

    #profileModal .dg-profile-actions-mobile .profile-actions-own {
        display: contents;
    }

    #profileModal .profile-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        height: 36px;
        justify-content: center;
    }

    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        column-gap: 8px;
        row-gap: 8px;
        align-items: center;
        width: min(100%, 500px);
        max-width: 100%;
    }

    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active .dg-profile-premium-left,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive .dg-profile-premium-left {
        grid-column: 1;
        min-width: 0;
        width: 100%;
    }

    #profileModal .dg-profile-premium-line--own .subscription-status .dg-premium-status-row {
        width: 100%;
    }

    #profileModal .dg-profile-premium-line--own .subscription-status .dg-premium-status-pill,
    #profileModal .dg-profile-premium-line--own .subscription-status #subscribeBtn {
        width: 100%;
        min-height: 36px;
        height: 36px;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo-right {
        display: contents;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-slot,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo-slot {
        display: contents;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-profile-promo,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo {
        display: contents;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-promo-code,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-promo-code {
        grid-column: 2;
        justify-self: end;
        text-align: right;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        transform: none;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-copy-promo,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-copy-promo {
        grid-column: 3;
        justify-self: center;
        transform: none;
    }
}

/* Кнопки профиля: мобильный блок (2 кнопки + бургер) */
#profileModal .dg-profile-actions-buttons {
    display: none;
}

#profileModal .dg-profile-actions-mobile {
    display: flex;
}

#profileModal .dg-profile-actions-left,
#profileModal .dg-profile-actions-right {
    display: contents;
}

#profileModal #followBtn,
#profileModal #messageBtn,
#profileModal #editProfileBtn,
#profileModal #btnAuthorReviews {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

#profileModal .profile-info {
    min-width: 0;
}

    #profileModal .profile-info h2,
    #profileModal .profile-title {
        margin-bottom: 4px;
        font-size: 18px;
        font-weight: 700;
    }

#profileModal .profile-stats {
    color: #657786;
    margin-bottom: 12px;
    font-size: 14px;
}

/* Иконка достижения: справа от текстового блока, ~половина размера аватарки */
#profileModal .dg-profile-achievement-badge {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    align-self: center;
}

    #profileModal .dg-profile-achievement-badge:empty {
        display: none;
    }

    #profileModal .dg-profile-achievement-badge img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    #profileModal .dg-profile-achievement-fallback {
        position: absolute;
        font-size: 28px;
        line-height: 1;
    }

#profileModal .dg-ach-card-left {
    position: relative;
}

#profileModal .dg-ach-card-icon-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

#profileModal .dg-ach-card-icon {
    position: relative;
    z-index: 1;
}

#profileModal .dg-ach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#profileModal .dg-ach-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#profileModal .dg-ach-card-top {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: start;
}

#profileModal .dg-ach-card-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

#profileModal .dg-ach-card-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}

#profileModal .dg-ach-card-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#profileModal .dg-ach-card-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

#profileModal .dg-ach-card-desc {
    font-size: 12px;
    line-height: 1.35;
    color: #666;
}

#profileModal .dg-ach-card-action {
    margin-top: 2px;
}

#profileModal .dg-ach-card-unavailable {
    font-size: 12px;
    color: #999;
}

#profileModal .dg-ach-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#profileModal .dg-ach-card-progress-text {
    font-size: 11px;
    color: #888;
}

#profileModal .dg-ach-card-progress-track {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

#profileModal .dg-ach-card-progress-fill {
    height: 100%;
    background: #4ade80;
    transition: width .2s;
}

@media (max-width: 640px) {
    #profileModal .dg-ach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #profileModal .dg-ach-card-top {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    #profileModal .dg-ach-card-right {
        align-items: center;
        text-align: center;
    }

    #profileModal .dg-ach-card-bottom {
        align-items: center;
    }

    #profileModal .dg-ach-card-progress-track {
        width: 100%;
    }
}

@media (max-width: 380px) {
    #profileModal .dg-ach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#profileModal .profile-bio-wrap {
    margin-bottom: 0;
}

#profileModal .dg-profile-bio-toggle {
    display: none;
}

#profileModal .profile-bio-wrap.dg-profile-bio-overflowing .dg-profile-bio-toggle {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary-color, #a855f7);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#profileModal .profile-bio-wrap.dg-profile-bio-collapsed .profile-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 641px) {
    #profileModal .profile-bio-wrap.dg-profile-bio-collapsed .profile-bio {
        -webkit-line-clamp: 3;
    }

    /* ПК: строка действий — две части слева: премиум (динамический) + блок кнопок */
    #profileModal .profile-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    #profileModal .dg-profile-premium-line {
        flex: 0 1 auto;
        min-width: 0;
    }

    #profileModal .dg-profile-actions-mobile {
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    #profileModal .profile-actions-own {
        flex-direction: row;
        gap: 8px;
    }

        #profileModal .profile-actions-own .btn {
            width: auto;
        }
}

@media (max-width: 640px) {
    #profileModal .profile-bio-wrap.dg-profile-bio-collapsed .profile-bio {
        -webkit-line-clamp: 2;
    }

    #profileModal .profile-bio-wrap {
        cursor: default;
    }

}

/* Профиль: единая видимая группа контактов по референсу и шестерёнка меню. */
#profileModal .dg-profile-socials-card {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    column-gap: 7px;
    min-width: 92px;
    min-height: 58px;
    padding: 7px 9px 5px;
    border: 1px solid rgba(139, 92, 246, 0.72);
    border-radius: 18px;
    background: rgba(19, 20, 27, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 7px 18px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

#profileModal .dg-profile-contacts-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileModal .dg-profile-socials-dots {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    gap: 3px;
}

#profileModal .dg-profile-socials-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
}

#profileModal .dg-profile-socials-dots i:nth-child(2) { background: #22c55e; }
#profileModal .dg-profile-socials-dots i:nth-child(3) { background: #8b5cf6; }

#profileModal .dg-profile-socials-links {
    display: flex;
    align-items: center;
    gap: 3px;
}

#profileModal .dg-profile-socials-card .dg-profile-social-btn {
    display: inline-flex !important;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    padding: 0;
    color: #f8fafc;
    background: transparent;
    border-radius: 8px;
}

#profileModal .dg-profile-socials-card .dg-profile-social-btn:hover {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.18);
}

#profileModal .dg-profile-socials-card .dg-profile-social-btn i,
#profileModal .dg-profile-socials-card .dg-profile-social-btn .lucide {
    width: 18px;
    height: 18px;
}

#profileModal .dg-profile-socials-label {
    grid-column: 1 / -1;
    color: var(--c-text, #f8fafc);
    font-size: 11px;
    line-height: 1;
}

#profileModal .dg-profile-settings-menu-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 14px;
    color: var(--c-text, #f8fafc);
    background: rgba(19, 20, 27, 0.72);
    cursor: pointer;
}

#profileModal .dg-profile-settings-menu-btn i,
#profileModal .dg-profile-settings-menu-btn .lucide {
    width: 21px;
    height: 21px;
}

@media (min-width: 641px) {
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive {
        display: flex;
        width: auto;
        max-width: 100%;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right {
        display: flex;
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 640px) {
    #profileModal .dg-profile-settings-menu-btn {
        display: none;
    }

    #profileModal .dg-profile-premium-line--own,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive {
        align-items: stretch;
    }

    #profileModal .dg-profile-promo-right {
        max-width: 58%;
        gap: 6px;
    }

    #profileModal .dg-profile-socials-card {
        min-width: 86px;
        min-height: 54px;
        padding: 6px 7px 5px;
    }
}

#profileModal .profile-bio-wrap.dg-profile-bio-expanded .profile-bio {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

#profileModal .profile-stat-label--mobile {
    display: none;
}

#profileModal .profile-bio {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 14px;
}

.profile-bio a {
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.14em;
}

.profile-bio a:hover {
    color: #a78bfa;
    -webkit-text-fill-color: #a78bfa;
    text-decoration: none;
}

/* Блок действий профиля (общие стили) */
#profileModal .profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 16px;
}

#profileModal .profile-actions-own {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    #profileModal .profile-actions-own .btn {
        width: 100%;
    }

#profileModal .profile-actions .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Текстовый статус премиума в профиле */
@media (min-width: 641px) {
    #profileModal .dg-profile-layout-grid {
        --dg-profile-grid-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        display: grid;
        grid-template-columns: var(--dg-profile-grid-columns);
        align-items: stretch;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .dg-profile-page-premium-line.dg-profile-layout-grid {
        --dg-profile-grid-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        display: grid;
        grid-template-columns: var(--dg-profile-grid-columns);
        align-items: stretch;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    #profileModal .dg-profile-layout-grid--premium {
        --dg-profile-grid-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        width: min(100%, 500px);
    }

    .dg-profile-page-premium-line.dg-profile-layout-grid--premium {
        --dg-profile-grid-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        width: min(100%, 500px);
    }

    #profileModal .dg-profile-layout-grid--actions {
        width: min(100%, 500px);
    }

    #profileModal .profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        justify-items: start;
    }

    #profileModal:not([data-own-profile="true"]) .dg-profile-achievement-badge:empty {
        display: flex;
        visibility: hidden;
        pointer-events: none;
    }

    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive {
        max-width: 100%;
    }

    #profileModal[data-own-profile="true"] .dg-profile-premium-line--own .dg-profile-promo-right {
        grid-column: 2;
        width: 100%;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo-right {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

    #profileModal .dg-profile-actions-mobile {
        justify-self: start;
    }

    #profileModal:not([data-own-profile="true"]) #messageBtn {
        grid-column: 2;
    }

    #profileModal:not([data-own-profile="true"]) .dg-profile-pc-reviews {
        grid-column: 1 / 3;
    }

}

#profileModal .subscription-status .dg-premium-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    box-sizing: border-box;
    background: rgba(var(--c-primary-rgb), 0.12);
    border: 1px solid rgba(var(--c-primary-rgb), 0.24);
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
    font-family: inherit;
    cursor: pointer;
}

#profileModal .subscription-status .dg-premium-status-pill strong {
    color: inherit;
    -webkit-text-fill-color: inherit;
}

#profileModal .subscription-status .dg-premium-status-pill:hover {
    background: rgba(var(--c-primary-rgb), 0.18);
    border-color: rgba(var(--c-primary-rgb), 0.34);
}

#profileModal .subscription-status .dg-premium-status-pill:focus-visible {
    outline: 2px solid rgba(var(--c-primary-rgb), 0.36);
    outline-offset: 2px;
}

#profileModal .subscription-status .dg-premium-status-row,
.dg-profile-page-view .subscription-status .dg-premium-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#profileModal .subscription-status .dg-premium-open-btn,
.dg-profile-page-view .subscription-status .dg-premium-open-btn {
    min-height: 30px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}

#profileModal .subscription-status .dg-premium-expiring-wrap,
.dg-profile-page-view .subscription-status .dg-premium-expiring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

#profileModal .subscription-status .dg-premium-expiring-info,
.dg-profile-page-view .subscription-status .dg-premium-expiring-info {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #DC2626;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.24);
}

#profileModal .subscription-status .dg-premium-expiring-info:focus-visible,
.dg-profile-page-view .subscription-status .dg-premium-expiring-info:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.35);
    outline-offset: 2px;
}

#profileModal .subscription-status .dg-premium-expiring-tooltip,
.dg-profile-page-view .subscription-status .dg-premium-expiring-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: max-content;
    max-width: 220px;
    transform: translateX(-50%) translateY(4px);
    padding: 7px 10px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 8px;
    background: #fff;
    color: #991B1B;
    -webkit-text-fill-color: #991B1B;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

#profileModal .subscription-status .dg-premium-expiring-wrap.is-open .dg-premium-expiring-tooltip,
.dg-profile-page-view .subscription-status .dg-premium-expiring-wrap.is-open .dg-premium-expiring-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

#profileModal .subscription-status .sub-line.sub-public {
    background: rgba(var(--c-primary-rgb), 0.12);
    border: 1px solid rgba(var(--c-primary-rgb), 0.24);
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.12);
}

#profileModal .profile-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    border-bottom: 3px solid transparent;
    padding-bottom: 0;
    flex-shrink: 0;
    flex-grow: 0;
}

.dg-profile-page-view .profile-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #E1E8ED;
    padding-bottom: 0;
    position: sticky;
    top: var(--dg-navbar-stack, 64px);
    z-index: 120;
    background: #fff;
    isolation: isolate;
    flex-shrink: 0;
}

.dg-profile-page-view .profile-tabs .tab-btn {
    padding: 16px 4px;
    font-size: 14px;
    color: #657786;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    border-radius: 0;
}

.dg-profile-page-view .profile-tabs .tab-btn:hover,
#profileModal .profile-tabs .tab-btn:hover {
    color: #333;
}

.dg-profile-page-view .profile-tabs .tab-btn.active,
#profileModal .profile-tabs .tab-btn.active {
    color: #7C3AED;
    font-weight: 600;
    border-bottom-color: #7C3AED;
}

    #profileModal .profile-tabs .tab-btn {
        padding: 16px 4px;
        font-size: 14px;
        color: #657786;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -3px;
        cursor: pointer;
        border-radius: 0;
    }

@media (min-width: 641px) {
    /* Шапка «Профиль» + крестик: по высоте как на телефоне (48px) */
    #profileModal .dg-profile-modal-header {
        min-height: 48px;
        padding: 16px 16px;
    }
    /* Меньше отступ под аватаркой до линии */
    #profileModal .profile-header {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
}

/* Кнопки статей: только иконки (редактировать / удалить) */
.dg-article-edit-delete .dg-article-btn-icon,
.dg-profile-article-edit-delete .dg-article-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .dg-article-edit-delete .dg-article-btn-icon i,
    .dg-profile-article-edit-delete .dg-article-btn-icon i {
        width: 18px;
        height: 18px;
    }

.dg-profile-article-edit-delete .dg-article-btn-icon {
    width: 32px;
    height: 32px;
}

    .dg-profile-article-edit-delete .dg-article-btn-icon i {
        width: 16px;
        height: 16px;
    }

#profileModal .author-rating::before {
    content: "★";
    color: #657786;
    font-size: 0.9em;
    margin-right: 4px;
}

/* Элементы макета «только для телефона» — на десктопе скрыты (сторис показываем и на ПК) */
#profileModal .dg-profile-mobile-back {
    display: none;
}

#profileModal .dg-profile-burger-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    visibility: hidden;
}

#profileModal .dg-profile-burger-panel--open {
    pointer-events: auto;
    visibility: visible;
}

#profileModal.dg-profile-burger-scroll-locked .modal-body.profile-body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

#profileModal .dg-profile-burger-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.25s ease;
}

#profileModal .dg-profile-burger-panel--open .dg-profile-burger-panel-backdrop {
    opacity: 1;
}

@media (min-width: 641px) {
    /* ПК: панель держится за видимую область модалки, а не за прокрученный контент */
    #profileModal .modal-body.profile-body {
        position: relative;
    }

    .dg-profile-page-view .profile-tabs {
        top: var(--dg-navbar-stack, 64px);
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .dg-profile-page-view .profile-tabs::-webkit-scrollbar {
        display: none;
    }

    #profileModal .dg-profile-burger-panel {
        position: fixed;
        inset: 0;
    }
    /* ПК: сайдбар профиля выезжает справа, как на мобильном */
    #profileModal .dg-profile-burger-panel-content {
        position: fixed;
        top: var(--dg-profile-burger-top, 0px);
        right: 0;
        left: auto;
        bottom: auto;
        width: min(170px, 42vw);
        background: rgba(238, 237, 245, 0.88);
        border-radius: 12px 0 0 12px;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    }

    #profileModal .dg-profile-burger-panel--open .dg-profile-burger-panel-content {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
    }
}

#profileModal .dg-profile-burger-panel-content .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

#profileModal .dg-profile-burger-panel-content {
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
}

/* Архив остаётся tab-btn для штатного переключения вкладки, но выглядит как остальные пункты меню. */
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-panel-content .dg-profile-burger-item.tab-btn {
    padding: 10px 14px !important;
    border: 1px solid var(--c-primary) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

body:not(.dg-theme-dark) #profileModal .dg-profile-burger-panel-content .dg-profile-burger-item.tab-btn:hover,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-panel-content .dg-profile-burger-item.tab-btn:focus-visible {
    background: var(--c-bg-light) !important;
}

#profileModal .dg-profile-burger-socials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Строка сторис: под кнопками, до вкладок — и на ПК, и на мобиле */
#profileModal .dg-profile-stories-row {
    --dg-profile-stories-surface-rgb: 255, 255, 255;
    --dg-profile-stories-add-mask-stop: 68px;
    --dg-profile-stories-add-mask-fade: 92px;
    display: block;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    background: transparent;
    border-bottom: 1px solid #E1E8ED;
    padding: 8px 0 10px;
    margin-top: 14px;
}

#profileModal .dg-profile-stories {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 8px 10px;
    min-height: 64px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    #profileModal .dg-profile-stories::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #profileModal .dg-profile-stories.dg-story-scroll-dragging {
        cursor: grabbing;
        user-select: none;
    }

#profileModal .dg-profile-stories-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 92px;
    pointer-events: none;
    opacity: 0;
    z-index: 20;
    transition: opacity 0.2s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    background: transparent;
}

#profileModal .dg-profile-stories-row--mask-visible .dg-profile-stories-mask {
    opacity: 1;
}

#profileModal .dg-profile-stories-row--has-add .dg-profile-stories {
    padding-left: 82px !important;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        transparent var(--dg-profile-stories-add-mask-stop),
        #000 var(--dg-profile-stories-add-mask-fade),
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        transparent var(--dg-profile-stories-add-mask-stop),
        #000 var(--dg-profile-stories-add-mask-fade),
        #000 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#profileModal .dg-profile-story {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 5px;
}

    #profileModal .dg-profile-story::before {
        content: "";
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px solid #E1E8ED;
        background: #f0f2f5;
        box-sizing: border-box;
    }

#profileModal .dg-profile-story-add::before {
    border: 2px dashed #a855f7;
    background: transparent;
    transition: box-shadow 0.2s ease;
}

#profileModal .dg-profile-story-add:is(:hover, :focus-visible, :active)::before {
    box-shadow: 0 0 0 2px #7C3AED;
}

body:not(.dg-theme-dark) #profileModal .dg-profile-story-add::before {
    border-color: #9333ea;
    background: rgba(15, 23, 42, 0.06);
}

#profileModal .dg-profile-story-icon {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: #657786;
}

body:not(.dg-theme-dark) #profileModal .dg-profile-story-icon {
    color: #9333ea;
}

#profileModal .dg-profile-story-add {
    position: absolute;
    top: 16px;
    left: 13px;
    z-index: 30;
    background: transparent;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    margin: 0;
    pointer-events: auto;
}

#profileModal .dg-profile-story-label,
#profileModal .dg-profile-story .dg-profile-highlight-label {
    display: none;
}

#profileModal .dg-profile-story-add {
    width: 80px;
    left: 1px;
}

#profileModal .dg-profile-story-add::before {
    margin: 0 auto;
}

#profileModal .dg-profile-story-add .dg-profile-story-label {
    display: block;
    margin-top: 7px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

body.dg-theme-dark #profileModal .dg-profile-story-add .dg-profile-story-label {
    color: #f4f0f8;
}

@media (min-width: 641px) {
    #profileModal .dg-profile-stories {
        min-height: 84px;
    }
}

#profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight::before {
    border: 2px solid #E1E8ED;
}

#profileModal .dg-profile-story-item::before {
    background-color: #e8eaed;
    background-image: var(--story-bg, none);
    background-size: cover;
    background-position: center;
}

#profileModal .dg-profile-story-item.dg-profile-story-unviewed::before {
    border: var(--dg-story-unviewed-border-width) solid var(--dg-story-unviewed-border);
}

#profileModal .dg-profile-story-item {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 50%;
}

#profileModal .dg-profile-story-item.dg-profile-story-processing {
    opacity: 0.72;
    cursor: progress;
}

#profileModal .dg-profile-story-item.dg-profile-story-failed {
    opacity: 0.58;
}

#profileModal .dg-profile-story-item.dg-profile-story-processing::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--primary-color, #667eea);
    animation: dg-spin 0.9s linear infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes dg-spin {
    to { transform: rotate(360deg); }
}

#profileModal .dg-profile-story-delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

    #profileModal .dg-profile-story-delete:hover {
        background: rgba(0,0,0,0.7);
    }

/* Tablet 768–1199px: аватар чуть меньше */
@media (min-width: 768px) and (max-width: 1199px) {
    #profileModal .profile-avatar {
        width: 90px;
        height: 90px;
        min-width: 90px;
        min-height: 90px;
        flex: 0 0 90px;
    }
}

/* Mobile ≤640px: шапка «Профиль»/крестик скрыта; бургер меню (Достижения, Статистика и т.д.) — показываем; скролл .profile-body (статистика/настройки/достижения — тот же поток) */
@media (max-width: 640px) {
    /* Фиксируем высоту на весь экран за вычетом нижней навигации — не меняется при смене вкладок */
    #profileModal .modal-content.modal-large {
        height: calc(100svh - var(--dg-mobile-bottom-nav-height, calc(56px + env(safe-area-inset-bottom, 0px)))) !important;
        height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + env(safe-area-inset-bottom, 0px)))) !important;
        max-height: calc(100svh - var(--dg-mobile-bottom-nav-height, calc(56px + env(safe-area-inset-bottom, 0px)))) !important;
        max-height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + env(safe-area-inset-bottom, 0px)))) !important;
        min-height: 0 !important;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #profileModal .modal-body.profile-body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        flex: 1 1 auto;
        min-height: 0;
    }

    #profileModal.dg-profile-burger-scroll-locked .modal-body.profile-body {
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }

    #profileModal .profile-content,
    #profileModal .profile-scroll {
        overflow: visible;
        flex: 0 1 auto;
        min-height: 0;
    }

    /* Меню бургера: табы и сторис остаются видимыми */
    /* Шапка с «Профиль» и кнопкой закрыть — скрыта на мобильном */
    #profileModal .dg-profile-modal-header {
        display: none !important;
    }
    /*
    ——— закомментировано: отображение шапки «Профиль» + кнопка закрыть ———
    #profileModal .dg-profile-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        min-height: 48px;
        padding: 8px 12px;
        background: #F7F9FA;
        border-bottom: 1px solid #E1E8ED;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    #profileModal .dg-profile-header-title { font-size: 16px; font-weight: 500; color: #000; margin: 0; }
    #profileModal .dg-profile-modal-header .modal-close {
        position: static;
        width: 24px;
        height: 24px;
        font-size: 20px;
        color: #657786;
        background: none;
        box-shadow: none;
    }
    ——— конец закомментированного блока ———
    */

    /* Верхний блок: слева аватар, справа центр (ник, титул, подписчики + достижение) */
    #profileModal .profile-header {
        grid-template-columns: auto 1fr;
        text-align: left;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    #profileModal .profile-avatar-wrap {
        flex: 0 0 auto;
    }

    #profileModal .profile-avatar {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        flex: none;
    }

    #profileModal .dg-profile-achievement-badge {
        width: min(14.7vw, 67px);
        height: min(14.7vw, 67px);
        min-width: min(14.7vw, 67px);
        min-height: min(14.7vw, 67px);
        margin-left: -8px;
        margin-right: 0;
        transform: translateY(-5px);
    }

    #profileModal .dg-profile-avatar-premium {
        width: 33px;
        height: 33px;
        font-size: 18px;
        line-height: 27px;
        right: 0;
        bottom: 0;
    }

    #profileModal .profile-info {
        flex: 1;
        min-width: 0;
        transform: translateY(5px);
    }

        #profileModal .profile-info h2,
        #profileModal .profile-title {
            font-size: 16px;
        }

    #profileModal .dg-profile-title-placeholder {
        font-size: 12px;
        margin: 2px 0 6px;
    }

    #profileModal .dg-profile-title-edit {
        font-size: 16px;
    }

    #profileModal .profile-stats {
        font-size: 13px;
    }

    /* Описание на всю ширину, от левого края под аватаркой */
    #profileModal .profile-bio-wrap {
        width: 100%;
        margin: 0 0 12px;
        padding: 0;
    }

    #profileModal .profile-bio {
        font-size: 13px;
        line-height: 1.4;
        padding: 0;
    }

    /* Премиум: статус и кнопка управляются разными правилами */
    #profileModal .subscription-status .dg-premium-status-pill {
        color: var(--c-primary, #8B5CF6);
        -webkit-text-fill-color: var(--c-primary, #8B5CF6);
        font-size: 13px;
    }

    #profileModal .subscription-status #subscribeBtn {
        margin-bottom: 8px;
    }

    /* Строка премиума на всю ширину, под нею кнопки в одну линию на всю ширину */
    #profileModal .profile-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 6px;
        margin-top: 0;
        padding: 0;
        width: 100%;
    }

    #profileModal .dg-profile-premium-line {
        width: 100%;
    }

    /* Мобилка: одна строка из трёх элементов — две широкие кнопки + маленький бургер */
    #profileModal .dg-profile-actions-mobile {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        margin-top: 9px;
        width: 100%;
    }

    /* dg-profile-actions-left / right не добавляют своих колонок, только группируют разметку */
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right {
        display: contents;
    }

    #profileModal .profile-actions .dg-profile-ext-btn,
    #profileModal .profile-actions .dg-profile-ref-btn {
        display: none !important;
    }
    /* В своём профиле кнопка «Отзывы» между Редактировать и бургером — показываем */
    #profileModal .profile-actions .dg-profile-actions-right .dg-reviews-btn {
        display: inline-flex !important;
    }

    #profileModal .profile-actions .dg-profile-actions-right .dg-profile-pc-reviews {
        display: none !important;
    }

    #profileModal .profile-actions > .dg-reviews-btn {
        display: none !important;
    }

    /* Две главные кнопки в строке делят ширину поровну */
    #profileModal .dg-profile-actions-mobile .profile-actions-own {
        display: contents;
    }

    #profileModal .dg-profile-actions-mobile .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    #profileModal .profile-actions .btn {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        line-height: 1.2;
        padding: 6px 8px;
        min-height: 36px;
        height: 36px;
        justify-content: center;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Корона премиума: как на десктопе — снизу справа у аватарки, без смещения */

    /* Панель бургера: выезжает справа */
    #profileModal .dg-profile-burger-panel {
        position: fixed;
        inset: 0;
        z-index: 30;
        pointer-events: none;
        visibility: hidden;
    }

    #profileModal .dg-profile-burger-panel--open {
        pointer-events: auto;
        visibility: visible;
    }

    #profileModal .dg-profile-burger-panel-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.3);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #profileModal .dg-profile-burger-panel--open .dg-profile-burger-panel-backdrop {
        opacity: 1;
    }

    #profileModal .dg-profile-burger-panel-content {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        height: auto;
        width: min(170px, 42vw);
        background: rgba(238, 237, 245, 0.88);
        border-radius: 12px 0 0 12px;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translate(100%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    }

    #profileModal .dg-profile-burger-panel--open .dg-profile-burger-panel-content {
        transform: translate(0, -50%);
        opacity: 1;
        visibility: visible;
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
    }

    #profileModal .dg-profile-burger-panel-content .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        text-decoration: none;
    }

    #profileModal .dg-profile-burger-item,
    #profileModal .dg-profile-burger-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 14px;
        min-height: 36px;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        border-radius: 999px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        #profileModal .dg-profile-burger-link:hover,
        #profileModal .dg-profile-burger-item:hover {
            background: var(--c-bg-light);
        }

    /* Блок Stories: круги уменьшены, горизонтальный скролл */
    #profileModal .dg-profile-stories-row {
        --dg-profile-stories-surface-rgb: 255, 255, 255;
        --dg-profile-stories-add-mask-stop: 72px;
        --dg-profile-stories-add-mask-fade: 112px;
        display: block;
        flex-shrink: 0;
        position: relative;
        isolation: isolate;
        background: transparent;
        border-bottom: 1px solid #E1E8ED;
        padding: 8px 0 10px;
        margin-top: 14px;
    }

    #profileModal .dg-profile-stories {
        display: flex;
        align-items: flex-start;
        gap: 0;
        padding: 8px 8px 10px; /* min-height — чтобы 56px-кружки и рамка не клипались под блоком действий */
        min-height: 64px;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        #profileModal .dg-profile-stories::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

    #profileModal .dg-profile-story {
        flex-shrink: 0;
        width: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin: 0 5px;
    }

        #profileModal .dg-profile-story::before {
            content: "";
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid #E1E8ED;
            background: #f0f2f5;
            box-sizing: border-box;
        }

    #profileModal .dg-profile-story-add {
        position: absolute;
        top: 16px;
        left: 13px;
        z-index: 30;
        background: transparent;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
        margin: 0;
        pointer-events: auto;
    }

    #profileModal .dg-profile-story-add::before {
        border: 2px dashed #a855f7;
        background: transparent;
    }

    #profileModal .dg-profile-story-icon {
        position: absolute;
        top: 28px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        color: #657786;
    }

    #profileModal .dg-profile-story-add::before {
        display: block;
    }

    #profileModal .dg-profile-story-label,
    #profileModal .dg-profile-story .dg-profile-highlight-label {
        display: none;
    }

    #profileModal .dg-profile-story-add .dg-profile-story-label {
        display: block;
    }

    /* Круги сторис (после кнопки «Добавить») — 56px, цветная заливка */
    #profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight::before {
        border: 2px solid #E1E8ED;
    }

    #profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight:nth-child(2)::before {
        background: #FFE5B4;
    }

    #profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight:nth-child(3)::before {
        background: #FFE5E5;
    }

    #profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight:nth-child(4)::before {
        background: #E5E5FF;
    }

    #profileModal .dg-profile-stories .dg-profile-story.dg-profile-highlight:nth-child(5)::before {
        background: #F0F2F5;
    }

    /* Круги сторис: превью; зелёная рамка только у непросмотренных (новых) */
    #profileModal .dg-profile-story-item::before {
        background-color: #E1E8ED;
        background-image: var(--story-bg, none);
        background-size: cover;
        background-position: center;
    }

    #profileModal .dg-profile-story-item.dg-profile-story-unviewed::before {
        border: var(--dg-story-unviewed-border-width) solid var(--dg-story-unviewed-border);
    }

    /* Сторис: полноэкранный просмотр */
    /* Текстовые вкладки: под кружками, sticky при прокрутке */
    #profileModal .profile-tabs {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        gap: 6px;
        margin-top: 0;
        margin-bottom: 4px;
        padding: 10px 4px 4px;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        isolation: isolate;
    }

        #profileModal .profile-tabs .tab-btn {
            font-size: 14px;
            line-height: 1.3;
            padding: 8px 4px;
            flex-shrink: 0;
            cursor: pointer;
            border: none;
            background: none;
            color: #657786;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            -webkit-tap-highlight-color: transparent;
        }

        #profileModal .profile-tabs .tab-btn--text-link {
            padding: 6px 8px;
        }

        #profileModal .profile-tabs .tab-btn:hover {
            color: #333;
        }

        #profileModal .profile-tabs .tab-btn.active {
            color: #7C3AED;
            font-weight: 600;
            border-bottom-color: #7C3AED;
        }
}

/* Сторис: полноэкранный просмотр (глобально) */
.dg-story-viewer {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-viewer);
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.dg-story-viewer-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.dg-story-viewer-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

#profileStoryViewerWrap .dg-story-viewer-content {
    overflow: visible;
}

.dg-story-viewer-progress-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    overflow: hidden;
}

.dg-story-viewer-progress-wrap--multi {
    display: flex;
    gap: 3px;
    padding: 0 8px;
    box-sizing: border-box;
}

.dg-story-viewer-progress-bar-wrap {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.2);
    overflow: hidden;
    border-radius: 2px;
}

.dg-story-viewer-media-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .dg-story-viewer-media-wrap .dg-story-viewer-media {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .dg-story-viewer-media-wrap .dg-story-viewer-media--video {
        width: 100%;
        background: #0f172a;
    }

    .dg-story-viewer-media-wrap .dg-story-viewer-video-stub {
        align-self: center;
    }

.dg-story-viewer-progress-bar-wrap .dg-story-viewer-progress-bar {
    height: 100%;
    width: 100%;
}

.dg-story-viewer-progress-bar-wrap .dg-story-viewer-progress-bar--pending {
    background: rgba(255,255,255,0.2);
}

.dg-story-viewer-progress-bar-wrap .dg-story-viewer-progress-bar--done {
    transform: scaleX(1);
    transform-origin: left;
}

.dg-story-viewer-progress-bar--pending {
    transform: scaleX(0);
    transform-origin: left;
    animation: none;
}

.dg-story-viewer-progress-bar {
    height: 100%;
    width: 100%;
    background: #fff;
    animation-name: dg-story-progress-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform-origin: left;
}

@keyframes dg-story-progress-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.dg-story-paused .dg-story-viewer-progress-bar {
    animation-play-state: paused !important;
}

.dg-story-actions-menu {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding: 4px 0;
    min-width: 160px;
}

.dg-story-actions-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .dg-story-actions-btn:hover {
        background: #f1f5f9;
    }

.dg-story-actions-btn--danger {
    color: #dc2626;
}
/* Тёмная тема: меню «Редактировать / Удалить» у сторис — не белая плашка с белым текстом */
body.dg-theme-dark .dg-story-actions-menu {
    background: rgba(15, 15, 18, 0.98) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

body.dg-theme-dark .dg-story-actions-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark .dg-story-actions-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

body.dg-theme-dark .dg-story-actions-btn--danger {
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
}

    body.dg-theme-dark .dg-story-actions-btn--danger:hover {
        background: rgba(248, 113, 113, 0.12) !important;
    }

.dg-story-viewer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

#profileStoryViewerWrap .dg-story-viewer-close {
    position: fixed !important;
    top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
    right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
    z-index: 20 !important;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dg-story-viewer-media {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    vertical-align: middle;
}

.dg-story-viewer-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 13;
    display: flex;
    flex-direction: column;
    padding: 22px 14px max(14px, env(safe-area-inset-bottom, 14px));
    background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
}

.dg-story-viewer-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dg-story-viewer-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.3);
}

.dg-story-viewer-author-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.dg-story-viewer-footer-main {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.dg-story-viewer-views {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.dg-story-viewer-likes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* По умолчанию: яркий белый контур как у просмотров */
.dg-story-viewer-footer .dg-story-viewer-likes.like-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

    .dg-story-viewer-footer .dg-story-viewer-likes.like-btn:active {
        transform: scale(0.88);
        opacity: 0.75;
    }

.dg-story-viewer-footer .dg-story-viewer-views {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    .dg-story-viewer-footer .dg-story-viewer-likes.like-btn .lucide,
    .dg-story-viewer-footer .dg-story-viewer-likes.like-btn svg.lucide,
    .dg-story-viewer-footer .dg-story-viewer-likes.like-btn i[data-lucide="heart"],
    .dg-story-viewer-footer .dg-story-viewer-views .lucide,
    .dg-story-viewer-footer .dg-story-viewer-views svg.lucide,
    .dg-story-viewer-footer .dg-story-viewer-views i[data-lucide="eye"] {
        width: 20px;
        height: 20px;
        stroke: #fff !important;
        fill: transparent !important;
    }

.dg-story-viewer-footer .dg-story-viewer-likes.like-btn .count {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 600;
}
/* Лайк поставлен — как сейчас (фиолетовая заливка) */
.dg-story-viewer-footer .dg-story-viewer-likes.like-btn.liked .lucide,
.dg-story-viewer-footer .dg-story-viewer-likes.like-btn.liked svg.lucide,
.dg-story-viewer-footer .dg-story-viewer-likes.like-btn.liked i[data-lucide="heart"] {
    stroke: var(--c-primary);
    fill: var(--c-primary);
}

.dg-story-viewer-footer .dg-story-viewer-likes .count {
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.dg-story-viewer-video-stub {
    padding: 48px 24px;
    color: #94a3b8;
    font-size: 14px;
    text-align: center;
    background: #1e293b;
    border-radius: 8px;
}

/* ПК: 9:16, картинка/видео contain, пик следующей сторис справа */
@media (min-width: 641px) {
    .dg-story-viewer {
        padding: 0;
    }

    .dg-story-viewer-stage {
        --sv-h: min(96vh, 780px);
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    #profileStoryViewerWrap .dg-story-viewer-content {
        height: var(--sv-h);
        width: calc(var(--sv-h) * 9 / 16);
        max-width: none;
        max-height: none;
        flex-shrink: 0;
        position: relative;
        transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    }

        #profileStoryViewerWrap .dg-story-viewer-content.dg-sv-exit-left {
            transform: translateX(-36px) scale(0.96);
            opacity: 0;
            pointer-events: none;
        }

        #profileStoryViewerWrap .dg-story-viewer-content.dg-sv-exit-right {
            transform: translateX(36px) scale(0.96);
            opacity: 0;
            pointer-events: none;
        }

        #profileStoryViewerWrap .dg-story-viewer-content.dg-sv-enter-right {
            transform: translateX(36px) scale(0.96);
            opacity: 0;
            transition: none;
            pointer-events: none;
        }

        #profileStoryViewerWrap .dg-story-viewer-content.dg-sv-enter-left {
            transform: translateX(-36px) scale(0.96);
            opacity: 0;
            transition: none;
            pointer-events: none;
        }

    #profileStoryViewerWrap .dg-story-viewer-media-wrap {
        position: absolute;
        inset: 0;
        flex: none;
        z-index: 0;
    }

        #profileStoryViewerWrap .dg-story-viewer-media-wrap .dg-story-viewer-media {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        #profileStoryViewerWrap .dg-story-viewer-media-wrap .dg-story-viewer-media--video {
            height: 100%;
            max-height: 100%;
        }

    #profileStoryViewerWrap .dg-story-viewer-progress-wrap--multi {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        z-index: 10;
        height: 3px;
        background: none;
        padding: 0 10px;
    }

    #profileStoryViewerWrap .dg-story-viewer-close {
        top: 22px;
        z-index: 11;
    }

    #profileStoryViewerWrap .dg-story-viewer-nav--prev {
        left: -72px;
    }

    #profileStoryViewerWrap .dg-story-viewer-nav--next {
        right: -72px;
    }

    #profileStoryViewerWrap .dg-story-viewer-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        padding: 24px 16px 14px;
        background: linear-gradient(transparent, rgba(0,0,0,0.62));
        z-index: 20;
        border-radius: 0 0 18px 18px;
    }

    #profileStoryViewerWrap .dg-story-viewer-footer-main {
        height: auto;
        display: flex;
        align-items: center;
        color: #fff;
    }
    /* На ПК скрываем in-header кнопку закрытия (есть fixed close button) */
    #profileStoryViewerWrap .dg-story-viewer-close-btn {
        display: none !important;
    }
    /* Peek: скрыт */
    .dg-story-viewer-next-peek {
        display: none !important;
    }
}


/* ===== Task 4.2: Telegram-like viewer (мобайл) ===== */
.dg-story-viewer-author {
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    min-width: 0;
    pointer-events: auto;
}

.dg-story-viewer-header {
    position: absolute;
    top: 18px;
    left: 14px;
    right: 14px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.dg-story-viewer-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    flex: 0 0 auto;
}

.dg-story-viewer-top-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.28);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

    .dg-story-viewer-top-btn svg,
    .dg-story-viewer-top-btn .lucide {
        width: 22px;
        height: 22px;
        stroke: currentColor;
    }

@media (max-width: 640px) {
    .dg-story-viewer {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        background: #000;
    }

    .dg-story-viewer-backdrop {
        display: none;
    }

    #profileStoryViewerWrap .dg-story-viewer-stage {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: stretch;
    }

    .dg-story-viewer-next-peek {
        display: none !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        overflow: hidden;
        flex: 1;
        position: relative;
    }

    #profileStoryViewerWrap .dg-story-viewer-media-wrap {
        position: absolute;
        inset: 0;
        flex: none;
        min-height: 0;
        z-index: 0;
    }

    #profileStoryViewerWrap .dg-story-viewer-progress-wrap--multi {
        position: absolute;
        top: max(10px, env(safe-area-inset-top, 10px));
        left: 0;
        right: 0;
        z-index: 10;
        padding: 0 10px;
        height: 3px;
        background: none;
    }

    #profileStoryViewerWrap .dg-story-viewer-header {
        top: max(18px, calc(env(safe-area-inset-top, 0px) + 18px));
    }

    #profileStoryViewerWrap .dg-story-viewer-close {
        top: max(22px, calc(env(safe-area-inset-top, 0px) + 22px));
        z-index: 11;
    }

    #profileStoryViewerWrap .dg-story-viewer-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
        z-index: 13;
        padding: 22px 12px max(14px, env(safe-area-inset-bottom, 14px));
    }

    #profileStoryViewerWrap .dg-story-viewer-footer-main {
        height: auto;
    }

    .dg-story-viewer-nav {
        display: none !important;
    }
}

/* ===== Nav arrows ===== */
.dg-story-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    width: 52px;
    height: 96px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.24);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .18s ease, background .18s ease;
}

.dg-story-viewer-nav--prev {
    left: 10px;
}

.dg-story-viewer-nav--next {
    right: 10px;
}

.dg-story-viewer-nav svg,
.dg-story-viewer-nav .lucide {
    width: 30px;
    height: 30px;
    stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    /* Стрелки всегда перехватывают клики на ПК (не проваливаться на backdrop) */
    #profileStoryViewerWrap .dg-story-viewer-nav {
        pointer-events: auto;
    }

    .dg-story-viewer-nav:hover {
        opacity: 1;
        background: rgba(0,0,0,0.38);
    }
}

/* ===== Action buttons in footer ===== */
.dg-story-viewer-action {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}

    .dg-story-viewer-action svg,
    .dg-story-viewer-action .lucide,
    .dg-story-viewer-views svg,
    .dg-story-viewer-views .lucide {
        width: 24px;
        height: 24px;
        stroke: currentColor;
    }

.dg-story-viewer-likes .count {
    font-size: 15px;
    font-weight: 700;
}

.dg-story-viewer-likes.liked svg,
.dg-story-viewer-likes.liked .lucide {
    fill: var(--c-primary);
    stroke: var(--c-primary);
}

/* ===== Reply form ===== */
.dg-story-reply-form {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .dg-story-reply-form[hidden] {
        display: none !important;
    }

.dg-story-reply-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 0;
    outline: none;
    border-radius: 999px;
    padding: 0 14px;
    background: rgba(255,255,255,0.92);
    color: #111;
}

.dg-story-reply-input[readonly],
.dg-story-reply-input[aria-disabled="true"] {
    opacity: 0.78;
}

.dg-story-reply-send {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.dg-story-reply-send:disabled {
    cursor: default;
    opacity: 0.86;
}

.dg-story-reply-form--sending .dg-story-reply-send svg,
.dg-story-reply-form--sending .dg-story-reply-send .lucide {
    opacity: 0;
}

.dg-story-reply-form--sending .dg-story-reply-send::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.42);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin .72s linear infinite;
}

/* ===== Story menu (3 dots) ===== */
.dg-story-menu {
    position: absolute;
    top: 62px;
    right: 14px;
    bottom: auto;
    min-width: 180px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(28,28,31,0.92);
    color: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 30;
}

    .dg-story-menu[hidden] {
        display: none !important;
    }

.dg-story-menu-item {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: #fff;
    border-radius: 12px;
    padding: 8px 10px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    display: block;
}

    .dg-story-menu-item:hover {
        background: rgba(255,255,255,0.10);
    }

.dg-story-menu-item--danger {
    color: #ff6b6b;
}

/* ===== Keyboard offset variable ===== */
:root {
    --dg-story-keyboard-offset: 0px;
}

/* ===== Message / share / likes icon size unification ===== */
#profileStoryViewerWrap .dg-story-viewer-message-btn,
#profileStoryViewerWrap .dg-story-viewer-share-btn,
#profileStoryViewerWrap .dg-story-viewer-likes {
    width: 38px;
    height: 38px;
}

    #profileStoryViewerWrap .dg-story-viewer-message-btn svg,
    #profileStoryViewerWrap .dg-story-viewer-message-btn .lucide,
    #profileStoryViewerWrap .dg-story-viewer-share-btn svg,
    #profileStoryViewerWrap .dg-story-viewer-share-btn .lucide,
    #profileStoryViewerWrap .dg-story-viewer-likes svg,
    #profileStoryViewerWrap .dg-story-viewer-likes .lucide {
        width: 24px;
        height: 24px;
    }
/* Share button base style */
.dg-story-viewer-share-btn {
    transition: background 0.2s ease;
}

    .dg-story-viewer-share-btn:hover {
        background: rgba(255,255,255,0.15) !important;
    }

#profileStoryViewerWrap .dg-story-share-actions {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    color: #fff;
    background: rgba(15, 18, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#profileStoryViewerWrap .dg-story-share-actions[hidden] {
    display: none !important;
}

#profileStoryViewerWrap .dg-story-share-action {
    min-width: 76px;
    min-height: 54px;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    color: inherit;
    background: rgba(255, 255, 255, 0.10);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

#profileStoryViewerWrap .dg-story-share-action svg {
    width: 21px;
    height: 21px;
}

/* ===== Mobile story viewer overrides ===== */
@media (max-width: 640px) {
    /* Показать in-header кнопку закрытия */
    #profileStoryViewerWrap .dg-story-viewer-close-btn {
        display: inline-flex !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-close-btn,
    #profileStoryViewerWrap .dg-story-viewer-top-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 999px;
    }

        #profileStoryViewerWrap .dg-story-viewer-top-btn svg,
        #profileStoryViewerWrap .dg-story-viewer-top-btn .lucide {
            width: 20px;
            height: 20px;
        }

    #profileStoryViewerWrap .dg-story-viewer-top-actions {
        gap: 6px;
    }
    /* Footer поднимается над клавиатурой */
    #profileStoryViewerWrap .dg-story-viewer-footer {
        bottom: var(--dg-story-keyboard-offset, 0px);
        transition: bottom .18s ease;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
    }

    @supports (-webkit-touch-callout: none) {
        #profileStoryViewerWrap .dg-story-viewer-footer {
            transition: none;
        }
    }

    .dg-story-reply-form {
        border-radius: 18px;
        margin-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    .dg-story-viewer-footer-main {
        gap: 10px;
    }

    .dg-story-viewer-action {
        width: 36px;
        height: 36px;
    }

    #profileStoryViewerWrap .dg-story-viewer-message-btn,
    #profileStoryViewerWrap .dg-story-viewer-share-btn,
    #profileStoryViewerWrap .dg-story-viewer-likes {
        width: 36px;
        height: 36px;
    }

        #profileStoryViewerWrap .dg-story-viewer-message-btn svg,
        #profileStoryViewerWrap .dg-story-viewer-message-btn .lucide,
        #profileStoryViewerWrap .dg-story-viewer-share-btn svg,
        #profileStoryViewerWrap .dg-story-viewer-share-btn .lucide,
        #profileStoryViewerWrap .dg-story-viewer-likes svg,
        #profileStoryViewerWrap .dg-story-viewer-likes .lucide {
            width: 23px;
            height: 23px;
        }
}

/* ===== Паттерн-фон для не-9:16 сторис (letterbox-зоны) ===== */
/* Overlay поверх паттерна (~85-90% opacity) — итоговая видимость ~10-15%,
   аналогично левой панели чата (::before opacity:0.10/0.15).            */
.dg-story-viewer-content--pattern-bg .dg-story-viewer-media-wrap {
    background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url(/images/white_bg.png);
    background-repeat: repeat;
    background-size: auto, 680px auto;
}

body.dg-theme-dark .dg-story-viewer-content--pattern-bg .dg-story-viewer-media-wrap {
    background-image: linear-gradient(rgba(15,15,18,0.85), rgba(15,15,18,0.85)), url(/images/dark_bg.png);
}

.dg-story-viewer-content--fullscreen-media .dg-story-viewer-media-wrap .dg-story-viewer-media {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* =========================================================
   DG FIX: Story viewer chrome layer for iOS/PWA
   Верхний UI сторис вынесен из content/media слоя.
   ========================================================= */

#profileStoryViewerWrap.dg-story-viewer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
    isolation: isolate;
    z-index: var(--dg-z-viewer);
    background: #000;
}

#profileStoryViewerWrap .dg-story-viewer-stage,
#profileStoryViewerWrap .dg-story-viewer-content,
#profileStoryViewerWrap .dg-story-viewer-media-wrap,
.dg-hero-video-story-viewer,
.dg-hero-video-story-viewer .dg-story-viewer-content,
.dg-hero-video-story-viewer .dg-story-viewer-media-wrap {
    overscroll-behavior: none !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
}

@supports (height: 100lvh) {
    #profileStoryViewerWrap.dg-story-viewer {
        min-height: 100lvh !important;
    }
}

#profileStoryViewerWrap.dg-story-viewer.dg-story-keyboard-open {
    height: var(--dg-story-layout-vh, 100dvh) !important;
    min-height: var(--dg-story-layout-vh, 100dvh) !important;
    max-height: var(--dg-story-layout-vh, 100dvh) !important;
}

@supports (-webkit-touch-callout: none) {
    #profileStoryViewerWrap.dg-story-viewer {
        min-height: -webkit-fill-available !important;
    }
}

#profileStoryViewerWrap.dg-story-viewer::before {
    content: "";
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    z-index: 0;
    pointer-events: none;
    background: #000;
}

#profileStoryViewerWrap {
    --dg-story-layout-vh: 100vh;
    --dg-story-top-safe: env(safe-area-inset-top, 0px);
    --dg-story-frame-h: min(78vh, 960px, calc(100vh - 156px));
    --dg-story-frame-h: min(78dvh, 960px, calc(100dvh - 156px));
    --dg-story-frame-w: calc(var(--dg-story-frame-h) * 9 / 16);
    --dg-story-footer-bottom: max(34px, env(safe-area-inset-bottom, 0px));
}

html.dg-standalone-pwa #profileStoryViewerWrap,
body.ios-device #profileStoryViewerWrap {
    --dg-story-top-safe: max(env(safe-area-inset-top, 0px), 24px);
}

html.dg-standalone-pwa body.ios-device #profileStoryViewerWrap .dg-story-viewer-footer {
    padding-bottom: 14px;
}

#profileStoryViewerWrap .dg-story-viewer-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

#profileStoryViewerWrap .dg-story-viewer-content {
    position: relative;
    z-index: 1;
    isolation: isolate;
    background: #000;
}

    #profileStoryViewerWrap .dg-story-viewer-content > .dg-story-viewer-header {
        display: none !important;
    }

#profileStoryViewerWrap .dg-story-viewer-media-wrap {
    z-index: 1;
}

#profileStoryViewerWrap video.dg-story-viewer-media--video,
#profileStoryViewerWrap .dg-story-viewer-content--video video.dg-story-viewer-media--video,
#profileStoryViewerWrap .dg-story-viewer-content--fullscreen-media video.dg-story-viewer-media--video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#profileStoryViewerWrap .dg-story-viewer-progress-wrap--multi {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    z-index: 80 !important;
    height: 3px;
    padding: 0 10px;
    background: none;
}

#profileStoryViewerWrap .dg-story-viewer-footer {
    z-index: 90 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#profileStoryViewerWrap .dg-story-menu {
    z-index: 120 !important;
}

/* Новый отдельный слой верхнего UI */
#profileStoryViewerWrap .dg-story-viewer-chrome {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-header {
        position: absolute;
        top: calc(var(--dg-story-top-safe) + 20px);
        left: max(10px, calc(env(safe-area-inset-left, 0px) + 10px));
        right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px));
        z-index: 101;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        pointer-events: none;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-author {
        min-width: 0;
        max-width: calc(100% - 128px);
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex: 1 1 auto;
        border: 0;
        background: transparent;
        color: #fff;
        -webkit-text-fill-color: #fff;
        padding: 0;
        margin: 0;
        pointer-events: auto;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        text-shadow: 0 1px 3px rgba(0,0,0,0.75);
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-author-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        border: 1px solid rgba(255,255,255,0.75);
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-author-name {
        min-width: 0;
        max-width: 100%;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-actions {
        margin-left: auto;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        pointer-events: auto;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border: 0;
        border-radius: 999px;
        background: rgba(0,0,0,0.42);
        color: #fff;
        -webkit-text-fill-color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

        #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn svg,
        #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn .lucide {
            width: 18px;
            height: 18px;
            stroke: currentColor !important;
            fill: none !important;
        }

@media (max-width: 640px) {
    #profileStoryViewerWrap .dg-story-viewer-close {
        display: none !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-close-btn {
        display: inline-flex !important;
    }
}

@media (max-width: 640px) {
    #profileStoryViewerWrap {
        --dg-story-mobile-top: max(48px, calc(var(--dg-story-top-safe) + 38px));
        --dg-story-frame-h: min(90vh, calc((100vw - 12px) * 16 / 9), calc(100vh - 142px - var(--dg-story-top-safe)));
        --dg-story-frame-h: min(90dvh, calc((100vw - 12px) * 16 / 9), calc(100dvh - 142px - var(--dg-story-top-safe)));
        --dg-story-frame-w: calc(var(--dg-story-frame-h) * 9 / 16);
        --dg-story-footer-bottom: max(30px, env(safe-area-inset-bottom, 0px));
    }

    #profileStoryViewerWrap.dg-story-keyboard-open {
        --dg-story-frame-h: min(calc((100vw - 12px) * 16 / 9), calc(var(--dg-story-layout-vh, 100vh) - 142px - var(--dg-story-top-safe)));
    }

    #profileStoryViewerWrap .dg-story-viewer-stage {
        align-items: flex-start !important;
        justify-content: center !important;
        box-sizing: border-box;
        padding: var(--dg-story-mobile-top) 6px clamp(82px, 14vh, 116px);
    }

    #profileStoryViewerWrap .dg-story-viewer-content {
        width: var(--dg-story-frame-w) !important;
        height: var(--dg-story-frame-h) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 128px) !important;
        border-radius: 12px;
        overflow: visible;
        flex: 0 0 auto;
    }

    #profileStoryViewerWrap.dg-story-keyboard-open .dg-story-viewer-content {
        max-height: calc(var(--dg-story-layout-vh, 100vh) - 128px) !important;
    }

    #profileStoryViewerWrap.dg-story-keyboard-open .dg-story-viewer-stage {
        transform: translateY(calc(-1 * var(--dg-story-keyboard-offset, 0px))) translateZ(0) !important;
        -webkit-transform: translateY(calc(-1 * var(--dg-story-keyboard-offset, 0px))) translateZ(0) !important;
        transition: transform .18s ease;
    }

    #profileStoryViewerWrap .dg-story-viewer-media-wrap {
        border-radius: inherit;
        overflow: hidden;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome {
        position: fixed !important;
        top: var(--dg-story-mobile-top) !important;
        left: 50% !important;
        right: auto !important;
        width: var(--dg-story-frame-w) !important;
        max-width: calc(100vw - 12px) !important;
        height: var(--dg-story-frame-h) !important;
        transform: translateX(-50%) translateZ(0) !important;
        -webkit-transform: translateX(-50%) translateZ(0) !important;
    }

    #profileStoryViewerWrap.dg-story-keyboard-open .dg-story-viewer-chrome {
        transform: translateX(-50%) translateY(calc(-1 * var(--dg-story-keyboard-offset, 0px))) translateZ(0) !important;
        -webkit-transform: translateX(-50%) translateY(calc(-1 * var(--dg-story-keyboard-offset, 0px))) translateZ(0) !important;
        transition: transform .18s ease;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-header {
        top: 18px;
        left: 10px;
        right: 10px;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn,
    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-close-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        background: rgba(0,0,0,0.32) !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn svg,
    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-top-btn .lucide,
    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-close-btn svg,
    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-close-btn .lucide {
        width: 16px !important;
        height: 16px !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-footer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(-1 * clamp(28px, 4.8vh, 44px)) !important;
        width: auto !important;
        max-width: none !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
    }
}

@supports (-webkit-touch-callout: none) {
    #profileStoryViewerWrap .dg-story-viewer-chrome,
    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-header,
    #profileStoryViewerWrap .dg-story-viewer-footer,
    #profileStoryViewerWrap .dg-story-viewer-progress-wrap--multi,
    #profileStoryViewerWrap .dg-story-menu {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* DG FIX: desktop story viewer centering.
   ПК: карточка сторис по центру экрана, chrome-слой привязан к карточке. */
@media (min-width: 641px) {
    #profileStoryViewerWrap {
        --dg-story-desktop-h: min(78vh, 960px, calc(100vh - 156px), calc((100vw - 112px) * 16 / 9));
        --dg-story-frame-h: var(--dg-story-desktop-h);
        --dg-story-frame-w: calc(var(--dg-story-desktop-h) * 9 / 16);
    }

    #profileStoryViewerWrap .dg-story-viewer-stage {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-content {
        height: var(--dg-story-desktop-h) !important;
        width: auto !important;
        aspect-ratio: 9 / 16;
        max-width: calc(100vw - 112px) !important;
        max-height: 96vh !important;
        border-radius: 16px;
        overflow: visible;
        flex: 0 0 auto;
    }

    #profileStoryViewerWrap .dg-story-viewer-media-wrap {
        border-radius: 16px;
        overflow: hidden;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: var(--dg-story-desktop-h) !important;
        aspect-ratio: 9 / 16;
        transform: translate(-50%, -50%) translateZ(0) !important;
        -webkit-transform: translate(-50%, -50%) translateZ(0) !important;
        pointer-events: none;
        z-index: 100;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-header {
        left: 10px;
        right: 10px;
        top: 18px;
    }

    /* На ПК закрытие только отдельной fixed-кнопкой в углу экрана */
    #profileStoryViewerWrap .dg-story-viewer-close {
        display: inline-flex !important;
        position: fixed !important;
        top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
        right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
        z-index: 20 !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-chrome .dg-story-viewer-close-btn {
        display: none !important;
    }

    #profileStoryViewerWrap .dg-story-viewer-footer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(-1 * clamp(30px, 4.2vh, 42px)) !important;
        width: auto !important;
        max-width: none !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
    }
}

.dg-story-upload-slot-preview--video {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 22px;
}

    .dg-story-upload-slot-preview--video::before {
        content: "▶";
        margin-left: 3px;
    }

/* Модалка сторис */
#profileStoryUploadModal .modal-content.dg-story-upload-modal {
    width: calc(100% - 24px);
    max-width: 430px;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    #profileStoryUploadModal .modal-content.dg-story-upload-modal {
        max-width: 760px;
    }
}

.dg-story-upload-hint {
    margin-bottom: 8px;
    line-height: 1.45;
    font-size: 14px;
}

    .dg-story-upload-hint strong {
        font-weight: 600;
    }

.dg-story-video-premium-cta {
    cursor: pointer;
}

#profileStoryUploadModal .upload-area.dg-story-upload-area--has-media {
    border-color: var(--c-primary, #8b5cf6);
}

#profileStoryUploadModal .image-preview .dg-story-upload-slot {
    min-height: 0;
}

.dg-story-edit-slots,
.dg-story-upload-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.dg-story-edit-body-inner {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dg-story-edit-hint {
    max-width: 380px;
    margin-bottom: 12px;
}

.dg-story-edit-save-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 16px;
}

#profileStoryEditModal #profileStoryEditSaveBtn {
    transform: translateX(clamp(0px, 6vw, 28px));
}

.dg-story-edit-slot,
.dg-story-upload-slot {
    position: relative;
    width: 80px;
    flex-shrink: 0;
}

.dg-story-edit-slot-preview,
.dg-story-upload-slot-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #f1f5f9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 24px;
}

.dg-story-edit-slot-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.dg-story-edit-slot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    text-align: center;
}

.dg-story-edit-slot-btn--delete {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
}
/* Edit modal: constrain width */
.dg-story-edit-modal-content {
    max-width: 480px !important;
}
/* Edit modal: dark theme */
body.dg-theme-dark #profileStoryEditModal .modal-content {
    background: #1e1e22;
    color: #f0f0f0;
}

body.dg-theme-dark #profileStoryEditModal .modal-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

body.dg-theme-dark #profileStoryEditModal .text-secondary {
    color: #a0a0b0;
}

body.dg-theme-dark #profileStoryEditModal .dg-story-edit-slot-preview {
    background-color: rgba(255,255,255,0.08);
    color: #a0a0b0;
}

body.dg-theme-dark #profileStoryEditModal .dg-story-edit-slot-btn {
    background: rgba(229,231,235,0.12) !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    border-color: rgba(229,231,235,0.24) !important;
}

body.dg-theme-dark #profileStoryEditModal .dg-story-edit-slot-btn--delete {
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
    border-color: rgba(248,113,113,0.35) !important;
}

    body.dg-theme-dark #profileStoryEditModal .dg-story-edit-slot-btn:hover {
        background: rgba(229,231,235,0.2) !important;
    }

.dg-story-upload-slot-name {
    display: block;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}

.dg-story-upload-slot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

    .dg-story-upload-slot-remove:hover {
        background: #dc2626;
    }

/* Область перетаскивания файла в модалке «Добавить сторис» */
.dg-story-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px;
    margin-bottom: 12px;
    border: 2px dashed var(--c-border, #e5e7eb);
    border-radius: 12px;
    background: #fafafa;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
    transition: border-color .2s, background .2s;
    cursor: default;
}

    .dg-story-upload-dropzone.dg-story-upload-dropzone--over,
    .dg-story-upload-dropzone.dg-story-upload-dropzone--has-file {
        border-color: var(--c-primary, #8B5CF6);
        background: #f5f3ff;
        color: var(--c-primary, #8B5CF6);
    }

.dg-story-upload-dropzone-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Кнопки «Выбрать файл» и «Отправить» в одну линию */
.dg-story-upload-actions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    .dg-story-upload-actions #profileStorySendBtn {
        margin-left: auto;
    }

    .dg-story-upload-actions .dg-story-upload-btn,
    .dg-story-upload-actions .btn {
        min-height: 44px;
        height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
/* Кнопка выбора файла в модалке «Добавить сторис» */
.dg-story-upload-file-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dg-story-upload-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.dg-story-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--c-border, #e5e7eb);
    background: #fff;
    color: var(--c-primary, #8B5CF6);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

    .dg-story-upload-btn:hover {
        background: #f5f3ff;
        border-color: var(--c-primary, #8B5CF6);
    }

    .dg-story-upload-btn i[data-lucide],
    .dg-story-upload-btn .lucide {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
    }

.dg-story-upload-filename {
    display: none;
}

.dg-upload-background-hint {
    margin: 8px 0 0;
    color: var(--c-text-muted, #6b7280);
    font-size: 13px;
    line-height: 1.35;
}

.dg-upload-tray {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: var(--dg-z-notice);
    box-sizing: border-box;
    contain: layout style;
    isolation: isolate;
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    pointer-events: none;
}

.dg-upload-tray-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dg-upload-tray-item {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    color: var(--c-text, #111827);
    pointer-events: auto;
    backdrop-filter: none;
}

.dg-upload-tray-item--clickable {
    cursor: pointer;
}

.dg-upload-tray-item--clickable:active {
    transform: translateY(1px);
}

.dg-upload-tray-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--c-primary-rgb, 139, 92, 246), 0.12);
    color: var(--c-primary, #8b5cf6);
}

.dg-upload-tray-icon svg,
.dg-upload-tray-icon .lucide {
    width: 20px;
    height: 20px;
}

.dg-upload-tray-main {
    min-width: 0;
}

.dg-upload-tray-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-upload-tray-status {
    margin-top: 2px;
    color: var(--c-text-muted, #6b7280);
    font-size: 12px;
    line-height: 1.35;
}

.dg-upload-tray-bar {
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.10);
}

.dg-upload-tray-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--c-primary, #8b5cf6);
    transition: width 0.18s ease;
}

.dg-upload-tray-item--no-progress .dg-upload-tray-bar {
    display: none;
}

.dg-upload-tray-item--done .dg-upload-tray-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.dg-upload-tray-item--done .dg-upload-tray-bar span {
    background: #16a34a;
}

.dg-upload-tray-item--error .dg-upload-tray-icon {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.dg-upload-tray-item--error .dg-upload-tray-bar span {
    background: #dc2626;
}

body.dg-theme-dark .dg-upload-background-hint {
    color: var(--c-text-secondary, #a1a1aa);
}

body.dg-theme-dark .dg-upload-tray-item {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(24, 24, 27, 0.96);
    color: var(--c-text, #f4f4f5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

body.dg-theme-dark .dg-upload-tray-status {
    color: var(--c-text-secondary, #a1a1aa);
}

body.dg-theme-dark .dg-upload-tray-bar {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
    .dg-upload-tray {
        right: max(12px, env(safe-area-inset-right, 0px));
        left: auto;
        bottom: calc(12px + var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom, 0px))));
        transform: none;
        width: auto;
        max-height: calc(100dvh - var(--dg-mobile-bottom-nav-height, 62px) - 24px);
    }

    .dg-upload-tray-list {
        align-items: flex-end;
        gap: 6px;
    }

    .dg-upload-tray-item {
        width: 64px;
        min-height: 68px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        justify-content: center;
        padding: 7px 6px 8px;
        border: 2px solid rgba(255, 255, 255, 0.88);
        border-radius: 20px;
        background: rgba(24, 24, 27, 0.86);
        color: #fff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
        backdrop-filter: none;
    }

    body:not(.dg-theme-dark) .dg-upload-tray-item {
        box-shadow: none;
    }

    .dg-upload-tray-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb, 139, 92, 246), 0.26);
        color: var(--c-primary, #8b5cf6);
        box-shadow: none;
    }

    .dg-upload-tray-icon svg,
    .dg-upload-tray-icon .lucide {
        width: 18px;
        height: 18px;
    }

    .dg-upload-tray-title {
        display: none;
    }

    .dg-upload-tray-status {
        margin-top: 0;
        max-width: 58px;
        color: #fff;
        font-size: 0;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        text-shadow: none;
        white-space: nowrap;
    }

    .dg-upload-tray-status::before {
        content: attr(data-mobile-text);
        font-size: 13px;
    }

    .dg-upload-tray-item[data-upload-kind^="post"] .dg-upload-tray-status,
    .dg-upload-tray-item[data-upload-kind="article"] .dg-upload-tray-status,
    .dg-upload-tray-item[data-upload-kind="short"] .dg-upload-tray-status,
    .dg-upload-tray-item[data-upload-kind^="story"] .dg-upload-tray-status {
        display: none;
    }

    .dg-upload-tray-bar {
        display: none;
    }

    .dg-upload-tray-item--done,
    .dg-upload-tray-item--error {
        width: 64px;
        min-width: 0;
    }

    body.dg-mobile-composer-keyboard-open .dg-upload-tray,
    body:has(.dg-comments-sheet--open) .dg-upload-tray,
    body:has(.dg-hero-shorts-comments.is-open) .dg-upload-tray {
        display: none !important;
    }
}

#profileModal .modal-body.profile-body {
    padding: 5px calc(12px + var(--safe-right, 0px)) 0 calc(12px + var(--safe-left, 0px)) !important;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    /* После глобального padding выше: иначе sticky-табы визуально ниже шапки «Профиль» */
    #profileModal .modal-body.profile-body {
        padding-top: 0 !important;
    }
}

@media (max-width: 640px) {
    #profileModal .modal-body.profile-body {
        padding-top: 0 !important;
    }

    #profileModal .profile-tabs {
        gap: 2px;
        overflow-x: auto;
        padding: 0 2px 4px;
        margin-top: 0 !important;
    }

        #profileModal .profile-tabs .tab-btn {
            flex: 0 0 auto;
            padding: 8px 6px;
            font-size: 13px;
            line-height: 1.2;
            white-space: nowrap;
            text-align: center;
        }

    #profileModal #profileContent.profile-content {
        padding-bottom: max(16px, var(--safe-bottom, 0px));
    }
}

@media (max-width: 640px) {
    body.ios-device #profileModal .dg-profile-stats-block,
    body.ios-device #profileModal .dg-profile-achievements-block,
    body.ios-device #profileModal .dg-profile-settings-block {
        padding-bottom: max(16px, var(--safe-bottom, 0px)) !important;
    }
}

/* ===== Мой блог (модалка профиля + полноэкранный профиль #profilePageContent) ===== */
#profileModal .dg-profile-blog-actions,
#profilePageContent .dg-profile-blog-actions {
    margin-bottom: 16px;
}

#profileModal .dg-profile-blog-list,
#profilePageContent .dg-profile-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 640px) {
    #profileModal .dg-profile-blog-list,
    #profilePageContent .dg-profile-blog-list {
        max-width: min(360px, calc(100vw - 24px));
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 641px) {
    #profileModal .dg-profile-blog-actions,
    #profilePageContent .dg-profile-blog-actions,
    #profileModal .dg-profile-blog-list,
    #profilePageContent .dg-profile-blog-list {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

#profileModal .dg-profile-blog-item,
#profilePageContent .dg-profile-blog-item {
    margin: 0;
}

#profileModal .dg-profile-blog-card,
#profilePageContent .dg-profile-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    #profileModal .dg-profile-blog-card:hover,
    #profilePageContent .dg-profile-blog-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        border-color: #d1d5db;
    }

#profileModal .dg-profile-blog-card-media,
#profilePageContent .dg-profile-blog-card-media {
    width: 100%;
    min-height: 0;
    background: var(--c-bg-light);
    overflow: hidden;
    aspect-ratio: 4/3;
}

    #profileModal .dg-profile-blog-card-media img,
    #profilePageContent .dg-profile-blog-card-media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top;
        vertical-align: top;
    }

#profileModal .dg-profile-blog-card-body,
#profilePageContent .dg-profile-blog-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#profileModal .dg-profile-blog-card-title,
#profilePageContent .dg-profile-blog-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--c-text, #2C2C2C);
    line-height: 1.3;
}

#profileModal .dg-profile-blog-status,
#profilePageContent .dg-profile-blog-status {
    font-size: 12px;
    color: var(--c-warning, #F59E0B);
}

#profileModal .dg-profile-blog-status--pending,
#profilePageContent .dg-profile-blog-status--pending {
    color: #b45309;
}

#profileModal .dg-profile-blog-status--suggest,
#profilePageContent .dg-profile-blog-status--suggest {
    color: var(--c-primary, #8B5CF6);
}

.dg-suggest-pending-badge {
    font-size: 13px;
    color: var(--c-primary, #8B5CF6);
    background: rgba(var(--c-primary-rgb), 0.1);
    border: 1px solid rgba(var(--c-primary-rgb), 0.3);
    border-radius: 8px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.dg-theme-dark #dgArticleSuggestBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(167, 139, 250, 0.42) !important;
    border-radius: 999px !important;
    color: var(--c-primary, #c4b5fd) !important;
    -webkit-text-fill-color: var(--c-primary, #c4b5fd) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark #dgArticleSuggestBtn:hover {
        background: rgba(var(--c-primary-rgb), 0.22) !important;
        border-color: rgba(196, 181, 253, 0.55) !important;
        color: #ede9fe !important;
        -webkit-text-fill-color: #ede9fe !important;
    }

body.dg-theme-dark .dg-suggest-pending-badge {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(167, 139, 250, 0.42) !important;
    border-radius: 999px !important;
    color: var(--c-primary, #c4b5fd) !important;
    -webkit-text-fill-color: var(--c-primary, #c4b5fd) !important;
    padding: 5px 12px;
    min-height: 34px;
}

    body.dg-theme-dark .dg-suggest-pending-badge svg,
    body.dg-theme-dark .dg-suggest-pending-badge .lucide {
        stroke: currentColor !important;
    }

.dg-suggest-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--c-text);
}

.dg-suggest-modal-desc {
    font-size: 14px;
    color: var(--c-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.dg-info-entry-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--c-primary-rgb), 0.12);
    color: var(--c-primary, #8B5CF6);
    border: 1px solid rgba(var(--c-primary-rgb), 0.28);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s;
}

    .dg-info-entry-badge:hover {
        background: rgba(var(--c-primary-rgb), 0.22);
    }

#profileModal .dg-profile-blog-card--btn,
#profilePageContent .dg-profile-blog-card--btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border: 1px solid var(--c-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
}

    #profileModal .dg-profile-blog-card--btn:hover,
    #profilePageContent .dg-profile-blog-card--btn:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        border-color: #d1d5db;
    }

/* Просмотр статьи внутри модалки профиля: снизу до 30px для просмотра последнего коммента */
#profileModal .dg-profile-article-view {
    padding: 0 2px 30px;
}

#profileModal .dg-profile-article-back {
    margin-bottom: 16px;
}

#profileModal .dg-profile-article-body {
    margin: 0;
}

#profileModal .dg-profile-article-head,
#profilePageContent .dg-profile-article-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    flex-wrap: wrap;
}

#profileModal .dg-profile-article-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    flex: 1 1 220px;
    min-width: 0;
}

#profileModal .dg-profile-article-badge,
#profilePageContent .dg-profile-article-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

#profileModal .dg-profile-article-badge--pending,
#profilePageContent .dg-profile-article-badge--pending {
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

#profileModal .dg-profile-article-content {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 12px;
    display: flow-root;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    #profileModal .dg-profile-article-content img {
        max-width: 100%;
        height: auto;
    }

    #profileModal .dg-profile-article-content p {
        margin: 0 0 10px;
    }

        #profileModal .dg-profile-article-content p:last-child {
            margin-bottom: 0;
        }

#profileModal .dg-profile-article-comments .dg-profile-comment-item:last-child {
    border-bottom: none !important;
}

/* ===== Favorites packs (profile) ===== */
.fav-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    padding: 6px 0;
}

.fav-pack {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    /* reset native button */
    appearance: none;
    -webkit-appearance: none;
}

    .fav-pack:focus {
        outline: none;
    }

    .fav-pack:focus-visible {
        outline: 2px solid rgba(128, 90, 213, .6);
        outline-offset: 2px;
    }

.fav-pack__mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr; /* ✅ ряды одинаковой высоты */
    gap: 2px;
    background: rgba(0,0,0,.06);
    height: clamp(160px, 18vw, 220px); /* ✅ ограничение: не выше 220px */
    overflow: hidden; /* ✅ ничего не вылезает */
}

    .fav-pack__mosaic img {
        width: 100%;
        height: 100%; /* ✅ заполняем ячейку */
        aspect-ratio: auto; /* ✅ убираем рост через ratio */
        object-fit: cover;
        display: block;
    }


/* 1 превью — одна картинка должна заполнять всю зону превью */
.fav-pack__mosaic--n1 {
    grid-template-columns: 1fr;
}

    .fav-pack__mosaic--n1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }



/* DG SALE: тоже квадрат */
#dollGallery.dg-sale-mode .fav-pack__mosaic--n1 {
    aspect-ratio: 1 / 1;
}

    #dollGallery.dg-sale-mode .fav-pack__mosaic--n1 img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }



/* 2 превью — 2 колонки */
.fav-pack__mosaic--n2 {
    grid-template-columns: 1fr 1fr;
}

/* 3 превью — 1 слева на две строки + 2 справа */
.fav-pack__mosaic--n3 {
    grid-template-columns: 1fr 1fr;
}

    .fav-pack__mosaic--n3 img:nth-child(1) {
        grid-row: span 2;
    }

/* 4 превью — обычная сетка 2x2 (уже по дефолту) */


.fav-pack__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.fav-pack__title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-pack__count {
    font-size: 12px;
    opacity: .7;
}

.fav-pack-view__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fav-pack-view__title {
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .fav-packs-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }

    .fav-pack__mosaic {
        height: 160px; /* или 150px если надо плотнее */
    }
}
/* =========================
   DG SALE: back arrow button
   ========================= */
.dg-sale-back {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: #fff;
    color: #111;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* убираем подсветки/обводки */
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

    .dg-sale-back:hover {
        border-color: var(--c-primary);
        background: #fff;
    }

    .dg-sale-back:active {
        transform: scale(.96);
    }

.dg-sale-back__icon {
    width: 18px;
    height: 18px;
    display: block;
}


/* =========================
   SALE MODE: показываем “папки” как в Избранном
   ========================= */

/* ВАЖНО:
   #dollGallery по умолчанию masonry-grid (grid-auto-rows:8px).
   Для паков это ломает высоту (схлопывает до 8px).
   Поэтому в sale-mode выключаем grid на самом #dollGallery. */
#dollGallery.dg-sale-mode {
    display: block !important;
    grid-auto-rows: auto !important;
    grid-template-columns: none !important;
}

    /* =========================
   DG SALE MODE: в режиме "папок" показываем ТОЛЬКО плитки-превью (dg-sale-thumb),
   а все остальные карточки работ принудительно скрываем.
   Это убирает:
   - "флэш" всех работ на ПК на долю секунды
   - догрузку работ снизу под папками на телефоне после скролла
   ========================= */
    #dollGallery.dg-sale-mode .doll-card {
        display: none !important;
    }

        /* показываем только те карточки, которые JS пометил как плитки продажи */
        #dollGallery.dg-sale-mode .doll-card.dg-sale-thumb {
            display: block !important;
        }


/* Контейнеры паков — тот же стиль, что и в избранном.
   (у .fav-packs-grid уже есть нужные minmax/адаптив) */
.dg-sale-packs-root,
.dg-sale-subpacks {
    margin: 0;
    padding: 0;
}

/* кнопки паков — те же .fav-pack, поэтому отдельные правила не нужны */




/* ✅ DG: модалки, которые прячем через hidden (support/premium factory и т.п.) */
.modal[hidden] {
    display: none !important;
}

/* =========================
   11) Upload
   ========================= */
#uploadModal .modal-content.modal-large,
#dgShortUploadModal .modal-content.modal-large {
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(31, 31, 38, 0.98), rgba(20, 20, 25, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

#uploadModal .modal-header.dg-modal-header--back,
#dgShortUploadModal .modal-header.dg-modal-header--back {
    min-height: 64px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom-color: rgba(255, 255, 255, 0.14);
    background: transparent;
}

#uploadModal .modal-body,
#dgShortUploadModal .modal-body {
    padding: 20px 24px 24px;
}

#uploadModal .upload-container,
#dgShortUploadModal .upload-container {
    gap: 24px;
}

#uploadModal .upload-area,
#dgShortUploadModal .upload-area {
    border-radius: 14px;
}

body:not(.dg-theme-dark) #uploadModal .modal-content.modal-large,
body:not(.dg-theme-dark) #dgShortUploadModal .modal-content.modal-large {
    border-color: rgba(var(--c-border-rgb), 0.22);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(var(--c-border-rgb), 0.04);
}

body:not(.dg-theme-dark) #uploadModal .modal-header.dg-modal-header--back,
body:not(.dg-theme-dark) #dgShortUploadModal .modal-header.dg-modal-header--back {
    border-bottom-color: rgba(var(--c-border-rgb), 0.18);
}

.upload-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .upload-container {
        grid-template-columns: 1fr;
    }
}

.upload-area {
    border: 2px dashed var(--c-border);
    border-radius: var(--r-8);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
    background: #F9FAFB;
}

    .upload-area:hover {
        border-color: var(--c-primary);
        background: var(--c-bg-light);
    }

/* Dark theme: убираем белый фон зоны загрузки фото */
body.dg-theme-dark .upload-area {
    background: rgba(15, 15, 18, 0.72) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

    body.dg-theme-dark .upload-area:hover {
        background: rgba(var(--c-border-rgb), 0.06) !important;
        border-color: var(--c-primary, #8B5CF6) !important;
    }

    body.dg-theme-dark .upload-area p {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

.upload-area i {
    width: 48px;
    height: 48px;
    color: var(--c-muted);
    margin-bottom: 16px;
}

.upload-area .upload-area-hint {
    margin-top: 6px;
    color: var(--c-muted);
    font-size: 13px;
    line-height: 1.35;
}

body.dg-theme-dark .upload-area .upload-area-hint {
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    gap: 12px;
    margin-top: 16px;
}

.dg-upload-active-preview {
    display: none;
}

.dg-upload-preview-strip {
    display: contents;
}

.image-preview.dg-edit-image-preview {
    display: block;
}

.dg-edit-image-hint {
    margin: 0 0 12px;
    color: var(--c-muted, #6b7280);
    font-size: 13px;
    line-height: 1.4;
}

.dg-edit-image-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.dg-edit-short-media {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.dg-edit-short-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 220px);
}

.dg-edit-short-slot-preview {
    position: relative;
    border: 1px solid rgba(var(--c-border-rgb), 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-edit-short-slot-preview--empty {
    border-style: dashed;
}

.dg-edit-short-slot-preview .dg-short-upload-preview-host {
    width: 100%;
}

.dg-edit-short-slot .dg-edit-image-slot-btn {
    width: 100%;
}

.dg-edit-short-slot-placeholder {
    padding: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    color: #94a3b8;
}

body:not(.dg-theme-dark) .dg-edit-short-slot .dg-edit-image-slot-btn {
    background: #ffffff;
    color: #6d28d9 !important;
    border-color: rgba(139, 92, 246, 0.34) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body:not(.dg-theme-dark) .dg-edit-short-slot .dg-edit-image-slot-btn:hover {
    background: #f6f0ff;
    color: #5b21b6 !important;
    border-color: rgba(124, 58, 237, 0.48) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
}

body:not(.dg-theme-dark) .dg-edit-short-slot .dg-edit-image-slot-btn--delete {
    background: #fff7f7;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.24) !important;
}

body:not(.dg-theme-dark) .dg-edit-short-slot .dg-edit-image-slot-btn--delete:hover {
    background: #feecec;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.34) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.1);
}

.dg-edit-image-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dg-edit-image-slot-preview {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--c-border-rgb), 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-edit-image-slot-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dg-edit-image-slot-preview--empty {
    border-style: dashed;
}

.dg-edit-image-slot-preview--locked {
    border-style: dashed;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    color: #94a3b8;
}

.dg-edit-image-slot-placeholder {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    color: #94a3b8;
}

.dg-edit-image-slot-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    color: #64748b;
}

.dg-edit-image-slot-lock svg,
.dg-edit-image-slot-btn svg {
    width: 16px;
    height: 16px;
}

.dg-edit-image-slot-btn {
    min-height: 36px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
    border-radius: 999px;
    background: #ffffff;
    color: #6d28d9 !important;
    border: 1px solid rgba(139, 92, 246, 0.34) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dg-edit-image-slot-btn:hover {
    background: #f6f0ff;
    border-color: rgba(124, 58, 237, 0.48) !important;
    color: #5b21b6 !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
}

.dg-edit-image-slot-btn:active {
    transform: translateY(1px);
}

.dg-edit-image-slot-btn:focus-visible {
    outline: none;
    border-color: rgba(124, 58, 237, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}

.dg-edit-image-slot-btn--delete {
    background: #fff7f7;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.24) !important;
}

.dg-edit-image-slot-btn--delete:hover {
    background: #feecec;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.34) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.1);
}

.dg-edit-image-slot-btn--locked {
    cursor: not-allowed;
    background: #eef2f7;
    color: #64748b !important;
    border-color: rgba(100, 116, 139, 0.18) !important;
    box-shadow: none;
    opacity: 1;
}

.dg-edit-image-slot-btn--locked:hover {
    background: #eef2f7;
    color: #64748b !important;
    border-color: rgba(100, 116, 139, 0.18) !important;
    box-shadow: none;
    transform: none;
}

body.dg-theme-dark .dg-edit-image-hint {
    color: rgba(255, 255, 255, 0.68);
}

body.dg-theme-dark .dg-edit-image-slot-preview {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

body.dg-theme-dark .dg-edit-short-slot-preview {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

body.dg-theme-dark .dg-edit-short-slot .dg-edit-image-slot-btn {
    background: rgba(36, 36, 44, 0.96);
    color: #d8c9ff !important;
    border-color: rgba(139, 92, 246, 0.42) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

body.dg-theme-dark .dg-edit-short-slot .dg-edit-image-slot-btn:hover {
    background: rgba(53, 37, 80, 0.98);
    color: #f3edff !important;
    border-color: rgba(167, 139, 250, 0.62) !important;
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.34);
}

body.dg-theme-dark .dg-edit-short-slot .dg-edit-image-slot-btn--delete {
    background: rgba(127, 29, 29, 0.26);
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

body.dg-theme-dark .dg-edit-short-slot .dg-edit-image-slot-btn--delete:hover {
    background: rgba(127, 29, 29, 0.38);
    color: #fecaca !important;
    border-color: rgba(252, 165, 165, 0.46) !important;
    box-shadow: 0 10px 22px rgba(127, 29, 29, 0.24);
}

body.dg-theme-dark .dg-edit-image-slot-preview--locked {
    background: rgba(255,255,255,0.04);
}

body.dg-theme-dark .dg-edit-image-slot-placeholder {
    color: rgba(255,255,255,0.52);
}

body.dg-theme-dark .dg-edit-short-slot-placeholder {
    color: rgba(255,255,255,0.52);
}

body.dg-theme-dark .dg-edit-image-slot-lock {
    background: rgba(15,15,18,0.82);
    color: rgba(255,255,255,0.8);
}

body.dg-theme-dark .dg-edit-image-slot-btn--delete {
    background: rgba(127, 29, 29, 0.26);
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

body.dg-theme-dark .dg-edit-image-slot-btn {
    background: rgba(36, 36, 44, 0.96);
    color: #d8c9ff !important;
    border-color: rgba(139, 92, 246, 0.42) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

body.dg-theme-dark .dg-edit-image-slot-btn:hover {
    background: rgba(53, 37, 80, 0.98);
    color: #f3edff !important;
    border-color: rgba(167, 139, 250, 0.62) !important;
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.34);
}

body.dg-theme-dark .dg-edit-image-slot-btn:focus-visible {
    border-color: rgba(196, 181, 253, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.32);
}

body.dg-theme-dark .dg-edit-image-slot-btn--delete:hover {
    background: rgba(127, 29, 29, 0.38);
    color: #fecaca !important;
    border-color: rgba(252, 165, 165, 0.46) !important;
    box-shadow: 0 10px 22px rgba(127, 29, 29, 0.24);
}

body.dg-theme-dark .dg-edit-image-slot-btn--locked,
body.dg-theme-dark .dg-edit-image-slot-btn--locked:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.56) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: none;
}

@media (max-width: 768px) {
    .dg-edit-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-8);
    overflow: hidden;
}

    .preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.7);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Publication creation keeps one stable desktop preview instead of growing a tile grid. */
@media (min-width: 641px) {
    #uploadModal > .modal-content.modal-large {
        height: min(760px, calc(100dvh - 40px));
    }

    #uploadModal #uploadForm.modal-body {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #uploadModal .upload-container {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        height: 100%;
        gap: 20px;
    }

    #uploadModal .upload-left,
    #uploadModal .upload-right {
        min-width: 0;
    }

    #uploadModal .upload-area {
        padding: 22px 16px;
    }

    #uploadModal .upload-area i {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        margin-top: 12px;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview):empty {
        display: none;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-active-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        height: clamp(220px, 34dvh, 310px);
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(var(--c-border-rgb), 0.18);
        border-radius: 14px;
        background: rgba(var(--c-border-rgb), 0.045);
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-active-preview img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-active-preview .preview-heic-placeholder {
        padding: 20px;
        text-align: center;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-strip {
        display: flex;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        padding: 2px 2px 5px;
        scrollbar-width: thin;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        aspect-ratio: 1;
        border: 2px solid transparent;
        border-radius: 10px;
        background: rgba(var(--c-border-rgb), 0.06);
        cursor: pointer;
        outline: none;
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb:is(.is-active, :focus-visible) {
        border-color: var(--c-primary, #8b5cf6);
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18);
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb:hover {
        border-color: rgba(139, 92, 246, 0.68);
    }

    #uploadModal #imagePreview:not(.dg-edit-image-preview) .preview-remove {
        top: 3px;
        right: 3px;
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    #uploadModal .upload-right > .dg-upload-section + .dg-upload-section {
        margin-top: 12px;
    }

    #uploadModal .upload-right > [data-dg-upload-section="tags"] > .dg-upload-section-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    #uploadModal .upload-right > [data-dg-upload-section="tags"] .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #uploadModal #dollDescription {
        height: 128px;
        min-height: 128px;
        max-height: 128px;
        resize: none;
    }

    #uploadModal .upload-right > [data-dg-upload-section="sale"] > .dg-upload-section-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 16px;
    }

    #uploadModal .upload-right > [data-dg-upload-section="sale"] .form-group {
        margin-bottom: 0;
    }

    #uploadModal .upload-right > [data-dg-upload-section="sale"] > .dg-upload-section-body > .form-group:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    #uploadModal .upload-right > [data-dg-upload-section="sale"] #priceGroup {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #uploadModal .dg-upload-sale-rules-link {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        white-space: nowrap;
    }

    body.dg-theme-dark #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-active-preview,
    body.dg-theme-dark #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.055);
    }

    body.dg-theme-dark #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb:is(.is-active, :focus-visible) {
        border-color: #b968ff;
        box-shadow: 0 0 0 2px rgba(185, 104, 255, 0.20);
    }

    body.dg-theme-dark #uploadModal #imagePreview:not(.dg-edit-image-preview) .dg-upload-preview-thumb:hover {
        border-color: rgba(185, 104, 255, 0.72);
    }
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

    .form-actions .btn {
        flex: 1;
    }

#uploadModal .dg-upload-submit-bar button[type="submit"],
#dgShortUploadModal .dg-upload-submit-bar #dgShortSubmit {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.2;
}

.dg-sale-rules-summary {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(var(--c-border-rgb), 0.18);
    border-radius: var(--r-12, 12px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.dg-sale-rules-summary h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.3;
}

.dg-sale-rules-summary p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.dg-sale-rules-summary ul {
    margin: 0 0 10px 18px;
    padding: 0;
}

.dg-sale-rules-summary li + li {
    margin-top: 6px;
}

.dg-sale-rules-summary__note,
.dg-sale-rules-summary__links {
    font-size: 14px;
}

.dg-sale-rules-summary__note {
    color: var(--c-muted);
}

#rulesModal .dg-sale-rules-summary {
    margin-top: 0;
}
/* =========================
   12) Messages (modal)
   ========================= */

/* back button hidden by default */
#chatBackBtn {
    display: none;
}

/* ===== DG: peer title (если где-то используешь в шапке модалки) — по клику открывается профиль ===== */
.messages-modal-peer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

/* имя + статус в 2 строки (как на скрине #1) */
.messages-modal-peer-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.messages-modal-peer-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-modal-peer-status {
    font-size: 12px;
    line-height: 1.1;
    color: #9CA3AF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ DG: hidden обязан побеждать display:flex (иначе в списке диалогов висит последний собеседник) */
#messagesModalPeerTitle[hidden] {
    display: none !important;
}

.messages-modal-peer-title img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 32px;
}

.messages-modal-peer-title .messages-modal-peer-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* строка «ник + иконка без звука» в шапке модалки */
.messages-modal-peer-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .messages-modal-peer-name-row .messages-modal-peer-name {
        min-width: 0;
        flex: 1 1 auto;
    }

/* маленькая иконка «звук выкл» — цвет как у вторичного текста, в тёмной теме приглушённый светлый */
.dg-chat-peer-mute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9CA3AF;
}

body.dg-theme-dark #messagesModal .dg-chat-peer-mute,
body.dg-theme-dark #messagesPageRoot .dg-chat-peer-mute,
.dg-theme-dark #messagesModal .dg-chat-peer-mute,
.dg-theme-dark #messagesPageRoot .dg-chat-peer-mute {
    color: rgba(255, 255, 255, 0.55);
}

.dg-chat-peer-mute[hidden] {
    display: none !important;
}

.dg-chat-peer-mute__icon,
.dg-chat-peer-mute svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* ===== DG: Threads visual like screenshot (PC + Mobile) + delete by hold ===== */
.thread-row {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding-bottom: 0;
}

    /* убираем фон/логику свайпа */
    .thread-row::before {
        content: none !important;
    }

/* ===== DG: threads smooth reorder (FLIP) ===== */
.thread-row {
    will-change: transform;
}

    .thread-row.dg-thread-flip {
        transition: transform 280ms var(--ease);
    }

/* ✅ DG: hard disable animations on reopen to avoid double micro-jitter */
#threadsList.dg-threads-noanim .thread-row,
#threadsList.dg-threads-noanim .thread-row * {
    animation: none !important;
    transition: none !important;
}

#threadsList.dg-threads-noanim .thread-row {
    transform: none !important;
}


/* ✅ DG: Apple-like stagger for threads (softer + less “jittery” on mobile) */
.thread-row.dg-appear {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.995);
    transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(clamp(0, var(--dg-enter-i, 0), 12) * 22ms);
    will-change: opacity, transform;
}

    .thread-row.dg-appear.dg-appear--in {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

@media (prefers-reduced-motion: reduce) {
    .thread-row.dg-appear {
        transition: none !important;
        transition-delay: 0ms !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* выключаем старые элементы свайпа/⋯ меню (если где-то остались) */
.thread-swipe-inner,
.thread-swipe-delete,
.thread-more-btn,
.thread-more-menu {
    display: none !important;
}

/* кликабельная строка */
.thread-item {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* карточка строки (как на скрине: аватар + 2 строки + мета справа) */
.thread-card {
    position: relative; /* ✅ якорь для .thread-meta */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px; /* было 10px */
    padding-right: 46px; /* место под ⋯ */
    background: #fff;
    border-radius: 14px;
    min-height: 52px; /* было 56px */
    /* DG: серый контур как в VK */
    border: 1px solid var(--c-border);
}

.thread-item:active .thread-card {
    background: rgba(0,0,0,0.03);
}
/* ===== DG: hover + selected thread (PC like VK) ===== */
@media (min-width: 641px) and (hover: hover) {
    /* легкая подсветка при наведении */
    .thread-item:hover .thread-card {
        background: rgba(var(--c-primary-rgb), 0.06);
    }

    /* сильная подсветка для выбранного диалога (после клика) */
    .thread-row.is-active .thread-card {
        background: rgba(var(--c-primary-rgb), 0.12);
        box-shadow: inset 0 0 0 2px rgba(var(--c-primary-rgb), 0.25);
    }
}

/* аватар как на скрине */
.thread-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 48px;
    position: relative;
    z-index: 1; /* ниже кольца и точки */
}

/* ===== DG: online indicator in threads ===== */
.thread-avatar-wrap {
    position: relative;
    flex: 0 0 48px;
    z-index: 0; /* stacking-context для слоёв */
}

    /* ✅ DG: premium ring (через класс, не через inline — не слетает при перерисовке списка) */
    .thread-avatar-wrap.is-premium::after {
        content: "";
        position: absolute;
        inset: -2px; /* кольцо снаружи, не меняет размер аватарки */
        border-radius: 50%;
        border: 2px solid var(--c-warning);
        pointer-events: none;
        /* мягкое появление как “дорого” */
        opacity: 1;
        transform: scale(1);
        transition: opacity 220ms var(--ease), transform 260ms var(--ease);
        will-change: opacity, transform;
        z-index: 2; /* кольцо ниже точки онлайна */
    }

    /* когда класса нет — кольцо гарантированно отсутствует */
    .thread-avatar-wrap:not(.is-premium)::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: 2px solid transparent;
        pointer-events: none;
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 180ms var(--ease), transform 220ms var(--ease);
        z-index: 2; /*一致но */
    }


.thread-online-dot {
    position: absolute;
    right: 1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-success);
    border: 0;
    /* ✅ всегда в DOM, но “невидима” */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
    will-change: opacity, transform;
    pointer-events: none;
    z-index: 3; /* ✅ точка онлайна поверх премиум-рамки */
}

    .thread-online-dot.is-online {
        opacity: 1;
        transform: scale(1);
    }


/* контент слева: заголовок + превью */
.thread-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}


/* DG: lock icon (blocked user) */
.dg-lock-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    opacity: 0.75;
    margin-left: 2px;
}

    /* ✅ ВАЖНО: hidden должен реально скрывать иконку (иначе img-стили перебивают) */
    .dg-lock-ico[hidden] {
        display: none !important;
    }

.chat-peer-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    /* чтобы имя нормально обрезалось и не толкало иконку */
    .chat-peer-name-row .chat-peer-name {
        min-width: 0;
    }


.thread-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-preview {
    color: #9CA3AF;
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* мета справа: время сверху, unread badge снизу */
.thread-meta {
    position: absolute; /* ✅ уезжаем в угол */
    top: 6px; /* ✅ ближе к верху (подправишь на 4-8px) */
    right: 12px; /* ✅ в правый край карточки */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    /* старое поведение больше не нужно, но не ломаем — просто нейтрализуем */
    margin-left: 0;
    flex: 0 0 auto;
}

.thread-time {
    color: #9CA3AF;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* время + ⋯ живут в одной точке (там где время) */
.thread-time-wrap {
    position: relative;
    min-height: 24px; /* ✅ вместо фикс height */
    height: auto; /* ✅ чтобы бейдж влезал второй строкой */
    display: flex;
    align-items: flex-start; /* ✅ чтобы колонка времени начиналась сверху */
    justify-content: flex-end;
    gap: 6px;
    min-width: 28px;
}

/* ✅ колонка: время сверху, unread снизу */
.thread-time-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-top: 2px; /* ⬇️ вся колонка чуть ниже */
}

    /* ✅ фикс порядка (на всякий случай, чтобы "новое" не прыгало выше времени) */
    .thread-time-col .thread-time {
        order: 1;
    }

    .thread-time-col .thread-unread {
        order: 2;
    }

/* badge у тебя уже есть, но делаем как в TG (с фоном) */
.thread-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-weight: 700;
}


/* ✅ старую кнопку удаления полностью выключаем */
.thread-hold-delete {
    display: none !important;
}

/* ✅ кнопка ⋯ (по умолчанию скрыта, появляется только на выделенном диалоге) */
.thread-kebab-btn {
    display: none;
    width: 28px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}



/* ✅ ПК: по hover тоже показываем ⋯ вместо времени */
@media (min-width: 641px) and (hover: hover) {
    .thread-row:hover .thread-time {
        visibility: hidden;
    }

    .thread-row:hover .thread-kebab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .thread-row:hover .thread-kebab-btn:hover {
            background: rgba(0,0,0,0.06);
        }

    .thread-time-wrap {
        position: relative;
    }

    .thread-kebab-btn {
        position: absolute;
        right: 0;
        top: 0;
    }
}

/* ===== DG: mobile kebab near time (like Telegram) ===== */
@media (max-width: 640px) {

    /* время + ⋮ рядом */
    .thread-time-wrap {
        min-width: 0;
        gap: 6px;
        justify-content: flex-end;
    }

    /* гарантируем порядок: время слева, ⋮ справа */
    .thread-time {
        order: 1;
    }

    .thread-kebab-btn {
        order: 2;
    }

    /* на мобиле ⋮ всегда видно */
    .thread-kebab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* ✅ на мобиле делаем вертикальные точки, не трогая ПК */
        font-size: 0; /* прячем текст "⋯" из HTML/JS */
        line-height: 0;
    }

        .thread-kebab-btn::before {
            content: "⋮";
            font-size: 20px; /* под твой дизайн */
            line-height: 1;
            display: block;
        }

    /* на мобиле НЕ прячем время у активного диалога */
    .thread-row.is-active .thread-time {
        visibility: visible;
    }

    /* ✅ мобилка: подсветка строки, когда открыто меню по ⋮ */
    .thread-row.dg-kebab-open .thread-card {
        background: rgba(var(--c-primary-rgb), 0.12);
        box-shadow: inset 0 0 0 2px rgba(var(--c-primary-rgb), 0.25);
    }

    /* по клику (выбранный диалог) — показываем ⋯ вместо времени */
    .thread-row.is-active .thread-time {
        visibility: hidden;
    }

    .thread-row.is-active .thread-kebab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .thread-row.is-active .thread-kebab-btn:hover {
            background: rgba(0,0,0,0.06);
        }
}



/* ✅ меню действий */
.thread-actions-menu {
    width: 220px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    padding: 6px;
    z-index: var(--dg-z-portal);
}

.thread-actions-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

    .thread-actions-item svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

    .thread-actions-item:hover {
        background: rgba(0,0,0,0.05);
    }

    /* ✅ DG: удалить диалог — красный */
    .thread-actions-item[data-act="delete"] {
        color: #DC2626; /* red-600 */
    }

        .thread-actions-item[data-act="delete"]:hover {
            background: #FEF2F2;
        }



/* =========================
   DESKTOP / TABLET (>=641px)
   ========================= */
@media (min-width: 641px) {
    #messagesModal .modal-content.modal-large {
        width: min(1100px, 96vw) !important;
        height: min(88vh, calc(100dvh - 32px)) !important;
        max-height: min(88vh, calc(100dvh - 32px)) !important;
        display: flex;
        flex-direction: column;
        /* DG: как в messages.html */
        border: 2px solid var(--c-border);
        border-radius: 22px;
    }

    #messagesModal .modal-header {
        display: block !important;
        flex: 0 0 auto;
        position: absolute !important;
        inset: 0 0 auto 0;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        pointer-events: none;
        z-index: 25;
    }

    #messagesModal .modal-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden !important;
        padding: 0; /* ✅ без внутренних отступов, как в эталоне */
    }

    .messages-container {
        display: flex !important;
        flex-direction: row;
        gap: 0;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        background: #fff;
    }

    /* режим "только список" — диалоги на всю ширину, чат скрыт */
    #messagesModal .messages-container.show-threads #threadsList {
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-right: none !important;
        padding-right: 0 !important;
    }

    #messagesModal .messages-container.show-threads #chatPane {
        display: none !important;
    }

    /* режим "открыт чат" — стандартная 2-колонка */
    #messagesModal .messages-container.show-chat #threadsList {
        flex: 0 0 340px;
        width: 340px;
        min-width: 280px;
        max-width: 340px;
        border-right: 2px solid var(--c-border);
        padding-right: 0;
        background: #fff;
    }

    #messagesModal .messages-container.show-chat #chatPane {
        display: flex !important;
    }

    /* список диалогов — фиксированная колонка + скролл только внутри .threads-scroll */
    #threadsList {
        flex: 0 0 340px;
        width: 340px;
        min-width: 280px;
        max-width: 340px;
        overflow: hidden;
        /* ✅ важно: делаем колонкой, чтобы скроллился только список, а шапка была фиксированной */
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

        /* левый заголовок "Сообщения" */
        #threadsList .threads-header {
            height: 64px; /* ✅ одинаковая высота */
            padding: 0 16px; /* ✅ вертикаль через flex */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-bottom: 2px solid var(--c-border);
            font-weight: 800;
            font-size: 18px;
            background: #fff;
            flex: 0 0 auto;
        }

        /* скролл списка */
        #threadsList .threads-scroll {
            padding: 10px 10px 14px;
            overflow-y: auto;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable both-edges;
            overflow-anchor: none; /* ✅ kills tiny jumps on DOM updates */
            /* ✅ вместо calc — нормальный флекс-скролл */
            flex: 1 1 auto;
            min-height: 0;
            height: auto;
        }

        #threadsList .threads-header-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
        }

        #threadsList .threads-search-btn,
        #messagesModal .threads-search-btn {
            width: 36px;
            height: 36px;
            border-radius: 9999px;
            border: 2px solid var(--c-border);
            background-color: #fff;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #111;
            -webkit-text-fill-color: #111;
            -webkit-appearance: none;
            appearance: none;
        }

            #threadsList .threads-search-btn svg,
            #messagesModal .threads-search-btn svg {
                width: 18px;
                height: 18px;
                stroke-width: 2;
                stroke: currentColor;
                fill: none;
                transform: translateY(1px);
            }



        #threadsList .threads-search-input {
            height: 36px;
            width: 200px;
            max-width: 52vw;
            padding: 0 12px;
            border: 1px solid var(--c-border);
            border-radius: 9999px;
            background: #F9FAFB;
            font-size: 14px;
            outline: none;
        }

            #threadsList .threads-search-input:focus {
                border-color: var(--c-primary);
                background: #fff;
                box-shadow: 0 0 0 3px rgba(139,92,246,.10);
            }

        /* ✅ ПК: при открытом поиске заголовок "Чаты" не убираем из потока,
      а просто прячем визуально — тогда кнопка (лупа/крестик) не "скачет" */
        #threadsList.dg-threads-search-open .threads-header-title {
            visibility: hidden !important;
            pointer-events: none !important;
        }

    /* чату даём нормальную флекс-колонку */
    #chatPane {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden !important;
        background: #fff;
    }

    /* ПРАВАЯ ШАПКА */
    #chatHeader {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        height: 64px; /* ✅ ровно как слева */
        padding: 0 16px; /* ✅ убрали разный vertical padding */

        border-bottom: 2px solid var(--c-border);
        background: #fff;
    }


    #messagesModal {
        --dg-msg-head-h: 64px; /* меняешь тут — обе шапки меняются */
    }

        #messagesModal #threadsList .threads-header {
            height: var(--dg-msg-head-h) !important;
            min-height: var(--dg-msg-head-h) !important;
        }

        #messagesModal #chatHeader {
            height: var(--dg-msg-head-h) !important;
            min-height: var(--dg-msg-head-h) !important;
        }


    /* внутренняя группа (аватар + имя) — по клику открывается профиль */
    #chatHeader .chat-peer {
        flex: 1 1 auto; /* ✅ важно: даём блоку с ником занять доступное место */
        cursor: pointer;
    }


    /* крестик */
    #chatHeader .dg-chat-close {
        width: 34px;
        height: 34px;
        border: 1px solid var(--c-border);
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        padding: 0 0 1px;
    }

    #chatHeader .chat-peer {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }


    /* DG: actions (⋯ + ×) group in chat header */
    #chatHeader .chat-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    #chatHeader .dg-chat-close {
        display: none !important;
    }

    #chatHeader .dg-chat-kebab {
        margin-left: auto;
    }

    #messagesModal > .modal-content {
        position: relative;
    }

    #messagesModal > .modal-content > .modal-header .modal-close {
        display: inline-flex !important;
        position: absolute !important;
        left: 16px !important;
        top: calc((var(--dg-msg-head-h, 64px) - 36px) / 2) !important;
        transform: none !important;
        z-index: 30;
        pointer-events: auto;
    }

    #messagesModal:has(#threadsList.dg-threads-search-open) > .modal-content > .modal-header .modal-close {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #messagesModal > .modal-content > .modal-header > :not(.modal-close) {
        display: none !important;
    }

    #chatHeader .dg-chat-kebab {
        width: 36px;
        height: 36px;
        border: 1px solid var(--c-border);
        border-radius: 999px;
        background: rgba(255,255,255,.95);
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        padding: 0 0 2px;
        cursor: pointer;
        flex: 0 0 auto;
        color: #6B7280;
    }

        #chatHeader .dg-chat-kebab:hover {
            background: #fff;
        }

    #chatHeader:has(#chatPeerName:empty) .dg-chat-kebab {
        display: none;
    }

    /* DG: kebab in messagesModal header (MOBILE) — left of close, respect safe-area */
    #messagesModal .modal-kebab {
        position: absolute;
        top: calc(12px + var(--safe-top));
        right: calc(56px + var(--safe-right)); /* 12px + 36px + gap~8px */
        width: 36px;
        height: 36px;
        z-index: 20;
        border: none;
        border-radius: 50%;
        background: rgba(255,255,255,.95);
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        color: #6B7280;
        cursor: pointer;
    }

        #messagesModal .modal-kebab:hover {
            background: #fff;
        }

    /* DG: on phone show kebab ONLY on chat screen (hide on threads list) */
    #messagesModal:has(.messages-container.show-threads) .modal-kebab {
        display: none !important;
    }


    /* аватар в шапке чата — размер как у кнопок справа */
    #chatPeerAvatar.chat-peer-avatar {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 50%;
        object-fit: cover; /* ✅ фикс: латинская 'a', иначе object-fit не работает */
        display: block !important;
    }


    /* имя/статус в 2 строки */
    .chat-peer-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    #chatPeerName {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #chatPeerStatus {
        font-size: 12px;
        line-height: 1.1;
        color: #9CA3AF;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* крестик закрытия в правой шапке */
    #chatHeader .dg-chat-close {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,.95);
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        flex: 0 0 auto;
    }

    #chatMessages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 0 12px;
        scrollbar-gutter: stable both-edges;
        position: relative;
    }

    #chatForm {
        display: flex;
        flex: 0 0 auto;
        margin: 0;
        padding: 10px 16px 10px;
        position: relative !important;
        bottom: auto !important;
        z-index: 2;
        background: transparent;
        border-top: none;
        align-items: flex-end;
        gap: 8px;
        box-sizing: border-box;
        width: 100%;
    }

    /* ===== DG: Empty chat state (PC, like VK) ===== */
    #chatPane.chat-empty #chatForm {
        display: none !important;
    }

    #chatPane.chat-empty #chatMessages {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
    }

    .dg-chat-empty-state {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        color: #9CA3AF;
    }

    #chatPane.chat-empty .dg-chat-empty-state {
        display: flex;
    }

    .dg-chat-empty-ico {
        width: 72px;
        height: 72px;
        opacity: 0.9;
        pointer-events: none;
        user-select: none;
    }

    .dg-chat-empty-title {
        font-weight: 800;
        font-size: 16px;
        color: #6B7280;
    }

    .dg-chat-empty-sub {
        font-size: 13px;
        color: #9CA3AF;
    }

    /* DG: messages modal (PC, dark) — пустой state как на VK: белый текст + белая иконка */
    @media (min-width: 641px) {
        body.dg-theme-dark #messagesModal #chatEmptyState .dg-chat-empty-state {
            color: #fff !important;
        }

        body.dg-theme-dark #messagesModal #chatEmptyState .dg-chat-empty-title {
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
        }

        body.dg-theme-dark #messagesModal #chatEmptyState .dg-chat-empty-ico {
            opacity: 1 !important;
            filter: brightness(0) invert(1) !important;
        }
    }


    /* Полноэкранные легальные модалки (оставил как у тебя, но это НЕ часть Messages-скролла) */
    #termsModal .modal-content.modal-large,
    #saleRulesModal .modal-content.modal-large {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex;
        flex-direction: column;
        border-radius: 0;
    }

    #termsModal .modal-body,
    #saleRulesModal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #messagesModal #chatHeader {
        display: flex !important;
    }

    /* ✅ ПК: когда поиск открыт — растягиваем поле почти до левого края,
   а кнопку держим в той же точке справа */
    #threadsList .threads-header {
        position: relative; /* база для absolute */
    }
    /* контейнер */
    #threadsList.dg-threads-search-open .threads-header-actions {
        position: absolute;
        left: 16px; /* как padding у .threads-header */
        right: 16px; /* как padding у .threads-header */
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* input растягивается влево */
    #threadsList.dg-threads-search-open .threads-search-input {
        flex: 1 1 auto;
        width: auto;
        max-width: none; /* ✅ убираем 52vw ограничение */
        min-width: 0;
    }

    /* кнопка фиксирована справа */
    #threadsList.dg-threads-search-open .threads-search-btn {
        flex: 0 0 auto; /* кнопка не сжимается и остаётся справа */
    }

    /* иконки */
    #threadsList .threads-search-icon {
        display: none;
        width: 18px;
        height: 18px;
    }

    /* по умолчанию лупа */
    #threadsList .threads-search-icon--search {
        display: inline-flex;
    }

    /* при открытом поиске — крестик */
    #threadsList.dg-threads-search-open
    .threads-search-icon--search {
        display: none;
    }

    #threadsList.dg-threads-search-open
    .threads-search-icon--close {
        display: inline-flex;
    }
}


/* ✅ УДАЛЕНО: PC hide chat header in Messages modal (force)
   Больше НЕ нужно, т.к. на ПК шапка чата должна быть видна. */

@media (max-width: 640px) {

    #messagesModal #chatHeader {
        display: none !important;
    }

    body.dg-messages-page #messagesModal {
        /* всегда “открыто”, без затемнения */
        background: #fff !important; /* ✅ чтобы даже при микрогэпе/пересчёте viewport не просвечивала галерея */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        /* ✅ iOS: фиксируем как полноценный экран */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }

        body.dg-messages-page #messagesModal .modal-content,
        body.dg-messages-page #messagesModal .modal-content.modal-large {
            width: 100vw !important;
            /* ✅ фиксируем как отдельный "экран" и привязываем к VisualViewport */
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: 0 !important;
            /* ✅ высота экрана чата: dvh (клавиатура/адресная строка), fallback на vh */
            height: 100vh !important;
            max-height: 100vh !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            border-radius: 0 !important;
            margin: 0;
            margin-bottom: var(--dg-chat-keyboard-offset, 0px);
            transform: none !important;
            opacity: 1 !important;
            box-shadow: none !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important; /* ✅ чтобы скролл был только в списках */
        }

        body.dg-messages-page #messagesModal .modal-header {
            /* шапка видна, но учитываем safe-area */
            padding-top: calc(16px + var(--safe-top)) !important;
            padding-left: calc(16px + var(--safe-left)) !important;
            padding-right: calc(16px + var(--safe-right)) !important;
            padding-bottom: 16px !important;
        }

        body.dg-messages-page #messagesModal .modal-body {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
        }


        /* ✅ контейнер сообщений на мобиле — как "экран" */
        body.dg-messages-page #messagesModal .messages-container {
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
            height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

            /* ===== 1) Экран списка диалогов: окно не скроллится, только список (.threads-scroll) ===== */
            body.dg-messages-page #messagesModal .messages-container.show-threads #threadsList {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: 100% !important;
                width: 100% !important;
                border-right: none !important;
                overflow: hidden !important;
                padding: 12px 12px calc(12px + var(--safe-bottom)) 12px;
                overscroll-behavior: contain;
            }

                body.dg-messages-page #messagesModal .messages-container.show-threads #threadsList .threads-scroll {
                    flex: 1 1 auto !important;
                    min-height: 0 !important;
                    overflow-y: auto !important;
                    -webkit-overflow-scrolling: touch;
                    overscroll-behavior: contain;
                    touch-action: pan-y;
                }

            body.dg-messages-page #messagesModal .messages-container.show-threads:not(.chat-entering) #chatPane {
                display: none !important;
            }

            /* ===== 2) Экран чата: скролл только у #chatMessages, у окна диалога скролла нет ===== */
            body.dg-messages-page #messagesModal .messages-container.show-chat #threadsList {
                display: none !important;
            }

            body.dg-messages-page #messagesModal .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: 100% !important;
                overflow: hidden !important;
            }

        /* шапка чата — на телефоне НЕ показываем (нужно больше места под чат) */
        body.dg-messages-page #messagesModal #chatHeader {
            display: none !important;
        }


        /* кнопка "назад" */
        body.dg-messages-page #messagesModal #chatBackBtn {
            flex: 0 0 auto;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: transparent;
        }

        /* аватар */
        body.dg-messages-page #messagesModal #chatPeerAvatar {
            flex: 0 0 auto;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* ник */
        body.dg-messages-page #messagesModal #chatPeerName {
            flex: 1 1 auto;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ✅ лента сообщений — единственный скролл */
        body.dg-messages-page #messagesModal #chatMessages {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
            padding: 12px 12px 0 12px;
            padding-bottom: 8px;
        }

    @media (max-width: 640px) {
        /* модалка: #chatForm в потоке (position:relative), extra padding не нужен */
        /* /messages страница: #chatForm position:fixed, padding нужен — задаётся правилом ниже */
        body.dg-messages-page #messagesPageRoot #chatMessages {
            padding-bottom: 8px !important;
        }
    }

    body.dg-messages-page #messagesModal #chatForm {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
        padding: 8px 12px calc(8px + var(--safe-bottom) + var(--dg-chat-suggest-offset, 0px)) 12px !important;
        background: transparent;
        border-top: none;
        z-index: 5;
        transition: none !important;
        touch-action: manipulation;
    }


    /* ✅ Телефон: высота от JS (1 строка по умолчанию, макс 4 / 6 при редактировании), не фиксируем */
    /* Скролл только при переполнении (много строк), иначе виден скроллбар у одной строки */
    body.dg-messages-page #messagesModal #chatInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 38px !important; /* 1 строка */
        max-height: 156px !important; /* ~6 строк (при редактировании) */
        resize: none;
        padding: 10px 12px;
        border-radius: 999px;
        line-height: 1.3;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

        body.dg-messages-page #messagesModal #chatInput.dg-input-scroll {
            overflow-y: auto !important;
        }

        body.dg-messages-page #messagesModal #chatInput.dg-multiline {
            border-radius: 16px;
        }

    /* Страница /messages: те же ограничения высоты поля ввода, что и в мобильной модалке */
    @media (max-width: 640px) {
        #messagesPageRoot #chatInput {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 38px; /* 1 строка */
            max-height: 156px; /* ~6 строк (при редактировании) */
            resize: none;
            padding: 10px 12px;
            border-radius: 999px;
            line-height: 1.3;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

            #messagesPageRoot #chatInput.dg-input-scroll {
                overflow-y: auto;
            }

            #messagesPageRoot #chatInput.dg-multiline {
                border-radius: 16px;
            }
    }

    body.dg-messages-page #messagesModal #chatForm button[type="submit"] {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0;
        margin-bottom: 2px; /* визуально центрируем с textarea */
    }


    html.dg-messages-page,
    body.dg-messages-page,
    html.dg-page-messages,
    body.dg-page-messages {
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: auto;
    }

    /* Телефон: жёстко фиксируем страницу, чтобы окно диалога не «ездило» вверх-вниз */
    @media (max-width: 640px) {
        html.dg-messages-page,
        body.dg-messages-page,
        html.dg-page-messages,
        body.dg-page-messages {
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
        }
    }

    body.dg-messages-page #messagesModal .modal-header {
        position: relative; /* якорь для absolute-кнопок */
    }

    body.dg-messages-page #messagesModal .modal-kebab {
        position: absolute;
        top: calc(12px + var(--safe-top));
        right: calc(56px + var(--safe-right)); /* слева от крестика */
        width: 36px;
        height: 36px;
        z-index: 20;
        border: none;
        border-radius: 50%;
        background: rgba(255,255,255,.95);
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        color: #6B7280;
        cursor: pointer;
    }

    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) .modal-kebab {
        display: none !important; /* список диалогов */
    }

    body.dg-messages-page #messagesModal:has(.messages-container.show-chat) .modal-kebab {
        display: flex !important; /* экран чата */
    }

    /* ✅ DG: mobile — убираем 2-й заголовок внутри списка диалогов */
    body.dg-messages-page #messagesModal #threadsList .threads-header {
        display: none !important;
    }

    /* Кнопка лупы в диалогах — в стиле сайта (как .nav-icon-btn) */
    body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn {
        position: absolute;
        top: calc(12px + var(--safe-top));
        right: calc(56px + var(--safe-right));
        width: 36px;
        height: 36px;
        z-index: 20;
        border: 2px solid var(--c-border);
        border-radius: 9999px;
        background: #fff;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        visibility: visible;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        color: var(--c-text, #111);
        transition: border-color .2s;
    }

        body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn:hover,
        body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn:focus-visible {
            border-color: var(--c-primary);
        }

        body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn svg,
        body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn svg * {
            width: 18px;
            height: 18px;
            stroke-width: 2;
            stroke: currentColor;
            fill: none;
        }




    /* инпут поиска в шапке */
    body.dg-messages-page #messagesModal #dgModalThreadsSearchInput {
        position: absolute;
        top: calc(12px + var(--safe-top));
        left: calc(16px + var(--safe-left));
        right: calc(104px + var(--safe-right)); /* место под кнопку поиска + крестик */
        height: 36px;
        padding: 0 12px;
        border: 1px solid var(--c-border);
        border-radius: 9999px;
        background: #F9FAFB;
        font-size: 14px;
        outline: none;
        z-index: 20;
        display: block;
    }

        /* ✅ FIX: hidden должен реально прятать инпут (а не проигрывать display:block) */
        body.dg-messages-page #messagesModal #dgModalThreadsSearchInput[hidden] {
            display: none !important;
        }


        body.dg-messages-page #messagesModal #dgModalThreadsSearchInput:focus {
            border-color: var(--c-primary);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(139,92,246,.10);
        }

    /* когда открыт поиск — прячем заголовок "Чаты" */
    body.dg-messages-page #messagesModal .modal-header:has(#dgModalThreadsSearchInput:not([hidden])) #messagesModalTitle {
        visibility: hidden !important;
    }

    /* ✅ На телефоне в шапке диалогов — только поле ввода поиска (без заголовка, лупы, kebab, крестика) */
    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) #messagesModalTitle,
    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) #messagesModalPeerTitle,
    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) #dgModalThreadsSearchBtn,
    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) .modal-kebab,
    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) .modal-close {
        display: none !important;
    }

    body.dg-messages-page #messagesModal:has(.messages-container.show-threads) #dgModalThreadsSearchInput {
        display: block !important;
        left: calc(12px + var(--safe-left)) !important;
        right: calc(12px + var(--safe-right)) !important;
    }

        body.dg-messages-page #messagesModal:has(.messages-container.show-threads) #dgModalThreadsSearchInput[hidden] {
            display: block !important; /* в списке диалогов инпут всегда виден */
        }

    /* ✅ на экране чата поиск не нужен */
    body.dg-messages-page #messagesModal:has(.messages-container.show-chat) #dgModalThreadsSearchBtn,
    body.dg-messages-page #messagesModal:has(.messages-container.show-chat) #dgModalThreadsSearchInput {
        display: none !important;
    }

    /* FIX: высота шапки диалогов не должна меняться при открытии поиска */
    body.dg-messages-page #messagesModal .modal-header {
        height: 64px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center;
    }

    body.dg-messages-page #messagesModal #dgModalThreadsSearchInput {
        top: calc(50% - 18px + var(--safe-top));
    }
    /* DG: на телефоне никогда не показываем PC empty-state "Выберите чат"
     (иначе он успевает мигнуть при переходе в чат) */
    #messagesModal #chatEmptyState {
        display: none !important;
    }

    body.dg-messages-page #messagesModal::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--dg-chat-keyboard-offset, 0px);
        background: #fff;
        z-index: 4; /* ниже chatForm (5), выше галереи */
        /* иначе iOS/Yandex: тач «пробивает» вниз и тянет подложку/страницу под модалкой */
        pointer-events: auto;
        touch-action: none;
    }

    /* Мобильный чат в модалке: не скроллить целиком .modal-body (иначе лист с полем ввода
       уезжает вверх, а нижняя nav остаётся fixed и визуально «просвечивает»). */
    #messagesModal.modal.show .messages-modal-body {
        overflow: hidden !important;
        overscroll-behavior-y: none;
        touch-action: auto;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    #messagesModal {
        transition: opacity 120ms var(--ease), backdrop-filter 140ms var(--ease) !important;
    }

        #messagesModal .modal-content,
        #messagesModal .modal-content.modal-large {
            transition: transform 180ms var(--ease), opacity 160ms var(--ease), box-shadow 160ms ease !important;
        }
}


/* =========================
   CHAT INPUT (common)
   ========================= */
#chatForm #chatInput {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    max-height: 140px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    resize: none;
    overflow-y: hidden; /* JS выставляет .dg-input-scroll при переполнении → скролл только при макс строках */
    -webkit-overflow-scrolling: touch; /* ✅ iOS: внутренний скролл в textarea */
    overscroll-behavior: contain;
    font-size: 16px; /* чтобы iOS не зумил */
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    outline: none;
    transition: height 90ms ease;
}

    #chatForm #chatInput.dg-multiline {
        border-radius: 16px;
    }

    /* Скролл только при переполнении (много строк) */
    #chatForm #chatInput.dg-input-scroll {
        overflow-y: auto;
    }


/* ✅ ПК: убираем transition высоты, иначе при автогроу чат "прыгает" */
@media (min-width: 641px) {
    #chatForm #chatInput {
        transition: none !important;
    }
}

/* ✅ iOS FIX: transition по height ломает внутренний скролл textarea (сообщения + комментарии) */
@supports (-webkit-touch-callout: none) {
    #chatForm #chatInput,
    .comment-form .comment-input {
        transition: none !important;
    }
}


/* send button */
.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: var(--c-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 40px;
    align-self: center;
    cursor: pointer;
    line-height: 1;
}

    .chat-send-btn svg,
    .chat-send-btn i,
    .chat-send-btn .lucide {
        width: 18px;
        height: 18px;
    }


/* === DG: iOS textarea caret/inner-scroll стабилизация (messages + comments) === */
#chatInput,
.comment-form .comment-input {
    caret-color: auto;
    -webkit-user-select: text;
    user-select: text;
    touch-action: pan-y; /* даём скроллить внутри textarea */
    -webkit-appearance: none;
    appearance: none;
}


/* ===== DG: fix huge avatars + disable image click ===== */

/* ✅ ТОЛЬКО аватарки в списке диалогов (чтобы замок не становился 48px и круглым) */
#threadsList img.thread-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none; /* ✅ клик проходит на элемент диалога, картинка не “открывается” */
}

/* ✅ ТОЛЬКО аватар в шапке чата (чтобы замок не становился 32px и круглым) */
#chatPeerAvatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}


/* Message bubbles (kept) */

/* Message bubbles (kept) */

/* контейнер ленты сообщений, чтобы можно было «прижать» короткий диалог к низу */
.dg-chat-messages {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

/* Разделители дат: пилюли по центру ленты (мобила + ПК; не только в @media (min-width: 641px)) */
.msg-day-sep {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 10px;
    padding: 0 8px;
    pointer-events: none;
    clear: both;
}

.msg-day-sep-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    color: #6B7280;
    background: rgba(17, 24, 39, 0.09);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width: 100%;
    text-align: center;
}

body.dg-theme-dark .msg-day-sep-pill {
    color: var(--c-text, #E5E7EB);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 640px) {
    .msg-day-sep {
        margin: 14px 0 12px;
    }

    .msg-day-sep-pill {
        font-size: 13px;
        padding: 6px 14px;
    }
}

/* верхний spacer, высоту которого считаем в JS */
.dg-chat-messages::before {
    content: "";
    display: block;
    height: var(--dg-chat-top-spacer, 0px);
}

/* ── Кнопка «прокрутить вниз» (Telegram-style) ─────────────────────────── */
.dg-chat-scroll-down-btn {
    position: absolute;
    left: 16px;
    right: auto;
    bottom: 72px; /* над полем ввода */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    opacity: 0;
    transform: scale(.7) translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    color: #e0e0e0;
}

    .dg-chat-scroll-down-btn svg {
        width: 22px;
        height: 22px;
        display: block;
    }

.dg-chat-scroll-down-btn--visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.dg-chat-scroll-down-btn:hover {
    background: #363636;
}
/* Мобила: немного выше из-за safe-area */
@media (max-width: 640px) {
    .dg-chat-scroll-down-btn {
        left: 12px;
        right: auto;
        bottom: 68px;
    }
}
/* #chatPane должен быть position:relative чтобы absolute работал */
#chatPane {
    position: relative;
}

.dg-feed-scroll-top-btn {
    position: fixed;
    left: 16px;
    right: auto;
    bottom: 72px;
    z-index: 100;
}

.dg-content-scroll-top-btn {
    position: fixed;
    left: 16px;
    right: auto;
    bottom: 72px;
    z-index: var(--dg-z-nav);
}

@media (min-width: 641px) {
    .dg-content-scroll-top-btn {
        bottom: 62px;
    }
}

.modal-content > .dg-content-scroll-top-btn {
    position: absolute;
    z-index: 20;
}

.dg-feed-scroll-top-btn--visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

@media (max-width: 640px) {
    .dg-feed-scroll-top-btn {
        left: 12px;
        bottom: calc(12px + var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        z-index: 100;
    }

    .dg-content-scroll-top-btn {
        left: 12px;
        right: auto;
        bottom: calc(12px + var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        z-index: var(--dg-z-nav);
    }

    .modal-content > .dg-content-scroll-top-btn {
        z-index: 20;
    }

    /* При вводе штатные floating-кнопки прокрутки не перекрывают composer.
       DOM и scroll-контейнеры не меняются; после потери фокуса контроллеры
       снова управляют видимостью через существующие visible-классы. */
    #chatPane:has(#chatInput:focus) > .dg-chat-scroll-down-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(.7) translateY(8px) !important;
    }
}
/* ────────────────────────────────────────────────────────────────────────── */

.msg-bubble {
    max-width: 75%;
    padding: 8px;
    border-radius: 8px;
}

/* =========================
   DG: VK-like desktop chat (PC only)
   ========================= */
@media (min-width: 641px) {

    /* контейнер в VK-режиме занимает всю ширину */
    #chatMessages.dg-chat-vk {
        padding: 12px 16px 8px 16px;
    }

    .dg-vk-msg {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 8px 2px 8px; /* низ 2px — одинаковый зазор между 1–2 и 2–3 в стаке */
        border-bottom: none;
        width: 100%;
    }

    .dg-vk-msg--cont {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* continuation: одна линия "текст + мета" (как VK), без отдельной шапки */
    .dg-vk-line {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }

    /* в continuation текст не должен иметь верхнего отступа */
    .dg-vk-line--cont .dg-vk-text {
        margin-top: 0;
    }

    /* чтобы длинный текст не залезал под правую мету */
    .dg-vk-line--cont .dg-vk-text {
        flex: 1 1 auto;
        min-width: 0;
    }


    /* стаканные сообщения — когда НЕТ аватара */
    .dg-vk-msg:has(.dg-vk-avatar-spacer) {
        margin-top: 2px;
        margin-bottom: 2px;
    }


    .dg-vk-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 50%;
        object-fit: cover;
        border: none;
        background: transparent;
    }
    /* ✅ continuation spacer: НЕ рисуем круг (а место под выравнивание сохраняем) */
    .dg-vk-avatar-spacer {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .dg-vk-body {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* верхняя линия: ник слева, мета справа */
    .dg-vk-head {
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .dg-vk-name {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--c-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
    }

        .dg-vk-name:empty {
            display: none !important;
        }


    .dg-vk-text {
        margin-top: 3px; /* было 4px — чуть плотнее */
        font-size: 14px;
        line-height: 1.35;
        color: var(--c-text);
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* continuation: максимально “склеиваем” строки в стакающемся блоке */
    .dg-vk-text--cont {
        margin-top: 0;
    }

    /* правая мета-колонка (PC/VK): слот "время/⋯" */
    .dg-vk-meta {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex: 0 0 auto;
        min-width: 46px;
    }

    .dg-vk-ticks {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* PC: галочка исходящих сообщений снаружи пузыря справа */
    .dg-chat-vk .dg-vk-status-outside {
        align-self: flex-end;
        flex: 0 0 auto;
        margin: 0 0 6px 2px;
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
    }

    .dg-chat-vk .dg-vk-status-outside .dg-msg-ticks {
        display: inline-flex;
    }

    /* один слот: сверху ⋯/меню, снизу время (колонка) */
    .dg-vk-time-slot {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        width: 46px;
        min-height: 24px;
        flex: 0 0 46px;
    }

    /* время в слоте — снизу (порядок в DOM: меню, потом время) */
    .dg-vk-time {
        font-size: 12px;
        line-height: 1;
        color: #9CA3AF;
        white-space: nowrap;
    }

    .dg-vk-time-slot .dg-vk-time {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 2px;
    }

    /* ⋯ занимают тот же слот, что и время */
    .dg-vk-time-slot .dg-vk-more {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        display: none;
        align-items: center;
    }

    /* кнопка ⋯ */
    .dg-vk-kebab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 24px;
        border: none;
        background: transparent;
        border-radius: 8px;
        color: #6B7280;
        font-size: 20px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
    }

        .dg-vk-kebab:hover {
            background: rgba(0,0,0,0.06);
        }

    /* ===== hover (PC only) ===== */
    @media (hover: hover) {
        /* Свои и чужие: ⋯ заменяют время в том же слоте. */
        .dg-vk-body:hover .dg-vk-time {
            display: none;
        }

        .dg-vk-body:hover .dg-vk-time-slot .dg-vk-more {
            display: inline-flex;
            margin-top: auto;
        }
    }


    /* DG: входящие сообщения тоже показывают ⋯ (Ответить / Пожаловаться) */

    /* ── VK-режим: TG-стиль — пузырь на .dg-vk-body, строка без фона ── */

    /* все сообщения — слева (как TG desktop) */
    .dg-vk-msg--mine {
        background: none;
    }

    .dg-vk-msg--peer {
        background: none;
    }

    /* пузырь — ограничен шириной, скруглён по-телеграмному */
    .dg-vk-body {
        display: flex;
        flex-direction: column;
        max-width: 68%;
        min-width: 60px;
        padding: 7px 12px 5px 12px;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .dg-vk-msg--mine .dg-vk-body {
        background: rgba(17, 24, 39, 0.09);
        border-color: rgba(0, 0, 0, 0.08);
        border-radius: 16px 4px 16px 16px;
    }

    .dg-vk-msg--peer .dg-vk-body {
        background: rgba(17, 24, 39, 0.07);
        border-color: rgba(0, 0, 0, 0.06);
        border-radius: 4px 16px 16px 16px;
    }

    /* Медиа не растягивает внешний контейнер сообщения на 68% строки. */
    .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments--photos),
    .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card) {
        width: fit-content;
        padding-right: 0;
        padding-left: 0;
    }

    .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments--photos):not(:hover),
    .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card):not(:hover) {
        background: transparent;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body:not(.dg-theme-dark) #chatMessages .dg-msg-story-card {
        background: rgba(255, 255, 255, 0.52);
        border-left-color: rgba(109, 40, 217, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body.dg-theme-dark #chatMessages .dg-msg-story-card {
        background: rgba(255, 255, 255, 0.08);
        border-left-color: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* шапка пузыря: ник слева, время+меню справа */
    .dg-vk-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 2px;
    }

    /* hover на строке — только лёгкая подсветка, не перекрывает пузырь */



    /* меню действий — справа, как VK */
    .dg-chat-vk .msg-more-menu {
        right: 0;
        top: calc(100% + 4px);
        bottom: auto;
        margin-top: 0;
    }

    /* ВАЖНО: в VK-режиме не используем "пузырьковые" ограничения ширины */
    .dg-chat-vk .msg-row,
    .dg-chat-vk .msg-bubble {
        max-width: none !important;
    }
}

/* =========================
   DG: message rows + meta (TG desktop / VK mobile)
   ========================= */

/* строка сообщения */
.msg-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 0;
}

#chatMessages :is(.msg-row, .dg-vk-msg).dg-message-removing {
    overflow: hidden;
    transform-origin: center;
    transition: opacity 180ms ease, transform 180ms ease, height 180ms ease,
        padding 180ms ease, margin 180ms ease;
}

#chatMessages :is(.msg-row, .dg-vk-msg).dg-message-removing--active {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    #chatMessages :is(.msg-row, .dg-vk-msg).dg-message-removing {
        transition-duration: 0.01ms;
    }
}


/* мобилка (VK): свои справа */
.msg-row--mine {
    justify-content: flex-end;
}


/* аватар собеседника (входящие) */
.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 28px;
}

/* текст сообщения */
.msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-text a,
.dg-vk-text a {
    color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    word-break: break-word;
}

/* мета-блок: не создаём containing block, чтобы время привязывалось к низу пузыря */
.msg-meta-wrap {
    position: static;
    display: block;
}

/* время в пузыре — внизу под текстом */
.msg-time {
    font-size: 12px;
    line-height: 1;
    color: #888;
    position: absolute;
    bottom: 4px;
    right: 4px;
}

/* время и в пузырях собеседника — справа внизу */
.msg-bubble--peer .msg-time {
    right: 4px;
    left: auto;
}

/* кнопка ⋯ всегда в правом верхнем углу пузыря (не сдвигается при часиках) */
.msg-bubble .msg-more-wrap {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
}

/* даём место под мета-блок и под время внизу */
.msg-bubble {
    padding: 10px 48px 20px 12px; /* top right bottom left — низ под время */
    position: relative;
}

    /* галочки внутри пузыря не показываем */
    .msg-bubble .dg-vk-ticks,
    .msg-bubble .msg-status-wrap.dg-vk-ticks {
        display: none !important;
    }


/* исходящие можно сделать чуть плотнее справа (⋯ уже сверху) */
.msg-bubble--mine {
    padding-right: 48px;
}

.msg-bubble--mine {
    background: rgba(17, 24, 39, 0.09);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* меню "три точки" внутри пузыря */
.msg-more-wrap {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* внутри списка комментариев — свои правила позиционирования */
.comments-list .msg-more-wrap {
    position: relative; /* привязываем меню к обёртке возле трёх точек */
    top: 0;
    right: 0;
    margin-left: -6px; /* больше не толкаем всё вправо */
}

.msg-more-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--c-muted);
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}

    .msg-more-btn:hover {
        opacity: 1;
    }

/* выпадающее меню */
.msg-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: var(--shadow-2);
    padding: 4px 0;
    display: none;
    z-index: 20;
}

.msg-more-menu--open {
    display: block;
}

#chatMessages .msg-more-wrap {
    z-index: 80;
}
#chatMessages .msg-more-menu {
    z-index: 30;
}

/* Строка сообщения с открытым меню поднимается над соседними,
   иначе следующие сообщения перекрывают выпадающее меню */
#chatMessages .dg-msg-row-elevated {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate;
}

#chatMessages .dg-msg-row-elevated :is(.dg-vk-body, .msg-bubble) {
    position: relative;
    z-index: 11;
    overflow: visible;
}

#chatMessages .dg-msg-row-elevated .msg-more-wrap {
    z-index: 20 !important;
}

#chatMessages .dg-msg-row-elevated .msg-more-menu--open {
    z-index: 30 !important;
}

#chatMessages .msg-more-menu--portal {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    z-index: var(--dg-z-portal) !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26) !important;
}

body.dg-theme-dark #chatMessages .msg-more-menu--portal {
    background: #15151a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* вариант, когда меню надо показать над кнопкой */
.msg-more-menu--top {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}



/* пункты меню — текстовые кнопки в стиле сайта */
.msg-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-text);
    text-align: left;
    white-space: nowrap;
}

    .msg-menu-item:hover {
        background: var(--c-bg-light);
    }

    /* удаление — акцентный красный */
    .msg-menu-item.msg-del {
        color: var(--c-error);
    }

        .msg-menu-item.msg-del:hover {
            background: #FEF2F2;
        }

.msg-bubble--peer {
    background: rgba(17, 24, 39, 0.09);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.msg-bubble--premium {
    border: 2px solid var(--c-warning);
}

/* ⬅️ отступ исходящих сообщений от правого края (чтобы не прилипали к скроллу) */
.msg.msg--mine {
    margin-right: 8px;
}

/* ===== DG: message ticks (Telegram-like) ===== */

/* контейнер слева от пузыря (галочки перед облаком) */
.msg-status-wrap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 22px;
    width: 22px;
}

/* сами галочки */
.dg-msg-ticks {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    /* чтобы svg не добавляли лишние “инлайн” пробелы */
    .dg-msg-ticks svg {
        display: block;
    }

        /* ✅ “двойная галочка” плотнее: вторая заходит на первую */
        .dg-msg-ticks svg + svg {
            margin-left: -6px; /* можно поджать до -7px, если хочешь ещё плотнее */
        }

/* ✅ DG: статус "отправляется" (pending) */
.dg-msg-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #9CA3AF;
    opacity: 0.9;
}

/* ✅ DG: статус "не отправлено" (failed) — кликабельный */
.dg-msg-failed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

    .dg-msg-failed:hover {
        background: #FECACA;
    }



/* =========================
   13) Lightbox (inline and dg-*)
   ========================= */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-fullscreen);
    background: rgba(0,0,0,.9);
    justify-content: center;
    align-items: center;
}

    .lightbox.show {
        display: flex;
    }

.lightbox-img {
    max-width: 96vw;
    max-height: 96vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    font-size: 28px;
    cursor: pointer;
}

    .lightbox-close:hover {
        background: #fff;
    }

/* Dedicated DG lightbox */
.dg-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-fullscreen) !important;
    background: rgba(0,0,0,.96);
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
    /* touch-action: none;  ← убрали, чтобы лайтбокс не мог навсегда заблокировать скролл на iOS */
}

.dg-lb-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 24px;
    overflow: hidden;
    padding-bottom: max(8px,var(--safe-bottom));
}

.dg-lb-track {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.dg-lb-track::-webkit-scrollbar {
    display: none;
}

.dg-lb-track--single {
    overflow-x: hidden;
    scroll-snap-type: none;
}

.dg-lb-slide {
    display: grid;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    place-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.dg-lightbox.is-zoomed .dg-lb-track {
    overflow: hidden;
    scroll-snap-type: none;
    touch-action: none;
}

.dg-lb-image {
    --scale: 1;
    --tx: 0px;
    --ty: 0px;
    --ox: 50%;
    --oy: 50%;
    transform: translate3d(var(--tx,0),var(--ty,0),0) scale(var(--scale,1));
    transform-origin: var(--ox,50%) var(--oy,50%);
    will-change: transform;
    transition: transform 0s; /* no spring after pinch */
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    /* ↓ добавлено — вписываемся в экран по обеим осям */
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px - max(8px, var(--safe-bottom, 0px)));
    width: auto;
    height: auto;
    display: block;
}

.dg-lightbox.is-zoomed .dg-lb-img {
    cursor: grab;
}

.dg-lightbox.is-zoomed.is-panning .dg-lb-img {
    cursor: grabbing;
}

.dg-lb-close {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 20;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(17,24,39,.6);
    color: #fff;
    backdrop-filter: saturate(1.2) blur(2px);
}

.dg-lb-nav {
    position: fixed !important;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 68px;
    font-size: 30px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    z-index: 10 !important;
    background: rgba(0,0,0,.35);
    color: #fff;
    transition: background .2s,opacity .2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .dg-lb-nav:hover {
        background: rgba(0,0,0,.5);
    }

    .dg-lb-nav.dg-prev {
        left: 14px;
    }

    .dg-lb-nav.dg-next {
        right: 14px;
    }

.detail-nav {
    display: none !important;
}

@media (max-width: 640px) {
    .dg-lb-inner {
        height: 100dvh;
        padding: 8px;
    }

    .dg-lb-image {
        width: 100vw;
        height: auto;
        max-height: 100dvh;
    }

    .dg-lb-close {
        position: fixed;
        top: 12px;
        right: 12px;
    }

    .dg-lb-nav {
        width: 44px;
        height: 60px;
    }

    .dg-lightbox--publication .dg-lb-nav { display: none !important; }
}

/* =========================
   14) Doll Details (modal content)
   ========================= */
.modal-content.modal-large {
    max-width: 1200px;
    width: 96%;
}

#dollModal .modal-content.modal-tall {
    height: 90dvh !important;
    max-height: 90dvh !important;
    border-radius: 16px;
    margin: 0 auto;
    overflow: hidden;
    width: min(96vw,1200px);
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.doll-detail {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 24px;
    align-items: stretch;
}

    /* Ссылки в описании куклы: не перекрашивать в чёрный на iPhone, явный цвет */
    .doll-detail .description-block .desc-text a,
    .doll-detail .description-block a {
        color: var(--c-primary, #8B5CF6) !important;
        -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-underline-offset: 0.14em;
        -webkit-tap-highlight-color: rgba(var(--c-primary-rgb), 0.25);
    }

        .doll-detail .description-block .desc-text a:hover,
        .doll-detail .description-block a:hover {
            color: #a78bfa !important;
            -webkit-text-fill-color: #a78bfa !important;
            text-decoration: none;
        }

@media (max-width: 900px) {
    .doll-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fullscreen DollShow reuses the comments sheet on both phone and desktop. */
#heroShortsViewerWrap .dg-hero-shorts-comments {
    position: fixed;
    z-index: var(--dg-z-portal);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: min(78dvh, 680px);
    max-height: calc(100dvh - 56px);
    margin: 0 !important;
    padding: 0 max(12px, var(--safe-right, env(safe-area-inset-right, 0px))) calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) max(12px, var(--safe-left, env(safe-area-inset-left, 0px)));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: var(--dg-comments-sheet-bg) !important;
    color: var(--dg-comments-sheet-text) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .24);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
}

#heroShortsViewerWrap .dg-hero-shorts-comments.dg-comments-sheet--open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

#heroShortsViewerWrap .dg-hero-shorts-comments .dg-comments-sheet-header {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--dg-comments-sheet-border);
    font-size: 16px;
    font-weight: 600;
}

#heroShortsViewerWrap .dg-hero-shorts-comments .dg-comments-sheet-close {
    position: absolute;
    right: 0;
    top: 8px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dg-comments-sheet-control);
    color: var(--dg-comments-sheet-text);
    -webkit-text-fill-color: var(--dg-comments-sheet-text);
    touch-action: manipulation;
}

#heroShortsViewerWrap .dg-hero-shorts-comments .dg-comments-sheet-close :is(svg, .lucide) {
    width: 18px;
    height: 18px;
}

#heroShortsViewerWrap .dg-hero-shorts-comments > .comments-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    pointer-events: auto;
    padding: 10px 2px !important;
    color: var(--dg-comments-sheet-text) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
}

#heroShortsViewerWrap .dg-hero-shorts-comments > .comments-section > h3 {
    display: none;
}

#heroShortsViewerWrap .dg-hero-shorts-comments > .comment-composer-shell {
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid var(--dg-comments-sheet-border);
    background: var(--dg-comments-sheet-bg);
    color: var(--dg-comments-sheet-text);
    -webkit-text-fill-color: var(--dg-comments-sheet-text);
}

#heroShortsViewerWrap .dg-hero-shorts-comments :is(.comment-author, .comment-text) {
    color: var(--dg-comments-sheet-text) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
}

#heroShortsViewerWrap .dg-hero-shorts-comments :is(.comment-date, .comment-like-btn, .msg-more-btn) {
    color: var(--dg-comments-sheet-muted) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
}

#heroShortsViewerWrap .dg-hero-shorts-comments :is(.comment-reply, .comment-replies-summary, .dg-comments-open-all, .dg-comments-collapse-all) {
    color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
    -webkit-text-fill-color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
}

#heroShortsViewerWrap .dg-hero-shorts-comments .comment-input {
    background: var(--dg-comments-sheet-control) !important;
    border-color: var(--dg-comments-sheet-border) !important;
    color: var(--dg-comments-sheet-text) !important;
    caret-color: var(--dg-comments-sheet-text) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
}

#heroShortsViewerWrap .dg-hero-shorts-comments .comment-photo-btn {
    background: var(--dg-comments-sheet-control) !important;
    border-color: var(--dg-comments-sheet-border) !important;
    color: var(--dg-comments-sheet-muted) !important;
    -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
}

@media (max-width: 640px) {
    #heroShortsViewerWrap .dg-hero-shorts-comments {
        height: min(78dvh, 680px);
    }
}

@media (min-width: 641px) {
    #heroShortsViewerWrap .dg-hero-shorts-comments {
        left: 50%;
        right: auto;
        width: min(calc(100vw - 32px), 640px) !important;
        height: min(72dvh, 680px);
        transform: translate(-50%, calc(100% + 24px));
    }

    #heroShortsViewerWrap .dg-hero-shorts-comments.dg-comments-sheet--open {
        transform: translate(-50%, 0);
    }
}

@media (max-width: 900px) {
    body.dg-mobile-comments-open .comments-block.dg-comments-sheet--open,
    body.dg-mobile-comments-open .comments-block.dg-comments-sheet--open .comments-section {
        touch-action: pan-y !important;
    }
}

.doll-detail-left {
    display: block;
    max-height: none;
    overflow: visible;
}

.detail-image-wrap, .doll-detail-image {
    position: relative;
    width: 100%;
    border-radius: var(--r-12);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

    .detail-image-wrap .detail-main-img,
    .doll-detail-image .detail-main-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        border-radius: var(--r-12);
    }

    .doll-detail-image > .detail-main-img {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
    }

/* Bottom info overlay on big image */
.doll-info-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 14px calc(48px + var(--safe-bottom)); /* ✅ учитываем safe-area корректно */
    color: #fff;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

    .doll-info-overlay h2 {
        margin: 0 0 2px; /* ↓ уменьшаем зазор между заголовком и блоком автора */
        font-size: var(--dg-font-h3);
        line-height: 1.2;
        font-weight: 700;
    }


.overlay-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom)); /* ✅ вместо margin-bottom */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: auto;
    margin-bottom: 0;
}

/* ✅ левый блок должен уметь сжиматься (иначе ник режется неправильно) */
.overlay-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto; /* ✅ занимает доступное место */
}

/* ✅ автор — флекс-строка, ник тянется и правильно троеточится */
.doll-info-overlay .doll-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* ✅ ключ для ellipsis внутри flex */
    cursor: pointer;
}

    /* ✅ аватар нельзя “плющить” флексом */
    .doll-info-overlay .doll-author img {
        width: 32px;
        height: 32px;
        flex: 0 0 32px; /* ✅ запрет сжатия */
        min-width: 32px;
        min-height: 32px;
        aspect-ratio: 1 / 1; /* ✅ доп. страховка от расплющивания */
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    /* ✅ ник занимает всё, но не лезет под кнопки справа */
    .doll-info-overlay .doll-author .author-name {
        flex: 1 1 auto;
        min-width: 0; /* ✅ иначе ellipsis не сработает */
        font-size: var(--dg-font-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: none; /* ✅ убираем 40vw — оно и резало “впустую” */
    }


    .doll-info-overlay .doll-author span {
        font-size: var(--dg-font-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 40vw;
    }

.doll-info-overlay .price {
    font-weight: 700;
    color: #cba135;
}

/* Actions row (shared & unified) */
.overlay-actions,
.doll-actions-overlay {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

    .overlay-actions > button,
    .overlay-actions .more-btn,
    .overlay-actions .report-btn,
    .doll-actions-overlay > button,
    .doll-actions-overlay .more-btn,
    .doll-actions-overlay .report-btn {
        cursor: pointer;
        transition: background .2s, transform .2s;
        -webkit-transform: translateZ(0.01px);
        transform: translateZ(0.01px);
        backface-visibility: hidden;
        will-change: transform;
    }
/* ✅ DG: лайк не занижаем (у него должен быть 30) */
.like-button {
    z-index: 30;
}

.overlay-actions > button:hover,
.overlay-actions .more-btn:hover,
.overlay-actions .report-btn:hover,
.doll-actions-overlay > button:hover,
.doll-actions-overlay .more-btn:hover,
.doll-actions-overlay .report-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

.overlay-actions i, .overlay-actions svg,
.doll-actions-overlay i, .doll-actions-overlay svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Price badge (if used) */
.price-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,255,255,.9);
    color: var(--c-success);
}

/* Three-dots menu (unified) */
.more-container {
    position: relative;
}

    .more-container .action-menu {
        position: absolute;
        right: 0;
        bottom: 48px;
        min-width: 180px;
        z-index: var(--dg-z-dropdown);
        display: none;
        overflow: auto;
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        /* ▼ добавлено */
        -webkit-transform: translateZ(0.001px);
        transform: translateZ(0.001px);
        backface-visibility: hidden;
        isolation: isolate;
    }

        .more-container .action-menu.open {
            display: block;
        }

        .more-container .action-menu .menu-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 10px 12px;
            background: none;
            border: 0;
            cursor: pointer;
            font-size: 14px;
            color: #111;
            text-decoration: none;
            text-align: center;
        }

            .more-container .action-menu .menu-item:hover {
                background: var(--c-bg-light);
            }

/* DG: favorites indicator in 3-dots menu */
.action-menu .menu-item.favorite-item.active {
    font-weight: 700;
}

/* lucide icons are inline svg, by default fill="none" */
.action-menu .menu-item.favorite-item svg {
    fill: none;
}

.action-menu .menu-item.favorite-item.active svg {
    fill: currentColor; /* "заливка" иконки */
}

.thumbs-grid {
    --thumb: 80px;
    display: grid;
    grid-template-columns: repeat(2,var(--thumb));
    grid-auto-rows: var(--thumb);
    gap: 6px;
    justify-content: start;
}

    .thumbs-grid img {
        width: var(--thumb);
        height: var(--thumb);
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: transform .15s, border-color .15s;
    }

        .thumbs-grid img:hover {
            transform: translateY(-1px);
        }

        .thumbs-grid img.active {
            border-color: var(--c-primary);
        }

.comments-section {
    margin-top: 16px;
    padding-left: 2px; /* DG: ужимаем область комментариев на 2px слева */
    padding-right: 2px; /* DG: ужимаем область комментариев на 2px справа */
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* чтобы длинные строки не тянули контейнер и не давали горизонтальный скролл */
    overflow-x: hidden;
}

.comments-block {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* The desktop blog toggle uses the native hidden state. Keep the flex layout
   from overriding it, otherwise every other click only changes state in DOM. */
.dg-post-comments-panel[hidden] {
    display: none !important;
}

@media (min-width: 901px) {
    .dg-post-comments-panel {
        border-top: 1px solid var(--dg-blog-border, rgba(91,72,105,.16)) !important;
    }

    .dg-post-comments-panel[data-dg-comments-preparing="1"] {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
    }

    .dg-post-comments-panel.dg-comments-panel--opening {
        overflow: hidden;
        transform-origin: top;
        animation: dgPostCommentsOpen .32s cubic-bezier(.22, 1, .36, 1) both;
    }

    .dg-post-comments-panel.dg-comments-panel--closing {
        overflow: hidden;
        pointer-events: none;
        transform-origin: top;
        animation: dgPostCommentsClose .2s cubic-bezier(.4, 0, 1, 1) both;
    }

    @keyframes dgPostCommentsOpen {
        from { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-8px) scaleY(.98); }
        to { height: var(--dg-comments-panel-height); opacity: 1; transform: translateY(0) scaleY(1); }
    }

    @keyframes dgPostCommentsClose {
        from { height: var(--dg-comments-panel-height); opacity: 1; transform: translateY(0) scaleY(1); }
        to { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-6px) scaleY(.98); }
    }
}

body:not(.dg-theme-dark) .dg-post-comments-panel .comment-composer-shell {
    border-top-color: rgba(91,72,105,.16) !important;
}

body.dg-theme-dark .dg-post-comments-panel .comment-composer-shell,
html.dg-theme-dark body .dg-post-comments-panel .comment-composer-shell {
    border-top-color: rgba(214,190,232,.17) !important;
}

.comments-block > .comments-section {
    margin-top: 0;
}

.dg-comments-sheet-header {
    display: none;
}

body:not(.dg-theme-dark) {
    --dg-comments-sheet-bg: #ffffff;
    --dg-comments-sheet-text: #2c2c2c;
    --dg-comments-sheet-muted: #6b7280;
    --dg-comments-sheet-border: #e5e7eb;
    --dg-comments-sheet-control: #f3f4f6;
}

body.dg-theme-dark {
    --dg-comments-sheet-bg: #18181e;
    --dg-comments-sheet-text: #e5e7eb;
    --dg-comments-sheet-muted: #a7afbf;
    --dg-comments-sheet-border: #2a2f36;
    --dg-comments-sheet-control: #24252c;
}

@media (max-width: 900px) {
    /* Feed posts and Shorts use animated modal-content. On iOS that transform
       captures fixed descendants, so release it only while comments are open. */
    #dollModal:has(.comments-block.dg-comments-sheet--open) .modal-content,
    #shortModal:has(.comments-block.dg-comments-sheet--open) .modal-content,
    #dollModal:has(.comments-block.dg-comments-sheet--open) .modal-body,
    #shortModal:has(.comments-block.dg-comments-sheet--open) .modal-body {
        transform: none !important;
        -webkit-transform: none !important;
        contain: none !important;
        filter: none !important;
        perspective: none !important;
    }

    /* iOS/WebKit: a transformed feed entry becomes the containing block for
       its fixed comments sheet. Disable that context while the sheet is open. */
    .dg-blog-feed:has(.dg-post-comments-panel.dg-comments-sheet--open),
    .dg-blog-feed-entry:has(.dg-post-comments-panel.dg-comments-sheet--open),
    .dg-blog-feed-entry:has(.dg-post-comments-panel.dg-comments-sheet--open) > .dg-post-card {
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        animation: none !important;
    }

    .dg-blog-feed:has(.dg-post-comments-panel.dg-comments-sheet--open),
    .dg-blog-feed-entry:has(.dg-post-comments-panel.dg-comments-sheet--open) {
        position: relative;
        z-index: var(--dg-z-portal);
    }

    .dg-post-card:has(> .dg-post-comments-panel.dg-comments-sheet--open) {
        position: static;
        overflow: visible;
    }

    #dollModal .comments-block,
    #shortModal .comments-block,
    .dg-post-comments-panel.comments-block {
        position: fixed;
        z-index: 50;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: min(78dvh, 680px);
        max-height: calc(100dvh - 56px);
        margin: 0 !important;
        padding: 0 max(12px, var(--safe-right, env(safe-area-inset-right, 0px))) calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) max(12px, var(--safe-left, env(safe-area-inset-left, 0px)));
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        background: var(--dg-comments-sheet-bg) !important;
        color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, .24);
        transform: translateY(calc(100% + 24px));
        visibility: hidden;
        pointer-events: none;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    }

    #dollModal .comments-block,
    #shortModal .comments-block {
        z-index: 30;
    }

    #dollModal .comments-block.dg-comments-sheet--open,
    #shortModal .comments-block.dg-comments-sheet--open,
    .dg-post-comments-panel.comments-block.dg-comments-sheet--open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    #dollModal .dg-comments-sheet-header,
    #shortModal .dg-comments-sheet-header,
    .dg-post-comments-panel .dg-comments-sheet-header {
        flex: 0 0 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 1px solid var(--dg-comments-sheet-border);
        font-size: 16px;
        font-weight: 600;
    }

    #dollModal .dg-comments-sheet-close,
    #shortModal .dg-comments-sheet-close,
    .dg-post-comments-panel .dg-comments-sheet-close {
        position: absolute;
        right: 0;
        top: 8px;
        width: 36px;
        min-width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--dg-comments-sheet-control);
        color: var(--dg-comments-sheet-text);
        -webkit-text-fill-color: var(--dg-comments-sheet-text);
        touch-action: manipulation;
    }

    #dollModal .dg-comments-sheet-close :is(svg, .lucide),
    #shortModal .dg-comments-sheet-close :is(svg, .lucide),
    .dg-post-comments-panel .dg-comments-sheet-close :is(svg, .lucide) {
        width: 18px;
        height: 18px;
    }

    #dollModal .comments-block > .comments-section,
    #shortModal .comments-block > .comments-section,
    .dg-post-comments-panel.comments-block > .comments-section {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        pointer-events: auto;
        padding: 10px 2px !important;
        color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    }

    #dollModal .comments-block > .comments-section > h3,
    #shortModal .comments-block > .comments-section > h3,
    .dg-post-comments-panel.comments-block > .comments-section > h3 {
        display: none;
    }

    #dollModal .comments-block > .comment-composer-shell,
    #shortModal .comments-block > .comment-composer-shell,
    .dg-post-comments-panel.comments-block > .comment-composer-shell {
        flex: 0 0 auto;
        padding-top: 8px;
        border-top: 1px solid var(--dg-comments-sheet-border);
        background: var(--dg-comments-sheet-bg);
        color: var(--dg-comments-sheet-text);
        -webkit-text-fill-color: var(--dg-comments-sheet-text);
    }

    #dollModal .comments-block :is(.comment-author, .comment-text),
    #shortModal .comments-block :is(.comment-author, .comment-text),
    .dg-post-comments-panel :is(.comment-author, .comment-text) {
        color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    }

    #dollModal .comments-block :is(.comment-date, .comment-like-btn, .msg-more-btn),
    #shortModal .comments-block :is(.comment-date, .comment-like-btn, .msg-more-btn),
    .dg-post-comments-panel :is(.comment-date, .comment-like-btn, .msg-more-btn) {
        color: var(--dg-comments-sheet-muted) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
    }

    #dollModal .comments-block :is(.comment-reply, .comment-replies-summary, .dg-comments-open-all),
    #shortModal .comments-block :is(.comment-reply, .comment-replies-summary, .dg-comments-open-all),
    .dg-post-comments-panel :is(.comment-reply, .comment-replies-summary, .dg-comments-open-all) {
        color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
        -webkit-text-fill-color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
    }

    #dollModal .comments-block .comment-input,
    #shortModal .comments-block .comment-input,
    .dg-post-comments-panel .comment-input {
        background: var(--dg-comments-sheet-control) !important;
        border-color: var(--dg-comments-sheet-border) !important;
        color: var(--dg-comments-sheet-text) !important;
        caret-color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    }

    #dollModal .comments-block .comment-photo-btn,
    #shortModal .comments-block .comment-photo-btn,
    .dg-post-comments-panel .comment-photo-btn {
        background: var(--dg-comments-sheet-control) !important;
        border-color: var(--dg-comments-sheet-border) !important;
        color: var(--dg-comments-sheet-muted) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
    }
}

/* iPhone: while the comments sheet is open in an ordinary publication modal,
   only the comments list may scroll. Fullscreen DollShow has its own fixed
   background and is intentionally outside this rule. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        #dollModal:has(.comments-block.dg-comments-sheet--open) .modal-body,
        #shortModal:has(.comments-block.dg-comments-sheet--open) .modal-body {
            overflow-y: hidden !important;
            overscroll-behavior-y: none !important;
            -webkit-overflow-scrolling: auto !important;
        }

        #dollModal .comments-block.dg-comments-sheet--open > .comments-section,
        #shortModal .comments-block.dg-comments-sheet--open > .comments-section {
            overflow-y: auto !important;
            overscroll-behavior-y: contain !important;
            -webkit-overflow-scrolling: touch !important;
            touch-action: pan-y !important;
        }
    }
}


    .comments-section h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        order: 0; /* заголовок всегда сверху */
    }

.comments-section:has(> .comments-list:empty) > h3 {
    margin-bottom: 8px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    order: 1; /* список комментариев — после заголовка */
    /* режем горизонтальный скролл внутри списка */
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .comments-section > .comments-list:empty {
        flex: 1 1 auto;
        min-height: 140px;
        display: grid;
        place-items: center;
    }

    .comments-section > .comments-list:empty::before {
        content: "Оставьте отзыв, задайте вопрос или поделитесь впечатлениями.";
        max-width: 320px;
        padding: 16px;
        color: var(--dg-comments-sheet-muted);
        -webkit-text-fill-color: var(--dg-comments-sheet-muted);
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
    }
}

@media (min-width: 641px) {
    #heroShortsViewerWrap .dg-hero-shorts-comments .comments-list:empty {
        flex: 1 1 auto;
        min-height: 140px;
        display: grid;
        place-items: center;
    }

    #heroShortsViewerWrap .dg-hero-shorts-comments .comments-list:empty::before {
        content: "Оставьте отзыв, задайте вопрос или поделитесь впечатлениями.";
        max-width: 320px;
        padding: 16px;
        color: var(--dg-comments-sheet-muted);
        -webkit-text-fill-color: var(--dg-comments-sheet-muted);
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
    }
}

/* One shared collapsed state for comments in dolls, shorts and articles. */
.comments-list > .dg-comment-root-collapsed {
    display: none !important;
}

.dg-comments-open-all,
.dg-comments-collapse-all {
    align-self: flex-start;
    order: -1;
    appearance: none;
    -webkit-appearance: none;
    margin: 2px 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-primary, #8B5CF6);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.dg-comments-open-all:hover,
.dg-comments-open-all:focus-visible,
.dg-comments-collapse-all:hover,
.dg-comments-collapse-all:focus-visible {
    color: #a78bfa;
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

    .comments-list .comment:first-child {
        margin-top: 12px; /* можешь подбирать 8–16px по вкусу */
    }


/* карточка комментария */
/* убираем фон у всей области комментариев */
.comments-list,
.comments-section,
.comment {
    background: transparent !important;
}

    /* 💡 жёстко задаём компактные отступы между комментариями */
    .comments-list > .comment {
        margin: 0 0 6px 0; /* расстояние между комментариями */
        padding: 2px 0; /* минимальный внутренний вертикальный отступ */
    }

    .comment:last-child {
        border-bottom: none;
        margin-bottom: 0; /* у последнего вообще убираем нижний отступ */
    }


.comment-header {
    margin-bottom: 4px;
}
    /* меню "три точки" в шапке комментария — используем визуал из сообщений */
    .comment-header .msg-more-wrap {
        position: static; /* переопределяем absolute из .msg-more-wrap */
        margin-left: auto; /* уезжает вправо от даты */
    }


.comment-author {
    font-weight: 500;
}

.comment-date {
    font-size: 12px;
    color: var(--c-muted);
}

.comment-text {
    margin: 2px 0 2px;
    font-size: 14px;
    /* переносим длинные слова / простыни символов на следующую строку */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.comment-text a {
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.14em;
}

.comment-text a:hover {
    color: #a78bfa;
    -webkit-text-fill-color: #a78bfa;
    text-decoration: none;
}


.comment-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* элементы внутри — слева */
    gap: 8px;
    font-size: 13px;
    margin-top: 2px;
    margin-left: 0 !important; /* сам блок не смещаем вправо */
    text-align: left; /* защита от возможного text-align:right */
}

.dg-comment-failed {
    opacity: 1;
}

.dg-comment-send-status {
    gap: 10px;
}

.dg-comment-send-error,
.dg-comment-retry {
    color: var(--danger-color, #d64545);
}


    .comment-meta .comment-date {
        font-size: 12px;
        color: var(--c-muted);
    }

    .comment-meta .comment-reply {
        padding: 0;
        font-size: 13px;
    }

    .comment-meta .comment-like-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 0;
        font-size: 11px;
        line-height: 1;
    }

        .comment-meta .comment-like-btn i,
        .comment-meta .comment-like-btn svg,
        .comment-meta .comment-like-btn .lucide {
            width: 10px;
            height: 10px;
        }

        .comment-meta .comment-like-btn.is-liked {
            color: var(--c-primary, #8B5CF6);
        }

            .comment-meta .comment-like-btn.is-liked i,
            .comment-meta .comment-like-btn.is-liked svg,
            .comment-meta .comment-like-btn.is-liked .lucide {
                stroke: var(--c-primary, #8B5CF6);
                fill: rgba(var(--c-primary-rgb), 0.14);
            }

    /* всё — к левому краю: дата, "Ответить", три точки */
    .comment-meta .msg-more-wrap,
    .comment-meta .comment-date,
    .comment-meta .comment-reply,
    .comment-meta .comment-like-btn {
        margin-left: 0 !important; /* ничего из тройки не уезжает вправо */
    }

.comment-reply {
    padding: 4px 8px;
    font-size: 13px;
}


/* сворачиваемые ответы */
.comment-replies-collapse {
    margin-top: 4px; /* было 8px — ближе к комменту */
    margin-left: 0; /* базово без сдвига */
    padding: 0; /* убираем внутренние отступы details */
    border: 0; /* убираем чёрную рамку блока */
}

/* сдвиг только для первого уровня ответов на основной комментарий */
.comment-replies-collapse--lvl1 {
    margin-left: 40px; /* один общий сдвиг для ВСЕХ ответов под комментом */
}

.comment-replies-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--c-primary);
    list-style: none;
    /* чтобы не было ощущения "инпута на всю ширину" */
    display: inline-block;
    padding: 0;
    margin: 2px 0 0; /* было 4px 0 0 — меньше воздуха над ссылкой */
    border: 0;
}

.comment-replies {
    margin-top: 4px; /* было 8px — ответы ближе к ссылке */
    display: flex;
    flex-direction: column;
    gap: 4px; /* было 8px — расстояние между ответами */
    /* контейнер ответов не даёт доп. сдвигов */
    margin-left: 0 !important;
    padding-left: 0 !important;
}

    /* И у самих комментариев внутри ответов — тоже без сдвига */
    .comment-replies .comment {
        margin: 0 0 4px 0; /* компактный промежуток между ответами */
        padding: 2px 0; /* маленький внутренний вертикальный отступ */
        margin-left: 0 !important;
        padding-left: 0 !important; /* если где-то глобально задан padding-left */
    }

        .comment-replies .comment:last-child {
            margin-bottom: 0; /* у последнего ответа убираем нижний отступ */
        }


/* сама форма — отдельный flex-элемент в .comments-section */
.comment-form {
    order: 2; /* форма ввода под списком комментариев */
}

/* DG: как в сообщениях — textarea + кнопка отправки в одной строке */
.comment-composer-shell {
    order: 2;
    width: 100%;
    min-width: 0;
}

.dg-comment-menu--portal {
    position: fixed !important;
    left: 0;
    top: 0;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: var(--dg-z-portal) !important;
}

.dg-comment-menu--portal.msg-more-menu--top {
    top: 0;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.comment-reply-target {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(120,110,150,0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.comment-form-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    #dollModal .doll-detail,
    #dollModal .doll-detail-right.modal-side,
    #dollModal .comments-block {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    #profileModal,
    #dg-article-root {
        --dg-comment-composer-inline-pad: 12px;
    }

    #dollModal .comments-section,
    #shortModal .comments-section,
    #profileModal .dg-profile-article-comments.comments-section,
    #dg-article-root .comments-section {
        padding-left: 2px;
        padding-right: 2px;
    }

    #dollModal .comments-section,
    #dollModal .comment-composer-shell {
        padding-left: 0;
        padding-right: 0;
    }

    #profileModal .dg-profile-article-comments .comment-composer-shell {
        margin-left: calc(-1 * max(16px, var(--safe-left, env(safe-area-inset-left, 0px))));
        margin-right: calc(-1 * max(16px, var(--safe-right, env(safe-area-inset-right, 0px))));
        padding-left: var(--dg-comment-composer-inline-pad);
        padding-right: var(--dg-comment-composer-inline-pad);
    }

    #dollModal .comment-composer-shell,
    #shortModal .comment-composer-shell {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #dg-article-root .comment-composer-shell {
        margin-left: -2px;
        margin-right: -2px;
        padding-left: 2px;
        padding-right: 2px;
    }

    #dollModal .comment-form,
    #shortModal .comment-form,
    #profileModal .dg-profile-article-comments .comment-form,
    #dg-article-root .comment-form {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        min-width: 0;
    }

    #dollModal .comment-form-row,
    #shortModal .comment-form-row,
    #profileModal .dg-profile-article-comments .comment-form-row,
    #dg-article-root .comment-form-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
    }

    #dollModal .comment-form-row > .comment-input,
    #shortModal .comment-form-row > .comment-input,
    #profileModal .dg-profile-article-comments .comment-form-row > .comment-input,
    #dg-article-root .comment-form-row > .comment-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    #dollModal .comment-form-row > .comment-photo-btn,
    #dollModal .comment-form-row > .comment-send-btn,
    #shortModal .comment-form-row > .comment-photo-btn,
    #shortModal .comment-form-row > .comment-send-btn,
    #profileModal .dg-profile-article-comments .comment-form-row > .comment-photo-btn,
    #profileModal .dg-profile-article-comments .comment-form-row > .comment-send-btn,
    #dg-article-root .comment-form-row > .comment-photo-btn,
    #dg-article-root .comment-form-row > .comment-send-btn {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
    }

    #dollModal .comment-form-row > .comment-edit-btns,
    #shortModal .comment-form-row > .comment-edit-btns,
    #profileModal .dg-profile-article-comments .comment-form-row > .comment-edit-btns,
    #dg-article-root .comment-form-row > .comment-edit-btns {
        top: -6px;
        gap: 8px;
    }

    #dollModal .comment-form .comment-input,
    #shortModal .comment-form .comment-input,
    #profileModal .dg-profile-article-comments .comment-form .comment-input,
    #dg-article-root .comment-form .comment-input {
        padding-top: 10px;
        padding-left: 12px;
        padding-bottom: 10px;
        padding-right: 12px;
    }

    #dollModal .comment-form-row > .comment-input:not(.dg-multiline),
    #shortModal .comment-form-row > .comment-input:not(.dg-multiline),
    #profileModal .dg-profile-article-comments .comment-form-row > .comment-input:not(.dg-multiline),
    #dg-article-root .comment-form-row > .comment-input:not(.dg-multiline) {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        #profileModal .dg-profile-article-comments .comment-composer-shell {
            margin-right: calc(-1 * max(20px, calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px)));
        }
    }
}

.comment-form .comment-input {
    flex: 1 1 120px;
    min-width: 0;
    width: 100%;
    /* ✅ важно: убираем фиксированную высоту — чтобы JS мог нормально растить textarea */
    height: auto;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    resize: none;
    overflow-y: hidden; /* JS будет переключать на auto */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    line-height: 1.4;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.comment-form .comment-input::-webkit-resizer {
    display: none;
}

@media (max-width: 640px) {
    .comment-form .comment-input:placeholder-shown {
        caret-color: transparent;
    }
}

    .comment-form .comment-input:focus {
        border-color: var(--c-primary, #8B5CF6);
        outline: none;
        box-shadow: none !important;
    }


    .comment-form .comment-input.dg-multiline {
        border-radius: 16px;
    }


/* ✅ DG: iOS comments — пока открыта клавиатура, блокируем скролл модалки карточки */
#dollModal.dg-kb-open .modal-body {
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
}



/* кнопка "Отменить" оставляем, но не ломаем ряд */
.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* больше не давим margin-top кнопкам внутри формы (иначе ломает выравнивание как в сообщениях) */
.comment-form button {
    align-self: auto;
    margin-top: 0;
}

.comment-photo-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: #fff;
    color: var(--c-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 40px;
    cursor: pointer;
    line-height: 1;
    align-self: center;
    margin: 0 !important;
    transform: none !important;
}

.comment-photo-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--c-text, #111);
}

.comment-photo-btn svg,
.comment-photo-btn i,
.comment-photo-btn .lucide {
    width: 20px;
    height: 20px;
}

.comment-form-row > .comment-photo-btn,
.comment-form-row > .comment-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    position: relative;
    top: -6px;
}

.comment-form-row > .comment-edit-btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    align-self: center !important;
    position: relative;
    top: -6px;
}

.comment-form-row > .comment-edit-btns[style*="display:none"],
.comment-form-row > .comment-edit-btns[style*="display: none"] {
    display: none !important;
}

@supports selector(:has(*)) {
    .comment-form-row:not(:has(> .comment-photo-btn)) {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.comment-form-row > .comment-input:not(.dg-multiline) {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.comment-photo-preview[hidden] {
    display: none !important;
}

.comment-photo-preview {
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(var(--c-primary-rgb), 0.08);
    border: 1px solid var(--c-border, #e5e7eb);
    box-sizing: border-box;
}

.comment-photo-preview-thumb,
.comment-image {
    display: block;
    width: 96px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--c-border);
}

.comment-photo-preview-thumb {
    width: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
}

.comment-photo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.comment-photo-preview-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--c-text, #111827);
}

.comment-photo-remove {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}

.comment-image-link {
    display: inline-block;
    margin: 6px 0 0 44px;
}

body.dg-theme-dark .comment-photo-btn,
html.dg-theme-dark .comment-photo-btn {
    background: #3f3f46;
    border-color: var(--c-border, #52525b);
    color: #a1a1aa;
}

body.dg-theme-dark .comment-photo-btn:hover,
html.dg-theme-dark .comment-photo-btn:hover {
    background: #52525b;
    color: #e5e7eb;
}

/* DG: кнопка отправки-иконка как в сообщениях */
.comment-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: var(--c-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 40px;
    align-self: center;
    cursor: pointer;
    line-height: 1;
    margin-top: 0 !important;
    transform: none !important;
}

    .comment-send-btn svg {
        width: 18px;
        height: 18px;
    }

    /* чтобы не было унаследованных от .btn отступов/line-height */
    .comment-send-btn,
    .comment-send-btn:focus {
        line-height: 1;
    }



/* базовая шапка комментария и аватарка */
.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-header .comment-author {
    min-width: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* DG: аккуратная подсветка ответа (ФОН вместо рамки) */
.dg-comment-highlight {
    position: relative;
    isolation: isolate; /* DG: чтобы фон был строго под этим комментом */
}

    .dg-comment-highlight::before {
        content: "";
        position: absolute;
        top: -2px;
        right: 0; /* DG: не вылезаем за границы */
        bottom: 0; /* DG: фон на всю высоту комментария */
        left: 0; /* DG: без отрицательного вылета */

        background: rgba(var(--c-primary-rgb), 0.10); /* DG: бледно-фиолетовый фон */
        border: none;
        border-radius: 10px;
        pointer-events: none;
        box-sizing: border-box;
        z-index: -1; /* DG: фон под контентом */
    }

.notif-item.notif--comment-unread,
.notif-item.notif--tap-required-unread {
    background: rgba(var(--c-primary-rgb), 0.16);
}

/* Notifications use stable geometry; only rows reveal after the first network fill. */
#notificationsModal .modal-content.modal-large {
    width: min(92vw, 680px);
    height: auto;
    max-height: 90dvh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#notificationsModal #notificationsList {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#notificationsModal .notif-item,
#notificationsModal .notif-item > div,
#notificationsModal .notif-item span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dg-notifications-load-state {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--c-text-muted, #8b8b94);
    text-align: center;
}

#notificationsList.dg-notifications-list-reveal .notif-item {
    animation: dgNotificationRowReveal var(--dg-motion-reveal, 240ms) var(--dg-motion-ease-out, ease-out) both;
}

#notificationsList.dg-notifications-list-reveal .notif-item:nth-child(n+9) {
    animation-delay: 80ms;
}

@keyframes dgNotificationRowReveal {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #notificationsList.dg-notifications-list-reveal .notif-item {
        animation: none;
    }
}

    .notif-item.notif--comment-unread:hover,
    .notif-item.notif--tap-required-unread:hover {
        background: rgba(var(--c-primary-rgb), 0.22);
    }

/* Модалка уведомлений: разделитель между строками (в JS — border #eee) */
body.dg-theme-dark #notificationsModal .notif-item,
html.dg-theme-dark #notificationsModal .notif-item {
    border-bottom-color: var(--c-border) !important;
}


/* Мобильная вёрстка: "Удалить" строго под "Редактировать" */
@media (max-width: 480px) {
    .comment-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
    }

        .comment-header .comment-avatar {
            flex: 0 0 auto;
        }

        .comment-header .comment-author,
        .comment-header .comment-date {
            font-size: 13px;
        }

    /* переопределяем inline-стили comment-actions */
    .comment-actions {
        margin-left: auto !important;
        display: flex !important;
        flex-direction: column; /* одна под другой */
        align-items: flex-end; /* не по центру, а к правому краю */
        gap: 4px;
    }

        .comment-actions .btn {
            padding-inline: 10px;
            white-space: nowrap;
        }
}

.report-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(255,255,255,.92);
    cursor: pointer;
}

    .report-btn:hover {
        background: #fff;
    }


/* =========================
   15) Admin tables / Users
   ========================= */
#uGrid td {
    vertical-align: top;
}

.mod-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .mod-table th, .mod-table td {
        padding: 10px 12px;
        vertical-align: top;
    }

        .mod-table td.actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

            .mod-table td.actions .btn {
                margin: 0;
            }

/* DG: pencil (edit) */
.dg-pencil {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}

    .dg-pencil:hover {
        background: rgba(0,0,0,.06);
    }


/* =========================
   16) Toasts
   ========================= */
:root {
    --toast-accent: var(--c-primary);
}

.toast-container {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    /* Уведомления выше модалок и портальных меню по общей шкале. */
    z-index: var(--dg-z-notice);
    max-width: 94vw;
    pointer-events: none;
}


.toast {
    position: relative;
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    background: color-mix(in oklab, var(--toast-accent) 18%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    overflow: hidden;
}

    .toast::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom right, color-mix(in oklab, var(--toast-accent) 20%, transparent), color-mix(in oklab, var(--toast-accent) 28%, transparent));
        z-index: 0;
    }

    .toast::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--toast-accent);
        transform-origin: left center;
        animation: toastBg linear forwards;
        animation-duration: var(--toast-duration,4000ms);
    }

.toast__text {
    position: relative;
    z-index: 1;
    color: #fff;
}

.toast--success {
    --toast-accent: var(--c-success);
    color: #fff;
}

.toast--error {
    --toast-accent: var(--c-error);
    color: #fff;
}

.toast--warning {
    --toast-accent: var(--c-warning);
    color: #fff;
}

.toast--info {
    --toast-accent: var(--c-primary);
    color: #fff;
}

@keyframes toastBg {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast::after {
        animation: none;
    }
}

@media (max-width: 640px) {
    .toast {
        font-size: 15px;
        padding: 14px 18px;
        border-radius: 12px;
    }
}

/* =========================
   17) Rating / Support textarea
   ========================= */
.rating-stars {
    display: inline-flex;
    gap: 6px;
    user-select: none;
}

    .rating-stars .star {
        font-size: 28px;
        line-height: 1;
        padding: 2px 4px;
        border: none;
        background: none;
        cursor: pointer;
        color: #bbb;
    }

        .rating-stars .star.filled {
            color: #f5c542;
        }

        .rating-stars .star:focus {
            outline: 2px solid rgba(0,0,0,.15);
            outline-offset: 2px;
            border-radius: 6px;
        }

.support-textarea-wrap {
    position: relative;
}

.support-textarea {
    width: 100%;
    min-height: 160px;
    resize: none;
}

    .support-textarea + .char-counter {
        position: absolute;
        right: 8px;
        bottom: 6px;
        font-size: 12px;
        opacity: .7;
        pointer-events: none;
    }

/* =========================
   18) Responsive tweaks
   ========================= */
@media (max-width: 768px) {
    .nav-container,
    .container,
    .filters-container {
        padding: 0 12px;
    }

    .nav-search {
        margin: 0 16px;
    }
}

/* Мобильная логика поиска: скрыт по умолчанию, открывается по клику на лупу */
@media (max-width: 640px) {
    .nav-search {
        display: none;
        max-width: none;
        margin: 0 8px;
    }

        .nav-search.nav-search--open {
            display: flex;
            flex: 1 1 auto;
        }

    .nav-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* при открытом поиске уменьшаем только логотип */
    .navbar--search-open .nav-brand img {
        width: 52px;
        height: 52px;
        transition: width 0.18s ease, height 0.18s ease, transform 0.18s ease;
    }
}

@media (max-width: 640px) {
    /* галерея — 3 колонки на телефонах (если хочется — раскомментировать)
  .doll-gallery{ column-count:3; column-gap:12px; }
  .doll-card{ margin-bottom:12px; } */

    /* карточка: мелкие правки */
    .doll-overlay {
        padding-bottom: 56px;
        justify-content: flex-start;
    }

    .like-button {
        opacity: .7;
    }

    .modal-close {
        top: calc(12px + var(--safe-top));
        right: calc(12px + var(--safe-right));
    }

    #profileModal .profile-content .doll-gallery {
        margin-left: auto;
        margin-right: auto
    }
}

/* ===== Мобильная навигация по спецификации: поиск сверху + нижняя панель (≤640px) ===== */
.dg-mobile-top-search,
.dg-mobile-bottom-nav {
    display: none;
}

@media (max-width: 640px) {
    html { --dg-mobile-bottom-nav-height: calc(62px + var(--safe-bottom)); }
    .dg-mobile-top-search {
        display: block;
        position: sticky;
        top: 0;
        z-index: 99;
        padding: 12px 12px 10px;
        padding-top: max(12px, var(--safe-top));
        background: rgba(255,255,255,0.84);
        border-bottom: 1px solid rgba(120,110,150,0.11);
        backdrop-filter: blur(var(--dg-glass-blur));
        -webkit-backdrop-filter: blur(var(--dg-glass-blur));
        transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

        .dg-mobile-top-search.dg-search-scrolled {
            opacity: 1;
            pointer-events: auto;
        }

        .dg-mobile-top-search .dg-mobile-search-inner {
            max-width: 100%;
        }

        .dg-mobile-top-search .search-container {
            width: 100%;
            max-width: none;
        }

    .navbar {
        display: none !important;
    }
    /* Корневой слой мобильной навигации. */
    .dg-mobile-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(62px + var(--safe-bottom));
        padding-bottom: calc(8px + var(--safe-bottom));
        background: rgba(255,255,255,0.88);
        border-top: 1px solid rgba(120,110,150,0.11);
        z-index: var(--dg-z-nav);
        box-shadow: none;
        backdrop-filter: blur(var(--dg-glass-blur));
        -webkit-backdrop-filter: blur(var(--dg-glass-blur));
    }

    html.dg-standalone-pwa {
        --safe-bottom: 0px;
        --dg-mobile-bottom-nav-height: 62px;
    }


    html.dg-standalone-pwa body.ios-device {
        --dg-mobile-bottom-nav-height: 62px;
    }

    html.dg-standalone-pwa body.ios-device .dg-mobile-bottom-nav {
        bottom: 0 !important;
        height: 62px !important;
        padding-bottom: 8px !important;
    }

        .dg-mobile-bottom-nav .dg-mobile-nav-item {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            height: 54px;
            padding: 0 4px;
            border: none;
            background: none;
            color: var(--c-text);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s ease, opacity 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

            .dg-mobile-bottom-nav .dg-mobile-nav-upload {
                position: relative;
                isolation: isolate;
                color: #fff;
                overflow: visible;
                z-index: 0;
            }

                .dg-mobile-bottom-nav .dg-mobile-nav-upload::before,
                .dg-mobile-bottom-nav .dg-mobile-nav-upload::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    border-radius: 999px;
                    pointer-events: none;
                    transform: translate(-50%, -50%);
                }

                .dg-mobile-bottom-nav .dg-mobile-nav-upload::before {
                    width: 28px;
                    height: 28px;
                    background:
                        radial-gradient(circle, rgba(255, 255, 255, 0) 42%, rgba(135, 82, 214, 0.10) 52%, rgba(128, 76, 207, 0.34) 70%, rgba(115, 69, 188, 0.48) 86%, rgba(255, 255, 255, 0.12) 100%);
                    border: 0;
                    box-shadow:
                        0 0 0 1px rgba(126, 77, 207, 0.30),
                        0 0 14px rgba(126, 77, 207, 0.24);
                    z-index: 0;
                }

                .dg-mobile-bottom-nav .dg-mobile-nav-upload::after {
                    width: 28px;
                    height: 28px;
                    background:
                        radial-gradient(circle, rgba(255, 255, 255, 0) 54%, rgba(0, 0, 0, 0.06) 86%, rgba(0, 0, 0, 0.16) 100%);
                    border: 1px solid rgba(0, 0, 0, 0.68);
                    box-shadow:
                        inset 0 0 10px rgba(137, 89, 215, 0.10);
                    backdrop-filter: blur(12px) saturate(140%);
                    -webkit-backdrop-filter: blur(12px) saturate(140%);
                    z-index: 1;
                }

            .dg-mobile-bottom-nav .dg-mobile-nav-item i,
            .dg-mobile-bottom-nav .dg-mobile-nav-item .lucide {
                width: 24px;
                height: 24px;
            }

            .dg-mobile-bottom-nav .dg-mobile-nav-upload i,
            .dg-mobile-bottom-nav .dg-mobile-nav-upload .lucide,
            .dg-mobile-bottom-nav .dg-mobile-nav-upload svg {
                position: relative;
                z-index: 2;
                color: #111;
                stroke: #111;
                filter: drop-shadow(0 0 3px rgba(137, 89, 215, 0.32));
            }

            .dg-mobile-bottom-nav .dg-mobile-nav-item:active {
                opacity: 0.7;
            }

        .dg-mobile-bottom-nav .auth-only {
            display: none !important;
        }

        .dg-mobile-bottom-nav .anon-only {
            display: inline-flex !important;
        }
        /* Гость: иконки фиксированные, кнопки фиксированные */
        .dg-mobile-bottom-nav .dg-mobile-nav-gallery,
        .dg-mobile-bottom-nav .dg-mobile-nav-articles {
            flex: 0 0 56px;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-login,
        .dg-mobile-bottom-nav .dg-mobile-nav-register {
            flex: 0 0 auto;
            max-width: none;
            font-size: 14px;
            font-weight: 600;
            border-radius: 999px;
            padding: 0 10px;
            height: 40px;
            min-height: 40px;
            white-space: nowrap;
            justify-content: center;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-login {
            width: 105px;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-register {
            width: 118px;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-login {
            border: 1px solid var(--c-border);
            background: #f9fafb;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-register {
            border: 1px solid transparent;
            background: var(--c-primary);
            color: #fff;
            margin-right: 8px;
        }

    body.dg-auth-logged-in .dg-mobile-bottom-nav .auth-only {
        display: inline-flex !important;
    }

    body.dg-auth-logged-in .dg-mobile-bottom-nav .anon-only {
        display: none !important;
    }
    /* Залогин: все 5 кнопок распределены равномерно. */
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-gallery,
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-articles,
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-upload,
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-messages,
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-notifications,
    body.dg-auth-logged-in .dg-mobile-bottom-nav .dg-mobile-nav-profile {
        flex: 1 1 0;
    }

    .dg-mobile-bottom-nav .dg-mobile-nav-item.active {
        color: var(--c-primary);
    }
    /* После закрытия модалки (нет блокировки скролла) — принудительно показывать поиск и нижнюю панель */
    body:not(.dg-scroll-locked) .dg-mobile-bottom-nav {
        display: flex !important;
    }

    /* Keep the navigation mounted while media is open. The modal and its
       backdrop cover it by layer, so closing needs no separate nav restore. */
    /* Страница сообщений: даём место под нижнюю навигацию, чтобы она не перекрывала диалоги и чат */
    body.dg-page-messages .dg-messages-page-wrap {
        padding-bottom: var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)));
    }

    body:not(.dg-scroll-locked):not(.dg-page-messages) .dg-mobile-top-search {
        display: block !important;
    }
    /* Контент не перекрывается нижней панелью */
    .dg-layout-with-sidebar,
    .dg-main-with-sidebar {
        padding-bottom: calc(56px + var(--safe-bottom));
    }
    /* Профиль на мобиле: высота по контенту (без пустого низа); не выше области над нижней навигацией */
    #profileModal .modal-content.modal-large {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 100%;
        min-height: 0;
        margin: 0;
        border-radius: 0;
    }
    /* Модалки сообщений и профиля не перекрывают нижнюю панель — кнопки снизу остаются видимыми */
    #messagesModal.modal.show,
    #profileModal.modal.show {
        bottom: var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)));
        align-items: flex-end;
    }

        #messagesModal.modal.show .modal-content,
        #profileModal.modal.show .modal-content {
            max-height: calc(100% - 8px);
        }
}

/* ===== Страница /messages: по аналогии с модалкой (body.dg-messages-page #messagesModal).
   Мобильная логика модалки: одна шапка (.modal-header), #chatHeader скрыт, список ИЛИ чат,
   форма в потоке (flex), скролл только у #chatMessages. Здесь то же самое + кнопка «назад» в шапке. ===== */
body.dg-page-messages .dg-mobile-top-search {
    display: none !important;
}

#messagesPageRoot .dg-messages-page-search-logo {
    display: none;
}

@media (max-width: 640px) {
    #messagesPageRoot:has(.messages-container.show-threads) .dg-messages-page-search-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }
}

/* Как в модалке: вторая шапка (#chatHeader) не показываем */
#messagesPageRoot #chatHeader.dg-messages-page-chat-header-hidden,
#messagesPageRoot .dg-messages-page-chat-header-hidden {
    display: none !important;
}

/* В режиме чата: лупу в шапке скрыть */
#messagesPageRoot:has(.messages-container.show-chat) #dgModalThreadsSearchBtn {
    display: none !important;
}

/* Список диалогов: в шапке только поле ввода поиска (всё остальное скрыто) */
#messagesPageRoot:has(.messages-container.show-threads) #messagesModalTitle,
#messagesPageRoot:has(.messages-container.show-threads) #messagesModalPeerTitle,
#messagesPageRoot:has(.messages-container.show-threads) #dgMessagesPageClose,
#messagesPageRoot:has(.messages-container.show-threads) #dgMessagesPageKebab,
#messagesPageRoot:has(.messages-container.show-threads) #dgModalThreadsSearchBtn,
#messagesPageRoot:has(.messages-container.show-threads) .dg-messages-page-header-center {
    display: none !important;
}

/* Список диалогов: поле поиска на всю ширину шапки */
#messagesPageRoot:has(.messages-container.show-threads) #dgModalThreadsSearchInput {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

    #messagesPageRoot:has(.messages-container.show-threads) #dgModalThreadsSearchInput[hidden] {
        display: block !important; /* на мобиле в списке диалогов инпут всегда виден */
    }

/* Поиск диалогов на странице: как в мобильной модалке — кнопка и поле в одном стиле с сайтом */
#messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 2px solid var(--c-border);
    border-radius: 9999px;
    background: #fff;
    color: var(--c-text, #111);
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s;
}

#messagesPageRoot #dgModalThreadsSearchBtn:hover,
#messagesPageRoot #dgModalThreadsSearchBtn:focus-visible {
    border-color: var(--c-primary);
}

#messagesPageRoot #dgModalThreadsSearchBtn svg,
#messagesPageRoot #dgModalThreadsSearchBtn .lucide {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* Поле ввода поиска — как в мобильной модалке (капсула, фон F9FAFB, фокус — primary) */
#messagesPageRoot #dgModalThreadsSearchInput.threads-search-input {
    height: 36px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    background: #F9FAFB;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#messagesPageRoot #dgModalThreadsSearchInput[hidden] {
    display: none !important;
}

#messagesPageRoot #dgModalThreadsSearchInput:focus {
    border-color: var(--c-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(139,92,246,.10);
}

/* В режиме чата: крестик закрыть скрыть, кнопку «3 точки» показать */
#messagesPageRoot:has(.messages-container.show-chat) #dgMessagesPageClose {
    display: none !important;
}

#messagesPageRoot:has(.messages-container.show-chat) #dgMessagesPageKebab {
    display: inline-flex !important;
}

#messagesPageRoot:has(.messages-container.show-threads) #dgMessagesPageKebab {
    display: none !important;
}

/* Шапка: слева назад, по центру peer, справа поиск/кebab/закрыть */

#messagesPageRoot .dg-messages-page-header-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    #messagesPageRoot .dg-messages-page-header-center .dg-messages-page-title {
        margin: 0;
    }

    #messagesPageRoot .dg-messages-page-header-center .messages-modal-peer-title {
        justify-content: center;
    }

#messagesPageRoot .dg-messages-page-back-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

#messagesPageRoot .dg-messages-page-back-arrow-icon {
    width: 18px;
    height: 18px;
    display: block;
}

#messagesPageRoot .dg-messages-page-kebab {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-muted, #6b7280);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.dg-messages-page-wrap {
    display: flex;
    flex-direction: column;
    /* 100dvh следует за layout viewport при клавиатуре (viewport-fit + interactive-widget);
       не привязываем к visualViewport.height из JS — иначе дёргается вся оболочка и шапка. */
    min-height: calc(100vh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
    min-height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
    padding-bottom: 0;
    background: #fff;
}
/* Мобила: фиксированная высота, чтобы скролл был внутри #chatMessages, а не у всей страницы */
@media (max-width: 640px) {
    body.dg-page-messages .dg-messages-page-wrap {
        /* Важно: место под нижнюю панель уже вычитается из высоты выше,
           поэтому padding-bottom дублировать нельзя (иначе textarea уезжает вверх). */
        padding-bottom: 0 !important;
        height: calc(100vh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        max-height: calc(100vh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        max-height: calc(100dvh - var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom))));
        overflow: hidden;
    }
}

#messagesPageRoot {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background: #fff;
    border-radius: 0;
}

    #messagesPageRoot .dg-messages-page-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
        padding: 12px 16px;
        padding-top: max(12px, var(--safe-top));
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
        border-bottom: 1px solid var(--c-border);
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    #messagesPageRoot .dg-messages-page-title {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    #messagesPageRoot .dg-messages-page-close {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--c-muted);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    #messagesPageRoot .dg-messages-page-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #messagesPageRoot .messages-container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
        /* Окно списка диалогов: не скроллится, только .threads-scroll */
        #messagesPageRoot .messages-container.show-threads #threadsList {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            overflow: hidden;
            padding: 12px 12px calc(12px + var(--safe-bottom)) 12px;
            overscroll-behavior: contain;
        }

        @media (max-width: 640px) {
            #messagesPageRoot .messages-container.show-threads #threadsList {
                padding-top: 4px;
            }
        }

            #messagesPageRoot .messages-container.show-threads #threadsList .threads-scroll {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y;
            }

        #messagesPageRoot .messages-container.show-threads:not(.chat-entering) #chatPane {
            display: none !important;
        }

        #messagesPageRoot .messages-container.show-chat #threadsList {
            display: none !important;
        }

        #messagesPageRoot .messages-container.show-chat #chatPane {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

    #messagesPageRoot #chatHeader {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 8px 12px;
        padding-left: max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
        border-bottom: 1px solid var(--c-border);
        background: #fff;
    }

        #messagesPageRoot #chatHeader .chat-peer {
            cursor: pointer;
        }

    #messagesPageRoot .dg-messages-page-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 22px;
        color: var(--c-muted);
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #messagesPageRoot #chatMessages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 12px;
    }

    #messagesPageRoot #chatForm {
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 12px calc(8px + var(--safe-bottom)) 12px;
        padding-left: max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
        border-top: none;
        background: transparent;
        touch-action: manipulation;
    }

body.dg-theme-dark #messagesPageRoot #chatForm {
    background: transparent !important;
    border-top: none !important;
}

#messagesPageRoot #chatForm .chat-input,
#messagesPageRoot #chatForm #chatInput {
    flex: 1 1 auto;
    min-width: 0;
}

#messagesPageRoot #chatForm .chat-send-btn,
#messagesPageRoot #chatForm button[type="submit"] {
    flex: 0 0 auto;
}

/* Мобила: поле ввода фиксировано внизу, скроллится только лента; резерв из JS, минимум 120px (iOS/Android) */
@media (max-width: 640px) {
    /* /messages страница: #chatForm fixed, компенсируем padding снизу (без transition — иначе мерцание) */
    #messagesPageRoot .messages-container.show-chat #chatMessages {
        /* Возвращаем связь к flex-потоку: #chatForm НЕ fixed, поэтому padding-bottom тут не нужен. */
        padding-bottom: 0 !important;
    }
    /* модалка: #chatForm в потоке, extra padding не нужен — убрано выше */
    #messagesPageRoot .messages-container.show-chat #chatForm {
        /* В нормальном потоке элементы связаны друг с другом:
           #chatMessages автоматически упирается в верх textarea. */
        position: relative !important;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: auto;
        /* Важно: на странице /messages место под нижнюю панель уже отведено,
           при этом визуально как в модалке добавляем внутренний нижний отступ
           (safe-bottom + возможный offset от подсказок). */
        padding: 8px 12px 8px 12px !important;
    }
}

@media (min-width: 641px) {
    .dg-messages-page-wrap {
        min-height: 80vh;
    }

    #messagesPageRoot .messages-container {
        flex-direction: row;
    }

        #messagesPageRoot .messages-container.show-threads #threadsList {
            flex: 0 0 340px;
            width: 340px;
            max-width: 340px;
            border-right: 1px solid var(--c-border);
        }

        #messagesPageRoot .messages-container.show-threads #chatPane {
            display: flex !important;
            flex: 1 1 auto;
            min-height: 0;
        }

        #messagesPageRoot .messages-container.show-chat #threadsList {
            display: block !important;
            flex: 0 0 340px;
            width: 340px;
            max-width: 340px;
            border-right: 1px solid var(--c-border);
        }

        #messagesPageRoot .messages-container.show-chat #chatPane {
            display: flex !important;
            flex: 1 1 auto;
        }
}

@media (prefers-reduced-motion: reduce) {
    .dg-mobile-top-search {
        transition: none;
    }
}

/* iPad portrait density */
@media (min-width: 768px) and (max-width: 819px) {
    .modal-content.modal-large {
        width: min(92vw,900px);
    }
}

@media (min-width: 820px) and (max-width: 900px) {
    .modal-content.modal-large {
        width: min(92vw,1000px);
    }
}

/* GPU stabilizer for interactive buttons (упрощённый, без принудительного GPU) */
.overlay-actions > button,
.overlay-actions .more-btn,
.overlay-actions .report-btn,
.doll-actions-overlay > button,
.doll-actions-overlay .more-btn,
.doll-actions-overlay .report-btn,
.like-button,
.modal-close {
    z-index: 10; /* оставляем только слой по z, без translateZ / isolation */
}


/* === БАР ФИЛЬТРОВ С ДЕЙСТВИЯМИ СПРАВА === */
.filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* теги слева, действия справа */
    gap: 12px;
    flex-wrap: wrap; /* на узких экранах перенос */
    row-gap: 10px;
}

.filters-actions {
    margin-left: auto; /* прижать к правому краю контейнера */
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .filters-actions {
        width: 100%;
        justify-content: flex-end; /* на мобилке — отдельной строкой справа */
    }
}


/* Контейнер с пилюлями подтегов */
#subtagDropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* было 8px */
    padding: 2px 4px 4px; /* было 6px 4px — убрали верхний «воздух» */
    margin-top: 2px; /* добавили небольшой сдвиг кверху */
}
    /* Убираем дефолтные отступы у кнопок внутри */
    #subtagDropdown .filter-tag {
        margin: 0;
    }

.pill.active {
    outline: 2px solid var(--c-primary);
}


/* ===== Авторские отзывы — компактное выравнивание ===== */

.author-review {
    background: #F9FAFB;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 16px;
}

body:not(.dg-theme-dark) .author-review {
    background: var(--dg-message-surface-light) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.author-review + .author-review {
    margin-top: 10px;
}

.author-review-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.author-review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.author-review-author {
    margin-left: 8px;
    font-weight: 600;
}

.author-review-date {
    margin-left: auto;
    font-size: 12px;
    color: #6B7280;
}

/* НОВЫЙ КОМПАКТНЫЙ БЛОК */
.author-review-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 4px;
}

/* Оценка слева */
.author-review-rating {
    font-weight: 600;
    color: #4B5563;
    white-space: nowrap;
}

/* Текст отзыва */
.author-review-body {
    color: var(--c-muted, #374151);
}

/* Заголовок (если есть) */
.author-review-title {
    margin-top: 2px;
    font-weight: 500;
    color: #111827;
}

/* Блок кнопок */
.author-review-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#profileModal [data-author-reviews] .reviews-controls {
    min-width: 0;
}

#profileModal [data-author-reviews] .reviews-controls select.input {
    box-sizing: border-box;
    width: min(220px, 100%);
    max-width: 100%;
    min-height: 38px;
    line-height: 20px;
    padding: 8px 40px 8px 12px;
    border-radius: 9999px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

body:not(.dg-theme-dark) #profileModal [data-author-reviews] .reviews-controls select.input {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
    #profileModal [data-author-reviews] .reviews-controls,
    #profileModal [data-author-reviews] .reviews-controls select.input {
        width: 100%;
    }
}

body:not(.dg-theme-dark) .author-review-author {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body:not(.dg-theme-dark) .author-review-date,
body:not(.dg-theme-dark) .author-review-rating,
body:not(.dg-theme-dark) .author-review-body,
body:not(.dg-theme-dark) .author-review-title,
body:not(.dg-theme-dark) .author-review-reply summary,
body:not(.dg-theme-dark) .author-review-reply-body,
body:not(.dg-theme-dark) .author-review .text-secondary {
    color: rgba(17, 24, 39, 0.78) !important;
    -webkit-text-fill-color: rgba(17, 24, 39, 0.78) !important;
}

body:not(.dg-theme-dark) .author-review-title {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body:not(.dg-theme-dark) .author-review-actions .btn-secondary {
    background: var(--dg-message-surface-light-soft) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body:not(.dg-theme-dark) .author-review-actions .btn-secondary:hover,
body:not(.dg-theme-dark) .author-review-actions .btn-secondary:focus-visible {
    background: var(--dg-message-surface-light-hover) !important;
    border-color: var(--dg-message-border-light) !important;
}

body:not(.dg-theme-dark) .author-review-collapse {
    background: var(--dg-message-surface-light-soft) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body:not(.dg-theme-dark) .author-review-collapse:hover,
body:not(.dg-theme-dark) .author-review-collapse:focus-visible {
    background: var(--dg-message-surface-light-hover) !important;
    border-color: var(--dg-message-border-light) !important;
}
/* ===== Светлая тема: UI как на Android (не «синий Safari/WebKit») ===== */
/* Текст/иконки шапки, меню, оверлеев — явно тёмные (#111, currentColor). */
/* «Стекло» hero/sidebar/фильтров — только iOS + светлая тема (класс ios-device в разметке). */

/* iOS: sidebar/dropdowns desktop glass */
body.ios-device:not(.dg-theme-dark) .dg-left-sidebar,
body.ios-device:not(.dg-theme-dark) .tag-dropdown,
body.ios-device:not(.dg-theme-dark) #subtagDropdown,
body.ios-device:not(.dg-theme-dark) .filters-container {
    background: rgba(255, 255, 255, 0.70) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none !important;
}
/* iOS hero/contest/giveaway: как пузырь сообщения */
body.ios-device:not(.dg-theme-dark) .home-hero,
body.ios-device:not(.dg-theme-dark) .dg-contest-week,
body.ios-device:not(.dg-theme-dark) .dg-giveaway-hero {
    background: var(--dg-message-surface-light) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    box-shadow: none !important;
}

/* Модалка фильтров на телефоне: тот же фон полотна, что и страница (без glass) */
body.ios-device:not(.dg-theme-dark) .dg-filters-sheet.modal-content {
    background: var(--c-bg-canvas) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.ios-device:not(.dg-theme-dark) .filter-tag,
body.ios-device:not(.dg-theme-dark) .filters .filter-tag {
    background: var(--dg-message-surface-light) !important;
    border-color: var(--dg-message-border-light) !important;
    backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
}

    body.ios-device:not(.dg-theme-dark) .filter-tag.active,
    body.ios-device:not(.dg-theme-dark) .filters .filter-tag.active {
        border-color: var(--c-primary) !important;
        box-shadow: 0 0 0 1px var(--c-primary) inset !important;
    }

/* iOS dark: sidebar/dropdowns glass */
body.ios-device.dg-theme-dark .dg-left-sidebar,
body.ios-device.dg-theme-dark .dg-filters-sheet {
    background: rgba(15, 15, 18, 0.62) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* iOS dark hero/contest/giveaway: surface-dark без blur */
body.ios-device.dg-theme-dark .home-hero,
body.ios-device.dg-theme-dark .dg-contest-week,
body.ios-device.dg-theme-dark .dg-giveaway-hero {
    background: rgba(24,24,30,0.82) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}



body:not(.dg-theme-dark) .nav-icon-btn,
body:not(.dg-theme-dark) .nav-search-toggle,
body:not(.dg-theme-dark) .search-container .nav-search-icon,
body:not(.dg-theme-dark) #threadsList .threads-search-btn,
body:not(.dg-theme-dark) .like-button,
body:not(.dg-theme-dark) .like-btn,
body:not(.dg-theme-dark) .msg-more-btn,
body:not(.dg-theme-dark) .dg-vk-kebab,
body:not(.dg-theme-dark) .overlay-actions > button,
body:not(.dg-theme-dark) .overlay-actions .more-btn,
body:not(.dg-theme-dark) .overlay-actions .report-btn,
body:not(.dg-theme-dark) .doll-actions-overlay > button,
body:not(.dg-theme-dark) .doll-actions-overlay .more-btn,
body:not(.dg-theme-dark) .doll-actions-overlay .report-btn,
body:not(.dg-theme-dark) .filters .mobile-filter-btn,
body:not(.dg-theme-dark) .dg-sale-back,
body:not(.dg-theme-dark) .modal-close,
body:not(.dg-theme-dark) .lightbox-close,
/* меню: WebKit часто красит пункты в синий */
body:not(.dg-theme-dark) .dropdown-menu,
body:not(.dg-theme-dark) .dropdown-menu a,
body:not(.dg-theme-dark) .dropdown-item,
body:not(.dg-theme-dark) .dropdown-item span {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-decoration: none !important;
}




/* ✅ Светлая тема: бейджи на карточке — белый текст/иконки (карточка может быть <a>) */
body:not(.dg-theme-dark) .dg-card-badge,
body:not(.dg-theme-dark) .dg-card-badge::after,
body:not(.dg-theme-dark) .dg-card-badge * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body:not(.dg-theme-dark) .dg-card-badge svg,
    body:not(.dg-theme-dark) .dg-card-badge svg *,
    body:not(.dg-theme-dark) .dg-card-badge .lucide,
    body:not(.dg-theme-dark) .dg-card-badge i[data-lucide] {
        stroke: #fff !important;
        fill: none !important;
    }

/* ✅ Светлая тема: for-sale-badge — белый */
body:not(.dg-theme-dark) .for-sale-badge,
body:not(.dg-theme-dark) .for-sale-badge * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}



/* lucide / svg (светлая тема) */
body:not(.dg-theme-dark) svg.lucide,
body:not(.dg-theme-dark) .dropdown-item svg,
body:not(.dg-theme-dark) .nav-icon-btn svg,
body:not(.dg-theme-dark) .nav-search-toggle svg,
body:not(.dg-theme-dark) .search-container .nav-search-icon,
body:not(.dg-theme-dark) #threadsList .threads-search-btn svg,
body:not(.dg-theme-dark) #messagesModal .threads-search-btn svg {
    stroke: currentColor !important;
    fill: none !important;
}

/* ✅ Светлая тема: залайканное сердце — фиолетовое (перебивает fill:none выше) */
body:not(.dg-theme-dark) .like-button.liked .lucide,
body:not(.dg-theme-dark) .like-button.liked svg.lucide,
body:not(.dg-theme-dark) .like-button.liked svg.lucide *,
body:not(.dg-theme-dark) .like-button.liked i[data-lucide="heart"],
body:not(.dg-theme-dark) .like-btn.liked .lucide,
body:not(.dg-theme-dark) .like-btn.liked svg.lucide,
body:not(.dg-theme-dark) .like-btn.liked svg.lucide *,
body:not(.dg-theme-dark) .like-btn.liked i[data-lucide="heart"] {
    stroke: var(--c-primary) !important;
    fill: var(--c-primary) !important;
}

/* ✅ Светлая тема: контур бейджа и лайка */
body:not(.dg-theme-dark) .dg-card-badge {
    border-color: rgba(255,255,255,.95) !important;
}

body:not(.dg-theme-dark) .like-button {
    box-shadow: 0 0 0 1px rgba(255,255,255,.95) inset, 0 1px 2px rgba(0,0,0,.06) !important;
}


/* ✅ Светлая тема: лупа в списке диалогов (инлайн stroke в WebKit) */
body:not(.dg-theme-dark) #threadsList .threads-search-btn,
body:not(.dg-theme-dark) #messagesModal .threads-search-btn {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

    body:not(.dg-theme-dark) #threadsList .threads-search-btn svg,
    body:not(.dg-theme-dark) #threadsList .threads-search-btn svg *,
    body:not(.dg-theme-dark) #messagesModal .threads-search-btn svg,
    body:not(.dg-theme-dark) #messagesModal .threads-search-btn svg * {
        stroke: #111 !important;
        fill: none !important;
    }

/* WebKit: лупа в модалке сообщений — светлая / тёмная тема отдельно */
@supports (-webkit-touch-callout: none) {
    body:not(.dg-theme-dark) #messagesModal .threads-search-btn {
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

        body:not(.dg-theme-dark) #messagesModal .threads-search-btn svg,
        body:not(.dg-theme-dark) #messagesModal .threads-search-btn svg * {
            stroke: #111 !important;
            fill: none !important;
        }

    body.dg-theme-dark #messagesModal .threads-search-btn {
        color: var(--c-text) !important;
        -webkit-text-fill-color: var(--c-text) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

        body.dg-theme-dark #messagesModal .threads-search-btn svg,
        body.dg-theme-dark #messagesModal .threads-search-btn svg * {
            stroke: var(--c-text) !important;
            fill: none !important;
        }
}



/* ✅ Светлая тема: в профиле Avito/Отзывы — фиолетовый (перебиваем общий a) */
body:not(.dg-theme-dark) #profileModal .profile-actions .dg-profile-ext-btn,
body:not(.dg-theme-dark) #profileModal .profile-actions .dg-profile-ext-btn:link,
body:not(.dg-theme-dark) #profileModal .profile-actions .dg-profile-ext-btn:visited,
body:not(.dg-theme-dark) #profileModal .profile-actions .dg-profile-ext-btn:hover,
body:not(.dg-theme-dark) #profileModal .profile-actions .dg-profile-ext-btn:active {
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
}

/* ✅ Светлая тема: соц-ссылки в бургере — фиолетовый (где бы ни был media; <a> иначе ловит общий a:link #111) */
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item:link,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item:visited,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item:hover,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item:active,
body:not(.dg-theme-dark) #profileModal .dg-profile-burger-socials a.dg-profile-burger-item:focus-visible {
    color: var(--c-primary, #8B5CF6) !important;
    -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
}

/* ✅ Тёмная тема: те же кнопки — фиолетовый акцент */
body.dg-theme-dark #profileModal .profile-actions .dg-profile-ext-btn,
body.dg-theme-dark #profileModal .profile-actions .dg-profile-ext-btn:link,
body.dg-theme-dark #profileModal .profile-actions .dg-profile-ext-btn:visited,
body.dg-theme-dark #profileModal .profile-actions .dg-profile-ext-btn:hover,
body.dg-theme-dark #profileModal .profile-actions .dg-profile-ext-btn:active {
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
}




/* Светлая тема: lucide — currentColor (родитель уже #111) */
body:not(.dg-theme-dark) .nav-icon-btn .lucide,
body:not(.dg-theme-dark) .nav-search-toggle .lucide,
body:not(.dg-theme-dark) #threadsList .threads-search-btn .lucide,
body:not(.dg-theme-dark) .msg-more-btn .lucide,
body:not(.dg-theme-dark) .overlay-actions .lucide,
body:not(.dg-theme-dark) .doll-actions-overlay .lucide,
body:not(.dg-theme-dark) .filters .mobile-filter-btn .lucide,
body:not(.dg-theme-dark) svg.lucide {
    stroke: currentColor !important;
    fill: none !important;
}

/* Лайтбокс: на тёмном оверлее закрытие и стрелки — белые (как .dg-lb-nav в базовых стилях), не #111 */
body:not(.dg-theme-dark) .dg-lightbox .dg-lb-close,
body.dg-theme-dark .dg-lightbox .dg-lb-close {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-close svg,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-close .lucide,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-close svg *,
    body.dg-theme-dark .dg-lightbox .dg-lb-close svg,
    body.dg-theme-dark .dg-lightbox .dg-lb-close .lucide,
    body.dg-theme-dark .dg-lightbox .dg-lb-close svg * {
        stroke: #fff !important;
        fill: none !important;
    }

body:not(.dg-theme-dark) .dg-lightbox .dg-lb-nav,
body.dg-theme-dark .dg-lightbox .dg-lb-nav {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-nav svg,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-nav .lucide,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-nav svg *,
    body.dg-theme-dark .dg-lightbox .dg-lb-nav svg,
    body.dg-theme-dark .dg-lightbox .dg-lb-nav .lucide,
    body.dg-theme-dark .dg-lightbox .dg-lb-nav svg * {
        stroke: #fff !important;
        fill: none !important;
    }

    /* Светлая тема: страховка для svg не-lucide */
    body:not(.dg-theme-dark) .nav-icon-btn svg,
    body:not(.dg-theme-dark) .nav-search-toggle svg,
    body:not(.dg-theme-dark) #threadsList .threads-search-btn svg,
    body:not(.dg-theme-dark) .msg-more-btn svg,
    body:not(.dg-theme-dark) .overlay-actions svg,
    body:not(.dg-theme-dark) .doll-actions-overlay svg,
    body:not(.dg-theme-dark) .filters .mobile-filter-btn svg,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-close svg,
    body:not(.dg-theme-dark) .dg-lightbox .dg-lb-nav svg {
        stroke: currentColor !important;
        fill: none !important;
    }

/* Тёмная тема: те же зоны — светлые иконки там, где шапка/оверлей уже светлые (см. блок Dark theme UX tweaks) */
body.dg-theme-dark .msg-more-btn .lucide,
body.dg-theme-dark .msg-more-btn svg,
body.dg-theme-dark .overlay-actions .lucide,
body.dg-theme-dark .doll-actions-overlay .lucide {
    stroke: currentColor !important;
    fill: none !important;
}


/* ===== Winners ===== */
.dg-winners-list {
    display: grid;
    gap: 10px;
}

.dg-winner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* место — как короткий лейбл */
.dg-winner-place {
    flex: 0 0 auto;
    min-width: 64px;
    font-weight: 700;
    opacity: .7;
    white-space: nowrap;
}

/* ВАЖНО: перебиваем любые глобальные img-стили в модалке */
#giveawayResultsModal .dg-winner-avatar {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.dg-winner-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* чтобы текст нормально ужимался */
}

.dg-winner-name {
    font-weight: 600;
    line-height: 1.2;
}

.dg-winner-reward {
    font-size: 13px;
    opacity: .7;
    line-height: 1.2;
}

/* окно уже на ПК, но на мобиле — нормальные отступы */
#giveawayResultsModal .modal-content {
    max-width: 760px;
    width: calc(100vw - 32px);
}

@media (max-width: 640px) {
    #giveawayResultsModal .modal-content {
        max-width: 100vw;
        width: calc(100vw - 16px); /* меньше поля на телефоне */
    }

    .dg-winner-place {
        min-width: 56px; /* чуть компактнее */
    }
}
/* =========================
   Activity modal/feed
   ========================= */
.dg-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#activityModal .modal-body {
    position: relative;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

#activityModal .modal-content.modal-large {
    height: auto;
    max-height: 90dvh !important;
    overflow: hidden;
}

@media (min-width: 641px) {
    #activityModal .modal-content.modal-large {
        width: min(92vw, 680px);
    }
}

:is(#notificationsModal, #activityModal) .modal-content.dg-modal-resizing {
    transition: height var(--dg-motion-reveal, 240ms) var(--dg-motion-ease-out, ease-out) !important;
    will-change: height;
}

#activityModal .dg-activity-feed,
#activityModal .dg-activity-row,
#activityModal .dg-activity-main,
#activityModal .dg-activity-text,
#activityModal .dg-activity-username {
    min-width: 0;
    max-width: 100%;
}

#activityModal .dg-activity-text,
#activityModal .dg-activity-username {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#activityModal .dg-activity-feed:empty {
    min-height: 96px;
}

#activityModal .dg-activity-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.dg-activity-feed.dg-activity-feed--reveal .dg-activity-row {
    animation: dgActivityRowReveal var(--dg-motion-reveal, 240ms) var(--dg-motion-ease-out, ease-out) both;
}

.dg-activity-feed.dg-activity-feed--reveal .dg-activity-row:nth-child(n+9) {
    animation-delay: 80ms;
}

@keyframes dgActivityRowReveal {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dg-activity-feed.dg-activity-feed--reveal .dg-activity-row {
        animation: none;
    }
}

.dg-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(0,0,0,0.03);
}

body.dg-theme-dark .dg-activity-row,
html.dg-theme-dark .dg-activity-row {
    border-color: rgba(148, 163, 184, 0.28);
}

.dg-activity-ava {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

    .dg-activity-ava img {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        object-fit: cover;
        display: block;
    }

.dg-activity-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 2px #fff;
    display: none;
}

.dg-activity-ava.is-online .dg-activity-online-dot {
    display: block;
}

.dg-activity-no-ava,
.dg-activity-ava-wrap.dg-activity-no-ava {
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    background: transparent;
}

.dg-activity-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-activity-topline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.dg-activity-username {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-activity-title {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0.72;
}

.dg-activity-time {
    font-size: 12px;
    opacity: 0.65;
    white-space: nowrap;
}

.dg-activity-text {
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dg-activity-doll {
    color: #6d28d9;
    -webkit-text-fill-color: #6d28d9;
    font-weight: 700;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: rgba(109, 40, 217, 0.22);
}

    .dg-activity-doll:hover,
    .dg-activity-doll:active,
    .dg-activity-doll:focus-visible {
        text-decoration: underline;
    }

body.dg-theme-dark .dg-activity-doll,
html.dg-theme-dark .dg-activity-doll,
html.dg-standalone-pwa body.dg-theme-dark .dg-activity-doll,
html.dg-standalone-pwa body.ios-device.dg-theme-dark .dg-activity-doll {
    color: #c4b5fd;
    -webkit-text-fill-color: #c4b5fd;
    text-decoration-color: rgba(196, 181, 253, 0.95);
    -webkit-tap-highlight-color: rgba(196, 181, 253, 0.24);
}

.dg-activity-empty,
.dg-activity-loader {
    padding: 14px 4px;
    opacity: 0.75;
}

/* Activity cards: the modal remains the scroll owner. */
#activityModal .modal-content.modal-large { border-radius: 22px; }
#activityModal .modal-header { position: relative; justify-content: center; min-height: 72px; padding: 16px 60px; }
#activityModal .modal-header h2 { margin: 0; font-size: 20px; }
#activityModal .modal-header .dg-modal-back-btn { left: 16px; right: auto; top: 18px; }
#activityModal .modal-body { padding: 0; }
#activityModal .dg-activity-feed { gap: 0; }
#activityModal .dg-activity-row { align-items: flex-start; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; padding: 16px 24px; background: transparent; }
#activityModal .dg-activity-ava, #activityModal .dg-activity-ava img { width: 52px; height: 52px; }
#activityModal .dg-activity-ava { flex-basis: 52px; }
#activityModal .dg-activity-main { gap: 5px; }
#activityModal .dg-activity-username { color: var(--c-text); }
#activityModal .dg-activity-time, #activityModal .dg-activity-text { color: var(--c-text); opacity: .7; }
#activityModal .dg-activity-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 3px; }
#activityModal .dg-activity-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--c-border); border-radius: 12px; background: rgba(var(--c-primary-rgb), .045); color: var(--c-text); cursor: pointer; }
#activityModal .dg-activity-card:is(:hover, :focus-visible, :active) { border-color: var(--c-primary, #a855f7); background: rgba(var(--c-primary-rgb), .1); outline-color: var(--c-primary, #a855f7); }
#activityModal .dg-activity-card--story { border-color: var(--c-primary, #a855f7); background: rgba(var(--c-primary-rgb), .12); }
#activityModal .dg-activity-preview { width: 76px; height: 70px; flex: 0 0 76px; object-fit: cover; border-radius: 8px; }
#activityModal .dg-activity-card-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
#activityModal .dg-activity-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#activityModal .dg-activity-card-copy span { font-size: 13px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#activityModal .dg-activity-card-arrow { font-size: 25px; line-height: 1; padding: 0 6px; color: var(--c-primary, #a855f7); }
#activityModal .dg-activity-card--extra { display: none; }
#activityModal .dg-activity-row--expanded .dg-activity-card--extra { display: flex; }
#activityModal .dg-activity-more { align-self: center; border: 0; background: transparent; color: var(--c-primary, #a855f7); cursor: pointer; padding: 6px 12px; }
#activityModal .dg-activity-more:is(:hover, :focus-visible, :active) { text-decoration: underline; outline-color: var(--c-primary, #a855f7); }
body.dg-theme-dark #activityModal .modal-content { background: #18191f; color: #f4f0f8; border: 1px solid #45404d; }
body.dg-theme-dark #activityModal :is(.dg-activity-row, .dg-activity-card) { border-color: #46404f; }
body.dg-theme-dark #activityModal .dg-activity-card { background: #24232f; color: #f4f0f8; }
body.dg-theme-dark #activityModal .dg-activity-card--story { background: #30253e; border-color: #a855f7; }
body.dg-theme-dark #activityModal :is(.dg-activity-username, .dg-activity-time, .dg-activity-text) { color: #f4f0f8; }
body.dg-theme-dark #activityModal .dg-activity-card:is(:hover, :focus-visible, :active) { background: #373047; border-color: #c084fc; }
@media (max-width: 640px) {
    #activityModal .modal-header { min-height: 64px; padding: 12px 52px; }
    #activityModal .modal-header h2 { font-size: 17px; }
    #activityModal .modal-header .dg-modal-back-btn { left: 8px; top: 14px; }
    #activityModal .dg-activity-row { padding: 13px 12px; gap: 9px; }
    #activityModal .dg-activity-ava, #activityModal .dg-activity-ava img { width: 40px; height: 40px; }
    #activityModal .dg-activity-ava { flex-basis: 40px; }
    #activityModal .dg-activity-preview { width: 58px; height: 62px; flex-basis: 58px; }
}

/* ----------------------------------------------------------------------
   BLOG: общий стиль с главной (один styles.css), hero + список + страница статьи
   ---------------------------------------------------------------------- */

.main-content.dg-blog-hero-wrap {
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* ПК: верх сайдбара и hero — одна линия с шапкой (убираем разный padding 16px / 24px). */
@media (min-width: 641px) {
    .dg-layout-with-sidebar:not(.dg-layout-no-sidebar) .dg-left-sidebar .dg-sidebar-inner {
        padding-top: 0;
    }

    .dg-layout-with-sidebar:not(.dg-layout-no-sidebar) .main-content.dg-blog-hero-wrap {
        padding-top: 0;
    }
}

.dg-blog-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4px 16px 72px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.dg-blog-header {
    margin-bottom: 12px;
}

.dg-blog-title {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dg-blog-empty {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 15px;
}

.dg-blog-breadcrumbs {
    font-size: 14px;
    color: var(--c-muted, #6b7280);
    margin-bottom: 8px;
}

.dg-blog-breadcrumbs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

    .dg-blog-breadcrumbs-row .dg-blog-breadcrumbs {
        margin-bottom: 0;
    }

    .dg-blog-breadcrumbs-row .dg-article-breadcrumbs {
        margin-bottom: 0;
    }

.dg-article-breadcrumb-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.dg-blog-breadcrumbs-row--suggest {
    justify-content: flex-start;
}

.dg-blog-breadcrumbs a {
    color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .dg-blog-breadcrumbs a:hover {
        text-decoration: underline;
    }

@media (min-width: 641px) {
    #dgInfoBreadcrumbBurgerBtn {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #dgInfoBreadcrumbBurgerBtn {
        border-width: 1px;
        border-style: solid;
        width: 34px;
        min-width: 34px;
        height: 28px;
        min-height: 28px;
        padding: 0;
    }

    #dgInfoBreadcrumbBurgerBtn svg {
        width: 18px;
        height: 18px;
    }
}

/* ПК: сетка как на скрине 1 (24px между колонками, 30px между рядами) */
.dg-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 30px;
}

.dg-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(120,110,150,0.10);
    border-radius: 14px;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

    .dg-blog-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(120,110,150,0.10);
        border-color: rgba(120,110,150,0.18);
    }

/* Превью статьи: крупное изображение, под ним только заголовок */
.dg-blog-card-media {
    position: relative;
    width: 100%;
    min-height: 0;
    flex-shrink: 0;
    background: var(--c-bg-light);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.dg-blog-card-ad-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    color: rgba(107, 114, 128, 0.72);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

    .dg-blog-card-media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top;
        vertical-align: top;
    }

.dg-blog-card-body {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

/* Заголовок: длинные обрезаем с ... (макс. 2 строки) */
.dg-blog-card-title {
    font-size: var(--dg-font-body);
    font-weight: 700;
    margin: 0;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.dg-blog-card-footer {
    margin-top: auto;
    padding: 0 16px 14px;
    display: flex;
    justify-content: center;
}

/* Старая кнопка «Читать далее» заменена на стрелку .dg-blog-card-arrow — скрываем на случай кэша */
.dg-blog-card-btn {
    display: none !important;
}

/* Стрелка «вперёд» в карточке (на десктопе — под текстом по центру, как в избранном круг) */
.dg-blog-card-arrow {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--c-border, #e5e7eb);
    background: #fff;
    color: #111;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dg-blog-card-arrow__icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* На ПК в карточках статей стрелку не показываем */
@media (min-width: 641px) {
    .dg-blog-card-footer .dg-blog-card-arrow {
        display: none !important;
    }
}

/* анимации появления; равная высота карточек в ряду сетки */
.dg-blog-list-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 0;
    transform: translateY(12px);
}

    .dg-blog-list-item.dg-blog-visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .4s ease, transform .4s ease;
    }

@media (prefers-reduced-motion: reduce) {
    .dg-blog-list-item {
        opacity: 1;
        transform: none;
    }

        .dg-blog-list-item.dg-blog-visible {
            transition: none;
        }
}

/* Телефон: превью — картинка сверху, заголовок снизу; две колонки */
@media (max-width: 640px) {
    .dg-blog-main {
        padding: 16px 12px 60px;
    }

        .dg-blog-main .dg-blog-list {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 12px;
            row-gap: 14px;
        }

        .dg-blog-main .dg-blog-card {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            height: 100%;
        }

        .dg-blog-main .dg-blog-card-media {
            width: 100%;
            height: auto;
            aspect-ratio: 4/3;
            background: var(--c-bg-light);
        }

            .dg-blog-main .dg-blog-card-media img {
                width: 100%;
                height: 100%;
                min-width: 0;
                min-height: 0;
                border-radius: 0;
                object-fit: cover;
                object-position: top;
            }

        .dg-blog-main .dg-blog-card-body {
            padding: 10px 12px 8px;
            flex: 1;
        }

        .dg-blog-main .dg-blog-card-footer {
            padding: 0 12px 10px;
            margin-top: auto;
        }

            .dg-blog-main .dg-blog-card-footer .dg-blog-card-arrow {
                display: none;
            }

        .dg-blog-main .dg-blog-card-title {
            -webkit-line-clamp: 2;
            font-size: var(--dg-font-xs);
        }

        .dg-blog-main .dg-blog-card {
            border-radius: 12px;
        }
}

.dg-blog-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
    line-height: 1.5;
}

/* Mobile bottom nav: numeric badge for messages */
@media (max-width: 640px) {
    .dg-mobile-bottom-nav .dg-mobile-nav-item {
        position: relative;
    }

        .dg-mobile-bottom-nav .dg-mobile-nav-item .indicator-dot {
            position: absolute;
            top: -3px;
            right: calc(50% - 21px);
            margin: 0;
            pointer-events: none;
        }

        .dg-mobile-bottom-nav .dg-mobile-nav-item .badge {
            position: absolute;
            top: 8px;
            right: 18px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            line-height: 1;
            background: var(--c-primary);
            color: #fff;
            pointer-events: none;
        }
}

@media (max-width: 560px) {
    .dg-blog-main {
        padding: 16px 12px 60px;
    }

        .dg-blog-main .dg-blog-list {
            grid-template-columns: 1fr;
        }
}

/* Страница одной статьи (blog_article.html) */
.dg-article-main {
    max-width: 680px;
    margin: 0 auto;
    padding: 4px 16px 24px;
    font-size: var(--dg-font-body);
    line-height: var(--dg-line-reading);
    color: var(--c-text);
}

@media (max-width: 640px) {
    .dg-layout-with-sidebar:has(> .dg-main-with-sidebar > #dg-article-root) > .dg-main-with-sidebar {
        padding-bottom: 0;
    }

    .dg-article-h1,
    .dg-profile-article-title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.dg-article-breadcrumbs {
    font-size: 16px;
    color: var(--c-text);
    margin-bottom: 8px;
}

    .dg-article-breadcrumbs a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .dg-article-breadcrumbs a:hover {
            text-decoration: underline;
        }

.dg-article-h1 {
    font-size: var(--dg-font-h1);
    line-height: var(--dg-line-heading);
    font-weight: 700;
    margin: 0 0 12px;
    color: #111;
}

.dg-article-lead {
    font-size: var(--dg-font-lead);
    color: #555;
    margin: 0 0 24px;
    line-height: 1.6;
}

.dg-article-body h2 {
    font-size: var(--dg-font-h2);
    line-height: var(--dg-line-heading);
    font-weight: 600;
    margin: 28px 0 12px;
    color: #111;
}

.dg-article-body p {
    margin: 0 0 14px;
}

.dg-article-body h2:first-of-type {
    margin-top: 0;
}

.dg-article-back {
    margin: 0 0 10px;
    font-size: var(--dg-font-sm);
}

    .dg-article-back a {
        color: var(--c-primary, #8B5CF6);
        text-decoration: none;
    }

        .dg-article-back a:hover {
            text-decoration: underline;
        }

/* Ссылки на маркетплейсы в статьях «Кукольные находки»: капсула, фиолетовый акцент */
.dg-article-market-links {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dg-article-market-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: var(--dg-font-sm);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--c-primary, #8B5CF6);
    background: #fff;
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

    .dg-article-market-pill:hover {
        background: rgba(var(--c-primary-rgb), 0.08);
        color: #6d28d9;
        -webkit-text-fill-color: #6d28d9;
        border-color: #7c3aed;
        text-decoration: none;
    }

.dg-article-content {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 1em;
    display: flow-root;
}

.dg-article-pending-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--c-primary-rgb), 0.32);
    border-radius: 8px;
    background: rgba(var(--c-primary-rgb), 0.08);
    color: var(--c-text, #2c2c2c);
    font-size: 14px;
    line-height: 1.45;
}

.dg-pblog-install-btn-shell {
    margin-top: 10px;
    font-weight: 700;
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
}

body.dg-theme-dark .dg-sidebar-light .dg-pblog-install-btn-shell,
html.dg-theme-dark .dg-sidebar-light .dg-pblog-install-btn-shell {
    background: var(--c-primary, #8B5CF6) !important;
    border-color: rgba(var(--c-primary-rgb), 0.85) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-sidebar-light .dg-pblog-install-btn-shell:hover,
    html.dg-theme-dark .dg-sidebar-light .dg-pblog-install-btn-shell:hover {
        background: var(--c-primary-600, #7C3AED) !important;
        border-color: rgba(var(--c-primary-rgb), 0.95) !important;
    }
}

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-full,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-full {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px 0 !important;
        clear: both;
    }

        .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-full img,
        .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-full img {
            object-fit: contain !important;
            width: 100% !important;
            height: auto !important;
        }

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--float,
    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--float,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right {
        float: right;
        clear: right;
        max-width: min(50%, 100%);
        margin: 0 0 12px 16px !important;
        vertical-align: bottom;
        cursor: pointer;
    }

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left {
        float: left;
        clear: left;
        max-width: min(50%, 100%);
        margin: 0 16px 12px 0 !important;
        vertical-align: bottom;
        cursor: pointer;
    }

    .dg-article-content .blog-article-split-row,
    .dg-profile-article-content .blog-article-split-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        width: 100%;
        box-sizing: border-box;
        margin: 0.75em 0;
    }

    .dg-article-content .blog-article-split-row__text,
    .dg-profile-article-content .blog-article-split-row__text {
        min-width: 0;
        word-break: break-word;
        line-height: 1.65;
    }

    .dg-article-content .blog-article-split-row__img,
    .dg-profile-article-content .blog-article-split-row__img {
        min-width: 0;
    }

        .dg-article-content .blog-article-split-row__img .blog-article-img-wrap,
        .dg-profile-article-content .blog-article-split-row__img .blog-article-img-wrap {
            margin: 0 !important;
            max-width: 100% !important;
        }

    .dg-article-content .blog-article-img-wrap,
    .dg-profile-article-content .blog-article-img-wrap {
        display: inline-block;
        vertical-align: middle;
        float: none;
        max-width: 100%;
        cursor: pointer;
        pointer-events: auto;
        background: transparent !important;
        border: none !important;
    }

        .dg-article-content .blog-article-img-wrap img,
        .dg-article-content img[src],
        .dg-profile-article-content .blog-article-img-wrap img,
        .dg-profile-article-content img[src] {
            cursor: pointer;
            pointer-events: auto;
        }

    .dg-article-content .blog-article-img-resize {
        display: none;
    }

@media (min-width: 641px) {
    .dg-article-content img[src],
    .dg-profile-article-content img[src] {
        border-radius: 8px;
    }
}

/* Мобила: чтобы изображения внутри статьи не вызывали горизонтальный скролл */
@media (max-width: 640px) {
    .dg-article-content .blog-article-split-row,
    .dg-profile-article-content .blog-article-split-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dg-article-content .blog-article-split-row__img,
    .dg-profile-article-content .blog-article-split-row__img {
        order: -1;
    }

    .dg-article-content img[src],
    .dg-profile-article-content img[src] {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* На всю ширину колонки только без обтекания; слева/справа — как в редакторе (раньше float глушился !important) */
    .dg-article-content .blog-article-img-wrap:not(.blog-article-img-wrap--float):not(.blog-article-img-wrap--layout-side-left):not(.blog-article-img-wrap--layout-side-right),
    .dg-profile-article-content .blog-article-img-wrap:not(.blog-article-img-wrap--float):not(.blog-article-img-wrap--layout-side-left):not(.blog-article-img-wrap--layout-side-right) {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 12px !important;
        background: transparent !important;
    }

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--float,
    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--float,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right {
        float: right !important;
        clear: right !important;
        width: auto !important;
        max-width: min(50%, 100%) !important;
        margin: 0 0 12px 16px !important;
        height: auto !important;
    }

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left {
        float: left !important;
        clear: left !important;
        width: auto !important;
        max-width: min(50%, 100%) !important;
        margin: 0 16px 12px 0 !important;
        height: auto !important;
    }

    .dg-article-content .blog-article-split-row__img .blog-article-img-wrap,
    .dg-profile-article-content .blog-article-split-row__img .blog-article-img-wrap {
        width: 100% !important;
        margin: 0 0 0 !important;
    }

    .dg-article-content .blog-article-img-wrap:not(.blog-article-img-wrap--float):not(.blog-article-img-wrap--layout-side-left):not(.blog-article-img-wrap--layout-side-right) img,
    .dg-profile-article-content .blog-article-img-wrap:not(.blog-article-img-wrap--float):not(.blog-article-img-wrap--layout-side-left):not(.blog-article-img-wrap--layout-side-right) img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--float img,
    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right img,
    .dg-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left img,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--float img,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-right img,
    .dg-profile-article-content .blog-article-img-wrap.blog-article-img-wrap--layout-side-left img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

.dg-article-content h2 {
    font-size: var(--dg-font-h2);
    line-height: var(--dg-line-heading);
    font-weight: 600;
    margin: 28px 0 12px;
    color: #111;
}

.dg-article-content h3 {
    font-size: var(--dg-font-h3);
    line-height: 1.25;
    font-weight: 600;
    margin: 20px 0 10px;
    color: #111;
}

.dg-article-content p {
    margin: 0 0 14px;
}

.dg-article-content ul,
.dg-article-content ol {
    margin: 0 0 14px;
    padding-left: 1.5em;
}

.dg-article-content li {
    margin: 0 0 4px;
}

/* Лайк в статье (страница + просмотр в профиле) — как .like-button в галерее: иконка и счётчик в ряд внутри круга */
.dg-article-content a,
.dg-profile-article-content a {
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.14em;
}

.dg-article-content a:hover,
.dg-profile-article-content a:hover {
    color: #a78bfa;
    -webkit-text-fill-color: #a78bfa;
    text-decoration: none;
}

.dg-article-actions .like-btn,
.dg-profile-article-actions .like-btn {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08) inset, 0 1px 2px rgba(0, 0, 0, 0.06);
    -webkit-transform: translateZ(0.01px);
    transform: translateZ(0.01px);
    isolation: isolate;
}

.dg-article-comments-btn {
    display: none !important;
}

    .dg-article-actions .like-btn:hover,
    .dg-profile-article-actions .like-btn:hover {
        background: #fff;
        transform: scale(1.04);
    }

    .dg-article-actions .like-btn .lucide,
    .dg-article-actions .like-btn svg.lucide,
    .dg-article-actions .like-btn i[data-lucide="heart"],
    .dg-profile-article-actions .like-btn .lucide,
    .dg-profile-article-actions .like-btn svg.lucide,
    .dg-profile-article-actions .like-btn i[data-lucide="heart"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .dg-article-actions .like-btn .count,
    .dg-profile-article-actions .like-btn .count {
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

@media (max-width: 640px) {
    #dg-article-root .dg-article-actions {
        justify-content: flex-end;
    }

    #dg-article-root #dgInfoBreadcrumbBurgerBtn {
        display: none !important;
    }

    .dg-article-comments-btn {
        display: inline-flex !important;
    }

    .dg-article-actions .like-btn,
    .dg-profile-article-actions .like-btn {
        width: 35px;
        height: 35px;
        min-width: 35px;
        min-height: 35px;
        padding: 0;
    }

        .dg-article-actions .like-btn .lucide,
        .dg-article-actions .like-btn svg.lucide,
        .dg-article-actions .like-btn i[data-lucide="heart"],
        .dg-profile-article-actions .like-btn .lucide,
        .dg-profile-article-actions .like-btn svg.lucide,
        .dg-profile-article-actions .like-btn i[data-lucide="heart"] {
            width: 16px;
            height: 16px;
        }

        .dg-article-actions .like-btn .count,
        .dg-profile-article-actions .like-btn .count {
            font-size: 11px;
        }
}

@media (max-width: 640px) {
    body.dg-mobile-comments-open .dg-content-scroll-top-btn {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #dg-article-root > .dg-article-comments-block {
        position: fixed;
        z-index: var(--dg-z-portal);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(78dvh, 680px);
        max-height: calc(100dvh - 56px);
        margin: 0 !important;
        padding: 0 max(12px, var(--safe-right, env(safe-area-inset-right, 0px))) calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) max(12px, var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
        border: 0 !important;
        border-radius: 18px 18px 0 0;
        background: var(--dg-comments-sheet-bg) !important;
        color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, .24);
        transform: translateY(calc(100% + 24px));
        visibility: hidden;
        pointer-events: none;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    }

    #dg-article-root > .dg-article-comments-block.dg-comments-sheet--open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    #dg-article-root > .dg-article-comments-block > .dg-comments-sheet-header {
        flex: 0 0 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 1px solid var(--dg-comments-sheet-border);
        font-size: 16px;
        font-weight: 600;
    }

    #dg-article-root > .dg-article-comments-block .dg-comments-sheet-close {
        position: absolute;
        top: 8px;
        right: 0;
        display: grid;
        place-items: center;
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--dg-comments-sheet-control);
        color: var(--dg-comments-sheet-text);
        -webkit-text-fill-color: var(--dg-comments-sheet-text);
        touch-action: manipulation;
    }

    #dg-article-root > .dg-article-comments-block .dg-comments-sheet-close :is(svg, .lucide) {
        width: 18px;
        height: 18px;
    }

    #dg-article-root > .dg-article-comments-block > h3 {
        display: none;
    }

    #dg-article-root > .dg-article-comments-block > #dgArticleCommentsList {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 10px 2px;
    }

    #dg-article-root > .dg-article-comments-block > #dg-article-comment-login-hint,
    #dg-article-root > .dg-article-comments-block > #dg-article-comment-form-wrap {
        flex: 0 0 auto;
    }

    #dg-article-root > .dg-article-comments-block > #dg-article-comment-form-wrap {
        padding-top: 8px;
        border-top: 1px solid var(--dg-comments-sheet-border);
        background: var(--dg-comments-sheet-bg);
    }

    #dg-article-root > .dg-article-comments-block :is(.comment-author, .comment-text) {
        color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    }

    #dg-article-root > .dg-article-comments-block :is(.comment-date, .comment-like-btn, .msg-more-btn) {
        color: var(--dg-comments-sheet-muted) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
    }

    #dg-article-root > .dg-article-comments-block :is(.comment-reply, .comment-replies-summary, .dg-comments-open-all) {
        color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
        -webkit-text-fill-color: var(--dg-comment-accent, var(--c-primary, #8b5cf6)) !important;
    }

    #dg-article-root > .dg-article-comments-block .comment-input {
        background: var(--dg-comments-sheet-control) !important;
        border-color: var(--dg-comments-sheet-border) !important;
        color: var(--dg-comments-sheet-text) !important;
        caret-color: var(--dg-comments-sheet-text) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-text) !important;
    }

    #dg-article-root > .dg-article-comments-block .comment-photo-btn {
        background: var(--dg-comments-sheet-control) !important;
        border-color: var(--dg-comments-sheet-border) !important;
        color: var(--dg-comments-sheet-muted) !important;
        -webkit-text-fill-color: var(--dg-comments-sheet-muted) !important;
    }
}

@media (max-width: 560px) {
    .dg-article-main {
        padding: 12px 12px 16px;
    }

    .dg-article-h1 {
        line-height: var(--dg-line-heading);
    }
}

/* DG: Dark glass final overrides — только sheet фильтров, не .modal-content */
body.dg-theme-dark .dg-filters-sheet {
    background: rgba(15, 15, 18, 0.62) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none !important;
}
/* Sidebar: плотнее page canvas, тонкая граница */
body.dg-theme-dark .dg-left-sidebar {
    background: rgba(18,18,23,0.92) !important;
    border-right-color: rgba(255,255,255,0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Hero: surface panel с границей вместо blur-стекла */
body.dg-theme-dark .home-hero {
    background: var(--dg-surface-dark) !important;
    border: 1px solid var(--dg-surface-border-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.dg-theme-dark .filter-tag,
body.dg-theme-dark .filters .filter-tag {
    background: rgba(var(--c-primary-rgb), 0.1) !important;
    border-color: rgba(var(--c-primary-rgb), 0.12) !important;
    color: var(--c-primary, #8B5CF6) !important;
    -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    font-weight: 600 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    /* Визуал как у hero-кнопок: hover */
    body.ios-device.dg-theme-dark .filter-tag:hover,
    body.ios-device.dg-theme-dark .filters .filter-tag:hover,
    body.dg-theme-dark .filter-tag:hover,
    body.dg-theme-dark .filters .filter-tag:hover {
        background: rgba(var(--c-primary-rgb), 0.18) !important;
        border-color: rgba(var(--c-primary-rgb), 0.22) !important;
        color: var(--c-primary, #8B5CF6) !important;
        -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    }

    /* Визуал активного тега/подтега */
    body.ios-device.dg-theme-dark .filter-tag.active,
    body.dg-theme-dark .filter-tag.active {
        background: rgba(var(--c-primary-rgb), 0.18) !important;
        border-color: rgba(var(--c-primary-rgb), 0.35) !important;
        color: var(--c-primary, #8B5CF6) !important;
        -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
        box-shadow: none !important;
    }

/* Строка фильтров: без подложки (ПК и телефон) — после glass-правил с !important выше */
body.dg-theme-dark .filters-container,
body.ios-device.dg-theme-dark .filters-container,
body.ios-device:not(.dg-theme-dark) .filters-container,
body.dg-theme-dark #subtagRow {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.filters-container .filters-bar,
.filters-container .filters {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dg-theme-dark .dropdown,
body.dg-theme-dark .dropdown-menu {
    background: rgba(15, 15, 18, 0.92) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

    body.dg-theme-dark .dropdown-item,
    body.dg-theme-dark .dropdown-item span,
    body.dg-theme-dark .dropdown-menu a {
        color: var(--c-text) !important;
        -webkit-text-fill-color: var(--c-text) !important;
        text-decoration: none !important;
    }

body.dg-theme-dark .search-container {
    background: rgba(15, 15, 18, 0.72) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

    body.dg-theme-dark .search-container input {
        color: var(--c-text) !important;
        background: transparent !important;
    }

        body.dg-theme-dark .search-container input::placeholder {
            color: var(--c-muted) !important;
        }

/* Mobile filters (dg-filters-sheet) in dark theme: контрастный текст */
body.dg-theme-dark .dg-filters-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* FIX: когда открыты мобильные фильтры, модалка должна быть выше bottom-nav,
   иначе нижняя панель перехватывает свайпы и скролл внутри модалки “не стартует”. */
body.dg-theme-dark .dg-filters-main,
body.dg-theme-dark .dg-filters-main__label {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-filters-nav {
    background: rgba(15, 15, 18, 0.62) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.20) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark .dg-filters-nav svg,
    body.dg-theme-dark .dg-filters-nav svg *,
    body.dg-theme-dark .dg-filters-nav .lucide,
    body.dg-theme-dark .dg-filters-nav i {
        stroke: #fff !important;
        fill: none !important;
    }

body.dg-theme-dark .dg-filters-chip {
    background: rgba(15, 15, 18, 0.35) !important;
    border-color: rgba(var(--c-border-rgb), 0.18) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark .dg-filters-chip.is-active {
        background: rgba(var(--c-primary-rgb), 0.12) !important;
        border-color: rgba(var(--c-primary-rgb), 0.55) !important;
        box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.35) !important;
        color: var(--c-primary, #8B5CF6) !important;
        -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    }

body.dg-theme-dark .dg-filters-item {
    background: rgba(15, 15, 18, 0.30) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark .dg-filters-item.is-active {
        border-color: rgba(var(--c-primary-rgb), 0.6) !important;
        background: rgba(var(--c-primary-rgb), 0.10) !important;
        box-shadow: none !important;
    }

/* Mobile filters modal visibility in dark theme */
@media (max-width: 640px) {
    body.dg-theme-dark .dg-filters-sheet.modal-content {
        background: rgba(18,18,23,0.98) !important;
        border: none !important;
        color: #fff !important;
    }

    body.dg-theme-dark .dg-filters-item {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    body.dg-theme-dark .dg-filters-chip {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.10) !important;
        color: #fff !important;
    }

    body.dg-theme-dark .dg-filters-body {
        background: transparent !important;
    }

    /* Резерв на случай, если .show не проставился: mobile-filters.js ставит aria-hidden=false */
    body.dg-theme-dark #dgFiltersModal.modal[aria-hidden="false"] {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

        body.dg-theme-dark #dgFiltersModal.modal[aria-hidden="false"] .modal-content,
        body.dg-theme-dark #dgFiltersModal.modal[aria-hidden="false"] .modal-content.modal-large {
            transform: scale(1) translateY(0) !important;
            opacity: 1 !important;
        }

    /* Надёжный fallback: mobile-filters.js всегда добавляет body.dg-filter-open */
    body.dg-theme-dark.dg-filter-open #dgFiltersModal.modal {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

        body.dg-theme-dark.dg-filter-open #dgFiltersModal.modal .modal-content,
        body.dg-theme-dark.dg-filter-open #dgFiltersModal.modal .modal-content.modal-large {
            transform: scale(1) translateY(0) !important;
            opacity: 1 !important;
        }

    /* Полная высота под поиском, над bottom-nav (mobile-filters.js задаёт --dg-nav-h) */
    body.dg-theme-dark #dgFiltersModal.modal {
        top: var(--dg-nav-h, 0px) !important;
        bottom: calc(var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)))) !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        display: flex !important;
    }

        body.dg-theme-dark #dgFiltersModal.modal .dg-filters-sheet.modal-content,
        body.dg-theme-dark #dgFiltersModal.modal .dg-filters-sheet.modal-content.modal-large {
            height: 100% !important;
            max-height: none !important;
            transform: none !important;
        }
}

/* =========================
   DG: Dark theme UX tweaks (по запросу)
   ========================= */

/* Шапка: фиксируем белый фон (и нормальный контраст) */
body.dg-theme-dark .navbar {
    background: #fff !important;
    color: #111 !important;
}

/* Кнопки в шапке: белая обводка/иконки */
body.dg-theme-dark .nav-icon-btn {
    border-color: rgba(255, 255, 255, 0.95) !important;
}

    body.dg-theme-dark .nav-icon-btn i,
    body.dg-theme-dark .nav-icon-btn svg.lucide,
    body.dg-theme-dark .nav-icon-btn .lucide {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        fill: none !important;
        stroke: currentColor !important;
    }

/* Лайки: фон серый, обводка белая, цифры видны */
body.dg-theme-dark .like-button,
body.dg-theme-dark .like-btn {
    background: rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92) inset, 0 1px 2px rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* В просмотре сторис рамка/заливка от like-btn не нужна */
body.dg-theme-dark .dg-story-viewer-footer .dg-story-viewer-likes.like-btn {
    background: transparent !important;
    box-shadow: none !important;
}

    body.dg-theme-dark .dg-story-viewer-footer .dg-story-viewer-likes.like-btn:hover {
        background: transparent !important;
        box-shadow: none !important;
    }
/* Delete confirm modal — dark theme button fixes */
body.dg-theme-dark .dg-story-delete-modal .modal-content {
    background: #1e1e22;
    color: #f0f0f0;
}

body.dg-theme-dark .dg-story-delete-modal p {
    color: #f0f0f0;
}

body.dg-theme-dark .dg-story-delete-modal .btn-secondary {
    background: rgba(var(--c-border-rgb), 0.12) !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    border-color: rgba(var(--c-border-rgb), 0.28) !important;
}

    body.dg-theme-dark .dg-story-delete-modal .btn-secondary:hover {
        background: rgba(var(--c-border-rgb), 0.2) !important;
    }

body.dg-theme-dark .like-button:hover,
body.dg-theme-dark .like-btn:hover {
    background: rgba(148, 163, 184, 0.55) !important;
}

/* Обычное (не залайканное) сердечко делаем белым, чтобы было видно на сером фоне */
body.dg-theme-dark .like-button:not(.liked) .lucide,
body.dg-theme-dark .like-button:not(.liked) svg.lucide,
body.dg-theme-dark .like-button:not(.liked) svg.lucide *,
body.dg-theme-dark .like-button:not(.liked) svg,
body.dg-theme-dark .like-button:not(.liked) svg *,
body.dg-theme-dark .like-button:not(.liked) i[data-lucide="heart"],
html.dg-theme-dark .like-button:not(.liked) svg,
html.dg-theme-dark .like-button:not(.liked) svg *,
body.dg-theme-dark .like-btn:not(.liked) .lucide,
body.dg-theme-dark .like-btn:not(.liked) svg.lucide,
body.dg-theme-dark .like-btn:not(.liked) svg.lucide *,
body.dg-theme-dark .like-btn:not(.liked) svg,
body.dg-theme-dark .like-btn:not(.liked) svg *,
body.dg-theme-dark .like-btn:not(.liked) i[data-lucide="heart"],
html.dg-theme-dark .like-btn:not(.liked) svg,
html.dg-theme-dark .like-btn:not(.liked) svg * {
    stroke: #fff !important;
    fill: none !important;
}

/* Лайк в тёмной теме: сердечко должно быть белым (вместо фиолетового) */
body.dg-theme-dark .like-button.liked .lucide,
body.dg-theme-dark .like-button.liked svg.lucide,
body.dg-theme-dark .like-button.liked svg.lucide *,
body.dg-theme-dark .like-button.liked svg,
body.dg-theme-dark .like-button.liked svg *,
body.dg-theme-dark .like-button.liked i[data-lucide="heart"],
html.dg-theme-dark .like-button.liked svg,
html.dg-theme-dark .like-button.liked svg *,
body.dg-theme-dark .like-btn.liked .lucide,
body.dg-theme-dark .like-btn.liked svg.lucide,
body.dg-theme-dark .like-btn.liked svg.lucide *,
body.dg-theme-dark .like-btn.liked svg,
body.dg-theme-dark .like-btn.liked svg *,
body.dg-theme-dark .like-btn.liked i[data-lucide="heart"],
html.dg-theme-dark .like-btn.liked svg,
html.dg-theme-dark .like-btn.liked svg * {
    stroke: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Открытая карточка куклы: кнопки серые */
body.dg-theme-dark .overlay-actions > button,
body.dg-theme-dark .overlay-actions .more-btn,
body.dg-theme-dark .overlay-actions .report-btn,
body.dg-theme-dark .doll-actions-overlay > button,
body.dg-theme-dark .doll-actions-overlay .more-btn,
body.dg-theme-dark .doll-actions-overlay .report-btn {
    background: rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92) inset, 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

    body.dg-theme-dark .overlay-actions > button:hover,
    body.dg-theme-dark .overlay-actions .more-btn:hover,
    body.dg-theme-dark .overlay-actions .report-btn:hover,
    body.dg-theme-dark .doll-actions-overlay > button:hover,
    body.dg-theme-dark .doll-actions-overlay .more-btn:hover,
    body.dg-theme-dark .doll-actions-overlay .report-btn:hover {
        background: rgba(148, 163, 184, 0.55) !important;
        transform: translateY(-2px) !important;
    }

/* Hero: кружки-слайдеры светло-серые */
body.dg-theme-dark .dg-hero-slider__dot {
    background: rgba(var(--c-border-rgb), 0.35) !important;
}

    body.dg-theme-dark .dg-hero-slider__dot:hover {
        background: rgba(var(--c-border-rgb), 0.55) !important;
    }

/* Конкурс недели (hero): surface panel — отделяется от фона как home-hero */
body.dg-theme-dark .dg-contest-week {
    background: var(--dg-surface-dark) !important;
    border: 1px solid var(--dg-surface-border-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.dg-theme-dark .dg-contest-week__future-label,
body.dg-theme-dark .dg-contest-week__title,
body.dg-theme-dark .dg-contest-week__leader,
body.dg-theme-dark .dg-contest-week__winner,
body.dg-theme-dark .dg-contest-week__next,
body.dg-theme-dark .dg-contest-week__winner-label {
    color: #fff !important;
}

    body.dg-theme-dark .dg-contest-week__leader a,
    body.dg-theme-dark .dg-contest-week__winner a,
    body.dg-theme-dark .dg-contest-week__next a {
        color: #fff !important;
    }

/* Конкурс недели (hero): добиваем гарантированно белый текст */
body.dg-theme-dark #contestWeekBlock .dg-contest-week * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Конкурсы и розыгрыши: делаем текст белым (dark theme) */
body.dg-theme-dark .dg-contest-section-title,
body.dg-theme-dark .dg-contest-points-title,
body.dg-theme-dark .dg-contest-your-rank,
body.dg-theme-dark .dg-contest-description,
body.dg-theme-dark .dg-contest-section-note,
body.dg-theme-dark .dg-contest-winner-item--empty,
body.dg-theme-dark .dg-contest-empty,
body.dg-theme-dark .dg-contest-loading,
body.dg-theme-dark .dg-contest-winner-period,
body.dg-theme-dark .dg-contest-winners-list li {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-contest-list li {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-contest-table th,
body.dg-theme-dark .dg-contest-table td {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark .dg-contest-table th {
    background: rgba(15, 15, 18, 0.72) !important;
}

body.dg-theme-dark .dg-contest-table tbody tr:hover {
    background: rgba(var(--c-border-rgb), 0.06) !important;
}

/* Розыгрыш: таблица победителей (header в dark-теме) */
body.dg-theme-dark .dg-giveaway-winners-table thead tr {
    background: rgba(15, 15, 18, 0.72) !important;
}

body.dg-theme-dark .dg-giveaway-winners-table thead th {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(15, 15, 18, 0.72) !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
}

/* Розыгрыши (hero на главной): подложка и текст для кнопки */
body.dg-theme-dark .dg-giveaway-hero {
    background: rgba(15, 15, 18, 0.62) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: none !important;
}

body.dg-theme-dark .dg-giveaway-hero__details-btn,
body.dg-theme-dark .dg-doll-finds-hero__details-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Sale / Favorites: папки — тёмный фон, белый текст */
body.dg-theme-dark .fav-pack {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px;
}

body.dg-theme-dark .fav-pack__title,
body.dg-theme-dark .fav-pack-view__title {
    color: #fff !important;
}

body.dg-theme-dark .fav-pack__count {
    color: rgba(var(--c-border-rgb), 0.6) !important;
}

/* Профиль: убираем белую обводку аватара + делаем нужные кнопки светло-серыми */
body.dg-theme-dark #profileModal .profile-avatar {
    border: 0 !important;
}

body.dg-theme-dark #profileModal #editProfileBtn,
body.dg-theme-dark #profileModal #btnAuthorReviews,
body.dg-theme-dark #profileModal #followBtn,
body.dg-theme-dark #profileModal #messageBtn {
    background: rgba(var(--c-border-rgb), 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
}
/* Кнопки "К профилю" (из панелей статистики/настроек/достижений) */
body.dg-theme-dark #profileModal #profileStatsBackBtn,
body.dg-theme-dark #profileModal #profileSettingsBackBtn,
body.dg-theme-dark #profileModal #profileAchievementsBackBtn {
    background: rgba(var(--c-border-rgb), 0.12) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
}

    body.dg-theme-dark #profileModal #profileStatsBackBtn:hover,
    body.dg-theme-dark #profileModal #profileSettingsBackBtn:hover,
    body.dg-theme-dark #profileModal #profileAchievementsBackBtn:hover {
        background: rgba(var(--c-border-rgb), 0.18) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

body.dg-theme-dark #profileModal .dg-ach-card {
    border: 1px solid rgba(var(--c-border-rgb), 0.28) !important;
}

body.dg-theme-dark #profileModal .dg-ach-card-desc,
body.dg-theme-dark #profileModal .dg-ach-card-progress-text,
body.dg-theme-dark #profileModal .dg-ach-card-unavailable {
    color: rgba(var(--c-border-rgb), 0.74) !important;
}

body.dg-theme-dark #profileModal .dg-ach-card-progress-track {
    background: rgba(var(--c-border-rgb), 0.18) !important;
}

/* Профиль: сайдбар/табы как фон профиля + белый текст */
body.dg-theme-dark #profileModal .dg-profile-burger-panel-content {
    background: rgba(38, 38, 43, 0.88) !important;
}

    /* Профиль: кнопки в burger-панели без белого заполнения (как сайдбар в инфо) */
    body.dg-theme-dark #profileModal .dg-profile-burger-panel-content .btn-secondary,
    body.dg-theme-dark #profileModal .dg-profile-burger-panel-content .btn-primary {
        background: rgba(var(--c-border-rgb), 0.12) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        border: 1px solid rgba(var(--c-border-rgb), 0.24) !important;
    }

        body.dg-theme-dark #profileModal .dg-profile-burger-panel-content .btn-secondary:hover,
        body.dg-theme-dark #profileModal .dg-profile-burger-panel-content .btn-primary:hover {
            background: rgba(var(--c-border-rgb), 0.18) !important;
        }

body.dg-theme-dark #profileModal .dg-profile-stories-row {
    --dg-profile-stories-surface-rgb: 15, 15, 18;
    background: transparent !important;
    border-bottom: 1px solid rgba(var(--c-border-rgb), 0.1) !important;
}

body.dg-theme-dark #profileModal .dg-profile-stories-mask {
    background: transparent !important;
}

@media (min-width: 641px) {
    #profileModal .dg-profile-stories-row {
        --dg-profile-stories-add-mask-stop: 58px;
        --dg-profile-stories-add-mask-fade: 86px;
    }

    #profileModal .dg-profile-stories-mask {
        width: 88px;
    }
}

body.dg-theme-dark #profileModal .profile-tabs {
    background: rgba(15, 15, 18, 0.86) !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
    isolation: isolate;
}

    body.dg-theme-dark #profileModal .profile-tabs .tab-btn,
    body.dg-theme-dark #profileModal .profile-tabs .tab-btn i {
        color: #fff !important;
    }

        body.dg-theme-dark #profileModal .profile-tabs .tab-btn:hover {
            color: #fff !important;
        }

        body.dg-theme-dark #profileModal .profile-tabs .tab-btn.active {
            color: #fff !important;
            border-bottom-color: rgba(255, 255, 255, 0.95) !important;
        }

/* Истории: без отдельной тёмной подложки — только обводка кружков */
body.dg-theme-dark #profileModal .dg-profile-story::before {
    border-color: rgba(var(--c-border-rgb), 0.22) !important;
    background-color: transparent !important;
}

body.dg-theme-dark #profileModal .dg-profile-story-item::before {
    background-color: #2d3748 !important;
}

body.dg-theme-dark #profileModal .dg-profile-story-item.dg-profile-story-unviewed::before {
    border: var(--dg-story-unviewed-border-width) solid var(--dg-story-unviewed-border) !important;
}

body.dg-theme-dark #profileModal .dg-profile-story-add::before {
    border-color: #a855f7 !important;
}
/* Тёмная тема: убираем чёрную подложку под кнопкой добавить сторис */
body.dg-theme-dark #profileModal .dg-profile-story-add {
    background: transparent !important;
    z-index: 60 !important;
}

    body.dg-theme-dark #profileModal .dg-profile-story-add:is(:hover, :focus-visible, :active)::before {
        box-shadow: 0 0 0 2px #c084fc !important;
    }

body.dg-theme-dark #profileModal .dg-profile-story-icon {
    color: #c084fc !important;
}

/* Сообщения: фон серый, линии/карточки серые, текст белый */
body.dg-theme-dark #messagesModal .thread-card {
    background: rgba(15, 15, 18, 0.72) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark #messagesModal .thread-item:hover .thread-card {
    background: rgba(var(--c-border-rgb), 0.06) !important;
}

body.dg-theme-dark #messagesModal .thread-title,
body.dg-theme-dark #messagesModal .thread-preview,
body.dg-theme-dark #messagesModal .thread-time,
body.dg-theme-dark #messagesModal .thread-unread,
body.dg-theme-dark #messagesModal .messages-modal-peer-name,
body.dg-theme-dark #messagesModal .messages-modal-peer-meta,
body.dg-theme-dark #messagesModal .messages-modal-peer-status,
body.dg-theme-dark #messagesModal .thread-time-col .thread-time {
    color: #fff !important;
}


body.dg-theme-dark .dg-sidebar-light {
    color: #fff !important;
}

    body.dg-theme-dark .dg-sidebar-light .dg-sb-title {
        color: #fff !important;
    }

    body.dg-theme-dark .dg-sidebar-light .dg-sb-link,
    body.dg-theme-dark .dg-sidebar-light .dg-sb-link i,
    body.dg-theme-dark .dg-sidebar-light .dg-sb-link span {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-sidebar-light .dg-sb-link:hover {
        background: rgba(var(--c-border-rgb), 0.08) !important;
    }
}


/* Текст внутри статей белым (чтобы читалось на сером фоне) */
body.dg-theme-dark .dg-article-main {
    color: #fff !important;
}

body.dg-theme-dark .dg-article-body h2,
body.dg-theme-dark .dg-article-body p,
body.dg-theme-dark .dg-article-content h2,
body.dg-theme-dark .dg-article-content h3,
body.dg-theme-dark .dg-article-content p,
body.dg-theme-dark .dg-article-content li {
    color: #fff !important;
}

body.dg-theme-dark .comment-text a,
body.dg-theme-dark .profile-bio a,
body.dg-theme-dark .dg-article-content a,
body.dg-theme-dark .dg-profile-article-content a,
body.dg-theme-dark .dg-hero-shorts-viewer__meta .dg-short-side-description a,
html.dg-theme-dark .comment-text a,
html.dg-theme-dark .profile-bio a,
html.dg-theme-dark .dg-article-content a,
html.dg-theme-dark .dg-profile-article-content a,
html.dg-theme-dark .dg-hero-shorts-viewer__meta .dg-short-side-description a {
    color: #c4b5fd !important;
    -webkit-text-fill-color: #c4b5fd !important;
    text-decoration-color: rgba(196, 181, 253, 0.85);
    text-underline-offset: 0.14em;
}

body.dg-theme-dark .comment-text a:hover,
body.dg-theme-dark .profile-bio a:hover,
body.dg-theme-dark .dg-article-content a:hover,
body.dg-theme-dark .dg-profile-article-content a:hover,
body.dg-theme-dark .dg-hero-shorts-viewer__meta .dg-short-side-description a:hover,
html.dg-theme-dark .comment-text a:hover,
html.dg-theme-dark .profile-bio a:hover,
html.dg-theme-dark .dg-article-content a:hover,
html.dg-theme-dark .dg-profile-article-content a:hover,
html.dg-theme-dark .dg-hero-shorts-viewer__meta .dg-short-side-description a:hover {
    color: #ede9fe !important;
    -webkit-text-fill-color: #ede9fe !important;
}

body.dg-theme-dark .dg-article-breadcrumbs {
    color: #fff !important;
}

    body.dg-theme-dark .dg-article-breadcrumbs a {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

body.dg-theme-dark .dg-article-h1 {
    color: #fff !important;
}

body.dg-theme-dark .dg-article-pending-notice,
html.dg-theme-dark .dg-article-pending-notice {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(167, 139, 250, 0.48) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* Маркетплейсы в статьях «Кукольные находки»: капсула на тёмном фоне */
body.dg-theme-dark .dg-article-market-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(167, 139, 250, 0.55) !important;
    color: var(--c-primary, #c4b5fd) !important;
    -webkit-text-fill-color: var(--c-primary, #c4b5fd) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark .dg-article-market-pill:hover {
        background: rgba(var(--c-primary-rgb), 0.22) !important;
        border-color: rgba(196, 181, 253, 0.72) !important;
        color: #ede9fe !important;
        -webkit-text-fill-color: #ede9fe !important;
    }

/* Кнопка «Редактировать» у статьи (страница + профиль): без белого фона, в стиле тёмной темы */
body.dg-theme-dark .dg-article-edit-delete .dg-article-btn-icon.btn-secondary,
body.dg-theme-dark #profileModal .dg-profile-article-edit-delete .dg-article-btn-icon.btn-secondary {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(167, 139, 250, 0.42) !important;
    color: var(--c-primary, #c4b5fd) !important;
    -webkit-text-fill-color: var(--c-primary, #c4b5fd) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark .dg-article-edit-delete .dg-article-btn-icon.btn-secondary:hover,
    body.dg-theme-dark #profileModal .dg-profile-article-edit-delete .dg-article-btn-icon.btn-secondary:hover {
        background: rgba(var(--c-primary-rgb), 0.22) !important;
        border-color: rgba(196, 181, 253, 0.55) !important;
        color: #ede9fe !important;
        -webkit-text-fill-color: #ede9fe !important;
    }

    body.dg-theme-dark .dg-article-edit-delete .dg-article-btn-icon.btn-secondary .lucide,
    body.dg-theme-dark .dg-article-edit-delete .dg-article-btn-icon.btn-secondary svg,
    body.dg-theme-dark #profileModal .dg-profile-article-edit-delete .dg-article-btn-icon.btn-secondary .lucide,
    body.dg-theme-dark #profileModal .dg-profile-article-edit-delete .dg-article-btn-icon.btn-secondary svg {
        stroke: currentColor !important;
    }

/* =========================
   DG: Remaining tweaks (по твоему списку)
   ========================= */

/* 1) Выпадающие меню: меньше прозрачности */
body.dg-theme-dark .more-container .action-menu {
    background: rgba(15, 15, 18, 0.92) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

    body.dg-theme-dark .more-container .action-menu .menu-item {
        color: var(--c-text) !important;
        -webkit-text-fill-color: var(--c-text) !important;
    }

        body.dg-theme-dark .more-container .action-menu .menu-item:hover {
            background: rgba(var(--c-border-rgb), 0.08) !important;
        }

/* Меню «три точки» внутри сообщения */
body.dg-theme-dark .msg-more-menu {
    background: rgba(15, 15, 18, 0.92) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark .msg-menu-item {
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text) !important;
}

    body.dg-theme-dark .msg-menu-item:hover {
        background: rgba(var(--c-border-rgb), 0.08) !important;
    }

/* 2) Hero: кнопки слайдера светло-серые */
body.dg-theme-dark .dg-contest-week__details-btn,
body.dg-theme-dark .dg-giveaway-hero__details-btn,
body.dg-theme-dark .dg-doll-finds-hero__details-btn {
    background: rgba(var(--c-border-rgb), 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.18) !important;
    box-shadow: none !important;
}

    body.dg-theme-dark .dg-contest-week__details-btn:hover,
    body.dg-theme-dark .dg-giveaway-hero__details-btn:hover,
    body.dg-theme-dark .dg-doll-finds-hero__details-btn:hover {
        background: rgba(var(--c-border-rgb), 0.18) !important;
    }

/* 3) Лайк в статье — те же тёмные стили, что у .like-btn / .like-button (общие правила выше) */

/* 4) Профиль: титул/табы/бургер */
body.dg-theme-dark #profileModal .profile-title,
body.dg-theme-dark #profileModal .profile-info h2,
body.dg-theme-dark #profileModal .dg-profile-title-placeholder,
body.dg-theme-dark #profileModal .dg-profile-title-edit {
    color: #fff !important;
}

body.dg-theme-dark #profileModal .author-rating::before {
    color: #fff !important;
}

body.dg-theme-dark #profileModal #profileContent.profile-content {
    background: rgba(15, 15, 18, 0.72) !important;
    color: #fff !important;
}

body.dg-theme-dark #profileModal .dg-profile-burger-item,
body.dg-theme-dark #profileModal .dg-profile-burger-link {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark #profileModal .dg-profile-burger-item:hover,
    body.dg-theme-dark #profileModal .dg-profile-burger-link:hover {
        background: rgba(var(--c-border-rgb), 0.08) !important;
    }

    body.dg-theme-dark #profileModal .dg-profile-burger-item svg,
    body.dg-theme-dark #profileModal .dg-profile-burger-item i,
    body.dg-theme-dark #profileModal .dg-profile-burger-link svg,
    body.dg-theme-dark #profileModal .dg-profile-burger-link i {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        fill: currentColor;
        stroke: currentColor;
    }

/* 5) Сообщения (страница /messages): фон серый, текст белый */
body.dg-theme-dark .dg-messages-page-wrap,
body.dg-theme-dark #messagesPageRoot {
    background: rgba(15, 15, 18, 0.72) !important;
    color: var(--c-text) !important;
}

    body.dg-theme-dark #messagesPageRoot .dg-messages-page-header,
    body.dg-theme-dark #messagesPageRoot #chatHeader {
        background: rgba(15, 15, 18, 0.72) !important;
        border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
    }
/* паттерн chatMessages теперь на #chatPane — здесь фон не нужен */

/* Поле ввода сообщений */
body.dg-theme-dark #chatForm #chatInput {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    body.dg-theme-dark #chatForm #chatInput:focus {
        background-color: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

    body.dg-theme-dark #chatForm #chatInput::placeholder {
        color: var(--c-muted) !important;
    }

/* Правые кнопки в шапке чата (× + ⋯): делаем стекло-тёмными, чтобы совпало с инпутом */
@media (max-width: 640px) {
    body.dg-theme-dark #chatHeader .dg-chat-close:not(.dg-modal-back-btn),
    body.dg-theme-dark #chatHeader .dg-chat-kebab {
        background: rgba(0, 0, 0, 0.55) !important;
        border: 2px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow: none !important;
        color: #fff !important;
    }
}

/* На телефоне #chatForm не должен быть белым (иначе input “вылезает” и выглядит криво) */
@media (max-width: 640px) {
    body.dg-theme-dark.dg-messages-page #messagesModal #chatForm {
        background: transparent !important;
        border-top: none !important;
    }

    /* подложка под клавиатурой прозрачная */
    body.dg-theme-dark.dg-messages-page #messagesModal::after {
        background: transparent !important;
    }
}

/* Кнопки “⋯” и “×” в шапке messagesModal — как иконка лупы */
@media (max-width: 640px) {
    body.dg-theme-dark.dg-messages-page #messagesModal #dgModalThreadsSearchBtn.threads-search-btn {
        background: rgba(0, 0, 0, 0.55) !important;
        border-color: rgba(255, 255, 255, 0.95) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: none !important;
    }

        body.dg-theme-dark.dg-messages-page #messagesModal #dgModalThreadsSearchBtn.threads-search-btn svg,
        body.dg-theme-dark.dg-messages-page #messagesModal #dgModalThreadsSearchBtn.threads-search-btn .lucide {
            stroke: #fff !important;
            fill: none !important;
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
        }

    body.dg-theme-dark.dg-messages-page #messagesModal .modal-kebab,
    body.dg-theme-dark.dg-messages-page #messagesModal .modal-close {
        background: rgba(0, 0, 0, 0.55) !important;
        border: 2px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow: none !important;
        color: #fff !important;
    }

        body.dg-theme-dark.dg-messages-page #messagesModal .modal-kebab svg,
        body.dg-theme-dark.dg-messages-page #messagesModal .modal-kebab .lucide,
        body.dg-theme-dark.dg-messages-page #messagesModal .modal-close svg,
        body.dg-theme-dark.dg-messages-page #messagesModal .modal-close .lucide {
            stroke: #fff !important;
            color: #fff !important;
            fill: none !important;
        }
}

/* Выпадающий список (меню диалога): тёмная стилизация */
body.dg-theme-dark .thread-actions-menu {
    background: rgba(15, 15, 18, 0.92) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

body.dg-theme-dark .thread-actions-item {
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text) !important;
}

    body.dg-theme-dark .thread-actions-item:hover {
        background: rgba(var(--c-border-rgb), 0.08) !important;
    }

    body.dg-theme-dark .thread-actions-item[data-act="delete"] {
        color: #F87171 !important;
    }

        body.dg-theme-dark .thread-actions-item[data-act="delete"]:hover {
            background: rgba(248, 113, 113, 0.12) !important;
        }

/* Кнопка отправки на телефоне (снизу справа) — чёрный фон + белый контур */
@media (max-width: 640px) {
    body.dg-theme-dark .chat-send-btn {
        background: var(--c-primary) !important;
        border: 0 !important;
        color: #fff !important;
    }

        body.dg-theme-dark .chat-send-btn svg,
        body.dg-theme-dark .chat-send-btn i,
        body.dg-theme-dark .chat-send-btn .lucide {
            stroke: #fff !important;
            color: #fff !important;
        }
}

/* Нижняя панель на телефоне в тёмной теме: тёмный фон, светлые иконки и кнопки */
@media (max-width: 640px) {
    body.dg-theme-dark .dg-mobile-bottom-nav {
        background: rgba(15,15,18,0.84) !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: none !important;
        backdrop-filter: blur(var(--dg-glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dg-glass-blur)) !important;
    }

        body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item {
            color: #fff !important;
        }

            body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item i,
            body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item .lucide,
            body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item svg {
                color: #fff !important;
                stroke: #fff !important;
                fill: none !important;
            }

            body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item.active {
                color: var(--c-primary) !important;
            }

                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item.active i,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item.active .lucide,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item.active svg {
                    color: var(--c-primary) !important;
                    stroke: var(--c-primary) !important;
                }
        /* Upload nav button: keep the glass plus white on dark theme, even when active. */
            body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload {
                color: #fff !important;
            }

                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload::before {
                    background:
                        radial-gradient(circle, rgba(255, 255, 255, 0) 42%, rgba(140, 84, 224, 0.11) 52%, rgba(132, 79, 215, 0.36) 70%, rgba(126, 76, 202, 0.50) 86%, rgba(255, 255, 255, 0.12) 100%) !important;
                    border: 0 !important;
                    box-shadow:
                        0 0 0 1px rgba(137, 84, 224, 0.32),
                        0 0 14px rgba(137, 84, 224, 0.25) !important;
                }

                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload::after {
                    background:
                        radial-gradient(circle, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.07) 86%, rgba(255, 255, 255, 0.20) 100%) !important;
                    border-color: rgba(255, 255, 255, 0.60) !important;
                }

                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload i,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload .lucide,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload svg,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload.active i,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload.active .lucide,
                body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload.active svg {
                    color: #fff !important;
                    stroke: #fff !important;
                    filter: drop-shadow(0 0 3px rgba(137, 84, 224, 0.42)) !important;
                }

        /* Кнопки Войти / Регистрация внизу — в стиле тёмной темы */
        body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-login {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            color: #fff !important;
        }

        body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-register {
            background: var(--c-primary) !important;
            border: 1px solid transparent !important;
            color: #fff !important;
        }
}

/* Список диалогов (threadsList): линии/карточки серые */
body.dg-theme-dark #threadsList .thread-card {
    background: rgba(15, 15, 18, 0.72) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark #threadsList .thread-item:hover .thread-card {
    background: rgba(var(--c-border-rgb), 0.06) !important;
}

body.dg-theme-dark #threadsList .thread-title,
body.dg-theme-dark #threadsList .thread-preview,
body.dg-theme-dark #threadsList .thread-time,
body.dg-theme-dark #threadsList .thread-unread {
    color: #fff !important;
}

/* 6) Сообщения (VK/TG): пузырь/фон серый, текст белый */
body.dg-theme-dark .msg-bubble--mine {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.dg-theme-dark .msg-bubble--peer {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.dg-theme-dark .dg-vk-msg--mine,
body.dg-theme-dark .dg-vk-msg--peer {
    background: none !important;
}

    body.dg-theme-dark .dg-vk-msg--mine .dg-vk-body {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    body.dg-theme-dark .dg-vk-msg--peer .dg-vk-body {
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
    }

    body.dg-theme-dark .dg-vk-msg .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments--photos):not(:hover),
    body.dg-theme-dark .dg-vk-msg .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card):not(:hover) {
        background: transparent !important;
        border-color: transparent !important;
    }

body.dg-theme-dark .msg-time {
    color: var(--c-muted) !important;
}

body.dg-theme-dark .msg-more-btn {
    color: var(--c-muted) !important;
}

body.dg-theme-dark .dg-vk-kebab {
    color: #fff !important;
}

    body.dg-theme-dark .dg-vk-kebab:hover {
        background: rgba(var(--c-border-rgb), 0.06) !important;
    }

body.dg-theme-dark .dg-vk-text,
body.dg-theme-dark .dg-vk-name,
body.dg-theme-dark .dg-vk-meta,
body.dg-theme-dark .dg-vk-time,
body.dg-theme-dark .dg-vk-ticks {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* =========================
   DG: Messages modal/page => как dollModal (glass + единый фон)
   ========================= */

/* messagesModal: убираем внутренние #fff фоны (они ломают glass) */
body.dg-theme-dark #messagesModal .messages-container {
    background: rgba(15, 15, 18, 0.72) !important;
}

    body.dg-theme-dark #messagesModal #threadsList,
    body.dg-theme-dark #messagesModal .messages-container.show-chat #threadsList {
        background: rgba(15, 15, 18, 0.72) !important;
    }

body.dg-theme-dark #messagesModal #threadsList .threads-header,
body.dg-theme-dark #messagesModal #chatHeader {
    background: rgba(15, 15, 18, 0.72) !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
    color: #fff !important;
}
/* #chatPane прозрачный — фон от modal-content, не от chatPane */

/* messagesModal: кнопка/поле поиска тоже glass (иначе белые #fff остаются) */
body.dg-theme-dark #threadsList .threads-search-btn,
body.dg-theme-dark #messagesModal .threads-search-btn {
    background-color: rgba(15, 15, 18, 0.72) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark #threadsList .threads-search-btn svg,
    body.dg-theme-dark #messagesModal .threads-search-btn svg {
        stroke: currentColor !important;
        fill: none !important;
    }

body.dg-theme-dark #threadsList .threads-search-input,
body.dg-theme-dark #messagesModal .threads-search-input {
    background: rgba(15, 15, 18, 0.72) !important;
    color: #fff !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
}

    body.dg-theme-dark #threadsList .threads-search-input::placeholder,
    body.dg-theme-dark #messagesModal .threads-search-input::placeholder {
        color: var(--c-muted) !important;
    }

    body.dg-theme-dark #threadsList .threads-search-input:focus,
    body.dg-theme-dark #messagesModal .threads-search-input:focus {
        background: rgba(15, 15, 18, 0.72) !important;
        box-shadow: none !important;
        border-color: rgba(var(--c-border-rgb), 0.14) !important;
    }

/* messagesPage: главный заголовок и шапка чата — тоже glass */
body.dg-theme-dark #messagesPageRoot .dg-messages-page-header {
    background: rgba(15, 15, 18, 0.72) !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark #messagesPageRoot #chatHeader {
    background: rgba(15, 15, 18, 0.72) !important;
    border-bottom-color: rgba(var(--c-border-rgb), 0.14) !important;
}

/* Округление/рамка у страницы как у modal-content */
body.dg-theme-dark #messagesPageRoot {
    border-radius: var(--r-12) !important;
    box-shadow: var(--shadow-3) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    /* messagesPage: поиск (моб. шапка внутри страницы) тоже glass */
    body.dg-theme-dark #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn {
        background: rgba(15, 15, 18, 0.72) !important;
        border-color: rgba(var(--c-border-rgb), 0.14) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

        body.dg-theme-dark #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn svg {
            stroke: currentColor !important;
            fill: none !important;
        }

    body.dg-theme-dark #messagesPageRoot #dgModalThreadsSearchInput.threads-search-input {
        background: rgba(15, 15, 18, 0.72) !important;
        border-color: rgba(var(--c-border-rgb), 0.14) !important;
        color: #fff !important;
    }

        body.dg-theme-dark #messagesPageRoot #dgModalThreadsSearchInput.threads-search-input::placeholder {
            color: var(--c-muted) !important;
        }

        body.dg-theme-dark #messagesPageRoot #dgModalThreadsSearchInput.threads-search-input:focus {
            background: rgba(15, 15, 18, 0.72) !important;
            border-color: rgba(var(--c-border-rgb), 0.14) !important;
            box-shadow: none !important;
        }

/* =====================================================
   Декоративный паттерн фона: диалоги, чат
   Единая яркость паттерна для Safari / Android / ПК
   ===================================================== */

/* Список диалогов */
#messagesModal #threadsList,
#messagesPageRoot #threadsList {
    position: relative;
    isolation: isolate;
}

    #messagesModal #threadsList::before,
    #messagesPageRoot #threadsList::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image: url(/images/white_bg.png);
        background-repeat: repeat;
        background-size: 680px auto;
        opacity: 0.11; /* было 0.10: +10% видимости паттерна */
    }

body.dg-theme-dark #messagesModal #threadsList::before,
body.dg-theme-dark #messagesPageRoot #threadsList::before {
    background-image: url(/images/dark_bg.png);
    opacity: 0.165; /* было 0.15: +10% видимости паттерна */
}

@media (min-width: 641px) {
    #messagesModal #threadsList::before,
    #messagesPageRoot #threadsList::before {
        background-size: 840px auto;
    }
}

/* Окно чата: паттерн на родителе, чтобы форма ввода была на том же фоне */
#messagesModal #chatPane,
#messagesPageRoot #chatPane {
    background-image: linear-gradient(rgba(255,255,255,0.835), rgba(255,255,255,0.835)), url(/images/white_bg.png);
    background-repeat: repeat;
    background-size: auto, 680px auto;
    min-width: 0;
    max-width: 100%;
}

body.dg-theme-dark #messagesModal #chatPane,
body.dg-theme-dark #messagesPageRoot #chatPane {
    background-image: linear-gradient(rgba(15,15,18,0.835), rgba(15,15,18,0.835)), url(/images/dark_bg.png);
}

@media (max-width: 640px) {
    html.dg-standalone-pwa body.dg-page-messages .dg-messages-page-wrap,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot .dg-messages-page-body,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot .messages-container,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #threadsList,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #chatPane,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #chatMessages,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #chatForm {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot .dg-messages-page-header,
    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #chatHeader,
    html.dg-standalone-pwa body.dg-page-messages .dg-mobile-bottom-nav {
        border: 0 !important;
        box-shadow: none !important;
    }

    html.dg-standalone-pwa body.dg-page-messages #messagesPageRoot #threadsList .threads-scroll {
        scrollbar-gutter: auto !important;
    }
}

@media (min-width: 641px) {
    #messagesModal #chatPane,
    #messagesPageRoot #chatPane {
        background-size: auto, 840px auto;
    }
}

/* chatMessages и chatForm остаются прозрачными — фон берет chatPane */
#messagesModal #chatMessages,
#messagesPageRoot #chatMessages {
    background: transparent !important;
}

#messagesModal #chatMessages,
#messagesPageRoot #chatMessages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

#chatMessages .dg-msg-story-photo {
    display: none;
}

#chatMessages .dg-msg-story-card {
    display: block;
    width: min(260px, 100%);
    box-sizing: border-box;
    margin: 0 0 6px;
    padding: 7px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    border-left: 4px solid rgba(255, 255, 255, 0.92);
}

#chatMessages .dg-msg-story-card[role="button"] {
    cursor: pointer;
}

#chatMessages .dg-msg-story-card[role="button"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#chatMessages .dg-msg-story-card__thumb-wrap,
#chatMessages .dg-msg-att[data-kind="story"] {
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: none;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
}

#chatMessages .dg-msg-story-card__thumb-wrap {
    background: rgba(0, 0, 0, 0.14);
    position: relative;
}

#chatMessages .dg-msg-story-card__thumb-wrap--empty {
    background: rgba(255, 255, 255, 0.12);
}

#chatMessages .dg-msg-story-card__thumb-img,
#chatMessages .dg-msg-att-img--story {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#chatMessages .dg-msg-story-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 4px 3px;
}

#chatMessages .dg-msg-story-card__author-row,
#chatMessages .dg-msg-story-card__label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#chatMessages .dg-msg-story-card__label-row {
    opacity: 0.92;
}


#chatMessages .dg-msg-story-card__author,
#chatMessages .dg-msg-story-card__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#chatMessages .dg-msg-story-card__author {
    font-weight: 700;
}

#chatMessages .dg-msg-story-card__icon {
    font-size: 16px;
    line-height: 1;
}

#chatMessages .dg-msg-story-card__avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 641px) {
    #chatMessages .dg-vk-body .dg-msg-story-card {
        display: flex;
        flex-direction: column;
        width: min(320px, 100%);
        margin: 0;
        padding: 14px;
        border: 1px solid rgba(91, 94, 100, 0.32);
        border-radius: 22px;
        background: transparent;
        color: #f4f4f5;
        box-shadow: none;
    }

    #chatMessages .dg-vk-body .dg-msg-story-card__author-row {
        order: -1;
        gap: 10px;
        margin-bottom: 16px;
        font-size: 16px;
    }

    #chatMessages .dg-vk-body .dg-msg-story-card__thumb-wrap,
    #chatMessages .dg-vk-body .dg-msg-story-card .dg-msg-att[data-kind="story"] {
        aspect-ratio: 3 / 4;
        border-radius: 14px;
    }

    #chatMessages .dg-vk-body .dg-msg-story-card__body {
        padding: 12px 2px 0;
    }

    #chatMessages .dg-vk-body .dg-msg-story-card__label-row {
        font-size: 13px;
        color: #d5d8d3;
    }

    body:not(.dg-theme-dark) #chatMessages .dg-vk-body .dg-msg-story-card {
        background: transparent;
        border-color: rgba(72, 76, 74, 0.18);
        color: #22252a;
    }

    body:not(.dg-theme-dark) #chatMessages .dg-vk-body .dg-msg-story-card__label-row {
        color: #555b60;
    }
}

@media (max-width: 640px) {
    #chatMessages .msg-bubble .dg-msg-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #chatMessages .msg-bubble .dg-msg-story-card {
        width: min(260px, calc(100vw - 112px));
        margin: 0;
        padding: 6px;
        border-radius: 14px;
    }

    #chatMessages .msg-bubble .dg-msg-story-card__thumb-wrap,
    #chatMessages .msg-bubble .dg-msg-att[data-kind="story"] {
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: none;
        aspect-ratio: 3 / 4;
        border-radius: 10px;
    }


    #chatMessages .msg-bubble .dg-msg-story-card__author-row,
    #chatMessages .msg-bubble .dg-msg-story-card__label-row {
        gap: 5px;
    }

    /* Светлая тема: премиум не меняет рамку мобильного сообщения. */
    body:not(.dg-theme-dark) #chatMessages .msg-bubble--premium {
        border: none;
    }

    /* Текстовый мобильный бабл: скруглённая поверхность без контура. */
    #chatMessages .msg-bubble:not(:has(> .dg-msg-content > .dg-msg-attachments--photos)):not(:has(> .dg-msg-content > .dg-msg-story-card)) {
        padding: 9px 44px 19px 12px;
        border: none;
        border-radius: 16px;
    }

    /* Фото и сторис используют собственную поверхность без внешнего бабла. */
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos),
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) {
        padding: 0;
        background: transparent !important;
        border-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Входящее фото с подписью не должно растягивать невидимый пузырь
       шире изображения: меню и время привязаны именно к его границам. */
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) {
        width: min(240px, 68vw);
        max-width: min(240px, 68vw);
    }

    #chatMessages .msg-bubble > .dg-msg-content > .dg-msg-attachments--photos {
        margin-top: 0;
    }

    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) > .dg-msg-content > .msg-text {
        padding: 8px 12px 0;
    }

    /* На touch-экране меню всегда доступно, поэтому увеличиваем область нажатия. */
    #chatMessages .msg-bubble .msg-more-btn {
        width: 32px;
        height: 32px;
    }

    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-more-btn,
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-more-btn,
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att[data-kind="video"]) .msg-more-btn,
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att--video-note) .msg-more-btn {
        color: #374151 !important;
        background: #fff !important;
        border: 0 !important;
        outline: 0 !important;
        box-sizing: border-box;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-time,
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-time {
        z-index: 3;
        padding: 3px 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Зеркальная мета для входящего медиа: время слева, у исходящего остаётся справа. */
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-time,
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-time {
        right: auto;
        left: 4px;
    }

    /* Как в мобильном VK: действия у медиа находятся сбоку, а не поверх контента. */
    #chatMessages .msg-row--mine .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-more-wrap,
    #chatMessages .msg-row--mine .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-more-wrap,
    #chatMessages .msg-row--mine .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att--video-note) .msg-more-wrap {
        top: 50% !important;
        right: auto !important;
        left: -40px !important;
        transform: translateY(-50%);
    }

    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-more-wrap,
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-more-wrap,
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att--video-note) .msg-more-wrap {
        top: 50% !important;
        right: -40px !important;
        left: auto !important;
        transform: translateY(-50%);
    }

    #chatMessages .msg-bubble .dg-msg-story-card__body {
        padding-right: 48px;
    }

    body:not(.dg-theme-dark) #chatMessages .msg-bubble .dg-msg-story-card {
        background: rgba(255, 255, 255, 0.65);
        border-left-color: rgba(109, 40, 217, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body.dg-theme-dark #chatMessages .msg-bubble .dg-msg-story-card {
        background: rgba(255, 255, 255, 0.10);
        border-left-color: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-more-btn,
    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-more-btn,
    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att[data-kind="video"]) .msg-more-btn,
    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att--video-note) .msg-more-btn {
        color: #fff !important;
        background: rgba(24, 24, 27, 0.86) !important;
    }

    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) .msg-time,
    body.dg-theme-dark #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) .msg-time {
        background: rgba(15, 15, 18, 0.72);
    }
}

#messagesModal #chatForm,
#messagesPageRoot #chatForm {
    background: transparent !important;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* ── Story viewer: внешний оверлей без паттерна ─────── */
/* (паттерн только в letterbox-зонах карточки, не во внешнем фоне) */

/* =========================
   DG: Final touches (дособрать оставшиеся пункты)
   ========================= */

/* Шапка белая + контур/кнопки белые */
body.dg-theme-dark .navbar {
    background: rgba(15,15,18,0.80) !important;
    color: #fff !important;
    border-bottom-color: rgba(229,231,235,0.11) !important;
    backdrop-filter: blur(var(--dg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-glass-blur)) !important;
}

    body.dg-theme-dark .navbar .nav-icon-btn {
        border-color: rgba(255, 255, 255, 0.95) !important;
    }

        body.dg-theme-dark .navbar .nav-icon-btn:hover {
            border-color: rgba(255, 255, 255, 0.95) !important;
        }

        body.dg-theme-dark .navbar .nav-icon-btn i,
        body.dg-theme-dark .navbar .nav-icon-btn svg.lucide,
        body.dg-theme-dark .navbar .nav-icon-btn .lucide {
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
            fill: none !important;
            stroke: currentColor !important;
        }

    /* Поиск в шапке тоже сделать белым (иначе внутри шапки остается тёмный контур) */
    body.dg-theme-dark .navbar .search-container {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

        body.dg-theme-dark .navbar .search-container input {
            background: transparent !important;
            color: #fff !important;
        }

            body.dg-theme-dark .navbar .search-container input::placeholder {
                color: var(--c-muted) !important;
            }

        body.dg-theme-dark .navbar .search-container .nav-search-icon,
        body.dg-theme-dark .navbar .search-container svg.nav-search-icon {
            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
            stroke: #fff !important;
            fill: none !important;
        }

    /* Кнопки Войти / Регистрация в шапке — в стиле тёмной темы */
    body.dg-theme-dark .navbar #loginBtn {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        color: #fff !important;
    }

        body.dg-theme-dark .navbar #loginBtn:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            color: #fff !important;
        }

    body.dg-theme-dark .navbar #registerBtn {
        background: var(--c-primary) !important;
        border: 1px solid transparent !important;
        color: #fff !important;
    }

        body.dg-theme-dark .navbar #registerBtn:hover {
            background: var(--c-primary-600, #7c3aed) !important;
            color: #fff !important;
        }

@media (max-width: 640px) {
    /* Мобильные кнопки Войти/Регистрация: единый dark-стиль */
    body.dg-theme-dark #loginBtn,
    body.dg-theme-dark .dg-mobile-nav-login {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        color: #fff !important;
    }

    body.dg-theme-dark #registerBtn,
    body.dg-theme-dark .dg-mobile-nav-register,
    body.dg-theme-dark #loginModal .btn-primary,
    body.dg-theme-dark #registerModal .btn-primary {
        background: var(--c-primary) !important;
        border: 1px solid transparent !important;
        color: #fff !important;
    }
}

/* Кнопки в модалках login/register в dark-теме */
body.dg-theme-dark #loginModal .btn-secondary,
body.dg-theme-dark #registerModal .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.dg-oauth-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
}

.dg-oauth-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font: 700 15px/1 Inter, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dg-oauth-icon--yandex { background: #fc3f1d; }
.dg-oauth-icon--vk { background: #0077ff; font-size: 12px; }
.dg-oauth-icon:hover { filter: brightness(.94); }
.dg-oauth-icon:focus-visible { outline: 3px solid var(--primary-color, #7c3aed); outline-offset: 2px; }
.dg-oauth-icon[disabled] { opacity: .55; cursor: wait; }

.dg-register-submit-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.dg-register-submit-row #registerSubmitBtn {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-register-submit-row .dg-oauth-icon {
    flex: 0 0 42px;
}


body.dg-theme-dark #loginModal .btn-primary,
body.dg-theme-dark #registerModal .btn-primary {
    background: var(--c-primary) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Инпуты login/register в dark-теме: тёмный фон, белый текст, autofill-override */
body.dg-theme-dark #loginModal input:not([type="checkbox"]),
body.dg-theme-dark #loginModal textarea,
body.dg-theme-dark #registerModal input:not([type="checkbox"]),
body.dg-theme-dark #registerModal textarea {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(var(--c-border-rgb), 0.22) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
}

body.dg-theme-dark #loginModal input[type="checkbox"],
body.dg-theme-dark #registerModal input[type="checkbox"] {
    color: initial !important;
    -webkit-text-fill-color: initial !important;
    caret-color: auto !important;
}

    body.dg-theme-dark #loginModal input:not([type="checkbox"])::placeholder,
    body.dg-theme-dark #loginModal textarea::placeholder,
    body.dg-theme-dark #registerModal input:not([type="checkbox"])::placeholder,
    body.dg-theme-dark #registerModal textarea::placeholder {
        color: rgba(var(--c-border-rgb), 0.45) !important;
        opacity: 1 !important;
    }

    body.dg-theme-dark #loginModal input:not([type="checkbox"]):-webkit-autofill,
    body.dg-theme-dark #loginModal input:not([type="checkbox"]):-webkit-autofill:focus,
    body.dg-theme-dark #registerModal input:not([type="checkbox"]):-webkit-autofill,
    body.dg-theme-dark #registerModal input:not([type="checkbox"]):-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px rgba(28, 28, 33, 0.98) inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff !important;
    }

/* Кнопка Показать/Скрыть пароль в dark-теме — явный цвет во всех состояниях */
body.dg-theme-dark #loginModal .dg-password-toggle,
body.dg-theme-dark #registerModal .dg-password-toggle {
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
}

    body.dg-theme-dark #loginModal .dg-password-toggle:hover,
    body.dg-theme-dark #registerModal .dg-password-toggle:hover,
    body.dg-theme-dark #loginModal .dg-password-toggle:active,
    body.dg-theme-dark #registerModal .dg-password-toggle:active,
    body.dg-theme-dark #loginModal .dg-password-toggle:focus,
    body.dg-theme-dark #registerModal .dg-password-toggle:focus,
    body.dg-theme-dark #loginModal .dg-password-toggle:focus-visible,
    body.dg-theme-dark #registerModal .dg-password-toggle:focus-visible {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }

/* Поздравительное окно победителя / достижения */
#contestCongratsModal .dg-congrats-modal-content {
    width: min(92vw, 860px);
    max-width: 860px;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(var(--c-primary-rgb), 0.24);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(var(--c-primary-rgb), 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#contestCongratsModal .dg-congrats-header {
    min-height: 44px;
    padding: 8px 12px !important;
    border-bottom: 0;
    justify-content: flex-start;
}

#contestCongratsModal .dg-congrats-header .dg-modal-back-btn {
    top: 6px !important;
    left: 12px !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-header .dg-modal-back-btn {
    background: #fff !important;
    border: 1px solid var(--c-border, #E5E7EB) !important;
    color: var(--c-text, #2C2C2C) !important;
    -webkit-text-fill-color: var(--c-text, #2C2C2C) !important;
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-header .dg-modal-back-btn:hover {
    background: var(--c-bg-light, #F8F9FA) !important;
    border-color: var(--c-primary, #8B5CF6) !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-header .dg-modal-back-btn {
    background: rgba(0, 0, 0, 0.95) !important;
}

#contestCongratsModal .dg-congrats-body {
    padding: 0 28px 28px;
}

#contestCongratsModal .dg-congrats-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 16px;
}

#contestCongratsModal .dg-congrats-avatar-wrap {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--c-primary-rgb), 0.08);
}

#contestCongratsModal .dg-congrats-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#contestCongratsModal .dg-congrats-main {
    min-width: 0;
}

#contestCongratsModal .dg-congrats-title {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 750;
    color: var(--c-text, #111827);
    text-align: center;
}

#contestCongratsModal .dg-congrats-ach {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#contestCongratsModal .dg-congrats-ach-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 46px;
    border-radius: 50%;
}

#contestCongratsModal .dg-congrats-ach-meta {
    min-width: 0;
}

#contestCongratsModal .dg-congrats-ach-kicker {
    margin-bottom: 4px;
    font-size: 15px;
    color: var(--c-muted, #6b7280);
}

#contestCongratsModal .dg-congrats-ach-name {
    font-size: 24px;
    font-weight: 750;
    line-height: 1.15;
    color: var(--c-text, #111827);
}

#contestCongratsModal .dg-congrats-details {
    align-self: center;
    min-width: 172px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(var(--c-primary-rgb), 0.18);
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-primary {
    background: var(--c-primary, #8B5CF6) !important;
    border: 1px solid var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), 0.24) !important;
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-primary:hover,
body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-primary:focus-visible,
body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-primary:active {
    background: var(--c-primary-600, #7C3AED) !important;
    border-color: var(--c-primary-600, #7C3AED) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-secondary {
    background: #fff !important;
    border: 1px solid var(--c-primary, #8B5CF6) !important;
    color: var(--c-primary-600, #7C3AED) !important;
    -webkit-text-fill-color: var(--c-primary-600, #7C3AED) !important;
    box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), 0.12) !important;
}

body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-secondary:hover,
body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-secondary:focus-visible,
body:not(.dg-theme-dark) #contestCongratsModal .dg-congrats-details.btn-secondary:active {
    background: rgba(var(--c-primary-rgb), 0.08) !important;
    border-color: var(--c-primary-600, #7C3AED) !important;
    color: var(--c-primary-600, #7C3AED) !important;
    -webkit-text-fill-color: var(--c-primary-600, #7C3AED) !important;
}

#contestCongratsModal .dg-congrats-details svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-modal-content {
    background: rgba(15,15,19,0.9) !important;
    border-color: rgba(var(--c-primary-rgb), 0.42) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,0.48), 0 0 36px rgba(var(--c-primary-rgb), 0.12) !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-title,
body.dg-theme-dark #contestCongratsModal .dg-congrats-ach-name {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-ach-kicker {
    color: rgba(255,255,255,0.66) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.66) !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-primary {
    background: var(--c-primary, #8B5CF6) !important;
    border: 1px solid var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 10px 30px rgba(var(--c-primary-rgb), 0.3) !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-primary:hover,
body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-primary:focus-visible,
body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-primary:active {
    background: #7C3AED !important;
    border-color: #A78BFA !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-secondary {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(167,139,250,0.72) !important;
    color: #F3EDFF !important;
    -webkit-text-fill-color: #F3EDFF !important;
    box-shadow: none !important;
}

body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-secondary:hover,
body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-secondary:focus-visible,
body.dg-theme-dark #contestCongratsModal .dg-congrats-details.btn-secondary:active {
    background: rgba(139,92,246,0.2) !important;
    border-color: #C4B5FD !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

#contestCongratsModal .dg-congrats-details.btn-primary svg,
#contestCongratsModal .dg-congrats-details.btn-secondary svg {
    color: inherit !important;
    stroke: currentColor !important;
}

@media (min-width: 761px) {
    #contestCongratsModal .dg-congrats-card {
        grid-template-columns: 168px repeat(2, minmax(0, 1fr));
    }

    #contestCongratsModal .dg-congrats-main {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    #contestCongratsModal .dg-congrats-details {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        grid-row: 3;
    }

    #contestCongratsModal .dg-congrats-details.btn-primary {
        grid-column: 2;
    }

    #contestCongratsModal .dg-congrats-details.btn-secondary {
        grid-column: 3;
    }

    #contestCongratsModal .dg-congrats-details.btn-primary:last-child {
        grid-column: 2 / -1;
    }
}

@media (max-width: 760px) {
    #contestCongratsModal .dg-congrats-card {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 14px;
    }

    #contestCongratsModal .dg-congrats-avatar-wrap {
        width: 92px;
        height: 92px;
    }

    #contestCongratsModal .dg-congrats-details {
        grid-column: 1 / -1;
        justify-self: stretch;
        min-width: 0;
        height: 46px;
    }

    #contestCongratsModal .dg-congrats-title {
        font-size: 20px;
    }

    #contestCongratsModal .dg-congrats-ach-name {
        font-size: 18px;
    }

    #contestCongratsModal .dg-congrats-ach-kicker {
        font-size: 13px;
    }
}

/* Лайки: цифры точно видны на сером фоне + контур белый */
body.dg-theme-dark .like-button .count,
body.dg-theme-dark .like-btn .count {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

body.dg-theme-dark .like-button.liked .count,
body.dg-theme-dark .like-btn.liked .count {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Кнопки в открытой карточке куклы: серый фон + белые иконки */
body.dg-theme-dark .overlay-actions > button i,
body.dg-theme-dark .overlay-actions > button svg.lucide,
body.dg-theme-dark .overlay-actions > button .lucide,
body.dg-theme-dark .doll-actions-overlay > button i,
body.dg-theme-dark .doll-actions-overlay > button svg.lucide,
body.dg-theme-dark .doll-actions-overlay > button .lucide {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    stroke: currentColor;
    fill: transparent;
}

/* В hero: активная точка слайдера светло-серая */
body.dg-theme-dark .dg-hero-slider__dot--active {
    background: rgba(var(--c-border-rgb), 0.70) !important;
}

    body.dg-theme-dark .dg-hero-slider__dot--active:hover {
        background: rgba(var(--c-border-rgb), 0.85) !important;
    }

/* Конкурс недели: таймер/вспомогательный текст тоже белый */
body.dg-theme-dark .dg-contest-week__timer,
body.dg-theme-dark .dg-contest-week__period-end,
body.dg-theme-dark .dg-contest-week__loading {
    color: #fff !important;
}

/* История: «+» без заливки (как строка сторис) */
body.dg-theme-dark #profileModal .dg-profile-story-add::before {
    background: transparent !important;
}

body.dg-theme-dark #profileModal .dg-profile-story-add .dg-profile-story-icon {
    color: #c084fc !important;
}

/* /messages: текст пузырей и “линии” (время/меню) сделать белым */
body.dg-theme-dark .msg-bubble {
    color: #fff !important;
}

body.dg-theme-dark .msg-time {
    color: #fff !important;
    opacity: 1 !important;
}

body.dg-theme-dark .msg-more-btn {
    color: #fff !important;
}

body.dg-theme-dark .dg-vk-time,
body.dg-theme-dark .dg-vk-time-slot .dg-vk-time {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* /messages: паттерн перенесён на #chatPane — фон #chatMessages не нужен */

/* Сайдбар: подсветка hover в цвет фона — только для мыши (тач: без липкого hover при скролле) */
@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-sidebar-light .dg-sb-link:hover {
        background: rgba(124, 58, 237, 0.28) !important;
        color: #fff !important;
    }
}

/* Сайдбар info: убираем разделительные линии */
body.dg-theme-dark .dg-sidebar-light .dg-sb-section {
    border-bottom: none !important;
}

body.dg-theme-dark .dg-sb-details {
    border-bottom: none !important;
}

/* “DollGallery” вверху сайдбара + строки «участников / публикаций / объявлений»: белый текст, цифры, иконки */
body.dg-theme-dark .dg-sb-community-name,
body.dg-theme-dark .dg-sidebar-light .dg-sb-stats,
body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li,
body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li span,
body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li i,
body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li svg {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    stroke: currentColor !important;
}

    body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li i,
    body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li svg,
    body.dg-theme-dark .dg-sidebar-light .dg-sb-stats li .lucide {
        fill: none !important;
    }

body.dg-theme-dark .dg-sb-community-desc {
    color: rgba(var(--c-border-rgb), 0.95) !important;
    -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.95) !important;
}

/* Mobile drawer тёмная тема: плотнее */
@media (max-width: 640px) {
    body.dg-theme-dark .dg-left-sidebar {
        background: rgba(18,18,23,0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.ios-device.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.ios-device.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sidebar-inner {
        background: inherit !important;
        background-color: inherit !important;
    }

    body.ios-device.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar {
        background: #121217 !important;
        background-color: #121217 !important;
        background-image: none !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.ios-device.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sidebar-inner {
        background: inherit !important;
        background-color: inherit !important;
    }
}

body.dg-theme-dark .dg-sidebar-light .dg-sb-link {
    background: rgba(var(--c-border-rgb), 0.06) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.10) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    margin: 4px 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-sidebar-light .dg-sb-link--active,
body.dg-theme-dark .dg-sidebar-light .dg-sb-link--highlight,
body.dg-theme-dark .dg-sidebar-light .dg-sb-link.dg-sb-link-active {
    background: rgba(124, 58, 237, 0.28) !important;
    border-color: rgba(124, 58, 237, 0.40) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 600;
}

body.dg-theme-dark .dg-sb-details:has(.dg-sb-link-active) > .dg-sb-summary {
    background: rgba(124, 58, 237, 0.28) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 600;
}

/* Кнопки/ссылки “блоком” */
body.dg-theme-dark .dg-sb-link-block {
    background: rgba(var(--c-border-rgb), 0.06) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    margin: 4px 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-sb-link-block:hover {
        background: rgba(124, 58, 237, 0.28) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }
}

/* Раскрывающиеся списки (summary) */
body.dg-theme-dark .dg-sb-summary {
    background: rgba(var(--c-border-rgb), 0.06) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    body.dg-theme-dark .dg-sb-summary:hover {
        background: rgba(124, 58, 237, 0.28) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }
}

body.dg-theme-dark .dg-sb-details[open] .dg-sb-summary {
    background: rgba(124, 58, 237, 0.28) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (min-width: 641px) and (max-width: 768px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sidebar-inner {
        padding-top: 10px;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        margin: 0 auto !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item--active {
        background: rgba(124, 58, 237, 0.28) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-tablet-flat__item--primary {
        background: linear-gradient(135deg, #9b6cff 0%, #7c3aed 100%) !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 24px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
    }
}

/* Ник автора в статье — белый */
body.dg-theme-dark .author-review-author {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .author-review {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dg-theme-dark .author-review-date,
body.dg-theme-dark .author-review-rating,
body.dg-theme-dark .author-review-body,
body.dg-theme-dark .author-review-title,
body.dg-theme-dark .author-review-reply summary,
body.dg-theme-dark .author-review-reply-body,
body.dg-theme-dark .author-review .text-secondary {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

body.dg-theme-dark .author-review-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .author-review-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .author-review-actions .btn-secondary:hover,
body.dg-theme-dark .author-review-actions .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

body.dg-theme-dark .author-review-collapse {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .author-review-collapse:hover,
body.dg-theme-dark .author-review-collapse:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* Dot на кнопках сообщений/уведомлений: убрать белый контур */
body.dg-theme-dark .nav-icon-btn .indicator-dot {
    border: none !important;
    box-shadow: none !important;
}

/* Моб. “шапка” (поиск сверху): та же family что navbar */
body.dg-theme-dark .dg-mobile-top-search {
    background: rgba(15,15,18,0.80) !important;
    border-bottom-color: rgba(229,231,235,0.11) !important;
    backdrop-filter: blur(var(--dg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-glass-blur)) !important;
    padding: 10px 12px 8px !important;
    padding-top: max(10px, var(--safe-top)) !important;
}

body.dg-theme-dark .dg-mobile-top-search.dg-search-scrolled {
    background: #0f0f12 !important;
}

    body.dg-theme-dark .dg-mobile-top-search .search-container {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

        body.dg-theme-dark .dg-mobile-top-search .search-container input {
            background: transparent !important;
            color: #fff !important;
        }

            body.dg-theme-dark .dg-mobile-top-search .search-container input::placeholder {
                color: var(--c-muted) !important;
            }

        body.dg-theme-dark .dg-mobile-top-search .search-container .nav-search-icon,
        body.dg-theme-dark .dg-mobile-top-search .search-container svg.nav-search-icon {
            color: #fff !important;
            stroke: #fff !important;
            fill: none !important;
        }

/* Инфо/блог (моб.): контент сразу под подложкой поиска — без лишнего отступа и второй линии */
@media (max-width: 640px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .main-content.dg-blog-hero-wrap {
        padding-top: 0;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-hero-slider {
        margin-top: 0;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-mobile-top-search {
        border-bottom: none;
    }
}

/* Профиль: иконки рядом с титулом/заголовками тоже белые */
body.dg-theme-dark #profileModal .profile-title i,
body.dg-theme-dark #profileModal .profile-title svg,
body.dg-theme-dark #profileModal .profile-title .lucide,
body.dg-theme-dark #profileModal .dg-profile-title-placeholder i,
body.dg-theme-dark #profileModal .dg-profile-title-placeholder svg,
body.dg-theme-dark #profileModal .dg-profile-title-placeholder .lucide {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    stroke: currentColor;
    fill: transparent;
}

/* =========================
   DG: messagesModal (PC+Mobile) => как комменты
   (правки под элементы, которые рисует messages.js)
   ========================= */

body.dg-theme-dark #messagesModal #chatForm {
    background: transparent !important;
    border-top: none !important;
}

body.dg-theme-dark #messagesModal #chatInput {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    body.dg-theme-dark #messagesModal #chatInput::placeholder {
        color: rgba(var(--c-border-rgb), 0.55) !important;
    }

/* Кнопки в шапке messagesModal (⋯ и ×): как кнопка лупы */
body.dg-theme-dark #messagesModal .modal-kebab,
body.dg-theme-dark #messagesModal .modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

    body.dg-theme-dark #messagesModal .modal-kebab svg,
    body.dg-theme-dark #messagesModal .modal-kebab .lucide,
    body.dg-theme-dark #messagesModal .modal-close svg,
    body.dg-theme-dark #messagesModal .modal-close .lucide {
        stroke: #fff !important;
        color: #fff !important;
        fill: none !important;
        -webkit-text-fill-color: #fff !important;
    }

/* ПК/таблет: кнопки ⋯ и × в шапке чата (#chatHeader) как у лупы */
body.dg-theme-dark #chatHeader .dg-chat-kebab,
body.dg-theme-dark #chatHeader .dg-chat-close:not(.dg-modal-back-btn) {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    color: #fff !important;
}

    body.dg-theme-dark #chatHeader .dg-chat-kebab svg,
    body.dg-theme-dark #chatHeader .dg-chat-kebab .lucide,
    body.dg-theme-dark #chatHeader .dg-chat-close:not(.dg-modal-back-btn) svg,
    body.dg-theme-dark #chatHeader .dg-chat-close:not(.dg-modal-back-btn) .lucide {
        stroke: #fff !important;
        color: #fff !important;
        fill: none !important;
        -webkit-text-fill-color: #fff !important;
    }

@media (max-width: 640px) {
    body.dg-theme-dark #messagesModal .modal-kebab,
    body.dg-theme-dark #messagesModal .modal-close {
        background: rgba(0, 0, 0, 0.55) !important;
        border: 2px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow: none !important;
        color: #fff !important;
    }

        body.dg-theme-dark #messagesModal .modal-kebab svg,
        body.dg-theme-dark #messagesModal .modal-kebab .lucide,
        body.dg-theme-dark #messagesModal .modal-close svg,
        body.dg-theme-dark #messagesModal .modal-close .lucide {
            stroke: #fff !important;
            color: #fff !important;
            fill: none !important;
        }
}

    body.dg-theme-dark .modal-content.subscription-modal .sub-price-value {
        color: #fff !important;
    }

    body.dg-theme-dark .modal-content.subscription-modal .sub-price-original,
    body.dg-theme-dark .modal-content.subscription-modal .sub-price-period {
        color: rgba(var(--c-border-rgb), 0.85) !important;
    }

/* =========================
   DG: Info/premium remaining fixes
   ========================= */

/* 1) Расстояние между раскрывающимися списками в сайдбаре */
body.dg-theme-dark .dg-sidebar-light .dg-sb-details {
    margin: 8px 0 !important;
}

/* 2) Premium: делаем именно subscriptionModal полностью серым */
body.dg-theme-dark #subscriptionModal .modal-content.subscription-modal,
body.dg-theme-dark #subscriptionModal .modal-content {
    background: rgba(15, 15, 18, 0.72) !important;
    color: #fff !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.dg-theme-dark #subscriptionModal .modal-header,
body.dg-theme-dark #subscriptionModal .modal-body {
    background: transparent !important;
}

body.dg-theme-dark #subscriptionModal .sub-price,
body.dg-theme-dark #subscriptionModal .sub-price-original,
body.dg-theme-dark #subscriptionModal .sub-price-value,
body.dg-theme-dark #subscriptionModal .sub-price-period {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Premium: белый блок `.sub-hero` из embedded-стилей app.js -> серый стекло-фон */
body.dg-theme-dark #subscriptionModal .sub-hero {
    background: rgba(15, 15, 18, 0.72) !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.dg-theme-dark #subscriptionModal .sub-plan-card--annual {
    border-color: rgba(245, 158, 11, 0.38) !important;
}

body.dg-theme-dark #subscriptionModal .sub-plan-badge {
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
}

/* 3) Ник автора (в комментах/отзывах) — белым */
body.dg-theme-dark .comment-author,
body.dg-theme-dark .comment-header .comment-author,
body.dg-theme-dark .author-name,
body.dg-theme-dark .author-review-author {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Лайк комментария: не .like-button — в тёмной теме нет stroke для svg.lucide (есть только в светлой);
   на iPhone WebKit иначе красит сердце/цифру. Явно как у .like-button в блоке выше. */
body.dg-theme-dark .comment-meta .comment-like-btn,
html.dg-theme-dark .comment-meta .comment-like-btn {
    color: rgba(var(--c-border-rgb), 0.95) !important;
    -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.95) !important;
}

    body.dg-theme-dark .comment-meta .comment-like-btn .comment-like-count,
    html.dg-theme-dark .comment-meta .comment-like-btn .comment-like-count {
        color: rgba(var(--c-border-rgb), 0.95) !important;
        -webkit-text-fill-color: rgba(var(--c-border-rgb), 0.95) !important;
        opacity: 1 !important;
    }

    body.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) .lucide,
    body.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) svg.lucide,
    body.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) svg.lucide *,
    body.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) i[data-lucide="heart"],
    html.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) .lucide,
    html.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) svg.lucide,
    html.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) svg.lucide *,
    html.dg-theme-dark .comment-meta .comment-like-btn:not(.is-liked) i[data-lucide="heart"] {
        stroke: rgba(var(--c-border-rgb), 0.95) !important;
        fill: none !important;
    }

    body.dg-theme-dark .comment-meta .comment-like-btn.is-liked,
    html.dg-theme-dark .comment-meta .comment-like-btn.is-liked {
        color: var(--c-primary, #a78bfa) !important;
        -webkit-text-fill-color: var(--c-primary, #a78bfa) !important;
    }

        body.dg-theme-dark .comment-meta .comment-like-btn.is-liked .comment-like-count,
        html.dg-theme-dark .comment-meta .comment-like-btn.is-liked .comment-like-count {
            color: var(--c-primary, #a78bfa) !important;
            -webkit-text-fill-color: var(--c-primary, #a78bfa) !important;
        }

        body.dg-theme-dark .comment-meta .comment-like-btn.is-liked .lucide,
        body.dg-theme-dark .comment-meta .comment-like-btn.is-liked svg.lucide,
        body.dg-theme-dark .comment-meta .comment-like-btn.is-liked svg.lucide *,
        body.dg-theme-dark .comment-meta .comment-like-btn.is-liked i[data-lucide="heart"],
        html.dg-theme-dark .comment-meta .comment-like-btn.is-liked .lucide,
        html.dg-theme-dark .comment-meta .comment-like-btn.is-liked svg.lucide,
        html.dg-theme-dark .comment-meta .comment-like-btn.is-liked svg.lucide *,
        html.dg-theme-dark .comment-meta .comment-like-btn.is-liked i[data-lucide="heart"] {
            stroke: var(--c-primary, #a78bfa) !important;
            fill: rgba(var(--c-primary-rgb), 0.18) !important;
        }

    /* «Ответить» / лайк комментария: не наследовать светлый hover от .btn-ghost (var(--c-bg-light)) */
    body.dg-theme-dark .comment-meta .comment-reply.btn-ghost:hover,
    html.dg-theme-dark .comment-meta .comment-reply.btn-ghost:hover,
    body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:hover,
    html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:hover,
    body.dg-theme-dark .comment-meta .comment-reply.btn-ghost:focus-visible,
    html.dg-theme-dark .comment-meta .comment-reply.btn-ghost:focus-visible,
    body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:focus-visible,
    html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:focus-visible {
        background: rgba(255, 255, 255, 0.07) !important;
        color: rgba(var(--c-border-rgb), 0.95) !important;
    }

    body.dg-theme-dark .comment-meta .comment-reply.btn-ghost:active,
    html.dg-theme-dark .comment-meta .comment-reply.btn-ghost:active,
    body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:active,
    html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:active {
        background: rgba(255, 255, 255, 0.11) !important;
    }

    body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:hover,
    html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:hover,
    body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:focus-visible,
    html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:focus-visible {
        background: rgba(var(--c-primary-rgb), 0.14) !important;
        color: var(--c-primary, #a78bfa) !important;
    }

/* 4) Info pages (blog list/article) — белый текст */
body.dg-theme-dark .dg-blog-main {
    background: transparent !important;
    color: #fff !important;
}

body.dg-theme-dark .dg-blog-card {
    background: var(--dg-surface-dark) !important;
    border-color: var(--dg-surface-border-dark) !important;
    box-shadow: none !important;
    color: #fff !important;
}

    body.dg-theme-dark .dg-blog-card:hover {
        box-shadow: none !important;
        border-color: rgba(255,255,255,0.16) !important;
    }

body.dg-theme-dark .dg-blog-card-media {
    background: rgba(24,24,30,0.60) !important;
}

body.dg-theme-dark .dg-blog-card-arrow,
body.dg-theme-dark .dg-blog-card-footer .dg-blog-card-arrow {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

body.dg-theme-dark .dg-blog-card-title {
    color: #fff !important;
}

body.dg-theme-dark .dg-blog-breadcrumbs {
    color: rgba(var(--c-border-rgb), 0.85) !important;
}

    body.dg-theme-dark .dg-blog-breadcrumbs a {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

body.dg-theme-dark .dg-blog-empty {
    color: #fff !important;
}

/* Каталог статей */
.dg-page-blog .dg-blog-main { max-width: 1440px; padding: 20px 22px 72px; color: var(--c-text, #20202a); }
.dg-page-blog .dg-blog-title { position: static; width: auto; height: auto; overflow: visible; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; margin: 8px 0 10px; color: inherit; }
.dg-page-blog .dg-blog-intro { margin: 0 0 24px; color: var(--c-muted, #6b7280); }
.dg-page-blog .dg-blog-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.dg-page-blog .dg-blog-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 3px; }
.dg-page-blog .dg-blog-filters button, .dg-page-blog .dg-blog-sort-trigger { flex: none; border: 1px solid var(--c-border, #d9d7e0); border-radius: 999px; background: var(--c-bg-light, #fff); color: inherit; padding: 10px 18px; font: inherit; cursor: pointer; }
@media (min-width: 641px) {
    .dg-page-blog .dg-blog-filters button, .dg-page-blog .dg-blog-sort-trigger { box-sizing: border-box; height: 36px; padding-block: 0; }
}
.dg-page-blog .dg-blog-filters button.is-active { background: var(--c-primary, #8b5cf6); color: #fff; border-color: var(--c-primary, #8b5cf6); }
.dg-page-blog .dg-blog-filters button:hover, .dg-page-blog .dg-blog-sort-trigger:hover { border-color: var(--c-primary, #8b5cf6); }
.dg-page-blog .dg-blog-filters button:focus-visible, .dg-page-blog .dg-blog-sort-trigger:focus-visible, .dg-page-blog .dg-blog-sort-menu button:focus-visible, .dg-page-blog .dg-blog-card-meta .dg-post-action-btn:focus-visible { outline: 2px solid var(--c-primary, #8b5cf6); outline-offset: 2px; }
.dg-page-blog .dg-blog-sort { position: relative; flex: none; z-index: 5; }
.dg-page-blog .dg-blog-sort-trigger { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.dg-page-blog .dg-blog-sort-trigger svg { width: 17px; height: 17px; transition: transform .2s; }
.dg-page-blog .dg-blog-sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.dg-page-blog .dg-blog-sort-menu { position: absolute; top: calc(100% + 7px); right: 0; min-width: 100%; width: max-content; max-width: min(90vw, 300px); padding: 6px; border: 1px solid var(--c-border, #d9d7e0); border-radius: 16px; background: var(--c-bg-light, #fff); box-shadow: 0 12px 32px rgba(25,18,40,.18); display: grid; gap: 2px; }
.dg-page-blog .dg-blog-sort-menu[hidden] { display: none; }
.dg-page-blog .dg-blog-sort-menu button { border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; padding: 9px 12px; cursor: pointer; }
.dg-page-blog .dg-blog-sort-menu button:hover, .dg-page-blog .dg-blog-sort-menu button[aria-pressed="true"] { background: rgba(var(--c-primary-rgb), .14); color: var(--c-primary, #8b5cf6); }
.dg-page-blog .dg-blog-card { background: var(--c-bg-light, #fff); }
.dg-page-blog .dg-blog-card-link { color: inherit; text-decoration: none; display: block; }
.dg-page-blog .dg-blog-card-media { aspect-ratio: 4/2.1; }
.dg-page-blog .dg-blog-card-category { position: absolute; top: 12px; left: 12px; border-radius: 999px; padding: 4px 12px; background: rgba(63,29,91,.82); color: #fff; font-size: 13px; }
.dg-page-blog .dg-blog-card-date { position: absolute; top: 14px; right: 12px; z-index: 1; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 4px #000; }
.dg-page-blog .dg-blog-card-ad-label { top: 35px; left: auto; right: 12px; color: #fff; text-shadow: 0 1px 3px #000; }
.dg-page-blog .dg-blog-card-body { padding-bottom: 4px; }
.dg-page-blog .dg-blog-card-excerpt { display: -webkit-box; margin: 0; color: var(--c-muted, #6b7280); }
.dg-page-blog .dg-blog-card-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 16px 14px; color: var(--c-muted, #6b7280); font-size: 12px; }
.dg-page-blog .dg-blog-card-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dg-page-blog .dg-blog-card-stat svg { width: 17px; height: 17px; }
.dg-page-blog .dg-blog-card-meta .dg-post-action-btn { appearance: none !important; -webkit-appearance: none !important; display: inline-flex; align-items: center; gap: 4px; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; -webkit-text-fill-color: inherit !important; font: inherit; line-height: 1; cursor: pointer; }
.dg-page-blog .dg-blog-card-meta .dg-post-action-btn:is(:hover, :focus, :focus-visible, :active) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.dg-page-blog .dg-blog-card-meta .dg-post-action-btn svg { width: 17px !important; height: 17px !important; }
.dg-page-blog .dg-blog-card-meta .dg-post-action-btn .count { color: inherit !important; -webkit-text-fill-color: inherit !important; font-size: inherit; font-weight: inherit; line-height: inherit; }
.dg-page-blog .dg-blog-card-meta .dg-post-action-btn:disabled { opacity: .5; cursor: default; }
body.dg-theme-dark.dg-page-blog .dg-blog-main { color: #fff !important; }
body.dg-theme-dark.dg-page-blog .dg-blog-filters button, body.dg-theme-dark.dg-page-blog .dg-blog-sort-trigger, body.dg-theme-dark.dg-page-blog .dg-blog-sort-menu { background: var(--dg-surface-dark); border-color: var(--dg-surface-border-dark); color: #fff; }
body.dg-theme-dark.dg-page-blog .dg-blog-filters button.is-active { background: var(--c-primary, #8b5cf6); border-color: var(--c-primary, #8b5cf6); }
body.dg-theme-dark.dg-page-blog .dg-blog-sort-menu button:hover, body.dg-theme-dark.dg-page-blog .dg-blog-sort-menu button[aria-pressed="true"] { color: #fff; background: rgba(var(--c-primary-rgb), .28); }
body.dg-theme-dark.dg-page-blog .dg-blog-intro, body.dg-theme-dark.dg-page-blog .dg-blog-card-excerpt, body.dg-theme-dark.dg-page-blog .dg-blog-card-meta { color: #a9a8b8; }
body.dg-theme-dark.dg-page-blog .dg-blog-card-meta .dg-post-action-btn,
body.dg-theme-dark.dg-page-blog .dg-blog-card-meta .dg-post-action-btn:is(:hover, :focus, :focus-visible, :active) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
@media (max-width: 640px) {
    .dg-page-blog .dg-blog-main { width: 100%; min-width: 0; padding: 16px 12px 60px; }
    .dg-page-blog .dg-blog-header .dg-blog-breadcrumbs-row { display: none; }
    .dg-page-blog .dg-blog-intro { display: none; }
    .dg-page-blog .dg-blog-controls { gap: 8px; min-width: 0; margin-bottom: 18px; }
    .dg-page-blog .dg-blog-filters { flex: 1; min-width: 0; gap: 6px; }
    .dg-page-blog .dg-blog-filters button { padding: 7px 10px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
    .dg-page-blog .dg-blog-filter-icon { display: none; }
    .dg-page-blog .dg-blog-sort { display: none; }
    .dg-page-blog .dg-blog-controls .dg-pblog-burger { flex: none; }
    .dg-page-blog .dg-blog-main .dg-blog-list { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dg-page-blog .dg-blog-list-item, .dg-page-blog .dg-blog-card, .dg-page-blog .dg-blog-card-link { min-width: 0; width: 100%; }
    .dg-page-blog .dg-blog-main .dg-blog-card-media { aspect-ratio: 2/1; }
    .dg-page-blog .dg-blog-main .dg-blog-card-title { font-size: 19px; }
    .dg-page-blog .dg-blog-card-meta { flex-wrap: wrap; }
}

/* Личный блог (профиль): тёмная тема — как .dg-blog-card на Инфо; html/body — оба варианта класса темы */
body.dg-theme-dark .dg-profile-blog-card,
html.dg-theme-dark .dg-profile-blog-card {
    background: var(--c-bg) !important;
    border-color: var(--c-border) !important;
    box-shadow: none !important;
    color: #fff !important;
}

    body.dg-theme-dark .dg-profile-blog-card:hover,
    html.dg-theme-dark .dg-profile-blog-card:hover {
        box-shadow: none !important;
        border-color: rgba(var(--c-border-rgb), 0.22) !important;
    }

body.dg-theme-dark .dg-profile-blog-card-media,
html.dg-theme-dark .dg-profile-blog-card-media {
    background: var(--c-bg) !important;
}

body.dg-theme-dark .dg-profile-blog-card-title,
html.dg-theme-dark .dg-profile-blog-card-title {
    color: #fff !important;
}

body.dg-theme-dark button.dg-profile-blog-card.dg-profile-blog-card--btn,
html.dg-theme-dark button.dg-profile-blog-card.dg-profile-blog-card--btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--c-bg) !important;
    background-image: none !important;
}

/* Реферальная программа (dark): весь текст белый, исключение —
   "Приведено рефералов" и "С одобренными постами" (тёмно-серые). */
body.dg-theme-dark .dg-referral-page {
    color: #fff !important;
}

body.dg-theme-dark .dg-referral-intro {
    color: #fff !important;
}

body.dg-theme-dark .dg-referral-section-title {
    color: #fff !important;
}

body.dg-theme-dark .dg-referral-how-list li {
    color: #fff !important;
}

body.dg-theme-dark .dg-referral-loading,
body.dg-theme-dark .dg-referral-guest {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

body.dg-theme-dark .dg-referral-progress-label {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

body.dg-theme-dark .dg-referral-rewards-desc {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

body.dg-theme-dark .dg-referral-rewards-inline-title {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

body.dg-theme-dark .dg-referral-promo-label {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

body.dg-theme-dark .dg-referral-reward-value {
    color: #fff !important;
}

body.dg-theme-dark .dg-referral-reward-label {
    color: rgba(var(--c-border-rgb), 0.95) !important;
}

/* Статусы в верхней строке: по умолчанию белым, но первые 2 фразы — тёмно-серым */
body.dg-theme-dark .dg-referral-stat-label {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-referral-stats-row .dg-referral-stat-box:nth-child(1) .dg-referral-stat-label,
body.dg-theme-dark .dg-referral-stats-row .dg-referral-stat-box:nth-child(2) .dg-referral-stat-label {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

/* Профиль: мини-карточка рефералов в profile modal (там цвета стоят инлайн) */
body.dg-theme-dark #profileModal .dg-referral-card {
    color: #fff !important;
}

    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-title {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-progress-label {
        color: #fff !important;
    }

    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-stats p {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

        body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-stats p:nth-of-type(1),
        body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-stats p:nth-of-type(2) {
            color: #6b7280 !important;
            -webkit-text-fill-color: #6b7280 !important;
        }

    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-rewards > div,
    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-invite > div {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark #profileModal .dg-referral-card .dg-referral-invite p {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

/* Текстовые страницы (dg-text-page): в dark делаем основной текст белым */
body.dg-theme-dark .dg-text-page {
    color: #fff !important;
}

body.dg-theme-dark .dg-text-page-body p,
body.dg-theme-dark .dg-text-page-body li,
body.dg-theme-dark .dg-text-page-body a,
body.dg-theme-dark .dg-text-page-body h3,
body.dg-theme-dark .dg-text-page-body h4,
body.dg-theme-dark .dg-text-page-body strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-text-page-body hr {
    border-top-color: rgba(var(--c-border-rgb), 0.14) !important;
}

body.dg-theme-dark .dg-text-page-body .dg-sb-link-more {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Обновления: в описании (dg-updates-content) делаем текст белым */
body.dg-theme-dark .dg-updates-page .dg-updates-content,
body.dg-theme-dark .dg-updates-page .dg-updates-content p,
body.dg-theme-dark .dg-updates-page .dg-updates-content li,
body.dg-theme-dark .dg-updates-page .dg-updates-content span,
body.dg-theme-dark .dg-updates-page .dg-updates-content h2,
body.dg-theme-dark .dg-updates-page .dg-updates-content h3,
body.dg-theme-dark .dg-updates-page .dg-updates-content h4,
body.dg-theme-dark .dg-updates-page .dg-updates-content a,
body.dg-theme-dark .dg-updates-page .dg-updates-content strong,
body.dg-theme-dark .dg-updates-page .dg-updates-content b,
body.dg-theme-dark .dg-updates-page .dg-updates-content em,
body.dg-theme-dark .dg-updates-page .dg-updates-content i,
body.dg-theme-dark .dg-updates-page .dg-updates-content u {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Правила сайта /rules: серый текст -> белый (dark theme) */
body.dg-theme-dark .dg-rules-page {
    color: #fff !important;
}

    body.dg-theme-dark .dg-rules-page .dg-text-page-body,
    body.dg-theme-dark .dg-rules-page .dg-text-page-body p,
    body.dg-theme-dark .dg-rules-page .dg-text-page-body li,
    body.dg-theme-dark .dg-rules-page .dg-text-page-body a,
    body.dg-theme-dark .dg-rules-page .dg-rules-note {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

body.dg-theme-dark .dg-sale-rules-summary {
    background: rgba(15, 15, 18, 0.72) !important;
    border-color: rgba(var(--c-border-rgb), 0.16) !important;
}

body.dg-theme-dark .dg-sale-rules-summary,
body.dg-theme-dark .dg-sale-rules-summary p,
body.dg-theme-dark .dg-sale-rules-summary li,
body.dg-theme-dark .dg-sale-rules-summary a,
body.dg-theme-dark .dg-sale-rules-summary h3 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.dg-theme-dark .dg-sale-rules-summary .dg-sale-rules-summary__note {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

/* Добавить сторис (dark): кнопки серый фон, белый текст, фиолетовый hover */
body.dg-theme-dark #profileStoryUploadModal .dg-story-upload-actions .dg-story-upload-btn {
    background: rgba(var(--c-border-rgb), 0.12) !important;
    border-color: rgba(var(--c-border-rgb), 0.24) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark #profileStoryUploadModal .dg-story-upload-actions .dg-story-upload-btn:hover {
        background: rgba(var(--c-primary-rgb), 0.22) !important;
        border-color: rgba(var(--c-primary-rgb), 0.7) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark #profileStoryUploadModal .dg-story-upload-actions .dg-story-upload-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.25);
    }

/* Выберите титул (dark): убираем белый контур у опций */
body.dg-theme-dark .dg-profile-title-modal .dg-profile-title-option {
    border: 1px solid rgba(var(--c-border-rgb), 0.14) !important;
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark .dg-profile-title-modal .dg-profile-title-option:not(.dg-profile-title-option--locked):hover {
        background: rgba(var(--c-primary-rgb), 0.12) !important;
        border-color: rgba(var(--c-primary-rgb), 0.5) !important;
    }

/* --- Shorts: рамка чуть ниже классических 9:16 (~−15% по высоте в галерее ПК/моб) --- */
.dg-short-thumb {
    aspect-ratio: 45 / 68;
    max-height: calc(70vh * 0.85);
    position: relative;
    background: #000;
    overflow: hidden;
}

    .dg-short-thumb img,
    .dg-short-card-video {
        object-fit: contain;
        object-position: center;
        width: 100%;
        height: 100%;
    }

.dg-short-card-poster {
    position: absolute !important;
    inset: 0;
    z-index: 3 !important;
    background: #000;
}

.dg-short-card-video {
    position: relative;
    z-index: 2;
    background: #000;
}

.doll-card--short .dg-short-thumb .dg-card-badge {
    z-index: 31;
}

.dg-short-processing-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%),
        #050507;
}

.dg-short-processing-preview img {
    width: min(44%, 96px);
    height: auto;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.dg-short-processing-preview--detail {
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.dg-short-processing-preview--detail img {
    width: min(36%, 120px);
}

.dg-contest-entry-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(155,108,255,.94), rgba(124,58,237,.94));
    box-shadow: 0 6px 18px rgba(76,29,149,.28);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.1;
}

.dg-short-thumb--playing .dg-short-card-poster {
    opacity: 0;
    pointer-events: none;
}

.dg-short-duration {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 24;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Карточка short — <a>, в светлой теме у всех ссылок color:#111 !important → перебиваем длительность */
body:not(.dg-theme-dark) .doll-card.doll-card--short .dg-short-duration {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.doll-card.doll-card--short .doll-overlay {
    z-index: 25;
}

.dg-short-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 23;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s ease;
}

.dg-short-thumb--playing .dg-short-play-overlay {
    opacity: 0;
}

.dg-short-play-overlay i,
.dg-short-play-overlay svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.dg-short-views {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 4px;
}

/* Превью в модалке загрузки Short — та же рамка 9:16 */
.dg-short-upload-preview-host {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 320px;
    width: 100%;
    max-width: calc(320px * 9 / 16);
    margin: 0 auto;
    background: #000;
    border-radius: var(--r-12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dgShortUploadModal .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick {
    pointer-events: none;
}

    .dg-short-upload-preview-host video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

.dg-short-prep-elapsed-value {
    color: #111827;
}

.dg-short-prep-stage {
    color: #6d28d9;
}

body.dg-theme-dark .dg-short-prep-elapsed-value {
    color: #e4e4e7;
}

body.dg-theme-dark .dg-short-prep-stage {
    color: #d8b4fe;
}

/* ===== DG: post modal Pinterest/Stories-like underbar ===== */

.dg-post-title-overlay {
    padding: 14px 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.64), rgba(0,0,0,0));
}

.dg-post-title-overlay .dg-modal-title-wrap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 10px;
}

.dg-post-title-overlay h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

.dg-post-modal-underbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px 0;
}

.dg-post-modal-author,
.dg-post-modal-underbar .doll-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.dg-post-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.dg-post-modal-author img,
.dg-post-modal-underbar .doll-author img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
}

.dg-post-modal-author .author-name,
.dg-post-modal-underbar .author-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.dg-post-author-presence {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
    color: var(--c-muted);
}

.dg-post-modal-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.dg-article-publication-actions {
    margin-top: 4px;
}

.dg-article-content > :last-child,
.dg-profile-article-content > :last-child {
    margin-bottom: 0 !important;
}

.dg-post-modal-actions .fullscreen-btn {
    display: none;
}

.dg-post-modal-actions .dg-post-action-btn,
.dg-post-modal-actions .like-btn,
.dg-post-modal-actions .more-btn,
.dg-post-modal-actions .favorite-item,
.dg-post-modal-actions .dg-modal-follow-btn {
    width: auto;
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
}

.dg-post-modal-actions .like-btn {
    gap: 3px;
}

.dg-post-modal-actions .dg-post-comments-btn {
    gap: 4px;
}

.dg-post-modal-actions .like-btn .count {
    font-size: 12px;
    line-height: 1;
}

.dg-post-modal-actions .dg-post-comments-btn .count {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

:is(.dg-post-modal-actions, .dg-blog-card-meta) .favorite-item.active svg,
:is(.dg-post-modal-actions, .dg-blog-card-meta) .favorite-item.active .lucide {
    fill: currentColor;
}

body:not(.dg-theme-dark) :is(.dg-post-modal-actions, .dg-blog-card-meta) .favorite-item.active svg,
body:not(.dg-theme-dark) :is(.dg-post-modal-actions, .dg-blog-card-meta) .favorite-item.active .lucide {
    stroke: var(--c-primary, #8B5CF6) !important;
    fill: var(--c-primary, #8B5CF6) !important;
}

body:not(.dg-theme-dark) :is(.dg-post-modal-actions, .dg-blog-card-meta) .favorite-item.active {
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
}

.dg-post-modal-actions .dg-modal-follow-btn.is-following {
    color: var(--c-primary);
    -webkit-text-fill-color: var(--c-primary);
}

body.dg-theme-dark .dg-post-modal-actions .dg-post-action-btn,
body.dg-theme-dark .dg-post-modal-actions .like-btn,
body.dg-theme-dark .dg-post-modal-actions .more-btn,
body.dg-theme-dark .dg-post-modal-actions .favorite-item,
body.dg-theme-dark .dg-post-modal-actions .dg-modal-follow-btn {
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    .dg-article-publication-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }

    .dg-post-modal-underbar {
        padding: 8px 0 0;
        gap: 8px;
    }

    .dg-post-modal-actions {
        gap: 6px;
    }

    .dg-post-modal-actions .dg-post-action-btn,
    .dg-post-modal-actions .like-btn,
    .dg-post-modal-actions .more-btn,
    .dg-post-modal-actions .favorite-item,
    .dg-post-modal-actions .dg-modal-follow-btn {
        min-width: 32px;
        height: 32px;
    }
}

/* ===== DG: short modal TikTok/Pinterest layout ===== */

#shortModal .modal-content.modal-tall {
    height: 95dvh !important;
    max-height: 95dvh !important;
    width: min(96vw, 1380px);
    border-radius: 16px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

#shortModal .dg-short-modal-close {
    left: 14px;
    right: auto;
    top: 14px;
    z-index: 5;
}

#dollModal .modal-close,
#shortModal .modal-close,
#shortModal .dg-short-modal-close {
    position: absolute !important;
    left: calc(14px + var(--safe-left, 0px)) !important;
    right: auto !important;
    top: calc(14px + var(--safe-top, 0px)) !important;
    z-index: 20 !important;
}

@media (max-width: 640px) {
    #dollModal .modal-close {
        left: calc(8px + var(--safe-left, 0px)) !important;
        top: calc(5dvh + 4px) !important;
    }

    #shortModal .modal-close,
    #shortModal .dg-short-modal-close {
        left: calc(8px + var(--safe-left, 0px)) !important;
        top: calc(5dvh + 4px) !important;
    }

    html.dg-standalone-pwa #dollModal .modal-close,
    html.dg-standalone-pwa #dollModal .dg-media-modal-back,
    html.dg-standalone-pwa body.ios-device #dollModal .modal-close,
    html.dg-standalone-pwa body.ios-device #dollModal .dg-media-modal-back {
        position: absolute !important;
        top: 12px !important;
        left: calc(max(16px, var(--safe-left, env(safe-area-inset-left, 0px))) + max(0px, calc((100vw - min(96vw, 1200px)) / 2))) !important;
        right: auto !important;
        z-index: 20 !important;
    }

    html.dg-standalone-pwa #shortModal .modal-close,
    html.dg-standalone-pwa #shortModal .dg-media-modal-back,
    html.dg-standalone-pwa body.ios-device #shortModal .modal-close,
    html.dg-standalone-pwa body.ios-device #shortModal .dg-media-modal-back {
        position: fixed !important;
        top: calc(8px + var(--dg-safe-top-gap, env(safe-area-inset-top, 0px))) !important;
        left: calc(8px + var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        right: auto !important;
        z-index: 20 !important;
    }
}

#shortModal .modal-body {
    overflow: auto;
    max-height: 100%;
    padding: 12px 16px 16px;
}

#shortModal .dg-short-detail {
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(460px, 560px);
    gap: 32px;
    align-items: stretch;
    justify-content: center;
}

#shortModal .doll-detail-left.modal-media {
    min-width: 0;
    display: flex;
    justify-content: center;
}

@media (min-width: 901px) {
    #shortModal {
        --dg-short-modal-video-h: min(91vh, 960px, calc(100vh - 32px));
    }

    #shortModal .doll-detail-left.modal-media {
        align-self: center;
        margin-top: 0;
    }

    #shortModal .dg-short-stage {
        position: relative;
        width: min(calc(var(--dg-short-modal-video-h) * 9 / 16), calc(100% - 64px));
    }

    #shortModal .dg-short-detail-video-host.doll-detail-image {
        width: 100%;
        max-height: var(--dg-short-modal-video-h);
        margin-inline: 0;
    }

    #shortModal .dg-short-side-rail {
        position: absolute;
        top: 50%;
        right: -64px;
        transform: translateY(-50%);
    }

    #shortModal .dg-short-side-rail .dg-short-action-btn,
    #shortModal .dg-short-side-rail .like-btn,
    #shortModal .dg-short-side-rail .share-btn,
    #shortModal .dg-short-side-rail .more-btn,
    #shortModal .dg-short-side-rail .dg-short-follow-btn,
    #shortModal .dg-short-side-rail .dg-short-comments-jump-btn {
        min-width: 53px !important;
        min-height: 53px !important;
    }

    #shortModal .dg-short-side-rail .like-btn,
    #shortModal .dg-short-side-rail .dg-short-comments-jump-btn {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #shortModal .dg-short-side-rail :is(.dg-short-action-btn,.like-btn,.share-btn,.more-btn,.dg-short-comments-jump-btn) > :is(svg,.lucide) {
        width: 29px !important;
        height: 29px !important;
    }

    #shortModal .dg-short-modal-follow-mobile {
        display: none;
    }

    #shortModal .dg-short-modal-follow-desktop {
        display: block;
    }

    #shortModal .dg-short-modal-follow-btn {
        position: relative;
        min-width: 53px !important;
        min-height: 53px !important;
    }

    #shortModal .dg-short-modal-follow-btn .dg-short-follow-avatar {
        width: 46px;
        height: 46px;
        display: block;
        overflow: hidden;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    #shortModal .dg-short-modal-follow-btn .dg-short-follow-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    #shortModal .dg-short-modal-follow-btn .dg-short-follow-badge {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        background: var(--c-primary, #8b5cf6);
    }

    #shortModal .dg-short-modal-follow-btn .dg-short-follow-badge :is(svg,.lucide) {
        width: 13px !important;
        height: 13px !important;
    }

    #shortModal .dg-short-side-rail > .dg-short-share-btn .dg-short-share-label {
        display: none;
    }
}

#shortModal .doll-detail-right.modal-side {
    width: 100%;
    min-width: 460px;
    max-width: 560px;
}

.dg-short-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.dg-short-modal-follow-desktop {
    display: none;
}

/* Модалка short: фиксированная вертикальная рамка 9:16 */
.dg-short-detail-video-host.doll-detail-image {
    width: min(100%, calc(min(88vh, 900px, calc(95dvh - 84px)) * 9 / 16));
    aspect-ratio: 9 / 16;
    max-height: min(88vh, 900px, calc(95dvh - 84px));
    margin-inline: auto;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Иначе .doll-detail-image { overflow:hidden } обрезает выпадашку «⋯» */
    overflow: visible;
}

    .dg-short-detail-video-host.doll-detail-image video.dg-short-video,
    .dg-short-detail-video-host.doll-detail-image video.detail-main-img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        display: block;
        object-fit: contain !important;
        object-position: center;
        background: #000;
        border-radius: var(--r-12);
    }

    .dg-short-detail-video-host.doll-detail-image .dg-short-processing-preview--detail {
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        border-radius: var(--r-12);
    }

.dg-short-side-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    align-self: center;
}

.dg-short-side-rail .more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

@media (min-width: 641px) {
    #shortModal .dg-short-side-rail {
        /* Keep the rail's stacking context above the video overlay and controls. */
        z-index: var(--dg-z-dropdown);
    }
}

#shortModal .dg-short-favorite-btn.active,
#heroShortsViewerWrap .dg-short-favorite-btn.active {
    color: var(--c-primary, #8b5cf6) !important;
    -webkit-text-fill-color: var(--c-primary, #8b5cf6) !important;
}

#shortModal .dg-short-favorite-btn.active :is(svg, .lucide),
#heroShortsViewerWrap .dg-short-favorite-btn.active :is(svg, .lucide) {
    fill: currentColor;
    stroke: currentColor;
}

.dg-short-side-rail .more-container .action-menu {
    right: 100%;
    left: auto;
    bottom: 0;
    margin-right: 10px;
    margin-bottom: 0;
}

#shortModal .dg-short-side-rail .dg-short-action-btn,
#shortModal .dg-short-side-rail .like-btn,
#shortModal .dg-short-side-rail .share-btn,
#shortModal .dg-short-side-rail .more-btn,
#shortModal .dg-short-side-rail .dg-short-follow-btn,
#shortModal .dg-short-side-rail .dg-short-comments-jump-btn {
    width: auto;
    min-width: 32px;
    height: auto;
    min-height: 32px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}

#shortModal .dg-short-side-rail .dg-short-action-btn i,
#shortModal .dg-short-side-rail .dg-short-action-btn svg,
#shortModal .dg-short-side-rail .like-btn i,
#shortModal .dg-short-side-rail .like-btn svg,
#shortModal .dg-short-side-rail .share-btn i,
#shortModal .dg-short-side-rail .share-btn svg,
#shortModal .dg-short-side-rail .more-btn i,
#shortModal .dg-short-side-rail .more-btn svg,
#shortModal .dg-short-side-rail .dg-short-follow-btn i,
#shortModal .dg-short-side-rail .dg-short-follow-btn svg,
#shortModal .dg-short-side-rail .dg-short-comments-jump-btn i,
#shortModal .dg-short-side-rail .dg-short-comments-jump-btn svg {
    width: 24px;
    height: 24px;
}

#shortModal .dg-short-side-rail .like-btn .count,
#shortModal .dg-short-side-rail .dg-short-comments-jump-btn .count {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

#shortModal .dg-short-side-rail .like-btn,
#shortModal .dg-short-side-rail .dg-short-comments-jump-btn {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}


.dg-short-title-shell {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.dg-short-title-shell.dg-short-title-shell--hidden {
    opacity: 0;
    transform: translateY(4px);
}

.dg-short-side-author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
}

.dg-short-side-author-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dg-short-side-author .doll-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    flex: 1 1 auto;
}

.dg-short-side-author-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dg-short-side-author .doll-author img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
}

.dg-short-side-author .author-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
}

.dg-short-author-presence {
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.68);
}

.dg-short-side-author .dg-short-write-btn {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.dg-short-side-description {
    margin-bottom: 10px;
}

#dollModal .dg-modal-description,
#shortModal .dg-modal-description {
    line-height: 1.5;
}

#dollModal .dg-modal-description--collapsed,
#shortModal .dg-modal-description--collapsed {
    max-height: 13.5em;
    overflow: hidden;
}

#dollModal .dg-modal-description-toggle,
#shortModal .dg-modal-description-toggle {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-primary, #8b5cf6);
    -webkit-text-fill-color: var(--c-primary, #8b5cf6);
    font: inherit;
    cursor: pointer;
}

#dollModal .dg-modal-description-toggle[hidden],
#shortModal .dg-modal-description-toggle[hidden] {
    display: none;
}

#dollModal .dg-modal-description-toggle:hover,
#shortModal .dg-modal-description-toggle:hover {
    text-decoration: underline;
}

#dollModal .dg-modal-description-toggle:focus-visible,
#shortModal .dg-modal-description-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.dg-short-side-stats {
    margin-top: 10px;
    opacity: 0.85;
    font-size: 0.9rem;
}

.dg-short-contact-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dg-short-contact-actions .dg-short-write-btn {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
}

/* Shorts: оверлей не перекрывает полосу прогресса и контролы <video> */
.dg-short-detail .doll-info-overlay.dg-short-video-overlay {
    pointer-events: none;
    padding: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 28%, transparent 52%);
}

.dg-short-detail .dg-short-video-overlay {
    --dg-short-controls-clearance: max(72px, calc(44px + env(safe-area-inset-bottom, 0px)));
}

.dg-short-overlay-text {
    position: absolute;
    left: 12px;
    right: 58px;
    bottom: calc(var(--dg-short-controls-clearance) + 4px);
    z-index: 3;
    pointer-events: none;
    max-width: calc(100% - 70px);
}

.dg-short-overlay-text.dg-short-overlay-text--moderation {
    right: 12px;
    max-width: calc(100% - 24px);
}

.dg-short-overlay-text .dg-short-overlay-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.dg-short-overlay-text .dg-short-overlay-meta {
    margin: 0;
    pointer-events: auto;
}

.dg-short-overlay-text .doll-author {
    pointer-events: auto;
}

/* Fallback: скрываем автора на видео, если остался от старого кэша */
#shortModal .dg-short-video-overlay .dg-short-overlay-meta {
    display: none !important;
}

@media (max-width: 900px) {
    #shortModal .modal-content.modal-tall {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #shortModal .modal-body {
        padding: 8px 8px calc(12px + var(--safe-bottom, 0px));
        overflow-y: auto;
        max-height: 100%;
    }

    @media (max-width: 640px) {
        #shortModal .modal-body {
            padding-left: max(4.8px, var(--safe-left, env(safe-area-inset-left, 0px)));
            padding-right: max(4.8px, var(--safe-right, env(safe-area-inset-right, 0px)));
        }
    }

    html.dg-standalone-pwa #shortModal .modal-body {
        padding-top: calc(8px + var(--dg-safe-top-gap, env(safe-area-inset-top, 0px)));
    }

    #shortModal .dg-short-detail {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #shortModal .doll-detail-left.modal-media {
        order: 1;
        display: block;
        width: 100%;
    }

    #shortModal .doll-detail-right.modal-side {
        order: 2;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .dg-short-stage {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .dg-short-detail-video-host.doll-detail-image {
        width: min(100%, 520px);
        max-width: 100%;
        max-height: none;
        aspect-ratio: 9 / 16;
        margin-inline: auto;
        overflow: hidden;
        border-radius: var(--r-12);
    }

    @supports (-webkit-touch-callout: none) {
        .dg-short-detail-video-host.doll-detail-image {
            margin-top: 42px;
        }
    }

    .dg-short-side-rail {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
        padding: 8px 2px 0;
    }

    #shortModal .dg-short-side-rail > .like-btn {
        order: 1;
    }

    #shortModal .dg-short-side-rail > .dg-short-comments-jump-btn {
        order: 2;
    }

    #shortModal .dg-short-side-rail > .dg-short-follow-btn {
        order: 3;
    }

    #shortModal .dg-short-side-rail > .dg-short-favorite-btn {
        order: 4;
    }

    #shortModal .dg-short-side-rail > .more-container {
        order: 5;
    }

    #shortModal .dg-short-side-rail .dg-short-action-btn,
    #shortModal .dg-short-side-rail .like-btn,
    #shortModal .dg-short-side-rail .share-btn,
    #shortModal .dg-short-side-rail .more-btn,
    #shortModal .dg-short-side-rail .dg-short-follow-btn,
    #shortModal .dg-short-side-rail .dg-short-comments-jump-btn {
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0 4px;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #shortModal .dg-short-side-rail .dg-short-action-btn i,
    #shortModal .dg-short-side-rail .dg-short-action-btn svg,
    #shortModal .dg-short-side-rail .like-btn i,
    #shortModal .dg-short-side-rail .like-btn svg,
    #shortModal .dg-short-side-rail .share-btn i,
    #shortModal .dg-short-side-rail .share-btn svg,
    #shortModal .dg-short-side-rail .more-btn i,
    #shortModal .dg-short-side-rail .more-btn svg,
    #shortModal .dg-short-side-rail .dg-short-follow-btn i,
    #shortModal .dg-short-side-rail .dg-short-follow-btn svg,
    #shortModal .dg-short-side-rail .dg-short-comments-jump-btn i,
    #shortModal .dg-short-side-rail .dg-short-comments-jump-btn svg {
        width: 22px;
        height: 22px;
    }

    .dg-short-side-rail .more-container .action-menu {
        right: 0;
        left: auto;
        bottom: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .dg-short-side-author {
        margin-top: 0;
        margin-bottom: 12px;
        padding: 0;
        border-top: 0;
    }

    .dg-short-side-author-top {
        align-items: center;
        gap: 10px;
    }

    .dg-short-side-author .doll-author {
        min-width: 0;
    }

    .dg-short-side-author-meta {
        gap: 2px;
    }

    .dg-short-side-author .author-name {
        font-size: 14px;
    }

    .dg-short-author-presence {
        font-size: 11px;
    }

    .dg-short-side-author .dg-short-write-btn {
        min-height: 30px;
        padding: 5px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    #shortModal .dg-short-write-btn--rail {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 7px 16px;
        border-radius: 999px;
        white-space: nowrap;
        align-self: flex-end;
        margin-top: 8px;
        margin-right: 2px;
    }

    #shortModal .dg-short-side-rail--author {
        width: auto;
        padding: 0;
        margin-left: auto;
        align-self: auto;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #shortModal .dg-short-side-rail--author .more-container .action-menu {
        right: 0;
        left: auto;
        top: 100%;
        bottom: auto;
        margin-right: 0;
        margin-top: 8px;
        margin-bottom: 0;
    }

    #shortModal .description-block {
        margin-top: 0 !important;
    }

    #shortModal .description-block .tags {
        margin-top: 8px !important;
        gap: 6px !important;
    }

    #shortModal .dg-short-side-description {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.35;
    }

    #shortModal .dg-short-side-stats {
        margin-top: 8px;
        font-size: 13px;
    }

    .dg-short-overlay-text {
        left: 12px;
        right: 52px;
        bottom: calc(var(--dg-short-controls-clearance) + 4px);
        max-width: calc(100% - 64px);
    }

    .dg-short-overlay-text.dg-short-overlay-text--moderation {
        right: 12px;
        max-width: calc(100% - 24px);
    }

    .dg-short-overlay-text .dg-short-overlay-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
    }

}

/* Онбординг после регистрации */
.dg-hero-shorts-viewer {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-viewer);
}

.dg-hero-shorts-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
}

.dg-hero-shorts-viewer__body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.dg-hero-shorts-viewer__body::-webkit-scrollbar {
    display: none;
}

.dg-hero-shorts-viewer__slide {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.dg-hero-shorts-viewer__stage {
    --dg-short-controls-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --dg-short-controls-height: 48px;
    --dg-short-meta-gap: 8px;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.dg-hero-shorts-viewer__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.dg-hero-shorts-viewer__gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent 18%),
        linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 34%);
}

.dg-hero-shorts-viewer__top {
    position: absolute;
    top: max(14px, env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}

.dg-hero-shorts-viewer__top .modal-close,
.dg-hero-shorts-viewer__top [data-action="close"] {
    position: static;
    top: auto;
    right: auto;
}

.dg-hero-shorts-viewer__top [data-action="close"] {
    margin-right: auto;
}

.dg-hero-shorts-viewer__rail {
    position: absolute;
    right: 14px;
    bottom: max(132px, calc(106px + env(safe-area-inset-bottom, 0px)));
    z-index: 4;
    width: auto;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.dg-hero-shorts-viewer__rail > * {
    margin: 0 !important;
}

.dg-hero-shorts-viewer__rail .dg-post-action-btn,
.dg-hero-shorts-viewer__rail .like-btn,
.dg-hero-shorts-viewer__rail .share-btn,
.dg-hero-shorts-viewer__rail .more-btn,
.dg-hero-shorts-viewer__rail .dg-short-follow-btn,
.dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dg-hero-shorts-viewer__rail .like-btn,
.dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    flex-direction: column;
    gap: 6px;
}

.dg-hero-shorts-viewer__rail .like-btn .count,
.dg-hero-shorts-viewer__rail .dg-post-comments-btn .count {
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 13px;
}

.dg-hero-shorts-rail-views {
    display: none;
}

.dg-hero-shorts-rail-views {
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dg-hero-shorts-rail-views :is(svg, .lucide) {
    width: 24px;
    height: 24px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    stroke: currentColor;
}

.dg-hero-shorts-rail-views span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 13px;
    line-height: 1;
}

body:not(.dg-theme-dark) .dg-hero-shorts-viewer__rail .like-btn,
body:not(.dg-theme-dark) .dg-hero-shorts-viewer__rail .like-btn .count,
body:not(.dg-theme-dark) .dg-hero-shorts-viewer__rail .like-btn :is(svg, .lucide) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    stroke: currentColor !important;
}

.dg-hero-shorts-viewer__rail .more-container .action-menu {
    right: 100%;
    left: auto;
    bottom: 0;
    margin-right: 10px;
    margin-bottom: 0;
}

.dg-hero-shorts-viewer__rail .more-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dg-hero-shorts-follow-btn {
    position: relative;
    min-width: 38px !important;
    min-height: 38px !important;
}

.dg-hero-shorts-follow-btn .dg-short-follow-avatar {
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: rgba(15, 23, 42, 0.92);
}

.dg-hero-shorts-follow-btn .dg-short-follow-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dg-hero-shorts-follow-btn .dg-short-follow-badge {
    position: absolute;
    right: -2px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary, #8B5CF6);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.dg-hero-shorts-follow-btn .dg-short-follow-badge svg,
.dg-hero-shorts-follow-btn .dg-short-follow-badge .lucide {
    width: 11px !important;
    height: 11px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.dg-hero-shorts-viewer__meta {
    position: absolute;
    left: 16px;
    right: 78px;
    bottom: calc(var(--dg-short-controls-bottom) + var(--dg-short-controls-height) + var(--dg-short-meta-gap));
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: #fff;
    pointer-events: auto;
}

.dg-hero-shorts-viewer__author {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.dg-hero-shorts-viewer__author-line {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.dg-hero-shorts-viewer__meta .author-name,
.dg-hero-shorts-viewer__meta .dg-short-overlay-title,
.dg-hero-shorts-viewer__meta .dg-short-side-description,
.dg-hero-shorts-viewer__meta .dg-short-side-stats,
.dg-hero-shorts-viewer__meta .tag-pill {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.dg-hero-shorts-viewer__meta .dg-short-side-stats {
    display: none;
    align-items: center;
    gap: 6px;
}

.dg-hero-shorts-viewer__meta .dg-short-overlay-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1em;
}

.dg-hero-shorts-viewer__meta .dg-short-side-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dg-hero-shorts-viewer__meta .dg-short-side-description a {
    color: var(--c-primary, #8B5CF6);
    -webkit-text-fill-color: var(--c-primary, #8B5CF6);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.14em;
}

.dg-hero-shorts-viewer__meta .dg-short-side-description a:hover {
    color: #a78bfa;
    -webkit-text-fill-color: #a78bfa;
    text-decoration: none;
}

body.iphone-device .dg-hero-shorts-viewer__rail {
    top: auto;
    bottom: max(132px, calc(106px + env(safe-area-inset-bottom, 0px)));
    height: auto;
    justify-content: flex-end;
    gap: 14px;
    width: 44px;
    align-items: center;
}

body.iphone-device .dg-hero-shorts-viewer__stage {
    --dg-short-controls-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 24px));
}

body.iphone-device .dg-hero-shorts-rail-views {
    display: none;
}

body.iphone-device .dg-hero-shorts-viewer__rail .share-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .like-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .more-container,
body.iphone-device .dg-hero-shorts-viewer__rail .dg-hero-shorts-rail-views {
    width: 44px;
    min-width: 44px;
}

body.iphone-device .dg-hero-shorts-viewer__rail .share-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .like-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .more-btn {
    min-height: 32px;
    height: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.iphone-device .dg-hero-shorts-viewer__rail .like-btn,
body.iphone-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

body.iphone-device .dg-hero-shorts-viewer__rail .like-btn .count,
body.iphone-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn .count {
    width: 100%;
    text-align: center;
    line-height: 1;
}

body.iphone-device .dg-hero-shorts-viewer__rail .dg-hero-shorts-rail-views {
    min-height: auto;
    height: auto;
    gap: 2px;
}

body.iphone-device .dg-hero-shorts-viewer__rail .dg-hero-shorts-follow-btn {
    width: 44px;
    min-width: 44px !important;
    height: 44px;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none;
}

body.iphone-device .dg-hero-shorts-viewer__rail .more-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.iphone-device .dg-hero-shorts-viewer__meta {
    bottom: calc(var(--dg-short-controls-bottom) + var(--dg-short-controls-height) + var(--dg-short-meta-gap));
}

body.iphone-device .dg-hero-shorts-viewer__meta .dg-short-side-stats {
    display: none;
}

body.android-device .dg-hero-shorts-rail-views {
    display: none;
}

body.android-device .dg-hero-shorts-viewer__rail {
    bottom: max(132px, calc(106px + env(safe-area-inset-bottom, 0px)));
}

body.android-device .dg-hero-shorts-viewer__rail .like-btn,
body.android-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    width: 44px;
    min-width: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

body.android-device .dg-hero-shorts-viewer__rail .like-btn .count,
body.android-device .dg-hero-shorts-viewer__rail .dg-post-comments-btn .count {
    width: 100%;
    text-align: center;
    line-height: 1;
}

body.android-device .dg-hero-shorts-viewer__meta {
    bottom: calc(var(--dg-short-controls-bottom) + var(--dg-short-controls-height) + var(--dg-short-meta-gap));
}

body.android-device .dg-hero-shorts-viewer__meta .dg-short-side-stats {
    display: none;
}

.dg-hero-shorts-viewer__loading,
.dg-hero-shorts-viewer__error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.dg-onboarding-welcome {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-portal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.dg-onboarding-welcome__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.dg-onboarding-welcome__card {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 24px 24px 20px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    border: 1px solid var(--c-border, #e5e7eb);
}

.dg-onboarding-welcome__title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-text, #111827);
}

.dg-onboarding-welcome__lead {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--c-muted, #64748b);
}

.dg-onboarding-welcome__never {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--c-text, #334155);
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

    .dg-onboarding-welcome__never input {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.dg-onboarding-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

body.dg-theme-dark .dg-onboarding-welcome__card {
    background: var(--c-surface, #1e293b);
    border-color: rgba(148, 163, 184, 0.25);
}

body.dg-theme-dark .dg-onboarding-welcome__title {
    color: #f1f5f9;
}

body.dg-theme-dark .dg-onboarding-welcome__lead {
    color: #94a3b8;
}

body.dg-theme-dark .dg-onboarding-welcome__never {
    color: #cbd5e1;
}

.dg-onboarding-popover {
    position: fixed;
    z-index: calc(var(--dg-z-portal) + 10);
    max-width: min(360px, calc(100vw - 24px));
    width: max-content;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--c-border, #e5e7eb);
    box-sizing: border-box;
}

.dg-onboarding-popover__title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--c-text, #111827);
}

.dg-onboarding-popover__text {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--c-muted, #64748b);
}

.dg-onboarding-popover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

body.dg-theme-dark .dg-onboarding-popover {
    background: var(--c-surface, #1e293b);
    border-color: rgba(148, 163, 184, 0.25);
}

body.dg-theme-dark .dg-onboarding-popover__title {
    color: #f1f5f9;
}

body.dg-theme-dark .dg-onboarding-popover__text {
    color: #94a3b8;
}

.dg-onboarding-popover .btn.btn-ghost {
    background: transparent;
    border-color: rgba(var(--c-primary-rgb), 0.24);
    color: #c7d2fe;
}

.dg-onboarding-popover .btn.btn-ghost:hover,
.dg-onboarding-popover .btn.btn-ghost:focus-visible {
    background: rgba(var(--c-primary-rgb), 0.14);
    border-color: rgba(var(--c-primary-rgb), 0.38);
    color: #fff;
}

body:not(.dg-theme-dark) .dg-onboarding-popover .btn.btn-ghost {
    color: var(--c-primary, #6366f1);
    border-color: rgba(99, 102, 241, 0.24);
}

body:not(.dg-theme-dark) .dg-onboarding-popover .btn.btn-ghost:hover,
body:not(.dg-theme-dark) .dg-onboarding-popover .btn.btn-ghost:focus-visible {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--c-primary, #6366f1);
}

.dg-onboarding-target {
    position: relative;
    z-index: calc(var(--dg-z-portal) + 5) !important;
}

#mobileFilterBtn.dg-onboarding-target {
    display: inline-flex !important;
}

.dg-onboarding-highlight-box {
    position: fixed;
    z-index: calc(var(--dg-z-portal) + 6);
    pointer-events: none;
    border: 3px solid var(--c-primary, #6366f1);
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25), 0 10px 30px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease;
}

.dg-onboarding-test-btn {
    position: fixed;
    left: 12px;
    bottom: calc(12px + var(--dg-mobile-bottom-nav-height, 0px));
    z-index: var(--dg-z-portal);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--c-primary, #6366f1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
    font: 600 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 8px 11px;
    cursor: pointer;
}

body.dg-theme-dark .dg-onboarding-test-btn {
    background: rgba(30, 41, 59, 0.94);
    color: #c7d2fe;
    border-color: rgba(199, 210, 254, 0.35);
}

body.dg-onboarding-active .dg-onboarding-test-btn,
body.dg-onboarding-welcome-open .dg-onboarding-test-btn {
    display: none;
}

@media (max-width: 640px) {
    .dg-onboarding-popover {
        width: calc(100vw - 24px);
        padding: 14px;
        border-radius: 12px;
    }

    .dg-onboarding-popover__actions {
        justify-content: stretch;
    }

    .dg-onboarding-popover__actions .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.navbar.dg-onboarding-elevate {
    z-index: calc(var(--dg-z-portal) + 4) !important;
}

/* Unified icon controls (single tune point) */
:is(
    .like-button,
    .dg-article-actions .like-btn,
    .dg-profile-article-actions .like-btn,
    .overlay-actions > button,
    .overlay-actions .more-btn,
    .overlay-actions .report-btn,
    .doll-actions-overlay > button,
    .doll-actions-overlay .more-btn,
    .doll-actions-overlay .report-btn
) {
    --dg-ic-size: 40px;
    --dg-ic-min-size: var(--dg-ic-size);
    --dg-ic-radius: 50%;
    --dg-ic-pad-x: 0px;
    --dg-ic-gap: 0px;
    --dg-ic-bg: rgba(255, 255, 255, 0.92);
    --dg-ic-border: 0;
    --dg-ic-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08) inset, 0 1px 2px rgba(0, 0, 0, 0.06);
    --dg-ic-color: inherit;
    width: var(--dg-ic-size);
    height: var(--dg-ic-size);
    min-width: var(--dg-ic-min-size);
    min-height: var(--dg-ic-min-size);
    padding: 0 var(--dg-ic-pad-x);
    border: var(--dg-ic-border);
    border-radius: var(--dg-ic-radius);
    background: var(--dg-ic-bg);
    box-shadow: var(--dg-ic-shadow);
    color: var(--dg-ic-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dg-ic-gap);
    line-height: 0;
}

    :is(
        .like-button,
        .dg-article-actions .like-btn,
        .dg-profile-article-actions .like-btn,
        .overlay-actions > button,
        .overlay-actions .more-btn,
        .overlay-actions .report-btn,
        .doll-actions-overlay > button,
        .doll-actions-overlay .more-btn,
        .doll-actions-overlay .report-btn
    ) :is(i, svg, .lucide) {
        --dg-ic-icon-size: 20px;
        width: var(--dg-ic-icon-size);
        height: var(--dg-ic-icon-size);
    }

:is(.like-button, .dg-article-actions .like-btn, .dg-profile-article-actions .like-btn) {
    --dg-ic-size: 38px;
    --dg-ic-min-size: 38px;
    --dg-ic-radius: 9999px;
    --dg-ic-icon-size: 18px;
}

:is(.like-button.like-count-wide, .like-btn.like-count-wide) {
    --dg-ic-size: auto;
    --dg-ic-gap: 1px;
    --dg-ic-pad-x: 7px;
}

:is(
    .overlay-actions > button,
    .overlay-actions .more-btn,
    .overlay-actions .report-btn,
    .doll-actions-overlay > button,
    .doll-actions-overlay .more-btn,
    .doll-actions-overlay .report-btn
) {
    --dg-ic-size: 40px;
    --dg-ic-min-size: 40px;
    --dg-ic-radius: 50%;
    --dg-ic-icon-size: 20px;
    --dg-ic-shadow: none;
}

/* side-rail кнопки short: без фона, стили заданы через .dg-short-side-rail выше */
#shortModal .dg-short-side-rail .like-btn.liked svg,
#shortModal .dg-short-side-rail .like-btn.liked .lucide {
    fill: var(--c-danger, #ef4444);
    color: var(--c-danger, #ef4444);
    -webkit-text-fill-color: var(--c-danger, #ef4444);
}

#shortModal .dg-short-side-rail .dg-short-follow-btn.is-following svg,
#shortModal .dg-short-side-rail .dg-short-follow-btn.is-following .lucide {
    color: var(--c-primary);
    -webkit-text-fill-color: var(--c-primary);
}

@media (max-width: 640px) {
    :is(.dg-article-actions .like-btn, .dg-profile-article-actions .like-btn) {
        --dg-ic-size: 35px;
        --dg-ic-min-size: 35px;
        --dg-ic-icon-size: 16px;
    }
}

/* Unified controls: secondary group (messages/search/kebab) */
:is(
    .msg-more-btn,
    .dg-vk-kebab,
    #threadsList .threads-search-btn,
    #messagesModal .threads-search-btn,
    #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn,
    body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn
) {
    --dg-ctl2-w: 24px;
    --dg-ctl2-h: 24px;
    --dg-ctl2-min-w: var(--dg-ctl2-w);
    --dg-ctl2-min-h: var(--dg-ctl2-h);
    --dg-ctl2-radius: 999px;
    --dg-ctl2-border: none;
    --dg-ctl2-bg: transparent;
    --dg-ctl2-color: var(--c-muted);
    --dg-ctl2-pad-x: 0px;
    --dg-ctl2-shadow: none;
    --dg-ctl2-font-size: 18px;
    width: var(--dg-ctl2-w);
    height: var(--dg-ctl2-h);
    min-width: var(--dg-ctl2-min-w);
    min-height: var(--dg-ctl2-min-h);
    border: var(--dg-ctl2-border);
    border-radius: var(--dg-ctl2-radius);
    background: var(--dg-ctl2-bg);
    color: var(--dg-ctl2-color);
    padding: 0 var(--dg-ctl2-pad-x);
    box-shadow: var(--dg-ctl2-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: var(--dg-ctl2-font-size);
}

.dg-vk-kebab {
    --dg-ctl2-w: 28px;
    --dg-ctl2-h: 24px;
    --dg-ctl2-radius: 8px;
    --dg-ctl2-color: #6B7280;
    --dg-ctl2-font-size: 20px;
}

:is(
    #threadsList .threads-search-btn,
    #messagesModal .threads-search-btn,
    #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn,
    body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn
) {
    --dg-ctl2-w: 36px;
    --dg-ctl2-h: 36px;
    --dg-ctl2-min-w: 36px;
    --dg-ctl2-min-h: 36px;
    --dg-ctl2-radius: 9999px;
    --dg-ctl2-border: 1px solid rgba(255, 255, 255, 0.08);
    --dg-ctl2-bg: rgba(45, 45, 48, 0.90);
    --dg-ctl2-color: #fff;
    --dg-ctl2-font-size: 0;
    --dg-ctl2-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    background: var(--dg-ctl2-bg) !important;
    border: var(--dg-ctl2-border) !important;
    box-shadow: var(--dg-ctl2-shadow) !important;
    color: var(--dg-ctl2-color) !important;
    -webkit-text-fill-color: var(--dg-ctl2-color) !important;
}

    :is(
        #threadsList .threads-search-btn,
        #messagesModal .threads-search-btn,
        #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn,
        body.dg-messages-page #messagesModal #dgModalThreadsSearchBtn
    ) :is(svg, .lucide) {
        width: 18px;
        height: 18px;
    }

    body:not(.dg-theme-dark) :is(
        #threadsList .threads-search-btn,
        #messagesModal .threads-search-btn,
        #messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn
    ) :is(svg, .lucide, svg *) {
        color: #fff !important;
        stroke: currentColor !important;
        fill: none;
    }

/* --- Чаты: скрепка и E2EE-вложения --- */
#messagesModal #chatForm,
#messagesPageRoot #chatForm {
    flex-wrap: wrap;
}

/* /messages на телефоне: раньше был nowrap — без wrap превью вложений не переносится на вторую строку */
#messagesPageRoot .messages-container.show-chat #chatForm {
    flex-wrap: wrap !important;
    align-items: flex-end;
}

#messagesModal #chatForm #chatInput,
#messagesPageRoot #chatForm #chatInput {
    flex: 1 1 120px;
    min-width: 0;
}

#chatForm .dg-chat-attach-wrap {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
}

#chatForm .dg-chat-file-input {
    position: fixed;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#chatForm .dg-chat-clip-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--c-border, #e5e7eb);
    background: #fff;
    color: var(--c-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

    #chatForm .dg-chat-clip-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--c-text, #111);
    }

body.dg-theme-dark #chatForm .dg-chat-clip-btn {
    background: #3f3f46;
    border-color: var(--c-border, #52525b);
    color: #a1a1aa;
}

/* Телефон + ПК: нажатая скрепка и открытое меню вложений имеют один active-контур. */
#chatForm .dg-chat-clip-btn:is(:active, :focus-visible),
#chatForm .dg-chat-attach-wrap:has(.dg-chat-attach-menu:not([hidden])) .dg-chat-clip-btn {
    border: 2px solid var(--c-primary, #8B5CF6) !important;
    outline: none;
}

#chatForm .dg-chat-attach-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 140px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 50;
}

body.dg-theme-dark #chatForm .dg-chat-attach-menu {
    background: #1f1f23;
    border-color: #3f3f46;
}

#chatForm .dg-chat-attach-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    color: inherit;
}

    #chatForm .dg-chat-attach-menu-item:hover {
        background: rgba(var(--c-primary-rgb), 0.12);
    }

#chatForm .dg-chat-pending-media {
    width: 100%;
    flex: 1 1 100%;
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

#chatForm .dg-chat-pending-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(var(--c-primary-rgb), 0.08);
    border: 1px solid var(--c-border, #e5e7eb);
    font-size: 13px;
}

#chatForm .dg-chat-pending-thumb--video,
#chatForm .dg-chat-pending-thumb--video-note,
#chatForm .dg-chat-pending-thumb--photo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

#chatForm .dg-chat-pending-thumb--video-note {
    border-radius: 50%;
}

    #chatForm .dg-chat-pending-thumb--video video,
    #chatForm .dg-chat-pending-thumb--video-note video,
    #chatForm .dg-chat-pending-thumb--photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        vertical-align: middle;
    }

.dg-msg-att--local {
    position: relative;
    overflow: hidden;
}

.dg-msg-att--local .dg-msg-att-img,
.dg-msg-att--local .dg-msg-att-video {
    transition: filter 180ms ease, transform 180ms ease;
}

.dg-msg-att--uploading .dg-msg-att-img,
.dg-msg-att--uploading .dg-msg-att-video {
    filter: blur(7px) saturate(0.88);
    transform: scale(1.035);
}

.dg-msg-att-upload-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(24, 18, 35, 0.16);
    opacity: 1;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.dg-msg-att-upload-overlay--done {
    opacity: 0;
}

.dg-msg-att-upload-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.48);
    border-top-color: #fff;
    border-radius: 50%;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
    animation: dg-message-upload-spin 0.8s linear infinite;
}

@keyframes dg-message-upload-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dg-msg-att--local .dg-msg-att-img,
    .dg-msg-att--local .dg-msg-att-video,
    .dg-msg-att-upload-overlay {
        transition-duration: 0.01ms;
    }

    .dg-msg-att-upload-spinner {
        animation: none;
    }
}

#chatForm .dg-chat-pending-remove {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 4px;
}

.dg-msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    max-width: min(280px, 88vw);
}

.dg-msg-att {
    max-width: min(280px, 88vw);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
    position: relative;
}

.dg-msg-att[data-kind="photo"] {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.dg-msg-att[data-kind="story"] {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
    .dg-msg-attachments {
        max-width: min(240px, 68vw);
    }

    .dg-msg-att[data-kind="photo"] {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }
}

.dg-msg-attachments--photos {
    display: grid;
    gap: 4px;
    width: min(360px, 78vw);
    max-width: min(360px, 78vw);
}

.dg-msg-attachments--photos .dg-msg-att {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-radius: 10px;
}

/* Вся подборка занимает готовую сетку и открывается одновременно. */
.dg-msg-attachments--coherent .dg-msg-att {
    background: rgba(127, 127, 127, 0.16);
}

.dg-msg-attachments--coherent:not(.dg-msg-attachments--preview-ready) .dg-msg-att-img {
    visibility: hidden;
}

.dg-msg-attachments--photos-1 .dg-msg-att[data-kind="photo"] {
    aspect-ratio: 4 / 5;
}

.dg-msg-attachments--photos-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dg-msg-attachments--photos-2 .dg-msg-att[data-kind="photo"] {
    aspect-ratio: 3 / 4;
}

.dg-msg-attachments--photos-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dg-msg-attachments--photos-3 .dg-msg-att:first-child {
    grid-column: 1 / -1;
}

.dg-msg-attachments--photos-3 .dg-msg-att:first-child[data-kind="photo"] {
    aspect-ratio: 16 / 10;
}

.dg-msg-attachments--photos-3 .dg-msg-att:not(:first-child)[data-kind="photo"] {
    aspect-ratio: 1 / 1;
}

.dg-msg-attachments--photos-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dg-msg-attachments--photos-4 .dg-msg-att[data-kind="photo"] {
    aspect-ratio: 1 / 1;
}

.dg-msg-attachments--photos-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dg-msg-attachments--photos-5 .dg-msg-att:nth-child(1),
.dg-msg-attachments--photos-5 .dg-msg-att:nth-child(2) {
    grid-column: span 3;
}

.dg-msg-attachments--photos-5 .dg-msg-att:nth-child(n + 3) {
    grid-column: span 2;
}

.dg-msg-attachments--photos-5 .dg-msg-att:nth-child(-n + 2)[data-kind="photo"] {
    aspect-ratio: 4 / 5;
}

.dg-msg-attachments--photos-5 .dg-msg-att:nth-child(n + 3)[data-kind="photo"] {
    aspect-ratio: 1 / 1;
}

@media (max-width: 640px) {
    .dg-msg-attachments--photos {
        /* Фиксированная геометрия до загрузки/расшифровки изображений.
           Нельзя использовать 100% внутри shrink-to-fit пузыря: тогда ширина
           пузыря и сетки циклически зависят друг от друга и меняются после load. */
        width: min(240px, 68vw);
        max-width: min(240px, 68vw);
        gap: 3px;
    }

    .dg-msg-attachments--photos-3 .dg-msg-att:first-child[data-kind="photo"] {
        aspect-ratio: 4 / 3;
    }

    #chatMessages .msg-bubble .dg-msg-attachments,
    #chatMessages .msg-bubble .dg-msg-attachments--photos {
        align-self: stretch;
    }

    #chatMessages .msg-bubble .dg-msg-attachments:not(.dg-msg-attachments--photos) {
        width: 100%;
        max-width: 100%;
    }

    #chatMessages .msg-bubble .dg-msg-attachments--photos {
        width: min(240px, 68vw);
        max-width: min(240px, 68vw);
    }

    #chatMessages .msg-bubble .dg-msg-attachments--photos .dg-msg-att {
        border-radius: 9px;
    }
}

.dg-msg-att-img,
.dg-msg-att-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    vertical-align: middle;
}

.dg-msg-att--video-note {
    width: min(220px, 62vw);
    height: min(220px, 62vw);
    max-width: none;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #15121a;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
}

.dg-msg-att--video-note .dg-msg-att-video,
.dg-msg-att-video--note {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #15121a;
}

.dg-video-note-toggle {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .12);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.dg-video-note-toggle span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .48);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    backdrop-filter: blur(5px);
}

.dg-video-note-toggle span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #fff;
}

.dg-msg-att--video-note.is-playing .dg-video-note-toggle {
    background: transparent;
}

.dg-msg-att--video-note.is-playing .dg-video-note-toggle span {
    opacity: 0;
}

.dg-msg-att--video-note.is-playing .dg-video-note-toggle span::after {
    width: 13px;
    height: 18px;
    transform: translate(-50%, -50%);
    border: 0;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
}

.dg-msg-att--video-note .dg-msg-att-ph {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.24), rgba(21, 18, 26, 0.96));
    color: #fff;
}

/* На телефоне круглое видеосообщение остаётся без внешнего прямоугольного пузыря. */
@media (max-width: 640px) {
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments > .dg-msg-att--video-note):not(:has(> .dg-msg-content > :is(.msg-text, .dg-msg-quote, .dg-msg-story-card))) {
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (min-width: 641px) {
    /* Спокойный паттерн и одна колонка сообщений на ПК. */
    #messagesModal #chatPane,
    #messagesPageRoot #chatPane {
        background-image: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url(/images/white_bg.png);
    }
    body.dg-theme-dark #messagesModal #chatPane,
    body.dg-theme-dark #messagesPageRoot #chatPane {
        background-image: linear-gradient(rgba(15, 15, 18, 0.93), rgba(15, 15, 18, 0.93)), url(/images/dark_bg.png);
    }

    #chatMessages .dg-vk-body {
        max-width: 70%;
        border-radius: 16px;
        background: rgba(48, 43, 58, 0.075);
        border-color: rgba(81, 68, 98, 0.10);
    }
    #chatMessages .dg-vk-meta {
        margin-left: auto;
    }
    #chatMessages .dg-vk-time {
        font-size: 12px;
        color: #858b96;
    }
    body.dg-theme-dark #chatMessages .dg-vk-time {
        color: #a7a7b3 !important;
        -webkit-text-fill-color: #a7a7b3 !important;
    }
    body.dg-theme-dark #chatMessages .dg-vk-body {
        background: rgba(41, 43, 49, 0.82) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments),
    #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card) {
        width: fit-content;
        padding-right: 0;
        padding-left: 0;
    }
    #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments) .dg-vk-text {
        padding-right: 12px;
        padding-left: 12px;
    }
    #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments):not(:hover),
    #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card):not(:hover) {
        background: transparent !important;
        border-color: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.dg-theme-dark #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-attachments):not(:hover),
    body.dg-theme-dark #chatMessages .dg-vk-body:has(> .dg-msg-content > .dg-msg-story-card):not(:hover) {
        background: transparent !important;
        border-color: transparent !important;
    }
    @media (hover: hover) {
        #chatMessages .dg-vk-body:hover:has(> .dg-msg-content > .dg-msg-attachments),
        #chatMessages .dg-vk-body:hover:has(> .dg-msg-content > .dg-msg-story-card) {
            background: rgba(17, 24, 39, 0.04) !important;
            border-color: transparent !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        body.dg-theme-dark #chatMessages .dg-vk-body:hover:has(> .dg-msg-content > .dg-msg-attachments),
        body.dg-theme-dark #chatMessages .dg-vk-body:hover:has(> .dg-msg-content > .dg-msg-story-card) {
            background: rgba(255, 255, 255, 0.05) !important;
        }
    }

    #chatMessages .dg-vk-msg {
        padding-top: 12px;
        padding-bottom: 2px;
    }
    #chatMessages .dg-vk-msg--mine + .dg-vk-msg--mine,
    #chatMessages .dg-vk-msg--peer + .dg-vk-msg--peer {
        padding-top: 2px;
        padding-bottom: 2px;
    }
    #chatMessages .dg-vk-msg--mine + .dg-vk-msg--mine .dg-vk-avatar,
    #chatMessages .dg-vk-msg--peer + .dg-vk-msg--peer .dg-vk-avatar {
        height: 0;
        visibility: hidden;
    }
    #chatMessages .dg-vk-msg--mine + .dg-vk-msg--mine .dg-vk-name,
    #chatMessages .dg-vk-msg--peer + .dg-vk-msg--peer .dg-vk-name {
        display: none;
    }

    #chatMessages .dg-msg-attachments--photos {
        width: min(400px, 100%);
        max-width: 400px;
    }
    #chatMessages .dg-msg-attachments:not(.dg-msg-attachments--photos),
    #chatMessages .dg-msg-att[data-kind="video"] {
        max-width: min(400px, 100%);
    }
    #chatMessages .dg-msg-att[data-kind="video"] {
        width: min(400px, 100%);
    }

    #messagesModal #chatForm #chatInput,
    #messagesPageRoot #chatForm #chatInput {
        min-height: 46px;
        padding: 11px 16px;
    }

    #threadsList .thread-row.is-active .thread-card {
        background: #fff !important;
        border-color: rgba(var(--c-primary-rgb), 0.55) !important;
        box-shadow: inset 0 0 0 1px rgba(var(--c-primary-rgb), 0.55) !important;
        transition: none !important;
    }
    body.dg-theme-dark #threadsList .thread-row.is-active .thread-card {
        background: rgba(15, 15, 18, 0.72) !important;
        border-color: rgba(var(--c-primary-rgb), 0.7) !important;
        box-shadow: inset 0 0 0 1px rgba(var(--c-primary-rgb), 0.7) !important;
    }
}

@media (max-width: 640px) {
    .dg-msg-att--video-note {
        width: min(196px, 58vw);
        height: min(196px, 58vw);
    }
}

.dg-msg-att-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted, #888);
    font-size: 20px;
}

#chatMessages .dg-msg-att[data-kind="photo"]:has(> .dg-msg-att-ph) {
    background: linear-gradient(90deg, rgba(var(--c-primary-rgb), 0.08), rgba(var(--c-primary-rgb), 0.20), rgba(var(--c-primary-rgb), 0.08));
}

body.dg-theme-dark #chatMessages .dg-msg-att[data-kind="photo"]:has(> .dg-msg-att-ph),
html.dg-theme-dark body #chatMessages .dg-msg-att[data-kind="photo"]:has(> .dg-msg-att-ph) {
    background: linear-gradient(90deg, rgba(var(--c-primary-rgb), 0.14), rgba(var(--c-primary-rgb), 0.26), rgba(var(--c-primary-rgb), 0.14));
}

.dg-msg-att-load {
    margin: 8px;
}

.dg-chat-vk .dg-msg-attachments {
    margin-top: 4px;
}

/* Лайтбокс фото в чате */
.dg-photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-fullscreen);
    align-items: center;
    justify-content: center;
    overscroll-behavior: none;
    touch-action: none;
}

.dg-photo-lightbox--open {
    display: flex;
}

.dg-photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
}

.dg-photo-lightbox-img {
    position: relative;
    max-width: min(96vw, 1200px);
    max-height: 92dvh;
    max-height: 92svh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
}

.dg-photo-lightbox-close {
    position: absolute;
    top: 12px;
    left: 14px;
    right: auto;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dg-photo-lightbox-close:hover {
        background: rgba(0, 0, 0, 0.80);
    }

.dg-photo-lightbox-arrow {
    display: none;
}

@media (min-width: 641px) {
    .dg-photo-lightbox--multiple .dg-photo-lightbox-arrow { display: block; }
    .dg-photo-lightbox-arrow:disabled { opacity: .3; cursor: default; }
}

/* PWA: баннер установки и модалка разрешения уведомлений */
.dg-pwa-install-banner {
    position: fixed;
    z-index: var(--dg-z-notice);
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
    animation: dg-pwa-slide-up 0.35s ease-out;
}

@keyframes dg-pwa-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dg-pwa-install-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.dg-pwa-install-banner__text {
    flex: 1 1 200px;
    min-width: 0;
}

.dg-pwa-install-banner__title {
    display: block;
    font-size: 0.95rem;
    color: var(--c-text, #f1f5f9);
}

.dg-pwa-install-banner__sub {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--c-muted, #94a3b8);
    line-height: 1.35;
}

.dg-pwa-install-banner__actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.dg-pwa-install-banner__actions .btn {
    -webkit-tap-highlight-color: rgba(var(--c-primary-rgb), 0.22);
}

body:not(.dg-theme-dark) :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost {
    background: transparent;
    color: var(--c-muted);
    -webkit-text-fill-color: var(--c-muted);
}

body:not(.dg-theme-dark) :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:hover,
body:not(.dg-theme-dark) :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:focus,
body:not(.dg-theme-dark) :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:active {
    background: var(--c-bg-light);
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
}

body.dg-theme-dark .dg-pwa-install-banner__inner {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.45);
}

body.dg-theme-dark :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    -webkit-text-fill-color: #f8fafc;
}

body.dg-theme-dark :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:hover,
body.dg-theme-dark :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:focus,
body.dg-theme-dark :is(.dg-pwa-install-banner__actions, .dg-pwa-perm-modal__actions) .btn-ghost:active {
    background: rgba(var(--c-primary-rgb), 0.22);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.dg-pwa-perm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.dg-pwa-perm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
}

.dg-pwa-perm-modal__card {
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 100%;
    padding: 22px 22px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
}

.dg-pwa-perm-modal__title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-text, #f8fafc);
}

.dg-pwa-perm-modal__text {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--c-muted, #94a3b8);
}

.dg-pwa-perm-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

body.dg-theme-dark .dg-pwa-perm-modal__card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35);
}

/* =====================================================
   DG FIX: Hero surface + blur
   Светлая/темная тема, ПК и мобила одинаково
   ===================================================== */

/* Светлая тема: hero как пузырь сообщения */
body:not(.dg-theme-dark) .dg-hero-slider .home-hero,
body:not(.dg-theme-dark) .dg-hero-slider .dg-contest-week,
body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero,
body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero {
    background: var(--dg-message-surface-light) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    border-radius: var(--r-12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
}

/* Темная тема: цвет как на ПК, НЕ белый пузырь сообщения */
body.dg-theme-dark .dg-hero-slider .home-hero,
body.dg-theme-dark .dg-hero-slider .dg-contest-week,
body.dg-theme-dark .dg-hero-slider .dg-giveaway-hero,
body.dg-theme-dark .dg-hero-slider .dg-doll-finds-hero {
    background: rgba(24,24,30,0.82) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: var(--r-12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Инфо / Блог: единый визуальный ритм поиска + hero
   ═══════════════════════════════════════════════════════════════════ */

/* ПК: hero сидит с тем же отступом сверху, что на главной */
@media (min-width: 641px) {
    body.dg-page-info-blog-mobile
    .dg-layout-with-sidebar .main-content.dg-blog-hero-wrap {
        padding-top: 12px;
    }
}

/* Mobile hero: только геометрия + точки, фон совпадает с ПК */
@media (max-width: 640px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .home-hero,
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-contest-week,
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-referral-hero,
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-giveaway-hero,
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        background: var(--dg-message-surface-light) !important;
        border: 1px solid var(--dg-message-border-light) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .home-hero {
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-contest-week {
        padding: 10px 12px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-referral-hero {
        padding: 10px 12px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-giveaway-hero {
        padding: 0 !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-blog-hero {
        border-bottom: none !important;
        margin-bottom: 8px;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-hero-slider__dots {
        padding: 4px 0 8px;
        margin-top: 0;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .home-hero,
    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-contest-week,
    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-referral-hero,
    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-giveaway-hero,
    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        background: rgba(24,24,30,0.82) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-blog-hero {
        border-bottom: none !important;
    }
}

/* =====================================================
   Тёмная тема: Premium-бейдж (.sub-public / .sub-active)
   ===================================================== */
body.dg-theme-dark .sub-public {
    background: rgba(var(--c-primary-rgb), 0.16) !important;
    color: #C4B5FD !important;
    -webkit-text-fill-color: #C4B5FD !important;
}

body.dg-theme-dark .sub-active {
    background: rgba(var(--c-primary-rgb), 0.14) !important;
    color: #C4B5FD !important;
    -webkit-text-fill-color: #C4B5FD !important;
}
body.dg-theme-dark #profileModal .subscription-status .dg-premium-status-pill {
    background: rgba(var(--c-primary-rgb), 0.14) !important;
    border-color: rgba(196, 181, 253, 0.24) !important;
    color: #C4B5FD !important;
    -webkit-text-fill-color: #C4B5FD !important;
}

body.dg-theme-dark #profileModal .subscription-status .dg-premium-expiring-tooltip,
body.dg-theme-dark .dg-profile-page-view .subscription-status .dg-premium-expiring-tooltip {
    background: #1F1518;
    border-color: rgba(248, 113, 113, 0.28);
    color: #FCA5A5;
    -webkit-text-fill-color: #FCA5A5;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

body.dg-theme-dark #profileModal .subscription-status .dg-premium-expiring-info,
body.dg-theme-dark .dg-profile-page-view .subscription-status .dg-premium-expiring-info {
    background: #EF4444;
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.34);
}

body.dg-theme-dark #profileModal .subscription-status .sub-line.sub-public {
    background: rgba(var(--c-primary-rgb), 0.16) !important;
    border-color: rgba(196, 181, 253, 0.26) !important;
    color: #C4B5FD !important;
    -webkit-text-fill-color: #C4B5FD !important;
    box-shadow: 0 4px 16px rgba(var(--c-primary-rgb), 0.18) !important;
}

html.dg-standalone-pwa #profileModal .subscription-status .dg-premium-status-active-word,
html.dg-standalone-pwa .dg-profile-page-view .subscription-status .dg-premium-status-active-word {
    display: none;
}

@media (max-width: 640px) {
    #profileModal .subscription-status .dg-premium-status-active-word,
    .dg-profile-page-view .subscription-status .dg-premium-status-active-word {
        display: none;
    }

    body.dg-theme-dark #profileModal .subscription-status .dg-premium-status-pill,
    html.dg-theme-dark #profileModal .subscription-status .dg-premium-status-pill,
    html.dg-theme-dark body #profileModal .subscription-status .dg-premium-status-pill {
        background: rgba(var(--c-primary-rgb), 0.14) !important;
        border: 1px solid rgba(196, 181, 253, 0.24) !important;
        box-shadow: 0 4px 16px rgba(var(--c-primary-rgb), 0.18) !important;
        padding: 4px 8px !important;
        border-radius: 20px !important;
    }

    #profileModal .subscription-status .dg-premium-status-row,
    .dg-profile-page-view .subscription-status .dg-premium-status-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    #profileModal .subscription-status .dg-premium-open-btn,
    .dg-profile-page-view .subscription-status .dg-premium-open-btn {
        width: 100%;
        max-width: 180px;
    }

    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active .dg-profile-premium-left,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive .dg-profile-premium-left,
    .dg-profile-page-premium-line.dg-profile-premium-line--active .dg-profile-premium-left,
    .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-profile-premium-left {
        display: contents;
        flex: initial;
        max-width: none;
    }

    #profileModal .dg-profile-premium-line--own,
    .dg-profile-page-premium-line.dg-profile-premium-line--own {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        grid-template-rows: auto;
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        justify-content: normal;
        width: min(100%, 500px);
        max-width: 100%;
    }

    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active .dg-subscription-status--active,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active .dg-premium-status-row,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive .dg-subscription-status--inactive,
    #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive .dg-subscription-status--inactive .dg-premium-status-row,
    .dg-profile-page-premium-line.dg-profile-premium-line--active .dg-subscription-status--active,
    .dg-profile-page-premium-line.dg-profile-premium-line--active .dg-premium-status-row,
    .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-subscription-status--inactive,
    .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-subscription-status--inactive .dg-premium-status-row {
        display: contents;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--active .dg-profile-premium-left,
    .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-profile-premium-left {
        grid-column: 1;
        min-width: 0;
        width: 100%;
    }

    #profileModal .dg-profile-premium-line--own .dg-subscription-status--inactive #subscribeBtn,
    .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-subscription-status--inactive #subscribeBtn {
        grid-column: 1;
        width: 100%;
        max-width: none;
    }

    #profileModal .dg-profile-premium-line--own .dg-subscription-status--active .dg-premium-open-btn,
    .dg-profile-page-premium-line .dg-subscription-status--active .dg-premium-open-btn {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: none;
    }

    #profileModal .dg-profile-premium-line--own .dg-subscription-status--active .dg-premium-status-pill,
    .dg-profile-page-premium-line .dg-subscription-status--active .dg-premium-status-pill {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right {
        display: contents;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo-right {
        display: contents;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-profile-promo-slot {
        display: contents;
        min-width: 0;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-profile-promo {
        display: contents;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo-slot,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo {
        display: contents;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo-right .dg-promo-code {
        grid-column: 2;
        justify-self: end;
        text-align: center;
        width: auto;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        transform: none;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-promo-code {
        grid-column: 2;
        justify-self: end;
        text-align: right;
        width: auto;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        transform: none;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo .dg-copy-promo {
        grid-column: 3;
        justify-self: center;
        width: var(--dg-profile-promo-control-size);
        height: var(--dg-profile-promo-control-size);
        min-width: var(--dg-profile-promo-control-size);
        min-height: var(--dg-profile-promo-control-size);
        max-width: var(--dg-profile-promo-control-size);
        max-height: var(--dg-profile-promo-control-size);
        transform: none;
    }

    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo .dg-copy-promo,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-copy-promo {
        grid-column: 3;
        justify-self: center;
        width: var(--dg-profile-promo-control-size);
        height: var(--dg-profile-promo-control-size);
        min-width: var(--dg-profile-promo-control-size);
        min-height: var(--dg-profile-promo-control-size);
        max-width: var(--dg-profile-promo-control-size);
        max-height: var(--dg-profile-promo-control-size);
        transform: none;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo .dg-copy-promo i,
    #profileModal .dg-profile-premium-line--own .dg-profile-promo .dg-copy-promo .lucide,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-copy-promo i,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-copy-promo .lucide {
        width: 14.3px;
        height: 14.3px;
        min-width: 14.3px;
        min-height: 14.3px;
    }

    #profileModal .dg-profile-premium-line--own .dg-profile-promo,
    .dg-profile-page-premium-line.dg-profile-premium-line--own .dg-profile-promo {
        --dg-profile-promo-control-size: 26px;
    }

    #profileModal .subscription-status .dg-premium-expiring-tooltip,
    .dg-profile-page-view .subscription-status .dg-premium-expiring-tooltip {
        left: auto;
        right: 0;
        transform: translateY(4px);
    }

    #profileModal .subscription-status .dg-premium-expiring-wrap.is-open .dg-premium-expiring-tooltip,
    .dg-profile-page-view .subscription-status .dg-premium-expiring-wrap.is-open .dg-premium-expiring-tooltip {
        transform: translateY(0);
    }
}

/* =====================================================
   Тёмная тема: дропзона «Добавить сторис»
   ===================================================== */
@media (max-width: 900px) {
    #profileModal .dg-profile-page-premium-line.dg-profile-premium-line--active,
    #profileModal .dg-profile-page-premium-line.dg-profile-premium-line--inactive {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    #profileModal .dg-profile-page-premium-line.dg-profile-premium-line--active .dg-profile-premium-left,
    #profileModal .dg-profile-page-premium-line.dg-profile-premium-line--inactive .dg-profile-premium-left {
        display: block;
        flex: 0 0 calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
    }

    #profileModal .dg-profile-premium-line--own .subscription-status .dg-premium-status-pill,
    #profileModal .dg-profile-page-premium-line .subscription-status .dg-premium-status-pill {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        justify-content: center !important;
        text-align: center;
        min-height: 44px;
        height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

body.dg-theme-dark .dg-story-upload-dropzone {
    background: rgba(15, 15, 18, 0.72) !important;
    border-color: rgba(var(--c-border-rgb), 0.14) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    body.dg-theme-dark .dg-story-upload-dropzone.dg-story-upload-dropzone--over,
    body.dg-theme-dark .dg-story-upload-dropzone.dg-story-upload-dropzone--has-file {
        background: rgba(var(--c-primary-rgb), 0.12) !important;
        border-color: var(--c-primary, #8B5CF6) !important;
        color: var(--c-primary, #8B5CF6) !important;
        -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    }

/* =====================================================
   Тёмная тема: модалки «Подписки» / «Подписчики»
   ===================================================== */
/* Разделители строк */
body.dg-theme-dark .modal-small .user-list li {
    border-bottom-color: rgba(var(--c-border-rgb), 0.12) !important;
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text) !important;
}
/* Кнопка «Подписаться» / «Подписаться в ответ» (btn-primary) */
body.dg-theme-dark .modal-small .user-list .btn-follow.btn-primary,
body.dg-theme-dark .modal-small .user-list .btn-profile-self.btn-primary {
    background: var(--c-primary, #8B5CF6) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}

    body.dg-theme-dark .modal-small .user-list .btn-follow.btn-primary:hover,
    body.dg-theme-dark .modal-small .user-list .btn-profile-self.btn-primary:hover {
        background: rgba(var(--c-primary-rgb), 0.85) !important;
    }
/* Кнопка «Вы подписаны» / «Профиль» (btn-secondary) */
body.dg-theme-dark .modal-small .user-list .btn-follow.btn-secondary,
body.dg-theme-dark .modal-small .user-list .btn-profile-self.btn-secondary {
    background: rgba(var(--c-border-rgb), 0.10) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.22) !important;
}

    body.dg-theme-dark .modal-small .user-list .btn-follow.btn-secondary:hover,
    body.dg-theme-dark .modal-small .user-list .btn-profile-self.btn-secondary:hover {
        background: rgba(var(--c-border-rgb), 0.18) !important;
    }
/* Ссылки в списке (имя пользователя) */
body.dg-theme-dark .modal-small .user-list .user-link {
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text) !important;
}

/* Profile page is rendered with #profileModal markup, so page mode must beat modal rules. */
body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
    position: sticky !important;
    top: var(--dg-navbar-stack, 64px) !important;
    z-index: var(--dg-z-nav) !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(120,110,150,0.16) !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + var(--dg-profile-tabs-inline-pad, 0px)) !important;
    padding-right: calc(50vw - 50% + var(--dg-profile-tabs-inline-pad, 0px)) !important;
}

body.dg-page-profile .navbar {
    z-index: calc(var(--dg-z-nav) + 1) !important;
}

.profile-tabs .tab-btn.tab-btn--icon {
    width: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-tabs .dg-profile-archive-tab svg,
.profile-tabs .dg-profile-archive-tab .lucide {
    width: 20px;
    height: 20px;
    stroke: #111;
}

body.dg-theme-dark .profile-tabs .dg-profile-archive-tab svg,
body.dg-theme-dark .profile-tabs .dg-profile-archive-tab .lucide,
html.dg-theme-dark body .profile-tabs .dg-profile-archive-tab svg,
html.dg-theme-dark body .profile-tabs .dg-profile-archive-tab .lucide {
    stroke: #fff;
}

.dg-archive-card {
    position: relative;
}

.dg-archive-badge-host {
    position: relative;
}

.dg-archive-card-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 26;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.dg-archive-restore-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    max-width: calc(100% - 20px);
    padding: 5px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(124, 58, 237, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dg-archive-restore-btn svg,
.dg-archive-restore-btn .lucide {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    flex: 0 0 auto;
}

.dg-archive-restore-btn:disabled {
    opacity: .65;
    cursor: wait;
}

body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-page-content,
body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-page-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
}

body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-page-body {
    display: block !important;
    flex: none !important;
}

@media (min-width: 641px) {
    body.dg-page-profile #profileModal.dg-profile-page-view .profile-bio-wrap {
        width: 100%;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }

    body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-page-content {
        --dg-profile-page-gutter-left: calc(max(8px, var(--safe-left)) + clamp(24px, 3vw, 56px));
        --dg-profile-page-gutter-right: calc(max(8px, var(--safe-right)) + clamp(24px, 3vw, 56px));
        padding-left: clamp(24px, 3vw, 56px) !important;
        padding-right: clamp(24px, 3vw, 56px) !important;
    }

    body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
        margin-left: calc(0px - var(--dg-profile-page-gutter-left)) !important;
        margin-right: calc(0px - var(--dg-profile-page-gutter-right)) !important;
        padding-left: calc(var(--dg-profile-page-gutter-left) + var(--dg-profile-tabs-inline-pad, 0px)) !important;
        padding-right: calc(var(--dg-profile-page-gutter-right) + var(--dg-profile-tabs-inline-pad, 0px)) !important;
    }
}

body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-burger-panel {
    z-index: var(--dg-z-dropdown) !important;
}

body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-burger-panel-content {
    z-index: 1;
}

body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-burger-panel-backdrop {
    z-index: 0;
}

@media (min-width: 641px) and (max-width: 768px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-details[data-dg-sb-panel="doll-finds"] {
        display: none !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-left-sidebar .dg-sb-details[data-dg-sb-panel="articles"] .dg-sb-nav > .dg-sb-link[href="/info/articles"] {
        display: none !important;
    }
}

body.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs,
html.dg-theme-dark body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
    background: #0f0f12 !important;
    border-bottom-color: rgba(255,255,255,0.10) !important;
}

@media (min-width: 641px) {
    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .tab-btn,
    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .tab-btn i,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .tab-btn,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .tab-btn i {
        color: rgba(255, 255, 255, 0.72) !important;
    }

    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .tab-btn,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .tab-btn {
        margin-bottom: -3px;
    }

    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .tab-btn:hover,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .tab-btn:hover {
        color: #fff !important;
    }

    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active {
        color: #fff !important;
        border-bottom-color: rgba(255, 255, 255, 0.95) !important;
    }

    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .dg-profile-archive-tab svg,
    body.dg-theme-dark #profileModal.dg-profile-page-view .profile-tabs .dg-profile-archive-tab .lucide,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .dg-profile-archive-tab svg,
    html.dg-theme-dark body #profileModal.dg-profile-page-view .profile-tabs .dg-profile-archive-tab .lucide {
        stroke: currentColor !important;
    }
}

@media (max-width: 640px) {
    body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
        --dg-profile-tabs-inline-pad: 0px;
        --dg-profile-tabs-bleed-left: max(16px, var(--safe-left));
        --dg-profile-tabs-bleed-right: max(16px, var(--safe-right));
        top: var(--dg-mobile-sidebar-top-inset, 68px) !important;
        z-index: 98 !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 640px) {
    #profileModal .profile-tabs {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        padding: 0 4px !important;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        border-bottom: 1px solid #E1E8ED;
    }

    body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        width: auto;
        padding-left: calc(var(--dg-profile-tabs-bleed-left, 0px) + var(--dg-profile-tabs-inline-pad, 0px)) !important;
        padding-right: calc(var(--dg-profile-tabs-bleed-right, 0px) + var(--dg-profile-tabs-inline-pad, 0px)) !important;
        margin-left: calc(0px - var(--dg-profile-tabs-bleed-left, 0px)) !important;
        margin-right: calc(0px - var(--dg-profile-tabs-bleed-right, 0px)) !important;
        overflow: hidden;
        border-bottom: 1px solid #E1E8ED;
    }

        #profileModal .profile-tabs .tab-btn,
        body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn {
            flex: 0 1 auto;
            width: auto;
            min-width: 0;
            min-height: 40px;
            padding: 9px 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(10px, 2.8vw, 12px);
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            border-bottom-width: 3px;
        }

        #profileModal .profile-tabs .tab-btn--text-link,
        body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn--text-link {
            padding: 9px 3px;
        }

        #profileModal .profile-tabs .tab-btn.tab-btn--icon,
        body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.tab-btn--icon {
            flex: 0 0 28px;
            width: 28px;
            min-width: 28px;
            padding: 0;
        }

            #profileModal .profile-tabs .tab-btn.tab-btn--icon svg,
            body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.tab-btn--icon svg {
                width: 16px;
                height: 16px;
            }
}

/* DG FIX: hero в светлой теме — message-glass фон */
body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
.dg-hero-slider .home-hero,
body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
.dg-hero-slider .dg-contest-week,
body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
.dg-hero-slider .dg-giveaway-hero,
body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
.dg-hero-slider .dg-doll-finds-hero {
    background: var(--dg-message-surface-light) !important;
    border: 1px solid var(--dg-message-border-light) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
}

/* Contest hero final geometry: later shared hero fixes use !important. */
@media (max-width: 640px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-contest-week {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-hero-info-btn {
        top: 78px !important;
        right: 12px !important;
        width: 30px !important;
        height: 30px !important;
    }
}

body.dg-theme-dark .dg-contest-week__top-avatar {
    border-color: rgba(24,24,30,0.95);
}

body.dg-theme-dark .dg-contest-week__panel--current {
    border-left-color: rgba(255,255,255,0.10);
}

body.dg-theme-dark .dg-contest-week__top-more {
    background: rgba(var(--c-primary-rgb), 0.24);
    border-color: rgba(var(--c-primary-rgb), 0.34);
}

body.dg-theme-dark .dg-hero-info-btn {
    color: #111827;
    background: rgba(var(--c-primary-rgb), 0.58);
    border-color: rgba(var(--c-primary-rgb), 0.78);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
}

body.dg-theme-dark .dg-referral-hero__bonus {
    color: rgba(255,255,255,0.88);
}

body.dg-theme-dark .dg-referral-hero__avatar {
    border-color: rgba(24,24,30,0.95);
}

body.dg-theme-dark .dg-referral-hero__details-btn {
    color: #ffffff;
    background: rgba(var(--c-primary-rgb), 0.78);
    border-color: rgba(var(--c-primary-rgb), 0.62);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
}

body.dg-theme-dark .dg-referral-hero__details-btn:hover {
    background: rgba(var(--c-primary-rgb), 0.92);
    border-color: rgba(var(--c-primary-rgb), 0.78);
}

/* DG FIX: equal vertical rhythm around hero slider and filters/articles. */
body.dg-page-info-blog-mobile:not(.dg-page-messages) {
    --dg-hero-adjacent-gap: 28px;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .main-content.dg-blog-hero-wrap {
    padding-top: var(--dg-hero-adjacent-gap) !important;
    padding-bottom: 0 !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-blog-hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-hero-slider__dots {
    padding: 10px 0 0 !important;
    margin-top: 0 !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .main-content.dg-blog-hero-wrap + .main-content {
    padding-top: var(--dg-hero-adjacent-gap) !important;
}

@media (max-width: 640px) {
    body.dg-page-info-blog-mobile:not(.dg-page-messages) {
        --dg-hero-adjacent-gap: 18px;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-hero-slider__dots {
        padding-top: 8px !important;
    }
}

/* =========================================================
   DG: modal header with back button and centered title
   Add .dg-modal-header--back only to selected modal headers.
   ========================================================= */

.dg-modal-header--back {
    position: relative;
    min-height: 48px;
    padding: 10px 16px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border);
    justify-content: center !important;
    align-items: center !important;
}

.dg-modal-header--back h2,
.dg-modal-header--back .dg-profile-header-title,
#registerModal .dg-modal-header--back > div {
    margin: 0 !important;
    font-size: var(--dg-font-modal-title) !important;
    line-height: 1.2;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center !important;
    justify-self: center;
}

.dg-modal-header--back .modal-close {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20;
}

@media (max-width: 640px) {
    .dg-modal-header--back {
        min-height: 44px;
        padding: 8px 12px !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .dg-modal-header--back h2,
    .dg-modal-header--back .dg-profile-header-title,
    #registerModal .dg-modal-header--back > div {
        font-size: var(--dg-font-modal-title) !important;
    }
}

@media (min-width: 641px) {
    .dg-modal-back-btn {
        border: 2px solid rgba(255, 255, 255, 0.95) !important;
    }
}

.modal-close.dg-modal-back-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn,
#heroShortsViewerWrap [data-action="close"].dg-modal-back-btn,
#messagesPageRoot .dg-messages-page-back.dg-modal-back-btn,
#messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn,
#messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn,
#messagesPageRoot .dg-messages-page-kebab,
#messagesModal > .modal-content > .modal-header .modal-kebab,
#messagesModal #chatHeader .dg-chat-kebab {
    background: rgba(45, 45, 48, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body:not(.dg-theme-dark) .modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn,
body.dg-theme-dark .modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn,
body:not(.dg-theme-dark) #heroShortsViewerWrap [data-action="close"].dg-modal-back-btn,
body.dg-theme-dark #heroShortsViewerWrap [data-action="close"].dg-modal-back-btn,
body:not(.dg-theme-dark) #messagesPageRoot .dg-messages-page-back.dg-modal-back-btn,
body.dg-theme-dark #messagesPageRoot .dg-messages-page-back.dg-modal-back-btn,
body:not(.dg-theme-dark) #messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn,
body.dg-theme-dark #messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn,
body.dg-theme-dark.dg-messages-page #messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn,
body:not(.dg-theme-dark) #messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn,
body.dg-theme-dark #messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn,
body:not(.dg-theme-dark) #messagesPageRoot .dg-messages-page-kebab,
body.dg-theme-dark #messagesPageRoot .dg-messages-page-kebab,
body:not(.dg-theme-dark) #messagesModal > .modal-content > .modal-header .modal-kebab,
body.dg-theme-dark #messagesModal > .modal-content > .modal-header .modal-kebab,
body:not(.dg-theme-dark) #messagesModal #chatHeader .dg-chat-kebab,
body.dg-theme-dark #messagesModal #chatHeader .dg-chat-kebab {
    background: rgba(45, 45, 48, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn:hover,
#heroShortsViewerWrap [data-action="close"].dg-modal-back-btn:hover,
#messagesPageRoot .dg-messages-page-back.dg-modal-back-btn:hover,
#messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn:hover,
#messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn:hover,
#messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn:hover,
#messagesPageRoot .dg-messages-page-kebab:hover,
#messagesModal > .modal-content > .modal-header #dgModalThreadsSearchBtn.threads-search-btn:hover,
#messagesModal > .modal-content > .modal-header .modal-kebab:hover,
#messagesModal #chatHeader .dg-chat-kebab:hover {
    background: rgba(60, 60, 64, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn:active,
.modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn:focus-visible,
#heroShortsViewerWrap [data-action="close"].dg-modal-back-btn:active,
#heroShortsViewerWrap [data-action="close"].dg-modal-back-btn:focus-visible,
#messagesPageRoot .dg-messages-page-back.dg-modal-back-btn:active,
#messagesPageRoot .dg-messages-page-back.dg-modal-back-btn:focus-visible,
#messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn:active,
#messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn:focus-visible,
#messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn:active,
#messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn:focus-visible,
#messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn:active,
#messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn:focus-visible,
#messagesPageRoot .dg-messages-page-kebab:active,
#messagesPageRoot .dg-messages-page-kebab:focus-visible,
#messagesModal > .modal-content > .modal-header #dgModalThreadsSearchBtn.threads-search-btn:active,
#messagesModal > .modal-content > .modal-header #dgModalThreadsSearchBtn.threads-search-btn:focus-visible,
#messagesModal > .modal-content > .modal-header .modal-kebab:active,
#messagesModal > .modal-content > .modal-header .modal-kebab:focus-visible,
#messagesModal #chatHeader .dg-chat-kebab:active,
#messagesModal #chatHeader .dg-chat-kebab:focus-visible {
    border-color: var(--c-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.22), 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

.modal:not(#messagesModal):not(#contestCongratsModal):not(#editProfileModal):not(#heroShortsViewerWrap) .dg-modal-back-btn:focus-visible,
#heroShortsViewerWrap [data-action="close"].dg-modal-back-btn:focus-visible,
#messagesPageRoot .dg-messages-page-back.dg-modal-back-btn:focus-visible,
#messagesModal > .modal-content > .modal-header .modal-close.dg-modal-back-btn:focus-visible,
#messagesModal #chatHeader .dg-chat-close.dg-modal-back-btn:focus-visible,
#messagesPageRoot #dgModalThreadsSearchBtn.threads-search-btn:focus-visible,
#messagesPageRoot .dg-messages-page-kebab:focus-visible,
#messagesModal > .modal-content > .modal-header #dgModalThreadsSearchBtn.threads-search-btn:focus-visible,
#messagesModal > .modal-content > .modal-header .modal-kebab:focus-visible,
#messagesModal #chatHeader .dg-chat-kebab:focus-visible {
    outline: none;
}

.dg-modal-back-btn :is(svg, .lucide) {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

/* ═══════════════════════════════════════════════════
   DG: Ответ на сообщение — превью над полем ввода
   ═══════════════════════════════════════════════════ */

#chatReplyPreview.dg-chat-reply-preview,
.comment-reply-target {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 6;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

#chatReplyPreview.dg-chat-reply-preview {
    margin: 0 8px 6px;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
}

@media (min-width: 641px) {
    /* На ПК держим превью ответа стабильным по высоте, как на телефоне:
       длинный текст режется ellipsis, а блок не "схлопывается". */
    #chatReplyPreview.dg-chat-reply-preview {
        min-height: 52px;
        max-height: 52px;
    }

    #chatReplyPreview .dg-chat-reply-preview__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        overflow: hidden;
    }

    #chatReplyPreview .dg-chat-reply-preview__author,
    #chatReplyPreview .dg-chat-reply-preview__text {
        display: block;
        max-width: 100%;
    }
}

#chatReplyPreview.dg-chat-reply-preview[hidden] {
    display: none !important;
}

.comment-reply-target {
    align-items: flex-start;
    overflow: visible;
}

.comment-reply-target .dg-chat-reply-preview__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.comment-reply-target .dg-chat-reply-preview__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dg-chat-reply-preview__bar {
    width: 3px;
    align-self: stretch;
    border-radius: 999px;
    background: var(--c-primary, #8B5CF6);
    flex: 0 0 3px;
}

.dg-chat-reply-preview__body {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.dg-chat-reply-preview__thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    overflow: hidden;
}

.dg-chat-reply-preview__thumb .dg-msg-att {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    border-radius: 10px;
}

.dg-chat-reply-preview__author {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-primary, #8B5CF6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-chat-reply-preview__text {
    font-size: 13px;
    line-height: 1.25;
    color: var(--c-muted, #6B7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-chat-reply-preview__close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--c-muted, #6B7280);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-chat-reply-preview__close:hover {
    background: rgba(0,0,0,0.06);
}

#chatMessages .dg-msg-quote-body {
    min-width: 0;
    flex: 1 1 auto;
}

#chatMessages .dg-msg-quote-thumb {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 36px;
}

.dg-chat-reply-preview__quote-thumb {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════
   DG: Цитата внутри пузыря сообщения
   ═══════════════════════════════════════════════════ */

#chatMessages .dg-msg-quote {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;

    margin: 0 0 4px;
    padding: 5px 8px;

    border: 0;
    border-left: 3px solid var(--c-primary, #8B5CF6);
    border-radius: 8px;

    background: rgba(139,92,246,0.08);
    color: var(--c-text, #2C2C2C);

    text-align: left;
    font: inherit;
    line-height: 1.25;

    appearance: none;
    -webkit-appearance: none;

    box-shadow: none;
    outline: none;
    cursor: pointer;

    overflow: hidden;
}

#chatMessages .dg-msg-quote:hover {
    background: rgba(139,92,246,0.14);
}

#chatMessages .dg-msg-quote--story {
    display: block;
    padding: 6px 8px;
}

#chatMessages .dg-msg-quote--story .dg-msg-quote-body {
    display: block;
}

#chatMessages .dg-msg-quote--story .dg-msg-story-card {
    margin-bottom: 0;
    padding: 6px 8px;
    border-radius: 14px;
    background: rgba(139,92,246,0.12);
    border-left-color: rgba(255, 255, 255, 0.96);
}

#chatMessages .dg-msg-quote-author {
    display: block;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-primary, #8B5CF6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatMessages .dg-msg-quote-text {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--c-muted, #6B7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatMessages .dg-msg-quote-text--story {
    margin-top: 6px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════════════════
   DG: Подсветка сообщения при переходе по цитате
   ═══════════════════════════════════════════════════ */

#chatMessages .dg-msg-highlight .msg-bubble,
#chatMessages .dg-msg-highlight .dg-vk-body {
    box-shadow: 0 0 0 2px rgba(139,92,246,0.35);
    transition: box-shadow 0.2s ease;
}

/* ═══════════════════════════════════════════════════
   DG: Тёмная тема
   ═══════════════════════════════════════════════════ */

body.dg-theme-dark #chatReplyPreview.dg-chat-reply-preview,
body.dg-theme-dark .comment-reply-target {
    background: rgba(24,24,30,0.92);
    border-color: rgba(255,255,255,0.10);
}

body.dg-theme-dark .dg-chat-reply-preview__text,
body.dg-theme-dark #chatMessages .dg-msg-quote-text {
    color: var(--c-muted, #A7AFBF);
}

body.dg-theme-dark #chatMessages .dg-msg-quote {
    background: rgba(139,92,246,0.16);
    color: var(--c-text, #E5E7EB);
}

@media (max-width: 640px) {
    #chatMessages .msg-bubble .dg-msg-quote,
    #chatMessages .dg-vk-body .dg-msg-quote {
        max-width: 100%;
        margin-top: 2px;
        margin-bottom: 6px;
    }
}

/* ═══════════════════════════════════════════════════
   DG: Chat composer overlays above reply preview
   Меню фото/вложений должно быть выше превью цитируемого сообщения.
   Скоуп строго в messagesModal/messagesPageRoot.
   ═══════════════════════════════════════════════════ */

/* превью ответа остаётся выше ленты, но ниже composer overlays */
#messagesModal #chatPane > #chatReplyPreview.dg-chat-reply-preview,
#messagesPageRoot #chatPane > #chatReplyPreview.dg-chat-reply-preview {
    position: relative;
    z-index: 20;
}

/* composer выше reply-preview, чтобы его popup-меню не пряталось под цитатой */
#messagesModal #chatPane > #chatForm,
#messagesPageRoot #chatPane > #chatForm {
    position: relative;
    z-index: 80;
}

/* конкретно обёртка скрепки/фото и её меню */
#messagesModal #chatForm .dg-chat-attach-wrap,
#messagesPageRoot #chatForm .dg-chat-attach-wrap {
    position: relative;
    z-index: 81;
}

#messagesModal #chatForm .dg-chat-attach-menu,
#messagesPageRoot #chatForm .dg-chat-attach-menu {
    z-index: var(--dg-z-dropdown);
}

/* стрелка вниз остаётся над лентой, но ниже composer и его меню вложений */
#messagesModal #chatPane > .dg-chat-scroll-down-btn,
#messagesPageRoot #chatPane > .dg-chat-scroll-down-btn {
    z-index: 79;
}

/* DG: /messages в PWA и мобильном вебе — composer всегда часть layout,
   а не "виртуально плавающий" слой. Иначе старые mobile-reserve правила
   могут увести поле ввода под нижний navbar. */
@media (max-width: 640px) {
    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        align-content: stretch;
        min-height: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: pan-y;
    }

    body.dg-page-messages #messagesPageRoot #chatMessages {
        min-height: 0 !important;
        min-width: 0 !important;
        padding-bottom: 8px !important;
    }

    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatMessages {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        padding: 12px 12px 8px 12px !important;
    }

    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatReplyPreview.dg-chat-reply-preview {
        grid-column: 1;
        min-width: 0 !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        align-self: end;
        justify-self: stretch;
    }

    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatForm {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 80 !important;
        margin: 0 !important;
        padding-bottom: calc(8px + var(--safe-bottom) + var(--dg-chat-suggest-offset, 0px)) !important;
        background: transparent !important;
        border-top: none !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
        user-select: none;
        -webkit-user-select: none;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatForm #chatInput {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        touch-action: manipulation !important;
        user-select: text;
        -webkit-user-select: text;
    }

    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatForm button,
    body.dg-page-messages #messagesPageRoot .messages-container:is(.chat-entering, .show-chat, .chat-leaving) #chatPane > #chatForm .dg-chat-attach-wrap {
        touch-action: manipulation !important;
    }
}

/* DG: unified search field for chats, matching mobile site/article search */
:is(#messagesModal, #messagesPageRoot) #dgModalThreadsSearchInput.threads-search-input,
#threadsList #dgThreadsSearchInput.threads-search-input {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(var(--c-border-rgb), 0.78) !important;
    background-color: var(--dg-pill-light, #f8fafc) !important;
    color: var(--c-text, #111827) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 18px 0 52px !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 20px 20px !important;
}

:is(#messagesModal, #messagesPageRoot) #dgModalThreadsSearchInput.threads-search-input::placeholder,
#threadsList #dgThreadsSearchInput.threads-search-input::placeholder {
    color: var(--c-muted, #6b7280) !important;
    opacity: 1 !important;
}

:is(#messagesModal, #messagesPageRoot) #dgModalThreadsSearchInput.threads-search-input:focus,
#threadsList #dgThreadsSearchInput.threads-search-input:focus {
    border-color: var(--c-primary, #8b5cf6) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.12) !important;
}

#messagesPageRoot:has(.messages-container.show-threads) .dg-messages-page-header,
#messagesModal:has(.messages-container.show-threads) > .modal-content > .modal-header {
    gap: 12px !important;
}

#messagesPageRoot:has(.messages-container.show-threads) #dgModalThreadsSearchInput,
#messagesModal:has(.messages-container.show-threads) #dgModalThreadsSearchInput {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

:is(body.dg-theme-dark, html.dg-theme-dark) :is(
    #messagesModal #dgModalThreadsSearchInput,
    #messagesPageRoot #dgModalThreadsSearchInput,
    #threadsList #dgThreadsSearchInput
).threads-search-input {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #f9fafb !important;
}

:is(body.dg-theme-dark, html.dg-theme-dark) :is(
    #messagesModal #dgModalThreadsSearchInput,
    #messagesPageRoot #dgModalThreadsSearchInput,
    #threadsList #dgThreadsSearchInput
).threads-search-input:focus {
    background-color: rgba(255,255,255,0.11) !important;
    border-color: var(--c-primary, #a78bfa) !important;
}

@media (max-width: 640px) {
    :is(
        body.dg-messages-page #messagesModal,
        body.dg-page-messages #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input {
        min-height: 42px !important;
        height: auto !important;
        padding: 10px 12px 10px 44px !important;
        border-width: 1px !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        line-height: 20px !important;
        color: var(--c-text, #111827) !important;
        background-color: var(--dg-pill-light, #f8fafc) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: 16px 50% !important;
        background-size: 20px 20px !important;
        box-shadow: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    :is(
        body.dg-messages-page #messagesModal,
        body.dg-page-messages #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input::placeholder {
        color: var(--c-muted, #6b7280) !important;
        opacity: 1 !important;
    }

    :is(
        body.dg-messages-page #messagesModal,
        body.dg-page-messages #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input:focus {
        border-color: var(--c-primary, #8b5cf6) !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.12) !important;
    }

    :is(body.dg-theme-dark, html.dg-theme-dark) :is(
        #messagesModal,
        #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input {
        border-color: rgba(255,255,255,0.12) !important;
        color: #fff !important;
        background-color: rgba(255,255,255,0.07) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    }

    :is(body.dg-theme-dark, html.dg-theme-dark) :is(
        #messagesModal,
        #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input::placeholder {
        color: var(--c-muted) !important;
    }

    :is(body.dg-theme-dark, html.dg-theme-dark) :is(
        #messagesModal,
        #messagesPageRoot
    ):has(.messages-container.show-threads) #dgModalThreadsSearchInput.threads-search-input:focus {
        background-color: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.12) !important;
        box-shadow: none !important;
    }
}

/* DG: profile blog sidebars must fit inside the viewport when opened */
.dg-profile-blog-sidebar,
.dg-pblog-sidebar {
    max-height: min(640px, calc(100svh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
    .dg-profile-blog-sidebar,
    .dg-pblog-sidebar {
        position: sticky;
        top: 84px;
    }
}

@media (max-width: 768px) {
    .dg-profile-blog-layout--sidebar-open .dg-profile-blog-sidebar,
    .dg-pblog-sidebar-open .dg-pblog-sidebar {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        width: min(88vw, 320px) !important;
        max-height: none !important;
        z-index: 2 !important;
        transform: translateX(0) !important;
    }

    .dg-profile-blog-layout--sidebar-open .dg-profile-blog-mobile-backdrop,
    .dg-pblog-sidebar-open .dg-pblog-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1 !important;
    }
}

/* DG: comment likes are text/icon only, without button background in both themes */
.comment-meta .comment-like-btn,
.comment-meta .comment-like-btn.btn,
.comment-meta .comment-like-btn.btn-ghost,
.comment-meta .comment-like-btn:hover,
.comment-meta .comment-like-btn:focus,
.comment-meta .comment-like-btn:focus-visible,
.comment-meta .comment-like-btn:active,
.comment-meta .comment-like-btn.is-liked,
.comment-meta .comment-like-btn.is-liked:hover,
.comment-meta .comment-like-btn.is-liked:focus-visible,
body.dg-theme-dark .comment-meta .comment-like-btn,
body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:hover,
body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:focus-visible,
body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:active,
body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:hover,
body.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:focus-visible,
html.dg-theme-dark .comment-meta .comment-like-btn,
html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:hover,
html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:focus-visible,
html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost:active,
html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:hover,
html.dg-theme-dark .comment-meta .comment-like-btn.btn-ghost.is-liked:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* DG: iPhone PWA safe-area guard.
   Keeps modal headers and fullscreen image controls below the notch/status bar. */
:root {
    --dg-safe-top-gap: max(0px, env(safe-area-inset-top, 0px));
}

@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --dg-safe-top-gap: max(0px, constant(safe-area-inset-top));
    }
}

@media (max-width: 640px) {
    .modal {
        padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
    }

    html.dg-standalone-pwa .modal {
        padding-top: var(--dg-safe-top-gap);
    }

    html.dg-standalone-pwa .modal-content,
    html.dg-standalone-pwa .modal-content.modal-large {
        max-height: calc(100dvh - var(--dg-safe-top-gap) - var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }

    body.dg-messages-page #messagesModal,
    #shortModal,
    #termsModal,
    #saleRulesModal {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.dg-messages-page #messagesModal,
    body.dg-messages-page #messagesModal .modal-content,
    body.dg-messages-page #messagesModal .modal-content.modal-large,
    #shortModal .modal-content.modal-tall,
    #termsModal .modal-content.modal-large,
    #saleRulesModal .modal-content.modal-large {
        max-height: 100dvh !important;
    }

    html.dg-standalone-pwa #dollModal .modal-content,
    html.dg-standalone-pwa #dollModal .modal-content.modal-large,
    html.dg-standalone-pwa body.ios-device #dollModal .modal-content,
    html.dg-standalone-pwa body.ios-device #dollModal .modal-content.modal-large {
        transform: none !important;
        contain: none !important;
    }

    html.dg-standalone-pwa #dollModal #dollModalContent,
    html.dg-standalone-pwa body.ios-device #dollModal #dollModalContent {
        padding-top: 0 !important;
    }

    html.dg-standalone-pwa #dollModal .modal-content.modal-tall,
    html.dg-standalone-pwa body.ios-device #dollModal .modal-content.modal-tall {
        height: 90dvh !important;
        max-height: 90dvh !important;
    }

    .lightbox-close,
    .dg-lb-close,
    .dg-photo-lightbox-close {
        top: calc(12px + var(--dg-safe-top-gap)) !important;
    }

    .lightbox-img,
    .dg-lb-image,
    .dg-photo-lightbox-img {
        max-height: calc(100dvh - var(--dg-safe-top-gap) - var(--safe-bottom, env(safe-area-inset-bottom, 0px)) - 24px) !important;
    }
}

@media (max-width: 640px) {
    html.dg-standalone-pwa body:not(.ios-device) #dollModal .modal-close,
    html.dg-standalone-pwa body:not(.ios-device) #dollModal .dg-media-modal-back,
    html.dg-standalone-pwa body:not(.ios-device) #dollModal .dg-modal-back-btn {
        position: fixed !important;
        top: calc(var(--dg-safe-top-gap, env(safe-area-inset-top, 0px)) + 44px) !important;
        left: calc(8px + var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 20 !important;
    }

    html.dg-standalone-pwa #dgFiltersModal.modal,
    html.dg-standalone-pwa body.ios-device #dgFiltersModal.modal {
        top: var(--dg-nav-h, 0px) !important;
        bottom: calc(var(--dg-mobile-bottom-nav-height, calc(56px + var(--safe-bottom)))) !important;
        height: auto !important;
        max-height: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    html.dg-standalone-pwa #dgFiltersModal .dg-filters-sheet.modal-content,
    html.dg-standalone-pwa body.ios-device #dgFiltersModal .dg-filters-sheet.modal-content {
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    html.dg-standalone-pwa body:not(.ios-device) #shortModal .modal-close,
    html.dg-standalone-pwa body:not(.ios-device) #shortModal .dg-media-modal-back,
    html.dg-standalone-pwa body:not(.ios-device) #shortModal .dg-modal-back-btn {
        position: fixed !important;
        top: calc(var(--dg-safe-top-gap, env(safe-area-inset-top, 0px)) + 44px) !important;
        left: calc(8px + var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 20 !important;
    }

    body:not(.ios-device) #shortModal .modal-content,
    body:not(.ios-device) #shortModal .modal-content.modal-large,
    body:not(.ios-device) #shortModal .modal-content.modal-tall {
        width: min(96vw, 1200px) !important;
        max-width: min(96vw, 1200px) !important;
        height: 90dvh !important;
        max-height: 90dvh !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        transform: none !important;
        contain: none !important;
    }

    body:not(.ios-device) #shortModal #shortModalContent {
        padding-top: calc(var(--dg-safe-top-gap, env(safe-area-inset-top, 0px)) + 16px) !important;
        padding-left: max(4.8px, var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-right: max(4.8px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;
    }

    html.dg-standalone-pwa body.ios-device #shortModal .modal-close,
    html.dg-standalone-pwa body.ios-device #shortModal .dg-media-modal-back,
    html.dg-standalone-pwa body.ios-device #shortModal .dg-modal-back-btn {
        position: fixed !important;
        top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
        left: max(8px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 20 !important;
    }

    html.dg-standalone-pwa body.ios-device #dollModal .modal-close,
    html.dg-standalone-pwa body.ios-device #dollModal .dg-media-modal-back,
    html.dg-standalone-pwa body.ios-device #dollModal .dg-modal-back-btn {
        top: calc(max(8dvh, env(safe-area-inset-top, 0px)) + 12px) !important;
    }
}

/* Keep the site and ordinary media modals from stretching past their vertical
   scroll boundaries on touch, trackpads, and WebKit rubber-band scrolling. */
html,
body,
body > .dg-scroll-root,
#dollModal .modal-body,
#shortModal .modal-body {
    overscroll-behavior-y: none;
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        #dollModal .modal-body {
            padding-right: max(3.2px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;
        }

        #shortModal .modal-body {
            padding-right: max(4.8px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;
        }
    }
}

@media (max-width: 640px) {
    #dollModal .modal-body,
    #dollModal #dollModalContent {
        padding-left: max(3.2px, var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-right: max(3.2px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;
    }

    #shortModal .modal-body,
    #shortModal #shortModalContent {
        padding-left: max(4.8px, var(--safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-right: max(4.8px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;
    }

    /* Под главным медиа визуально уравниваем левый край с правым краем действий. */
    #dollModal .dg-post-modal-underbar,
    #dollModal .doll-detail-right.modal-side,
    #shortModal .dg-short-side-rail,
    #shortModal .doll-detail-right.modal-side {
        padding-left: 8px;
        box-sizing: border-box;
    }

    /* Окна комментариев совпадают по боковым отступам с модалкой публикации. */
    #dollModal .comments-block,
    #shortModal .comments-block,
    .dg-post-comments-panel.comments-block,
    #dg-article-root > .dg-article-comments-block,
    #heroShortsViewerWrap .dg-hero-shorts-comments {
        left: 2vw;
        right: 2vw;
        width: auto !important;
    }
}

@supports (-webkit-touch-callout: none) {
    body.dg-theme-dark #supportModal #supportBody {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.dg-theme-dark #supportModal #supportBody:focus {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(167, 139, 250, 0.55) !important;
    }

    body.dg-theme-dark #supportModal #supportBody::placeholder {
        color: rgba(255, 255, 255, 0.56) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.56) !important;
    }
}

.dg-hero-slider .home-hero {
    margin: 0 !important;
}

.dg-hero-slider__track .dg-hero-slide > .home-hero {
    flex: 1 1 auto !important;
    width: 100%;
    min-height: 100%;
}

.dg-hero-slider .dg-doll-finds-hero {
    background:
        linear-gradient(90deg, rgba(17,24,39,0.88), rgba(17,24,39,0.36)),
        url('/images/background.jpg') center/cover no-repeat !important;
    color: #ffffff;
}

.dg-hero-slider .dg-doll-finds-hero > .dg-contest-week__eyebrow {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero {
    background-color: #d8ccf2 !important;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.46), rgba(255,255,255,0.20), rgba(17,24,39,0.18)),
        linear-gradient(rgba(17,24,39,0.12), rgba(17,24,39,0.12)),
        url('/images/preview_light.png') !important;
    background-position: center 56%, center, center 56% !important;
    background-size: cover, cover, cover !important;
    background-repeat: no-repeat !important;
    color: #111827;
}

body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
.dg-hero-slider .dg-doll-finds-hero {
    background-color: #d8ccf2 !important;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16), rgba(17,24,39,0.22)),
        linear-gradient(rgba(17,24,39,0.14), rgba(17,24,39,0.14)),
        url('/images/preview_light.png') !important;
    background-position: center 56%, center, center 56% !important;
    background-size: cover, cover, cover !important;
    background-repeat: no-repeat !important;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero__title {
    color: #111827;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero__text,
body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero > .dg-contest-week__eyebrow {
    color: rgba(17,24,39,0.82);
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero__text {
    font-weight: 650;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-doll-finds-hero__details-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #9b6cff 0%, #7c3aed 100%);
    border-color: rgba(124,58,237,0.46);
    box-shadow: 0 10px 24px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}

@media (max-width: 640px) {
    body:not(.dg-theme-dark) .dg-hero-slider .dg-referral-hero {
        background: var(--dg-message-surface-light) !important;
        border-color: var(--dg-message-border-light) !important;
        backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
        color: #111827;
    }

    body.dg-theme-dark .dg-hero-slider .dg-referral-hero {
        background: rgba(24,24,30,0.82) !important;
        border-color: rgba(255,255,255,0.10) !important;
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
    }
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-referral-hero__eyebrow {
    color: rgba(17,24,39,0.62);
}

.dg-hero-slider .dg-referral-hero__title {
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.05;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-referral-hero__title {
    color: #111827;
}

body.dg-theme-dark .dg-hero-slider .dg-referral-hero__title {
    color: #ffffff;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-referral-hero__bonus {
    color: #111827;
}

@media (min-width: 641px) {
    .dg-hero-slider .dg-contest-week .dg-hero-info-btn,
    .dg-hero-slider .dg-referral-hero .dg-hero-info-btn,
    .dg-hero-slider .dg-giveaway-hero .dg-hero-info-btn,
    .dg-hero-slider .dg-doll-finds-hero .dg-hero-info-btn {
        top: auto;
        bottom: 12px;
    }
}

.dg-hero-slider .dg-giveaway-hero__details-btn,
.dg-hero-slider .dg-doll-finds-hero__details-btn {
    right: 24px;
    bottom: 24px;
    min-width: 112px;
    min-height: 38px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #9b6cff 0%, #7c3aed 100%) !important;
    border: 1px solid rgba(124,58,237,0.46) !important;
    box-shadow: 0 10px 24px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dg-hero-slider .dg-giveaway-hero__details-btn:hover,
.dg-hero-slider .dg-doll-finds-hero__details-btn:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    border-color: rgba(124,58,237,0.62) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(124,58,237,0.30), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero__details-btn,
body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero__details-btn:link,
body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero__details-btn:visited,
body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero__details-btn:hover,
body:not(.dg-theme-dark) .dg-hero-slider .dg-giveaway-hero__details-btn:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dg-theme-dark .dg-hero-slider .dg-doll-finds-hero {
    background:
        linear-gradient(90deg, rgba(10,10,14,0.90), rgba(10,10,14,0.42)),
        url('/images/background.jpg') center/cover no-repeat !important;
}

@media (max-width: 640px) {
    .dg-hero-slider .dg-doll-finds-hero {
        padding: 16px 14px !important;
    }

    body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        background-color: #d8ccf2 !important;
        background-image:
            linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16), rgba(17,24,39,0.22)),
            linear-gradient(rgba(17,24,39,0.14), rgba(17,24,39,0.14)),
            url('/images/preview_light.png') !important;
        background-position: center 56%, center, center 56% !important;
        background-size: cover, cover, cover !important;
        background-repeat: no-repeat !important;
    }

    body:not(.dg-theme-dark).dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-referral-hero {
        background: var(--dg-message-surface-light) !important;
        border-color: var(--dg-message-border-light) !important;
        backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    }

    body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        background:
            linear-gradient(90deg, rgba(10,10,14,0.90), rgba(10,10,14,0.42)),
            url('/images/background.jpg') center/cover no-repeat !important;
    }

    .dg-hero-slider .dg-doll-finds-hero > .dg-contest-week__eyebrow {
        top: 12px;
        left: 14px;
    }

    .dg-hero-slider .dg-referral-hero__avatar-wrap {
        width: 58px !important;
        height: 58px !important;
    }

    .dg-hero-slider .dg-referral-hero__copy {
        max-width: none !important;
    }

    .dg-hero-slider .dg-referral-hero__title {
        font-size: 24px !important;
        line-height: 1.05 !important;
        white-space: normal;
    }

    .dg-hero-slider .dg-referral-hero__bonus {
        margin-top: 0 !important;
    }

    .dg-hero-slider .dg-giveaway-hero__details-btn,
    .dg-hero-slider .dg-doll-finds-hero__details-btn {
        right: 12px !important;
        bottom: 12px !important;
        min-width: 88px !important;
        min-height: 32px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 640px) {
    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        min-height: 0 !important;
        padding: 16px 14px !important;
        background-color: #d8ccf2 !important;
        background-image:
            linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16), rgba(17,24,39,0.22)),
            linear-gradient(rgba(17,24,39,0.14), rgba(17,24,39,0.14)),
            url('/images/preview_light.png') !important;
        background-position: center 56%, center, center 56% !important;
        background-size: cover, cover, cover !important;
        background-repeat: no-repeat !important;
    }

    html.dg-standalone-pwa body.dg-theme-dark.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero {
        background:
            linear-gradient(90deg, rgba(10,10,14,0.90), rgba(10,10,14,0.42)),
            url('/images/background.jpg') center/cover no-repeat !important;
    }

    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero__copy {
        max-width: calc(100% - 104px) !important;
    }

    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero__title {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero__text {
        margin-top: 24px !important;
        max-width: 220px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero__details-btn {
        right: 12px !important;
        bottom: 12px !important;
        min-width: 88px !important;
        min-height: 32px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    html.dg-standalone-pwa body.dg-page-info-blog-mobile:not(.dg-page-messages)
    .dg-hero-slider .dg-doll-finds-hero > .dg-contest-week__eyebrow {
        top: 12px !important;
        left: 14px !important;
    }
}

/* PWA: story footer keeps its existing standalone placement. */
@media (max-width: 640px) {
    html.dg-standalone-pwa #profileStoryViewerWrap .dg-story-viewer-footer {
        bottom: calc(-1 * clamp(44px, 5.6vh, 52px)) !important;
        padding-bottom: 0 !important;
    }

    html.dg-standalone-pwa #profileStoryViewerWrap .dg-story-reply-form {
        margin-bottom: 8px !important;
    }
}

/* Финальный override для уже существующих linkify-ссылок в светлой и тёмной темах. */
.msg-text a,
.msg-text a:visited,
.dg-vk-text a,
.dg-vk-text a:visited {
    color: var(--c-primary, #8B5CF6) !important;
    -webkit-text-fill-color: var(--c-primary, #8B5CF6) !important;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.14em;
}

.msg-text a:hover,
.msg-text a:focus-visible,
.msg-text a:active,
.dg-vk-text a:hover,
.dg-vk-text a:focus-visible,
.dg-vk-text a:active {
    color: #a78bfa !important;
    -webkit-text-fill-color: #a78bfa !important;
    text-decoration: none;
}

body.dg-theme-dark .msg-text a,
body.dg-theme-dark .msg-text a:visited,
body.dg-theme-dark .dg-vk-text a,
body.dg-theme-dark .dg-vk-text a:visited,
html.dg-theme-dark .msg-text a,
html.dg-theme-dark .msg-text a:visited,
html.dg-theme-dark .dg-vk-text a,
html.dg-theme-dark .dg-vk-text a:visited {
    color: #c4b5fd !important;
    -webkit-text-fill-color: #c4b5fd !important;
    text-decoration-color: rgba(196, 181, 253, 0.85);
}

body.dg-theme-dark .msg-text a:hover,
body.dg-theme-dark .msg-text a:focus-visible,
body.dg-theme-dark .msg-text a:active,
body.dg-theme-dark .dg-vk-text a:hover,
body.dg-theme-dark .dg-vk-text a:focus-visible,
body.dg-theme-dark .dg-vk-text a:active,
html.dg-theme-dark .msg-text a:hover,
html.dg-theme-dark .msg-text a:focus-visible,
html.dg-theme-dark .msg-text a:active,
html.dg-theme-dark .dg-vk-text a:hover,
html.dg-theme-dark .dg-vk-text a:focus-visible,
html.dg-theme-dark .dg-vk-text a:active {
    color: #ede9fe !important;
    -webkit-text-fill-color: #ede9fe !important;
}
/* Profile blog feed — reference-inspired cards and composer */
.dg-blog-desktop-layout {
  --dg-blog-bg:#ffffff;
  --dg-blog-bg-soft:#f7f4fa;
  --dg-blog-bg-hover:#f1ebf7;
  --dg-blog-text:#211a27;
  --dg-blog-muted:#6e6674;
  --dg-blog-border:rgba(91,62,116,.16);
  --dg-blog-shadow:0 8px 28px rgba(48,24,72,.07);
  --dg-blog-accent:#8741e5;
  display:grid;
  grid-template-columns:minmax(0,600px);
  justify-content:center;
  width:100%;
}
body.dg-theme-dark .dg-blog-desktop-layout,
html.dg-theme-dark .dg-blog-desktop-layout {
  --dg-blog-bg:#211c27;
  --dg-blog-bg-soft:#19151e;
  --dg-blog-bg-hover:#302839;
  --dg-blog-text:#f4eff8;
  --dg-blog-muted:#b9afc1;
  --dg-blog-border:rgba(214,190,232,.17);
  --dg-blog-shadow:0 10px 30px rgba(0,0,0,.25);
  --dg-blog-accent:#b875ff;
}
.dg-blog-side { display:none; }

@media (min-width:1240px) {
  .dg-blog-main:has(#profileBlogPageRoot) { max-width:1340px; }
  .dg-blog-desktop-layout {
    grid-template-columns:228px 600px 250px;
    align-items:start;
    gap:22px;
    max-width:1282px;
    margin:0 auto;
  }
  .dg-blog-side {
    position:sticky;
    top:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    color:var(--dg-blog-text);
  }
  .dg-blog-side-card {
    overflow:hidden;
    padding:14px;
    border:1px solid var(--dg-blog-border);
    border-radius:14px;
    background:color-mix(in srgb,var(--dg-blog-bg) 94%,transparent);
    box-shadow:var(--dg-blog-shadow);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .dg-blog-side-card h2,
  .dg-blog-side-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:8px;
    margin:0 0 12px;
    padding:0;
    border:0;
    color:var(--dg-blog-text);
    background:transparent;
    font:inherit;
    font-size:14px;
    font-weight:750;
    text-align:left;
  }
  .dg-blog-side-title { cursor:pointer; }
  .dg-blog-side-title[data-blog-open-followers]>span,
  .dg-blog-side-title[data-blog-open-stats]>span,
  .dg-blog-side-title[data-blog-open-achievements]>span {
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .dg-blog-side-title>span,
  .dg-blog-side-card h2 {
    justify-content:flex-start;
  }
  .dg-blog-side-card h2>svg,
  .dg-blog-side-title span>svg {
    color:var(--dg-blog-accent);
  }
  .dg-blog-side-card h2 svg,
  .dg-blog-side-title svg,
  .dg-blog-side-links svg {
    width:18px;
    height:18px;
    flex:0 0 auto;
  }
  .dg-blog-side-title>svg { width:16px; height:16px; color:var(--dg-blog-muted); }
  .dg-blog-followers-count { color:var(--dg-blog-muted); font:inherit; font-weight:650; }
  .dg-blog-achievements-preview {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .dg-blog-achievements-preview button {
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:5px 2px;
    border:0;
    border-radius:10px;
    color:var(--dg-blog-muted);
    background:transparent;
    cursor:pointer;
  }
  .dg-blog-achievements-preview button:hover { color:var(--dg-blog-accent); background:var(--dg-blog-bg-hover); }
  .dg-blog-achievements-preview img,
  .dg-blog-achievements-preview button>span {
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    object-fit:contain;
    font-size:32px;
  }
  .dg-blog-achievements-preview small {
    overflow:hidden;
    width:100%;
    font-size:10px;
    line-height:1.25;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dg-blog-side-links { display:flex; flex-direction:column; gap:4px; }
  .dg-blog-side-links a {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:36px;
    padding:6px 7px;
    border-radius:9px;
    color:var(--dg-blog-muted);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
  }
  .dg-blog-side-links a:hover { color:var(--dg-blog-accent); background:var(--dg-blog-bg-hover); }
  .dg-blog-side-links svg { color:var(--dg-blog-accent); }
  .dg-blog-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dg-blog-stat-grid div { min-width:0; padding:9px 8px; border-radius:10px; background:var(--dg-blog-bg-soft); }
  .dg-blog-stat-grid strong { display:block; color:var(--dg-blog-accent); font-size:18px; line-height:1.15; }
  .dg-blog-stat-grid span { display:block; overflow:hidden; margin-top:3px; color:var(--dg-blog-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .dg-blog-followers-preview { display:flex; align-items:center; min-height:48px; padding-left:3px; }
  .dg-blog-followers-preview a,
  .dg-blog-followers-preview button {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-left:-7px;
    overflow:hidden;
    border:2px solid var(--dg-blog-bg);
    border-radius:50%;
    color:var(--dg-blog-text);
    background:var(--dg-blog-bg-soft);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
  }
  .dg-blog-followers-preview a:first-child { margin-left:0; }
  .dg-blog-followers-preview img { width:100%; height:100%; object-fit:cover; }
  .dg-blog-followers-preview button { cursor:pointer; }
  .dg-blog-side-empty { margin:0; color:var(--dg-blog-muted); font-size:12px; line-height:1.45; }
  .dg-blog-level-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--dg-blog-muted); font-size:12px; font-weight:650; }
  .dg-blog-level-head strong { color:var(--dg-blog-text); font-size:15px; }
  .dg-blog-level-track { height:7px; margin-top:10px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--dg-blog-accent) 18%,var(--dg-blog-bg-soft)); }
  .dg-blog-level-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9d4edd,#c06cff); }
  .dg-blog-level-card { position:relative; overflow:visible; outline:none; }
  .dg-blog-level-card:hover,
  .dg-blog-level-card:focus-visible {
    z-index:2;
  }
  .dg-blog-level-card::after {
    content:attr(data-level-hint);
    position:absolute;
    z-index:20;
    left:14px;
    right:14px;
    top:calc(100% + 8px);
    padding:8px 10px;
    border:1px solid var(--dg-blog-border);
    border-radius:9px;
    color:var(--dg-blog-text);
    background:var(--dg-blog-bg);
    box-shadow:var(--dg-blog-shadow);
    font-size:12px;
    line-height:1.35;
    opacity:0;
    transform:translateY(-4px);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
  }
  .dg-blog-level-card:hover::after,
  .dg-blog-level-card:focus-visible::after {
    opacity:1;
    transform:translateY(0);
  }

  body.dg-page-profile {
    --dg-profile-tabs-sticky-height:50px;
    --dg-blog-sticky-gap:12px;
  }
  body.dg-page-profile .dg-blog-side {
    top:calc(var(--dg-navbar-stack,64px) + var(--dg-profile-tabs-sticky-height) + var(--dg-blog-sticky-gap));
  }
}

.dg-blog-feed-page {
  --dg-blog-bg:#ffffff;
  --dg-blog-bg-soft:#f7f4fa;
  --dg-blog-bg-hover:#f1ebf7;
  --dg-blog-text:#211a27;
  --dg-blog-muted:#6e6674;
  --dg-blog-border:rgba(91,62,116,.16);
  --dg-blog-shadow:0 8px 28px rgba(48,24,72,.07);
  --dg-blog-accent:#8741e5;
  width:min(100%,600px); margin:0 auto; padding:8px 0 48px; color:var(--dg-blog-text);
}
@media (min-width:1240px) {
  .dg-blog-feed-page { padding-top:0; }
}
body.dg-theme-dark .dg-blog-feed-page,
html.dg-theme-dark .dg-blog-feed-page {
  --dg-blog-bg:#211c27;
  --dg-blog-bg-soft:#19151e;
  --dg-blog-bg-hover:#302839;
  --dg-blog-text:#f4eff8;
  --dg-blog-muted:#b9afc1;
  --dg-blog-border:rgba(214,190,232,.17);
  --dg-blog-shadow:0 10px 30px rgba(0,0,0,.25);
  --dg-blog-accent:#b875ff;
}
.dg-blog-feed-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; }
.dg-blog-feed-head h1 { margin:0; font-size:28px; color:var(--dg-blog-text); }
.dg-blog-feed-head p { margin:4px 0 0; color:var(--dg-blog-muted); font-size:14px; }
.dg-post-composer,.dg-post-card,.dg-blog-article-card { color:var(--dg-blog-text); background:var(--dg-blog-bg); border:1px solid var(--dg-blog-border); border-radius:16px; box-shadow:var(--dg-blog-shadow); }
.dg-blog-article-card { position:relative; }
.dg-article-card-menu { position:absolute; z-index:3; top:9px; right:9px; }
.dg-article-card-menu-popover { top:48px; right:9px; z-index:5; }
.dg-article-card-status { display:inline-flex; width:max-content; margin-left:8px; padding:3px 8px; border:1px solid rgba(184,117,255,.35); border-radius:999px; color:var(--dg-blog-accent); background:rgba(149,77,242,.12); font-size:11px; font-weight:700; }
.dg-post-composer { position:relative; padding:14px; margin-bottom:14px; transition:border-color .2s, box-shadow .2s; }
.dg-post-composer:focus-within { border-color:#954df2; box-shadow:0 0 0 3px rgba(149,77,242,.10); }
.dg-post-edit-state { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 9px 52px; color:var(--dg-blog-accent); font-size:13px; font-weight:700; }
.dg-post-edit-state[hidden] { display:none !important; }
.dg-post-edit-state span { display:flex; align-items:center; gap:6px; }
.dg-post-edit-state svg { width:15px; height:15px; }
.dg-post-edit-state button { border:0; border-radius:8px; padding:6px 9px; color:var(--dg-blog-muted); background:var(--dg-blog-bg-soft); cursor:pointer; }
.dg-post-composer-main { display:grid; grid-template-columns:42px minmax(0,1fr) 44px; align-items:start; gap:10px; }
.dg-post-composer-main>img,.dg-post-card>header>img { width:42px; height:42px; flex:none; border-radius:50%; object-fit:cover; background:var(--dg-blog-bg-soft); }
.dg-post-composer-main>.dg-post-editor { box-sizing:border-box; width:100%; height:52px; min-height:52px !important; max-height:164px !important; overflow-y:hidden; border:0; outline:0; padding:10px 2px; background:transparent; color:var(--dg-blog-text); font:inherit; line-height:24px; transition:height .16s ease; }
.dg-post-composer,.dg-post-editor { overflow-anchor:none; }
.dg-post-editor { scroll-margin-block:72px 24px; overscroll-behavior:contain; overflow-wrap:anywhere; word-break:break-word; }
.dg-post-editor.is-scrollable { overflow-y:auto; }
.dg-post-composer.is-article-mode .dg-post-editor { cursor:pointer; }
.dg-post-composer.is-article-mode .dg-publication-options,
.dg-post-composer.is-article-mode .dg-post-format-toolbar,
.dg-post-composer.is-article-mode>.dg-post-publish-popover { display:none !important; }
.dg-post-composer.is-article-mode [data-post-video],
.dg-post-composer.is-article-mode .dg-post-limit { display:none !important; }
.dg-post-composer.is-article-expanded>.dg-post-previews,
.dg-post-composer.is-article-expanded>.dg-post-composer-main { display:none !important; }
.dg-inline-article-host[hidden] { display:none !important; }
.dg-inline-article-host { width:100%; }
.dg-inline-article-collapse { display:none !important; }
.dg-inline-article-collapse:hover { color:var(--dg-blog-accent); background:var(--dg-blog-bg-soft); }
.dg-inline-article-modal { position:static !important; inset:auto !important; z-index:auto !important; display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; overflow:visible !important; background:transparent !important; backdrop-filter:none !important; transform:none !important; }
.dg-inline-article-modal .blog-article-screen-bar,
.dg-inline-article-modal .modal-header,
.dg-inline-article-modal .blog-article-cancel-btn { display:none !important; }
.dg-inline-article-modal .modal-content.blog-article-modal-content { position:static !important; display:block !important; width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important; }
.dg-inline-article-modal .modal-body,
.dg-inline-article-modal #blogArticleFormWrap { display:block !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; padding:0 !important; overflow:visible !important; }
.dg-inline-article-modal #blogArticleForm { position:relative; display:flex !important; flex:none !important; flex-direction:column; width:100%; height:auto !important; min-height:0 !important; max-height:none !important; gap:0; padding-top:0; overflow:visible !important; }
.dg-inline-article-modal .form-group { margin:0 !important; }
.dg-inline-article-modal .form-group>label,
.dg-inline-article-modal #blogArticleProfileSectionWrap,
.dg-inline-article-modal #blogArticleTitle,
.dg-inline-article-modal .blog-article-moderation-hint,
.dg-inline-article-modal .dg-publication-options--article { display:none !important; }
.dg-inline-article-modal #blogArticleTitle { width:100%; border:0 !important; border-bottom:1px solid var(--dg-blog-border) !important; border-radius:0 !important; padding:12px 4px !important; background:transparent !important; color:var(--dg-blog-text) !important; font-size:21px; font-weight:700; box-shadow:none !important; }
.dg-inline-article-modal #blogArticleTitle::placeholder { color:var(--dg-blog-muted); font-weight:600; }
.dg-inline-article-modal .blog-article-toolbar { order:-1; position:static; display:flex; flex:0 0 auto; align-items:center; flex-wrap:nowrap; width:auto; height:44px; min-height:44px; max-height:44px; overflow-x:auto; overflow-y:hidden; z-index:12; margin:0 44px 8px 52px !important; padding:4px !important; border:1px solid var(--dg-blog-border) !important; border-radius:10px; background:var(--dg-blog-bg-soft) !important; }
.dg-inline-article-modal .blog-article-toolbar[hidden] { display:none !important; }
.dg-inline-article-modal .blog-article-toolbar .blog-article-tb-btn,
.dg-inline-article-modal .blog-article-toolbar .blog-article-align-btn { box-sizing:border-box; display:inline-flex; flex:0 0 34px; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; border:0; border-radius:8px; color:var(--dg-blog-muted); background:transparent; }
.dg-inline-article-modal .blog-article-editor-field { position:relative; display:block !important; flex:none !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
.dg-inline-article-modal .dg-inline-article-avatar { position:absolute; z-index:2; left:0; top:5px; width:42px; height:42px; border-radius:50%; object-fit:cover; }
.dg-inline-article-modal #blogArticleEditor { box-sizing:border-box; display:flow-root; width:100%; height:52px; min-height:52px !important; max-height:164px !important; overflow-x:hidden !important; overflow-y:hidden !important; overscroll-behavior-y:auto !important; touch-action:pan-y !important; -webkit-overflow-scrolling:touch; padding:10px 54px 10px 52px; border:0 !important; border-radius:0 !important; background:transparent !important; color:#211a27 !important; -webkit-text-fill-color:#211a27 !important; caret-color:#211a27 !important; font:inherit; font-size:15px; line-height:24px; box-shadow:none !important; transition:height .16s ease; }
.dg-inline-article-modal #blogArticleEditor *:not(button):not(svg):not(path) { color:#211a27 !important; -webkit-text-fill-color:#211a27 !important; }
body.dg-theme-dark .dg-inline-article-modal #blogArticleEditor,
html.dg-theme-dark .dg-inline-article-modal #blogArticleEditor,
body.dg-theme-dark .dg-inline-article-modal #blogArticleEditor *:not(button):not(svg):not(path),
html.dg-theme-dark .dg-inline-article-modal #blogArticleEditor *:not(button):not(svg):not(path) { color:#f4eff8 !important; -webkit-text-fill-color:#f4eff8 !important; caret-color:#f4eff8 !important; }
.dg-inline-article-modal #blogArticleEditor:empty::before { content:attr(data-placeholder); color:var(--dg-blog-muted) !important; -webkit-text-fill-color:var(--dg-blog-muted) !important; opacity:.9; pointer-events:none; }
.dg-inline-article-modal #blogArticleEditor.is-scrollable { overflow-y:auto !important; overscroll-behavior-y:auto !important; }
.dg-inline-article-modal .blog-article-img-wrap { touch-action:none; visibility:visible !important; opacity:1; }
.dg-inline-article-modal .blog-article-img-wrap img { display:block !important; visibility:visible !important; opacity:1 !important; }
.dg-inline-article-modal .blog-article-img-wrap.is-inline-image-dragging { z-index:30; opacity:.78; outline:2px solid var(--dg-blog-accent); outline-offset:3px; cursor:grabbing !important; }
.dg-inline-article-modal .dg-inline-image-drop-marker { display:block; box-sizing:border-box; width:100%; height:4px; min-height:4px; margin:7px 0; border-radius:999px; background:var(--dg-blog-accent); box-shadow:0 0 0 3px rgba(184,117,255,.16); pointer-events:none; clear:both; }
.dg-inline-article-modal .form-actions { position:absolute; right:2px; bottom:2px; margin:0 !important; padding:0 !important; }
.dg-inline-article-modal #blogArticleSubmitBtn { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,#b54cff,#7444ed); }
.dg-inline-article-modal #blogArticleSubmitBtn svg { width:20px; height:20px; }
.dg-inline-article-modal .dg-article-publish-popover { right:0; bottom:54px; }
.dg-inline-article-title-confirm { box-sizing:border-box; width:100%; margin:0 0 8px; padding:10px 11px; border:1px solid var(--dg-blog-border); border-radius:9px; color:var(--dg-blog-text); background:var(--dg-blog-bg-soft); font:inherit; }
.dg-inline-article-modal .blog-article-mobile-toolbar,
.dg-inline-article-modal .blog-article-mobile-submit-btn { display:none !important; }
.dg-post-editor:empty::before { content:attr(data-placeholder); color:var(--dg-blog-muted); opacity:.9; pointer-events:none; }
.dg-post-editor h2 { margin:.2em 0; font-size:1.25em; }
.dg-post-editor ul,.dg-post-text ul { margin:.35em 0; padding-left:1.75em; }
.dg-post-editor ol,.dg-post-text ol { margin:.35em 0; padding-left:3.1em; list-style-type:decimal; list-style-position:outside; }
.dg-post-editor a,
.dg-post-text a,
.dg-post-text a:visited { color:var(--dg-blog-accent); -webkit-text-fill-color:var(--dg-blog-accent); text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:.14em; }
.dg-post-text a:hover,
.dg-post-text a:focus-visible,
.dg-post-text a:active { color:#a78bfa; -webkit-text-fill-color:#a78bfa; text-decoration:none; }
.dg-article-composer .dg-post-editor { max-height:clamp(360px,calc(100dvh - 250px),680px) !important; }
@media (min-width:641px) {
  .dg-blog-feed-page > .dg-article-composer > .dg-post-composer-main > .dg-article-editor { height:auto; transition:none; }
}

@media (max-width:640px) {
  /* Prevent iOS focus zoom before the keyboard-state class is applied. */
  .dg-post-editor,
  .dg-article-editor,
  .dg-inline-article-modal #blogArticleEditor {
    font-size:16px !important;
  }
  /* Mobile composers use the page as their only vertical scroll container. */
  .dg-post-composer-main>.dg-post-editor,
  .dg-article-composer .dg-post-composer-main>.dg-article-editor,
  .dg-inline-article-modal #blogArticleEditor {
    height:auto;
    max-height:none !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto;
    transition:none;
  }
  .dg-post-editor.is-scrollable,
  .dg-inline-article-modal #blogArticleEditor.is-scrollable {
    overflow-y:visible !important;
  }

}

/* Chat loading lives inside the existing scroll owner; it never changes its geometry. */
#chatMessages.dg-chat-loading,
#chatMessages.dg-chat-cache-pending {
  position:relative;
}

#chatMessages.dg-chat-loading > * {
  opacity:0;
}

#chatMessages.dg-chat-cache-pending > * {
  opacity:0;
}

#chatMessages.dg-chat-loading::before,
#chatMessages.dg-chat-cache-pending::before {
  content:"Загрузка сообщений…";
  position:absolute;
  inset:12px;
  z-index:2;
  pointer-events:none;
  opacity:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-text-muted, #8b8b94);
  font-size:14px;
  background:none;
  border-radius:16px;
}

#messagesPageRoot #threadsList:empty::after,
#messagesModal.show #threadsList:empty::after {
  content:"Загрузка диалогов…";
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:var(--c-text-muted, #8b8b94);
  font-size:14px;
}

.dg-messages-load-error {
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  color:var(--c-text-muted, #8b8b94);
  text-align:center;
}

#chatMessages.dg-chat-ready > * {
  animation:dgChatContentReveal var(--dg-motion-fast) var(--dg-motion-ease-out) both;
}

/* Прогретая история уже готова к показу и не должна выглядеть как загрузка. */
#chatMessages.dg-chat-cache-ready.dg-chat-ready > * {
  animation:none;
}

@keyframes dgChatContentReveal {
  from { opacity:0; }
  to { opacity:1; }
}

body.dg-theme-dark #chatMessages.dg-chat-loading::before,
body.dg-theme-dark #chatMessages.dg-chat-cache-pending::before,
html.dg-theme-dark body #chatMessages.dg-chat-loading::before,
html.dg-theme-dark body #chatMessages.dg-chat-cache-pending::before {
  --dg-chat-skeleton-peer:rgba(255,255,255,.08);
  --dg-chat-skeleton-own:rgba(139,92,246,.22);
}

.thread-row.dg-thread-fade-in {
  opacity:0;
  transition:opacity var(--dg-motion-fast) var(--dg-motion-ease-out);
}

.thread-row.dg-thread-fade-in.dg-thread-fade-in--ready {
  opacity:1;
}

@media (min-width: 641px) {
  #chatMessages.dg-chat-ready > * {
    animation:none !important;
  }
  #threadsList .thread-row.dg-thread-fade-in {
    opacity:1;
    transition:none;
  }
}

.thread-row {
  will-change:auto;
}

@media (prefers-reduced-motion:reduce) {
  #chatMessages.dg-chat-loading::before,
  #chatMessages.dg-chat-cache-pending::before,
  #chatMessages.dg-chat-ready > * {
    animation:none;
  }
}

/* Image reveal is opacity-only; the wrapper reserves final geometry. */
.dg-img {
  filter:none;
  transform:none;
  transition:opacity var(--dg-motion-reveal) var(--dg-motion-ease-out);
  will-change:auto;
}

.dg-img.dg-img--pending {
  opacity:0;
  filter:none;
  transform:none;
}

.dg-img.dg-img--active {
  will-change:opacity;
}

/* Desktop profile composition from the approved mockup. */
@media (min-width:901px) {
  #profileModal .profile-body {
    position:relative;
  }

  #profileModal .profile-header {
    min-height:112px;
    padding-right:min(430px, 43vw);
    margin-bottom:16px;
    padding-bottom:16px;
  }

  #profileModal .profile-title {
    display:flex;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
  }

  #profileModal .profile-title .dg-profile-promo-slot {
    display:flex;
    flex:0 1 auto;
    min-width:0;
    margin-left:14px;
    transform:translateY(6px);
  }

  #profileModal .profile-title .dg-profile-promo {
    --dg-profile-promo-control-size:24px;
    gap:5px;
    font-size:11px;
  }

  #profileModal .profile-title .dg-promo-code {
    max-width:120px;
    padding:4px 8px;
  }

  #profileModal .profile-actions {
    position:absolute;
    z-index:20;
    top:12px;
    right:12px;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:18px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal .dg-profile-premium-line,
  #profileModal .dg-profile-premium-left,
  #profileModal .dg-profile-actions-mobile,
  #profileModal .dg-profile-actions-left,
  #profileModal .dg-profile-actions-right,
  #profileModal .profile-actions-own,
  #profileModal .subscription-status,
  #profileModal .subscription-status .dg-premium-status-row {
    display:flex !important;
    flex:0 0 auto !important;
    align-items:flex-start !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    gap:18px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal :is(
    .dg-profile-premium-line,
    .dg-profile-premium-left,
    .dg-profile-actions-mobile,
    .dg-profile-actions-left,
    .dg-profile-actions-right,
    .profile-actions-own,
    .subscription-status,
    .subscription-status .dg-premium-status-row
  )::before,
  #profileModal :is(
    .dg-profile-premium-line,
    .dg-profile-premium-left,
    .dg-profile-actions-mobile,
    .dg-profile-actions-left,
    .dg-profile-actions-right,
    .profile-actions-own,
    .subscription-status,
    .subscription-status .dg-premium-status-row
  )::after {
    content:none !important;
    display:none !important;
  }

  #profileModal .dg-profile-premium-right {
    display:none !important;
  }

  #profileModal .subscription-status,
  #profileModal .subscription-status .dg-premium-status-row {
    display:flex !important;
    width:56px !important;
    min-width:56px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  #profileModal .subscription-status #subscribeBtn,
  #profileModal .subscription-status .dg-premium-status-pill,
  #profileModal .subscription-status .dg-premium-public-card,
  #profileModal .dg-profile-action-card,
  #profileModal .dg-profile-settings-menu-btn {
    display:flex !important;
    flex:0 0 56px !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--c-text, #fff);
    font-family:inherit;
    text-align:center;
  }

  #profileModal .subscription-status #subscribeBtn > svg,
  #profileModal .subscription-status .dg-premium-status-pill > svg,
  #profileModal .subscription-status .dg-premium-public-card > svg,
  #profileModal .dg-profile-action-card > svg.lucide,
  #profileModal .dg-profile-settings-menu-btn > svg.lucide {
    box-sizing:border-box;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    flex:0 0 46px;
    padding:11px !important;
    border:1px solid rgba(148,163,184,.34) !important;
    border-radius:12px !important;
    background:rgba(24,25,31,.86) !important;
    color:#fff !important;
    box-shadow:none !important;
  }

  #profileModal .subscription-status #subscribeBtn > svg {
    border:2px solid #8b5cf6 !important;
    background:transparent !important;
    color:#8b5cf6 !important;
  }

  #profileModal .subscription-status .dg-premium-status-pill > svg,
  #profileModal .subscription-status .dg-premium-public-card > svg {
    border-color:#8b5cf6 !important;
    background:#8b5cf6 !important;
    color:#fff !important;
  }

  #profileModal .subscription-status #subscribeBtn > span,
  #profileModal .subscription-status .dg-premium-card-label,
  #profileModal .subscription-status .dg-premium-public-card > span,
  #profileModal .dg-profile-action-card > span,
  #profileModal .dg-profile-settings-menu-btn > span {
    display:block !important;
    width:max-content;
    max-width:80px;
    min-height:11px;
    overflow:visible;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:11px !important;
    font-weight:500 !important;
    line-height:12px !important;
    text-overflow:clip;
    white-space:nowrap;
  }

  #profileModal .subscription-status :is(
    .dg-premium-date,
    .dg-premium-expiring-wrap,
    .dg-premium-expiring-tooltip
  ) {
    display:none !important;
  }

  #profileModal > * .dg-profile-socials-shell {
    position:relative;
    display:flex;
    align-items:center;
    width:100% !important;
    min-height:46px;
    margin:8px 0 10px;
  }

  #profileModal .dg-profile-socials-card {
    display:none !important;
  }

  #profileModal .dg-profile-socials-card.dg-profile-socials-card--add {
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:56px !important;
    height:58px !important;
    padding:0 !important;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  #profileModal .dg-profile-socials-card--add .dg-profile-socials-icons {
    width:42px;
    height:42px;
    transform:scale(.82);
    transform-origin:center;
  }

  #profileModal .dg-profile-socials-card--add .dg-profile-socials-label {
    color:#fff;
    font-size:10px;
    line-height:1;
  }

  #profileModal .dg-profile-socials-links,
  #profileModal .dg-profile-socials-links[hidden] {
    position:static;
    display:flex !important;
    flex-flow:row nowrap;
    align-items:center;
    gap:14px;
    width:auto;
    min-width:0;
    margin:0 0 0 20px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border:1px solid rgba(139,92,246,.62);
    border-radius:12px;
    background:transparent;
    color:#fff;
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn > span:last-child {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn :is(svg, .dg-profile-social-link-brand) {
    width:22px;
    height:22px;
    flex:0 0 22px;
  }

  #profileModal .dg-profile-social-link-brand--boosty {
    background:#f15f2c;
    -webkit-mask:url('/images/social/boosty.svg') center / contain no-repeat;
    mask:url('/images/social/boosty.svg') center / contain no-repeat;
  }

  #profileModal .dg-profile-social-link-brand--telegram {
    background:#229ed9;
    -webkit-mask:url('/images/social/telegram.svg') center / contain no-repeat;
    mask:url('/images/social/telegram.svg') center / contain no-repeat;
  }

  #profileModal .dg-profile-social-link-brand--vk {
    background:#0077ff;
    -webkit-mask:url('/images/social/vk.svg') center / contain no-repeat;
    mask:url('/images/social/vk.svg') center / contain no-repeat;
  }

  #profileModal .dg-profile-social-link-brand--avito {
    display:grid;
    grid-template-columns:repeat(2, 7px);
    place-content:center;
    gap:2px;
  }

  #profileModal .dg-profile-social-link-brand--avito i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ef4444;
  }

  #profileModal .dg-profile-social-link-brand--avito i:nth-child(2) { background:#22c55e; }
  #profileModal .dg-profile-social-link-brand--avito i:nth-child(3) { background:#8b5cf6; }
  #profileModal .dg-profile-social-link-brand--avito i:nth-child(4) { background:#facc15; }

  #profileModal .dg-profile-stories-row {
    margin-top:0;
  }
}

@media (min-width:901px) {
  body #profileModal #editProfileBtn,
  body #profileModal #btnAuthorReviews,
  body #profileModal:not([data-own-profile="true"]) #followBtn,
  body #profileModal:not([data-own-profile="true"]) #messageBtn,
  body #profileModal #editProfileBtn:hover,
  body #profileModal #btnAuthorReviews:hover,
  body #profileModal:not([data-own-profile="true"]) #followBtn:hover,
  body #profileModal:not([data-own-profile="true"]) #messageBtn:hover,
  body #profileModal #editProfileBtn:focus-visible,
  body #profileModal #btnAuthorReviews:focus-visible,
  body #profileModal:not([data-own-profile="true"]) #followBtn:focus-visible,
  body #profileModal:not([data-own-profile="true"]) #messageBtn:focus-visible,
  body.dg-theme-dark #profileModal #editProfileBtn,
  body.dg-theme-dark #profileModal #btnAuthorReviews,
  body.dg-theme-dark #profileModal:not([data-own-profile="true"]) #followBtn,
  body.dg-theme-dark #profileModal:not([data-own-profile="true"]) #messageBtn,
  html.dg-theme-dark body #profileModal #editProfileBtn,
  html.dg-theme-dark body #profileModal #btnAuthorReviews,
  html.dg-theme-dark body #profileModal:not([data-own-profile="true"]) #followBtn,
  html.dg-theme-dark body #profileModal:not([data-own-profile="true"]) #messageBtn {
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body #profileModal #editProfileBtn::before,
  body #profileModal #editProfileBtn::after,
  body #profileModal #btnAuthorReviews::before,
  body #profileModal #btnAuthorReviews::after,
  body #profileModal:not([data-own-profile="true"]) #followBtn::before,
  body #profileModal:not([data-own-profile="true"]) #followBtn::after,
  body #profileModal:not([data-own-profile="true"]) #messageBtn::before,
  body #profileModal:not([data-own-profile="true"]) #messageBtn::after {
    content:none !important;
    display:none !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status #subscribeBtn > svg,
  body:not(.dg-theme-dark) #profileModal .dg-profile-action-card > svg.lucide,
  body:not(.dg-theme-dark) #profileModal .dg-profile-settings-menu-btn > svg.lucide {
    color:#111 !important;
    background:rgba(255,255,255,.90) !important;
    border-color:rgba(72,65,82,.24) !important;
    box-shadow:0 2px 8px rgba(65,48,82,.08) !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status #subscribeBtn > svg {
    color:#7c3aed !important;
    border-color:#8b5cf6 !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status :is(
    #subscribeBtn,
    .dg-premium-status-pill,
    .dg-premium-public-card
  ) > span,
  body:not(.dg-theme-dark) #profileModal .dg-profile-action-card > span,
  body:not(.dg-theme-dark) #profileModal .dg-profile-settings-menu-btn > span {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-links .dg-profile-social-btn {
    background:rgba(255,255,255,.82);
    color:#111;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-card--add .dg-profile-socials-label {
    color:#000;
  }
}

@media (min-width:1400px) {
  body.dg-page-profile #profileModal.dg-profile-page-view .profile-header,
  body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-socials-shell,
  body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-stories-row {
    box-sizing:border-box;
    width:100%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
  }

  body.dg-page-profile #profileModal.dg-profile-page-view .profile-actions {
    right:max(12px, calc((100% - 1300px) / 2));
  }

  body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
    padding-left:calc(var(--dg-profile-page-gutter-left) + max(0px, calc((100% - 1300px) / 2))) !important;
    padding-right:calc(var(--dg-profile-page-gutter-right) + max(0px, calc((100% - 1300px) / 2))) !important;
  }
}

/* Final mobile profile actions: compact icon cards from the approved mockup. */
@media (max-width:640px) {
  #profileModal .profile-actions {
    --dg-profile-action-gap:clamp(14px, 6vw, 44px);
    display:flex !important;
    flex-flow:row nowrap;
    align-items:start !important;
    justify-content:flex-start;
    gap:var(--dg-profile-action-gap) !important;
    width:100%;
    margin-top:10px;
  }

  #profileModal .dg-profile-premium-line,
  #profileModal .dg-profile-premium-line--own,
  #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--active,
  #profileModal .dg-profile-premium-line--own.dg-profile-premium-line--inactive {
    display:block !important;
    flex:0 0 56px;
    width:56px !important;
    max-width:56px !important;
    min-width:56px !important;
    height:66px;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  #profileModal .dg-profile-premium-left {
    display:block !important;
    min-width:0;
    width:100% !important;
    height:100%;
  }

  #profileModal .dg-profile-actions-mobile {
    display:flex !important;
    flex:0 0 auto;
    flex-flow:row nowrap;
    align-items:start;
    gap:var(--dg-profile-action-gap) !important;
    width:auto !important;
    height:66px;
    margin:0 !important;
  }

  #profileModal .dg-profile-actions-left,
  #profileModal .dg-profile-actions-right,
  #profileModal .profile-actions-own {
    display:flex !important;
    flex:0 0 56px;
    align-items:flex-start;
    justify-content:center;
    width:56px;
    height:66px;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal .dg-profile-promo-slot,
  #profileModal .dg-profile-premium-right,
  #profileModal .dg-profile-settings-menu-btn {
    display:none !important;
  }

  #profileModal .subscription-status,
  #profileModal .subscription-status .dg-premium-status-row {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal .subscription-status #subscribeBtn,
  #profileModal .subscription-status .dg-premium-status-pill,
  #profileModal .subscription-status .dg-premium-public-card,
  #profileModal .dg-profile-action-card {
    width:56px !important;
    min-width:0 !important;
    max-width:100%;
    height:66px !important;
    min-height:66px !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    justify-self:center;
  }

  #profileModal .subscription-status #subscribeBtn,
  #profileModal .subscription-status .dg-premium-status-pill,
  #profileModal .subscription-status .dg-premium-public-card,
  #profileModal .dg-profile-action-card {
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:0 !important;
    background:transparent !important;
    color:var(--c-text, #fff) !important;
    -webkit-text-fill-color:currentColor !important;
    white-space:normal !important;
    text-align:center;
  }

  #profileModal .subscription-status #subscribeBtn,
  #profileModal .subscription-status .dg-premium-status-pill,
  #profileModal .subscription-status .dg-premium-public-card {
    color:#fff !important;
    font-size:10px !important;
  }

  #profileModal .subscription-status #subscribeBtn > svg,
  #profileModal .subscription-status .dg-premium-status-pill > svg,
  #profileModal .subscription-status .dg-premium-public-card > svg {
    width:44px;
    height:44px;
    padding:10px;
    box-sizing:border-box;
    border-radius:50%;
    color:#fff;
  }

  #profileModal .subscription-status #subscribeBtn > svg {
    border:2px solid #8b5cf6;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal .subscription-status .dg-premium-status-pill > svg,
  #profileModal .subscription-status .dg-premium-public-card > svg {
    border:1px solid rgba(196,181,253,.48);
    background:#8b5cf6 !important;
    box-shadow:0 5px 13px rgba(124,58,237,.24) !important;
  }

  #profileModal .subscription-status .dg-premium-card-label,
  #profileModal .subscription-status #subscribeBtn > span,
  #profileModal .subscription-status .dg-premium-public-card > span {
    display:block !important;
    font-size:10px;
    line-height:1;
  }

  #profileModal .dg-profile-action-card i,
  #profileModal .dg-profile-action-card svg.lucide {
    width:44px;
    height:44px;
    padding:11px;
    box-sizing:border-box;
    border:1px solid rgba(148,163,184,.28);
    border-radius:12px;
    color:#fff;
    background:rgba(24,25,31,.92) !important;
    box-shadow:none !important;
    flex:0 0 auto;
  }

  #profileModal .dg-profile-action-card span,
  #profileModal .dg-profile-socials-label {
    font-size:10px;
    line-height:1.05;
  }

  #profileModal .dg-profile-socials-shell {
    position:relative;
    flex:0 0 56px;
    width:64px !important;
    min-width:0 !important;
    max-width:100%;
    height:66px !important;
    min-height:66px !important;
    justify-self:center;
  }

  #profileModal .dg-profile-socials-card {
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:64px !important;
    min-width:0 !important;
    max-width:100%;
    height:66px !important;
    min-height:66px !important;
    padding:5px 4px 4px !important;
    box-sizing:border-box;
    border:1px solid rgba(139,92,246,.78);
    border-radius:13px !important;
    color:var(--c-text, #fff);
    background:transparent !important;
    box-shadow:none !important;
    font-family:inherit;
    cursor:pointer;
  }

  #profileModal .dg-profile-socials-icons {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
    height:24px;
  }

  #profileModal .dg-profile-socials-icons > svg.lucide {
    width:20px;
    height:20px;
    flex:0 0 20px;
    stroke-width:2.2;
  }

  #profileModal .dg-profile-socials-dots {
    grid-template-columns:repeat(2, 6px);
    gap:2px;
    flex:0 0 auto;
  }

  #profileModal .dg-profile-socials-dots i {
    width:6px;
    height:6px;
  }

  #profileModal .dg-profile-socials-dots i:nth-child(4) {
    background:#facc15;
  }

  #profileModal .dg-profile-socials-links {
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    bottom:auto;
    z-index:140;
    width:max-content;
    min-width:150px;
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border:1px solid rgba(139,92,246,.42);
    border-radius:12px;
    background:rgba(15,15,18,.97);
    box-shadow:0 12px 28px rgba(0,0,0,.34);
  }

  #profileModal .dg-profile-socials-links[hidden] {
    display:none !important;
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn {
    width:100% !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    border:0;
    border-radius:8px;
    color:#fff;
    background:transparent;
    text-decoration:none;
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn:is(:hover, :focus-visible) {
    background:rgba(139,92,246,.18);
  }

  #profileModal .dg-profile-socials-links .dg-profile-social-btn svg.lucide {
    width:17px;
    height:17px;
    flex:0 0 auto;
  }

  #profileModal .dg-profile-social-link-brand--boosty {
    width:17px;
    height:17px;
    flex:0 0 17px;
    background:#f15f2c;
    -webkit-mask:url('/images/social/boosty.svg') center / contain no-repeat;
    mask:url('/images/social/boosty.svg') center / contain no-repeat;
  }

  #profileModal .dg-profile-socials-dots {
    display:grid;
    grid-template-columns:repeat(2, 6px);
    gap:2px;
  }

  #profileModal .dg-profile-socials-dots i {
    width:6px;
    height:6px;
  }

  body.dg-theme-dark #profileModal #editProfileBtn,
  body.dg-theme-dark #profileModal #btnAuthorReviews,
  body.dg-theme-dark #profileModal #followBtn,
  body.dg-theme-dark #profileModal #messageBtn,
  html.dg-theme-dark body #profileModal #editProfileBtn,
  html.dg-theme-dark body #profileModal #btnAuthorReviews,
  html.dg-theme-dark body #profileModal #followBtn,
  html.dg-theme-dark body #profileModal #messageBtn,
  body.dg-theme-dark #profileModal .subscription-status .dg-premium-status-pill,
  html.dg-theme-dark body #profileModal .subscription-status .dg-premium-status-pill,
  body.dg-theme-dark #profileModal .subscription-status #subscribeBtn,
  html.dg-theme-dark body #profileModal .subscription-status #subscribeBtn,
  body.dg-theme-dark #profileModal .subscription-status .dg-premium-public-card,
  html.dg-theme-dark body #profileModal .subscription-status .dg-premium-public-card {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}
.dg-article-composer .dg-post-format-toolbar { display:flex; align-items:center; flex-wrap:nowrap; height:42px; padding:3px; }
.dg-article-composer .dg-post-format-toolbar[hidden] { display:none !important; }
@media (min-width:641px) {
  .dg-blog-feed-page > .dg-article-composer > .dg-post-format-toolbar {
    position:static;
    z-index:2;
    box-sizing:border-box;
    width:max-content;
    max-width:calc(100% - 28px);
    height:30px;
    margin:0;
    padding:1px 2px;
  }
  .dg-blog-feed-page > .dg-article-composer > .dg-post-format-toolbar .blog-article-tb-btn {
    flex:0 0 32px;
    width:32px;
    height:26px;
    padding:2px 4px;
  }
}
.dg-article-editor { overflow-x:hidden; overflow-wrap:anywhere; caret-color:var(--dg-blog-text); }
.dg-article-editor .dg-article-image { position:relative; display:block; clear:both; width:fit-content; max-width:100%; margin:10px 0; border-radius:12px; line-height:0; cursor:grab; user-select:none; }
.dg-article-editor .dg-article-image img { display:block; max-width:100%; max-height:260px; width:auto; height:auto; border-radius:12px; object-fit:contain; }
.dg-article-editor .dg-article-image button { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:#fff; background:rgba(20,15,24,.76); font-size:20px; line-height:1; cursor:pointer; }
.dg-article-editor .dg-article-image.is-selected { outline:2px solid var(--dg-blog-accent); outline-offset:3px; }
.dg-article-editor .dg-article-image.is-dragging { opacity:.32; }
.dg-article-drop-marker { position:fixed; z-index:calc(var(--dg-z-portal) + 1); display:block; height:4px; margin:0; border-radius:999px; background:var(--dg-blog-accent); box-shadow:0 0 0 3px rgba(184,117,255,.16); pointer-events:none; }
.dg-article-drop-marker[hidden] { display:none; }
.dg-article-drag-preview { position:fixed; z-index:var(--dg-z-portal); left:0; top:0; width:150px; max-height:120px; overflow:hidden; border-radius:10px; opacity:.88; pointer-events:none; transform:translate(-9999px,-9999px); box-shadow:0 12px 34px rgba(0,0,0,.3); }
.dg-article-drag-preview img { display:block; width:100%; max-height:120px; object-fit:cover; }
.dg-article-drag-preview button { display:none; }
.dg-article-publish-popover>input,.dg-article-publish-popover select { box-sizing:border-box; width:100%; min-height:40px; margin:0 0 8px; padding:8px 10px; border:1px solid var(--dg-blog-border); border-radius:9px; color:var(--dg-blog-text); background:var(--dg-blog-bg-soft); font:inherit; }
.dg-article-publish-popover>label:has(select) { display:block; }
.dg-article-publish-popover>label:has(select)>span { display:block; margin-bottom:5px; }
.dg-post-send { width:42px; height:42px; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,#b54cff,#7444ed); display:grid; place-items:center; cursor:pointer; }
.dg-post-send:disabled { opacity:.5; cursor:wait; }
.dg-post-composer-actions { display:flex; align-items:center; gap:4px; padding:0 0 10px 52px; }

/* Premium expiry notice sits on the crown icon instead of below it. */
#profileModal .subscription-status .dg-premium-status-pill,
.dg-profile-page-view .subscription-status .dg-premium-status-pill {
  position:relative;
}

#profileModal .subscription-status .dg-premium-expiring-wrap,
.dg-profile-page-view .subscription-status .dg-premium-expiring-wrap {
  position:absolute !important;
  top:-6px;
  left:18px;
  z-index:2;
  display:inline-flex !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
}

@media (min-width:641px) {
  #profileModal .subscription-status .dg-premium-expiring-wrap,
  .dg-profile-page-view .subscription-status .dg-premium-expiring-wrap {
    top:-2px;
    right:0;
    left:auto;
  }
}

@media (max-width:640px) {
  #profileModal .subscription-status .dg-premium-expiring-wrap,
  .dg-profile-page-view .subscription-status .dg-premium-expiring-wrap {
    top:-2px;
    right:0;
    left:auto;
  }
}
.dg-post-composer-actions button { border:0; background:transparent; color:var(--dg-blog-muted); min-height:38px; padding:7px 10px; border-radius:9px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.dg-post-composer-actions button:hover { background:rgba(149,77,242,.08); color:#8c42e9; }
.dg-post-composer-actions svg { width:18px; height:18px; }
.dg-post-format-toolbar { margin:0 0 10px 52px; padding:5px; border:1px solid var(--dg-blog-border); border-radius:10px; background:var(--dg-blog-bg-soft); overflow-x:auto; scrollbar-width:none; }
.dg-post-format-toolbar::-webkit-scrollbar { display:none; }
.dg-post-format-toolbar[hidden] { display:none !important; }
.dg-post-format-toolbar .blog-article-tb-btn { flex:0 0 36px; width:36px; height:36px; color:var(--dg-blog-muted); background:transparent; border-color:transparent; font-size:16px; line-height:1; }
.dg-post-format-toolbar .blog-article-tb-btn svg { width:16px; height:16px; }
.dg-post-format-toolbar .blog-article-tb-btn b,
.dg-post-format-toolbar .blog-article-tb-btn i,
.dg-post-format-toolbar .blog-article-tb-btn u { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:16px; line-height:16px; }
.dg-post-format-toolbar .blog-article-tb-btn:hover { color:var(--dg-blog-accent); background:var(--dg-blog-bg-hover); }
.dg-post-format-toolbar .blog-article-tb-btn.active,
.dg-post-format-toolbar .blog-article-tb-btn[data-active="true"] { color:#fff; background:var(--c-primary, #8b5cf6); border-color:var(--c-primary, #8b5cf6); }
.dg-post-format-toolbar .blog-article-tb-btn.active:hover,
.dg-post-format-toolbar .blog-article-tb-btn[data-active="true"]:hover { color:#fff; background:var(--c-primary-600, #7c3aed); border-color:var(--c-primary-600, #7c3aed); }
.dg-publication-options { display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 0 0 52px; color:var(--dg-blog-muted); font-size:13px; }
.dg-publication-options label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.dg-publication-options input { accent-color:#914cf0; }
.dg-publication-options--article { padding:0 0 16px; }
@media (min-width:641px) {
  .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main {
    grid-template-columns:minmax(0,1fr) 44px;
  }
  .dg-blog-feed-page > .dg-article-composer > .dg-article-publish-popover {
    top:var(--dg-article-publish-top,66px);
    bottom:auto;
  }
  .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main > img {
    display:none;
  }
  .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions {
    padding-left:0;
  }
  .dg-blog-feed-page > .dg-post-composer > .dg-post-edit-state {
    margin-left:0;
  }
  .dg-blog-feed-page > .dg-post-composer > .dg-post-format-toolbar {
    margin-left:0;
  }
  .dg-blog-feed-page > .dg-post-composer > .dg-publication-options {
    padding-left:0;
  }
  .dg-blog-feed-page > .dg-post-composer:not(.dg-article-composer) > .dg-post-composer-actions [data-post-format],
  .dg-blog-feed-page > .dg-post-composer:not(.dg-article-composer) > .dg-post-format-toolbar {
    display:none !important;
  }
}
.dg-post-publish-popover { position:absolute; z-index:20; right:14px; bottom:66px; width:min(360px,calc(100% - 28px)); padding:16px; border:1px solid var(--dg-blog-border); border-radius:14px; background:var(--dg-blog-bg); color:var(--dg-blog-text); box-shadow:0 18px 50px rgba(25,14,36,.25); }
.dg-post-composer:has(> .dg-post-publish-popover:not([hidden])) {
  z-index:var(--dg-z-dropdown);
}
.dg-post-composer>.dg-post-publish-popover:not([hidden]) {
  z-index:1;
}
.dg-post-publish-popover[hidden] { display:none !important; }
.dg-post-publish-popover>strong { display:block; margin-bottom:12px; }
.dg-post-publish-popover>label { display:flex; align-items:center; gap:8px; margin:9px 0; color:var(--dg-blog-muted); font-size:13px; cursor:pointer; }
.dg-post-publish-popover input { accent-color:#914cf0; }
.dg-post-publish-popover>div { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.dg-post-publish-popover button { border:0; border-radius:9px; padding:9px 13px; cursor:pointer; color:var(--dg-blog-text); background:var(--dg-blog-bg-soft); }
.dg-post-publish-popover:not(.dg-article-publish-popover)>div,
.dg-article-composer>.dg-article-publish-popover>div { justify-content:space-between; }
.dg-post-publish-popover:not(.dg-article-publish-popover)>div>button,
.dg-article-composer>.dg-article-publish-popover>div>button { padding-right:8px; padding-left:8px; }
.dg-post-publish-popover:not(.dg-article-publish-popover)>div>[data-publish-delete],
.dg-article-composer>.dg-article-publish-popover>div>[data-publish-delete] { display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; padding:0; color:var(--dg-delete-action-color, #dc2626); }
.dg-post-publish-popover [data-publish-delete] svg { width:18px; height:18px; }
.dg-post-publish-popover [data-publish-delete]:is(:hover, :focus-visible, :active) { background:var(--dg-delete-action-hover-bg, rgba(220,38,38,.09)); }
.dg-post-publish-popover [data-publish-confirm] { color:#fff; background:linear-gradient(135deg,#b54cff,#7444ed); font-weight:700; }
.dg-story-publication-cta { position:absolute; z-index:8; left:50%; bottom:96px; transform:translateX(-50%); width:min(88%,420px); padding:14px 18px; border:1px solid rgba(255,255,255,.35); border-radius:16px; color:#fff; background:rgba(22,16,30,.78); backdrop-filter:blur(14px); text-align:left; cursor:pointer; box-shadow:0 10px 35px rgba(0,0,0,.28); }
.dg-story-publication-cta small,.dg-story-publication-cta strong,.dg-story-publication-cta span { display:block; }
.dg-story-publication-cta small { color:#c98cff; font-weight:700; text-transform:uppercase; }
.dg-story-publication-cta strong { margin:4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg-story-publication-cta span { color:#e1c4ff; font-size:13px; }
.dg-post-limit { margin-left:auto; font-size:12px; color:var(--dg-blog-muted); }
.dg-article-draft-status { align-self:center; margin-left:6px; font-size:12px; color:var(--c-error, #ef4444); }
.dg-article-draft-status[hidden] { display:none !important; }
.dg-post-previews { display:flex; gap:8px; overflow-x:auto; padding:10px 0 4px 52px; }
.dg-post-previews>div { position:relative; flex:0 0 84px; height:84px; }
.dg-post-previews img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.dg-post-previews button { position:absolute; right:4px; top:4px; width:24px; height:24px; border:0; border-radius:50%; color:#fff; background:rgba(18,12,24,.75); cursor:pointer; }
.dg-blog-type-tabs { position:static; z-index:4; display:flex; gap:4px; margin:0 0 14px; padding:5px; border:1px solid var(--dg-blog-border); border-radius:12px; background:color-mix(in srgb,var(--dg-blog-bg-soft) 94%,transparent); backdrop-filter:blur(12px); }
.dg-blog-type-tabs button { flex:1; min-height:40px; border:0; border-radius:9px; background:transparent; color:var(--dg-blog-muted); font-weight:600; cursor:pointer; }
.dg-blog-type-tabs button.active { color:var(--dg-blog-accent); background:var(--dg-blog-bg); box-shadow:0 2px 9px rgba(80,39,110,.12); }
.dg-blog-section-filter { display:flex; justify-content:flex-end; gap:8px; margin:-5px 0 12px; }
.dg-blog-section-filter[hidden] { display:none !important; }
.dg-blog-section-filter>select,.dg-blog-section-filter>button,.dg-blog-section-edit-wrap>[data-edit-blog-section] { min-height:38px; border:1px solid var(--dg-blog-border); border-radius:9px; padding:7px 10px; color:var(--dg-blog-text) !important; -webkit-text-fill-color:var(--dg-blog-text); background:var(--dg-blog-bg) !important; }
.dg-blog-section-filter select option { color:var(--dg-blog-text); background:var(--dg-blog-bg); }
.dg-blog-section-filter>button,.dg-blog-section-edit-wrap>[data-edit-blog-section] { cursor:pointer; color:var(--dg-blog-accent) !important; -webkit-text-fill-color:var(--dg-blog-accent); font-weight:600; }
.dg-blog-section-edit-wrap { position:relative; }
.dg-blog-section-edit-wrap[hidden] { display:none !important; }
.dg-blog-section-edit-wrap>[data-edit-blog-section] { display:inline-flex; align-items:center; justify-content:center; width:38px; padding:0; }
.dg-blog-section-edit-wrap>[data-edit-blog-section] svg { width:16px; height:16px; }
.dg-blog-section-edit-menu { top:calc(100% + 5px); right:0; min-width:178px; z-index:var(--dg-z-dropdown); }
.dg-blog-records-count { margin:2px 2px 12px; color:var(--dg-blog-muted); font-size:15px; font-weight:700; letter-spacing:.025em; }
.dg-blog-feed { display:grid; gap:14px; }
.dg-blog-feed-entry { scroll-margin-top:112px; }
.dg-blog-feed-entry[hidden],.dg-blog-filter-empty[hidden] { display:none !important; }
.dg-post-deleted { padding:22px 18px; border:1px solid var(--dg-blog-border); border-radius:16px; background:var(--dg-blog-bg); color:var(--dg-blog-muted); box-shadow:var(--dg-blog-shadow); }
.dg-post-deleted button { padding:0; border:0; border-radius:3px; background:transparent; color:var(--dg-blog-accent); font:inherit; font-weight:650; text-decoration:underline; cursor:pointer; }
.dg-post-deleted button:hover { color:var(--dg-blog-text); }
.dg-post-deleted button:focus-visible { outline:2px solid var(--dg-blog-accent); outline-offset:3px; }
.dg-post-deleted button:active { color:var(--dg-blog-text); }
.dg-post-deleted button:disabled { opacity:.55; cursor:default; }
.dg-blog-feed-entry--enter { animation:dgBlogEntryIn .2s ease-out both; }
@keyframes dgBlogEntryIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.dg-publication-focus { animation:dgPublicationFocus 1.15s ease-out 2; }
@keyframes dgPublicationFocus { 0%,100% { box-shadow:var(--dg-blog-shadow); } 45% { border-color:var(--dg-blog-accent); box-shadow:0 0 0 5px rgba(149,77,242,.2),var(--dg-blog-shadow); } }
.dg-post-card { overflow:hidden; }
.dg-post-card.dg-publication-menu-open,.dg-blog-article-card.dg-publication-menu-open { position:relative; z-index:25; overflow:visible; }
.dg-blog-feed-entry:has(.dg-publication-menu-open) { position:relative; z-index:25; }
.dg-post-card>header { position:relative; display:flex; align-items:center; gap:10px; padding:14px 14px 10px; }
.dg-post-card>header>div { display:flex; flex-direction:column; min-width:0; }
.dg-post-card>header strong { color:var(--dg-blog-text); }
.dg-post-card>header time { color:var(--dg-blog-muted); font-size:12px; margin-top:2px; }
.dg-publication-pinned { display:inline-flex; align-items:center; gap:5px; margin:0 14px 8px; color:var(--dg-blog-muted); font-size:12px; font-weight:650; }
.dg-publication-pinned svg { width:14px; height:14px; }
.dg-blog-article-card .dg-publication-pinned { margin:2px 0 7px; }
.dg-post-menu { margin-left:auto; align-self:flex-start; min-width:40px; min-height:40px; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
.dg-post-menu:hover { background:rgba(128,92,166,.08); }
.dg-post-report { display:inline-grid; place-items:center; margin-left:auto; align-self:flex-start; width:40px; height:40px; border:0; border-radius:10px; color:var(--dg-blog-muted); background:transparent; cursor:pointer; }
.dg-post-report:hover { color:var(--dg-blog-accent); background:rgba(128,92,166,.08); }
.dg-post-report svg { width:19px; height:19px; }
.dg-post-report + .dg-post-menu { margin-left:2px; }
.dg-post-menu-popover { position:absolute; right:12px; top:50px; z-index:3; min-width:190px; padding:5px; border:1px solid rgba(15,23,42,.08); border-radius:11px; background:#fff; box-shadow:0 12px 30px rgba(35,20,45,.2); }
.dg-post-menu-popover[hidden] { display:none !important; }
.dg-post-menu-popover:not([hidden]) { display:block; }
.dg-post-menu-popover button { display:flex; align-items:center; gap:9px; width:100%; min-height:38px; padding:8px 10px; text-align:left; border:0; border-radius:7px; background:transparent; color:var(--c-text); cursor:pointer; }
.dg-post-menu-popover button svg,.msg-menu-item svg { flex:0 0 auto; width:16px; height:16px; }
.dg-post-menu-popover button:hover { background:rgba(128,92,166,.08); }
.dg-post-menu-popover button[data-post-delete],.dg-post-menu-popover button[data-article-card-delete] { color:var(--c-error); }
body.dg-theme-dark .dg-post-menu-popover {
    border-color:rgba(255,255,255,.12);
    background:#15151a;
}
body.dg-theme-dark .dg-post-menu-popover button { color:var(--c-text); -webkit-text-fill-color:var(--c-text); }
body.dg-theme-dark .dg-post-menu-popover button[data-post-delete],body.dg-theme-dark .dg-post-menu-popover button[data-article-card-delete] { color:var(--c-error); -webkit-text-fill-color:var(--c-error); }
body.dg-theme-dark .dg-post-menu-popover button:hover { background:rgba(255,255,255,.08); }
.dg-post-text { padding:4px 14px 14px; color:var(--dg-blog-text); line-height:1.55; overflow-wrap:anywhere; }
.dg-post-text.is-collapsed { box-sizing:border-box; display:block; max-height:var(--dg-post-collapsed-height,calc(3.1em + 4px)); padding-bottom:0; overflow:hidden; }
.dg-post-text.is-collapsed > :is(ol,ul) { margin-top:0; margin-bottom:0; }
.dg-post-text-toggle { display:block; margin:0 14px 10px; padding:0; border:0; background:transparent; color:var(--dg-blog-accent); font:inherit; font-weight:600; line-height:1.35; text-align:left; cursor:pointer; }
.dg-post-text-toggle[hidden] { display:none !important; }
.dg-post-text-toggle:hover { text-decoration:underline; }
.dg-post-media { position:relative; width:100%; height:var(--dg-post-media-height,420px); overflow:hidden; background:#08070a; touch-action:pan-y; }
.dg-post-media-track { display:flex; width:100%; height:100%; cursor:grab; transition:transform .28s ease; will-change:transform; }
.dg-post-media-track.is-dragging { cursor:grabbing; transition:none; }
.dg-post-media-item { position:relative; display:grid; flex:0 0 100%; place-items:center; width:100%; height:100%; min-width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; overflow:hidden; user-select:none; }
.dg-post-media-item img { display:block; width:auto; height:auto; max-width:var(--dg-post-media-image-width,85%); max-height:calc(100% - 32px); object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.dg-post-media-counter { position:absolute; z-index:2; top:12px; left:12px; padding:5px 9px; border-radius:999px; color:#fff; background:rgba(18,10,24,.68); font-size:12px; font-weight:700; line-height:1; pointer-events:none; }
.dg-post-media-nav { position:absolute; z-index:2; top:50%; display:grid; place-items:center; width:42px; height:58px; padding:0 0 4px; border:0; border-radius:12px; color:#fff; background:rgba(18,10,24,.62); font-size:38px; line-height:1; opacity:0; cursor:pointer; transform:translateY(-50%); transition:opacity .16s ease,background .16s ease; }
.dg-post-media-nav--prev { left:12px; }
.dg-post-media-nav--next { right:12px; }
.dg-post-media:hover .dg-post-media-nav,.dg-post-media:focus-within .dg-post-media-nav { opacity:1; }
.dg-post-media-nav:hover { background:rgba(18,10,24,.84); }
.dg-post-media-item.is-media-unavailable::before { content:'Изображение недоступно'; position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding:16px; color:var(--dg-blog-muted); background:var(--dg-blog-bg-soft); font-size:13px; text-align:center; }
.dg-post-video-shell { position:relative; display:grid; place-items:center; height:clamp(320px, 72vh, 620px); overflow:hidden; background:#0d0b0f; }
.dg-post-video-poster { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:contain; background:#100e12; pointer-events:none; transition:opacity .18s ease; }
.dg-post-video-shell.is-playing>.dg-post-video-poster { opacity:0; }
.dg-post-video { display:block; width:100%; height:100%; max-height:620px; object-fit:contain; background:#100e12; cursor:pointer; }
.dg-post-video-controls { position:absolute; z-index:2; left:12px; right:12px; bottom:10px; display:flex; align-items:center; gap:8px; min-height:46px; padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#f7f2fb; background:rgba(25,19,31,.88); box-shadow:0 8px 24px rgba(0,0,0,.28); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; transform:translateY(8px); transition:opacity .18s ease,transform .18s ease; pointer-events:none; }
.dg-post-video-shell:hover>.dg-post-video-controls,.dg-post-video-shell.show-controls>.dg-post-video-controls,.dg-post-video-shell:not(.is-playing)>.dg-post-video-controls,.dg-post-video-shell:has(.dg-post-video-controls :focus-visible)>.dg-post-video-controls,.dg-custom-video-player.show-controls>.dg-custom-video-controls,.dg-custom-video-player:not(.is-playing)>.dg-custom-video-controls,.dg-custom-video-player:has(.dg-custom-video-controls :focus-visible)>.dg-custom-video-controls { opacity:1; transform:translateY(0); pointer-events:auto; }
.dg-post-video-controls button { flex:none; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; color:#f7f2fb; background:transparent; cursor:pointer; }
.dg-post-video-controls button:hover,.dg-post-video-controls button:focus-visible { color:#fff; background:rgba(184,117,255,.22); outline:none; }
.dg-custom-video-player { position:relative; }
.dg-custom-video-player > .dg-custom-video-controls { z-index:12; }
.dg-custom-video-controls [hidden] { display:none !important; }
.dg-custom-video-controls--compact { left:8px; right:8px; bottom:8px; gap:5px; min-height:42px; padding:5px 7px; border-radius:12px; }
.dg-custom-video-controls--compact .dg-post-video-mute,.dg-custom-video-controls--compact .dg-post-video-volume { display:none !important; }
.dg-custom-video-player--surface-scrub { touch-action:pan-y; }
.dg-custom-video-player--surface-scrub > video { cursor:ew-resize; }
.dg-video-frame-step { position:absolute; z-index:13; top:50%; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.08); border-radius:50%; color:#fff; background:rgba(45,45,48,.90); box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:pointer; transform:translateY(-50%); }
.dg-video-frame-step:is(:hover,:focus-visible) { color:#fff; background:rgba(60,60,64,.95); outline:none; }
.dg-video-frame-step:is(:active,:focus-visible) { border-color:var(--c-primary,#8B5CF6); box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),.22),0 2px 8px rgba(0,0,0,.28); }
.dg-video-frame-step--prev { left:8px; }
.dg-video-frame-step--next { right:8px; }
.dg-video-frame-step svg { width:24px; height:24px; }
.dg-story-viewer-media-wrap.dg-custom-video-player .dg-custom-video-controls { bottom:max(12px,env(safe-area-inset-bottom,0px)); }
.dg-short-detail-video-host.dg-custom-video-player { overflow:hidden; }
.dg-short-detail-video-host.dg-custom-video-player::after { content:''; position:absolute; z-index:10; left:0; right:0; bottom:0; height:92px; border-radius:0 0 var(--r-12) var(--r-12); background:linear-gradient(to top,rgba(8,5,12,.72),rgba(8,5,12,.28) 58%,transparent); pointer-events:none; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage).dg-custom-video-player .dg-custom-video-controls { --dg-video-accent:#b875ff; z-index:12; left:10px; bottom:var(--dg-short-controls-bottom,max(8px,env(safe-area-inset-bottom,0px))); display:grid; grid-template-columns:34px auto auto minmax(0,1fr) 34px 34px; grid-template-areas:'progress progress progress progress progress progress' 'play current duration . mute fullscreen'; gap:5px; min-width:0; min-height:var(--dg-short-controls-height,48px); padding:0; border:0; border-radius:0; box-sizing:border-box; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.dg-short-detail-video-host.dg-custom-video-player .dg-custom-video-controls { right:10px; }
.dg-hero-shorts-viewer__stage.dg-custom-video-player .dg-custom-video-controls { right:10px; grid-template-columns:34px auto auto minmax(0,1fr) 34px; grid-template-areas:'progress progress progress progress progress' 'play current duration . mute'; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-play] { grid-area:play; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-current] { grid-area:current; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-progress] { grid-area:progress; width:100%; min-width:0; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-duration] { grid-area:duration; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-duration]::before { content:'/'; margin-right:5px; opacity:.65; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls [data-video-mute] { grid-area:mute; }
#heroShortsViewerWrap .dg-custom-video-controls [data-video-mute] { display:grid !important; }
.dg-short-detail-video-host .dg-custom-video-controls [data-video-fullscreen] { grid-area:fullscreen; }
/* Desktop DollShow: use the same centered 9:16 frame as Stories. */
.dg-hero-shorts-viewer__nav {
  display:none;
}
@media (min-width:641px) {
  #heroShortsViewerWrap .dg-hero-shorts-viewer__body {
    display:block !important;
    scroll-behavior:auto;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__top {
    top:0;
    bottom:0;
    height:auto;
    padding:0;
    z-index:13;
    pointer-events:none;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__top [data-action="close"] {
    pointer-events:auto;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__stage {
    overflow:visible;
    width:auto !important;
    height:min(91vh,960px,calc(100vh - 32px)) !important;
    max-width:calc(100vw - 212px) !important;
    aspect-ratio:9 / 16;
    flex:0 0 auto;
    border-radius:16px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__video,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__gradient {
    border-radius:16px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__slide.is-active .dg-hero-shorts-viewer__top [data-action="close"] {
    position:fixed;
    top:14px;
    left:14px;
    right:auto;
    z-index:20;
    margin:0;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__slide:not(.is-active) .dg-hero-shorts-viewer__top [data-action="close"] {
    visibility:hidden;
    pointer-events:none;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail {
    right:-64px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .dg-post-action-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .like-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .share-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .more-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .dg-short-follow-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    min-width:53px;
    min-height:53px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .like-btn,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .dg-post-comments-btn {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail :is(.dg-post-action-btn,.like-btn,.share-btn,.more-btn,.dg-post-comments-btn) > :is(svg,.lucide) {
    width:29px;
    height:29px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__rail .dg-hero-shorts-follow-btn {
    min-width:53px !important;
    min-height:53px !important;
  }
  #heroShortsViewerWrap .dg-hero-shorts-follow-btn .dg-short-follow-avatar {
    width:46px;
    height:46px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-follow-btn .dg-short-follow-badge {
    width:22px;
    height:22px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-follow-btn .dg-short-follow-badge :is(svg,.lucide) {
    width:13px !important;
    height:13px !important;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__stage.dg-custom-video-player .dg-custom-video-controls {
    right:10px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav {
    position:fixed;
    top:50%;
    right:18px;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:12px;
    transform:translateY(-50%);
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav button {
    display:inline-flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    background:rgba(45,45,48,.90);
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
    cursor:pointer;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav button:hover,
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav button:focus-visible {
    background:rgba(60,60,64,.95);
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav button:active {
    border-color:var(--c-primary,#8B5CF6);
    box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),.22),0 2px 8px rgba(0,0,0,.28);
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__nav button:focus-visible {
    border-color:var(--c-primary,#8B5CF6);
    outline:none;
    box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),.22),0 2px 8px rgba(0,0,0,.28);
  }
}
@media (min-width:901px) {
  #heroShortsViewerWrap.dg-hero-shorts-viewer {
    --dg-short-desktop-h:min(91vh,960px,calc(100vh - 32px));
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__body {
    display:block !important;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__stage {
    width:auto !important;
    height:var(--dg-short-desktop-h) !important;
    max-width:calc(100vw - 112px) !important;
    max-height:96vh !important;
    aspect-ratio:9 / 16;
    flex:0 0 auto;
    border-radius:16px;
  }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__video {
    object-fit:contain !important;
    object-position:center center !important;
  }
}
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-custom-video-controls .dg-post-video-volume { display:none !important; }
.dg-post-video-controls svg { width:18px; height:18px; }
.dg-post-video-time { flex:none; min-width:36px; font-size:12px; font-variant-numeric:tabular-nums; text-align:center; }
.dg-post-video-progress,.dg-post-video-volume { --dg-video-progress:0%; appearance:none; -webkit-appearance:none; height:4px; margin:0; border:0; border-radius:999px; outline:none; background:linear-gradient(to right,var(--dg-video-accent,var(--dg-blog-accent,#b875ff)) 0 var(--dg-video-progress),rgba(255,255,255,.32) var(--dg-video-progress) 100%); cursor:pointer; }
.dg-post-video-progress { flex:1 1 auto; min-width:70px; }
.dg-post-video-volume { --dg-video-progress:var(--dg-video-volume,100%); flex:0 1 76px; width:76px; }
.dg-post-video-progress::-webkit-slider-thumb,.dg-post-video-volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:13px; height:13px; border:2px solid #fff; border-radius:50%; background:var(--dg-video-accent,var(--dg-blog-accent,#b875ff)); box-shadow:0 2px 7px rgba(0,0,0,.35); }
.dg-post-video-progress::-moz-range-thumb,.dg-post-video-volume::-moz-range-thumb { width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:var(--dg-video-accent,var(--dg-blog-accent,#b875ff)); }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress::-webkit-slider-thumb { width:0; height:0; border:0; box-shadow:none; transition:width .12s ease,height .12s ease; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage):hover .dg-post-video-progress::-webkit-slider-thumb,:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress:focus::-webkit-slider-thumb,:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress:active::-webkit-slider-thumb { width:11px; height:11px; border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.35); }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress::-moz-range-thumb { width:0; height:0; border:0; }
:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage):hover .dg-post-video-progress::-moz-range-thumb,:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress:focus::-moz-range-thumb,:is(.dg-short-detail-video-host,.dg-hero-shorts-viewer__stage) .dg-post-video-progress:active::-moz-range-thumb { width:9px; height:9px; border:2px solid #fff; }
@media (max-width:640px) {
  .dg-post-video-controls { left:8px; right:8px; bottom:8px; gap:5px; min-height:42px; padding:5px 7px; border-radius:12px; }
  .dg-post-video-controls button { width:32px; height:32px; }
  .dg-post-video-time { min-width:33px; font-size:11px; }
  .dg-post-video-mute,.dg-post-video-volume { display:none !important; }
  #shortModal .dg-short-detail-video-host .dg-custom-video-controls [data-video-mute] { display:grid !important; }
  .dg-short-detail-video-host .dg-custom-video-controls [data-video-fullscreen] { display:none !important; }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__top { top:0; bottom:0; height:auto; padding:0; z-index:13; pointer-events:none; }
  #heroShortsViewerWrap .dg-hero-shorts-viewer__top [data-action="close"] { position:absolute; top:max(14px,env(safe-area-inset-top,0px)); left:14px; margin:0; pointer-events:auto; }
  body.iphone-device #heroShortsViewerWrap .dg-hero-shorts-viewer__top [data-action="close"] { top:18px; }
}
@supports (-webkit-touch-callout:none) {
  @media (max-width:640px) {
    html.dg-hero-shorts-open,
    body.dg-hero-shorts-open { background:#000 !important; }
  }
}
.dg-post-video[hidden],.dg-post-video-error[hidden] { display:none !important; }
.dg-post-video-error { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--dg-blog-muted); background:var(--dg-blog-bg-soft); }
.dg-post-video-error button { min-height:38px; padding:8px 14px; border:1px solid var(--dg-blog-border); border-radius:9px; color:var(--dg-blog-accent); background:var(--dg-blog-bg); cursor:pointer; }
.dg-post-video-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; background:rgba(149,77,242,.08); }
.dg-post-video-preview svg { width:28px; height:28px; }
.dg-post-video-preview small { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px) {
  .dg-post-video-shell { height:320px; max-height:320px; }
}
.dg-post-card>footer { display:flex; align-items:center; gap:4px; padding:8px 10px; }
.dg-post-card>footer button { min-height:42px; border:0; border-radius:9px; background:transparent; color:var(--dg-blog-muted); display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer; }
.dg-post-card>footer button:hover { background:rgba(128,92,166,.08); }
.dg-post-card>footer svg { width:20px; height:20px; }
.dg-post-card>footer .dg-post-comments.comments-disabled { opacity:.72; }
.dg-post-comments-disabled-note { display:flex; align-items:center; justify-content:center; gap:7px; padding:14px; color:var(--dg-blog-muted); font-size:13px; }
.dg-post-comments-disabled-note svg { width:17px; height:17px; }
.dg-post-comments-loading { display:grid; gap:9px; padding:18px 14px; }
.dg-post-comments-loading span { display:block; height:12px; border-radius:999px; background:linear-gradient(90deg,var(--dg-blog-bg-soft),var(--dg-blog-bg-hover),var(--dg-blog-bg-soft)); background-size:200% 100%; animation:dgBlogPulse 1.1s infinite; }
.dg-post-comments-loading span:nth-child(2) { width:78%; }
.dg-post-comments-loading span:nth-child(3) { width:56%; }
.dg-post-card>footer .dg-post-like {
  width:auto !important;
  min-width:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.dg-post-card>footer .dg-post-like:hover,
.dg-post-card>footer .dg-post-like:focus-visible,
.dg-post-card>footer .dg-post-like:active {
  background:rgba(128,92,166,.08) !important;
}
.dg-post-card>footer .dg-post-like:not(.liked) {
  color:var(--dg-blog-muted) !important;
  -webkit-text-fill-color:var(--dg-blog-muted) !important;
}
.dg-post-card>footer .dg-post-like:not(.liked) svg,
.dg-post-card>footer .dg-post-like:not(.liked) svg * {
  fill:none !important;
  stroke:currentColor !important;
}
.dg-post-card>footer .dg-post-like.liked {
  color:var(--dg-blog-muted) !important;
  -webkit-text-fill-color:var(--dg-blog-muted) !important;
}
.dg-post-card>footer .dg-post-like.liked svg,
.dg-post-card>footer .dg-post-like.liked svg * {
  fill:currentColor !important;
  stroke:currentColor !important;
}
body.dg-theme-dark .dg-post-card>footer .dg-post-like:not(.liked) svg.lucide,
body.dg-theme-dark .dg-post-card>footer .dg-post-like:not(.liked) svg.lucide *,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like:not(.liked) svg.lucide,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like:not(.liked) svg.lucide * {
  fill:none !important;
  stroke:var(--dg-blog-muted) !important;
  color:var(--dg-blog-muted) !important;
}
body.dg-theme-dark .dg-post-card>footer .dg-post-like.liked svg.lucide,
body.dg-theme-dark .dg-post-card>footer .dg-post-like.liked svg.lucide *,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like.liked svg.lucide,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like.liked svg.lucide * {
  fill:var(--dg-blog-muted) !important;
  stroke:var(--dg-blog-muted) !important;
  color:var(--dg-blog-muted) !important;
}
body.dg-theme-dark .dg-post-card>footer .dg-post-like .count,
body.dg-theme-dark .dg-post-card>footer .dg-post-like.liked .count,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like .count,
html.dg-theme-dark body .dg-post-card>footer .dg-post-like.liked .count {
  color:var(--dg-blog-muted) !important;
  -webkit-text-fill-color:var(--dg-blog-muted) !important;
  opacity:1 !important;
}
.dg-post-comments-panel { border-top:0 !important; padding:12px 14px; }
.dg-post-comment-list { display:flex; flex-direction:column; gap:4px; }
.dg-post-comments-panel .comment-photo-preview img { width:64px; height:64px; object-fit:cover; border-radius:9px; }
.dg-post-comments-panel .comment-photo-preview { position:relative; width:max-content; margin:0 0 8px 40px; }
.dg-post-comments-panel .comment-photo-preview button { position:absolute; right:-7px; top:-7px; width:22px; height:22px; border:0; border-radius:50%; color:#fff; background:#302638; }
.dg-post-comments-panel .comment-reply-target { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; padding:7px 10px; border-left:3px solid var(--dg-blog-accent); color:var(--dg-blog-muted); background:var(--dg-blog-bg-soft); }
.dg-post-comments-panel .comment-reply-target[hidden] { display:none; }
.dg-post-comments-panel .comment-reply-cancel { border:0; color:var(--dg-blog-muted); background:transparent; font-size:20px; }
.dg-post-comments-panel form { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.dg-post-comments-panel input { flex:1; min-width:0; border:1px solid var(--dg-blog-border); border-radius:10px; padding:10px 12px; color:var(--dg-blog-text); background:var(--dg-blog-bg-soft); }
.dg-post-comments-panel form button { border:0; border-radius:10px; padding:0 14px; color:#fff; background:#8f49e9; }
.dg-post-comments-panel .comment-form-row>.comment-photo-btn { box-sizing:border-box; width:40px !important; min-width:40px; height:40px !important; padding:0 !important; border:1px solid var(--dg-blog-border); border-radius:50% !important; color:var(--dg-blog-muted); background:var(--dg-blog-bg-soft); }
.dg-post-comments-panel .comment-form-row>.comment-photo-btn:hover { color:var(--dg-blog-accent); background:var(--dg-blog-bg-hover); }
.dg-post-comments-panel .comment-form-row>.comment-send-btn { box-sizing:border-box; width:40px !important; min-width:40px; height:40px !important; padding:0 !important; border-radius:50% !important; display:inline-grid; place-items:center; }
.dg-post-comments-panel .comment-edit-btns>.comment-send-btn { box-sizing:border-box; width:40px !important; min-width:40px; max-width:40px; height:40px !important; min-height:40px; max-height:40px; padding:0 !important; border-radius:50% !important; display:inline-grid; place-items:center; flex:0 0 40px; }
.dg-post-comments-panel .comment-form-row>.comment-send-btn:disabled { opacity:.55; cursor:wait; }

/* Canonical comments UI: the same visual in posts, dolls, shorts and articles. */
.comments-list {
  --dg-comment-text:var(--c-text,#2c2c2c);
  --dg-comment-muted:var(--c-muted,#6b7280);
  --dg-comment-accent:var(--c-primary,#8b5cf6);
  gap:10px;
  color:var(--dg-comment-text);
  -webkit-text-fill-color:var(--dg-comment-text);
}
.comments-list>.comment { margin:0 !important; padding:5px 0 !important; }
.comments-list>.comment:first-child { margin-top:4px !important; }
.comments-list .comment-header { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; margin:0; min-width:0; }
.comments-list .comment-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; object-fit:cover; }
.comments-list .comment-author { flex:0 1 auto; min-width:0; max-width:42%; overflow:hidden; color:var(--dg-comment-text) !important; -webkit-text-fill-color:var(--dg-comment-text) !important; font-size:14px; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.comments-list .comment-text { flex:1 1 auto; min-width:0; margin:0; color:var(--dg-comment-text) !important; -webkit-text-fill-color:var(--dg-comment-text) !important; font-size:14px; line-height:1.4; }
.comments-list .comment-meta { display:flex; align-items:center; justify-content:flex-start; gap:7px; margin:7px 0 0; min-height:20px; color:var(--dg-comment-muted); font-size:12px; line-height:1; }
.comments-list .comment-meta .comment-date { color:var(--dg-comment-muted) !important; -webkit-text-fill-color:var(--dg-comment-muted) !important; font-size:12px; line-height:1; }
.comments-list .comment-meta .comment-reply { min-height:20px; padding:0 !important; color:var(--dg-comment-accent) !important; -webkit-text-fill-color:var(--dg-comment-accent) !important; background:transparent !important; font-size:12px; font-weight:700; line-height:1; }
.comments-list .comment-meta .comment-like-btn { display:inline-flex; align-items:center; gap:3px; min-width:0; min-height:20px; padding:0 !important; color:var(--dg-comment-muted) !important; -webkit-text-fill-color:var(--dg-comment-muted) !important; font-size:12px; line-height:1; }
.comments-list .comment-meta .comment-like-btn :is(i,svg,.lucide) { width:20px !important; height:20px !important; stroke:currentColor; }
.comments-list .comment-meta .comment-like-btn.is-liked,
.comments-list .comment-meta .comment-like-btn.is-liked .comment-like-count { color:var(--dg-comment-accent) !important; -webkit-text-fill-color:var(--dg-comment-accent) !important; }
.comments-list .comment-meta .msg-more-wrap { position:relative; display:inline-flex; align-items:center; margin:0 !important; }
.comments-list .comment.dg-comment-menu-open { position:relative; z-index:100; }
.comments-list .comment.dg-comment-menu-open .msg-more-wrap { z-index:101; }
.comments-list .comment.dg-comment-menu-open .msg-more-menu { z-index:102; pointer-events:auto; }
.comments-list .comment-meta .msg-more-btn { display:inline-grid; place-items:center; min-width:20px; width:20px; height:20px; padding:0; color:var(--dg-comment-muted) !important; -webkit-text-fill-color:var(--dg-comment-muted) !important; background:transparent !important; font-size:16px; line-height:1; }
.comments-list .comment-replies-collapse--lvl1 { margin-left:40px; }
.comments-list .comment-replies { gap:10px; }
.comments-list .comment-replies .comment { margin:0 !important; padding:5px 0 !important; }
.comments-list+.dg-comments-open-all,
.comments-list+.dg-comments-collapse-all,
.comments-list .dg-comments-open-all,
.comments-list .dg-comments-collapse-all { color:var(--dg-comment-accent) !important; -webkit-text-fill-color:var(--dg-comment-accent) !important; font-size:13px; font-weight:600; }

body.dg-theme-dark .comments-list,
html.dg-theme-dark .comments-list {
  --dg-comment-text:#f4eff8;
  --dg-comment-muted:#a7afbf;
  --dg-comment-accent:#a855f7;
}

/* Keep both comment hints (empty and populated lists) equally muted on every
   existing publication, DollShow, profile and article comment surface. */
.comment-form .comment-input::placeholder {
  color:var(--dg-comments-sheet-muted,var(--c-muted,#6b7280)) !important;
  -webkit-text-fill-color:var(--dg-comments-sheet-muted,var(--c-muted,#6b7280)) !important;
  font-weight:400 !important;
  opacity:1;
}

.comments-list .comment {
  transition:background-color .4s ease;
}
.comments-list .comment.dg-comment-just-added {
  position:relative;
  border-radius:8px;
  background-color:rgba(var(--c-primary-rgb),.18) !important;
  box-shadow:none !important;
}
body.dg-theme-dark .comments-list .comment.dg-comment-just-added,
html.dg-theme-dark .comments-list .comment.dg-comment-just-added {
  background-color:rgba(168,85,247,.22) !important;
}
@media (prefers-reduced-motion:reduce) {
  .comments-list .comment { transition:none; }
}
.dg-post-comment-error { width:100%; margin-top:6px; color:#ef4444; font-size:12px; }
.dg-blog-article-card { overflow:hidden; }
.dg-blog-article-card>a { display:grid; grid-template-columns:180px minmax(0,1fr); color:inherit; text-decoration:none; }
.dg-blog-article-card>a>img { width:100%; height:100%; min-height:170px; object-fit:cover; background:var(--dg-blog-bg-soft); }
.dg-blog-article-card>a>div { display:flex; flex-direction:column; min-width:0; padding:18px; }
.dg-blog-article-label { display:inline-block; color:#8b45e6; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.dg-blog-article-card h2 { margin:7px 0; font-size:20px; line-height:1.25; }
.dg-article-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px 9px; }
.dg-article-title-row h2 { min-width:0; }
.dg-article-title-row .dg-article-card-status { flex:none; margin-left:0; }
.dg-blog-article-card p { margin:0 0 14px; color:var(--dg-blog-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.dg-blog-article-card small,.dg-blog-article-label { color:var(--dg-blog-accent); }
.dg-blog-article-card .dg-publication-pinned { margin-top:auto; margin-bottom:7px; }
.dg-blog-article-card small { display:block; }
.dg-blog-empty { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:30px; color:var(--dg-blog-muted); border:1px dashed var(--dg-blog-border); border-radius:16px; }
.dg-page-blog .dg-blog-empty[hidden] { display:none !important; }
.dg-blog-empty strong { color:var(--dg-blog-text); font-size:17px; }
body:not(.dg-theme-dark) .dg-blog-empty { background:var(--dg-blog-bg); }
body.dg-theme-dark .dg-blog-empty { background:var(--dg-blog-bg-soft); }
.dg-blog-load-error { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center; color:var(--dg-blog-muted); border:1px solid rgba(239,68,68,.35); border-radius:16px; background:rgba(239,68,68,.06); }
.dg-blog-load-error strong { color:var(--dg-blog-text); }
.dg-blog-load-error button { border:0; border-radius:10px; padding:9px 16px; background:var(--dg-blog-accent); color:#fff; font-weight:700; cursor:pointer; }
.dg-profile-tab-panel[data-tab="blog"],#profileBlogPageRoot { background:transparent !important; }

/* Active profile tab: shared light/dark treatment matching the blog reference. */
body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active,
#profileModal .profile-tabs .tab-btn.active {
  color:#8f43e8 !important;
  position:relative;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:600;
}
body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active::after,
#profileModal .profile-tabs .tab-btn.active::after {
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:#8f43e8;
  pointer-events:none;
}
body.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active,
html.dg-theme-dark body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active,
body.dg-theme-dark #profileModal .profile-tabs .tab-btn.active,
html.dg-theme-dark body #profileModal .profile-tabs .tab-btn.active {
  color:#bd7cff !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active::after,
html.dg-theme-dark body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs .tab-btn.active::after,
body.dg-theme-dark #profileModal .profile-tabs .tab-btn.active::after,
html.dg-theme-dark body #profileModal .profile-tabs .tab-btn.active::after {
  background:#a855f7;
}
.dg-blog-feed-skeleton {
  --dg-blog-skeleton-a:#eee8f2;
  --dg-blog-skeleton-b:#f7f3f9;
  display:grid; gap:14px; width:min(100%,760px); margin:auto; background:transparent;
}
.dg-blog-feed-skeleton span { height:190px; border:1px solid rgba(91,62,116,.10); border-radius:16px; background:linear-gradient(90deg,var(--dg-blog-skeleton-a) 25%,var(--dg-blog-skeleton-b) 50%,var(--dg-blog-skeleton-a) 75%); background-size:200% 100%; animation:dgBlogPulse 1.2s infinite; }
body.dg-theme-dark .dg-blog-feed-skeleton,
html.dg-theme-dark .dg-blog-feed-skeleton {
  --dg-blog-skeleton-a:#1b171f;
  --dg-blog-skeleton-b:#28212e;
}
body.dg-theme-dark .dg-blog-feed-skeleton span,
html.dg-theme-dark .dg-blog-feed-skeleton span { border-color:rgba(214,190,232,.10); }
body.dg-theme-dark .dg-post-media-item img,
body.dg-theme-dark .dg-blog-article-card>a>img,
html.dg-theme-dark .dg-post-media-item img,
html.dg-theme-dark .dg-blog-article-card>a>img { background:#19151e; }
@keyframes dgBlogPulse { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .dg-blog-feed-entry--enter { animation:none; } }
body.dg-theme-dark .dg-post-composer,body.dg-theme-dark .dg-post-card,body.dg-theme-dark .dg-blog-article-card,
html.dg-theme-dark .dg-post-composer,html.dg-theme-dark .dg-post-card,html.dg-theme-dark .dg-blog-article-card { background:var(--dg-blog-bg); border-color:var(--dg-blog-border); }
@media (max-width:767px) {
  .dg-blog-feed-page { width:auto; margin:0 -8px; padding-bottom:28px; }
  .dg-blog-feed-head { padding:0 10px; align-items:flex-end; }
  .dg-blog-feed-head h1 { font-size:23px; }
  .dg-blog-feed-head p { display:none; }
  .dg-blog-write-article { padding:9px 11px; font-size:13px; }
  .dg-post-composer,.dg-post-card,.dg-blog-article-card { border-radius:13px; }
  .dg-post-composer { margin:0 4px 10px; padding:10px; }
  .dg-post-composer-main>.dg-post-editor { height:52px; min-height:52px !important; max-height:164px !important; padding-top:9px; }
  .dg-post-editor { transition:none; }
  .dg-article-composer .dg-post-composer-main>.dg-article-editor { max-height:clamp(360px,calc(100dvh - 250px),680px) !important; }
  .dg-post-composer-main { grid-template-columns:38px minmax(0,1fr) 44px; gap:8px; }
  .dg-post-composer-main>img,.dg-post-card>header>img { width:38px; height:38px; }
  .dg-post-composer-actions {
    width:100%;
    min-width:0;
    padding-left:44px;
    overflow:visible;
  }
  .dg-post-composer-actions button {
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
  }
  .dg-publication-options { padding-left:44px; display:grid; gap:8px; }
  .dg-post-format-toolbar { margin-left:44px; }
  .dg-post-limit { display:none; }
  .dg-blog-type-tabs { margin:0 4px 10px; }
  .dg-blog-section-filter { margin:0 4px 10px; }
  .dg-blog-section-filter select { min-width:0; flex:1; }
  .dg-blog-feed { gap:10px; }
  .dg-post-deleted { margin:0 4px; border-radius:13px; }
  body.ios-device .dg-blog-feed { margin:0 4px; }
  .dg-post-media { height:var(--dg-post-media-height,320px); }
  .dg-post-media-nav { display:none; }
  .dg-post-media-counter { top:9px; left:9px; }
  .dg-post-media-item { min-height:170px; }
  .dg-blog-article-card>a { grid-template-columns:118px minmax(0,1fr); }
  .dg-blog-article-card>a>img { min-height:140px; }
  .dg-blog-article-card>a>div { padding:13px; }
  .dg-blog-article-card h2 { font-size:16px; }
  .dg-blog-article-card p { -webkit-line-clamp:2; font-size:13px; }
}

@media (max-width:640px) {
  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"],
  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"] > .dg-blog-desktop-layout,
  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"] .dg-blog-feed-page,
  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"] .dg-blog-feed,
  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"] .dg-blog-feed-entry {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #profileModal.modal .dg-profile-tab-panel[data-tab="blog"] .dg-blog-feed-page {
    margin-right:0;
    margin-left:0;
  }
}

@media (max-width:420px) {
  .dg-post-composer-actions {
    gap:clamp(1px,1vw,4px);
  }
  .dg-post-composer-actions button {
    gap:clamp(2px,1vw,5px);
    min-height:34px;
    padding:5px clamp(2px,1.7vw,7px);
    font-size:clamp(11px,3.35vw,13px);
    line-height:1;
  }
  .dg-post-composer-actions svg {
    flex:0 0 auto;
    width:clamp(15px,4.5vw,18px);
    height:clamp(15px,4.5vw,18px);
  }
}

@media (max-width:640px) {
  .dg-post-composer-main>.dg-post-editor,
  .dg-article-composer .dg-post-composer-main>.dg-article-editor,
  .dg-inline-article-modal #blogArticleEditor {
    height:auto;
    max-height:none !important;
    overflow-y:visible !important;
  }
}

/* Final mobile composer state: must remain after all legacy mobile overrides. */
@media (max-width:640px) {
  body.dg-mobile-composer-keyboard-open .dg-mobile-bottom-nav {
    display:none !important;
  }
  body.dg-page-messages.dg-mobile-composer-keyboard-open .dg-messages-page-wrap {
    min-height:var(--dg-chat-visible-height, 100dvh) !important;
    height:var(--dg-chat-visible-height, 100dvh) !important;
    max-height:var(--dg-chat-visible-height, 100dvh) !important;
  }
  body.dg-page-profile.dg-mobile-composer-keyboard-open .dg-mobile-top-search {
    display:none !important;
  }
  body.dg-page-profile.dg-mobile-composer-keyboard-open #profileModal.dg-profile-page-view .profile-tabs {
    position:sticky !important;
    top:clamp(8px, max(var(--safe-top, env(safe-area-inset-top, 0px)), var(--dg-composer-viewport-top, 0px)), 24px) !important;
  }
  #profileModal .dg-mobile-composer-keyboard-active .dg-mobile-editor-scroll-active {
    box-sizing:border-box;
    height:auto !important;
    max-height:var(--dg-mobile-editor-height, 160px) !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
    transition:none !important;
  }
  #profileModal .dg-mobile-composer-keyboard-active .dg-mobile-editor-scroll-active.is-scrollable {
    overflow-y:auto !important;
  }
}

#profileModal .profile-stats {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  gap:6px;
  margin:0;
  line-height:1.15;
}

#profileModal .profile-stats > :is(.profile-link, .profile-posts) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

#profileModal .profile-stats .profile-stat-label {
  overflow:hidden;
  max-width:100%;
  color:var(--c-muted, #657786);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#profileModal .profile-stats .count {
  margin-top:3px;
  color:var(--c-text, #fff);
  font-size:18px;
  line-height:1;
}

#profileModal .profile-stat-separator,
#profileModal .profile-stat-label--desktop {
  display:none;
}

#profileModal .profile-stat-label--mobile {
  display:inline;
}

/* Mobile profile header: avatar | identity and stats | achievement. */
@media (max-width:640px) {
  #profileModal .profile-header {
    grid-template-columns:80px minmax(0, 1fr);
    align-items:start;
    column-gap:12px;
  }

  #profileModal .dg-profile-center {
    display:grid;
    grid-template-columns:minmax(0, 1fr) min(14.7vw, 67px);
    align-items:end;
    gap:8px;
    width:100%;
    min-width:0;
  }

  #profileModal .dg-profile-center .profile-info {
    min-width:0;
    transform:none;
  }

  #profileModal .profile-title {
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
    white-space:nowrap;
  }

  #profileModal .profile-title #profileName {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #profileModal .profile-title .author-rating {
    flex:0 0 auto;
  }

  #profileModal .profile-title .dg-profile-promo-slot {
    display:flex !important;
    flex:0 1 92px;
    justify-content:flex-end;
    margin-left:12px;
    min-width:0;
    transform:translateY(3px);
  }

  #profileModal .profile-title .dg-profile-promo {
    --dg-profile-promo-control-size:22px;
    width:100%;
    gap:4px;
    font-size:10px;
  }

  #profileModal .profile-title .dg-promo-code {
    flex:1 1 auto;
    max-width:66px;
    padding:3px 6px;
  }

  #profileModal .profile-title .dg-copy-promo svg {
    width:13px;
    height:13px;
  }

  #profileModal .dg-profile-center .dg-profile-achievement-badge {
    grid-column:2;
    align-self:end;
    margin:0;
    transform:none;
  }
}

/* Compact and raised mobile stories/actions. */
@media (max-width:640px) {
  #profileModal .dg-profile-stories-row {
    margin-top:4px;
    padding:2px 0 4px;
  }

  #profileModal .dg-profile-stories {
    min-height:84px;
    padding:4px 8px 4px;
  }

  #profileModal .dg-profile-story-add {
    top:6px;
    left:1px;
  }

  #profileModal .profile-actions {
    --dg-profile-action-gap:clamp(12px, 5vw, 32px);
    height:64px !important;
    min-height:64px !important;
    margin-top:12px;
    margin-bottom:12px;
    padding:2px 4px 2px !important;
  }

  #profileModal .dg-profile-premium-line,
  #profileModal .dg-profile-actions-mobile,
  #profileModal .dg-profile-actions-left,
  #profileModal .dg-profile-actions-right,
  #profileModal .profile-actions-own,
  #profileModal .dg-profile-socials-shell {
    height:60px !important;
    min-height:60px !important;
  }

  #profileModal .dg-profile-premium-line,
  #profileModal .dg-profile-actions-left,
  #profileModal .dg-profile-actions-right,
  #profileModal .profile-actions-own {
    flex-basis:56px;
    width:56px;
  }

  #profileModal .subscription-status #subscribeBtn,
  #profileModal .subscription-status .dg-premium-status-pill,
  #profileModal .subscription-status .dg-premium-public-card,
  #profileModal .dg-profile-action-card {
    width:56px !important;
    height:60px !important;
    min-height:60px !important;
    gap:4px;
    padding:0 !important;
  }

  #profileModal .subscription-status #subscribeBtn > svg,
  #profileModal .subscription-status .dg-premium-status-pill > svg,
  #profileModal .subscription-status .dg-premium-public-card > svg,
  #profileModal .dg-profile-action-card > svg.lucide {
    width:46px !important;
    height:46px !important;
    flex:0 0 46px;
    padding:11px !important;
    border-radius:12px !important;
  }

  #profileModal .dg-profile-socials-shell,
  #profileModal .dg-profile-socials-card {
    width:56px !important;
  }

  #profileModal .dg-profile-socials-card {
    height:60px !important;
    min-height:60px !important;
    gap:4px;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #profileModal .dg-profile-socials-icons {
    position:relative;
    display:block;
    box-sizing:border-box;
    width:52px;
    height:52px;
    padding:3px;
    border:1px solid rgba(139,92,246,.78);
    border-radius:12px;
  }

  #profileModal .dg-profile-socials-icons > .dg-profile-social-icon {
    position:absolute;
    width:18px;
    height:18px;
    background-color:currentColor;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
  }

  #profileModal .dg-profile-social-icon--boosty {
    top:2px;
    left:16px;
    color:#f15f2c;
    -webkit-mask-image:url('/images/social/boosty.svg');
    mask-image:url('/images/social/boosty.svg');
  }

  #profileModal .dg-profile-social-icon--telegram {
    left:3px;
    bottom:3px;
    color:#229ed9;
    -webkit-mask-image:url('/images/social/telegram.svg');
    mask-image:url('/images/social/telegram.svg');
  }

  #profileModal .dg-profile-social-icon--vk {
    right:3px;
    bottom:3px;
    color:#0077ff;
    -webkit-mask-image:url('/images/social/vk.svg');
    mask-image:url('/images/social/vk.svg');
  }

  #profileModal .dg-profile-action-card span,
  #profileModal .dg-profile-socials-label,
  #profileModal .subscription-status .dg-premium-card-label,
  #profileModal .subscription-status #subscribeBtn > span,
  #profileModal .subscription-status .dg-premium-public-card > span {
    font-size:10px !important;
    line-height:1 !important;
  }
}

/* Mobile profile actions: light theme. */
@media (max-width:640px) {
  body:not(.dg-theme-dark) #profileModal .dg-profile-action-card > svg.lucide,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-action-card > svg.lucide {
    color:#25252c !important;
    background:rgba(255,255,255,.88) !important;
    border-color:rgba(72,65,82,.22) !important;
    box-shadow:0 2px 8px rgba(65,48,82,.08) !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-action-card > span,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-action-card > span {
    color:#29252f !important;
    -webkit-text-fill-color:#29252f !important;
  }

  body:not(.dg-theme-dark) #profileModal #btnAuthorReviews > span,
  html:not(.dg-theme-dark) body #profileModal #btnAuthorReviews > span {
    color:#8741e5 !important;
    -webkit-text-fill-color:#8741e5 !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status #subscribeBtn,
  html:not(.dg-theme-dark) body #profileModal .subscription-status #subscribeBtn {
    color:#6d28d9 !important;
    -webkit-text-fill-color:#6d28d9 !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status #subscribeBtn > svg,
  html:not(.dg-theme-dark) body #profileModal .subscription-status #subscribeBtn > svg {
    color:#7c3aed !important;
    background:rgba(255,255,255,.9) !important;
    border-color:#8b5cf6 !important;
    box-shadow:0 2px 8px rgba(124,58,237,.10) !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status .dg-premium-status-pill,
  body:not(.dg-theme-dark) #profileModal .subscription-status .dg-premium-public-card,
  html:not(.dg-theme-dark) body #profileModal .subscription-status .dg-premium-status-pill,
  html:not(.dg-theme-dark) body #profileModal .subscription-status .dg-premium-public-card {
    color:#6d28d9 !important;
    -webkit-text-fill-color:#6d28d9 !important;
  }

  body:not(.dg-theme-dark) #profileModal .subscription-status .dg-premium-status-pill > svg,
  body:not(.dg-theme-dark) #profileModal .subscription-status .dg-premium-public-card > svg,
  html:not(.dg-theme-dark) body #profileModal .subscription-status .dg-premium-status-pill > svg,
  html:not(.dg-theme-dark) body #profileModal .subscription-status .dg-premium-public-card > svg {
    color:#fff !important;
    background:#8b5cf6 !important;
    border-color:rgba(109,40,217,.32) !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-card,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-card {
    color:#29252f !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-icons,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-icons {
    background:rgba(255,255,255,.82);
    border-color:rgba(124,58,237,.48);
    box-shadow:0 2px 9px rgba(76,29,149,.08);
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-label,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-label {
    color:#29252f !important;
    -webkit-text-fill-color:#29252f !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-links,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-links {
    color:#29252f;
    background:rgba(255,255,255,.98);
    border-color:rgba(72,65,82,.18);
    box-shadow:0 10px 24px rgba(52,38,66,.16);
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-links .dg-profile-social-btn,
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-links .dg-profile-social-btn {
    color:#29252f !important;
    -webkit-text-fill-color:#29252f !important;
  }

  body:not(.dg-theme-dark) #profileModal .dg-profile-socials-links .dg-profile-social-btn:is(:hover, :focus-visible),
  html:not(.dg-theme-dark) body #profileModal .dg-profile-socials-links .dg-profile-social-btn:is(:hover, :focus-visible) {
    background:rgba(124,58,237,.10);
  }
}

/* Чужой профиль: пустой слот Premium не должен оставлять разрыв между действиями. */
#profileModal:not([data-own-profile="true"]) .dg-profile-premium-line:has(> .dg-profile-premium-left > .subscription-status:empty) {
  display:none !important;
}

/* Чужой профиль: видимые действия всегда образуют одну плотную группу. */
@media (max-width:640px) {
  #profileModal:not([data-own-profile="true"]) .profile-actions {
    justify-content:flex-start !important;
  }

  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-mobile,
  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-left,
  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-right,
  #profileModal:not([data-own-profile="true"]) .dg-profile-action-card,
  #profileModal:not([data-own-profile="true"]) .dg-profile-socials-shell {
    flex-grow:0 !important;
    flex-shrink:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #profileModal:not([data-own-profile="true"]) .dg-profile-action-card {
    flex-basis:56px !important;
  }
}

@media (min-width:641px) {
  #profileModal:not([data-own-profile="true"]) .profile-actions {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
  }

  #profileModal:not([data-own-profile="true"]) .dg-profile-premium-line,
  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-mobile,
  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-left,
  #profileModal:not([data-own-profile="true"]) .dg-profile-actions-right,
  #profileModal:not([data-own-profile="true"]) .dg-profile-action-card,
  #profileModal:not([data-own-profile="true"]) .dg-profile-socials-shell,
  #profileModal:not([data-own-profile="true"]) .dg-profile-foreign-menu-btn {
    flex:0 0 auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Mobile profile action labels: one readable color per theme. */
@media (max-width:640px) {
  body.dg-theme-dark #profileModal :is(
    .dg-profile-action-card,
    .dg-profile-socials-card,
    .subscription-status #subscribeBtn,
    .subscription-status .dg-premium-status-pill,
    .subscription-status .dg-premium-public-card
  ) > span,
  html.dg-theme-dark body #profileModal :is(
    .dg-profile-action-card,
    .dg-profile-socials-card,
    .subscription-status #subscribeBtn,
    .subscription-status .dg-premium-status-pill,
    .subscription-status .dg-premium-public-card
  ) > span {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  body:not(.dg-theme-dark) #profileModal :is(
    .dg-profile-action-card,
    .dg-profile-socials-card,
    .subscription-status #subscribeBtn,
    .subscription-status .dg-premium-status-pill,
    .subscription-status .dg-premium-public-card
  ) > span,
  html:not(.dg-theme-dark) body #profileModal :is(
    .dg-profile-action-card,
    .dg-profile-socials-card,
    .subscription-status #subscribeBtn,
    .subscription-status .dg-premium-status-pill,
    .subscription-status .dg-premium-public-card
  ) > span {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
  }
}

/* Installed PWA / Android TWA: brand screen until the first feed render. */
.dg-app-launch-splash {
  display:none;
}

html.dg-app-launch .dg-app-launch-splash {
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:#17131b;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .22s ease-out, visibility 0s linear .22s;
}

html.dg-app-launch:not(.dg-theme-dark) .dg-app-launch-splash {
  background:#fff;
  color:#211b26;
}

.dg-app-launch-splash__brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.dg-app-launch-splash__logo {
  display:block;
  width:144px;
  height:144px;
  object-fit:contain;
}

.dg-app-launch-splash__name {
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
}

html.dg-app-launch .dg-app-launch-splash.dg-app-launch-splash--hide {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce) {
  html.dg-app-launch .dg-app-launch-splash {
    transition:none;
  }
}

/* Smooth transitions: shared motion contract and page readiness states. */
:root {
  --dg-motion-fast:160ms;
  --dg-motion-screen:260ms;
  --dg-motion-modal:280ms;
  --dg-motion-reveal:240ms;
  --dg-motion-ease-out:cubic-bezier(.22, 1, .36, 1);
  --dg-motion-ease-in:cubic-bezier(.4, 0, 1, 1);
}

body.dg-page-enter {
  opacity:0;
  transition:opacity var(--dg-motion-reveal) var(--dg-motion-ease-out);
}

body.dg-page-enter.dg-content-ready,
body.dg-page-enter.dg-page-enter--ready,
body.dg-page-enter.dg-page-grace-revealed {
  opacity:1;
}

.dg-navigation-trigger-pending {
  opacity:.68;
  pointer-events:none;
}

body.dg-page-leave {
  opacity:0;
  transition:opacity var(--dg-motion-fast) var(--dg-motion-ease-in);
}

/* modalStack owns all modal motion; temporary GPU hints exist only during it. */
.modal {
  transition:opacity var(--dg-motion-modal) var(--dg-motion-ease-out);
  will-change:auto;
}

.modal .modal-content {
  transition:opacity var(--dg-motion-modal) var(--dg-motion-ease-out), transform var(--dg-motion-modal) var(--dg-motion-ease-out);
  will-change:auto;
}

.modal.dg-modal-opening,
.modal.dg-closing,
.modal.dg-modal-opening .modal-content,
.modal.dg-closing .modal-content {
  will-change:opacity, transform;
}

.modal.dg-closing,
.modal.dg-closing .modal-content {
  transition-timing-function:var(--dg-motion-ease-in);
  transition-duration:var(--dg-motion-fast);
}

@media (pointer:coarse), (max-width:640px) {
  .modal,
  .modal.show,
  .modal.dg-closing {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Mobile messages: existing panes share one geometry; chatPane is the moving layer. */
@media (max-width:640px) {
  :is(#messagesPageRoot, #messagesModal) .messages-container {
    position:relative;
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container > #threadsList,
  :is(#messagesPageRoot, #messagesModal) .messages-container > #chatPane {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container > #threadsList {
    display:flex !important;
    visibility:visible;
    pointer-events:auto;
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container > #chatPane {
    display:flex !important;
    flex-direction:column;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(100%, 0, 0);
    transition:transform var(--dg-motion-screen) var(--dg-motion-ease-out);
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container:is(.chat-entering, .show-chat, .chat-leaving) > #chatPane {
    visibility:visible;
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container:is(.chat-entering-active, .show-chat) > #chatPane {
    pointer-events:auto;
    transform:translate3d(0, 0, 0);
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container.chat-leaving > #chatPane {
    pointer-events:none;
    transform:translate3d(100%, 0, 0);
    transition-timing-function:var(--dg-motion-ease-in);
    transition-duration:var(--dg-motion-fast);
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container.show-chat > #threadsList {
    visibility:visible;
    pointer-events:none;
  }

  :is(#messagesPageRoot, #messagesModal) .messages-container:is(.chat-entering, .chat-leaving) > #chatPane {
    will-change:transform;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.dg-page-enter,
  body.dg-page-leave,
  .modal,
  .modal .modal-content {
    opacity:1;
    transition:none;
  }
}

/* Same-origin multi-page navigation: native snapshot slide where supported. */

/* Support lives in the existing messenger; moderators receive a second list tab. */
.dg-message-tabs {
    display: flex;
    gap: 6px;
    padding: 2px 12px 6px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .dg-message-tabs {
        padding-top: 0;
    }
}

.threads-header-title > .dg-message-tabs {
    padding: 0;
}

.threads-header-title:has(> .dg-message-tabs) {
    min-width: 0;
}

.dg-message-tab {
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    font: inherit;
    font-weight: 600;
    padding: 7px 11px;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.dg-message-tab::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #8b5cf6, #c15cff);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
    opacity: 0;
}

.dg-message-tab-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--c-primary-600);
    box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.18);
}

.dg-message-tab.is-active {
    color: var(--c-primary-600);
}

.dg-message-tab.is-active::after {
    opacity: 1;
}

.dg-threads-tab-loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 18px;
}

.dg-threads-tab-loading__label {
    padding: 3px 2px 6px;
    color: var(--c-muted);
    font-size: 13px;
}

.dg-thread-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--c-primary-rgb), 0.10);
    border-radius: 14px;
}

.dg-thread-skeleton__avatar,
.dg-thread-skeleton__copy i {
    display: block;
    background: linear-gradient(90deg, rgba(var(--c-primary-rgb), 0.08), rgba(var(--c-primary-rgb), 0.20), rgba(var(--c-primary-rgb), 0.08));
    background-size: 220% 100%;
    animation: dgThreadsTabLoading 1.05s ease-in-out infinite;
}

.dg-thread-skeleton__avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
}

.dg-thread-skeleton__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.dg-thread-skeleton__copy i {
    width: 48%;
    height: 9px;
    border-radius: 999px;
}

.dg-thread-skeleton__copy i:last-child {
    width: 76%;
    opacity: 0.72;
}

@keyframes dgThreadsTabLoading {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dg-thread-skeleton__avatar,
    .dg-thread-skeleton__copy i {
        animation: none;
    }
}

.dg-support-thread .thread-avatar-wrap {
    flex: 0 0 48px;
    height: 48px;
    width: 48px;
}

#threadsList .dg-support-thread--user {
    margin-bottom: 8px;
}

body #threadsList .dg-support-thread--user .thread-card {
    background: rgba(var(--c-primary-rgb), 0.16) !important;
    border-color: rgba(var(--c-primary-rgb), 0.34) !important;
}

.dg-support-system {
    align-self: center;
    background: var(--dg-message-surface-light-soft);
    border: 1px solid var(--dg-message-border-light-soft);
    border-radius: 999px;
    color: var(--c-text);
    font-size: 12px;
    margin: 8px auto;
    max-width: min(86%, 560px);
    padding: 7px 12px;
    text-align: center;
}

.dg-support-system--action {
    background: transparent;
    border-radius: 0;
    border: 0;
}

.dg-support-system--action .btn-secondary {
    background: var(--c-bg);
    border-color: var(--c-primary);
    color: var(--c-primary-600);
    -webkit-text-fill-color: var(--c-primary-600);
}

.dg-support-system--action .btn-secondary:hover,
.dg-support-system--action .btn-secondary:focus-visible {
    background: rgba(var(--c-primary-rgb), 0.10);
}

.dg-support-closed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
}

.dg-support-closed span {
    color: var(--c-muted);
}

.dg-support-closed .btn {
    min-height: 34px;
}

body.dg-theme-dark .dg-support-closed .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: #a78bfa;
    color: #ddd6fe;
    -webkit-text-fill-color: #ddd6fe;
}

body.dg-theme-dark .dg-support-closed .btn-secondary:hover,
body.dg-theme-dark .dg-support-closed .btn-secondary:focus-visible {
    background: rgba(var(--c-primary-rgb), 0.24);
}

.dg-support-draft {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: min(86%, 520px);
    margin: auto;
    padding: 14px 16px;
    border: 1px solid rgba(var(--c-primary-rgb), 0.32);
    border-radius: 14px;
    background: rgba(var(--c-primary-rgb), 0.12);
    text-align: center;
}

.dg-support-draft span {
    color: var(--c-muted);
}

.dg-support-author {
    color: var(--c-primary-600);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
}

.dg-support-loading,
.dg-support-empty {
    color: var(--c-muted);
    padding: 16px;
}

body.dg-theme-dark .dg-message-tab {
    color: var(--c-muted);
}

body.dg-theme-dark .dg-message-tab.is-active {
    color: #b968ff;
}

body.dg-theme-dark .dg-support-system {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--c-text);
}

body.dg-theme-dark .dg-support-system--action {
    background: transparent;
    border: 0;
}

body.dg-theme-dark .dg-support-system--action .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: #a78bfa;
    color: #ddd6fe;
    -webkit-text-fill-color: #ddd6fe;
}

body.dg-theme-dark .dg-support-system--action .btn-secondary:hover,
body.dg-theme-dark .dg-support-system--action .btn-secondary:focus-visible {
    background: rgba(var(--c-primary-rgb), 0.24);
}

body.dg-theme-dark .dg-support-author {
    color: #c4b5fd;
}
@view-transition {
  navigation:auto;
}

::view-transition-group(root) {
  animation-duration:var(--dg-motion-screen);
  animation-timing-function:var(--dg-motion-ease-out);
}

::view-transition-old(root) {
  animation-name:dgPageSlideOldForward;
}

::view-transition-new(root) {
  animation-name:dgPageSlideNewForward;
}

html:active-view-transition body.dg-page-enter,
html:active-view-transition body.dg-page-leave {
  opacity:1;
  transition:none;
}

/* Keep the old snapshot for a short grace period while the target prepares content. */
html.dg-view-transition-waiting::view-transition-group(root),
html.dg-view-transition-waiting::view-transition-old(root),
html.dg-view-transition-waiting::view-transition-new(root) {
  animation-play-state:paused;
}

html:active-view-transition-type(dg-forward)::view-transition-old(root) {
  animation-name:dgPageSlideOldForward;
}

html:active-view-transition-type(dg-forward)::view-transition-new(root) {
  animation-name:dgPageSlideNewForward;
}

html:active-view-transition-type(dg-back)::view-transition-old(root) {
  animation-name:dgPageSlideOldBack;
}

html:active-view-transition-type(dg-back)::view-transition-new(root) {
  animation-name:dgPageSlideNewBack;
}

@keyframes dgPageSlideOldForward {
  to { opacity:.72; transform:translate3d(-18%, 0, 0); }
}

@keyframes dgPageSlideNewForward {
  from { transform:translate3d(100%, 0, 0); }
  to { transform:translate3d(0, 0, 0); }
}

@keyframes dgPageSlideOldBack {
  to { transform:translate3d(100%, 0, 0); }
}

@keyframes dgPageSlideNewBack {
  from { opacity:.72; transform:translate3d(-18%, 0, 0); }
  to { opacity:1; transform:translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
}

/* Desktop modal lock: keep the existing page scrollbar and its gutter visible. */
@media (min-width:641px) {
  html .dg-scroll-root {
    scrollbar-gutter:stable;
  }

  html body.dg-scroll-locked > .dg-scroll-root {
    overflow-x:hidden !important;
    overflow-y:auto !important;
    pointer-events:none;
  }
}

/* Реферальные действия в собственном профиле. */
#profileModal .dg-profile-referral-shell {
  position:relative;
  flex:0 0 56px;
  width:56px;
  min-width:0;
}

#profileModal .dg-profile-referral-card {
  cursor:pointer;
}

#profileModal .dg-profile-referral-card:disabled {
  opacity:.55;
  cursor:wait;
}

#profileModal .dg-profile-referral-actions {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:145;
  display:flex;
  flex-direction:column;
  gap:3px;
  width:max-content;
  min-width:158px;
  padding:6px;
  border:1px solid rgba(139,92,246,.42);
  border-radius:12px;
  background:rgba(15,15,18,.97);
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}

#profileModal .dg-profile-referral-actions[hidden] {
  display:none !important;
}

#profileModal .dg-profile-referral-action {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  min-height:36px;
  padding:0 10px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:transparent;
  font:inherit;
  cursor:pointer;
}

#profileModal .dg-profile-referral-action:is(:hover, :focus-visible) {
  background:rgba(139,92,246,.18);
}

#profileModal .dg-profile-referral-action > svg {
  width:17px;
  height:17px;
}

body:not(.dg-theme-dark) #profileModal .dg-profile-referral-actions,
html:not(.dg-theme-dark) body #profileModal .dg-profile-referral-actions {
  border-color:rgba(72,65,82,.18);
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 24px rgba(65,48,82,.16);
}

body:not(.dg-theme-dark) #profileModal .dg-profile-referral-action,
html:not(.dg-theme-dark) body #profileModal .dg-profile-referral-action {
  color:#25252c;
}

body:not(.dg-theme-dark) #profileModal .dg-profile-referral-action:is(:hover, :focus-visible),
html:not(.dg-theme-dark) body #profileModal .dg-profile-referral-action:is(:hover, :focus-visible) {
  background:rgba(139,92,246,.10);
}

@media (min-width:901px) {
  #profileModal .dg-profile-referral-shell {
    display:flex;
    flex:0 0 56px;
    align-items:flex-start;
    width:56px;
    min-height:62px;
    margin:0;
  }

  #profileModal .dg-profile-referral-actions {
    left:auto;
    right:0;
    top:calc(100% + 8px);
  }
}

@media (max-width:640px) {
  #profileModal .dg-profile-referral-shell {
    width:56px;
    height:60px;
    min-height:60px;
  }

  #profileModal .dg-profile-referral-actions {
    right:0;
    top:calc(100% + 8px);
  }
}

/* DollGallery unified login / registration modal */
#authModal .dg-auth-modal__content {
    position: relative;
    width: min(92vw, 520px);
    height: min(760px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    padding: 28px 32px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(31, 31, 38, 0.98), rgba(20, 20, 25, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.025);
    color: #f5f3f7;
}

#authModal .dg-auth-modal__back {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
}

@media (min-width: 641px) {
    #authModal .dg-auth-modal__content::-webkit-scrollbar { width: 7px; }
    #authModal .dg-auth-modal__content::-webkit-scrollbar-track { background: transparent; }
    #authModal .dg-auth-modal__content::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.24);
        background-clip: padding-box;
    }
    #authModal .dg-auth-modal__content::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.36); }
}

#authModal .dg-auth-modal__intro { text-align: center; }
#authModal .dg-auth-modal__logo { width: 64px; height: 64px; object-fit: contain; margin: -4px auto 4px; }
#authModal .dg-auth-modal__intro h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; }
#authModal .dg-auth-modal__intro p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.4; }

#authModal .dg-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

#authModal .dg-auth-tab {
    position: relative;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#authModal .dg-auth-tab::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #8b5cf6, #c15cff);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
    opacity: 0;
}

#authModal .dg-auth-tab.is-active { color: #b968ff; }
#authModal .dg-auth-tab.is-active::after { opacity: 1; }

#authModal .dg-auth-panel.modal-body {
    padding: 16px 0 0 !important;
    overflow: visible !important;
}

#authModal .dg-auth-stage {
    display: grid;
    min-height: 0;
}

#authModal .dg-auth-panel {
    grid-area: 1 / 1;
    transition: opacity 190ms ease, transform 190ms cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

#authModal .dg-auth-panel.is-auth-exiting { opacity: 0; pointer-events: none; }
#authModal .dg-auth-panel.is-auth-exiting--forward { transform: translateX(-12px); }
#authModal .dg-auth-panel.is-auth-exiting--back { transform: translateX(12px); }
#authModal .dg-auth-panel.is-auth-entering { opacity: 0; pointer-events: none; }
#authModal .dg-auth-panel.is-auth-entering--forward { transform: translateX(12px); }
#authModal .dg-auth-panel.is-auth-entering--back { transform: translateX(-12px); }
#authModal .dg-auth-panel.is-auth-entering.is-auth-entering-active { opacity: 1; transform: translateX(0); }
#authModal .dg-auth-modal__intro h2,
#authModal .dg-auth-modal__intro p { transition: opacity 190ms ease, transform 190ms ease; }
#authModal.is-auth-switching .dg-auth-modal__intro h2,
#authModal.is-auth-switching .dg-auth-modal__intro p { animation: dgAuthCopySwap 190ms ease both; }

@keyframes dgAuthCopySwap {
    0% { opacity: .45; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

#authModal .dg-auth-panel[hidden] { display: none !important; }
#authModal .form-group { margin: 0 0 14px; }
#authModal .form-group label { margin-bottom: 8px; color: rgba(255, 255, 255, 0.92); font-size: 14px; font-weight: 600; }
#authModal .form-group label span { color: rgba(255, 255, 255, 0.48); font-weight: 400; }

#authModal .dg-auth-input-wrap,
#authModal .dg-password-wrap { position: relative; }

#authModal .dg-auth-input-wrap > svg,
#authModal .dg-auth-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.48);
    pointer-events: none;
    z-index: 1;
}

#authModal .form-group input:not([type="checkbox"]) {
    width: 100%;
    height: 50px;
    padding: 0 46px !important;
    border: 1px solid #34343d !important;
    border-radius: 13px !important;
    outline: none;
    background: #18181d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

#authModal .form-group input:not([type="checkbox"])::placeholder { color: rgba(255, 255, 255, 0.34) !important; }
#authModal .form-group input:not([type="checkbox"]):focus {
    border-color: #9d55f5 !important;
    box-shadow: 0 0 0 3px rgba(157, 85, 245, 0.13), 0 0 18px rgba(139, 92, 246, 0.10);
}

#authModal .dg-password-toggle,
#editProfileModal .dg-password-toggle {
    right: 8px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.60);
}
#authModal .dg-password-toggle svg,
#editProfileModal .dg-password-toggle svg { width: 20px; height: 20px; }

#authModal .dg-auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -2px 0 18px;
    font-size: 14px;
}

#authModal .dg-auth-login-options .checkbox-label { margin: 0; font-weight: 400; align-items: center; }
#authModal .text-link,
#authModal .dg-auth-promo-toggle,
#authModal .dg-auth-switch-copy button { color: #b968ff; }

#authModal .dg-auth-primary {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border: 0 !important;
    border-radius: 11px;
    background: linear-gradient(90deg, #8b3ff0, #a43df2) !important;
    box-shadow: 0 8px 24px rgba(139, 63, 240, 0.22);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
}

#authModal #registerSubmitBtn:disabled {
    opacity: 1;
    background: #3c2856 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    box-shadow: none;
}

#authModal .dg-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
}
#authModal .dg-auth-divider::before,
#authModal .dg-auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.16); }

#authModal .dg-oauth-buttons { display: grid; gap: 8px; }
#authModal .dg-oauth-button {
    position: relative;
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 6px 48px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#authModal .dg-oauth-button:hover { border-color: rgba(185, 104, 255, 0.7); background: rgba(185, 104, 255, 0.08); }
#authModal .dg-oauth-button[disabled] { opacity: .55; cursor: wait; }
#authModal .dg-oauth-mark { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 800; }
#authModal .dg-oauth-mark--yandex { color: #fc3f1d; font-size: 22px; }
#authModal .dg-oauth-mark--vk { color: #6ea8ff; font-size: 14px; }

#authModal .dg-auth-switch-copy { margin: 14px 0 0; text-align: center; color: rgba(255, 255, 255, 0.58); font-size: 14px; }
#authModal .dg-auth-switch-copy button,
#authModal .dg-auth-promo-toggle { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
#authModal .dg-auth-promo-toggle {
    min-height: 0;
    margin: -2px 0 10px;
    color: #b968ff !important;
    -webkit-text-fill-color: #b968ff !important;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-shadow: none;
}
#authModal .dg-auth-promo-toggle:hover {
    color: #cf91ff !important;
    -webkit-text-fill-color: #cf91ff !important;
}
#authModal .dg-register-legal { gap: 8px; margin: 0 0 14px; }
#authModal .dg-register-consent { font-size: 13px; }
#authModal .form-hint { color: rgba(255, 255, 255, 0.48) !important; }

@media (max-width: 640px) {
    #authModal .dg-auth-modal__content {
        width: min(94vw, 520px);
        height: auto;
        max-height: 92vh;
        padding: 24px 20px 26px;
        overflow: auto;
        scrollbar-gutter: auto;
        scrollbar-width: auto;
        border-radius: 18px;
    }
    #authModal .dg-auth-modal__logo { width: 54px; height: 54px; }
    #authModal .dg-auth-modal__intro h2 { font-size: 24px; }
    #authModal .dg-auth-tabs { margin-top: 18px; }
    #authModal .dg-auth-panel.modal-body { padding-top: 18px !important; }
    #authModal .dg-auth-login-options { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    #authModal .dg-auth-panel,
    #authModal .dg-auth-modal__intro h2,
    #authModal .dg-auth-modal__intro p { transition: none !important; animation: none !important; }
}

/* Auth fields: explicit light/dark colors, including browser password autofill. */
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]),
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):autofill,
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):-webkit-autofill,
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:hover,
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:focus {
    background-color: #18181d !important;
    border-color: #3d3d47 !important;
    color: #f7f5fa !important;
    -webkit-text-fill-color: #f7f5fa !important;
    caret-color: #f7f5fa !important;
    -webkit-box-shadow: 0 0 0 1000px #18181d inset !important;
    box-shadow: 0 0 0 1000px #18181d inset !important;
}

body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):focus,
body.dg-theme-dark #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:focus {
    border-color: #9d55f5 !important;
    box-shadow: 0 0 0 3px rgba(157, 85, 245, 0.13), 0 0 0 1000px #18181d inset !important;
    -webkit-box-shadow: 0 0 0 3px rgba(157, 85, 245, 0.13), 0 0 0 1000px #18181d inset !important;
}

body:not(.dg-theme-dark) #authModal .dg-auth-modal__content {
    border-color: rgba(30, 31, 38, 0.20);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 244, 249, 0.99));
    box-shadow: 0 24px 70px rgba(32, 24, 40, 0.20), 0 0 0 1px rgba(30, 31, 38, 0.025);
    color: #211f26;
}

body:not(.dg-theme-dark) #authModal .dg-auth-modal__intro p,
body:not(.dg-theme-dark) #authModal .dg-auth-switch-copy,
body:not(.dg-theme-dark) #authModal .dg-auth-divider { color: rgba(33, 31, 38, 0.62); }
body:not(.dg-theme-dark) #authModal .dg-auth-tabs { border-bottom-color: rgba(33, 31, 38, 0.18); }
body:not(.dg-theme-dark) #authModal .dg-auth-tab { color: rgba(33, 31, 38, 0.68); }
body:not(.dg-theme-dark) #authModal .dg-auth-tab.is-active { color: #8740d8; }
body:not(.dg-theme-dark) #authModal .form-group label { color: #29262e; }
body:not(.dg-theme-dark) #authModal .form-group label span,
body:not(.dg-theme-dark) #authModal .form-hint { color: rgba(33, 31, 38, 0.56) !important; }

body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]),
body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):autofill,
body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):-webkit-autofill,
body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:hover,
body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:focus {
    background-color: #fff !important;
    border-color: #cbc7d0 !important;
    color: #211f26 !important;
    -webkit-text-fill-color: #211f26 !important;
    caret-color: #211f26 !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
}

body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):focus,
body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"]):-webkit-autofill:focus {
    border-color: #8b45df !important;
    box-shadow: 0 0 0 3px rgba(139, 69, 223, 0.12), 0 0 0 1000px #fff inset !important;
    -webkit-box-shadow: 0 0 0 3px rgba(139, 69, 223, 0.12), 0 0 0 1000px #fff inset !important;
}

body:not(.dg-theme-dark) #authModal .form-group input:not([type="checkbox"])::placeholder {
    color: rgba(33, 31, 38, 0.40) !important;
    -webkit-text-fill-color: rgba(33, 31, 38, 0.40) !important;
}

body:not(.dg-theme-dark) #authModal .dg-auth-input-wrap > svg,
body:not(.dg-theme-dark) #authModal .dg-auth-field-icon,
body:not(.dg-theme-dark) #authModal .dg-password-toggle { color: rgba(33, 31, 38, 0.52); }

body:not(.dg-theme-dark) #authModal .dg-oauth-button {
    border-color: rgba(33, 31, 38, 0.24);
    background: rgba(33, 31, 38, 0.035);
    color: #29262e;
}

/* Profile editor: visual language shared with the login card. */
#editProfileModal .modal-content.modal-large {
    width: min(94vw, 520px) !important;
    max-width: 520px !important;
    max-height: min(90vh, 820px) !important;
    border: 1px solid #4a4a55;
    border-radius: 18px;
    background: linear-gradient(160deg, #202027 0%, #15151a 72%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.025);
    color: #f7f5fa;
}

#editProfileModal .modal-header {
    position: relative;
    justify-content: center;
    min-height: 76px;
    padding: 22px 64px 14px;
    border-bottom: 0;
    background: transparent;
}

#editProfileModal .modal-header h2 {
    margin: 0;
    color: #f7f5fa;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 750;
    text-align: center;
}

#editProfileModal .modal-header .modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
}

#editProfileModal .modal-header .modal-close:hover,
#editProfileModal .modal-header .modal-close:focus-visible {
    border-color: #b968ff;
    background: rgba(185, 104, 255, 0.10);
    color: #fff;
    outline: none;
}

#editProfileModal #editProfileForm.modal-body {
    padding: 10px 32px 30px;
    scrollbar-color: rgba(185, 104, 255, 0.58) transparent;
    scrollbar-width: thin;
}

#editProfileModal .form-group {
    margin: 0 0 15px;
}

#editProfileModal .form-group label {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 650;
}

#editProfileModal .form-group input:not([type="file"]),
#editProfileModal .form-group textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px !important;
    border: 1px solid #34343d !important;
    border-radius: 13px !important;
    outline: none;
    background: #18181d !important;
    color: #f7f5fa !important;
    -webkit-text-fill-color: #f7f5fa !important;
    caret-color: #f7f5fa;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#editProfileModal .form-group textarea {
    min-height: 104px;
    resize: vertical;
}

#editProfileModal .form-group input:not([type="file"]):focus,
#editProfileModal .form-group textarea:focus {
    border-color: #9d55f5 !important;
    background: #18181d !important;
    box-shadow: 0 0 0 3px rgba(157, 85, 245, 0.13), 0 0 18px rgba(139, 92, 246, 0.10) !important;
}

#editProfileModal .form-group input::placeholder,
#editProfileModal .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.34) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.34) !important;
    opacity: 1;
}

#editProfileModal .form-group .text-secondary,
#editProfileModal #editEmailHint {
    color: rgba(255, 255, 255, 0.52) !important;
    font-size: 12px;
}

#editProfileModal #editAvatar {
    width: 100%;
    padding: 10px;
    border: 1px solid #34343d;
    border-radius: 13px;
    background: #18181d;
    color: rgba(255, 255, 255, 0.82);
}

#editProfileModal #editProfileForm .dg-edit-profile-actions > button[type="submit"] {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    border: 0 !important;
    border-radius: 11px;
    background: linear-gradient(90deg, #8b3ff0, #a43df2) !important;
    box-shadow: 0 8px 24px rgba(139, 63, 240, 0.24);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
}

#editProfileModal #editProfileForm .dg-edit-profile-actions > button[type="submit"]:hover,
#editProfileModal #editProfileForm .dg-edit-profile-actions > button[type="submit"]:focus-visible {
    filter: brightness(1.08);
    outline: none;
}

body:not(.dg-theme-dark) #editProfileModal .modal-content.modal-large {
    border-color: rgba(30, 31, 38, 0.20);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 244, 249, 0.99));
    box-shadow: 0 24px 70px rgba(32, 24, 40, 0.20), 0 0 0 1px rgba(30, 31, 38, 0.025);
    color: #211f26;
}

body:not(.dg-theme-dark) #editProfileModal .modal-header h2,
body:not(.dg-theme-dark) #editProfileModal .form-group label {
    color: #29262e;
}

body:not(.dg-theme-dark) #editProfileModal .modal-header .modal-close {
    border-color: rgba(33, 31, 38, 0.72);
    color: #29262e;
}

body:not(.dg-theme-dark) #editProfileModal .form-group input:not([type="file"]),
body:not(.dg-theme-dark) #editProfileModal .form-group textarea,
body:not(.dg-theme-dark) #editProfileModal #editAvatar {
    border-color: #cbc7d0 !important;
    background: #fff !important;
    color: #211f26 !important;
    -webkit-text-fill-color: #211f26 !important;
    caret-color: #211f26 !important;
}

body:not(.dg-theme-dark) #editProfileModal .form-group .text-secondary,
body:not(.dg-theme-dark) #editProfileModal #editEmailHint {
    color: rgba(33, 31, 38, 0.56) !important;
}

body:not(.dg-theme-dark) #editProfileModal .form-group input::placeholder,
body:not(.dg-theme-dark) #editProfileModal .form-group textarea::placeholder {
    color: rgba(33, 31, 38, 0.40) !important;
    -webkit-text-fill-color: rgba(33, 31, 38, 0.40) !important;
}

@media (max-width: 640px) {
    #editProfileModal .modal-content.modal-large {
        width: min(94vw, 520px) !important;
        max-height: 92vh !important;
        border-radius: 18px;
    }

    #editProfileModal #editProfileForm.modal-body {
        padding: 8px 20px 26px;
    }

    #editProfileModal .modal-header {
        min-height: 70px;
        padding: 20px 56px 12px;
    }

    #editProfileModal .modal-header h2 {
        font-size: 22px;
    }
}

/* Profile editor: reference layout, preserving the existing form controls. */
#editProfileModal .modal-content.modal-large {
    width: min(94vw, 900px) !important;
    max-width: 900px !important;
    max-height: min(90vh, 860px) !important;
    font-family: inherit;
    border-color: rgba(151, 105, 214, 0.58);
    background: linear-gradient(145deg, rgba(27, 27, 37, 0.99), rgba(14, 14, 22, 0.99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 36px rgba(139, 63, 240, 0.10);
}

#editProfileModal .modal-header {
    min-height: 76px;
    padding: 18px 68px 10px;
}

#editProfileModal .dg-edit-profile-heading {
    min-width: 0;
    text-align: center;
}

#editProfileModal .dg-edit-profile-heading h2 {
    font-size: 24px;
}

#editProfileModal .dg-edit-profile-heading p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1.3;
}

#editProfileModal #editProfileForm.modal-body {
    padding: 8px 16px 16px;
}

#editProfileModal .dg-edit-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "main avatar"
        "security socials"
        "about about";
    gap: 10px;
}

#editProfileModal .dg-edit-profile-card--main { grid-area: main; }
#editProfileModal .dg-edit-profile-card--avatar { grid-area: avatar; }
#editProfileModal .dg-edit-profile-card--security { grid-area: security; }
#editProfileModal .dg-edit-profile-card--socials { grid-area: socials; }
#editProfileModal .dg-edit-profile-card--about { grid-area: about; }

#editProfileModal .dg-edit-profile-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(126, 101, 159, 0.34);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(35, 35, 49, 0.78), rgba(21, 21, 31, 0.86));
}

#editProfileModal .dg-edit-profile-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f7f5fa;
    text-align: left;
    cursor: default;
}

#editProfileModal .dg-edit-profile-section-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

#editProfileModal .dg-edit-profile-section-title > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

#editProfileModal .dg-edit-profile-section-title strong {
    color: #f6f1fb;
    font-size: 15px;
    line-height: 1.2;
}

#editProfileModal .dg-edit-profile-section-title small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editProfileModal .dg-edit-profile-section-icon,
#editProfileModal .dg-edit-social-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(173, 92, 255, 0.24);
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(132, 47, 211, 0.58), rgba(73, 27, 120, 0.42));
    color: #c66dff;
}

#editProfileModal .dg-edit-profile-section-icon svg,
#editProfileModal .dg-edit-social-icon svg {
    width: 17px;
    height: 17px;
}

#editProfileModal .dg-edit-profile-chevron {
    display: none;
    width: 18px;
    height: 18px;
    color: #bd62fb;
    transition: transform .2s ease;
}

#editProfileModal .dg-edit-profile-section-body {
    display: block;
}

#editProfileModal .dg-edit-about-preview {
    display: none;
}

#editProfileModal .form-group {
    margin-bottom: 9px;
}

#editProfileModal .form-group:last-child {
    margin-bottom: 0;
}

#editProfileModal .form-group label {
    margin-bottom: 4px;
    font-size: 13px;
}

#editProfileModal .form-group input:not([type="file"]),
#editProfileModal .form-group textarea {
    min-height: 33px;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: 14px;
}

#editProfileModal .form-group textarea {
    min-height: 78px;
}

#editProfileModal .dg-edit-about-group {
    position: relative;
}

#editProfileModal .dg-edit-about-group textarea {
    padding-bottom: 20px !important;
}

#editProfileModal .dg-edit-about-count {
    position: absolute;
    right: 8px;
    bottom: 6px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    pointer-events: none;
}

#editProfileModal #editEmailHint,
#editProfileModal .form-group .text-secondary {
    margin: 4px 0 0;
    font-size: 11px;
}

#editProfileModal .dg-edit-social-field {
    display: grid;
    grid-template-columns: 31px 51px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

#editProfileModal .dg-edit-social-field label {
    margin: 0;
}

#editProfileModal .dg-edit-social-icon {
    width: 31px;
    height: 31px;
    border-radius: 8px;
}

#editProfileModal .dg-edit-social-icon--vk {
    font-size: 12px;
    font-weight: 800;
}

#editProfileModal .dg-password-wrap > input {
    padding-right: 46px !important;
}

#editProfileModal .dg-edit-avatar-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3px 0 7px;
}

#editProfileModal .dg-edit-avatar-preview {
    position: relative;
    width: 160px;
    height: 160px;
}

#editProfileModal .dg-edit-avatar-preview img {
    width: 100%;
    height: 100%;
    border: 2px solid #be62ff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 22px rgba(182, 80, 255, 0.25);
}

#editProfileModal .dg-edit-avatar-button {
    margin: 0 !important;
    padding: 7px 18px;
    border: 1px solid rgba(180, 81, 244, 0.58);
    border-radius: 8px;
    background: rgba(132, 47, 211, 0.17);
    color: #dda7ff !important;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

#editProfileModal .dg-edit-avatar-actions {
    position: relative;
    display: grid;
    grid-template-columns: 31px auto 31px;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

#editProfileModal .dg-edit-avatar-button {
    grid-column: 2;
}

#editProfileModal .dg-edit-avatar-help-button {
    grid-column: 3;
}

#editProfileModal .dg-edit-avatar-help-button {
    display: grid;
    place-items: center;
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid rgba(180, 81, 244, 0.58);
    border-radius: 50%;
    background: rgba(132, 47, 211, 0.17);
    color: #dda7ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.dg-standard-help-button {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(180, 81, 244, 0.58);
    border-radius: 50%;
    background: rgba(132, 47, 211, 0.17);
    color: #dda7ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.dg-standard-help-button:hover,
.dg-standard-help-button:focus-visible,
.dg-standard-help-button[aria-expanded="true"] {
    border-color: #be62ff;
    outline: none;
    background: rgba(132, 47, 211, 0.30);
}

.dg-standard-help-tooltip {
    position: relative;
    z-index: 2;
    margin: 0 16px 12px;
    padding: 10px 12px;
    border: 1px solid rgba(180, 81, 244, 0.45);
    border-radius: 8px;
    background: #24152e;
    color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    font-size: 12px;
    line-height: 1.4;
}

.dg-standard-help-tooltip[hidden] {
    display: none;
}

.dg-standard-help-tooltip p {
    margin: 0;
}

body:not(.dg-theme-dark) .dg-standard-help-button {
    border-color: rgba(151, 55, 225, 0.48);
    background: linear-gradient(145deg, rgba(190, 98, 255, 0.20), rgba(151, 55, 225, 0.10));
    color: #9b32dc;
}

body:not(.dg-theme-dark) .dg-standard-help-tooltip {
    border-color: rgba(151, 55, 225, 0.30);
    background: #fff;
    color: rgba(33, 31, 38, 0.72);
    box-shadow: 0 8px 22px rgba(54, 35, 71, 0.16);
}

#editProfileModal .dg-edit-avatar-help-button:hover,
#editProfileModal .dg-edit-avatar-help-button:focus-visible {
    border-color: #be62ff;
    outline: none;
    background: rgba(132, 47, 211, 0.30);
}

#editProfileModal .dg-edit-avatar-help {
    position: absolute;
    z-index: 2;
    top: calc(100% + 7px);
    right: 0;
    display: none;
    width: max-content;
    padding: 6px 9px;
    border: 1px solid rgba(180, 81, 244, 0.45);
    border-radius: 7px;
    background: #24152e;
    color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    font-size: 10px;
}

#editProfileModal .dg-edit-avatar-help-button:hover + .dg-edit-avatar-help,
#editProfileModal .dg-edit-avatar-help-button:focus-visible + .dg-edit-avatar-help {
    display: block;
}

#editProfileModal #editAvatar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#editProfileModal .dg-edit-profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
}

#editProfileModal .dg-edit-profile-actions > button {
    min-height: 44px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
}

#editProfileModal .dg-edit-profile-cancel {
    border: 1px solid rgba(199, 205, 224, 0.48);
    color: #f7f5fa;
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-heading p,
body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-section-title small,
body:not(.dg-theme-dark) #editProfileModal .dg-edit-about-count {
    color: rgba(33, 31, 38, 0.52);
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-card {
    border-color: rgba(92, 62, 123, 0.19);
    background: rgba(255, 255, 255, 0.68);
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-section-icon,
body:not(.dg-theme-dark) #editProfileModal .dg-edit-social-icon {
    border-color: rgba(151, 55, 225, 0.30);
    background: linear-gradient(145deg, rgba(190, 98, 255, 0.24), rgba(151, 55, 225, 0.14));
    color: #a83de8;
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-avatar-button {
    border-color: rgba(151, 55, 225, 0.48);
    background: linear-gradient(145deg, rgba(190, 98, 255, 0.20), rgba(151, 55, 225, 0.10));
    color: #9b32dc !important;
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-avatar-help-button {
    border-color: rgba(151, 55, 225, 0.48);
    background: linear-gradient(145deg, rgba(190, 98, 255, 0.20), rgba(151, 55, 225, 0.10));
    color: #9b32dc;
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-avatar-help {
    border-color: rgba(151, 55, 225, 0.30);
    background: #fff;
    color: rgba(33, 31, 38, 0.72);
    box-shadow: 0 8px 22px rgba(54, 35, 71, 0.16);
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-section-toggle,
body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-section-title strong {
    color: #29262e;
}

body:not(.dg-theme-dark) #editProfileModal .dg-edit-profile-cancel {
    color: #29262e;
}

@media (max-width: 640px) {
    #editProfileModal {
        --dg-edit-profile-safe-top: max(8px, var(--dg-safe-top-gap, env(safe-area-inset-top, 0px)));
        --dg-edit-profile-safe-bottom: max(8px, var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        box-sizing: border-box;
        padding-top: var(--dg-edit-profile-safe-top);
        padding-bottom: var(--dg-edit-profile-safe-bottom);
    }

    #editProfileModal .modal-content.modal-large {
        width: min(94vw, 430px) !important;
        height: calc(100dvh - var(--dg-edit-profile-safe-top) - var(--dg-edit-profile-safe-bottom));
        min-height: 0;
        max-height: calc(100dvh - var(--dg-edit-profile-safe-top) - var(--dg-edit-profile-safe-bottom)) !important;
        border-radius: 18px;
    }

    #editProfileModal .modal-header {
        flex: 0 0 auto;
        min-height: 50px;
        padding: 13px 46px 5px;
    }

    #editProfileModal .modal-header .modal-close {
        top: 9px;
        left: 10px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        border: 0;
        background: rgba(111, 47, 164, 0.23);
        color: #e3a7ff;
    }

    #editProfileModal .dg-edit-profile-heading h2 {
        font-size: 19px;
    }

    #editProfileModal .dg-edit-profile-heading p {
        display: none;
    }

    #editProfileModal #editProfileForm.modal-body {
        flex: 1 1 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 3px 11px 8px;
    }

    #editProfileModal .dg-edit-profile-grid {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    #editProfileModal .dg-edit-profile-card--avatar { order: -3; }
    #editProfileModal .dg-edit-profile-card--main { order: -2; }
    #editProfileModal .dg-edit-profile-card--about { order: -1; }
    #editProfileModal .dg-edit-profile-card--socials { order: 0; }
    #editProfileModal .dg-edit-profile-card--security { order: 1; }

    #editProfileModal .dg-edit-profile-card {
        padding: 7px 9px;
        border-radius: 11px;
    }

    #editProfileModal .dg-edit-profile-card--avatar {
        padding: 0 8px 5px;
        border: 0;
        background: transparent;
    }

    #editProfileModal .dg-edit-profile-card--avatar .dg-edit-profile-section-toggle {
        display: none;
    }

    #editProfileModal .dg-edit-profile-card--avatar .dg-edit-profile-section-body {
        display: block !important;
    }

    #editProfileModal .dg-edit-profile-section-toggle {
        min-height: 27px;
        margin: 0;
        cursor: pointer;
    }

    #editProfileModal .dg-edit-profile-section-title small {
        display: none;
    }

    #editProfileModal .dg-edit-profile-card--about .dg-edit-about-preview {
        display: block;
        max-width: min(68vw, 290px);
    }

    #editProfileModal .dg-edit-profile-section-icon {
        width: 24px;
        height: 24px;
        border: 0;
        background: transparent;
    }

    #editProfileModal .dg-edit-profile-section-title strong {
        font-size: 14px;
    }

    #editProfileModal .dg-edit-profile-chevron {
        display: block;
    }

    #editProfileModal .dg-edit-profile-card.is-open .dg-edit-profile-chevron {
        transform: rotate(180deg);
    }

    #editProfileModal .dg-edit-profile-card:not(.is-open) .dg-edit-profile-section-body {
        display: none;
    }

    #editProfileModal .dg-edit-profile-section-body {
        padding-top: 5px;
    }

    #editProfileModal .dg-edit-avatar-preview {
        width: 68px;
        height: 68px;
    }

    #editProfileModal .dg-edit-avatar-field {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 0;
    }

    #editProfileModal .dg-edit-avatar-preview {
        grid-row: auto;
    }

    #editProfileModal .dg-edit-avatar-actions {
        display: contents;
    }

    #editProfileModal .dg-edit-avatar-help-button {
        display: none;
    }

    #editProfileModal .dg-edit-avatar-help {
        position: static;
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.44);
        box-shadow: none;
    }

    body:not(.dg-theme-dark) #editProfileModal .dg-edit-avatar-help {
        background: transparent;
        color: rgba(33, 31, 38, 0.52);
        box-shadow: none;
    }

    #editProfileModal .dg-edit-avatar-button {
        padding: 5px 15px;
        font-size: 12px;
    }

    #editProfileModal .dg-edit-avatar-help {
        font-size: 9px;
    }

    #editProfileModal .form-group {
        margin-bottom: 5px;
    }

    #editProfileModal .form-group label {
        margin-bottom: 2px;
        font-size: 12px;
        line-height: 1.1;
    }

    #editProfileModal .form-group input:not([type="file"]),
    #editProfileModal .form-group textarea {
        padding: 5px 8px !important;
        font-size: 13px;
        line-height: 1.25;
    }

    #editProfileModal .form-group input:not([type="file"]) {
        min-height: 31px;
    }

    #editProfileModal .form-group textarea {
        min-height: 52px;
        height: 52px;
        resize: none;
    }

    #editProfileModal #editEmailHint,
    #editProfileModal .form-group .text-secondary {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.15;
    }

    #editProfileModal .dg-edit-about-count {
        right: 6px;
        bottom: 4px;
        font-size: 9px;
    }

    #editProfileModal .dg-edit-social-field {
        grid-template-columns: 31px minmax(0, 1fr);
    }

    #editProfileModal .dg-edit-social-field label {
        display: none;
    }

    #editProfileModal .dg-edit-profile-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: block;
        margin-top: 6px;
    }

    #editProfileModal .dg-edit-profile-cancel {
        display: none;
    }

    #editProfileModal .dg-edit-profile-actions > button[type="submit"] {
        min-height: 38px;
        font-size: 15px;
        box-shadow: 0 8px 20px rgba(139, 63, 240, 0.22);
    }
}

.dg-profile-email-recovery-notice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 4px;
    padding: 8px 12px;
    border: 1px solid rgba(220, 38, 38, 0.42);
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.11);
    color: #dc2626;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.dg-profile-email-recovery-notice:hover,
.dg-profile-email-recovery-notice:focus-visible {
    background: rgba(220, 38, 38, 0.18);
    outline: none;
}

.dg-profile-email-recovery-notice svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 641px) {
    body.dg-page-profile #profileModal.dg-profile-page-view .dg-profile-email-recovery-notice {
        margin-left: max(0px, calc((100% - 1300px) / 2));
        transform: none;
    }
}

body:not(.dg-theme-dark) #authModal .dg-auth-divider::before,
body:not(.dg-theme-dark) #authModal .dg-auth-divider::after { background: rgba(33, 31, 38, 0.18); }

/* =====================================================
   Home feed hero — banner layout from the 2026 redesign
   The artwork can be replaced centrally through these variables.
   ===================================================== */
.dg-home-hero-stack {
    padding: 12px 0 0;
    min-height: 0;
}

.dg-home-hero-stack > .filters-container {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.dg-home-hero-stack > .dg-blog-hero-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.dg-home-hero-stack + .main-content {
    padding-top: 10px;
}

.dg-home-hero-stack .dg-hero-slider,
.dg-home-hero-stack .dg-hero-quick-actions {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.dg-home-hero-stack .dg-hero-slider {
    margin-bottom: 12px;
}

.dg-home-hero-stack .dg-hero-slider__viewport {
    border-radius: 18px;
}

.dg-home-hero-stack .dg-hero-slide,
.dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    box-sizing: border-box;
}

.dg-home-hero-stack .dg-hero-slide {
    align-items: stretch;
    overflow: hidden;
}

.dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    color: #fff;
    box-shadow: none !important;
}

body .dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-doll-finds-hero) {
    background:
        linear-gradient(90deg, rgba(10,10,14,.91), rgba(10,10,14,.48)),
        url('/images/background.jpg') center/cover no-repeat !important;
}

.dg-home-hero-stack .dg-contest-week {
    display: flex !important;
    align-items: center;
    padding: 24px 28px !important;
}

.dg-home-hero-stack .dg-contest-week__split {
    width: 100%;
    height: 100%;
    align-items: stretch;
}

.dg-home-hero-stack .dg-contest-week__panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 42px;
}

@media (min-width: 641px) {
    .dg-home-hero-stack .dg-contest-week__winner-card {
        margin-top: auto;
        margin-bottom: auto;
    }

    .dg-home-hero-stack .dg-contest-week__panel--current .dg-contest-week__leader:not([hidden]) {
        margin-top: auto;
    }

    .dg-home-hero-stack .dg-contest-week__panel--current .dg-contest-week__leaderboard {
        margin-bottom: auto;
    }

    .dg-home-hero-stack .dg-contest-week__panel--current .dg-contest-week__leader[hidden] + .dg-contest-week__leaderboard {
        margin-top: auto;
    }
}

.dg-home-hero-stack .dg-referral-hero {
    display: flex !important;
    align-items: center;
    padding: 24px 28px 66px !important;
}

.dg-home-hero-stack .dg-referral-hero__eyebrow {
    position: absolute;
    top: 24px;
    left: 28px;
}

.dg-home-hero-stack .dg-referral-hero__content {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    height: 100%;
}

.dg-home-hero-stack .dg-referral-hero__visual,
.dg-home-hero-stack .dg-referral-hero__copy {
    align-self: center;
}

.dg-home-hero-stack .dg-doll-finds-hero {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px 66px !important;
}

.dg-home-hero-stack .dg-doll-finds-hero > .dg-contest-week__eyebrow {
    top: 24px;
    left: 28px;
}

.dg-home-hero-stack .dg-doll-finds-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: min(440px, 55%);
}

.dg-home-hero-stack .dg-doll-finds-hero__text {
    margin-top: 8px !important;
}

.dg-home-hero-stack .dg-giveaway-hero {
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    background: #0b0910 !important;
}

.dg-home-hero-stack .dg-giveaway-hero__img-wrap,
.dg-home-hero-stack .dg-giveaway-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.dg-home-hero-stack .dg-giveaway-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}

.dg-home-hero-stack .dg-giveaway-hero__shade {
    z-index: 1;
    background: linear-gradient(90deg, rgba(8,6,12,.90), rgba(8,6,12,.42), rgba(8,6,12,.10));
}

.dg-home-hero-stack .dg-giveaway-hero__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 28px 66px;
    box-sizing: border-box;
    pointer-events: none;
}

.dg-home-hero-stack .dg-giveaway-hero__title {
    max-width: min(440px, 55%);
    margin: 8px 0 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
}

.dg-home-hero-stack .dg-ad-hero {
    background: #0b0910 !important;
}

.dg-home-hero-stack .dg-ad-hero__picture,
.dg-home-hero-stack .dg-ad-hero__picture img,
.dg-home-hero-stack .dg-ad-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dg-home-hero-stack .dg-ad-hero__picture img {
    object-fit: cover;
    object-position: center;
}

.dg-home-hero-stack .dg-ad-hero__shade { background: linear-gradient(90deg, rgba(38,18,50,.62) 0%, rgba(38,18,50,.27) 40%, rgba(38,18,50,.08) 58%, rgba(38,18,50,0) 74%); }

.dg-home-hero-stack .dg-ad-hero__content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: min(480px, 55%);
    max-width: none;
    height: 100%;
    padding: 24px 28px;
    box-sizing: border-box;
}

.dg-home-hero-stack .dg-ad-hero__label {
    z-index: 3;
}

.dg-hero-info-btn__label {
    display: none;
}

@media (min-width: 641px) {
    .dg-home-hero-stack .dg-hero-info-btn {
        top: auto !important;
        right: auto !important;
        bottom: 47px !important;
        left: 28px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        line-height: 18px;
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack .dg-hero-info-btn {
        color: #7c3aed !important;
        -webkit-text-fill-color: #7c3aed !important;
    }

    body.dg-theme-dark .dg-home-hero-stack .dg-hero-info-btn {
        color: #a78bfa !important;
        -webkit-text-fill-color: #a78bfa !important;
    }

    .dg-home-hero-stack .dg-hero-info-btn__label {
        display: inline;
    }

    .dg-home-hero-stack .dg-hero-info-btn svg,
    .dg-home-hero-stack .dg-hero-info-btn i {
        display: none !important;
    }
}

.dg-hero-slider__controls {
    display: none;
}

.dg-hero-slider__controls[hidden] {
    display: none !important;
}

.dg-hero-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(12,10,16,.10);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
}

.dg-hero-slider__arrow:is(:hover, :focus-visible, :active) {
    background: rgba(12,10,16,.20);
    outline-color: rgba(255,255,255,.65);
}

.dg-hero-slider__arrow svg {
    width: 21px;
    height: 21px;
}

.dg-home-hero-stack .dg-hero-slider__dots {
    position: absolute;
    bottom: 14px;
    left: 28px;
    z-index: 7;
    display: flex !important;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.dg-home-hero-stack .dg-hero-slider__dots[hidden],
.dg-home-hero-stack .dg-hero-slider--single .dg-hero-slider__dots {
    display: none !important;
}

.dg-home-hero-stack .dg-hero-slider__dot {
    width: 9px;
    height: 9px;
    background: rgba(255,255,255,.55);
}

.dg-home-hero-stack .dg-hero-slider__dot:is(:hover, :focus-visible) {
    background: rgba(255,255,255,.85);
    outline-color: #fff;
}

.dg-home-hero-stack .dg-hero-slider__dot--active,
.dg-home-hero-stack .dg-hero-slider__dot--active:is(:hover, :focus-visible) {
    background: #a78bfa;
}

body.dg-theme-dark .dg-home-hero-stack .dg-hero-slider__dot:not(.dg-hero-slider__dot--active) {
    background: rgba(255,255,255,.55) !important;
}

body.dg-theme-dark .dg-home-hero-stack .dg-hero-slider__dot--active {
    background: #a78bfa !important;
}

.dg-hero-quick-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding-left: 16px;
    border: 0;
    border-radius: 0 0 16px 16px;
    background: transparent;
    overflow: hidden;
}

body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body:not(.dg-auth-logged-in) .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn {
    display: none !important;
}

.dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dg-hero-quick-actions .dg-hero-rounds,
.dg-hero-quick-actions .dg-hero-rounds__viewport {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

.dg-hero-quick-actions .dg-hero-rounds__viewport {
    padding: 10px 16px 10px 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.dg-hero-quick-actions .dg-hero-rounds__viewport::-webkit-scrollbar {
    display: none;
}

.dg-hero-quick-actions .dg-hero-rounds__track {
    justify-content: flex-start !important;
    gap: 20px !important;
    width: max-content;
    min-width: 100%;
}

.dg-hero-quick-actions .hero-round-btn {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
}

.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
}

@media (max-width: 640px) {
    .dg-home-hero-stack {
        padding-top: 0;
    }

    .dg-home-hero-stack > .filters-container {
        margin-bottom: 12px;
        padding: 0 10px;
    }

    .dg-home-hero-stack > .dg-blog-hero-wrap {
        padding: 0;
    }

    .dg-home-hero-stack .dg-hero-slider {
        margin-bottom: 0;
    }

    .dg-home-hero-stack .dg-hero-slider__viewport {
        border-radius: 0 !important;
    }

    .dg-home-hero-stack .dg-hero-slide,
    .dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    .dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
        border-radius: 0 !important;
    }

    .dg-home-hero-stack .dg-contest-week,
    .dg-home-hero-stack .dg-referral-hero,
    .dg-home-hero-stack .dg-doll-finds-hero {
        padding: 14px 14px 48px !important;
    }

    .dg-home-hero-stack .dg-contest-week__panel {
        padding-bottom: 28px;
    }

    .dg-home-hero-stack .dg-referral-hero__eyebrow,
    .dg-home-hero-stack .dg-doll-finds-hero > .dg-contest-week__eyebrow {
        top: 12px !important;
        left: 14px !important;
    }

    .dg-home-hero-stack .dg-giveaway-hero__content,
    .dg-home-hero-stack .dg-ad-hero__content {
        width: 66%;
        padding: 14px 14px 48px;
    }

    .dg-home-hero-stack .dg-giveaway-hero__title {
        max-width: 100%;
        font-size: 21px;
    }

    .dg-home-hero-stack .dg-hero-info-btn {
        top: auto !important;
        right: auto !important;
        bottom: 10px !important;
        left: 12px !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .dg-home-hero-stack .dg-hero-info-btn__label {
        display: none !important;
    }

    .dg-home-hero-stack .dg-hero-info-btn svg,
    .dg-home-hero-stack .dg-hero-info-btn i {
        display: block !important;
        width: 17px;
        height: 17px;
    }

    .dg-hero-slider__controls {
        right: 12px;
        left: 12px;
    }

    .dg-hero-slider__arrow {
        width: 32px;
        height: 32px;
    }

    .dg-hero-slider__arrow svg {
        width: 17px;
        height: 17px;
    }

    .dg-home-hero-stack .dg-hero-slider__dots {
        bottom: 21px;
        right: 14px;
        left: auto;
    }

    .dg-hero-quick-actions {
        min-height: 76px;
        gap: 14px;
        padding-left: 14px;
        border-width: 0;
        border-radius: 0;
    }

    .dg-hero-quick-actions .dg-hero-rounds__viewport {
        padding: 10px 14px 10px 0 !important;
    }

    .dg-hero-quick-actions .dg-hero-rounds__track {
        gap: 20px !important;
    }

    .dg-hero-quick-actions .hero-round-btn {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    .dg-home-hero-stack + .main-content {
        padding-top: 0;
    }
}

/* Shared hero mode: info/article pages inherit the home-feed geometry. */
body.dg-page-info-blog-mobile:not(.dg-page-messages) .main-content.dg-blog-hero-wrap.dg-home-hero-stack {
    width: 100%;
    padding: 12px 0 0 !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slider {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slider__dots {
    display: flex !important;
}

body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slider__dots[hidden],
body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slider--single .dg-hero-slider__dots {
    display: none !important;
}

/* Подписи под существующими быстрыми действиями главного экрана. */
.dg-home-hero-stack .dg-hero-quick-actions {
    min-height: 94px;
}

.dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 78px !important;
    min-height: 78px !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 !important;
    overflow: visible;
    text-indent: 0;
}

.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
    border-radius: 0 !important;
}

.dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn .dg-hero-round-img,
.dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img,
.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn__preview {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
}

.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn::before {
    width: 56px;
    height: 56px;
    inset: 0 auto auto 0;
    border-radius: 50%;
}

.dg-home-hero-stack .dg-hero-quick-actions .dg-hero-action-label {
    display: block;
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .dg-home-hero-stack .dg-hero-quick-actions {
        min-height: 98px;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 82px !important;
        min-height: 82px !important;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn__preview {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn::before {
        width: 60px;
        height: 60px;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .main-content.dg-blog-hero-wrap.dg-home-hero-stack {
        padding-top: 0 !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slider {
        margin-bottom: 0 !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slide,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-contest-week,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-referral-hero,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-doll-finds-hero {
        padding: 14px 14px 48px !important;
    }

    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-info-btn {
        top: auto !important;
        right: auto !important;
        bottom: 10px !important;
        left: 12px !important;
    }

    .dg-home-hero-stack .dg-hero-info-btn,
    body.dg-page-info-blog-mobile:not(.dg-page-messages) .dg-home-hero-stack .dg-hero-info-btn {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }

    .dg-home-hero-stack .dg-hero-info-btn__label {
        display: inline !important;
    }

    .dg-home-hero-stack .dg-hero-info-btn svg,
    .dg-home-hero-stack .dg-hero-info-btn i {
        display: none !important;
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack .dg-hero-info-btn {
        color: #7c3aed !important;
        -webkit-text-fill-color: #7c3aed !important;
    }

    body.dg-theme-dark .dg-home-hero-stack .dg-hero-info-btn {
        color: #a78bfa !important;
        -webkit-text-fill-color: #a78bfa !important;
    }
}

/* Рекламный hero: вертикальная композиция как у слайда «Кукольные находки». */
.dg-home-hero-stack .dg-ad-hero__content {
    justify-content: center;
    padding: 0 28px;
}

.dg-home-hero-stack .dg-ad-hero__advertiser {
    position: absolute;
    top: 24px;
    left: 28px;
}

.dg-home-hero-stack .dg-ad-hero__content h2 {
    margin: 0;
    line-height: 1.08;
}

.dg-home-hero-stack .dg-ad-hero__content p {
    margin: 8px 0 0;
    line-height: 1.3;
}

.dg-home-hero-stack .dg-ad-hero__cta {
    position: absolute;
    bottom: 49px;
    left: 28px;
}

@media (max-width: 640px) {
    .dg-home-hero-stack .dg-ad-hero__content {
        padding: 0 14px;
    }

    .dg-home-hero-stack .dg-ad-hero__advertiser {
        top: 14px;
        left: 14px;
    }

    .dg-home-hero-stack .dg-ad-hero__content h2 {
        margin: 0;
        line-height: 1.12;
    }

    .dg-home-hero-stack .dg-ad-hero__content p {
        margin-top: 7px;
        line-height: 1.3;
    }

    .dg-home-hero-stack .dg-ad-hero__cta {
        bottom: 10px;
        left: 14px;
    }
}

/* Unified destructive action in contextual menus: icon + text, red in both themes. */
:root {
    --dg-delete-action-color: #dc2626;
    --dg-delete-action-hover-bg: rgba(220, 38, 38, 0.09);
}

body.dg-theme-dark {
    --dg-delete-action-color: #f87171;
    --dg-delete-action-hover-bg: rgba(248, 113, 113, 0.14);
}

:is(
    .dg-delete-action,
    .msg-menu-item.msg-del,
    .more-container .action-menu .dg-short-delete-btn,
    .more-container .action-menu .delete-btn,
    .dg-post-menu-popover button[data-post-delete],
    .dg-post-menu-popover button[data-article-card-delete]
) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    color: var(--dg-delete-action-color) !important;
    -webkit-text-fill-color: var(--dg-delete-action-color) !important;
    text-align: left !important;
}

:is(
    .dg-delete-action,
    .msg-menu-item.msg-del,
    .more-container .action-menu .dg-short-delete-btn,
    .more-container .action-menu .delete-btn,
    .dg-post-menu-popover button[data-post-delete],
    .dg-post-menu-popover button[data-article-card-delete]
) :is(i, svg, .lucide) {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    .dg-delete-action,
    .msg-menu-item.msg-del,
    .more-container .action-menu .dg-short-delete-btn,
    .more-container .action-menu .delete-btn,
    .dg-post-menu-popover button[data-post-delete],
    .dg-post-menu-popover button[data-article-card-delete]
):is(:hover, :active, :focus-visible) {
    color: var(--dg-delete-action-color) !important;
    -webkit-text-fill-color: var(--dg-delete-action-color) !important;
    background: var(--dg-delete-action-hover-bg) !important;
}

/* Publication action menus keep every icon and label on one left-aligned grid. */
:is(#dollModal, #shortModal, #heroShortsViewerWrap) .more-container .action-menu .menu-item {
    justify-content: flex-start;
    text-align: left;
}

:is(#dollModal, #shortModal, #heroShortsViewerWrap) .more-container .action-menu .menu-item :is(i, svg, .lucide) {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* Upload forms: one structure for desktop and mobile, with a stable modal footer. */
.dg-mobile-form-section-toggle {
    display: none;
}

#uploadModal > .modal-content,
#dgShortUploadModal > .modal-content {
    display: flex;
    flex-direction: column;
}

.dg-upload-section-body {
    min-width: 0;
}

.upload-right > .dg-upload-section + .dg-upload-section {
    margin-top: 18px;
}

.dg-upload-submit-bar {
    flex: 0 0 auto;
    padding: 0 24px 24px;
    background: transparent;
}

:is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dg-upload-submit-bar .btn {
    width: 100%;
    min-height: 42px;
    margin: 0;
}

:is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-background-hint {
    grid-column: 1 / -1;
}

:is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft {
    min-width: 0;
}

:is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft:disabled {
    cursor: default;
    opacity: 0.45;
}

body:not(.dg-theme-dark) :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft {
    border-color: rgba(124, 58, 237, 0.48);
    background: #fff;
    color: #7c3aed;
    -webkit-text-fill-color: #7c3aed;
}

body:not(.dg-theme-dark) :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft:is(:hover, :focus-visible, :active) {
    border-color: rgba(109, 40, 217, 0.72);
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    -webkit-text-fill-color: #6d28d9;
}

body:not(.dg-theme-dark) :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft:disabled {
    border-color: rgba(107, 114, 128, 0.34);
    background: rgba(107, 114, 128, 0.08);
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
}

body.dg-theme-dark :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft {
    border-color: rgba(192, 132, 252, 0.62);
    background: rgba(139, 92, 246, 0.14);
    color: #d8b4fe;
    -webkit-text-fill-color: #d8b4fe;
}

body.dg-theme-dark :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft:is(:hover, :focus-visible, :active) {
    border-color: rgba(216, 180, 254, 0.86);
    background: rgba(168, 85, 247, 0.24);
    color: #f3e8ff;
    -webkit-text-fill-color: #f3e8ff;
}

body.dg-theme-dark :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft:disabled {
    border-color: rgba(161, 161, 170, 0.28);
    background: rgba(255, 255, 255, 0.055);
    color: #a1a1aa;
    -webkit-text-fill-color: #a1a1aa;
}

.dg-short-custom-poster {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--c-border-rgb), 0.16);
}

.dg-short-custom-poster__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dg-short-custom-poster__heading > span {
    font-size: 14px;
    font-weight: 700;
}

.dg-short-custom-poster__heading small,
.dg-short-custom-poster > small {
    color: var(--c-muted, #6b7280);
    font-size: 11px;
    line-height: 1.35;
}

.dg-short-custom-poster__preview {
    position: relative;
    align-self: center;
    width: 112px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 2px solid var(--c-primary, #8b5cf6);
    border-radius: 12px;
    background: rgba(var(--c-border-rgb), 0.08);
    box-shadow: 0 8px 22px rgba(80, 42, 130, 0.18);
}

.dg-short-custom-poster__preview[hidden] {
    display: none;
}

.dg-short-custom-poster__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-short-custom-poster__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.78);
    color: #fff;
    cursor: pointer;
}

.dg-short-custom-poster__remove svg {
    width: 15px;
    height: 15px;
}

.dg-short-custom-poster__pick {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dg-short-capture-poster {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dg-short-capture-poster svg {
    width: 17px;
    height: 17px;
}

#dgShortUploadModal .dg-short-capture-poster:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.dg-short-custom-poster__pick svg {
    width: 17px;
    height: 17px;
}

.dg-short-upload-ready {
    display: none;
}

#dgShortUploadModal .dg-short-upload-preview-host.dg-custom-video-player > .dg-custom-video-controls {
    --dg-video-accent: #b875ff;
    left: 10px;
    right: 10px;
    bottom: 8px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        "progress progress progress"
        "current duration .";
    column-gap: 0;
    row-gap: 7px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #f7f2fb;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-custom-video-controls [data-video-current] {
    grid-area: current;
    min-width: 0;
    text-align: left;
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-custom-video-controls [data-video-progress] {
    grid-area: progress;
    width: 100%;
    min-width: 0;
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-custom-video-controls [data-video-duration] {
    grid-area: duration;
    min-width: 0;
    text-align: left;
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-custom-video-controls [data-video-duration]::before {
    content: '/';
    margin: 0 5px;
    opacity: 0.65;
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress::-webkit-slider-thumb {
    width: 0;
    height: 0;
    border: 0;
    box-shadow: none;
    transition: width .12s ease, height .12s ease;
}

#dgShortUploadModal .dg-short-upload-preview-host:hover .dg-post-video-progress::-webkit-slider-thumb,
#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress:focus::-webkit-slider-thumb,
#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress:active::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}

#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
}

#dgShortUploadModal .dg-short-upload-preview-host:hover .dg-post-video-progress::-moz-range-thumb,
#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress:focus::-moz-range-thumb,
#dgShortUploadModal .dg-short-upload-preview-host .dg-post-video-progress:active::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
}

body:not(.dg-theme-dark) #dgShortUploadModal .dg-short-upload-preview-summary .text-muted {
    color: #a7afbf;
    -webkit-text-fill-color: #a7afbf;
}

body:not(.dg-theme-dark) #dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster) {
    border-color: rgba(124, 58, 237, 0.48);
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
    -webkit-text-fill-color: #7c3aed;
}

body:not(.dg-theme-dark) #dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster):is(:hover, :focus-visible, :active):not(:disabled) {
    border-color: rgba(109, 40, 217, 0.72);
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    -webkit-text-fill-color: #6d28d9;
}

body.dg-theme-dark #dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster) {
    border-color: rgba(192, 132, 252, 0.62);
    background: rgba(139, 92, 246, 0.14);
    color: #d8b4fe;
    -webkit-text-fill-color: #d8b4fe;
}

body.dg-theme-dark #dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster):is(:hover, :focus-visible, :active):not(:disabled) {
    border-color: rgba(216, 180, 254, 0.86);
    background: rgba(168, 85, 247, 0.24);
    color: #f3e8ff;
    -webkit-text-fill-color: #f3e8ff;
}

#dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster):focus-visible {
    outline: 2px solid rgba(168, 85, 247, 0.42);
    outline-offset: 2px;
}

#dgShortUploadModal :is(.dg-short-custom-poster__pick, .dg-short-capture-poster):disabled {
    border-color: rgba(var(--c-border-rgb), 0.28);
    background: rgba(var(--c-border-rgb), 0.08);
    color: var(--c-muted, #6b7280);
    -webkit-text-fill-color: var(--c-muted, #6b7280);
    cursor: not-allowed;
    opacity: 0.62;
}

/* DollShow create layout is compact only on the desktop side of the shared 640/641 boundary. */
@media (min-width: 641px) {
    #dgShortUploadModal .dg-custom-video-player--surface-scrub > video {
        cursor: default;
    }

    #dgShortUploadModal .dg-short-upload-preview-host {
        overflow: visible;
    }

    #dgShortUploadModal .dg-short-upload-preview-host > video {
        border-radius: inherit;
    }

    #dgShortUploadModal .dg-video-frame-step {
        width: 34px;
        height: 34px;
    }

    #dgShortUploadModal .dg-video-frame-step--prev {
        right: calc(100% + 10px);
        left: auto;
    }

    #dgShortUploadModal .dg-video-frame-step--next {
        right: auto;
        left: calc(100% + 10px);
    }

    #dgShortUploadModal.dg-short-upload-modal--create > .modal-content {
        height: min(840px, calc(100dvh - 40px));
    }

    #dgShortUploadModal.dg-short-upload-modal--create .modal-body {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-container {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        height: 100%;
        gap: 20px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-left,
    #dgShortUploadModal.dg-short-upload-modal--create .upload-right {
        min-width: 0;
        min-height: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-right {
        display: flex;
        flex-direction: column;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready {
        min-height: 48px;
        padding: 7px 12px;
        border-style: solid;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready > :is(i, svg, p) {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready .dg-short-upload-ready {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        text-align: left;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready > span {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
        min-width: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready strong {
        color: var(--c-success, #16a34a);
        white-space: nowrap;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready small {
        color: var(--c-muted, #6b7280);
        font-size: 12px;
        white-space: nowrap;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 10px;
        border: 1px solid rgba(139, 92, 246, 0.42);
        border-radius: 9px;
        background: rgba(139, 92, 246, 0.08);
        color: var(--c-primary, #7c3aed);
        font: inherit;
        font-size: 13px;
        font-weight: 650;
        cursor: pointer;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video:is(:hover, :focus-visible) {
        border-color: var(--c-primary, #7c3aed);
        background: rgba(139, 92, 246, 0.14);
        outline: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortVideoBlock {
        margin-top: 10px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-preview-stage {
        position: relative;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortVideoBlock > div {
        padding: 8px !important;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-preview-summary {
        display: none !important;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-preview-host {
        width: auto;
        height: min(460px, calc(100dvh - 430px));
        max-width: 100%;
        max-height: none;
        margin: 0 auto;
        aspect-ratio: 9 / 16;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-preview-host video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-cover-controls {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready + .dg-short-preview-stage .dg-short-cover-controls {
        position: static;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 7px;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin: 8px auto 0;
        padding: 7px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(16, 17, 22, 0.72), rgba(9, 10, 14, 0.92));
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortPosterWrap {
        flex: 0 0 110px;
        width: 110px;
        min-width: 110px;
        gap: 0 !important;
        margin: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortPosterWrap > span {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-capture-poster {
        width: 110px;
        height: 68px;
        min-height: 68px;
        flex-direction: column;
        gap: 3px;
        padding: 5px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.1;
        white-space: normal;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster {
        position: relative;
        flex: 0 0 110px;
        width: 110px;
        height: 68px;
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__heading {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__preview {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 110px;
        height: 68px;
        aspect-ratio: auto;
        border-radius: 8px;
        border-width: 2px;
        box-shadow: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__preview img {
        object-fit: contain;
        background: #111318;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__remove {
        z-index: 4;
        top: 3px;
        right: 3px;
        width: 22px;
        height: 22px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick {
        position: absolute;
        z-index: 2;
        inset: 0;
        width: 110px;
        min-height: 68px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 5px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.1;
        white-space: normal;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick::after {
        content: "Своя";
        display: block;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick :is(svg, i),
    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick::after {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-right > .dg-upload-section + .dg-upload-section {
        margin-top: 12px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortDescription {
        height: 136px;
        min-height: 136px;
        max-height: 136px;
        resize: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-right > [data-dg-upload-section="tags"] > .dg-upload-section-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .upload-right > [data-dg-upload-section="tags"] .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-upload-background-hint {
        margin: 0 0 7px;
        padding: 0;
        max-width: none;
        text-align: center;
        font-size: 12px;
    }

    body.dg-theme-dark #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video {
        border-color: rgba(192, 132, 252, 0.58);
        background: rgba(139, 92, 246, 0.14);
        color: #d8b4fe;
    }

    body.dg-theme-dark #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video:is(:hover, :focus-visible) {
        border-color: rgba(216, 180, 254, 0.86);
        background: rgba(168, 85, 247, 0.24);
        color: #f3e8ff;
    }
}

@media (max-width: 640px) {
    #uploadModal > .modal-content,
    #dgShortUploadModal > .modal-content {
        width: calc(100% - 24px);
        max-width: 430px;
        height: auto;
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    #uploadModal .modal-header.dg-modal-header--back,
    #dgShortUploadModal .modal-header.dg-modal-header--back {
        min-height: 56px;
        padding: 10px 14px !important;
    }

    #uploadModal .modal-body,
    #dgShortUploadModal .modal-body {
        padding: 12px;
    }

    #uploadModal .upload-container,
    #dgShortUploadModal .upload-container {
        gap: 10px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-preview-host {
        width: auto;
        height: min(430px, 52dvh);
        max-width: 100%;
        max-height: none;
        aspect-ratio: 9 / 16;
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: grid;
        width: 100%;
        height: 100%;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: inherit;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime > span {
        display: grid;
        width: 76px;
        height: 76px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        color: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body:not(.dg-theme-dark).iphone-device #dgShortUploadModal .dg-short-iphone-prime > span {
        background: rgba(31, 24, 40, 0.78);
    }

    body.dg-theme-dark.iphone-device #dgShortUploadModal .dg-short-iphone-prime > span {
        background: rgba(18, 14, 24, 0.84);
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime:is(:active, :focus-visible) > span {
        border-color: rgba(216, 180, 254, 0.92);
        background: rgba(139, 92, 246, 0.82);
        outline: none;
        transform: scale(0.96);
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime:focus-visible {
        outline: none;
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime:disabled > span {
        opacity: 0.72;
    }

    body.iphone-device #dgShortUploadModal .dg-short-iphone-prime svg {
        width: 34px;
        height: 34px;
        margin-left: 4px;
        fill: currentColor;
        stroke: currentColor;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready {
        min-height: 48px;
        padding: 7px 10px;
        border-style: solid;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready > :is(i, svg, p) {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready .dg-short-upload-ready {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready > span {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
        min-width: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready strong {
        overflow: hidden;
        color: var(--c-success, #16a34a);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-upload-ready small {
        flex: 0 0 auto;
        color: var(--c-muted, #6b7280);
        font-size: 12px;
        white-space: nowrap;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 9px;
        border: 1px solid rgba(139, 92, 246, 0.42);
        border-radius: 9px;
        background: rgba(139, 92, 246, 0.08);
        color: var(--c-primary, #7c3aed);
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        cursor: pointer;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video:is(:hover, :focus-visible) {
        border-color: var(--c-primary, #7c3aed);
        background: rgba(139, 92, 246, 0.14);
        outline: none;
    }

    body.dg-theme-dark #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video {
        border-color: rgba(192, 132, 252, 0.58);
        background: rgba(139, 92, 246, 0.14);
        color: #d8b4fe;
    }

    body.dg-theme-dark #dgShortUploadModal.dg-short-upload-modal--create .dg-dollshow-replace-video:is(:hover, :focus-visible) {
        border-color: rgba(216, 180, 254, 0.86);
        background: rgba(168, 85, 247, 0.24);
        color: #f3e8ff;
    }

    #dgShortUploadModal .dg-video-frame-step {
        display: none;
    }

    .upload-right {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .upload-right > .dg-upload-section + .dg-upload-section {
        margin-top: 0;
    }

    .dg-upload-section {
        padding: 8px;
        border: 1px solid rgba(var(--c-border-rgb), 0.18);
        border-radius: 13px;
        background: rgba(var(--c-border-rgb), 0.035);
    }

    .dg-mobile-form-section-toggle {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 6px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--c-text, #111);
        font: inherit;
        font-weight: 700;
        text-align: left;
    }

    .dg-mobile-form-section-toggle svg {
        width: 18px;
        height: 18px;
    }

    .dg-upload-section-title {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    .dg-upload-section-title svg {
        color: var(--c-primary, #8b5cf6);
        stroke: currentColor;
    }

    .dg-upload-section-chevron {
        transition: transform .18s ease;
    }

    .dg-upload-section.is-open > .dg-mobile-form-section-toggle .dg-upload-section-chevron {
        transform: rotate(180deg);
    }

    .dg-upload-section:not(.is-open) > .dg-upload-section-body {
        display: none !important;
    }

    .dg-upload-section.is-open > .dg-upload-section-body {
        padding-top: 8px;
    }

    .dg-short-custom-poster {
        margin-top: 10px;
        padding-top: 10px;
    }

    .dg-short-custom-poster__preview {
        width: 96px;
        border-radius: 10px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-cover-controls {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortUploadArea.is-video-ready + .dg-short-preview-stage .dg-short-cover-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 7px;
        min-width: 0;
        margin-top: 8px;
        padding: 7px;
        overflow-x: hidden;
        border: 1px solid rgba(var(--c-border-rgb), 0.22);
        border-radius: 12px;
        background: rgba(var(--c-border-rgb), 0.07);
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortPosterWrap {
        display: block !important;
        width: 100%;
        gap: 0 !important;
        margin: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortPosterWrap[style*="display: none"] {
        display: none !important;
    }

    #dgShortUploadModal.dg-short-upload-modal--create #dgShortPosterWrap > span {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-capture-poster {
        width: 100%;
        height: 68px;
        min-height: 68px;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
        border-radius: 8px;
        font-size: 9px;
        line-height: 1.1;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster {
        position: relative;
        width: 100%;
        height: 68px;
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__heading {
        display: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__preview,
    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 68px;
        min-height: 68px;
        margin: 0;
        border-radius: 8px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__preview {
        z-index: 1;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__remove {
        z-index: 3;
        top: 3px;
        right: 3px;
        width: 22px;
        height: 22px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__preview img {
        object-fit: contain;
        background: #111318;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick {
        z-index: 2;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
        font-size: 9px;
        line-height: 1.1;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick span {
        font-size: 0;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster__pick span::after {
        content: "Своя";
        font-size: 9px;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    #dgShortUploadModal.dg-short-upload-modal--create .dg-short-custom-poster.is-selected .dg-short-custom-poster__pick :is(svg, i, span) {
        display: none;
    }

    #uploadModal .upload-area,
    #dgShortUploadModal .upload-area {
        padding: 28px 14px;
    }

    #uploadModal .form-group,
    #dgShortUploadModal .form-group {
        margin-bottom: 10px;
    }

    #uploadModal textarea,
    #dgShortUploadModal textarea {
        min-height: 88px;
        height: 88px;
    }

    :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 12px max(12px, env(safe-area-inset-bottom));
        background: transparent;
    }

    :is(#uploadModal, #dgShortUploadModal) .dg-upload-submit-bar .dg-upload-delete-draft {
        min-width: 0;
        padding-inline: 10px;
    }

    .dg-upload-submit-bar .btn {
        min-height: 40px;
        border-radius: 10px;
    }

    .dg-home-hero-stack .dg-hero-quick-actions {
        min-height: 82px;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 72px !important;
        min-height: 72px !important;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn__preview,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn::before {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-action-label {
        font-size: 12px;
        line-height: 14px;
    }

    .dg-blog-title {
        position: static;
        left: auto;
        width: auto;
        height: auto;
        overflow: visible;
        margin: 2px 0 10px;
        font-size: 24px;
        line-height: 1.2;
    }

    .dg-blog-breadcrumbs {
        font-size: 12px;
    }

    .dg-left-sidebar {
        width: 248px;
        max-width: 78vw;
    }

    .dg-sidebar-inner {
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .dg-sidebar-light .dg-sb-section {
        padding: 8px 12px 10px;
    }

    .dg-sb-summary {
        padding: 8px 12px;
    }

    .dg-sb-details .dg-sb-nav,
    .dg-sb-details .dg-sb-placeholder,
    .dg-sb-details .dg-sb-link-more {
        padding: 2px 12px 8px;
    }
}

/* Карточка пересланной сторис в мобильном чате. */
@media (min-width: 641px) {
    body.dg-theme-dark #chatMessages .dg-vk-body .dg-msg-story-card {
        background: linear-gradient(150deg, #343735, #242622);
        border: 1px solid rgba(91, 94, 100, 0.32);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 640px) {
    #chatMessages .msg-bubble .dg-msg-story-card {
        display: flex;
        flex-direction: column;
        width: min(300px, calc(100vw - 112px));
        padding: 12px;
        border: 1px solid rgba(91, 94, 100, 0.32);
        border-radius: 20px;
        background: linear-gradient(150deg, #343735, #242622);
        color: #f4f4f5;
        box-shadow: none;
    }

    #chatMessages .msg-bubble .dg-msg-story-card__author-row {
        order: -1;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 15px;
    }

    #chatMessages .msg-bubble .dg-msg-story-card__avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    #chatMessages .msg-bubble .dg-msg-story-card__body {
        padding: 10px 2px 0;
    }

    #chatMessages .msg-bubble .dg-msg-story-card__label-row {
        color: #d5d8d3;
        font-size: 12px;
    }

    body:not(.dg-theme-dark) #chatMessages .msg-bubble .dg-msg-story-card {
        background: linear-gradient(150deg, #f2f2ef, #e6e8e3);
        border-color: rgba(72, 76, 74, 0.18);
        color: #22252a;
    }

    body:not(.dg-theme-dark) #chatMessages .msg-bubble .dg-msg-story-card__label-row {
        color: #555b60;
    }

    body.dg-theme-dark #chatMessages .msg-bubble .dg-msg-story-card {
        background: linear-gradient(150deg, #343735, #242622);
        border: 1px solid rgba(91, 94, 100, 0.32);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

}

/* Иерархия раскрывающихся разделов боковой навигации. */
.dg-left-sidebar .dg-sb-details { border-bottom: 0; margin: 4px 0 12px; }
.dg-left-sidebar .dg-sb-details > .dg-sb-summary { border: 1px solid var(--c-border, #e2dfe8); border-radius: 14px; background: var(--c-bg-light, #fff); padding: 10px 13px; }
.dg-left-sidebar .dg-sb-details[open] > .dg-sb-summary, .dg-left-sidebar .dg-sb-details:has(.dg-sb-link-active) > .dg-sb-summary { background: rgba(var(--c-primary-rgb), .08); border-color: rgba(var(--c-primary-rgb), .2); color: var(--c-text, #252230); }
.dg-left-sidebar .dg-sb-details .dg-sb-nav { margin: 7px 12px 0; padding: 2px 0 2px 12px; border-left: 1px solid var(--c-border, #e2dfe8); gap: 3px; }
.dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link { border-radius: 11px; margin: 0; padding: 9px 11px; line-height: 1.3; background: transparent; }
.dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link-active { background: rgba(var(--c-primary-rgb), .14); color: var(--c-primary, #8b5cf6); font-weight: 650; }
.dg-left-sidebar .dg-sb-details > .dg-sb-summary:focus-visible, .dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link:focus-visible { outline: 2px solid var(--c-primary, #8b5cf6); outline-offset: 2px; }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details > .dg-sb-summary { background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 14px !important; color: #fff !important; }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details[open] > .dg-sb-summary, body.dg-theme-dark .dg-left-sidebar .dg-sb-details:has(.dg-sb-link-active) > .dg-sb-summary { background: rgba(139,92,246,.11) !important; border-color: rgba(139,92,246,.25) !important; }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details .dg-sb-nav { border-left-color: rgba(255,255,255,.14); }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link { background: transparent !important; border: 1px solid transparent !important; border-radius: 11px !important; padding: 9px 11px !important; margin: 0 !important; color: #d2cedb !important; -webkit-text-fill-color: #d2cedb !important; }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.dg-theme-dark .dg-left-sidebar .dg-sb-details .dg-sb-nav > .dg-sb-link-active { background: rgba(139,92,246,.28) !important; border-color: rgba(139,92,246,.35) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

@media (max-width: 640px) {
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-story-card) {
        border: 0 !important;
        box-shadow: none !important;
    }

    body.dg-theme-dark #chatMessages .msg-bubble .dg-msg-story-card,
    body:not(.dg-theme-dark) #chatMessages .msg-bubble .dg-msg-story-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Сторис: существующие аватар, имя и подпись лежат поверх превью. */
body.dg-theme-dark #chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card,
body:not(.dg-theme-dark) #chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#chatMessages .dg-msg-story-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .52), transparent 26%, transparent 67%, rgba(0, 0, 0, .62));
    pointer-events: none;
}

#chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card__author-row {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    left: 10px;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

#chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card__body {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

body.dg-theme-dark #chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card__label-row,
body:not(.dg-theme-dark) #chatMessages :is(.dg-vk-body, .msg-bubble) .dg-msg-story-card__label-row {
    color: #fff;
}

#chatMessages .dg-msg-story-card__avatar {
    border: 1px solid rgba(255, 255, 255, .8);
}

#chatMessages .dg-msg-story-card__thumb-wrap,
#chatMessages .dg-msg-story-card .dg-msg-att[data-kind="story"] {
    border-radius: inherit;
}

/* Размеры вложений в переписке. Одиночное фото использует свои пропорции. */
@media (min-width: 641px) {
    #chatMessages .dg-msg-attachments--photos-1 {
        display: block;
        width: max-content;
        max-width: min(520px, 100%);
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att[data-kind="photo"] {
        width: max-content;
        max-width: 100%;
        aspect-ratio: auto;
        background: transparent;
        border-radius: 14px;
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att-img {
        width: auto;
        height: auto;
        max-width: min(520px, 100%);
        max-height: 440px;
        object-fit: contain;
        border-radius: inherit;
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att--sized-photo[data-kind="photo"] {
        width: min(var(--dg-photo-reserved-width), 520px, 78vw);
        aspect-ratio: var(--dg-photo-reserved-ratio);
    }
    #chatMessages .dg-msg-attachments--photos-2,
    #chatMessages .dg-msg-attachments--photos-3,
    #chatMessages .dg-msg-attachments--photos-4,
    #chatMessages .dg-msg-attachments--photos-5 {
        width: min(580px, 100%);
        max-width: 580px;
        gap: 5px;
    }
    #chatMessages .dg-msg-attachments:not(.dg-msg-attachments--photos):has(> .dg-msg-att[data-kind="video"]),
    #chatMessages .dg-msg-att[data-kind="video"] {
        width: min(520px, 100%);
        max-width: 560px;
    }
    #chatMessages .dg-vk-body .dg-msg-story-card {
        width: min(260px, 100%);
    }
}

#chatMessages .dg-msg-att[data-kind="video"] {
    background: transparent;
    border-radius: 14px;
}
#chatMessages .dg-msg-att[data-kind="video"] .dg-msg-att-video {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: inherit;
}

@media (max-width: 640px) {
    #chatMessages .msg-row--mine .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos),
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) {
        width: fit-content;
        max-width: min(220px, calc(100vw - 112px));
    }
    #chatMessages .msg-row--mine .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) {
        margin-right: 8px;
    }
    #chatMessages .msg-row--peer .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos) {
        margin-left: 8px;
    }
    #chatMessages .msg-bubble .dg-msg-attachments--photos {
        width: min(220px, calc(100vw - 112px));
        max-width: min(220px, calc(100vw - 112px));
        aspect-ratio: 3 / 4;
    }
    #chatMessages .msg-bubble .dg-msg-attachments--photos-1 {
        display: block;
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att[data-kind="photo"] {
        width: 100%;
        height: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        overflow: hidden;
        background: transparent;
        border-radius: 12px;
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att-img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border-radius: inherit;
    }
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att--sized-photo[data-kind="photo"] {
        width: 100%;
        aspect-ratio: auto;
    }
    #chatMessages .msg-bubble .dg-msg-attachments--photos:not(.dg-msg-attachments--photos-1) {
        gap: 4px;
    }
    #chatMessages .dg-msg-attachments--photos-2 {
        grid-template-rows: minmax(0, 1fr);
    }
    #chatMessages .dg-msg-attachments--photos-3,
    #chatMessages .dg-msg-attachments--photos-4,
    #chatMessages .dg-msg-attachments--photos-5 {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    #chatMessages .dg-msg-attachments--photos:not(.dg-msg-attachments--photos-1) .dg-msg-att[data-kind="photo"] {
        height: 100%;
        aspect-ratio: auto;
        overflow: hidden;
    }
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) {
        border-radius: 14px;
    }
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) > .dg-msg-content {
        gap: 0;
    }
    #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) > .dg-msg-content > .msg-text {
        order: 1;
        width: 100%;
        padding: 9px 44px 19px 12px;
        box-sizing: border-box;
    }
    body:not(.dg-theme-dark) #chatMessages .msg-bubble:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) {
        background: rgba(17, 24, 39, 0.09) !important;
    }
    body.dg-theme-dark #chatMessages .msg-bubble--mine:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) {
        background: rgba(255, 255, 255, 0.10) !important;
    }
    body.dg-theme-dark #chatMessages .msg-bubble--peer:has(> .dg-msg-content > .dg-msg-attachments--photos):has(> .dg-msg-content > .msg-text) {
        background: rgba(255, 255, 255, 0.07) !important;
    }
    #chatMessages .msg-bubble .dg-msg-attachments:not(.dg-msg-attachments--photos):has(> .dg-msg-att[data-kind="video"]),
    #chatMessages .dg-msg-att[data-kind="video"] {
        width: min(86vw, 380px);
        max-width: min(86vw, 380px);
    }
    #chatMessages .msg-bubble .dg-msg-story-card {
        width: min(220px, calc(100vw - 112px));
    }
    #chatMessages .dg-msg-att[data-kind="video"] {
        border-radius: 12px;
    }
    #chatMessages .dg-msg-att[data-kind="video"] .dg-msg-att-video {
        max-height: 440px;
    }
}

#chatMessages .dg-msg-attachments--photos-1 .dg-msg-att--sized-photo[data-kind="photo"] > .dg-msg-att-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 640px) {
    #chatMessages .dg-msg-attachments--photos-1 .dg-msg-att--sized-photo[data-kind="photo"] > .dg-msg-att-img {
        object-fit: cover;
    }
}

/* Desktop home hero and recent site activity. */
@media (min-width: 641px) {
    .dg-home-activity__toggle { display: none; }
    .dg-home-hero-stack { padding-bottom: 0; }
    .dg-home-hero-stack + .main-content { padding-top: 0; }
    .dg-home-hero-stack > .filters-container { margin-bottom: 8px; padding-bottom: 4px; }
    .dg-home-hero-stack > .dg-blog-hero-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
        grid-template-rows: 360px 44px;
        gap: 8px 12px;
        align-items: start;
        padding: 0 16px;
    }
    .dg-home-hero-stack > .dg-blog-hero-wrap > .dg-hero-slider {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
    }
    .dg-home-hero-stack .dg-hero-slide,
    .dg-home-hero-stack .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
    }
    .dg-home-hero-stack > .dg-blog-hero-wrap > .dg-hero-quick-actions {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }
    .dg-home-hero-stack .dg-hero-quick-actions #heroActivityBtn { display: none !important; }
    .dg-home-hero-stack .dg-home-activity {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        box-sizing: border-box;
        min-width: 0;
        height: 360px;
        padding: 14px;
        border: 1px solid var(--c-border);
        border-radius: 18px;
        background: var(--c-bg-light, #fff);
        color: var(--c-text);
        overflow: hidden;
    }
    .dg-home-activity__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .dg-home-activity__header h2 { min-width: 0; margin: 0; font-size: 17px; line-height: 1.25; }
    .dg-home-activity__all { flex: 0 0 auto; border: 0; padding: 5px 0; background: transparent; color: var(--c-primary, #a855f7); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
    .dg-home-activity__all:is(:hover, :focus-visible, :active) { text-decoration: underline; outline-color: var(--c-primary, #a855f7); }
    .dg-home-activity__all:disabled { opacity: .5; cursor: default; }
    .dg-home-activity__list { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 7px; color: var(--c-text); font-size: 13px; }
    .dg-home-activity__item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 60px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 12px; background: rgba(var(--c-primary-rgb), .045); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
    .dg-home-activity__item:is(:hover, :focus-visible, :active) { border-color: var(--c-primary, #a855f7); background: rgba(var(--c-primary-rgb), .1); outline-color: var(--c-primary, #a855f7); }
    .dg-home-activity__item:disabled { opacity: .5; cursor: default; }
    .dg-home-activity__avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
    .dg-home-activity__preview { width: 42px; height: 48px; flex: 0 0 42px; border-radius: 7px; object-fit: cover; }
    .dg-home-activity__details { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
    .dg-home-activity__details :is(strong, span, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dg-home-activity__details strong { font-size: 12px; }
    .dg-home-activity__details small { color: var(--c-text); opacity: .62; font-size: 11px; }
    .dg-home-activity__arrow { color: var(--c-primary, #a855f7); font-size: 24px; }
    body.dg-theme-dark .dg-home-activity { background: #18191f; border-color: #45404d; color: #f4f0f8; }
    body.dg-theme-dark .dg-home-activity__list { color: #f4f0f8; }
    body.dg-theme-dark .dg-home-activity__item { background: #24232f; border-color: #46404f; color: #f4f0f8; }
    body.dg-theme-dark .dg-home-activity__item:is(:hover, :focus-visible, :active) { background: #373047; border-color: #c084fc; }
    body.dg-theme-dark .dg-home-activity__details small { color: #f4f0f8; }
}

@media (max-width: 640px) {
    .dg-home-hero-stack > .dg-blog-hero-wrap { display: flex; flex-direction: column; }
    .dg-home-hero-stack .dg-hero-slider { order: 1; }
    .dg-home-hero-stack .dg-home-activity {
        display: flex;
        flex-direction: column;
        order: 2;
        margin: 10px 12px 0;
        border: 1px solid var(--c-border);
        border-radius: 12px;
        background: var(--c-bg-light, #fff);
        color: var(--c-text);
        overflow: hidden;
    }
    .dg-home-hero-stack .dg-hero-quick-actions { order: 3; }
    .dg-home-hero-stack .dg-hero-quick-actions #heroActivityBtn { display: none !important; }
    .dg-home-activity__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 38px;
        padding: 7px 12px;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }
    .dg-home-activity__toggle:is(:hover, :focus-visible, :active) { background: rgba(var(--c-primary-rgb), .1); outline-color: var(--c-primary, #a855f7); }
    .dg-home-activity__toggle:disabled { opacity: .5; cursor: default; }
    .dg-home-activity__label { flex: 1; min-width: 0; }
    .dg-home-activity__new { flex: 0 0 auto; color: var(--c-primary, #a855f7); font-size: 11px; font-weight: 600; }
    .dg-home-activity__new[hidden] { display: none; }
    .dg-home-activity__chevron { width: 22px; height: 22px; flex: 0 0 22px; margin-left: 4px; color: var(--c-primary, #a855f7); }
    .dg-home-activity--expanded .dg-home-activity__chevron { transform: rotate(180deg); }
    .dg-home-activity__list { order: 1; display: flex; flex-direction: column; gap: 4px; max-height: 0; padding: 0 10px; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; color: var(--c-text); font-size: 12px; transition: max-height .3s ease, padding .3s ease, opacity .22s ease, visibility 0s linear .3s; }
    .dg-home-activity--expanded .dg-home-activity__list { max-height: 320px; padding: 2px 10px 4px; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height .3s ease, padding .3s ease, opacity .22s ease, visibility 0s; }
    .dg-home-activity__item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 57px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .dg-home-activity__item:is(:hover, :focus-visible, :active) { background: rgba(var(--c-primary-rgb), .1); outline-color: var(--c-primary, #a855f7); }
    .dg-home-activity__item:disabled { opacity: .5; cursor: default; }
    .dg-home-activity__avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; }
    .dg-home-activity__details { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
    .dg-home-activity__details :is(strong, span, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dg-home-activity__details small { opacity: .6; font-size: 10px; }
    .dg-home-activity__preview { width: 34px; height: 39px; flex: 0 0 34px; border-radius: 5px; object-fit: cover; }
    .dg-home-activity__arrow { color: var(--c-primary, #a855f7); font-size: 20px; }
    .dg-home-activity__header { order: 2; display: flex; justify-content: center; max-height: 0; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height .3s ease, padding .3s ease, opacity .22s ease, visibility 0s linear .3s; }
    .dg-home-activity--expanded .dg-home-activity__header { max-height: 60px; padding: 8px; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height .3s ease, padding .3s ease, opacity .22s ease, visibility 0s; }
    .dg-home-activity__header h2 { display: none; }
    .dg-home-activity__all { border: 0; padding: 5px 12px; background: transparent; color: var(--c-primary, #a855f7); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
    .dg-home-activity__all:is(:hover, :focus-visible, :active) { text-decoration: underline; outline-color: var(--c-primary, #a855f7); }
    .dg-home-activity__all:disabled { opacity: .5; cursor: default; }
    body.dg-theme-dark .dg-home-activity { background: #18191f; border-color: #45404d; color: #f4f0f8; }
    body.dg-theme-dark .dg-home-activity__item { border-color: #46404f; color: #f4f0f8; }
    body.dg-theme-dark .dg-home-activity__item:is(:hover, :focus-visible, :active),
    body.dg-theme-dark .dg-home-activity__toggle:is(:hover, :focus-visible, :active) { background: #373047; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .dg-home-activity__list,
    .dg-home-activity__header { transition: none; }
}

/* Tags quick action: the icon has its own accent color in both themes. */
.dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn svg {
    color: var(--c-primary) !important;
    stroke: var(--c-primary) !important;
}
body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn::after {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body:not(.dg-theme-dark) .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn::after {
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text) !important;
}

/* Mobile navigation and home actions use the existing controls. */
@media (max-width: 640px) {
    .dg-mobile-top-search .dg-mobile-search-inner {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .dg-mobile-search-logo,
    .dg-mobile-top-account { width: 36px; height: 36px; flex: 0 0 36px; }
    .dg-mobile-search-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
    body.dg-page-blog .dg-mobile-search-logo,
    body.dg-page-blog .dg-mobile-search-logo img {
        width: 38px;
        height: 38px;
    }
    body.dg-page-blog .dg-mobile-search-logo { flex-basis: 38px; }
    .dg-mobile-top-search .search-container { flex: 1 1 auto; min-width: 0; width: auto; }
    .dg-mobile-top-account { display: grid; place-items: center; padding: 0; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-bg-light); color: var(--c-text); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; overflow: hidden; }
    body:not(.dg-auth-logged-in) .dg-mobile-top-account { display: none; }
    .dg-mobile-top-account:is(:hover, :focus-visible, :active) { border-color: var(--c-primary); outline-color: var(--c-primary); }
    .dg-mobile-top-account img { display: none; width: 100%; height: 100%; object-fit: cover; }
    body.dg-auth-logged-in .dg-mobile-top-account img { display: block; }
    body.dg-auth-logged-in .dg-mobile-top-account span { display: none; }
    body.dg-theme-dark .dg-mobile-top-account { background: #24232f; border-color: #46404f; color: #f4f0f8; }
    body.dg-theme-dark .dg-mobile-top-account:is(:hover, :focus-visible, :active) { border-color: #c084fc; }

    /* Home header: match the gallery gutter and the visible avatar size. */
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) {
        --dg-home-gutter: 16px;
        --dg-mts-row: 42px;
    }
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-top-search,
    body.dg-theme-dark.dg-page-info-blog-mobile:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-top-search {
        padding-right: var(--dg-home-gutter) !important;
        padding-left: var(--dg-home-gutter) !important;
    }
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-search-logo,
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-search-logo img {
        width: 38px;
        height: 38px;
    }
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-search-logo { flex-basis: 38px; }
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-top-search .search-container { height: 42px; }
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) .dg-mobile-top-search .search-container input {
        height: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .dg-home-hero-stack > .filters-container { display: none; }
    .dg-home-hero-stack .dg-hero-quick-actions { order: 1; box-sizing: border-box; width: calc(100% - 32px); min-height: 0; margin: 4px auto 10px; padding: 0; gap: 0; }
    .dg-home-hero-stack .dg-hero-slider { order: 2; }
    .dg-home-hero-stack .dg-home-activity { order: 3; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds__viewport { box-sizing: border-box; width: 100%; min-width: 0; margin: 0 !important; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds { flex: 1 1 100%; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds__viewport { padding: 0 !important; overflow: visible; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds__track { width: 100%; min-width: 0; justify-content: space-between !important; gap: clamp(5px, 2vw, 12px) !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
        display: inline-flex;
        flex: 1 1 0 !important;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 4px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 4px 5px !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.62) !important;
        color: var(--c-text) !important;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
    }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn { flex-grow: 1.1 !important; }
    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    .dg-home-hero-stack .dg-hero-quick-actions #heroVideoStoryBtn { flex-grow: 1.4 !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #heroRoundBtn_vk { flex-grow: .95 !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #heroRoundBtn_articles { flex-grow: 1.2 !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn::after { content: 'Теги'; font-size: clamp(10px, 3.1vw, 12px); font-weight: 700; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn svg { width: clamp(17px, 5.2vw, 20px); height: clamp(17px, 5.2vw, 20px); flex: 0 0 auto; transform: scale(.8); }
    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn__preview {
        width: clamp(18px, 5.7vw, 22px) !important;
        height: clamp(18px, 5.7vw, 22px) !important;
        flex: 0 0 auto !important;
        border-radius: 50%;
    }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn::before { display: none !important; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-action-label { display: inline; min-width: 0; font-size: clamp(10px, 3.1vw, 12px); line-height: 1; overflow: visible; text-overflow: clip; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn:is(:hover, :focus-visible, :active),
    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn:is(:hover, :focus-visible, :active) { border-color: var(--c-primary) !important; outline-color: var(--c-primary); }
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn,
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-theme-dark.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn { background: rgba(36, 35, 47, 0.68) !important; border-color: #46404f !important; color: #f4f0f8 !important; }
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-action-label { color: #f4f0f8; -webkit-text-fill-color: #f4f0f8; }

    /* Home hero only; blog/article hero keeps its existing layout. */
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) {
        box-sizing: border-box;
        padding-right: var(--dg-home-gutter);
        padding-left: var(--dg-home-gutter);
    }
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-hero-quick-actions {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-hero-quick-actions :is(#mobileFilterBtn, .hero-round-btn, #heroShortsBtn, .dg-hero-video-story-btn) {
        height: 34px !important;
        min-height: 34px !important;
    }
    body.dg-auth-logged-in .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-hero-quick-actions #heroShortsBtn {
        height: 34px !important;
        min-height: 34px !important;
    }
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-home-activity {
        margin-right: 0;
        margin-left: 0;
    }
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-hero-slider__viewport,
    .dg-home-hero-stack:not(.dg-blog-hero-wrap) .dg-hero-slide > :is(.dg-contest-week, .dg-referral-hero, .dg-giveaway-hero, .dg-doll-finds-hero, .dg-ad-hero) {
        border-radius: 16px !important;
    }

    .dg-mobile-bottom-nav .dg-mobile-nav-item { flex-direction: column; justify-content: center; gap: 4px; padding: 2px 2px 1px; }
    .dg-mobile-bottom-nav .dg-mobile-nav-item i,
    .dg-mobile-bottom-nav .dg-mobile-nav-item .lucide { width: 24px; height: 24px; }
    .dg-mobile-bottom-nav .dg-mobile-nav-item:not(.dg-mobile-nav-upload) .lucide {
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        padding: 5px;
        border: 1px solid rgba(120, 110, 150, .28);
        border-radius: 11px;
        background: rgba(120, 110, 150, .04);
    }
    .dg-mobile-bottom-nav .dg-mobile-nav-item.active:not(.dg-mobile-nav-upload) .lucide {
        border-color: rgba(153, 95, 238, .76);
        background: rgba(132, 79, 215, .17);
        filter: drop-shadow(0 0 7px rgba(150, 91, 235, .48));
    }
    body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item:not(.dg-mobile-nav-upload) .lucide {
        border-color: rgba(255, 255, 255, .19);
        background: rgba(255, 255, 255, .025);
    }
    body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-item.active:not(.dg-mobile-nav-upload) .lucide {
        border-color: rgba(169, 112, 249, .78);
        background: rgba(132, 79, 215, .20);
    }
    .dg-mobile-bottom-nav .dg-mobile-nav-label { display: block; max-width: 100%; height: 14px; font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dg-mobile-bottom-nav .dg-mobile-nav-upload::before,
    .dg-mobile-bottom-nav .dg-mobile-nav-upload::after { box-sizing: border-box; top: 19px; width: 32px; height: 32px; }
    .dg-mobile-bottom-nav .dg-mobile-nav-upload i,
    .dg-mobile-bottom-nav .dg-mobile-nav-upload .lucide,
    .dg-mobile-bottom-nav .dg-mobile-nav-upload svg { box-sizing: border-box; position: relative; z-index: 2; width: 32px; height: 32px; padding: 5px; transform: none; }
    .dg-mobile-bottom-nav .dg-mobile-nav-item .badge { top: -1px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
    .dg-mobile-bottom-nav .dg-mobile-nav-upload .dg-mobile-nav-label { position: relative; z-index: 2; color: var(--c-text); text-align: center; }
    body.dg-theme-dark .dg-mobile-bottom-nav .dg-mobile-nav-upload .dg-mobile-nav-label { color: #f4f0f8; }
}

@media (max-width: 420px) {
    body:has(.dg-home-hero-stack:not(.dg-blog-hero-wrap)) { --dg-home-gutter: 12px; }
}

/* Desktop uses the same quick actions and filter dialog as the phone. */
@media (min-width: 641px) {
    .dg-home-hero-stack > .filters-container { display: none; }
    .dg-home-hero-stack .dg-hero-quick-actions { min-height: 44px; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds__viewport { width: 100%; padding: 0 !important; margin: 0; overflow: visible; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-rounds__track { width: 100%; min-width: 0; justify-content: flex-start !important; gap: 9px !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 7px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 4px 15px !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .62) !important;
        color: var(--c-text) !important;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 0;
        text-decoration: none;
    }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn { display: inline-flex !important; min-width: 116px !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #heroRoundBtn_vk { min-width: 100px !important; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn::after { content: 'Теги'; font-size: 14px; font-weight: 700; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn svg { width: 22px; height: 22px; }
    .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn .dg-hero-round-img,
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn__preview { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; border-radius: 50%; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn::before { display: none !important; }
    .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-action-label { display: inline; color: inherit; -webkit-text-fill-color: currentColor; font-size: 14px; line-height: 1; }
    .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn:is(:hover, :focus-visible, :active),
    .dg-home-hero-stack .dg-hero-quick-actions :is(.hero-round-btn, .dg-hero-video-story-btn):is(:hover, :focus-visible, :active) { border-color: var(--c-primary) !important; outline-color: var(--c-primary); }
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions #mobileFilterBtn,
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions .hero-round-btn,
    body.dg-theme-dark.dg-auth-logged-in .dg-home-hero-stack .dg-hero-quick-actions #heroShortsBtn,
    body.dg-theme-dark .dg-home-hero-stack .dg-hero-quick-actions .dg-hero-video-story-btn { background: rgba(36, 35, 47, .68) !important; border-color: #46404f !important; color: #f4f0f8 !important; }

    #dgFiltersModal .dg-filters-sheet.modal-content { width: min(520px, calc(100vw - 48px)); height: min(620px, calc(100dvh - 80px)); max-height: calc(100dvh - 80px); border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-bg-light); color: var(--c-text); display: flex; flex-direction: column; }
    #dgFiltersModal .dg-filters-header { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 56px; border-bottom: 1px solid var(--c-border); }
    #dgFiltersModal .dg-filters-header-left,
    #dgFiltersModal .dg-filters-header-right { position: absolute; top: 0; height: 56px; display: flex; align-items: center; }
    #dgFiltersModal .dg-filters-header-left { left: 14px; }
    #dgFiltersModal .dg-filters-header-right { right: 14px; }
    #dgFiltersModal .dg-filters-title { font-size: 18px; font-weight: 700; color: var(--c-text); }
    #dgFiltersModal .dg-filters-nav { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-border); border-radius: 50%; background: transparent; color: var(--c-text); cursor: pointer; }
    #dgFiltersModal .dg-filters-nav:is(:hover, :focus-visible, :active) { border-color: var(--c-primary); outline-color: var(--c-primary); }
    #dgFiltersModal .dg-filters-body { flex: 1 1 auto; min-height: 0; padding: 14px; overflow-y: auto; }
    #dgFiltersModal .dg-filters-list { display: flex; flex-direction: column; gap: 8px; }
    #dgFiltersModal .dg-filters-item { border: 1px solid var(--c-border); border-radius: 12px; background: rgba(var(--c-primary-rgb), .04); }
    #dgFiltersModal .dg-filters-item.is-active { border-color: var(--c-primary); background: rgba(var(--c-primary-rgb), .1); }
    #dgFiltersModal .dg-filters-main { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--c-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
    #dgFiltersModal .dg-filters-main:is(:hover, :focus-visible, :active) { color: var(--c-primary); outline-color: var(--c-primary); }
    #dgFiltersModal .dg-filters-main__chev { color: var(--c-primary); }
    #dgFiltersModal .dg-filters-subwrap { padding: 0 14px 12px; }
    #dgFiltersModal .dg-filters-subtags { display: flex; flex-wrap: wrap; gap: 7px; }
    #dgFiltersModal .dg-filters-chip { padding: 6px 10px; border: 1px solid var(--c-border); border-radius: 999px; background: transparent; color: var(--c-text); cursor: pointer; }
    #dgFiltersModal .dg-filters-chip:is(:hover, :focus-visible, :active),
    #dgFiltersModal .dg-filters-chip.is-active { border-color: var(--c-primary); color: var(--c-primary); outline-color: var(--c-primary); }
    body.dg-theme-dark #dgFiltersModal .dg-filters-sheet.modal-content { background: #18191f !important; border-color: #45404d !important; color: #f4f0f8 !important; }
    body.dg-theme-dark #dgFiltersModal :is(.dg-filters-title, .dg-filters-main, .dg-filters-chip, .dg-filters-nav) { color: #f4f0f8 !important; }
    body.dg-theme-dark #dgFiltersModal .dg-filters-item { background: #24232f !important; border-color: #46404f !important; }
    body.dg-theme-dark #dgFiltersModal .dg-filters-item.is-active { border-color: #c084fc !important; background: #373047 !important; }
    body.dg-theme-dark #dgFiltersModal .dg-filters-main:is(:hover, :focus-visible, :active),
    body.dg-theme-dark #dgFiltersModal .dg-filters-chip:is(:hover, :focus-visible, :active),
    body.dg-theme-dark #dgFiltersModal .dg-filters-chip.is-active { color: #c084fc !important; border-color: #c084fc !important; }
}

@media (max-width: 640px) {
    #dgFiltersModal .dg-filters-nav.dg-modal-back-btn {
        background: rgba(45, 45, 48, 0.90) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    #dgFiltersModal .dg-filters-nav.dg-modal-back-btn :is(svg, svg *, .lucide, i) {
        color: #fff !important;
        stroke: #fff !important;
        fill: none !important;
        -webkit-text-fill-color: #fff !important;
    }

    .dg-hero-slider__controls { display: none; }
}

/* Story upload uses the same surface and footer language as publication upload. */
#profileStoryUploadModal .dg-story-upload-modal {
    max-height: calc(100dvh - 32px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(31, 31, 38, 0.98), rgba(20, 20, 25, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

#profileStoryUploadModal .modal-header.dg-modal-header--back {
    min-height: 64px;
    padding: 14px 64px !important;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

#profileStoryUploadModal .modal-body {
    padding: 20px 24px 12px;
}

#profileStoryUploadModal .dg-story-upload-help {
    right: 20px;
}

#profileStoryUploadModal :is(.dg-story-upload-btn, #profileStorySendBtn):focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

#profileStoryUploadModal .dg-story-upload-tooltip {
    margin-bottom: 16px;
}

#profileStoryUploadModal .dg-story-upload-dropzone {
    min-height: 156px;
    flex-direction: column;
    gap: 10px;
    border-radius: 14px;
}

#profileStoryUploadModal .dg-story-upload-dropzone :is(svg, .lucide) {
    width: 24px;
    height: 24px;
}

#profileStoryUploadModal .dg-story-upload-dropzone-text {
    white-space: normal;
}

#profileStoryUploadModal .dg-story-upload-actions {
    margin: 16px 0 0;
}

#profileStoryUploadModal .dg-story-upload-footer {
    flex: 0 0 auto;
    padding: 0 24px 24px;
}

#profileStoryUploadModal .dg-story-upload-footer .dg-upload-background-hint {
    margin: 0 0 16px;
}

#profileStoryUploadModal #profileStorySendBtn {
    width: 100%;
    min-height: 42px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

#profileStoryUploadModal #profileStorySendBtn:is(:hover, :active) {
    background: var(--c-primary-600);
}

#profileStoryUploadModal #profileStorySendBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body:not(.dg-theme-dark) #profileStoryUploadModal .dg-story-upload-modal {
    border-color: rgba(var(--c-border-rgb), 0.22);
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

body:not(.dg-theme-dark) #profileStoryUploadModal .modal-header.dg-modal-header--back {
    border-bottom-color: rgba(var(--c-border-rgb), 0.18);
}

body.dg-theme-dark #profileStoryUploadModal .dg-story-upload-modal {
    background: linear-gradient(145deg, rgba(31, 31, 38, 0.98), rgba(20, 20, 25, 0.99));
}

@media (max-width: 640px) {
    #profileStoryUploadModal .dg-story-upload-modal {
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    #profileStoryUploadModal .modal-header.dg-modal-header--back {
        min-height: 56px;
        padding: 10px 60px !important;
    }

    #profileStoryUploadModal .dg-story-upload-help {
        right: 14px;
    }

    #profileStoryUploadModal .modal-body {
        padding: 12px;
    }

    #profileStoryUploadModal .dg-story-upload-dropzone {
        min-height: 120px;
    }

    #profileStoryUploadModal .dg-story-upload-actions {
        gap: 8px;
        margin-top: 12px;
    }

    #profileStoryUploadModal .dg-story-upload-actions .dg-story-upload-btn {
        flex: 1 1 145px;
        padding: 8px 10px;
    }

    #profileStoryUploadModal .dg-story-upload-footer {
        padding: 8px 12px max(12px, env(safe-area-inset-bottom));
    }

    #profileStoryUploadModal .dg-story-upload-footer .dg-upload-background-hint {
        margin-bottom: 10px;
    }
}

/* Profile page: the shared search header is unnecessary on phones. */
@media (max-width: 640px) {
    body.dg-page-profile:not(.dg-page-messages) .dg-mobile-top-search {
        display: none !important;
    }

    body.dg-page-profile .dg-profile-page-wrap {
        padding-top: var(--safe-top);
        padding-right: max(16px, var(--safe-right));
        padding-left: max(16px, var(--safe-left));
    }

    body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
        top: var(--safe-top) !important;
    }

}

@media (max-width: 420px) {
    body.dg-page-profile .dg-profile-page-wrap {
        padding-right: max(12px, var(--safe-right));
        padding-left: max(12px, var(--safe-left));
    }

    body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
        --dg-profile-tabs-bleed-left: max(12px, var(--safe-left));
        --dg-profile-tabs-bleed-right: max(12px, var(--safe-right));
    }
}

/* Approved compact mobile profile controls. Keep existing scroll and keyboard owners unchanged. */
@media (max-width: 640px) {
    #profileModal .dg-profile-story-add {
        left: 9px;
    }

    #profileModal .profile-actions {
        --dg-profile-action-gap: clamp(10px, 4.5vw, 26px);
        height: 60px !important;
        min-height: 60px !important;
    }

    #profileModal .dg-profile-premium-line,
    #profileModal .dg-profile-actions-mobile,
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right,
    #profileModal .profile-actions-own,
    #profileModal .dg-profile-socials-shell {
        height: 56px !important;
        min-height: 56px !important;
    }

    #profileModal .dg-profile-premium-line,
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right,
    #profileModal .profile-actions-own {
        flex-basis: 50px;
        width: 50px;
    }

    #profileModal .subscription-status #subscribeBtn,
    #profileModal .subscription-status .dg-premium-status-pill,
    #profileModal .subscription-status .dg-premium-public-card,
    #profileModal .dg-profile-action-card,
    #profileModal .dg-profile-socials-shell,
    #profileModal .dg-profile-socials-card {
        width: 50px !important;
        height: 56px !important;
        min-height: 56px !important;
    }

    #profileModal .subscription-status #subscribeBtn > svg,
    #profileModal .subscription-status .dg-premium-status-pill > svg,
    #profileModal .subscription-status .dg-premium-public-card > svg,
    #profileModal .dg-profile-action-card > svg.lucide {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px;
        padding: 9px !important;
    }

    #profileModal .dg-profile-socials-icons {
        width: 44px;
        height: 44px;
    }

    .dg-post-composer-main > .dg-post-editor {
        height: 46px;
        min-height: 46px !important;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .dg-blog-type-tabs {
        justify-content: center;
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dg-blog-type-tabs button {
        flex: 0 0 70px;
        width: 70px;
        min-height: 30px;
        padding: 4px 10px;
        border: 1px solid var(--dg-blog-border);
        border-radius: 999px;
        background: transparent;
        font-size: 11px;
        line-height: 1;
    }

    .dg-blog-type-tabs button.active {
        border-color: color-mix(in srgb, var(--dg-blog-accent) 38%, var(--dg-blog-border));
        background: color-mix(in srgb, var(--dg-blog-accent) 16%, var(--dg-blog-bg));
        box-shadow: 0 2px 8px rgba(80, 39, 110, .12);
    }

    .dg-blog-type-tabs button:hover,
    .dg-blog-type-tabs button:focus-visible {
        border-color: color-mix(in srgb, var(--dg-blog-accent) 52%, var(--dg-blog-border));
    }
}

/* Mobile profile action bar matched to the approved compact reference. */
@media (max-width: 640px) {
    #profileModal .profile-actions {
        --dg-profile-action-gap: clamp(12px, 5.5vw, 24px);
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        box-sizing: border-box;
        width: calc(100% + 8px);
        justify-content: stretch;
        gap: 0;
        height: 64px !important;
        min-height: 64px !important;
        margin: 10px -4px 14px;
        padding: 6px 10px 5px !important;
        border: 1px solid rgba(72, 65, 82, .16) !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, .78) !important;
        box-shadow: 0 3px 12px rgba(65, 48, 82, .06);
    }

    #profileModal .dg-profile-actions-mobile,
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right,
    #profileModal .profile-actions-own {
        display: contents !important;
    }

    #profileModal:not([data-own-profile="true"]) .profile-actions {
        display: grid !important;
        justify-content: stretch !important;
    }

    #profileModal .dg-profile-premium-line,
    #profileModal .dg-profile-action-card,
    #profileModal .dg-profile-socials-shell,
    #profileModal .dg-profile-referral-shell,
    #profileModal .dg-profile-foreign-menu-btn {
        justify-self: center;
    }

    #profileModal .dg-profile-premium-line,
    #profileModal .dg-profile-actions-mobile,
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right,
    #profileModal .profile-actions-own,
    #profileModal .dg-profile-socials-shell {
        height: 50px !important;
        min-height: 50px !important;
    }

    #profileModal .dg-profile-premium-line,
    #profileModal .dg-profile-actions-left,
    #profileModal .dg-profile-actions-right,
    #profileModal .profile-actions-own {
        flex-basis: 44px;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    #profileModal .dg-profile-referral-shell {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 50px;
        min-height: 50px;
    }

    #profileModal .subscription-status #subscribeBtn,
    #profileModal .subscription-status .dg-premium-status-pill,
    #profileModal .subscription-status .dg-premium-public-card,
    #profileModal .dg-profile-action-card,
    #profileModal .dg-profile-socials-shell,
    #profileModal .dg-profile-socials-card {
        width: 44px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    #profileModal .subscription-status #subscribeBtn > svg,
    #profileModal .subscription-status .dg-premium-status-pill > svg,
    #profileModal .subscription-status .dg-premium-public-card > svg,
    #profileModal .dg-profile-action-card > svg.lucide {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px;
        padding: 7px !important;
        border-radius: 7px !important;
    }

    #profileModal .dg-profile-socials-icons {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    #profileModal .dg-profile-socials-icons > .dg-profile-social-icon {
        width: 12px;
        height: 12px;
    }

    #profileModal .dg-profile-social-icon--boosty {
        top: 1px;
        left: 10px;
    }

    #profileModal .dg-profile-social-icon--telegram {
        left: 2px;
        bottom: 2px;
    }

    #profileModal .dg-profile-social-icon--vk {
        right: 2px;
        bottom: 2px;
    }

    #profileModal .dg-profile-action-card span,
    #profileModal .dg-profile-socials-label,
    #profileModal .subscription-status .dg-premium-card-label,
    #profileModal .subscription-status #subscribeBtn > span,
    #profileModal .subscription-status .dg-premium-public-card > span {
        font-size: 8px !important;
        font-weight: 400 !important;
    }

    body.dg-theme-dark #profileModal .profile-actions,
    html.dg-theme-dark body #profileModal .profile-actions {
        border-color: rgba(214, 190, 232, .13) !important;
        background: rgba(24, 22, 29, .82) !important;
        box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
    }
}

/* Existing composer controls replace profile tabs while the phone keyboard is active. */
@media (max-width: 640px) {
    body.dg-page-profile.dg-mobile-composer-keyboard-open #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active {
        position: sticky !important;
        top: clamp(8px, max(var(--safe-top, env(safe-area-inset-top, 0px)), var(--dg-composer-viewport-top, 0px)), 24px) !important;
        z-index: var(--dg-z-nav) !important;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(91, 72, 105, .16) !important;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .tab-btn {
        display: none !important;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-composer-actions {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-composer-actions::-webkit-scrollbar,
    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-format-toolbar::-webkit-scrollbar {
        display: none;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-composer-actions .dg-post-limit {
        display: none !important;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-format-toolbar,
    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .blog-article-toolbar {
        flex: 1 1 auto;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 4px !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .dg-post-format-toolbar[hidden],
    #profileModal .profile-tabs.dg-mobile-editor-tools-active > .blog-article-toolbar[hidden] {
        display: none !important;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active:has(> .dg-post-format-toolbar:not([hidden])) > .dg-post-composer-actions > :not([data-post-format]):not([data-article-format]):not(input) {
        display: none !important;
    }

    #profileModal .profile-tabs.dg-mobile-editor-tools-active:has(> .dg-post-format-toolbar:not([hidden])) > .dg-post-composer-actions {
        flex: 0 0 auto;
        width: auto;
        padding-right: 0 !important;
    }

    body.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active,
    html.dg-theme-dark body.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active {
        background: #0f0f12 !important;
        border-color: rgba(214, 190, 232, .17) !important;
    }

    body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs,
    body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.ios-device.dg-page-profile.dg-mobile-composer-keyboard-open #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active {
        top: max(var(--safe-top, env(safe-area-inset-top, 0px)), var(--dg-composer-viewport-top, 0px)) !important;
    }

    body.ios-device.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs,
    body.ios-device.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active,
    html.dg-theme-dark body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs,
    html.dg-theme-dark body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs.dg-mobile-editor-tools-active {
        background: #0f0f12 !important;
    }
}

/* Phone blog composer: text above, existing media controls below. */
@media (max-width: 640px) {
    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions > .dg-article-draft-status:not([hidden]) {
        position: absolute;
        top: 14px;
        left: 104px;
        display: block;
        margin: 0;
        white-space: nowrap;
    }

    .dg-blog-feed-page > .dg-post-composer:not(.dg-article-composer):has(> .dg-post-previews:not([hidden])) > .dg-post-composer-actions > .dg-article-draft-status:not([hidden]) {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer {
        padding: 12px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main {
        position: static;
        display: block;
        min-height: 0;
        padding-top: 52px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main > img {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main > .dg-post-editor,
    .dg-blog-feed-page > .dg-article-composer > .dg-post-composer-main > .dg-article-editor {
        box-sizing: border-box;
        width: 100%;
        height: auto !important;
        min-height: 32px !important;
        max-height: none !important;
        padding: 4px;
        overflow-y: visible !important;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main > .dg-post-editor:focus:empty::before {
        content: '';
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions {
        position: absolute;
        z-index: 2;
        right: 64px;
        top: 12px;
        bottom: auto;
        left: 12px;
        display: block;
        width: auto;
        height: 44px;
        padding: 0;
        overflow: visible;
        pointer-events: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions button {
        position: absolute;
        top: 0;
        display: grid;
        place-items: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
        pointer-events: auto;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions button > span {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions button > svg {
        width: 21px;
        height: 21px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-actions [data-post-photo],
    .dg-blog-feed-page > .dg-article-composer > .dg-post-composer-actions [data-article-photo] {
        left: 0;
        color: var(--dg-blog-muted);
        background: var(--dg-blog-bg-soft);
    }

    .dg-blog-feed-page > .dg-post-composer:not(.dg-article-composer) > .dg-post-composer-actions [data-post-video],
    .dg-blog-feed-page > .dg-article-composer > .dg-post-composer-actions [data-article-format] {
        right: auto;
        left: 52px;
        color: var(--dg-blog-muted);
        background: var(--dg-blog-bg-soft);
    }

    .dg-blog-feed-page > .dg-post-composer:not(.dg-article-composer) > .dg-post-composer-actions [data-post-format] {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-composer-main > .dg-post-send {
        position: absolute;
        right: 12px;
        top: 12px;
        bottom: auto;
        width: 44px;
        height: 44px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-publish-popover {
        box-sizing: border-box;
        top: 64px;
        right: 12px;
        bottom: auto;
        width: min(360px, calc(100% - 24px));
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden]) {
        position: absolute;
        z-index: 2;
        top: 12px;
        right: 64px;
        left: 116px;
        display: flex;
        height: 44px;
        margin: 0;
        padding: 0;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden])::-webkit-scrollbar {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden]) > div {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden]) > .dg-post-video-preview {
        box-sizing: border-box;
        padding: 0;
        border-radius: 10px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden]) > .dg-post-video-preview small {
        display: none;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-previews:not([hidden]) button {
        top: 2px;
        right: 2px;
        width: 20px;
        height: 20px;
    }

    .dg-blog-feed-page > .dg-post-composer > .dg-post-format-toolbar {
        margin-right: 0;
        margin-left: 0;
    }

    .dg-article-composer > .dg-post-previews {
        padding: 6px 0 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .dg-article-composer > .dg-post-previews::-webkit-scrollbar {
        display: none;
    }

    .dg-article-composer > .dg-post-previews > div {
        scroll-snap-align: start;
    }
}

/* iPhone: top chrome is always opaque; never blur page content below it. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        html:has(> body.iphone-device),
        body.iphone-device {
            --safe-top: calc(env(safe-area-inset-top, 0px) + var(--dg-font-body, 16px));
        }

        body.ios-device .navbar,
        body.ios-device .dg-mobile-top-search {
            background: #fff !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
            top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
            background: #fff !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        body.ios-device.dg-page-profile.dg-profile-tabs-stuck .dg-profile-page-wrap::before {
            content: "";
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 97;
            height: calc(env(safe-area-inset-top, 0px) + 20px);
            background: #fff;
            pointer-events: none;
        }

        html:has(> body.iphone-device),
        body.iphone-device {
            --safe-bottom: 0px !important;
            --dg-mobile-bottom-nav-height: 56px !important;
        }

        html:has(> body.iphone-device) {
            background: #fff !important;
        }

        body.iphone-device .dg-mobile-bottom-nav {
            bottom: 0 !important;
            height: var(--dg-mobile-bottom-nav-height) !important;
            min-height: var(--dg-mobile-bottom-nav-height) !important;
            padding-bottom: 0 !important;
            background: #fff !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        body.iphone-device .dg-mobile-bottom-nav .dg-mobile-nav-item {
            height: 54px !important;
        }

        body.iphone-device .dg-mobile-bottom-nav :is(.dg-mobile-nav-login, .dg-mobile-nav-register) {
            height: 36px !important;
            min-height: 36px !important;
        }

        body.iphone-device.dg-theme-dark .dg-mobile-bottom-nav,
        html.dg-theme-dark body.iphone-device .dg-mobile-bottom-nav {
            background: #1d1d1f !important;
        }

        html.dg-theme-dark:has(> body.iphone-device) {
            background: #1d1d1f !important;
        }

        body.ios-device.dg-theme-dark .navbar,
        body.ios-device.dg-theme-dark .dg-mobile-top-search,
        html.dg-theme-dark body.ios-device .navbar,
        html.dg-theme-dark body.ios-device .dg-mobile-top-search {
            background: #0f0f12 !important;
        }

        body.ios-device.dg-theme-dark.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs,
        html.dg-theme-dark body.ios-device.dg-page-profile #profileModal.dg-profile-page-view .profile-tabs {
            background: #0f0f12 !important;
        }

        body.ios-device.dg-theme-dark.dg-page-profile.dg-profile-tabs-stuck .dg-profile-page-wrap::before,
        html.dg-theme-dark body.ios-device.dg-page-profile.dg-profile-tabs-stuck .dg-profile-page-wrap::before {
            background: #0f0f12;
        }
    }
}

/* Mobile password visibility controls: compact without a persistent touch-hover tile. */
@media (max-width: 640px) {
    #authModal .dg-password-toggle,
    #editProfileModal .dg-password-toggle {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px;
        background: transparent !important;
        box-shadow: none !important;
    }

    #authModal .dg-password-toggle svg,
    #editProfileModal .dg-password-toggle svg {
        width: 14px;
        height: 14px;
    }

    #authModal .dg-password-toggle:hover,
    #authModal .dg-password-toggle:focus,
    #authModal .dg-password-toggle:active,
    #editProfileModal .dg-password-toggle:hover,
    #editProfileModal .dg-password-toggle:focus,
    #editProfileModal .dg-password-toggle:active {
        background: transparent !important;
        box-shadow: none !important;
    }

    #authModal .dg-password-toggle:focus-visible,
    #editProfileModal .dg-password-toggle:focus-visible {
        background: rgba(var(--c-primary-rgb), 0.10) !important;
        box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.28) !important;
    }

    body:not(.dg-theme-dark) #authModal .dg-password-toggle,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle {
        color: rgba(33, 31, 38, 0.58) !important;
        -webkit-text-fill-color: rgba(33, 31, 38, 0.58) !important;
    }

    body.dg-theme-dark #authModal .dg-password-toggle,
    body.dg-theme-dark #editProfileModal .dg-password-toggle {
        color: rgba(255, 255, 255, 0.68) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
    }

    #authModal .dg-password-wrap > input,
    #editProfileModal .dg-password-wrap > input {
        padding-right: 34px !important;
    }
}

/* Desktop light theme: keep the password visibility control legible on white fields. */
@media (min-width: 641px) {
    body:not(.dg-theme-dark) #authModal .dg-password-toggle,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle {
        color: rgba(33, 31, 38, 0.58) !important;
        -webkit-text-fill-color: rgba(33, 31, 38, 0.58) !important;
        background: transparent !important;
    }

    body:not(.dg-theme-dark) #authModal .dg-password-toggle:hover,
    body:not(.dg-theme-dark) #authModal .dg-password-toggle:focus,
    body:not(.dg-theme-dark) #authModal .dg-password-toggle:active,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle:hover,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle:focus,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle:active {
        color: rgba(33, 31, 38, 0.82) !important;
        -webkit-text-fill-color: rgba(33, 31, 38, 0.82) !important;
        background: rgba(var(--c-primary-rgb), 0.08) !important;
    }

    body:not(.dg-theme-dark) #authModal .dg-password-toggle:focus-visible,
    body:not(.dg-theme-dark) #editProfileModal .dg-password-toggle:focus-visible {
        box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.24) !important;
    }
}

/* Desktop dark theme: prevent the auth password control from inheriting a light hover tile. */
@media (min-width: 641px) {
    body.dg-theme-dark #authModal .dg-password-toggle,
    body.dg-theme-dark #editProfileModal .dg-password-toggle {
        color: rgba(255, 255, 255, 0.68) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
        background: transparent !important;
    }

    body.dg-theme-dark #authModal .dg-password-toggle:hover,
    body.dg-theme-dark #authModal .dg-password-toggle:focus,
    body.dg-theme-dark #authModal .dg-password-toggle:active,
    body.dg-theme-dark #editProfileModal .dg-password-toggle:hover,
    body.dg-theme-dark #editProfileModal .dg-password-toggle:focus,
    body.dg-theme-dark #editProfileModal .dg-password-toggle:active {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }

    body.dg-theme-dark #authModal .dg-password-toggle:focus-visible,
    body.dg-theme-dark #editProfileModal .dg-password-toggle:focus-visible {
        box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.32) !important;
    }
}

@media (max-width: 640px) {
    #subscriptionModal .sub-plan-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        height: auto;
        padding: 16px;
    }

    #subscriptionModal .sub-plan-card .sub-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
    }

    #subscriptionModal .sub-plan-card .sub-price-line {
        flex-wrap: wrap;
    }

    #subscriptionModal .sub-plan-card .btn {
        width: 100%;
        min-height: 44px;
        white-space: nowrap;
    }

    #subscriptionModal .sub-plan-list {
        gap: 10px;
        margin-bottom: 22px;
    }
}

/* Contest hero: paired previous/current cards, shared by both themes. */
.dg-home-hero-stack #contestWeekBlock.dg-contest-week {
    isolation: isolate;
    padding: 18px !important;
    background:
        radial-gradient(circle at 12% 28%, rgba(145, 72, 255, .18), transparent 28%),
        radial-gradient(circle at 88% 72%, rgba(135, 62, 245, .16), transparent 30%),
        linear-gradient(135deg, #f8f5ff 0%, #f1ecfa 52%, #faf8ff 100%) !important;
    border: 1px solid rgba(var(--c-primary-rgb), .28) !important;
}

.dg-home-hero-stack #contestWeekBlock::before,
.dg-home-hero-stack #contestWeekBlock::after {
    position: absolute;
    z-index: -1;
    color: rgba(var(--c-primary-rgb), .10);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.dg-home-hero-stack #contestWeekBlock::before {
    content: "✦";
    top: 31%;
    left: 47%;
    font-size: 46px;
}

.dg-home-hero-stack #contestWeekBlock::after {
    content: "★";
    right: 4%;
    bottom: 4%;
    font-size: 70px;
    transform: rotate(-12deg);
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__split {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: 14px;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
    position: relative;
    gap: 8px;
    padding: 18px 20px 54px;
    border: 1px solid rgba(var(--c-primary-rgb), .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 14px 36px rgba(75, 45, 120, .08);
    overflow: hidden;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
    border-left: 1px solid rgba(var(--c-primary-rgb), .22);
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel-head,
.dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__eyebrow {
    color: #686076;
    font-size: 11px;
    font-weight: 700;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__place,
.dg-home-hero-stack #contestWeekBlock .dg-contest-week__timer {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(var(--c-primary-rgb), .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .70);
    color: #332d3d;
    box-shadow: 0 7px 20px rgba(67, 37, 105, .10);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__place {
    border-color: rgba(221, 159, 34, .30);
    color: #a56800;
}

.dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__place, .dg-contest-week__timer) svg {
    width: 16px;
    height: 16px;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__title {
    color: #211d27;
    font-size: clamp(22px, 2.25vw, 31px);
    font-weight: 850;
    letter-spacing: -.035em;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__title span,
.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value,
.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader > a {
    color: var(--c-primary, #8b5cf6);
    -webkit-text-fill-color: currentColor;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #6f6879;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-card {
    align-items: center;
    gap: 13px;
    margin: 2px 0 0;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-avatar {
    width: 82px;
    height: 82px;
    border: 3px solid rgba(var(--c-primary-rgb), .74);
    box-shadow: 0 0 0 5px rgba(var(--c-primary-rgb), .10), 0 12px 28px rgba(var(--c-primary-rgb), .20);
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value {
    font-size: 20px;
    font-weight: 850;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label {
    color: #2f2a36;
    font-size: 15px;
    font-weight: 750;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title {
    color: #6f6879;
    font-size: 12px;
    line-height: 1.25;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(var(--c-primary-rgb), .20);
    border-radius: 14px;
    background: transparent;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader {
    min-width: 0;
    margin: 0;
    color: #2f2a36;
    font-size: 15px;
    font-weight: 800;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader span {
    color: #2f2a36;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leaderboard {
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0;
    padding: 0;
}

.dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__top-avatar, .dg-contest-week__top-more) {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, .88);
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 0;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature[hidden] {
    display: none;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-preview {
    display: block;
    height: 62px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-primary-rgb), .45);
    border-radius: 11px;
    background: rgba(var(--c-primary-rgb), .10);
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy a {
    overflow: hidden;
    color: #2f2a36;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy span {
    overflow: hidden;
    color: #777080;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-home-hero-stack #contestWeekBlock a:focus-visible {
    outline: 2px solid var(--c-primary, #8b5cf6);
    outline-offset: 2px;
}

.dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__winner-value, .dg-contest-week__leader a, .dg-contest-week__leader-copy a):hover {
    color: var(--c-primary-600, #7c3aed);
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock.dg-contest-week {
    background:
        radial-gradient(circle at 12% 28%, rgba(137, 68, 247, .26), transparent 30%),
        radial-gradient(circle at 88% 72%, rgba(119, 54, 224, .22), transparent 34%),
        linear-gradient(135deg, #151220 0%, #10101a 52%, #171225 100%) !important;
    border-color: rgba(157, 91, 244, .52) !important;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
    border-color: rgba(166, 101, 249, .30);
    background: rgba(24, 21, 36, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 38px rgba(0, 0, 0, .20);
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
    border-left-color: rgba(166, 101, 249, .30);
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__place, .dg-contest-week__timer) {
    border-color: rgba(174, 113, 250, .24);
    background: rgba(30, 27, 43, .88);
    color: #f5f0fb;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__place {
    border-color: rgba(255, 194, 63, .22);
    color: #ffbd3e;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__title, .dg-contest-week__winner-label, .dg-contest-week__leader, .dg-contest-week__leader span, .dg-contest-week__leader-copy a) {
    color: #f8f6fb;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__eyebrow, .dg-contest-week__description, .dg-contest-week__leader-copy span) {
    color: #aaa3b8;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title {
    color: #aaa3b8;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
    border-color: rgba(162, 98, 244, .23);
    background: transparent;
}

body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__top-avatar, .dg-contest-week__top-more) {
    border-color: #282334;
}

@media (min-width: 641px) {
    .dg-home-hero-stack #contestWeekBlock.dg-contest-week {
        container-type: inline-size;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__details-btn--previous {
        left: clamp(36px, 5cqi, 54px) !important;
    }

    .dg-home-hero-stack #contestWeekBlock #contestDetailsBtn {
        left: calc(50% + clamp(36px, 5cqi, 54px)) !important;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn {
        gap: clamp(6px, .75cqi, 8px);
        font-size: clamp(12px, 1.2cqi, 14px);
        line-height: clamp(14px, 1.4cqi, 16px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn svg,
    .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn i {
        display: block !important;
        width: clamp(14px, 1.5cqi, 16px);
        height: clamp(14px, 1.5cqi, 16px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__split {
        gap: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        padding-top: clamp(4px, .55cqi, 6px);
        padding-right: clamp(20px, 3.35cqi, 36px);
        padding-bottom: clamp(48px, 5cqi, 54px);
        padding-left: clamp(20px, 3.35cqi, 36px);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
        border-left: 1px solid rgba(var(--c-primary-rgb), .22);
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack #contestWeekBlock.dg-contest-week {
        background:
            radial-gradient(circle at 12% 28%, rgba(145, 72, 255, .10), transparent 30%),
            radial-gradient(circle at 88% 72%, rgba(135, 62, 245, .08), transparent 34%),
            linear-gradient(110deg, #fbf9ff 0%, #f4effd 52%, #ede5f8 100%) !important;
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        background: transparent;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
        border-left: 1px solid rgba(166, 101, 249, .30);
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack .dg-referral-hero {
        background: linear-gradient(110deg, #f8f4ff 0%, #decff2 52%, #af97cf 100%) !important;
    }

    body.dg-theme-dark .dg-home-hero-stack .dg-referral-hero {
        background:
            radial-gradient(circle at 12% 28%, rgba(137, 68, 247, .26), transparent 30%),
            radial-gradient(circle at 88% 72%, rgba(119, 54, 224, .22), transparent 34%),
            linear-gradient(135deg, #151220 0%, #10101a 52%, #171225 100%) !important;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-card {
        justify-content: flex-start;
        margin-top: auto;
        margin-bottom: auto;
        gap: clamp(14px, 1.85cqi, 20px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__eyebrow {
        font-size: clamp(10px, 1cqi, 12px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title {
        font-size: clamp(28px, 3.2cqi, 36px);
        line-height: 1;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__description {
        font-size: clamp(11px, 1.1cqi, 13px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value {
        font-size: clamp(18px, 1.8cqi, 21px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title {
        font-size: clamp(12px, 1.2cqi, 14px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label {
        font-size: clamp(14px, 1.4cqi, 16px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-avatar {
        width: clamp(112px, 11.5cqi, 128px);
        height: clamp(112px, 11.5cqi, 128px);
        border-width: clamp(2px, .28cqi, 3px);
        box-shadow: 0 0 0 clamp(3px, .46cqi, 5px) rgba(var(--c-primary-rgb), .10), 0 clamp(8px, 1.1cqi, 12px) clamp(20px, 2.6cqi, 28px) rgba(var(--c-primary-rgb), .20);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature {
        grid-template-columns: clamp(112px, 11.5cqi, 128px) minmax(0, 1fr);
        justify-content: center;
        gap: clamp(14px, 1.7cqi, 18px);
        margin: auto 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-preview {
        width: clamp(112px, 11.5cqi, 128px);
        height: clamp(112px, 11.5cqi, 128px);
        border: clamp(2px, .28cqi, 3px) solid rgba(var(--c-primary-rgb), .74);
        border-radius: 50%;
        box-shadow: 0 0 0 clamp(3px, .46cqi, 5px) rgba(var(--c-primary-rgb), .10), 0 clamp(8px, 1.1cqi, 12px) clamp(20px, 2.6cqi, 28px) rgba(var(--c-primary-rgb), .20);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-head {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy {
        gap: 5px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-name {
        color: var(--c-primary-600, #7c3aed);
        font-size: clamp(18px, 1.8cqi, 21px);
        font-weight: 850;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-title {
        color: #6f6879;
        font-size: clamp(12px, 1.2cqi, 14px);
        font-weight: 600;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-status {
        color: #2f2a36;
        font-size: clamp(14px, 1.4cqi, 16px);
        font-weight: 750;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-name {
        color: #a78bfa;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-title {
        color: #b8b1c3;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-status {
        color: #f4f1f8;
    }

    .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__top-avatar, .dg-contest-week__top-more) {
        width: clamp(26px, 3.27cqi, 34px);
        height: clamp(26px, 3.27cqi, 34px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__timer {
        position: absolute;
        top: clamp(4px, .55cqi, 6px);
        right: clamp(14px, 1.85cqi, 20px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title-row {
        padding-right: clamp(92px, 9.7cqi, 104px);
        box-sizing: border-box;
    }

    .dg-home-hero-stack .dg-hero-slider__dots {
        right: 28px;
        bottom: 28px;
        left: auto;
    }

    body:not(.dg-theme-dark) .dg-home-hero-stack .dg-hero-slider__dot:not(.dg-hero-slider__dot--active) {
        background: rgba(255, 255, 255, .55);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn {
        bottom: clamp(18px, 2cqi, 22px) !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--previous {
        gap: 6px;
        padding: 6px 16px 42px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--previous .dg-contest-week__description {
        flex: 0 0 auto;
    }

}

@media (min-width: 641px) {
    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__split {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        row-gap: clamp(5px, .77cqi, 8px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        row-gap: clamp(5px, .77cqi, 8px);
        padding-right: clamp(20px, 3.35cqi, 36px);
        padding-left: clamp(20px, 3.35cqi, 36px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--previous {
        grid-column: 1;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
        grid-column: 2;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current > .dg-contest-week__eyebrow {
        align-self: center;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__eyebrow {
        font-size: clamp(10px, 1cqi, 12px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title {
        font-size: clamp(28px, 3.2cqi, 36px);
        line-height: 1;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__description {
        font-size: clamp(11px, 1.1cqi, 13px);
    }

    .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__place, .dg-contest-week__timer) {
        min-height: clamp(26px, 3cqi, 32px);
        padding-right: clamp(9px, 1.1cqi, 12px);
        padding-left: clamp(9px, 1.1cqi, 12px);
        font-size: clamp(10px, 1.1cqi, 12px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value {
        font-size: clamp(18px, 1.8cqi, 21px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label,
    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader {
        font-size: clamp(14px, 1.4cqi, 16px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title {
        font-size: clamp(12px, 1.2cqi, 14px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
        gap: clamp(5px, .77cqi, 8px);
        padding: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature {
        gap: clamp(12px, 1.7cqi, 18px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy a {
        font-size: clamp(10px, 1.25cqi, 13px);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy span {
        font-size: clamp(8px, 1.06cqi, 11px);
    }

    .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__winner-card, .dg-contest-week__current-card) {
        align-self: stretch;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }

}

@container (max-width: 1079px) {
    @media (min-width: 641px) {
        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__details-btn--previous {
            left: clamp(22px, 3.5cqi, 38px) !important;
        }

        .dg-home-hero-stack #contestWeekBlock #contestDetailsBtn {
            left: calc(50% + clamp(22px, 3.5cqi, 38px)) !important;
        }

        .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn {
            bottom: clamp(14px, 1.85cqi, 20px) !important;
            gap: clamp(4px, .55cqi, 6px);
            font-size: clamp(12px, 1.5cqi, 15px);
            line-height: clamp(14px, 1.7cqi, 17px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn svg,
        .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn i {
            width: clamp(12px, 1.3cqi, 14px);
            height: clamp(12px, 1.3cqi, 14px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
            padding-top: clamp(3px, .4cqi, 4px);
            padding-right: clamp(12px, 1.85cqi, 20px);
            padding-bottom: clamp(40px, 4cqi, 44px);
            padding-left: clamp(12px, 1.85cqi, 20px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__eyebrow {
            font-size: clamp(9px, .9cqi, 10px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title {
            font-size: clamp(22px, 2.9cqi, 31px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__description {
            font-size: clamp(9px, 1.05cqi, 11px);
        }

        .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__place, .dg-contest-week__timer) {
            min-height: clamp(24px, 2.8cqi, 30px);
            padding-right: clamp(8px, 1.1cqi, 12px);
            padding-left: clamp(8px, 1.1cqi, 12px);
            font-size: clamp(9px, 1cqi, 11px);
        }

        .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__place, .dg-contest-week__timer) svg {
            width: clamp(13px, 1.5cqi, 16px);
            height: clamp(13px, 1.5cqi, 16px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title-row {
            padding-right: clamp(82px, 9.25cqi, 100px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-card {
            gap: clamp(8px, 1.2cqi, 13px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-avatar,
        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-preview {
            width: clamp(72px, 10.4cqi, 112px);
            height: clamp(72px, 10.4cqi, 112px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value,
        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-name {
            font-size: clamp(15px, 1.85cqi, 20px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title,
        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-title {
            font-size: clamp(10px, 1.1cqi, 12px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label,
        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-copy .dg-contest-week__leader-status {
            font-size: clamp(12px, 1.4cqi, 15px);
        }

        .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature {
            grid-template-columns: clamp(72px, 10.4cqi, 112px) minmax(0, 1fr);
            gap: clamp(8px, 1.2cqi, 13px);
        }
    }
}

@media (max-width: 640px) {
    .dg-home-hero-stack #contestWeekBlock.dg-contest-week {
        padding: 14px 14px 48px !important;
        background: var(--dg-message-surface-light) !important;
        border: 1px solid var(--dg-message-border-light) !important;
        backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dg-message-glass-blur)) !important;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock.dg-contest-week {
        background: rgba(24, 24, 30, .82) !important;
        border-color: rgba(255, 255, 255, .10) !important;
    }

    .dg-home-hero-stack #contestWeekBlock::before,
    .dg-home-hero-stack #contestWeekBlock::after {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-hero-info-btn {
        bottom: 14px !important;
        left: 14px !important;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__details-btn--previous {
        display: none !important;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__split {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        gap: 7px;
        padding: 0 12px 28px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
        padding-right: 28px;
        padding-left: 12px;
        border-left: 1px solid rgba(var(--c-border-rgb), .12);
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel,
    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
        background: transparent;
        box-shadow: none;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel {
        border: 0;
    }

    body.dg-theme-dark .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel--current {
        border-left: 1px solid rgba(255, 255, 255, .10);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__panel-head {
        display: contents;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__eyebrow {
        font-size: 9px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__place {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title {
        font-size: 13px;
        line-height: 1.2;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title span {
        color: inherit;
        -webkit-text-fill-color: currentColor;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__description {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-card {
        align-items: flex-start;
        gap: 12px;
        margin: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-avatar {
        width: 59px;
        height: 59px;
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .10);
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-value {
        order: 2;
        max-width: 100%;
        font-size: 14px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label {
        order: 1;
        font-size: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-title {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__winner-label::after {
        content: attr(data-mobile-label);
        font-size: 11px;
        font-weight: 400;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__title-row {
        display: block;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__timer {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__current-card {
        display: block;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader {
        display: none;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leaderboard {
        display: flex;
        min-height: 36px;
        margin-top: 18px;
    }

    .dg-home-hero-stack #contestWeekBlock :is(.dg-contest-week__top-avatar, .dg-contest-week__top-more) {
        width: 36px;
        height: 36px;
        margin-left: -7px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__top-avatar:first-child {
        margin-left: 0;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__top-more {
        font-size: 13px;
    }

    .dg-home-hero-stack #contestWeekBlock .dg-contest-week__leader-feature {
        display: none;
    }
}