/* ============================================================
   MusicHub - 首页两列改版 · 视觉与交互（2026-10-20 二轮）
   ------------------------------------------------------------
   独立文件，便于单独回滚：删掉 functions.php 里对应的 enqueue 即可。

   本轮按站主要求：
     顶栏：四段整体居中；圆角长条搜索（框内右侧搜索按钮）；去掉酒红底
     左栏：单选主菜单（原顶栏导航搬家）+ 筛选面板，全部模块立体悬浮
     右栏：子菜单行 + 图文流 + 上下页码（总数与页码同行）；
           卡片左边框取消（只留两列间细竖线）；展开详情不重复封面，
           正文通栏、版式与独立详情页完全一致
     全局：两栏间距缩小；字号加大、文字加深；模块统一阴影与圆角

   本文件只管「新结构」的版式与观感；老样式（theme.css / mh-home.css）
   一律不动，避免牵一发动全身。
   ============================================================ */

/* ------------------------------------------------------------
   0. 令牌：阴影 / 圆角 / 两栏专用文字色
   ------------------------------------------------------------ */
:root {
    --mh-home-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.07);
    --mh-home-shadow-2: 0 2px 6px rgba(15, 23, 42, 0.07), 0 12px 32px rgba(15, 23, 42, 0.12);
    --mh-home-radius: 12px;
}
[data-theme='dark'] {
    --mh-home-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.42);
    --mh-home-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.36), 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* 两栏内文字：加大对比、加深颜色（只作用于首页两栏，不波及其它页面） */
.mh-home-two-col-page {
    --mh-text-secondary: #4b5563;
    --mh-text-muted: #6b7280;
}
[data-theme='dark'] .mh-home-two-col-page {
    --mh-text-secondary: #cbd5e1;
    --mh-text-muted: #94a3b8;
}

/* ------------------------------------------------------------
   1. 两栏容器与细竖线（间距已缩小）
   ------------------------------------------------------------ */
.mh-two-col {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: var(--mh-site-width, 1150px);
    margin: 0 auto;
    padding: 0 var(--mh-site-padding, 16px);
}

/* 2026-10-20 三轮改版：两列之间的细竖线已按站主要求删除。
   两栏靠「左栏浅灰底 + 右栏白底 + 卡片间距」自然分界，不再需要竖线。 */
.mh-col-left {
    flex: 0 0 var(--mh-home-col-w, 300px);
    min-width: 0;
    position: sticky;
    top: 74px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 细滚动条，不喧宾夺主 */
    scrollbar-width: thin;
    scrollbar-color: var(--mh-border) transparent;
    padding-right: 4px;
}
.mh-col-left::-webkit-scrollbar { width: 6px; }
.mh-col-left::-webkit-scrollbar-track { background: transparent; }
.mh-col-left::-webkit-scrollbar-thumb {
    background: var(--mh-border);
    border-radius: 3px;
}
.mh-col-left::-webkit-scrollbar-thumb:hover { background: var(--mh-text-muted); }

.mh-col-right {
    flex: 1 1 auto;
    min-width: 0;
}

/* 每日精选通栏：改版后已收进右栏 tab，首页隐藏（其它位置仍可用） */
.mh-front-page .daily-featured { display: none !important; }

/* ------------------------------------------------------------
   2. 顶栏：去酒红底，四段整体居中，圆角长条搜索
   ------------------------------------------------------------ */
/* 酒红吸底 → 清爽浅色（细边 + 轻阴影，吸顶不飘） */
#site-header.mh-header {
    background: var(--mh-surface);
    border-bottom: 1px solid var(--mh-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}
[data-theme='dark'] #site-header.mh-header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* 主行：logo | 搜索 | 明暗 | 登录注册 —— 整体居中 */
#site-header.mh-header .mh-header-row {
    justify-content: center;
    gap: 18px;
}

/* 品牌区：名称用主文字色（浅底不再是白字） */
#site-header.mh-header .header-brand {
    flex: 0 0 auto;
    padding-left: 0;
    gap: 10px;
}
#site-header.mh-header .site-logo-img img { max-width: 180px; height: 34px; }
#site-header.mh-header .site-name {
    color: var(--mh-text);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* 长条搜索：整体居中布局里的主角
   ⚠️ theme.css 里有一批旧规则（#site-header.mh-header .mh-header-search…，
   权重 1,3,0：容器 176px、白底、圆角 0、按钮绝对定位 24×24 透明），
   普通类选择器压不住。这里用同等/更高权重的选择器（本文件在 theme.css 之后加载），
   圆角长条 + 框内右侧按钮才真正生效。 */
#site-header.mh-header .mh-header-search.header-search-inline {
    flex: 0 1 auto;
    width: clamp(340px, 42vw, 640px);
    min-width: 0;
    margin: 0;
    transform: none;
    align-self: center;
    position: relative;
}

/* 搜索框：大圆角，框内右侧一个搜索按钮 */
#site-header.mh-header .mh-header-search .mh-search-bar .search-input-wrap {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1.5px solid var(--mh-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--mh-surface);
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
/* 手机浏览器会给 type=search 画一个原生放大镜装饰，去掉它——
   框内只保留右侧的搜索按钮（按站主要求） */
#site-header.mh-header .mh-header-search .mh-search-bar .search-input::-webkit-search-decoration,
#site-header.mh-header .mh-header-search .mh-search-bar .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-input-wrap:focus-within {
    border-color: var(--mh-primary);
    box-shadow: 0 0 0 3px rgba(200, 168, 76, 0.16);
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.92rem;
    color: var(--mh-text);
    padding: 0 6px 0 18px;
    height: 100%;
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-input::placeholder { color: var(--mh-text-muted); }
#site-header.mh-header .mh-header-search .mh-search-bar .search-submit {
    /* ⚠️ theme.css 有一条更高优先级的旧规则：
       #site-header.mh-header .mh-header-search .search-submit
       { position:absolute; right:6px; top:50%; transform:translateY(-50%);
         width:24px; height:24px; }
       它的 top/transform 会让按钮飘到框外（实测按钮 t=2、容器 t=12）。
       这里必须把 position / top / right / transform / width 全部显式复位，
       只靠 position:static 是不够的。 */
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex: none;
    /* 自身不撑高，靠 align-self 居中；高度写死，杜绝错位 */
    align-self: center;
    width: auto;
    height: 32px;
    margin: 0 5px 0 0;
    padding: 0 16px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    /* 低调：与旁边的登录/明暗按钮同一套文字色块风格，
       不再用实心主色，避免在顶栏里过于跳眼 */
    background: transparent;
    color: var(--mh-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mh-transition);
    white-space: nowrap;
    line-height: 1;
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-submit:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
    background: transparent;
}

