/* ==========================================================================
   页面级样式：只放"线上站点特有"的布局，设计令牌与组件仍在 langsong.css
   ========================================================================== */

.fe-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* 播放条固定在视口底部，正文留出让位，避免遮住最后一行 */
  padding-bottom:84px;
}

/* 顶栏搜索框内的输入元素 */
.fe-top__search{ gap:10px }
.fe-top__search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:var(--t-14); color:var(--ink);
}
.fe-top__search input::placeholder{ color:var(--ink-4) }

.fe-top__actions .fe-logout{ display:flex; align-items:center }
.fe-logout__btn{
  font-size:var(--t-13); color:var(--ink-4); padding:4px 2px; white-space:nowrap;
}
.fe-logout__btn:hover{ color:var(--cinnabar-dp) }

.fe-upload-btn,
.fe-login-btn{ height:40px; padding:0 16px }

/* 播放条固定到底部（原型里是 sticky，线上要跨页常驻） */
.fe-player{
  position:fixed; left:0; right:0; bottom:0;
}
.fe-player[hidden]{ display:none }
.pl__track i{ will-change:background }
.pl__list-btn:hover{ color:var(--cinnabar-dp) }

/* 页脚 */
.fe-foot{
  margin-top:var(--s-16);
  border-top:1px solid var(--line);
  background:var(--paper-2);
}
.fe-foot__inner{
  padding:var(--s-8) max(var(--s-8), calc((100% - var(--w-shell)) / 2));
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  font-size:var(--t-13); color:var(--ink-3); flex-wrap:wrap;
}
.fe-foot__meta{ font-size:var(--t-12); color:var(--ink-4) }
/* 备案号是可点的外链，但不该长得像正文链接 */
.fe-foot a.fe-foot__meta{ color:var(--ink-4); text-decoration:none }
.fe-foot a.fe-foot__meta:hover{ color:var(--ink-2); text-decoration:underline }

/* ── 首页 ─────────────────────────────────────────────────────────────── */
.fe-hero__meta i,
.work__meta i{ display:inline-block }

.home-section-gap{ margin-top:var(--s-12) }

/* 首页专题卡内的楼层标签 */
.feat__badge{ z-index:2 }

/* ── 作品库列表 ───────────────────────────────────────────────────────── */
.list-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-6); padding:var(--s-8) 0 var(--s-4);
}
.list-head h1{
  font-family:var(--serif); font-size:var(--t-36); font-weight:600; letter-spacing:.02em;
}
.list-head p{ color:var(--ink-3); font-size:var(--t-14); margin-top:6px }
.list-head__count{ font-family:var(--mono); font-size:var(--t-13); color:var(--ink-4) }

.filter-bar{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-4) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.filter-bar__label{ font-size:var(--t-13); color:var(--ink-4); flex:0 0 auto }
.filter-chip{
  font-size:var(--t-14); padding:6px 14px; border-radius:var(--r-full);
  border:1px solid var(--line); color:var(--ink-2); background:var(--white);
  transition:border-color var(--dur-s), color var(--dur-s), background var(--dur-s);
}
.filter-chip:hover{ border-color:var(--ink-4) }
.filter-chip.on{
  background:var(--cinnabar-tint); border-color:var(--cinnabar); color:var(--cinnabar-dp); font-weight:600;
}
.filter-bar__spacer{ margin-left:auto }
.filter-sort{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-13); color:var(--ink-3) }
.filter-sort a{ padding:4px 8px; border-radius:var(--r-1) }
.filter-sort a.on{ color:var(--cinnabar-dp); font-weight:600; background:var(--cinnabar-tint) }

