/*body {*/
/*    color: #5a5a5a;*/
/*}*/

.category {
    padding-left: 0;
    margin-bottom: 0.5rem;
}
.category .tag {
    zoom: 1;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    line-height: 20px;
    border-radius: 2px;
}

.category span {
    display: inline-block;
}

.tag-checked {
    opacity: 0.8;
    background: #ffc107 !important;
    color: #0a0a0a;
}
.category li {
    display: inline-block;
    /*color: #333;*/
    margin-right: 4px;
    padding-top: 3px;
}
ul, ol {
    list-style: none;
}
ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

hr {
    margin: 0.3rem 0;
    /*color: inherit;*/
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

.divider {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

/* Search */
.highlight {
    color: red;
    font-weight: bold;
}

/* Footer */
.action-sec{width:100%; float:left; background:#222;padding:30px;margin-top:0px;}
.action-box{float:left; width:100%; text-align:center;font-family: 'Montserrat', sans-serif;}
.action-box h2{color:#fff; font-size:20px;}


/** Player */
/*.video-container {*/
/*    max-width: 100%; !* 限制播放器的宽度 *!*/
/*    height: auto; !* 保持高度自动调整 *!*/
/*    overflow: hidden; !* 避免内容溢出 *!*/
/*}*/

/*#dplayer {*/
/*    width: 100%;*/
/*    max-height: 75vh; !* 限制播放器高度，防止在竖屏时过高 *!*/
/*    object-fit: contain; !* 让视频根据容器缩放，避免变形 *!*/
/*}*/

.video-container {
    width: 100%;          /* 播放器宽度填充父级 */
    height: 0;            /* 高度由 padding-bottom 控制，保持宽高比 */
    padding-bottom: 56.25%; /* 16:9 的宽高比，常见的视频比例 */
    position: relative;
}

#dplayer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
}

/* DPlayer 1.27 notice-list（1.25 CSS 缺失，且旧 .dplayer-notice 规则会导致竖排撑破播放器） */
#dplayer .dplayer-notice-list {
    position: absolute;
    top: 10px;
    left: 50%;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 9;
    max-width: calc(100% - 1.5rem);
    pointer-events: none;
}

#dplayer .dplayer-notice-list .dplayer-notice {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    display: table;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 7px 16px;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    word-break: normal;
    writing-mode: horizontal-tb;
    border-radius: 4px;
    background: rgba(28, 28, 28, 0.88);
    color: #fff;
    overflow: visible;
    box-sizing: border-box;
    pointer-events: none;
    animation: hiporn-dplayer-show-notice 0.3s ease forwards;
}

#dplayer .dplayer-notice-list .dplayer-notice.remove-notice {
    animation: hiporn-dplayer-remove-notice 0.3s ease forwards;
}

@keyframes hiporn-dplayer-show-notice {
    from {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0;
        opacity: 0;
    }
    to {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 14px;
        opacity: 0.8;
    }
}

@keyframes hiporn-dplayer-remove-notice {
    0% {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 14px;
        opacity: 0.8;
    }
    100% {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0;
        opacity: 0;
    }
}

/* DPlayer 与 Bootstrap 隔离（需配合 dplayer.min.css） */
#dplayer .dplayer-danmaku .dplayer-danmaku-item {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#dplayer .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label,
#dplayer .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box span {
    margin-bottom: 0;
}

#dplayer .dplayer-controller button,
#dplayer .dplayer-controller input {
    box-shadow: none;
}

.dplayer-mask .dplayer-menu-item {
    display: none !important;
}

/* ── Header / Navbar (Scheme B) ── */
.hiporn-header {
    z-index: 1030;
    background: rgba(var(--bs-body-bg-rgb), 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
}

.hiporn-nav {
    padding: 0;
}

.hiporn-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 56px;
}

.hiporn-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    padding: 0.375rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    text-decoration: none;
    flex-shrink: 0;
}

.hiporn-nav-brand:hover {
    color: var(--bs-body-color);
    opacity: 0.9;
}

.hiporn-nav-brand img {
    border-radius: 8px;
}

.hiporn-nav-brand-text {
    letter-spacing: -0.02em;
}

.hiporn-nav-toggler {
    padding: 0.375rem 0.5rem;
    border-color: rgba(var(--bs-body-color-rgb), 0.15);
}

.hiporn-nav-collapse {
    flex-basis: 100%;
}

@media (min-width: 992px) {
    .hiporn-nav-collapse {
        flex-basis: auto;
        flex-grow: 1;
        display: flex !important;
        align-items: center;
    }
}

.hiporn-nav-main {
    gap: 0.125rem;
}

@media (min-width: 992px) {
    .hiporn-nav-main {
        gap: 0.25rem;
    }
}