/* 联想下拉：贴着圆角框 */
#site-header.mh-header .mh-header-search .mh-search-bar .search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    box-shadow: var(--mh-home-shadow-2);
    z-index: 300;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-suggestions.open { display: block; }

/* 工具区：明暗 + 登录注册，紧凑排列 */
#site-header.mh-header .header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 主题切换按钮：圆形图标按钮 */
#site-header.mh-header .theme-toggle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    border: 1.5px solid var(--mh-border);
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    transition: all var(--mh-transition);
}
#site-header.mh-header .theme-toggle-btn:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}

/* 登录/注册：主次分明 */
#site-header.mh-header .login-btn,
#site-header.mh-header .register-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
#site-header.mh-header .login-btn {
    border: 1.5px solid var(--mh-border);
    background: var(--mh-surface);
    color: var(--mh-text);
}
#site-header.mh-header .login-btn:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
/* 注册按钮：与登录按钮同款（描边 + 文字色），
   不再用实心主色 —— 顶栏里的色块要和旁边文字色块保持一致，不要跳眼 */
#site-header.mh-header .register-btn {
    background: var(--mh-surface);
    color: var(--mh-text);
    border: 1.5px solid var(--mh-border);
}
#site-header.mh-header .register-btn:hover { border-color: var(--mh-primary); color: var(--mh-primary); }

/* 登录态：头像 + 昵称（浅底适配） */
#site-header.mh-header .user-btn {
    border: 1.5px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text);
    height: 38px;
    padding: 0 14px 0 8px;
}
#site-header.mh-header .user-btn:hover { border-color: var(--mh-primary); }

/* ------------------------------------------------------------
   3. 左栏：单选主菜单（原顶栏导航的搬家落点）
   ------------------------------------------------------------ */
.mh-home-menu {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: var(--mh-surface);
    box-shadow: var(--mh-home-shadow-1);
    overflow: hidden;
    margin-bottom: 14px;
}
.mh-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--mh-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--mh-border-light);
    transition: background var(--mh-transition), color var(--mh-transition);
}
.mh-menu-item:last-child { border-bottom: none; }
.mh-menu-item:hover { background: var(--mh-surface-hover); color: var(--mh-text); }
/* 单选中的那项：金色左标记 + 淡金底 + 加粗 */
.mh-menu-item.is-active {
    background: rgba(200, 168, 76, 0.10);
    color: var(--mh-text);
    font-weight: 700;
}
.mh-menu-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--mh-primary);
    border-radius: 0 2px 2px 0;
}
.mh-menu-item-icon {
    flex: none;
    width: 18px;
    text-align: center;
    color: var(--mh-primary);
    font-size: 0.95rem;
}
.mh-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-menu-item-count {
    flex: none;
    font-size: 0.78rem;
    color: var(--mh-text-muted);
    font-variant-numeric: tabular-nums;
}
.mh-menu-item.is-active .mh-menu-item-count { color: var(--mh-primary-hover); }
/* 带子菜单的主分类：右侧 › 提示「点它，右侧出现子菜单」 */
.mh-menu-item-caret {
    flex: none;
    color: var(--mh-text-muted);
    font-size: 1.05rem;
    line-height: 1;
}
.mh-menu-item:hover .mh-menu-item-caret { color: var(--mh-primary); }
.mh-menu-divider {
    display: block;
    height: 1px;
    background: var(--mh-border);
}
[data-theme='dark'] .mh-menu-item.is-active { background: rgba(240, 192, 64, 0.14); }

/* ------------------------------------------------------------
   4. 左栏：筛选面板（立体悬浮 + 大字号）
   ------------------------------------------------------------ */
