/*
 * MusicHub Theme - 涓绘牱寮忚〃
 * Version: 2.1.0
 */

/* ============================================================
   0. CSS Variables & Base Settings
   ============================================================ */
:root {
    /* Light Mode Colors */
    /* dsding 对齐基准色（P0）：主色=暗金，强调=亮金；导航=酒红 */
    --mh-primary: #c9a84c;
    --mh-primary-hover: #d4a017;
    --mh-accent: #f0c040;
    --mh-accent-hover: #d4a017;

    /* dsding 品牌令牌：金阶 + 酒红 + 夜色阶 */
    --mh-gold-400: #f2c94c;
    --mh-gold-500: #f0c040;
    --mh-gold-600: #d4a017;
    --mh-gold: #c9a84c;
    --mh-wine: #a80034;
    --mh-night-700: #334155;
    --mh-night-800: #1e293b;
    --mh-night-900: #12142a;
    --mh-night-950: #0b0e1a;

    /* 浅色模式（对齐 dsding：冷灰白底 + 纯白面板 + 1px 直边、零阴影零圆角） */
    --mh-bg: #f4f6fb;
    --mh-surface: #ffffff;
    --mh-surface-hover: #f9fafb;
    --mh-text: #1a1a2e;
    --mh-text-secondary: #6b7280;
    --mh-text-muted: #9ca3af;
    --mh-border: #e5e7eb;
    --mh-border-light: #f3f4f6;
    /* 详情页正文卡的底边：浅灰细线（3px）+ 一道淡投影，给卡片一点厚度感；
       深色模式下浅灰会太扎眼，所以在 [data-theme='dark'] 里换成偏暗的灰 */
    --mh-edge: #d0d4e0;
    --mh-shadow: none;
    --mh-shadow-hover: none;
    --mh-glass-highlight: none;

    /* Search Bar */
    --mh-search-bg: var(--mh-surface);
    --mh-search-border: #d0d4e0;
    --mh-search-focus: var(--mh-primary);

    /* Sidebar */
    --mh-sidebar-bg: var(--mh-surface);
    --mh-sidebar-width: 260px;

    /* Layout（dsding 主列宽 1150 / 侧距 16） */
    --mh-site-width: 1150px;
    --mh-site-padding: 16px;
    /* 兜底列数取 4，与「主题设置 → 首页图文列数」和 Customizer 默认一致（正常情况由后台注入覆盖） */
    --mh-grid-cols: 4;
    --mh-grid-gap: 20px;

    /* Cards */
    --mh-card-bg: var(--mh-surface);
    --mh-card-hover: var(--mh-surface-hover);

    /* Typography */
    --mh-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mh-font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

    /* Border Radius（dsding：直边，无圆角） */
    --mh-radius: 0;
    --mh-radius-sm: 0;
    --mh-radius-lg: 0;

    /* Transitions */
    --mh-transition: 0.2s ease;

    /* Navbar Colors（dsding：酒红吸顶单行） */
    --mh-nav-text: #ffffff;
    --mh-nav-bg: #a80034;
    --mh-navbar-bg: #a80034;
    --mh-navbar-hover: rgba(255,255,255,0.10);

    /* Badge / Download Box Colors */
    --mh-badge-album-bg: #f9a825;
    --mh-badge-album-text: #5d4037;
    --mh-badge-title-bg: #ffd400;
    --mh-badge-title-text: #333;
    --mh-dl-content-bg: #fff;
    --mh-navbar-bg-dark: #0b1f47;
}

/* ============================================================
   Mobile filter drawer: background scroll lock
   ============================================================ */
body.filter-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ============================================================
   Dark Mode
   ============================================================ */
[data-theme='dark'] {
    /* dsding 夜色：night-950 底 + night-900 面板 + night-800 悬停 */
    --mh-bg: #0b0e1a;
    --mh-surface: #12142a;
    --mh-surface-hover: #1e293b;
    --mh-text: #e2e8f0;
    --mh-text-secondary: #94a3b8;
    --mh-text-muted: #64748b;
    --mh-border: rgba(255,255,255,0.10);
    --mh-border-light: rgba(255,255,255,0.06);
    --mh-edge: #3a4152;
    --mh-shadow: none;
    --mh-shadow-hover: none;
    --mh-glass-highlight: none;

    --mh-search-bg: #12142a;
    --mh-search-border: rgba(255,255,255,0.14);
    --mh-search-focus: #c9a84c;

    --mh-sidebar-bg: #12142a;
    --mh-card-bg: #12142a;
    --mh-card-hover: #1e293b;

    /* Night mode softens珮浜摑璋冩煍鍜屽寲锛岄伩鍏嶈繃浜殑绾摑鍒虹溂 */
    --mh-primary: #d4b95e;
    --mh-primary-hover: #f0c040;
    --mh-accent: #f2c94c;
    --mh-accent-hover: #f0c040;

    --mh-nav-text: #ffffff;
    --mh-nav-bg: #a80034;
    --mh-navbar-bg: #a80034;
    --mh-navbar-hover: rgba(255,255,255,0.10);
}

/* ============================================================
   1. Global Reset
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--mh-font);
    background: var(--mh-bg);
    color: var(--mh-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: clip;
    transition: background-color 0.3s, color 0.3s;
}

/* 未登录访客隐藏管理栏，已登录用户保留以便快速进入后台 */
body:not(.logged-in) #wpadminbar { display: none !important; }
/* 已登录时恢复管理栏造成的顶部偏移 */
body.logged-in { margin-top: 0; }
body.logged-in #wpadminbar { display: block !important; }

a {
    color: var(--mh-primary);
    text-decoration: none;
    transition: color var(--mh-transition);
}
a:hover {
    color: var(--mh-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
    font-family: var(--mh-font);
}

input, select, textarea {
    font-family: var(--mh-font);
    font-size: 0.95rem;
}

#site-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}

/* ============================================================
   2. Header
   ============================================================ */
#site-header {
    background: var(--mh-surface);
    border-bottom: 1px solid var(--mh-border);
    position: relative;
    max-width: var(--mh-site-width);
    margin: 0 auto;
    width: 100%;
    /* 必须高于下方 .site-navbar(z-index:100)，否则用户下拉菜单会被导航栏盖住 */
    z-index: 101;
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow);
    transition: background-color 0.3s, border-color 0.3s;
}

.header-inner {
    max-width: var(--mh-site-width);
    margin: 0 auto;
    padding: 0 var(--mh-site-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-logo-text {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--mh-text);
}
.site-logo-text:hover {
    color: var(--mh-primary);
}

.logo-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding-left: 20px;
}

.site-logo-img {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-logo-img img {
    height: 40px;
    width: auto;
    max-width: 220px;
    display: block;
}

.site-brand-text {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* 网站标题流光扫光动效：默认隐藏，鼠标悬停标题才触发 */
.site-brand-text::before {
    content: '';
    position: absolute;
    /* 拉满标题区域上下 */
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    /* 浅色模式下白色光不可见，故用半透明深色光带保证可见 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 80%,
        transparent 100%
    );
    pointer-events: none;
    /* 斜平行四边形（有动感形态） + 起始位于容器左侧外 */
    transform: skewX(-20deg) translateX(-200%);
    z-index: 0;
    /* 默认不可见，不自动播放 */
    opacity: 0;
    animation: none;
}

/* 深色模式：恢复亮白光带（在深色背景上可见） */
[data-theme='dark'] .site-brand-text::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 80%,
        transparent 100%
    );
}

/* 鼠标放到标题上：流光扫过，速度再降两倍（2.67s → 约 5.34s） */
.site-brand-text:hover::before {
    opacity: 1;
    animation: mh-shine-sweep 5.34s ease-in-out infinite;
}

@keyframes mh-shine-sweep {
    0%   { transform: skewX(-20deg) translateX(-200%); }
    25%  { transform: skewX(-20deg) translateX(300%); }
    100% { transform: skewX(-20deg) translateX(300%); }
}

.site-name {
    position: relative;
    z-index: 1;
    font-size: var(--mh-name-size);
    font-family: var(--mh-name-font);
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--mh-name-color);
}

.site-desc {
    position: relative;
    z-index: 1;
    font-size: var(--mh-desc-size);
    font-family: var(--mh-desc-font);
    color: var(--mh-desc-color);
    padding-left: 10px;
    border-left: 1px solid var(--mh-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 头部用户区域 */
.header-user {
    margin-right: 0;
}
.header-user-menu {
    position: relative;
    z-index: 2;
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}
.user-avatar-small {
    flex-shrink: 0;
    line-height: 0;
}
.user-avatar-small img {
    border-radius: 50%;
    width: 22px;
    height: 22px;
}
.user-name {
    font-weight: 600;
    line-height: 1;
}

/* 头部通用按钮 */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    background: var(--mh-surface);
    color: var(--mh-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--mh-transition), color var(--mh-transition), background var(--mh-transition);
    white-space: nowrap;
}
.header-btn:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}

/* Login / Register Buttons */
.login-btn, .register-btn {
    text-decoration: none;
}

/* 筛选按钮：桌面端隐藏，手机端（≤768px）经媒体查询显示 */
.header-right .mobile-filter-btn {
    display: none !important;
    background: var(--mh-primary);
    color: #fff;
    border-color: var(--mh-primary);
}
.mobile-filter-btn:hover {
    background: var(--mh-primary-hover);
    color: #fff;
    border-color: var(--mh-primary-hover);
}
.filter-close-btn {
    display: none;
    background: none;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    color: var(--mh-text-secondary);
    cursor: pointer;
    transition: border-color var(--mh-transition), color var(--mh-transition);
}
.filter-close-btn:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}
.filter-overlay {
    display: none;
}
.login-btn {
    background: var(--mh-primary);
    color: #fff;
    border-color: var(--mh-primary);
}
.login-btn:hover {
    background: var(--mh-primary-hover);
    color: #fff;
}
.register-btn {
    background: var(--mh-accent);
    color: #fff;
    border-color: var(--mh-accent);
}
.register-btn:hover {
    background: var(--mh-accent-hover);
    color: #fff;
}

/* 顶栏用户下拉菜单 */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 132px;
    margin-top: 6px;
    background: var(--mh-bg, #fff);
    border: 1px solid var(--mh-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    padding: 6px;
    display: none;
    z-index: 1000;
}
.header-user-menu.open .user-dropdown { display: block; }
.user-dropdown-item {
    display: block;
    padding: 9px 14px;
    border-radius: 7px;
    color: var(--mh-text, #333);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.user-dropdown-item:hover {
    background: rgba(0,0,0,.05);
    color: var(--mh-primary, #e0a106);
}
.user-btn {
    gap: 8px;
    padding: 5px 12px;
}
.user-avatar-small img {
    border-radius: 50%;
    vertical-align: middle;
}
.user-name {
    font-weight: 600;
}

.member-badge {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.4;
}
.member-badge.free {
    background: var(--mh-border);
    color: var(--mh-text-muted);
}
.member-badge.annual {
    background: #e8f0fe;
    color: var(--mh-primary);
}
[data-theme='dark'] .member-badge.annual {
    background: rgba(59,79,160,0.3);
}
.member-badge.expiring {
    background: #fff3cd;
    color: #856404;
}
.member-badge.expired {
    background: #fce4e4;
    color: #c62828;
}
.member-badge.permanent {
    background: linear-gradient(135deg, #fdf6e3, #f9e4b7);
    color: #8b6914;
}
[data-theme='dark'] .member-badge.permanent {
    background: rgba(212,160,23,0.25);
    color: #f0d060;
}

/* 用户名按钮（点击直达会员中心，无下拉菜单） */
.user-btn {
    cursor: pointer;
}

/* Transitions */
[data-theme='dark'] .theme-icon-light { display: none; }
[data-theme='light'] .theme-icon-dark { display: none; }
[data-theme='dark'] .theme-icon-dark { display: inline; }
[data-theme='light'] .theme-icon-light { display: inline; }

/* ============================================================
   Download
   ============================================================ */
#search-bar {
    background: transparent;
    border-bottom: 1px solid var(--mh-border-light);
    padding: 30px 0 0;
    position: relative;
    transition: background-color 0.3s;
}

.search-inner {
    max-width: 550px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--mh-search-border);
    border-radius: var(--mh-radius-lg);
    overflow: hidden;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
    background: var(--mh-search-bg);
}
.search-input-wrap:focus-within {
    border-color: var(--mh-search-focus);
    box-shadow: 0 0 0 3px rgba(59,79,160,0.12);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 18px;
    font-size: 1rem;
    color: var(--mh-text);
    outline: none;
}
.search-input::placeholder {
    color: var(--mh-text-muted);
}

.search-submit {
    padding: 12px 24px;
    border: none;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mh-transition);
    white-space: nowrap;
}
.search-submit:hover {
    background: var(--mh-primary-hover);
}

/* Download */
.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 760px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow-hover);
    z-index: 50;
}
.search-suggestions.open {
    display: block;
}
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mh-border-light);
    cursor: pointer;
    transition: background var(--mh-transition);
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover,
.suggestion-item:focus-visible,
.suggestion-item.active {
    background: var(--mh-surface-hover);
    outline: none;
}
.suggestion-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--mh-radius-sm);
    object-fit: cover;
}
.suggestion-title {
    font-size: 0.9rem;
    color: var(--mh-text);
}

/* ============================================================
   Download
   ============================================================ */
.main-container {
    width: 100%;
    max-width: var(--mh-site-width);
    margin: 24px auto 20px;
    display: flex;
    gap: 24px;
    flex: 1;
}

/* Download */
.main-container[data-sidebar-position='left'] {
    flex-direction: row;
}
/* Download */
.main-container[data-sidebar-position='right'] {
    flex-direction: row-reverse;
}

/* ============================================================
   Transitions
   ============================================================ */
.filter-sidebar {
    width: var(--mh-sidebar-width);
    flex-shrink: 0;
}

.sidebar-inner {
    background: var(--mh-sidebar-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow), 0 4px 16px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.06);
    overflow: hidden;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, border-color 0.3s;
}

.sidebar-swap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 4px;
    border-bottom: 1px solid var(--mh-border);
    background: var(--mh-surface-hover);
}
.sidebar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mh-text);
}
.sidebar-swap-btn-inner {
    background: none;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: 4px 10px;
    font-size: 1rem;
    color: var(--mh-text-secondary);
    cursor: pointer;
    transition: border-color var(--mh-transition), color var(--mh-transition);
}
.sidebar-swap-btn-inner:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}

/* Active Filter Chips */
.active-filters {
    padding: 2px 14px 4px;
    border-bottom: 1px solid var(--mh-border-light);
}
.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.82rem;
    padding: 3px 9px;
    border-radius: 20px;
    cursor: default;
}
.chip-remove {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.8;
}
.chip-remove:hover {
    opacity: 1;
}
.clear-filters-btn {
    background: none;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: 4px 10px;
    font-size: 0.85rem;
    color: var(--mh-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--mh-transition), color var(--mh-transition);
}
.clear-filters-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Transitions */
.filter-modules-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 8px;
}

/* Transitions */
.filter-module {
    padding: 8px 14px;
    border-bottom: 1px solid var(--mh-border-light);
}
.filter-module:last-child {
    border-bottom: none;
}

.filter-label-row {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mh-text-secondary);
    margin-bottom: 6px;
}

.filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    background: var(--mh-surface);
    color: var(--mh-text);
    font-size: 14px;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
.filter-select:focus {
    outline: none;
    border-color: var(--mh-primary);
    box-shadow: 0 0 0 3px rgba(59,79,160,0.12);
}
.filter-select option {
    padding: 8px;
    font-size: 14px;
}