.hiporn-nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem !important;
    color: var(--bs-secondary-color) !important;
    border-radius: 6px;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

@media (min-width: 992px) {
    .hiporn-nav-link {
        padding: 0.5rem 0.875rem !important;
        position: relative;
    }
}

.hiporn-nav-link:hover {
    color: var(--bs-body-color) !important;
    background: rgba(var(--bs-body-color-rgb), 0.05);
}

.hiporn-nav-link.active {
    color: var(--bs-success) !important;
    background: rgba(var(--bs-success-rgb), 0.08);
}

@media (min-width: 992px) {
    .hiporn-nav-link.active {
        background: transparent;
    }

    .hiporn-nav-link.active::after {
        content: "";
        position: absolute;
        bottom: 0.25rem;
        left: 0.875rem;
        right: 0.875rem;
        height: 2px;
        background: var(--bs-success);
        border-radius: 1px;
    }
}

.hiporn-nav-secondary {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.hiporn-nav-secondary .hiporn-nav-link {
    font-size: 0.875rem;
}

.hiporn-nav-actions {
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.75rem 0;
}

@media (min-width: 992px) {
    .hiporn-nav-actions {
        padding: 0;
        margin-left: 0.75rem;
    }
}

.hiporn-nav-quick {
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.375rem;
}

.hiporn-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.125rem;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hiporn-nav-icon-btn:hover,
.hiporn-nav-icon-btn.is-active {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.35);
}

.hiporn-nav-icon-btn.dropdown-toggle::after {
    display: none;
}

.hiporn-nav-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: var(--bs-success);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.hiporn-nav-login-btn:hover {
    color: #fff;
    opacity: 0.9;
}

.hiporn-nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 10rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: 8px;
}

.hiporn-nav-user-btn:hover {
    background: rgba(var(--bs-body-color-rgb), 0.05);
}

.hiporn-nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hiporn-nav-search {
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
}

.hiporn-nav-search-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0.75rem 1rem 1rem;
}

.hiporn-nav-search .hiporn-search-wrap--compact .hiporn-search-bar {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .hiporn-nav-collapse.show,
    .hiporn-nav-collapse.collapsing {
        padding-bottom: 0.75rem;
    }

    .hiporn-nav-main .nav-item {
        width: 100%;
    }

    .hiporn-nav-link {
        padding: 0.625rem 0.5rem !important;
    }
}

@media (max-width: 380px) {
    .hiporn-nav-brand-text {
        display: none;
    }
}

/* ── Design tokens & 中文排版基线 ── */
:root {
    --hp-max: 1120px;
    --hp-search: min(640px, 100%);
    --hp-radius: 12px;
    --hp-radius-sm: 8px;
    --hp-gap: 1.125rem;
    --hp-gap-row: 1.5rem;
    --hp-text-xs: 0.8125rem;   /* 13px 辅助 */
    --hp-text-sm: 0.875rem;    /* 14px 正文下限（中文可读） */
    --hp-text-base: 0.9375rem; /* 15px 列表标题 */
}