.mh-filter-panel {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: var(--mh-surface);
    box-shadow: var(--mh-home-shadow-1);
    overflow: hidden;
}
.mh-fp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 紧凑：原 14px 16px → 8px 16px */
    padding: 8px 16px;
    /* 站主要求：标题背景色块下方的间隔线取消 */
    border-bottom: none;
    background: var(--mh-surface-hover);
}
.mh-fp-head-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--mh-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mh-fp-head-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--mh-primary);
    border-radius: 2px;
}
.mh-fp-clear-all {
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.mh-fp-clear-all:hover { color: var(--mh-primary-hover); }

/* 维度块 */
/* 一级标题下方的间隔线：站主要求取消（整块靠间距分区，不再用横线） */
.mh-fp-dim { border-bottom: none; }
.mh-fp-dim:last-child { border-bottom: none; }
.mh-fp-dim-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* 紧凑：原 12px 16px 9px → 上下各 1px。
       站主要求「上下标题间距控制在 20px」：
       标题文字 .88rem × line-height 1.3 ≈ 18.2px + 上下 padding 各 1px ≈ 20px/行 */
    padding: 1px 16px;
    cursor: pointer;
    user-select: none;
}
.mh-fp-dim-title {
    margin: 0;
    /* 紧凑：原 .95rem → .88rem */
    font-size: 0.88rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mh-text);
    display: flex;
    align-items: center;
    gap: 7px;
}
.mh-fp-dim-title .mh-fp-dim-icon { color: var(--mh-primary); font-size: 0.88rem; }
.mh-fp-dim-toggle {
    /* 紧凑：原 .78rem → .74rem */
    font-size: 0.74rem;
    color: var(--mh-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.mh-fp-dim-toggle:hover { color: var(--mh-primary-hover); }
.mh-fp-dim-toggle .mh-caret { transition: transform var(--mh-transition); }
.mh-fp-dim.is-collapsed .mh-fp-dim-toggle .mh-caret { transform: rotate(-90deg); }
/* ⚠️ 折叠失效修复：三个 CSS 文件里都只有箭头的旋转规则，
   缺了「隐藏内容」这一条 → 点了「展开/收起」类名变了但 chip 区照样显示，
   表现为按钮完全失效。这里补齐：折叠时隐藏 chip 区与内嵌搜索框。 */
.mh-fp-dim.is-collapsed .mh-fp-chips,
.mh-fp-dim.is-collapsed .mh-fp-dim-search {
    display: none !important;
}
/* 折叠时给标题行一个更明确的「可点」提示 */
.mh-fp-dim.is-collapsed .mh-fp-dim-head {
    background: var(--mh-surface-hover);
}

/* 长尾维度内嵌搜索 */
.mh-fp-dim-search {
    /* 紧凑：原 0 16px 9px → 0 16px 5px */
    padding: 0 16px 5px;
}
.mh-fp-dim-search input {
    width: 100%;
    /* 紧凑：原 34px → 29px */
    height: 29px;
    padding: 0 12px;
    border: 1px solid var(--mh-border);
    border-radius: 8px;
    background: var(--mh-surface);
    color: var(--mh-text);
    font-size: 0.86rem;
    outline: none;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
.mh-fp-dim-search input:focus {
    border-color: var(--mh-primary);
    box-shadow: 0 0 0 3px rgba(200, 168, 76, 0.12);
}
.mh-fp-dim-search input::placeholder { color: var(--mh-text-muted); }

/* chip 区 */
.mh-fp-chips {
    display: flex;
    flex-wrap: wrap;
    /* 紧凑：行间距 6px → 2px，列间距保持 6px；下内边距 13px → 7px */
    row-gap: 2px;
    column-gap: 6px;
    /* 展开态：参数区与上方标题留 2px，下方留 7px */
    padding: 2px 16px 7px;
}
.mh-fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* 紧凑：原 5px 11px → 2px 9px，字号 .84rem → .79rem */
    padding: 2px 9px;
    line-height: 1.25;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.79rem;
    text-decoration: none;
    transition: all var(--mh-transition);
    max-width: 100%;
}
.mh-fp-chip:not(.is-active):hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary-hover);
}
.mh-fp-chip.is-active {
    /* 选中态：浅金底 + 深褐金字 + 金边。
       原方案是「金底 + 白字」，但左栏色块被强制成近白色（见 12.1 节），
       白字压在白底上直接消失 → 改为深字配浅金底，对比度与辨识度都够。 */
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--mh-primary);
    color: #7a5f10;
    font-weight: 600;
}
[data-theme='dark'] .mh-fp-chip.is-active {
    background: rgba(212, 185, 94, 0.22);
    color: #f0c040;
}
.mh-fp-chip.is-active .mh-fp-chip-count { color: #7a5f10; opacity: 0.72; }
[data-theme='dark'] .mh-fp-chip.is-active .mh-fp-chip-count { color: #f0c040; }
.mh-fp-chip-count {
    font-size: 0.74rem;
    color: var(--mh-text-muted);
    font-variant-numeric: tabular-nums;
}
.mh-fp-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-fp-chips.is-folded .mh-fp-chip.is-extra { display: none; }
.mh-fp-noopt { font-size: 0.82rem; color: var(--mh-text-secondary); padding: 0 0 4px; }

/* 已选条件：面板底部常驻 */
.mh-fp-selected {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--mh-border);
    background: var(--mh-surface);
    padding: 11px 16px 13px;
    box-shadow: 0 -3px 14px rgba(15, 23, 42, 0.05);
}
.mh-fp-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--mh-text-secondary);
    margin-bottom: 8px;
}
.mh-fp-selected-reset {
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    text-decoration: none;
}
.mh-fp-selected-reset:hover { color: var(--mh-primary-hover); }
.mh-fp-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mh-fp-chip-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(200, 168, 76, 0.14);
    color: var(--mh-primary-hover);
    font-size: 0.8rem;
    text-decoration: none;
}
.mh-fp-chip-remove:hover { background: rgba(200, 168, 76, 0.26); }
.mh-fp-chip-remove .x { opacity: 0.7; }

/* 左栏底部：次级入口（与主菜单不重复） */
.mh-fp-secondary {
    margin-top: 14px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: var(--mh-surface);
    box-shadow: var(--mh-home-shadow-1);
    overflow: hidden;
}
.mh-fp-secondary a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.92rem;
    color: var(--mh-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--mh-border-light);
    transition: background var(--mh-transition), color var(--mh-transition);
}
.mh-fp-secondary a:last-child { border-bottom: none; }
.mh-fp-secondary a:hover { background: var(--mh-surface-hover); color: var(--mh-primary); }
.mh-fp-secondary .arr { color: var(--mh-text-muted); }

/* ------------------------------------------------------------
   5. 右栏：子菜单行（选中主分类 → 顶部横排全部子项）
   ------------------------------------------------------------ */
.mh-feed-submenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: var(--mh-surface);
    box-shadow: var(--mh-home-shadow-1);
}
.mh-feed-submenu-title {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-right: 5px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mh-text);
    white-space: nowrap;
}
.mh-feed-submenu-caption {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--mh-text-muted);
}
.mh-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.84rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--mh-transition);
}
.mh-sub-chip:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-sub-chip.is-active {
    background: var(--mh-primary);
    border-color: var(--mh-primary);
    color: #fff;
    font-weight: 600;
}
.mh-sub-chip.is-active .mh-sub-chip-count { color: rgba(255, 255, 255, 0.85); }
.mh-sub-chip-count {
    font-size: 0.74rem;
    color: var(--mh-text-muted);
    font-variant-numeric: tabular-nums;
}
.mh-sub-chip.is-all { font-weight: 600; }

/* ------------------------------------------------------------
   6. 右栏：tab 工具条 + 上下页码
   ------------------------------------------------------------ */
.mh-feed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--mh-border);
}
.mh-feed-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.mh-feed-tab {
    padding: 8px 17px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--mh-transition);
}
.mh-feed-tab:hover { color: var(--mh-text); background: var(--mh-surface-hover); }
.mh-feed-tab.is-active {
    background: var(--mh-primary);
    color: #fff;
    font-weight: 700;
}
[data-theme='dark'] .mh-feed-tab.is-active { color: #1a1a2e; }

/* 页码：上方下方各一条；总数与页码同行（不另起一行） */
.mh-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 2px 12px;
}
.mh-pager-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mh-border);
    border-radius: 9px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.88rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--mh-home-shadow-1);
    transition: all var(--mh-transition);
}
.mh-pager-btn:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-pager-btn.is-current {
    background: var(--mh-primary);
    border-color: var(--mh-primary);
    color: #fff;
    font-weight: 700;
}
[data-theme='dark'] .mh-pager-btn.is-current { color: #1a1a2e; }
.mh-pager-btn.is-disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.mh-pager-btn.is-prev, .mh-pager-btn.is-next { font-size: 1.05rem; }
.mh-pager-gap { color: var(--mh-text-muted); padding: 0 2px; }
.mh-pager-total {
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mh-text-secondary);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   7. 右栏：图文卡（去左边框 + 立体悬浮 + 大字号）
   ------------------------------------------------------------ */
.mh-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 卡片：左边框取消（左边界让位给两列细竖线，避免双竖线），
   四周阴影制造悬浮感 */
.mh-feed-item {
    border: 1px solid var(--mh-border);
    border-left: none;
    border-radius: var(--mh-home-radius);
    background: var(--mh-card-bg, var(--mh-surface));
    box-shadow: var(--mh-home-shadow-1);
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition), transform var(--mh-transition);
    overflow: hidden;
}
.mh-feed-item:hover {
    border-color: rgba(200, 168, 76, 0.45);
    box-shadow: var(--mh-home-shadow-2);
    transform: translateY(-1px);
}
.mh-feed-item.is-expanded {
    border-color: var(--mh-primary);
    box-shadow: var(--mh-home-shadow-2);
    transform: none;
}

