/* Dark theme — element overrides (Bootstrap, etc.) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .personal-info-row {
    border-color: var(--border-default);
}

/* Light + shared: modal dimmer (semi-transparent, not milky/white) */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.52) !important;
    opacity: 1 !important;
}

/* Bootstrap modals: surface + text (otherwise .modal-content stays light) */
html[data-theme="dark"] .modal-content {
    border-color: var(--border-default);
    background-color: var(--card-bg);
    color: var(--text-default);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .modal-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-default);
}

html[data-theme="dark"] .modal-footer {
    background-color: var(--card-bg);
    border-top-color: var(--border-default);
}

html[data-theme="dark"] .modal-body {
    background-color: var(--card-bg);
    color: var(--text-default);
}

html[data-theme="dark"] .modal .modal-title,
html[data-theme="dark"] .modal .modal-title.text-muted {
    color: var(--text-default) !important;
}

html[data-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: rgba(0, 0, 0, 0.72);
    --bs-backdrop-opacity: 1;
}

html[data-theme="dark"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.72);
}

/* Mobile / a11y: keep same translucent scrim as Share modal — do not raise alpha (reads as opaque) */
@media (max-width: 576px) {
    .modal-backdrop.show {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .modal-backdrop.show {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

html[data-theme="dark"] .modal .btn-outline-secondary {
    color: var(--text-default);
    border-color: var(--border-default);
    background-color: var(--bg-muted);
}

html[data-theme="dark"] .modal .btn-outline-secondary:hover,
html[data-theme="dark"] .modal .btn-outline-secondary:focus {
    color: var(--text-default);
    background-color: var(--bg-subtle);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text {
    color: var(--text-default);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--bg-muted);
    border-color: var(--border-default);
    color: var(--text-default);
}

/* Keep chevron: do not use background shorthand on .form-select in dark */
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%238b949e' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px 14px;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}


html[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted-alt);
}

/* html[data-theme="dark"] .footer-subscribe-input {
    background: transparent !important;
    border-bottom-color: var(--border-strong) !important;
    color: var(--text-default);
}

html[data-theme="dark"] .footer-subscribe-input:focus {
    border-bottom-color: var(--text-link) !important;
    box-shadow: 0 2px 0 0 var(--text-link);
} */

html[data-theme="dark"] .bottom-side-menu {
    background: var(--bg-default);
}

html[data-theme="dark"] .bottom-menu-header {
    border-bottom-color: var(--border-default);
}

html[data-theme="dark"] .bottom-menu-nav a {
    color: var(--text-muted);
}

html[data-theme="dark"] .bottom-menu-nav a:hover {
    background: var(--bg-muted);
    color: var(--text-link);
}

html[data-theme="dark"] .social-block {
    background: var(--bg-muted);
}

html[data-theme="dark"] .user-tooltip {
    background: var(--card-bg);
    border-color: var(--border-default);
}

html[data-theme="dark"] .user-tooltip a:hover {
    background: var(--bg-muted);
}

html[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .comment-text {
    background: var(--card-bg);
    color: var(--text-default);
}

html[data-theme="dark"] .comment-body>.comment-text {
    border-left-color: var(--text-link);
}

html[data-theme="dark"] .header .nav-link,
html[data-theme="dark"] .header-actions .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .bottom-burger {
    background: var(--card-bg);
    border-color: var(--border-default);
}

html[data-theme="dark"] .bottom-burger:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .bottom-burger span {
    background: var(--text-default);
}

/* Dark theme — outlined buttons instead of green fill */
html[data-theme="dark"] .filter-reason-btn.is-selected {
    border-color: var(--btn-primary-fg);
    color: var(--btn-primary-fg);
    background: transparent;
}

html[data-theme="dark"] #commentsBackToTop {
    border: 1px solid var(--btn-primary-fg);
    color: var(--btn-primary-fg);
    background: transparent;
}

/* ===== Custom category select ===== */
.custom-select-wrap {
    position: relative;
}

.custom-select-wrap .custom-select-category,
.custom-select-category {
    display: block;
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-default);
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.custom-select-category:hover {
    border-color: var(--border-strong);
}

.custom-select-category:focus {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

html[data-theme="dark"] .custom-select-category {
    background-color: var(--bg-muted);
    border-color: var(--border-default);
}

html[data-theme="dark"] .custom-select-category:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* JS-enhanced category dropdown (see category_select.js) */
.category-select-custom .category-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.category-select-custom .category-select-inner {
    position: relative;
}

.category-select-trigger.category-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
}

.category-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .category-select-panel {
    background: var(--bg-muted);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.category-select-options {
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
}

.category-select-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-default);
    transition: background-color 0.15s ease;
}

.category-select-option:hover,
.category-select-option:focus {
    background: color-mix(in srgb, var(--text-link) 12%, var(--bg-default));
    outline: none;
}

html[data-theme="dark"] .category-select-option:hover,
html[data-theme="dark"] .category-select-option:focus {
    background: color-mix(in srgb, var(--text-link) 18%, var(--bg-muted));
}

.category-select-custom.is-open .category-select-trigger {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* ===== Tags: grey VLB chips (item detail, tag list, create/edit) ===== */
.tag-vlb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.32rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: #3d454d;
    border: 1px solid color-mix(in srgb, #6c757d 40%, var(--border-default));
    background: color-mix(in srgb, #6c757d 11%, var(--card-bg));
    border-radius: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

a.tag-vlb:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #6c757d 58%, var(--border-default));
    background: color-mix(in srgb, #6c757d 16%, var(--card-bg));
}

html[data-theme="dark"] .tag-vlb {
    color: #c9d1d9;
    border-color: color-mix(in srgb, #8b949e 38%, var(--border-default));
    background: color-mix(in srgb, #8b949e 14%, var(--card-bg));
}

html[data-theme="dark"] a.tag-vlb:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #8b949e 50%, var(--border-default));
    background: color-mix(in srgb, #8b949e 20%, var(--card-bg));
}

/* ===== Tag badge selection (create/edit labels inherit .tag-vlb) ===== */
.tag-badge-option {
    cursor: pointer;
}

.tag-badge-option:hover {
    border-color: color-mix(in srgb, #6c757d 52%, var(--border-default));
    background: color-mix(in srgb, #6c757d 14%, var(--card-bg));
}

html[data-theme="dark"] .tag-badge-option:hover {
    border-color: color-mix(in srgb, #8b949e 48%, var(--border-default));
    background: color-mix(in srgb, #8b949e 18%, var(--card-bg));
}

.tag-badge-option.tag-badge-selected {
    color: var(--text-default) !important;
    border-color: color-mix(in srgb, #495057 55%, var(--border-default)) !important;
    background: color-mix(in srgb, #495057 18%, var(--card-bg)) !important;
}

html[data-theme="dark"] .tag-badge-option.tag-badge-selected {
    color: #f0f6fc !important;
    border-color: color-mix(in srgb, #c9d1d9 42%, var(--border-default)) !important;
    background: color-mix(in srgb, #8b949e 24%, var(--card-bg)) !important;
}

.btn-tag-select-all {
    cursor: pointer;
    font-size: .8rem;
    text-decoration: none;
}

/* ===== Category + “I'm reading” chips (cards + item detail): same size ===== */
.item-category-badge,
.item-reading-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: calc(0.75rem * 1.25 + 6px);
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--radius-sm, 6px);
}

.item-category-badge {
    color: var(--text-link);
    background: rgba(41, 128, 185, 0.12);
}

html[data-theme="dark"] .item-category-badge {
    background: rgba(88, 166, 255, 0.15);
    color: var(--text-link);
}

/* BraiNews / filter listings in dark theme: dark cards (match --card-bg / page chrome) */
html[data-theme="dark"] article.item_block.card {
    background-color: var(--card-bg) !important;
    color: var(--text-default);
    border-color: var(--border-default) !important;
    box-shadow: var(--card-shadow) !important;
}

html[data-theme="dark"] article.item_block.card h4 {
    color: var(--text-default) !important;
}

html[data-theme="dark"] article.item_block.card .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] article.item_block.card .excerpt-html {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] article.item_block.card .excerpt-html::after {
    background: linear-gradient(to top, var(--card-bg) 0%, var(--excerpt-fade) 40%, transparent 100%);
}

html[data-theme="dark"] article.item_block.card .excerpt-html blockquote {
    background: var(--bg-muted);
    color: var(--text-default);
    border-left-color: var(--border-default);
}

html[data-theme="dark"] article.item_block.card .item-category-badge {
    background: rgba(88, 166, 255, 0.15);
    color: var(--text-link);
}

/* “I'm reading” — colors only (size shared with .item-category-badge) */
.item-reading-badge {
    color: #c05621;
    background: rgba(234, 88, 12, 0.14);
    white-space: nowrap;
}

html[data-theme="dark"] .item-reading-badge {
    color: #fdba74;
    background: rgba(251, 146, 60, 0.18);
}

.comments-header-divider {
    min-height: 1.1rem;
    opacity: 0.45;
    border-color: var(--border-default, rgba(0, 0, 0, 0.2)) !important;
}

html[data-theme="dark"] .comments-header-divider {
    opacity: 0.5;
    border-color: var(--border-default, rgba(255, 255, 255, 0.18)) !important;
}

html[data-theme="dark"] article.item_block.card .badge.text-bg-secondary,
html[data-theme="dark"] article.item_block.card .badge.bg-secondary {
    background-color: var(--bg-subtle) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-default);
    font-weight: 500;
}

/* Теги на карточках списков — над псевдоэлементом .stretched-link::after (z-index:1 у Bootstrap) */
article.item_block.card .card-tags-block {
    position: relative;
    z-index: 2;
}

html[data-theme="dark"] article.item_block.card hr.text-muted {
    border-color: var(--border-default) !important;
    opacity: 1;
}

html[data-theme="dark"] article.item_block.card .item-stats {
    background: var(--bg-muted);
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    gap: 18px;
}

html[data-theme="dark"] article.item_block.card .item-stats .stat,
html[data-theme="dark"] article.item_block.card .item-stats .stat span,
html[data-theme="dark"] article.item_block.card .item-stats .fa {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] article.item_block.card .stretched-link.item-link {
    color: var(--text-link) !important;
}

body,
html {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

html {
    scroll-padding-top: 1rem;
}

/* iOS-safe scroll lock: position:fixed is the only reliable way to prevent
   background scroll on Safari. JS sets --scroll-y before adding the class
   and restores window.scrollTo on removal. */
html.scroll-locked {
    overscroll-behavior: none;
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
}

/* touch-action only on body — keeps vertical pan-y working inside overlay menu scroll */
html.scroll-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    top: var(--scroll-y, 0);
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

/* Search overlay open: no extra min-height vs. keyboard / dynamic toolbars (avoids outer scrollbar). */
html.scroll-locked.search-overlay-open,
html.scroll-locked.search-overlay-open body {
    overscroll-behavior: none;
}

html.scroll-locked.search-overlay-open body {
    min-height: 0 !important;
    max-height: 100%;
}

html.search-overlay-open .mobile-bottom-nav {
    display: none !important;
}

/* Full-page brain preloader (search → item, tag navigation) */
html.brain-preloader-active {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.brain-preloader-active body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.brain-preloader {
    position: fixed;
    inset: 0;
    z-index: 2400;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-block-start: env(safe-area-inset-top, 0px);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    padding-inline-start: env(safe-area-inset-left, 0px);
    padding-inline-end: env(safe-area-inset-right, 0px);
    display: grid;
    place-items: center;
    align-content: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    color: #6c757d;
}

html[data-theme="dark"] .brain-preloader {
    background: var(--bg-default);
    color: var(--text-muted);
}

.brain-preloader.hidden {
    display: none;
}

.brain-preloader__inner {
    box-sizing: border-box;
    width: min(200px, min(46vw, calc(100% - 2rem)));
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
}

/* Same accent as .brain-preloader__trace stroke (#f1c40f) */
.brain-preloader__label {
    margin: 0;
    box-sizing: border-box;
    /* Full row width like the SVG so "Thinking..." centers on the same axis as the icon */
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-body, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #f1c40f;
    text-align: center;
    text-wrap: balance;
}

.brain-preloader__svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
}

html[data-theme="dark"] .brain-preloader__svg {
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}

/* Entire contour pulses — no stroke-dash gaps while loading */
.brain-preloader__trace {
    stroke-width: 3.2;
    animation: brain-trace-glow 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .brain-preloader__trace {
        animation: none;
        opacity: 0.88;
    }
}

@keyframes brain-trace-glow {
    0%,
    100% {
        opacity: 0.45;
        stroke-width: 2.85;
    }

    50% {
        opacity: 1;
        stroke-width: 4.35;
    }
}

body {
    background: var(--bg-default);
    color: var(--text-default);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

h1 {
    font-size: 2.2rem !important;
    font-weight: 700;
}

h2 {
    font-size: 1.8rem !important;
}

h3 {
    font-size: 1.4rem !important;
}

p {
    font-size: 1rem !important;
}

button,
.btn,
input,
textarea {
    font-family: var(--font-body);
    font-weight: 500;
}

/* ========== Form controls (tokens + ergonomics) ========== */
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    min-height: 2.75rem;
}

.form-control,
.form-select {
    background-color: var(--card-bg);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-default);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 0.625rem 0.875rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.form-select {
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px 14px;
}

textarea.form-control {
    min-height: 5.5rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

textarea.form-control.auto-grow {
    resize: none;
    overflow: hidden;
    min-height: calc(1.5em + 1.25rem + 2px);
}

.form-control::placeholder {
    color: var(--text-muted-alt);
    opacity: 1;
}

/* «Field · optional» в подписи — один ровный серый тон, как плейсхолдер на скриншоте (sign up) */
.form-floating > label.text-muted .field-label-optional-suffix,
.form-label.text-muted .field-label-optional-suffix {
    font-weight: 400;
    color: inherit;
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545 28%, transparent);
}

.form-control.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 3px color-mix(in srgb, #198754 28%, transparent);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.92;
}

.form-floating > .form-control:not(textarea),
.form-floating > .form-select {
    min-height: calc(3.5rem + 2px);
    height: calc(3.5rem + 2px);
    padding: 1rem 0.875rem 0.5rem;
    line-height: 1.25;
}

.form-floating > textarea.form-control {
    min-height: 7.5rem;
    height: auto;
    padding: 1.35rem 0.875rem 0.65rem;
    line-height: 1.45;
}

/* .auto-grow has higher specificity and was winning a tiny min-height → label/reflow jump on focus */
#commentForm .form-floating > textarea.form-control.auto-grow {
    min-height: 7.5rem;
}

/* Focus scroll-into-view: avoid extra inset with html scroll-padding / implicit margins */
#commentFormBody,
#commentForm .form-floating > textarea.auto-grow {
    scroll-margin: 0;
    scroll-margin-block: 0;
    scroll-margin-inline: 0;
}

.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15em;
    border: 1px solid var(--border-strong);
    background-color: var(--card-bg);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.form-check-input:checked {
    background-color: var(--text-link, #273c75);
    border-color: var(--text-link, #273c75);
}

.form-check-input:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

.item-text {
    font-size: 1.05rem;
    line-height: 1.75;
}

.item-text-curtain {
    position: relative;
    overflow: hidden;
}

.item-text-curtain--collapsed {
    max-height: 100em;
}

.item-text-curtain--collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4em;
    background: linear-gradient(to bottom, transparent, var(--bg-default, #fff));
    pointer-events: none;
    z-index: 1;
}

.item-text-show-more-wrap {
    margin-top: -0.5rem;
}

.item-text-show-more-divider {
    border: none;
    border-top: 1px solid var(--border-color, #ddd);
    margin: 0 0 0.25rem;
}

.item-text-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted, #6c757d);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}

.item-text-show-more-btn:hover {
    color: var(--text-primary, #333);
}

.item-text-show-more-btn:focus {
    outline: none;
}

.item-text-show-more-btn .fa {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.main {
    flex-grow: 1;
}

.container {
    max-width: 1200px;
}

.stretched-link {
    color: var(--text-link) !important;
}

/* .form-control:focus — ring defined in «Form controls» block */

.form-floating .form-control:focus::placeholder {
    opacity: 0;
}

.form-floating>textarea:focus~label::after,
.form-floating>.form-control:focus~label::after {
    background: transparent !important;
}

.form-floating>label {
    border: none !important;
}

/* Dark theme — form-floating labels */
html[data-theme="dark"] .form-floating>label {
    color: var(--text-muted);
}

html[data-theme="dark"] .form-floating>.form-control:focus~label,
html[data-theme="dark"] .form-floating>.form-control:not(:placeholder-shown)~label,
html[data-theme="dark"] .form-floating>textarea:focus~label,
html[data-theme="dark"] .form-floating>textarea:not(:placeholder-shown)~label {
    color: var(--text-muted-alt);
}

/* ===== Custom pagination (light + dark) ===== */
.paginator-nav {
    margin-top: 1.5rem;
}

.paginator-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.paginator-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-link);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--btn-radius, 8px);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.paginator-btn:hover {
    color: var(--btn-primary-bg);
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.paginator-btn.paginator-disabled {
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}

.paginator-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.paginator-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-default);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.paginator-page:hover {
    color: var(--btn-primary-bg);
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.paginator-page.paginator-current {
    color: var(--btn-primary-fg);
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    cursor: default;
}

.paginator-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

html[data-theme="dark"] .paginator-btn,
html[data-theme="dark"] .paginator-page {
    border-color: var(--border-default);
}

html[data-theme="dark"] .paginator-btn:hover,
html[data-theme="dark"] .paginator-page:hover {
    background: var(--bg-muted);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .paginator-page.paginator-current {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

.modal .modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.modal .modal-close-btn:hover {
    opacity: 1;
}

.modal .modal-close-btn .fa {
    color: inherit;
}

.modal-footer>* {
    margin: 0 2px;
}

.modal-body {
    color: var(--text-muted);
}

.bg-secondary {
    border: 1px solid var(--text-muted);
    background-color: transparent !important;
    color: var(--text-muted);
}

#imagesHelp {
    color: var(--text-muted);
    margin-top: 10px;
}

/* Обычный header в потоке документа; dropdown поиска якорится к обёртке */
/* Круг: поиск + переключение темы. Квадрат со скруглением: бургер, закрытие. Одинаковый hit-area. */
:root {
    --header-icon-size: 38px;
    --header-icon-radius-square: 8px;
}

@media (max-width: 991px) {
    :root {
        --header-icon-size: 44px;
    }
}

.header-wrapper {
    position: relative;
    z-index: 1050;
}

.header {
    position: static;
    width: 100%;
    /* background: #f1f2f6; */
    background: var(--bg-default);
    padding: 20px 10px;
    transform: none;
    transition: none;
    will-change: auto;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .header {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.header-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
}

/* Let the brand column shrink so search + burger keep a stable hit area (grid/flex min-width: auto otherwise overflows). */
.header-brand {
    min-width: 0;
}

.header-brand .brand-minimal {
    min-width: 0;
}

@media (max-width: 991px) {
    .header-brand .brand-minimal {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-nav {
        column-gap: 12px;
    }

    /* Grid item: keep search + burger from being squeezed. */
    .header-actions {
        min-width: fit-content;
    }
}

@media (max-width: 399px) {
    .header-nav {
        column-gap: 8px;
    }
}

.header-menu {
    display: flex;
    justify-self: center;
    align-items: center;
    white-space: nowrap;
}

.header-menu-item {
    padding: 8px 15px;
    transition: .3s ease-in-out;
    font-size: .875rem;
    font-weight: 500;
    border-radius: 5px;
}

.header-menu-item__icon {
    font-size: 0.8125rem;
    line-height: 1;
    opacity: 0.92;
    flex-shrink: 0;
}

.header-menu-item.active .header-menu-item__icon,
.header-menu-item:hover .header-menu-item__icon {
    opacity: 1;
}

.header-menu-item__label {
    line-height: 1.2;
}

.header-menu-icon.brainews-icon {
    font-style: normal;
    display: inline-block;
}

.header-menu-item:hover {
    color: var(--text-link) !important;
}

.header-menu-item.active {
    color: var(--text-link) !important;
    background-color: var(--bg-subtle);
    /* border: 1px solid var(--border-muted); */
}

/* Как .page-static__link — только на больших экранах (меню видно с min-width: 992px) */
@media (min-width: 992px) {
    .header-menu .header-menu-item {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--text-muted) !important;
        text-decoration: none;
        font-weight: 500;
        border-radius: 0;
        border-bottom: 1px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
        background-color: transparent;
        padding: 0.25rem 0.65rem;
    }

    .header-menu .header-menu-item:hover {
        color: var(--text-link-hover) !important;
        border-bottom-color: currentColor;
    }

    .header-menu .header-menu-item.active {
        color: var(--text-link) !important;
        background-color: transparent !important;
        border-bottom-color: currentColor;
    }

    .header-menu .header-menu-item:focus-visible {
        color: var(--text-link-hover) !important;
        border-bottom-color: currentColor;
        outline: 2px solid var(--text-link);
        outline-offset: 2px;
    }
}

.search-btn,
.theme-toggle-btn {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    min-width: var(--header-icon-size);
    min-height: var(--header-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    font-size: 0.875rem;
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.search-btn:hover,
.theme-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.search-btn:focus-visible,
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

html[data-theme="dark"] .search-btn,
html[data-theme="dark"] .theme-toggle-btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* Moon/sun from data-theme (set in <head> before paint) — avoids icon swap on DOMContentLoaded */
.theme-toggle-btn .theme-toggle-icon--moon {
    display: inline-block;
}

.theme-toggle-btn .theme-toggle-icon--sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon--moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon--sun {
    display: inline-block;
}

/* Search dropdown — шторка под header, не влияет на высоту контента */
.header-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg-default);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1049;
}

.header-search-dropdown:not(.hidden) {
    max-height: min(520px, 85vh);
    padding: 12px 0;
    overflow: visible;
    /* search-history-dropdown может выходить за границы при focus */
}

.header-search-dropdown.hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Minimal brand logo — like admin sidebar */
.brand-minimal {
    color: var(--text-muted) !important;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.brand-minimal .brand-short { display: none; }

@media (max-width: 991px) {
    .brand-minimal .brand-full  { display: none; }
    .brand-minimal .brand-short { display: inline; }
}

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    align-self: center;
    line-height: 1;
}

.header-actions>a,
.header-actions>.user-menu {
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .header-actions-desktop {
        display: none !important;
    }
}

.user-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.header-actions .user-avatar-btn .little-avatar {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
}

@media (max-width: 991px) {
    .header-nav {
        grid-template-columns: 1fr auto;
    }

    .header-menu {
        display: none !important;
    }

    .theme-toggle-overlay {
        display: inline-flex !important;
    }
}

@media (min-width: 992px) {
    .theme-toggle-overlay {
        display: none !important;
    }
}

.content_block {
    position: relative;
    padding-top: 0;
    margin-bottom: 0;
}

/* Trending page + categories modal: card-body as stretched-link container */
.trending-page .trending-card .card-body,
.categories-modal-popular .trending-card .card-body {
    position: relative;
}

/* ========== Trending Cards UI ========== */
.trending-section-title {
    font-weight: 600;
    color: var(--text-default);
    font-family: var(--font-heading);
}

.trending-page .trending-card,
.categories-modal-popular .trending-card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-radius: var(--radius-md);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.trending-page .trending-card:hover,
.categories-modal-popular .trending-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-lg);
}

/* BraiNews all_cards — hover lift + shadow (same as trending) */
article.item_block.card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

article.item_block.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-lg);
}

/* Hot / Hero cards — horizontal layout */
.trending-card--hot {
    border: 1px solid var(--border-default);
}

.trending-card--hero .trending-card__img-wrap {
    min-height: 260px;
}

.trending-card__img-wrap {
    position: relative;
    min-height: 160px;
    overflow: hidden;
    background: var(--bg-muted);
}

.trending-card__img-wrap--sm {
    min-height: 140px;
}

.trending-card__img-link {
    position: relative;
    display: block;
    height: 100%;
    min-height: 140px;
}

.trending-card__img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.trending-card:hover .trending-card__img {
    transform: scale(1.05);
}

.trending-card__placeholder {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-subtle) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rising / Feed: centered gray circle only (Hot uses .placeholder-icon + fire) */
.trending-card__placeholder:not(.trending-card__placeholder--hot)::after {
    content: "";
    width: 48px;
    height: 48px;
    background: var(--border-muted);
    border-radius: 50%;
    opacity: 0.6;
    flex-shrink: 0;
}

.trending-card__placeholder-icon {
    width: 48px;
    height: 48px;
    background: var(--border-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    opacity: 0.92;
}

/* Same FA + utilities as section titles; no underline on stretched image link */
.trending-page .trending-card__img-link,
.categories-modal-popular .trending-card__img-link {
    text-decoration: none;
}

.trending-page .trending-card__img-link:hover,
.trending-page .trending-card__img-link:focus,
.trending-page .trending-card__img-link:focus-visible,
.categories-modal-popular .trending-card__img-link:hover,
.categories-modal-popular .trending-card__img-link:focus,
.categories-modal-popular .trending-card__img-link:focus-visible {
    text-decoration: none;
}

.trending-page .trending-card__img-link .trending-card__placeholder-icon .fa,
.categories-modal-popular .trending-card__img-link .trending-card__placeholder-icon .fa {
    text-decoration: none;
}

.trending-card__rank {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.trending-card__category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.trending-card__title {
    color: var(--text-default) !important;
    transition: color 0.2s ease;
}

.trending-card__title:hover {
    color: var(--text-link) !important;
}

/* Badges */
.trending-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
}

.trending-badge--hot {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: #fff;
}

.trending-badge--rising {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
    z-index: 2;
}

.trending-badge--feed {
    background: linear-gradient(135deg, var(--text-primary) 0%, #1e2f5c 100%);
    color: #fff;
}

.trending-growth-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #2ecc71;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.2em 0.5em;
    border-radius: var(--radius-sm);
    z-index: 2;
}

/* Metrics */
.trending-metric {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    gap: 3px;
}

.trending-metric i {
    opacity: 0.8;
}

.trending-metric .trending-val {
    color: var(--text-default);
}

.trending-metric__suffix {
    margin-left: 0.15em;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* Rising card: image on top */
.trending-card--rising .trending-card__img-wrap {
    position: relative;
}

.trending-card--rising .trending-card__img-wrap .trending-card__img-link {
    min-height: 120px;
}

.trending-card--rising .trending-card__img {
    min-height: 120px;
}

/* Dark theme adjustments */
html[data-theme="dark"] .trending-card__rank,
html[data-theme="dark"] .trending-growth-badge {
    background: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .trending-card__placeholder {
    background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-subtle) 100%);
}

html[data-theme="dark"] .trending-card__placeholder:not(.trending-card__placeholder--hot)::after {
    background: rgba(255, 255, 255, 0.12);
    opacity: 0.75;
}

html[data-theme="dark"] .trending-card__placeholder-icon {
    background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .trending-card__placeholder--hot .trending-card__placeholder-icon .fa {
    color: #ff8787 !important;
}

/* Responsive: Hot hero on mobile (scoped to trending page only) */
@media (max-width: 1191px) {
    .trending-page .trending-card--hot .row,
    .trending-page .trending-card--feed .row {
        flex-direction: column !important;
    }

    .trending-page .trending-card--hot .trending-card__img-wrap,
    .trending-page .trending-card--feed .trending-card__img-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-height: 200px;
    }

    .trending-page .trending-card--hot .row > .col,
    .trending-page .trending-card--feed .row > .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .trending-page .trending-card--hero .trending-card__img-wrap {
        min-height: 220px;
    }

    .trending-page .trending-card__img,
    .trending-page .trending-card__img-link {
        min-height: 200px !important;
    }
}

@media (max-width: 767px) {
    .trending-page .trending-card--hero .trending-card__img-wrap {
        min-height: 200px;
    }

    .trending-page .trending-card--hot .trending-card__img-wrap,
    .trending-page .trending-card--feed .trending-card__img-wrap,
    .trending-page .trending-card--rising .trending-card__img-wrap {
        min-height: 180px;
    }

    .trending-page .trending-card__img,
    .trending-page .trending-card__img-link {
        min-height: 180px !important;
    }
}

/* ========== Feed Cards Masonry Grid ========== */
.feed-cards-masonry {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feed-cards-masonry > .item-card {
    width: 100%;
}

@media (min-width: 768px) {
    .feed-cards-masonry {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
    }

    .feed-cards-masonry > .item-card:nth-child(3n+1) {
        grid-column: span 12;
    }

    .feed-cards-masonry > .item-card:nth-child(3n+2),
    .feed-cards-masonry > .item-card:nth-child(3n+3) {
        grid-column: span 6;
    }

    .feed-cards-masonry > .item-card:last-child:nth-child(3n+2) {
        grid-column: 1 / -1;
    }

    /* Equal height in each grid row: short cards stretch; footer aligns at bottom */
    .feed-cards-masonry > .item-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .feed-cards-masonry > .item-card > .item-feed-card.trending-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    .feed-cards-masonry .item-feed-card > .row {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .feed-cards-masonry .item-feed-card > .row > .col {
        flex: 1 1 auto;
        min-height: 0;
    }

    .feed-cards-masonry .item-feed-card .card-body.d-flex {
        flex: 1 1 auto;
        min-height: 0;
    }

    .feed-cards-masonry .item-feed-card .feed-card-bottom-row {
        margin-top: auto;
    }
}

/* --- Card chrome (trending style) --- */
.feed-cards-masonry .item_block.trending-card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.feed-cards-masonry .item_block.trending-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-lg);
}

html[data-theme="dark"] .feed-cards-masonry .item_block.trending-card {
    background-color: var(--card-bg);
    border-color: var(--border-default);
    box-shadow: var(--card-shadow);
}

/* --- Image column: stretch to full row height --- */
.feed-cards-masonry .item-feed-card .trending-card__img-wrap {
    max-height: none;
}

@media (min-width: 768px) {
    .feed-cards-masonry .item-feed-card > .row > .trending-card__img-wrap {
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }

    .feed-cards-masonry .item-feed-card .trending-card__img-link {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .feed-cards-masonry .item-feed-card .trending-card__placeholder,
    .feed-cards-masonry .item-feed-card .trending-card__img {
        flex: 1 1 auto;
        min-height: 0;
    }

    .feed-cards-masonry > .item-card:nth-child(3n+1) .trending-card__img-wrap {
        flex: 0 0 41.667%;
        max-width: 41.667%;
    }

    .feed-cards-masonry > .item-card:last-child:nth-child(3n+2) .trending-card__img-wrap {
        flex: 0 0 41.667%;
        max-width: 41.667%;
    }
}

/* --- Min-heights per cycle position --- */
.feed-cards-masonry > .item-card:nth-child(3n+1) .trending-card__img-wrap {
    min-height: clamp(200px, 20vw, 300px);
}

.feed-cards-masonry > .item-card:nth-child(3n+2) .trending-card__img-wrap,
.feed-cards-masonry > .item-card:nth-child(3n+3) .trending-card__img-wrap {
    min-height: clamp(160px, 16vw, 240px);
}

/* --- Title sizing per cycle --- */
.feed-cards-masonry > .item-card:nth-child(3n+1) .item-feed-card__title {
    font-size: 1.25rem;
}

.feed-cards-masonry > .item-card:nth-child(3n+2) .item-feed-card__title,
.feed-cards-masonry > .item-card:nth-child(3n+3) .item-feed-card__title {
    font-size: 1.05rem;
}

.feed-cards-masonry > .item-card:last-child:nth-child(3n+2) .item-feed-card__title {
    font-size: 1.25rem;
}

/* --- Excerpt line-clamp (feed: ~500 chars sm, ~850 md+; text capped in template) --- */
.feed-cards-masonry .item-feed-card .excerpt-html--feed-sm {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 14;
}

.feed-cards-masonry .item-feed-card .excerpt-html--feed-lg {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 18;
}

@media (min-width: 768px) {
    .feed-cards-masonry > .item-card:nth-child(3n+1) .excerpt-html--feed-lg {
        -webkit-line-clamp: 24;
    }

    .feed-cards-masonry > .item-card:nth-child(3n+2) .excerpt-html--feed-lg,
    .feed-cards-masonry > .item-card:nth-child(3n+3) .excerpt-html--feed-lg {
        -webkit-line-clamp: 16;
    }

    .feed-cards-masonry > .item-card:last-child:nth-child(3n+2) .excerpt-html--feed-lg {
        -webkit-line-clamp: 24;
    }
}

/* --- Full-card click (stretched-link covers article) --- */
.feed-cards-masonry .item_block.item-feed-card.trending-card .card-body {
    position: static;
}

/* Hover zoom on feed card images */
.feed-cards-masonry .item-feed-card:hover .trending-card__img {
    transform: scale(1.05);
}

/* Feed card link color */
.feed-cards-masonry .item-feed-card .item-link {
    color: var(--text-link);
    font-weight: 500;
}

.feed-cards-masonry .item-feed-card .trending-card__img-link {
    text-decoration: none;
}

/* --- Thumb grid (2–10 images mosaic) --- */
.trending-card__img-link.item-feed-card__img-link--grid {
    display: flex;
}

.feed-cards-masonry .item-feed-card .item-feed-card__thumb-grid {
    flex: 1;
    display: grid;
    gap: 2px;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-content: stretch;
    /* minmax(0,1fr) so nested flex + replaced content don’t leave white gutters */
    grid-auto-rows: minmax(0, 1fr);
    box-sizing: border-box;
    background-color: var(--border-muted, rgba(0, 0, 0, 0.06));
}

.item-feed-card__thumb-grid--n2  { grid-template-columns: repeat(2, 1fr); }
.item-feed-card__thumb-grid--n3  { grid-template-columns: repeat(3, 1fr); }
.item-feed-card__thumb-grid--n4  { grid-template-columns: repeat(2, 1fr); }
.item-feed-card__thumb-grid--n5  { grid-template-columns: repeat(3, 1fr); }
.item-feed-card__thumb-grid--n6  { grid-template-columns: repeat(3, 1fr); }
.item-feed-card__thumb-grid--n7  { grid-template-columns: repeat(4, 1fr); }
.item-feed-card__thumb-grid--n8  { grid-template-columns: repeat(4, 1fr); }
.item-feed-card__thumb-grid--n9  { grid-template-columns: repeat(3, 1fr); }
.item-feed-card__thumb-grid--n10 { grid-template-columns: repeat(4, 1fr); }

/* Slot = grid cell; image crops to fill (no letterboxing inside the mosaic) */
.item-feed-card__thumb-slot {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.feed-cards-masonry .item-feed-card .item-feed-card__thumb-cell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- Profile cards horizontal scroll --- */
.profile-cards-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.profile-cards-scroll::-webkit-scrollbar {
    display: none;
}

.profile-cards-strip {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.profile-cards-strip > .item-card {
    flex: 0 0 auto;
    width: clamp(280px, 40vw, 380px);
}

.profile-cards-strip .trending-card__img-wrap {
    max-height: 180px !important;
}

.footer {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-default);
    overflow: visible;
    /* Same as .header box-shadow, cast upward from top edge */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    /* background: #f1f2f6; */
}

html[data-theme="dark"] .footer {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.footer-blocks {
    flex-wrap: wrap;
    overflow: visible;
}

/* Ссылки и Subscribe в футере — как .header-menu-item: на узких экранах плавный цвет + фон у .active; от 992px — нижняя граница */
.footer-links a.footer-link-item,
.footer-links .footer-subscribe-trigger,
.footer-links .footer-back-to-top {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    transition: 0.3s ease-in-out;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 5px;
    text-decoration: none;
}

.footer-links .footer-subscribe-trigger,
.footer-links .footer-back-to-top {
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    text-align: inherit;
}

.footer-links a.footer-link-item:hover,
.footer-links .footer-subscribe-trigger:hover,
.footer-links .footer-back-to-top:hover {
    color: var(--text-link) !important;
}

.footer-links a.footer-link-item.active {
    color: var(--text-link) !important;
    background-color: var(--bg-subtle);
}

.footer-links a.footer-link-item:focus-visible,
.footer-links .footer-subscribe-trigger:focus-visible,
.footer-links .footer-back-to-top:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .footer-links a.footer-link-item,
    .footer-links .footer-subscribe-trigger,
    .footer-links .footer-back-to-top {
        color: var(--text-muted) !important;
        font-weight: 500;
        border-radius: 0;
        border-bottom: 1px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
        background-color: transparent;
        padding: 0.25rem 0.65rem;
    }

    .footer-links a.footer-link-item:hover,
    .footer-links .footer-subscribe-trigger:hover,
    .footer-links .footer-back-to-top:hover {
        color: var(--text-link-hover) !important;
        border-bottom-color: currentColor;
        background-color: transparent !important;
    }

    .footer-links a.footer-link-item.active {
        color: var(--text-link) !important;
        background-color: transparent !important;
        border-bottom-color: currentColor;
    }

    .footer-links a.footer-link-item:focus-visible,
    .footer-links .footer-subscribe-trigger:focus-visible,
    .footer-links .footer-back-to-top:focus-visible {
        color: var(--text-link-hover) !important;
        border-bottom-color: currentColor;
        outline: 2px solid var(--text-link);
        outline-offset: 2px;
    }
}

/* Subscribe: popover above trigger + arrow toward button */

.footer-subscribe-wrap {
    position: relative;
    display: inline-block;
}

.footer-subscribe-popover {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 12px);
    z-index: 1080;
    width: max-content;
    max-width: min(calc(100vw - 24px), 95vw);
    padding: 12px 16px;
    box-sizing: border-box;
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow-lg);
}

/* Одна линия иконок — без переноса */
.footer-subscribe-social {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.footer-subscribe-social-icon {
    font-size: 1.125rem;
    line-height: 1;
}

/* Arrow pointing down to the Subscribe button */
.footer-subscribe-popover::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--border-default);
}

.footer-subscribe-popover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--bg-default);
}

.footer-subscribe-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.footer-subscribe-social-link:hover {
    color: var(--text-link) !important;
    background: var(--bg-subtle);
}

.footer-subscribe-popover[hidden] {
    display: none !important;
}

@media (max-width: 576px) {
    /* Поповер справа от кнопки; стрелка слева — указывает на Subscribe */
    .footer-subscribe-popover {
        left: 100%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10px;
        padding: 8px 10px;
        max-width: calc(100vw - 3.5rem);
    }

    .footer-subscribe-popover::before {
        /* треугольник влево (обводка) */
        left: -8px;
        right: auto;
        bottom: auto;
        top: 50%;
        margin-left: 0;
        margin-top: -8px;
        border-left: none;
        border-right: 8px solid var(--border-default);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .footer-subscribe-popover::after {
        /* треугольник влево (заливка) */
        left: -7px;
        right: auto;
        bottom: auto;
        top: 50%;
        margin-left: 0;
        margin-top: -7px;
        border-left: none;
        border-right: 7px solid var(--bg-default);
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

    .footer-subscribe-social {
        gap: 0.35rem !important;
    }

    .footer-subscribe-social-link {
        min-width: 1.75rem;
        min-height: 1.75rem;
        padding: 0;
    }

    .footer-subscribe-social-icon {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 380px) {
    .footer-subscribe-popover {
        padding: 6px 8px;
    }

    .footer-subscribe-social {
        gap: 0.25rem !important;
    }

    .footer-subscribe-social-icon {
        font-size: 0.85rem !important;
    }

    .footer-subscribe-social-link {
        min-width: 1.5rem;
        min-height: 1.5rem;
    }
}

.footer-subscribe {
    min-width: 0;
}

.footer-subscribe-title {
    font-size: .9rem;
    font-weight: 600;
}

.footer-subscribe-input {
    font-size: 0.875rem;
    font-weight: 400;
    min-width: 180px;
    max-width: 100%;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-default);
    padding: 0.625rem 0.875rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.footer-subscribe-input::placeholder {
    color: var(--text-muted-alt);
}

.footer-subscribe-input:hover:not(:focus) {
    border-color: var(--border-strong);
}

.footer-subscribe-input:focus {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.footer-subscribe {
    align-items: flex-end;
}

@media (min-width: 576px) {
    .footer-subscribe-input {
        width: 220px;
    }
}

@media (min-width: 785px) {
    .footer-subscribe-input {
        width: 240px;
    }
}

.tooltip .bs-tooltip-top {
    --bs-tooltip-padding-y: 20px;
}

.sign_in_btn {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--text-link);
}

/* Убираем крестик очистки */
input::-webkit-search-cancel-button {
    display: none !important;
}

/* Убираем встроенную иконку поиска */
input::-webkit-search-decoration {
    display: none !important;
}


.excerpt-html blockquote {
    border-left: 4px solid var(--border-muted);
    padding-left: 1rem;
    color: var(--text-primary);
    background: var(--bg-muted);
    margin: 0 0 0.75rem;
}

/* Аннотация карточки — более компактная высота + затенение внизу */
.excerpt-html {
    line-height: 1.425;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    position: relative;
}

.excerpt-html::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5em;
    background: linear-gradient(to top, var(--card-bg) 0%, var(--excerpt-fade) 40%, transparent 100%);
    pointer-events: none;
}

.excerpt-html p {
    line-height: 1.4rem !important;
    margin-bottom: 0.6rem;
}


.alert.fade {
    transition: opacity 0.6s linear, transform 0.3s ease;
}

/* Алерты сразу под шапкой */
.messages-container:has(.custom-alert) {
    padding-top: var(--space-3, 12px);
}

.custom-alert {
    padding: 15px 20px;
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-size: .9rem;
    transition: opacity 0.3s ease;
    font-weight: 500;
}

.custom-alert.custom-alert-danger {
    background-color: var(--danger-bg);
    /* margin-bottom: 0.5rem; */
}

.custom-alert.custom-alert-success {
    background-color: var(--success-bg);
}

.custom-alert.custom-alert-info {
    background-color: var(--info-bg);
}

.custom-alert.custom-alert-warning {
    background-color: var(--warning-bg);
}

.custom-alert.custom-alert-dismissed {
    opacity: 0;
    pointer-events: none;
}

/* Textarea sizing: .form-control and .auto-grow — см. блок Form controls */

/* Контейнер топ-хедера */
.top_header {
    position: static;
    z-index: 1000;
    background: var(--bg-default);
    transition: none;
    will-change: auto;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15);
}

/* .top_header--hidden, .header-spacer — removed (header is no longer fixed) */

.header-search-overlay {
    position: relative;
    pointer-events: auto;
    overflow: visible;
}

/* Временно отключено прилипание поиска — оставляем обычное поведение
.header-search-overlay.header-search-stuck {
    position: fixed;
    top: 0;
    left: var(--stuck-left, 0);
    width: var(--stuck-width, 100%);
    max-width: var(--stuck-width, 100%);
    box-sizing: border-box;
    z-index: 100;
    background-color: var(--bg-default);
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
*/

.header-search-placeholder {
    display: none;
    transition: height 0.2s ease;
    overflow: hidden;
}

/* Slightly change inner wrapper to sit nicely in container */
.header-search-inner {
    width: 100%;
    position: relative;
    /* padding-bottom: 15px; */
}

.back_btn {
    background: none;
    border: none;
}

/* Make search row look like a single horizontal control */
.header-search-row {
    position: relative;
    width: 100%;
}

.search-sign {
    position: absolute;
    top: 30%;
    left: 19px;
    color: var(--text-primary);
    font-size: 1.1rem;
}

/* Keep the input styling */
.header-search-input {
    width: 100%;
    height: 67px;
    padding: 15px 50px;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    border: 1px solid var(--border-default);
    color: var(--text-default) !important;
    background: var(--card-bg);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.header-search-input:hover:not(:focus) {
    border-color: var(--border-strong);
}

.header-search-input:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

.field-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    border-radius: 20px;
    text-decoration: none;
}

/* скрытие (JS будет переключать) */
.hidden {
    display: none !important;
}

/* .field-clear:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
} */

/* если у тебя есть класс .btn-reset, можно подстроить вид */
.field-clear.btn-reset {
    border: 0;
}

/* FLOATING SEARCH (FAB) — скрыта: открытие только из кнопки в шапке */
.floating-search-btn {
    display: none !important;
}


/* =========================
   OVERLAY SEARCH (fullscreen)
========================= */
.overlay-search-root.hidden {
    display: none;
}

/* Full viewport via inset — do not set height via visualViewport JS (iOS can report bad offsetTop). */
.overlay-search-root {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior: none;
    box-sizing: border-box;
    padding: 0;
    touch-action: manipulation;
}

.overlay-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    opacity: 1;
    cursor: pointer;
}

.overlay-panel {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--bg-default);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: none;
}

.overlay-search-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: env(safe-area-inset-top, 0) 1rem max(1rem, env(safe-area-inset-bottom, 0px)) 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

.overlay-search-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 0 1rem;
    flex-shrink: 0;
}

.overlay-search-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.overlay-search-close-text {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
}

.overlay-search-input-wrap {
    flex-shrink: 0;
    padding-bottom: 0.35rem;
}

.overlay-search-content .header-search-row {
    position: relative;
    width: 100%;
}

.overlay-search-content .search-sign {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
}

.overlay-search-content .header-search-input {
    width: 100%;
    height: 52px;
    padding: 12px 44px 12px 44px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    /* ≥16px on narrow screens reduces iOS Safari focus-zoom */
    font-size: max(1rem, 16px);
    text-align: left;
    background: var(--card-bg);
    color: var(--text-default) !important;
    box-sizing: border-box;
}

.overlay-search-content .header-search-input::placeholder {
    color: var(--text-muted-alt);
}

.overlay-search-content .header-search-input:focus {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.overlay-search-content .header-search-row .field-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
}

/* Single scroll container for suggestions + history (header + field stay fixed above). */
.overlay-search-body {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.overlay-search-section {
    margin-bottom: 1.25rem;
}

.overlay-search-section-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted-alt);
    margin: 0 0 0.5rem;
}

.overlay-search-suggestions {
    display: flex;
    flex-direction: column;
    /* gap: 2px; */
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-bg);
}

.overlay-search-suggestion-item {
    display: block;
    padding: 12px 14px;
    color: var(--text-default);
    text-decoration: none;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--border-muted);
    transition: background 0.15s ease;
}

.overlay-search-suggestion-item:last-child {
    border-bottom: none;
}

.overlay-search-suggestion-item:hover,
.overlay-search-suggestion-item:focus-visible {
    background: var(--bg-muted);
    outline: none;
}

.overlay-search-history {
    border: 1px solid var(--border-default);
    border-radius: 5px;
    overflow: hidden;
    background: var(--card-bg);
    font-family: inherit;
}

.overlay-search-history .search-history-header-row {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    gap: 12px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-default);
    flex-shrink: 0;
}

.overlay-search-history .search-history-header {
    font-size: 0.75rem;
    color: var(--text-link);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.overlay-search-history .search-history-clear-btn {
    margin-left: auto;
    padding: 7px 15px;
    font-size: 0.7rem;
    font-family: inherit;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.overlay-search-history .search-history-clear-btn:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--border-strong);
}

.overlay-search-history .search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    border: none;
    border-bottom: 1px solid var(--border-muted);
    background: transparent;
    width: 100%;
    text-align: left;
    gap: 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.overlay-search-history .search-history-item:last-child {
    border-bottom: none;
}

.overlay-search-history .search-history-item:hover {
    background: var(--bg-muted);
}

.overlay-search-history .search-history-item-icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: var(--text-muted-alt);
    font-size: 1rem;
}

.overlay-search-history .search-history-item-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.overlay-search-history .search-history-item-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted-alt);
}

.overlay-search-history .search-history-item-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    font-family: inherit;
    color: var(--text-muted-alt);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.overlay-search-history .search-history-item-remove:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
    border-color: var(--border-muted);
}

