/* ---------- 令牌：主色 = 近黑（浅色）/ 反相近白（深色） ---------- */
:root {
    color-scheme: light;
    --brand-primary: #060604;
    --brand-primary-hover: #2b2b24;
    --brand-primary-soft: #06060414;
    --brand-primary-ghost: #0606040d;
    --on-brand: #ffffff;
    --surface: #fff;
    --surface-muted: #f5f5f7;
    --surface-soft: #e8e8ed;
    --border-line: #e5e5ea;
    --text-strong: #1d1d1f;
    --text-base: #424245;
    --text-muted: #6e6e73;
    --text-faint: #86868b;
    --surface-rgb: 255 255 255;
    --text-strong-rgb: 29 29 31;
    --text-muted-rgb: 110 110 115;
    --text-faint-rgb: 134 134 139;
    --app-nav-height: 4rem;
    --feed-sidebar-width: 240px;
    --feed-mobile-top: 52px;
    --feed-mobile-bottom: 56px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* ---- 尺度令牌（P0）---- */
    --fs-1: 11px;      /* 元信息 / 标签 / 角标 */
    --fs-2: 12.5px;    /* 次要正文 */
    --fs-3: 14px;      /* 正文 / 列表主行 */
    --fs-4: 16px;      /* 小标题 / 按钮 / 数据 */
    --fs-5: 20px;      /* 区块标题 */
    --fs-6: 26px;      /* 页面级标题 */
    --glyph-1: 20px;   /* 封面字形（图形，不属文字层级） */
    --glyph-2: 28px;
    --glyph-3: 40px;
    --glyph-4: 56px;
    --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
    --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px -2px rgba(16, 24, 40, .07);
    --sh-2: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 24px -10px rgba(16, 24, 40, .20);
    --sh-3: 0 4px 10px rgba(16, 24, 40, .08), 0 24px 48px -16px rgba(16, 24, 40, .30);
    --sh-3-up: 0 -8px 24px -14px rgba(16, 24, 40, .22);
    --dur-1: 150ms; --dur-2: 250ms; --dur-3: 400ms;
    --focus-ring: 2px solid var(--brand-primary);
}

/* 尺度工具类：字号 6 档 + 字形 4 档 + 圆角 4 档 */
.t-1 { font-size: var(--fs-1); }
.t-2 { font-size: var(--fs-2); }
.t-3 { font-size: var(--fs-3); }
.t-4 { font-size: var(--fs-4); }
.t-5 { font-size: var(--fs-5); }
.t-6 { font-size: var(--fs-6); }
.g-1 { font-size: var(--glyph-1); }
.g-2 { font-size: var(--glyph-2); }
.g-3 { font-size: var(--glyph-3); }
.g-4 { font-size: var(--glyph-4); }
.r-1 { border-radius: var(--r-1); }
.r-2 { border-radius: var(--r-2); }
.r-3 { border-radius: var(--r-3); }
.r-4 { border-radius: var(--r-4); }

html.dark {
    color-scheme: dark;
    --brand-primary: #f5f5f7;
    --brand-primary-hover: #ffffff;
    --brand-primary-soft: #f5f5f724;
    --brand-primary-ghost: #f5f5f71a;
    --on-brand: #060604;
    --surface: #101012;
    --surface-muted: #1b1b1f;
    --surface-soft: #27272c;
    --border-line: #3a3a3c;
    --text-strong: #f5f5f7;
    --text-base: #d2d2d7;
    --text-muted: #a1a1a6;
    --text-faint: #86868b;
    --surface-rgb: 16 16 18;
    --text-strong-rgb: 245 245 247;
    --text-muted-rgb: 161 161 166;
    --text-faint-rgb: 134 134 139;
}

