/*
 Theme Name:   找到AI 子主题
 Template:     ripro-v5
 Description:  找到AI 子主题 — 白天 Claude 暖色调（羊皮纸、赤陶色）/ 黑夜 Binance 风格（深黑画布、币安黄）
 Version:      1.1.0
 Author:       找到AI
 Text Domain:  ripro-child
*/


/* ================================================================
   0. GLOBAL RESETS & BODY
   ================================================================ */

body,
body.binance-design {
    background-color: var(--bn-canvas-light) !important;
    color: var(--bn-ink);
    font-family: var(--bn-font-body);
    line-height: var(--bn-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.binance-design {
    background-color: var(--bn-canvas-dark) !important;
    color: var(--bn-on-dark);
}

.bn-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 250, 250, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.bn-page-leaving .bn-page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bn-page-loader__panel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(240, 185, 11, 0.32);
    border-radius: 999px;
    background: rgba(11, 14, 17, 0.92);
    color: #fcd535;
    box-shadow: 0 18px 48px rgba(11, 14, 17, 0.18);
}

.bn-page-loader__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #fcd535;
    box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.48);
    animation: bnPageLoaderPulse 0.9s ease-in-out infinite;
}

.bn-page-loader__text {
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .bn-page-loader {
    background: rgba(11, 14, 17, 0.72);
}

@keyframes bnPageLoaderPulse {
    0%, 100% {
        transform: scale(0.86);
        box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.42);
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(252, 213, 53, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-page-loader {
        transition: none;
    }

    .bn-page-loader__dot {
        animation: none;
    }
}

::selection {
    background-color: rgba(var(--bn-primary-rgb), 0.18);
    color: var(--bn-ink);
}

[data-bs-theme="dark"] ::selection {
    color: var(--bn-on-dark);
}


/* ================================================================
   1. TYPOGRAPHY – Display (Inter), Body (Inter), Numbers (IBM Plex Sans)
   ================================================================ */

h1, h2, h3 {
    font-family: var(--bn-font-display);
    font-weight: 700;
    color: var(--bn-ink);
    letter-spacing: 0;
}

h4, h5, h6 {
    font-family: var(--bn-font-display);
    font-weight: 600;
    color: var(--bn-ink);
    letter-spacing: 0;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: var(--bn-on-dark);
}

h1 { font-size: var(--bn-fs-hero);    line-height: var(--bn-lh-tight); }
h2 { font-size: var(--bn-fs-display-lg);    line-height: var(--bn-lh-snug); }
h3 { font-size: var(--bn-fs-display-md); line-height: var(--bn-lh-heading); }
h4 { font-size: var(--bn-fs-display-sm);    line-height: var(--bn-lh-tight); }
h5 { font-size: var(--bn-fs-title-md); line-height: var(--bn-lh-snug); }
h6 { font-size: var(--bn-fs-title-sm);    line-height: var(--bn-lh-snug); }

p, li, td, th, dd, dt, label, span, div {
    font-family: var(--bn-font-body);
}

code, pre, kbd, samp, .highlight code {
    font-family: var(--bn-font-number);
    font-size: var(--bn-fs-body-sm);
    letter-spacing: -0.32px;
}

a {
    color: var(--bn-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--bn-primary);
    text-decoration: none;
}

[data-bs-theme="dark"] a {
    color: var(--bn-body);
}

[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] a:focus {
    color: var(--bn-primary);
}

.text-muted,
.text-secondary {
    color: var(--bn-muted) !important;
}

small, .small {
    color: var(--bn-muted-strong);
}


/* ================================================================
   2. HEADER & NAVIGATION
   ================================================================ */

/* ── Topbar Announcement Bar ── */
.topbar-announcement {
    position: relative;
    z-index: 1030;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
}

.topbar-announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: 0 48px;
}

a.topbar-announcement__inner:hover {
    text-decoration: none;
    color: inherit;
    opacity: 0.9;
}

a.topbar-announcement__inner:hover .topbar-announcement__cta {
    color: #fff;
    filter: brightness(1.1);
}

.topbar-announcement__icon {
    flex-shrink: 0;
    font-size: 15px;
}

.topbar-announcement__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-announcement__cta {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    transition: filter 0.2s ease;
}

.topbar-announcement__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    line-height: 0;
    z-index: 1;
}

.topbar-announcement__close:hover {
    opacity: 1;
}

/* Push absolute header down when topbar is visible; header-gap needs no extra margin
   because the topbar is in-flow and already occupies its own height above header-gap. */
.has-topbar .site-header {
    top: 40px;
}

.has-topbar .site-header.navbar-sticky {
    top: 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .topbar-announcement {
        height: 36px;
        font-size: 13px;
    }

    .topbar-announcement__inner {
        padding: 0 40px;
        gap: 4px;
    }

    .topbar-announcement__close {
        right: 8px;
    }

    .has-topbar .site-header {
        top: 36px;
    }
}

@media (max-width: 575.98px) {
    .topbar-announcement {
        height: 34px;
        font-size: 12px;
    }

    .topbar-announcement__inner {
        padding: 0 36px;
        gap: 3px;
    }

    .topbar-announcement__icon {
        display: none;
    }

    .has-topbar .site-header {
        top: 34px;
    }
}

/* Match parent theme: absolute top bar + .header-gap pushes main; in-flow relative would double the gap */
.site-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1025;
    background-color: var(--bn-canvas-light) !important;
    border-bottom: 1px solid var(--bn-hairline-on-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-bs-theme="dark"] .site-header {
    background-color: var(--bn-canvas-dark) !important;
    border-bottom-color: var(--bn-hairline-on-dark);
}

.site-header .navbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 14px;
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    background-color: var(--bn-canvas-light);
    transition: background-color 0.3s ease;
}

[data-bs-theme="dark"] .site-header .navbar {
    background-color: var(--bn-canvas-dark);
}

.site-header .navbar .sep {
    flex-shrink: 0;
}

.site-header .navbar .logo-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/*
 * Main menu: do NOT set overflow on this nav/ul (breaks .sub-menu; parent uses position:absolute; z-index:80).
 * Parent .navbar .nav-list has white-space:nowrap — with min-width:0 the flex item shrank below the text,
 * and links painted on top of .actions. min-width:max-content keeps the column at full menu width; if
 * the row is wider than the viewport, the page can scroll horizontally instead of overlapping the CTAs.
 */
.site-header .navbar .main-menu {
    flex: 1 1 auto;
    min-width: max-content;
    padding-right: 14px; /* buffer before .actions; pairs with column-gap on .navbar */
    box-sizing: border-box;
}

.site-header .navbar .main-menu .nav-list {
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
}

/* Compact nav item spacing so more items fit */
.site-header .navbar .nav-list > .menu-item > a {
    margin-left: 6px;
    margin-right: 6px;
}

/* Actions must NOT grow — parent theme sets flex-grow:1 which steals space from the menu */
.site-header .navbar .actions {
    flex-grow: 0 !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 10px;
    background-color: transparent;
    margin-left: auto;
    padding: 0 0 0 4px;
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .site-header .navbar .actions {
    background-color: transparent;
}

/* Guest CTAs: gap replaces ad-hoc margins in .actions */
.site-header .navbar .actions .bn-nav-btn {
    margin: 0;
}

.site-header .navbar .actions .bn-community-wrap {
    margin-left: 0;
}

.site-header .logo-wrapper img.logo {
    max-height: 36px;
    transition: opacity 0.2s ease;
}

.site-header .logo-wrapper .logo.text {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: var(--bn-fs-title-lg);
    color: var(--bn-ink);
}

[data-bs-theme="dark"] .site-header .logo-wrapper .logo.text {
    color: var(--bn-on-dark);
}

/* Header brand lockup: logo image + site title */
.site-header .logo-wrapper > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.site-header .logo-wrapper .bn-brand-lockup {
    display: inline-grid;
    grid-template-columns: 36px auto;
    column-gap: var(--bn-space-xs);
    align-items: center;
}

/* Fixed 36×36 column: wide SVG viewBoxes no longer expand layout past the mark. */
.site-header .logo-wrapper .bn-brand-lockup img.logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    object-position: center;
    justify-self: center;
    align-self: center;
    display: block;
}

.site-header .logo-wrapper .bn-site-title {
    font-family: var(--bn-font-display);
    font-weight: 700;
    line-height: 1;
    min-height: 36px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--bn-ink);
    font-size: var(--bn-fs-title-sm);
    letter-spacing: normal;
}

[data-bs-theme="dark"] .site-header .logo-wrapper .bn-site-title {
    color: var(--bn-on-dark);
}

@media (min-width: 576px) {
    .site-header .logo-wrapper .bn-site-title {
        font-size: var(--bn-fs-title-sm);
    }
}

@media (min-width: 992px) {
    .site-header .logo-wrapper > a {
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header .logo-wrapper .bn-site-title {
        font-size: var(--bn-fs-title-lg);
        line-height: 1;
        min-height: 0;
    }
}

/* Nav links */
.main-menu .nav-list > li > a {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-nav);
    font-weight: 600;
    color: var(--bn-ink);
    transition: color 0.2s ease;
    padding: var(--bn-space-sm) var(--bn-space-sm);
}

.main-menu .nav-list > li > a:hover,
.main-menu .nav-list > li.current-menu-item > a {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .main-menu .nav-list > li > a {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .main-menu .nav-list > li > a:hover,
[data-bs-theme="dark"] .main-menu .nav-list > li.current-menu-item > a {
    color: var(--bn-primary-active);
}

/* Desktop (lg+): logo + menu left, actions right */
@media (min-width: 992px) {
    .site-header .navbar {
        justify-content: flex-start;
        max-width: 100%;
        box-sizing: border-box;
    }
    .site-header .navbar .main-menu {
        flex: 0 0 auto;
    }
}

/* Tighter top nav on mid-width desktop (lg+ but not xl wide) to reduce full-row overflow */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .site-header .navbar {
        column-gap: 10px;
    }
    .site-header .navbar .main-menu {
        padding-right: 10px;
    }
    .site-header .navbar .nav-list > .menu-item > a {
        margin-left: 4px;
        margin-right: 4px;
    }
    .main-menu .nav-list > li > a {
        padding: var(--bn-space-sm) 10px;
    }
}

/* Narrow desktop: extra squeeze on menu links to avoid full-page horizontal scroll */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .navbar {
        column-gap: 8px;
    }
    .site-header .navbar .main-menu {
        padding-right: 8px;
    }
    .site-header .navbar .nav-list > .menu-item > a {
        margin-left: 3px;
        margin-right: 3px;
    }
    .main-menu .nav-list > li > a {
        padding: var(--bn-space-sm) 8px;
    }
}

/* Tablet/phone: main menu is hidden below lg; keep the icon + CTA row from crowding */
@media (max-width: 991.98px) {
    .site-header .navbar {
        column-gap: 6px;
        height: 48px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-inline: max(env(safe-area-inset-left, 0px), var(--bn-space-xs))
            max(env(safe-area-inset-right, 0px), var(--bn-space-xs));
        overflow: visible;
        justify-content: space-between;
    }

    .site-header .navbar .sep {
        display: none;
    }

    .site-header .navbar .actions {
        flex-shrink: 0;
        min-width: 0;
        column-gap: 8px;
        padding-left: 0;
        margin-left: auto;
    }

    /* Hide secondary action buttons on mobile to prevent overlap */
    .site-header .actions .toggle-color,
    .site-header .actions .toggle-search,
    .site-header .actions .toggle-notify,
    .site-header .actions .toggle-promo-banner {
        display: none !important;
    }
    .bn-community-wrap {
        display: none !important;
    }

    .site-header .actions .action-btn:not(.bn-nav-btn) {
        width: 32px;
        height: 32px;
    }
}

/* Dropdown / sub-menu */
.main-menu .sub-menu,
.main-menu .dropdown-menu {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-subtle);
    padding: var(--bn-space-sm) 0;
}

[data-bs-theme="dark"] .main-menu .sub-menu,
[data-bs-theme="dark"] .main-menu .dropdown-menu {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

.main-menu .sub-menu a,
.main-menu .dropdown-menu a {
    color: var(--bn-muted);
    padding: var(--bn-space-sm) var(--bn-space-lg);
    font-size: var(--bn-fs-body-sm);
}

.main-menu .sub-menu a:hover,
.main-menu .dropdown-menu a:hover {
    color: var(--bn-primary);
    background-color: rgba(var(--bn-primary-rgb), 0.06);
}

/* Header action buttons (search, dark toggle, etc.) */
.site-header .actions .action-btn {
    color: var(--bn-muted);
    font-size: var(--bn-fs-body-md);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bn-radius-lg);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header .actions .action-btn:hover {
    color: var(--bn-primary);
    background-color: rgba(var(--bn-primary-rgb), 0.08);
}

[data-bs-theme="dark"] .site-header .actions .action-btn {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .site-header .actions .action-btn:hover {
    color: var(--bn-primary-active);
    background-color: rgba(240, 185, 11, 0.12);
}

/* login-btn in header now handled by .bn-nav-btn--secondary */
.site-header .login-btn.bn-nav-btn {
    width: auto !important;
    min-width: unset;
}

/* User hover-menu dropdown — TapNow minimal style */
.action-hover-menu {
    position: relative;
}

.action-hover-menu .hover-warp {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 280px !important;
    top: calc(100% + 6px) !important;
    transition-delay: 0.12s;
}

.action-hover-menu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -8px;
    right: -8px;
    height: 10px;
}

.action-hover-menu:hover > .hover-warp {
    transition-delay: 0.08s;
}

[data-bs-theme="dark"] .action-hover-menu .hover-warp {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Header: avatar + name + badge ── */
.bn-hover-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 16px;
}

.bn-hover-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bn-hover-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bn-hover-name {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-sm);
    font-weight: 600;
    color: var(--bn-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme="dark"] .bn-hover-name {
    color: var(--bn-on-dark);
}

.bn-hover-header .bn-vip-badge {
    font-size: var(--bn-fs-caption);
}

/* ── Divider ── */
.bn-hover-divider {
    height: 1px;
    background-color: var(--bn-hairline-on-light);
    margin: 4px 16px;
}

[data-bs-theme="dark"] .bn-hover-divider {
    background-color: var(--bn-hairline-on-dark);
}

/* ── List container ── */
.bn-hover-list {
    padding: 4px 0;
}

/* ── List item (shared for all rows) ── */
.bn-hover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-md);
    color: var(--bn-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}

.bn-hover-item:hover {
    background-color: rgba(var(--bn-primary-rgb), 0.06);
    color: var(--bn-ink);
}

.bn-hover-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--bn-muted-strong);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.bn-hover-item:hover i {
    color: var(--bn-primary);
}

.bn-hover-item span {
    flex: 1;
    min-width: 0;
}

/* Right-aligned badge (e.g. coin balance number) */
.bn-hover-badge {
    flex: 0 0 auto !important;
    font-family: var(--bn-font-number);
    font-size: var(--bn-fs-body-sm);
    font-weight: 500;
    color: var(--bn-primary);
    margin-left: auto;
}

/* Muted item (e.g. "今日已签到") */
.bn-hover-item--muted {
    color: var(--bn-muted-strong);
}

.bn-hover-item--muted i {
    color: var(--bn-muted);
}

/* Sign-in / Qiandao — highlight row */
.bn-hover-item.user-qiandao-action {
    color: var(--bn-primary);
    font-weight: 500;
}

.bn-hover-item.user-qiandao-action i {
    color: var(--bn-primary);
}

.bn-hover-item.user-qiandao-action:hover {
    background-color: rgba(var(--bn-primary-rgb), 0.1);
}

/* ── Dark theme overrides ── */
[data-bs-theme="dark"] .bn-hover-item {
    color: var(--bn-body);
}