/* Bootstrap 主题变量在 body 上，依赖 bs 的 token 必须定义在此 */
body[data-bs-theme="dark"],
body {
    --hp-muted: var(--bs-secondary-color);
    --hp-border: rgba(var(--bs-body-color-rgb), 0.12);
    --hp-surface: rgba(var(--bs-body-bg-rgb), 0.6);
    --hp-elevated: rgba(var(--bs-tertiary-bg-rgb), 0.85);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Search component ── */
.hiporn-search-wrap {
    width: 100%;
    text-align: left;
}

.hiporn-search-input-wrap {
    position: relative;
    width: 100%;
}

.hiporn-search-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hiporn-search-bar:focus-within {
    border-color: rgba(var(--bs-success-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.15);
}

.hiporn-search-bar-icon {
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
    color: var(--hp-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hiporn-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    font-size: 1rem;
    background: transparent !important;
}

.hiporn-search-submit {
    border-radius: 0 !important;
    padding-inline: 1.25rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hiporn-search-wrap--hero .hiporn-search-bar {
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.hiporn-search-wrap--hero .hiporn-search-input {
    padding: 0.875rem 0;
    font-size: 1.0625rem;
}

.hiporn-search-wrap--hero .hiporn-search-submit {
    border-radius: 0 999px 999px 0 !important;
    padding-inline: 1.5rem;
}

.hiporn-search-wrap--compact .hiporn-search-bar {
    border-radius: var(--hp-radius-sm);
}

.hiporn-search-meta {
    width: 100%;
    margin-top: 0.875rem;
}

.hiporn-search-meta-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hiporn-search-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.hiporn-search-clear-history {
    padding: 0;
    font-size: 0.75rem;
    color: var(--hp-muted) !important;
    text-decoration: none;
}

.hiporn-search-clear-history:hover {
    color: var(--bs-body-color) !important;
}

.hiporn-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
    border-radius: var(--hp-radius-sm);
    border: 1px solid var(--hp-border);
}

.hiporn-search-dropdown .list-group-item {
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    background: var(--bs-body-bg);
    text-align: left;
}

.hiporn-search-dropdown .list-group-item:first-child {
    border-top: 0;
}

.hiporn-search-history-item,
.hiporn-search-hot-item {
    cursor: pointer;
}

/* ── Chips ── */
.hiporn-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hiporn-chip-list--single-line {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.hiporn-chip-list--single-line .hiporn-chip {
    flex-shrink: 0;
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hiporn-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--bs-body-color);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.85);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.hiporn-chip:hover {
    color: var(--bs-body-color);
    background: rgba(var(--bs-success-rgb), 0.12);
    border-color: rgba(var(--bs-success-rgb), 0.35);
}

.hiporn-chip--outline {
    background: transparent;
}

.hiporn-chip--vip {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    background: linear-gradient(135deg, #f5c842, #e8a317);
    border-color: transparent;
}

/* ── User strip ── */
.hiporn-user-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

.hiporn-user-strip-text {
    font-weight: 500;
}

.hiporn-user-strip-muted {
    color: var(--hp-muted);
}

.hiporn-user-strip-sep {
    color: var(--hp-muted);
    user-select: none;
}

.hiporn-user-strip-link {
    color: var(--hp-muted);
    text-decoration: none;
}

.hiporn-user-strip-link:hover {
    color: var(--bs-body-color);
}

.hiporn-user-strip-link--primary {
    color: var(--bs-success);
    font-weight: 500;
}

.hiporn-user-strip-link--primary:hover {
    color: var(--bs-success);
    opacity: 0.85;
}

/* ── Home layout ── */
.hiporn-home-hero {
    padding: 2.5rem 1rem 2rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--bs-success-rgb), 0.08), transparent),
        var(--bs-body-bg);
}

.hiporn-home-hero-inner {
    max-width: var(--hp-max);
    margin: 0 auto;
    text-align: center;
}

/* Home product-update banner (also uses .hiporn-user-alert--success as base) */
.hiporn-home-announce {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin: 0 auto 1.25rem;
    padding: 0.875rem 2.75rem 0.875rem 1rem;
    text-align: left;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.hiporn-home-announce::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--bs-success), rgba(var(--bs-success-rgb), 0.45));
}

.hiporn-home-announce-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hiporn-home-announce-body {
    flex: 1;
    min-width: 0;
}

.hiporn-home-announce-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    font-size: 1.125rem;
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.18);
}

.hiporn-home-announce-title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
}

.hiporn-home-announce-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--hp-muted, rgba(255, 255, 255, 0.72));
}

.hiporn-home-announce-text strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

.hiporn-home-announce-link,
.hiporn-home-announce-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-success);
    text-decoration: none;
}

.hiporn-home-announce-link:hover {
    color: var(--bs-success);
    opacity: 0.85;
    text-decoration: underline;
}

.hiporn-home-announce-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    opacity: 0.55;
    filter: var(--bs-btn-close-filter, invert(1) grayscale(100%) opacity(0.55));
}

.hiporn-home-announce-close:hover {
    opacity: 0.9;
}

.hiporn-home-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.hiporn-home-logo {
    border-radius: 10px;
}

.hiporn-home-brand-name {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hiporn-home-tagline {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    color: var(--hp-muted);
}

.hiporn-home-search {
    width: var(--hp-search);
    margin: 0 auto 1rem;
}

.hiporn-home-account {
    margin-top: 0.5rem;
}

.hiporn-home-body {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
}

/* ── Quick nav ── */
.hiporn-home-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--hp-border);
}

.hiporn-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hiporn-nav-pill i {
    font-size: 1rem;
    opacity: 0.85;
}

.hiporn-nav-pill:hover {
    color: var(--bs-body-color);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.3);
    transform: translateY(-1px);
}

/* ── Sections ── */
.hiporn-section {
    margin-bottom: 2.5rem;
}

.hiporn-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hiporn-section-head-main {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.hiporn-section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.hiporn-section-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--hp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hiporn-section-desc::before {
    content: "·";
    margin-right: 0.625rem;
    opacity: 0.5;
}

.hiporn-section-more {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hp-muted);
    text-decoration: none;
    white-space: nowrap;
}

.hiporn-section-more:hover {
    color: var(--bs-success);
}

.hiporn-section-more i {
    font-size: 0.75rem;
    vertical-align: -1px;
}