.overlay-search-empty {
    padding: 1rem 18px;
    font-size: 0.875rem;
    color: var(--text-muted-alt);
    /* text-align: center; */
}


/* small close near input in cloned header */
.header-search-row .header-search-local-close {
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: 3;
}

/* ensure clear button style and hidden by default */
.field-clear.hidden {
    display: none !important;
}

.header-search-local-close {
    display: none !important;
}

/* Filters (checkboxes) appear as a small toolbar under the input */
.header-search-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

/* История поиска — дропдаун под строкой, при focus на input */
@keyframes search-history-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-history-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    box-shadow: var(--card-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1060;
    transform-origin: top center;
}

.search-history-dropdown:not(.hidden) {
    animation: search-history-dropdown-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .search-history-dropdown:not(.hidden) {
        animation: none;
    }
}

.search-history-dropdown.hidden {
    display: none !important;
}

.search-history-dropdown .search-history-header-row {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 12px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-default);
    flex-shrink: 0;
}

.search-history-dropdown .search-history-header {
    font-size: 0.75rem;
    color: var(--text-link);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.search-history-dropdown .search-history-clear-btn {
    margin-left: auto;
    padding: 7px 15px;
    font-size: 0.7rem;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 500;
    transition: .3s ease-in;
}

.search-history-dropdown .search-history-clear-btn:hover {
    background-color: var(--btn-secondary-hover-bg);
}

.search-history-dropdown .search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    gap: 10px;
}