.work-rows{ margin-top:var(--s-2) }
.work-row{
  display:flex; align-items:center; gap:var(--s-5);
  padding:var(--s-5) 0; border-bottom:1px solid var(--line-soft);
}
.work-row:hover{ background:rgba(255,255,255,.6) }
.work-row__cover{
  width:96px; height:96px; border-radius:var(--r-2); flex:0 0 96px; position:relative; overflow:hidden;
}
.work-row__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(34,32,28,.28); color:#fff; opacity:0; transition:opacity var(--dur-s);
}
.work-row:hover .work-row__play{ opacity:1 }
.work-row__body{ flex:1; min-width:0 }
.work-row__title{
  font-family:var(--serif); font-size:var(--t-18); font-weight:600; line-height:1.4;
}
.work-row__title a:hover{ color:var(--cinnabar-dp) }
.work-row__summary{
  font-size:var(--t-14); color:var(--ink-3); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.work-row__meta{
  display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-3);
  font-size:var(--t-12); color:var(--ink-4); flex-wrap:wrap;
}
.work-row__meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-4) }
.work-row__side{
  flex:0 0 auto; text-align:right; font-family:var(--mono); font-size:var(--t-13); color:var(--ink-3);
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}

.pager{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  margin-top:var(--s-10);
}
.pager a, .pager span{
  min-width:40px; height:40px; display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-2); font-size:var(--t-14);
  font-family:var(--mono); color:var(--ink-2); background:var(--white);
}
.pager a:hover{ border-color:var(--ink-4) }
.pager .on{ background:var(--cinnabar); border-color:var(--cinnabar); color:#fff }
.pager .gap{ border:0; background:none; color:var(--ink-4) }

/* ── 作品详情 ─────────────────────────────────────────────────────────── */
.detail-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s-12);
  padding-top:var(--s-8);
}
.detail-crumb{ font-size:var(--t-13); color:var(--ink-4); margin-bottom:var(--s-4) }
.detail-crumb a:hover{ color:var(--cinnabar-dp) }
.detail-title{
  font-family:var(--serif); font-size:var(--t-36); font-weight:600; line-height:1.35;
}
.detail-sub{ font-family:var(--serif); font-size:var(--t-18); color:var(--ink-3); margin-top:var(--s-3) }
.detail-meta{
  display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-4);
  font-size:var(--t-13); color:var(--ink-3); flex-wrap:wrap;
}
.detail-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-4) }
.detail-author{ display:flex; align-items:center; gap:10px; margin-top:var(--s-5) }
.detail-author__avatar{
  width:40px; height:40px; border-radius:50%; background:var(--indigo-tint); color:var(--indigo);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600;
}
.detail-author__name{ font-size:var(--t-14); font-weight:600 }
.detail-author__bio{ font-size:var(--t-12); color:var(--ink-4) }

/* 视频作品：详情页顶部播放区。黑底是为了竖屏/宽银幕视频都能正常呈现 */
.detail-video{
  margin-top:var(--s-6); background:#101010; border-radius:var(--r-2); overflow:hidden;
  border:1px solid var(--line);
}
.detail-video video{
  display:block; width:100%; max-height:62vh; background:#101010;
}

.detail-player{
  margin-top:var(--s-6); padding:var(--s-5) var(--s-6);
  border:1px solid var(--line); background:var(--white); border-radius:var(--r-2);
  display:flex; align-items:center; gap:var(--s-5);
}
.detail-player__main{
  width:56px; height:56px; border-radius:50%; background:var(--cinnabar); color:#fff;
  display:grid; place-items:center; flex:0 0 56px;
}
.detail-player__main:hover{ background:var(--cinnabar-dp) }
.detail-player__wave{ flex:1; min-width:0 }
.detail-player__track{
  height:44px; display:flex; align-items:center; gap:2px; cursor:pointer;
}
.detail-player__track i{ flex:1; background:var(--line); border-radius:1px; min-height:3px }
.detail-player__track i.on{ background:var(--cinnabar) }
.detail-player__time{
  display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:var(--t-12); color:var(--ink-4); margin-top:6px;
}
.detail-actions{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5); flex-wrap:wrap }