/* ── Video grid & cards ── */
.hiporn-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--hp-gap);
    row-gap: var(--hp-gap-row);
}

@media (min-width: 768px) {
    .hiporn-video-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.hiporn-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hiporn-video-card {
    display: block;
    color: inherit;
}

.hiporn-video-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
    background: var(--hp-elevated);
}

.hiporn-video-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.hiporn-video-card:hover .hiporn-video-card-img {
    transform: scale(1.04);
}

.hiporn-video-card-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 0.2rem 0.45rem;
    font-size: var(--hp-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 4px;
    line-height: 1.45;
}

.hiporn-video-card-title {
    margin: 0.625rem 0 0;
    font-size: var(--hp-text-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-body-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.hiporn-video-card:hover .hiporn-video-card-title {
    color: var(--bs-success);
}

.hiporn-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--hp-muted);
    background: var(--hp-surface);
    border: 1px dashed var(--hp-border);
    border-radius: var(--hp-radius-sm);
}

.hiporn-chip-list--tags {
    gap: 0.625rem;
}

.hiporn-chip--filter {
    font-size: var(--hp-text-sm);
    padding: 0.4rem 0.8rem;
    line-height: 1.45;
}

.hiporn-chip--filter.is-active,
.hiporn-chip--filter.is-active:hover {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.12);
    border-color: rgba(var(--bs-success-rgb), 0.45);
}

/* ── Content pages (search / list / watch) ── */
.hiporn-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    font-size: var(--hp-text-sm);
}

.hiporn-page-search {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.hiporn-page-head {
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
}

.hiporn-page-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hiporn-page-head-main {
    min-width: 0;
    flex: 1;
}

.hiporn-page-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.hiporn-page-desc {
    margin: 0.375rem 0 0;
    font-size: var(--hp-text-sm);
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

.hiporn-page-more {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

.hiporn-page-more:hover {
    color: var(--bs-success);
}

.hiporn-breadcrumb {
    margin-bottom: 0.75rem;
}

.hiporn-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.hiporn-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--bs-secondary-color);
}

.hiporn-breadcrumb-item + .hiporn-breadcrumb-item::before {
    content: "/";
    margin: 0 0.4rem;
    opacity: 0.45;
}

.hiporn-breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.hiporn-breadcrumb-item a:hover {
    color: var(--bs-body-color);
}

.hiporn-breadcrumb-item [aria-current="page"] {
    color: var(--bs-body-color);
}

.hiporn-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .hiporn-page-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        align-items: start;
    }
}

.hiporn-page-aside {
    min-width: 0;
}

.hiporn-page-main {
    min-width: 0;
}

.hiporn-panel {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
}

.hiporn-panel--compact {
    margin-bottom: 0.75rem;
}

.hiporn-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.hiporn-panel-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.hiporn-panel-action {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.hiporn-panel-action:hover {
    color: var(--bs-success);
}

.hiporn-panel-body {
    padding: 0.75rem 0.875rem;
}

/* ── Download page ── */
.hiporn-download-panel {
    margin-bottom: 1rem;
}

.hiporn-download-route-label {
    font-size: 0.75rem;
    color: var(--hp-muted);
    white-space: nowrap;
}

.hiporn-download-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hiporn-download-hint {
    margin-bottom: 0;
}

.hiporn-download-backends-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.hiporn-download-backend-list {
    gap: 0.5rem;
}

.hiporn-chip--filter.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hiporn-download-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.hiporn-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.hiporn-download-action-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--hp-muted);
}

.hiporn-download-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.hiporn-download-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: rgba(var(--bs-body-bg-rgb), 0.35);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    border-radius: var(--hp-radius-sm);
}

.hiporn-download-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-success);
}

.hiporn-download-stat-label {
    font-size: 0.75rem;
    color: var(--hp-muted);
}

.hiporn-facet-group + .hiporn-facet-group {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.06);
}

.hiporn-facet-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.375rem;
}

.hiporn-facet-options {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hiporn-facet-option {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.hiporn-facet-option:hover {
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-color-rgb), 0.05);
}

.hiporn-facet-option.is-active {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    font-weight: 500;
}

.hiporn-user-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.hiporn-user-mini-name {
    font-size: 0.875rem;
    font-weight: 600;
}

.hiporn-user-mini-hint {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hiporn-user-mini-actions {
    display: grid;
    gap: 0.375rem;
}

.hiporn-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
}

.hiporn-sidebar-link:hover {
    background: rgba(var(--bs-success-rgb), 0.08);
    color: var(--bs-body-color);
}

.hiporn-filters {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.125rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.35);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    border-radius: var(--hp-radius-sm);
}