.search-history-dropdown .search-history-item:hover {
    background: var(--bg-muted);
}

.search-history-dropdown .search-history-item-icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: var(--text-muted-alt);
    font-size: 1rem;
}

.search-history-dropdown .search-history-item-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.search-history-dropdown .search-history-item-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted-alt);
}

.search-history-dropdown .search-history-item-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-muted-alt);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.search-history-dropdown .search-history-empty {
    padding: 22px;
    font-size: 0.85rem;
    color: var(--text-muted-alt);
}

/* =========================
   BRAINEWS FILTER BLOCK
========================= */
/* .filter-block {
    padding-top: 10px;
} */

.filter-block-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.filter-select {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-reason-btn {
    border: 1px solid var(--border-strong);
    background: var(--bg-default);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: .775rem;
    cursor: pointer;
    font-weight: 500;
    transition: .2s ease-in-out;
}

.filter-reason-btn.is-selected {
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    background: var(--btn-primary-bg);
    /* transform: scale(1.08); */
}

a.filter-reason-btn.topic-category-link {
    text-decoration: none;
    display: inline-block;
}

a.filter-reason-btn.topic-category-link:hover {
    text-decoration: none;
    opacity: 0.92;
}

/* Segmented filter: shell = border pill — width follows row (max-content), capped at column;
   horizontal scroll only inside .filter-segment-scroll (the row moves, not the whole pill). */
.filter-segment-outer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.filter-segment-shell {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-default);
    box-sizing: border-box;
    overflow: hidden;
}