.mh-feed-item-inner {
    display: flex;
    gap: 16px;
    padding: 14px;
    align-items: flex-start;
}

/* 左：封面，正方形硬裁剪 */
.mh-feed-thumb {
    flex: none;
    width: var(--mh-home-thumb, 148px);
    height: var(--mh-home-thumb, 148px);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mh-surface-hover);
    position: relative;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}
.mh-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.mh-feed-item:hover .mh-feed-thumb img { transform: scale(1.05); }
.mh-feed-thumb .mh-feed-format {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}
.mh-feed-thumb .mh-feed-hires {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* 右：文字区（高度不得超过封面 —— 各项都锁死行数）
   ⚠️ 不要在这里用 max-height + overflow:hidden 硬裁：
   实测那会把「简介」整行吃掉（简介在参数区之前，被裁在最下层）。
   正确做法：每一项自己锁行数（标题1行/简介1行/参数区2行），
   总高天然小于封面高度，不需要再裁。 */
.mh-feed-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* 标题与简介不参与压缩，保证它们完整可见 */
.mh-feed-title,
.mh-feed-excerpt {
    flex: 0 0 auto;
}

/* 标题：最多 2 行 */
.mh-feed-title {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.38;
    color: var(--mh-text);
    /* 铁律：封面右侧内容高度不得超过封面高度 → 标题只留 1 行 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mh-feed-title a {
    color: inherit;
    text-decoration: none;
}
.mh-feed-title a:hover { color: var(--mh-primary-hover); }

/* 简介：最多 2 行 */
.mh-feed-excerpt {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mh-text-secondary);
    /* 简介只留 1 行，给参数区留出两行的空间 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 参数行：钉在卡片底部，所有卡片参数条同水平线 */
.mh-feed-meta {
    margin-top: auto;
    padding-top: 9px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
}
.mh-feed-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--mh-surface-hover);
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.mh-feed-meta-item:hover { color: var(--mh-primary-hover); }
.mh-feed-meta-item.is-strong {
    background: rgba(200, 168, 76, 0.13);
    color: var(--mh-primary-hover);
    font-weight: 600;
}
.mh-feed-meta-sep { color: var(--mh-border); }

/* 展开按钮 */
.mh-feed-expand {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--mh-transition);
}
.mh-feed-expand:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-feed-expand .mh-caret { transition: transform var(--mh-transition); }
.mh-feed-item.is-expanded .mh-feed-expand .mh-caret { transform: rotate(180deg); }

.mh-feed-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--mh-text-secondary);
    font-size: 0.95rem;
    border: 1px dashed var(--mh-border);
    border-radius: var(--mh-home-radius);
}

/* ------------------------------------------------------------
   8. 就地展开的详情块（通栏、不重复封面、版式同独立详情页）
   ------------------------------------------------------------ */
.mh-feed-expand-panel {
    border-top: 1px dashed var(--mh-border);
    padding: 14px 16px 16px;
    background: var(--mh-surface);
    animation: mh-expand-in 0.22s ease;
}
@keyframes mh-expand-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 展开块头部操作条 */
.mh-expand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.86rem;
    color: var(--mh-text-secondary);
}
.mh-expand-bar-title { font-weight: 700; color: var(--mh-text); }
.mh-expand-bar-actions { display: flex; align-items: center; gap: 8px; }
.mh-expand-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--mh-transition);
}
.mh-expand-link:hover { border-color: var(--mh-primary); color: var(--mh-primary); }

/* 展开内容：通栏（封面在卡片上已有一份，这里不再重复），
   正文沿用 single.php 的同一套 class 与版式，从左到右铺开 */
.mh-expand-content { display: block; }
.mh-expand-main {
    min-width: 0;
    max-height: var(--mh-home-expand-maxh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--mh-border) transparent;
}
.mh-expand-main::-webkit-scrollbar { width: 6px; }
.mh-expand-main::-webkit-scrollbar-track { background: transparent; }
.mh-expand-main::-webkit-scrollbar-thumb { background: var(--mh-border); border-radius: 3px; }

/* ---- 展开态与独立详情页的少量差异 ---- */
/* 封面在卡片上已经显示过，展开块里不再重复（partial 的 inline 模式会加这个类） */
.mh-expand-main .mh-inline-hide-cover { display: none; }
/* 标题在卡片上已有，展开块里不重复 */
.mh-expand-main .album-title { display: none; }
/* 封面试听播放器：与详情页一致，正常展示（插件自带样式） */
.mh-expand-main .mhat-player-wrap { margin-top: 4px; }
/* 「查看全文」遮罩：外层已有滚动条，遮罩只会添乱 */
.mh-expand-main .mh-intro-mask { display: none; }

/* ------------------------------------------------------------
   9. 下载提示条（一次点击直达的落地件）
   ------------------------------------------------------------ */