/* ── Search results v2 ── */
.hiporn-search-breadcrumb {
    margin-bottom: 0.875rem;
}

.hiporn-page-search--results {
    margin-bottom: 1rem;
}

.hiporn-page-search--results .hiporn-search-meta {
    display: none;
}

.hiporn-search-results-head {
    margin-bottom: 0.75rem;
}

.hiporn-search-results-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.hiporn-search-results-label {
    flex-shrink: 0;
}

.hiporn-search-results-meta {
    font-size: var(--hp-text-sm);
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.hiporn-search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.hiporn-search-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--hp-text-sm);
    font-weight: 500;
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-color-rgb), 0.04);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: 999px;
}

.hiporn-search-filter-btn.dropdown-toggle::after {
    margin-left: 0.125rem;
    opacity: 0.65;
}

.hiporn-search-filter.is-active .hiporn-search-filter-btn {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.35);
}

.hiporn-search-filter.is-disabled .hiporn-search-filter-btn {
    opacity: 0.45;
    cursor: not-allowed;
}

.hiporn-search-filter-name {
    color: var(--bs-secondary-color);
}

.hiporn-search-filter-value {
    font-weight: 600;
}

.hiporn-search-filter-menu {
    min-width: 10rem;
    font-size: var(--hp-text-sm);
}

.hiporn-search-filter-menu .dropdown-item.active {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.12);
}

.hiporn-search-filter-clear {
    margin-left: auto;
    font-size: var(--hp-text-sm);
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

.hiporn-search-filter-clear:hover {
    color: var(--bs-body-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hiporn-search-related {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.hiporn-search-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.hiporn-search-related-title {
    margin: 0;
    font-size: var(--hp-text-sm);
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.hiporn-search-related-toggle {
    padding: 0;
    font-size: var(--hp-text-xs);
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.hiporn-search-related-toggle:hover {
    color: var(--bs-body-color);
}

.hiporn-search-related-list {
    max-height: 2.375rem;
    overflow: hidden;
    gap: 0.375rem;
}

.hiporn-search-related.is-expanded .hiporn-search-related-list {
    max-height: none;
}

.hiporn-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    min-height: 2rem;
}

.hiporn-filter-label {
    flex-shrink: 0;
    width: 2.75rem;
    font-size: var(--hp-text-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

.hiporn-chip-list--filters {
    flex: 1;
    min-width: 0;
    gap: 0.375rem;
}

.hiporn-subnav {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    font-size: 0.875rem;
}

.hiporn-subnav a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    margin-right: 0.75rem;
    white-space: nowrap;
}

.hiporn-subnav a:hover,
.hiporn-subnav .active {
    color: var(--bs-success);
}

.hiporn-video-grid--list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 1.625rem;
}

@media (min-width: 576px) {
    .hiporn-video-grid--list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1.0625rem;
    }
}

@media (min-width: 768px) {
    .hiporn-video-grid--list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1.125rem;
        row-gap: 1.75rem;
    }
}

@media (min-width: 992px) {
    .hiporn-video-grid--list {
        /* 1120 容器内 4 列比 5 列更适合中文标题阅读 */
        grid-template-columns: repeat(4, 1fr);
        column-gap: 1.25rem;
        row-gap: 1.875rem;
    }
}

.hiporn-list-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    min-height: 1.375rem;
}

.hiporn-list-card-author {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: var(--hp-text-sm);
    line-height: 1.45;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.hiporn-list-card-author:hover {
    color: var(--bs-body-color);
}

.hiporn-list-card-avatar {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.hiporn-list-card-author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hiporn-list-card-time {
    flex-shrink: 0;
    font-size: var(--hp-text-xs);
    line-height: 1.45;
    color: var(--bs-secondary-color);
}

.hiporn-pagination {
    margin-top: 0;
    display: flex;
    justify-content: center;
}

.hiporn-pagination-wrap {
    margin-top: 1.5rem;
    width: 100%;
}

.hiporn-pagination-hint {
    margin: 0.625rem 0 0;
    text-align: center;
    font-size: var(--hp-text-xs);
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

.hiporn-pagination-kbd {
    display: inline-block;
    min-width: 1.375rem;
    padding: 0.1rem 0.35rem;
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: center;
    color: var(--bs-body-color);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.65);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.14);
    border-radius: 0.25rem;
}

.hiporn-pager,
.hiporn-pager-v3 {
    width: 100%;
    max-width: 100%;
}

/* v3：移动端三行 / 桌面端页码条 */
.hiporn-pager-v3-desktop {
    display: none;
}

.hiporn-pager-v3-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}

.hiporn-pager-v3-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hiporn-pager-v3-scroll::-webkit-scrollbar {
    display: none;
}

.hiporn-pager-v3-scroll .hiporn-pager-v3-list {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    justify-content: center;
    margin: 0 auto;
}

.hiporn-pager-v3-nav {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.hiporn-pager-v3-nav-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--hp-text-sm);
    text-decoration: none;
    color: var(--bs-body-color);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
}

.hiporn-pager-v3-nav-btn:first-child {
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.hiporn-pager-v3-nav-btn:last-child {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.hiporn-pager-v3-nav-btn.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.hiporn-pager-v3-current {
    flex: 1.2 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--hp-text-sm);
    font-weight: 600;
    color: #fff;
    background: var(--bs-success);
    border-top: 1px solid var(--bs-success);
    border-bottom: 1px solid var(--bs-success);
    white-space: nowrap;
}

.hiporn-pager-v3-jump,
.hiporn-pager-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}

.hiporn-pager-v3-jump-label,
.hiporn-pager-v3-jump-suffix,
.hiporn-pager-jump-label,
.hiporn-pager-jump-suffix {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hiporn-pager-v3-jump-input,
.hiporn-pager-jump-input {
    width: 4.5rem;
    text-align: center;
}

.hiporn-pager-v3-jump-btn {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-body-color-rgb), 0.2);
    background: transparent;
}