/* Scrollport: fixed width = shell inner; only the chip row (.filter-segment-bar) pans inside */
.filter-segment-scroll {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.filter-segment-bar {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: 7px 10px;
    box-sizing: border-box;
    width: max-content;
    max-width: none;
    position: relative;
    z-index: 0;
    white-space: normal;
}

.filter-segment-bar .filter-reason-btn,
.filter-segment-bar a.filter-reason-btn {
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.22s ease, background-color 0.22s ease, color 0.22s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 600;
}

.filter-segment-bar .filter-reason-btn.is-selected,
.filter-segment-bar a.filter-reason-btn.is-selected {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

html[data-theme="light"] .filter-segment-bar .filter-reason-btn.is-selected,
html[data-theme="light"] .filter-segment-bar a.filter-reason-btn.is-selected {
    border-color: transparent;
    color: var(--btn-primary-fg);
    background: var(--filter-chip-selected-fallback);
    background: -webkit-linear-gradient(to right, var(--filter-chip-gradient-start), var(--filter-chip-gradient-end));
    background: linear-gradient(to right, var(--filter-chip-gradient-start), var(--filter-chip-gradient-end));
    box-shadow: 0 1px 3px rgba(10, 42, 136, 0.22);
}

.filter-segment-bar .filter-reason-btn:hover:not(.is-selected):not(:disabled),
.filter-segment-bar a.filter-reason-btn:hover:not(.is-selected) {
    background: var(--bg-subtle);
}

/* Dark: active segment = grey pill (same token as filter chip hover lift), white label */
html[data-theme="dark"] .filter-segment-bar .filter-reason-btn.is-selected,
html[data-theme="dark"] .filter-segment-bar a.filter-reason-btn.is-selected {
    border-color: transparent;
    color: var(--btn-primary-fg);
    background: var(--btn-secondary-hover-bg);
}

/* `.topic-category-chips` elsewhere uses width 100%; inner row must stay max-content for horizontal scroll */
.filter-segment-scroll .filter-segment-bar.topic-category-chips,
.filter-segment-scroll .topic-category-chips.filter-segment-bar {
    width: max-content;
    max-width: none;
}

.filter-empty-hint {
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-fg);
    font-size: 0.9rem;
}

.filter-empty-hint.hidden {
    display: none !important;
}

.filter-cards-wrapper {
    min-height: 60px;
}

.filter-page-context-block {
    max-height: 500px;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.filter-empty-message {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: #0000001a;
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em #0000001a, inset 0 .125em .5em #00000026
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh
}

.bi {
    vertical-align: -.125em;
    fill: currentColor
}

/* =========================
   BURGER BUTTON (header mobile)
========================= */
.bottom-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    min-width: var(--header-icon-size);
    min-height: var(--header-icon-size);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    background: var(--card-bg);
    border: 1px solid var(--border-default);
    border-radius: var(--header-icon-radius-square);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-tap-highlight-color: transparent;

    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bottom-burger:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.bottom-burger:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.bottom-burger span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-default, #111);
}

/* =========================
   MOBILE BOTTOM NAV (pill bar)
========================= */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991px) {
    body {
        padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    }

    body.page-item-detail {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-bottom-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1580;
        padding: 0 max(6px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
        pointer-events: none;
    }

    .mobile-bottom-nav.mobile-bottom-nav--hidden-on-detail {
        display: none !important;
    }

    .mobile-bottom-nav__inner {
        pointer-events: auto;
        display: flex;
        align-items: stretch;
        min-height: 84px;
        overflow: hidden;
        max-width: min(520px, 100%);
        width: 100%;
        margin: 0 auto;
        padding: 0 clamp(12px, 3vw, 22px);
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-default, #e6e6e6);
        border-radius: 999px;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(0, 0, 0, 0.06),
            0 0 0 1px color-mix(in srgb, var(--text-link) 8%, transparent),
            0 0 28px color-mix(in srgb, var(--text-link) 10%, transparent);
    }

    .mobile-bottom-nav__scroll {
        --mbnav-gap: clamp(4px, 1vw, 8px);
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-bottom-nav__scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mobile-bottom-nav__track {
        display: flex;
        flex: 1 1 0;
        flex-direction: row;
        align-items: stretch;
        gap: var(--mbnav-gap);
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-bottom-nav__tail-group {
        display: contents;
    }

    .mobile-bottom-nav__nav-cell {
        flex: 1 1 0;
        min-width: 0;
        box-sizing: border-box;
    }

    .mobile-bottom-nav__account.mobile-bottom-nav__nav-cell,
    .mobile-bottom-nav__discover.mobile-bottom-nav__nav-cell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        -webkit-tap-highlight-color: transparent;
        transform: translateZ(0);
    }

    .mobile-bottom-nav__discover .mobile-bottom-nav__discover-btn,
    .mobile-bottom-nav__account .mobile-bottom-nav__more-btn {
        flex: 1;
        justify-content: center;
    }

    html[data-theme="dark"] .mobile-bottom-nav__inner {
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.4),
            0 2px 10px rgba(0, 0, 0, 0.25),
            0 0 0 1px color-mix(in srgb, var(--text-link) 22%, transparent),
            0 0 36px color-mix(in srgb, var(--text-link) 14%, transparent);
    }

    .mobile-bottom-nav__link,
    .mobile-bottom-nav__more-btn,
    .mobile-bottom-nav__discover-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 4px 0;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 0.775rem;
        font-weight: 600;
        /* line-height: 1; */
        letter-spacing: 0.01em;
        text-align: center;
        border: none;
        outline: none;
        background: transparent;
        cursor: pointer;
        border-radius: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        transform: translateZ(0);
        transition: color 0.15s ease;
    }

    .mobile-bottom-nav__more-btn,
    .mobile-bottom-nav__discover-btn {
        font-family: inherit;
    }

    .mobile-bottom-nav__label {
        display: block;
        max-width: 100%;
        padding: 0 clamp(0px, 0.5vw, 3px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-nav__link--active .mobile-bottom-nav__label {
        color: inherit;
    }

    .mobile-bottom-nav__icon-wrap {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-height: 1.25rem;
        border-radius: 0;
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: inherit;
        transition: color 0.15s ease;
    }

    .mobile-bottom-nav__icon {
        font-size: 1.35rem;
        line-height: 1;
        opacity: 0.94;
    }

    .mobile-bottom-nav__link--active .mobile-bottom-nav__icon-wrap {
        background: transparent;
        color: var(--btn-primary-bg);
    }

    .mobile-bottom-nav__link--active {
        color: var(--btn-primary-bg);
        position: relative;
    }

    .mobile-bottom-nav__link--active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(20px, 60%, 55px);
        height: 2.5px;
        border-radius: 2px;
        background: var(--btn-primary-bg);
    }

    .mobile-bottom-nav__link--active .mobile-bottom-nav__icon {
        opacity: 1;
        color: inherit;
    }

    html[data-theme="dark"] .mobile-bottom-nav__link,
    html[data-theme="dark"] .mobile-bottom-nav__more-btn,
    html[data-theme="dark"] .mobile-bottom-nav__discover-btn {
        color: var(--text-link);
    }

    html[data-theme="dark"] .mobile-bottom-nav__link--active {
        color: var(--text-link-hover);
    }

    html[data-theme="dark"] .mobile-bottom-nav__link--active::after {
        background: var(--text-link-hover);
    }

    html[data-theme="dark"] .mobile-bottom-nav__link--active .mobile-bottom-nav__icon-wrap {
        background: transparent;
        color: var(--text-link-hover);
    }

    .mobile-nav-ellipsis {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .mobile-nav-ellipsis span {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.95;
    }

    .mobile-bottom-nav__account .mobile-bottom-nav__more-btn,
    .mobile-bottom-nav__discover .mobile-bottom-nav__discover-btn {
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    /* Fixed layer: avoids clipping by .mobile-bottom-nav__scroll overflow; position set in mobile_bottom_nav.js */
    .mobile-nav-account-popover {
        --popover-caret-x: 50%;
        position: fixed;
        left: 0;
        top: 0;
        right: auto;
        bottom: auto;
        min-width: 230px;
        max-width: min(280px, calc(100vw - 20px));
        padding: 6px 0;
        margin: 0;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-subtle, #e8e8ec);
        border-radius: 6px;
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.14),
            0 4px 12px rgba(0, 0, 0, 0.06);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease;
        z-index: 1710;
    }

    .mobile-nav-account-popover.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Arrow points down toward More; horizontal position follows anchor via --popover-caret-x (px from popover left) */
    .mobile-nav-account-popover.is-open::after {
        content: '';
        position: absolute;
        left: var(--popover-caret-x);
        top: 100%;
        margin-top: -1px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid var(--card-bg);
        filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.08));
        pointer-events: none;
        z-index: 1;
    }

    html[data-theme="dark"] .mobile-nav-account-popover {
        border-color: var(--border-strong, #484f58);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    html[data-theme="dark"] .mobile-nav-account-popover.is-open::after {
        border-top-color: var(--border-strong, #484f58);
        filter: none;
    }

    html[data-theme="dark"] .mobile-nav-account-popover.is-open::before {
        content: '';
        position: absolute;
        left: var(--popover-caret-x);
        top: 100%;
        margin-top: -1px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid var(--card-bg, #1c2128);
        pointer-events: none;
        z-index: 2;
    }

    .mobile-nav-account-popover__row {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 13px 16px;
        text-decoration: none;
        color: var(--text-primary, #111);
        font-size: 0.9375rem;
        font-weight: 500;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

    .mobile-nav-account-popover__row:hover {
        background: var(--bg-subtle, #f1f2f6);
        color: var(--text-link);
    }

    .mobile-nav-account-popover__row--active {
        background: color-mix(in srgb, var(--btn-primary-bg) 14%, var(--card-bg));
        color: var(--btn-primary-bg);
        font-weight: 600;
    }

    html[data-theme="dark"] .mobile-nav-account-popover__row--active {
        background: color-mix(in srgb, #5b9bf5 18%, var(--card-bg));
        color: #7ab8ff;
    }

    .mobile-nav-account-popover__ico {
        flex-shrink: 0;
        width: 1.4rem;
        font-size: 1.05rem;
        text-align: center;
        opacity: 0.9;
    }

    .mobile-nav-account-popover__text {
        min-width: 0;
        line-height: 1.35;
        font-size: inherit;
        font-weight: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-account-popover__title {
        font-weight: 600;
    }

    .mobile-nav-account-popover__sub {
        font-size: inherit;
        font-weight: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-account-popover__row--danger {
        color: #e74c3c;
    }

    .mobile-nav-account-popover__row--danger:hover {
        color: #c0392b;
        background: rgba(231, 76, 60, 0.08);
    }

    .mobile-nav-account-popover .notification-btn.has-unread .mobile-nav-account-popover__ico {
        color: #e74c3c;
    }

    .mobile-bottom-nav__link:focus:not(:focus-visible),
    .mobile-bottom-nav__more-btn:focus:not(:focus-visible),
    .mobile-bottom-nav__discover-btn:focus:not(:focus-visible) {
        outline: none;
    }

    .mobile-bottom-nav__link:focus-visible,
    .mobile-bottom-nav__more-btn:focus-visible,
    .mobile-bottom-nav__discover-btn:focus-visible {
        outline: 2px solid var(--btn-primary-bg);
        outline-offset: 2px;
    }

    .mobile-nav-account-popover__row:focus:not(:focus-visible) {
        outline: none;
    }

    .mobile-nav-account-popover__row:focus-visible {
        outline: 2px solid var(--btn-primary-bg);
        outline-offset: -2px;
    }

    /* Discover submenu: no blue side outline on focus (touch + Turbo refocus). */
    #mobileNavDiscoverPopover .mobile-nav-account-popover__row:focus,
    #mobileNavDiscoverPopover .mobile-nav-account-popover__row:focus-visible {
        outline: none;
    }

    #mobileNavDiscoverPopover .mobile-nav-account-popover__row:focus-visible {
        background: var(--bg-subtle, #f1f2f6);
    }

    html[data-theme="dark"] #mobileNavDiscoverPopover .mobile-nav-account-popover__row:focus-visible {
        background: rgba(255, 255, 255, 0.06);
    }
}

@media (min-width: 992px) {
    body {
        padding-bottom: 0;
    }
}

/* =========================
   OVERLAY
========================= */
.bottom-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    /* Invisible scrim: still catches outside clicks to close the drawer */
    background: transparent;
}

.bottom-menu-overlay.hidden {
    display: none;
}

/* =========================
   SIDE MENU
========================= */
.bottom-left-nav .nav-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.05rem;
}

.bottom-side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    /* Fill notch / status-bar inset so the drawer surface reads as one solid sheet on iOS */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: var(--bg-default);
    z-index: 1600;

    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: transform .3s ease;
}

.bottom-side-menu.open {
    transform: translateX(0);
}

.bottom-side-menu.hidden {
    display: none;
}

/* header (drawer top bar — align vertical rhythm with .header on mobile) */
.bottom-menu-header {
    padding: 20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #F1F2F3;
    box-sizing: border-box;
}

/* Drawer controls: theme = круг как в шапке; закрытие = квадрат как бургер */
.bottom-menu-header .theme-toggle-overlay {
    /* наследует размер/круг от .theme-toggle-btn */
    flex-shrink: 0;
}

.bottom-menu-header .bottom-menu-close-btn {
    flex-shrink: 0;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    min-width: var(--header-icon-size);
    min-height: var(--header-icon-size);
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--border-default);
    border-radius: var(--header-icon-radius-square);
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bottom-menu-header .bottom-menu-close-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.bottom-menu-header .bottom-menu-close-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    /* Match main header: .header uses padding 20px 0; row content ~ var(--header-icon-size) */
    .bottom-menu-header {
        padding: 20px 12px;
        min-height: calc(20px + var(--header-icon-size) + 20px);
    }
}

/* scrollable primary + account blocks */
.bottom-menu-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bottom-menu-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* nav */
.bottom-menu-nav {
    flex: none;
    overflow: visible;
}

.bottom-menu-auth {
    border-top: 1px solid var(--border-subtle);
    /* margin-top: var(--space-2, 8px); */
    /* padding-top: var(--space-2, 8px); */
}

.bottom-menu-auth .header-menu-item.disabled {
    padding: 13px 20px;
    cursor: not-allowed;
    opacity: 0.65;
}

.overlay-menu-profile-row.overlay-menu-profile-row {
    display: flex;
    align-items: center;
}

.overlay-menu-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bottom-menu-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 13px 20px;
    text-decoration: none;
    color: var(--text-muted);
    transition: .3s ease;
}

.bottom-menu-nav a:hover {
    padding-left: 24px;
    background-color: #F1F2F3;
    /* color: #6528e0; */
    color: var(--text-link);
}

.bottom-menu-nav a:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
    color: var(--text-link);
}

.bottom-menu-nav a.header-menu-item.active {
    color: var(--text-link);
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .bottom-menu-nav a.header-menu-item.active {
    background-color: rgba(255, 255, 255, 0.06);
}

.social-block {
    flex-shrink: 0;
    margin-top: auto;
    padding: 15px;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0px));
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #f1f2f3;
}