.mh-dl-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    min-width: 260px;
    max-width: 360px;
    padding: 14px 16px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-left: 3px solid var(--mh-primary);
    border-radius: var(--mh-home-radius);
    box-shadow: var(--mh-home-shadow-2);
    animation: mh-toast-in 0.24s ease;
}
@keyframes mh-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mh-dl-toast-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mh-text);
    margin-bottom: 4px;
}
.mh-dl-toast-code {
    font-size: 0.84rem;
    color: var(--mh-text-secondary);
    margin-bottom: 10px;
}
.mh-dl-toast-code b {
    color: var(--mh-primary-hover);
    font-family: var(--mh-font-mono, monospace);
    letter-spacing: 0.04em;
}
.mh-dl-toast-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.mh-dl-toast-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--mh-transition);
}
.mh-dl-toast-btn:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-dl-toast-btn.is-primary {
    background: var(--mh-primary);
    border-color: var(--mh-primary);
    color: #fff;
    font-weight: 600;
}
.mh-dl-toast-btn.is-primary:hover { background: var(--mh-primary-hover); color: #fff; }
.mh-dl-toast-btn.is-blocked {
    animation: mh-toast-pulse 1.2s ease-in-out infinite;
}
@keyframes mh-toast-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 168, 76, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(200, 168, 76, 0); }
}

/* ------------------------------------------------------------
   10. 手机端：左栏收起，菜单横滑常驻
   ------------------------------------------------------------ */
.mh-home-panel-toggle { display: none; }

@media (max-width: 900px) {
    .mh-two-col { display: block; }
    .mh-col-left {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 16px;
    }

    /* 主菜单：手机端横滑常驻（导航不该藏进抽屉，一次点击就要能换主分类） */
    .mh-home-menu {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
        padding: 10px;
    }
    .mh-home-menu::-webkit-scrollbar { display: none; }
    .mh-menu-item,
    .mh-home-menu .mh-menu-item:last-child {
        flex: none;
        border: 1px solid var(--mh-border);
        border-radius: 999px;
        padding: 8px 13px;
        font-size: 0.88rem;
        background: var(--mh-surface);
    }
    .mh-menu-item.is-active { border-color: var(--mh-primary); }
    .mh-menu-item.is-active::before { display: none; }
    .mh-menu-divider { display: none; }
    .mh-menu-item-caret { display: none; }

    /* 筛选面板默认收起（首屏先看到图文流） */
    .mh-home-panel-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 15px;
        margin-bottom: 12px;
        border: 1px solid var(--mh-border);
        border-radius: var(--mh-home-radius);
        background: var(--mh-surface);
        color: var(--mh-text);
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
        box-shadow: var(--mh-home-shadow-1);
    }
    .mh-home-panel-toggle .mh-caret { transition: transform var(--mh-transition); }
    .mh-home-panel-toggle[aria-expanded='true'] .mh-caret { transform: rotate(180deg); }
    .mh-home-panel-toggle .mh-toggle-hint {
        margin-left: auto;
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--mh-text-secondary);
    }
    .mh-col-left .mh-filter-panel,
    .mh-col-left .mh-fp-secondary { display: none; }
    body.mh-home-panel-open .mh-col-left .mh-filter-panel,
    body.mh-home-panel-open .mh-col-left .mh-fp-secondary { display: block; }
    body.mh-home-panel-open .mh-col-left {
        max-height: 68vh;
        overflow-y: auto;
    }

    .mh-feed-thumb { width: 108px; height: 108px; }
    .mh-expand-main { max-height: 420px; }
    .mh-feed-submenu { padding: 10px 12px; }
}

/* ≤640px：顶栏与卡片进一步压缩 */
@media (max-width: 640px) {
    #site-header.mh-header .mh-header-row { gap: 8px; }
    #site-header.mh-header .site-name { display: none; }
    /* 手机端：品牌区只留音符/logo，登录注册改纯文字，避免把搜索框挤没 */
    #site-header.mh-header .header-brand { gap: 0; }
    #site-header.mh-header .header-right { gap: 6px; }
    #site-header.mh-header .theme-toggle-btn { width: 34px; height: 34px; min-width: 34px; }
    #site-header.mh-header .login-btn,
    #site-header.mh-header .register-btn { padding: 0 11px; font-size: 0.8rem; }
    /* 手机端：搜索框吃掉剩余宽度（300px 的锁定值只作用于桌面端） */
    #site-header.mh-header .mh-header-search.header-search-inline {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
    }
    #site-header.mh-header .mh-header-search .mh-search-bar .search-input-wrap { height: 38px; }
    /* 手机端按钮收成图标（文字藏起来），位置仍在框内右侧 */
    #site-header.mh-header .mh-header-search .mh-search-bar .search-submit { padding: 0 15px; }
    #site-header.mh-header .mh-header-search .mh-search-bar .search-submit .mh-search-btn-text { display: none; }
    #site-header.mh-header .mh-header-search .mh-search-bar .search-submit::after { content: '🔍'; font-size: 0.9rem; }
    #site-header.mh-header .login-btn,
    #site-header.mh-header .register-btn { padding: 0 13px; font-size: 0.82rem; }
    .mh-feed-thumb { width: 92px; height: 92px; }
    .mh-feed-title { font-size: 1rem; }
    .mh-feed-excerpt { font-size: 0.86rem; }
    .mh-pager { gap: 5px; }
    .mh-pager-btn { min-width: 32px; height: 32px; padding: 0 8px; }
    .mh-pager-total { font-size: 0.82rem; }
}

/* ------------------------------------------------------------
   11. 键盘可达（无障碍 + 效率）
   ------------------------------------------------------------ */
.mh-fp-chip:focus-visible,
.mh-menu-item:focus-visible,
.mh-feed-tab:focus-visible,
.mh-feed-expand:focus-visible,
.mh-fp-dim-head:focus-visible,
.mh-home-panel-toggle:focus-visible,
.mh-pager-btn:focus-visible,
.mh-sub-chip:focus-visible,
.mh-search-bar .search-submit:focus-visible,
.mh-search-bar .search-input:focus-visible,
#site-header.mh-header .theme-toggle-btn:focus-visible,
#site-header.mh-header .login-btn:focus-visible,
#site-header.mh-header .register-btn:focus-visible {
    outline: 2px solid var(--mh-primary);
    outline-offset: 2px;
}
.mh-fp-dim-head[role='button'] { user-select: none; }
.mh-fp-dim-head[role='button']:hover .mh-fp-dim-title { color: var(--mh-primary-hover); }