/* Sidebar  */
.sidebar-widgets {
    padding: 12px 14px;
    border-top: 1px solid var(--mh-border-light);
}
.sidebar-widgets .widget {
    margin-bottom: 16px;
}
.sidebar-widgets .widget:last-child {
    margin-bottom: 0;
}
.sidebar-widgets .widget-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mh-text);
    margin: 0 0 8px;
}

/* Sidebar  */
/* Sidebar  */
/* === 非文章页：筛选侧栏定位在 1200px 内容区之外（桌面端即生效，普通桌面也生效） ===
   做法：容器宽度 = 侧栏宽 + 间隙 + 1200px；内容轨道锁定 1200px，侧栏作为独立网格列落在 1200px 之外。
   侧栏列用 auto：存在侧栏时取其宽度；无侧栏页面（艺人/厂牌等）自动塌缩为 0，避免空出一列。
   不再依赖 position:fixed + 视口数学的脆弱断点，各浏览器表现一致。 */
body:not(.mh-article-page) .main-container {
    display: grid;
    grid-template-columns: var(--mh-sidebar-width) minmax(0, var(--mh-site-width));
    grid-template-rows: auto 1fr;
    gap: 0 24px;
    width: 100%;
    max-width: calc(var(--mh-sidebar-width) + 24px + var(--mh-site-width));
    margin-inline: auto;
    box-sizing: border-box;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] {
    grid-template-columns: minmax(0, var(--mh-site-width)) var(--mh-sidebar-width);
}
body:not(.mh-article-page) .filter-sidebar {
    grid-row: 1 / 3;
    grid-column: 1;
    width: var(--mh-sidebar-width);
    min-width: 0;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .filter-sidebar {
    grid-column: 2;
}
/* 搜索结果页：全宽单列（dsding 对齐，无侧栏、无行内搜索框）。
   特异性与上面的网格规则同级，靠后定义胜出，把 grid 容器降级为 block。 */
body.mh-search-page .main-container {
    display: block;
    max-width: var(--mh-site-width);
}
body.mh-search-page .content-area {
    width: 100%;
    max-width: var(--mh-site-width);
}
/* 内容区：首页用 .content-area，归档/分类页用 .site-main，两者都必须占内容列，
   否则未被显式分配的元素会被网格自动摆放塞进侧栏那一列，造成侧栏与内容重叠 */
body:not(.mh-article-page) .content-area,
body:not(.mh-article-page) .site-main {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: var(--mh-site-width);
    min-width: 0;
    box-sizing: border-box;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .content-area,
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .site-main {
    grid-column: 1;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .artist-list-page {
    grid-column: 1;
}
/* === 宽屏(≥1690)：主体内容严格 1200 居中（与头/底持平），侧栏浮到 1200 框架左侧外部，且滚动时吸顶到导航底边 ===
   默认(≤1689)沿用上面的网格双列（主体 1484 居中、侧栏在内，作为中屏妥协）。
   宽屏下主体 1200 居中 → 头/主/底左右边缘齐平。
   实现要点：主体仍为 grid，但「侧栏列」宽度设为 0，侧栏用负的 margin-left 推出到 1200 框架左侧空白区；
   关键——侧栏本身留在文档流中（不使用 absolute），因此其内部 .sidebar-inner 的 position:sticky;top:80px
   照常生效：页面上滚时侧栏随之上移，顶部到达导航栏底边(80px)即吸顶停住，不会越过导航栏。
   margin-left 用 max() 防止侧栏超出视口左边界被裁切；右侧变体(data-sidebar-position='right')用 margin-right 同理。 */
@media (min-width: 1690px) {
    body:not(.mh-article-page) .main-container {
        grid-template-columns: 0px minmax(0, var(--mh-site-width));
        gap: 0;
        max-width: var(--mh-site-width);
    }
    body:not(.mh-article-page) .main-container[data-sidebar-position='right'] {
        grid-template-columns: minmax(0, var(--mh-site-width)) 0px;
    }
    body:not(.mh-article-page) .content-area,
    body:not(.mh-article-page) .site-main {
        grid-column: 2;
        max-width: var(--mh-site-width);
    }
    body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .content-area,
    body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .site-main {
        grid-column: 1;
    }
    body:not(.mh-article-page) .filter-sidebar {
        grid-column: 1;
        width: 245px;
        margin-left: max(calc(-269px), calc(-1 * ((100vw - var(--mh-site-width)) / 2)));
    }
    body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .filter-sidebar {
        grid-column: 2;
        margin-left: 0;
        margin-right: max(calc(-269px), calc(-1 * ((100vw - var(--mh-site-width)) / 2)));
    }
}

/* 侧栏细滚动条（原 1700 断点处样式，改为常驻） */
body:not(.mh-article-page) .filter-sidebar::-webkit-scrollbar { width: 4px; }
body:not(.mh-article-page) .filter-sidebar::-webkit-scrollbar-thumb { background: var(--mh-border); border-radius: 3px; }

/* Inline  */
.search-inline {
    padding: 12px 0 16px;
    max-width: 550px;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='left'] .search-inline {
    grid-column: 2;
    grid-row: 1;
}
body:not(.mh-article-page) .main-container[data-sidebar-position='right'] .search-inline {
    grid-column: 1;
    grid-row: 1;
}
.search-inline .search-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid var(--mh-search-border);
    border-radius: var(--mh-radius-lg);
    overflow: hidden;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
    background: var(--mh-search-bg);
}
.search-inline .search-input-wrap:focus-within {
    border-color: var(--mh-search-focus);
    box-shadow: 0 0 0 3px rgba(59,79,160,0.12);
}
.search-inline .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 0.95rem;
    color: var(--mh-text);
    outline: none;
}
.search-inline .search-submit {
    padding: 10px 20px;
    border: none;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mh-transition);
    white-space: nowrap;
}
.search-inline .search-submit:hover {
    background: var(--mh-primary-hover);
}

/* Inline  */
.header-search-inline {
    margin-left: 24px;
    flex-shrink: 0;
    position: relative;
    transform: translateY(8px);
    align-self: center;
    width: 500px;
    max-width: 500px;
    min-width: 0;
}
.header-search-inline .search-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--mh-search-border);
    border-radius: var(--mh-radius-lg);
    overflow: hidden;
    background: var(--mh-search-bg);
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
.header-search-inline .search-input-wrap:focus-within {
    border-color: var(--mh-search-focus);
    box-shadow: 0 0 0 3px rgba(59,79,160,0.12);
}
.header-search-inline .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--mh-text);
    outline: none;
    min-width: 120px;
}
.header-search-inline .search-input::placeholder {
    color: var(--mh-text-muted);
}
.header-search-inline .search-submit {
    padding: 8px 16px;
    border: none;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mh-transition);
    white-space: nowrap;
}
.header-search-inline .search-submit:hover {
    background: var(--mh-primary-hover);
}
.header-search-inline .search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow-hover);
    z-index: 200;
    overflow: hidden;
}
.header-search-inline .search-suggestions.open {
    display: block;
}

/* Article page */
.mh-article-page .main-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 24px;
}

/* 非首页：搜索模块上提5px */
.header-search-inline {
    transform: translateY(-2px);
}
.mh-article-page .main-container[data-sidebar-position='left']  { flex-direction: row-reverse; }
.mh-article-page .main-container[data-sidebar-position='right'] { flex-direction: row; }
.mh-article-page #article-main { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 0; }
/* 文章列内外侧 padding 均清零，使侧栏+间距+文章列总和 = 1200px，与头部/底部同宽 */
.mh-article-page .main-container[data-sidebar-position='left']  #article-main { padding: 0; }
.mh-article-page .main-container[data-sidebar-position='right'] #article-main { padding: 0; }
.mh-article-page .related-sidebar { flex: 0 0 var(--mh-sidebar-width); width: var(--mh-sidebar-width); align-self: flex-start; }
.mh-article-page .related-inner { margin-top: 0; }
/* 面包屑(导航模块)位于文章列顶部、与文章等宽、与猜你喜欢侧栏同一水平线 */
.mh-article-page .article-breadcrumb-wrap {
    margin: 0 0 24px;
    border-left: 2px solid #1e3a5f;
    padding-left: 14px;
}
.mh-article-page .article-breadcrumb { max-width: none; margin: 0; padding: 0; }

/* ============================================================
   Download
   ============================================================ */
.content-area {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.content-inner {
    min-width: 0;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2px 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.results-info {
    font-size: 0.9rem;
    color: var(--mh-text-secondary);
}
.results-info strong {
    color: var(--mh-primary);
    font-weight: 700;
}
.results-filtered {
    color: var(--mh-accent);
    font-size: 0.8rem;
}

.results-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--mh-text-muted);
}
.sort-select {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: 4px 8px;
    font-size: 0.82rem;
    background: var(--mh-surface);
    color: var(--mh-text);
    cursor: pointer;
}

/* ============================================================
   6.5. 首页 Tab 菜单
   设计：选中Tab左上右三边线条半包围+下方底色同背景无缝
        未选中Tab底部共用一条细实线
   ============================================================ */
.home-tab-bar { margin: 0 0 0 0; padding: 0; }

/* 导航容器 — 底部贯通细线铺满整行 */
.home-tab-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.home-tab-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--mh-primary);
    pointer-events: none;
    z-index: 0;
}

/* ====== Style 1 — 默认未选中态 ====== */
.home-tab-btn {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mh-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--mh-primary);
    outline: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    /* 消除可能出现的渲染间隙 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.home-tab-btn:hover {
    color: var(--mh-primary);
}
/* 有子菜单的Tab — 文字右侧紧贴小三角 */
.home-tab-btn[data-has-children="1"]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.home-tab-btn[data-has-children="1"]:hover::after {
    opacity: 0.8;
}
.home-tab-btn[data-has-children="1"].active::after {
    opacity: 1;
}
/* 自定义链接Tab（<a>标签）— 保持与普通Tab一致的视觉，但不参与active切换 */
a.home-tab-link {
    text-decoration: none;
}
a.home-tab-link:hover {
    color: var(--mh-primary);
}
a.home-tab-link:visited {
    color: var(--mh-text-secondary);
}
a.home-tab-link:visited:hover {
    color: var(--mh-primary);
}
.home-tab-btn:focus,
.home-tab-btn:focus-visible,
.home-tab-btn:active {
    outline: none;
    box-shadow: none;
}

/* ====== Style 2 — 选中态 ======
   左上右三边线条半包围，下方无可见线条（底色隐藏） */
.home-tab-btn.active {
    color: var(--mh-primary);
    font-weight: 700;
    background: var(--mh-surface);
    border-top: 1.5px solid var(--mh-primary);
    border-left: 1.5px solid var(--mh-primary);
    border-right: 1.5px solid var(--mh-primary);
    border-bottom: 1.5px solid var(--mh-surface);
    border-radius: 6px 6px 0 0;
    z-index: 1;
    box-shadow: none;
}
/* 选中态底部线条与背景同色，保持盒模型一致避免闪现 */

.home-tab-btn.loading { pointer-events: none; cursor: wait; }
/* 加载中底部迷你进度条，不改变透明度避免 ::after 线条穿透闪现 */
.home-tab-btn.loading::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%; right: 30%;
    height: 2px;
    background: var(--mh-primary);
    z-index: 2;
    animation: mh-tab-loading 0.8s ease-in-out infinite alternate;
    border-radius: 1px;
}
@keyframes mh-tab-loading {
    from { opacity: 0.3; left: 40%; right: 40%; }
    to   { opacity: 1;   left: 25%; right: 25%; }
}

/* Tab 加载骨架屏 */
.tab-loading-skeleton { display: grid; grid-template-columns: repeat(var(--mh-grid-cols), 1fr); gap: var(--mh-grid-gap); }
.tab-loading-skeleton .skel-item { height: 280px; background: var(--mh-surface-hover); border-radius: var(--mh-radius); animation: mh-skel-pulse 1.5s ease-in-out infinite; }
@keyframes mh-skel-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
@media (max-width: 768px) { .tab-loading-skeleton { grid-template-columns: repeat(2, 1fr); } .tab-loading-skeleton .skel-item { height: 200px; } }

/* 列表头部 - 仅"查看更多" */
.tab-content-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 2px 6px; gap: 10px; min-height: 36px;
}
.tab-header-left { flex: 1; }
.artist-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.9rem; color: var(--mh-primary); font-weight: 600;
    background: rgba(59,79,160,0.08); padding: 3px 12px; border-radius: 16px;
}

/* 右侧"查看更多" — 置于Tab栏最右，与Tab同一行 */
.home-tab-more {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 11px 8px 11px 20px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    z-index: 0;
    position: relative;
}
.home-tab-more::after {
    content: '';
    position: absolute;
    left: -18px;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--mh-primary);
    pointer-events: none;
}
.home-tab-more:hover {
    color: var(--mh-primary);
}
.home-tab-more:focus,
.home-tab-more:focus-visible {
    outline: none;
}

/* 子分类横排菜单 */
.home-subtab-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 0 2px;
    flex-wrap: wrap;
}
.home-subtab-btn {
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mh-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.home-subtab-btn:hover {
    color: var(--mh-primary);
    background: rgba(59,79,160,0.06);
}
.home-subtab-btn.active {
    color: #fff;
    background: var(--mh-primary);
    font-weight: 600;
}

/* 深色适配 */
[data-theme='dark'] .home-tab-btn { color: var(--mh-text-secondary); border-bottom-color: var(--mh-primary); }
[data-theme='dark'] .home-tab-btn:hover { color: var(--mh-primary); }
[data-theme='dark'] a.home-tab-link,
[data-theme='dark'] a.home-tab-link:visited { color: var(--mh-text-secondary); }
[data-theme='dark'] a.home-tab-link:hover,
[data-theme='dark'] a.home-tab-link:visited:hover { color: var(--mh-primary); }
[data-theme='dark'] .home-tab-btn.active {
    color: var(--mh-primary);
    background: var(--mh-surface);
    border-top-color: var(--mh-primary);
    border-left-color: var(--mh-primary);
    border-right-color: var(--mh-primary);
    border-bottom: none;
}
[data-theme='dark'] .home-tab-more { color: var(--mh-text-secondary); }
[data-theme='dark'] .home-tab-more:hover { color: var(--mh-primary); }
[data-theme='dark'] .home-tab-more::after { background: var(--mh-primary); }
[data-theme='dark'] .home-tab-nav::after { background: var(--mh-primary); }
[data-theme='dark'] .home-subtab-btn { color: var(--mh-text-secondary); }
[data-theme='dark'] .home-subtab-btn:hover { color: var(--mh-primary); background: rgba(111,131,214,0.1); }
[data-theme='dark'] .home-subtab-btn.active { color: #fff; background: var(--mh-primary); }

/* 归档页导航子菜单（二级为主、三级嵌套缩进） */
.archive-submenu-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin: 4px 0 6px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: 12px;
}
/* 含三级的二级菜单：上下排列，左侧竖线，二级字号略大 */
.submenu-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    border-left: 3px solid var(--mh-primary);
    padding: 6px 0 6px 14px;
}
.submenu-group .lv2:not(.active) {
    flex: 0 0 auto;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 6px 16px;
    background: var(--mh-bg);
}
.submenu-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 纯二级菜单（无三级）：横向水平排列，正常字号，无竖线 */
.submenu-plain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.submenu-plain .lv2.plain:not(.active) {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 5px 16px;
    background: var(--mh-bg);
}
.submenu-plain .lv2.plain::after {
    content: none;
}