/* ---------- 基础 ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--brand-primary-soft); }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.mobile-safe-bottom { padding-bottom: calc(var(--feed-mobile-bottom) + env(safe-area-inset-bottom)); }

/* ---------- 封面：程序化色板生成，不引外部图 ---------- */
.cover {
    position: relative; overflow: hidden; isolation: isolate;
    display: block;
    background:
        radial-gradient(120% 90% at 18% 6%, color-mix(in srgb, var(--b) 85%, #fff) 0%, transparent 56%),
        linear-gradient(152deg, var(--a) 0%, color-mix(in srgb, var(--a) 46%, var(--b)) 52%, var(--b) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -28px 48px rgba(0, 0, 0, .24);
}
.cover::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
    opacity: .06; mix-blend-mode: overlay;
}
.cover__glyph {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 600; color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

/* 讨论卡：文字封面 + 双光源 + 纹理 */
.text-cover { position: relative; overflow: hidden; background: var(--surface-muted); }
.text-cover .glow-a, .text-cover .glow-b { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; filter: blur(46px); opacity: .5; pointer-events: none; }
.text-cover .glow-a { left: -12%; top: -18%; background: var(--a, var(--surface-soft)); }
.text-cover .glow-b { right: -14%; bottom: -22%; background: var(--b, var(--surface-soft)); opacity: .38; }
html.dark .text-cover .glow-a, html.dark .text-cover .glow-b { opacity: .34; }

/* ---------- 侧栏导航项 ---------- */
.side-item {
    display: flex; width: 100%; align-items: center; gap: 1rem;
    border-radius: 999px; padding: .75rem 1rem; text-align: left;
    font-size: 1rem; line-height: 1.25; color: var(--text-base);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.side-item:hover { background: var(--surface-muted); }
.side-item[data-active="true"] { font-weight: 600; color: var(--text-strong); }

/* ---------- 频道药丸 ---------- */
.channel-pill {
    border-radius: 999px; padding: .375rem .875rem; font-size: 13px; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.channel-pill-idle { color: var(--text-muted); }
.channel-pill-idle:hover { background: var(--surface-muted); color: var(--text-strong); }
.channel-pill-active { background: var(--surface-muted); color: var(--text-strong); font-weight: 600; }

/* ---------- 信息流：CSS 多列瀑布流 ---------- */
.masonry-feed { column-count: 2; column-gap: 8px; }
.masonry-feed > * { break-inside: avoid; margin-bottom: 8px; }
@media (min-width: 768px) {
    .masonry-feed { column-count: 3; column-gap: 12px; }
    .masonry-feed > * { margin-bottom: 12px; }
}
@media (min-width: 1120px) { .masonry-feed { column-count: 4; } }
@media (min-width: 1480px) { .masonry-feed { column-count: 5; } }

.grid-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* ---------- 卡片 ---------- */
.feed-card { position: relative; display: block; width: 100%; cursor: pointer; overflow: hidden;
    border-radius: var(--r-3); background: var(--surface); box-shadow: var(--sh-1);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.feed-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.feed-card:active { transform: scale(.99); }
.feed-card .cover, .feed-card .text-cover { transition: transform var(--dur-2) var(--ease-out); }
.feed-card:hover .cover { transform: scale(1.02); }

/* 通用面板卡（子页面） */
.panel { background: var(--surface); border: 1px solid var(--border-line); border-radius: var(--r-3); box-shadow: var(--sh-1); }
.panel-pad { padding: 16px; }
@media (min-width: 768px) { .panel-pad { padding: 20px; } }

.press { transition: transform var(--dur-1) var(--ease-out); }
.press:active { transform: scale(.95); }

/* ---------- 轮播进度 ---------- */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); pointer-events: none; }
.slide[data-on="true"] { opacity: 1; pointer-events: auto; }
.slide img, .slide .cover { transition: transform var(--dur-2) var(--ease-out); }
.carousel:hover .slide[data-on="true"] .cover { transform: scale(1.025); }
.bar { flex: 1 1 0%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.bar[data-on="true"] > i { animation: fill var(--dwell, 6s) linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ---------- 发布文案滚筒 ---------- */
.roller { position: relative; height: 1.25rem; width: 3.75rem; overflow: hidden; text-align: left; line-height: 1.25rem; }
.roller > span { display: flex; flex-direction: column; transition: transform var(--dur-3) var(--ease-out); }
.roller > span > span { height: 1.25rem; white-space: nowrap; }

/* ---------- 揭示 ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, 14px, 0);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 移动端抽屉 ---------- */
[data-drawer-root] { visibility: hidden; opacity: 0; transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1) var(--ease-out); }
[data-drawer-root][data-open="true"] { visibility: visible; opacity: 1; }
.drawer { transform: translateX(-100%); transition: transform var(--dur-1) var(--ease-out); }
.drawer[data-open="true"] { transform: none; }

/* 会员卡噪点纹理 */
.noise { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>"); }

.menu { transform-origin: top right; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.menu[data-open="false"] { opacity: 0; transform: scale(.96); pointer-events: none; }

/* ---------- 子页面通用组件 ---------- */
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.page-sub { font-size: 13px; color: var(--text-faint); }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
.crumb a:hover { color: var(--brand-primary-hover); }

.tabbar { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--border-line); overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button { padding: 10px 0; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.tabbar button:hover { color: var(--text-strong); }
.tabbar button[data-active="true"] { color: var(--text-strong); font-weight: 600; border-color: var(--brand-primary); }

[data-panel].hidden { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); white-space: nowrap; }
.btn-brand { background: var(--brand-primary); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-primary-hover); }
.btn-dark { background: var(--text-strong); color: var(--surface); }
.btn-dark:hover { opacity: .88; }
.btn-soft { background: var(--surface-muted); color: var(--text-base); }
.btn-soft:hover { background: var(--surface-soft); }
.btn-line { border: 1px solid var(--border-line); color: var(--text-base); background: var(--surface); }
.btn-line:hover { border-color: var(--brand-primary); color: var(--brand-primary-hover); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* 标签胶囊 */
.badge-soft { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-soft); color: var(--text-muted); font-size: 11px; line-height: 1; }
.badge-brand { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--brand-primary-soft); color: var(--brand-primary-hover); font-size: 11px; line-height: 1; font-weight: 600; }
.badge-paid { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid #fff; background: var(--brand-primary-hover); color: var(--on-brand); font-size: 11px; line-height: 1; font-weight: 600; }

/* 榜单行 */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-3); transition: background-color var(--dur-1) var(--ease-out); }
.rank-row:hover { background: var(--surface-muted); }
.rank-no { width: 24px; flex: none; text-align: center; font-size: 13px; font-weight: 800; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rank-no.top { color: var(--brand-primary-hover); }
.trend { font-size: 11px; font-variant-numeric: tabular-nums; }
.trend-up { color: var(--brand-primary-hover); }
.trend-down { color: #e40014; }
.trend-flat { color: var(--text-faint); }

/* 单集 / 列表行 */
.ep-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-line); transition: background-color var(--dur-1) var(--ease-out); }
.ep-row:last-child { border-bottom: none; }

/* 波形 */
.wave { display: flex; align-items: flex-end; gap: 2px; height: 52px; }
.wave i { width: 3px; border-radius: 999px; background: var(--text-faint); opacity: .5; transition: background-color var(--dur-1) var(--ease-out); }
.wave i.on { background: var(--brand-primary); opacity: 1; }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.input, .textarea, .select {
    width: 100%; border: 1px solid var(--border-line); background: var(--surface);
    color: var(--text-strong); border-radius: var(--r-2); padding: 10px 12px; font-size: 13.5px;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input { height: 40px; }
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-ghost); }

/* 价格卡 */
.price-card { border: 1px solid var(--border-line); border-radius: var(--r-3); padding: 16px; background: var(--surface); position: relative; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.price-card:hover { border-color: var(--brand-primary); box-shadow: var(--sh-2); }
.price-card.on { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary-soft), var(--sh-2); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--border-line); padding: 12px 0; }
.faq details:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-faint); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.7; }

/* 表格 */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-line); }
.data-table th { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.data-table tbody tr:hover { background: var(--surface-muted); }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 0; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px; font-size: 13px; color: var(--text-muted); border: 1px solid transparent; }
.pager a:hover { background: var(--surface-muted); color: var(--text-strong); }
.pager .on { background: var(--text-strong); color: var(--surface); font-weight: 600; }
.pager .off { opacity: .45; pointer-events: none; }

/* 提示条 */
.toast {
    position: fixed; left: 50%; bottom: 88px; z-index: 90; transform: translate(-50%, 8px);
    background: var(--text-strong); color: var(--surface); font-size: 13px;
    padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    max-width: calc(100vw - 32px); text-align: center;
}
.toast[data-on="true"] { opacity: .96; transform: translate(-50%, 0); }