.detail-tabs{
  display:flex; align-items:center; gap:var(--s-8); margin-top:var(--s-10);
  border-bottom:1px solid var(--line);
}
.detail-tabs button{
  padding:var(--s-3) 0; font-size:var(--t-16); color:var(--ink-3); position:relative;
}
.detail-tabs button.on{ color:var(--ink); font-weight:600 }
.detail-tabs button.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cinnabar);
}
.detail-panel{ padding-top:var(--s-6); font-size:var(--t-17); line-height:2; color:var(--ink-2) }
.detail-panel[hidden]{ display:none }
.detail-script{
  font-family:var(--serif); font-size:var(--t-18); line-height:2.1; white-space:pre-wrap;
  color:var(--ink); letter-spacing:.02em;
}
.detail-note{
  background:var(--paper-2); border-left:3px solid var(--cinnabar);
  padding:var(--s-4) var(--s-5); font-size:var(--t-14); color:var(--ink-2); line-height:1.9;
}

.comment-form{ display:flex; gap:var(--s-3); margin-top:var(--s-4) }
.comment-form textarea{
  flex:1; min-height:76px; padding:var(--s-3) var(--s-4); border:1px solid var(--line);
  border-radius:var(--r-2); resize:vertical; font-size:var(--t-14); background:var(--white);
}
.comment-form textarea:focus{ outline:2px solid var(--cinnabar-tint); border-color:var(--cinnabar) }
.comment-item{ padding:var(--s-4) 0; border-bottom:1px solid var(--line-soft) }
.comment-item__head{ display:flex; align-items:center; gap:10px; font-size:var(--t-13); color:var(--ink-3) }
.comment-item__name{ color:var(--ink); font-weight:600; text-decoration:none }
.comment-item__name:hover{ color:var(--cinnabar-dp) }
.comment-item__body{ margin-top:6px; font-size:var(--t-15); line-height:1.9; color:var(--ink-2) }
.comment-item__reply{
  margin-left:auto; border:0; background:none; padding:2px 4px; cursor:pointer;
  font-size:var(--t-13); color:var(--ink-4);
}
.comment-item__reply:hover{ color:var(--cinnabar-dp) }

/* 二级回复：左侧一道细线表示从属关系，不做无限缩进 */
.comment-replies{
  margin-top:var(--s-3); padding-left:var(--s-5);
  border-left:2px solid var(--line-soft);
}
.comment-reply{ padding:var(--s-3) 0 }
.comment-reply + .comment-reply{ border-top:1px dashed var(--line-soft) }
.comment-reply__to{ color:var(--cinnabar-dp) }
.comment-reply-form{ margin-top:var(--s-3) }
.comment-reply-form textarea{ min-height:60px }

/* 作者条整块可点，进作者主页 */
a.detail-author{ text-decoration:none; color:inherit; border-radius:var(--r-2) }
a.detail-author:hover .detail-author__name{ color:var(--cinnabar-dp) }

.side-card{
  border:1px solid var(--line); background:var(--white); padding:var(--s-5);
  border-radius:var(--r-2);
}
.side-card + .side-card{ margin-top:var(--s-5) }
.side-card h3{
  font-family:var(--serif); font-size:var(--t-18); font-weight:600;
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line-soft);
}
.side-work{ display:flex; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px dashed var(--line-soft) }
.side-work:last-child{ border-bottom:0 }
.side-work__cover{ width:52px; height:52px; border-radius:var(--r-1); flex:0 0 52px }
.side-work__title{ font-size:var(--t-14); font-weight:600; line-height:1.5 }
.side-work__meta{ font-size:var(--t-12); color:var(--ink-4); margin-top:3px }

/* ── 创作中心 ─────────────────────────────────────────────────────────── */
.creator-wrap{ padding-top:var(--s-8) }
.creator-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6);
}
.creator-head h1{ font-family:var(--serif); font-size:var(--t-28); font-weight:600 }
.creator-head p{ color:var(--ink-3); font-size:var(--t-14); margin-top:4px }

.reject-banner{
  display:flex; gap:var(--s-3); align-items:flex-start;
  margin-top:var(--s-5); margin-bottom:var(--s-4); padding:var(--s-4) var(--s-5);
  background:var(--cinnabar-tint); border-left:3px solid var(--cinnabar);
  font-size:var(--t-14); color:var(--cinnabar-dp); line-height:1.8;
}

