body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    background-color: #f0f2f5; 
    /* Колонка на всю высоту окна: тогда подвал прижимается к низу,
       даже когда на странице мало содержимого. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0; 
}
/* Единое вычисление размеров */
*, *::before, *::after { box-sizing: border-box; }
/* Стабилизируем ширину страницы, чтобы не было "прыжка" при появлении/исчезновении вертикального скроллбара */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

/* Тёмная тема и базовые контейнеры */
body.theme-dark { background-color: #1F2227; color: #8F9093; }
#app-content { width: 100%; margin: 0; padding: 0; flex: 1 0 auto; }
.site-scroll-toggle {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:56px;
    z-index:900;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8F9093;
    cursor:pointer;
    opacity:0.42;
    transition:background-color 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}
.site-scroll-toggle:hover,
.site-scroll-toggle:focus-visible {
    background:#1A1D22;
    color:#e5e7eb;
    opacity:1;
    outline:none;
}
.site-scroll-toggle::before {
    content:"";
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:9px solid currentColor;
}
.site-scroll-toggle[data-mode="return"]::before {
    border-bottom:0;
    border-top:9px solid currentColor;
}
@media (hover: none) and (pointer: coarse) {
    .site-scroll-toggle {
        display:none;
    }
}

.page-flag { display:none; }
.is-hidden { display:none; }
.home-profile-thumb { width:50px; height:50px; }
.home-logout-message { color:#22c55e; margin-bottom:15px; font-weight:600; }

/* Правое фиксированное меню */
.right-menu{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1000;
}
.right-menu .menu-icons { display:flex; flex-direction:column; gap:20px; }
.right-menu a{ display:block; width:28px; height:28px; background: transparent !important; border: none !important; padding: 0; box-shadow: none; line-height: 0; outline: none; }
.right-menu a:hover, .right-menu a:focus { outline: none; }
.right-menu .menu-icons img{ display:block; width:28px; height:28px; }
.right-menu a:hover img{ opacity:1; }
.right-menu .menu-avatar { filter:none; opacity:1; }
.right-menu .menu-row { display:flex; flex-direction:row; align-items:center; gap:8px; }
.right-menu .menu-avatar { width:28px; height:28px; display:block; }
.right-menu .logout-link, .right-menu .login-link { color:#e5e7eb; text-decoration:none; font-size:14px; line-height:1; }
.right-menu .logout-link:hover, .right-menu .login-link:hover { text-decoration:underline; }

/* Контентные карточки в тёмной теме */
/* Карточки: возвращаем псевдо-3D (свет сверху/слева, темнее справа/снизу), но толщину делаем 2px */
:root {
    --card-shell-radius: 12px;
    /* Цвет контейнера и он же с нулевой прозрачностью — из них собирается
       затенение под прокручиваемыми списками. Держим парой: если задать
       начало градиента словом transparent, браузер уводит его в чёрный. */
    --container-bg: #1b1d22;
    /* Градиент цитаты — единственное описание на весь сайт: цитата в комментарии,
       цитата в поле ввода и подсветка комментария при переходе по цитате. */
    --quote-gradient: linear-gradient(to right, #2a2e35, #1b1d22);
    --container-bg-0: rgba(27, 29, 34, 0);
    --default-avatar: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2072%2092%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%238F9093%22%20d%3D%22M36%200a24%2024%200%201%201%200%2048%2024%2024%200%201%201%200-48ZM36%2054c20%200%2036%2011.2%2036%2025s-15.1%2013-35%2013S0%2092.8%200%2079s16-25%2036-25z%22/%3E%3C/svg%3E");
    --avatar-fit: contain;
}

.avatar,
.profile-image,
.post-avatar,
.menu-avatar,
.home-profile-thumb,
.comment-avatar,
.followers-avatar {
    display: inline-block;
    background-image: var(--avatar-image, var(--default-avatar));
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--avatar-fit, cover);
    border-radius: 50%;
    overflow: hidden;
}

@keyframes avatar-spin { to { transform: rotate(360deg); } }

/* Кружок загрузки на месте аватара */
.avatar-loading {
    background-image: none !important;
    position: relative;
}
.avatar-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    margin-top: -13px;
    border-radius: 50%;
    border: 3px solid currentColor;
    border-top-color: transparent;
    animation: avatar-spin 0.8s linear infinite;
    opacity: 0.9;
}

/* Маленький кружок загрузки для счётчиков (как у аватара, но меньше) */
.count-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: avatar-spin 0.8s linear infinite;
    opacity: 0.9;
}

/* Единственное описание контейнера на весь сайт: цвет, скругление, ширина. */
.post,
.page-container > .post-comments-section,
.donation-container,
.profile-right-box,
.profile-left-box,
.post-form[data-composer-role="primary"],
.pinned-section {
    background-color: var(--container-bg);
    color: #8F9093;
    position: relative;
    max-width: 800px;
    border-radius: var(--card-shell-radius);
}

/* profile-container оставляем без рамки как было изначально */
.page-container { width: 800px; margin: 0 auto; padding: 30px 0; }
.container, .form-container, .post-form { 
    padding: 30px 38px; 
    box-shadow: none; 
    text-align: center; 
    margin-bottom: 45px;
}
.post {
    padding: 30px 0 20px;
    text-align: center;
}

.post > :not(.post-divider) {
    padding: 0 38px;
}
.post > .post-content-wrapper {
    padding: 0;
}
.post-form[data-composer-role="inline"] {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
.post-form[data-composer-role="inline"] form {
    padding: 0;
}
.post-content-wrapper {
    margin: 0 auto;
    max-width: 720px;
}
/* Профильный контейнер без общего оформления карточки, чтобы не было лишнего бокса */
.profile-container { margin-bottom: 45px; background: transparent; border: none; padding: 0; box-shadow: none; }
.feed-title { margin: 0 0 24px; font-size: 28px; font-weight: 600; color: #ffffff; }
.feed-state { padding: 60px 20px; text-align: center; color: #8F9093; }
.feed-state strong { display: block; margin-bottom: 12px; font-size: 22px; color: #ffffff; }
.feed-state.error { background: #3d1f1f; border: 1px solid #5c2e2e; color: #f87171; border-radius: 12px; }
.feed-state-loading { color: #8F9093; }
.profile-header-row {
    display:flex;
    flex-direction:row;
    gap:45px;
    width:800px;
    align-items:flex-start;
    margin-bottom:45px;
}
.profile-left-box {
    width:160px;
    height:282px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
}
.profile-left-box .profile-stats-block {
    flex:1;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
}
.login-button { 
    display: inline-block; 
    background-color: #4285F4; 
    color: white; 
    padding: 10px 20px; 
    border-radius: 4px; 
    text-decoration: none; 
    margin-top: 20px; 
}
.profile-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    color: #e5e7eb; 
    margin-top: 20px; 
}
.profile-left-box .avatar-wrapper {
    position:static;
    width:128px;
    margin-top:16px;
}
.profile-left-box .profile-image {
    width:128px;
    height:128px;
    display:block;
}
.profile-left-box .avatar-menu-btn {
    position:absolute;
    top:0;
    right:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    cursor:pointer;
    color:#8F9093;
    font-size:20px;
    transition:color 0.2s ease;
}
.profile-left-box .avatar-menu-btn:hover { color:#ffffff; }
.profile-left-box .count-stack {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:space-evenly;
    width:100%;
}
.profile-left-box .count-group {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:100%;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:8px 0;
    transition:background-color 0.2s ease;
}
.profile-left-box .count-stack {
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    flex:1;
}
.profile-left-box .count-number,
.profile-left-box .count-label {
    display:block;
    color:#8F9093;
}
.profile-left-box .count-group:hover,
.profile-left-box .count-group:focus-visible {
    background:#2A2E35;
    outline:none;
}
.profile-left-box .subscription-block {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
.profile-left-box .subscribe-btn {
    background:transparent;
    color:#8F9093;
    font-weight:600;
    padding:8px 0;
    border:none;
    cursor:pointer;
    width:100%;
    text-align:center;
    transition:background-color 0.2s ease, color 0.2s ease;
}
.profile-left-box .subscribe-btn[disabled] {
    opacity:0.6;
    cursor:not-allowed;
}
.profile-left-box .subscribe-btn:hover,
.profile-left-box .subscribe-btn:focus-visible {
    background:#2A2E35;
    color:#8F9093;
    outline:none;
}
.profile-left-box .subscribe-hint {
    font-size:12px;
    color:#f87171;
    min-height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    visibility:hidden;
}
.profile-left-box .subscribe-hint.show {
    visibility:visible;
}
.profile-left-box .count-group {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.profile-left-box .count-group .count-number,
.profile-left-box .count-group .count-label {
    display:block;
}
.profile-left-box .avatar-menu {
    position:absolute;
    top:36px;
    right:0;
    display:none;
}
.profile-left-box .avatar-menu,
.profile-info-menu,
.post-menu,
.sort-menu,
.c-sort-menu,
.comment-menu {
    padding:6px;
    min-width:140px;
    z-index:1000;
}
.profile-info-menu { position:absolute; top:36px; right:0; display:none; }
.post-menu { position:absolute; top:28px; right:0; display:none; }
.sort-menu, .c-sort-menu { position:absolute; top:28px; right:0; display:none; }
.comment-menu { position:absolute; top:28px; right:0; display:none; }

/* Единый стиль для всех пунктов меню */
.avatar-menu .avatar-menu-item,
.profile-info-menu .profile-menu-item,
.post-menu button,
.post-menu .delete-button,
.post-menu .edit-post-btn,
.sort-menu button,
.c-sort-menu button,
.comment-menu button {
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:#8F9093;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer;
    transition:background-color .2s ease;
    font-size:14px;
    line-height:1.4;
    display:block;
    text-decoration:none;
}

/* Единая подсветка при наведении */
.avatar-menu .avatar-menu-item:hover,
.profile-info-menu .profile-menu-item:hover,
.post-menu button:hover,
.post-menu .delete-button:hover,
.post-menu .edit-post-btn:hover,
.sort-menu button:hover,
.c-sort-menu button:hover,
.comment-menu button:hover {
    background-color:#2A2E35;
}

/* Специальные стили для выбранных пунктов сортировки */
.sort-menu .sort-option[data-selected="1"],
.c-sort-menu .c-sort-option[data-selected="1"] {
    color:#e5e7eb;
    cursor:default;
    pointer-events:none;
    opacity:0.5;
}

/* Убираем подсветку для выбранных пунктов */
.sort-menu .sort-option[data-selected="1"]:hover,
.c-sort-menu .c-sort-option[data-selected="1"]:hover {
    background:none;
}
.avatar-menu-message { min-height:20px; margin-top:8px; font-size:12px; color:#9CA3AF; text-align:center; }
.avatar-menu-message:empty { display:none; margin-top:0; min-height:0; }
.avatar-menu-message.error { color:#f87171; }
.avatar-menu-message.success { color:#ffffff; }
.posts-list-header,
.comments-toolbar {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    position:relative;
}
.posts-list-header[data-sort-header][data-sort-ready="0"] {
    display:none;
}
.posts-section { margin-top: 32px; }
.posts-feed { display:flex; flex-direction:column; gap:32px; }
/* Пустота и ошибка — просто текст, без коробки. */
.posts-empty,
.posts-error {
    padding:40px 24px;
    text-align:center;
    color:#8F9093;
}
.posts-error { color:#f87171; }
.posts-error .retry-button {
    margin-top:16px;
    background:transparent;
    border:1px solid #f87171;
    color:#f87171;
    border-radius:999px;
    padding:8px 18px;
    cursor:pointer;
    font-weight:600;
}
.posts-error .retry-button:hover,
.posts-error .retry-button:focus-visible {
    background:rgba(248,113,113,0.1);
    outline:none;
}
.pinned-section { max-width:800px; width:100%; margin:20px auto 32px; padding:16px; }
.pinned-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.pinned-header-title { font-weight:600; color:#8F9093; }
.pinned-list {
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
}
.pinned-list-scrollable {
    max-height:273px;
    overflow-y:auto;
    margin-right:-16px;
    padding-right:16px;
}
/* Полоска прокрутки описана один раз на весь сайт — ниже, рядом со списком донатов. */
.pinned-row-wrapper { display:flex; flex-direction:column; padding:0; }
.pinned-row { display:flex; align-items:center; gap:12px; padding:12px 0; min-height:48px; }
.pinned-row-title {
    flex:1 1 auto;
    display:flex;
    align-items:center;
    font-size:15px;
    font-weight:600;
    color:#ffffff;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pinned-row-title:hover,
.pinned-row-title:focus-visible { color:#ffffff; text-decoration:none; }
.pinned-row .post-title-link { color:#ffffff !important; }
.pinned-row .post-title-link:hover,
.pinned-row .post-title-link:focus-visible { color:#ffffff !important; }
.pinned-row-actions { position:relative; flex:0 0 auto; }
.profile-right-top .kebab,
.donation-header .kebab,
.pinned-row-kebab {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:none;
    background:none;
    border-radius:50%;
    font-size:20px;
    line-height:1;
    color:#8F9093;
    cursor:pointer;
    transition:color 0.2s ease;
}
.profile-right-top .kebab:hover,
.profile-right-top .kebab:focus,
.donation-header .kebab:hover,
.donation-header .kebab:focus,
.pinned-row-kebab:hover,
.pinned-row-kebab:focus { color:#ffffff; }
.pinned-row-menu { position:absolute; top:36px; right:0; display:none; }
.pinned-row-menu.is-open { display:block; }
.pinned-divider {
    height:3px;
    width:100%;
    margin:0;
    background:linear-gradient(to bottom, #000 0 1px, #2A2E35 1px 100%);
}
.pinned-row-wrapper:last-child .pinned-divider { display:none; }
.comments-toolbar { justify-content:space-between; flex-wrap:wrap; }
.sort-trigger,
.c-sort-trigger {
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.2s ease;
}
.sort-trigger:hover,
.sort-trigger:focus,
.c-sort-trigger:hover,
.c-sort-trigger:focus { opacity:0.7; }
.sort-icon {
    display:inline-block;
    width:18px;
    height:18px;
    position:relative;
}
.sort-icon span {
    position:absolute;
    left:0;
    height:2px;
    background:#8F9093;
    border-radius:2px;
    display:block;
}
.sort-icon span:nth-child(1) { top:0; width:12px; }
.sort-icon span:nth-child(2) { top:6px; width:7px; }
.sort-icon span:nth-child(3) { top:12px; width:4px; }
/* Именно height, а не пара min/max: от min/max высота остаётся «неопределённой»,
   и вложенные блоки перестают считаться от неё — био раздувалось по тексту
   вместо того, чтобы прокручиваться. */
.profile-right-box { width:595px; height:282px; padding:16px; display:flex; flex-direction:column; justify-content:flex-start; position:relative; }
.profile-right-box.box-expanded { height:auto; overflow:visible; }

/* Био контейнер. Длинный текст не сворачивается, а листается ползунком:
   высоту задаёт карточка, всё, что не влезло, прокручивается внутри. */
.profile-right-center[data-bio-block] {
    color:#ffffff;
    white-space:pre-line;
    word-break:break-word;
    overflow-wrap:anywhere;
    margin:12px 0 0 0;
    text-align:left;
    padding-top:0;
    overflow-y:auto;
    /* Место под ползунок держим всегда. Иначе он то появляется, то исчезает:
       текст перевёрстывается под новую ширину, высота скачет — и блок мигает. */
    scrollbar-gutter:stable;
    position:relative;
    /* Нижние строки растворяются — знак, что текст продолжается. Делает это
       маска самого блока, без скрипта: любой расчёт из скрипта происходит уже
       после первой отрисовки, и видно, как затенение наползает на готовый текст. */
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
/* Долистали до низа или текст и так помещается — растворять нечего,
   иначе последняя строка остаётся приглушённой. */
.profile-right-center[data-bio-block].at-end{
    -webkit-mask-image:none;
    mask-image:none;
}

/* Если внутри только "нет информации" - центрируем по обеим осям */
.profile-bio-wrapper:not(.editing) > .profile-right-center[data-bio-block]:has(> [data-bio-empty="1"]:only-child) {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:0;
    padding:0;
    min-height:100%;
    overflow:hidden;
}

.bio-empty-placeholder { opacity:0.6; }

.profile-right-top {
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:8px;
}
.profile-right-top .user-name { font-size:20px; font-weight:bold; color:#8F9093; }
.profile-right-center { text-align:center; color:#8F9093; }

/* Кнопка «показать ещё» под свёрнутыми списками. */
.text-toggle-button {
    background:none;
    border:1px solid #2A2E35;
    border-radius:6px;
    color:#8F9093;
    cursor:pointer;
    padding:4px 10px;
    transition:background-color 0.2s ease, color 0.2s ease;
}
.text-toggle-button:hover,
.text-toggle-button:focus {
    background:#2A2E35;
    color:#e5e7eb;
}

.post-actions {
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:flex-start;
    position:relative;
}
.post-actions .media-counter {
    color: #8f9093;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}
.post-actions button { background:none; border:none; color:#8F9093; cursor:pointer; }
.post-actions button:hover,
.post-actions button:focus { color:#ffffff; }
.post-menu { min-width:160px; }
.delete-form { margin:0; }
.post-content-link { text-decoration:none; color:inherit; }
.post-meta,
.comment-meta {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:6px;
}
.edited-flag { opacity:0.7; }
.comment-meta { margin-top:4px; }
.comment-footer {
    display:flex;
    justify-content:flex-end;
    margin-top:6px;
}
.comment-attachments {
    user-select:none;
    -webkit-user-select:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}
.comment-attachment-thumb {
    display:block;
    width:96px;
    height:96px;
    padding:0;
    border:0;
    border-radius:6px;
    background:#1F2227;
    overflow:hidden;
    cursor:pointer;
}
.comment-attachment-thumb img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.comment-attachment-list {
    display:none;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}
.comment-attachment-preview {
    position:relative;
    width:72px;
    height:72px;
    border-radius:6px;
    overflow:hidden;
    background:#1F2227;
}
.comment-attachment-preview img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.comment-attachment-remove {
    position:absolute;
    top:3px;
    right:3px;
    width:22px;
    height:22px;
    border:0;
    border-radius:0;
    background:rgba(0,0,0,0.58);
    color:#fff;
    cursor:pointer;
    font-size:0;
    line-height:20px;
    padding:0;
}
.comment-attachment-remove::before {
    content:"X";
    font-size:18px;
}
.comment-like-btn {
    height:28px;
    min-width:48px;
    padding:0 9px;
    border:0;
    border-radius:6px;
    background:#1F2227;
    color:#8F9093;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    transition:background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.comment-like-btn:hover,
.comment-like-btn:focus-visible {
    background:#23272d;
    color:#ffffff;
}
.comment-like-btn:focus { outline:none; }
.comment-like-btn.is-active {
    color:#f0f2f6;
    box-shadow:
        inset -1px -1px 0 #3A3E46,
        inset 1px 1px 0 rgba(0, 0, 0, 0.65),
        inset 0 0 2px rgba(0, 0, 0, 0.45);
}
.comment-like-btn svg {
    width:14px;
    height:14px;
    display:block;
}
.comment-image-lightbox {
    position:fixed;
    inset:0;
    z-index:1400;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,0.82);
}
.comment-image-lightbox.is-open { display:flex; }
.comment-image-lightbox img {
    max-width:min(96vw, 1100px);
    max-height:92vh;
    object-fit:contain;
    border-radius:6px;
}
.comment-image-lightbox-close {
    position:absolute;
    top:14px;
    right:18px;
    border:0;
    background:transparent;
    color:#e5e7eb;
    font-size:0;
    line-height:1;
    cursor:pointer;
}
.comment-image-lightbox-close::before {
    content:"X";
    font-size:34px;
}
.comment-image-lightbox-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:0;
    border-radius:6px;
    background:rgba(31,34,39,0.42);
    color:#e5e7eb;
    cursor:pointer;
    font-size:0;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.comment-image-lightbox-nav[hidden] {
    display:none;
}
.comment-image-lightbox-nav::before {
    content:"";
    width:18px;
    height:18px;
    border-top:3px solid currentColor;
    border-right:3px solid currentColor;
    display:block;
}
.comment-image-lightbox-nav:hover,
.comment-image-lightbox-nav:focus-visible {
    background:rgba(42,46,53,0.78);
    outline:none;
}
.comment-image-lightbox-prev {
    left:24px;
}
.comment-image-lightbox-prev::before {
    transform:rotate(225deg);
}
.comment-image-lightbox-next {
    right:24px;
}
.comment-image-lightbox-next::before {
    transform:rotate(45deg);
}

.inline-edit-panel { margin-top:12px; background:#1F2227; border:1px solid #2A2E35; border-radius:10px; padding:12px; position:relative; z-index:2; }
.inline-edit-panel[style*="display:none"] { display:none !important; }
.inline-edit-form { display:flex; flex-direction:column; gap:8px; }
.inline-edit-form label { font-size:14px; color:#cbd5f5; }
.inline-edit-input, .inline-edit-textarea { width:100%; padding:10px; font-size:15px; box-sizing:border-box; }
.inline-edit-textarea { resize:vertical; min-height:120px; }
.inline-edit-meta { display:flex; justify-content:flex-end; font-size:12px; color:#8F9093; }
.inline-edit-hint { font-size:12px; color:#8F9093; }
.inline-edit-counter { font-size:12px; color:#8F9093; }
.inline-edit-actions { display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; }
.inline-edit-actions button:disabled { opacity:0.6; cursor:not-allowed; }
.inline-edit-message { min-height:18px; font-size:13px; color:#9CA3AF; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.user-name-block { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.user-name-block.editing { align-items:flex-start; }
.inline-username-form { display:flex; flex-direction:column; gap:8px; width:100%; }
.inline-username-actions { display:flex; gap:10px; align-items:center; }
.user-name-block.editing .user-name { display:none; }
.inline-username-form .inline-edit-input { max-width:280px; }
.profile-bio-wrapper { display:flex; flex-direction:column; gap:10px; text-align:left; position:relative; flex:1; min-height:0; overflow:hidden; }
.profile-bio-wrapper.editing [data-bio-block] { display:none; }
.profile-bio-wrapper.bio-empty { justify-content:center; align-items:center; }
.profile-bio-wrapper.bio-empty [data-bio-block] { margin:0; text-align:center; }
.profile-right-box.box-expanded .profile-bio-wrapper { overflow:visible; }
/* Занимает всё, что осталось от карточки, и прокручивается внутри себя. */
.profile-right-center[data-bio-block] { flex:1 1 auto; min-height:0; }
.inline-bio-form { display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; }
.inline-bio-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.inline-edit-message.error { color:#f87171; }
.inline-edit-message.success { color:#34d399; }

/* Цвета ссылок по сайту: белые, кроме даты публикации */
a, a:visited { color:#ffffff; text-decoration:none; }
a:hover { text-decoration:underline; }
.post-date-link, .dt { color:#8F9093 !important; text-decoration:none !important; }
.post-author-link { color:#8F9093 !important; text-decoration:none !important; }
.post-author-link:hover { color:#ffffff !important; text-decoration:none !important; }
.comment-author { color:#8F9093 !important; text-decoration:none !important; }
.comment-author:hover { color:#ffffff !important; text-decoration:none !important; }
.comments-toggle { color:#ffffff; }
.post-title, .post-title a, .post-title-link { color:#ffffff !important; text-decoration:none !important; }
.post-title-link:hover { text-decoration:none !important; }
.profile-image { 
    width: 100px; 
    height: 100px; 
    object-fit: cover; 
    margin-right: 20px; 
}
.profile-header { 
    display: flex; 
    align-items: center; 
}
.profile-image-wrapper { 
    position: relative; 
}
/* (удалено устаревшее общее правило .edit-avatar-btn) */
.username { 
    font-size: 24px; 
    font-weight: bold; 
    color: #ffffff;
}
.actions { 
    margin-top: 15px; 
    border-top: 1px solid #2f353c; 
    padding-top: 15px; 
}
/* Единственное описание кнопки на весь сайт: без обводки, при наведении светится текст. */
.button,
.composer-tool-button,
.composer-photo-button,
.donation-action-btn,
.donation-send-btn,
.followers-action-btn,
.followers-search button,
.followers-more,
.load-more-comments-wrapper button,
.donation-history-more-btn,
#load-more-posts,
#add-post-button,
.donation-answer-save-btn,
.donation-answer-cancel-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:#8f9093;
    color:#000000;
    border:0;
    border-radius:8px;
    padding:8px 15px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:background-color 0.15s ease;
}
/* Только там, где есть мышь: на телефоне «наведение» после касания залипает,
   и кнопка выглядит нажатой, пока не ткнёшь в пустое место. */
@media (hover: hover) {
.button:hover,
.composer-tool-button:hover,
.composer-photo-button:hover,
.donation-action-btn:hover,
.donation-send-btn:hover,
.followers-action-btn:hover,
.followers-search button:hover,
.followers-more:hover,
.load-more-comments-wrapper button:hover,
.donation-history-more-btn:hover,
#load-more-posts:hover,
#add-post-button:hover,
.donation-answer-save-btn:hover,
.donation-answer-cancel-btn:hover {
    background-color:#575757;
}
}
.donation-refresh-btn { margin-left:auto; width:26px; height:26px; border-radius:50%; border:none; background:transparent; color:#8F9093; cursor:pointer; font-size:20px; font-weight:400; line-height:1; padding:0; }
.logout-button, .cancel-button { 
    background-color: #f44336; 
    color: white;
}
.post-form-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 10px; 
}
.add-photo-btn { 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
    color: #4CAF50; 
    padding: 5px 10px; 
}
.post-form input[type="text"], .post-form textarea,
.inline-add-comment textarea,
.comment-input-shell {
    width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    font-size: 16px; 
    margin-bottom: 0; 
    font-family: inherit;
}
.post-form input[type="text"]::placeholder,
.post-form textarea::placeholder,
.inline-add-comment textarea::placeholder {
    color: #757575;
    opacity: 1;
}
.post-form textarea { 
    min-height: 80px; 
    resize: vertical; 
}
.post-form button[type="submit"]:not(.composer-tool-button) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    text-decoration:none;
    background:transparent;
    color:inherit;
    padding:0;
}
.post-form[data-post-composer] { text-align:left; }
.post-form[data-post-composer] form { display:flex; flex-direction:column; gap:16px; }
.post-inline-composer { margin-top: 16px; }
.post-form input[type="text"],
.post-form textarea,
.composer-link-input,
.inline-edit-input,
.inline-edit-textarea,
.comment-form textarea,
.inline-add-comment textarea,
.comment-input-shell,
.followers-search input {
    border: 1px solid #2f353c;
    background: #2A2E35;
    color: #e5e7eb;
    border-radius: 6px;
}
.post-form input[type="text"]:focus,
.post-form input[type="text"]:focus-visible,
.post-form textarea:focus,
.post-form textarea:focus-visible,
.composer-link-input:focus,
.composer-link-input:focus-visible,
.inline-edit-input:focus,
.inline-edit-input:focus-visible,
.inline-edit-textarea:focus,
.inline-edit-textarea:focus-visible,
.comment-form textarea:focus,
.comment-form textarea:focus-visible,
.inline-add-comment textarea:focus,
.inline-add-comment textarea:focus-visible,
.comment-input-shell:focus-within,
.comment-input-shell textarea:focus,
.comment-input-shell textarea:focus-visible,
.followers-search input:focus,
.followers-search input:focus-visible {
    outline: none;
    border-color: #2f353c;
    box-shadow: none;
}
.composer-field {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.composer-counter {
    font-size:12px;
    color:#8F9093;
    text-align:right;
    align-self:flex-end;
}
.composer-title,
.composer-description { font-size:16px; }
/* Высоту задаёт скрипт по мере набора текста, поэтому тянуть её руками не нужно. */
.composer-description { min-height:120px; resize:none; overflow-y:auto; }
.composer-attachment-list {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    padding:12px;
    border:1px dashed #8f9093;
    border-radius:10px;
    background:transparent;
}
/* Пока вложений нет, показывать пустую рамку незачем. */
.composer-attachment-list:empty { display:none; }
.composer-empty { color:#9CA3AF; font-size:14px; }
.composer-attachment-card {
    position:relative;
    width:140px;
    min-height:120px;
    background:#1F2227;
    border:1px solid #2f353c;
    border-radius:10px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    justify-content:center;
    align-items:center;
    color:#e5e7eb;
    text-align:center;
    cursor:move;
    transition:opacity 0.2s, transform 0.2s;
}
.composer-attachment-card.dragging {
    opacity:0.5;
    transform:scale(0.95);
}
.composer-attachment-card:hover {
    border-color:#4a5568;
}
.composer-attachment-image { width:100%; height:100px; object-fit:cover; border-radius:6px; }
.composer-attachment-title { font-weight:600; font-size:14px; }
.composer-attachment-link {
    font-size:12px;
    word-break:break-all;
    color:#9CA3AF;
}
.composer-attachment-remove {
    position:absolute;
    top:4px;
    right:4px;
    width:24px;
    height:24px;
    border:none;
    border-radius:50%;
    background:#2f353c;
    color:#e5e7eb;
    cursor:pointer;
    font-size:16px;
    line-height:1;
}
.composer-attachment-remove:hover { background:#3d4450; }
.composer-toolbar {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.composer-file-input { display:none; }
/* Оформление — из общего правила кнопки, здесь только своя высота. */
.composer-tool-button { min-height:44px; }
/* Кнопка публикации поста — во всю ширину формы. Отступ слева ей не нужен,
   поэтому распорка в этой форме не работает. */
.post-form[data-composer-role="primary"] .composer-toolbar-spacer { display:none; }
.post-form[data-composer-role="primary"] .composer-toolbar .composer-submit { flex:1 1 auto; }
/* Тёмная — только под мышью и при выборе с клавиатуры: после нажатия мышью кнопка
   остаётся в фокусе и выглядела бы нажатой. */
@media (hover: hover) { .composer-submit:not([disabled]):hover { background-color:#575757; } }
.composer-submit:not([disabled]):focus-visible { background-color:#575757; }
.composer-link-row {
    display:flex;
    gap:10px;
    align-items:center;
    width:100%;
}
.composer-link-input {
    flex:1 1 auto;
    min-width:0;
    padding:10px;
    font-size:16px;
    line-height:1.4;
    height:44px;
    box-sizing:border-box;
    font-family:inherit;
}
.composer-link-input::placeholder {
    color:#757575;
    opacity:1;
}
/* Оформление — из общего правила кнопки, здесь только размер под значок. */
.composer-photo-button {
    width:44px;
    height:44px;
    padding:0;
    flex-shrink:0;
}
.composer-photo-button svg { display:block; }
.composer-link-input-flash {
    animation: composerLinkInputFlash 2s ease;
}
@keyframes composerLinkInputFlash {
    0% { background-color:#2A2E35; }
    20% { background-color:#8B1F1F; }
    100% { background-color:#2A2E35; }
}
.composer-toolbar-spacer { flex:1 1 auto; }
.composer-submit[disabled] { opacity:0.6; cursor:not-allowed; }
.composer-message {
    font-size:14px;
    color:#22c55e;
}
.composer-message:empty {
    display:none;
}
.composer-message.error { color:#f87171; }
.post-wrapper {
    position: relative;
    margin-bottom: 45px;
    width: 800px;
}
/* На странице поста за постом сразу комментарии — их отступ свой. */
.post-page-container > .post-wrapper {
    margin-bottom: 0;
}
.post { 
    position: relative;
    width: 800px;
}
.post-header { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 15px; 
}
.post-info {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-left:0;
    padding-left:0;
    gap:2px;
}
.post-avatar { 
    width: 40px; 
    height: 40px; 
    margin-right: 10px; 
    aspect-ratio: 1 / 1;
}
.post-title {
    font-size: 16px;
    font-weight:600;
    text-align: left;
    margin: 16px 0 10px;
    color: #ffffff;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.post-text .post-title:first-child {
    margin-top: 0;
}
.post-content p {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}
.post-content .post-description {
    color:#8F9093;
}
.post-description {
    font-size: 16px;
    color:#8F9093;
    word-break: break-word;
    overflow-wrap: anywhere;
    position:relative;
    display:block;
    margin:0 0 12px 0;
}
/* Нижние строки растворяются — так же, как в описании профиля: это маска самого
   текста, а не подложка цветом, поэтому она подходит к любому фону. */
.post-description.is-clamped {
    cursor:pointer;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.post-description-wrapper {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* Кнопка три точки у поста */
.post-kebab,
#post-kebab {
    background: none;
    border: none;
    color: #8F9093;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s ease;
    margin-left: auto;
}
.post-kebab:hover,
#post-kebab:hover {
    color: #ffffff;
}
.post-main-image {
    display:block;
    margin-bottom:14px;
}
.post-main-image img {
    width:100%;
    border-radius:12px;
    object-fit:cover;
}

.post-text { text-align:left; }
.post-text .post-meta { margin-top:8px; }
.post-media { margin-bottom:16px; }
/* Вложения и фото комментария — не текст: частый щелчок по стрелкам или рядом
   с фото не должен выделять их синим. */
.media-carousel { position:static; width:100%; max-width:720px; margin:0 auto; overflow:visible; user-select:none; -webkit-user-select:none; }
.media-stage { position:static; overflow:hidden; border-radius:12px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; }
/* Лента вложений — во всю высоту сцены (а сцена — по самому высокому из
   показанных), текущее вложение — по центру. Так выезжающее при листании
   вложение обрезается по краям сцены, а не по высоте текущего. */
.media-track { position:relative; width:100%; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.media-slide { display:none; width:100%; }
.media-slide.is-active { display:block; }
/* Листание пальцем: вбок тянет вложение, вверх-вниз листает страницу.
   Соседнее вложение на время сдвига встаёт рядом поверх (is-peek). */
.media-stage { touch-action:pan-y pinch-zoom; }
.media-stage.is-dragging { cursor:grabbing; }
/* Сцена ставит вложение по центру по высоте — соседнее встаёт туда же, иначе
   прыгнет, когда станет текущим. */
.media-slide.is-peek { display:block; position:absolute; top:50%; left:0; }
.media-photo { background:transparent; display:flex; align-items:center; justify-content:center; }
.media-photo img { width:auto; max-width:100%; height:auto; max-height:540px; object-fit:contain; background:transparent; border:none; border-radius:0; }
.media-photo img[data-raw-src]:not([src]) { visibility:hidden; }
/* Картинка ещё не готова (сразу после публикации её несколько секунд переделывают
   в webp) — на её месте кружок, как у аватара, а не подпись или значок поломки. */
.media-photo.is-loading { position:relative; min-height:220px; color:#8F9093; }
.media-photo.is-loading img { visibility:hidden; }
.media-photo.is-loading::after {
    content:""; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
    border-radius:50%; border:3px solid currentColor; border-top-color:transparent;
    animation:avatar-spin 0.8s linear infinite; opacity:0.9;
}
/* Блок держит место под плеер или карточку и ничего не показывает: чёрный фон
   был виден отдельным кадром перед тем, как поднимется плеер. */
.media-youtube { position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; }
.media-youtube iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; z-index:1; }
.media-twitch { 
    position:relative; 
    width:100%; 
}
.media-twitch iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; z-index:1; }
.media-kick { position:relative; width:100%; }
.media-kick.is-player { padding-top:56.25%; }
.media-kick iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; z-index:1; }
/* Ни заглушки, ни запаса по высоте: показываем сразу встраивание или снимок. */
.media-instagram {
    width:100%;
    display:flex;
    justify-content:center;
    position:relative;
}
.media-instagram blockquote.instagram-media { margin:0 auto; width:100%; max-width:540px; border-radius:12px; overflow:hidden; border:0; box-shadow:none; }
/* Кружок за виджетами всех площадок: крутится с первой секунды, виджет встаёт
   поверх и закрывает его. Пока чужой код не ответил, в блоке пусто — место под
   кружок держат правила ниже, и держат только до появления содержимого.
   Нарисованному у нас плееру (Twitch, Kick в режиме «Фото») кружок не нужен. */
.media-instagram:has(.instagram-media)::before,
.media-youtube::before,
.media-twitch:not(:has(.stream-card))::before,
.media-kick:not(:has(.kick-card))::before,
.media-tiktok:has(iframe)::before,
.media-tiktok[data-tiktok-shot="1"]:not(.is-ready)::before,
.media-twitter::before,
.media-telegram:not(:has(.telegram-shot)):not(:has(.media-link-card))::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:26px;
    height:26px;
    margin:-16px 0 0 -16px;
    border-radius:50%;
    border:3px solid #9CA3AF;
    border-top-color:transparent;
    animation:avatar-spin 0.8s linear infinite;
}
/* Пока твит не пришёл, у блока нет высоты — кружку негде стоять. Место есть,
   только пока твита нет: как только он показан (is-ready), высота его собственная. */
.media-twitter:not(.is-ready) { min-height:200px; }
/* Остальным пустым блокам — то же место под кружок, пока содержимого нет.
   Плееры эфиров сразу держат 16:9, чтобы страница не прыгала. */
.media-instagram:has(blockquote.instagram-media),
.media-telegram:not(:has(iframe)):not(:has(.telegram-shot)):not(:has(.media-link-card)) { min-height:200px; }
.media-twitch:not(:has(.stream-card)),
.media-kick:not(:has(.kick-card)) { padding-top:56.25%; }
.media-twitter > *,
.media-instagram .instagram-media,
.media-telegram iframe { position:relative; z-index:1; }
/* Своей ширины их рамка не задаёт и внутри flex сжимается до 326 — задаём сами,
   иначе встраивание получается уже снимка. */
.media-instagram iframe.instagram-media { width:100%; max-width:540px; min-width:0; border-radius:12px; }
.media-twitter { 
    width:100%; 
    display:flex; 
    justify-content:center; 
    position:relative; 
}
.media-tiktok { width:100%; display:flex; justify-content:center; position:relative; }
/* Снимок ролика TikTok вместо их окна. Ширина как у самого окна. Пока снимок
   не пришёл, у блока есть место под кружок. */
.media-tiktok[data-tiktok-shot="1"]:not(.is-ready) { min-height:200px; }
.media-tiktok .tiktok-shot { display:block; width:100%; max-width:352px; margin:0 auto; position:relative; z-index:1; }
.media-tiktok .tiktok-shot img { width:100%; display:block; border-radius:12px; margin:0; }
.media-tiktok iframe {
    position:relative;
    z-index:1;
    display:block;
    width: min(100%, 352px);
    aspect-ratio: 9 / 16;
    height: auto;
    border:0;
    border-radius:12px !important;
    background:transparent;
}
.media-telegram { width:100%; display:flex; justify-content:center; position:relative; }
/* Снимок поста вместо чужого виджета: обычная картинка со своего CDN. */
/* Снимок поста Instagram вместо их встраивания. */
/* Ширина как у самого встраивания Instagram: шире 540 оно не бывает. */
.media-instagram .instagram-shot { display:block; width:100%; max-width:540px; margin:0 auto; }
.media-instagram .instagram-shot img { width:100%; display:block; border-radius:12px; margin:0; }
/* Снимок твита вместо их виджета. Ширина как у самого виджета: шире 550 он не бывает. */
.media-twitter .x-shot { display:block; width:100%; max-width:550px; margin:0 auto; }
.media-twitter .x-shot img { width:100%; display:block; border-radius:12px; margin:0; }
.media-telegram .telegram-shot { display:block; }
.media-telegram .telegram-shot img { width:100%; display:block; border-radius:12px; margin:0; }
/* Нарисованный плеер Twitch в режиме «Фото»: целиком у нас, в канал не ходим. */
.stream-card {
    position:relative; display:block; width:100%; aspect-ratio:720/405; border-radius:12px; overflow:hidden; color:#fff;
    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
        radial-gradient(45% 65% at 25% 40%, hsl(var(--hue, 260) 45% 34%), transparent 70%),
        radial-gradient(50% 60% at 78% 62%, hsl(calc(var(--hue, 260) + 70) 40% 28%), transparent 70%),
        radial-gradient(35% 45% at 58% 18%, hsl(calc(var(--hue, 260) + 190) 35% 24%), transparent 70%),
        #0e0e10;
}
.stream-card svg { display:block; width:20px; height:20px; fill:currentColor; }
.stream-card-name { position:absolute; top:20px; left:20px; font:600 16px/20px Inter, Roobert, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:capitalize; }
.stream-card-play { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.stream-card-play svg { width:120px; height:120px; }
.stream-card .stream-card-logo { width:60px; height:18px; }
.stream-card-bar { position:absolute; left:20px; right:20px; bottom:16px; display:flex; justify-content:space-between; }
.stream-card-bar > span { display:flex; align-items:center; gap:16px; }
/* Карточка видео вместо плеера YouTube. Собрана так же, как выглядит сам плеер
   до нажатия: обложка, сверху кружок канала с названием, по центру красная
   кнопка, справа снизу «Смотреть на YouTube». Нажатие в любом месте уводит на
   видео. Шрифт тот же, которым подписывает себя YouTube. */
/* Метка сервера в шапке: домен один, серверов несколько, и без метки
   непонятно, на каком ты сейчас. */
.server-mark { display:inline-flex; align-items:center; height:24px; padding:0 8px; margin-left:6px;
              border:1px solid var(--line, #2A2E35); border-radius:6px; color:#8F9093;
              font-size:12px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.media-youtube .youtube-shot { position:absolute; inset:0; display:block; z-index:2; border-radius:12px; overflow:hidden; background:#000;
    font-family:Roboto,"Helvetica Neue",Arial,sans-serif; }
/* Обложка — только прямой потомок ссылки: кружок канала лежит внутри
   заголовка, и его это правило задевать не должно. */
.media-youtube .youtube-shot > img { width:100%; height:100%; object-fit:cover; display:block; margin:0; border-radius:0; }
/* Размеры, цвета и шрифты ниже взяты из таблицы стилей самого плеера
   (ytp-gradient-top, ytp-title-channel-logo, ytp-large-play-button,
   ytp-impression-link), чтобы карточка выглядела ровно как он. */
/* Затемнение сверху — та самая картинка, которой затемняет плеер
   (ytp-gradient-top): своим градиентом получалась чёрная полоса, а у него
   переход почти незаметный. */
.media-youtube .youtube-shot-head {
    position:absolute; left:0; right:0; top:0; height:48px; padding-bottom:50px; padding-left:12px; padding-right:12px;
    box-sizing:content-box; text-align:left; display:flex; align-items:flex-start; gap:10px;
    background-repeat:repeat-x; background-position:top;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    color:#fff; pointer-events:none;
}
.media-youtube .youtube-shot-avatar { width:40px !important; height:40px !important; margin:5px; border-radius:50%; flex:0 0 auto; object-fit:cover; }
.media-youtube .youtube-shot-texts { min-width:0; margin-top:6px; }
.media-youtube .youtube-shot-title {
    min-width:0;
    font:700 20px/28px Roboto,Arial,sans-serif; font-stretch:25%; color:#fff;
    /* Одна строка с многоточием — как у плеера (ytp-title-link). */
    /* Конец строки не обрезается многоточием, а растворяется: у него это
       сделано маской (ytmVideoInfoVideoTitle), повторяем её. */
    display:block; max-width:100%; white-space:nowrap; overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, #fff 95%, rgba(0,0,0,0));
    mask-image:linear-gradient(to right, #fff 95%, rgba(0,0,0,0));
}
/* Имя канала под названием — мельче и приглушённее, как ytp-title-subtext. */
.media-youtube .youtube-shot-author {
    margin-top:2px; font:400 13px/16px Roboto,"Helvetica Neue",Arial,sans-serif;
    color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Кнопка воспроизведения: 68×48 по центру, как у плеера. */
.media-youtube .youtube-shot-play {
    position:absolute; left:50%; top:50%; width:68px; height:48px; margin-left:-34px; margin-top:-24px;
    pointer-events:none;
}
.media-youtube .youtube-shot-play .yt-play-bg { fill:#f00; fill-opacity:.92; }
.media-youtube .youtube-shot:hover .youtube-shot-play .yt-play-bg { fill-opacity:1; }
/* «Смотреть на YouTube» справа снизу. У плеера это кнопка-таблетка:
   высота 48, скругление 24, тёмная подложка и белый текст Roboto 500
   (ytSpecButtonShapeNextSizeL + ytSpecButtonShapeNextTonal). */
.media-youtube .youtube-shot-watch {
    position:absolute; right:12px; bottom:12px;
    display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
    height:48px; padding:0 16px; border-radius:24px; box-sizing:border-box;
    margin:0; min-width:0; white-space:nowrap; text-transform:none;
    background:rgba(0,0,0,.6); color:#fff; pointer-events:none;
    font-family:Roboto,Arial,sans-serif; font-size:14px; font-weight:500; line-height:18px;
}
.media-youtube .youtube-shot-watch-text { color:inherit; font:inherit; }
.media-youtube .youtube-shot-watch-logo { width:74px; height:16px; display:block; }
.media-link-card { padding:24px; background:#1F2227; border:1px solid #2f353c; border-radius:12px; color:#e5e7eb; text-align:left; word-break:break-word; }
.media-link-card a { color:#60a5fa; text-decoration:none; }
.media-link-card a:hover { text-decoration:underline; }
.media-link-label { display:block; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; color:#9CA3AF; }
/* Пояснение в карточке-ссылке: почему вместо поста стоит ссылка. */
.media-link-note { font-size:14px; line-height:20px; color:#9CA3AF; margin-bottom:8px; }
.media-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 115px;
    border: none;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #e5e7eb;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0;
    margin: 0;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: transparent;
}
.post-wrapper:hover .media-arrow,
.post:hover .media-arrow { opacity: 1; }
.media-arrow:disabled { cursor: default; display: none; }
.media-arrow.is-hidden { display: none; }
.media-arrow-prev {
    right: 100%;
    background-color: transparent !important;
    background-image: linear-gradient(to right, transparent 0%, #2a2e35 100%) !important;
}
.media-arrow-next {
    left: 100%;
    background-color: transparent !important;
    background-image: linear-gradient(to left, transparent 0%, #2a2e35 100%) !important;
}
/* На телефоне наводить мышью нечем, поэтому стрелки видны всегда. Свайпом можно
   листать картинки, а видео свайп перехватывает — без стрелок листать было нечем. */
@media (hover: none) and (pointer: coarse) {
    .media-arrow { opacity:1; }
}
.comments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.comments-toolbar .comment-actions-row {
    flex: 1 1 auto;
}
.comment-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
/* Левая часть: глаз, комментарии, поделиться */
.post-metrics-left {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}
.metric-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 0;
    border: none;
    background: none;
    color: #8F9093;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: color 0.2s ease;
}
.metric-button:focus {
    outline: none;
}
.metric-button:hover,
.metric-button:focus-visible {
    color: #ffffff;
}
.metric-button .metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.metric-button .metric-icon svg {
    display: block;
    width: 20px;
    height: auto;
}
/* Глаз чуть больше */
.metric-button[data-action="view-stats"] .metric-icon svg {
    width: 26px;
}
.metric-count {
    font-weight: 600;
    color: #8F9093;
    font-size: 14px;
}
/* Правая часть: лайк и дизлайк как единые кнопки */
.post-reactions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}
.reaction-icon-btn {
    height: 36px;
    padding: 0 17px;
    border-radius: 6px;
    border: none;
    /* В покое кнопка без подложки — она появляется при наведении и после нажатия. */
    background: transparent;
    color: #8F9093;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.reaction-icon-btn:focus {
    outline: none;
}
.reaction-icon-btn:hover,
.reaction-icon-btn:focus-visible {
    background: #23272d;
    color: #ffffff;
}
.reaction-icon-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.reaction-icon-btn svg path {
    fill: currentColor;
}
.reaction-icon-btn .metric-like,
.reaction-icon-btn .metric-dislike {
    font-weight: 600;
    color: inherit;
    font-size: 14px;
}
.reaction-icon-btn.is-active {
    color: #f0f2f6;
    background: #1F2227;
    box-shadow:
        inset -1px -1px 0 #3A3E46,
        inset 1px 1px 0 rgba(0, 0, 0, 0.65),
        inset 0 0 2px rgba(0, 0, 0, 0.45);
}
.reaction-icon-btn.reaction-dislike svg {
    transform: scaleY(-1);
}
.comments-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.media-caption { margin-top:8px; text-align:center; font-size:14px; color:#9CA3AF; min-height:18px; }
@media (max-width: 1050px){
    .post-content-wrapper { position: relative; }
    .media-arrow { width: 150px; opacity: 1; }
    /* Стрелки начинаются от края поста, а не от края вложения: вложение стоит
       по центру поста шириной 800px, край поста — в 400px от середины. */
    .media-arrow-prev {
        left: calc(50% - 400px);
        right: auto;
        background-image: linear-gradient(to left, transparent 0%, #2a2e35 100%) !important;
    }
    /* Стрелки живут только над вложением, а не над заголовком с описанием:
       иначе на телефоне они перекрывают кнопку «показать текст целиком».
       Листание обрезает лента вложений, а не сцена — иначе стрелку, вышедшую
       за край вложения, обрезало бы. */
    .media-stage { position: relative; overflow: visible; }
    .media-track { overflow: hidden; border-radius: 12px; }
    .media-arrow-next {
        right: calc(50% - 400px);
        left: auto;
        background-image: linear-gradient(to right, transparent 0%, #2a2e35 100%) !important;
    }
}
/* На узком экране стрелки уже: сидят по краям внутри вложения и не закрывают его. */
@media (max-width: 700px) {
    .media-arrow { width: 64px; font-size: 28px; opacity: 1; }
}
.post-attachments-grid {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
}
.post-attachment-photo,
.post-attachment-card {
    display:block;
    position:relative;
    border-radius:12px;
    overflow:hidden;
    background:#1F2227;
    border:1px solid #2f353c;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.post-attachment-photo img {
    width:200px;
    height:200px;
    object-fit:cover;
    display:block;
}
.post-attachment-card {
    width:220px;
    min-height:120px;
    padding:12px;
    color:#e5e7eb;
}
.post-attachment-card img {
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:8px;
}
.post-attachment-card.video::after {
    content:"▶";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:32px;
    color:rgba(255,255,255,0.8);
    pointer-events:none;
}
.post-attachment-card:hover,
.post-attachment-photo:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
}
.post-attachment-tag {
    display:inline-block;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    color:#9CA3AF;
    margin-bottom:6px;
}
.post-attachment-url {
    font-size:12px;
    color:#e5e7eb;
    word-break:break-all;
}
.post-content img { max-width: 100%; border-radius: 8px; margin-top: 10px; border:none; }
.post-actions button { background: none; border: none; color: #8F9093; cursor: pointer; }
.load-more-wrapper { display:flex; justify-content:center; align-items:center; margin: 24px 0 0; width:100%; }
/* Оформление — из общего правила кнопки, здесь только размеры. */
#load-more-posts,
#add-post-button { width:800px; max-width:100%; min-height:44px; }

/* Сброс старых абсолютных стилей крестика удаления внутри выпадающего меню */
.post-menu .delete-form { position: static; top: auto; right: auto; }

.c-sort-menu .c-sort-option[data-selected="1"] {
    color: #e5e7eb;
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

/* Комментарии: шапка как у поста, аватар 40x40, кебаб и меню */
/* Ава — отдельной колонкой слева; имя, дата, текст, фото и лайк — одной
   колонкой справа от неё (сетка — у самого .comment ниже). */
.comment-header { display:contents; }
.comment-avatar { grid-column:1; grid-row:1 / span 2; align-self:start; width:40px; height:40px; display:block; }
.comment-info { grid-column:2; grid-row:1; text-align:left; margin-bottom:8px; }
.comment-actions { grid-column:3; grid-row:1; }
.comment-body { grid-column:2 / 4; grid-row:2; min-width:0; }
.comment-info .dt { display:inline-block; margin-top:2px; }
.comment-actions { margin-left:auto; position:relative; }
.comment-kebab { background:none; border:none; color:#8F9093; cursor:pointer; transition:color 0.2s ease; font-size:20px; padding:4px 8px; }
.comment-kebab:hover { color:#ffffff; }
.comment-menu { display:none; position:absolute; right:0; top:28px; z-index:30; }
.comment-reply-quote,
.comment-reply-compose-body {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin:0 0 8px;
    padding:8px 10px;
    border:0;
    border-radius:6px;
    background:var(--quote-gradient);
    color:#cbd5e1;
    text-align:left;
    cursor:pointer;
}
.comment-reply-quote strong,
.comment-reply-compose-body strong { color:#8F9093; font-size:13px; }
.comment-reply-quote span,
.comment-reply-compose-body span {
    max-width:100%;
    color:#8F9093;
    font-size:13px;
    line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.comment-reply-compose {
    display:flex;
    align-items:stretch;
    gap:8px;
    margin-bottom:8px;
    position:relative;
}
.comment-reply-compose-body { flex:1 1 auto; margin:0; padding-right:46px; }
.comment-reply-cancel {
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    color:#ef4444;
    cursor:pointer;
    font-size:28px;
    line-height:1;
    padding:0;
}
.comment-reply-quote:hover,
.comment-reply-compose-body:hover { color:#ffffff; }
.comment-reply-cancel:hover { color:#f87171; }
.comment-reply-btn {
    background:none;
    border:none;
    color:#8F9093;
    cursor:pointer;
    padding:0;
    font-size:12px;
}
.comment-menu .comment-reply-btn {
    padding:8px 10px;
    font-size:14px;
}
.comment-reply-btn:hover { color:#ffffff; }
/* Подсветка комментария при переходе по цитате: тот же градиент, гаснет за 2 секунды.
   isolation нужен, иначе слой с градиентом уезжает под фон контейнера и его не видно. */
.comment-highlight { isolation:isolate; }
.comment-highlight::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:6px;
    pointer-events:none;
    background:var(--quote-gradient);
    animation:commentHighlight 2.6s ease forwards;
}
@keyframes commentHighlight {
    0%, 23% { opacity:1; }
    100% { opacity:0; }
}
.comment-body p { margin:5px 0; color:#ffffff; line-height:1.5; text-align:left; }

.comment-hint { margin-top:8px; font-size:13px; color:#f87171; text-align:left; }

/* Кнопка загрузки комментариев как иконка */
.load-comments-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background: none;
    border: none;
    color: #e5e7eb;
    cursor: pointer;
    padding: 4px 0;
}

.followers-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1200; }
/* Без затемнения страницы, как у окошка уведомлений; подложка остаётся — нажатие мимо закрывает окно. */
.followers-modal-backdrop { position:absolute; inset:0; background:transparent; }
.followers-modal-content {
    position:relative;
    padding:24px;
    width:360px;
    max-width:90vw;
    color:#e5e7eb;
}
.followers-modal-content h3 { margin-top:0; margin-bottom:16px; font-size:18px; }
.followers-close { position:absolute; top:10px; right:10px; background:none; border:none; color:#8F9093; font-size:20px; cursor:pointer; }
.followers-close:hover { color:#ffffff; }
.followers-search { display:flex; gap:8px; margin-bottom:12px; }
.followers-search input { flex:1; padding:8px; }
.followers-list { max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.followers-section-title { margin:6px 2px 0; font-size:12px; font-weight:600; color:#9aa0a6; text-transform:uppercase; letter-spacing:.04em; }
.followers-item { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; background:#2A2E35; color:#e5e7eb; font-size:14px; }
.followers-link:hover { text-decoration:none; }
/* Как у кнопок: при наведении темнеет (только где есть мышь). */
@media (hover: hover) { .followers-link:hover .followers-name { color:#8f9093; } }
.followers-link { display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:inherit; text-decoration:none; }
.followers-avatar { width:36px; height:36px; flex-shrink:0; }
.followers-meta { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.followers-name { font-weight:600; color:#f3f4f6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 0.15s ease; }
.followers-actions { display:flex; gap:6px; flex-shrink:0; }
.followers-action-btn:disabled,
.followers-action-btn.followers-action-disabled { opacity:0.5; cursor:default; }
.followers-empty { text-align:center; font-size:13px; opacity:0.7; }
.followers-more { width:100%; padding:8px; }
.followers-more[disabled] { opacity:0.5; cursor:default; }
.followers-message { margin-top:8px; font-size:13px; color:#f87171; text-align:center; min-height:18px; }
.load-comments-btn img { width:18px; height:18px; display:block; }
.load-comments-btn:hover img { opacity:1; }
.load-comments-btn .comment-count { color:#e5e7eb; opacity:.9; }

/* Верхнее горизонтальное меню (липкое) */
.top-sticky-menu {
    position: fixed;
    top: 30px;
    right: 20px;
    left: auto;
    z-index: 1100;
    background: transparent;
}
@media (min-width: 1416px) {
    .top-sticky-menu {
        left: calc(50% + 440px);
        right: auto;
    }
}
.top-sticky-menu .menu-bar {
    display:flex; gap:25px; align-items:center; justify-content:flex-start; width:auto; margin:0; padding:0;
}
/* Стили только для иконок меню, НЕ для ссылок внутри выпадающих меню */
.top-sticky-menu .menu-bar > .menu-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; }
.top-sticky-menu .menu-bar img,
.top-sticky-menu .menu-bar > .menu-icon.menu-icon-alert svg { width:28px; height:28px; display:block; }
.top-sticky-menu .menu-bar > a.menu-icon.menu-icon-dollar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    /* Значок нарисован как остальные — картинкой 28×28. Буквой он не садился
       в ряд: у текста размер считается от кегля, а не от коробки. */
    line-height:0;
    color:#8F9093;
    text-decoration:none;
}
.top-sticky-menu .menu-bar > a.menu-icon.menu-icon-dollar:hover {
    color:#8F9093;
}
.top-sticky-menu .menu-bar .menu-avatar {
    width:28px;
    height:28px;
    display:inline-block;
    border-radius:50%;
}
.top-sticky-menu .menu-bar > a.menu-logout {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    height:28px;
    font-size:14px;
    color:#8F9093;
    text-decoration:none;
    background:none;
    border-radius:0;
    transition:color .2s ease;
}
.top-sticky-menu .menu-bar > a.menu-logout:hover {
    color:#ffffff;
}

/* Унифицированное выпадающее меню */
/* Единственное описание фона маленьких окон на весь сайт: выпадашки, меню «…»,
   сортировка, окна выбора и подтверждения, подсказки «?». Цвет, объёмная рамка,
   скругление, без тени и без затемнения страницы. Новое окошко — селектор
   дописывается сюда, а не рядом. */
.dropdown-shell,
.followers-modal-content,
.donation-visibility-dialog,
.profile-left-box .avatar-menu,
.profile-info-menu,
.post-menu,
.sort-menu,
.c-sort-menu,
.comment-menu,
.donation-tag-menu,
.live-menu,
.donate-tip {
    background:#1F2227;
    border-top:2px solid #2A2E35;
    border-left:2px solid #2A2E35;
    border-right:2px solid #15171A;
    border-bottom:2px solid #15171A;
    border-radius:8px;
    box-shadow:none;
}
.dropdown-shell { position:absolute; right:0; top:34px; padding:6px 0; min-width:160px; z-index:1200; }
.dropdown-shell[hidden] { display:none; }
/* Колокольчик и его окошко */
.notif-menu { position:relative; display:flex; align-items:center; }
/* Размеры задаём здесь: значок лежит в обёртке и под правило меню для прямых детей не попадает. */
.notif-trigger { appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; }
.notif-trigger svg { width:28px; height:28px; display:block; }
.notif-badge { position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; }
.notif-panel { width:340px; max-height:70vh; overflow-y:auto; padding:0; }
.notif-head { padding:8px 12px 4px; color:#6b7280; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.notif-empty { padding:18px 12px; color:#8f9093; font-size:13px; text-align:center; }
/* Название поста внутри строки уведомления. */
.notif-link, .notif-link:visited { color:#8f9093; text-decoration:none; }
.notif-link:hover { text-decoration:underline; }
.notif-group.is-unread { background:rgba(230,50,15,.07); }
.notif-row { display:flex; align-items:flex-start; gap:10px; width:100%; padding:9px 12px; background:none; border:0; cursor:pointer; text-align:left; color:#e5e7eb; font-size:13px; text-decoration:none; box-sizing:border-box; }
.notif-row:hover { background:#2A2E35; }
.notif-row:hover { text-decoration:none; }
/* Строка переносится, а не обрезается: счёт стоит в конце предложения,
   и при обрезке он пропадал первым. */
.notif-text { flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
.notif-when { color:#6b7280; font-size:11px; white-space:nowrap; }
.notif-ava { width:28px; height:28px; border-radius:50%; flex:0 0 28px; }
.notif-people { padding:2px 12px 8px 46px; display:flex; flex-direction:column; gap:6px; }
.notif-people[hidden] { display:none; }
.notif-person { display:flex; align-items:center; gap:8px; color:#8f9093; font-size:12px; text-decoration:none; }
.notif-person:hover { color:#e5e7eb; }
.notif-person > span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.notif-preview { color:#6b7280; font-size:11px; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.notif-when { padding-top:1px; }
.notif-person .notif-ava { width:20px; height:20px; flex:0 0 20px; }
.notif-more { display:block; width:100%; padding:9px 12px; background:none; border:0; border-top:1px solid #2A2E35; color:#8f9093; font-size:12px; cursor:pointer; }
.notif-more:hover { background:#2A2E35; color:#e5e7eb; }
.dropdown-shell a.dropdown-item { display:block; padding:8px 14px; text-decoration:none; color:#e5e7eb; font-size:14px; font-weight:600; line-height:1.3; white-space:nowrap; }
.dropdown-shell a.dropdown-item:hover { background:#2A2E35; text-decoration:none; }
/* Аватарное меню использует общую оболочку */
.avatar-menu { position:relative; display:inline-block; vertical-align:middle; }
.avatar-menu .avatar-trigger { appearance:none; -webkit-appearance:none; background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; width:28px; height:28px; }

.delete-form { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
}
.delete-button { 
    background-color: transparent; 
    border: none; 
    font-size: 20px; 
    color: #65676b; 
    cursor: pointer; 
    padding: 5px; 
    line-height: 1;
}
#post-image-preview { 
    max-width: 100px; 
    max-height: 100px; 
    margin-top: 10px; 
    border-radius: 8px; 
}
/* Вложенный список темнее карточки, иначе он с ней сливается. */
/* Блоки со списками показывают сами посты, а пост — уже контейнер.
   Второй фон под ним лишний, поэтому у этих блоков его нет.
   Отступы у блока свои, поменьше: под кнопкой сразу список, и большой пустоты
   под ним быть не должно. */
.donation-container.is-plain { background:transparent; padding:0; margin:16px auto 0; }
/* Кнопка списка — во всю ширину карточки: это заголовок своего раздела, а не
   кнопка действия рядом с другими. Уголок на ней — тот же, что у списка меток
   у донатов: смотрит вниз, когда список открыт. */
.donation-container.is-plain > .button { gap:8px; width:100%; }
.donation-container.is-plain > .button::after {
    content:""; flex:0 0 auto; width:0; height:0;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid currentColor;
    transition:transform 0.15s ease;
}
.donation-container.is-plain.is-open > .button::after { transform:rotate(180deg); }
/* Ряд плиток шире полей общего контейнера: 398, просвет, 398 — это все 800,
   а поля контейнера отняли бы у него по шестнадцать с каждой стороны. */
.donation-container.is-plain .my-posts-wrap { margin:0 -16px; }
/* Ни обёртка, ни список ничего не заливают: подложки под постами нет. */
.my-posts-container { background:transparent; border-radius:0; padding:0; margin-top:3px; }
/* Список листается вбок: две плитки видно, остальные уезжают вправо.
   Страница при этом не растёт вниз на всю ленту. Полоска идёт снизу — по ней
   и видно, сколько ещё осталось; отступ под плитками — её место.
   Бегунок светлый: тёмного фона под ним здесь нет, тёмный бы пропал. */
.my-posts-list { overflow-x:auto; overflow-y:hidden; padding-bottom:3px;
    --scrollbar-thumb:#8f9093; --scrollbar-thumb-hover:#a5a6a9; }
/* «Показать ещё» стоит последней плиткой в ряду: долистал — и вот она. */
.my-posts-list [data-list-more] { align-self:center; justify-self:center; }

/* Свои комментарии — не плитки, а обычная лента: она листается вниз, как под
   постом. Стрелки по краям здесь не нужны. */
[data-activity="show-comments"] .my-posts-list {
    display:block; overflow-x:hidden; overflow-y:auto; max-height:70vh;
    padding:0 16px;
}
[data-activity="show-comments"] .my-posts-nav { display:none !important; }
/* Полоски между комментариями на странице поста выходят за края контейнера —
   здесь их доводим ровно до краёв списка. */
[data-activity="show-comments"] .comment::after { left:0; right:0; }
/* Ссылка на пост рядом с именем автора. */
.comment-post-link, .comment-post-link:visited { color:#8f9093; font-weight:400; font-size:13px; }
.comment-post-link:hover { color:#e5e7eb; }
.my-post-link { color:#5865f2; text-decoration:none; padding:8px; background:#2A2E35; border-radius:4px; }
.my-post-link:hover { background:#3A3E45; }
.my-comment-link { display:block; color:#e5e7eb; text-decoration:none; padding:10px; background:#2A2E35; border-radius:4px; }
.my-comment-link:hover { background:#3A3E45; }
.my-comment-meta { color:#8F9093; font-size:12px; line-height:1.3; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-comment-text { color:#e5e7eb; font-size:14px; line-height:1.35; overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.my-comment-link:hover .my-comment-text { color:#ffffff; }
.my-posts-empty { color:#8F9093; text-align:center; padding:20px; }
/* Строка заблокированного: имя слева, кнопка справа. */
.blocked-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; background:#2A2E35; border-radius:4px; }
.blocked-row a { color:#e5e7eb; text-decoration:none; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blocked-row a:hover { color:#ffffff; text-decoration:underline; }
.button.small { padding:4px 8px; font-size:14px; }
.form-group { 
    margin-bottom: 20px; 
}
.form-group label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
}
.form-group input { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #2f353c; 
    background: #2A2E35;
    color: #e5e7eb;
    border-radius: 4px; 
    box-sizing: border-box; 
}
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #2f353c;
    background: #2A2E35;
    color: #e5e7eb;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
.form-hint { color:#8F9093; font-size:12px; display:block; margin-top:6px; }
.char-counter { color:#8F9093; font-size:12px; }
.login-reminder { margin-top:10px; font-size:14px; }
.load-more-comments-wrapper { margin-top:12px; text-align:center; }
/* Оформление — из общего правила кнопки, здесь только высота. */
.load-more-comments-wrapper button { min-height:44px; }
.post-edit-title,
.post-edit-ta,
.post-edit-file { width:100%; margin-top:8px; }
.post-edit-ta { resize:vertical; }
.post-edit-controls,
.comment-edit-controls { display:flex; gap:8px; margin-top:8px; }
.post-edit-save,
.comment-edit-save {
    background:#3b82f6;
    border:none;
    color:#ffffff;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:background-color 0.2s ease;
}
.post-edit-save:hover,
.comment-edit-save:hover { background:#2563eb; }
.post-edit-cancel,
.comment-edit-cancel {
    background:none;
    border:1px solid #2A2E35;
    color:#e5e7eb;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:background-color 0.2s ease, color 0.2s ease;
}
.post-edit-cancel:hover,
.comment-edit-cancel:hover {
    background:#2A2E35;
}
.post-edit-remove {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
}
.post-edit-remove-checkbox { margin-right:6px; }
.comment-edit { width:100%; margin-top:8px; }
.table-container table {
    border-collapse: collapse; 
    width: 100%;
}
.table-container th, .table-container td {
    border: 1px solid #ddd; 
    padding: 8px; 
    text-align: left;
}

/* Стили для сообщений */
.message-success {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #c3e6cb;
    text-align: center;
}

.message-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #f5c6cb;
    text-align: center;
}

.message-info {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #bee5eb;
    text-align: center;
}

/* Стили для нейтральной кнопки */
.button.secondary-button {
    background-color: #6c757d;
    color: white;
}

.button.secondary-button:hover {
    background-color: #5a6268;
}

/* Стили для комментариев */
.post-divider {
    position:relative;
    height:3px;
    width:100%;
    margin:16px 0;
    background:linear-gradient(to bottom, #000 0 1px, #2A2E35 1px 100%);
    overflow:visible;
}
.post-divider .reaction-meter {
    position:absolute;
    top:0;
    right:0;
    width:240px;
    height:3px;
    display:flex;
    overflow:hidden;
    border-radius:0;
    margin:0;
    border:0;
    pointer-events:none;
}
.post-divider .reaction-meter-like {
    background:#8F9093;
    height:100%;
    flex:0 0 auto;
    width:120px;
    transition:width 0.3s ease;
}
.post-divider .reaction-meter-dislike {
    background:linear-gradient(to bottom, #000 0 1px, #2A2E35 1px 100%);
    height:100%;
    flex:0 0 auto;
    width:120px;
    transition:width 0.3s ease;
}
.post-comments-section {
    margin-top: 24px;
    padding: 18px 38px 24px;
    text-align:left;
}
/* Список комментариев ближе к левому краю, чем заголовок и поле ввода: ава
   стоит своей колонкой и не должна уезжать от края. Поле ответа, вставшее в
   список, — на том же месте, что и основное. */
.post-comments-section .comments-container { --comments-shift: 18px; margin-left: calc(-1 * var(--comments-shift)); }
.post-comments-section .comments-container > .comment-dock { margin-left: calc(-33px + var(--comments-shift)); width: calc(100% + 66px - var(--comments-shift)); }
.post-detail-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.post-detail-toolbar .comment-actions-row {
    width:100%;
}
.comments-section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:10px;
}
.comments-section-title {
    margin:0;
    color:#8F9093;
    font-size:16px;
    font-weight:600;
    line-height:1;
}
.comments-section-header .comments-sort {
    justify-content:flex-end;
    position:relative;
    margin-left:auto;
}

.comments-header {
    margin-bottom: 10px;
}

.comments-toggle {
    background: none;
    border: none;
    color: #1da1f2;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}

.comments-toggle:hover {
    text-decoration: underline;
}

.comments-container { background: transparent; border: none; padding: 0; margin-top: 10px; }
.post-comments-section .comment-body > p,
.post-comments-section .comment-reply-quote span {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.comment-body > p:empty { display:none; }

.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.comment {
    position:relative;
    display:grid;
    grid-template-columns:40px minmax(0, 1fr) auto;
    column-gap:10px;
    background:transparent;
    border-radius:0;
    padding:12px 0 15px;
    margin:0;
    border:0;
}
.comment::after,
.comments-container > .comment-dock::after {
    content:"";
    position:absolute;
    left:calc(-38px + var(--comments-shift, 0px));
    right:-38px;
    bottom:0;
    height:3px;
    background:linear-gradient(to bottom, #000 0 1px, #2A2E35 1px 100%);
    pointer-events:none;
}

.comment:last-child {
    margin-bottom:0;
}
/* Под комментарием, на который отвечают, стоит поле ввода — разделитель между ними
   врал бы, будто цитируется следующий комментарий. */
.comment:has(+ .comment-dock)::after { display:none; }
/* Поле шире комментария на 33 с каждой стороны — разделитель довожу до той же ширины. */
.comments-container > .comment-dock::after { left:-5px; right:-5px; }

.comment:last-child::after {
    display:none;
}

.comment-content strong { color: #93c5fd; font-weight: 600; }

.comment-content p { margin:5px 0; color:#ffffff; line-height:1.5; }

.comment-content small {
    color: #8F9093;
    font-size: 12px;
}

.comment-actions {
    margin-top: 8px;
    text-align: right;
}

.delete-comment-btn {
    background: none;
    border: none;
    color: #e0245e;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.delete-comment-btn:hover {
    background-color: #ffe8ed;
    color: #c0344b;
}

.comment-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.comment-form textarea {
    flex: 1;
    padding: 10px 15px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
}

.comment-form button {
    background-color: #1da1f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.comment-form button:hover {
    background-color: #1991da;
}

.comment-form button:disabled {
    background-color: #aab8c2;
    cursor: not-allowed;
}

.no-comments {
    text-align: center;
    color: #657786;
    font-style: italic;
    padding: 20px;
}

.login-prompt { text-align: center; padding: 15px; background-color: #1F2227; border: 1px solid #2f353c; border-radius: 8px; margin-top: 10px; }
.login-prompt p { margin: 0; color: #8F9093; font-size: 14px; }

/* Форма быстрого добавления комментария под постом (SSR пост и профиль) */
.inline-add-comment { margin-top: 12px; }
.inline-add-comment textarea {
    width: 100%;
    min-height: 90px; /* на всю ширину и повыше, чем 2 строки */
    resize: vertical;
    box-sizing: border-box;
}
.inline-add-comment > div { display:flex; justify-content:flex-end; margin-top:8px; }
.inline-add-comment:not(.comment-dock) button[type="button"] {
    background-color:#39414a; color:#ffffff; padding:8px 14px; border:none; border-radius:6px; cursor:pointer;
}
.inline-add-comment:not(.comment-dock) button[type="button"]:hover { background-color:#434c56; }
.comment-dock {
    position: relative;
    left: auto;
    transform: none;
    z-index: 90;
    width: calc(100% + 66px);
    margin: 0 -33px 12px;
    padding: 0;
    box-sizing: border-box;
    /* Непрозрачный фон обязателен: прилипшее поле висит над списком,
       и сквозь прозрачное просвечивали бы проезжающие комментарии. */
    background: var(--container-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.comment-dock-anchor {
    height:0;
}
/* Пока поле не тронули, оно ведёт себя как обычный кусок страницы и уезжает вместе с ней.
   Как только его активировали — указаны сразу верх и низ, поэтому при прокрутке вниз
   оно прилипает сверху, при прокрутке вверх — снизу. Это делает сам браузер, без скриптов. */
.comment-dock.is-compose-active {
    position: sticky;
    top: 10px;
    bottom: 10px;
}
/* В ответе ширина у поля та же, что и в обычном месте: тогда и разделитель под ним
   совпадает по краям с разделителями между комментариями. Отступ снизу — как у них же. */
.comments-container > .comment-dock {
    margin:12px -33px;
    padding-bottom:15px;
}
.comment-input-shell textarea {
    min-height: 96px;
    max-height: 190px;
    resize: none;
    font-size: 20px;
    line-height: 1.35;
    overflow-y: auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
}
.comment-input-shell {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    margin-top:0;
}
.comment-composer-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px -10px -10px;
    padding:8px 10px;
    background:#2A2E35;
    border-radius:0 0 6px 6px;
}
/* В поле «добавить комментарий» нижний ряд появляется только после активации. */
.comment-dock:not(.is-compose-active) .comment-composer-actions {
    display:none;
}
.comment-composer-tools {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
}
.comment-composer-actions .composer-tool-button {
    min-width:96px;
}
.comment-dock .comment-reply-compose {
    justify-content:flex-start;
    margin:0 0 8px;
}
/* Оформление цитаты — из единственного правила выше. Здесь только запас справа под крестик. */
.comment-dock .comment-reply-compose-body { padding-right:46px; }
@media (max-width: 700px) {
    .comment-input-shell textarea {
        min-height: 88px;
    }
}

/* Финальная переопределяющая утилита, чтобы скрывать элементы с любыми доп.классами */
.is-hidden { display:none; }

/* ====== Donation UI ====== */
.donation-buttons-block { width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; }
.donate-overlay-btn { background:transparent; color:#8F9093; font-size:12px; padding:4px 0; border:none; cursor:pointer; width:100%; text-align:center; }
.donate-overlay-btn:hover { color:#e5e7eb; }

/* Inline Donation Container */
.donation-container { max-width:800px; width:100%; margin:20px auto 32px; padding:16px; }
.donation-history-wrap { position:relative; }
.donation-container, .donation-container * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", Roboto, Helvetica, Arial, sans-serif; }
.donation-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
/* В строке заголовка отступ задаёт сама строка, иначе заголовок съезжает вверх относительно соседей. */
.donation-header > .donation-header-title { margin:0; }
/* Единственное описание заголовка контейнера: место, размер, цвет, шрифт. */
.donation-header-title,
.donate-section-title,
.container-title {
    display:block;
    margin:0 0 14px;
    color:#8F9093;
    font-size:14px;
    font-weight:600;
    font-family:inherit;
}
.donation-menu-wrap { margin-left:auto; position:relative; display:flex; align-items:center; flex:0 0 auto; }
.donation-menu-panel { right:0; left:auto; top:36px; }
.donation-form-area { padding-top:0; }
.donation-hint { font-size:14px; color:#8F9093; margin-bottom:12px; }
.donation-action-btn { width:100%; padding:12px 20px; font-size:15px; }
.donation-action-btn:hover { background-color:#575757; }
.donation-action-btn:disabled { opacity:0.5; cursor:not-allowed; }
.donation-error { margin-top:10px; padding:10px; background:#7f1d1d; border:1px solid #dc2626; border-radius:8px; color:#fca5a5; font-size:13px; }
.donation-link-status { margin-top:10px; padding:10px; border-radius:8px; font-size:13px; background:#1e293b; color:#e5e7eb; }
.donation-link-status.success { background:#064e3b; color:#d1fae5; border:1px solid #0f766e; }
.donation-link-status.error { background:#7f1d1d; color:#fca5a5; border:1px solid #dc2626; }
.donation-no-wallet-text { font-size:14px; color:#6b7280; text-align:center; padding:8px 0; }
.donation-sender-info { font-size:13px; color:#8F9093; margin-bottom:10px; }

/* Amount input */
.donation-message-wrapper { position:relative; margin-bottom:10px; width:100%; }
.donation-message-input { width:100%; min-height:80px; background:#2a2e35; color:#e5e7eb; border:none; border-radius:6px; padding:10px; padding-bottom:28px; font-size:14px; font-family:inherit; resize:none; outline:none; box-sizing:border-box; display:block; }
.donation-char-counter { position:absolute; bottom:8px; right:10px; font-size:11px; color:#6b7280; pointer-events:none; }

.donation-send-row { display:flex; align-items:stretch; gap:10px; width:100%; }
.donation-amount-wrap { position:relative; flex:0 0 90px; width:90px; }
.donation-dollar-sign { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#8F9093; font-size:16px; font-weight:600; pointer-events:none; line-height:1; }
.donation-custom-amount { width:100%; padding:12px 8px 12px 24px; background:#2a2e35; color:#e5e7eb; border:none; border-radius:6px; font-size:16px; font-weight:600; font-family:inherit; text-align:left; outline:none; box-sizing:border-box; -moz-appearance:textfield; }
.donation-custom-amount::-webkit-outer-spin-button,
.donation-custom-amount::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Оформление — из общего правила кнопки, здесь только размеры. */
.donation-send-btn { flex:1 1 auto; margin-top:0; min-height:44px; }
.donation-send-btn:focus { background-color:#575757; outline:none; }
.donation-visibility-modal { position:fixed; inset:0; z-index:2600; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.donation-visibility-backdrop { position:absolute; inset:0; background:transparent; }
.donation-visibility-dialog {
    position:relative;
    width:min(360px, 100%);
    color:#e5e7eb;
    padding:18px;
    box-sizing:border-box;
}
.donation-visibility-close { position:absolute; top:8px; right:10px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:#8F9093; font-size:26px; line-height:1; cursor:pointer; }
.donation-visibility-close:hover,
.donation-visibility-close:focus { color:#ffffff; outline:none; }
.donation-visibility-title { padding-right:36px; margin-bottom:14px; color:#8F9093; font-size:16px; font-weight:600; }
.donation-visibility-actions { display:flex; gap:10px; width:100%; }
.donation-visibility-choice {
    flex:1 1 0;
    min-height:44px;
    padding:8px 14px;
    background:#1F2227;
    color:#8F9093;
    border-top:2px solid #2A2E35;
    border-left:2px solid #2A2E35;
    border-right:2px solid #15171A;
    border-bottom:2px solid #15171A;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    cursor:pointer;
}
.donation-visibility-choice:not([disabled]):hover,
.donation-visibility-choice:not([disabled]):focus { background:#23272d; color:#ffffff; outline:none; }
.donation-visibility-choice[disabled] { opacity:0.6; cursor:not-allowed; }
/* Анонимный донат: та же форма выбора, выбранная сумма подсвечена. */
.donation-visibility-choice.is-selected { background:#23272d; color:#ffffff; border-color:#575757; }
/* Значок маски у трёх точек: у этого аккаунта есть анонимные донаты. Подсказка —
   как у знаков «?» на странице донатов. */
.anon-badge { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; margin-right:2px; background:transparent; border:0; border-radius:6px; color:#8F9093; cursor:pointer; }
.anon-badge:hover, .anon-badge:focus { color:#e5e7eb; outline:none; }
/* Знак вопроса с подсказкой — общий для всего сайта: наведение или нажатие. */
.donate-help { display:inline-block; position:relative; top:-0.55em; margin-left:2px; font-size:11px; font-weight:700; line-height:1; color:#8F9093; cursor:pointer; }
.donate-help:hover, .donate-help.is-open { color:#e5e7eb; }
/* Подсказка раскрывается вниз: вверх она упиралась в край окна и обрезалась. */
.donate-tip { display:block; position:absolute; left:0; top:calc(100% + 8px); color:#e5e7eb; font-size:12px; font-weight:400; line-height:1.45; padding:8px 10px; width:260px; white-space:normal; text-align:left; opacity:0; pointer-events:none; transition:opacity .1s; z-index:50; }
.donate-help:hover .donate-tip { opacity:1; }
.donate-help.is-open .donate-tip { opacity:1; }
.donation-menu-wrap .donate-help { top:-8px; margin:0 6px 0 -5px; }
.donation-menu-wrap .donate-tip { left:auto; right:0; width:300px; }
.anon-note { margin:0 0 12px; color:#8F9093; font-size:13px; line-height:1.4; }
[data-anon-modal] .donation-visibility-actions { margin-bottom:10px; }
[data-anon-modal] .donation-message-input { margin-bottom:10px; padding-bottom:10px; }
.anon-name.donation-message-input { min-height:0; }
.anon-send-btn { width:100%; min-height:44px; margin-top:0; }
.anon-status { margin-top:10px; min-height:18px; color:#8F9093; font-size:13px; }
.anon-status.is-error { color:#f87171; }
.anonbox-note { margin:0 0 10px; color:#8F9093; font-size:13px; line-height:1.5; }

/* Donation status */
.donation-status { margin-top:10px; padding:10px; border-radius:8px; font-size:13px; background:#1e293b; color:#e5e7eb; word-break:break-all; }
.donation-status.success { background:#064e3b; color:#d1fae5; border:1px solid #0f766e; }
.donation-status.success a { color:#93c5fd; }
.donation-status.error { background:#7f1d1d; color:#fca5a5; border:1px solid #dc2626; }

/* Donation History */
.donation-history-wrap { position:relative; }
/* Затенение снизу у прокручиваемого списка — знак, что он прокручен не до конца.
   Держится в разметке всегда и показывается прозрачностью: если появляться и
   исчезать целиком, на границе прокрутки оно моргает — там высота колеблется
   на доли пикселя, и признак «долистано» скачет.

   У био то же самое делает маска самого блока — там элементов немного и
   считать нечего. Здесь строк бывают десятки, и знать, дочитан ли список,
   можно только из скрипта.

   Цвет затенения — цвет контейнера под списком. */
.donation-history-wrap::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(180deg, var(--scroll-fade-0, var(--container-bg-0)) 0%, var(--scroll-fade, var(--container-bg)) 100%);
}
.donation-history-wrap.has-scroll-more::after { opacity:1; }
/* У бокового списка вместо затенения — стрелка, как у листания вложений в посте:
   затенение только намекает, а стрелка прямо говорит, куда нажать. */
.my-posts-wrap { position:relative; }
.my-posts-nav {
    position:absolute; top:0; bottom:3px; width:64px;
    display:none; align-items:center; justify-content:center;
    border:0; padding:0; cursor:pointer; z-index:3;
    font-size:34px; line-height:1; color:#8f9093;
    background-color:transparent;
}
.my-posts-nav-prev { left:0; background-image:linear-gradient(to right, #23272d 20%, rgba(31, 34, 39, 0) 100%); }
.my-posts-nav-next { right:0; background-image:linear-gradient(to left, #23272d 20%, rgba(31, 34, 39, 0) 100%); }
.my-posts-wrap.has-scroll-back .my-posts-nav-prev,
.my-posts-wrap.has-scroll-more .my-posts-nav-next { display:flex; }
.donation-history-list { display:flex; flex-direction:column; gap:0; max-height:310px; overflow-y:auto; margin-right:-16px; padding-right:16px; }

/* Единственное описание полоски прокрутки на весь сайт: списки, описания и поля ввода.
   Добавляется новое место с прокруткой — селектор дописывается сюда, а не рядом.
   Толщина задана и вдоль, и поперёк: списки бывают и вертикальные, и боковые.
   Цвет бегунка можно переопределить на месте: где под ним нет тёмного фона,
   тёмный бегунок не виден. */
.donation-history-list,
.donation-message-input,
.notif-panel,
.snd-list,
.my-posts-list,
.pinned-list-scrollable,
.inline-edit-textarea,
.comment-input-shell textarea,
.post-form textarea,
.profile-right-center[data-bio-block] { scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb, #2A2E35) transparent; }
.donation-history-list::-webkit-scrollbar,
.donation-message-input::-webkit-scrollbar,
.notif-panel::-webkit-scrollbar,
.snd-list::-webkit-scrollbar,
.my-posts-list::-webkit-scrollbar,
.pinned-list-scrollable::-webkit-scrollbar,
.inline-edit-textarea::-webkit-scrollbar,
.comment-input-shell textarea::-webkit-scrollbar,
.post-form textarea::-webkit-scrollbar,
.profile-right-center[data-bio-block]::-webkit-scrollbar { width:4px; height:4px; }
.donation-history-list::-webkit-scrollbar-track,
.donation-message-input::-webkit-scrollbar-track,
.notif-panel::-webkit-scrollbar-track,
.snd-list::-webkit-scrollbar-track,
.my-posts-list::-webkit-scrollbar-track,
.pinned-list-scrollable::-webkit-scrollbar-track,
.inline-edit-textarea::-webkit-scrollbar-track,
.comment-input-shell textarea::-webkit-scrollbar-track,
.post-form textarea::-webkit-scrollbar-track,
.profile-right-center[data-bio-block]::-webkit-scrollbar-track { background:transparent; }
.donation-history-list::-webkit-scrollbar-thumb,
.donation-message-input::-webkit-scrollbar-thumb,
.notif-panel::-webkit-scrollbar-thumb,
.snd-list::-webkit-scrollbar-thumb,
.my-posts-list::-webkit-scrollbar-thumb,
.pinned-list-scrollable::-webkit-scrollbar-thumb,
.inline-edit-textarea::-webkit-scrollbar-thumb,
.comment-input-shell textarea::-webkit-scrollbar-thumb,
.post-form textarea::-webkit-scrollbar-thumb,
.profile-right-center[data-bio-block]::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb, #2A2E35); border-radius:2px; }
.donation-history-list::-webkit-scrollbar-thumb:hover,
.donation-message-input::-webkit-scrollbar-thumb:hover,
.notif-panel::-webkit-scrollbar-thumb:hover,
.snd-list::-webkit-scrollbar-thumb:hover,
.my-posts-list::-webkit-scrollbar-thumb:hover,
.pinned-list-scrollable::-webkit-scrollbar-thumb:hover,
.inline-edit-textarea::-webkit-scrollbar-thumb:hover,
.comment-input-shell textarea::-webkit-scrollbar-thumb:hover,
.post-form textarea::-webkit-scrollbar-thumb:hover,
.profile-right-center[data-bio-block]::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover, #3A3D44); }
.donation-empty { font-size:13px; color:#6b7280; text-align:center; padding:12px; }
.donation-item { background:transparent; border-radius:0; padding:10px 0; }
.donation-item-divider { height:3px; width:100%; margin:10px 0 0 0; background:linear-gradient(to bottom, #000 0 1px, #2A2E35 1px 100%); }
.donation-item:last-child .donation-item-divider { display:none; }
.donation-item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.donation-item-sender { font-weight:600; color:#8F9093; }
.donation-item-sender-link, .donation-item-sender-link:visited { text-decoration:none; color:#8F9093; }
.donation-item-sender-link:hover { color:#ffffff; text-decoration:underline; }
.donation-item-amount-wrap { display:flex; align-items:center; gap:8px; }
.donation-item-amount { font-weight:600; color:#8F9093; }
.donation-item-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:#2a2e35; color:#d1d5db; font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
.donation-item-actions { position:relative; display:flex; align-items:center; }
.donation-item-menu-trigger { background:none; border:none; padding:0; margin:0; color:#8F9093; cursor:pointer; font-size:24px; line-height:1; }
.donation-item-menu { position:fixed; top:0; left:0; right:auto; min-width:140px; z-index:2500; }
.donation-item-message { color:#ffffff; margin-bottom:4px; word-break:break-word; }
.donation-item-message-personal { margin-bottom:6px; }
.donation-answer-view { margin:8px 0 4px; padding:10px 12px; background:#1F2227; border-radius:8px; }
.donation-answer-label { font-size:11px; color:#8F9093; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.donation-answer-text { color:#ffffff; word-break:break-word; white-space:pre-wrap; }
.donation-answer-hidden { color:#8f9093; }
.donation-item-message-hidden { color:#8f9093; }
.donation-answer-input-wrap { position:relative; width:100%; }
/* Скрытый текст закрывают только летающие точки: сам текст прозрачен, пока
   блок не раскрыт, поэтому подложка под точками не нужна — они плавают прямо
   над карточкой. */
.personal-secret-block { position:relative; display:block; width:100%; min-height:44px; padding:12px 14px; background:transparent; border:none; border-radius:10px; cursor:pointer; text-align:left; overflow:hidden; font:inherit; line-height:inherit; letter-spacing:inherit; text-transform:none; }
.donation-item-message-personal .personal-secret-block,
.donation-answer-view .personal-secret-block { min-height:0; padding:0; border-radius:0; }
.personal-secret-text { position:relative; z-index:1; display:block; color:transparent; white-space:pre-wrap; word-break:break-word; user-select:none; transition:color .22s ease; font:inherit; line-height:inherit; letter-spacing:inherit; text-transform:none; }
.personal-secret-block.is-revealed .personal-secret-text { color:#ffffff; user-select:text; }
.personal-secret-dots { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:1; transition:opacity .24s ease; }
.personal-secret-block.is-revealed .personal-secret-dots { opacity:0; }
.personal-secret-dot { position:absolute; border-radius:50%; background:rgba(255,255,255,.9); opacity:.82; box-shadow:0 0 4px rgba(255,255,255,.18); animation:personalSecretDotFloat linear infinite; }

@keyframes personalSecretDotFloat {
    0% { transform:translate3d(0,0,0); }
    30% { transform:translate3d(var(--dx1, 4px), var(--dy1, -3px), 0); }
    65% { transform:translate3d(var(--dx2, -6px), var(--dy2, 4px), 0); }
    100% { transform:translate3d(0,0,0); }
}
.donation-answer-editor { margin:8px 0 6px; }
.donation-answer-input { width:100%; min-height:86px; background:#2a2e35; color:#e5e7eb; border:none; border-radius:6px; padding:10px; padding-bottom:28px; font-size:14px; font-family:inherit; resize:vertical; outline:none; box-sizing:border-box; }
.donation-answer-counter { position:absolute; right:10px; bottom:8px; font-size:11px; color:#6b7280; pointer-events:none; }
.donation-answer-actions { display:flex; gap:10px; margin-top:8px; justify-content:flex-start; }
.donation-answer-save-btn,
.donation-answer-cancel-btn { flex:0 0 auto; min-height:44px; width:auto; padding:8px 14px; }
.donation-item-footer { display:flex; justify-content:space-between; align-items:center; }
.donation-item-footer-right { display:flex; align-items:center; gap:8px; }
.donation-item-time { font-size:12px; color:#6b7280; }
.donation-item-tx { font-size:12px; color:#8F9093; text-decoration:none; }
.donation-item-tx:hover { color:#8F9093; text-decoration:underline; }
.donation-item-menu-link,
.donation-item-menu-link:visited,
.donation-item-menu-link:hover { color:#8F9093; text-decoration:none; }

@media (max-width: 720px) {
    .donation-send-row { flex-wrap:wrap; }
    .donation-amount-wrap { flex:1 1 120px; width:auto; }
    .donation-send-btn { flex:1 1 100%; }
    .donation-answer-actions { flex-wrap:wrap; }
}

/* Inline Subscription Container */
.subscription-container { max-width:800px; width:100%; margin:20px auto; background:#1a1d23; border:1px solid #2a2e35; border-radius:14px; padding:20px 24px; color:#e5e7eb; }
.sub-hint { font-size:14px; color:#8F9093; margin-bottom:10px; }
.sub-tier-btn.selected { border-color:#8b5cf6; background:#2d1b69; color:#c4b5fd; }
.sub-active-msg { font-size:15px; color:#a3e635; font-weight:600; margin-bottom:12px; }
.sub-cancel-btn { background:#dc2626; color:#fff; }
.sub-cancel-btn:hover { background:#b91c1c; }

/* Subscription subscriber rows (owner view) */
.sub-subscribers-list { display:flex; flex-direction:column; gap:8px; max-height:400px; overflow-y:auto; }
.sub-subscriber-row { display:flex; flex-direction:column; gap:6px; background:#2a2e35; border-radius:10px; padding:10px 14px; }
.sub-subscriber-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sub-subscriber-bottom { display:flex; align-items:center; gap:12px; font-size:13px; color:#8F9093; flex-wrap:wrap; }
.sub-subscriber-name { font-weight:600; color:#e5e7eb; font-size:14px; flex:1 1 auto; }
.sub-subscriber-amount { font-weight:700; color:#8b5cf6; font-size:14px; }
.sub-subscriber-status { font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.sub-active { background:#064e3b; color:#a3e635; }
.sub-inactive { background:#7f1d1d; color:#fca5a5; }
.sub-subscriber-paid { font-size:12px; color:#6b7280; }
.sub-subscriber-date { font-size:12px; color:#6b7280; }

/* Settings page subscription rows */
.my-subscriptions-list { display:flex; flex-direction:column; gap:10px; }
.sub-row { background:#2a2e35; border-radius:10px; padding:12px 16px; }
.sub-row-top { display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.sub-creator-link { font-weight:600; color:#3b82f6; text-decoration:none; font-size:14px; }
.sub-creator-link:hover { text-decoration:underline; }
.sub-amount { font-weight:700; color:#8b5cf6; font-size:14px; }
.sub-status { font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.sub-row-bottom { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#8F9093; }
.sub-cancel-settings { background:#dc2626; color:#fff; border:none; border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px; }
.sub-cancel-settings:hover { background:#b91c1c; }
.sub-show-payments { background:#3b82f6; color:#fff; border:none; border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px; }
.sub-show-payments:hover { background:#2563eb; }
.sub-payments-list { margin-top:10px; border-top:1px solid #3a3f47; padding-top:8px; }
.pay-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:#ccc; flex-wrap:wrap; }
.pay-num { color:#8F9093; min-width:28px; }
.pay-amount { font-weight:600; color:#a78bfa; min-width:50px; }
.pay-status { font-size:11px; font-weight:600; padding:1px 6px; border-radius:4px; }
.pay-success { background:#065f46; color:#6ee7b7; }
.pay-failed { background:#7f1d1d; color:#fca5a5; }
.pay-date { color:#8F9093; font-size:12px; }
.pay-tx-link { color:#3b82f6; text-decoration:none; font-size:12px; }
.pay-tx-link:hover { text-decoration:underline; }
.pay-no-tx { color:#6b7280; font-size:12px; font-style:italic; }
.donation-status-error { background:#7f1d1d; color:#fca5a5; border:1px solid #dc2626; }

/* Подвал сайта: во всю ширину, ссылки пока никуда не ведут. */
.site-footer {
    width:100%;
    height:80px;
    flex:0 0 auto;
    margin-top:40px;
    box-sizing:border-box;
    background-color:var(--container-bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.site-footer-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}
.site-footer-links a {
    color:#8F9093;
    font-size:13px;
    text-decoration:none;
}
.site-footer-links a:hover { color:#e5e7eb; }
.site-footer-note { color:#575757; font-size:12px; }

/* ====== Посты в списках настроек: та же разметка, но плиткой ======
   Плитки по 398 пикселей стоят в один ряд и листаются вбок: две видно, дальше
   вправо. Вложение лежит фоном, поверх него — автор, заголовок и описание;
   счётчики уходят вниз, под картинку. Ничего лишнего: меню, дата и стрелки
   листания здесь не нужны. */
.my-posts-list { display:grid; grid-auto-flow:column; grid-auto-columns:398px; column-gap:2px; align-items:start; }
/* На странице под постом большой отступ до следующего — в плитке он не нужен,
   от него под карточкой висела пустота. */
.my-posts-list .post-wrapper { width:398px; margin-bottom:0; }
/* Своя подложка у плитки: без неё пост сливается с фоном контейнера.
   Она полупрозрачная, поэтому лежит только на самой плитке — второй такой же
   слой сверху высветлил бы верхнюю половину. */
.my-posts-list .post { width:398px; max-width:398px; position:relative; padding:0; overflow:hidden; background:#ffffff1c; }

/* Лишнее в плитке */
.my-posts-list .post-kebab,
.my-posts-list .post-menu,
.my-posts-list .post-date-link,
.my-posts-list .media-counter,
.my-posts-list .media-caption,
.my-posts-list .media-arrow,
.my-posts-list .post-meta,
.my-posts-list .post-divider { display:none !important; }

/* Верхняя часть карточки: картинка фоном, текст поверх. */
.my-posts-list .post-content-wrapper { position:relative; min-height:230px; padding:52px 14px 14px; background:transparent; }
.my-posts-list .post-media { position:absolute; inset:0; margin:0; z-index:0; }
/* Вложение растянуто на всю плитку: и картинка, и плеер занимают её целиком.
   Высота идёт сверху вниз по всей цепочке, иначе внутри нечему опереться. */
.my-posts-list .media-carousel,
.my-posts-list .media-stage,
.my-posts-list .media-track,
.my-posts-list .media-slide.is-active,
.my-posts-list .media-slide.is-peek,
.my-posts-list .media-photo { height:100%; width:100%; max-width:none; margin:0; }
.my-posts-list .media-photo img,
.my-posts-list .media-slide img { width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0; }
/* Любой плеер: на странице его высота задана долей ширины, здесь — вся плитка.
   Кадр плеера прижат к краям плитки, поэтому опора для него — сам плеер. */
.my-posts-list .media-slide.is-active > *,
.my-posts-list .media-slide.is-peek > * { position:relative; height:100%; padding-top:0; }
.my-posts-list .media-slide.is-active iframe,
.my-posts-list .media-slide.is-peek iframe,
.my-posts-list .media-slide.is-active blockquote,
.my-posts-list .media-slide.is-peek blockquote,
.my-posts-list .media-slide.is-peek > * > iframe,
.my-posts-list .media-slide.is-active > * > iframe { position:absolute; inset:0; width:100%; height:100%; max-height:none; min-width:0; margin:0; border-radius:0; }
/* Затемнение под текстом: без него светлая картинка съедает буквы. */
.my-posts-list .post-content-wrapper::before {
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.75) 100%);
}
.my-posts-list .post-header {
    position:absolute; top:0; left:0; right:0; z-index:2;
    margin:0; padding:12px 14px; align-items:center;
}
.my-posts-list .post-text { position:relative; z-index:2; margin-top:auto; }
.my-posts-list .post-content-wrapper { display:flex; flex-direction:column; justify-content:flex-end; }
.my-posts-list .post-title { font-size:16px; margin:0 0 4px; }
.my-posts-list .post-title a { color:#ffffff; }
.my-posts-list .post-description { color:#e5e7eb; font-size:13px; -webkit-mask-image:none; mask-image:none;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height:none !important; }
.my-posts-list .post-author-link { color:#ffffff; }

/* Счётчики под картинкой, на самой карточке. */
.my-posts-list .comments-section { padding:10px 14px; }
.my-posts-list .comment-actions-row { gap:10px; }
/* У страницы Телеграма color-scheme: light dark — при тёмной теме браузера
   он заливает этим окно встраивания, и сзади поста появляется тёмный фон.
   Светлая схема окна убирает заливку: виден наш фон. */
.media-telegram iframe { color-scheme: light; }
/* Логотип площадки в карточке-ссылке: вместо слова названием их же знаком. */
.media-link-card .media-link-logo {
    width:104px;
    height:26px;
    background-image: url('data:image/svg+xml;utf8,<svg width="1134" height="283" viewBox="0 0 1134 283" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M141.546 0C82.4713 0 65.194 0.0609667 61.8357 0.339599C49.7126 1.3476 42.1688 3.25695 33.9502 7.3498C27.6166 10.4958 22.6214 14.1424 17.6916 19.2543C8.71357 28.5767 3.27227 40.0456 1.30249 53.6787C0.344867 60.2971 0.0662324 61.6469 0.00965023 95.4531C-0.0120628 106.722 0.00965023 121.552 0.00965023 141.444C0.00965023 200.488 0.0748959 217.752 0.357914 221.105C1.33735 232.905 3.18734 240.329 7.1051 248.449C14.5923 263.994 28.8919 275.663 45.7382 280.017C51.5713 281.52 58.0138 282.347 66.2845 282.739C69.7888 282.891 105.505 283 141.244 283C176.982 283 212.72 282.956 216.137 282.782C225.714 282.332 231.275 281.585 237.424 279.996C254.379 275.62 268.417 264.124 276.057 248.362C279.899 240.437 281.846 232.731 282.728 221.547C282.919 219.108 283 180.232 283 141.408C283 102.577 282.913 63.7718 282.721 61.3334C281.829 49.9689 279.881 42.3273 275.915 34.2502C272.662 27.6383 269.049 22.7006 263.803 17.652C254.442 8.70841 242.994 3.26562 229.351 1.29754C222.741 0.34174 221.424 0.0587214 187.601 0H141.546Z" fill="url(%23paint0_radial_3078_2)"/><path d="M141.546 0C82.4713 0 65.194 0.0609667 61.8357 0.339599C49.7126 1.3476 42.1688 3.25695 33.9502 7.3498C27.6166 10.4958 22.6214 14.1424 17.6916 19.2543C8.71357 28.5767 3.27227 40.0456 1.30249 53.6787C0.344867 60.2971 0.0662324 61.6469 0.00965023 95.4531C-0.0120628 106.722 0.00965023 121.552 0.00965023 141.444C0.00965023 200.488 0.0748959 217.752 0.357914 221.105C1.33735 232.905 3.18734 240.329 7.1051 248.449C14.5923 263.994 28.8919 275.663 45.7382 280.017C51.5713 281.52 58.0138 282.347 66.2845 282.739C69.7888 282.891 105.505 283 141.244 283C176.982 283 212.72 282.956 216.137 282.782C225.714 282.332 231.275 281.585 237.424 279.996C254.379 275.62 268.417 264.124 276.057 248.362C279.899 240.437 281.846 232.731 282.728 221.547C282.919 219.108 283 180.232 283 141.408C283 102.577 282.913 63.7718 282.721 61.3334C281.829 49.9689 279.881 42.3273 275.915 34.2502C272.662 27.6383 269.049 22.7006 263.803 17.652C254.442 8.70841 242.994 3.26562 229.351 1.29754C222.741 0.34174 221.424 0.0587214 187.601 0H141.546Z" fill="url(%23paint1_radial_3078_2)"/><path d="M141.546 0C82.4713 0 65.194 0.0609667 61.8357 0.339599C49.7126 1.3476 42.1688 3.25695 33.9502 7.3498C27.6166 10.4958 22.6214 14.1424 17.6916 19.2543C8.71357 28.5767 3.27227 40.0456 1.30249 53.6787C0.344867 60.2971 0.0662324 61.6469 0.00965023 95.4531C-0.0120628 106.722 0.00965023 121.552 0.00965023 141.444C0.00965023 200.488 0.0748959 217.752 0.357914 221.105C1.33735 232.905 3.18734 240.329 7.1051 248.449C14.5923 263.994 28.8919 275.663 45.7382 280.017C51.5713 281.52 58.0138 282.347 66.2845 282.739C69.7888 282.891 105.505 283 141.244 283C176.982 283 212.72 282.956 216.137 282.782C225.714 282.332 231.275 281.585 237.424 279.996C254.379 275.62 268.417 264.124 276.057 248.362C279.899 240.437 281.846 232.731 282.728 221.547C282.919 219.108 283 180.232 283 141.408C283 102.577 282.913 63.7718 282.721 61.3334C281.829 49.9689 279.881 42.3273 275.915 34.2502C272.662 27.6383 269.049 22.7006 263.803 17.652C254.442 8.70841 242.994 3.26562 229.351 1.29754C222.741 0.34174 221.424 0.0587214 187.601 0H141.546Z" fill="url(%23paint2_radial_3078_2)"/><path d="M141.546 0C82.4713 0 65.194 0.0609667 61.8357 0.339599C49.7126 1.3476 42.1688 3.25695 33.9502 7.3498C27.6166 10.4958 22.6214 14.1424 17.6916 19.2543C8.71357 28.5767 3.27227 40.0456 1.30249 53.6787C0.344867 60.2971 0.0662324 61.6469 0.00965023 95.4531C-0.0120628 106.722 0.00965023 121.552 0.00965023 141.444C0.00965023 200.488 0.0748959 217.752 0.357914 221.105C1.33735 232.905 3.18734 240.329 7.1051 248.449C14.5923 263.994 28.8919 275.663 45.7382 280.017C51.5713 281.52 58.0138 282.347 66.2845 282.739C69.7888 282.891 105.505 283 141.244 283C176.982 283 212.72 282.956 216.137 282.782C225.714 282.332 231.275 281.585 237.424 279.996C254.379 275.62 268.417 264.124 276.057 248.362C279.899 240.437 281.846 232.731 282.728 221.547C282.919 219.108 283 180.232 283 141.408C283 102.577 282.913 63.7718 282.721 61.3334C281.829 49.9689 279.881 42.3273 275.915 34.2502C272.662 27.6383 269.049 22.7006 263.803 17.652C254.442 8.70841 242.994 3.26562 229.351 1.29754C222.741 0.34174 221.424 0.0587214 187.601 0H141.546Z" fill="url(%23paint3_radial_3078_2)"/><path d="M141.557 36.3378C112.981 36.3378 109.395 36.4626 98.171 36.973C86.9693 37.4856 79.3232 39.2577 72.6328 41.8579C65.7124 44.5434 59.8418 48.1357 53.9933 53.9821C48.1405 59.8264 44.5453 65.6925 41.849 72.6057C39.2404 79.2933 37.4647 86.9358 36.9606 98.1249C36.4586 109.34 36.3271 112.926 36.3271 141.481C36.3271 170.036 36.4543 173.609 36.9628 184.824C37.478 196.018 39.2514 203.658 41.8512 210.344C44.5409 217.259 48.136 223.125 53.9867 228.969C59.8332 234.818 65.7036 238.419 72.6197 241.105C79.3144 243.705 86.9628 245.477 98.1622 245.989C109.386 246.5 112.97 246.625 141.544 246.625C170.123 246.625 173.698 246.5 184.922 245.989C196.124 245.477 203.778 243.705 210.473 241.104C217.391 238.419 223.253 234.818 229.099 228.969C234.952 223.125 238.548 217.259 241.244 210.346C243.83 203.658 245.606 196.016 246.132 184.827C246.636 173.611 246.768 170.036 246.768 141.481C246.768 112.926 246.636 109.342 246.132 98.127C245.606 86.9336 243.83 79.2933 241.244 72.6079C238.548 65.6925 234.952 59.8263 229.099 53.9821C223.247 48.1335 217.394 44.5411 210.467 41.8578C203.759 39.2577 196.108 37.4856 184.906 36.973C173.683 36.4626 170.11 36.3378 141.524 36.3378H141.557ZM132.118 55.2855C134.92 55.2811 138.046 55.2855 141.557 55.2855C169.652 55.2855 172.981 55.3863 184.076 55.8901C194.335 56.3589 199.903 58.0717 203.612 59.5109C208.522 61.4166 212.023 63.6948 215.703 67.3748C219.386 71.0548 221.666 74.5596 223.578 79.4662C225.018 83.1681 226.734 88.732 227.201 98.9836C227.705 110.067 227.815 113.397 227.815 141.457C227.815 169.517 227.705 172.847 227.201 183.931C226.732 194.182 225.018 199.746 223.578 203.448C221.67 208.355 219.386 211.848 215.703 215.526C212.021 219.206 208.524 221.484 203.612 223.39C199.907 224.836 194.335 226.544 184.076 227.013C172.984 227.517 169.652 227.626 141.557 227.626C113.461 227.626 110.131 227.517 99.0391 227.013C88.7801 226.54 83.2121 224.827 79.5008 223.388C74.5904 221.482 71.083 219.204 67.4003 215.524C63.7176 211.844 61.4378 208.348 59.5262 203.439C58.086 199.737 56.3696 194.173 55.9027 183.922C55.3985 172.838 55.2976 169.508 55.2976 141.431C55.2976 113.353 55.3985 110.041 55.9027 98.9572C56.3718 88.7057 58.086 83.1419 59.5262 79.4356C61.4333 74.5289 63.7176 71.0241 67.4003 67.3442C71.083 63.6641 74.5904 61.386 79.5008 59.4759C83.2099 58.0301 88.7801 56.3217 99.0391 55.8506C108.746 55.4125 112.507 55.2811 132.118 55.2591L132.118 55.2855ZM197.724 72.7436C190.753 72.7436 185.097 78.3886 185.097 85.3564C185.097 92.3223 190.753 97.9737 197.724 97.9737C204.695 97.9737 210.35 92.3223 210.35 85.3564C210.35 78.3907 204.695 72.7394 197.724 72.7394L197.724 72.7436ZM141.557 87.4856C111.716 87.4856 87.5218 111.662 87.5218 141.481C87.5218 171.3 111.716 195.466 141.557 195.466C171.399 195.466 195.584 171.3 195.584 141.481C195.584 111.662 171.396 87.4856 141.555 87.4856H141.557ZM141.557 106.433C160.927 106.433 176.631 122.124 176.631 141.481C176.631 160.836 160.927 176.529 141.557 176.529C122.186 176.529 106.484 160.836 106.484 141.481C106.484 122.124 122.186 106.433 141.557 106.433Z" fill="white"/><path d="M382.76 59.108C366.55 65.8934 348.729 85.063 343.101 109.125C335.973 139.612 365.635 152.505 368.068 148.277C370.932 143.31 362.753 141.631 361.07 125.812C358.894 105.382 368.392 82.5528 380.346 72.5361C382.568 70.6751 382.462 73.2653 382.462 78.0564C382.462 86.624 381.989 163.536 381.989 179.587C381.989 201.307 381.092 208.166 379.481 214.943C377.848 221.811 375.224 226.452 377.212 228.24C379.434 230.239 388.921 225.483 394.413 217.818C400.999 208.625 403.304 197.584 403.718 185.595C404.218 171.141 404.196 148.207 404.218 135.126C404.238 123.128 404.42 87.9962 404.007 66.8762C403.906 61.6959 389.539 56.261 382.759 59.1017M958.387 160.755C957.864 172.047 955.365 180.873 952.263 187.098C946.257 199.15 933.795 202.892 928.504 185.567C925.621 176.123 925.486 160.351 927.559 147.172C929.67 133.746 935.562 123.607 945.319 124.521C954.942 125.425 959.447 137.826 958.387 160.755ZM796.151 230.811C796.021 249.573 793.068 266.023 786.736 270.801C777.755 277.575 765.684 272.493 768.183 258.803C770.395 246.688 780.854 234.316 796.177 219.198C796.177 219.198 796.208 222.646 796.151 230.811ZM793.698 160.646C793.149 170.93 790.483 181.262 787.574 187.099C781.57 199.151 769.018 202.919 763.816 185.568C760.26 173.714 761.111 158.371 762.871 148.704C765.155 136.161 770.69 124.524 780.63 124.524C790.295 124.524 795.061 135.127 793.698 160.646ZM699.715 160.488C699.126 171.381 697.001 180.486 693.591 187.099C687.422 199.068 675.216 202.864 669.833 185.568C665.952 173.097 667.273 156.091 668.888 146.905C671.283 133.273 677.282 123.608 686.647 124.524C696.267 125.464 700.943 137.826 699.715 160.488ZM1130.42 173.211C1128.07 173.211 1126.99 175.635 1126.11 179.715C1123.03 193.902 1119.79 197.105 1115.62 197.105C1110.95 197.105 1106.76 190.08 1105.69 176.018C1104.84 164.961 1104.98 144.604 1106.06 124.355C1106.28 120.194 1105.13 116.078 1093.97 112.024C1089.17 110.28 1082.19 107.713 1078.72 116.102C1068.9 139.803 1065.05 158.619 1064.15 166.263C1064.1 166.659 1063.62 166.739 1063.53 165.815C1062.96 159.693 1061.67 148.568 1061.51 125.194C1061.48 120.633 1060.51 116.751 1055.48 113.573C1052.21 111.511 1042.29 107.864 1038.72 112.203C1035.63 115.751 1032.05 125.301 1028.32 136.622C1025.3 145.823 1023.19 152.047 1023.19 152.047C1023.19 152.047 1023.23 127.221 1023.26 117.804C1023.28 114.252 1020.84 113.068 1020.11 112.853C1016.8 111.893 1010.29 110.29 1007.52 110.29C1004.11 110.29 1003.27 112.197 1003.27 114.977C1003.27 115.341 1002.73 147.663 1002.73 170.263C1002.73 171.245 1002.73 172.316 1002.74 173.454C1000.86 183.842 994.734 197.943 988.076 197.943C981.411 197.943 978.266 192.047 978.266 165.104C978.266 149.385 978.738 142.551 978.97 131.182C979.105 124.634 979.365 119.606 979.35 118.465C979.301 114.965 973.25 113.202 970.434 112.55C967.606 111.893 965.147 111.638 963.228 111.747C960.511 111.901 958.589 113.683 958.589 116.134C958.589 117.449 958.604 119.948 958.604 119.948C955.104 114.449 949.476 110.622 945.732 109.513C935.646 106.518 925.121 109.172 917.182 120.28C910.873 129.107 907.07 139.103 905.573 153.466C904.478 163.966 904.835 174.614 906.78 183.619C904.43 193.78 900.067 197.943 895.289 197.943C888.353 197.943 883.325 186.621 883.909 167.042C884.294 154.164 886.871 145.126 889.688 132.051C890.889 126.478 889.913 123.56 887.465 120.763C885.221 118.198 880.438 116.888 873.561 118.499C868.664 119.648 861.661 120.884 855.254 121.833C855.254 121.833 855.641 120.291 855.958 117.572C857.625 103.31 842.128 104.467 837.183 109.022C834.232 111.742 832.223 114.949 831.46 120.716C830.251 129.868 837.715 134.184 837.715 134.184C835.266 145.394 829.263 160.038 823.066 170.625C819.747 176.298 817.207 180.501 813.929 184.969C813.917 183.305 813.908 181.642 813.902 179.986C813.827 156.418 814.141 137.87 814.279 131.184C814.414 124.636 814.676 119.741 814.662 118.6C814.625 116.041 813.13 115.074 810.021 113.85C807.273 112.768 804.022 112.019 800.651 111.758C796.396 111.426 793.832 113.683 793.899 116.351C793.912 116.855 793.912 119.949 793.912 119.949C790.413 114.45 784.784 110.623 781.04 109.514C770.954 106.52 760.429 109.174 752.491 120.281C746.183 129.108 742.051 141.493 740.881 153.358C739.79 164.415 739.992 173.812 741.478 181.728C739.874 189.655 735.263 197.944 730.05 197.944C723.384 197.944 719.592 192.048 719.592 165.105C719.592 149.386 720.064 142.552 720.296 131.184C720.43 124.636 720.69 119.607 720.675 118.467C720.626 114.968 714.575 113.204 711.76 112.551C708.814 111.87 706.27 111.619 704.317 111.763C701.74 111.955 699.929 114.262 699.929 115.983V119.949C696.429 114.45 690.801 110.623 687.057 109.514C676.971 106.52 666.505 109.217 658.507 120.281C653.292 127.496 649.071 135.494 646.898 153.2C646.27 158.317 645.992 163.108 646.028 167.587C643.949 180.305 634.764 194.963 627.251 194.963C622.854 194.963 618.667 186.435 618.667 168.261C618.667 144.053 620.165 109.585 620.419 106.263C620.419 106.263 629.912 106.101 631.75 106.08C636.485 106.028 640.774 106.14 647.08 105.817C650.244 105.656 653.291 94.3035 650.026 92.8985C648.547 92.2626 638.089 91.7055 633.943 91.6175C630.457 91.5385 620.752 90.8203 620.752 90.8203C620.752 90.8203 621.623 67.942 621.825 65.5252C621.997 63.5109 619.391 62.4738 617.897 61.8445C614.263 60.3075 611.011 59.5716 607.157 58.7771C601.833 57.6787 599.417 58.7531 598.946 63.2469C598.235 70.067 597.867 90.0431 597.867 90.0431C593.96 90.0431 580.613 89.2793 576.705 89.2793C573.073 89.2793 569.154 104.896 574.174 105.088C579.951 105.312 590.017 105.505 596.69 105.707C596.69 105.707 596.393 140.743 596.393 151.559C596.393 152.71 596.403 153.818 596.405 154.894C592.732 174.037 579.796 184.377 579.796 184.377C582.574 171.713 576.899 162.203 566.677 154.152C562.911 151.186 555.477 145.57 547.158 139.415C547.158 139.415 551.976 134.667 556.248 125.114C559.276 118.347 559.407 110.603 551.976 108.896C539.698 106.072 529.575 115.089 526.555 124.715C524.216 132.173 525.464 137.706 530.047 143.454C530.381 143.874 530.744 144.304 531.119 144.735C528.347 150.077 524.54 157.269 521.315 162.847C512.365 178.332 505.604 190.58 500.494 190.58C496.409 190.58 496.464 178.145 496.464 166.502C496.464 156.465 497.205 141.375 497.797 125.751C497.993 120.584 495.409 117.641 491.078 114.975C488.447 113.355 482.831 110.17 479.578 110.17C474.709 110.17 460.663 110.833 447.391 149.224C445.718 154.063 442.432 162.88 442.432 162.88L442.715 116.713C442.715 115.63 442.139 114.584 440.819 113.868C438.582 112.654 432.609 110.17 427.297 110.17C424.766 110.17 423.504 111.347 423.504 113.693L423.04 185.922C423.04 191.41 423.183 197.813 423.726 200.613C424.267 203.416 425.142 205.697 426.227 207.054C427.31 208.409 428.563 209.442 430.629 209.868C432.551 210.264 443.079 211.616 443.626 207.593C444.282 202.771 444.307 197.556 449.835 178.106C458.441 147.826 469.662 133.051 474.937 127.804C475.859 126.887 476.912 126.832 476.862 128.333C476.636 134.972 475.844 151.561 475.311 165.654C473.882 203.37 480.744 210.36 490.548 210.36C498.05 210.36 508.624 202.907 519.959 184.04C527.025 172.282 533.887 160.754 538.816 152.445C542.252 155.625 546.107 159.048 549.96 162.704C558.913 171.201 561.852 179.276 559.902 186.935C558.41 192.791 552.792 198.826 542.794 192.96C539.88 191.249 538.636 189.927 535.706 187.998C534.132 186.961 531.728 186.652 530.287 187.737C526.544 190.56 524.403 194.15 523.181 198.594C521.992 202.919 526.323 205.205 530.813 207.205C534.679 208.926 542.988 210.485 548.287 210.663C568.933 211.353 585.473 200.694 596.987 173.198C599.048 196.944 607.819 210.381 623.059 210.381C633.248 210.381 643.463 197.212 647.93 184.256C649.213 189.537 651.111 194.129 653.562 198.013C665.305 216.619 688.086 212.614 699.53 196.815C703.068 191.933 703.606 190.179 703.606 190.179C705.275 205.097 717.289 210.31 724.167 210.31C731.871 210.31 739.826 206.668 745.401 194.117C746.054 195.479 746.767 196.78 747.546 198.013C759.289 216.618 782.07 212.614 793.513 196.815C794.053 196.073 794.521 195.401 794.93 194.798L795.266 204.597C795.266 204.597 788.738 210.585 784.73 214.259C767.094 230.44 753.683 242.716 752.697 257.012C751.43 275.241 766.214 282.015 777.399 282.903C789.276 283.846 799.448 277.284 805.7 268.102C811.199 260.02 814.798 242.624 814.534 225.444C814.429 218.564 814.255 209.816 814.119 200.439C820.318 193.24 827.302 184.142 833.733 173.492C840.741 161.886 848.252 146.3 852.097 134.17C852.097 134.17 858.623 134.226 865.587 133.771C867.814 133.625 868.454 134.08 868.042 135.713C867.545 137.686 859.244 169.704 866.82 191.033C872.006 205.634 883.695 210.332 890.626 210.332C898.739 210.332 906.5 204.205 910.66 195.107C911.161 196.121 911.685 197.103 912.257 198.009C924 216.614 946.701 212.586 958.224 196.811C960.825 193.251 962.3 190.174 962.3 190.174C964.773 205.614 976.78 210.384 983.657 210.384C990.821 210.384 997.62 207.447 1003.14 194.395C1003.37 200.142 1003.73 204.841 1004.3 206.322C1004.65 207.228 1006.69 208.366 1008.17 208.915C1014.72 211.345 1021.41 210.196 1023.88 209.696C1025.59 209.349 1026.93 207.975 1027.11 204.426C1027.59 195.108 1027.3 179.452 1030.12 167.817C1034.86 148.29 1039.29 140.716 1041.38 136.966C1042.56 134.865 1043.88 134.518 1043.93 136.742C1044.03 141.241 1044.25 154.453 1046.09 172.204C1047.44 185.26 1049.24 192.976 1050.63 195.419C1054.58 202.403 1059.46 202.733 1063.44 202.733C1065.97 202.733 1071.25 202.035 1070.78 197.59C1070.55 195.424 1070.95 182.036 1075.63 162.798C1078.68 150.235 1083.77 138.884 1085.61 134.734C1086.28 133.204 1086.6 134.41 1086.59 134.645C1086.2 143.297 1085.33 171.596 1088.86 187.073C1093.64 208.039 1107.46 210.385 1112.27 210.385C1122.56 210.385 1130.97 202.564 1133.8 181.984C1134.48 177.032 1133.47 173.207 1130.44 173.207" fill="white"/><defs><radialGradient id="paint0_radial_3078_2" cx="0" cy="0" r="1" gradientTransform="matrix(-174.032 49.0812 -35.3612 -125.382 273.862 132.646)" gradientUnits="userSpaceOnUse"><stop stop-color="%23FF005F"/><stop offset="1" stop-color="%23FC01D8"/></radialGradient><radialGradient id="paint1_radial_3078_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(75.1697 304.797) rotate(-90) scale(225.896 239.671)"><stop stop-color="%23FFCC00"/><stop offset="0.1242" stop-color="%23FFCC00"/><stop offset="0.5672" stop-color="%23FE4A05"/><stop offset="0.6942" stop-color="%23FF0F3F"/><stop offset="1" stop-color="%23FE0657" stop-opacity="0"/></radialGradient><radialGradient id="paint2_radial_3078_2" cx="0" cy="0" r="1" gradientTransform="matrix(46.888 -80.7895 105.179 61.0431 148.651 279.009)" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFCC00"/><stop offset="1" stop-color="%23FFCC00" stop-opacity="0"/></radialGradient><radialGradient id="paint3_radial_3078_2" cx="0" cy="0" r="1" gradientTransform="matrix(-172.122 48.4666 -16.5083 -58.6429 38.397 11.5237)" gradientUnits="userSpaceOnUse"><stop stop-color="%23780CFF"/><stop offset="1" stop-color="%23820BFF" stop-opacity="0"/></radialGradient></defs></svg>');

    background-repeat:no-repeat;
    background-position:left center;
    background-size:contain;
    margin-bottom:10px;
}
/* Плеер Kick в режиме «Фото» — как их плеер до запуска: картинка канала по
   умолчанию (лежит у нас), KICK слева сверху, маленький пуск по центру,
   полный экран справа снизу. */
.kick-card { position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), #0b0e0f url(/images/kick-banner.jpg) center/cover no-repeat; color:#fff; }
.kick-card svg { position:absolute; display:block; }
.kick-card .kick-card-logo { top:16px; left:24px; width:80px; height:20px; fill:#53fc18; }
.kick-card .kick-card-play { top:50%; left:50%; width:20px; height:20px; transform:translate(-50%, -50%); fill:currentColor; }
.kick-card .kick-card-full { right:24px; bottom:16px; width:22px; height:22px; }


/* ---------------------------------------------------------------- меню на телефоне
   На узком экране верхнего ряда нет: в правом нижнем углу выглядывает круг с тремя
   полосками (как солнце из-за горизонта). Нажал — кнопки меню встают столбиком вверх. */
.menu-fab { display:none; }
/* Узкое окно на компьютере или телефон (сенсор без мыши; сайт на телефоне рисуется
   шириной 820, поэтому одной ширины окна мало). */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
    .top-sticky-menu { top:auto; left:auto; right:0; bottom:0; }
    .menu-fab {
        display:block; position:fixed; right:-38px; bottom:-38px; width:104px; height:104px;
        border-radius:50%; border:0; padding:0; cursor:pointer; z-index:1101;
        background:#2A2E35; box-shadow:0 0 0 2px #15171A, 0 4px 18px rgba(0,0,0,.45);
        -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
    /* Три полоски — в видимой части круга. */
    .menu-fab span {
        position:absolute; left:23px; width:26px; height:3px; border-radius:2px; background:#c9cbcf;
        transition:transform .12s ease, opacity .12s ease;
    }
    .menu-fab span:nth-child(1) { top:27px; }
    .menu-fab span:nth-child(2) { top:35px; }
    .menu-fab span:nth-child(3) { top:43px; }
    .top-sticky-menu.is-open .menu-fab span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
    .top-sticky-menu.is-open .menu-fab span:nth-child(2) { opacity:0; }
    .top-sticky-menu.is-open .menu-fab span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

    /* Кнопки меню — столбиком над кругом, круглые, появляются по нажатию. */
    .top-sticky-menu .menu-bar {
        position:fixed; right:76px; bottom:10px; flex-direction:row; align-items:center; gap:12px;
        opacity:0; pointer-events:none; transform:translateX(16px); transition:opacity .12s ease, transform .12s ease;
    }
    .top-sticky-menu.is-open .menu-bar { opacity:1; pointer-events:auto; transform:none; }
    .top-sticky-menu .menu-bar > .menu-icon,
    .top-sticky-menu .menu-bar > a.menu-icon.menu-icon-dollar,
    .top-sticky-menu .menu-bar > .notif-menu,
    .top-sticky-menu .menu-bar > .avatar-menu,
    .top-sticky-menu .menu-bar > a {
        display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
        background:#2A2E35; box-shadow:0 2px 10px rgba(0,0,0,.4); touch-action:manipulation;
    }
    .top-sticky-menu .menu-bar .server-mark { display:none; }

    /* Выпадашки: аватар — слева от кнопки, уведомления — панелью снизу во всю ширину. */
    .avatar-menu .dropdown-shell {
        top:auto; bottom:58px; right:0; min-width:0; padding:0; border:0; background:transparent;
        display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    }
    .avatar-menu .dropdown-shell[hidden] { display:none; }
    .avatar-menu .dropdown-shell a.dropdown-item {
        display:flex; align-items:center; justify-content:center; width:140px; height:46px; padding:0;
        border-radius:23px; background:#2A2E35; box-shadow:0 2px 10px rgba(0,0,0,.4);
        color:#e5e7eb; font-size:16px; touch-action:manipulation;
    }
    .avatar-menu .dropdown-shell a.dropdown-item:last-child { color:#f87171; }
    .notif-panel {
        position:fixed; left:8px; right:8px; top:auto; bottom:70px; width:auto; max-height:60vh;
        border:0; border-radius:16px; background:#2A2E35; box-shadow:0 4px 18px rgba(0,0,0,.5);
    }
    /* Нажатие не оставляет подсветки на кнопках меню. */
    .top-sticky-menu button, .top-sticky-menu a { -webkit-tap-highlight-color:transparent; outline:none; }
    .top-sticky-menu button:focus, .top-sticky-menu a:focus { outline:none; box-shadow:none; }
}

/* На телефоне страница шириной 820 ужата под экран — размеры в долях ширины, чтобы
   круг и кнопки были привычного размера под палец. */
@media (hover: none) and (pointer: coarse) {
    .menu-fab { width:26vw; height:26vw; right:-9.5vw; bottom:-9.5vw; }
    .menu-fab span { left:5.9vw; width:6.3vw; height:0.75vw; }
    .menu-fab span:nth-child(1) { top:6.7vw; }
    .menu-fab span:nth-child(2) { top:8.7vw; }
    .menu-fab span:nth-child(3) { top:10.7vw; }
    .top-sticky-menu.is-open .menu-fab span:nth-child(1) { transform:translateY(2vw) rotate(45deg); }
    .top-sticky-menu.is-open .menu-fab span:nth-child(3) { transform:translateY(-2vw) rotate(-45deg); }
    .top-sticky-menu .menu-bar { right:19vw; bottom:2.5vw; gap:3vw; }
    .top-sticky-menu .menu-bar > .menu-icon,
    .top-sticky-menu .menu-bar > a.menu-icon.menu-icon-dollar,
    .top-sticky-menu .menu-bar > .notif-menu,
    .top-sticky-menu .menu-bar > .avatar-menu,
    .top-sticky-menu .menu-bar > a { width:12vw; height:12vw; }
    .top-sticky-menu .menu-bar img,
    .top-sticky-menu .menu-bar svg,
    .top-sticky-menu .menu-bar .ico,
    .top-sticky-menu .menu-bar .menu-avatar,
    .notif-trigger { width:6.8vw !important; height:6.8vw !important; }
    .avatar-menu .dropdown-shell { bottom:15vw; right:0; gap:2.5vw; }
    .avatar-menu .dropdown-shell a.dropdown-item { width:36vw; height:11vw; border-radius:5.5vw; font-size:4.2vw; }
    .notif-panel { left:3vw; right:3vw; bottom:17vw; border-radius:4vw; }
    .notif-panel .notif-row { font-size:3.6vw; padding:2.6vw 3.4vw; }
    .notif-panel .notif-head { font-size:2.8vw; padding:2.4vw 3.4vw 1vw; }
    .notif-panel .notif-when { font-size:2.8vw; }
    .notif-panel .notif-person { font-size:3.3vw; }
    .notif-panel .notif-preview { font-size:3vw; max-width:60vw; }
    .notif-panel .notif-ava { width:6vw; height:6vw; flex-basis:6vw; }
    .notif-panel .notif-empty, .notif-panel .notif-more { font-size:3.4vw; padding:3vw; }
}

/* Телефон: аватарка в меню — без кружка-подложки, сама размером с этот кружок.
   Раньше она сидела в кнопке шириной 28 точек и сжималась в узкий овал. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
    .top-sticky-menu .menu-bar > .avatar-menu { background:transparent; box-shadow:none; }
    .top-sticky-menu .menu-bar .avatar-menu .avatar-trigger { width:100%; height:100%; }
    .top-sticky-menu .menu-bar .avatar-trigger .menu-avatar { width:100% !important; height:100% !important; flex-shrink:0; }
}

/* Телефон: значок по умолчанию (своей аватарки нет) — на кружке, как остальные
   кнопки, и размером как их значки; своя аватарка — без кружка, во весь его размер. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
    .top-sticky-menu .menu-bar > .avatar-menu:has(.menu-avatar.avatar-default) { background:#2A2E35; box-shadow:0 2px 10px rgba(0,0,0,.4); }
    .top-sticky-menu .menu-bar .avatar-trigger .menu-avatar.avatar-default { width:28px !important; height:28px !important; }
}
@media (hover: none) and (pointer: coarse) {
    .top-sticky-menu .menu-bar .avatar-trigger .menu-avatar.avatar-default { width:6.8vw !important; height:6.8vw !important; }
    /* Красный кружок уведомлений — крупнее, под палец и глаз. */
    .top-sticky-menu .notif-badge { top:-1.6vw; right:-2.2vw; min-width:5.2vw; height:5.2vw; padding:0 1.2vw; border-radius:2.6vw; font-size:3.2vw; line-height:5.2vw; }
}

/* Кнопка «ещё не готова» (кулдаун) — одно описание на весь сайт. Поверх кнопки
   кружок заполняется по часовой стрелке, как часы; прошли 360° — кнопка снова
   работает. Включает window.__cooldown(кнопка, сколько ждать, вся пауза) из base.html. */
.is-cooling { position:relative; cursor:not-allowed !important; }
.is-cooling::after {
    content:""; position:absolute; left:50%; top:50%; width:22px; height:22px;
    margin:-11px 0 0 -11px; border-radius:50%; pointer-events:none;
    background:conic-gradient(#8f9093 var(--cd-deg, 0deg), rgba(42,46,53,.9) 0);
    -webkit-mask:radial-gradient(circle, transparent 6px, #000 7px);
    mask:radial-gradient(circle, transparent 6px, #000 7px);
}
.is-cooling { color:rgba(143,144,147,.25) !important; }
.is-cooling > * { opacity:.25; }
/* Кнопка занята: идёт её действие (например, грузится новое фото) — нажать нельзя, пока не закончится. */
.is-busy { cursor:progress !important; opacity:.35; }

/* ---------------------------------------------------------------- значки
   Значки сайта живут здесь, в файле стилей, а не в каждой странице: файл стилей
   браузер скачивает один раз и помнит, а страница становится легче. Значок —
   пустой элемент с классом .ico и именем, например <span class="ico ico-home">.
   Цвет — цвет текста (currentColor), размер — у места, где значок стоит.
   Новый значок дописывается сюда же: --ico с картинкой svg (решётка как %23). */
.ico {
    display:inline-block; flex:0 0 auto; width:1em; height:1em;
    background-color:currentColor;
    -webkit-mask:var(--ico) center / contain no-repeat;
    mask:var(--ico) center / contain no-repeat;
}
.ico-home { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path fill-rule='evenodd' clip-rule='evenodd' d='M19.2 4.88889V0H0V19C0 20.6569 1.34315 22 3 22H21C22.6569 22 24 20.6569 24 19V4.88889H21.6V18.0455C21.6 18.4195 21.4256 18.7721 21.1285 18.9991V18.9991C20.6984 19.3276 20.1016 19.3276 19.6716 18.9991V18.9991C19.3744 18.7721 19.2 18.4195 19.2 18.0455V4.88889ZM4.8 7.33333V3.66667H14.4V7.33333H4.8ZM4.8 11H14.4V13.4444H4.8V11ZM14.4 15.8889H4.8V18.3333H14.4V15.8889Z'/></svg>"); }
.ico-bell { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'><path d='M3 7.985c0-1.246.387-2.462 1.109-3.478S5.852 2.725 7.03 2.315a2.01 2.01 0 0 1 .454-1.613A2.01 2.01 0 0 1 9.005 0c.58 0 1.137.247 1.521.702.384.455.558 1.055.454 1.613 1.176.411 2.194 1.178 2.914 2.194.72 1.016 1.107 2.231 1.106 3.476v6l3 2v1H0v-1l3-2zm8 10c0 .53-.21 1.04-.586 1.414A1.994 1.994 0 0 1 9 19.985c-.53 0-1.04-.21-1.414-.586A1.994 1.994 0 0 1 7 17.985z'/></svg>"); }
.ico-dollar { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1v22'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); }
/* Значки меню: серые, 28×28 (на телефоне размер задаёт правило меню ниже). */
.top-sticky-menu .menu-bar .ico { width:28px; height:28px; display:block; color:#8F9093; }
.ico-eye { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 21 12'><path fill-rule='evenodd' d='M21 5.5C20.5 7 16.6 11 10.5 11S1 7 0 5.5C1 4 4.4 0 10.5 0S20.5 4 21 5.5ZM16 5.5c0 2-2.5 4.5-5.5 4.5S5 7.5 5 5.5 7.5 1 10.5 1 16 3.5 16 5.5Zm-3.4-.5a2.1 2.1 0 1 1-4.2 0 2.1 2.1 0 0 1 4.2 0Z'/></svg>"); }
.ico-comment { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'><path fill-rule='evenodd' d='M2.4 0h12.2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9.5L4.5 15.5V14a1 1 0 0 0-1-1H2.2a2 2 0 0 1-2-2V2a2 2 0 0 1 2.2-2ZM4 3h9a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2Zm0 4h7a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2Z'/></svg>"); }
.ico-thumb { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M0 4.5h2v9H0zM3 4.5l.709-.709A8.5 8.5 0 0 0 5 2l.924-.613a1 1 0 0 1 .222-.23L6.146.354A1 1 0 0 1 7 0h.146a1 1 0 0 1 .854.854v.803a2 2 0 0 1-.084.677l-.4 1.598a.5.5 0 0 0 .448.668h4.388a1 1 0 0 1 .97.746l.1.4a2 2 0 0 1 0 .97L13.5 9l-1 2.5-.3.4A3 3 0 0 1 9 13.5H3v-9z'/></svg>"); }
/* Карточка поста: просмотры и комментарии — серые всегда (как раньше), лайк и
   дизлайк — цвета кнопки (при наведении белеют). */
.metric-button .metric-icon .ico { width:20px; height:18.8px; color:#8F9093; }
.metric-button[data-action="view-stats"] .metric-icon .ico { width:26px; height:14.9px; }
.reaction-icon-btn .ico { width:20px; height:20px; }
.reaction-icon-btn.reaction-dislike .ico { transform:scaleY(-1); }
.ico-photo { width:26px; height:20px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 18'><rect x='1' y='1' width='21' height='16' fill='none' stroke='black' stroke-width='2'/><path d='M2 11v-1l3-3 2 2.5 2-.5 2 2h3l3 2h4v1h-4l-3-2h-3l-2-2-2 .5-2-2.5z'/><circle cx='17' cy='6' r='2'/></svg>"); }
.ico-reply-arrow { width:16px; height:18px; color:#8f9093; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M2 0 L2 7 Q2 13 8 13 L10.5 13'/><path d='M8.5 9.5 L12 13 L8.5 16.5' stroke-linejoin='round'/></svg>"); }
.ico-copy { width:14px; height:14px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>"); }
.ico-check { width:14px; height:14px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.ico-check.is-ok { color:#4ade80; }
.ico-tick { width:13px; height:13px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ico-anon { width:20px; height:20px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.06 13C15.2 13 13.64 14.33 13.24 16.1C12.29 15.69 11.42 15.8 10.76 16.09C10.35 14.31 8.79 13 6.94 13C4.77 13 3 14.79 3 17C3 19.21 4.77 21 6.94 21C9 21 10.68 19.38 10.84 17.32C11.18 17.08 12.07 16.63 13.16 17.34C13.34 19.39 15 21 17.06 21C19.23 21 21 19.21 21 17C21 14.79 19.23 13 17.06 13M6.94 19.86C5.38 19.86 4.13 18.58 4.13 17S5.39 14.14 6.94 14.14C8.5 14.14 9.75 15.42 9.75 17S8.5 19.86 6.94 19.86M17.06 19.86C15.5 19.86 14.25 18.58 14.25 17S15.5 14.14 17.06 14.14C18.62 14.14 19.88 15.42 19.88 17S18.61 19.86 17.06 19.86M22 10.5H2V12H22V10.5M15.53 2.63C15.31 2.14 14.75 1.88 14.22 2.05L12 2.79L9.77 2.05L9.72 2.04C9.19 1.89 8.63 2.17 8.43 2.68L6 9H18L15.56 2.68L15.53 2.63Z'/></svg>"); }
/* Места, где раньше стоял svg. */
.comment-like-btn .ico { width:14px; height:14px; display:block; }
.composer-photo-button .ico { display:block; }
.ico-player-play { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 20.528V3.472c0-.38.405-.603.703-.388L20 12 7.703 20.916c-.298.215-.703-.008-.703-.388Z'/></svg>"); }
.ico-player-mute { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h4l5-5v16l-5-5H3z'/><path d='m16 9 5 6m0-6-5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.ico-player-gear { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7 7 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.47.47 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.47.47 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61zM12 15.6a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z'/></svg>"); }
.ico-player-full { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.ico-twitch { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 16'><path fill-rule='evenodd' d='M5 5V0H0v14l2 2h7v-5H5v-1h4V5H5zm17 0v6h-1V5h-5v6h-1V5h-5v9l2 2h15V5h-5zm11 0h-5v11h5V5zm0-5h-5v4h5V0zm13 5-2 2v7l2 2h7v-5h-4v-1h4V5h-7zm17 0h-4V0h-5v16h5v-6h1v6h5V7l-2-2zM39 5V0h-5v14l2 2h7v-5h-4v-1h4V5h-4z'/></svg>"); }
.ico-kick { --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 26'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0H8.57143V5.71429H11.4286V2.85714H14.2857V0H22.8571V8.57143H20V11.4286H17.1429V14.2857H20V17.1429H22.8571V25.7143H14.2857V22.8571H11.4286V20H8.57143V25.7143H0V0ZM57.1429 0H65.7143V5.71429H68.5714V2.85714H71.4286V0H80V8.57143H77.1429V11.4286H74.2857V14.2857H77.1429V17.1429H80V25.7143H71.4286V22.8571H68.5714V20H65.7143V25.7143H57.1429V0ZM25.7143 0H34.2857V25.7143H25.7143V0ZM45.7143 0H40V2.85714H37.1429V22.8571H40V25.7143H45.7143H54.2857V17.1429H45.7143V8.57143H54.2857V0H45.7143Z'/></svg>"); }
.ico-sound-play { width:12px; height:14px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M1 1l10 6-10 6z'/></svg>"); }
.ico-file { width:12px; height:14px; --ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M1 1h6l4 4v8H1z'/><path d='M7 1v4h4'/></svg>"); }
/* Карточки эфира Twitch и Kick в режиме «Фото» (раньше там стояли svg). */
.stream-card .ico { display:block; width:20px; height:20px; }
.stream-card-play .ico { width:120px; height:120px; }
.stream-card .ico.stream-card-logo { width:60px; height:18px; }
.kick-card .ico { position:absolute; display:block; }
.kick-card .ico.kick-card-logo { color:#53fc18; }
/* Разноцветный значок — картинкой целиком, без одноцветной маски. */
.ico.ico-google { -webkit-mask:none; mask:none; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_2927_9)'><path d='M24 12.2727C24 11.4218 23.9221 10.6036 23.7774 9.81818H12.2449V14.4655H18.8349C18.5455 15.96 17.6772 17.2255 16.3748 18.0764V21.0982H20.3488C22.6642 19.0036 24 15.9273 24 12.2727Z' fill='%234285F4'/><path d='M12.2449 24C15.551 24 18.3228 22.9309 20.3488 21.0982L16.3748 18.0764C15.2839 18.7964 13.8924 19.2327 12.2449 19.2327C9.06122 19.2327 6.35622 17.1273 5.38776 14.2909H1.31354V17.3891C3.32839 21.3055 7.45826 24 12.2449 24Z' fill='%2334A853'/><path d='M5.38776 14.28C5.14286 13.56 4.99814 12.7964 4.99814 12C4.99814 11.2036 5.14286 10.44 5.38776 9.72V6.62182H1.31354C0.478664 8.23636 0 10.0582 0 12C0 13.9418 0.478664 15.7636 1.31354 17.3782L4.48609 14.9564L5.38776 14.28Z' fill='%23FBBC05'/><path d='M12.2449 4.77818C14.0482 4.77818 15.6512 5.38909 16.9314 6.56727L20.4378 3.13091C18.3117 1.18909 15.551 0 12.2449 0C7.45826 0 3.32839 2.69455 1.31354 6.62182L5.38776 9.72C6.35622 6.88364 9.06122 4.77818 12.2449 4.77818Z' fill='%23EA4335'/></g><defs><clipPath id='clip0_2927_9'><rect width='24' height='24' fill='white' transform='matrix(-1 0 0 1 24 0)'/></clipPath></defs></svg>") center / contain no-repeat; }

/* Фон страницы, цвет контейнеров, обводка.
   Все контейнеры перечислены одним списком и берут цвет из одной переменной. */
:root {
    --container-bg: #1b1d22;
    /* Тот же цвет с нулевой прозрачностью — начало затенения под списками. */
    --container-bg-0: rgba(27, 29, 34, 0);
}

body,
body.theme-dark { background-color: #23272d; }

.post,
.page-container > .post-comments-section,
.profile-right-box,
.profile-left-box,
.post-form[data-composer-role="primary"],
.pinned-section,
.donation-container {
    background-color: var(--container-bg);
    /* Обводкой была не рамка, а четыре тени, изображавшие фаску. */
    box-shadow: none;
    border: none;
}

/* ── Выбор имени при регистрации ───────────────────────────────────────
   Единственная страница, свёрстанная под ширину экрана телефона (в base.html
   у неё свой viewport): на телефоне поле и буквы — крупные, как в приложении. */
body:has(.choose-username-page) .top-sticky-menu,
body:has(.choose-username-page) .site-scroll-toggle,
body:has(.choose-username-page) .site-footer { display: none; }
.page-container.choose-username-page {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(28px, 8vh, 96px) 16px 24px;
    box-sizing: border-box;
}
.choose-username-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 36px 28px 32px;
    background: var(--container-bg);
    border: 1px solid #2A2E35;
    border-radius: 18px;
}
.choose-username-card h1 {
    margin: 0 40px 24px 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: #f3f4f6;
}
.choose-username-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #8F9093;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.choose-username-close:hover,
.choose-username-close:focus-visible { color: #ffffff; outline: none; }
.choose-username-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #2A2E35;
    border: 2px solid #2A2E35;
    border-radius: 14px;
    cursor: text;
    transition: border-color .15s;
}
.choose-username-field:focus-within { border-color: #4b5058; }
.choose-username-field.is-ok { border-color: #34d399; }
.choose-username-field.is-error { border-color: #f87171; }
.choose-username-at { font-size: 22px; color: #8F9093; }
.choose-username-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #f3f4f6;
    font: inherit;
    font-size: 20px;
}
.choose-username-field input::placeholder { color: #6b7280; }
/* Свободно — чёрная галочка на зелёном круге. */
.choose-username-ok {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #34d399 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%20fill%3D%22none%22%20stroke%3D%22%230b0f14%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center / 18px no-repeat;
}
.choose-username-ok[hidden] { display: none; }
.choose-username-under {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-height: 22px;
    margin: 10px 2px 22px;
}
.choose-username-status { font-size: 15px; line-height: 1.4; color: #8F9093; }
.choose-username-status.is-ok { color: #34d399; }
.choose-username-status.is-error { color: #f87171; }
.choose-username-counter { flex: 0 0 auto; font-size: 13px; color: #6b7280; }
/* Цвет — общей кнопки сайта (.button), здесь только размер. */
.choose-username-continue {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    font-size: 19px;
}
.choose-username-continue:disabled,
.choose-username-continue.is-busy { opacity: .5; cursor: default; }
.choose-username-card > .choose-username-status { margin: -8px 0 16px; }