.social-nav {
    display: flex;
    justify-content: space-between;
}

.social-nav a {
    color: var(--text-link);
    font-size: 18px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease;
    border-radius: 50%;
    text-decoration: none;
}

.social-block a:hover {
    color: #ffffff;
    background-color: var(--text-link);
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8
}

.bd-mode-toggle {
    z-index: 1500
}

.bd-mode-toggle .bi {
    width: 1em;
    height: 1em
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important
}

/* Like / bookmark icon pop — keep short so it feels snappy */
.btn-bounce {
    animation: btnBounce 0.18s cubic-bezier(0.34, 1.45, 0.55, 1) both;
    transform-origin: center center;
}

@keyframes btnBounce {
    0% {
        transform: scale(1);
    }
    55% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.like-btn,
.bookmark-btn {
    transition: transform 0.1s ease, opacity 0.1s ease, border-color 0.12s ease, color 0.12s ease;
}

.like-btn:active:not(:disabled),
.bookmark-btn:active:not(:disabled) {
    transform: scale(0.93);
}

/* небольшой визуальный отклик для активной иконки */
.fa-thumbs-up {
    color: #8395a7;
}

.file-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.file-upload input[type="file"] {
    display: none;
}

/* ——— Native file input (visible), same language as .form-control ——— */
input[type="file"]:not([hidden]) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--card-bg);
    color: var(--text-default);
    font-size: 0.9375rem;
    line-height: 1.45;
    font-family: var(--font-body);
    font-weight: 400;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

input[type="file"]:not([hidden]):hover:not(:disabled) {
    border-color: var(--border-strong);
}

input[type="file"]:not([hidden]):focus {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

input[type="file"]:not([hidden]):disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

input[type="file"]:not([hidden])::file-selector-button,
input[type="file"]:not([hidden])::-webkit-file-upload-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border: none;
    border-right: 1px solid var(--border-default);
    border-radius: calc(var(--radius-md) - 2px) 0 0 calc(var(--radius-md) - 2px);
    background: var(--bg-muted);
    color: var(--text-default);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

input[type="file"]:not([hidden]):disabled::file-selector-button,
input[type="file"]:not([hidden]):disabled::-webkit-file-upload-button {
    cursor: not-allowed;
    opacity: 0.85;
}

input[type="file"]:not([hidden]):enabled::file-selector-button:hover,
input[type="file"]:not([hidden]):enabled::-webkit-file-upload-button:hover {
    background: var(--bg-subtle);
}

html[data-theme="dark"] input[type="file"]:not([hidden]) {
    background-color: var(--bg-muted);
    border-color: var(--border-default);
    color: var(--text-default);
}

html[data-theme="dark"] input[type="file"]:not([hidden])::file-selector-button,
html[data-theme="dark"] input[type="file"]:not([hidden])::-webkit-file-upload-button {
    background: var(--bg-subtle);
    border-right-color: var(--border-default);
    color: var(--text-default);
}

html[data-theme="dark"] input[type="file"]:not([hidden]):enabled::file-selector-button:hover,
html[data-theme="dark"] input[type="file"]:not([hidden]):enabled::-webkit-file-upload-button:hover {
    background: var(--bg-muted);
}

/* Item images + profile avatar: same trigger as primary outlined control */
.item-images-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.item-images-upload.item-images-upload--native {
    flex-direction: column;
    align-items: stretch;
}

.item-images-upload.item-images-upload--native .item-images-file-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.item-images-upload.item-images-upload--native #btnAddMoreImages {
    align-self: flex-start;
}

.item-images-file-trigger,
.avatar-file-trigger {
    min-width: 140px;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.item-images-file-trigger:hover,
.avatar-file-trigger:hover {
    background-color: var(--text-link);
    color: #fff !important;
    border-color: var(--text-link);
}

.item-images-file-trigger:focus-visible,
.avatar-file-trigger:focus-visible {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.item-images-file-trigger i,
.avatar-file-trigger i {
    font-size: 1.05rem;
}

html[data-theme="dark"] .item-images-file-trigger,
html[data-theme="dark"] .avatar-file-trigger {
    color: var(--text-link);
    border-color: var(--text-link);
}

html[data-theme="dark"] .item-images-file-trigger:hover,
html[data-theme="dark"] .avatar-file-trigger:hover {
    background-color: var(--text-link);
    color: #fff !important;
    border-color: var(--text-link);
}

/* Drop-in label wrapper (if JS shows the real input) */
.file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-default);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-default);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.file-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.file-placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.round {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    line-height: 37px;
    background-color: var(--bg-default);
    padding: 0;
}

.thumb_btn {
    color: #8395a7;
    /* border: 2px solid var(--btn-primary-bg); */
    background-color: transparent;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 50%; */
    font-size: 1.3rem;
    padding: 0;
    border: none;
}

.reply-form-errors,
.field-error {
    color: #dc3545;
    font-size: .8rem;
    margin: .5rem 0;
    font-weight: 500;
}

/* Smooth scrollIntoView from openReplyForm — small inset from viewport edges */
.reply-form {
    scroll-margin-block: 1.25rem;
}

.reply-form textarea.form-control {
    resize: none;
}

.comment-edit-form textarea.form-control {
    resize: none;
    overflow: hidden;
}

.comment-form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.25rem;
}

.reply-form-actions,
.comment-edit-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
}

.reply-form-actions > .cstm-btn-sm,
.comment-edit-actions > .cstm-btn-sm {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .reply-form-actions > .cstm-btn-sm,
    .comment-edit-actions > .cstm-btn-sm {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    .comment-form-actions {
        flex-wrap: nowrap;
        width: 100%;
    }

    .comment-form-actions #submitCommentBtn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .comment-form-actions #clearComment {
        flex: 0 0 auto;
    }

    .comment-form-actions #clearComment.hidden {
        display: none !important;
    }
}

.item-detail-author-name {
    font-size: 0.88rem;
}

.comment-text.comment-text--truncated {
    position: relative;
}

.comment-text.comment-text--truncated::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4rem;
    pointer-events: none;
    background: linear-gradient(to top, var(--card-bg) 0%, var(--excerpt-fade) 42%, transparent 100%);
}

/* ===============================
   COMMENT LAYOUT (avatar + column)
=============================== */
.comment-layout {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
}