/* 降级动效：系统偏好减少动态时全部关掉 */
@media (prefers-reduced-motion: reduce) {
    .mh-feed-item,
    .mh-feed-item:hover,
    .mh-feed-thumb img,
    .mh-feed-item:hover .mh-feed-thumb img,
    .mh-feed-expand-panel,
    .mh-dl-toast,
    .mh-dl-toast-btn.is-blocked {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   12. 三轮改版（2026-10-20 晚）：配色 / 分隔 / 参数表 / 曲目
   ------------------------------------------------------------
   站主要求逐条落地：
     ① 两列之间的间隔线取消删除            → 见第 1 节（已删）
     ② 页码多显示十来个数字块、上方页码置于图文模块最顶部
     ③ 详情页恢复原有尺寸宽度、猜你喜欢回侧栏、版权留网站底部
     ④ 搜索框左右长度增加半倍、边框变圆角
     ⑤ 展开详情后内容与单独详情页完全一致 → 参数表常驻 + 展开出曲目与介绍
     ⑥ 曲目试听列表回归精细化密集布局
     ⑦ 左栏「已选 N 项」删除，已选条件移到右栏图文模块上方
     ⑧ 主体外侧背景白色、左栏浅灰、文字色块白色、右栏图文间细虚线
   ============================================================ */

/* ------------------------------------------------------------
   12.1 配色：主体白底 + 左栏浅灰 + 白色色块
   ------------------------------------------------------------ */
.mh-home-two-col-page {
    /* 主体外侧背景：纯白 */
    --mh-home-page-bg: #ffffff;
    /* 左栏底色：白色（2026-10-20 六轮：站主要求左栏也用白色） */
    --mh-home-left-bg: #ffffff;
    /* 左栏内的色块（卡片）：略浅一档，与左栏底色区分出层次 */
    --mh-home-left-card: #fafbfc;
    --mh-text-secondary: #4b5563;
    --mh-text-muted: #6b7280;
}
[data-theme='dark'] .mh-home-two-col-page {
    --mh-home-page-bg: var(--mh-bg);
    --mh-home-left-bg: rgba(255, 255, 255, 0.04);
    --mh-home-left-card: var(--mh-surface);
    --mh-text-secondary: #cbd5e1;
    --mh-text-muted: #94a3b8;
}

/* 主体外侧：白色铺底 */
body.mh-home-two-col-page,
body.mh-home-two-col-page #site-wrap,
body.mh-home-two-col-page .mh-home-main {
    background: var(--mh-home-page-bg);
}
body.mh-home-two-col-page .mh-home-main {
    padding-bottom: 26px;
}

/* 左栏：浅灰底 + 内缩留白，让浅灰块与白色主体自然分界 */
.mh-col-left {
    background: var(--mh-home-left-bg);
    border-radius: var(--mh-home-radius);
    padding: 12px;
    box-shadow: var(--mh-home-shadow-1);
}

/* 左栏内的模块：白色色块 */
.mh-col-left .mh-home-menu,
.mh-col-left .mh-filter-panel,
.mh-col-left .mh-fp-secondary {
    background: var(--mh-home-left-card);
    border-color: var(--mh-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* 菜单项与维度头在白底上分隔线更清晰 */
.mh-col-left .mh-menu-item,
.mh-col-left .mh-fp-dim {
    border-color: var(--mh-border-light, var(--mh-border));
}
.mh-col-left .mh-fp-head {
    background: var(--mh-home-left-card);
}
/* 左栏的 chip：白色色块（只作用于「未选中」态） */
.mh-col-left .mh-fp-chip:not(.is-active) {
    background: var(--mh-home-left-card);
    border-color: var(--mh-border);
}
/* ⚠️ 选中态失效修复：上面这条 `.mh-col-left .mh-fp-chip` 优先级与
   `.mh-fp-chip.is-active` 相同（都是 2 个类）且位置更靠后，把金底冲成了近白色，
   而白色文字照样生效 → 选中项变成「白字白底」完全看不见。
   这里用 3 个类的选择器把选中态钉死，并改用浅金底 + 深褐金字。 */
.mh-col-left .mh-fp-chip.is-active {
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--mh-primary);
    color: #7a5f10;
}
[data-theme='dark'] .mh-col-left .mh-fp-chip.is-active {
    background: rgba(212, 185, 94, 0.22);
    color: #f0c040;
}
/* 选中态内部计数色块随文字走，避免出现浅色数字浮在浅金底上 */
.mh-col-left .mh-fp-chip.is-active .mh-fp-chip-count {
    color: #7a5f10;
    opacity: 0.72;
}
[data-theme='dark'] .mh-col-left .mh-fp-chip.is-active .mh-fp-chip-count {
    color: #f0c040;
}

/* ------------------------------------------------------------
   12.2 右栏：图文模块之间改用细虚线分隔
   ------------------------------------------------------------ */
.mh-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* 卡片：彼此独立的白色块，上下间隔 15px，带边框与阴影 → 明显立体悬浮感
   ------------------------------------------------------------
   2026-10-20 六轮站主要求：
     ① 每个图文模块独立白色底块（不再交替灰）
     ② 上下模块间隔 15px
     ③ 模块要有边框、边框要有阴影，呈现立体悬浮感 */
.mh-feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.mh-feed-item {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: #ffffff;
    box-shadow: var(--mh-home-shadow-1);
    padding: 12px 14px;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition), transform var(--mh-transition);
}
.mh-feed-item:hover {
    border-color: rgba(200, 168, 76, 0.42);
    box-shadow: var(--mh-home-shadow-2);
    transform: translateY(-1px);
}
.mh-feed-item.is-expanded {
    border-color: var(--mh-primary);
    box-shadow: var(--mh-home-shadow-2);
    transform: none;
}
[data-theme='dark'] .mh-feed-item { background: var(--mh-surface); }
[data-theme='dark'] .mh-feed-item:hover { border-color: rgba(240, 192, 64, 0.42); }
/* 展开态：下方虚线让位给展开面板（面板自带虚线顶边） */
.mh-feed-item.is-expanded { border-bottom-color: transparent; }

/* ------------------------------------------------------------
   12.3 卡片内的参数表：详情页那套原封搬过来，但要适配窄栏
   ------------------------------------------------------------
   2026-10-20 四轮铁律：封面特色图右侧的所有内容（标题/简介/参数/展开按钮）
   整体高度**不得超过封面图高度**。
   实现方式：
     ① 标题锁 1 行、简介锁 1 行（-webkit-line-clamp）
     ② 参数与「展开详情」按钮同处一个 flex 流式容器，参数区最多 2 行
        （用 --mh-feed-params-maxh 限定，超出隐藏）
     ③ 参数项 display:contents 摊平（去掉详情页的两列网格壳），
        一行能排更多项，两行足够放下常用参数
*/
/* 参数 + 展开按钮：同一个流式容器，整体最多两行
   ------------------------------------------------------------
   参数表由 musichub_render_article_meta_table(..., true) 以**扁平模式**输出：
   每个参数是一个 <span class="meta-cell">，没有详情页的 .meta-row 网格壳。
   因此这里只需一个简单的 flex 换行容器即可，无需 display:contents 之类的
   脆弱手段（实测两层同时摊平会导致只剩 1 项可见）。 */
.mh-feed-params {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 9px;
    margin-top: 3px;
    padding-top: 6px;
    border-top: 1px solid var(--mh-border-light, var(--mh-border));
    /* 两行封顶 —— ⚠️ 高度必须按**实测行高**算，否则第二行会被切一半：
         li 实测高 27px（line-height 17.5 + padding 4 + border 1）
         行间距 gap 3px
         两行 = 27 + 3 + 27 = 57px，加 padding-top(6) + border(1) = 64px
       设成 64px → 两行完整可见，超出的第三行才被隐藏（不会切到第二行）。
       高度预算（封面 148px）：
         标题 22 + 参数区 64 + 按钮行 26 + gap 4×2 = 120px ✅ */
    max-height: 64px;
    overflow: hidden;
}
/* 扁平参数表：直接作为换行容器 */
.mh-feed-params .album-meta-table.is-flat {
    display: contents;
}
/* 扁平模式下没有 .meta-row，参数项直接是 flex item */
.mh-feed-params .meta-cell {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: nowrap;
}
/* 艺人名：加粗 + 金色下划线，视觉上最突出 */
.mh-feed-params .meta-cell-full .meta-cell-value-solo {
    font-weight: 700;
    color: var(--mh-text);
    border-bottom: 1px solid var(--mh-primary);
}
/* 字段名（码率/地区/厂牌…）淡色小字 */
.mh-feed-params .meta-cell-label {
    color: var(--mh-text-muted);
    font-size: 0.74rem;
    margin-right: 2px;
}
.mh-feed-params .meta-cell-value {
    color: var(--mh-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
/* 展开详情按钮：独立置于图文模块右下方
   ------------------------------------------------------------
   站主明确：不拘泥于「必须在参数两行内」，可以单独放右下方；
   但封面右侧所有文字的总高度仍不得高于封面高度（铁律）。
   样式：描边 + 主色文字，比普通文字跳一点，但不做实心色块。 */
.mh-feed-foot {
    margin-top: 4px;
    display: flex;
    align-items: center;
    /* 左：下载模块  右：展开详情 */
    justify-content: space-between;
    gap: 10px;
}
/* ------------------------------------------------------------
   卡片内的下载模块（浅色小按钮，摆在参数区下方那行的左侧）
   站主要求：恢复卡片上的下载入口，且用浅色模块展示，不做实心主色块。
   ------------------------------------------------------------ */
.mh-feed-dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.mh-feed-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    /* 浅色底 + 浅色边：与卡片白底区分得开，又比主色块低调 */
    background: var(--mh-home-left-card, #fafbfc);
    color: var(--mh-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--mh-transition), border-color var(--mh-transition), color var(--mh-transition);
}
.mh-feed-dl-btn:hover {
    background: rgba(201, 168, 76, 0.16);
    border-color: var(--mh-primary);
    color: var(--mh-primary-hover);
}
/* 会员/登录引导：比下载按钮更淡一档，避免喧宾夺主 */
.mh-feed-dl-btn.is-vip,
.mh-feed-dl-btn.is-login {
    background: transparent;
    color: var(--mh-text-muted);
    font-weight: 500;
}
.mh-feed-dl-btn.is-vip:hover,
.mh-feed-dl-btn.is-login:hover {
    background: rgba(201, 168, 76, 0.10);
    border-color: var(--mh-primary);
    color: var(--mh-primary-hover);
}
/* 额度用尽：灰掉，不提供点击 */
.mh-feed-dl-btn.is-disabled {
    background: transparent;
    color: var(--mh-text-muted);
    font-weight: 500;
    cursor: default;
}
.mh-feed-dl-btn.is-disabled:hover {
    background: transparent;
    border-color: var(--mh-border);
    color: var(--mh-text-muted);
}
[data-theme='dark'] .mh-feed-dl-btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--mh-text-secondary);
}
[data-theme='dark'] .mh-feed-dl-btn:hover {
    background: rgba(212, 185, 94, 0.18);
    color: #f0c040;
}
.mh-feed-foot .mh-feed-expand {
    flex: none;
    margin-left: auto;
    padding: 3px 12px;
    border: 1px solid var(--mh-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mh-primary-hover);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
}
.mh-feed-foot .mh-feed-expand:hover {
    border-color: var(--mh-primary);
    background: var(--mh-primary);
    color: #fff;
}
[data-theme='dark'] .mh-feed-foot .mh-feed-expand:hover { color: #1a1a2e; }

/* ------------------------------------------------------------
   12.4 已选条件条（右栏图文模块上方）
   ------------------------------------------------------------ */
.mh-selected-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-home-radius);
    background: var(--mh-surface);
    box-shadow: var(--mh-home-shadow-1);
}
.mh-selected-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mh-text);
    white-space: nowrap;
}
.mh-selected-bar-dot {
    width: 3px;
    height: 14px;
    background: var(--mh-primary);
    border-radius: 2px;
}
.mh-selected-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
[data-theme='dark'] .mh-selected-bar-count { color: #1a1a2e; }
.mh-selected-bar-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.mh-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(200, 168, 76, 0.14);
    color: var(--mh-primary-hover);
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--mh-transition);
}
.mh-selected-chip:hover { background: rgba(200, 168, 76, 0.26); }
.mh-selected-chip-dim {
    font-size: 0.72rem;
    opacity: 0.72;
    padding-right: 4px;
    border-right: 1px solid rgba(200, 168, 76, 0.4);
}
.mh-selected-chip .x { opacity: 0.7; font-size: 0.95rem; line-height: 1; }
.mh-selected-bar-clear {
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}
.mh-selected-bar-clear:hover { color: var(--mh-primary-hover); }