/* 二/三级胶囊按钮 */
.archive-submenu-btn {
    padding: 5px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mh-text-secondary);
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.archive-submenu-btn.lv3 {
    font-size: 0.8rem;
    padding: 4px 13px;
}
.archive-submenu-btn:hover {
    color: var(--mh-primary);
    border-color: var(--mh-primary);
    background: var(--mh-surface-hover);
}
.archive-submenu-btn.active {
    color: #fff !important;
    background: var(--mh-primary) !important;
    border-color: var(--mh-primary) !important;
    font-weight: 600;
}
[data-theme='dark'] .submenu-group { border-left-color: var(--mh-border); }
[data-theme='dark'] .archive-submenu-btn { color: var(--mh-text-secondary); background: var(--mh-surface); }
[data-theme='dark'] .archive-submenu-btn:hover { color: var(--mh-primary); border-color: var(--mh-primary); }
[data-theme='dark'] .archive-submenu-btn.active { color: #fff !important; background: var(--mh-primary) !important; border-color: var(--mh-primary) !important; }

/* 移动端 */
@media (max-width: 768px) {
    .archive-submenu-tree {
        padding: 12px;
        gap: 8px;
    }
    .submenu-group {
        flex-wrap: wrap;
        padding: 6px 0 6px 10px;
    }
    .submenu-group .lv2 {
        font-size: 0.9rem;
        padding: 5px 12px;
    }
    /* 移动端：二级与三级同一行，三级超出自动换行 */
    .submenu-children {
        flex-wrap: wrap;
    }
    /* 纯二级（无三级）：横向水平、正常字号、无竖线（与桌面一致） */
    .submenu-plain {
        flex-wrap: wrap;
    }
    .submenu-plain .lv2.plain {
        font-size: 0.85rem;
        font-weight: 500;
    }
    .submenu-plain .lv2.plain::after {
        content: none;
    }
    .archive-submenu-btn.lv3 {
        flex: 0 0 auto;
    }
}

/* 移动端 */
@media (max-width: 768px) {
    .home-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .home-tab-nav {
        overflow: visible;
        min-width: max-content;
    }
    .home-tab-btn {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 0.82rem;
    }
    .home-tab-btn.active {
        border-radius: 4px 4px 0 0;
    }
    .home-tab-more { padding: 8px 8px 8px 14px; font-size: 0.8rem; }
    .tab-content-header { padding: 6px 0; }
}

/* 分隔线 */
.content-divider { height: 1px; background: var(--mh-border-light); margin: 0 0 2px 0; }

/* ============================================================
   7.5. 首页热搜艺人
   ============================================================ */
.hot-artists-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--mh-border-light);
}
.hot-artists-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.hot-artists-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mh-text);
    margin: 0;
}
.hot-artists-more {
    font-size: 0.82rem;
    color: var(--mh-primary);
    text-decoration: none;
}
.hot-artists-more:hover { text-decoration: underline; }
.hot-artists-row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.hot-artist-item {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--mh-text);
}
.hot-artist-avatar {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.hot-artist-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.artist-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--mh-primary);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}
.hot-artist-name {
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   7.6. 艺人列表页（A-Z双列侧栏+绿色交替背景）
   ============================================================ */
.artist-list-page {
    max-width: var(--mh-site-width);
    margin: 20px auto;
    padding: 0 var(--mh-site-padding);
    /* 修复：本页被包在主体 grid(`.main-container`)内，但未匹配任何 grid-column，
       会被 grid 自动塞进「侧栏列」(260px)导致内容被压成单列。显式占满内容列。 */
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.artist-list-wrap {
    display: flex;
    gap: 24px;
}
.artist-az-sidebar {
    flex: 0 0 80px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
/* "全部"标识 */
.artist-az-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 0;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mh-primary);
    text-decoration: none;
    border-radius: 4px;
    border: 1.5px solid var(--mh-primary);
    transition: all 0.15s;
}
.artist-az-all:hover { background: rgba(59,79,160,0.06); }
.artist-az-all.active { background: var(--mh-primary); color: #fff; }

/* 双列容器 */
.artist-az-columns {
    display: flex;
    gap: 3px;
}
.artist-az-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
/* 列1 - 浅草绿 */
.az-col-1 .artist-az-link {
    background: #e8f5e9;
}
.az-col-1 .artist-az-link:hover {
    background: #c8e6c9;
}
/* 列2 - 薄荷绿 */
.az-col-2 .artist-az-link {
    background: #e0f2f1;
}
.az-col-2 .artist-az-link:hover {
    background: #b2dfdb;
}

.artist-az-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #558b2f;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.15s;
}
.artist-az-link.has-data { color: #2e7d32; font-weight: 700; }
.artist-az-link.active {
    background: #43a047 !important;
    color: #fff;
    font-weight: 700;
}
.artist-list-content { flex: 1; min-width: 0; }
.artist-list-title {
    font-size: 1.3rem;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mh-primary);
}
.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px;
}
.artist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--mh-text);
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s;
}
.artist-card:hover { background: var(--mh-surface-hover); }
.artist-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 8px;
}
.artist-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.artist-card-name {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   7.7. 艺人专题资源页
   ============================================================ */
.artist-single-page {
    max-width: var(--mh-site-width);
    margin: 20px auto;
    padding: 0 var(--mh-site-padding);
}
.artist-single-wrap {
    display: flex;
    gap: 28px;
}
.artist-single-sidebar {
    flex: 0 0 260px;
}
.artist-profile-card {
    background: var(--mh-surface);
    border-radius: var(--mh-radius);
    padding: 24px 20px;
    box-shadow: var(--mh-shadow);
    text-align: center;
    position: sticky;
    top: 20px;
}
.artist-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 14px;
}
.artist-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.artist-avatar-placeholder.large { font-size: 3rem; }
.artist-profile-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--mh-text);
}
.artist-profile-stats {
    font-size: 0.85rem;
    color: var(--mh-primary);
    margin-bottom: 12px;
}
.artist-profile-bio {
    text-align: left;
    font-size: 0.85rem;
    color: var(--mh-text-secondary);
    line-height: 1.7;
    padding-top: 12px;
    border-top: 1px solid var(--mh-border-light);
}
.artist-single-content { flex: 1; min-width: 0; }

/* 艺人页图文网格：自适应列数 */
.artist-single-content .music-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}
@media (min-width: 1200px) {
    .artist-single-content .music-list {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 1024px) {
    .artist-single-content .music-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .artist-single-content .music-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
.artist-single-content .list-item {
    /* 确保list-item在grid内正常显示 */
}
.artist-single-content .list-item-inner {
    display: flex;
    flex-direction: column;
}
.artist-single-content .list-thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 8px;
}
.artist-single-content .list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.artist-single-content .list-item:hover .list-thumb img {
    transform: scale(1.05);
}
.artist-single-content .list-info {
    padding: 0 2px;
}
.artist-single-content .list-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
}
.artist-single-content .list-title a {
    color: var(--mh-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.artist-single-content .list-title a:hover { color: var(--mh-primary); }
.artist-single-content .list-meta {
    font-size: 12px;
    color: var(--mh-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* 艺人专题页隐藏艺术家名称（已在侧栏显示） */
.artist-single-content .artist-name-link { display: none; }
/* 艺人专题页只显示特色图+标题，隐藏所有元信息 */
.artist-single-content .list-meta { display: none; }
.artist-resource-title {
    font-size: 1.15rem;
    margin: 0;
}

@media (max-width: 768px) {
    .hot-artist-avatar { width: 72px; height: 72px; }
    .hot-artist-item { flex: 0 0 72px; }
    .hot-artist-name { max-width: 72px; font-size: 0.75rem; }
    .artist-list-wrap { flex-direction: column-reverse; }
    .artist-az-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
    }
    .artist-az-columns { gap: 2px; }
    .artist-az-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
    }
    .artist-az-link { width: auto; min-width: 26px; height: 22px; font-size: 0.7rem; padding: 0 4px; }
    .artist-az-all { width: auto; display: inline-flex; padding: 4px 10px; margin-bottom: 4px; margin-right: 6px; }
    .artist-single-wrap { flex-direction: column; }
    .artist-single-sidebar { flex: 0 0 auto; }
    .artist-profile-card { position: static; }

    /* 移动端文章排版 */
    .entry-content {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* ============================================================
   7. 图文列表（音乐资源卡片）
   ============================================================ */
.music-list {
    display: grid;
    grid-template-columns: repeat(var(--mh-grid-cols), 1fr);
    gap: var(--mh-grid-gap);
}

/* P18：搜索结果页固定 6 列。只覆写搜索页，首页/分类/艺人页继续吃 --mh-grid-cols。
   搜索页内容列被限死在 --mh-site-width(1150)，6 列 + 14px 间距单格约 180px，方形封面刚好。
   body.mh-search-page 的特异性高于下面的 .music-list，窄屏逐级降列不会被文件后半段
   max-width:1024/768/480 那几条通用 2 列规则抢走。AJAX 翻页只换 #music-list 里的卡片，
   容器类名不变，所以局部刷新后仍是 6 列。 */
body.mh-search-page .music-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
/* 降列只留给真正窄的屏：站长常用 1366×768 @125%，CSS 视口约 1093，
   这条线定在 1000，保证这个尺寸下仍然是 6 列（单格约 164px，方形封面刚好）。 */
@media screen and (max-width: 1000px) {
    body.mh-search-page .music-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media screen and (max-width: 640px) {
    body.mh-search-page .music-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 480px) {
    body.mh-search-page .music-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.list-item {
    background: var(--mh-card-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                background var(--mh-transition);
}
.list-item:hover {
    background: var(--mh-card-hover);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.08);
    position: relative;
    z-index: 2;
    border-color: var(--mh-primary);
}

.list-item-inner {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* 缩略图 */
.list-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
    overflow: hidden;
    background: var(--mh-bg);
    position: relative;
}
/* 鼠标悬停 — 黑胶碟片旋转 */
.list-thumb::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 50%;
    background: url('../img/vinyl-disc.png') center/cover no-repeat;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 3;
}
.list-item:hover .list-thumb::before {
    opacity: 1;
    animation: vinylSpin 3s linear infinite;
}
@keyframes vinylSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 缩略图底部渐变遮罩 — 让文字过渡更自然 */
.list-thumb::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30%;
    background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
    z-index: 2;
    pointer-events: none;
}
.list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease;
}
.list-item:hover .list-thumb img {
    transform: scale(1.06);
}

/* 信息区 */
.list-info {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.list-title a {
    color: var(--mh-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.list-title a:hover {
    color: var(--mh-primary);
}


.list-artist {
    font-size: 1.05rem;
    color: var(--mh-text-muted);
    margin: 0;
}

/* ============================================================
   元信息标签（12号字 + SVG图标）
   ============================================================ */
.list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mh-text-muted);
    overflow: hidden;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--mh-text-muted);
    padding: 2px 0;
    transition: color 0.2s ease;
}

.meta-tag a {
    color: var(--mh-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.meta-tag a:hover {
    color: var(--mh-primary);
}

/* SVG 图标统一样式 */
.meta-svg-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--mh-text-muted);
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.meta-tag:hover .meta-svg-icon {
    opacity: 1;
    color: var(--mh-primary);
}

/* 码率特殊图标 */
.fmt-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    vertical-align: text-bottom;
}

.list-excerpt {
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No Results */
.no-results {
    padding: 48px 20px;
    text-align: center;
    background: var(--mh-card-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow);
}
.no-results-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.no-results p {
    color: var(--mh-text-secondary);
    margin: 4px 0;
}
.no-results-hint {
    font-size: 0.82rem;
    color: var(--mh-text-muted);
}

/* ============================================================
   8. Pagination
   ============================================================ */
.pagination {
    padding: 20px 0 0;
    text-align: center;
}
.pagination-top {
    margin: 0;
    padding: 0;
    flex: 1;
    text-align: center;
    
    
}
.pagination-bottom {
    text-align: center;
    padding: 20px 2px 0;
}

.page-nav {
    display: inline-flex;
    gap: 4px;
}

.page-item {
    display: inline-block;
}
.page-item a,
.page-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    font-size: 0.85rem;
    color: var(--mh-text-secondary);
    transition: border-color var(--mh-transition), background var(--mh-transition), color var(--mh-transition);
}
.page-item a:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
    background: var(--mh-surface-hover);
}
.page-item.active .page-numbers {
    background: var(--mh-primary);
    color: #fff;
    border-color: var(--mh-primary);
    font-weight: 600;
}

/* ============================================================
   8.1 加载下一页按钮
   ============================================================ */
.load-more-wrap {
    text-align: center;
    padding: 28px 0 8px;
}

.btn-load-more {
    display: inline-block;
    padding: 12px 48px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--mh-primary);
    border: none;
    border-radius: var(--mh-radius);
    cursor: pointer;
    transition: background var(--mh-transition), transform var(--mh-transition), box-shadow var(--mh-transition);
    box-shadow: 0 2px 8px rgba(59, 79, 160, 0.25);
}

.btn-load-more:hover {
    background: var(--mh-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 79, 160, 0.35);
}

.btn-load-more:active {
    transform: translateY(0);
}

.load-more-loading {
    display: inline-block;
    padding: 12px 48px;
    font-size: 0.9rem;
    color: var(--mh-text-secondary);
}

/* ============================================================
   Transitions
   ============================================================ */

/* ============================================================
   10. Footer
   ============================================================ */
#site-footer {
    background: var(--mh-surface);
    border-top: 2px solid var(--mh-border);
    padding: 36px 0 28px;
    max-width: var(--mh-site-width);
    margin: 0 auto;
    width: 100%;
    transition: background-color 0.3s;
}

.footer-inner {
    max-width: var(--mh-site-width);
    margin: 0 auto;
    padding: 0 var(--mh-site-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-info {
    font-size: 0.88rem;
    color: var(--mh-text-muted);
}
.footer-info p {
    margin: 2px 0;
}
.icp a {
    color: var(--mh-text-muted);
    font-size: 0.78rem;
}
.icp a:hover {
    color: var(--mh-primary);
}

.footer-links {
    display: flex;
    gap: 16px;
    font-size: 0.88rem;
    color: var(--mh-text-muted);
}
.footer-links a {
    color: var(--mh-text-muted);
}
.footer-links a:hover {
    color: var(--mh-primary);
}

/* ============================================================
   Transitions
   ============================================================ */
.single-resource {
    background: var(--mh-card-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow);
    padding: 28px;
}

.resource-cover {
    margin: -28px -28px 24px;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
    overflow: hidden;
    max-height: 400px;
}
.resource-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.resource-header {
    margin-bottom: 20px;
}

.resource-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mh-text);
}

.resource-artist,
.resource-album {
    font-size: 0.95rem;
    color: var(--mh-text-secondary);
    margin: 4px 0;
}

/* Transitions */
.resource-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 24px;
    padding: 16px 0;
    border-top: 1px solid var(--mh-border-light);
    border-bottom: 1px solid var(--mh-border-light);
    margin-bottom: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 0.85rem;
    min-width: 0;
}

.meta-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.meta-label {
    color: var(--mh-text-muted);
    flex-shrink: 0;
}