.comment-avatar-col {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.comment-meta-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.comment-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.comment-author-name {
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* Overflow ⋯ top-right (meta row): tooltip + icon trigger (all breakpoints) */
.comment-menu--actions-bar {
    position: relative;
    flex-shrink: 0;
    z-index: 6;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column;
    max-width: 100%;
}

/* Minimal trigger: only three gray dots (no circular chrome) */
.comment-menu--actions-bar > .comment-menu-btn.overflow-more-btn {
    flex-shrink: 0;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 30px;
    min-height: 30px;
    margin: 0;
    /* padding: 6px; */
    border: none;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* .comment-menu--actions-bar > .comment-menu-btn.overflow-more-btn:hover {
    background: color-mix(in srgb, var(--text-muted-alt, #747d8c) 14%, transparent);
} */

.comment-menu--actions-bar > .comment-menu-btn.overflow-more-btn:focus {
    outline: none;
}

.comment-menu--actions-bar > .comment-menu-btn.overflow-more-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.comment-menu--actions-bar > .comment-menu-btn.overflow-more-btn:active {
    opacity: 0.85;
}

.overflow-more-btn__dots {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.overflow-more-btn__dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted-alt, #747d8c);
    flex-shrink: 0;
}

html[data-theme="dark"] .overflow-more-btn__dot {
    background: color-mix(in srgb, var(--text-muted-alt, #8b949e) 88%, var(--text-primary));
}

.comment-menu--actions-bar .comment-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-left: 0;
    margin-top: 8px;
    padding: 6px 0;
    width: max-content;
    min-width: 132px;
    max-width: min(220px, calc(100vw - 32px));
    background: var(--card-bg);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: 3px 12px 25px rgba(0, 0, 0, 0.14);
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    /* Above sibling comments / stacked rows; parent .comment-block gets higher z when open */
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.comment-menu--actions-bar .comment-actions::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 6px;
    margin-bottom: -1px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--card-bg);
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.08));
    pointer-events: none;
    z-index: 1;
}

html[data-theme="dark"] .comment-menu--actions-bar .comment-actions {
    border-color: var(--border-strong, #484f58);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .comment-menu--actions-bar .comment-actions::before {
    border-bottom-color: var(--border-strong, #484f58);
    filter: none;
}

html[data-theme="dark"] .comment-menu--actions-bar .comment-actions::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 7px;
    margin-bottom: -1px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--card-bg, #1c2128);
    pointer-events: none;
    z-index: 2;
}

.comment-menu--actions-bar.open .comment-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.comment-menu--actions-bar .comment-actions > .fa {
    display: none;
}

.comment-menu--actions-bar .comment-actions .comment-menu-action {
    min-height: 0 !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 22px !important;
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    font-weight: 500;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-link) !important;
    text-align: left;
    transition: background 0.15s ease;
}

.comment-menu--actions-bar .comment-actions .comment-menu-action > i {
    width: 1.35em;
    margin-right: 0.7rem;
    flex-shrink: 0;
    text-align: center;
}

.item-detail-head-menu .comment-menu-action {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}

.item-detail-head-menu .comment-menu-action > i {
    order: -1;
    margin-right: 0.7rem;
    margin-left: 0;
}

.comment-menu--actions-bar .comment-actions .comment-menu-action:not(.disabled):hover {
    background: #f1f2f6 !important;
}

html[data-theme="dark"] .comment-menu--actions-bar .comment-actions .comment-menu-action:not(.disabled):hover {
    background: var(--bg-muted) !important;
}

.comment-menu--actions-bar .comment-actions .comment-menu-action.badge_danger,
.comment-menu--actions-bar .comment-actions .comment-menu-action.btn-delete-comment {
    color: #e74c3c !important;
}

html[data-theme="dark"] .comment-menu--actions-bar .comment-actions .comment-menu-action.badge_danger,
html[data-theme="dark"] .comment-menu--actions-bar .comment-actions .comment-menu-action.btn-delete-comment {
    color: var(--danger-fg) !important;
}

.comment-menu--actions-bar .comment-actions .comment-menu-action.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.comment-avatar-link {
    min-width: 0;
}

.comment-meta-start {
    min-width: 0;
    flex: 1 1 auto;
}

.comment-meta-sep {
    /* margin: 0 0.6em; */
    opacity: 0.75;
}

.comment-meta-start .comment-meta-sep--inline {
    color: var(--text-muted-alt, #747d8c);
    font-weight: 600;
    opacity: 0.85;
    user-select: none;
    flex-shrink: 0;
}

.comment-meta-published {
    line-height: 1.25;
    min-width: 0;
}

.comment-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    /* padding-top: 0.15rem; */
}

.comment-actions-bar .small {
    line-height: 1.25;
}

.comment-actions-bar__likes {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Guest / inactive users: green stat--reposts badge */
.comment-actions-bar__likes[role="group"] {
    gap: 0.35rem;
    padding: 0.32rem 0.55rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, #14b8a6 45%, var(--border-default));
    background: color-mix(in srgb, #14b8a6 14%, var(--card-bg));
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

html[data-theme="dark"] .comment-actions-bar__likes[role="group"] {
    color: #5eead4;
    border-color: color-mix(in srgb, #2dd4bf 38%, var(--border-default));
    background: color-mix(in srgb, #2dd4bf 14%, var(--card-bg));
}

.comment-actions-bar__like-btn {
    padding: 2px 6px;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
}

.comment-actions-bar__like-btn i {
    line-height: 1;
    display: block;
}

.comment-actions-bar__like-count {
    font-size: 0.78rem;
    color: var(--text-muted-alt, #747d8c);
    min-width: 0.6em;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}

.comment-actions-bar__like-guest-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted-alt, #747d8c);
    font-size: 0.82rem;
    line-height: 1;
    margin-right: 0.02rem;
}

.comment-actions-bar__like-guest-icon i {
    opacity: 0.88;
    line-height: 1;
    display: block;
}

.comment-actions-bar__likes[role="group"] .comment-actions-bar__like-guest-icon,
.comment-actions-bar__likes[role="group"] .comment-actions-bar__like-count {
    color: inherit;
    font-size: inherit;
    opacity: 1;
    margin: 0;
}

.comment-actions-bar__likes[role="group"] .comment-actions-bar__like-guest-icon i,
.comment-actions-bar__likes[role="group"] .comment-actions-bar__like-guest-icon .fa {
    color: inherit;
    opacity: 1;
}

.comment-actions-bar__date {
    font-size: 0.78rem;
    margin-right: 0.15rem;
}

.comment-actions-bar .comment-actions-bar__sep {
    opacity: 0.75;
    color: var(--text-muted-alt, #747d8c);
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

@media (min-width: 768px) {
    .comment-actions-bar {
        flex-wrap: nowrap;
    }
}

.comment-action-bar-pill,
.comment-actions-bar .comment-menu-action.comment-action-bar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
    min-height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted-alt, #747d8c);
    font-size: 0.78rem;
    font-weight: 600;
    /* padding: 2px 8px; */
    padding: 0;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: none;
    text-decoration: underline;
}

/* .comment-action-bar-pill:hover:not(.disabled),
.comment-actions-bar .comment-menu-action.comment-action-bar-pill:hover:not(:disabled) {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-link) 8%, transparent);
} */

.comment-action-bar-pill.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.comment-main .comment-text {
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .comment-main .comment-text {
    box-shadow: none;
    border: 1px solid var(--border-muted);
}

.comment-replies-toggle,
a.comment-replies-thread-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    /* border: 1px solid color-mix(in srgb, var(--text-link) 28%, var(--border-default, #c4c4c4)); */
    /* background: color-mix(in srgb, var(--text-link) 6%, var(--bg-default)); */
    border: none;
    color: var(--text-link);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem 0.28rem 0.85rem;
    border-radius: 999px;
    line-height: 1.2;
    margin: .7rem 0;
    box-sizing: border-box;
}

.comment-replies-toggle {
    cursor: pointer;
}

a.comment-replies-thread-link {
    cursor: pointer;
    text-decoration: none;
    color: var(--text-link);
}

.comment-replies-toggle:hover,
a.comment-replies-thread-link:hover {
    background: color-mix(in srgb, var(--text-link) 12%, var(--bg-default));
    color: var(--text-link);
}

.comment-replies-toggle:focus-visible,
a.comment-replies-thread-link:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.comment-replies-toggle__chev {
    font-size: 0.62rem;
    transition: transform 0.22s ease;
    opacity: 0.85;
}

.comment-replies-toggle[aria-expanded="true"] .comment-replies-toggle__chev {
    transform: rotate(180deg);
}

/*
 * Reply bucket: avoid grid-template-rows 0fr → auto (Safari / mobile often computed height 0).
 * max-height + opacity is reliable across engines.
 */
.comment-replies-outer {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 0.32s ease,
        opacity 0.22s ease,
        visibility 0s linear 0.32s;
}

.comment-replies-outer.is-expanded {
    max-height: min(4000px, 480vh);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Let ⋯ overflow menus extend past this panel (overflow:hidden collapses max-height) */
    overflow: visible;
    transition:
        max-height 0.32s ease,
        opacity 0.2s ease,
        visibility 0s linear 0s;
}

.comment-replies-inner {
    display: block;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .comment-replies-outer {
        transition: none;
    }
}

/* While overflow menu is open: above header (1050) + footer popover (1080); below Bootstrap modal (~2090) */
.comment-block:has(.comment-menu.open) {
    position: relative;
    z-index: 1200;
    overflow: visible;
}

.comment-menu--actions-bar.open {
    z-index: 1201;
}

.comment-layout:has(.comment-menu--actions-bar.open),
.comment-main:has(.comment-menu--actions-bar.open) {
    overflow: visible;
}

.replies {
    margin-left: 0;
    margin-top: 4px;
    /* padding-left: 0.75rem; */
    /* border-left: 2px solid color-mix(in srgb, var(--text-link) 32%, var(--border-default, #c4c4c4)); */
}

/* Reserve space above footer on long comment pages (esp. nested threads) */
#commentsList {
    padding-bottom: 2rem;
}

.replies-circle {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a3bc;
    margin-right: 5px;
    flex-shrink: 0;
}

.replies > .comment-block {
    border: none;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5rem !important;
    padding-bottom: 0.45rem !important;
    background: transparent;
}

.replies .replies {
    margin-left: 0;
    margin-top: 2px;
    /* padding-left: 0.65rem; */
    /* border-left: 2px solid color-mix(in srgb, var(--text-link) 22%, var(--border-default, #c4c4c4)); */
}

/* тело comment */
/* .comment-body>.comment-text {
    border-left: 3px solid var(--text-link);
} */

/* ===============================
   ROOT COMMENT HIGHLIGHT (MENTION)
=============================== */
.comment-text.root-mention-highlight {
    animation: mentionFillFade 1.6s ease-in-out;
}

@keyframes mentionFillFade {
    0% {
        background-color: rgba(255, 232, 180, 0.65);
    }

    45% {
        background-color: rgba(255, 232, 180, 0.45);
    }

    70% {
        background-color: rgba(255, 232, 180, 0.25);
    }

    100% {
        background-color: transparent;
    }
}


/* Comment thread page — Back replaces breadcrumbs */
.thread-page-back .thread-back-btn {
    border-radius: var(--btn-radius, 8px);
    font-weight: 600;
    color: var(--text-default);
    border: 1px solid var(--border-default);
    background: var(--bg-subtle);
}

.thread-page-back .thread-back-btn:hover {
    color: var(--text-link);
    border-color: var(--text-link);
    background: var(--bg-muted);
}

.item-all-comments-link {
    color: var(--text-link);
    font-size: 0.95rem;
}

.item-all-comments-link:hover {
    color: var(--text-link-hover);
}

.btn-reply,
.comment-menu-btn {
    font-weight: 500;
}

.comment-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 25px;
    font-size: .775rem;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    padding: 0;
}

.show-more-btn-toggle {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: var(--bg-default);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-primary);
}

/* Ссылка @mention */
.mention-link {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 500;
}

/* Якорь для точного скролла */
.comment-anchor {
    display: block;
    position: relative;
    top: -90px;
    /* 🔥 ключевой момент */
    height: 1px;
}

.item-anchor {
    display: block;
    position: relative;
    top: -150px;
    height: 0;
}

.comment-anchor {
    display: block;
    position: relative;
    top: -150px;
    height: 0;
}


.thumbs_block {
    padding: 4px 10px;
    border-radius: 8px;
    color: #ffffff;
    background-color: var(--text-link);
}


@media (max-width: 767px) {
    a.edit_btn.manipulate,
    button.delete_btn.manipulate {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 1rem;
    }

    .bottom-side-menu .bottom-menu-nav a {
        font-size: 1.0625rem;
    }
}

.manipulate {
    display: flex;
    justify-content: center;
    align-items: center;
    /* чтобы можно было задать ширину/высоту */
    width: 30px;
    /* одинаковые значения → круг */
    height: 30px;
    /* чтобы текст был по центру */
    border-radius: 50%;
    /* делает кругом */
    text-decoration: none;
    font-size: .8rem;
    background-color: var(--card-bg);
}


.like-btn,
.delete_btn {
    border: 1.5px solid #e74c3c;
    color: #e74c3c;
}

.bookmark-btn,
.edit_btn {
    border: 1.5px solid var(--text-link);
    color: var(--text-link);
}

.edit_btn {
    background-color: var(--card-bg);
    padding: 0;
}

.delete_btn {
    padding: 0;
    background-color: var(--card-bg);
}

.published-badge {
    padding: 10px;
    border: 1px solid var(--text-link);
    border-radius: 7px;
}

.item_share_btn {
    border: 1.5px solid var(--text-link);
    background-color: transparent;
    color: var(--text-link);
    padding: 7px 12px;
    min-height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.item_share_btn:hover {
    background-color: var(--bg-subtle);
    color: var(--text-link-hover);
    border-color: var(--text-link-hover);
}

.item_share_btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.item_report_btn {
    border: 1.5px solid var(--danger-fg);
    background-color: transparent;
    color: var(--danger-fg);
    padding: 7px 12px;
    min-height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.item_report_btn:hover {
    background-color: rgba(231, 76, 60, 0.08);
}

html[data-theme="dark"] .item_report_btn:hover {
    background-color: var(--danger-bg);
}

.item_report_btn:focus-visible {
    outline: 2px solid var(--danger-fg);
    outline-offset: 2px;
}

.reported-label-item {
    color: var(--danger-fg);
    font-weight: 500;
    font-size: .8rem;
}

.report-feedback-success {
    color: #27ae60 !important;
}

.cstm-btn {
    padding: 8px 13px;
    border-radius: 5px;
    transition: .2s ease-in-out;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid;
    background: transparent;
}

.cstm-btn-sm {
    padding: 8px 10px;
    transition: .2s ease-in-out;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid;
    background: transparent;
}

/* Secondary actions: same surface as .tag-vlb grey chips */
.custom-secondary-btn {
    box-sizing: border-box;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-md);
    color: #3d454d;
    border-color: color-mix(in srgb, #6c757d 40%, var(--border-default));
    background: color-mix(in srgb, #6c757d 11%, var(--card-bg));
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.custom-secondary-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #6c757d 58%, var(--border-default));
    background: color-mix(in srgb, #6c757d 16%, var(--card-bg));
}

html[data-theme="dark"] .custom-secondary-btn {
    color: #c9d1d9;
    border-color: color-mix(in srgb, #8b949e 38%, var(--border-default));
    background: color-mix(in srgb, #8b949e 14%, var(--card-bg));
}

html[data-theme="dark"] .custom-secondary-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #8b949e 50%, var(--border-default));
    background: color-mix(in srgb, #8b949e 20%, var(--card-bg));
}

.custom-success-btn {
    color: var(--success-bg);
    border-color: var(--success-bg);
}

/* Danger actions: same accent treatment as .item-stats--feed .stat--likes */
.custom-danger-btn {
    box-sizing: border-box;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-md);
    color: #c53030;
    border-color: color-mix(in srgb, #e74c3c 48%, var(--border-default));
    background: color-mix(in srgb, #e74c3c 14%, var(--card-bg));
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.custom-danger-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #e74c3c 55%, var(--border-default));
    background: color-mix(in srgb, #e74c3c 18%, var(--card-bg));
}

html[data-theme="dark"] .custom-danger-btn {
    color: #ff8a87;
    border-color: color-mix(in srgb, #ff7b72 38%, var(--border-default));
    background: color-mix(in srgb, #ff7b72 14%, var(--card-bg));
}

html[data-theme="dark"] .custom-danger-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #ff7b72 48%, var(--border-default));
    background: color-mix(in srgb, #ff7b72 18%, var(--card-bg));
}

/* Primary actions: same accent treatment as .item-stats--feed .stat--views */
.custom-primary-btn {
    box-sizing: border-box;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-md);
    color: #1a6cad;
    border-color: color-mix(in srgb, #2980b9 52%, var(--border-default));
    background: color-mix(in srgb, #2980b9 14%, var(--card-bg));
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.custom-primary-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #2980b9 58%, var(--border-default));
    background: color-mix(in srgb, #2980b9 18%, var(--card-bg));
}

html[data-theme="dark"] .custom-primary-btn {
    color: #79b8ff;
    border-color: color-mix(in srgb, #58a6ff 42%, var(--border-default));
    background: color-mix(in srgb, #58a6ff 16%, var(--card-bg));
}

html[data-theme="dark"] .custom-primary-btn:hover {
    color: var(--text-default);
    border-color: color-mix(in srgb, #58a6ff 50%, var(--border-default));
    background: color-mix(in srgb, #58a6ff 20%, var(--card-bg));
}

/* Comment submit cooldown: danger surface (must beat html[data-theme=dark] .custom-primary-btn*) */
.comment-btn.custom-primary-btn.is-blocked,
.comment-btn.custom-primary-btn.is-blocked:hover {
    border-color: var(--danger-fg);
    color: var(--danger-fg);
    cursor: auto;
    background: color-mix(in srgb, var(--danger-fg) 12%, var(--card-bg));
}

html[data-theme="dark"] .comment-btn.custom-primary-btn.is-blocked,
html[data-theme="dark"] .comment-btn.custom-primary-btn.is-blocked:hover {
    border-color: var(--danger-fg);
    color: var(--danger-fg);
    background: color-mix(in srgb, var(--danger-fg) 14%, var(--card-bg));
}

.liked-users-close {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

.primary_ {
    color: var(--text-link);
}

.danger_ {
    color: #e74c3c;
}

.success_ {
    color: #60a3bc;
    font-weight: 600;
}

.delete_btn:active,
.delete_btn:focus {
    border-color: #e74c3c;
}

.card-text {
    min-height: 2.6rem !important;
    font-size: .9rem !important;
    line-height: 2.2rem !important;
}


.main-logo {
    font-size: 1.2rem;
}

.comment_author {
    font-size: .8rem;
}

.search-toggle-btn {
    font-size: 1.2rem;
    padding: 7px;
}


.create-field {
    max-width: 940px;
    margin: 0 auto;
}

.custom_link_danger {
    text-decoration: none;
    color: var(--text-link);
    transition: .3s ease;
    position: relative;
}

.custom_link_danger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    /* чтобы было видно */
    width: 0;
    height: 3px;
    background: #ff6b6b;
    transition: width .4s ease;
}

.custom_link_danger:hover::after {
    width: 100%;
}

.form-wrapper {
    padding: 10px;
    background: var(--bg-default);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .form-wrapper {
    box-shadow: none;
    border: 1px solid var(--border-muted);
}



/* кнопка плюсика (скрывается по умолчанию, JS управляет display) */
#btnAddMoreImages {
    min-width: 38px;
    height: 38px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: var(--text-link);
    background-color: transparent;
    border: 1px solid var(--text-link);
    font-size: .9rem;
}

/* превью блоки и кнопки удаления — чтобы соответствовали стилю */
.image-preview-item {
    width: 120px;
    text-align: center;
    position: relative;
}

.image-preview-item img {
    width: 125px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.btn-delete-image {
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 10px;
}

.existing-image {
    position: relative;
    width: 120px;
}

.existing-image img {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}


/* Убедимся, что карточка и body корректно растягиваются */

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 8px !important;
}


.card-body {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Превью карточек — aspect-ratio для CLS */
.item_thumbnail {
    flex-shrink: 0;
    aspect-ratio: 1;
    overflow: hidden;
}

.item_thumbnail img.thumb-sm {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

/* Стили для иконок/счётчиков (опционально) */
.card .fa {
    line-height: 1;
}

/* Ссылка Read (карточки листинга) — видимая и без смещения */
.stretched-link {
    color: var(--bs-primary);
    font-weight: 500;
}

.reading-angle {
    display: inline-block;
    /* margin-left: 10px; */
    transition: transform 0.2s ease;
}

/* BraiNews feed cards use .item-feed-card (no .card); trending/other cards use .card */
.card:hover .reading-angle,
.item-feed-card:hover .reading-angle {
    transform: translateX(6px);
}

#backBreadcrumb {
    text-decoration: none;
}

.comment_like_block {
    padding: 5px 10px;
    border-radius: 8px;
}

.comment-text-wrapper {
    position: relative;
}

/* Report modal */
.report-modal .modal-dialog {
    max-width: 640px;
}

.report-reason-btn {
    border: 1px solid #dfe4ea;
    background: #fff;
    color: #4b5a68;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.8rem;
    cursor: pointer;
}

.report-reason-btn.is-selected {
    border-color: var(--danger-fg);
    color: #ffffff;
    background: var(--danger-fg);
}

html[data-theme="dark"] .report-reason-btn {
    background: transparent;
    border-color: #6e7072;
    color: #6e7072;
}

html[data-theme="dark"] .report-reason-btn.is-selected {
    border-color: #ffffff;
    color: #ffffff;
}

.report-details {
    max-height: 180px;
    overflow-y: auto;
    resize: vertical;
}

#reportDetails {
    overflow-y: auto;
    min-height: 200px;
    resize: none;
}

/* Report exists view (already reported) */
.report-exists-view {
    font-size: 0.9rem;
}

.report-exists-header {
    color: #3498db;
    font-weight: 500;
}

.report-exists-label {
    color: #a4a2a2;
    font-weight: 500;
}

.report-exists-meta {
    font-size: 0.8rem;
    color: #a4a2a2;
    font-weight: 600;
}

.report-exists-reasons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    color: #484747;
}

.report-exists-reasons-list li {
    display: inline-block;
    width: fit-content;
    padding: 3px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: .7rem;
    border: 1px solid var(--danger-fg);
    font-weight: 500;
    color: var(--bg-default);
    background-color: var(--danger-fg);
}

.report-exists-details-block {
    padding: 15px;
    background-color: var(--card-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    color: #a4a2a2;
    border-radius: 8px;
    z-index: 1;
    line-height: 1.25rem;
    word-wrap: break-word;
    font-size: 0.8rem;
    font-weight: 500;
}

.comment-text {
    padding: 17px;
    background-color: var(--card-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    color: #5e5e5e;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    line-height: 1.25rem;
    word-wrap: break-word;
    font-size: .8rem;
    font-weight: 500;
    border-left: 4px solid var(--text-link)
}

.existing-image.marked-for-delete {
    outline: 2px dashed #dc3545;
    border-radius: 6px;
    transform: scale(.995);
}

.existing-image.marked-for-delete > img {
    opacity: 0.5;
}

.existing-video.marked-for-delete > .existing-video__thumb {
    opacity: 0.5;
}

/* ========== Container ========== */
.item-gallery {
    position: relative;
    margin-top: 2rem;
}

.published_block,
.tags_block {
    padding: 15px 25px;
    box-shadow: var(--card-shadow);
    background: var(--bg-default);
    border-radius: 8px;
}

/* Item detail: category + “I’m reading” + VLB — align-items center, scroll-x when overflow */
.item-detail-meta-row {
    min-width: 0;
    width: 100%;
}

.item-detail-meta-row__track {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
    padding-bottom: 6px;
    margin-bottom: -4px;
}

.item-detail-meta-row__cluster {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

.item-detail-meta-row__badges,
.item-detail-meta-row .VLB {
    align-self: center;
}

/* Post detail: Tags label fixed; tag chips scroll in sibling (scrollbar below chips) */
.tags .tag-list {
    min-width: 0;
}

.item-detail-tags-row {
    min-width: 0;
    align-items: center;
}

.item-detail-tags-label {
    user-select: none;
    align-self: center;
    line-height: 1.25;
    min-height: calc(0.8125rem * 1.25 + 0.64rem * 2);
    display: inline-flex;
    align-items: center;
    padding-bottom: 14px;
}

.item-detail-tag-scroll-outer {
    position: relative;
    min-width: 0;
    flex: 1 1 0%;
    align-self: center;
}

.item-detail-tag-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
    width: 100%;
    padding-bottom: 14px;
    box-sizing: border-box;
    /* block: avoids flex shrinking the tag row so the last chip is clipped */
    display: block;
}

.item-detail-tag-fade {
    position: absolute;
    top: 0;
    bottom: 14px;
    width: 1.75rem;
    max-width: 12%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Left edge (toward “Tags”): only while scrolled — hints content hidden to the left */
.item-detail-tag-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--bg-default), transparent);
}

.item-detail-tag-fade--left.is-active {
    opacity: 1;
}

.item-detail-tag-row {
    min-width: min-content;
    width: max-content;
    max-width: none;
    flex-shrink: 0;
    /* breathing room after the last tag when scrolled to the end (mobile + desktop) */
    padding-inline-end: 12px;
    box-sizing: content-box;
}

.item-detail-tag-row > .tag-vlb {
    flex-shrink: 0;
}

/* published_block: слева liked-users, справа like/bookmark */
.published_block {
    flex-wrap: nowrap;
    gap: 1rem;
}

.published_block .liked-users-block {
    min-width: 0;
    flex: 0 1 auto;
}

.published_block .action-block {
    flex-shrink: 0;
}

.liked-users-link {
    cursor: pointer;
    font-size: inherit;
}

.liked-users-link:hover {
    text-decoration: underline !important;
}

html[data-theme="dark"] .published_block,
html[data-theme="dark"] .tags_block {
    box-shadow: none;
    border: 1px solid var(--border-muted);
}


/* Views Comments Likes Bookmark */
.VLB {
    font-size: .750rem;
    font-weight: 600;
}

.users-search-btn {
    border: 1px solid var(--bg-subtle);
    background: transparent;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: .8rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.users-search-btn:hover {
    color: var(--text-primary);
}

.users-search-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.btn-tag-show-more {
    border: none;
    background: transparent;
    font-size: .8rem;
    padding: 0;
    font-weight: normal;
    color: var(--text-muted-alt);
}

.comment_likes_badge {
    position: absolute;
    top: -15px;
    right: 8px;
    z-index: 2;
    color: var(--text-muted-alt, #747d8c);
    border: 1px solid var(--border-default, #c4c4c4);
    padding: 7px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    gap: 7px !important;
    max-width: calc(100% - 16px);
    flex-wrap: wrap;
    justify-content: flex-end;
}

html[data-theme="dark"] .comment_likes_badge {
    border-color: var(--border-muted);
    box-shadow: none;
}

.comment-count,
.comment-like-count {
    padding: 7px;
    box-shadow: var(--card-shadow);
    border-radius: 8px;
    background-color: var(--card-bg);
    font-size: .8rem;
    font-weight: 500;
}

.comment-like-count i {
    color: #8395a7;
}

/* ========== Grid (default) ========== */
.gallery-grid {
    display: grid;
    gap: var(--gap, 18px);
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    box-sizing: border-box;
    /* padding: 20px; */
    /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); */
    /* border-radius: 8px; */
}



/* ========== Cells ========== */
.gallery-cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    transition: flex 360ms cubic-bezier(.2, .9, .2, 1), transform 280ms ease, opacity 220ms ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: stretch;
}

.gallery-cell:hover {
    transform: translateY(-5px);
}

/* Default heights: grid vs flex */
.gallery-grid:not(.flex) .gallery-cell {
    height: 450px;
}

.gallery-grid .flex .gallery-cell {
    flex: 1 1 0%;
    min-width: 6%;
    height: 450px;
    /* desktop accordion height */
}

/* ========== Images ========== */
.gallery-slide-img,
.gallery-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: 8px;
    transition: transform .6s cubic-bezier(.2, .9, .2, 1), filter .25s ease;
    cursor: pointer;
}

.gallery-grid img.gallery-img {
    aspect-ratio: unset;
    min-height: 0;
    flex: 1 1 auto;
}

/* переключатель: если всего 2 изображения — делаем grid из 2 колонок */
.gallery-grid.gallery-two-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .gallery-grid.gallery-two-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid:not(.flex) .gallery-cell {
        height: 320px;
    }
}

@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .gallery-grid.gallery-two-cols {
        grid-template-columns: 1fr;
    }

    .gallery-grid:not(.flex) .gallery-cell {
        height: 260px;
    }

    .gallery-overlay {
        padding: 10px;
    }

    .gallery-overlay-inner {
        padding: 12px;
    }

    .gallery-overlay-img {
        max-width: 100%;
        max-height: 100%;
    }
}

.gallery-cell {
    transition: transform .28s cubic-bezier(.2, .9, .2), opacity .22s ease, grid-row-end .18s ease, grid-column .18s ease;
}


/* ========== Slideshow (curtain) ========== */
.gallery-slideshow {
    position: relative;
    overflow: hidden;
    height: 520px;
}


.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(0);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.gallery-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.gallery-slide.enter-from-left {
    transform: translateX(-8%);
}

.gallery-slide.enter-from-right {
    transform: translateX(8%);
}

/* slide image specifics */
.gallery-slide-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
}

.gallery-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* ========== Lightbox / Overlay ========== */
.gallery-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    z-index: 2000;
    padding: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
}

.gallery-overlay.is-visible {
    display: flex;
}

/* Gallery custom close button (two rotated lines forming an X) */
.gallery-close-btn {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.gallery-close-btn:hover,
.gallery-close-btn:focus-visible {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-close-btn:focus {
    outline: none;
}

.gallery-close-btn__line {
    position: absolute;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.gallery-close-btn__line:first-child {
    transform: rotate(45deg);
}

.gallery-close-btn__line:last-child {
    transform: rotate(-45deg);
}

@media (prefers-reduced-transparency: reduce) {
    .gallery-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.gallery-overlay-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.gallery-overlay-img {
    display: block;
    position: relative;
    z-index: 3;
    max-width: calc(100% - 70px);
    max-height: calc(100% - 70px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: var(--overlay-shadow);
    transition: opacity 0.12s ease-out;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.gallery-overlay-img:focus,
.gallery-overlay-img:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

.gallery-overlay-img.gallery-overlay-loading {
    opacity: 0.55;
}



/* ========== Lightbox: arrow zones hidden (swipe-only navigation) ========== */
.gzone {
    display: none !important;
}

/* ========== Lightbox: swipe animation helpers ========== */
.gallery-overlay-img {
    will-change: transform, opacity;
}

@keyframes gallerySlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-40%); opacity: 0; }
}
@keyframes gallerySlideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(40%); opacity: 0; }
}
@keyframes gallerySlideInLeft {
    from { transform: translateX(-40%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes gallerySlideInRight {
    from { transform: translateX(40%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.gallery-slide-out-left  { animation: gallerySlideOutLeft 0.18s ease forwards; }
.gallery-slide-out-right { animation: gallerySlideOutRight 0.18s ease forwards; }
.gallery-slide-in-left   { animation: gallerySlideInLeft 0.28s ease forwards; }
.gallery-slide-in-right  { animation: gallerySlideInRight 0.28s ease forwards; }

@media (hover: hover) {
}

/* ========== Small polish: prevent overly strong scale / dramatic jumps ==========
   Make accordion more gentle — reduce scale and increase transition length where needed
*/
.gallery-img {
    will-change: transform, filter;
}

.gallery-cell {
    will-change: flex, transform, opacity;
}


/* Make sure .btn-link default focus doesn't color this button */
.header-search-row .field-clear.btn,
.header-search-row .field-clear.btn-link {
    color: var(--text-muted);
}

/* If browser applies -webkit-text-fill-color or default focus style - override */
.header-search-row .field-clear::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.header-search-row .field-clear::-webkit-focus-ring-color {
    outline: none;
}

.custom_badge,
.replied-badge {
    padding: 3px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: .7rem;
    border: 1px solid transparent;
    font-weight: 500;
    color: #ffffff;
    background-color: transparent;
}


/* Trust level block on profile */
.trust-level-block .trust-level-badge {
    min-width: 2.5em;
    text-align: center;
}

.trust-level-block .trust-zone-badge {
    font-size: 0.7rem;
}

.trust-level-block .trust-level-message {
    line-height: 1.4;
}

.replied-badge {
    color: var(--text-link);
    background-color: var(--card-bg);
    border: 1px solid var(--text-link);
}

/* Shadow-banned disabled controls */
.custom_badge.disabled,
.comment-menu-action.disabled,
.user-tooltip .disabled,
.cstm-btn-sm.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.badge {
    font-weight: 500;
}

.rounded-btn {
    border-radius: 25px !important;
    padding: 10px 17px;
}

/* Немного уменьшенный input, чтобы красиво смотрелось внутри modal */
#shareLinkInput {
    border: 1px solid var(--border-default);
}

/* Скрываем outline при клике, но оставляем для клавиатуры */
#shareLinkInput:focus {
    box-shadow: 0 0 0 0.15rem rgba(95, 39, 205, 0.08);
    outline: none;
}

/* Подсказка "скопировано" — чуть плавнее */
#shareCopyFeedback .custom-alert {
    transition: opacity 220ms ease;
}

.share-buttons {
    display: flex;
    gap: 8px;
    /* расстояние между кнопками */
    width: 100%;
}

.share-buttons .social_btn {
    flex: 1;
    /* каждая кнопка занимает одинаковую ширину */
    text-align: center;
}

.social_btn {
    background-color: var(--card-bg);
    border-radius: 5px;
    padding: 10px 15px;
    transition: .2s ease-in-out;
    border: none;
}

.social_btn i {
    margin-right: 8px;
}

.twitter_btn {
    color: #34495e;
    border: 2px solid #34495e;
}

.telegram_btn {
    color: #3498db;
    border: 2px solid #3498db;
}

.facebook_btn {
    color: #1877f2;
    border: 2px solid #1877f2;
}

.whatsup_btn {
    color: #27ae60;
    border: 2px solid #27ae60;
}

.twitter_btn:hover {
    color: #ffffff;
    background-color: #34495e;
}

.telegram_btn:hover {
    color: #ffffff;
    background-color: #3498db;
}

.facebook_btn:hover {
    color: #ffffff;
    background-color: #1877f2;
}

.whatsup_btn:hover {
    color: #ffffff;
    background-color: #27ae60;
}

.modal-content {
    border: none;
}


.expired_edit_delete {
    position: relative;
    border: 1px solid #bdc3c7;
}

/* .expired_edit_delete i {
    font-size: 1rem;
} */

.expired_edit_delete::before {
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    top: 45%;
    right: 0;
    background-color: #bdc3c7;
    width: 100%;
    transform: rotate(45deg);
}



#commentsBackToTop {
    position: fixed;
    /* Clear footer fat-finger row + thread controls; safe area on iOS */
    bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom, 0px)));
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--btn-primary-bg);
    color: #fff;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1060;
}

/* показ */
#commentsBackToTop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

#commentsBackToTop:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* ===== Reading progress bar (fixed bottom) ===== */
.read-progress-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.08);
}

.read-progress-bar {
    height: 100%;
    width: 0;
    background: #636e72;
}

@keyframes backPulse {

    0%,
    30% {
        outline: 1.5px solid #74b9ff;
        outline-offset: -1px;
        box-shadow: inset 0 0 0 2px #74b9ff, 0 0 20px rgba(95, 39, 205, 0.45), var(--card-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    }

    100% {
        outline: 1.5px solid transparent;
        outline-offset: -1px;
        box-shadow: var(--card-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    }
}

.item_block.back-highlight,
.item-card.back-highlight .item_block {
    animation: backPulse 1.5s ease-in-out forwards;
}


/* скрытые элементы */
.listing-hidden {
    display: none;
}

/* анимация появления */
.listing-animate {
    animation: listingFadeUp 0.45s ease forwards;
}

@keyframes listingFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error page styles live in pages/css/pages.css (.error-page-*) */

.error-suggestions {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.error-suggestions ul li {
    transition: all 0.2s ease;
}

.error-suggestions ul li:hover {
    transform: translateX(5px);
}

.error-suggestions a {
    transition: color 0.2s ease;
}

.error-suggestions a:hover {
    color: var(--text-link) !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .error-code h1 {
        font-size: 5rem;
    }

    .error-icon i {
        font-size: 3rem !important;
    }

    .error-actions {
        flex-direction: column;
    }

    .error-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

.item-stats {
    gap: 20px;
    /* font-size: 13px; */
    /* font-weight: 500; */
}

.item-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

/* Listing cards, profile tiles, item detail: compact stat chips */
.item-stats--feed {
    gap: 0.3rem;
    color: inherit;
}

.item-stats--feed.item-stats--solo {
    gap: 0;
}

.item-stats--feed .stat {
    padding: 0.32rem 0.55rem;
    border-radius: 6px;
    border: 1px solid transparent;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.item-stats--feed .stat span,
.item-stats--feed .stat .fa {
    color: inherit;
}

.item-stats--feed .stat--views {
    color: #1a6cad;
    border-color: color-mix(in srgb, #2980b9 52%, var(--border-default));
    background: color-mix(in srgb, #2980b9 14%, var(--card-bg));
}

.item-stats--feed .stat--likes {
    color: #c53030;
    border-color: color-mix(in srgb, #e74c3c 48%, var(--border-default));
    background: color-mix(in srgb, #e74c3c 14%, var(--card-bg));
}

.item-stats--feed .stat--comments {
    color: #5b4bdb;
    border-color: color-mix(in srgb, #6c5ce7 45%, var(--border-default));
    background: color-mix(in srgb, #6c5ce7 14%, var(--card-bg));
}

.item-stats--feed .stat--reposts {
    color: #0f766e;
    border-color: color-mix(in srgb, #14b8a6 45%, var(--border-default));
    background: color-mix(in srgb, #14b8a6 14%, var(--card-bg));
}

html[data-theme="dark"] .item-stats--feed .stat--views {
    color: #79b8ff;
    border-color: color-mix(in srgb, #58a6ff 42%, var(--border-default));
    background: color-mix(in srgb, #58a6ff 16%, var(--card-bg));
}

html[data-theme="dark"] .item-stats--feed .stat--likes {
    color: #ff8a87;
    border-color: color-mix(in srgb, #ff7b72 38%, var(--border-default));
    background: color-mix(in srgb, #ff7b72 14%, var(--card-bg));
}

html[data-theme="dark"] .item-stats--feed .stat--comments {
    color: #bc9cff;
    border-color: color-mix(in srgb, #a371f7 38%, var(--border-default));
    background: color-mix(in srgb, #a371f7 14%, var(--card-bg));
}

html[data-theme="dark"] .item-stats--feed .stat--reposts {
    color: #5eead4;
    border-color: color-mix(in srgb, #2dd4bf 38%, var(--border-default));
    background: color-mix(in srgb, #2dd4bf 14%, var(--card-bg));
}

/* цвет иконки комментариев */
.stat-comment {
    color: #b2bec3;
}


/* comment menu */
.comment-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 5;
}

.comment-menu-btn,
.comment-menu-action {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--text-link);
    background: transparent;
    color: var(--text-link);
    font-size: .675rem;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 20px;
    cursor: pointer;
}

.comment-menu-action.badge_danger {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: transparent;
}

.rating_badge_danger{
    border-color: #eb0029;
    background-color: rgb(225 92 115 / 20%);
    color: #eb0029;
}

.comment-menu-action.is-reply-blocked {
    opacity: 0.9;
}

/* Reply cooldown: label (no underline) + countdown */
.comment-actions-bar .btn-reply.comment-menu-action.is-reply-blocked,
.comment-menu-action.comment-action-bar-pill.btn-reply.is-reply-blocked {
    text-decoration: none;
    gap: 0.4rem;
    /* cursor: not-allowed; */
}

.reply-cooldown-label {
    text-decoration: none !important;
}

.reply-cooldown-timer {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted-alt, #747d8c);
    min-width: 2em;
    display: inline-block;
    text-align: center;
}

.comment-menu-btn:focus-visible {
    outline: 2px solid #9bbdd6;
    outline-offset: 2px;
}

.comment-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 5px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.comment-menu.open .comment-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.comment-menu.open {
    z-index: 10;
}

.comment-form-btn {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    position: relative;
}

/* .search-btn{
    border: none;
    background: transparent;
    font-size: 1.1rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* =========================
   CATEGORIES MODAL
========================= */
.categories-modal-root {
    position: fixed;
    inset: 0;
    z-index: 1700;
    pointer-events: none;
}

.categories-modal-root:not(.hidden) {
    pointer-events: auto;
}

/* Blurred scrim — click outside still closes */
.categories-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="dark"] .categories-modal-backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.categories-modal-dialog {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    transform: translateX(-50%);
    z-index: 1;
    width: min(100% - 1.5rem, 75rem);
    max-height: min(calc(100vh - 3rem), 42rem);
    display: flex;
    flex-direction: column;
    background: var(--card-bg, var(--bg-default));
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .categories-modal-dialog {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.categories-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-default);
}

.categories-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-default);
}

.categories-modal-close {
    flex-shrink: 0;
    margin: 0;
    padding: 0.125rem 0.35rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.categories-modal-close:hover {
    color: var(--text-default);
}

.categories-modal-close:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.categories-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.categories-modal-all-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
}

@media (min-width: 480px) {
    .categories-modal-all-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .categories-modal-all-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Extra category chips: smooth expand/collapse (categoriesModalChipsMoreBtn) */
.categories-modal-extras {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.42s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.32s ease;
}

.categories-modal-extras.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}

.categories-modal-extras-clip {
    overflow: hidden;
    min-height: 0;
}

.categories-modal-extras-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
    padding-top: 0.35rem;
}

@media (min-width: 480px) {
    .categories-modal-extras-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .categories-modal-extras-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .categories-modal-extras {
        transition: none;
    }
}

/* Small category links — same visual as item-category-badge on cards */
a.categories-modal-chip-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 0.72rem;
}

a.categories-modal-chip-link:hover {
    filter: brightness(0.95);
}

html[data-theme="dark"] a.categories-modal-chip-link:hover {
    filter: brightness(1.08);
}

.categories-modal-expand-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    /* margin-top: 0.5rem; */
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.categories-modal-expand-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-default);
    border-color: var(--border-strong);
}

.categories-modal-expand-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.categories-modal-subtitle {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-default);
}

.categories-modal-popular-hint {
    margin: 0;
}

.categories-modal-popular-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .categories-modal-popular-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .categories-modal-popular-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.categories-modal-posts-count {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Categories modal: compact media column; same hover as In trend (lift + image zoom) */
.categories-modal-trending-card .trending-card__img-wrap {
    min-height: 96px;
}

.categories-modal-card-link {
    color: inherit;
    cursor: pointer;
    min-height: 150px;
}

.categories-modal-card__media {
    position: relative;
    min-height: 96px;
    height: 100%;
    background: var(--bg-muted);
    overflow: hidden;
}

.categories-modal-card__media .trending-card__img {
    min-height: 96px;
}

/* Rising-style placeholder: gradient + centered gray circle (same idea as trending_list) */
.categories-modal-card__media-empty {
    width: 100%;
    height: 100%;
    min-height: 96px;
    background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-subtle) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-modal-card__media-empty::after {
    content: "";
    width: 48px;
    height: 48px;
    background: #b4d7f9;
    border-radius: 50%;
    opacity: 0.6;
    flex-shrink: 0;
}

html[data-theme="dark"] .categories-modal-card__media-empty {
    background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-subtle) 100%);
}

html[data-theme="dark"] .categories-modal-card__media-empty::after {
    background: rgba(255, 255, 255, 0.12);
    opacity: 0.75;
}

.categories-modal-card-link:hover .trending-card__title {
    color: var(--text-link) !important;
}

/* Title clamp in narrow columns (size comes from h6 / trending-card__title) */
.categories-modal-popular .trending-card .trending-card__title {
    display: -webkit-box;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.categories-modal-empty {
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
}

/*
 * Topics index — local live search (disabled; keep when restoring topics_filter.js + search markup)
 *
.topics-local-search-wrap {
    max-width: 30rem;
}

.topics-local-search-inner {
    width: 100%;
}

.topics-local-search-input {
    width: 100%;
    height: 56px;
    padding: 12px 20px 12px 48px;
    border-radius: 8px;
    font-size: 0.925rem;
    border: 1px solid var(--border-default);
    color: var(--text-primary) !important;
    background: var(--bg-default);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topics-local-search-input:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px rgba(101, 40, 224, 0.12);
    outline: none;
}

html[data-theme="dark"] .topics-local-search-input:focus {
    box-shadow: 0 0 0 3px rgba(138, 99, 245, 0.18);
}

.topics-local-search-sign {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    color: var(--text-primary);
    font-size: 1.05rem;
    pointer-events: none;
    opacity: 0.85;
}
*/

/* Topic tiles (Topics index) — Hot Now visual language */
.trending-card--topic {
    border: 1px solid var(--border-default);
    background: var(--bg-default);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.trending-card--topic:hover {
    box-shadow: var(--card-shadow-lg);
    transform: translateY(-2px);
}

html[data-theme="dark"] .trending-card--topic {
    border-color: var(--border-strong);
    box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .trending-card--topic:hover {
    box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.45);
}

.topic-tile--in-trend {
    box-shadow: 0 2px 12px rgba(238, 90, 90, 0.15);
    border-color: rgba(238, 90, 90, 0.18);
}

.topic-tile--in-trend:hover {
    box-shadow: 0 4px 18px rgba(238, 90, 90, 0.22);
}

html[data-theme="dark"] .topic-tile--in-trend {
    box-shadow: 0 2px 12px rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.15);
}

html[data-theme="dark"] .topic-tile--in-trend:hover {
    box-shadow: 0 4px 18px rgba(255, 107, 107, 0.2);
}

/* Profile created tiles: title row + meta spans; gap replaces margins (badges: global .trending-badge only) */
.profile-created-post-tile__body {
    gap: 0;
}

.profile-created-post-tile__head {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.profile-created-post-tile__head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(-1 * var(--bs-card-spacer-x, 1rem));
    right: calc(-1 * var(--bs-card-spacer-x, 1rem));
    height: 1px;
    background: var(--border-default, #e6e6e6);
}

.profile-created-post-tile__meta {
    gap: 10px;
    font-size: 0.8rem; /* ~0.7–0.8rem band */
    line-height: 1.35;
}

.profile-created-post-tile__line {
    display: block;
    min-width: 0;
}

.profile-created-post-tile__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
}

/* Topic hub AJAX feed — match Liked/Marked card transition */
.filter-cards-fade-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.filter-cards-fade-in {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.topic-sort-bar .topic-sort-btn.filter-reason-btn {
    cursor: pointer;
}

/* Back control — styled like thread-back-btn */
.btn-back-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-default);
    background: var(--bg-subtle);
    padding: .4rem .7rem;
    margin: 0;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-default) !important;
    border-radius: var(--btn-radius, 8px);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    font-size: .875rem;
    font-weight: 600;
}

.btn-back-link:hover {
    color: var(--text-link) !important;
    border-color: var(--text-link);
    background: var(--bg-muted);
}

.btn-back-link:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.for-you-empty-hint {
    border-radius: 0.375rem;
}

.actor-author-name{
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* ========== Pinned Media Links (detail page) ========== */
.post-media-pinned {
    margin: 1.5rem 0 2rem;
    max-width: 100%;
    overflow: hidden;
}

.post-media-pinned__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.post-media-pinned__link {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-link, #273c75);
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
    transition: color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.post-media-pinned__link:hover {
    color: var(--text-link-hover, #1e3060);
    border-bottom-style: solid;
}

.post-media-pinned__link .fa {
    font-size: 1rem;
    opacity: 0.8;
}

.post-media-pinned__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    background: var(--text-link, #273c75);
    color: #fff;
    border-radius: var(--radius-full, 9999px);
}

/* ========== Video Gallery Overlay ========== */
.video-gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

@media (prefers-reduced-transparency: reduce) {
    .video-gallery-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.video-gallery-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Contained video player — does NOT fill the screen; native fullscreen button does that */
.video-gallery-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(92vw, 820px);
    max-height: 80vh;
    pointer-events: auto;
    touch-action: pan-y pinch-zoom;
    transition: opacity 0.15s ease;
    will-change: opacity;
}

.video-gallery-player-wrap {
    width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-gallery-player {
    border-radius: 8px;
    background: #000;
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.video-gallery-overlay .plyr {
    /* Match pinned photo/video links (--btn-primary is green in dark theme) */
    --plyr-color-main: var(--text-link, #273c75);
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
}

.video-gallery-overlay .plyr__video-wrapper {
    width: 100%;
    max-height: calc(80vh - 46px);
}

.video-gallery-overlay .plyr__video-wrapper video {
    object-fit: contain;
    max-height: calc(80vh - 46px);
}

.video-gallery-overlay .plyr__menu {
    z-index: 10;
}

.video-gallery-overlay .plyr__menu__container {
    background: rgba(28, 28, 28, 0.95);
    border-radius: 6px;
    color: #fff;
    max-height: 60vh;
    overflow-y: auto;
}

.video-gallery-overlay .plyr__menu__container [role="menu"] label,
.video-gallery-overlay .plyr__menu__container [role="menu"] span {
    color: #fff;
}

.video-gallery-overlay .plyr__menu__container [role="menuitemradio"][aria-checked="true"]::before {
    background: var(--text-link, #273c75);
}

/* When Plyr enters fullscreen (native or iOS fallback), fill the screen */
.video-gallery-overlay .plyr--fullscreen-active,
.video-gallery-overlay .plyr--fullscreen-fallback {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #000 !important;
}

.video-gallery-overlay .plyr--fullscreen-active .plyr__video-wrapper,
.video-gallery-overlay .plyr--fullscreen-fallback .plyr__video-wrapper {
    max-height: none;
    height: calc(100vh - 46px);
}

.video-gallery-overlay .plyr--fullscreen-active .plyr__video-wrapper video,
.video-gallery-overlay .plyr--fullscreen-fallback .plyr__video-wrapper video {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile fullscreen: force controls visible when toggled by tap */
.plyr--mobile-fs-controls-visible .plyr__controls {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Hide the gallery close button when video is in fullscreen */
.video-gallery-overlay:has(.plyr--fullscreen-active) .video-gallery-close-btn,
.video-gallery-overlay:has(.plyr--fullscreen-fallback) .video-gallery-close-btn {
    display: none !important;
}

.video-gallery-close {
    display: none;
}

/* Video gallery close button (same style & position as photo gallery) */
.video-gallery-close-btn {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    z-index: 10001;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.video-gallery-close-btn:hover,
.video-gallery-close-btn:focus-visible {
    background: rgba(0, 0, 0, 0.7);
}

.video-gallery-close-btn:focus {
    outline: none;
}

.video-gallery-close-btn__line {
    position: absolute;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.video-gallery-close-btn__line:first-child {
    transform: rotate(45deg);
}

.video-gallery-close-btn__line:last-child {
    transform: rotate(-45deg);
}

/* Video gallery: prev/next — same size & style as close; bottom center on mobile */
.video-gallery-nav {
    position: fixed;
    z-index: 10001;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: auto;
}

.video-gallery-nav[hidden] {
    display: none !important;
}

.video-gallery-nav-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.video-gallery-nav-btn:hover,
.video-gallery-nav-btn:focus-visible {
    background: rgba(0, 0, 0, 0.7);
}

.video-gallery-nav-btn:focus {
    outline: none;
}

.video-gallery-nav-btn[hidden] {
    display: none !important;
}

.video-gallery-nav-icon {
    display: block;
    flex-shrink: 0;
}

.video-gallery-overlay:has(.plyr--fullscreen-active) .video-gallery-nav,
.video-gallery-overlay:has(.plyr--fullscreen-fallback) .video-gallery-nav {
    display: none !important;
}

@media (min-width: 768px) {
    .video-gallery-nav {
        display: none !important;
    }
}

.vgzone {
    display: none !important;
    all: unset;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.vgzone--prev { left: 0; }
.vgzone--next { right: 0; }

.vgzone__arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.12s ease;
}

.vgzone:hover .vgzone__arrow {
    color: #fff;
}

.vgcount {
    display: none;
}

.vgtitle {
    display: none;
}


/* ========== Feed Card Pin Icon ========== */
.feed-card-bottom-row {
    flex-wrap: wrap;
    row-gap: 6px;
}

.feed-card-pin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-link, #273c75);
    white-space: nowrap;
}

.feed-card-pin .fa-thumb-tack {
    font-size: 0.82rem;
    opacity: 0.85;
}

.feed-card-pin__labels {
    font-size: 0.72rem;
    font-weight: 500;
}

/* Feed card: circular thumbnails above "photos + videos" (images stacked; video not stacked) */
.item-feed-card__media-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    flex-shrink: 0;
    max-width: min(100%, 140px);
    margin-left: auto;
    text-align: center;
}

.item-feed-card__image-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-height: 32px;
}

.item-feed-card__stack-disc {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--card-bg);
    overflow: hidden;
    margin-left: -14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    position: relative;
    background: var(--bg-muted);
    box-sizing: border-box;
}

.item-feed-card__stack-disc:first-child {
    margin-left: 0;
}

.item-feed-card__stack-disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Slight "book page" tilt — images only (stack is photo-only by design) */
.item-feed-card__image-stack:not(.item-feed-card__image-stack--video-only) .item-feed-card__stack-disc:nth-child(odd) {
    transform: rotate(-3deg);
}

.item-feed-card__image-stack:not(.item-feed-card__image-stack--video-only) .item-feed-card__stack-disc:nth-child(even) {
    transform: rotate(2.5deg);
}

.item-feed-card__image-stack--video-only .item-feed-card__stack-disc {
    margin-left: 0;
}

.item-feed-card__video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-muted);
}

/* ========== Media Upload Row (create/edit) ========== */
.item-media-upload-row {
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.item-media-upload-row__images {
    flex: 1 1 0;
    min-width: 0;
}

.item-media-upload-row__video-btn {
    flex: 0 0 auto;
    width: clamp(50px, 25%, 80px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    font-size: 1.1rem;
    padding: 0.5rem;
}

.item-media-upload-row .item-images-upload--native,
.item-media-upload-row .item-images-upload--native .item-images-file-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ========== Post Size Warning ========== */
.post-size-warning {
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger-fg, #dc3545);
    background: color-mix(in srgb, var(--danger-fg, #dc3545) 10%, var(--bg-default, #fff));
    border: 1px solid color-mix(in srgb, var(--danger-fg, #dc3545) 30%, transparent);
    border-radius: var(--radius, 0.375rem);
}

/* ========== Video Preview Thumbs ========== */
.existing-video {
    position: relative;
    width: 150px;
}

.existing-video__thumb {
    width: 150px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 2rem;
}

.existing-video__thumb small {
    font-size: 0.7rem;
}

/* ========== Horizontal Scroll Filters ========== */
.filter-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.filter-scroll-x::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Pills keep intrinsic width; row scrolls horizontally (narrow viewports) */
.filter-scroll-x .filter-reason-btn,
.filter-scroll-x a.filter-reason-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/*
 * Segment filter (.filter-segment-scroll + filter-scroll-x): rules MUST come after .filter-scroll-x above,
 * which sets white-space: nowrap — that breaks hit-testing on the last chips after horizontal scroll (WebKit/iOS).
 */
.filter-segment-scroll.filter-scroll-x {
    white-space: normal;
    flex-wrap: unset;
    /* pan-x alone can swallow taps on iOS/WebKit inside overflow-x; manipulation keeps pan + reliable clicks */
    touch-action: manipulation;
    overscroll-behavior-x: contain;
    position: relative;
    z-index: 2;
}

.topic-category-chips {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.filter-block--scrollable {
    flex-wrap: nowrap !important;
    overflow: hidden;
    min-width: 0;
}

/* ========== Comment Textareas — Auth-style ========== */
#commentForm textarea.form-control,
.reply-form textarea.form-control,
.edit-comment-form textarea.form-control,
.comment-form-body textarea.form-control {
    font-size: 0.875rem;
    line-height: 1.45;
    padding: 0.85rem;
    border: 1px solid var(--border-default);
    border-radius: var(--btn-radius, 8px);
    resize: none;
    background: var(--bg-default);
    color: var(--text-default);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#commentForm textarea.form-control:focus,
.reply-form textarea.form-control:focus,
.edit-comment-form textarea.form-control:focus,
.comment-form-body textarea.form-control:focus {
    border-color: var(--text-link, #2980b9);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

html[data-theme="dark"] #commentForm textarea.form-control,
html[data-theme="dark"] .reply-form textarea.form-control,
html[data-theme="dark"] .edit-comment-form textarea.form-control,
html[data-theme="dark"] .comment-form-body textarea.form-control {
    background: var(--bg-muted);
    border-color: var(--border-default);
    color: var(--text-default);
}

html[data-theme="dark"] #commentForm textarea.form-control:focus,
html[data-theme="dark"] .reply-form textarea.form-control:focus,
html[data-theme="dark"] .edit-comment-form textarea.form-control:focus,
html[data-theme="dark"] .comment-form-body textarea.form-control:focus {
    border-color: var(--text-link);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

@media (max-width: 767.98px) {
    #commentForm textarea.form-control,
    .reply-form textarea.form-control,
    .edit-comment-form textarea.form-control,
    .comment-form-body textarea.form-control {
        font-size: 16px !important;
        padding: 0.9rem;
    }
}