/* 测试导航条 */
.testnav { border: 1px dashed var(--border-line); border-radius: var(--r-3); padding: 8px 12px; margin-bottom: 12px; }
.testnav .lbl { font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: .04em; }
.testnav a { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.testnav a:hover { color: var(--brand-primary-hover); }
.testnav a[aria-current="page"] { color: var(--text-strong); font-weight: 600; }

/* 点赞态 */
[data-like].liked { color: var(--brand-primary-hover); }
[data-like].liked svg { fill: currentColor; }

/* 空状态 */
.empty { padding: 48px 20px; text-align: center; }
.empty .e-ico { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); color: var(--text-faint); }
.empty h3 { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.empty p { font-size: 13px; color: var(--text-faint); margin-top: 4px; }

/* 音频进度条 */
.progress { height: 6px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--brand-primary); }

/* ---------- 排版：参考 Apple 站字阶（SF 字体栈 / 大标题紧字距 / 灰阶层级） ---------- */
body {
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-feature-settings: "kern";
    letter-spacing: -.005em;
    line-height: 1.5;
}
h1, h2, h3 {
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    letter-spacing: -.018em; line-height: 1.15;
}
.page-title { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
@media (max-width: 640px) { .page-title { font-size: 26px; letter-spacing: -.02em; } }
.page-sub { font-size: 15px; line-height: 1.5; letter-spacing: -.008em; }
.feed-card h3, .podcast-grid h3 { font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.btn { font-size: 14px; font-weight: 500; letter-spacing: -.008em; }
.side-item { font-size: 15px; letter-spacing: -.008em; }
.channel-pill { font-size: 14px; letter-spacing: -.008em; }
.tabbar button { font-size: 15px; letter-spacing: -.008em; }
.rail-t { font-size: 13.5px; letter-spacing: -.006em; }
.ep-row a span { letter-spacing: -.006em; }
.cover__glyph { letter-spacing: -.02em; }
article.panel .space-y-3 p { font-size: 15.5px; line-height: 1.75; letter-spacing: -.008em; }

/* ---------- 参考站子页面结构：返回 / 主题卡 / 右栏 / 表情回应 ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); transition: color var(--dur-1) var(--ease-out); }
.back:hover { color: var(--text-strong); }

.theme-card { position: relative; display: block; flex: none; width: 78vw; max-width: 360px; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r-3); border: 1px solid var(--border-line); background: var(--surface-muted); }
@media (min-width: 640px) { .theme-card { width: 320px; } }
@media (min-width: 1024px) { .theme-card { width: 360px; } }
.theme-card .tc-cover { position: absolute; inset: 0; }
.theme-card .tc-shade { position: absolute; inset: 0; background: rgba(0,0,0,.22); }
.theme-card .tc-label { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 2rem); display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.2); padding: 4px 12px; font-size: 12px; font-weight: 600; color: #fff; backdrop-filter: blur(2px); }
.theme-card .tc-title { position: absolute; inset-inline: 16px; bottom: 16px; display: block; font-size: 18px; font-weight: 600; line-height: 1.2; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.theme-card .tc-sub { margin-top: 4px; display: block; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.8); }
.theme-card:hover .tc-cover { transform: scale(1.02); }
.theme-card .tc-cover { transition: transform var(--dur-2) var(--ease-out); }

.rail-link { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border-line); }
.rail-link:last-child { border-bottom: none; }
.rail-link:hover .rail-t { color: var(--brand-primary-hover); }
.rail-t { font-size: 13px; line-height: 1.35; color: var(--text-base); }
.rail-m { font-size: 11px; color: var(--text-faint); }

.reaction { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-line); background: var(--surface); font-size: 12px; color: var(--text-muted); transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.reaction:hover { border-color: var(--brand-primary); background: var(--brand-primary-ghost); }
.reaction[data-on="true"] { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-hover); }

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--brand-primary-hover); }
.stars svg { width: 14px; height: 14px; fill: currentColor; }

@media (min-width: 1024px) {
    .rail-panel { display: block !important; }
    .rail-tabs { display: none !important; }
}

/* ---------- 会员页（ui-design-system 优化：8pt 网格 / display 字阶 / radiogroup 套餐 / 吸底 CTA） ---------- */
.mem-hero { background: linear-gradient(150deg, var(--premium-1) 0%, var(--premium-2) 58%, var(--premium-3) 100%); }
html.dark .mem-hero { background: linear-gradient(150deg, var(--premium-1) 0%, var(--premium-2) 58%, var(--premium-3) 100%); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(2px); }
.mem-display { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; font-weight: 600; letter-spacing: -.028em; color: #fff; }
.mem-price { margin-top: 4px; font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.mem-price-unit { font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.72); }
.mem-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; backdrop-filter: blur(2px); }
.btn-light { background: #fff; color: #3b2d1d; height: 44px; padding: 0 22px; font-size: 15px; }
.btn-light:hover { filter: brightness(.96); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.45); color: #fff; height: 44px; padding: 0 20px; font-size: 15px; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }
.sec-title { font-size: 17px; font-weight: 600; letter-spacing: -.018em; color: var(--text-strong); }

.plan-card {
    position: relative; display: flex; min-height: 132px; flex-direction: column; gap: 4px;
    text-align: left; padding: 16px; border-radius: var(--r-3); cursor: pointer;
    border: 1px solid var(--border-line); background: var(--surface);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.plan-card:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--sh-2); }
.plan-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.plan-card[aria-checked="true"] { border-color: var(--brand-primary); background: var(--brand-primary-ghost); box-shadow: inset 0 0 0 1px var(--brand-primary); transform: none; }
.plan-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
.plan-price { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.plan-meta { font-size: 12px; color: var(--text-muted); }
.plan-sub { margin-top: auto; font-size: 11px; color: var(--text-faint); }
.plan-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--brand-primary); color: var(--on-brand); font-size: 10px; font-weight: 600; }
.plan-check { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border-line); display: grid; place-items: center; transition: var(--dur-1) var(--ease-out); }
.plan-card[aria-checked="true"] .plan-check { border-color: var(--brand-primary); background: var(--brand-primary); }
.plan-card[aria-checked="true"] .plan-check::after { content: ''; width: 6px; height: 3px; border-left: 1.5px solid var(--on-brand); border-bottom: 1.5px solid var(--on-brand); transform: rotate(-45deg) translate(1px, -1px); }