.hiporn-pager-v3-jump-btn:hover,
.hiporn-pager-v3-jump-btn:focus {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.hiporn-pager-v3--simple {
    max-width: 28rem;
    margin: 0 auto;
}

.hiporn-pager-v3--simple .hiporn-pager-v3-nav {
    max-width: none;
}

@media (min-width: 768px) {
    .hiporn-pager-v3-desktop {
        display: block;
    }

    .hiporn-pager-v3-mobile {
        display: none;
    }
}

.hiporn-pagination .pagination {
    margin: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hiporn-pagination .page-link {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
    border-color: rgba(var(--bs-body-color-rgb), 0.12);
    color: var(--bs-body-color);
    min-width: 2.375rem;
    padding: 0.4rem 0.65rem;
    font-size: var(--hp-text-sm);
    text-align: center;
}

.hiporn-pagination .page-item.active .page-link {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.hiporn-pagination .page-item.disabled .page-link {
    opacity: 0.45;
}

/* ── Watch page ── */
.hiporn-watch-head {
    margin-bottom: 1rem;
}

.hiporn-watch-title {
    font-size: 1.125rem;
    line-height: 1.4;
}

.hiporn-watch-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.hiporn-watch-tags-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hiporn-watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .hiporn-watch-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }
}

.hiporn-watch-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.hiporn-player-wrap {
    position: relative;
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
    background: #000;
}

.hiporn-playback-bar {
    margin-top: 0.65rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--hp-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hiporn-playback-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
}

.hiporn-playback-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--hp-muted, rgba(255, 255, 255, 0.65));
    min-width: 3.25rem;
}

.hiporn-playback-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.hiporn-playback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.875rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hiporn-playback-btn:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.hiporn-playback-btn.is-active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.hiporn-playback-status {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--hp-muted);
    min-height: 0;
}

.hiporn-playback-status:empty {
    display: none;
}

.hiporn-playback-vip {
    font-size: 0.625rem;
    padding: 0.15rem 0.35rem;
    vertical-align: middle;
}

.hiporn-playback-bar[data-vip-only="1"] .hiporn-playback-btn:not(.is-active) {
    opacity: 0.92;
}

.hiporn-watch-download {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hiporn-watch-download-status {
    position: absolute;
    top: calc(100% + 0.125rem);
    right: 0;
    z-index: 2;
    max-width: 14rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--hp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.hiporn-watch-download-status:empty {
    display: none;
}

.hiporn-customize-vip-section .hiporn-customize-section-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hiporn-danmaku-toggle {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hiporn-danmaku-toggle:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.45);
}

.hiporn-danmaku-toggle.is-off {
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.65);
}

.hiporn-danmaku-toggle-label {
    font-size: 0.75rem;
}

.hiporn-watch-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.hiporn-watch-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
    border-radius: var(--hp-radius-sm);
}

.hiporn-watch-author-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.hiporn-watch-author-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.hiporn-watch-author-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

a.hiporn-watch-author-name:hover {
    color: var(--hp-accent);
}

.hiporn-watch-author-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hiporn-watch-engage {
    display: flex;
    gap: 0.375rem;
}