.meta-value {
    color: var(--mh-text-secondary);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Download */
.resource-content {
    margin: 24px 0;
    line-height: 1.8;
    color: var(--mh-text);
}

/* Download */
.resource-download {
    margin: 24px 0;
    padding: 20px;
    background: var(--mh-surface-hover);
    border-radius: var(--mh-radius);
    text-align: center;
    border: 2px dashed var(--mh-border);
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    background: var(--mh-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--mh-radius);
    cursor: pointer;
    transition: background var(--mh-transition), transform var(--mh-transition);
}
.download-btn:hover {
    background: var(--mh-primary-hover);
    transform: translateY(-1px);
}
.download-btn:active {
    transform: translateY(0);
}

.download-locked,
.download-login-prompt {
    color: var(--mh-text-secondary);
}
.download-locked p,
.download-login-prompt p {
    margin: 0 0 12px;
    font-size: 1rem;
}

.upgrade-link,
.login-link {
    display: inline-block;
    padding: 10px 28px;
    background: var(--mh-accent);
    color: #fff;
    border-radius: var(--mh-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--mh-transition);
}
.upgrade-link:hover,
.login-link:hover {
    background: var(--mh-accent-hover);
    color: #fff;
}
.register-link {
    display: inline-block;
    padding: 10px 28px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    color: var(--mh-text-secondary);
    margin-left: 10px;
    text-decoration: none;
}
.register-link:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}

.no-download {
    color: var(--mh-text-muted);
    font-style: italic;
}

/* Download */
.resource-footer {
    display: flex;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mh-border-light);
    font-size: 0.82rem;
    color: var(--mh-text-muted);
}

/* ============================================================
   12. 会员中心
   ============================================================ */
/* 会员中心页：强制无边栏全宽 */
body.member-center-page .main-container {
    display: block !important;
    max-width: var(--mh-site-width);
    margin-top: 8px;
    grid-template-columns: none;
}
body.member-center-page .content-area.member-content-area {
    max-width: 100%;
    grid-column: auto;
    grid-row: auto;
}
body.member-center-page .content-inner { padding: 0; }

.member-center {
    background: var(--mh-card-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow);
    overflow: hidden;
    width: 100%; min-width: 0; max-width: 100%;
    box-sizing: border-box;
}

/* ---- 过期横幅 ---- */
.member-expired-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; background: #fff3e0;
    border: 1px solid #ffcc80; border-radius: var(--mh-radius);
    margin-bottom: 16px;
}
[data-theme='dark'] .member-expired-banner {
    background: rgba(230,126,34,0.15); border-color: rgba(230,126,34,0.3);
}
.member-expired-banner .expired-icon { font-size: 1.3rem; flex-shrink: 0; }
.member-expired-banner .expired-text { flex: 1; min-width: 0; }
.member-expired-banner .expired-text strong { display: block; font-size: 0.95rem; color: #e65100; }
.member-expired-banner .expired-text span { font-size: 0.82rem; color: var(--mh-text-muted); }
.member-expired-banner .btn-primary { flex-shrink: 0; white-space: nowrap; }

/* ---- 概览卡片（三栏：头像 | 信息 | 操作） ---- */
.member-overview {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--mh-surface-hover) 0%, var(--mh-surface) 100%);
    border-bottom: 1px solid var(--mh-border);
    flex-wrap: wrap;
}
.member-avatar-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.member-avatar img, .member-avatar .avatar {
    width: 72px; height: 72px; border-radius: 50%;
    border: 3px solid var(--mh-primary); object-fit: cover;
}
.member-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.member-avatar-upload .upload-hint {
    font-size: 0.68rem;
    color: var(--mh-text-muted);
    text-align: center;
}