.benefit { padding: 16px; border-radius: var(--r-3); border: 1px solid var(--border-line); background: var(--surface); transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.benefit:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--sh-2); }
.benefit .b-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--brand-primary-soft); color: var(--brand-primary-hover); }
.benefit .b-t { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: -.012em; color: var(--text-strong); }
.benefit .b-d { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }

.cmp-yes { color: var(--brand-primary-hover); font-weight: 700; }
.cmp-no { color: var(--text-faint); }

.mem-cta {
    position: fixed; left: 0; right: 0; z-index: 46;
    bottom: calc(var(--feed-mobile-bottom) + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border-line);
    box-shadow: var(--sh-3-up);
}
@media (min-width: 768px) { .mem-cta { display: none; } }

.faq .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
.faq details[open] .faq-body { grid-template-rows: 1fr; }
.faq .faq-body > p { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .feed-card:hover, .press:active, .side-item:active, .rail-link:active, .reaction:active,
    .menu button:active, .pager a:active, .tabbar button:active, [data-like]:active,
    .pb-play:active, .pb-ico:active, .pod-card:active .pod-card__art { transform: none; }
    .bar[data-on="true"] > i { animation-duration: var(--dwell, 6s); }
}

/* ============================================================
   全站底部播放器（真实音频 / 跨页续播）
   ============================================================ */
:root { --player-h: 76px; --player-bottom: 0px; }

.player-bar {
    position: fixed; left: 0; right: 0; bottom: var(--player-bottom); z-index: 58;
    display: none; align-items: center; gap: 14px;
    height: var(--player-h); padding: 0 14px;
    background: var(--surface); border-top: 1px solid var(--border-line);
    box-shadow: var(--sh-3-up);
}
body.player-on .player-bar { display: flex; }
body.player-on { padding-bottom: calc(var(--player-h) + var(--player-bottom) + 8px); }
body.player-on .mem-cta { bottom: calc(var(--feed-mobile-bottom) + var(--player-h) + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
    .player-bar {
        left: 50%; right: auto; transform: translateX(-50%);
        width: min(1180px, calc(100vw - 32px)); height: var(--player-h);
        bottom: 16px; border: 1px solid var(--border-line); border-radius: var(--r-3);
        box-shadow: var(--sh-3);
    }
    body.player-on { padding-bottom: calc(var(--player-h) + 40px); }
}

/* 左：封面 + 文案 */
.pb-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.pb-cover { width: 44px; height: 44px; border-radius: var(--r-2); flex: none; }
.pb-cover .cover__glyph { font-size: 15px; }
.pb-meta { min-width: 0; }
.pb-title { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.006em; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 中：控制 + 进度 */
.pb-center { display: flex; align-items: center; gap: 12px; flex: 2 1 0; min-width: 0; }
.pb-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.pb-ico { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--text-muted); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.pb-ico:hover { background: var(--surface-muted); color: var(--text-strong); }
.pb-ico svg { width: 16px; height: 16px; }
.pb-ico[disabled] { opacity: .35; pointer-events: none; }
.pb-play { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-primary); color: var(--on-brand); flex: none; }
.pb-play:hover { background: var(--brand-primary-hover); }
.pb-play svg { width: 17px; height: 17px; }
.pb-seek { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.pb-time { font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--text-faint); width: 36px; flex: none; text-align: center; }

/* 右：倍速 / 音量 / 关闭 */
.pb-right { display: flex; align-items: center; gap: 2px; flex: none; }
.pb-rate { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-vol { display: flex; align-items: center; gap: 4px; }
.pb-vol .pb-range { width: 68px; }

/* 进度条 / 音量条 */
.pb-range {
    -webkit-appearance: none; appearance: none;
    flex: 1 1 0; min-width: 0; height: 4px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(to right, var(--brand-primary) 0 calc(var(--p, 0) * 100%), var(--surface-soft) calc(var(--p, 0) * 100%) 100%);
}
.pb-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 999px;
    background: var(--brand-primary); box-shadow: 0 0 0 3px var(--surface); opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
}
.pb-range:hover::-webkit-slider-thumb, .pb-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.pb-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 999px; background: var(--brand-primary); box-shadow: 0 0 0 3px var(--surface); }
.pb-range::-moz-range-track { background: transparent; }

/* 加载中 */
.player-bar[data-busy="true"] .pb-play { opacity: .55; pointer-events: none; }
.player-bar[data-err="true"] { border-top-color: #d65a47; }
.player-bar[data-err="true"] .pb-sub { color: #d65a47; }

/* 触发按钮接管态 */
.pb-on { background: var(--brand-primary) !important; color: var(--on-brand) !important; }

/* 移动端：进度条换行到第二排，收起音量 */
@media (max-width: 767px) {
    .player-bar { flex-wrap: wrap; align-content: center; gap: 4px 10px; padding: 6px 12px; }
    .pb-center { order: 3; flex-basis: 100%; gap: 8px; }
    .pb-vol { display: none; }
    .pb-right { margin-left: auto; }
    .pb-cover { width: 36px; height: 36px; }
    .pb-cover .cover__glyph { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-ico, .pb-range::-webkit-slider-thumb { transition: none; }
}

/* ============================================================
   专辑网格：参考 Apple Podcasts 网页版
   无卡片外框，方形封面 + 标题 + 主播名；宽屏每行 6 个
   ============================================================ */
.pod-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}
@media (min-width: 560px)  { .pod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .pod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pod-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .pod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; } }

.pod-card { display: block; min-width: 0; cursor: pointer; }
.pod-card__art {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
    border-radius: var(--r-3);
    box-shadow: var(--sh-1);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.pod-card__art .cover__glyph { font-size: clamp(26px, 2.2vw, 38px); }
.pod-card:hover .pod-card__art,
.pod-card:focus-visible .pod-card__art {
    transform: scale(1.025);
    box-shadow: var(--sh-2);
}
.pod-card__t {
    margin-top: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.32;
    letter-spacing: -.012em; color: var(--text-strong);
}
.pod-card__s {
    margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--text-faint);
}
.pod-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; border-radius: var(--r-1); }