.hiporn-engage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.15);
    border-radius: var(--hp-radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.hiporn-engage-btn:hover {
    border-color: rgba(var(--bs-body-color-rgb), 0.3);
}

.hiporn-engage-btn.is-active {
    color: var(--hp-accent);
    border-color: rgba(var(--hp-accent-rgb, 139, 195, 74), 0.5);
    background: rgba(var(--hp-accent-rgb, 139, 195, 74), 0.12);
}

.hiporn-engage-count {
    min-width: 1.25rem;
    text-align: center;
}

.hiporn-watch-comments {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
}

.hiporn-watch-comments-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hiporn-watch-comments-total {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.hiporn-watch-comments-sort {
    display: flex;
    gap: 0.375rem;
}

.hiporn-watch-comments-sort .hiporn-chip.is-active {
    color: var(--hp-accent);
    border-color: rgba(var(--hp-accent-rgb, 139, 195, 74), 0.5);
    background: rgba(var(--hp-accent-rgb, 139, 195, 74), 0.1);
}

.hiporn-comment-form {
    margin-bottom: 1.25rem;
}

.hiporn-comment-input {
    resize: vertical;
    min-height: 4rem;
    font-size: 0.875rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.35);
    border-color: rgba(var(--bs-body-color-rgb), 0.15);
}

.hiporn-comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hiporn-comment-hint {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hiporn-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hiporn-comment-item {
    padding: 0.75rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.35);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    border-radius: var(--hp-radius-sm);
}

.hiporn-comment-item.is-reply {
    margin-left: 1.5rem;
    margin-top: 0.625rem;
}

.hiporn-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.hiporn-comment-author {
    font-size: 0.8125rem;
    font-weight: 600;
}

.hiporn-comment-time {
    font-size: 0.6875rem;
    color: var(--bs-secondary-color);
}

.hiporn-comment-body {
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    margin: 0 0 0.5rem;
}

.hiporn-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hiporn-comment-vote,
.hiporn-comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    background: none;
    border: none;
    cursor: pointer;
}

.hiporn-comment-vote.is-active {
    color: var(--hp-accent);
}

.hiporn-comment-reply-form {
    margin-top: 0.625rem;
}

.hiporn-comment-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.hiporn-comment-more-wrap {
    margin-top: 1rem;
    text-align: center;
}

.hiporn-watch-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hiporn-watch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hiporn-watch-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    line-height: 1.25;
    white-space: nowrap;
}

.hiporn-watch-actions .dropdown-toggle::after {
    margin-left: 0.35rem;
}

/* YouTube-style sidebar feed */
.hiporn-watch-feed-heading {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.hiporn-watch-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.hiporn-watch-feed-item {
    display: flex;
    gap: 0.5rem;
    color: inherit;
    border-radius: var(--hp-radius-sm);
    transition: background 0.15s;
}

.hiporn-watch-feed-item:hover {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
}

.hiporn-watch-feed-thumb {
    position: relative;
    flex-shrink: 0;
    width: 168px;
    aspect-ratio: 16 / 9;
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
    background: #000;
}

.hiporn-watch-feed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hiporn-watch-feed-duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0.125rem 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 3px;
}

.hiporn-watch-feed-body {
    flex: 1;
    min-width: 0;
    padding-top: 0.125rem;
}

.hiporn-watch-feed-title {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hiporn-watch-feed-meta {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--bs-secondary-color);
}

.hiporn-watch-feed-more {
    margin-top: 0.75rem;
}

@media (max-width: 991.98px) {
    .hiporn-watch-feed-thumb {
        width: 140px;
    }

    .hiporn-watch-aside {
        margin-top: 0.5rem;
    }
}

/* ── Empty / error state ── */
.hiporn-empty-state {
    max-width: 480px;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: var(--hp-radius);
}

.hiporn-empty-state-icon {
    font-size: 2.5rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
}

.hiporn-empty-state-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.hiporn-empty-state-desc {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.hiporn-empty-state-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.6;
}

.hiporn-user-text-link {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.hiporn-user-text-link:hover {
    color: var(--bs-success);
}

/* ── Footer ── */
.hiporn-footer {
    margin-top: 2rem;
    padding: 1.5rem 1rem 2rem;
    border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.35);
}

.hiporn-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.hiporn-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.hiporn-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.hiporn-footer-brand:hover {
    color: var(--bs-body-color);
    opacity: 0.85;
}

.hiporn-footer-brand img {
    border-radius: 6px;
}

.hiporn-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.hiporn-footer-nav a {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hiporn-footer-nav a:hover {
    color: var(--bs-body-color);
}

.hiporn-footer-bottom {
    text-align: center;
}

.hiporn-footer-copy {
    margin: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .hiporn-footer-bottom {
        text-align: left;
    }
}

/* ── Page alerts (shared with user center) ── */
.hiporn-user-alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid transparent;
}

.hiporn-user-alert--success {
    color: #b8f0c8;
    background: rgba(var(--bs-success-rgb), 0.12);
    border-color: rgba(var(--bs-success-rgb), 0.25);
}