.mw-row__reason{ font-size:var(--t-12); color:var(--cinnabar-dp); margin-top:2px }

/* ── 登录 ─────────────────────────────────────────────────────────────── */
.login-wrap{
  max-width:420px; margin:var(--s-16) auto; padding:var(--s-10);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-2);
  box-shadow:var(--sh-2);
}
.login-wrap h1{ font-family:var(--serif); font-size:var(--t-28); font-weight:600; text-align:center }
.login-wrap p.sub{ text-align:center; color:var(--ink-3); font-size:var(--t-14); margin-top:8px }
.field{ margin-top:var(--s-5) }
.field label{ display:block; font-size:var(--t-13); color:var(--ink-3); margin-bottom:6px }
.field input{
  width:100%; height:46px; padding:0 14px; border:1px solid var(--line);
  border-radius:var(--r-2); font-size:var(--t-16); background:var(--paper);
}
.field input:focus{ outline:2px solid var(--cinnabar-tint); border-color:var(--cinnabar); background:var(--white) }
.login-hint{
  margin-top:var(--s-4); font-size:var(--t-12); color:var(--ink-4);
  background:var(--paper-2); padding:var(--s-3) var(--s-4); border-radius:var(--r-1);
  font-family:var(--mono); line-height:1.8;
}
.form-error{
  margin-top:var(--s-4); font-size:var(--t-13); color:var(--cinnabar-dp);
  background:var(--cinnabar-tint); padding:var(--s-3) var(--s-4); border-radius:var(--r-1);
}

/* 第三方登录：分隔线 + 微信按钮（微信绿只用在图标上，按钮底色仍随站点） */
.login-split{
  display:flex; align-items:center; gap:var(--s-3);
  margin:var(--s-5) 0 var(--s-4); color:var(--ink-4); font-size:var(--t-12);
}
.login-split::before,
.login-split::after{ content:""; flex:1; height:1px; background:var(--line) }
.btn--wechat{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; font-size:var(--t-14);
}
.btn--wechat svg{ color:#07c160 }
/* 未配置开放平台参数时：入口保留但置灰，避免"功能不存在"的误解 */
.btn--wechat.is-off{ opacity:.5 }
.btn--wechat.is-off svg{ color:var(--ink-4) }
.login-tip{
  margin-top:var(--s-2); text-align:center;
  font-size:var(--t-12); color:var(--ink-4);
}
.login-link{ color:var(--cinnabar-dp); text-decoration:none; border-bottom:1px solid currentColor }
.login-wrap .help{ margin-top:6px; font-size:var(--t-12); color:var(--ink-4); line-height:1.6 }

/* ── 响应式：≤1080 收成单列，≤720 走移动端排布 ──────────────────────────── */
@media (max-width: 1180px){
  .detail-wrap{ grid-template-columns:minmax(0,1fr) 280px; gap:var(--s-8) }
}
@media (max-width: 980px){
  .detail-wrap{ grid-template-columns:1fr }
  .fe-top{ gap:var(--s-4); padding:0 var(--s-4) }
  .fe-top__search{ width:180px }
  .fe-main{ padding:0 var(--s-4) 80px }
}
@media (max-width: 720px){
  .fe-nav{ display:none }
  .fe-top__search{ display:none }
  .fe-channels{
    overflow-x:auto; white-space:nowrap; padding:0 var(--s-4);
    -webkit-overflow-scrolling:touch;
  }
  .fe-channels a{ display:inline-block }
  .list-head{ flex-direction:column; align-items:flex-start }
  .work-row{ gap:var(--s-4) }
  .work-row__cover{ width:72px; height:72px; flex:0 0 72px }
  .work-row__side{ display:none }
  .detail-title{ font-size:var(--t-28) }
  .fe-player{ gap:var(--s-3); padding:0 var(--s-4) }
  .pl__info{ flex:1 }
  .pl__wave, .pl__extra{ display:none }
}

/* 页脚贴底：内容不足一屏时不出现悬空的空白 */
.fe-body .fe-main{ flex:1 0 auto }

/* ── 详情页侧栏「作品信息」：标签左、值右，行间虚线分隔 ─────────────── */
.spec-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:var(--t-13);
  border-bottom:1px dashed var(--line-soft);
}
.spec-row:last-child{ border-bottom:0 }
.spec-row .k{ color:var(--ink-4) }
.spec-row .v{ color:var(--ink-2); text-align:right }

