/* 91xhs.com - 小红书风格：白底 + 纯红 #ff2442 */
:root {
    --xhs-red:      #ff2442;
    --xhs-red-dim:  rgba(255, 36, 66, 0.1);
    --xhs-bg:       #ffffff;
    --xhs-bg-gray:  #f5f5f5;
    --xhs-card:     #ffffff;
    --xhs-border:   rgba(0,0,0,0.08);
    --xhs-text:     #1a1a1a;
    --xhs-text-sub: #666666;
}

/* ── 全局背景 & 文字 ───────────────────────────────────── */
html, body, #app,
.main-content,
.search-box,
.video-player-empty,
.md-row-lay,
.van-tabbar {
    background-color: var(--xhs-bg);
    color: var(--xhs-text);
}

/* 视频播放器保持黑色 */
.video-player,
.md-row-lay.bg-black {
    background-color: #000;
}

.top-header {
    background-color: #fff;
    height: 75px;
    padding: min(3.2vw, 18px) min(4vw, 24px);
}

.nav-tabs {
    background-color: #fff;
    border-bottom: 1px solid var(--xhs-border);
    top: 75px;
    height: 50px;
}

.nav-tabs-wrapper {
    
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 min(4vw, 24px);
    min-width: max-content;
}

.nav-tab {

    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
}

/* ── 文字颜色覆盖 ──────────────────────────────────────── */
.video-item-name,
.topic-name,
.section-block-title-text,
.video-detail-title,
.video-detail-description,
.nav-tab,
.topic-meta,
.related-videos-title,
.page-text {
    color: var(--xhs-text);
}

/* ── 搜索框 ─────────────────────────────────────────────── */
.search-input-header,
.search-box input[type="text"] {
    background-color: var(--xhs-bg-gray);
    border-color: transparent;
    border-radius: min(999px, 999vw);
    color: var(--xhs-text);
}

.search-input-header::placeholder,
.search-box input[type="text"]::placeholder {
    color: #999;
}

.search-box-btn {
    background: var(--xhs-red);
    border: none;
    color: #fff;
    border-radius: min(999px, 999vw);
}

/* ── Logo 图片：圆角裁切 ────────────────────────────────── */
.logo-img {
    height: min(9vw, 40px);
    width: auto;
    border-radius: min(2vw, 12px);
}
.logo-text {
    color: var(--xhs-red);
    -webkit-text-fill-color: var(--xhs-red);
    font-weight: 700;
}

/* ── 顶部按钮 ──────────────────────────────────────────── */
.login-btn,
.register-btn {
    height: min(7.5vw, 44px);
    box-sizing: border-box;
    align-self: center;
    border-radius: min(999px, 999vw);
}

.login-btn {
    background: transparent;
    border: min(0.267vw, 1.6px) solid var(--xhs-red);
    color: var(--xhs-red);
}

.register-btn {
    background: var(--xhs-red);
    border: min(0.267vw, 1.6px) solid transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
}

/* ── 导航标签：激活态灰色胶囊（仿 XHS）─────────────────── */
.nav-tab {
    color: #888;
    font-size: min(4vw, 17px);
    font-weight: 400;
    padding: 8px 10px;
    border-radius: min(999px, 999vw);
    background: transparent;
    -webkit-text-fill-color: currentColor;
}

.nav-tab.active {
    color: #1a1a1a;
    font-weight: 600;
    background: #ebebeb;
    -webkit-text-fill-color: #1a1a1a;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* 去掉原来的下划线伪元素 */
.nav-tab.active::after {
    display: none;
}

/* ── 卡片 ───────────────────────────────────────────────── */
.md-row-lay {
    background-color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none;
    overflow: hidden;
    border: none;
}

/* 卡片内标题 */
.md-row-lay .video-item-name {
    color: #333;
    font-weight: 600;
    font-size: min(3.733vw, 22.4px);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 首页大卡片底部区域白底 */
.md-row-lay .info.video-bottom {
    background: #fff;
    padding: min(2vw, 8px) 0;
}

/* ── 标签 chip ──────────────────────────────────────────── */
.video-tag {
    background-color: var(--xhs-red-dim);
    color: var(--xhs-red);
    border-radius: min(999px, 999vw);
}

.video-chip {
    background-color: rgba(0,0,0,0.45);
    color: #fff;
}

/* ── section 标题 ───────────────────────────────────────── */
.section-block-title-badge {
    color: var(--xhs-text-sub);
}

.section-more { color: var(--xhs-red); }

/* ── 加载更多按钮 ───────────────────────────────────────── */
.load-more-btn {
    border-color: var(--xhs-border);
    color: var(--xhs-text-sub);
    border-radius: min(999px, 999vw);
    background: var(--xhs-bg-gray);
}

.load-more-btn:disabled {
    opacity: 0.5;
}

/* ── 专题头部（与 videos-list 左右对齐）──────────────────── */
.topic-header {
    margin: min(2vw, 8px) min(2vw, 8px) min(2vw, 8px);
    background: #fff5f6;
    border: 1px solid rgba(255, 36, 66, 0.2);
    box-shadow: none;
}

/* ── 更多视频按钮 ───────────────────────────────────────── */
.page-topic-more-btn {
    border-color: var(--xhs-border);
    color: var(--xhs-text-sub);
    background: var(--xhs-bg-gray);
    border-radius: min(999px, 999vw);
}

/* ── 公告 / 推广行 / 视频详情 对齐 videos-list ──────────── */
.website-notice,
.promo-row,
.video-detail {
    margin-left: min(2vw, 8px);
    margin-right: min(2vw, 8px);
}

.promo-row,
.video-detail {
    padding-left: 0;
    padding-right: 0;
}

.website-notice {
    background: #fff5f6;
    border-radius: min(2vw, 12px);
}

.website-notice-tag {
    background: var(--xhs-red-dim);
    border: 1px solid rgba(255,36,66,0.2);
    color: var(--xhs-red);
    border-radius: min(999px, 999vw);
}

.website-notice-text,
.website-notice-link {
    color: var(--xhs-text);
}

/* ── 空状态 ─────────────────────────────────────────────── */
.empty-state { color: var(--xhs-text-sub); }

/* ── 封面图 ─────────────────────────────────────────────── */
.md-row-lay .coverImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    border-radius: 2%;
}

/* ── 左右边距收窄 ───────────────────────────────────────── */
.videos-list {
    padding: 0 min(2vw, 8px);
    gap: min(2vw, 8px);
}

.section-block {
    padding: 0;
}


/* ── ArtPlayer ──────────────────────────────────────────── */
.art-video-player { border-radius: 0; }