/* 有右栏的窄容器沿用原有密度，不受本次改动影响 */
.podcast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }

@media (prefers-reduced-motion: reduce) {
    .pod-card__art { transition: none; }
    .pod-card:hover .pod-card__art { transform: none; }
}

/* 专辑卡：封面角标（评分 / 播放量）与简介行 */
.pod-card__chips {
    position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.pod-chip {
    display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px;
    border-radius: 999px; font-size: 10.5px; line-height: 1; color: var(--text-strong);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: var(--sh-1);
}
html.dark .pod-chip { background: rgba(24, 24, 28, .58); color: var(--text-base); }
.pod-chip svg { width: 10px; height: 10px; flex: none; }
.pod-card__d { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

/* ============================================================
   用户主页：hero 横幅 / 数据块 / 收听概览 / sticky 二级导航
   ============================================================ */
:root {
    --noise-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

.profile-hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-line); border-radius: var(--r-3); background: var(--surface);
    box-shadow: var(--sh-1);
}
.ph-banner {
    height: 104px; position: relative; isolation: isolate;
    background:
        radial-gradient(120% 150% at 14% -20%, color-mix(in srgb, var(--b) 82%, #fff) 0%, transparent 64%),
        linear-gradient(112deg, var(--a) 0%, color-mix(in srgb, var(--a) 48%, var(--b)) 54%, var(--b) 100%);
}
.ph-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--noise-tex); opacity: .07; mix-blend-mode: overlay;
}
@media (min-width: 768px) { .ph-banner { height: 132px; } }

.ph-body { position: relative; padding: 0 16px 20px; }
@media (min-width: 768px) { .ph-body { padding: 0 24px 24px; } }
.ph-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: -44px; }
@media (min-width: 768px) { .ph-top { margin-top: -52px; gap: 20px; } }
.ph-avatar {
    width: 88px; height: 88px; border-radius: 999px; flex: none;
    border: 4px solid var(--surface); box-shadow: var(--sh-2);
}
.ph-avatar .cover__glyph { font-size: 30px; }
@media (min-width: 768px) { .ph-avatar { width: 96px; height: 96px; } .ph-avatar .cover__glyph { font-size: 32px; } }

.ph-id { min-width: 0; flex: 1 1 240px; padding-top: 4px; }
.ph-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-bio { margin-top: 8px; max-width: 60ch; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.ph-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ph-acts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-end; width: 100%; }
@media (min-width: 768px) { .ph-acts { width: auto; margin-left: auto; } }

/* 徽章带图标 */
.badge-brand svg, .badge-soft svg { width: 11px; height: 11px; flex: none; }

/* 数据块 */
.ph-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-line);
}
.ph-stat { min-width: 0; }
.ph-stat b { display: block; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-strong); transition: color var(--dur-1) var(--ease-out); }
.ph-stat span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .01em; color: var(--text-muted); }
@media (min-width: 768px) {
    .ph-stats { display: flex; flex-wrap: wrap; gap: 0; }
    .ph-stat { flex: 1 1 0; padding: 0 16px; border-left: 1px solid var(--border-line); }
    .ph-stat:first-child { padding-left: 0; border-left: 0; }
}
.ph-stat:hover b { color: var(--brand-primary-hover); }

/* 区块标题统一层级 */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.sec-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
.sec-m { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 近 12 个月收听柱状 */
.spark { display: flex; align-items: flex-end; gap: 6px; height: 104px; margin-top: 16px; }
.spark .sp { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.spark .sp > i {
    display: block; width: 100%; height: calc(var(--v) * 76px); min-height: 3px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 42%, transparent));
    transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); transform-origin: bottom;
}
.spark .sp:hover > i { filter: brightness(1.15); transform: scaleY(1.03); }
.spark .sp.now > i { background: linear-gradient(180deg, var(--brand-primary-hover), var(--brand-primary)); }
.spark em { display: block; margin-top: 8px; font-style: normal; font-size: 10px; color: var(--text-muted); text-align: center; white-space: nowrap; }
.spark .sp.now em { color: var(--text-strong); font-weight: 600; }