[data-bs-theme="dark"] .bn-hover-item:hover {
    background-color: rgba(252, 213, 53, 0.06);
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-hover-item i {
    color: var(--bn-muted);
}

[data-bs-theme="dark"] .bn-hover-item:hover i {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .bn-hover-badge {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .bn-hover-item--muted {
    color: var(--bn-muted);
}

[data-bs-theme="dark"] .bn-hover-item.user-qiandao-action {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .bn-hover-item.user-qiandao-action:hover {
    background-color: rgba(252, 213, 53, 0.1);
}

/* Hide old parent-theme positioned elements that no longer exist */
.action-hover-menu .abstop-item {
    position: static;
    display: block;
    padding: 0;
    border: none !important;
    background: none;
}

.action-hover-menu .hover-info,
.action-hover-menu .hover-balance,
.action-hover-menu .hover-item,
.action-hover-menu .hover-link {
    display: none !important;
}

/* Burger / mobile menu */
.site-header .burger {
    color: var(--bn-ink);
    font-size: 1.25rem;
}

/* Search bar */
.navbar-search {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
}

[data-bs-theme="dark"] .navbar-search {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

/* Header gap (spacing below sticky header) */
.header-gap {
    background-color: transparent;
}

/* ── Transparent header mode (homepage) ── */
body.header-transparent .site-header:not(.navbar-sticky) {
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}

body.header-transparent .site-header:not(.navbar-sticky) .navbar .actions {
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

body.header-transparent[data-bs-theme="dark"] .site-header:not(.navbar-sticky) .navbar .actions {
    background-color: rgba(0, 0, 0, 0.25);
}

body.header-transparent .site-header:not(.navbar-sticky) .navbar-search {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
}

/* login-btn transparent header now handled by .bn-nav-btn--secondary transparent override */

body.header-transparent .site-header:not(.navbar-sticky) .navbar-search input {
    color: #fff;
}

body.header-transparent .site-header:not(.navbar-sticky) .navbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}


/* ================================================================
   3. POST CARDS & LOOPS
   ================================================================ */

.post-item {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    box-shadow: var(--bn-shadow-subtle);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.post-item:hover {
    box-shadow: rgba(0,0,0,0.08) 0px 8px 32px, 0 0 0 1px var(--bn-hairline-on-light);
    transform: translateY(-2px);
}

[data-bs-theme="dark"] .post-item {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    box-shadow: rgba(0,0,0,0.15) 0px 4px 24px;
}

[data-bs-theme="dark"] .post-item:hover {
    box-shadow: rgba(0,0,0,0.25) 0px 8px 32px, 0 0 0 1px var(--bn-hairline-on-dark);
}

/* Grid card image area */
.post-item .entry-media {
    position: relative;
    margin: 10px 10px 0;
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
}

.post-item .entry-media .media-img {
    display: block;
    position: relative;
    transition: transform 0.35s ease;
}

.post-item .entry-media .media-img img {
    display: block;
    width: 100%;
    height: auto;
}

.post-item:hover .entry-media .media-img {
    transform: scale(1.03);
}

/* List layout image */
.post-item.item-list .entry-media {
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    margin: 10px 0 10px 10px;
}

.post-item.item-list .entry-media .media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card content wrapper */
.post-item .entry-wrapper {
    padding: var(--bn-space-lg);
}

/* Entry title — full text; overrides parent main.min -webkit-line-clamp / ellipsis */
.post-item .entry-title,
.post-item.item-list .entry-title,
.sidebar .sidebar-posts-list .post-item.item-list .entry-title {
    font-family: var(--bn-font-display);
    font-weight: 600;
    font-size: clamp(0.875rem, 0.82rem + 0.5vw, 1.125rem);
    line-height: 1.22;
    margin-bottom: var(--bn-space-sm);
    display: block;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    overflow-wrap: break-word;
}

.post-item .entry-title a {
    color: var(--bn-ink);
    transition: color 0.2s ease;
}

.post-item .entry-title a:hover {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .post-item .entry-title a {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .post-item .entry-title a:hover {
    color: var(--bn-primary-active);
}

/* Entry description */
.post-item .entry-desc {
    color: var(--bn-muted);
    font-size: var(--bn-fs-body-sm);
    line-height: var(--bn-lh-body);
}

[data-bs-theme="dark"] .post-item .entry-desc {
    color: var(--bn-muted-strong);
}

/* Entry meta (date, views, likes, etc.) */
.post-item .entry-meta,
.post-item .entry-footer {
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-caption);
}

.post-item .entry-meta span,
.post-item .entry-footer span {
    color: var(--bn-muted-strong);
}

/* Keep SVG icons and following text on one line, icon left */
.post-item .entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.post-item .entry-meta svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.post-item .entry-meta i {
    opacity: 0.6;
}

/* Category dot */
.post-item .entry-cat-dot a {
    color: var(--bn-primary);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
}

/* Badges (VIP, sticky, etc.) */
.post-item .tips-badge .badge {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
    letter-spacing: 0.12px;
    border-radius: var(--bn-radius-md);
    padding: 3px 8px;
}

.post-item .tips-badge .badge.bg-warning {
    background: linear-gradient(135deg, var(--bn-primary), var(--bn-primary-active)) !important;
    color: var(--bn-on-primary) !important;
    box-shadow: 0px 0px 0px 1px rgba(var(--bn-primary-rgb), 0.3);
}

.badge.bg-dark {
    background-color: var(--bn-ink) !important;
    color: var(--bn-on-dark) !important;
}

.badge.bg-warning {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

.badge.bg-success {
    background-color: #0ecb81 !important;
    color: var(--bn-on-dark) !important;
}

.badge.bg-info {
    background-color: var(--bn-muted) !important;
    color: var(--bn-on-dark) !important;
}

.badge.bg-danger {
    background-color: var(--bn-trading-down) !important;
    color: var(--bn-on-dark) !important;
}

.badge.bg-secondary {
    background-color: var(--bn-hairline-on-light) !important;
    color: var(--bn-ink) !important;
}

.badge.bg-primary {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

/* Grid overlay card */
.post-item.grid-overlay .entry-wrapper {
    background: linear-gradient(to top, rgba(11, 14, 17, 0.85), transparent);
}

.post-item.grid-overlay .entry-title a,
.post-item.grid-overlay .entry-desc,
.post-item.grid-overlay .entry-cat-dot a {
    color: var(--bn-on-dark);
}

.post-item.grid-overlay .entry-meta span {
    color: var(--bn-muted-strong);
}


/* ── Grid Minimal card ─────────────────────────────────────────── */

.post-item.grid-minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.post-item.grid-minimal:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

.post-item.grid-minimal .entry-media-wrap {
    position: relative;
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.post-item.grid-minimal .entry-media {
    margin: 0;
    border-radius: 0;
}

.post-item.grid-minimal .entry-media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-item.grid-minimal:hover .entry-media img {
    transform: scale(1.06);
}

/* Claude light: ring shadow on hover */
.post-item.grid-minimal:hover .entry-media-wrap {
    box-shadow: 0px 0px 0px 1px var(--bn-border-strong);
}

/* Hover overlay */
.post-item.grid-minimal .hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(20, 20, 19, 0.78) 0%, rgba(20, 20, 19, 0.25) 45%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.post-item.grid-minimal:hover .hover-overlay {
    opacity: 1;
}

.post-item.grid-minimal .overlay-content {
    padding: var(--bn-space-md);
    width: 100%;
}

.post-item.grid-minimal .overlay-content .entry-desc {
    color: rgba(250, 249, 245, 0.9);
    font-size: var(--bn-fs-body-sm);
    line-height: var(--bn-lh-body);
    margin-bottom: var(--bn-space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item.grid-minimal .overlay-meta {
    display: flex;
    gap: var(--bn-space-sm);
    flex-wrap: wrap;
}

.post-item.grid-minimal .overlay-meta span {
    color: rgba(250, 249, 245, 0.75);
    font-size: var(--bn-fs-caption);
}

.post-item.grid-minimal .overlay-meta i {
    opacity: 0.7;
}

/* Text area below image */
.post-item.grid-minimal .entry-wrapper {
    padding: var(--bn-space-sm) var(--bn-space-xxs) 0;
    transition: transform 0.3s ease;
}

.post-item.grid-minimal:hover .entry-wrapper {
    transform: translateY(-3px);
}

.post-item.grid-minimal .entry-cat-dot {
    margin-bottom: var(--bn-space-xxs);
}

.post-item.grid-minimal .entry-cat-dot a {
    color: var(--bn-primary);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
}

.post-item.grid-minimal .entry-title {
    font-family: var(--bn-font-display);
    font-weight: 600;
    font-size: clamp(0.875rem, 0.82rem + 0.5vw, 1.05rem);
    line-height: 1.35;
    margin-bottom: var(--bn-space-xxs);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item.grid-minimal .entry-title a {
    color: var(--bn-ink);
    transition: color 0.2s ease;
}

.post-item.grid-minimal:hover .entry-title a {
    color: var(--bn-primary);
}

.post-item.grid-minimal .entry-meta-inline {
    display: flex;
    gap: var(--bn-space-sm);
}

.post-item.grid-minimal .entry-meta-inline span {
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-caption);
}

.post-item.grid-minimal .entry-meta-inline i {
    opacity: 0.5;
}

/* VIP / Sticky badges */
.post-item.grid-minimal .tips-badge {
    z-index: 3;
}

/* ── Grid Minimal — Dark mode (Binance) ──────────────────────── */

[data-bs-theme="dark"] .post-item.grid-minimal {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-bs-theme="dark"] .post-item.grid-minimal:hover {
    background: transparent;
    box-shadow: none;
}

[data-bs-theme="dark"] .post-item.grid-minimal:hover .entry-media-wrap {
    box-shadow: none;
}

[data-bs-theme="dark"] .post-item.grid-minimal .hover-overlay {
    background: linear-gradient(to top, rgba(11, 14, 17, 0.88) 0%, rgba(11, 14, 17, 0.3) 45%, transparent 70%);
}

[data-bs-theme="dark"] .post-item.grid-minimal .overlay-content .entry-desc {
    color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .post-item.grid-minimal .overlay-meta span {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .post-item.grid-minimal .entry-title a {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .post-item.grid-minimal:hover .entry-title a {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .post-item.grid-minimal .entry-meta-inline span {
    color: var(--bn-muted-strong);
}

/* ── Grid Minimal — Touch devices (no hover) ─────────────────── */

@media (hover: none) {
    .post-item.grid-minimal .hover-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(20, 20, 19, 0.6) 0%, transparent 55%);
    }

    [data-bs-theme="dark"] .post-item.grid-minimal .hover-overlay {
        background: linear-gradient(to top, rgba(11, 14, 17, 0.7) 0%, transparent 55%);
    }

    .post-item.grid-minimal .entry-wrapper {
        transform: none;
    }

    .post-item.grid-minimal:hover .entry-wrapper {
        transform: none;
    }
}

/* ── Grid Minimal — Responsive ───────────────────────────────── */

@media (max-width: 767.98px) {
    .post-item.grid-minimal .entry-wrapper {
        padding: var(--bn-space-xs) 0 0;
    }

    .post-item.grid-minimal .entry-title {
        font-size: 0.875rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .post-item.grid-minimal .entry-meta-inline {
        gap: var(--bn-space-xs);
    }

    .post-item.grid-minimal .entry-meta-inline span {
        font-size: 11px;
    }

    .post-item.grid-minimal .overlay-content {
        padding: var(--bn-space-sm);
    }

    .post-item.grid-minimal .overlay-content .entry-desc {
        font-size: 12px;
        -webkit-line-clamp: 1;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .post-item.grid-minimal .entry-title {
        font-size: 0.9375rem;
    }
}


/* ================================================================
   4. BUTTONS
   ================================================================ */

.btn {
    font-family: var(--bn-font-body);
    font-weight: 500;
    border-radius: var(--bn-radius-lg);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: none;
    line-height: 1.25;
}

/* Binance Yellow (Primary CTA) */
.btn-primary,
.btn-primary:visited {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
    border: none;
    border-radius: var(--bn-radius-md);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bn-primary-active) !important;
    color: var(--bn-on-primary) !important;
}

.btn-primary:active {
    background-color: var(--bn-primary-active) !important;
}

/* Wave 7.4.4 — Independent :focus-visible ring (was previously
 * collapsed into :focus, which fired on click and caused the visible
 * outline to flash on every mouse press). Modern UA :focus-visible
 * fires only for keyboard / programmatic focus, which is what we
 * actually want for accessibility. */
.btn-primary:focus-visible {
    outline: 2px solid var(--bn-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--bn-primary-rgb, 240, 185, 11), 0.32);
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

/* Binance Secondary */
.btn-light,
.btn-white,
.btn-outline-light {
    background-color: var(--bn-surface-strong-light) !important;
    color: var(--bn-ink) !important;
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-md);
}

.btn-light:hover,
.btn-white:hover,
.btn-outline-light:hover {
    background-color: var(--bn-hairline-on-light) !important;
    border-color: var(--bn-border-strong);
}

/* White Surface */
.btn-default,
.btn-outline-secondary {
    background-color: var(--bn-canvas-light);
    color: var(--bn-ink);
    border: none;
    border-radius: var(--bn-radius-xl);
    padding: 8px 16px 8px 12px;
}

.btn-default:hover,
.btn-outline-secondary:hover {
    background-color: var(--bn-hairline-on-light);
}

/* Dark Charcoal */
.btn-dark,
.btn-dark:visited {
    background-color: var(--bn-surface-card-dark) !important;
    color: var(--bn-on-dark) !important;
    border: none;
    box-shadow: var(--bn-surface-card-dark) 0px 0px 0px 0px, var(--bn-surface-card-dark) 0px 0px 0px 1px;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--bn-ink) !important;
    color: var(--bn-on-dark) !important;
}

/* Dark theme – Dark Primary */
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-dark:visited {
    background-color: var(--bn-ink) !important;
    color: var(--bn-muted-strong) !important;
    border: 1px solid var(--bn-surface-card-dark);
    border-radius: var(--bn-radius-xl);
}

/* Danger → Error Crimson */
.btn-danger,
.btn-danger:visited {
    background-color: var(--bn-trading-down) !important;
    color: var(--bn-on-dark) !important;
    border: none;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #9a2b2b !important;
}

/* Success */
.btn-success,
.btn-success:visited {
    background-color: var(--bs-success) !important;
    color: var(--bn-on-dark) !important;
    border: none;
}

.btn-success:hover,
.btn-success:focus {
    filter: brightness(0.85);
}

/* Warning */
.btn-warning,
.btn-warning:visited {
    background-color: var(--bs-warning) !important;
    color: var(--bn-ink) !important;
    border: none;
}

.btn-warning:hover,
.btn-warning:focus {
    filter: brightness(0.85);
}

/* Info */
.btn-info,
.btn-info:visited {
    background-color: var(--bn-muted) !important;
    color: var(--bn-on-dark) !important;
    border: none;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--bn-ink) !important;
}

/* Secondary */
.btn-secondary,
.btn-secondary:visited {
    background-color: var(--bn-muted) !important;
    color: var(--bn-on-dark) !important;
    border: none;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bn-ink) !important;
}

/* Outline variants */
.btn-outline-primary {
    color: var(--bn-primary) !important;
    border: 1px solid var(--bn-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

.btn-outline-danger {
    color: var(--bn-trading-down) !important;
    border: 1px solid var(--bn-trading-down) !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover {
    background-color: var(--bn-trading-down) !important;
    color: var(--bn-on-dark) !important;
}

.btn-outline-dark {
    color: var(--bn-ink) !important;
    border: 1px solid var(--bn-ink) !important;
    background-color: transparent !important;
}

.btn-outline-dark:hover {
    background-color: var(--bn-ink) !important;
    color: var(--bn-on-dark) !important;
}

/* Button sizes */
.btn-sm {
    font-size: var(--bn-fs-body-sm);
    padding: 6px 12px;
    border-radius: var(--bn-radius-lg);
}

.btn-lg {
    font-size: var(--bn-fs-title-md);
    padding: 12px 24px;
    border-radius: var(--bn-radius-xl);
}

/* Rounded pill buttons */
.btn.rounded-pill,
.rounded-pill {
    border-radius: 9999px !important;
}


/* ================================================================
   5. HOME PAGE WIDGETS
   ================================================================ */

.home-widget {
    margin-bottom: var(--bn-space-lg);
}

.home-widget .widget-title,
.home-widget .home-title {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: var(--bn-fs-display-sm);
    line-height: var(--bn-lh-tight);
    color: var(--bn-ink);
    margin-bottom: var(--bn-space-lg);
}

[data-bs-theme="dark"] .home-widget .widget-title,
[data-bs-theme="dark"] .home-widget .home-title {
    color: var(--bn-on-dark);
}

.home-widget .widget-title a,
.home-widget .home-title a {
    color: inherit;
}

.home-widget .widget-title a:hover,
.home-widget .home-title a:hover {
    color: var(--bn-primary);
}

/* ── Category Box Cards (TapNow-inspired + Swiper Coverflow) ── */

.bn-catbox-section {
    position: relative;
    padding: 0;
    margin-top: 12px;
}

/* ── Swiper container ── */
.catbox-swiper {
    overflow: hidden;
    padding: 8px 0 0;
}

.catbox-swiper .swiper-wrapper {
    align-items: flex-start;
}

.catbox-swiper .swiper-slide {
    width: 220px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0.9);
    opacity: 0.5;
}

.catbox-swiper .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

/* ── Card (frameless) ── */
.catbox-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.catbox-card:hover {
    text-decoration: none;
    color: inherit;
}

.catbox-card:focus-visible {
    outline: 2px solid var(--bn-primary);
    outline-offset: 2px;
}

/* ── Image — smart-fill backdrop; height follows intrinsic img ratio ── */
.catbox-card__img {
    position: relative;
    border-radius: var(--bn-radius-xl, 12px);
    overflow: hidden;
    background: var(--bn-hairline-on-light, #f0eee6);
    isolation: isolate;
}

[data-bs-theme="dark"] .catbox-card__img {
    background: var(--bn-surface-card-dark, #1e2329);
}

.catbox-card__img::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--bn-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(28px) saturate(1.15) brightness(.92);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

[data-bs-theme="dark"] .catbox-card__img::before {
    filter: blur(28px) saturate(1.05) brightness(.6);
}

.catbox-card__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.catbox-card:hover .catbox-card__img img {
    transform: scale(1.04);
}

/* ── Info ── */
.catbox-card__info {
    padding: 10px 4px 0;
}

.catbox-card__title {
    margin: 0;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bn-ink, #141413);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.catbox-card:hover .catbox-card__title {
    color: var(--bn-primary, #c96442);
}

[data-bs-theme="dark"] .catbox-card__title {
    color: var(--bn-on-dark, #ffffff);
}

.catbox-card__desc {
    margin: 0 0 2px;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bn-muted, #5e5d59);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-bs-theme="dark"] .catbox-card__desc {
    color: var(--bn-muted, #707a8a);
}

.catbox-card__count {
    display: block;
    margin-top: 2px;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 12px;
    line-height: 1.3;
    color: var(--bn-border-strong, #d1cfc5);
}

[data-bs-theme="dark"] .catbox-card__count {
    color: var(--bn-muted, #707a8a);
}

/* ── Pagination dots ── */
.catbox-pagination {
    text-align: center;
    margin-top: 16px;
    position: relative !important;
    z-index: 5;
}

.catbox-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bn-border-strong, #d1cfc5);
    opacity: 0.45;
    margin: 0 4px;
    transition: opacity 0.3s ease, background 0.3s ease, width 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.catbox-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--bn-ink, #141413);
    width: 20px;
    border-radius: 4px;
}

[data-bs-theme="dark"] .catbox-pagination .swiper-pagination-bullet {
    background: var(--bn-muted, #707a8a);
}

[data-bs-theme="dark"] .catbox-pagination .swiper-pagination-bullet-active {
    background: var(--bn-on-dark, #ffffff);
}

/* ── Responsive ── */
@media (min-width: 1400px) {
    .catbox-swiper .swiper-slide {
        width: 240px;
    }
}

@media (max-width: 991.98px) {
    .catbox-swiper .swiper-slide {
        width: 200px;
    }

    .catbox-card__title {
        font-size: 14px;
    }

    .catbox-card__desc {
        font-size: 12px;
    }
}

@media (max-width: 767.98px) {
    .catbox-swiper .swiper-slide {
        width: 180px;
    }

    .catbox-card__info {
        padding: 8px 2px 0;
    }

    .catbox-card__title {
        font-size: 13px;
    }

    .catbox-pagination {
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) {
    .catbox-swiper .swiper-slide {
        width: 160px;
    }

    .catbox-card__desc {
        display: none;
    }

    .catbox-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px;
    }

    .catbox-pagination .swiper-pagination-bullet-active {
        width: 16px;
    }
}

/* VIP card widget */
.home-widget .vip-card-item,
.home-widget .vip-item {
    border-radius: var(--bn-radius-xl);
    border: 1px solid var(--bn-hairline-on-light);
    overflow: hidden;
}

/* Search box widget */
.home-widget .search-box,
.home-widget .search-form {
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
}

/* Slider / carousel */
.home-widget .owl-carousel .owl-stage-outer {
    border-radius: var(--bn-radius-lg);
    overflow: hidden;
}

/* Division / separator widget */
.home-widget .home-division {
    border-color: var(--bn-hairline-on-light);
}

[data-bs-theme="dark"] .home-widget .home-division {
    border-color: var(--bn-hairline-on-dark);
}

/* Background sections */
.home-widget .home-background {
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
}

/* Overview / stats section */
.home-widget .overview-item {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    padding: var(--bn-space-lg);
}

[data-bs-theme="dark"] .home-widget .overview-item {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}


/* ================================================================
   6. SIDEBAR
   ================================================================ */

.widget {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    padding: var(--bn-space-lg);
    margin-bottom: var(--bn-space-lg);
}

[data-bs-theme="dark"] .widget {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

.widget .widget-title,
.widget h5.widget-title {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: var(--bn-fs-title-sm);
    line-height: var(--bn-lh-snug);
    color: var(--bn-ink);
    margin-bottom: var(--bn-space-lg);
    padding-bottom: var(--bn-space-sm);
    border-bottom: 1px solid var(--bn-hairline-on-light);
}

[data-bs-theme="dark"] .widget .widget-title,
[data-bs-theme="dark"] .widget h5.widget-title {
    color: var(--bn-on-dark);
    border-bottom-color: var(--bn-hairline-on-dark);
}

/* Sidebar post list items */
.widget .post-list-item,
.widget .ranking-item {
    border-bottom: 1px solid var(--bn-hairline-on-light);
    padding: var(--bn-space-sm) 0;
}

[data-bs-theme="dark"] .widget .post-list-item,
[data-bs-theme="dark"] .widget .ranking-item {
    border-bottom-color: var(--bn-hairline-on-dark);
}

.widget .post-list-item:last-child,
.widget .ranking-item:last-child {
    border-bottom: none;
}

/* Sidebar pay info */
.widget .sidebar-post-pay {
    border-radius: var(--bn-radius-lg);
}


/* ================================================================
   7. FOOTER — Compact Dual-Theme
   Light = Claude (warm parchment / terracotta accents)
   Dark  = Binance (deep canvas / yellow accents)
   ================================================================ */

.bn-footer {
    background-color: var(--bn-ink) !important;
    color: var(--bn-muted-strong);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 0 !important;
    margin-top: var(--bn-space-xl) !important;
}

/* ── Main row: brand + 友链 + social（友链与 logo/标语/二维码同一行） ── */

.bn-footer-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px 0;
    gap: 16px 24px;
}

/* ── Brand cluster ── */

.bn-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
}

.bn-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.bn-footer-logo img {
    max-height: 26px;
    width: auto;
    display: block;
}

.bn-footer-site-name {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-sm);
    font-weight: 600;
    color: var(--bn-on-dark);
    white-space: nowrap;
    line-height: 1;
}

.bn-footer-sep {
    color: var(--bn-muted);
    font-size: var(--bn-fs-body-sm);
    flex-shrink: 0;
}

.bn-footer-desc {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    color: var(--bn-muted-strong);
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Social icons row ── */

.bn-footer-social {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
    margin-left: auto;
}

.bn-footer-social-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: var(--bn-radius-lg);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bn-footer-social-item:hover {
    background-color: rgba(255,255,255,0.06);
}

.bn-footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bn-muted-strong);
    transition: color 0.2s ease;
}

.bn-footer-social-item:hover .bn-footer-social-icon {
    color: var(--bn-primary);
}

.bn-footer-social-label {
    font-family: var(--bn-font-body);
    font-size: 10px;
    color: var(--bn-muted);
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.bn-footer-social-item:hover .bn-footer-social-label {
    color: var(--bn-on-dark);
}

/* ── QR Popover (desktop hover) ── */

.bn-qr-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 950;
}

.bn-qr-popover::after {
    display: none;
}

.bn-footer-social-item:hover .bn-qr-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.bn-qr-popover img {
    max-width: 220px;
    height: auto;
    display: block;
    border-radius: var(--bn-radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.bn-qr-popover-name,
.bn-qr-popover-tip {
    display: none;
}

/* ── Right-align QR popover for last 2 items to prevent viewport overflow ── */
.bn-footer-social-item:nth-last-child(-n+2) .bn-qr-popover {
    left: auto;
    right: 0;
    transform: translateY(6px);
}

.bn-footer-social-item:nth-last-child(-n+2):hover .bn-qr-popover {
    transform: translateY(0);
}

/* ── Hide float sidebar when QR popover is active ── */
body:has(.bn-footer-social-item:hover) .bn-float-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% + 10px));
}

/* ── Bottom bar ── */

.bn-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 6px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted);
    line-height: 1.6;
}

.bn-footer-dot {
    color: var(--bn-muted);
}

.bn-footer-bottom a {
    color: var(--bn-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bn-footer-bottom a:hover {
    color: var(--bn-on-dark);
}

/* Footer 友链（bn-footer-main 内与品牌、二维码同一行） */
.bn-footer .bn-footer-friendlinks {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--bn-muted);
    font-size: 11px;
    flex: 0 1 auto;
    min-width: 0;
}

.bn-footer .bn-footer-friendlinks ul {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bn-footer .bn-footer-friendlinks li {
    display: inline;
}

/* Footer friend links (generic + homepage 友情链接) */
.bn-footer .footer-links {
    padding: 4px 0 8px;
    text-align: center;
    color: var(--bn-muted);
    font-size: 11px;
}

.bn-footer .footer-links a {
    color: var(--bn-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bn-footer .footer-links a:hover {
    color: var(--bn-primary-active);
}

/* ── QR Lightbox (mobile fallback) ── */

.bn-qr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 14, 17, 0.75);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bn-qr-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.bn-qr-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
    background: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-subtle);
    transform: scale(0.9);
    transition: transform 0.25s ease;
}

.bn-qr-lightbox.is-open .bn-qr-lightbox-inner {
    transform: scale(1);
}

.bn-qr-lightbox-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--bn-muted-strong);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s ease;
}

.bn-qr-lightbox-close:hover {
    color: var(--bn-ink);
}

.bn-qr-lightbox-img {
    max-width: min(280px, calc(100vw - 80px));
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: var(--bn-radius-xl);
    display: block;
}

.bn-qr-lightbox-name {
    margin-top: 12px;
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-sm);
    font-weight: 500;
    color: var(--bn-ink);
    text-align: center;
}

.bn-qr-lightbox-tip {
    margin-top: 3px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    text-align: center;
}

/* ── Dark theme (Binance) ── */

[data-bs-theme="dark"] .bn-footer {
    background-color: #0b0e11 !important;
    border-top-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-footer-social-item:hover {
    background-color: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .bn-qr-popover img {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

[data-bs-theme="dark"] .bn-qr-lightbox-inner {
    background: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-qr-lightbox-close:hover {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-qr-lightbox-name {
    color: var(--bn-on-dark);
}

/* ── Responsive ── */

@media (max-width: 991.98px) {
    .bn-footer-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 0 16px;
    }

    .bn-footer-brand {
        flex-wrap: wrap;
    }

    .bn-footer-desc {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .bn-footer {
        margin-top: var(--bn-space-lg) !important;
    }

    .site-footer.bn-footer {
        margin-bottom: 0 !important;
        padding-bottom: max(var(--bn-space-xs), env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
    }

    body:has(.m-navbar) .site-footer.bn-footer {
        padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bn-footer-main {
        padding: 16px 0 12px;
        gap: 12px;
    }

    .bn-footer-sep {
        display: none;
    }

    .bn-footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bn-footer-social {
        gap: 12px;
    }

    .bn-footer-social-item {
        padding: 4px 2px;
    }

    .bn-qr-popover {
        display: none !important;
    }

    .bn-qr-lightbox-inner {
        padding: 24px;
        margin: 0 16px;
    }

    .bn-qr-lightbox-img {
        max-width: min(260px, calc(100vw - 64px));
        max-height: 60vh;
    }

    .bn-footer-bottom {
        padding: 10px 0 8px;
    }

    /* 简版底栏：隐藏 logo/二维码，友链仍在主行内则居中 */
    .bn-footer--mobile-simple .bn-footer-main {
        display: flex;
        justify-content: center;
        padding: 12px 0 10px;
    }

    .bn-footer--mobile-simple .bn-footer-brand,
    .bn-footer--mobile-simple .bn-footer-social {
        display: none !important;
    }

    .bn-footer--mobile-simple .bn-footer-main:not(:has(.bn-footer-friendlinks)) {
        display: none;
    }

    .bn-footer--mobile-simple {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:has(.m-navbar) .bn-footer--mobile-simple {
        padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bn-footer--mobile-simple .bn-footer-bottom {
        padding: 12px 0;
    }
}

/* ── Desktop Rollbar (real parent-theme right sidebar) ── */

@media (min-width: 768px) {
    :root {
        --bn-float-right: 12px;
        --bn-float-width: 62px;
        --bn-float-backtop-size: 46px;
        --bn-float-backtop-right: 20px;
    }

    .rollbar {
        right: var(--bn-float-right);
        bottom: 118px;
        z-index: 920;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .rollbar .actions {
        width: var(--bn-float-width);
        margin: 0;
        padding: 4px;
        overflow: hidden;
        list-style: none;
        border: 1px solid rgba(20, 20, 20, 0.08);
        border-radius: 999px;
        background: rgba(250, 249, 245, 0.94);
        box-shadow: 0 16px 42px rgba(20, 20, 20, 0.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .rollbar .actions li {
        background: transparent;
    }

    .rollbar .actions li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 62px;
        padding: 8px 4px;
        border: 0;
        border-radius: 999px;
        color: var(--bn-muted-strong, #4b5563);
        line-height: 1;
        text-align: center;
        opacity: 1;
        transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }

    .rollbar .actions li > a > i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin: 0;
        color: var(--bn-muted-strong, #4b5563);
        font-size: 21px;
        line-height: 1;
        transition: color 0.18s ease, transform 0.18s ease;
    }

    .rollbar .actions li > a > span {
        display: block;
        max-width: 52px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: inherit;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rollbar .actions li:hover > a {
        color: #fff;
        background: var(--bn-primary, #c96442);
        opacity: 1;
        transform: translateY(-1px);
    }

    .rollbar .actions li:hover > a > i {
        color: #fff;
    }

    .rollbar .actions li > a:focus-visible {
        outline: 2px solid rgba(201, 100, 66, 0.5);
        outline-offset: -3px;
    }

    .back-top {
        right: var(--bn-float-backtop-right);
        width: var(--bn-float-backtop-size);
        height: var(--bn-float-backtop-size);
        line-height: calc(var(--bn-float-backtop-size) - 4px);
        border: 1px solid rgba(20, 20, 20, 0.08);
        border-radius: 999px;
        background: rgba(250, 249, 245, 0.94);
        color: var(--bn-muted-strong, #4b5563);
        box-shadow: 0 14px 34px rgba(20, 20, 20, 0.12);
        transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .back-top:hover {
        border-color: rgba(201, 100, 66, 0.5);
        background-color: var(--bn-primary, #c96442);
        color: #fff;
    }

    [data-bs-theme="dark"] .rollbar .actions {
        border-color: rgba(252, 213, 53, 0.22);
        background: linear-gradient(180deg, rgba(30, 35, 41, 0.96) 0%, rgba(11, 14, 17, 0.96) 100%);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
    }

    [data-bs-theme="dark"] .rollbar .actions li > a,
    [data-bs-theme="dark"] .rollbar .actions li > a > span,
    [data-bs-theme="dark"] .rollbar .actions li > a > i {
        color: rgba(234, 236, 239, 0.82);
    }

    [data-bs-theme="dark"] .rollbar .actions li:hover > a,
    [data-bs-theme="dark"] .rollbar .actions li:hover > a > span,
    [data-bs-theme="dark"] .rollbar .actions li:hover > a > i {
        color: #181a20;
    }

    [data-bs-theme="dark"] .back-top {
        border-color: rgba(252, 213, 53, 0.22);
        background: rgba(11, 14, 17, 0.94);
        color: rgba(234, 236, 239, 0.82);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    }

    [data-bs-theme="dark"] .back-top:hover {
        background-color: #fcd535;
        color: #181a20;
    }

    html.bn-float-idle .rollbar:not(:hover):not(:focus-within),
    html.bn-float-idle .back-top.back-top-show:not(:hover):not(:focus-within),
    html.bn-float-idle .bn-back-top.is-visible:not(:hover):not(:focus-visible) {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(18px) !important;
    }

    html.bn-float-idle .bn-float-sidebar:not(:hover):not(:focus-within) {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-50%) translateX(18px) !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .rollbar,
        .back-top,
        .bn-float-sidebar {
            transition: none;
        }

        html.bn-float-idle .rollbar:not(:hover):not(:focus-within),
        html.bn-float-idle .back-top.back-top-show:not(:hover):not(:focus-within),
        html.bn-float-idle .bn-back-top.is-visible:not(:hover):not(:focus-visible) {
            transform: none !important;
        }

        html.bn-float-idle .bn-float-sidebar:not(:hover):not(:focus-within) {
            transform: translateY(-50%) !important;
        }
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --bn-float-right: 10px;
        --bn-float-width: 60px;
        --bn-float-backtop-size: 44px;
        --bn-float-backtop-right: 18px;
    }

    .rollbar {
        bottom: 106px;
    }

    .rollbar .actions li > a {
        min-height: 58px;
        font-size: 11px;
    }

    .rollbar .actions li > a > i {
        width: 23px;
        height: 23px;
        font-size: 20px;
    }

    .rollbar .actions li > a > span {
        max-width: 50px;
    }
}

@media (min-width: 1440px) {
    :root {
        --bn-float-right: 16px;
        --bn-float-width: 64px;
        --bn-float-backtop-size: 46px;
        --bn-float-backtop-right: 25px;
    }

    .rollbar {
        bottom: 128px;
    }
}


/* ================================================================
   7b. PC FLOATING SIDEBAR (Desktop ≥992px)
   Light = Claude (warm parchment, ring shadows, generous radius)
   Dark  = Binance (deep surface, flat, subtle border)
   ================================================================ */

.bn-float-sidebar {
    display: none;
}

@media (min-width: 992px) {

    /* Position back-top below the float sidebar */
    body:has(.bn-float-sidebar) .back-top {
        display: none !important;
    }

    .bn-float-sidebar {
        position: fixed;
        top: 50%;
        bottom: auto;
        right: 24px;
        z-index: 920;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 78px;
        transform: translateY(-50%);
        background: rgba(250, 249, 245, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(20, 20, 20, 0.08);
        border-radius: 24px;
        box-shadow: 0 16px 42px rgba(20, 20, 20, 0.12);
        overflow: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .bn-float-sidebar:hover {
        border-color: rgba(201, 100, 66, 0.25);
        box-shadow: 0 22px 56px rgba(20, 20, 20, 0.18);
        transform: translateY(calc(-50% - 2px));
    }

    /* ── Body (collapsible area) ── */
    .bn-float-sidebar-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        max-height: 520px;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
    }

    .bn-float-sidebar.is-collapsed .bn-float-sidebar-body {
        max-height: 0;
        opacity: 0;
    }

    /* ── Menu items ── */
    .bn-float-sidebar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 72px;
        padding: 10px 8px;
        text-decoration: none;
        color: var(--bn-muted-strong, #4b5563);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        word-break: normal;
        position: relative;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .bn-float-sidebar-item span {
        display: block;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bn-float-sidebar-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 14px;
        right: 14px;
        height: 1px;
        background: rgba(20, 20, 20, 0.08);
    }

    .bn-float-sidebar-body > .bn-float-sidebar-item:last-child::after {
        display: none;
    }

    .bn-float-sidebar-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 21px;
        line-height: 1;
        color: var(--bn-muted-strong, #4b5563);
        background: rgba(201, 100, 66, 0.08);
        border-radius: 50%;
        transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    }

    .bn-float-sidebar-item:hover {
        color: var(--bn-primary, #c96442);
        background: rgba(201, 100, 66, 0.08);
    }

    .bn-float-sidebar-item:hover i {
        color: var(--bn-primary, #c96442);
        background: rgba(201, 100, 66, 0.15);
        transform: translateY(-1px);
    }

    .bn-float-sidebar-item:focus-visible,
    .bn-float-sidebar-toggle:focus-visible {
        outline: 2px solid rgba(201, 100, 66, 0.5);
        outline-offset: -3px;
    }

    /* ── Toggle button ── */
    .bn-float-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 42px;
        padding: 0 8px;
        border: none;
        background: transparent;
        color: var(--bn-muted-strong, #4b5563);
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
        border-top: 1px solid rgba(20, 20, 20, 0.08);
    }

    .bn-float-sidebar.is-collapsed .bn-float-sidebar-toggle {
        border-top-color: transparent;
    }

    .bn-float-sidebar-toggle:hover {
        color: var(--bn-primary, #c96442);
        background-color: rgba(201, 100, 66, 0.08);
    }

    .bn-float-sidebar-toggle svg {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bn-float-sidebar.is-collapsed .bn-float-sidebar-toggle svg {
        transform: rotate(180deg);
    }

    /* ── Dark theme (Binance) ── */
    [data-bs-theme="dark"] .bn-float-sidebar {
        background: linear-gradient(180deg, rgba(30, 35, 41, 0.98) 0%, rgba(11, 14, 17, 0.98) 100%);
        border-color: rgba(252, 213, 53, 0.18);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
    }

    [data-bs-theme="dark"] .bn-float-sidebar:hover {
        border-color: rgba(252, 213, 53, 0.38);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.56);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item {
        color: rgba(234, 236, 239, 0.78);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item i {
        color: rgba(234, 236, 239, 0.82);
        background: rgba(252, 213, 53, 0.08);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item:hover {
        color: #fcd535;
        background: rgba(252, 213, 53, 0.1);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item:hover i {
        color: #fcd535;
        background: rgba(252, 213, 53, 0.15);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item::after {
        background: rgba(132, 142, 156, 0.2);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-toggle {
        color: rgba(234, 236, 239, 0.78);
        border-top-color: rgba(132, 142, 156, 0.2);
    }

    [data-bs-theme="dark"] .bn-float-sidebar-toggle:hover {
        color: #fcd535;
        background-color: rgba(252, 213, 53, 0.12);
    }

    [data-bs-theme="dark"] .bn-float-sidebar.is-collapsed .bn-float-sidebar-toggle {
        border-top-color: transparent;
    }

    [data-bs-theme="dark"] .bn-float-sidebar-item:focus-visible,
    [data-bs-theme="dark"] .bn-float-sidebar-toggle:focus-visible {
        outline-color: rgba(252, 213, 53, 0.7);
    }
}

/* Wide desktop: slightly larger sidebar */
@media (min-width: 1440px) {
    .bn-float-sidebar {
        right: 32px;
        width: 82px;
    }

    .bn-float-sidebar-item {
        min-height: 76px;
    }

    .bn-float-sidebar-item span {
        max-width: 64px;
    }
}

/* Compact for narrower desktop (992–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bn-float-sidebar {
        right: 16px;
        width: 72px;
        border-radius: 22px;
    }

    .bn-float-sidebar-item {
        min-height: 66px;
        padding: 9px 6px;
        font-size: 11px;
    }

    .bn-float-sidebar-item i {
        width: 26px;
        height: 26px;
        font-size: 19px;
    }

    .bn-float-sidebar-item span {
        max-width: 56px;
    }
}


/* ================================================================
   8. FORMS & INPUTS
   ================================================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-md);
    color: var(--bn-ink);
    background-color: var(--bn-canvas-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    padding: 8px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--bn-info);
    box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.15);
    outline: none;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] textarea {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-on-dark);
    border-color: var(--bn-hairline-on-dark);
}

/* Search form */
.search-form .form-control,
.searchform input[type="search"] {
    border-radius: var(--bn-radius-xl);
}


/* ── Article TOC (h-navList) — Binance Design System ── */

.h-navList {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    padding: 20px 24px;
    font-family: var(--bn-font-body);
}

.h-navList li {
    position: relative;
    padding: 4px 0 4px 12px;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
}

.h-navList li a {
    color: var(--bn-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.h-navList li a:hover {
    color: var(--bn-primary);
    text-decoration: none;
}

.h-navList li.active {
    border-left-color: var(--bn-primary);
    background-color: var(--bn-canvas-light);
}

.h-navList li.active > a {
    color: var(--bn-primary);
    font-weight: 600;
}

/* Indentation per heading level */
.h-navList .nav-h1 { padding-left: 12px; }
.h-navList .nav-h2 { padding-left: 12px; }
.h-navList .nav-h3 { padding-left: 24px; font-size: 0.9em; }
.h-navList .nav-h4 { padding-left: 36px; font-size: 0.85em; }
.h-navList .nav-h5 { padding-left: 48px; font-size: 0.8em; }
.h-navList .nav-h6 { padding-left: 60px; font-size: 0.8em; }

/* Dark theme */
[data-bs-theme="dark"] .h-navList {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .h-navList li a {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .h-navList li a:hover {
    color: var(--bn-primary-active);
}

[data-bs-theme="dark"] .h-navList li.active {
    border-left-color: var(--bn-primary-active);
    background-color: rgba(240, 185, 11, 0.08);
}

[data-bs-theme="dark"] .h-navList li.active > a {
    color: var(--bn-primary-active);
}


/* ================================================================
   9. SINGLE POST / PAGE
   ================================================================ */

.single-content,
.entry-content,
.page-content,
article .post-content {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-md);
    line-height: var(--bn-lh-body);
    color: var(--bn-ink);
}

[data-bs-theme="dark"] .single-content,
[data-bs-theme="dark"] .entry-content,
[data-bs-theme="dark"] .page-content,
[data-bs-theme="dark"] article .post-content {
    color: var(--bn-on-dark);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: var(--bn-font-display);
    font-weight: 500;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

.entry-content blockquote,
.post-content blockquote {
    border-left: 3px solid var(--bn-primary);
    padding: var(--bn-space-lg) var(--bn-space-lg);
    margin: var(--bn-space-lg) 0;
    background-color: rgba(var(--bn-primary-rgb), 0.04);
    border-radius: 0 var(--bn-radius-lg) var(--bn-radius-lg) 0;
    color: var(--bn-muted);
    font-style: italic;
}

[data-bs-theme="dark"] .entry-content blockquote,
[data-bs-theme="dark"] .post-content blockquote {
    background-color: rgba(240, 185, 11, 0.08);
    color: var(--bn-muted-strong);
}

.entry-content img,
.post-content img {
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-subtle);
}

.entry-content pre,
.post-content pre {
    background-color: var(--bn-ink);
    color: var(--bn-muted-strong);
    border-radius: var(--bn-radius-lg);
    padding: var(--bn-space-lg);
    font-family: var(--bn-font-number);
    font-size: var(--bn-fs-body-sm);
    line-height: var(--bn-lh-body);
    overflow-x: auto;
}

.entry-content code,
.post-content code {
    font-family: var(--bn-font-number);
    font-size: var(--bn-fs-body-sm);
    background-color: rgba(var(--bn-primary-rgb), 0.08);
    color: var(--bn-primary);
    padding: 2px 6px;
    border-radius: var(--bn-radius-sm);
}

.entry-content pre code,
.post-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Tables inside content */
.entry-content table,
.post-content table {
    border-color: var(--bn-hairline-on-light);
}

.entry-content th,
.post-content th {
    background-color: var(--bn-hairline-on-light);
    color: var(--bn-ink);
    font-weight: 500;
}


/* ================================================================
   10. COMMENTS
   ================================================================ */

.comment-list .comment {
    border-bottom: none;
    padding: 0;
}

[data-bs-theme="dark"] .comment-list .comment {
    border-bottom-color: var(--bn-hairline-on-dark);
}

/* Comment inner layout */
.comment-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Comment avatar */
.comment-inner .comment-author {
    flex-shrink: 0;
}

.comment-inner .comment-author img,
.comment-list .comment .comment-author img {
    border-radius: var(--bn-radius-lg);
    box-shadow: 0 0 0 1px var(--bn-hairline-on-light);
    width: 40px;
    height: 40px;
    object-fit: cover;
}

[data-bs-theme="dark"] .comment-inner .comment-author img,
[data-bs-theme="dark"] .comment-list .comment .comment-author img {
    box-shadow: 0 0 0 1px var(--bn-hairline-on-dark);
}

/* Comment body */
.comment-inner .comment-body {
    flex: 1;
    min-width: 0;
}

/* Nickname */
.comment-inner .nickname,
.comment-list .comment .nickname {
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-body-sm);
    color: var(--bn-ink);
    line-height: var(--bn-lh-snug);
}

[data-bs-theme="dark"] .comment-inner .nickname,
[data-bs-theme="dark"] .comment-list .comment .nickname {
    color: var(--bn-on-dark);
}

/* Comment text content */
.comment-inner .comment-content,
.comment-list .comment .comment-content {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    color: var(--bn-ink);
    line-height: var(--bn-lh-body);
    margin-top: 4px;
}

[data-bs-theme="dark"] .comment-inner .comment-content,
[data-bs-theme="dark"] .comment-list .comment .comment-content {
    color: var(--bn-muted-strong);
}

/* Comment meta (time + reply) */
.comment-inner .comment-meta,
.comment-list .comment .comment-meta {
    color: var(--bn-muted-strong);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-inner .comment-time,
.comment-list .comment .comment-time {
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-caption);
}

/* Reply link */
.comment-inner .comment-reply-link,
.comment-list .comment .comment-reply-link {
    color: var(--bn-primary) !important;
    font-size: var(--bn-fs-caption);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-inner .comment-reply-link:hover,
.comment-list .comment .comment-reply-link:hover {
    color: var(--bn-primary-active) !important;
}

[data-bs-theme="dark"] .comment-inner .comment-reply-link,
[data-bs-theme="dark"] .comment-list .comment .comment-reply-link {
    color: var(--bn-primary-active) !important;
}

.comment-list .comment .comment-author {
    font-family: var(--bn-font-body);
    font-weight: 500;
    color: var(--bn-ink);
}

.comment-form textarea {
    border-radius: var(--bn-radius-xl);
}

/* Comment form fields — Binance surfaces.
 * Wave 5.4: scoped via #comments (the WP container id). The original
 * `.comments-area` class is never emitted by the child template, so the
 * compound selector was always dead. */
#comments .comment-form input[type="text"],
#comments .comment-form input[type="email"],
#comments .comment-form input[type="url"],
#comments .comment-form textarea {
    background-color: var(--bn-canvas-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    color: var(--bn-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#comments .comment-form input[type="text"]:focus,
#comments .comment-form input[type="email"]:focus,
#comments .comment-form input[type="url"]:focus,
#comments .comment-form textarea:focus {
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 3px rgba(var(--bn-primary-rgb), 0.15);
    outline: none;
}

.comment-form .submit,
.comment-form .btn {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
    border: none;
    border-radius: var(--bn-radius-md);
}

.comment-form .submit:hover,
.comment-form .btn:hover {
    background-color: var(--bn-primary-active) !important;
}

/* 文章内 Tab 导航（详情 / FAQ / 评论） */
.single-content-nav {
    margin-bottom: var(--bn-space-lg);
    padding: var(--bn-space-sm);
    background-color: var(--bn-canvas-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-subtle);
}

.single-content-nav .nav-pills .nav-link {
    border-radius: var(--bn-radius-lg);
    color: var(--bn-ink);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.single-content-nav .nav-pills .nav-link:hover {
    color: var(--bn-primary);
    background-color: rgba(var(--bn-primary-rgb), 0.08);
}

.single-content-nav .nav-pills .nav-link.active {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

[data-bs-theme="dark"] .single-content-nav {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .single-content-nav .nav-pills .nav-link {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .single-content-nav .nav-pills .nav-link.active {
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
}

/* —— 评论区：Binance 分层 —— 外层 parchment 框 + 内层 #comments 象牙卡片 —— */
#pills-comments {
    margin-top: var(--bn-space-lg);
    padding: var(--bn-space-lg);
    background-color: var(--bn-canvas-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: none;
}

/* WordPress 核心容器 id=comments —— 主视觉卡片 (Wave 5.4: drop dead .comments-area) */
#pills-comments #comments,
.content-wrapper > #comments {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-subtle), rgba(0, 0, 0, 0.06) 0 4px 20px;
    padding: var(--bn-space-lg) var(--bn-space-xl);
    margin: 0;
    font-family: var(--bn-font-body);
    color: var(--bn-ink);
}

.content-wrapper > #comments {
    margin-top: var(--bn-space-lg);
}

#comments .comments-title,
#comments #reply-title,
#comments .comment-reply-title {
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-title-md);
    line-height: var(--bn-lh-snug);
    color: var(--bn-ink);
    margin-bottom: var(--bn-space-xl);
    padding-bottom: var(--bn-space-md);
    border-bottom: 1px solid var(--bn-hairline-on-light);
}

#comments .comments-title small,
#comments .comments-title .small {
    color: var(--bn-muted-strong);
    font-family: var(--bn-font-body);
    font-weight: 400;
}

/* Reply title ("提示：请文明发言") */
.comment-respond #reply-title,
.comment-respond .comment-reply-title {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    font-weight: 400;
    color: var(--bn-muted-strong);
    border-bottom: none;
    margin-bottom: var(--bn-space-sm);
    padding-bottom: 0;
}

#pills-comments .comment-respond,
.content-wrapper .comment-respond {
    background-color: var(--bn-canvas-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: var(--bn-space-xl) var(--bn-space-lg);
    margin-top: var(--bn-space-xl);
}

#pills-comments .comment-list > .comment,
.content-wrapper .comment-list > .comment {
    background-color: rgba(234, 236, 239, 0.45);
    border: 1px solid var(--bn-hairline-on-light);
    border-bottom: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    padding: var(--bn-space-lg) var(--bn-space-xl);
    margin-bottom: var(--bn-space-md);
}

#pills-comments .comment-list .children > .comment,
.content-wrapper .comment-list .children > .comment {
    background-color: rgba(250, 249, 245, 0.85);
    border-radius: var(--bn-radius-lg);
}

#pills-comments .comment-list > .comment:last-of-type,
.content-wrapper .comment-list > .comment:last-of-type {
    margin-bottom: 0;
}

/* —— 上一篇 / 下一篇 —— */
/* Legacy .entry-navigation rules removed. Single-post prev/next now uses
   .bn-post-nav markup from ripro-child/template-parts/single/entry-navigation.php
   and is styled exclusively in assets/css/single-article.css (§ 9). */

/* Dark: 评论区 + 文章导航 */
[data-bs-theme="dark"] #pills-comments {
    background-color: rgba(43, 49, 57, 0.5);
    border-color: var(--bn-hairline-on-dark);
    box-shadow: none;
}

[data-bs-theme="dark"] #pills-comments #comments,
[data-bs-theme="dark"] .content-wrapper > #comments {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    box-shadow: rgba(0, 0, 0, 0.25) 0 6px 28px;
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] #comments .comments-title,
[data-bs-theme="dark"] #comments #reply-title,
[data-bs-theme="dark"] #comments .comment-reply-title {
    color: var(--bn-on-dark);
    border-bottom-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] #comments .comment-form input[type="text"],
[data-bs-theme="dark"] #comments .comment-form input[type="email"],
[data-bs-theme="dark"] #comments .comment-form input[type="url"],
[data-bs-theme="dark"] #comments .comment-form textarea {
    background-color: rgba(11, 14, 17, 0.55) !important;
    border-color: var(--bn-hairline-on-dark) !important;
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] #comments .comment-form input:focus,
[data-bs-theme="dark"] #comments .comment-form textarea:focus {
    border-color: var(--bn-primary-active) !important;
    box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.2) !important;
}

[data-bs-theme="dark"] #pills-comments .comment-respond,
[data-bs-theme="dark"] .content-wrapper .comment-respond {
    background-color: rgba(11, 14, 17, 0.45);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] #pills-comments .comment-list > .comment,
[data-bs-theme="dark"] .content-wrapper .comment-list > .comment {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] #pills-comments .comment-list .children > .comment,
[data-bs-theme="dark"] .content-wrapper .comment-list .children > .comment {
    background-color: rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .comment-list .comment .comment-author {
    color: var(--bn-on-dark);
}

/* Legacy dark .entry-navigation rules removed (superseded by single-article.css § 9). */

[data-bs-theme="dark"] .comment-respond #reply-title,
[data-bs-theme="dark"] .comment-respond .comment-reply-title {
    color: var(--bn-muted-strong) !important;
}

/* Comments responsive */
@media (max-width: 767.98px) {
    #pills-comments #comments,
    .content-wrapper > #comments {
        padding: var(--bn-space-lg) var(--bn-space-lg);
    }

    #pills-comments .comment-respond,
    .content-wrapper .comment-respond {
        padding: var(--bn-space-lg);
    }

    #pills-comments .comment-list > .comment,
    .content-wrapper .comment-list > .comment {
        padding: var(--bn-space-md) var(--bn-space-lg) !important;
    }

    .comment-inner {
        gap: 10px;
    }

    .comment-inner .comment-author img,
    .comment-list .comment .comment-author img {
        width: 32px;
        height: 32px;
    }
}


/* ================================================================
   10b. USER CENTER — moved to assets/css/user-center.css
   ----------------------------------------------------------------
   The full premium UC styling (sidebar hero, menu, profile/coin/vip/
   order/down/fav/aff/ticket/tougao subpages, hover states, mobile
   chip nav, dark theme, focus rings, reduced-motion) now lives in
   `assets/css/user-center.css`, route-scoped via `inc/enqueue.php`
   (loads only when `get_query_var('uc-page')` is truthy).

   Why removed here:
   - The previous selectors `.uc-page-wrap` and `.uc-content-wrap`
     don't appear in any `template-parts/user/` HTML — parent only
     adds `body.uc-page` (see ripro-v5/inc/template-filter.php), so
     the rules above never matched and were dead CSS.
   - The `.uc-menu-warp` rules here clashed with the new design
     (e.g. left-border indicator vs sliding ::before bar) and have
     been re-implemented under `body.uc-page` scope in user-center.css.

   If you need to restore a quick fallback before the new module
   loads (e.g. critical CSS), prefix selectors with `body.uc-page`.
   ================================================================ */


/* ================================================================
   11. ARCHIVE & FILTER
   ================================================================ */

.archive-hero {
    background-color: var(--bn-on-dark);
    border-bottom: 1px solid var(--bn-hairline-on-light);
    padding: var(--bn-space-xl) 0;
}

[data-bs-theme="dark"] .archive-hero {
    background-color: var(--bn-surface-card-dark);
    border-bottom-color: var(--bn-hairline-on-dark);
}

.archive-hero h1,
.archive-hero .archive-title {
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-display-lg);
    line-height: var(--bn-lh-snug);
}

.archive-filter .filter-item a,
.archive-filter .nav-link {
    color: var(--bn-muted);
    font-size: var(--bn-fs-body-sm);
    border-radius: var(--bn-radius-lg);
    padding: var(--bn-space-sm) var(--bn-space-sm);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.archive-filter .filter-item a:hover,
.archive-filter .filter-item a.active,
.archive-filter .nav-link:hover,
.archive-filter .nav-link.active {
    color: var(--bn-primary);
    background-color: rgba(var(--bn-primary-rgb), 0.06);
}


/* ================================================================
   12. PAGINATION
   ================================================================ */

.pagination .page-link,
.page-numbers {
    color: var(--bn-ink);
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    padding: var(--bn-space-sm) var(--bn-space-sm);
    margin: 0 3px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pagination .page-link:hover,
.page-numbers:hover {
    color: var(--bn-primary);
    background-color: rgba(var(--bn-primary-rgb), 0.06);
    border-color: var(--bn-primary);
}

.pagination .page-item.active .page-link,
.page-numbers.current {
    background-color: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: var(--bn-on-dark) !important;
}

[data-bs-theme="dark"] .pagination .page-link,
[data-bs-theme="dark"] .page-numbers {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    color: var(--bn-muted-strong);
}


/* ================================================================
   13. OFF-CANVAS / MOBILE MENU
   ================================================================ */

.off-canvas {
    background-color: var(--bn-on-dark);
    z-index: 1050 !important;
}

[data-bs-theme="dark"] .off-canvas {
    background-color: var(--bn-surface-card-dark);
}

.off-canvas a {
    color: var(--bn-ink);
    font-family: var(--bn-font-body);
}

.off-canvas a:hover {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .off-canvas a {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .off-canvas a:hover {
    color: var(--bn-primary-active);
}

.dimmer {
    background-color: rgba(11, 14, 17, 0.5);
    z-index: 1049 !important;
}

/* ri.popup() (site notify, etc.): parent .ri-popup is z-index 999 — must sit above child .dimmer (1049) / .off-canvas (1050) */
body.ri-popup-open .ri-popup {
    z-index: 1060 !important;
}


/* ================================================================
   14. MOBILE BOTTOM NAVBAR
   ================================================================ */

.m-navbar {
    background-color: var(--bn-on-dark);
    border-top: 1px solid var(--bn-hairline-on-light);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}

[data-bs-theme="dark"] .m-navbar {
    background-color: var(--bn-surface-card-dark);
    border-top-color: var(--bn-hairline-on-dark);
}

.m-navbar a {
    color: var(--bn-muted);
    font-size: var(--bn-fs-caption);
}

.m-navbar a:hover,
.m-navbar a.active {
    color: var(--bn-primary);
}

[data-bs-theme="dark"] .m-navbar a {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .m-navbar a:hover,
[data-bs-theme="dark"] .m-navbar a.active {
    color: var(--bn-primary-active);
}


/* ================================================================
   15. SHOP / PAY / VIP – Visual only, logic untouched
   ================================================================ */

.shop-pay-box,
.pay-box {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
}

[data-bs-theme="dark"] .shop-pay-box,
[data-bs-theme="dark"] .pay-box {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

.price-tag,
.meta-price {
    color: var(--bn-primary);
    font-weight: 500;
}

/* User center / profile pages */
.uc-content .card,
.uc-content .panel {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
}

[data-bs-theme="dark"] .uc-content .card,
[data-bs-theme="dark"] .uc-content .panel {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

/* User VIP badge — header avatar & comments (Binance terracotta) */
.bn-vip-badge.badge {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
    letter-spacing: 0.12px;
    border-radius: var(--bn-radius-md);
    padding: 2px 8px;
    line-height: 1.5;
}

.bn-vip-badge.badge.bg-success {
    background: transparent !important;
    border: 1px solid var(--bn-primary);
    color: var(--bn-primary) !important;
}

.bn-vip-badge.badge.bg-warning {
    background: var(--bn-primary) !important;
    border: 1px solid var(--bn-primary);
    color: var(--bn-on-primary) !important;
}

[data-bs-theme="dark"] .bn-vip-badge.badge.bg-success {
    border-color: var(--bn-primary-active);
    color: var(--bn-primary-active) !important;
}

[data-bs-theme="dark"] .bn-vip-badge.badge.bg-warning {
    background: var(--bn-primary-active) !important;
    border-color: var(--bn-primary-active);
    color: var(--bn-on-primary) !important;
}


/* ================================================================
   16. UTILITY OVERRIDES (Bootstrap bg-* and text-*)
   ================================================================ */

.bg-light {
    background-color: var(--bn-on-dark) !important;
}

.bg-dark {
    background-color: var(--bn-ink) !important;
}

.bg-primary {
    background-color: var(--bn-primary) !important;
}

.bg-secondary {
    background-color: var(--bn-muted) !important;
}

.bg-white {
    background-color: var(--bn-canvas-light) !important;
}

.text-primary {
    color: var(--bn-primary) !important;
}

.text-dark {
    color: var(--bn-ink) !important;
}

.text-light {
    color: var(--bn-on-dark) !important;
}

.text-white {
    color: var(--bn-on-dark) !important;
}

.border {
    border-color: var(--bn-hairline-on-light) !important;
}

[data-bs-theme="dark"] .border {
    border-color: var(--bn-hairline-on-dark) !important;
}

.border-white {
    border-color: var(--bn-on-dark) !important;
}

.shadow,
.shadow-sm {
    box-shadow: var(--bn-shadow-subtle) !important;
}


/* ================================================================
   17. CARD COMPONENT (Bootstrap .card)
   ================================================================ */

.card {
    background-color: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
}

.card:hover {
    box-shadow: var(--bn-shadow-focus);
}

[data-bs-theme="dark"] .card {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

.card-header {
    background-color: var(--bn-hairline-on-light);
    border-bottom-color: var(--bn-hairline-on-light);
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(255,255,255,0.04);
    border-bottom-color: var(--bn-hairline-on-dark);
}

.card-body {
    padding: var(--bn-space-lg);
}

.card-title {
    font-family: var(--bn-font-display);
    font-weight: 500;
}


/* ================================================================
   18. ALERTS & NOTIFICATIONS
   ================================================================ */

.alert {
    border-radius: var(--bn-radius-lg);
    font-family: var(--bn-font-body);
}

.alert-primary {
    background-color: rgba(var(--bn-primary-rgb), 0.08);
    border-color: rgba(var(--bn-primary-rgb), 0.2);
    color: #8b4e30;
}

.alert-danger {
    background-color: rgba(181, 51, 51, 0.08);
    border-color: rgba(181, 51, 51, 0.2);
    color: #8b2222;
}

.alert-success {
    background-color: rgba(122, 140, 110, 0.12);
    border-color: rgba(122, 140, 110, 0.25);
    color: #4d5c43;
}

.alert-warning {
    background-color: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.25);
    color: #7a6430;
}

.alert-info {
    background-color: rgba(135, 134, 127, 0.1);
    border-color: rgba(135, 134, 127, 0.2);
    color: var(--bn-muted);
}


/* ================================================================
   19. TABLES
   ================================================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bn-hairline-on-light);
    color: var(--bn-ink);
}

.table thead th {
    background-color: var(--bn-hairline-on-light);
    color: var(--bn-ink);
    font-family: var(--bn-font-body);
    font-weight: 500;
    font-size: var(--bn-fs-body-sm);
    border-bottom-color: var(--bn-hairline-on-light);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-striped-bg: rgba(245, 244, 237, 0.5);
}

[data-bs-theme="dark"] .table {
    --bs-table-border-color: var(--bn-hairline-on-dark);
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-muted-strong);
}


/* ================================================================
   20. RESPONSIVE DESIGN
   ================================================================ */

/* ── Small Mobile (<479px) ── */
@media (max-width: 575.98px) {
    h1 { font-size: 1.6rem; line-height: var(--bn-lh-snug); }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }

    .home-widget {
        margin-bottom: var(--bn-space-lg);
    }

    .home-widget .widget-title,
    .home-widget .home-title {
        font-size: var(--bn-fs-title-md);
    }

    .site-footer {
        margin-top: 40px !important;
    }
}

/* ── Mobile (480px – 640px) ── */
@media (min-width: 576px) and (max-width: 640px) {
    h1 { font-size: 1.8rem; line-height: var(--bn-lh-snug); }
    h2 { font-size: 1.5rem; }

    .home-widget {
        margin-bottom: var(--bn-space-lg);
    }
}

/* ── Large Mobile (641px – 767px) ── */
@media (min-width: 641px) and (max-width: 767.98px) {
    h1 { font-size: 2.2rem; line-height: var(--bn-lh-snug); }
    h2 { font-size: 1.75rem; }

    .home-widget {
        margin-bottom: var(--bn-space-lg);
    }
}

/* ── Tablet (768px – 991px) ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    h1 { font-size: 2.6rem; line-height: var(--bn-lh-tight); }
    h2 { font-size: 2rem; }

    .home-widget {
        margin-bottom: var(--bn-space-lg);
    }

    .home-widget .widget-title,
    .home-widget .home-title {
        font-size: var(--bn-fs-display-sm);
    }
}

/* ── Desktop (992px+) ── */
@media (min-width: 992px) {
    h1 { font-size: var(--bn-fs-hero); line-height: var(--bn-lh-tight); }
    h2 { font-size: var(--bn-fs-display-lg); line-height: var(--bn-lh-snug); }

    .home-widget {
        margin-bottom: var(--bn-space-lg);
    }

    .container {
        max-width: 1280px;
    }
}

/* ── Touch target minimum ── */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .action-btn,
    .nav-link,
    .page-link,
    .page-numbers {
        min-height: 44px;
        min-width: 44px;
    }
}


/* ================================================================
   21. TRANSITIONS & ANIMATIONS
   ================================================================ */

.post-item,
.btn,
.card,
.widget,
.action-btn,
.nav-link,
a {
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   22. SCROLLBAR (subtle warm styling)
   ================================================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bn-canvas-light);
}

::-webkit-scrollbar-thumb {
    background: var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bn-muted);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bn-canvas-dark);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bn-surface-card-dark);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bn-ink);
}


/* ================================================================
   23. PRINT STYLES
   ================================================================ */

@media print {
    body {
        background-color: #fff !important;
        color: #000 !important;
    }

    .site-header,
    .site-footer,
    .back-top,
    .m-navbar,
    .off-canvas,
    .dimmer {
        display: none !important;
    }

    .post-item,
    .card,
    .widget {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}


/* ================================================================
   24. SSCMS WECHAT LOGIN TABS & QR
   ================================================================ */

/* Tab bar */
.sscms-login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--bn-space-lg, 24px);
    border-bottom: 2px solid var(--bn-hairline-on-light);
}

.sscms-tab-btn {
    flex: 1;
    padding: var(--bn-space-sm, 12px) var(--bn-space-lg, 16px);
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-md, 14px);
    font-weight: 500;
    color: var(--bn-muted-strong);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.sscms-tab-btn:hover {
    color: var(--bn-ink);
}

.sscms-tab-btn.active {
    color: var(--bn-primary);
    border-bottom-color: var(--bn-primary);
}

.sscms-tab-btn i {
    margin-right: 6px;
}

/* Panels */
.sscms-tab-panel {
    display: none;
}

.sscms-tab-panel.active {
    display: block;
}

/* QR container */
.sscms-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--bn-space-xl, 30px) var(--bn-space-lg, 24px);
    min-height: 320px;
}

.sscms-qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-space-sm, 12px);
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-body-sm, 0.94rem);
}

.sscms-qr-loading i {
    font-size: 1.5rem;
    color: var(--bn-primary);
}

.sscms-qr-image,
.sscms-qr-canvas {
    width: 220px;
    height: 220px;
    border-radius: var(--bn-radius-lg, 8px);
    border: 1px solid var(--bn-hairline-on-light);
    box-shadow: var(--bn-shadow-subtle, rgba(0,0,0,0.05) 0px 4px 24px);
    transition: opacity 0.3s ease;
    overflow: hidden;
}
.sscms-qr-canvas img,
.sscms-qr-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.sscms-qr-hint {
    margin-top: var(--bn-space-lg, 16px);
    margin-bottom: 0;
    font-size: var(--bn-fs-caption, 0.88rem);
    color: var(--bn-muted);
    text-align: center;
}

.sscms-qr-status {
    margin-top: var(--bn-space-sm, 12px);
    font-size: var(--bn-fs-body-sm, 0.94rem);
    font-weight: 500;
    text-align: center;
}

.sscms-qr-status i {
    margin-right: 4px;
}

.sscms-qr-refresh {
    margin-top: var(--bn-space-lg, 16px);
    background-color: var(--bn-hairline-on-light);
    color: var(--bn-ink);
    border: none;
    border-radius: var(--bn-radius-lg, 8px);
    padding: var(--bn-space-sm, 8px) var(--bn-space-lg, 16px);
    font-size: var(--bn-fs-body-sm, 0.94rem);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--bn-hairline-on-light) 0px 0px 0px 0px, var(--bn-hairline-on-light) 0px 0px 0px 1px;
    transition: background-color 0.2s ease;
}

.sscms-qr-refresh:hover {
    background-color: var(--bn-hairline-on-light);
}

/* Exclusive login mode */
.sscms-exclusive-login {
    color: var(--bn-ink);
}

.sscms-exclusive-intro {
    margin-bottom: var(--bn-space-xl, 20px);
    padding: var(--bn-space-lg, 24px);
    background-color: var(--bn-canvas-light, #ffffff);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl, 16px);
    box-shadow: var(--bn-shadow-subtle, rgba(0,0,0,0.05) 0px 4px 24px);
    text-align: center;
}

.sscms-exclusive-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--bn-space-sm, 12px);
    padding: var(--bn-space-xs, 6px) var(--bn-space-sm, 12px);
    color: var(--bn-primary);
    background-color: color-mix(in srgb, var(--bn-primary) 12%, transparent);
    border-radius: var(--bn-radius-xl, 24px);
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-caption, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.12px;
}

.sscms-exclusive-intro h3 {
    margin: 0 0 var(--bn-space-sm, 12px);
    color: var(--bn-ink);
    font-family: var(--bn-font-display, Georgia, serif);
    font-size: var(--bn-fs-title-md, 1.6rem);
    font-weight: 500;
    line-height: var(--bn-lh-heading, 1.3);
}

.sscms-exclusive-intro p {
    max-width: 28rem;
    margin: 0 auto;
    color: var(--bn-muted);
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-sm, 0.94rem);
    line-height: var(--bn-lh-body, 1.6);
}

.sscms-exclusive-login .sscms-qr-container {
    min-height: 300px;
    padding-top: var(--bn-space-lg, 24px);
    background-color: var(--bn-surface-soft-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl, 16px);
    box-shadow: var(--bn-shadow-focus, 0px 0px 0px 1px var(--bn-hairline-on-light));
}

.sscms-exclusive-login .sscms-qr-canvas {
    border-radius: var(--bn-radius-xl, 12px);
}

/* Dark theme */
[data-bs-theme="dark"] .sscms-login-tabs {
    border-bottom-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .sscms-tab-btn {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .sscms-tab-btn:hover {
    color: var(--bn-surface-soft-light);
}

[data-bs-theme="dark"] .sscms-tab-btn.active {
    color: var(--bn-primary-active);
    border-bottom-color: var(--bn-primary-active);
}

[data-bs-theme="dark"] .sscms-qr-image,
[data-bs-theme="dark"] .sscms-qr-canvas {
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .sscms-qr-refresh {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-muted-strong);
    box-shadow: none;
}

[data-bs-theme="dark"] .sscms-qr-refresh:hover {
    background-color: var(--bn-ink);
}

[data-bs-theme="dark"] .sscms-exclusive-login {
    color: var(--bn-surface-soft-light);
}

[data-bs-theme="dark"] .sscms-exclusive-intro,
[data-bs-theme="dark"] .sscms-exclusive-login .sscms-qr-container {
    background-color: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .sscms-exclusive-intro h3 {
    color: var(--bn-surface-soft-light);
}

[data-bs-theme="dark"] .sscms-exclusive-intro p {
    color: var(--bn-muted-strong);
}

/* Login page card: ensure bg-white uses Binance design in child theme */
.login-and-register .bg-white {
    background-color: var(--bn-surface-soft-light) !important;
}

[data-bs-theme="dark"] .login-and-register .bg-white {
    background-color: var(--bn-surface-card-dark) !important;
}

[data-bs-theme="dark"] .login-and-register .bg-white .small.bg-white {
    background-color: var(--bn-surface-card-dark) !important;
}


/* ── Login Page — UISDC-style two-column layout ────────────────── */

.bn-login-card {
    display: flex;
    max-width: 820px;
    margin: var(--bn-space-lg) auto;
    background: var(--bn-surface-soft-light);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    box-shadow: var(--bn-shadow-subtle);
}

.bn-login-card.no-hero {
    max-width: 440px;
}

/* Left column: hero image */
.bn-login-hero {
    flex: 0 0 50%;
    max-width: 50%;
    overflow: hidden;
    position: relative;
}

.bn-login-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Right column: login form */
.bn-login-form {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bn-login-form-inner {
    width: 100%;
    padding: var(--bn-space-xl) var(--bn-space-lg);
}

/* Header */
.bn-login-form-header {
    text-align: center;
    margin-bottom: var(--bn-space-lg);
}

.bn-login-logo {
    display: inline-block;
    margin-bottom: var(--bn-space-md);
}

.bn-login-logo img {
    height: 36px;
    width: auto;
}

.bn-login-title {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-md);
    font-weight: 600;
    color: var(--bn-ink);
    line-height: var(--bn-lh-title);
    margin: 0;
}

.bn-login-title span {
    color: var(--bn-muted);
    font-weight: 400;
    font-size: var(--bn-fs-body-md);
}

/* Suppress old sscms-exclusive-intro styles inside new layout */
.bn-login-card .sscms-exclusive-intro {
    display: none;
}

/* QR container refinement inside new layout */
.bn-login-card .sscms-qr-container {
    border: none;
    background: transparent;
    padding-top: 0;
}

.bn-login-card .sscms-exclusive-login .sscms-qr-container {
    border: 1px solid var(--bn-hairline-on-light);
    background: var(--bn-surface-soft-light);
    border-radius: var(--bn-radius-xl);
    padding: var(--bn-space-md);
}

/* Agreement link */
.bn-login-card .btn-link.text-primary {
    color: var(--bn-primary) !important;
}

/* ── Login Page — Dark mode (Binance) ──────────────────────────── */

[data-bs-theme="dark"] .bn-login-card {
    background: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    box-shadow: none;
}

[data-bs-theme="dark"] .bn-login-title {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-login-title span {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-login-card .sscms-exclusive-login .sscms-qr-container {
    background: var(--bn-surface-elevated-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-label {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-control {
    background-color: var(--bn-surface-elevated-dark);
    border-color: var(--bn-hairline-on-dark);
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-login-card .small.bg-white {
    background-color: var(--bn-surface-card-dark) !important;
}

/* ── Login Page — Responsive ───────────────────────────────────── */

@media (max-width: 767.98px) {
    .bn-login-hero {
        display: none;
    }

    .bn-login-card {
        max-width: 100%;
        margin: var(--bn-space-md);
        border-radius: var(--bn-radius-xl);
    }

    .bn-login-card.has-hero {
        max-width: 100%;
    }

    .bn-login-form-inner {
        padding: var(--bn-space-lg) var(--bn-space-md);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .bn-login-card {
        max-width: 700px;
    }

    .bn-login-hero {
        flex: 0 0 42%;
        max-width: 42%;
    }
}

@media (min-width: 992px) {
    .bn-login-form-inner {
        padding: var(--bn-space-xxl) var(--bn-space-xl);
    }
}

/* ── Popup Login — unified style inside ri-popup ───────────────── */

/* Widen the popup body to match our card width */
.ri-popup-body:has(.bn-popup-login) {
    max-width: 440px !important;
}

/* Card resets inside popup — strip margin/border since popup chrome handles the container */
.ri-popup-content .bn-popup-login {
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    max-width: none;
}

/* Zero out default popup padding when it contains our login card;
   the card's own inner padding provides spacing. */
.ri-popup-content:has(.bn-popup-login) {
    padding: 0;
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    background: var(--bn-surface-soft-light);
}

.ri-popup-content .bn-popup-login .bn-login-form-inner {
    padding: var(--bn-space-xl) var(--bn-space-lg);
    padding-bottom: var(--bn-space-lg);
}

.ri-popup-content .bn-popup-login .bn-login-form-header {
    margin-bottom: var(--bn-space-md);
}

.ri-popup-content .bn-popup-login .bn-login-logo {
    margin-bottom: var(--bn-space-sm);
}

.ri-popup-content .bn-popup-login .bn-login-logo img {
    height: 32px;
}

.ri-popup-content .bn-popup-login .bn-login-title {
    font-size: var(--bn-fs-title-sm);
}

/* Dark mode */
[data-bs-theme="dark"] .ri-popup-content:has(.bn-popup-login) {
    background: var(--bn-surface-card-dark) !important;
}

/* Small mobile screens */
@media (max-width: 575.98px) {
    .ri-popup-content .bn-popup-login .bn-login-form-inner {
        padding: var(--bn-space-lg) var(--bn-space-md);
    }
}


/* ================================================================
   17. VIP SYSTEM — Binance Design System
   ================================================================ */

/* ── Nav Action Buttons — unified system ── */

.bn-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1.5px solid transparent;
    border-radius: 9999px;
    font-family: var(--bn-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.bn-nav-icon {
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Primary (VIP) ── */
.bn-nav-btn--primary {
    background-color: var(--bn-primary);
    color: #000000;
    border-color: var(--bn-primary);
}

.bn-nav-btn--primary:hover {
    background-color: var(--bn-primary-active);
    border-color: var(--bn-primary-active);
    color: #000000;
}

.bn-nav-btn--primary:active {
    background-color: var(--bn-primary-active);
    color: #000000;
}

/* ── Secondary (Login) ── */
.bn-nav-btn--secondary {
    background-color: var(--bn-surface-strong-light);
    color: var(--bn-ink);
    border-color: var(--bn-hairline-on-light);
}

.bn-nav-btn--secondary:hover {
    background-color: var(--bn-hairline-on-light);
    color: var(--bn-ink);
}

[data-bs-theme="dark"] .bn-nav-btn--secondary {
    background-color: var(--bn-surface-elevated-dark);
    color: var(--bn-on-dark) !important;
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-nav-btn--secondary:hover {
    background-color: var(--bn-muted);
    border-color: var(--bn-muted);
    color: var(--bn-on-dark) !important;
}

/* ── Ghost (Community) ── */
.bn-nav-btn--ghost {
    background-color: transparent;
    color: var(--bn-ink);
    border-color: var(--bn-hairline-on-light);
}

.bn-nav-btn--ghost:hover {
    background-color: var(--bn-surface-strong-light);
    color: var(--bn-ink);
}

[data-bs-theme="dark"] .bn-nav-btn--ghost {
    background-color: transparent;
    color: var(--bn-on-dark) !important;
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-nav-btn--ghost:hover {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-on-dark) !important;
}

/* ── Responsive: tablet — icon only ── */
@media (max-width: 991.98px) {
    .bn-nav-label {
        display: none;
    }
    .bn-nav-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        border-radius: var(--bn-radius-md);
        gap: 0;
    }
}

/* ── Responsive: mobile — smaller buttons, hide community ── */
@media (max-width: 575.98px) {
    .bn-community-wrap {
        display: none !important;
    }
    .bn-nav-btn {
        width: 30px;
        height: 30px;
    }
    .bn-nav-icon {
        width: 14px;
        height: 14px;
    }
}

/* ── Transparent header overrides ── */
body.header-transparent .site-header:not(.navbar-sticky) .bn-nav-btn--secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

body.header-transparent .site-header:not(.navbar-sticky) .bn-nav-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

body.header-transparent .site-header:not(.navbar-sticky) .bn-nav-btn--ghost {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

body.header-transparent .site-header:not(.navbar-sticky) .bn-nav-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}


/* ── VIP Prices Page ── */

.bn-vip-page {
    background-color: var(--bn-canvas-light);
}

.bn-vip-hero {
    padding: 60px 0 40px;
    text-align: center;
}

.bn-vip-hero-inner {
    max-width: 560px;
    margin: 0 auto;
}

.bn-vip-hero-icon {
    color: var(--bn-primary);
    margin-bottom: 16px;
}

.bn-vip-hero-title {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-display-md);
    font-weight: 500;
    color: var(--bn-ink);
    line-height: var(--bn-lh-heading);
    margin-bottom: 8px;
}

.bn-vip-hero-desc {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-title-md);
    color: var(--bn-muted);
    line-height: var(--bn-lh-body);
    margin: 0;
}

.bn-vip-cards-section {
    padding-bottom: 60px;
}

.bn-vip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.bn-vip-card {
    position: relative;
    background: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    padding: 0 24px 28px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.bn-vip-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bn-shadow-subtle);
}

.bn-vip-card.is-featured {
    border-color: var(--bn-primary);
    box-shadow: 0px 0px 0px 1px var(--bn-primary);
}

.bn-vip-card.is-featured:hover {
    box-shadow: 0px 0px 0px 1px var(--bn-primary), var(--bn-shadow-subtle);
}

.bn-vip-card-accent {
    height: 4px;
    margin: 0 -24px;
    border-radius: 0;
}

.bn-vip-card-ribbon {
    position: absolute;
    top: 14px;
    right: -28px;
    padding: 3px 32px;
    background-color: var(--bn-primary);
    color: var(--bn-on-dark);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    z-index: 1;
}

.bn-vip-card-header {
    padding: 24px 0 8px;
}

.bn-vip-card-plan {
    display: block;
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-sm);
    font-weight: 500;
    color: var(--bn-ink);
    line-height: var(--bn-lh-snug);
    margin-bottom: 4px;
}

.bn-vip-card-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
}

.bn-vip-card-price {
    padding: 12px 0 8px;
}

.bn-vip-card-amount {
    font-family: var(--bn-font-display);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
}

.bn-vip-card-unit {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    margin-left: 4px;
    vertical-align: baseline;
}

.bn-vip-card-privilege {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted);
    margin: 0 0 16px;
}

.bn-vip-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
}

.bn-vip-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    color: var(--bn-ink);
    line-height: 1.4;
    border-top: 1px solid var(--bn-hairline-on-light);
}

.bn-vip-card-features li:first-child {
    border-top: none;
}

.bn-vip-card-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bn-vip-card-action {
    padding-top: 4px;
}

.bn-vip-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    background-color: var(--btn-accent, var(--bn-primary));
    color: var(--bn-on-dark);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-md);
    font-weight: 500;
    border: none;
    border-radius: var(--bn-radius-xl);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--btn-accent, var(--bn-primary)) 0px 0px 0px 0px,
                var(--btn-accent, var(--bn-primary)) 0px 0px 0px 1px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.bn-vip-card-btn:hover {
    opacity: 0.9;
    color: var(--bn-on-dark);
}

.bn-vip-card-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bn-muted-strong);
    box-shadow: none;
}

.bn-vip-faq-section {
    padding: 0 0 80px;
}

.bn-vip-faq-header {
    text-align: center;
    margin-bottom: 24px;
}

.bn-vip-faq-header h3 {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-title-md);
    font-weight: 500;
    color: var(--bn-ink);
    margin-bottom: 4px;
}

.bn-vip-faq-header p {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    margin: 0;
}

.bn-vip-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    max-width: 960px;
    margin: 0 auto;
}

.bn-vip-faq-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    color: var(--bn-ink);
    line-height: var(--bn-lh-body);
}

.bn-vip-faq-item svg {
    flex-shrink: 0;
    color: var(--bn-primary);
    margin-top: 3px;
}

/* VIP page dark mode */
[data-bs-theme="dark"] .bn-vip-page {
    background-color: var(--bn-canvas-dark);
}

[data-bs-theme="dark"] .bn-vip-hero-title {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-vip-hero-desc {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-vip-card {
    background: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-vip-card.is-featured {
    border-color: var(--bn-primary-active);
    box-shadow: 0px 0px 0px 1px var(--bn-primary-active);
}

[data-bs-theme="dark"] .bn-vip-card-plan {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-vip-card-duration {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-vip-card-privilege {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-vip-card-features li {
    color: var(--bn-muted-strong);
    border-top-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-vip-faq-header h3 {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-vip-faq-header p {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-vip-faq-item {
    background: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-vip-faq-item svg {
    color: var(--bn-primary-active);
}

@media (max-width: 767.98px) {
    .bn-vip-hero {
        padding: 40px 0 24px;
    }
    .bn-vip-hero-title {
        font-size: var(--bn-fs-display-sm);
    }
    .bn-vip-cards {
        grid-template-columns: 1fr;
    }
    .bn-vip-faq-grid {
        grid-template-columns: 1fr;
    }
    .bn-vip-faq-section {
        padding-bottom: 48px;
    }
}

/* Hide parent VIP page hero when child template is active */
.vip-prices-page .archive-hero {
    display: none;
}


/* ================================================================
   18. COMMUNITY QR BUTTON — Nav join-group with hover popup
   ================================================================ */

.bn-community-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
}

/* .bn-community-btn appearance now via .bn-nav-btn--ghost */

.bn-community-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bn-on-dark);
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-subtle), 0px 0px 0px 1px rgba(209, 207, 197, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease 0.12s, transform 0.18s ease 0.12s, visibility 0.18s ease 0.12s;
    z-index: 1040;
    pointer-events: none;
}

.bn-community-wrap::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -8px;
    right: -8px;
    height: 8px;
}

.bn-community-wrap:hover .bn-community-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.08s;
}

.bn-community-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: var(--bn-on-dark);
    border-top: 1px solid var(--bn-hairline-on-light);
    border-left: 1px solid var(--bn-hairline-on-light);
    transform: rotate(45deg);
}

.bn-community-popup::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -12px;
    right: -12px;
    height: 14px;
}

.bn-community-popup img {
    width: min(220px, calc(100vw - 72px));
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--bn-radius-xl);
    display: block;
    background: var(--bn-canvas-light);
}

.bn-community-tip {
    margin-top: 12px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    text-align: center;
    white-space: nowrap;
}

/* Dark mode — popup only (button itself via .bn-nav-btn--ghost) */
[data-bs-theme="dark"] .bn-community-popup {
    background: var(--bn-surface-card-dark);
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-community-popup::before {
    background: var(--bn-surface-card-dark);
    border-top-color: var(--bn-hairline-on-dark);
    border-left-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-community-tip {
    color: var(--bn-muted-strong);
}

@media (max-width: 991.98px) {
    .bn-community-popup {
        right: -10px;
        padding: 16px;
    }
    .bn-community-popup img {
        width: min(180px, calc(100vw - 48px));
    }
}

/* ================================================================
   推广中心 /user/aff/ — 佣金统计卡主金额
   与 bg-*.bg-opacity-25 同系 text-* 对比度过低时，金额易与背景融在一起
   ================================================================ */
body.binance-design .uc-aff-page .row .col .card > h4.fw-bold,
.uc-aff-page .row .col .card > h4.fw-bold {
    color: var(--bn-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


/* ================================================================
   VIDEO HERO — Binance Design Override
   Deep-dark immersive container, rounded corners, warm palette
   ================================================================ */

/* ── Hide parent archive-hero if it still renders ── */
.archive-hero.video-hero {
    display: none !important;
}

/* ── Outer wrapper ── */
.video-hero-binance {
    background-color: var(--bn-canvas-dark);
    padding: var(--bn-space-lg) 0;
}

/* ── Inner card container ── */
.video-hero-bn__inner {
    display: flex;
    gap: var(--bn-space-lg);
    background: var(--bn-canvas-dark);
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
    box-shadow: var(--bn-shadow-subtle);
    border: 1px solid var(--bn-hairline-on-dark);
}

/* ── Player column ── */
.video-hero-bn__player {
    flex: 1;
    min-width: 0;
}

.video-hero-bn__player .ri-video-warp {
    border-radius: 0;
    overflow: hidden;
}

.video-hero-bn__player .video-js {
    border-radius: 0;
}

/* ── Sidebar (episode list) ── */
.video-hero-bn__sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bn-surface-card-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.video-hero-bn__sidebar-header {
    padding: var(--bn-space-lg) var(--bn-space-lg) var(--bn-space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.video-hero-bn__sidebar-header i {
    color: var(--bn-primary-active);
    font-size: var(--bn-fs-body-sm);
}

.video-hero-bn__now-playing {
    color: var(--bn-on-dark);
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-body-md);
    line-height: var(--bn-lh-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.video-hero-bn__ep-count {
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-caption);
    margin-left: auto;
}

/* ── Episode navigation grid ── */
.video-hero-bn__sidebar .video-nav {
    padding: var(--bn-space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    align-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: var(--bn-hairline-on-light) transparent;
}

.video-hero-bn__sidebar .video-nav::-webkit-scrollbar {
    width: 4px;
}

.video-hero-bn__sidebar .video-nav::-webkit-scrollbar-track {
    background: transparent;
}

.video-hero-bn__sidebar .video-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.video-hero-bn__sidebar .video-nav .switch-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    border-radius: var(--bn-radius-lg);
    background: var(--bn-ink);
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-body-sm);
    font-family: var(--bn-font-body);
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    margin: 0;
}

.video-hero-bn__sidebar .video-nav .switch-video:hover {
    background: var(--bn-ink);
    color: var(--bn-on-dark);
    border-color: rgba(255, 255, 255, 0.12);
}

.video-hero-bn__sidebar .video-nav .switch-video.active {
    background: var(--bn-primary);
    color: var(--bn-on-dark);
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 1px var(--bn-primary), 0 2px 8px rgba(var(--bn-primary-rgb), 0.3);
}

.video-hero-bn__sidebar .video-nav .switch-video.active > span {
    display: none;
}

.video-hero-bn__sidebar .video-nav .switch-video.active::before {
    content: "";
    background: url(../../ripro-v5/assets/img/playing.gif) no-repeat center / cover;
    width: 16px;
    height: 16px;
}

/* ── Purchase overlay inside player ── */
.video-hero-binance .ri-video-view {
    position: relative;
}

.video-hero-binance .video-buy-warp {
    position: absolute;
    z-index: 1;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
}

.video-hero-binance .video-buy-warp .buy-title {
    color: var(--bn-on-dark);
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-title-md);
    margin-bottom: 1rem;
}

.video-hero-binance .video-buy-warp .buy-btns {
    margin-bottom: 1rem;
}

.video-hero-binance .video-buy-warp .buy-btns .btn {
    border-radius: var(--bn-radius-xl);
    font-family: var(--bn-font-body);
    font-weight: 500;
}

.video-hero-binance .video-buy-warp .buy-desc {
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-body-md);
    margin-top: 10px;
}

.video-hero-binance .video-buy-warp .prices-info {
    list-style: none;
    padding: 0.5rem 1rem;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--bn-on-dark);
    border-radius: var(--bn-radius-lg);
    position: relative;
    box-shadow: var(--bn-shadow-subtle);
}

.video-hero-binance .video-buy-warp .prices-info::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--bn-on-dark) transparent;
}

.video-hero-binance .video-buy-warp .prices-info .price-item {
    padding: 4px 8px;
    display: inline-block;
    line-height: 1.3;
    border-radius: var(--bn-radius-md);
    font-size: var(--bn-fs-caption);
}

.video-hero-binance .video-buy-warp .prices-info .price-item.default {
    color: var(--bn-trading-down);
}

.video-hero-binance .video-buy-warp .prices-info .price-item.no {
    color: var(--bn-muted);
}

.video-hero-binance .video-buy-warp .prices-info .price-item.vip {
    color: #0ecb81;
}

.video-hero-binance .video-buy-warp .prices-info .price-item.boosvip {
    color: var(--bn-primary);
}

.video-hero-binance .video-buy-warp .buy-count {
    margin-top: 1rem;
    color: var(--bn-muted-strong);
    font-size: var(--bn-fs-caption);
}

.video-hero-binance .video-buy-warp .buy-count span {
    color: var(--bn-primary-active);
    margin: 0 2px;
}

/* ── Dark theme adjustments ── */
[data-bs-theme="dark"] .video-hero-binance {
    background-color: var(--bn-canvas-dark);
}

[data-bs-theme="dark"] .video-hero-bn__inner {
    background: #1c1c1a;
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .video-hero-bn__sidebar {
    background: var(--bn-surface-card-dark);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .video-hero-bn__inner {
        flex-direction: column;
        border-radius: var(--bn-radius-xl);
    }

    .video-hero-bn__sidebar {
        width: 100%;
        max-height: none;
    }

    .video-hero-bn__sidebar .video-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--bn-space-sm);
        gap: 8px;
        scrollbar-width: none;
    }

    .video-hero-bn__sidebar .video-nav::-webkit-scrollbar {
        display: none;
    }

    .video-hero-bn__sidebar .video-nav .switch-video {
        flex-shrink: 0;
    }
}

@media (max-width: 575.98px) {
    .video-hero-binance {
        padding: var(--bn-space-sm) 0;
    }

    .video-hero-bn__inner {
        border-radius: var(--bn-radius-lg);
    }

    .video-hero-binance .video-buy-warp {
        transform: translate(-50%, -50%) scale(0.85);
    }

    .video-hero-bn__now-playing {
        max-width: 140px;
        font-size: var(--bn-fs-body-sm);
    }

    .video-hero-bn__sidebar .video-nav .switch-video {
        width: 44px;
        height: 30px;
        font-size: var(--bn-fs-caption);
    }
}


/* ================================================================
   SIDEBAR DOWNLOAD — Binance Design Override
   Warm card, rounded corners, terracotta accents
   ================================================================ */

/* ── Card container ── */
.ri-down-warp {
    position: relative !important;
    background: var(--bn-on-dark);
    border-radius: var(--bn-radius-xl);
    border: 1px solid var(--bn-hairline-on-light);
    box-shadow: var(--bn-shadow-subtle);
    overflow: hidden;
    padding: var(--bn-space-lg);
}

/* ── "下载" ribbon → rounded corner badge ── */
.ri-down-warp .down-msg {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    padding: 6px 14px 6px 12px;
    border-radius: 0 var(--bn-radius-xl) 0 var(--bn-radius-xl);
    background-color: var(--bn-primary) !important;
    color: var(--bn-on-dark) !important;
    font-size: var(--bn-fs-caption);
    font-family: var(--bn-font-body);
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* ── Title ("免费下载" / "已获得下载权限") ── */
.ri-down-warp .down-buy-warp .buy-title {
    color: var(--bn-primary) !important;
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: var(--bn-fs-title-sm);
    margin-bottom: var(--bn-space-lg);
    margin-top: var(--bn-space-sm);
}

.ri-down-warp .down-buy-warp .buy-title i {
    color: var(--bn-primary);
}

/* ── Download button (replaces btn-success) ── */
.ri-down-warp .down-buy-warp .btn-group .btn.btn-success {
    background-color: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: var(--bn-on-dark) !important;
    border-radius: var(--bn-radius-xl) 0 0 var(--bn-radius-xl) !important;
    font-family: var(--bn-font-body);
    font-weight: 500;
    font-size: var(--bn-fs-body-md);
    padding: 10px 16px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.ri-down-warp .down-buy-warp .btn-group .btn.btn-success:hover {
    background-color: var(--bn-primary-active) !important;
    border-color: var(--bn-primary-active) !important;
}

/* Single button (no password) — full rounded */
.ri-down-warp .down-buy-warp .btn-group:not(:has(.copy-pwd)) .btn.btn-success {
    border-radius: var(--bn-radius-xl) !important;
}

/* ── Password / copy button ── */
.ri-down-warp .down-buy-warp .copy-pwd.btn.btn-success {
    background-color: var(--bn-ink) !important;
    border-color: var(--bn-ink) !important;
    color: var(--bn-muted-strong) !important;
    opacity: 1 !important;
    border-radius: 0 var(--bn-radius-xl) var(--bn-radius-xl) 0 !important;
    font-family: var(--bn-font-body);
    font-weight: 500;
    font-size: var(--bn-fs-body-sm);
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.ri-down-warp .down-buy-warp .copy-pwd.btn.btn-success:hover {
    background-color: var(--bn-ink) !important;
    color: var(--bn-on-dark) !important;
}

/* ── Purchase box (price area) ── */
.ri-down-warp .down-buy-warp .buy-box {
    background-color: var(--bn-canvas-light) !important;
    margin: 0;
    margin-bottom: var(--bn-space-lg);
    border-radius: var(--bn-radius-xl);
    overflow: hidden;
}

.ri-down-warp .down-buy-warp .prices-desc {
    background-color: var(--bn-ink) !important;
    border-radius: var(--bn-radius-xl) var(--bn-radius-xl) 0 0;
    padding: 12px 16px;
}

.ri-down-warp .down-buy-warp .prices-desc::after {
    border-color: var(--bn-ink) transparent transparent transparent !important;
}

.ri-down-warp .down-buy-warp .prices-desc .prices-default {
    color: var(--bn-on-dark) !important;
}

.ri-down-warp .down-buy-warp .prices-desc .prices-default > span {
    font-family: var(--bn-font-display);
    font-weight: 500;
    color: var(--bn-primary-active);
}

/* VIP price items */
.ri-down-warp .down-buy-warp .buy-box .price-item .vip-rete-name {
    color: var(--bn-muted-strong) !important;
}

.ri-down-warp .down-buy-warp .buy-box .price-item > span {
    color: var(--bn-ink) !important;
    font-family: var(--bn-font-display);
    font-weight: 500;
}

/* Purchase button */
.ri-down-warp .down-buy-warp .buy-btns .btn.btn-danger {
    background-color: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: var(--bn-on-dark) !important;
    border-radius: var(--bn-radius-xl) !important;
    font-family: var(--bn-font-body);
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.ri-down-warp .down-buy-warp .buy-btns .btn.btn-danger:hover {
    background-color: var(--bn-primary-active) !important;
    border-color: var(--bn-primary-active) !important;
}

/* Login button */
.ri-down-warp .down-buy-warp .buy-btns .btn.btn-info {
    background-color: var(--bn-hairline-on-light) !important;
    border-color: var(--bn-hairline-on-light) !important;
    color: var(--bn-ink) !important;
    border-radius: var(--bn-radius-xl) !important;
    font-family: var(--bn-font-body);
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.ri-down-warp .down-buy-warp .buy-btns .btn.btn-info:hover {
    background-color: var(--bn-hairline-on-light) !important;
    box-shadow: var(--bn-shadow-focus);
}

/* Sales count */
.ri-down-warp .down-buy-warp .buy-count {
    color: var(--bn-muted-strong) !important;
    font-size: var(--bn-fs-caption);
}

.ri-down-warp .down-buy-warp .buy-count span {
    color: var(--bn-primary) !important;
}

/* ── Info section at bottom ── */
.ri-down-warp .down-buy-info {
    margin-top: var(--bn-space-sm);
}

.ri-down-warp .down-buy-info .btn.btn-secondary-soft {
    background-color: var(--bn-hairline-on-light) !important;
    border-color: var(--bn-hairline-on-light) !important;
    color: var(--bn-ink) !important;
    border-radius: var(--bn-radius-xl);
    font-family: var(--bn-font-body);
    font-weight: 500;
    transition: all 0.2s ease;
}

.ri-down-warp .down-buy-info .btn.btn-secondary-soft:hover {
    background-color: var(--bn-hairline-on-light) !important;
    color: var(--bn-ink) !important;
}

/* Meta list (最近更新, 包含资源, etc.) */
.ri-down-warp .down-buy-info .list-group.list-group-flush {
    border-radius: var(--bn-radius-lg);
    overflow: hidden;
    border: 1px solid var(--bn-hairline-on-light);
}

.ri-down-warp .down-buy-info .list-group-item {
    background-color: transparent;
    border-color: var(--bn-hairline-on-light);
    color: var(--bn-muted);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    padding: 8px 12px;
}

.ri-down-warp .down-buy-info .list-group-item span:first-child {
    color: var(--bn-muted-strong);
}

/* Footer text */
.ri-down-warp .down-buy-info > p.text-muted {
    color: var(--bn-muted-strong) !important;
    font-size: var(--bn-fs-caption);
    line-height: var(--bn-lh-body);
}

/* ── Prices info (timeline variant inside prices-info) ── */
.ri-down-warp .down-buy-warp .prices-info {
    border: 1px solid var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    background: var(--bn-canvas-light);
    padding: 8px 12px;
}

.ri-down-warp .down-buy-warp .prices-info .price-item::after {
    border-color: var(--bn-on-dark) !important;
}

.ri-down-warp .down-buy-warp .prices-info .price-item::before {
    background: var(--bn-hairline-on-light) !important;
}

.ri-down-warp .down-buy-warp .prices-info .price-item.default {
    color: var(--bn-trading-down) !important;
}
.ri-down-warp .down-buy-warp .prices-info .price-item.default::after {
    background-color: var(--bn-trading-down) !important;
}

.ri-down-warp .down-buy-warp .prices-info .price-item.no {
    color: var(--bn-muted) !important;
}
.ri-down-warp .down-buy-warp .prices-info .price-item.no::after {
    background-color: var(--bn-muted) !important;
}

.ri-down-warp .down-buy-warp .prices-info .price-item.vip {
    color: #0ecb81 !important;
}
.ri-down-warp .down-buy-warp .prices-info .price-item.vip::after {
    background-color: #0ecb81 !important;
}

.ri-down-warp .down-buy-warp .prices-info .price-item.boosvip {
    color: var(--bn-primary) !important;
}
.ri-down-warp .down-buy-warp .prices-info .price-item.boosvip::after {
    background-color: var(--bn-primary) !important;
}

/* ── Dark theme ── */
[data-bs-theme="dark"] .ri-down-warp {
    background: var(--bn-surface-card-dark) !important;
    border-color: var(--bn-hairline-on-dark) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .buy-title {
    color: var(--bn-primary-active) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .buy-box {
    background-color: var(--bn-ink) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .buy-box .price-item > span {
    color: var(--bn-on-dark) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .buy-box .price-item .vip-rete-name {
    color: var(--bn-muted-strong) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-info .list-group-item {
    border-color: var(--bn-hairline-on-dark) !important;
    color: var(--bn-muted-strong) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-info .list-group.list-group-flush {
    border-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .prices-info {
    border-color: var(--bn-hairline-on-dark) !important;
    background: var(--bn-ink) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .prices-info .price-item::before {
    background: var(--bn-hairline-on-dark) !important;
}

[data-bs-theme="dark"] .ri-down-warp .down-buy-warp .prices-info .price-item::after {
    border-color: var(--bn-surface-card-dark) !important;
}

/* ── In-content download box (inside .post-content) ── */
.post-content .ri-down-warp {
    background: var(--bn-on-dark) !important;
    border-radius: var(--bn-radius-xl) !important;
    border: 1px solid var(--bn-hairline-on-light) !important;
}

[data-bs-theme="dark"] .post-content .ri-down-warp {
    background: var(--bn-surface-card-dark) !important;
    border-color: var(--bn-hairline-on-dark) !important;
}


/* ================================================================
   25. HOMEPAGE SLIDER — Aspect Ratio Control
   ================================================================ */

.bn-slider-2x1 .home-owl-slider .widget-slider-item {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.bn-slider-21x9 .home-owl-slider .widget-slider-item {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

.bn-slider-16x9 .home-owl-slider .widget-slider-item {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bn-slider-2x1 .home-owl-slider .widget-slider-item .slider-img,
.bn-slider-2x1 .home-owl-slider .widget-slider-item img.owl-lazy,
.bn-slider-21x9 .home-owl-slider .widget-slider-item .slider-img,
.bn-slider-21x9 .home-owl-slider .widget-slider-item img.owl-lazy,
.bn-slider-16x9 .home-owl-slider .widget-slider-item .slider-img,
.bn-slider-16x9 .home-owl-slider .widget-slider-item img.owl-lazy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bn-slider-2x1 .home-owl-slider .container-full .widget-slider .owl-stage-outer,
.bn-slider-21x9 .home-owl-slider .container-full .widget-slider .owl-stage-outer,
.bn-slider-16x9 .home-owl-slider .container-full .widget-slider .owl-stage-outer {
    border-radius: 0;
}

.bn-slider-2x1 .home-owl-slider .widget-slider-item .slider-warp,
.bn-slider-21x9 .home-owl-slider .widget-slider-item .slider-warp,
.bn-slider-16x9 .home-owl-slider .widget-slider-item .slider-warp {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--bn-space-lg) var(--bn-space-xl);
}

@media (max-width: 767.98px) {
    .bn-slider-2x1 .home-owl-slider .widget-slider-item {
        aspect-ratio: 2 / 1;
    }

    .bn-slider-21x9 .home-owl-slider .widget-slider-item {
        aspect-ratio: 21 / 9;
    }
}


/* ================================================================
   26. COMPACT HOME SPACING
   ================================================================ */

.bn-compact-home .home-widget {
    margin-bottom: 16px;
}

.bn-compact-home .home-owl-slider {
    margin-bottom: 10px;
}

.bn-compact-home .home-dynamic {
    margin-bottom: 10px;
}

.bn-compact-home .home-dynamic .container {
    padding-top: 8px;
    padding-bottom: 0;
}

.bn-compact-home .home-cat-box {
    margin-bottom: 12px;
}

.bn-compact-home .section-title.mb-4 {
    margin-bottom: 14px !important;
}

.bn-compact-home .section-cat-navbtn.mb-4 {
    margin-bottom: 14px !important;
}

@media (max-width: 767.98px) {
    .bn-compact-home .home-widget {
        margin-bottom: 12px;
    }
}


/* ================================================================
   27. SECTION HEADER — Left-aligned Title + "More" Link
   ================================================================ */

.bn-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 16px;
}

.bn-section-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.bn-section-title {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: var(--bn-fs-display-sm);
    line-height: var(--bn-lh-tight);
    color: var(--bn-ink);
    margin: 0;
    white-space: nowrap;
}

[data-bs-theme="dark"] .bn-section-title {
    color: var(--bn-on-dark);
}

.bn-section-title a {
    color: inherit;
}

.bn-section-title a:hover {
    color: var(--bn-primary);
}

.bn-section-desc {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    line-height: var(--bn-lh-caption);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme="dark"] .bn-section-desc {
    color: var(--bn-muted-strong);
}

.bn-section-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-body-md);
    font-weight: 600;
    color: var(--bn-primary);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s ease, gap 0.2s ease;
}

.bn-section-more:hover {
    color: var(--bn-primary-active);
    gap: 6px;
}

.bn-section-more svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.bn-section-more:hover svg {
    transform: translateX(2px);
}

[data-bs-theme="dark"] .bn-section-more {
    color: var(--bn-primary-active);
}

[data-bs-theme="dark"] .bn-section-more:hover {
    color: var(--bn-primary);
}

/* Category nav buttons (latest posts module) */
.bn-cat-navbtn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bn-cat-navbtn-item {
    display: inline-block;
    padding: 4px 14px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    font-weight: 500;
    color: var(--bn-ink);
    background-color: var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bn-cat-navbtn-item:hover,
.bn-cat-navbtn-item.active {
    background-color: var(--bn-primary);
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item:hover,
[data-bs-theme="dark"] .bn-cat-navbtn-item.active {
    background-color: var(--bn-primary-active);
    color: var(--bn-on-dark);
}

/* Mobile: description wraps under title */
@media (max-width: 767.98px) {
    .bn-section-header {
        margin-bottom: 14px;
    }

    .bn-section-header-left {
        flex-direction: column;
        gap: 2px;
    }

    .bn-section-title {
        font-size: var(--bn-fs-title-md);
    }
}

@media (max-width: 575.98px) {
    .bn-section-title {
        font-size: var(--bn-fs-title-sm);
    }

    .bn-section-more span {
        display: none;
    }
}


/* ================================================================
   28. SECTION FOOTER — "View All" Button
   ================================================================ */

.bn-section-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.bn-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-body-sm);
    font-weight: 500;
    color: var(--bn-ink);
    background-color: var(--bn-hairline-on-light);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-hairline-on-light) 0px 0px 0px 0px, var(--bn-hairline-on-light) 0px 0px 0px 1px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.bn-view-all-btn:hover {
    background-color: var(--bn-primary);
    color: var(--bn-on-dark);
    box-shadow: var(--bn-primary) 0px 0px 0px 0px, var(--bn-primary) 0px 0px 0px 1px;
    transform: translateY(-1px);
}

.bn-view-all-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.bn-view-all-btn:hover svg {
    transform: translateX(3px);
}

[data-bs-theme="dark"] .bn-view-all-btn {
    background-color: var(--bn-surface-card-dark);
    color: var(--bn-muted-strong);
    box-shadow: var(--bn-surface-card-dark) 0px 0px 0px 0px, var(--bn-hairline-on-dark) 0px 0px 0px 1px;
}

[data-bs-theme="dark"] .bn-view-all-btn:hover {
    background-color: var(--bn-primary-active);
    color: var(--bn-on-dark);
    box-shadow: var(--bn-primary-active) 0px 0px 0px 0px, var(--bn-primary-active) 0px 0px 0px 1px;
}

.bn-compact-home .bn-section-footer {
    margin-top: 16px;
}


/* ================================================================
   29. RESPONSIVE & LAYOUT POLISH
   ================================================================ */

/* Navigation CTA buttons — Binance style */
.site-header .btn-primary,
.site-header .action-btn[href*="vip"] {
    background-color: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: var(--bn-on-primary) !important;
    border-radius: var(--bn-radius-md);
    font-weight: 600;
    font-size: var(--bn-fs-button);
    transition: background-color 0.2s ease;
}

.site-header .btn-primary:hover,
.site-header .action-btn[href*="vip"]:hover {
    background-color: var(--bn-primary-active) !important;
    border-color: var(--bn-primary-active) !important;
    transform: translateY(-1px);
}

/* Sticky header polish */
.site-header.is-sticky {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Homepage card grid tighter gutters in compact mode */
.bn-compact-home .bn-section .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

@media (max-width: 767.98px) {
    .bn-compact-home .bn-section .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }
}


/* Off-canvas mobile menu transitions */
.off-canvas {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Homepage card uniform hover refinement */
.bn-section .post-item {
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.2s ease;
}

.bn-section .post-item:hover {
    border-color: var(--bn-hairline-on-light);
    box-shadow: 0px 0px 0px 1px var(--bn-hairline-on-light), rgba(0, 0, 0, 0.06) 0px 8px 28px;
}

.bn-section .post-item.grid-minimal,
.bn-section .post-item.grid-minimal:hover {
    border-color: transparent;
    box-shadow: none;
}


/* ================================================================
   30. ARTICLE PAGE — Content Readability & Comment Polish
   ================================================================ */

/* Article page layout: use card padding to constrain readable width instead of max-width,
   avoiding empty space between content and sidebar */
.single .content-wrapper .card {
    padding: var(--bn-space-xl) clamp(24px, 6vw, 72px);
}

.single .article-header {
    padding-bottom: var(--bn-space-lg);
    border-bottom: 1px solid var(--bn-hairline-on-light);
    margin-bottom: var(--bn-space-xl);
}

[data-bs-theme="dark"] .single .article-header {
    border-bottom-color: var(--bn-hairline-on-dark);
}

.single .entry-content,
.single .post-content,
.single .single-content {
    font-size: clamp(15px, 1vw + 12px, 17px);
    line-height: 1.8;
    color: var(--bn-ink);
}

[data-bs-theme="dark"] .single .entry-content,
[data-bs-theme="dark"] .single .post-content,
[data-bs-theme="dark"] .single .single-content {
    color: var(--bn-muted-strong);
}

/* Heading spacing refinement */
.entry-content h2,
.post-content h2 {
    margin-top: 2em;
    margin-bottom: 0.7em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--bn-hairline-on-light);
}

[data-bs-theme="dark"] .entry-content h2,
[data-bs-theme="dark"] .post-content h2 {
    border-bottom-color: var(--bn-hairline-on-dark);
}

.entry-content h3,
.post-content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

.entry-content h4,
.post-content h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Paragraph spacing */
.entry-content p,
.post-content p {
    margin-bottom: 1.2em;
}

/* List styling */
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}

.entry-content li,
.post-content li {
    margin-bottom: 0.4em;
}

/* HR styling */
.entry-content hr,
.post-content hr {
    border: none;
    border-top: 1px solid var(--bn-hairline-on-light);
    margin: 2em 0;
}

[data-bs-theme="dark"] .entry-content hr,
[data-bs-theme="dark"] .post-content hr {
    border-top-color: var(--bn-hairline-on-dark);
}

/* Images centered with caption */
.entry-content .wp-block-image,
.post-content .wp-block-image {
    text-align: center;
}

.entry-content figcaption,
.post-content figcaption {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    text-align: center;
    margin-top: var(--bn-space-sm);
}

/* Comment card spacing micro-adjustment */
#pills-comments .comment-list > .comment + .comment,
.content-wrapper .comment-list > .comment + .comment {
    margin-top: 2px;
}

/* Comment reply icon style */
.comment-reply-link::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 00-4-4H4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 00-4-4H4'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: -2px;
}

/* Tab nav horizontal scroll on mobile */
@media (max-width: 767.98px) {
    .single-content-nav .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .single-content-nav .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .single-content-nav .nav-pills .nav-item {
        flex-shrink: 0;
    }

    .single .content-wrapper .card {
        padding: var(--bn-space-md) 16px;
    }
}


/* ================================================================
   31. COMMUNITY QR — Sized to match xianchou.com (~192px QR)
   ================================================================ */

.bn-community-popup {
    padding: 12px;
    min-width: 216px;
}

.bn-community-popup img {
    width: 192px;
    max-width: calc(100vw - 60px);
}

.bn-community-tip {
    font-size: var(--bn-fs-caption);
    margin-top: 8px;
}

@media (max-width: 991.98px) {
    .bn-community-popup {
        padding: 12px;
        min-width: 0;
    }

    .bn-community-popup img {
        width: min(192px, calc(100vw - 40px));
    }
}


/* ================================================================
   32. ARCHIVE HERO — Clean Typography (no blurry background)
   ================================================================ */

.bn-clean-archive-hero .archive-hero--clean {
    background: linear-gradient(180deg, var(--bn-on-dark) 0%, var(--bn-canvas-light) 100%);
    border-bottom: 1px solid var(--bn-hairline-on-light);
    padding: var(--bn-space-xl) 0 var(--bn-space-lg);
    position: relative;
}

.bn-clean-archive-hero .archive-hero--clean .archive-hero-bg {
    display: none !important;
}

.bn-clean-archive-hero .archive-hero--clean .archive-title {
    font-family: var(--bn-font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: var(--bn-lh-snug);
    color: var(--bn-ink);
    margin-bottom: var(--bn-space-sm);
}

.bn-clean-archive-hero .archive-hero--clean .archive-desc {
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-title-md, 1.1rem);
    color: var(--bn-muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.archive-hero__count {
    display: inline-block;
    margin-top: var(--bn-space-md);
    font-family: var(--bn-font-body);
    font-size: var(--bn-fs-caption);
    color: var(--bn-muted-strong);
    background: var(--bn-hairline-on-light);
    padding: 4px 14px;
    border-radius: 100px;
}

/* Dark theme */
[data-bs-theme="dark"] .bn-clean-archive-hero .archive-hero--clean {
    background: linear-gradient(180deg, var(--bn-surface-card-dark) 0%, var(--bn-canvas-dark) 100%);
    border-bottom-color: var(--bn-hairline-on-dark);
}

[data-bs-theme="dark"] .bn-clean-archive-hero .archive-hero--clean .archive-title {
    color: var(--bn-on-dark);
}

[data-bs-theme="dark"] .bn-clean-archive-hero .archive-hero--clean .archive-desc {
    color: var(--bn-muted-strong);
}

[data-bs-theme="dark"] .archive-hero__count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bn-muted-strong);
}

@media (max-width: 767.98px) {
    .bn-clean-archive-hero .archive-hero--clean {
        padding: var(--bn-space-lg) 0 var(--bn-space-xl);
    }
}

/* ================================================================
   Homepage v2 cards
   ----------------------------------------------------------------
   Unified card-styling layer applied to homepage-only widgets.
   These rules are appended last so they win the cascade against any
   earlier "frameless" defaults in this file. They use only design-system
   tokens and animate solely via opacity / transform / box-shadow so
   layout never reflows on hover (no jank).

   Touched widgets:
     - .catbox-card           (home-cat-box.php)
     - .bn-author-card        (sidebar-author-info.php)
     - .bn-article-carousel   (sidebar-posts-list.php)

   What we DO NOT touch in this layer (handled elsewhere):
     - hero carousel    → assets/css/hero-carousel.css
     - cat-posts scroll → assets/css/home-scroll.css
     - dynamic / brands → assets/css/site-activity.css
     - section rhythm   → assets/css/home-rhythm.css
   ================================================================ */

/* ---------------- catbox-card v2 (lift + frame) ---------------- */

/* Wrap the entire catbox in a card chrome. The earlier rules in this
   file already styled the inner __img with radius-xl; we now wrap the
   whole anchor as the card container so hover-lift moves the title
   together with the image. */
.catbox-card {
    background: var(--bn-surface-soft-light, #faf9f5);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    border-radius: var(--bn-radius-xl, 12px);
    overflow: hidden;
    transition:
        transform 0.2s var(--bn-ease-out, ease),
        box-shadow 0.2s var(--bn-ease-out, ease),
        border-color 0.2s var(--bn-ease-out, ease);
    /* Wave 7.3.16: will-change moved to :hover so the GPU layer is only
     * promoted while the user is actively pointing at the card. With dozens
     * of cards on a category page, the always-on version was creating
     * permanent compositor pressure for no visual benefit. */
}
.catbox-card:hover {
    will-change: transform;
}

[data-bs-theme="dark"] .catbox-card {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

.catbox-card:hover,
.catbox-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--bn-shadow-subtle, 0 4px 24px rgba(0,0,0,0.05));
    border-color: var(--bn-border-strong, #d1cfc5);
}

[data-bs-theme="dark"] .catbox-card:hover,
[data-bs-theme="dark"] .catbox-card:focus-visible {
    border-color: var(--bn-muted, #707a8a);
}

/* The inner __img already has radius-xl from earlier in this file.
   Now that the parent .catbox-card owns the radius + overflow, drop
   the inner radius so we don't get a double-rounded inner box.
   Image area height follows each img's intrinsic aspect (no fixed 16:10). */
.catbox-card .catbox-card__img {
    border-radius: 0;
}

.catbox-card .catbox-card__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pull the info inside the card frame and give it real padding now
   that we own a card surface, not a floating caption. */
.catbox-card .catbox-card__info {
    padding: var(--bn-space-md, 16px) var(--bn-space-md, 16px) var(--bn-space-lg, 24px);
}

/* ---------------- bn-author-card (sidebar widget) ---------------- */

.bn-author-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bn-surface-soft-light, #faf9f5);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    border-radius: var(--bn-radius-xl, 12px);
    padding: var(--bn-space-xl, 32px) var(--bn-space-lg, 24px);
    gap: var(--bn-space-md, 16px);
    transition:
        background 0.2s var(--bn-ease-out, ease),
        border-color 0.2s var(--bn-ease-out, ease);
}

[data-bs-theme="dark"] .bn-author-card {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

.bn-author-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bn-hairline-on-light, #f0eee6);
    /* 1px hairline ring keeps the avatar separated from the card surface
       even when the avatar background and card background match. */
    box-shadow: 0 0 0 1px var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .bn-author-avatar {
    background: var(--bn-surface-elevated-dark, #2b3139);
    box-shadow: 0 0 0 1px var(--bn-hairline-on-dark, #2b3139);
}

.bn-author-name {
    margin: 0;
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-title-md, 20px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--bn-ink, #141413);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-bs-theme="dark"] .bn-author-name {
    color: var(--bn-on-dark, #ffffff);
}

/* Stats row: number + label, separated by a 1px vertical hairline. */
.bn-author-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--bn-space-md, 16px);
    width: 100%;
    margin-block: var(--bn-space-xs, 8px);
}

.bn-author-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.bn-author-stat__num {
    font-family: var(--bn-font-number, 'IBM Plex Sans', Inter, sans-serif);
    font-size: var(--bn-fs-num-display, 40px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--bn-ink, #141413);
    /* tabular numerals keep the row from jiggling when counts change */
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-variant-numeric: tabular-nums lining-nums;
}

[data-bs-theme="dark"] .bn-author-stat__num {
    color: var(--bn-on-dark, #ffffff);
}

.bn-author-stat__label {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-caption, 12px);
    font-weight: 400;
    color: var(--bn-muted, #5e5d59);
    letter-spacing: 0.02em;
}

.bn-author-stat__sep {
    width: 1px;
    background: var(--bn-hairline-on-light, #f0eee6);
    align-self: stretch;
    margin-block: 4px;
}

[data-bs-theme="dark"] .bn-author-stat__sep {
    background: var(--bn-hairline-on-dark, #2b3139);
}

/* Action buttons (View Profile / Follow). Two columns, equal width. */
.bn-author-btns {
    display: flex;
    gap: var(--bn-space-sm, 12px);
    width: 100%;
    margin-top: var(--bn-space-xs, 8px);
}

.bn-author-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--bn-space-md, 16px);
    border-radius: var(--bn-radius-md, 6px);
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-button, 14px);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    background: transparent;
    color: var(--bn-ink, #141413);
    transition: background 0.2s var(--bn-ease-out, ease),
                border-color 0.2s var(--bn-ease-out, ease),
                color 0.2s var(--bn-ease-out, ease);
}

[data-bs-theme="dark"] .bn-author-btn {
    border-color: var(--bn-hairline-on-dark, #2b3139);
    color: var(--bn-on-dark, #ffffff);
}

.bn-author-btn:hover,
.bn-author-btn:focus-visible {
    background: var(--bn-hairline-on-light, #f0eee6);
    border-color: var(--bn-border-strong, #d1cfc5);
    color: var(--bn-ink, #141413);
    text-decoration: none;
}

[data-bs-theme="dark"] .bn-author-btn:hover,
[data-bs-theme="dark"] .bn-author-btn:focus-visible {
    background: var(--bn-surface-elevated-dark, #2b3139);
    border-color: var(--bn-muted, #707a8a);
    color: var(--bn-on-dark, #ffffff);
}

.bn-author-btn--primary {
    background: var(--bn-primary, #c96442);
    border-color: var(--bn-primary, #c96442);
    color: var(--bn-on-primary, #faf9f5);
}

.bn-author-btn--primary:hover,
.bn-author-btn--primary:focus-visible {
    background: var(--bn-primary-active, #d97757);
    border-color: var(--bn-primary-active, #d97757);
    color: var(--bn-on-primary, #faf9f5);
}

[data-bs-theme="dark"] .bn-author-btn--primary {
    color: var(--bn-on-primary, #181a20);
}

[data-bs-theme="dark"] .bn-author-btn--primary:hover,
[data-bs-theme="dark"] .bn-author-btn--primary:focus-visible {
    color: var(--bn-on-primary, #181a20);
}

/* Recent posts list inside the author card. Numbered, single-line items. */
.bn-author-card .bn-author-posts {
    width: 100%;
    margin-top: var(--bn-space-xs, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-xs, 8px);
    border-top: 1px solid var(--bn-hairline-on-light, #f0eee6);
    padding-top: var(--bn-space-md, 16px);
}

[data-bs-theme="dark"] .bn-author-card .bn-author-posts {
    border-top-color: var(--bn-hairline-on-dark, #2b3139);
}

.bn-author-card .bn-author-post-item {
    display: flex;
    align-items: center;
    gap: var(--bn-space-sm, 12px);
    text-decoration: none;
    color: var(--bn-body-on-light, #141413);
    font-size: var(--bn-fs-body-md, 14px);
    line-height: 1.4;
    transition: color 0.2s var(--bn-ease-out, ease);
    min-width: 0;
}

[data-bs-theme="dark"] .bn-author-card .bn-author-post-item {
    color: var(--bn-on-dark, #ffffff);
}

.bn-author-card .bn-author-post-item:hover,
.bn-author-card .bn-author-post-item:focus-visible {
    color: var(--bn-primary, #c96442);
}

.bn-author-card .bn-author-post-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bn-hairline-on-light, #f0eee6);
    color: var(--bn-muted, #5e5d59);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bn-font-number, 'IBM Plex Sans', Inter, sans-serif);
}

[data-bs-theme="dark"] .bn-author-card .bn-author-post-num {
    background: var(--bn-surface-elevated-dark, #2b3139);
    color: var(--bn-muted-strong, #929aa5);
}

.bn-author-card .bn-author-post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    text-align: left;
}

/* ---------------- bn-article-carousel (sidebar) ---------------- */

/* Transparent shell — the carousel is meant to feel like a small native
   component, not another stacked card on top of the author card above
   it. The slide image carries all the visual weight. */
.bn-article-carousel {
    background: transparent;
    border: 0;
    margin-top: var(--bn-space-lg, 24px);
}

.bn-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-sm, 12px);
    margin-bottom: var(--bn-space-sm, 12px);
}

.bn-carousel-title {
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-title-sm, 16px);
    font-weight: 600;
    color: var(--bn-ink, #141413);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="dark"] .bn-carousel-title {
    color: var(--bn-on-dark, #ffffff);
}

.bn-carousel-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bn-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bn-border-strong, #d1cfc5);
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.2s var(--bn-ease-out, ease),
                background 0.2s var(--bn-ease-out, ease),
                width 0.2s var(--bn-ease-out, ease);
}

.bn-carousel-dot.active {
    opacity: 1;
    background: var(--bn-primary, #c96442);
    width: 16px;
    border-radius: 3px;
}

[data-bs-theme="dark"] .bn-carousel-dot {
    background: var(--bn-muted, #707a8a);
}

[data-bs-theme="dark"] .bn-carousel-dot.active {
    background: var(--bn-primary, #fcd535);
}

.bn-carousel-viewport {
    overflow: hidden;
    border-radius: var(--bn-radius-lg, 8px);
}

.bn-carousel-track {
    display: flex;
    transition: transform 0.4s var(--bn-ease-out, ease);
    will-change: transform;
}

.bn-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.bn-carousel-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    border-radius: var(--bn-radius-lg, 8px);
    background-color: var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .bn-carousel-link {
    background-color: var(--bn-surface-card-dark, #1e2329);
}

.bn-carousel-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s var(--bn-ease-out, ease);
}

.bn-carousel-link:hover .bn-carousel-img,
.bn-carousel-link:focus-visible .bn-carousel-img {
    transform: scale(1.04);
}

/* Info chip overlaid on the lower-left of the image — hidden by default, slide-up on hover. */
.bn-carousel-info {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--bn-space-md, 16px);
    background: linear-gradient(
        180deg,
        rgba(20, 20, 19, 0) 0%,
        rgba(20, 20, 19, 0.55) 70%,
        rgba(20, 20, 19, 0.78) 100%
    );
    color: var(--bn-on-dark, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bn-carousel-link:hover .bn-carousel-info,
.bn-carousel-link:focus-visible .bn-carousel-info {
    opacity: 1;
    transform: translateY(0);
}

.bn-carousel-slide-title {
    margin: 0;
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-md, 14px);
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.bn-carousel-link:hover .bn-carousel-slide-title,
.bn-carousel-link:focus-visible .bn-carousel-slide-title {
    opacity: 1;
    transform: translateY(0);
}

.bn-carousel-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: var(--bn-radius-pill, 999px);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .catbox-card,
    .catbox-card .catbox-card__img img,
    .bn-author-btn,
    .bn-author-card .bn-author-post-item,
    .bn-carousel-track,
    .bn-carousel-img,
    .bn-carousel-dot,
    .bn-carousel-link:hover .bn-carousel-img,
    .bn-carousel-info,
    .bn-carousel-slide-title {
        transition: none;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    .bn-author-card {
        padding: var(--bn-space-lg, 24px) var(--bn-space-md, 16px);
    }
    .bn-author-avatar {
        width: 72px;
        height: 72px;
    }
    .bn-author-stat__num {
        font-size: 28px;
    }
}

/* =================================================================
   BIG-TECH LOGIN REDESIGN (Wave 6.5)
   三段式分段控制器 · 手机验证码登录 · Hero 叙事升级 · 弹窗放宽
   ================================================================= */

/* ---------- 1. 登录卡整体调大 & 左栏 hero 内容层 ---------- */

/* 全屏 /login/ 页的登录卡略放大一档，左右更均衡 */
.bn-login-card {
    max-width: 960px;
    box-shadow: 0 20px 60px -20px rgba(17, 24, 39, 0.18);
}

/* 左栏 hero：底图 + 渐变遮罩 + 内容层 + 扫光 */
.bn-login-hero {
    flex: 0 0 50%;
    max-width: 50%;
}
.bn-login-hero .bn-login-hero-img {
    transition: transform 12s ease-out;
}
.bn-login-hero:hover .bn-login-hero-img {
    transform: scale(1.05);
}
.bn-login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.70) 100%);
    z-index: 1;
    pointer-events: none;
}
.bn-login-hero-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 45%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.10) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    z-index: 2;
    pointer-events: none;
    animation: bnHeroShine 9s ease-in-out infinite;
}
@keyframes bnHeroShine {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
.bn-login-hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--bn-space-xl, 32px);
    color: #fff;
    pointer-events: none;
}
.bn-login-hero-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bn-login-hero-logo img {
    display: block;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.bn-login-hero-sitename {
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
}
.bn-login-hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    align-self: flex-start;
    letter-spacing: 0.5px;
}
.bn-login-hero-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bn-login-hero-slogan {
    margin: 0;
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.bn-login-hero-subtext {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
}
.bn-login-hero-badges {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bn-login-hero-badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.bn-login-hero-badges li i {
    color: var(--bn-primary, #F0B90B);
    font-size: 14px;
}

/* ---------- 2. 右栏表单容器 ---------- */

.bn-login-form-inner {
    padding: var(--bn-space-xl, 32px) var(--bn-space-lg, 28px);
}

.bn-login-form-header {
    margin-bottom: 24px;
}

.bn-login-title {
    font-size: 24px;
    line-height: 1.35;
}

.bn-login-title span {
    display: inline-block;
    font-size: 14px;
    color: var(--bn-muted, #64748b);
    margin-left: 4px;
}

/* ---------- 3. 大厂级分段控制器 (胶囊式) ---------- */

.bn-auth-tabs.sscms-login-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    background: var(--bn-surface-soft-light, #f4f4f5);
    border: 1px solid var(--bn-hairline-on-light, #e5e7eb);
    border-radius: 999px;
    /* 覆盖旧 sscms-login-tabs 样式 */
    border-bottom: 1px solid var(--bn-hairline-on-light, #e5e7eb);
}

.bn-auth-tabs .bn-tab,
.bn-auth-tabs .sscms-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--bn-muted, #64748b);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    /* 覆盖旧 sscms-tab-btn 的底边 */
    margin-bottom: 0;
}

.bn-auth-tabs .bn-tab i,
.bn-auth-tabs .sscms-tab-btn i {
    font-size: 14px;
    margin-right: 0;
}

.bn-auth-tabs .bn-tab:hover,
.bn-auth-tabs .sscms-tab-btn:hover {
    color: var(--bn-ink, #0f172a);
}

.bn-auth-tabs .bn-tab.active,
.bn-auth-tabs .sscms-tab-btn.active {
    color: var(--bn-ink, #0f172a);
    background: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(17, 24, 39, 0.08),
                0 1px 0 0 rgba(17, 24, 39, 0.04);
    /* 抵消旧规则的底边激活 */
    border-bottom-color: transparent;
}

.bn-auth-tabs .bn-tab:focus-visible,
.bn-auth-tabs .sscms-tab-btn:focus-visible {
    outline: 2px solid var(--bn-primary, #F0B90B);
    outline-offset: 2px;
}

/* 紧凑模式（popup 下或 ≤360px）只显示图标 */
@media (max-width: 380px) {
    .bn-auth-tabs .bn-tab span,
    .bn-auth-tabs .sscms-tab-btn span {
        display: none;
    }
    .bn-auth-tabs .bn-tab,
    .bn-auth-tabs .sscms-tab-btn {
        padding: 10px;
    }
}

/* ---------- 4. 输入框 & 主按钮升级 ---------- */

.bn-login-card .account-from .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bn-muted, #64748b);
}

.bn-login-card .account-from .form-control {
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--bn-hairline-on-light, #e5e7eb);
    padding: 0 14px;
    font-size: 15px;
    color: var(--bn-ink, #0f172a);
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bn-login-card .account-from .form-control::placeholder {
    color: color-mix(in srgb, var(--bn-muted, #64748b) 70%, transparent);
}

.bn-login-card .account-from .form-control:hover {
    border-color: color-mix(in srgb, var(--bn-primary, #F0B90B) 30%, var(--bn-hairline-on-light, #e5e7eb));
}

.bn-login-card .account-from .form-control:focus {
    border-color: var(--bn-primary, #F0B90B);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-primary, #F0B90B) 20%, transparent);
    outline: none;
}

.bn-login-card .account-from .btn-primary {
    height: 52px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bn-login-card .account-from .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--bn-primary, #F0B90B) 70%, transparent);
}

.bn-login-card .account-from .btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bn-login-card .account-from .btn-danger {
    height: 52px;
    border-radius: 10px;
    font-weight: 600;
}

/* ---------- 5. 手机号 +86 前缀胶囊 ---------- */

.bn-phone-input-group {
    display: flex;
    align-items: stretch;
    height: 48px;
    border: 1px solid var(--bn-hairline-on-light, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bn-phone-input-group:hover {
    border-color: color-mix(in srgb, var(--bn-primary, #F0B90B) 30%, var(--bn-hairline-on-light, #e5e7eb));
}

.bn-phone-input-group:focus-within {
    border-color: var(--bn-primary, #F0B90B);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-primary, #F0B90B) 20%, transparent);
}

.bn-phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: var(--bn-surface-soft-light, #f4f4f5);
    border-right: 1px solid var(--bn-hairline-on-light, #e5e7eb);
    color: var(--bn-ink, #0f172a);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.bn-phone-input-group .form-control {
    border: 0;
    border-radius: 0;
    height: 100%;
    box-shadow: none;
    background: transparent;
    padding-left: 14px;
}

.bn-phone-input-group .form-control:focus {
    box-shadow: none;
}

/* ---------- 6. 验证码 input-group + 倒计时态 ---------- */

.bn-sms-code-group {
    border-radius: 10px;
    overflow: hidden;
}

.bn-sms-code-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bn-sms-code-group .btn {
    min-width: 118px;
    height: 48px;
    border-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border-left: 0;
}

.bn-sms-code-group .btn.is-counting,
.bn-sms-code-group .btn:disabled {
    background: var(--bn-surface-soft-light, #f4f4f5);
    color: var(--bn-muted, #64748b);
    border-color: var(--bn-hairline-on-light, #e5e7eb);
    cursor: not-allowed;
    opacity: 1;
}

/* ---------- 7. SMS 面板辅助元素 ---------- */

.bn-sms-agree-row {
    margin-top: 4px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 0;
}

.bn-sms-agree-row .form-check-input {
    margin-top: 2px;
    margin-left: 0;
    flex: 0 0 auto;
}

.bn-sms-agree-row .form-check-label {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bn-muted, #64748b);
    cursor: pointer;
}

.bn-sms-agree-row .form-check-label a {
    color: var(--bn-primary, #F0B90B);
    text-decoration: none;
}

.bn-sms-agree-row .form-check-label a:hover {
    text-decoration: underline;
}

.bn-sms-tip {
    font-size: 12px;
    color: var(--bn-muted, #64748b);
    opacity: 0.8;
}

/* ---------- 8. OAuth 快捷登录 chips ---------- */

.bn-auth-divider {
    position: relative;
    margin: 20px 0 16px;
    text-align: center;
    font-size: 12px;
    color: var(--bn-muted, #64748b);
}

.bn-auth-divider::before,
.bn-auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 60px);
    height: 1px;
    background: var(--bn-hairline-on-light, #e5e7eb);
}

.bn-auth-divider::before { left: 0; }
.bn-auth-divider::after  { right: 0; }

.bn-auth-divider span {
    position: relative;
    padding: 0 12px;
    background: transparent;
}

.bn-auth-oauth-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 0;
}

.bn-auth-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bn-surface-soft-light, #f4f4f5);
    color: var(--bn-muted, #64748b);
    font-size: 18px;
    border: 1px solid var(--bn-hairline-on-light, #e5e7eb);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bn-auth-oauth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(17, 24, 39, 0.2);
    color: #fff;
    text-decoration: none;
}

.bn-auth-oauth-qq:hover     { background: #12B7F5; border-color: #12B7F5; }
.bn-auth-oauth-wechat:hover { background: #07C160; border-color: #07C160; }

/* 覆盖旧 .btn-qq-login / .btn-weixin-login / .btn-mpweixin-login 里面的文字，避免影响新样式 */
.bn-auth-oauth-btn.btn-qq-login,
.bn-auth-oauth-btn.btn-weixin-login,
.bn-auth-oauth-btn.btn-mpweixin-login {
    padding: 0;
}

/* ---------- 9. 协议文案 ---------- */

.bn-auth-agreement {
    margin-top: 18px;
    line-height: 1.6;
}

.bn-auth-agreement small {
    font-size: 12px;
}

/* ---------- 10. 弹窗宽度覆盖 (440px) ---------- */

/* 父主题 ri.popup(msg, 320, !1) 会把内联 style="width:320px" 写到 .ri-popup-body 上。
 * 我们通过 :has() 把出现 .bn-popup-login-wide 的 popup 强行放宽到 440px。
 * 因为是内联 style，所以必须 !important。 */
.ri-popup-body:has(.bn-popup-login-wide) {
    width: 440px !important;
    max-width: calc(100vw - 24px) !important;
}

/* 不支持 :has() 的浏览器 fallback：让内容本身撑开 popup body */
@supports not (selector(:has(*))) {
    .bn-popup-login-wide {
        min-width: 408px;
    }
}

/* popup 内登录卡：去掉外边距、去掉最大宽度，铺满 popup */
.bn-popup-login {
    margin: 0;
    max-width: 100%;
    border: none;
    box-shadow: none;
}

.bn-popup-login .bn-login-form-inner {
    padding: 24px 24px 20px;
}

.bn-popup-login .bn-login-form-header {
    margin-bottom: 18px;
}

.bn-popup-login .bn-login-title {
    font-size: 20px;
}

/* ---------- 11. SSCMS QR 在新卡内继续保留原有视觉 ---------- */

.bn-login-card .sscms-qr-container {
    padding: 12px 0;
    min-height: 280px;
}

/* 父主题将 .account-from 限制为 max-width:300px 但未水平居中，
   导致右栏的扫码二维码（以及账号/短信表单）整体偏左。
   通过 margin auto 让整个表单在 .bn-login-form-inner 内居中。 */
.bn-login-card .account-from {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 12. Dark mode 覆盖 ---------- */

[data-bs-theme="dark"] .bn-login-card {
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .bn-auth-tabs.sscms-login-tabs {
    background: var(--bn-surface-elevated-dark, #1f1f23);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
    border-bottom-color: var(--bn-hairline-on-dark, #2a2a2f);
}

[data-bs-theme="dark"] .bn-auth-tabs .bn-tab,
[data-bs-theme="dark"] .bn-auth-tabs .sscms-tab-btn {
    color: var(--bn-muted-strong, #9ca3af);
}

[data-bs-theme="dark"] .bn-auth-tabs .bn-tab.active,
[data-bs-theme="dark"] .bn-auth-tabs .sscms-tab-btn.active {
    color: var(--bn-on-dark, #f8fafc);
    background: var(--bn-surface-card-dark, #18181c);
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.4);
    border-bottom-color: transparent;
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-label {
    color: var(--bn-muted-strong, #9ca3af);
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-control {
    background: var(--bn-surface-elevated-dark, #1f1f23);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
    color: var(--bn-on-dark, #f8fafc);
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-control::placeholder {
    color: color-mix(in srgb, var(--bn-muted-strong, #9ca3af) 70%, transparent);
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-control:hover {
    border-color: color-mix(in srgb, var(--bn-primary, #F0B90B) 40%, var(--bn-hairline-on-dark, #2a2a2f));
}

[data-bs-theme="dark"] .bn-login-card .account-from .form-control:focus {
    border-color: var(--bn-primary, #F0B90B);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-primary, #F0B90B) 28%, transparent);
}

[data-bs-theme="dark"] .bn-phone-input-group {
    background: var(--bn-surface-elevated-dark, #1f1f23);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
}

[data-bs-theme="dark"] .bn-phone-prefix {
    background: var(--bn-surface-card-dark, #18181c);
    border-right-color: var(--bn-hairline-on-dark, #2a2a2f);
    color: var(--bn-on-dark, #f8fafc);
}

[data-bs-theme="dark"] .bn-phone-input-group:hover {
    border-color: color-mix(in srgb, var(--bn-primary, #F0B90B) 40%, var(--bn-hairline-on-dark, #2a2a2f));
}

[data-bs-theme="dark"] .bn-phone-input-group:focus-within {
    border-color: var(--bn-primary, #F0B90B);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-primary, #F0B90B) 28%, transparent);
}

[data-bs-theme="dark"] .bn-sms-code-group .btn {
    background: var(--bn-surface-elevated-dark, #1f1f23);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
    color: var(--bn-on-dark, #f8fafc);
}

[data-bs-theme="dark"] .bn-sms-code-group .btn:hover:not(:disabled) {
    background: var(--bn-primary, #F0B90B);
    color: #111;
    border-color: var(--bn-primary, #F0B90B);
}

[data-bs-theme="dark"] .bn-sms-code-group .btn.is-counting,
[data-bs-theme="dark"] .bn-sms-code-group .btn:disabled {
    background: var(--bn-surface-card-dark, #18181c);
    color: var(--bn-muted-strong, #9ca3af);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
}

[data-bs-theme="dark"] .bn-sms-agree-row .form-check-label {
    color: var(--bn-muted-strong, #9ca3af);
}

[data-bs-theme="dark"] .bn-auth-divider {
    color: var(--bn-muted-strong, #9ca3af);
}

[data-bs-theme="dark"] .bn-auth-divider::before,
[data-bs-theme="dark"] .bn-auth-divider::after {
    background: var(--bn-hairline-on-dark, #2a2a2f);
}

[data-bs-theme="dark"] .bn-auth-oauth-btn {
    background: var(--bn-surface-elevated-dark, #1f1f23);
    border-color: var(--bn-hairline-on-dark, #2a2a2f);
    color: var(--bn-muted-strong, #9ca3af);
}

[data-bs-theme="dark"] .bn-auth-agreement small {
    color: var(--bn-muted-strong, #9ca3af) !important;
}

/* ---------- 13. 响应式 ---------- */

@media (max-width: 991.98px) {
    .bn-login-card {
        max-width: 820px;
    }
}

@media (max-width: 767.98px) {
    .bn-login-hero {
        display: none;
    }
    .bn-login-card {
        max-width: 100%;
        margin: 16px;
        box-shadow: 0 10px 30px -12px rgba(17, 24, 39, 0.15);
    }
    .bn-login-card.has-hero {
        max-width: 100%;
    }
    .bn-login-form-inner {
        padding: 28px 20px 24px;
    }
    .bn-login-title {
        font-size: 22px;
    }
    .bn-login-title span {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
    .ri-popup-content:has(.bn-popup-login-wide) {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
    }
    .bn-popup-login .bn-login-form-inner {
        padding: 22px 18px 18px;
    }
}

@media (max-width: 575.98px) {
    .bn-phone-prefix {
        padding: 0 10px;
        font-size: 13px;
    }
    .bn-sms-code-group .btn {
        min-width: 96px;
        font-size: 13px;
    }
}

/* ================================================================
 * Wave 7.4.2 — global tablet-landscape (1024-1279) widget tier
 *
 * The earlier home widgets (cat-posts grid, last-posts grid, scroll
 * sections) jumped straight from "tablet portrait" to "desktop"
 * with no in-between step. On 1024-1279 this caused either an
 * undersized 5-up grid or an oversized 4-up grid depending on the
 * widget. Lock everything to a calm 4-column rhythm in this band.
 * ================================================================ */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .home-widget,
    .bn-home-section {
        padding-left: 32px;
        padding-right: 32px;
    }
    .posts-warp {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    .catbox-list,
    .catbox-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
    }
    .bn-cat-posts-grid,
    .bn-last-posts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

/* Wave 7.4.2 — desktop-wide tier (≥1280) only changes that we want
 * to apply *only* when actually on a true desktop. Most ≥1280 rules
 * already exist in their respective files; this is for late-binding
 * widgets that previously had no >991.98 rule at all. */
@media (min-width: 1280px) {
    .posts-warp {
        gap: 24px;
    }
    .home-widget {
        padding-left: 48px;
        padding-right: 48px;
    }
}