/* 中间信息区 */
.member-overview-main { flex: 1; min-width: 200px; }
.member-id-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.member-id-left { min-width: 0; }
.mh-upgrade-vip-btn {
    display: inline-block;
    margin-top: 4px;
    transform: translateX(-350px) skewX(-20deg);
    padding: 8px 22px;
    background: #e53935;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none;
    position: relative;
    white-space: nowrap;
}
/* 红色模块整体右倾为平行四边形，文字同角度倾斜，更具动感 */
.mh-upgrade-vip-btn:hover { background: #c62828; }

/* 文章编辑页「图标显示」三个开关：横向并排 */
.mh-icon-toggles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px; margin: 6px 0; }
.mh-icon-toggle { display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; }
.mh-icon-toggle-full { flex: 1 1 100%; max-width: 640px; }
.member-name-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.member-name-row h2 { margin: 0; font-size: 1.2rem; color: var(--mh-text); line-height: 1.3; }
.member-sub { margin: 0 0 6px; font-size: 0.82rem; color: var(--mh-text-muted); }
.member-status-line { min-height: 20px; }
.status-tag {
    display: inline-block; padding: 2px 10px; border-radius: 3px;
    font-size: 0.78rem; font-weight: 600;
}
.status-tag.svip   { background: rgba(201,168,76,0.15); color: #8b6914; }
.status-tag.vip    { background: rgba(59,79,160,0.1); color: var(--mh-primary); }
/* Req12：深色模式下年度会员到期/倒计时显示为醒目金黄色 */
[data-theme='dark'] .status-tag.vip { color: #FFD700; border: 1px solid rgba(255,215,0,0.5); background: rgba(255,215,0,0.12); }
.status-tag.expired { background: rgba(198,40,40,0.08); color: #c62828; }
.status-tag.free   { background: var(--mh-surface-hover); color: var(--mh-text-muted); }

/* 右侧快捷统计 + 操作 */
.member-overview-side {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 10px; flex-shrink: 0; min-width: 160px;
}
.member-mini-stats {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.mini-stat { text-align: center; }
.mini-stat-icon { display: block; font-size: 1.1rem; margin-bottom: 3px; }
.mini-stat-val { display: block; font-size: 0.9rem; font-weight: 700; color: var(--mh-text); }
.mini-stat-lbl { display: block; font-size: 0.68rem; color: var(--mh-text-muted); margin-top: 2px; }

/* ---- 按钮 ---- */
.btn-outline {
    display: inline-block; padding: 7px 16px;
    border: 1px solid var(--mh-primary); border-radius: var(--mh-radius-sm);
    color: var(--mh-primary); font-size: 0.82rem; font-weight: 600;
    text-decoration: none; cursor: pointer; background: transparent;
    transition: background var(--mh-transition), color var(--mh-transition);
}
.btn-outline:hover { background: var(--mh-primary); color: #fff; }
.btn-text {
    display: inline-block; padding: 2px 0;
    color: var(--mh-text-muted); font-size: 0.78rem;
    text-decoration: none; cursor: pointer;
}
.btn-text:hover { color: var(--mh-text); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-file-label { cursor: pointer; }
.btn-logout {
    display: inline-block;
    padding: 7px 18px;
    background: #c62828;
    color: #fff;
    border: none;
    border-radius: var(--mh-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-logout:hover { background: #b71c1c; }

.btn-primary {
    display: inline-block; padding: 10px 24px;
    background: var(--mh-primary); color: #fff;
    border: none; border-radius: var(--mh-radius-sm);
    font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background var(--mh-transition), opacity var(--mh-transition);
}
.btn-primary:hover { background: var(--mh-primary-hover, #2e3d8a); opacity: 0.92; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- TAB 导航 ---- */
.member-tabs {
    display: flex; border-bottom: 2px solid var(--mh-border);
    background: var(--mh-surface-hover); overflow-x: auto; padding: 0 20px;
}
.member-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 14px 18px; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    font-size: 0.88rem; color: var(--mh-text-muted); cursor: pointer;
    white-space: nowrap;
    transition: color var(--mh-transition), border-color var(--mh-transition);
}
.member-tab:hover { color: var(--mh-text); }
.member-tab.active { color: var(--mh-primary); border-bottom-color: var(--mh-primary); font-weight: 600; }
.tab-redeem-label { color: #c47f00; font-weight: 700; }
[data-theme='dark'] .tab-redeem-label { color: #f0c040; }
.tab-icon { font-size: 1rem; }

/* ---- TAB 内容 ---- */
.member-tab-content { padding: 28px; }
.tab-panel-header { margin-bottom: 18px; }
.tab-panel-header h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--mh-text); }
.tab-panel-desc { margin: 0; font-size: 0.85rem; color: var(--mh-text-muted); }

/* ---- 个人信息区块 ---- */
.profile-section {
    margin-bottom: 24px; padding-bottom: 20px;
    border-bottom: 1px solid var(--mh-border-light);
}
.profile-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.profile-section h4 { margin: 0 0 12px; font-size: 0.92rem; color: var(--mh-text); font-weight: 700; }

/* 头像上传 */
.profile-avatar-row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.avatar-preview-lg img, .avatar-preview-lg .avatar {
    width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid var(--mh-primary); object-fit: cover;
}
.avatar-upload-ctrl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.upload-hint { font-size: 0.73rem; color: var(--mh-text-muted); }

/* 表单网格 */
.member-form-wide { max-width: 600px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .form-group { margin-bottom: 0; }
.form-group-full { grid-column: 1 / -1; }
/* 基本资料：登录邮箱 / 联系QQ / 联系微信 同一水平并排 */
.form-grid.form-grid-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid.form-grid-three { grid-template-columns: 1fr; }
}

/* ---- 表单 ---- */
.member-form { max-width: 420px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 0.84rem; color: var(--mh-text-secondary); font-weight: 600; }
.form-group input, .form-group textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--mh-border); border-radius: var(--mh-radius-sm);
    background: var(--mh-surface); color: var(--mh-text); font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--mh-primary);
    box-shadow: 0 0 0 3px rgba(59,79,160,0.1);
}

.redeem-input-group { display: flex; gap: 10px; max-width: 500px; }
.redeem-input-group input {
    flex: 1; font-family: var(--mh-font-mono, monospace);
    text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem;
}
.redeem-input-group .btn-primary { flex-shrink: 0; }

/* 消息提示 */
.form-message {
    margin-top: 10px; padding: 10px 14px; border-radius: var(--mh-radius-sm);
    font-size: 0.85rem; display: none;
}
.form-message.success { display: block; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
[data-theme='dark'] .form-message.success { background: rgba(46,125,50,0.2); border-color: rgba(46,125,50,0.3); }
.form-message.error { display: block; background: #fce4e4; color: #c62828; border: 1px solid #f5c6c6; }
[data-theme='dark'] .form-message.error { background: rgba(198,40,40,0.2); border-color: rgba(198,40,40,0.3); }

/* 兑换码当前状态 */
.current-membership-info {
    margin-top: 20px; padding: 16px 20px; background: var(--mh-surface-hover);
    border-radius: var(--mh-radius-sm); border: 1px solid var(--mh-border-light);
}
.current-membership-header {
    font-size: 0.78rem; font-weight: 700; color: var(--mh-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.current-membership-info p { margin: 4px 0; font-size: 0.88rem; color: var(--mh-text-secondary); }
.current-membership-info p.hint { font-size: 0.8rem; color: var(--mh-text-muted); }

.redeem-tip-box {
    margin-top: 20px; padding: 16px 20px;
    background: rgba(59,79,160,0.06); border: 1px solid var(--mh-border-light);
    border-radius: var(--mh-radius-sm);
}
.redeem-tip-box p { margin: 4px 0; font-size: 0.88rem; color: var(--mh-text-secondary); }

/* ---- 下载记录 ---- */
.download-history {
    border: 1px solid var(--mh-border); border-radius: var(--mh-radius); overflow: hidden;
}
.history-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--mh-border-light);
    gap: 12px; transition: background var(--mh-transition);
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: var(--mh-surface-hover); }
.history-info { flex: 1; min-width: 0; }
/* dsding 对齐（A18）：下载记录带 64px 方形封面 */
.history-cover {
    flex-shrink: 0;
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: var(--mh-border-light);
}
.history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 下载记录分页：‹ 上一页  N / M  下一页 › */
.mh-history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
.mh-hp-btn {
    padding: 6px 14px;
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    text-decoration: none;
}
a.mh-hp-btn:hover { border-color: var(--mh-gold-500); color: var(--mh-gold-600); }
.mh-hp-btn.is-off { opacity: 0.4; }
.mh-hp-count { font-size: 0.82rem; color: var(--mh-text-muted); }
.history-title {
    font-size: 0.9rem; color: var(--mh-text); font-weight: 600;
    display: block; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-decoration: none;
}
.history-title:hover { color: var(--mh-primary); }
.history-meta {
    display: flex; gap: 16px; margin-top: 4px;
    font-size: 0.78rem; color: var(--mh-text-muted); flex-wrap: wrap;
}

/* ---- 空状态 ---- */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 2.5rem; margin-bottom: 8px; }
.empty-state p { margin: 4px 0; color: var(--mh-text-secondary); font-size: 0.95rem; }
.empty-state p.hint { font-size: 0.82rem; color: var(--mh-text-muted); }

/* ============================================================
   13. Common Page Elements
   ============================================================ */
.page-article {
    background: var(--mh-card-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow);
    padding: 28px;
}
.page-title {
    font-size: 1.4rem;
    margin: 0 0 20px;
    color: var(--mh-text);
}
.page-content {
    color: var(--mh-text);
    line-height: 1.8;
}

/* ============================================================
   14. 文章正文排版
   ============================================================ */
.entry-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.9;
    color: var(--mh-text);
}
.entry-content p {
    margin: 0 0 1.2em;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    line-height: 1.4;
    margin: 1.5em 0 0.6em;
}
.entry-content h2 { font-size: 1.35rem; }
.entry-content h3 { font-size: 1.15rem; }
.entry-content h4 { font-size: 1rem; }
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content svg {
    max-width: 100%;
    height: auto;
    margin: 0.8em 0;
}
.entry-content blockquote {
    margin: 1em 0;
    padding: 12px 18px;
    border-left: 3px solid var(--mh-primary);
    background: var(--mh-surface-hover);
    border-radius: 0 6px 6px 0;
    line-height: 1.8;
}
.entry-content ul,
.entry-content ol {
    max-width: 100%;
    padding-left: 1.5em;
    box-sizing: border-box;
    margin: 0.6em 0 1em;
}
.entry-content li {
    max-width: 100%;
    overflow-wrap: break-word;
    margin-bottom: 0.3em;
}
.entry-content *,
.entry-content *::before,
.entry-content *::after {
    box-sizing: border-box;
}
/* 文章内表格：长内容自动换行，移动端可横向滚动，PC 端拉满内容区并控制在页面内 */
.entry-content table,
table.album-content {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
/* Req9：PC 端文章页音乐目录表格拉满内容区宽度 */
@media (min-width: 769px) {
    .entry-content table,
    table.album-content { display: table; width: 100%; table-layout: fixed; }
}
.entry-content table th,
.entry-content table td,
table.album-content th,
table.album-content td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 6px 10px;
    border: 1px solid var(--mh-border);
}

/* 厂牌专题页 */
.mh-label-header { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px 100px 12px; flex-wrap: nowrap; text-align: left; }
.mh-label-logo { flex: 0 0 auto; }
.mh-label-logo img { width: 96px; height: 96px; border-radius: 12px; object-fit: contain; border: 1px solid var(--mh-border); background: #fff; }
.mh-label-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mh-label-title { margin: 0 0 8px; font-size: 1.6rem; color: var(--mh-text); }
.mh-label-intro { margin: 0; color: var(--mh-text-muted); line-height: 1.6; max-width: 900px; white-space: pre-wrap; }
.mh-label-divider { height: 1px; background: var(--mh-border); margin: 14px 100px 12px; }
/* dsding 对齐（A15）：厂牌页「收录资源」小节头 + 共 N 张专辑计数 */
.mh-label-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 100px 14px;
}
.mh-label-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
    color: var(--mh-text);
}
.mh-label-section-bar { width: 4px; height: 20px; background: var(--mh-gold-600); }
.mh-label-count { font-size: 0.85rem; color: var(--mh-text-muted); }
@media (max-width: 768px) {
    .mh-label-section-head { margin: 0 16px 12px; }
}
@media (max-width: 768px) {
    /* 手机端保持：左侧 logo，右侧紧贴分上下两行（名称在上、介绍在下），不换行、左对齐 */
    .mh-label-header { padding: 20px 16px 10px; flex-wrap: nowrap; justify-content: flex-start; }
    .mh-label-logo img { width: 72px; height: 72px; }
    .mh-label-title { font-size: 1.3rem; }
    .mh-label-divider { margin: 12px 16px 10px; }
}

/* 厂牌专题汇总页（全部厂牌，两列布局） */
/* 主容器在非文章页是「侧栏宽 + 1fr」网格；厂牌页无侧栏，必须跨满整行，
   否则 .site-main 会被挤进侧栏轨道导致卡片极窄、文字单字成行（且各浏览器 auto-placement 不一致） */
/* 无侧栏页面（厂牌/艺人）：列表跨满整行；有侧栏页面：列表只占内容列，避免被挤进侧栏轨道 */
body:not(.mh-article-page) .main-container:not(:has(.filter-sidebar)) .archive-list {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
body:not(.mh-article-page) .main-container:has(.filter-sidebar) .archive-list {
    grid-column: 2;
}
/* 容器贴主容器边缘，与站内列表内容区左右齐平 */
.archive-list .container {
    max-width: var(--mh-site-width);
    margin: 0 auto;
    padding: 0;
}
/* 整块（标题+厂牌模块）上提 20px：标题上边距 24px → 4px */
.mh-labels-archive-title {
    margin: 4px 0 18px;
    font-size: 20px;
    color: var(--mh-text);
    text-align: center;
    border-bottom: 1px solid var(--mh-border);
    padding-bottom: 12px;
}
.mh-labels-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
    padding: 0 0 40px;
}
.mh-label-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--mh-border);
    border-radius: 12px;
    background: var(--mh-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.mh-label-card:hover {
    border-color: var(--mh-primary);
    box-shadow: var(--mh-shadow);
}
.mh-label-card-logo { flex: 0 0 auto; display: block; }
.mh-label-card-logo img {
    width: 84px; height: 84px; border-radius: 10px;
    object-fit: contain; border: 1px solid var(--mh-border); background: #fff;
}
.mh-label-card-info {
    display: flex; flex-direction: column; justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.mh-label-card-title {
    margin: 0 0 6px; font-size: 1.15rem; color: var(--mh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-label-card-title a { color: inherit; text-decoration: none; }
.mh-label-card:hover .mh-label-card-title a { color: var(--mh-primary); }
.mh-label-card-intro {
    margin: 0; color: var(--mh-text-muted); line-height: 1.5; font-size: 0.9rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* 手机端厂牌简介「展开/收起」按钮（JS 注入，仅手机端显示） */
.mh-intro-toggle {
    color: var(--mh-primary);
    cursor: pointer;
    user-select: none;
    margin-left: 4px;
    font-size: inherit;
}
.mh-intro-toggle:hover { text-decoration: underline; }
.mh-label-card-more {
    margin-left: 4px;
    font-size: 0.85rem;
    color: var(--mh-primary);
    text-decoration: none;
}
.mh-label-card-more:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .mh-labels-archive-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 0 32px; }
}
@media (max-width: 768px) {
    .archive-list .container { padding: 0 16px; }
    .mh-labels-archive-title { margin: 0 0 14px; }
}

/* 厂牌专题页资源列表：五列网格布局；手机端（≤640px）双列，保持双列不塌成单列，不影响 PC 端 */
.mh-label-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px) { .mh-label-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .mh-label-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mh-label-grid { grid-template-columns: repeat(2, 1fr); } }

/* 前端内容保护：默认禁止选择，下载弹窗与表单输入内允许 */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, .mh-copy-allowed, .mh-copy-allowed * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.search-highlight {
    background: #fff3cd;
    color: #856404;
    padding: 1px 3px;
    border-radius: 2px;
}
[data-theme='dark'] .search-highlight {
    background: rgba(255,243,205,0.25);
    color: #f5d060;
}

/* Transitions */
.archive-title {
    font-size: 1.2rem;
    margin: 0;
    color: var(--mh-text);
}
.archive-desc {
    font-size: 0.85rem;
    color: var(--mh-text-muted);
    margin: 4px 0;
}

/* ============================================================
   15. Responsive Styles
   ============================================================ */
@media (max-width: 1280px) {
    .site-desc {
        display: none;
    }
}
@media (max-width: 1024px) {
    #site-wrap {
        padding: 0 16px;
    }
    .header-search-inline {
        display: none !important;
    }
    .main-container {
        gap: 16px;
        padding: 0;
    }
    .content-inner {
        padding-right: 0;
    }
    body:not(.mh-article-page) .main-container {
        grid-template-columns: 230px minmax(0, var(--mh-site-width));
        max-width: calc(230px + 24px + var(--mh-site-width));
    }
    .filter-sidebar {
        width: 230px;
    }
    /* 平板端：2列图文列表 */
    .music-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .list-thumb {
        aspect-ratio: 1 / 1;
    }
    .list-info {
        padding: 12px 12px 14px;
        gap: 8px;
    }
    .list-title {
        font-size: 0.9rem;
    }
    .list-meta {
        gap: 4px 10px;
    }
    .meta-tag {
        font-size: 11px;
    }
    .meta-svg-icon {
        width: 13px;
        height: 13px;
    }
    .fmt-icon {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 768px) {
    #site-wrap {
        padding: 0 12px;
    }
    /* 切换为垂直排列 */
    .main-container {
        flex-direction: column !important;
        margin: 12px 0;
        padding: 0;
    }

    /* 非文章页 Grid 回退为单列 */
    body:not(.mh-article-page) .main-container {
        display: block;
    }
    body:not(.mh-article-page) .filter-sidebar {
        grid-row: auto;
    }
    .search-inline {
        padding: 0 0 12px;
    }

    /* Mobile:  */
    #sidebar-swap-btn,
    .sidebar-swap-btn-inner {
        display: none !important;
    }

    /* 手机端：导航菜单可横向滑动 */
    .site-navbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-inner {
        min-width: max-content;
    }
    .navbar-menu {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 4px;
    }
    .navbar-menu li {
        flex-shrink: 0;
    }
    .navbar-menu a {
        padding: 6px 12px;
        font-size: 0.88rem;
    }

    /* 手机端：图文列表双列，卡片即"图在上、文在下"的竖向布局 */
    .music-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* 手机端卡片微调 */
    .list-info {
        padding: 10px 10px 12px;
        gap: 6px;
    }
    .list-title {
        font-size: 0.85rem;
        line-height: 1.35;
    }
    .list-meta {
        gap: 3px 8px;
    }
    .meta-tag {
        font-size: 11px;
        gap: 3px;
    }
    .meta-svg-icon {
        width: 12px;
        height: 12px;
    }
    .fmt-icon {
        width: 13px;
        height: 13px;
    }
    /* 手机端 hover 效果减弱，避免触屏误触 */
    .list-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .list-item:hover .list-thumb img {
        transform: none;
    }
    .list-thumb::after {
        height: 25%;
    }

    /* 移动端：内容区右侧间距由 #site-wrap 控制 */
    .content-inner {
        padding-right: 0;
    }

    /* Mobile:  */
    .filter-sidebar {
        display: none;
    }
    .sidebar-inner {
        position: static;
        max-height: none;
    }
    .filter-modules-wrap {
        max-height: none;
        overflow-y: visible;
    }
    body.filter-open .filter-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 84%;
        max-width: 340px;
        height: 100%;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: -6px 0 24px rgba(0,0,0,0.35);
    }
    body.filter-open .filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .header-right .mobile-filter-btn,
    .filter-close-btn {
        display: inline-flex !important;
    }
    /* Sidebar  */
    .mh-article-page .main-container {
        display: block;
    }
    .mh-article-page #article-main {
        width: 100%;
        padding: 0 12px;
    }
    .mh-article-page .related-sidebar {
        width: 100%;
        margin-top: 24px;
    }

    /* Article page */
    .meta-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }
    .meta-cell {
        padding: 3px 0;
        font-size: 0.85rem;
    }

    /* Article page */
    .album-main {
        flex-direction: column;
        gap: 16px;
        padding: 16px 15px;
    }
    .album-cover {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .album-content {
        padding: 14px 16px 20px;
    }
    .album-content.entry-content {
        padding: 14px 16px 20px;
    }

    /* Article page */
    .album-content img,
    .album-content iframe,
    .album-content table,
    .album-content video,
    .album-content embed,
    .album-content object,
    .album-content figure,
    .album-content .wp-block-image,
    .entry-content img,
    .entry-content iframe,
    .entry-content table,
    .entry-content video,
    .entry-content embed,
    .entry-content object,
    .entry-content figure,
    .entry-content .wp-block-image {
        max-width: 100% !important;
        height: auto !important;
    }
    .album-content pre,
    .album-content code,
    .entry-content pre,
    .entry-content code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* Article page */
    .post-nav-link {
        max-width: 100%;
    }

    /* Article page */
    .mh-article-page .article-breadcrumb {
        padding-left: 0;
        padding-right: 12px;
    }

    .header-inner {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 8px;
    }
    .header-left {
        flex: 1;
        min-width: 0;
    }
    .site-desc {
        display: none;
    }
    .header-search-inline {
        display: none;
    }
    .header-right {
        width: 100%;
        justify-content: flex-end;
    }

    #search-bar {
        padding: 10px 0;
    }
    .search-inner {
        padding: 0 14px;
    }

    .single-resource {
        padding: 16px;
    }
    .resource-cover {
        margin: -16px -16px 16px;
    }
    .resource-meta-grid {
        grid-template-columns: 1fr;
    }
    .resource-title {
        font-size: 1.2rem;
    }

    .member-stats {
        grid-template-columns: 1fr;
    }
    .member-overview {
        flex-direction: column;
        text-align: center;
    }
    .member-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .list-item-inner {
    }
    .list-thumb {
        aspect-ratio: 1 / 1;
    }

    .pagination-top {
    margin: 0;
    padding: 0;
    flex: 1;
    text-align: center;
        display: none;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .resource-download .btn-primary,
    .download-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #site-wrap {
        padding: 0 8px;
    }
    .header-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }
    .site-name {
        font-size: 1rem;
    }

    /* 超小屏：图文列表保持双列，间距更紧凑 */
    .music-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .list-info {
        padding: 8px 8px 10px;
        gap: 5px;
    }
    .list-title {
        font-size: 0.8rem;
    }
    .list-meta {
        gap: 2px 6px;
    }
    .meta-tag {
        font-size: 10px;
        gap: 2px;
    }
    .meta-svg-icon {
        width: 11px;
        height: 11px;
    }
    .fmt-icon {
        width: 12px;
        height: 12px;
    }

    .list-thumb {
    }

    .resource-meta-grid {
        grid-template-columns: 1fr;
    }

    .member-tab-content {
        padding: 16px;
    }
    .member-stats {
        padding: 16px;
    }

    .page-article,
    .single-resource {
        padding: 14px;
    }

    /* Article page */
    .album-main {
        padding: 12px 15px;
        gap: 12px;
    }
    .album-cover {
        max-width: none;
    }
    .album-content,
    .album-content.entry-content {
        padding: 12px 14px 16px;
    }
    .article-post-nav {
        flex-direction: column;
        gap: 10px;
    }
    .post-nav-link {
        max-width: 100% !important;
    }
    .album-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* ============================================================
   Download
   ============================================================ */

/* Download */
.mh-article-page #site-wrap {
    background: var(--mh-bg);
}
#article-main {
    width: 100%;
    max-width: var(--mh-site-width);
    margin: 0 auto;
    padding: 15px var(--mh-site-padding) 37px;
    overflow-x: hidden;
}

/* Article page */
.related-sidebar {
    width: var(--mh-sidebar-width);
    flex-shrink: 0;
    align-self: flex-start;
}
.related-inner {
    background: var(--mh-sidebar-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow), 0 4px 16px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.06);
    overflow: hidden;
    position: sticky;
    top: 80px;
    margin-top: 15px;
    transition: background-color 0.3s, border-color 0.3s;
}
/* 「猜你喜欢」这一列不再内部滚动（2026-10-13 按站长要求取消上下滚动条）。
   P18 曾给它限高 100vh + overflow-y:auto，理由是担心 sticky 把多出来的部分顶出视口；
   实际上 .article-sidebars-wrap 和 .related-sidebar 都是 align-self:flex-start，
   父容器高度就等于面板高度，sticky 没有可移动区间、本来就不生效，
   那条限高只剩下一个内部滚动条。现在让面板按内容自然长高，
   条数多就是把这一列和整页拉长，随页面一起滚动，全部条目都能看到。
   回滚＝把下面注释掉的这两行恢复即可：
     max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; */
.related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: none;
    background: #f8f9fb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .related-header {
    background: #262d3a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.related-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: 1px;
    position: relative;
    padding-left: 12px;
}
[data-theme='dark'] .related-title {
    color: #e2e8f0;
}
.related-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1em;
    border-radius: 2px;
    background: var(--mh-primary);
}
.sidebar-swap-btn-inner {
    background: linear-gradient(135deg, #ff8a3d, #ff5e62);
    border: none;
    border-radius: var(--mh-radius-sm);
    padding: 4px 11px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 94, 98, 0.40);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.sidebar-swap-btn-inner:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(255, 94, 98, 0.55);
    color: #ffffff;
}
.related-list {
    display: flex;
    flex-direction: column;
}
.related-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mh-border-light);
    text-decoration: none;
    color: var(--mh-text);
    transition: background-color var(--mh-transition);
}
.related-item:last-child {
    border-bottom: none;
}
.related-item:hover {
    background: var(--mh-surface-hover);
}
/* P18：猜你喜欢每条独立色块。色值由 single.php 按 8 组配色顺序写成行内变量
   --rel-bg / --rel-bar，这里只做消费，避免在 CSS 里再维护一份色表。
   浅底一律配深字（不用深底白字）；hover 只把底色轻微压暗，不再整块变灰，否则一排色块
   在鼠标划过时会被同化成一坨灰。深色模式下面板本身是深色，浅底会刺眼，这里丢掉浅底、
   用极淡的斑马底维持"每条一块"的节奏。
   2026-10-13 按站长要求：删掉每条左侧那道 3px 彩色粗条（border-left），
   同时把为它让位而写的 padding-left:9px 一起去掉，左右内距回到基础规则的 12px 一层。
   回滚＝恢复这两行：border-left: 3px solid var(--rel-bar, transparent); padding-left: 9px; */