/* ------------------------------------------------------------
   12.5 展开区：曲目试听回归精细化密集布局
   ------------------------------------------------------------
   ⚠️ 关键背景（实测定位）：
   插件的 APlayer 初始化脚本只在 wp_footer 输出**一次**，
   只作用于页面初始 DOM。首页展开块是 JS 动态插入的，
   APlayer 从未初始化 → 插件的原生 <audio> 列表暴露出来，
   每条 audio 控件高 54px，一首占一行，11 首就是 600px（实测 979px），
   正是「变大占空间」的根源。

   两手对策：
     ① CSS：把原生列表压回精细化密集布局（单行、小控件）
     ② JS：展开后主动触发 APlayer 初始化（若可用），
        由 APlayer 接管并隐藏原生列表 —— 与详情页完全一致
*/
.mh-expand-main {
    max-height: var(--mh-home-expand-maxh, 520px);
}
/* 展开块内的曲目列表：行高收紧、字号回小、去掉大间距 */
.mh-expand-main .mhat-tracklist {
    border-radius: 8px;
    overflow: hidden;
}
.mh-expand-main .mhat-tracklist li {
    padding: 2px 9px;
    font-size: 0.8rem;
    line-height: 1.35;
}
.mh-expand-main .mhat-tracklist .mh-tname { font-size: 0.82rem; }
.mh-expand-main .mhat-tracklist .mh-tartist { font-size: 0.76rem; }
.mh-expand-main .mhat-tracklist .mh-tn {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 0.68rem;
}
.mh-expand-main .mhat-tracklist .mhat-dur { font-size: 0.74rem; }
/* 播放器本体压扁一点，别占太多竖向空间 */
.mh-expand-main .aplayer { font-size: 0.82rem; }
.mh-expand-main .aplayer .aplayer-info { padding: 6px 10px; }
/* 专辑介绍区：标题已删除，内容直接顶上来 */
.mh-expand-main .album-intro-card {
    margin-top: 12px;
}
.mh-expand-main .album-intro-card .album-intro-title { display: none; }
.mh-expand-main .album-intro-rel { padding-top: 0; }
.mh-expand-main .album-content { font-size: 0.9rem; line-height: 1.7; }

