/* AdultTube extras on top of Cavea vendor CSS — unify light/dark + features */

/*
 * Cavea locks page scroll for guests: html:not([data-auth]){overflow:hidden}
 * We are not Cavea's auth SPA — always allow vertical scroll.
 *
 * IMPORTANT: overflow-x:hidden on body computes overflow-y to auto and makes
 * body a sticky scrollport that is as tall as the document (so sticky never
 * sticks). Use clip on html only; keep body overflow visible so navbar +
 * desktop sidebar stick to the real viewport scrollport.
 */
html,
html:not([data-auth]),
html.censor-on,
html.dark-mode {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
body {
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
}

html:not(.dark-mode) body {
    background: #fff !important;
    color: var(--color-2, #22243e) !important;
    padding: 0 !important;
}

body {
    padding: 0 !important;
    font-family: Roboto, sans-serif !important;
}

/* Sticky top header (desktop + mobile) — beats Bootstrap .sticky-top if needed */
.navbar.sticky-top {
    position: sticky !important;
    top: 0 !important;
    background: #fff;
    z-index: 1020;
}

html.dark-mode .navbar.sticky-top {
    background: var(--dark-bg-color, #121212);
}

html.dark-mode body {
    background: var(--dark-bg-color, #121212) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}

/* Kill Bootstrap link blue — but never paint button text red on hover */
a {
    color: var(--color-2, #22243e);
    text-decoration: none;
}
a:hover {
    color: var(--color-1, #c5172e);
}
a.btn:hover,
a.btn-color-1:hover,
a.btn-color-2:hover,
a.btn-header:hover,
a.btn-tool:hover,
a.btn-primary:hover,
a.btn-ghost:hover,
a.btn-soft:hover,
a.login-button:hover,
a.contact-button:hover,
a.sort-pill:hover,
a.sort-tab:hover,
a.chip:hover {
    /* keep each button's own hover color (override global a:hover) */
    color: inherit;
}
html.dark-mode a {
    color: var(--dark-text-color, #f7f7f7);
}
html.dark-mode a:hover {
    color: var(--color-1, #c5172e);
}
html.dark-mode a.btn:hover,
html.dark-mode a.btn-color-1:hover,
html.dark-mode a.btn-color-2:hover,
html.dark-mode a.btn-header:hover,
html.dark-mode a.btn-tool:hover,
html.dark-mode a.btn-primary:hover,
html.dark-mode a.btn-ghost:hover,
html.dark-mode a.btn-soft:hover,
html.dark-mode a.login-button:hover,
html.dark-mode a.contact-button:hover,
html.dark-mode a.sort-pill:hover,
html.dark-mode a.sort-tab:hover,
html.dark-mode a.chip:hover {
    color: inherit;
}

.header-logo a {
    color: var(--color-2, #22243e) !important;
}
html.dark-mode .header-logo a {
    color: var(--dark-text-color, #f7f7f7) !important;
}

.search-form {
    max-height: 3rem;
    margin-top: 0 !important;
}
@media (max-width: 767.98px) {
    .search-form:not(.is-open) {
        display: none !important;
    }
    .search-form.is-open {
        margin-top: 0.5rem !important;
        max-height: none;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
    }
}

[x-cloak] {
    display: none !important;
}

.spf-loader {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}
.spf-loader.is-active { opacity: 1; }
.spf-loader:not(.is-active) {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.spf-loader .progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-1, #c5172e) !important;
    transition: width 0.2s linear;
}

#age-gate {
    font-family: Roboto, sans-serif;
}

/* Censor */
html.censor-on [data-censor-media] {
    background: #141418 !important;
}
html.censor-on [data-censor-media] img,
html.censor-on [data-censor-media] video,
html.censor-on .sample-player {
    opacity: 0 !important;
    visibility: hidden !important;
}
html.censor-on [data-censor-brand],
html.censor-on [data-censor-adult],
html.censor-on [data-censor-copy] {
    visibility: hidden !important;
    color: transparent !important;
}

/* Video cards */
.videos-card {
    height: 14rem;
    overflow: hidden;
    border-radius: 1rem;
}
.videos-card .card-body {
    padding: 0 !important;
}
.videos-card .card-body > img {
    object-fit: cover;
}
.videos-card .sample-player {
    object-fit: cover;
    height: 100%;
}
.videos-card .sample-player.is-active,
.videos-card .sample-player:not(.d-none) {
    display: block !important;
    width: 105%;
    height: 105%;
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: 2;
    object-fit: cover;
}

.related-video .videos-card,
.related-video .related-thumb {
    height: 6rem !important;
}

.video-info .user-avatar,
.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    background-color: var(--color-3);
    outline: 1px solid var(--color-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-2);
    text-decoration: none;
    flex-shrink: 0;
}
html.dark-mode .user-avatar {
    background-color: var(--dark-color);
    outline-color: var(--dark-border-1);
    color: var(--dark-text-color);
}

.div-dot svg {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.55;
}

.video-duration-badge {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 3;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

/* Player inside Cavea video-inner-area */
.video-page .video-inner-area {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
}
.video-page .video-inner-area .player-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
    color: #fff;
}
@media (min-width: 992px) {
    .video-page .video-inner-area,
    .video-page .video-inner-area .player-shell {
        height: 32rem;
        aspect-ratio: auto;
        min-height: 0;
    }
}
@media (min-width: 1400px) {
    .video-page .video-inner-area,
    .video-page .video-inner-area .player-shell {
        height: 38rem;
    }
}
.video-page .video-inner-area .player-shell > video,
.video-page .video-inner-area .player-shell > div {
    width: 100%;
    height: 100%;
}

/* Action tools — paired like/dislike share one pill cluster */
.btn-group.gap-1 .like-tool:first-child {
    border-radius: 2rem 0.35rem 0.35rem 2rem !important;
}
.btn-group.gap-1 .like-tool:last-child {
    border-radius: 0.35rem 2rem 2rem 0.35rem !important;
}
.desc-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.video-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-2);
}
html.dark-mode .video-title h1 {
    color: var(--dark-text-color);
}

.video-description .new-comment,
.video-comments .new-comment {
    background: var(--color-3);
    border-radius: 1rem;
}
html.dark-mode .video-comments .new-comment {
    background: var(--dark-color) !important;
}

/* Comments — Cavea-like avatar + readable thread */
.video-page .video-comments .comment-image .user-avatar,
.video-page .video-comments .covered.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-1);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
}
.video-page .video-comments .comment-count {
    color: var(--color-2);
    font-size: 1.25rem;
    font-weight: 700;
}
html.dark-mode .video-page .video-comments .comment-count {
    color: var(--dark-text-color);
}
.video-page .video-comments .comment-text {
    color: rgba(var(--color-2-rgb), 0.85);
    white-space: pre-wrap;
    word-break: break-word;
}
html.dark-mode .video-page .video-comments .comment-text {
    color: rgba(247, 247, 247, 0.85);
}
.video-comments .comments-empty {
    margin: 0.75rem 0 1.75rem !important;
    line-height: 1.5;
}
.video-page .related-empty .btn-soft {
    min-height: 2.25rem;
}

/* Remap leftover Tailwind token utilities for light Cavea shell */
html:not(.dark-mode) .text-mute,
html:not(.dark-mode) .text-snow {
    color: rgba(34, 36, 62, 0.85) !important;
}
html:not(.dark-mode) .border-line {
    border-color: #e4e8ed !important;
}
html:not(.dark-mode) .bg-surface,
html:not(.dark-mode) .bg-elevated,
html:not(.dark-mode) .bg-ink {
    background-color: #fff !important;
}
html:not(.dark-mode) .input-field,
html:not(.dark-mode) .input-dark {
    background: #fff;
    border: 1px solid var(--color-7, #e4e8ed);
    border-radius: 2rem;
    color: var(--color-2);
    padding: 0.65rem 1.1rem;
    min-height: 2.75rem;
    width: 100%;
    line-height: 1.25;
    box-shadow: none;
}
html.dark-mode .input-field,
html.dark-mode .input-dark {
    background: var(--dark-color) !important;
    border-color: var(--dark-border-1) !important;
    color: var(--dark-text-color) !important;
}
textarea.input-field {
    border-radius: 1rem !important;
    min-height: 8rem;
    line-height: 1.45;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #fff !important;
    background: var(--color-1) !important;
    border: 1px solid var(--color-1) !important;
    border-radius: 2rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    text-decoration: none;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-7, #e4e8ed);
    background: var(--color-3, #f7f7fc);
    color: var(--color-2);
}

/* Footer / tag cloud — stop oversized “ETİKETLER” look */
.tag-cloud-block {
    margin: 1.25rem 0;
}
.tag-cloud-block__title {
    font-size: 0.8rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(34, 36, 62, 0.55) !important;
    margin-bottom: 0.65rem;
}
html.dark-mode .tag-cloud-block__title {
    color: rgba(247, 247, 247, 0.55) !important;
}
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tag-cloud__item {
    font-size: 0.875rem !important;
    font-weight: 500;
    color: var(--color-1) !important;
}
.tag-cloud__item--sm,
.tag-cloud__item--md,
.tag-cloud__item--lg,
.tag-cloud__item--xl {
    font-size: 0.875rem !important;
}

footer .h6,
footer h2 {
    font-size: 0.8rem !important;
    letter-spacing: 0.06em;
}

/*
 * Mobile sidebar (off-canvas).
 * Always fixed + off-canvas on mobile so translateX can animate (display:none snaps).
 * Must beat Bootstrap utilities on the same node:
 *   .position-relative { position: relative !important }
 *   .overflow-hidden   { overflow: hidden !important }
 *   .d-none            { display: none !important }
 *   .mt-3              { margin-top: 1rem !important }
 * and Cavea .main-sidebar.sm { width: 0 } when desktop collapse is remembered.
 * --at-nav-h is synced from the sticky navbar (Cavea sets height:auto, so 4.25rem drifts).
 */
@media (max-width: 991.98px) {
    .main-sidebar,
    .main-sidebar.sm {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1050;
        width: min(16rem, 85vw) !important;
        max-width: 85vw;
        height: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding-top: var(--at-nav-h, 3.5rem) !important;
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        border: 0;
        background: #fff;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
        pointer-events: none;
        /* Beat Cavea .main-sidebar:not(.sm){ transition: all } so only slide/fade animates */
        transition: transform 0.28s ease, visibility 0.28s !important;
        will-change: transform;
    }
    .main-sidebar.at-mobile-open,
    .main-sidebar.sm.at-mobile-open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        pointer-events: auto;
    }
    html.dark-mode .main-sidebar,
    html.dark-mode .main-sidebar.sm {
        background: var(--dark-bg-color);
    }
    /* Keep header sticky + above dim overlay / drawer / bottom nav */
    .navbar.sticky-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 1060;
    }
    .navbar .header-buttons {
        position: relative;
        z-index: 2;
    }
    .navbar .open-menu,
    .navbar .mobile-search-toggle,
    .navbar .mobile-search-toggle .btn-header {
        position: relative;
        z-index: 2;
        pointer-events: auto;
    }
    /* Scroll lock while drawer open (beats html/body overflow unlock rules) */
    html:has(body.at-sidebar-open),
    body.at-sidebar-open {
        overflow: hidden !important;
    }
    .at-sidebar-backdrop {
        display: block;
        pointer-events: none;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
    }
    .at-sidebar-backdrop.is-on {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
@media (min-width: 992px) {
    .at-sidebar-backdrop {
        display: none !important;
        pointer-events: none !important;
    }
}

/*
 * Desktop sticky sidebar (lg+): stays under sticky navbar while main content scrolls.
 * Higher specificity beats Bootstrap .position-relative / .overflow-hidden / .mt-3
 * on #main-sidebar. Stays in flow so .main-content width + .sm collapse keep working.
 * Shell flex parent must stay overflow:visible (sticky containing block).
 */
@media (min-width: 992px) {
    body > .d-flex.position-relative {
        overflow: visible !important;
    }
    .main-sidebar,
    .main-sidebar.position-relative.overflow-hidden,
    #main-sidebar.main-sidebar {
        position: sticky !important;
        top: var(--at-nav-h, 4.25rem);
        align-self: flex-start !important;
        flex-shrink: 0;
        height: calc(100vh - var(--at-nav-h, 4.25rem)) !important;
        max-height: calc(100vh - var(--at-nav-h, 4.25rem));
        margin-top: 0 !important;
        padding-top: 0.75rem;
        padding-bottom: 1rem;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        z-index: 10;
    }
    .main-sidebar .sidebar-container {
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }
}

/*
 * Live chat widget — compact Cavea-like type.
 * Bootstrap loads after Tailwind (@layer), so unlayered h2/p/btn rules
 * blow up the panel title & body; pin sizes here (last in cascade).
 */
.chat-launcher-wrap {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.chat-launcher {
    border-radius: 999px !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
}

.chat-launcher__icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    flex-shrink: 0;
}

.chat-launcher__icon svg {
    width: 1rem !important;
    height: 1rem !important;
}

.chat-launcher__label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    line-height: 1.2 !important;
}

.chat-panel {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}

.chat-panel header {
    padding: 0.65rem 0.85rem !important;
    gap: 0.65rem !important;
}

.chat-panel header > span:first-child {
    width: 1.85rem !important;
    height: 1.85rem !important;
    font-size: 0.7rem !important;
}

.chat-panel h2,
.chat-panel .chat-panel__title {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.chat-panel header p,
.chat-panel .chat-panel__subtitle {
    margin: 0.1rem 0 0 !important;
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
}

.chat-panel [x-ref="scroller"],
.chat-panel .chat-panel__messages {
    font-size: 0.8125rem !important;
    padding: 0.65rem 0.75rem !important;
}

.chat-panel [x-ref="scroller"] p,
.chat-panel [x-ref="scroller"] div {
    font-size: inherit;
    line-height: 1.4;
}

.chat-panel [x-ref="scroller"] .text-xs,
.chat-panel .chat-panel__typing {
    font-size: 0.75rem !important;
}

.chat-panel .border-t {
    padding: 0.65rem 0.75rem !important;
}

.chat-panel .input-field,
.chat-panel input[type="text"] {
    height: auto !important;
    min-height: 2.15rem;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    border-radius: 999px !important;
}

.chat-panel .btn-primary {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.8125rem !important;
    min-height: 2.15rem;
}

.chat-panel .btn-primary svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
}

.chat-panel a {
    font-size: inherit;
}

html.dark-mode .chat-panel,
html.dark-mode .chat-launcher-wrap {
    font-size: 0.8125rem;
}

html.dark-mode .chat-panel h2,
html.dark-mode .chat-panel .chat-panel__title {
    font-size: 0.8125rem !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}

html.dark-mode .chat-panel header p,
html.dark-mode .chat-panel .chat-panel__subtitle {
    font-size: 0.6875rem !important;
}

/* Public navbar: keep censor control circular (override pill .btn-header) */
.censor-toggle,
button.censor-toggle {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Form controls stay Cavea-height inside cards */
.card .form-control:not(textarea):not(input[type=file]) {
    height: 3rem;
    border-radius: 1rem !important;
}
.card {
    border-radius: 1rem;
}
.card:not(.videos-card) .card-body {
    padding: 1.5rem;
}
.card .btn-color-1.w-100 {
    min-height: 3rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-2);
    margin: 0;
    line-height: 1.25;
}
html.dark-mode .page-title {
    color: var(--dark-text-color);
}

/* Category detail — tight header (no Bootstrap p-margin bloat) */
.category-crumb {
    margin: 0 0 0.5rem;
}
.category-crumb a {
    color: inherit;
    text-decoration: none;
}
.category-crumb a:hover {
    color: var(--color-1);
}
.category-crumb [aria-current="page"] {
    color: var(--color-2);
    font-weight: 500;
}
html.dark-mode .category-crumb [aria-current="page"] {
    color: var(--dark-text-color);
}
.category-hero {
    margin: 0 0 0.85rem;
    padding: 0 0 0.85rem;
    border-bottom: 1px solid var(--color-7, #e4e8ed);
}
html.dark-mode .category-hero {
    border-bottom-color: var(--dark-border-1);
}
.category-hero .page-title {
    margin: 0;
}
.category-meta {
    font-size: 0.875rem;
    color: rgba(var(--color-2-rgb), 0.65);
    line-height: 1.3;
}
html.dark-mode .category-meta {
    color: rgba(247, 247, 247, 0.65);
}
.category-lead {
    margin: 0.4rem 0 0 !important;
    max-width: 42rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(var(--color-2-rgb), 0.7);
}
html.dark-mode .category-lead {
    color: rgba(247, 247, 247, 0.7);
}
.category-toolbar {
    margin: 0 0 1rem;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 576px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: var(--color-3);
    border: 1px solid transparent;
    min-height: 5.5rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cat-card:hover {
    border-color: rgba(var(--color-1-rgb), 0.35);
}
html.dark-mode .cat-card {
    background: var(--dark-color);
}
.cat-card-name {
    font-weight: 600;
    color: var(--color-2);
}
html.dark-mode .cat-card-name {
    color: var(--dark-text-color);
}

.empty-box {
    border: 1px dashed var(--color-7, #e4e8ed);
    border-radius: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

/* VIP empty state — clear space under header border-b (Tailwind mt-* loses to Bootstrap) */
.vip-empty {
    margin: 2.5rem 0 1.75rem;
    line-height: 1.5;
}

/* ========== Audit fixes (2026-11-08) ========== */

/* 1) Navbar separation from content */
.navbar.sticky-top {
    border-bottom: 1px solid var(--color-7, #e4e8ed) !important;
}
html.dark-mode .navbar.sticky-top {
    border-bottom-color: var(--dark-border-1) !important;
}

/* 2) Search vertically centered in navbar */
@media (min-width: 768px) {
    .navbar .search-form {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 0 !important;
    }
}

/* 3) Soft text pills — NEVER reuse Cavea .btn-header (that one is circular icon-only) */
.sort-tabs,
.sort-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.sort-pill,
.sort-tab,
.btn-soft {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    height: auto !important;
    width: auto !important;
    padding: 0.35rem 1rem !important;
    border-radius: 2rem !important;
    border: 1px solid var(--color-3, #f7f7fc) !important;
    background: var(--color-3, #f7f7fc) !important;
    color: var(--color-2, #22243e) !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sort-pill:hover,
.sort-tab:hover,
.btn-soft:hover,
a.btn-soft:hover {
    background: var(--color-7, #e4e8ed) !important;
    border-color: var(--color-7, #e4e8ed) !important;
    color: var(--color-2, #22243e) !important;
}
.sort-pill.is-active,
a.sort-pill.is-active,
.sort-tab.is-active,
a.sort-tab.is-active,
.sort-pill.is-active:hover,
a.sort-pill.is-active:hover,
.sort-tab.is-active:hover,
a.sort-tab.is-active:hover {
    background: var(--color-1, #c5172e) !important;
    border-color: var(--color-1, #c5172e) !important;
    color: #fff !important;
}
html.dark-mode .sort-pill,
html.dark-mode .sort-tab,
html.dark-mode .btn-soft {
    background: var(--dark-color) !important;
    border-color: var(--dark-color) !important;
    color: var(--dark-text-color) !important;
}
html.dark-mode .sort-pill.is-active,
html.dark-mode .sort-tab.is-active,
html.dark-mode .sort-pill.is-active:hover,
html.dark-mode .sort-tab.is-active:hover {
    background: var(--color-1) !important;
    border-color: var(--color-1) !important;
    color: #fff !important;
}

/* Cavea icon buttons stay circular */
.btn-header,
.navbar .header-buttons .btn-header,
.navbar .color-mode {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--color-3, #f7f7fc) !important;
    background: var(--color-3, #f7f7fc) !important;
    color: var(--color-2, #22243e) !important;
    line-height: 0 !important;
}
/* Theme toggle must stay visible + tappable on mobile header */
.navbar .header-buttons .color-mode {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
.btn-header:hover,
.navbar .color-mode:hover {
    background: var(--color-7, #e4e8ed) !important;
    border-color: var(--color-7, #e4e8ed) !important;
    color: var(--color-2, #22243e) !important;
}
html.dark-mode .btn-header,
html.dark-mode .navbar .color-mode {
    background: var(--dark-color) !important;
    border-color: var(--dark-color) !important;
    color: var(--dark-text-color) !important;
}

/* Red / primary buttons */
.btn-color-1,
a.btn-color-1,
.btn-primary,
a.btn-primary,
.login-button.btn-color-1,
.contact-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem;
    min-height: 2.75rem;
    height: auto !important;
    padding: 0.5rem 1.15rem !important;
    border-radius: 2rem !important;
    color: #fff !important;
    background: var(--color-1, #c5172e) !important;
    border: 1px solid var(--color-1, #c5172e) !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
}
.btn-color-1.w-100,
.btn-primary.w-100,
button.btn-color-1.w-100 {
    width: 100% !important;
}
.btn-color-1.btn-sm,
.btn-primary.btn-sm,
a.btn-color-1.btn-sm,
a.btn-primary.btn-sm {
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem !important;
    font-size: 0.875rem;
}
.btn-color-1:hover,
a.btn-color-1:hover,
.btn-primary:hover,
a.btn-primary:hover,
.login-button:hover,
.contact-button:hover,
.btn-color-1:focus,
.btn-color-1:active {
    color: #fff !important;
    background: var(--color-2, #22243e) !important;
    border-color: var(--color-2, #22243e) !important;
}
html.dark-mode .btn-color-1:hover,
html.dark-mode a.btn-color-1:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode a.btn-primary:hover,
html.dark-mode .login-button:hover,
html.dark-mode .contact-button:hover {
    color: #fff !important;
    background: var(--dark-color, #232323) !important;
    border-color: var(--dark-color, #232323) !important;
}

/* Secondary / edit pills */
.btn-color-2,
a.btn-color-2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem;
    min-height: 2.25rem;
    height: auto !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 2rem !important;
    color: var(--color-2, #22243e) !important;
    background: var(--color-3, #f7f7fc) !important;
    border: 1px solid var(--color-3, #f7f7fc) !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
}
.btn-color-2:hover,
a.btn-color-2:hover {
    color: var(--color-2, #22243e) !important;
    background: var(--color-7, #e4e8ed) !important;
    border-color: var(--color-7, #e4e8ed) !important;
}
html.dark-mode .btn-color-2,
html.dark-mode a.btn-color-2 {
    color: var(--dark-text-color) !important;
    background: var(--dark-color) !important;
    border-color: var(--dark-border-1, var(--dark-color)) !important;
}

@media (max-width: 575.98px) {
    /* Cavea: login is icon-circle on xs */
    a.login-button.btn-color-1 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
}

/* Tools / ghost / chips */
.btn-tool,
a.btn-tool {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem;
    min-width: 2.75rem;
    height: 2.75rem !important;
    padding: 0 0.85rem !important;
    border-radius: 2rem !important;
    background: var(--color-3, #f7f7fc) !important;
    border: 1px solid var(--color-3, #f7f7fc) !important;
    color: var(--color-2, #22243e) !important;
    line-height: 1;
    box-shadow: none !important;
}
.btn-tool.like-tool {
    line-height: 1.2;
}
.btn-tool:hover,
a.btn-tool:hover {
    color: var(--color-2, #22243e) !important;
    background: var(--color-7, #e4e8ed) !important;
    border-color: var(--color-7, #e4e8ed) !important;
}
html.dark-mode .btn-tool,
html.dark-mode a.btn-tool {
    background: var(--dark-color, #232323) !important;
    border-color: var(--dark-border-1, rgba(242, 243, 249, 0.1)) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .btn-tool:hover,
html.dark-mode a.btn-tool:hover {
    color: #fff !important;
    background: #2c2c2c !important;
    border-color: var(--dark-border-2, rgba(242, 243, 249, 0.25)) !important;
}
html.dark-mode .btn-tool svg,
html.dark-mode a.btn-tool svg {
    stroke: currentColor;
    color: inherit;
}
.btn-tool.is-active,
a.btn-tool.is-active,
.btn-tool.is-active:hover,
a.btn-tool.is-active:hover {
    color: var(--color-1, #c5172e) !important;
    border-color: rgba(var(--color-1-rgb), 0.35) !important;
}
/* Like/dislike/favorite: outline idle → solid Tabler filled icon when active */
.video-like .icon-react-filled,
.video-unlike .icon-react-filled,
.favorite-video .icon-react-filled {
    display: none;
}
.video-like.is-active .icon-react-outline,
.video-unlike.is-active .icon-react-outline,
.favorite-video.is-active .icon-react-outline {
    display: none;
}
.video-like.is-active .icon-react-filled,
.video-unlike.is-active .icon-react-filled,
.favorite-video.is-active .icon-react-filled {
    display: inline;
    stroke: none;
}

/* Share menu — compact Cavea-like tool popover */
.share-wrap {
    position: relative;
    display: inline-flex;
}
.share-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 40;
    min-width: 11.5rem;
    padding: 0.35rem;
    border-radius: 0.85rem;
    border: 1px solid var(--color-7, #e4e8ed);
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
html.dark-mode .share-menu {
    background: var(--dark-color, #232323);
    border-color: var(--dark-border-1, rgba(242, 243, 249, 0.12));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.share-menu__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--color-2, #22243e);
    border-radius: 0.6rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.share-menu__item:hover,
.share-menu__item:focus-visible {
    background: var(--color-3, #f7f7fc);
    outline: none;
}
html.dark-mode .share-menu__item {
    color: var(--dark-text-color, #f7f7f7);
}
html.dark-mode .share-menu__item:hover,
html.dark-mode .share-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}
.share-menu__icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}
.share-menu-enter {
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.share-menu-enter-start,
.share-menu-leave-end {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}
.share-menu-enter-end,
.share-menu-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.share-menu-leave {
    transition: opacity 0.1s ease, transform 0.1s ease;
}

/* YouTube-like toast — dark bar, bottom-center, both themes */
.toast-stack {
    position: fixed !important;
    inset: auto 0 1.5rem 0 !important;
    top: auto !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.45rem !important;
    padding: 0 0.75rem !important;
    pointer-events: none !important;
}
.toast-item {
    pointer-events: auto !important;
    width: auto !important;
    max-width: min(92vw, 28rem) !important;
    margin: 0 !important;
    padding: 0.7rem 1rem !important;
    border-radius: 0.5rem !important;
    border: 0 !important;
    background: #212121 !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: none !important;
    cursor: pointer;
}
.toast-item__text {
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
    color: inherit !important;
    text-align: center;
}
.toast-ok {
    background: #212121 !important;
    color: #fff !important;
}
.toast-err {
    background: #212121 !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #ff4e45, 0 6px 24px rgba(0, 0, 0, 0.28) !important;
}
html.dark-mode .toast-item,
html.dark-mode .toast-ok,
html.dark-mode .toast-err {
    background: #212121 !important;
    color: #fff !important;
    border: 0 !important;
}
.toast-anim {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast-anim-in-start,
.toast-anim-out-end {
    opacity: 0;
    transform: translateY(12px);
}
.toast-anim-in-end,
.toast-anim-out-start {
    opacity: 1;
    transform: translateY(0);
}
.btn-ghost,
a.btn-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-7, #e4e8ed);
    background: var(--color-3, #f7f7fc);
    color: var(--color-2, #22243e) !important;
    text-decoration: none !important;
}
.btn-ghost:hover,
a.btn-ghost:hover {
    color: var(--color-2, #22243e) !important;
    background: var(--color-7, #e4e8ed) !important;
    border-color: var(--color-7, #e4e8ed) !important;
}
html.dark-mode .btn-ghost,
html.dark-mode a.btn-ghost {
    background: var(--dark-color) !important;
    border-color: var(--dark-border-1, var(--dark-color)) !important;
    color: var(--dark-text-color) !important;
}
html.dark-mode .btn-ghost:hover,
html.dark-mode a.btn-ghost:hover {
    color: var(--dark-text-color) !important;
    background: var(--dark-bg-color, #121212) !important;
    border-color: var(--dark-border-2, var(--dark-border-1)) !important;
}
.chip,
a.chip {
    /* inline-block (not flex) so "#"+span don't get an innerText newline */
    display: inline-block !important;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    background: var(--color-3, #f7f7fc);
    border: 1px solid transparent;
    color: var(--color-2, #22243e) !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}
.chip [data-censor-text],
a.chip [data-censor-text] {
    display: inline !important;
}
.chip:hover,
a.chip:hover {
    color: var(--color-1, #c5172e) !important;
    border-color: rgba(var(--color-1-rgb), 0.35) !important;
}
html.dark-mode .chip,
html.dark-mode a.chip {
    background: var(--dark-color) !important;
    color: var(--dark-text-color) !important;
}

/* Player overlay CTAs */
.player-shell .btn,
.player-shell a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4) Hide zero-size mobile search ghost on desktop */
@media (min-width: 768px) {
    .mobile-search-toggle {
        display: none !important;
    }
}

/* 5) Sidebar nav rhythm — Cavea puts .active on .nav-item, not .nav-link */
.sidebar-container .nav-link,
.sidebar-container .nav-link:focus,
.sidebar-container a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0;
    min-height: 2.75rem;
    color: var(--color-2, #22243e) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.sidebar-container .nav-link:hover,
.sidebar-container a.nav-link:hover,
.sidebar-container .nav-item:not(.active) .nav-link:hover .sidebar-text,
.sidebar-container .nav-item:not(.active) .nav-link:hover .sidebar-icon,
.sidebar-container .nav-item:not(.active) .nav-link:hover svg {
    color: var(--color-1, #c5172e) !important;
    background: transparent !important;
}
.sidebar-container .nav-item.active .nav-link,
.sidebar-container .nav-item.active .nav-link:hover,
.sidebar-container .nav-item.active .sidebar-text,
.sidebar-container .nav-item.active .sidebar-icon,
.sidebar-container .nav-item.active svg,
.sidebar-container .nav-link.active,
.sidebar-container .nav-link.active:hover,
.sidebar-container a.nav-link.active {
    color: var(--color-1, #c5172e) !important;
}
html.dark-mode .sidebar-container .nav-link,
html.dark-mode .sidebar-container a.nav-link {
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .sidebar-container .nav-link:hover,
html.dark-mode .sidebar-container .nav-item.active .nav-link,
html.dark-mode .sidebar-container .nav-item.active .sidebar-text,
html.dark-mode .sidebar-container .nav-item.active svg,
html.dark-mode .sidebar-container .nav-link.active,
html.dark-mode .sidebar-container .nav-link.active:hover {
    color: var(--color-1, #c5172e) !important;
}
.sidebar-container .nav-link svg,
.sidebar-container .nav-link .sidebar-icon svg {
    stroke: currentColor;
}
.sidebar-container .sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    flex-shrink: 0;
}
.sidebar-container .sidebar-icon svg,
.sidebar-container .sidebar-icon .icon-md {
    width: 1.35rem;
    height: 1.35rem;
}
.sidebar-contact .contact-button {
    width: 100%;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 1rem !important;
    border-radius: 2rem !important;
    gap: 0.5rem !important;
    line-height: 1 !important;
}
.sidebar-contact .contact-button svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    flex-shrink: 0;
    display: block;
}
.sidebar-contact .contact-button span {
    display: inline-flex !important;
    align-items: center;
    line-height: 1 !important;
    margin: 0 !important;
}
.sidebar-copyright {
    color: rgba(34, 36, 62, 0.55);
    font-size: 0.8rem;
}
html.dark-mode .sidebar-copyright {
    color: rgba(247, 247, 247, 0.55);
}

/* 6) Stick footer on short pages (login etc.) — never clip page scroll */
body > .d-flex.position-relative {
    min-height: calc(100vh - 4.25rem);
    height: auto !important;
    overflow: visible !important;
}
.main-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    /* Beat Cavea .main-content{height:calc(100vh - …)} so page scroll + sticky sidebar work */
    height: auto !important;
    min-height: calc(100vh - var(--at-nav-h, 4.25rem));
    overflow: visible !important;
}
#main-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}
#content {
    flex: 1 1 auto;
}
.site-footer {
    /* #content already flex-grows on short pages; keep a real gap above the border-top “hr” */
    margin-top: 2.5rem !important;
    padding-top: 1.5rem !important;
}

/* 7) Form contrast on white cards */
.card .form-control,
.form-control {
    border-color: var(--color-7, #e4e8ed) !important;
    background: #fff !important;
}
.card .form-control:focus,
.form-control:focus {
    border-color: rgba(var(--color-1-rgb), 0.75) !important;
    box-shadow: none !important;
}
html.dark-mode .form-control {
    background: var(--dark-color) !important;
    border-color: var(--dark-border-1) !important;
    color: var(--dark-text-color) !important;
}
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    border-color: var(--color-7, #e4e8ed);
}
.form-check-label {
    margin-left: 0.15rem;
}

/* 8) Video tool icon size */
.btn-tool svg,
.btn-tool .icon-md {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.btn-group.gap-1 {
    display: inline-flex;
    gap: 0.15rem;
}
.btn-group.gap-1 > .btn {
    margin: 0;
}
.video-like .like-count {
    font-size: 0.875rem;
    font-weight: 600;
}

/* 9) Related empty state — never use inline light bg (breaks dark mode) */
.related-empty {
    background: var(--color-3, #f7f7fc) !important;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    color: var(--color-2, #22243e);
}
.related-empty__title {
    color: var(--color-2, #22243e);
}
.related-empty__hint {
    color: rgba(var(--color-2-rgb), 0.65) !important;
}
.related-empty .d-flex {
    justify-content: flex-start;
}
html.dark-mode .related-empty {
    background: var(--dark-color, #232323) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
    border: 1px solid var(--dark-border-1, rgba(242, 243, 249, 0.1));
}
html.dark-mode .related-empty__title {
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .related-empty__hint {
    color: rgba(247, 247, 247, 0.72) !important;
}
/* Soft CTA must not blend into the same surface as the empty box */
html.dark-mode .related-empty .btn-soft,
html.dark-mode .related-empty a.btn-soft {
    background: var(--dark-bg-color, #121212) !important;
    border-color: var(--dark-border-2, rgba(242, 243, 249, 0.25)) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .related-empty .btn-soft:hover,
html.dark-mode .related-empty a.btn-soft:hover {
    background: #2c2c2c !important;
    border-color: var(--dark-border-2, rgba(242, 243, 249, 0.35)) !important;
    color: #fff !important;
}

/* Guest/VIP gate — keep CTAs readable when admin censor hides media */
.player-shell .player-gate {
    z-index: 2;
    color: #fff;
}
.player-shell .player-gate .btn,
.player-shell .player-gate a.btn {
    min-height: 2.75rem;
    height: 2.75rem !important;
    padding: 0 1.15rem !important;
    border-radius: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.player-shell .player-gate__ghost {
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.player-shell .player-gate__ghost:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
html.censor-on .player-shell .player-gate,
html.censor-on .player-shell .player-gate * {
    visibility: visible !important;
}
html.censor-on .player-shell .player-gate {
    color: #fff !important;
}

/* Card meta under thumbnail */
.video-container .video-title {
    color: var(--color-2, #22243e);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 0.25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
html.dark-mode .video-container .video-title {
    color: var(--dark-text-color);
}
.video-container .video-info {
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
}
.video-container .video-author,
.video-container .video-views,
.video-container .video-date {
    color: rgba(var(--color-2-rgb), 0.7);
    font-size: 0.875rem;
}
html.dark-mode .video-container .video-author,
html.dark-mode .video-container .video-views,
html.dark-mode .video-container .video-date {
    color: rgba(247, 247, 247, 0.7);
}

/* Description meta row — dots shouldn't blow up layout */
.video-description-top {
    gap: 0.35rem !important;
}
.video-description-top .div-dot {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}
.video-description-top .div-dot svg {
    width: 0.55rem !important;
    height: 0.55rem !important;
}

/* 10) Row title / h1 balance */
.row-title h1 {
    font-size: 1.35rem !important;
    font-weight: 700;
    color: var(--color-2);
}
html.dark-mode .row-title h1 {
    color: var(--dark-text-color);
}

/* 11) Video author under card */
.video-author {
    color: rgba(var(--color-2-rgb), 0.85);
    font-size: 0.875rem;
}
html.dark-mode .video-author {
    color: rgba(247, 247, 247, 0.75);
}

/* 12) Player guest overlay buttons */
.player-shell .btn-color-1 {
    white-space: nowrap;
}
.player-shell a.btn {
    white-space: nowrap;
}

/* 13) Footer wrap safety */
.site-footer nav {
    max-width: 100%;
}
.site-footer a {
    white-space: nowrap;
}

/* 14) Card title clamp safety */
.video-title {
    word-break: break-word;
}

/* 15) Reduce main-content excess pad on small screens */
@media (max-width: 575.98px) {
    .main-content.p-4 {
        padding: 1rem !important;
    }
}

/* 16) Mobile bottom navbar */
.mobile-nav {
    display: none;
}
@media (max-width: 991.98px) {
    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1045;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        min-height: 3.6rem;
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--color-7, #e4e8ed);
        box-shadow: 0 -6px 20px rgba(34, 36, 62, 0.06);
    }
    html.dark-mode .mobile-nav {
        background: var(--dark-bg-color, #121212);
        border-top-color: var(--dark-border-1);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
    }
    .mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-width: 0;
        padding: 0.2rem 0.1rem;
        color: rgba(var(--color-2-rgb), 0.72) !important;
        text-decoration: none !important;
        font-size: 0.6rem;
        font-weight: 500;
        line-height: 1.05;
        letter-spacing: -0.01em;
        border-radius: 0.75rem;
        transition: color 0.15s ease, background 0.15s ease;
    }
    html.dark-mode .mobile-nav__item {
        color: rgba(247, 247, 247, 0.7) !important;
    }
    .mobile-nav__item svg {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        stroke: currentColor;
    }
    .mobile-nav__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-nav__item:hover,
    .mobile-nav__item:focus-visible {
        color: var(--color-1, #c5172e) !important;
        background: rgba(var(--color-1-rgb), 0.06);
    }
    .mobile-nav__item.is-active {
        color: var(--color-1, #c5172e) !important;
        font-weight: 600;
    }
    /* Room for bottom nav — must beat html:not(.dark-mode) body { padding:0 !important } */
    html:not(.dark-mode) body,
    html.dark-mode body,
    html body {
        padding-bottom: 4.5rem !important;
    }
    .chat-launcher-wrap {
        bottom: 4.85rem !important;
    }
    .toast-stack {
        bottom: 5.25rem !important;
    }
}

/* ========== Dark / light contrast polish ========== */
.video-subscribers {
    color: rgba(var(--color-2-rgb), 0.65);
    font-size: 0.875rem;
}
html.dark-mode .video-subscribers {
    color: rgba(247, 247, 247, 0.65) !important;
}
.video-user {
    color: var(--color-2, #22243e);
    font-weight: 600;
}
html.dark-mode .video-user {
    color: var(--dark-text-color, #f7f7f7) !important;
}

html.dark-mode .card:not(.videos-card),
html.dark-mode .card:not(.videos-card) .card-body {
    background: var(--dark-color, #232323) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .card .form-label,
html.dark-mode .card .form-check-label,
html.dark-mode .card .h4,
html.dark-mode .card h1,
html.dark-mode .card h2,
html.dark-mode .card h3,
html.dark-mode .card p,
html.dark-mode .card a:not(.btn):not(.btn-color-1):not(.login-button) {
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .text-muted,
html.dark-mode .text-mute,
html.dark-mode .small.text-muted {
    color: rgba(247, 247, 247, 0.65) !important;
}
html.dark-mode .empty-box {
    border-color: var(--dark-border-1) !important;
    color: var(--dark-text-color) !important;
}
html.dark-mode .video-description {
    background: var(--dark-color, #232323) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .video-description .video-category,
html.dark-mode .video-description .video-views,
html.dark-mode .video-description .video-date,
html.dark-mode .video-description p {
    color: rgba(247, 247, 247, 0.85) !important;
}
html.dark-mode .div-dot,
html.dark-mode .div-dot svg {
    color: rgba(247, 247, 247, 0.45) !important;
    fill: currentColor;
}
html.dark-mode .border-line,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-dashed {
    border-color: var(--dark-border-1) !important;
}
html.dark-mode .rounded-xl.border,
html.dark-mode [class*="border-dashed"] {
    border-color: var(--dark-border-1) !important;
    color: var(--dark-text-color, #f7f7f7);
}
html.dark-mode .site-footer,
html.dark-mode .site-footer a {
    color: rgba(247, 247, 247, 0.75) !important;
}
html.dark-mode .site-footer a:hover {
    color: var(--color-1, #c5172e) !important;
}
/* Soft pills stay readable on dark surfaces */
html.dark-mode .btn-soft,
html.dark-mode a.btn-soft {
    background: var(--dark-color, #232323) !important;
    border-color: var(--dark-border-1, rgba(242, 243, 249, 0.1)) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .btn-soft:hover,
html.dark-mode a.btn-soft:hover {
    background: var(--dark-bg-color, #121212) !important;
    border-color: var(--dark-border-2, rgba(242, 243, 249, 0.25)) !important;
    color: #fff !important;
}
html.dark-mode .chip,
html.dark-mode a.chip {
    background: var(--dark-color, #232323) !important;
    border-color: var(--dark-border-1, rgba(242, 243, 249, 0.1)) !important;
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .header-logo a {
    color: var(--dark-text-color, #f7f7f7) !important;
}
html.dark-mode .sort-pill:not(.is-active):hover,
html.dark-mode .sort-tab:not(.is-active):hover {
    background: var(--dark-bg-color, #121212) !important;
    border-color: var(--dark-border-1) !important;
    color: var(--dark-text-color) !important;
}