.related-item {
    background: var(--rel-bg, transparent);
}
.related-item:hover {
    background: var(--rel-bg, var(--mh-surface-hover));
    filter: brightness(0.965);
}
.related-item:hover .related-item-title {
    color: var(--rel-bar, var(--mh-primary));
}
[data-theme='dark'] .related-item {
    background: transparent;
}
[data-theme='dark'] .related-item:nth-child(odd) {
    background: rgba(255, 255, 255, 0.035);
}
[data-theme='dark'] .related-item:hover {
    background: rgba(255, 255, 255, 0.07);
    filter: none;
}
[data-theme='dark'] .related-item:hover .related-item-title {
    color: var(--mh-text);
}
.related-thumb-wrap {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin-right: 10px;
    overflow: hidden;
}
.related-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: var(--mh-surface);
}
.related-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.related-item-title {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--mh-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-item:hover .related-item-title {
    color: var(--mh-primary);
}
.related-item-cat {
    font-size: 0.78rem;
    color: var(--mh-text-muted);
}
.related-empty {
    padding: 16px 14px;
    font-size: 0.85rem;
    color: var(--mh-text-muted);
}

/* ===== 文章页侧栏包裹容器（筛选 + 猜你喜欢，支持垂直对调） ===== */
.article-sidebars-wrap {
    flex: 0 0 var(--mh-sidebar-width);
    width: var(--mh-sidebar-width);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-sidebars-wrap.reversed {
    flex-direction: column-reverse;
}

/* 文章页资源筛选侧栏 — 样式与猜你喜欢统一 */
.article-filter-sidebar {
    width: 100%;
}
.article-filter-inner {
    background: var(--mh-sidebar-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-glass-highlight), var(--mh-shadow), 0 4px 16px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: background-color 0.3s, border-color 0.3s;
}
.article-filter-inner .filter-modules-wrap {
    padding: 12px 14px;
}
.article-filter-inner .filter-module {
    margin-bottom: 10px;
}
.article-filter-inner .filter-label-row {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mh-text-muted);
    margin-bottom: 4px;
}
.article-filter-inner .filter-select {
    width: 100%;
    padding: 7px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    background: var(--mh-surface);
    color: var(--mh-text);
}

/* 垂直对调按钮（独立于左右对调） */
.vertical-swap-btn {
    background: linear-gradient(135deg, #3b4fa0, #5b6fd0);
    border: none;
    border-radius: var(--mh-radius-sm);
    padding: 4px 11px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59,79,160,0.40);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vertical-swap-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(59,79,160,0.55);
    color: #ffffff;
}

/* ============================================================
   每日精选模块（首页导航栏下方）
   ============================================================ */
.daily-featured {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 28px 0 24px;
    overflow: hidden;
}
.daily-featured-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 30, 0.25); /* 极浅遮罩，仅保证文字可读 */
    pointer-events: none;
}
.daily-featured-inner {
    position: relative;
    max-width: var(--mh-site-width, 1200px);
    margin: 0 auto;
    padding: 0 16px;
}
.daily-featured-header { padding: 0 4px 16px; }
.daily-featured-title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    position: relative;
    padding-left: 14px;
}
.daily-featured-title::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 1.1em;
    border-radius: 3px;
    background: linear-gradient(135deg, #ffd400, #d4a017);
}

.daily-featured-track {
    position: relative;
}
.daily-featured-grid {
    position: relative;
}
.daily-featured-page {
    display: none;
}
.daily-featured-page.active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    animation: dfFadeIn 0.4s ease;
}
@keyframes dfFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.daily-featured-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(20, 24, 38, 0.4);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #fff;
    text-decoration: none;
    min-height: 280px;
}
.daily-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #fff;
}
/* Hi-Res 标识（卡片左上角） */
.daily-featured-hires {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.daily-featured-hires img {
    height: 24px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.daily-featured-card-glass {
    padding: 14px 14px 10px;
    background: rgba(15, 18, 30, 0.45);
}
.daily-featured-meta { margin-bottom: 6px; }
.daily-featured-date {
    color: #cbd0d8;
    font-size: 0.8rem;
    font-weight: 500;
}
.daily-featured-card-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.daily-featured-excerpt {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.daily-featured-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.daily-featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.daily-featured-bitrate {
    position: absolute;
    left: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    color: #fff;
    padding: 12px 10px 8px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}
.df-bitrate-format {
    background: var(--mh-badge-title-bg, #ffd400);
    color: var(--mh-badge-title-text, #1d2327);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.7rem;
}
.df-bitrate-rate {
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 左右箭头 */
.daily-featured-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #2a3670;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 5;
    transition: background 0.2s, transform 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.daily-featured-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.daily-featured-prev { left: -18px; }
.daily-featured-next { right: -18px; }

/* 分页点 */
.daily-featured-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.daily-featured-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.daily-featured-dot:hover { background: rgba(255, 255, 255, 0.7); }
.daily-featured-dot.active {
    background: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.4);
}

/* 移动端：水平滑动展示 */
@media (max-width: 1024px) {
    .daily-featured-page.active {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .daily-featured-page.active::-webkit-scrollbar { display: none; }
    .daily-featured-card {
        flex: 0 0 280px;
        min-width: 280px;
        scroll-snap-align: start;
        min-height: 260px;
    }
    .daily-featured-prev, .daily-featured-next { display: none; }
}
@media (max-width: 640px) {
    .daily-featured { padding: 20px 0 18px; }
    .daily-featured-card {
        flex: 0 0 260px;
        min-width: 260px;
        min-height: 240px;
    }
}

/* 面包屑导航栏 */
.article-breadcrumb-wrap {
    background: var(--mh-surface);
    border-bottom: 1px solid var(--mh-border);
    padding: 10px 0;
    margin: 0 0 15px 0;
    transition: background-color 0.3s;
}
[data-theme='dark'] .article-breadcrumb-wrap {
    background: var(--mh-surface);
}
.article-breadcrumb {
    max-width: none;
    margin: 0;
    padding: 0 20px;
    font-size: 0.95rem;
    color: var(--mh-text-muted);
}
.article-breadcrumb a {
    color: var(--mh-text-secondary);
    text-decoration: none;
}
.article-breadcrumb a:hover {
    color: var(--mh-primary);
}
.breadcrumb-sep {
    margin: 0 6px;
    color: var(--mh-text-muted);
}
.breadcrumb-current {
    color: var(--mh-text);
    font-weight: 400;
}

/* Download */
.album-body-wrap {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: var(--mh-radius);
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.3s;
    max-width: 100%;
}
.album-body-wrap:hover {
    box-shadow: none;
}

[data-theme='dark'] .album-body-wrap {
    box-shadow: none;
}
[data-theme='dark'] .album-body-wrap:hover {
    box-shadow: none;
}

.album-main {
    display: flex;
    gap: 24px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-bottom: none;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
    padding: 20px;
    transition: background-color 0.3s;
}

/* 封面 */
.album-cover {
    flex-shrink: 0;
    width: 300px;
    position: relative;
}
.album-cover-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--mh-radius-sm);
    display: block;
}

/* Light Mode Colors */
.album-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 4px 12px;
    background: var(--mh-badge-album-bg, #f9a825);
    color: var(--mh-badge-album-text, #5d4037);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* 元信息（flex 纵列，按钮靠底） */
.album-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.album-download-row {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
}

.album-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mh-text);
    margin: 0 0 4px;
    line-height: 1.3;
    word-break: break-word;
}

/* Title  */
.mh-title-badge {
    display: inline-block;
    background: var(--mh-badge-title-bg, #ffd400);
    color: var(--mh-badge-title-text, #333);
    font-size: 12px;              /* Font size */
    line-height: 1.2;
    padding: 2px;                 /* Inner  */
    margin-right: 8px;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

.album-subtitle {
    font-size: 0.95rem;
    color: var(--mh-text-secondary);
    margin: 0 0 4px;
}

/* 双列元信息表格 */
.album-meta-table {
    border-top: 1px solid var(--mh-border-light);
    padding-top: 3px;
    margin-bottom: 8px;
}

.meta-row {
    display: flex;
    gap: 20px;
    margin-bottom: 1px;
}

.meta-cell {
    flex: 1;
    min-width: 0;
    padding: 3px 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.meta-cell-full {
    flex: 1 1 100%;
}

.meta-cell-label {
    color: var(--mh-text-muted);
    flex-shrink: 0;
    margin-right: 4px;
    font-weight: 400;
}
.meta-cell-value {
    color: var(--mh-text-secondary);
    font-weight: 400;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 字段名隐藏时（码率=none），值前移占据原标签位置 */
.meta-cell-value-solo {
    flex: 1;
    text-align: left;
}

/* 码率 HiRes 图标 */
.mh-bitrate-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    position: relative;
    top: 4px;
}
.mh-bitrate-icon img {
    display: block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

/* Download */
.meta-link {
    color: var(--mh-primary);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s, color 0.2s;
    padding: 1px 0;
}
.meta-link:hover {
    color: var(--mh-primary-hover);
    border-bottom-color: var(--mh-primary-hover);
}
[data-theme='dark'] .meta-link {
    color: #7b93e0;
}
[data-theme='dark'] .meta-link:hover {
    color: #a0b4f0;
    border-bottom-color: #7b93e0;
}
/* Artist links */
.meta-link.artist-link,
.artist-name-link {
    font-weight: 400;
    color: var(--mh-primary);
    text-decoration: none;
}
.meta-link.artist-link:hover,
.artist-name-link:hover {
    color: var(--mh-primary);
    text-decoration: underline;
}

/* Transitions */
.album-actions {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 0 0;
    border-top: 1px solid var(--mh-border-light);
    flex-wrap: wrap;
}

.album-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 32px;
    border-radius: var(--mh-radius);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
}
.album-btn:active {
    transform: translateY(1px);
}

.album-btn-vip {
    background: linear-gradient(135deg, #f9e4b7, #d4a017);
    color: #5a3e00;
    box-shadow: 0 2px 8px rgba(212,160,23,0.3);
}
.album-btn-vip:hover {
    background: linear-gradient(135deg, #fcecca, #e0b030);
    color: #5a3e00;
}

.album-btn-download {
    background: var(--mh-primary);
    color: #fff;
}
.album-btn-download:hover {
    background: var(--mh-primary-hover);
}

.album-btn-login {
    background: var(--mh-surface);
    color: var(--mh-primary);
    border: 2px solid var(--mh-primary);
}
.album-btn-login:hover {
    background: var(--mh-primary);
    color: #fff;
}

.album-btn-disabled {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    background: var(--mh-border);
    color: var(--mh-text-muted);
    border-radius: var(--mh-radius);
    font-size: 0.9rem;
}

/* Download */
.album-content {
    position: relative;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-top: 1px dashed var(--mh-border);
    /* 详情页最后这道底边：浅灰 3px + 一道淡投影，让正文卡有轻微厚度，
       但不再像旧深蓝/深灰粗线那样压住页面。深色取值见 --mh-edge。 */
    border-bottom: 3px solid var(--mh-edge);
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
    padding: 18px 28px 28px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    transition: background-color 0.3s;
    box-sizing: border-box;
    box-shadow: 0 10px 22px -14px rgba(17, 24, 39, 0.30), 0 2px 4px rgba(17, 24, 39, 0.06);
}
[data-theme='dark'] .album-content {
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.65);
}

/* dsding 对齐（A8）：「专辑介绍」区标题 + 超 2000 字折叠
   标题是卡片的头，正文卡去掉自己的上边线，两块拼成一个盒子，padding 只留一层 */
.album-intro-card {
    margin-top: 6px;
}
.album-intro-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mh-text);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-bottom: none;
    border-radius: var(--mh-radius) var(--mh-radius) 0 0;
}
.album-intro-bar {
    width: 4px;
    height: 16px;
    background: var(--mh-gold-600);
}
.album-intro-rel {
    position: relative;
}
.album-intro-card .album-content {
    border-top: 1px solid var(--mh-border);
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
}
.mh-intro-clamp {
    max-height: 500px;
    overflow: hidden;
}
.mh-intro-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: 32px 8px 6px;
    background: linear-gradient(to top, var(--mh-surface), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.mh-intro-mask .mh-intro-btn { pointer-events: auto; }
[data-theme='dark'] .mh-intro-mask {
    background: linear-gradient(to top, var(--mh-night-900), rgba(18, 20, 42, 0.72), rgba(18, 20, 42, 0));
}
.mh-intro-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--mh-gold-600);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: 0;
    cursor: pointer;
}
.mh-intro-btn:hover { border-color: var(--mh-gold-500); }
[data-theme='dark'] .mh-intro-btn { background: var(--mh-night-800); color: var(--mh-gold-400); }
.mh-intro-btn-muted { color: var(--mh-text-secondary); }
.mh-intro-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* P18：这里原来有一条 [data-theme='dark'] .album-content{border-bottom-color:#3b5fc0}
   —— 那是旧的「深蓝底边」配色留下的。删掉它，底边改由 --mh-edge 分明暗。 */





/* Previous  */
.article-post-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
}
.post-nav-item {
    min-width: 0;
}
.post-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    padding: 14px 18px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    /* 站长要求：上一篇/下一篇盒子不要再压粗底边，跟普通卡片一样四边 1px 细线。 */
    border-radius: var(--mh-radius);
    text-decoration: none;
    color: var(--mh-text-secondary);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.post-nav-link:hover {
    border-color: var(--mh-primary);
    box-shadow: 0 10px 22px -12px rgba(17, 24, 39, 0.30);
    transform: translateY(-2px);
    color: var(--mh-primary);
}
.post-nav-prev .post-nav-link {
    justify-content: flex-start;
}
.post-nav-next .post-nav-link {
    justify-content: flex-end;
}
.post-nav-arrow {
    font-size: 1rem;
    flex-shrink: 0;
}
.post-nav-label {
    font-size: 0.78rem;
    color: var(--mh-text-muted);
    flex-shrink: 0;
}
.post-nav-title {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme='dark'] .article-post-nav .post-nav-link:hover {
    border-color: #5a6fd6;
}

/* ============================================================
   文章页悬浮上一篇/下一篇箭头（仅文章页；滚动到一定程度才显示，由内联脚本控制显隐）
   设计：贴内容列左右边缘的细线条大箭头，默认隐藏、不抢占点击；
        大屏置于 1200px 内容列外侧留白处(不遮挡正文与侧栏)，小屏贴视口边缘并缩小。
   ============================================================ */
.mh-postnav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}
.mh-postnav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mh-postnav-prev { left: 10px; }
.mh-postnav-next { right: 10px; }
/* 大屏：置于 1200px 内容列(半宽 600px)外侧留白处，绝不遮挡正文与左右侧栏（箭头加大后需更宽留白） */
@media (min-width: 1340px) {
    .mh-postnav-prev { left: calc(50vw - 600px - 66px); }
    .mh-postnav-next { right: calc(50vw - 600px - 66px); }
}
.mh-postnav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--mh-text);
    /* 磨砂玻璃拟态：进一步降低不透明度，增强通透/透明力度 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.1) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top-color: rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14), inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(0, 0, 0, .04);
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mh-postnav-link:hover {
    transform: scale(1.08);
    color: #fff;
    background: var(--mh-accent);
    border-color: var(--mh-accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
/* 暗色模式下的玻璃质感与悬停 */
[data-theme='dark'] .mh-postnav-link {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .12), inset 0 -1px 1px rgba(0, 0, 0, .12);
}
[data-theme='dark'] .mh-postnav-link:hover {
    background: var(--mh-accent);
    border-color: var(--mh-accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.mh-postnav-arrow {
    display: block;
    width: 34px;
    height: 34px;
}
/* 悬浮提示：悬停显示“上一篇/下一篇” */
.mh-postnav-tip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
    background: var(--mh-accent);
    color: #fff;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.mh-postnav-prev .mh-postnav-tip { left: calc(100% + 12px); }
.mh-postnav-next .mh-postnav-tip { right: calc(100% + 12px); }
.mh-postnav-link:hover .mh-postnav-tip { opacity: 1; }

/* 平板/手机：缩小尺寸并贴视口边缘，降低对正文阅读的遮挡 */
@media (max-width: 1024px) {
    .mh-postnav-link { width: 56px; height: 56px; }
    .mh-postnav-prev { left: 8px; }
    .mh-postnav-next { right: 8px; }
}
@media (max-width: 768px) {
    .mh-postnav-link { width: 50px; height: 50px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
    .mh-postnav-arrow { width: 28px; height: 28px; }
    .mh-postnav-prev { left: 6px; }
    .mh-postnav-next { right: 6px; }
    .mh-postnav-tip { font-size: 11px; padding: 4px 7px; }
}


/* --- 导航菜单栏（轻盈动感，音乐欢快风格） --- */
.site-navbar {
    background: linear-gradient(135deg, #0e45a0 0%, #1255b9 50%, #104aab 100%);
    border-bottom: none;
    box-shadow: 0 1px 8px rgba(59,79,160,0.15);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-inner {
    max-width: var(--mh-site-width);
    margin: 0 auto;
    padding: 0 var(--mh-site-padding);
}
/* Req10：主导航菜单整体左移 20px（仅桌面端，避免移动端裁切） */
@media (min-width: 769px) {
    .navbar-inner { transform: translateX(-20px); }
}
.navbar-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.navbar-menu li {
    display: list-item;
    margin: 0;
}
.navbar-menu a {
    display: block;
    padding: 7px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s, background 0.2s, transform 0.2s;
    border-radius: 4px;
    margin: 3px 2px;
}
.navbar-menu a:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}
.navbar-menu .current-menu-item a,
.navbar-menu .current_page_item a {
    color: #fff;
    background: rgba(255,255,255,0.18);
    font-weight: 600;
}

/* 子菜单下拉 */
.navbar-menu .menu-item-has-children {
    position: relative;
}
.navbar-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--mh-navbar-bg);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 100;
}
.navbar-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}
.navbar-menu .sub-menu li {
    display: block;
    margin: 0;
}
.navbar-menu .sub-menu a {
    display: block;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    border-radius: 0;
    margin: 0;
    white-space: nowrap;
}
.navbar-menu .sub-menu a:hover {
    color: #fff;
    background: rgba(255,255,255,0.10);
    transform: none;
}

/* 移动端 */
@media (max-width: 768px) {
    .site-navbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-inner {
        min-width: max-content;
    }
    .navbar-menu {
        flex-wrap: nowrap;
    }
    .navbar-menu a {
        padding: 7px 16px;
        font-size: 0.85rem;
        margin: 2px 1px;
    }
}

/* ============================================================
   鏅€氬崥瀹㈡枃绔犺鎯呴〉
   ============================================================ */
.content-area--full {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
.post-single {
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    padding: 40px;
    box-shadow: var(--mh-shadow);
}
.post-header {
    margin-bottom: 24px;
}
.post-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--mh-text);
}
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--mh-text-muted);
}
.post-meta a {
    color: var(--mh-primary);
    text-decoration: none;
}
.post-thumbnail {
    margin-bottom: 24px;
    border-radius: var(--mh-radius-sm);
    overflow: hidden;
}
.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}
.post-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--mh-text);
}
.post-content p {
    margin: 0 0 1.2em;
}
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mh-radius-sm);
}
.post-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--mh-border-light);
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--mh-text-muted);
}
.post-tags a {
    display: inline-block;
    padding: 3px 10px;
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--mh-text-secondary);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.post-tags a:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}