/* ---- 原生 <audio> 列表压成单行密集布局（APlayer 不可用时的兜底）---- */
.mh-expand-main .mhat-tracklist {
    display: block;
    border: 1px solid var(--mh-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mh-surface);
}
.mh-expand-main .mhat-tracklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 9px;
    border-bottom: 1px solid var(--mh-border-light, var(--mh-border));
    font-size: 0.78rem;
    line-height: 1.3;
}
.mh-expand-main .mhat-tracklist li:last-child { border-bottom: none; }
.mh-expand-main .mhat-tracklist .mh-tn {
    flex: none;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background: var(--mh-surface-hover);
    color: var(--mh-text-secondary);
    font-size: 0.64rem;
    text-align: center;
}
/* 曲名与艺人并排：曲名占主、艺人次之 */
.mh-expand-main .mhat-tracklist .mh-tname {
    flex: 0 1 auto;
    font-size: 0.8rem;
    color: var(--mh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46%;
}
.mh-expand-main .mhat-tracklist .mh-tartist {
    flex: 0 1 auto;
    font-size: 0.72rem;
    color: var(--mh-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
}
/* audio 控件压到最小：只留一条细进度条 */
.mh-expand-main .mhat-tracklist audio {
    flex: 1 1 120px;
    min-width: 90px;
    height: 22px;
    margin: 0;
}
.mh-expand-main .mhat-tracklist .mhat-dur {
    flex: none;
    font-size: 0.72rem;
    color: var(--mh-text-muted);
}

/* ------------------------------------------------------------
   12.6 顶栏搜索框：长度增加半倍 + 圆角边框
   ------------------------------------------------------------ */
#site-header.mh-header .mh-header-search.header-search-inline {
    /* 2026-10-20 四轮：站主要求搜索框长度控制在 300px（之前加长到 900px
       太大太丑，且把右侧按钮挤出视口）。此处锁定 300px。 */
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    min-width: 0;
    margin: 0;
    transform: none;
    align-self: center;
    position: relative;
}
#site-header.mh-header .mh-header-search .mh-search-bar .search-input-wrap {
    height: 44px;
    border: 1.5px solid var(--mh-border);
    border-radius: 999px;
    /* ⚠️ 错位修复：原来用 align-items:center + 按钮 margin:3px +
       height:calc(100% - 6px)，三者叠加让按钮顶到容器上方 14px
       （实测按钮 t=-2，容器 t=12）。改为 stretch 布局、
       按钮用 align-self:center + 固定高度，位置必然正确。 */
    align-items: stretch;
    display: flex;
}
/* 搜索框本身要能吃掉分配到的宽度 */
#site-header.mh-header .mh-header-search .mh-search-bar {
    width: 100%;
}

/* ------------------------------------------------------------
   12.7 详情页：恢复原有尺寸宽度（正文列 + 侧栏列并列）
   ------------------------------------------------------------ */
/* ⚠️ 必须显式覆盖 theme.css 的两条规则：
   ① body:not(.mh-article-page) .main-container 是 grid；
   ② .main-container[data-sidebar-position='left'] 是 row-reverse
      —— 文章页 data-sidebar-position=left 时正文会被排到右边、被压到 372px。
   文章页固定为「正文在左 + 侧栏在右」，与站主要求一致。 */
.mh-article-page .main-container {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 24px;
    max-width: var(--mh-site-width, 1150px);
    width: 100%;
    box-sizing: border-box;
}
.mh-article-page .main-container[data-sidebar-position='left'],
.mh-article-page .main-container[data-sidebar-position='right'] {
    flex-direction: row !important;
}
/* 正文列：吃掉剩余宽度（修复前被压到 478px） */
.mh-article-page .article-content-col {
    flex: 1 1 auto;
    min-width: 0;
}
/* 侧栏列：固定宽度，靠右 */
.mh-article-page .article-sidebars-wrap {
    flex: 0 0 var(--mh-sidebar-width, 260px);
    width: var(--mh-sidebar-width, 260px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* 详情页的主内容块恢复完整圆角与描边（此前被压窄后看不出层次） */
.mh-article-page .mh-partial { min-width: 0; }
.mh-article-page .album-main {
    border-radius: var(--mh-radius, 8px);
    border-bottom: 1px solid var(--mh-border);
}
.mh-article-page .album-cover {
    width: 300px;
    flex: 0 0 300px;
}
.mh-article-page .album-info { min-width: 0; }

@media (max-width: 900px) {
    .mh-article-page .main-container { flex-direction: column; }
    .mh-article-page .article-content-col,
    .mh-article-page .article-sidebars-wrap { width: 100%; flex: 1 1 auto; }
}