/* 常听品类进度 */
.cat { display: grid; grid-template-columns: 84px 1fr 64px; align-items: center; gap: 12px; margin-top: 12px; }
.cat-n { font-size: 12.5px; color: var(--text-base); }
.cat-track { height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.cat-track i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--brand-primary); transform-origin: left; animation: cat-in var(--dur-3) var(--ease-out) both; }
.cat-v { font-size: 11.5px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes cat-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* sticky 二级导航 */
.tabbar--sticky {
    position: sticky; top: var(--feed-mobile-top); z-index: 30;
    background: var(--surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .tabbar--sticky { top: var(--app-nav-height); } }

/* 面板内的专辑网格：最多 4 列，正好铺满一行 */
.pod-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .pod-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pod-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
    .cat-track i { animation: none; }
    .spark .sp:hover > i { transform: none; }
}

/* 窄屏：柱状与品类条收紧 */
@media (max-width: 640px) {
    .spark { gap: 4px; height: 88px; }
    .spark .sp > i { height: calc(var(--v) * 62px); }
    .spark em { font-size: 9px; }
    .cat { grid-template-columns: 72px 1fr 56px; gap: 8px; }
    .ph-stat b { font-size: 19px; }
}

/* ============================================================
   P0 补充：文字层级对齐（含展示级）
   ============================================================ */
:root { --fs-display: 32px; }
.page-title { font-size: var(--fs-display); }
@media (max-width: 640px) { .page-title { font-size: var(--fs-6); } }
.page-sub { font-size: var(--fs-4); }
.crumb { font-size: var(--fs-2); }
.side-item { font-size: var(--fs-5); }
.channel-pill { font-size: var(--fs-3); }
.tabbar button { font-size: var(--fs-4); }
.rail-t { font-size: var(--fs-3); }
.btn { font-size: var(--fs-3); }
.btn-sm { font-size: var(--fs-2); }
article.panel .space-y-3 p { font-size: var(--fs-4); }

/* ============================================================
   P1：交互状态补全
   ============================================================ */
.side-item, .rail-link, .reaction, .tabbar button, .pb-play, .pb-ico,
[data-like], .menu button, .pager a, .ep-row {
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

/* 按压反馈 */
.side-item:active, .rail-link:active, .reaction:active, .menu button:active,
.pager a:active, .tabbar button:active, [data-like]:active { transform: scale(.96); }
.pb-play:active { transform: scale(.92); }
.pb-ico:active { transform: scale(.9); }

/* 悬停与焦点补全 */
[data-like]:hover { color: var(--brand-primary-hover); }
[data-like].liked:hover { color: var(--brand-primary-hover); opacity: .85; }
.rail-link { padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-2); }
.rail-link:hover { background: var(--surface-muted); }
.ep-row { border-radius: var(--r-2); }
.ep-row:hover, .ep-row:focus-within { background: var(--surface-muted); }
.ep-row:focus-within { box-shadow: inset 0 0 0 1px var(--brand-primary-soft); }
.tabbar button:active { color: var(--brand-primary); }

/* 禁用态 */
.btn:disabled, .btn[disabled], [data-like][aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 焦点环：两种主题下都保证可见 */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cover:focus-visible, .pod-card:focus-visible, .feed-card:focus-visible { outline-offset: 4px; }

/* ============================================================
   P2：会员专属强调色（premium）与开发导航开关
   premium 只用于会员语境，不参与主色体系
   ============================================================ */
:root { --premium-1: #2c2118; --premium-2: #5a4230; --premium-3: #90693b; --on-premium: #ffffff; }
html.dark { --premium-1: #17120e; --premium-2: #33261a; --premium-3: #6b4e2c; }
.premium-surface {
    background: linear-gradient(150deg, var(--premium-1) 0%, var(--premium-2) 58%, var(--premium-3) 100%);
    color: var(--on-premium);
}

/* 开发用导航：默认隐藏，URL 加 ?devnav=1 显示 */
.testnav, .devnav-only { display: none; }
html[data-devnav="on"] .testnav { display: block; }
html[data-devnav="on"] .devnav-only { display: inline; }

/* 展示级响应式字号（不依赖 Tailwind 任意值） */
@media (min-width: 768px) { .md-t6 { font-size: var(--fs-6); } }

/* ---------- 真实数据接入：封面图 / 互动态 ---------- */
.cover__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cover__img + .cover__glyph { display: none; }
[data-act].liked { color: var(--brand-primary-hover); }
[data-act].liked svg { fill: currentColor; }
[data-act].t-on { border-color: var(--brand-primary); color: var(--brand-primary); }
.pb-cover { position: relative; }

/* 深色模式：真实照片（封面/帖子配图/头像）降暗，贴合整体明度 */
html.dark .cover__img { filter: brightness(.85) saturate(.97); }
html.dark .post-img { filter: brightness(.85); }

/* 链接式页签（榜单周期/维度）与按钮式同构 */
.tabbar a { padding: 10px 0; font-size: var(--fs-4); color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.tabbar a:hover { color: var(--text-strong); }
.tabbar a.tab-on { color: var(--text-strong); font-weight: 600; border-color: var(--brand-primary); }

/* ---------- 登录页（复刻 chanpinpai 分屏式） ---------- */
.auth-tab { flex: 1; height: 100%; border-radius: 9999px; font-size: var(--fs-3); color: var(--text-muted); transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.auth-tab:hover { color: var(--text-strong); }
.auth-tab[aria-selected="true"] { background: var(--surface); color: var(--text-strong); font-weight: 600; box-shadow: var(--sh-1); }
.auth-input { width: 100%; height: 44px; border-radius: 9999px; background: var(--surface-muted); padding: 0 16px; font-size: var(--fs-3); color: var(--text-strong); border: 1px solid transparent; outline: none; transition: border-color var(--dur-1), background var(--dur-1); }
.auth-input::placeholder { color: var(--text-faint); }
.auth-input:hover { background: var(--surface-soft); }
.auth-input:focus { border-color: var(--brand-primary); background: var(--surface); }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; height: 32px; width: 32px; border-radius: 9999px; color: var(--text-muted); transition: background var(--dur-1), color var(--dur-1); }
.auth-eye:hover { background: var(--surface-soft); color: var(--text-strong); }
.auth-eye svg { width: 16px; height: 16px; }
.auth-check { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--brand-primary); }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 9999px; background: var(--brand-primary); color: var(--on-brand); font-size: var(--fs-3); font-weight: 600; transition: background var(--dur-1), opacity var(--dur-1); }
.auth-submit:hover { background: var(--brand-primary-hover); }
.auth-ghost { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 9999px; background: var(--surface-muted); color: var(--text-strong); font-size: var(--fs-3); transition: background var(--dur-1); }
.auth-ghost:hover { background: var(--surface-soft); }
.auth-ghost svg { width: 16px; height: 16px; }
.auth-sns { display: grid; place-items: center; height: 44px; width: 44px; border-radius: 9999px; background: var(--surface-muted); color: var(--text-strong); transition: background var(--dur-1), color var(--dur-1); }
.auth-sns:hover { background: var(--surface-soft); color: var(--brand-primary); }
.auth-sns svg { width: 20px; height: 20px; }

/* 滑块验证 */
.slcap__track { position: relative; height: 48px; border-radius: 9999px; background: var(--surface-muted); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.slcap__gap { position: absolute; top: 8px; left: 60%; width: 32px; height: 32px; border-radius: 10px; border: 2px dashed rgb(var(--text-faint-rgb) / .9); transition: border-color var(--dur-1); }
.slcap__piece { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-primary); opacity: .85; box-shadow: var(--sh-1); }
.slcap__knob { position: absolute; top: 4px; left: 4px; height: 40px; width: 40px; border-radius: 9999px; background: var(--surface); box-shadow: var(--sh-1); display: grid; place-items: center; color: var(--text-muted); cursor: grab; z-index: 2; touch-action: none; }
.slcap__knob svg { width: 18px; height: 18px; }
.slcap__hint { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 44px; font-size: 13px; color: var(--text-faint); pointer-events: none; z-index: 1; transition: opacity var(--dur-1); }
.slcap--drag .slcap__knob { cursor: grabbing; }
.slcap--ok .slcap__gap { border-style: solid; border-color: var(--brand-primary); }
.slcap--ok .slcap__knob { color: var(--brand-primary); cursor: default; }
.slcap--ok .slcap__hint { color: var(--brand-primary); }
.slcap--bad .slcap__track { animation: slcap-shake .4s var(--ease-out); }
.slcap--bad .slcap__gap { border-color: #e5484d; }
@keyframes slcap-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* 右侧动态胶囊跑马灯 */
@keyframes qsr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qsr-marquee { display: flex; width: max-content; gap: .75rem; animation: qsr-marquee 48s linear infinite; }
.qsr-marquee--rev { animation-direction: reverse; }
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@media (prefers-reduced-motion: reduce) { .qsr-marquee { animation: none; } }

/* ---------- 榜单页（复刻 chanpinpai ranking 版式） ---------- */
.chan-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 38px; padding: 0 14px; border-radius: 9999px; font-size: var(--fs-3); color: var(--text-base); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.chan-pill:hover { background: var(--surface-muted); color: var(--text-strong); }
.chan-pill .ic { width: 15px; height: 15px; flex-shrink: 0; }
.chan-pill-active, .chan-pill-active:hover { background: var(--brand-primary); color: var(--on-brand); font-weight: 600; }
.chan-dot { width: 4px; height: 4px; border-radius: 9999px; background: var(--surface-soft); flex-shrink: 0; margin: 0 6px; }
.nav-btn { display: grid; place-items: center; height: 38px; width: 38px; flex-shrink: 0; border-radius: 9999px; background: var(--surface-muted); color: var(--text-base); transition: background-color var(--dur-1); }
.nav-btn:hover { background: var(--surface-soft); }
.nav-btn .ic { width: 16px; height: 16px; }
.nav-btn.is-off { opacity: .45; }
.nav-pill { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 9999px; background: var(--surface-muted); padding: 0 16px; font-size: var(--fs-3); color: var(--text-base); }
.nav-pill .ic { width: 15px; height: 15px; flex-shrink: 0; }
.rank-card { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); }
.rank-card:hover { background: var(--surface-muted); box-shadow: none; }
.side-cta { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border-radius: 9999px; background: var(--brand-primary); padding: 10px 16px; font-size: var(--fs-3); font-weight: 600; color: var(--on-brand); transition: background-color var(--dur-1); }
.side-cta:hover { background: var(--brand-primary-hover); }
.side-cta .ic { width: 16px; height: 16px; }
.side-shuffle { display: grid; place-items: center; height: 28px; width: 28px; flex-shrink: 0; border-radius: 9999px; color: var(--text-muted); transition: background-color var(--dur-1), color var(--dur-1); }
.side-shuffle:hover { background: var(--surface-muted); color: var(--text-strong); }
.side-shuffle .ic { width: 15px; height: 15px; }

/* ---------- 单集操作条弹窗（举报 / 删除确认） ---------- */
.qsr-mask { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(var(--text-strong-rgb) / .4); backdrop-filter: blur(2px); padding: 16px; }
.qsr-modal { width: 100%; max-width: 400px; box-shadow: var(--sh-3); max-height: 82vh; overflow-y: auto; }

/* ---------- 帖子图片灯箱 ---------- */
img[data-lb] { cursor: zoom-in; }
.lb-mask { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(6, 6, 8, .92); padding: 20px; }
html.lb-lock, html.lb-lock body { overflow: hidden; }
.lb-img { max-width: min(94vw, 1280px); max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); background: var(--surface-muted); }
.lb-x { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; height: 40px; width: 40px; border-radius: 9999px; background: rgba(255, 255, 255, .12); color: #fff; transition: background var(--dur-1); }
.lb-x:hover { background: rgba(255, 255, 255, .24); }
.lb-x svg { width: 20px; height: 20px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; height: 44px; width: 44px; border-radius: 9999px; background: rgba(255, 255, 255, .12); color: #fff; transition: background var(--dur-1); }
.lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-nav svg { width: 22px; height: 22px; }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-cap { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 9999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; }

/* ---------- 发帖图集上传 ---------- */
.up-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.up-cell { position: relative; width: 96px; height: 96px; border-radius: var(--r-2); overflow: hidden; background: var(--surface-muted); border: 1px solid var(--border-line); cursor: grab; }
.up-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.up-cell:active { cursor: grabbing; }
.up-del { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; height: 20px; width: 20px; border-radius: 9999px; background: rgba(6, 6, 8, .55); color: #fff; font-size: 13px; line-height: 1; transition: background var(--dur-1); }
.up-del:hover { background: #e40014; }
.up-tag { position: absolute; left: 3px; top: 3px; padding: 2px 7px; border-radius: 9999px; background: var(--brand-primary); color: var(--on-brand); font-size: 10px; font-weight: 600; }
.up-no { position: absolute; left: 3px; top: 3px; padding: 2px 6px; border-radius: 9999px; background: rgba(6, 6, 8, .45); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.up-add { display: grid; place-items: center; align-content: center; gap: 2px; width: 96px; height: 96px; border-radius: var(--r-2); border: 1.5px dashed var(--border-line); background: var(--surface-muted); color: var(--text-muted); cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); }
.up-add:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--surface-soft); }
.up-add span { font-size: 22px; line-height: 1; }
.up-add i { font-style: normal; font-size: 11px; }
.up-add[hidden] { display: none; }

/* ---------- 字体与字距精修（光学字号阶梯） ---------- */
:root {
    --ls-1: .02em;   --lh-1: 1.5;   /* 11px 元信息：小字略疏 */
    --ls-2: .012em;  --lh-2: 1.55;  /* 12.5px 次要 */
    --ls-3: .002em;  --lh-3: 1.65;  /* 14px 正文：中文呼吸感 */
    --ls-4: -.008em; --lh-4: 1.5;   /* 16px 按钮/列表 */
    --ls-5: -.018em; --lh-5: 1.3;   /* 20px 小标题 */
    --ls-6: -.024em; --lh-6: 1.22;  /* 26px 区块标题 */
}
.t-1 { letter-spacing: var(--ls-1); line-height: var(--lh-1); }
.t-2 { letter-spacing: var(--ls-2); line-height: var(--lh-2); }
.t-3 { letter-spacing: var(--ls-3); line-height: var(--lh-3); }
.t-4 { letter-spacing: var(--ls-4); line-height: var(--lh-4); }
.t-5 { letter-spacing: var(--ls-5); line-height: var(--lh-5); }
.t-6 { letter-spacing: var(--ls-6); line-height: var(--lh-6); }
.page-title { letter-spacing: -.028em; line-height: 1.18; }
.side-item { letter-spacing: -.015em; }
.btn, .channel-pill, .nav-pill, .auth-tab, .chan-pill { letter-spacing: -.006em; }
.btn { font-weight: 600; }
.pod-card__t, .rail-t, .feed-card h3, .post-card__t { letter-spacing: -.012em; }
.page-sub { letter-spacing: -.01em; }
input, textarea, select, button { font: inherit; }
.auth-input, .input, .textarea, .select { letter-spacing: 0; }

/* ---------- 视觉精修：轻阴影 / 细边框 / 留白 ---------- */
:root {
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .06);
    --sh-2: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 22px -8px rgba(16, 24, 40, .12);
    --sh-3: 0 4px 10px rgba(16, 24, 40, .06), 0 20px 44px -14px rgba(16, 24, 40, .20);
}
.panel-pad { padding: 18px; }
@media (min-width: 768px) { .panel-pad { padding: 24px; } }
.masonry-feed { column-gap: 10px; }
.masonry-feed > * { margin-bottom: 10px; }
@media (min-width: 768px) {
    .masonry-feed { column-gap: 14px; }
    .masonry-feed > * { margin-bottom: 14px; }
}
.feed-card { border: 1px solid var(--border-line); }
.pod-card:hover .pod-card__art,
.pod-card:focus-visible .pod-card__art { transform: translateY(-3px); }

/* ---------- Now playing：克制的呼吸感 ---------- */
.pb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: middle; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.pb-eq i { width: 2.5px; height: 4px; border-radius: 2px; background: var(--brand-primary); transform-origin: bottom; }
.player-bar[data-playing="true"] .pb-eq { opacity: .85; }
.player-bar[data-playing="true"] .pb-eq i { animation: pb-breathe 2.6s ease-in-out infinite; }
.player-bar[data-playing="true"] .pb-eq i:nth-child(2) { animation-duration: 3.4s; animation-delay: .4s; }
.player-bar[data-playing="true"] .pb-eq i:nth-child(3) { animation-duration: 3s; animation-delay: .9s; }
@keyframes pb-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.4); } }
.pb-play { position: relative; }
.pb-play::after { content: ''; position: absolute; inset: -3px; border-radius: 9999px; border: 1px solid var(--brand-primary); opacity: 0; pointer-events: none; }
.player-bar[data-playing="true"] .pb-play::after { animation: pb-ring 3.6s ease-in-out infinite; }
@keyframes pb-ring { 0%, 100% { opacity: 0; transform: scale(.94); } 50% { opacity: .3; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .player-bar[data-playing="true"] .pb-eq i,
    .player-bar[data-playing="true"] .pb-play::after { animation: none; }
    .pb-eq { opacity: .85; }
    .pod-card:hover .pod-card__art { transform: none; }
}

/* ---------- 创作中心（多区） ---------- */
.cc-nav-item { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 9999px; font-size: var(--fs-3); color: var(--text-base); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.cc-nav-item:hover { background: var(--surface-muted); color: var(--text-strong); }
.cc-nav-item .ic { width: 17px; height: 17px; flex-shrink: 0; }
.cc-nav-item.is-on { background: var(--surface-muted); color: var(--text-strong); font-weight: 600; }
.cc-act { transition: border-color var(--dur-1), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.cc-act:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--sh-2); }
.cc-act-go { display: grid; place-items: center; height: 30px; width: 30px; border-radius: 9999px; border: 1px solid var(--border-line); color: var(--text-faint); transition: color var(--dur-1), border-color var(--dur-1); }
.cc-act:hover .cc-act-go { color: var(--brand-primary); border-color: var(--brand-primary); }
.cc-act-go svg { width: 15px; height: 15px; }
.cc-row { transition: border-color var(--dur-1), background-color var(--dur-1); }
.cc-row:hover { border-color: var(--brand-primary); }
.cc-task { transition: border-color var(--dur-1); }
.cc-task:hover { border-color: var(--border-line); background: var(--surface); }
.cc-pts { display: inline-flex; height: 26px; align-items: center; padding: 0 12px; border-radius: 9999px; background: var(--surface-muted); font-size: var(--fs-2); font-weight: 600; color: var(--text-base); font-variant-numeric: tabular-nums; }
.cc-medal { transition: border-color var(--dur-1), transform var(--dur-2) var(--ease-out); }
.cc-medal:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.cc-set-item { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9999px; text-align: left; font-size: var(--fs-3); color: var(--text-base); transition: background-color var(--dur-1), color var(--dur-1); }
.cc-set-item:hover { background: var(--surface-muted); }
.cc-set-item.is-on { background: var(--surface-muted); color: var(--text-strong); font-weight: 600; }
.cc-switch { position: relative; width: 44px; height: 26px; border-radius: 9999px; background: var(--surface-soft); transition: background-color var(--dur-2) var(--ease-out); flex-shrink: 0; }
.cc-switch::after { content: ''; position: absolute; top: 3px; left: 3px; height: 20px; width: 20px; border-radius: 9999px; background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease-out); }
.cc-switch[aria-checked="true"] { background: var(--brand-primary); }
.cc-switch[aria-checked="true"]::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
    .cc-act:hover, .cc-medal:hover { transform: none; }
}

/* ---------- 创作中心：截图对齐组件 ---------- */
.cc-tab-cnt { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 9999px; background: var(--surface-soft); font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chan-pill-active .cc-tab-cnt { background: rgb(var(--surface-rgb) / .22); color: var(--on-brand); }
.cc-date-in { height: 38px; border-radius: 9999px; background: var(--surface-muted); border: 1px solid transparent; padding: 0 14px; font-size: var(--fs-2); color: var(--text-base); outline: none; color-scheme: light dark; }
.cc-date-in:focus { border-color: var(--brand-primary); }
.cc-page-btn { display: grid; place-items: center; height: 32px; width: 32px; border-radius: 9999px; color: var(--text-muted); transition: background-color var(--dur-1), color var(--dur-1); }
.cc-page-btn:hover { background: var(--surface-muted); color: var(--text-strong); }
.cc-details summary { cursor: list-item; }
.cc-details summary::-webkit-details-marker { display: none; }