/* ============================================================
   卡片视觉层级增强 (v2.2.11)
   ============================================================ */
.list-item {
    border-top: 3px solid var(--mh-primary) !important;
}
.list-item:nth-child(1),
.list-item:nth-child(2),
.list-item:nth-child(3) {
    border-top-color: var(--mh-accent) !important;
}
.list-item:nth-child(4) {
    border-top-color: #5a9ec2 !important;
}
.music-list .list-item:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-8px);
    border-color: var(--mh-primary);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                border-color 0.3s ease;
}

/* ============================================================
   会员与下载模块增强 (v2.2.10)
   ============================================================ */

/* --- VIP / SVIP 头衔图标 --- */
.mh-vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.5;
    vertical-align: middle;
}
.mh-vip-badge.vip {
    background: linear-gradient(135deg, #4a6cf7, #3b4fa0);
    color: #fff;
    box-shadow: 0 1px 4px rgba(59,79,160,0.4);
}
.mh-vip-badge.svip {
    background: linear-gradient(135deg, #f9d976, #d4a017);
    color: #5a3e00;
    box-shadow: 0 1px 5px rgba(212,160,23,0.5);
}
.mh-vip-badge.expired {
    background: #e0e0e0;
    color: #888;
}
.mh-vip-text {
    font-size: 0.72rem;
    font-weight: 600;
}
.mh-vip-text.vip { color: var(--mh-primary); }
.mh-vip-text.svip { color: var(--mh-accent); }

.album-download-row .album-btn {
    font-size: 0.82rem;
    padding: 5px 12px;
    white-space: nowrap;
}
.album-download-row .album-btn-download {
    background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-hover));
}
.album-download-row .album-btn-disabled {
    font-size: 0.75rem;
    padding: 5px 12px;
    color: var(--mh-text-muted);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
}
/* 注：原 .album-download-row .album-quota-tip（今日剩余 x/y 次）已按站长要求删除，
   前台下载按钮旁不再出现任何次数文字，服务端与 theme.js 也不再渲染该元素。 */
/* dsding 对齐：有下载标记但一条链接都没配时，给一行灰底小注，不再整块留白 */
.album-no-dl-note {
    display: inline-block;
    padding: 5px;
    font-size: 0.7rem;
    color: var(--mh-text-muted);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
}
[data-theme='dark'] .album-no-dl-note {
    color: var(--mh-text-muted);
    background: rgba(255,255,255,0.04);
    border-color: var(--mh-border);
}
/* ============================================================ */
/* --- 下载模态框 --- */
.mh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.mh-modal-overlay[hidden] { display: none; }
.mh-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--mh-surface);
    border-radius: var(--mh-radius);
    padding: 28px 26px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    animation: mhModalIn 0.22s ease;
}
@keyframes mhModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
.mh-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--mh-text-muted);
    cursor: pointer;
}
.mh-modal-close:hover { color: var(--mh-text); }
.mh-modal-body { margin-top: 6px; }
.mh-modal-body .mh-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--mh-text);
}
.mh-modal-body .mh-dl-row-info {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.mh-modal-body .mh-dl-row-info .mh-dl-label-txt {
    font-size: 0.8rem;
    color: var(--mh-text-muted);
    margin-bottom: 6px;
}
.mh-modal-body .mh-dl-link {
    word-break: break-all;
    font-size: 0.92rem;
    color: var(--mh-primary);
}
.mh-modal-body .mh-dl-code {
    margin-top: 10px;
    font-size: 0.95rem;
}
.mh-modal-body .mh-dl-code strong {
    background: var(--mh-accent);
    color: #5a3e00;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.mh-modal-body .mh-dl-content-box {
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    background: var(--mh-dl-content-bg, #fff);
    color: var(--mh-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-all;
}
.mh-modal-body .mh-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.mh-modal-body .mh-modal-actions .btn-primary,
.mh-modal-body .mh-modal-actions .btn-secondary {
    flex: 1;
    text-align: center;
    padding: 11px;
    border-radius: var(--mh-radius-sm);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.mh-modal-body .btn-primary {
    background: var(--mh-primary);
    color: #fff;
}
.mh-modal-body .btn-primary:hover { background: var(--mh-primary-hover); }
.mh-modal-body .btn-secondary {
    background: var(--mh-border);
    color: var(--mh-text-secondary);
}
.mh-modal-body .mh-modal-msg {
    padding: 14px 16px;
    border-radius: var(--mh-radius-sm);
    font-size: 0.92rem;
    line-height: 1.6;
}
.mh-modal-body .mh-modal-msg.error {
    background: #fdeaea;
    color: #c62828;
}
.mh-modal-body .mh-modal-msg.info {
    background: #eaf2fd;
    color: var(--mh-primary);
}
[data-theme='dark'] .mh-modal-body .mh-modal-msg.error { background: rgba(198,40,40,0.18); }
[data-theme='dark'] .mh-modal-body .mh-modal-msg.info { background: rgba(59,79,160,0.22); }

/* --- 会员中心：个人信息两列布局（头像卡片不占通栏） --- */
.profile-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}
.profile-avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    padding: 18px 16px;
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
}
.profile-avatar-upload .avatar-preview img,
.profile-avatar-upload .avatar-preview .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.profile-avatar-upload .avatar-upload-controls {
    width: 100%;
    min-width: 0;
}
.profile-avatar-upload .avatar-upload-controls input[type="file"] {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.profile-avatar-upload #avatar-upload-btn {
    width: 100%;
}
.profile-main {
    min-width: 0;
}
@media (max-width: 640px) {
    .profile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   404 错误页面
   ============================================================ */
.mh-404 {
    text-align: center;
    padding: 80px 20px;
    max-width: 560px;
    margin: 0 auto;
}
.mh-404-code {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mh-primary);
    letter-spacing: 2px;
}
.mh-404-title {
    font-size: 1.6rem;
    margin: 16px 0 12px;
    color: var(--mh-text-primary);
}
.mh-404-desc {
    color: var(--mh-text-muted);
    line-height: 1.7;
    margin-bottom: 28px;
}
.mh-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.mh-404-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: var(--mh-radius-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.mh-404-btn-primary {
    background: var(--mh-primary);
    color: #fff;
    border: 1px solid var(--mh-primary);
}
.mh-404-btn-primary:hover { background: var(--mh-primary-hover); }
.mh-404-actions .search-form {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
}
.mh-404-actions .search-input-wrap { display: flex; }
.mh-404-actions .search-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm) 0 0 var(--mh-radius-sm);
    background: var(--mh-surface);
    color: var(--mh-text-primary);
}
.mh-404-actions .search-submit {
    padding: 9px 16px;
    border: 1px solid var(--mh-primary);
    border-left: none;
    background: var(--mh-primary);
    color: #fff;
    border-radius: 0 var(--mh-radius-sm) var(--mh-radius-sm) 0;
    cursor: pointer;
    white-space: nowrap;
}

/* ============================================================
   暗色模式补全（徽章 / 下载框 / 渐变）
   ============================================================ */
[data-theme='dark'] .album-badge {
    background: var(--mh-primary);
    color: #fff;
}
[data-theme='dark'] .mh-title-badge {
    background: var(--mh-primary);
    color: #fff;
}
[data-theme='dark'] .df-bitrate-format {
    background: var(--mh-primary);
    color: #fff;
}
[data-theme='dark'] .mh-dl-content-box {
    background: var(--mh-surface);
    border-color: var(--mh-border);
}
[data-theme='dark'] .mh-modal-body .mh-modal-msg.error { background: rgba(198,40,40,0.18); }
[data-theme='dark'] .mh-modal-body .mh-modal-msg.info { background: rgba(59,79,160,0.22); }

/* 导航栏统一使用变量，暗色模式适配 */
.site-navbar {
    background: var(--mh-navbar-bg);
}

/* ============================================================
   跳转主内容链接（可访问性）
   ============================================================ */
.mh-skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 9999;
    padding: 10px 18px;
    background: var(--mh-primary);
    color: #fff;
    border-radius: var(--mh-radius-sm);
    text-decoration: none;
    transition: top 0.2s ease;
}
.mh-skip-link:focus {
    top: 12px;
}

/* 首页移动端筛选按钮：≥769px 隐藏 */
@media (min-width: 769px) {
    #mobile-filter-btn { display: none; }
}

/* ============================================================
   新碟入库 · 七日清单页面 v2.0
   参考 iplayhifi.com/latest：折叠日期分组、行内列表、序号
   ============================================================ */
.new-releases-page .content-area {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    padding-top: 24px;
}
.new-releases-page .main-container {
    justify-content: center;
}
.nr-content-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* --- 页面标题区 --- */
.nr-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mh-border-light);
}
.nr-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--mh-text);
    margin: 0 0 8px 0;
}
.nr-subtitle {
    font-size: 0.85rem;
    color: var(--mh-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nr-subtitle-icon { font-size: 0.95rem; }

/* --- 无数据 --- */
.nr-no-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--mh-text-muted);
}
.nr-no-data-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* ===== 每日分组 ===== */
.nr-daily-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- 日期块 --- */
.nr-day-block {
    margin-bottom: 10px;
    border-radius: var(--mh-radius-sm);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0e4e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme='dark'] .nr-day-block {
    background: #1e2430;
    border-color: #2d3544;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
}

/* --- 日期头（可点击按钮，整行通栏，白色背景） --- */
.nr-day-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 18px;
    border: none;
    background: #ffffff;
    color: #2c3e50;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    gap: 0;
    transition: background 0.2s;
    text-align: left;
    line-height: 1.4;
}
.nr-day-toggle:hover {
    background: #f5f7fa;
}
[data-theme='dark'] .nr-day-toggle {
    background: #1e2430;
    color: #cbd5e0;
}
[data-theme='dark'] .nr-day-toggle:hover {
    background: #252c3a;
}
.nr-day-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nr-toggle-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 1.8rem;
    color: #94a3b8;
}
.nr-day-toggle.expanded .nr-toggle-arrow {
    transform: rotate(180deg);
}
.nr-calendar-icon { font-size: 1rem; }
.nr-day-date { font-weight: 600; }
.nr-day-weekday { font-weight: 400; opacity: 0.85; }
.nr-day-toggle-center {
    display: none;
}
.nr-day-toggle-right {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nr-day-total { font-weight: 600; font-size: 0.9rem; }
/* dsding 对齐（A14）：日期头改成 8 色纯色块 + 竖条 + 今天/昨天徽标，颜色由模板内联下 */
.nr-day-toggle:hover { opacity: 0.92; }
.nr-day-color-bar {
    flex-shrink: 0;
    width: 6px;
    height: 32px;
    border-radius: 9999px;
}
.nr-day-badge {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    background: #ffffff;
}
.nr-day-toggle .nr-toggle-arrow {
    font-size: 1.1rem;
    color: inherit;
    opacity: 0.7;
}

/* --- 展开/折叠内容 --- */
.nr-day-content { 
    display: none;
    border-top: 1px solid #e8ecf1;
}
[data-theme='dark'] .nr-day-content {
    border-top-color: #2d3544;
}
.nr-day-toggle.expanded + .nr-day-content { display: block; }

/* ===== 专辑行 ===== */
.nr-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--mh-border-light);
    text-decoration: none;
    color: var(--mh-text);
    transition: background 0.15s;
}
.nr-track:last-child { border-bottom: none; }
.nr-track:hover {
    background: var(--mh-surface-hover);
    color: var(--mh-text);
}
/* dsding 对齐（A14）：目录式斑马行（奇偶交替底色） */
.nr-track-odd { background: var(--mh-border-light); }
.nr-track-odd:hover { background: var(--mh-surface-hover); }