/* 频道条右侧「本周榜单」入口：朱砂点 + 强调色，与普通频道项区分 */
.fe-hot-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--cinnabar-dp); font-weight:600;
}
.fe-hot-link::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--cinnabar);
}

/* ── 正文排版（关于我们 / 文章详情，MarkdownLite 输出） ────────────────── */
.prose{
  max-width:66ch; margin-top:var(--s-8);
  font-size:17px; line-height:2; color:var(--ink-2);
}
.prose p{ margin:0 0 var(--s-4) }
.prose h3{
  font-family:var(--serif); font-size:var(--t-22); font-weight:600;
  color:var(--ink); margin:var(--s-8) 0 var(--s-3); letter-spacing:.04em;
}
.prose h4{
  font-family:var(--serif); font-size:var(--t-18); font-weight:600;
  color:var(--ink); margin:var(--s-6) 0 var(--s-2);
}
.prose ul, .prose ol{ margin:0 0 var(--s-4); padding-left:1.4em }
.prose li{ margin-bottom:6px }
.prose blockquote{
  margin:var(--s-5) 0; padding:var(--s-4) var(--s-5); border-left:2px solid var(--cinnabar);
  background:var(--cinnabar-tint); color:var(--cinnabar-dp);
  font-family:var(--serif); line-height:1.9;
}
.prose strong{ color:var(--ink); font-weight:600 }

.about-links{
  display:flex; gap:var(--s-3); flex-wrap:wrap; max-width:66ch;
  margin-top:var(--s-10); padding-top:var(--s-6); border-top:1px solid var(--line);
}

/* 专题卡整卡可点：卡片本身就是 <a>，去掉下划线、hover 抬一档 */
.feat{ text-decoration:none }
.feat:hover{ transform:translateY(-2px); box-shadow:var(--sh-3) }

/* ── 顶栏消息铃铛 ───────────────────────────────────────────────────── */
.fe-bell{
  position:relative; width:36px; height:36px; flex:0 0 36px;
  display:grid; place-items:center; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  transition:all var(--dur-s) var(--ease-q);
}
.fe-bell:hover{ color:var(--ink); border-color:var(--ink-4) }
.fe-bell__dot{
  position:absolute; top:-4px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-full); background:var(--cinnabar); color:#fff;
  font-size:10px; line-height:16px; text-align:center; font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

/* ── 消息中心 ───────────────────────────────────────────────────────── */
.msg-toast{
  background:var(--jade-tint); color:#3A5745; font-size:13px;
  padding:10px 16px; margin:var(--s-5) 0;
}
.msg-list{ border-top:1px solid var(--line-soft) }
.msg-item{ border-bottom:1px solid var(--line-soft) }
.msg-item__btn{
  width:100%; display:grid; grid-template-columns:52px 1fr auto;
  align-items:start; gap:var(--s-4); padding:var(--s-4) var(--s-3);
  text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; transition:background var(--dur-s);
}
.msg-item__btn:hover{ background:var(--paper-2) }
.msg-item--unread .msg-item__btn{ background:#FBF3EE }
.msg-item--unread .msg-item__btn:hover{ background:var(--paper-2) }
.msg-item__type{
  font-size:11px; color:var(--ink-4); letter-spacing:.1em; padding-top:3px;
}
.msg-item__title{
  display:flex; align-items:center; gap:7px;
  font-size:var(--t-16); font-weight:600; color:var(--ink); line-height:1.6;
}
.msg-item__dot{ width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--cinnabar) }
.msg-item__body{
  display:block; margin-top:4px; font-size:var(--t-13);
  color:var(--ink-3); line-height:1.8;
}
.msg-item__time{
  font-family:var(--mono); font-size:var(--t-12); color:var(--ink-4);
  white-space:nowrap; padding-top:3px;
}
@media (max-width: 720px){
  .msg-item__btn{ grid-template-columns:1fr; gap:4px }
  .msg-item__time{ padding-top:0 }
}