.hiporn-user-alert--warning {
    color: #ffe8a3;
    background: rgba(var(--bs-warning-rgb), 0.12);
    border-color: rgba(var(--bs-warning-rgb), 0.25);
}

.hiporn-user-alert--danger {
    color: #ffb4b4;
    background: rgba(var(--bs-danger-rgb), 0.12);
    border-color: rgba(var(--bs-danger-rgb), 0.25);
}

.hiporn-rec-hint {
    position: relative;
    padding-right: 2.5rem;
}

.hiporn-rec-hint-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    opacity: 0.65;
}

.hiporn-rec-hint-close:hover {
    opacity: 1;
}

.hiporn-page-head--center {
    text-align: center;
}

.hiporn-page-head--center .hiporn-page-desc {
    max-width: 42rem;
    margin-inline: auto;
}

.hiporn-panel-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hiporn-note-list {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.hiporn-note-list li + li {
    margin-top: 0.35rem;
}

/* ── AI Face ── */
.hiporn-aiface-layout {
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .hiporn-aiface-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
    }
}

.hiporn-aiface-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 1rem;
}

.hiporn-aiface-form-action {
    flex-shrink: 0;
}

.hiporn-dropzone.hiporn-dropzone {
    border: 1px dashed rgba(var(--bs-body-color-rgb), 0.25);
    border-radius: var(--hp-radius-sm);
    background: rgba(var(--bs-body-bg-rgb), 0.35);
    min-height: 140px;
}

.hiporn-dropzone .dz-message {
    margin: 1.5rem 0;
    color: var(--bs-secondary-color);
}

.hiporn-dropzone-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--bs-success);
}

.hiporn-stat-list {
    margin: 0;
}

.hiporn-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.06);
}

.hiporn-stat-row:last-child {
    border-bottom: 0;
}

.hiporn-stat-row dt {
    margin: 0;
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.hiporn-stat-row dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

.hiporn-aiface-samples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
}

.hiporn-aiface-sample {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    aspect-ratio: 1;
}

.hiporn-aiface-sample img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Service pricing ── */
.hiporn-pricing-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .hiporn-pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hiporn-pricing-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: var(--hp-radius-sm);
}

.hiporn-pricing-card--featured {
    border-color: rgba(var(--bs-success-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 0.15);
}

.hiporn-pricing-head {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.hiporn-pricing-price {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hiporn-pricing-price small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.hiporn-pricing-features {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    flex: 1;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.hiporn-pricing-features li {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.06);
}

.hiporn-pricing-features li:last-child {
    border-bottom: 0;
}

.hiporn-stats-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.hiporn-stat-card {
    flex: 0 0 min(240px, 80vw);
    scroll-snap-align: start;
    padding: 1rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.45);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    border-radius: var(--hp-radius-sm);
}

.hiporn-stat-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.hiporn-stat-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hiporn-stat-card p + p {
    margin-top: 0.25rem;
}

/* ── Rubbish modal ── */
.hiporn-modal-content {
    background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
}

.hiporn-modal-content .modal-header,
.hiporn-modal-content .modal-footer {
    border-color: rgba(var(--bs-body-color-rgb), 0.08);
}

/* ── Legacy page column (search etc.) ── */
.hiporn-page-column {
    width: 100%;
    max-width: 960px;
}

.hiporn-home-section,
.hiporn-home-channels {
    width: 100%;
}

@media (max-width: 575.98px) {
    .hiporn-home-hero {
        padding-top: 1.5rem;
    }

    .hiporn-home-brand-name {
        font-size: 1.125rem;
    }

    .hiporn-home-tagline {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .hiporn-search-wrap--hero .hiporn-search-bar {
        border-radius: var(--hp-radius);
    }

    .hiporn-search-wrap--hero .hiporn-search-submit {
        border-radius: 0 !important;
        padding-inline: 1rem;
    }

    .hiporn-video-grid {
        column-gap: 0.875rem;
        row-gap: 1.375rem;
    }

    .hiporn-video-grid--list {
        column-gap: 0.875rem;
        row-gap: 1.5rem;
    }

    .hiporn-page {
        padding: 1rem 0.75rem 2rem;
    }

    .hiporn-search-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.625rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hiporn-search-toolbar::-webkit-scrollbar {
        display: none;
    }

    .hiporn-search-filter-clear {
        margin-left: 0;
    }

    .hiporn-search-results-line {
        font-size: 1rem;
    }

    .hiporn-page-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .hiporn-filter-label {
        width: auto;
        min-width: 2.75rem;
    }

    .hiporn-filters {
        gap: 0.3125rem;
        padding: 0.5rem 0.625rem;
    }
}