/* 封面缩略图 50px */
.nr-track-cover {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mh-bg);
    flex-shrink: 0;
}
.nr-track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 中间信息区 */
.nr-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nr-track-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nr-track:hover .nr-track-title {
    color: var(--mh-primary);
}
.nr-track-meta {
    font-size: 0.78rem;
    color: var(--mh-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧序号 #N */
.nr-track-seq {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mh-text-muted);
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .nr-content-inner { padding: 0 12px 30px; }
    .nr-title { font-size: 1.35rem; }
    .nr-day-toggle {
        padding: 11px 14px;
        font-size: 0.9rem;
    }
    .nr-day-toggle-center { display: none; }
    .nr-track {
        padding: 9px 14px;
        gap: 10px;
    }
    .nr-track-cover {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }
    .nr-track-title { font-size: 0.85rem; }
    .nr-track-meta { font-size: 0.73rem; }
    .nr-track-seq { font-size: 0.75rem; min-width: 26px; }
}
@media (max-width: 480px) {
    .nr-track { gap: 8px; padding: 8px 10px; }
    .nr-day-toggle { padding: 10px 10px; font-size: 0.82rem; }
    .nr-track-cover {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }
    .nr-track-title { font-size: 0.8rem; }
    .nr-track-meta { font-size: 0.7rem; }
}

/* ============================================================
   资源筛选结果页 v1.0
   左侧资源筛选边栏 + 筛选参数标签栏 + 图文列表
   ============================================================ */

/* --- 隐藏默认首页专属元素，显示导航栏 --- */
.filter-results-page .daily-featured,
.filter-results-page #filter-sidebar,
.filter-results-page .filter-overlay {
    display: none !important;
}
/* fr-page 已独立于 main-container 之外，直接隐藏空的 main-container */
.filter-results-page #site-wrap > .main-container {
    display: none !important;
}

/* ===== fr-page：整体布局（总宽 1200px 居中，侧栏 + 内容水平并排） ===== */
.fr-page {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: var(--mh-site-width, 1200px);
    margin: 20px auto 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

/* ===== 左侧资源筛选边栏（280px，1200px 内容区外侧） ===== */
.fr-sidebar {
    flex: 0 0 280px;
    width: 280px;
    min-height: 100vh;
    background: var(--mh-sidebar-bg);
    border-right: 1px solid var(--mh-border);
    padding: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 50;
}
.fr-sidebar-inner {
    padding: 20px 18px 30px;
}
.fr-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mh-border-light);
}
.fr-sidebar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mh-text);
}
.fr-sidebar-close {
    display: none; /* 桌面端始终显示侧栏 */
    background: none;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: 3px 8px;
    font-size: 0.85rem;
    color: var(--mh-text-muted);
    cursor: pointer;
}

/* 当前激活筛选条件 */
.fr-active-wrap {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mh-border-light);
}
.fr-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--mh-primary);
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 9px;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity 0.15s;
}
.fr-chip:hover { opacity: 0.85; color: #fff; }
.fr-clear-all {
    font-size: 0.78rem;
    color: var(--mh-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.fr-clear-all:hover { color: #e74c3c; }

/* 侧栏筛选模块 */
.fr-filter-modules {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fr-filter-module {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fr-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fr-filter-select {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    background: var(--mh-surface);
    color: var(--mh-text);
    cursor: pointer;
    transition: border-color 0.15s;
}
.fr-filter-select:focus {
    outline: none;
    border-color: var(--mh-primary);
    box-shadow: 0 0 0 2px rgba(59,79,160,0.12);
}
.fr-submit-btn {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--mh-primary);
    color: #fff;
    border: none;
    border-radius: var(--mh-radius-sm);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

/* ===== 右侧内容区（flex:1 填满侧栏剩余空间） ===== */
.fr-main {
    flex: 1;
    min-width: 0;
    padding: 0 0 60px 0;
    background: var(--mh-bg);
}
.fr-main-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 var(--mh-site-padding);
}

/* ===== 筛选参数标签栏 ===== */
.fr-filter-bar {
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--mh-shadow);
}
.fr-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mh-border-light);
}
.fr-filter-row:last-child {
    border-bottom: none;
}
.fr-filter-row-label {
    flex: 0 0 80px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mh-text);
    padding-top: 4px;
    white-space: nowrap;
}
.fr-filter-row-values {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* 筛选标签 */
.fr-tag {
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.82rem;
    color: var(--mh-text-secondary);
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.fr-tag:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
    background: rgba(59,79,160,0.06);
}
.fr-tag.active {
    background: var(--mh-primary);
    color: #fff;
    border-color: var(--mh-primary);
    font-weight: 600;
}
.fr-tag.active:hover {
    background: var(--mh-primary-hover, #2a3a78);
    color: #fff;
}
.fr-tag-all {
    font-weight: 600;
    color: var(--mh-text);
}

/* ===== 结果统计 ===== */
.fr-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.fr-results-count {
    font-size: 0.88rem;
    color: var(--mh-text-muted);
}
.fr-results-count strong {
    color: var(--mh-primary);
    font-weight: 700;
}

/* ===== 结果列表 ===== */
.fr-results-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
/* 覆盖 list-item 样式适配网格 */
.fr-results-list .list-item {
    border-top: 3px solid var(--mh-primary) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fr-results-list .list-item-inner {
    flex-direction: column;
    gap: 0;
}
.fr-results-list .list-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.fr-results-list .list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fr-results-list .list-info {
    padding: 10px 10px 12px;
}
.fr-results-list .list-title {
    font-size: 0.88rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fr-results-list .list-meta {
    font-size: 0.75rem;
    margin-top: 4px;
}

/* ===== 无结果 ===== */
.fr-no-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--mh-text-muted);
}
.fr-no-results-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

/* ===== 分页 ===== */
.fr-pagination {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.fr-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    margin: 0 3px;
    font-size: 0.85rem;
    color: var(--mh-text-secondary);
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    text-decoration: none;
    transition: all 0.15s;
}
.fr-pagination .page-numbers:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}
.fr-pagination .page-numbers.current {
    background: var(--mh-primary);
    color: #fff;
    border-color: var(--mh-primary);
    font-weight: 600;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .fr-page {
        flex-direction: column;
        max-width: 100%;
        margin-top: 12px;
    }
    .fr-sidebar {
        flex: 0 0 auto;
        width: 100%;
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--mh-border);
        padding: 16px 16px;
    }
    .fr-sidebar-inner {
        padding: 0;
    }
    .fr-sidebar-close {
        display: inline-block;
    }
    .fr-main {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        padding: 20px 0 40px;
    }
    .fr-main-inner {
        padding: 0 16px;
    }
    .fr-filter-row {
        flex-direction: column;
        gap: 8px;
    }
    .fr-filter-row-label {
        flex: 0 0 auto;
    }
    .fr-tag {
        padding: 4px 10px;
        font-size: 0.78rem;
    }
    .fr-results-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .fr-page {
        margin-top: 8px;
    }
    .fr-sidebar {
        padding: 12px 12px;
    }
    .fr-main {
        padding: 16px 0 30px;
    }
    .fr-main-inner {
        padding: 0 12px;
    }
    .fr-filter-bar {
        padding: 12px 14px;
    }
    .fr-results-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .fr-tag {
        padding: 3px 8px;
        font-size: 0.73rem;
    }
    .fr-filter-row-label {
        font-size: 0.8rem;
    }
}

/* ============================================================
   深色模式：图文列表 hover 黄蓝游动边框
   （直接操作 border-color 四边循环，精准无溢出）
   ============================================================ */
@keyframes nrBorderFlow {
    0%   { border-color: #fbbf24 #3b82f6 #6366f1 #eab308; }
    25%  { border-color: #eab308 #fbbf24 #3b82f6 #6366f1; }
    50%  { border-color: #6366f1 #eab308 #fbbf24 #3b82f6; }
    75%  { border-color: #3b82f6 #6366f1 #eab308 #fbbf24; }
    100% { border-color: #fbbf24 #3b82f6 #6366f1 #eab308; }
}

[data-theme='dark'] .list-item {
    position: relative;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background var(--mh-transition);
}
[data-theme='dark'] .list-item:hover {
    animation: nrBorderFlow 1.2s linear infinite;
}

/* ============================================================
   移动端（≤768px）显示控制 v2.2.24
   1. 新碟入库页：手机端正常展示日期及文章列表（无侧栏）
   2. 文章页：隐藏全部侧栏（资源筛选 + 猜你喜欢）
   3. 筛选结果页：默认隐藏“资源筛选”侧栏，可经右上角“筛选”按钮以抽屉打开
   ============================================================ */
@media (max-width: 768px) {
    /* 2. 文章页：所有侧栏隐藏 */
    .mh-article-page .article-sidebars-wrap {
        display: none !important;
    }

    /* 3. 筛选结果页：默认不出现“资源筛选”侧栏 */
    .fr-sidebar {
        display: none;
    }
    /* 点击右上角“筛选”按钮后以抽屉形式弹出 */
    body.fr-filter-open .fr-sidebar {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 84%;
        max-width: 340px;
        height: 100%;
        min-height: 0;
        max-height: none;
        z-index: 1000;
        overflow-y: auto;
        border-bottom: none;
        box-shadow: -6px 0 24px rgba(0,0,0,0.35);
    }
    body.fr-filter-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
}

/* ============================================================
   P0 · dsding 外壳（单行酒红吸顶导航 + 黑底单行页脚）
   规格取自 dsding 源码 components/Header.tsx / Footer.tsx：
   header: sticky top-0 bg-[#a80034] border-b border-white/10
           row: max-w-1700 / px-16 / py-12 / gap-12 / items-center
           nav link: px-12 py-6 text-14 white/90  hover bg-white/10  active bg-white/15
           dropdown: w-288 max-h-420 overflow-y-auto 2 列
           search: w-176（≥769px w-224）白底 + 焦点金边
           mobile: 第二行横向滚动，桌面隐藏；手机端隐藏主导航行
   footer: bg-black border-t border-white/10 mt-48
           inner max-w-1280 flex center gap-12 px-16 py-16
   ============================================================ */

/* ---- 导航栏本体：占满整行并吸顶 ---- */
#site-header.mh-header {
    background: var(--mh-navbar-bg, #a80034);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    max-width: none;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    box-shadow: none;
}

#site-header.mh-header .mh-header-row {
    max-width: 1700px;
    margin: 0 auto;
    padding: 12px var(--mh-site-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: auto;
}

/* ---- 品牌：图标 + 名称（酒红底上必须白字） ---- */
#site-header.mh-header .mh-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-left: 0;
    min-width: 0;
}
#site-header.mh-header .site-logo-img img {
    height: 32px;
    width: auto;
    max-width: 160px;
}
#site-header.mh-header .mh-brand-note {
    font-size: 24px;
    line-height: 1;
    color: var(--mh-gold-500, #f0c040);
}
#site-header.mh-header .site-name {
    color: #ffffff;
    font-size: var(--mh-name-size, 18px);
    white-space: nowrap;
}

/* ---- 主导航（桌面） ---- */
#site-header.mh-header .mh-header-nav { display: flex; align-items: center; min-width: 0; }
.mh-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mh-nav > li { position: relative; }
.mh-nav > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255,255,255,0.90);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.mh-nav > li > a:hover,
.mh-nav > li.current > a,
.mh-nav > li > a.current {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}
.mh-nav > li.current > a { font-weight: 600; }
.mh-nav-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,0.60);
    display: inline-block;
}

/* 分类下拉（流派） */
.mh-nav-sub {
    position: absolute;
    left: 0;
    top: 100%;
    width: 288px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    padding: 8px;
    display: none;
    z-index: 310;
}
.mh-nav > li.has-sub:hover > .mh-nav-sub,
.mh-nav > li.has-sub:focus-within > .mh-nav-sub { display: block; }
.mh-nav-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mh-nav-sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--mh-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-nav-sub a:hover { background: var(--mh-surface-hover); color: var(--mh-text); }
.mh-nav-sub .mh-nav-sub-all {
    grid-column: span 2;
    font-size: 13px;
    font-weight: 600;
    color: var(--mh-gold-600, #d4a017);
}
.mh-nav-count { font-size: 11px; color: var(--mh-text-muted); }

/* ---- 搜索：常驻，白底 ---- */
#site-header.mh-header .mh-header-search.header-search-inline {
    position: relative;
    display: block !important;
    flex: 0 0 auto;
    width: 176px;
    max-width: none;
    margin: 0;
    transform: none;
}
#site-header.mh-header .mh-header-search .search-input-wrap,
#site-header.mh-header .mh-header-search .search-input-wrap:focus-within {
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0;
    box-shadow: none;
}
#site-header.mh-header .mh-header-search .search-input-wrap:focus-within {
    border-color: var(--mh-gold-500, #f0c040);
}
#site-header.mh-header .mh-header-search .search-input {
    background: #ffffff;
    color: #111827;
    border: none;
    font-size: 14px;
    padding: 6px 34px 6px 12px;
}
#site-header.mh-header .mh-header-search .search-input::placeholder { color: #9ca3af; }
#site-header.mh-header .mh-header-search .search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 14px;
}
#site-header.mh-header .mh-header-search .search-submit:hover {
    background: none;
    color: var(--mh-gold-600, #d4a017);
}
#site-header.mh-header .mh-header-search .search-suggestions { left: 0; right: 0; }

/* ---- 工具区：主题切换 / 筛选 / 用户 ---- */
#site-header.mh-header .mh-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    flex: 0 0 auto;
}
#site-header.mh-header .header-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.88);
    border-radius: 0;
    text-decoration: none;
}
#site-header.mh-header .header-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.45);
    color: #ffffff;
}
#site-header.mh-header .login-btn,
#site-header.mh-header .register-btn {
    background: none;
    border: none;
    padding: 6px 4px;
    color: rgba(255,255,255,0.80);
}
#site-header.mh-header .login-btn:hover,
#site-header.mh-header .register-btn:hover {
    background: none;
    color: #ffffff;
}
#site-header.mh-header .user-dropdown {
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    top: calc(100% + 6px);
}
#site-header.mh-header .user-dropdown-item { color: var(--mh-text); border-radius: 0; }
#site-header.mh-header .user-dropdown-item:hover {
    background: var(--mh-surface-hover);
    color: var(--mh-gold-600, #d4a017);
}

/* ---- 窄屏（≤1024px）：主导航换成第二行横向滚动，避免平板宽度挤爆 ---- */
.mh-header-nav-mobile { display: none; }
@media (max-width: 1024px) {
    #site-header.mh-header .mh-header-nav { display: none; }
    #site-header.mh-header .mh-header-row {
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #site-header.mh-header .mh-header-tools { width: auto; flex-wrap: nowrap; }
    #site-header.mh-header .mh-header-search.header-search-inline { width: auto; flex: 1 1 auto; min-width: 0; }
    .mh-header-nav-mobile {
        display: flex;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 8px var(--mh-site-padding);
        border-top: 1px solid rgba(255,255,255,0.10);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mh-header-nav-mobile::-webkit-scrollbar { display: none; }
    .mh-header-nav-mobile .mh-nav { display: flex; gap: 4px; }
    .mh-header-nav-mobile .mh-nav > li { flex: 0 0 auto; }
}

/* 窄屏：品牌名让位给搜索框（同 dsding 的 hidden sm:block） */
@media (max-width: 640px) {
    #site-header.mh-header .site-brand-text { display: none; }
    #site-header.mh-header .header-user .user-name { display: none; }
}

/* ---- 页脚：黑底单行 ---- */
#site-footer.mh-footer {
    background: #000000;
    border-top: 1px solid rgba(255,255,255,0.10);
    max-width: none;
    margin: 48px 0 0;
    padding: 0;
}
.mh-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px var(--mh-site-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mh-footer-name {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.60);
}
.mh-footer-note {
    margin-right: 6px;
    color: var(--mh-gold-500, #f0c040);
}
.mh-footer-sep {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.20);
}
.mh-footer-tagline {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.60);
}

/* 满铺整行：#site-wrap 在窄屏有左右内距，用 full-bleed 公式抵消（宽屏内距为 0，公式结果为 0，无副作用） */
@media (max-width: 1024px) {
    #site-header.mh-header,
    #site-footer.mh-footer {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    #site-footer.mh-footer { margin-top: 48px; margin-bottom: 0; }
}