/* ── 创作者主页（/users/{id}）───────────────────────────────────────────── */
.profile-head{
  display:flex; align-items:flex-start; gap:var(--s-5);
  padding:var(--s-6) 0 var(--s-5); border-bottom:1px solid var(--line-soft);
}
.profile-avatar{
  width:72px; height:72px; flex:0 0 72px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-size:30px; font-weight:600;
}
.profile-main{ flex:1; min-width:0 }
.profile-name{
  font-family:var(--serif); font-size:var(--t-28); font-weight:600;
  color:var(--ink); line-height:1.3;
}
.profile-bio{
  margin-top:6px; font-size:var(--t-14); color:var(--ink-3); line-height:1.9;
  max-width:56ch;
}
.profile-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:var(--s-3); font-size:var(--t-13); color:var(--ink-3);
}
.profile-meta b{ color:var(--ink); font-family:var(--mono); font-weight:600 }
.profile-actions{ flex:0 0 auto; padding-top:4px }

.profile-section{ margin-top:var(--s-6) }
.profile-section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line);
  margin-bottom:var(--s-2);
}
.profile-section__head h2{
  font-family:var(--serif); font-size:var(--t-20); font-weight:600; color:var(--ink);
}
.profile-section__head span{ font-size:var(--t-13); color:var(--ink-4) }

@media (max-width: 720px){
  .profile-head{ flex-wrap:wrap }
  .profile-avatar{ width:56px; height:56px; flex-basis:56px; font-size:24px }
  .profile-name{ font-size:var(--t-22) }
  .profile-actions{ width:100%; padding-top:0 }
}

/* ── 创作者数据：四格统计 + 近两周收听柱 ─────────────────────────────────── */
.stat-row--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width: 900px){
  .stat-row--4{ grid-template-columns:repeat(2,1fr) }
}

.trend{
  margin-top:var(--s-5); padding:var(--s-5);
  border:1px solid var(--line); background:var(--white); border-radius:var(--r-2);
}
.trend__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
}
.trend__head h4{ font-family:var(--serif); font-size:var(--t-18); font-weight:600; color:var(--ink) }
.trend__head p{ margin-top:4px; font-size:var(--t-12); color:var(--ink-4) }
.trend__sum{ display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap }
.trend__sum b{ font-family:var(--mono); font-size:var(--t-24); color:var(--ink) }
.trend__delta{ font-family:var(--mono); font-size:var(--t-13); padding:2px 6px; border-radius:var(--r-1) }
/* 收听上升用朱砂、下降用竹青——站点配色里朱砂是"被看见"，不套用股市红绿 */
.trend__delta.up{ color:var(--cinnabar-dp); background:var(--cinnabar-tint) }
.trend__delta.down{ color:#3A5745; background:var(--jade-tint) }
.trend__prev{ font-size:var(--t-12); color:var(--ink-4) }

.trend__bars{
  display:flex; align-items:flex-end; gap:4px;
  height:132px; margin-top:var(--s-5);
  padding-bottom:20px;   /* 给日期标签留位 */
  border-bottom:1px solid var(--line-soft);
}
.trend__bar{
  position:relative; flex:1; height:100%;
  display:flex; align-items:flex-end; justify-content:center;
}
.trend__bar i{
  display:block; width:100%; max-width:22px;
  background:linear-gradient(to top, var(--cinnabar), var(--cinnabar-dp));
  border-radius:1px 1px 0 0; opacity:.85;
  transition:opacity .15s ease;
}
.trend__bar:hover i{ opacity:1 }
.trend__bar span{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:5px; font-family:var(--mono); font-size:10px; color:var(--ink-4);
  white-space:nowrap;
}
.trend__empty{ margin-top:var(--s-4); font-size:var(--t-13); color:var(--ink-4) }