/* ==========================================================================
   中国朗诵网 · 前台样式（Paper & Voice）
   来源：prototype/parts/01-head.html 设计系统 v1.0，按线上页面需要做了裁剪
   规则：只允许在此文件新增令牌与组件，页面内联样式一律不写
   ========================================================================== */

/* ============================================================
   中国朗诵网 UI 设计系统 v1.0
   设计语言：纸上有声 / Paper & Voice
   四色：墨 ink · 宣纸 paper · 朱砂 cinnabar · 靛青 indigo
   ============================================================ */

:root{
  /* — 色板 Color Tokens — */
  --paper:        #FBF8F3;
  --paper-2:      #F5F0E8;
  --paper-3:      #EDE6DA;
  --white:        #FFFFFF;

  --ink:          #22201C;
  --ink-2:        #4A453D;
  --ink-3:        #7A7266;
  --ink-4:        #A79E90;

  --line:         #E2DACD;
  --line-soft:    #EFE9DE;

  --cinnabar:     #B23A2B;
  --cinnabar-dp:  #8C2A1E;
  --cinnabar-tint:#F8EBE7;

  --indigo:       #2F4858;
  --indigo-tint:  #E7EDF0;

  --jade:         #4A6B57;
  --jade-tint:    #E8EFE9;

  --gold:         #A98243;
  --gold-tint:    #F6EEDF;

  /* — 字体 Typography — */
  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
  --sans:  "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:  ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;

  --t-12: 12px;  --t-13: 13px;  --t-14: 14px;
  --t-16: 16px;  --t-17: 17px;  --t-18: 18px;
  --t-22: 22px;  --t-28: 28px;  --t-36: 36px;  --t-46: 46px;

  /* — 间距 Spacing（4px 基准，倾向 6/12/18 节奏）— */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* — 版心 Page Shell —
     全站内容净宽。顶栏、频道条、正文、页脚、播放条共用同一条中线：
     padding-inline = max(32px, (100% - 版心) / 2)，
     窄屏时自动退化为 32px 边距，宽屏时两侧留白均分。 */
  --w-shell: 1100px;

  --r-1: 2px; --r-2: 6px; --r-3: 12px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(34,32,28,.05);
  --sh-2: 0 6px 20px -8px rgba(34,32,28,.18);
  --sh-3: 0 18px 44px -18px rgba(34,32,28,.28);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-q: cubic-bezier(.25,.46,.45,.94);
  --dur: 220ms;
  --dur-s: 140ms;

  --rail: 236px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-16); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
img{ display:block; max-width:100%; }
::selection{ background:var(--cinnabar); color:#fff; }
:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px; border-radius:2px; }

/* 声波纹理：全站签名元素 */
.wave-line{
  height:18px; width:100%;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 4px);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  opacity:.85;
}


/* ============================================================
   一、前台 Front-end  (前缀 .fe-)
   ============================================================ */
.frame{
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-3); position:relative;
}
.frame--full{ margin:0; }

/* 顶栏 */
.fe-top{
  display:flex; align-items:center; gap:var(--s-6);
  padding:0 max(var(--s-8), calc((100% - var(--w-shell)) / 2));
  height:68px; border-bottom:1px solid var(--line);
  background:rgba(251,248,243,.94); position:relative; z-index:20;
}
.fe-logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto }
.fe-logo__mark{ display:flex; align-items:center; gap:2px; height:22px }
.fe-logo__mark i{ display:block; width:2.5px; background:var(--cinnabar); border-radius:1px }
.fe-logo__mark i:nth-child(1){ height:7px; opacity:.4 }
.fe-logo__mark i:nth-child(2){ height:15px; opacity:.75 }
.fe-logo__mark i:nth-child(3){ height:22px }
.fe-logo__mark i:nth-child(4){ height:13px; opacity:.65 }
.fe-logo__mark i:nth-child(5){ height:18px; opacity:.9 }
.fe-logo__mark i:nth-child(6){ height:6px; opacity:.35 }
.fe-logo__text{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:.14em }
.fe-nav{ display:flex; gap:var(--s-5); font-size:15px }
.fe-nav a{ color:var(--ink-2); padding:6px 2px; position:relative; white-space:nowrap; transition:color var(--dur-s) }
.fe-nav a:hover{ color:var(--ink) }
.fe-nav a.on{ color:var(--cinnabar-dp); font-weight:600 }
.fe-nav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--cinnabar);
}
.fe-top__search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  flex:0 0 auto;                     /* 版心收到 1100 后不允许搜索框被导航挤扁 */
  width:240px; height:40px; padding:0 14px; border:1px solid var(--line);
  border-radius:var(--r-full); background:var(--white); color:var(--ink-4);
  font-size:var(--t-14); transition:border-color var(--dur-s)
}
.fe-top__search:hover{ border-color:var(--ink-4) }
.fe-top__actions{ display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto }
.fe-user{ display:flex; align-items:center; gap:8px; font-size:var(--t-14); color:var(--ink-2) }
.fe-user span{
  white-space:nowrap; max-width:6em; overflow:hidden; text-overflow:ellipsis;
}
.fe-avatar{
  width:32px; height:32px; border-radius:var(--r-full); background:var(--indigo);
  color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:var(--t-14);
}

/* 按钮体系 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 18px; border-radius:var(--r-2); font-size:var(--t-14);
  font-weight:600; border:1px solid transparent; white-space:nowrap;
  transition:all var(--dur-s) var(--ease-q);
}
.btn--fill{ background:var(--cinnabar); color:#fff }
.btn--fill:hover{ background:var(--cinnabar-dp); transform:translateY(-1px); box-shadow:var(--sh-2) }
.btn--ghost{ border-color:var(--line); background:var(--white); color:var(--ink-2) }
.btn--ghost:hover{ border-color:var(--ink-3); color:var(--ink) }
.btn--text{ color:var(--cinnabar-dp); padding:0 4px; height:auto; font-weight:600 }
.btn--lg{ height:48px; padding:0 26px; font-size:var(--t-16) }
.btn--sm{ height:32px; padding:0 12px; font-size:var(--t-13); font-weight:500 }
.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover{ background:#000 }

/* 频道次级导航 */
.fe-channels{
  display:flex; align-items:center; gap:var(--s-6);
  padding:0 max(var(--s-8), calc((100% - var(--w-shell)) / 2));
  height:50px; border-bottom:1px solid var(--line-soft);
  font-size:var(--t-14); color:var(--ink-3); background:var(--paper);
}
.fe-channels b{ color:var(--ink); font-weight:600; display:flex; align-items:center; gap:6px }
.fe-channels a:hover{ color:var(--cinnabar-dp) }
.fe-channels .sep{ width:1px; height:14px; background:var(--line) }

/* 主体 */
.fe-main{ padding:0 max(var(--s-8), calc((100% - var(--w-shell)) / 2)) var(--s-10) }
.fe-block{ padding-top:var(--s-10) }
.fe-block__head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--s-5) }
.fe-block__title{ font-family:var(--serif); font-size:var(--t-28); font-weight:600; letter-spacing:.04em; display:flex; align-items:center; gap:var(--s-3) }
.fe-block__title em{ font-family:var(--mono); font-style:normal; font-size:var(--t-12); color:var(--ink-4); letter-spacing:.1em; padding-top:8px }
.fe-block__more{ font-size:var(--t-14); color:var(--ink-3); display:flex; align-items:center; gap:4px }
.fe-block__more:hover{ color:var(--cinnabar-dp) }

/* Hero 主推 */
.fe-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-8); padding-top:var(--s-8) }
.fe-hero__lead{ display:flex; flex-direction:column; justify-content:center }
.fe-hero__eyebrow{ font-size:var(--t-12); letter-spacing:.24em; color:var(--cinnabar); font-weight:600 }
.fe-hero__title{
  font-family:var(--serif); font-size:var(--t-46); line-height:1.28; letter-spacing:.03em;
  margin-top:var(--s-4); font-weight:600;
}
.fe-hero__title small{ display:block; font-size:var(--t-18); color:var(--ink-3); font-weight:400; margin-top:var(--s-3); letter-spacing:.08em }
.fe-hero__meta{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-6); color:var(--ink-3); font-size:var(--t-14) }
.fe-hero__meta i{ width:3px; height:3px; border-radius:50%; background:var(--ink-4) }
.fe-hero__actions{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-6) }
.fe-hero__quote{
  margin-top:var(--s-6); padding-left:var(--s-4); border-left:2px solid var(--line);
  font-family:var(--serif); font-size:var(--t-16); color:var(--ink-2); line-height:2;
  max-width:44ch;
}
.fe-hero__visual{ position:relative; align-self:center }
.fe-cover{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-1); overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #6E7F71 0%, #3E4F49 45%, #26302D 100%);
  display:grid; place-items:end start; padding:var(--s-5);
  box-shadow:var(--sh-2);
}
.fe-cover::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 7px);
  mask-image:radial-gradient(80% 70% at 70% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 70% 40%,#000,transparent);
}
.fe-cover__label{ position:relative; z-index:2; color:#fff }
.fe-cover__label b{ display:block; font-family:var(--serif); font-size:var(--t-22); letter-spacing:.06em }
.fe-cover__label span{ font-size:var(--t-12); opacity:.7; letter-spacing:.14em }
.fe-cover__play{
  position:absolute; z-index:3; right:var(--s-5); top:var(--s-5);
  width:56px; height:56px; border-radius:50%; background:rgba(251,248,243,.94);
  display:grid; place-items:center; color:var(--cinnabar-dp);
  transition:transform var(--dur) var(--ease), background var(--dur-s);
}
.fe-cover__play:hover{ transform:scale(1.07); background:#fff }

/* 作品卡 */
.fe-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6) var(--s-5) }
.work{ cursor:pointer }
.work__cover{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--r-1);
  background:var(--paper-3); box-shadow:var(--sh-1);
}
.work__cover .art{ position:absolute; inset:0 }
.work__cover .art::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 6px);
  opacity:.5;
}
.work__play{
  position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%;
  background:rgba(251,248,243,.95); display:grid; place-items:center; color:var(--cinnabar-dp);
  opacity:0; transform:translateY(4px); transition:all var(--dur) var(--ease);
}
.work:hover .work__play{ opacity:1; transform:none }
.work:hover .work__cover .art{ transform:scale(1.03) }
.work .art{ transition:transform 420ms var(--ease) }
.work__dur{
  position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:11px;
  color:#fff; background:rgba(20,18,16,.62); padding:2px 6px; border-radius:2px;
}
.work__tag{
  position:absolute; left:10px; top:10px; font-size:11px; letter-spacing:.08em;
  padding:3px 7px; background:rgba(251,248,243,.94); color:var(--ink-2); border-radius:2px;
}
.work__title{
  font-family:var(--serif); font-size:var(--t-17); font-weight:600; margin-top:var(--s-3);
  line-height:1.5; letter-spacing:.02em;
}
.work__title:hover{ color:var(--cinnabar-dp) }
.work__meta{ font-size:var(--t-13); color:var(--ink-3); margin-top:5px; display:flex; gap:8px; align-items:center }
.work__meta i{ width:2px; height:2px; border-radius:50%; background:var(--ink-4) }

/* 三色封面随机质感 */
.art--a{ background:radial-gradient(120% 100% at 15% 15%,#8C7A5E,#4E4232 60%,#332B20) }
.art--b{ background:radial-gradient(120% 100% at 80% 10%,#6B7E8B,#394B57 55%,#23303A) }
.art--c{ background:radial-gradient(120% 100% at 25% 80%,#9B6A63,#6A4038 55%,#3D241F) }
.art--d{ background:radial-gradient(120% 100% at 60% 30%,#7C8A6E,#4A5741 55%,#2C3527) }
.art--e{ background:radial-gradient(120% 100% at 35% 25%,#B49A6E,#7A6440 55%,#4A3B24) }
.art--f{ background:radial-gradient(120% 100% at 70% 70%,#7A7286,#4A4356 55%,#2C2734) }

/* 榜单 */
.fe-rank{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-8) }
.rank{ display:flex; align-items:center; gap:var(--s-4); padding:14px 0; border-bottom:1px solid var(--line-soft); cursor:pointer }
.rank:hover .rank__title{ color:var(--cinnabar-dp) }
.rank__no{
  font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink-4);
  width:34px; flex:0 0 34px; text-align:center; font-variant-numeric:tabular-nums;
}
.rank:nth-child(-n+2) .rank__no{ color:var(--cinnabar) }
.rank__body{ flex:1; min-width:0 }
.rank__title{ font-family:var(--serif); font-size:var(--t-16); font-weight:600; transition:color var(--dur-s) }
.rank__sub{ font-size:var(--t-13); color:var(--ink-3); margin-top:2px }
.rank__plays{ font-family:var(--mono); font-size:var(--t-12); color:var(--ink-4); flex:0 0 auto }
.rank__trend{ font-size:11px; display:flex; align-items:center; gap:2px }
.rank__trend.up{ color:var(--jade) }
.rank__trend.dn{ color:var(--ink-4) }

/* 专题条 */
.fe-feature{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5) }
.feat{
  position:relative; padding:var(--s-6); min-height:180px; border-radius:var(--r-1);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#F6F1E7; overflow:hidden; cursor:pointer;
}
.feat::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 1px,transparent 1px 9px);
  opacity:.16; mask-image:linear-gradient(180deg,#000,transparent 75%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.feat h4{ font-family:var(--serif); font-size:var(--t-22); letter-spacing:.06em; position:relative; z-index:2 }
.feat p{ font-size:var(--t-13); opacity:.75; margin-top:6px; position:relative; z-index:2 }
.feat__badge{
  position:absolute; top:var(--s-5); left:var(--s-5); font-size:11px; letter-spacing:.16em;
  border:1px solid rgba(246,241,231,.4); padding:3px 8px; z-index:2;
}

/* 底部常驻播放条 */
.fe-player{
  position:sticky; bottom:0; z-index:30;
  height:84px; background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
  border-top:1px solid var(--line); display:flex; align-items:center;
  gap:var(--s-5); padding:0 max(var(--s-8), calc((100% - var(--w-shell)) / 2));
  box-shadow:0 -8px 30px -20px rgba(34,32,28,.5);
}
.pl__cover{ width:52px; height:52px; border-radius:var(--r-1); flex:0 0 52px; position:relative }
.pl__info{ flex:0 0 210px; min-width:0 }
.pl__title{ font-family:var(--serif); font-size:var(--t-16); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pl__author{ font-size:var(--t-13); color:var(--ink-3); margin-top:1px }
.pl__controls{ display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto }
.pl__btn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
  transition:background var(--dur-s), color var(--dur-s);
}
.pl__btn:hover{ background:var(--paper-2); color:var(--ink) }
.pl__btn--main{ width:46px; height:46px; background:var(--cinnabar); color:#fff }
.pl__btn--main:hover{ background:var(--cinnabar-dp); color:#fff }
.pl__wave{ flex:1; display:flex; align-items:center; gap:var(--s-3); min-width:0 }
.pl__time{ font-family:var(--mono); font-size:var(--t-12); color:var(--ink-3); flex:0 0 auto }
.pl__track{
  flex:1; height:26px; display:flex; align-items:center; gap:1.5px; cursor:pointer; position:relative;
  mask-image:linear-gradient(90deg,#000 0 99%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 0 99%,transparent);
}
.pl__track i{
  flex:1; background:var(--line); border-radius:1px; min-height:3px; transition:background var(--dur-s);
}
.pl__track i.on{ background:var(--cinnabar) }
.pl__extra{ display:flex; align-items:center; gap:var(--s-2); flex:0 0 auto }
.chip-speed{
  font-family:var(--mono); font-size:var(--t-12); border:1px solid var(--line); border-radius:var(--r-full);
  padding:4px 9px; color:var(--ink-2);
}
.chip-speed:hover{ border-color:var(--ink-3) }
.pl__list-btn{
  display:flex; align-items:center; gap:6px; font-size:var(--t-13); color:var(--ink-3);
  border-left:1px solid var(--line); padding-left:var(--s-4); margin-left:var(--s-2);
}
.pl__list-btn:hover{ color:var(--ink) }

/* ---- 作品详情 / 播放页 ---- */
.fe-detail{ display:grid; grid-template-columns:1fr 320px; gap:var(--s-10); padding-top:var(--s-8) }
.crumb{ font-size:var(--t-13); color:var(--ink-4); display:flex; gap:8px; align-items:center }
.crumb a:hover{ color:var(--ink-2) }
.dt-head{ margin-top:var(--s-5) }
.dt-title{ font-family:var(--serif); font-size:var(--t-36); line-height:1.35; letter-spacing:.03em; font-weight:600 }
.dt-body{ margin-top:var(--s-3); color:var(--ink-3); font-size:var(--t-14); display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center }
.dt-player{
  margin-top:var(--s-6); border:1px solid var(--line); background:var(--white);
  padding:var(--s-6); display:grid; grid-template-columns:132px 1fr; gap:var(--s-5); align-items:center;
}
.dt-player__cover{ aspect-ratio:1; border-radius:var(--r-1); position:relative }
.dt-player__title{ font-size:var(--t-13); color:var(--ink-3); letter-spacing:.06em }
.dt-wave{ display:flex; align-items:center; gap:2px; height:56px; margin-top:var(--s-3) }
.dt-wave i{ flex:1; background:var(--line); border-radius:1px }
.dt-wave i.on{ background:var(--cinnabar) }
.dt-player__bar{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-3) }
.dt-player__time{ font-family:var(--mono); font-size:var(--t-12); color:var(--ink-3) }
.tabs{ display:flex; gap:var(--s-6); border-bottom:1px solid var(--line); margin-top:var(--s-10) }
.tabs button{
  padding:12px 2px; font-size:var(--t-16); color:var(--ink-3); position:relative; font-weight:500;
}
.tabs button[aria-selected="true"]{ color:var(--ink); font-weight:600 }
.tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cinnabar) }
.tabs .count{ font-family:var(--mono); font-size:var(--t-12); color:var(--ink-4); margin-left:4px }

.script{ margin-top:var(--s-6); max-width:62ch }
.script p{
  font-family:var(--serif); font-size:var(--t-18); line-height:2.15; color:var(--ink-2);
  margin-bottom:var(--s-5); text-indent:2em; letter-spacing:.02em;
}
.script p:first-child::first-letter{ font-size:1.5em; color:var(--cinnabar-dp) }
.script__note{ font-family:var(--sans); font-size:var(--t-13); color:var(--ink-4); text-indent:0; font-style:normal }

.comment{ display:flex; gap:var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--line-soft) }
.comment__ava{ width:36px; height:36px; border-radius:50%; background:var(--paper-3); flex:0 0 36px; display:grid; place-items:center; font-family:var(--serif); font-size:var(--t-13); color:var(--ink-3) }
.comment__name{ font-size:var(--t-14); font-weight:600 }
.comment__name span{ font-weight:400; color:var(--ink-4); font-size:var(--t-12); margin-left:8px }
.comment__text{ font-size:var(--t-14); color:var(--ink-2); margin-top:3px; line-height:1.75 }
.comment__acts{ display:flex; gap:var(--s-4); font-size:var(--t-12); color:var(--ink-4); margin-top:6px }

/* 侧栏 */
.side-card{ border:1px solid var(--line); background:var(--white); padding:var(--s-5) }
.side-card + .side-card{ margin-top:var(--s-5) }
.side-card__title{ font-size:var(--t-12); letter-spacing:.18em; color:var(--ink-4); margin-bottom:var(--s-4) }
.author-row{ display:flex; align-items:center; gap:var(--s-3) }
.author-row__ava{ width:44px; height:44px; border-radius:50%; background:var(--indigo); color:#fff; display:grid; place-items:center; font-family:var(--serif) }
.author-row__name{ font-family:var(--serif); font-size:var(--t-16); font-weight:600 }
.author-row__meta{ font-size:var(--t-12); color:var(--ink-3) }
.mini-list li{ display:flex; gap:var(--s-3); padding:10px 0; border-bottom:1px solid var(--line-soft); cursor:pointer }
.mini-list li:last-child{ border-bottom:0 }
.mini-list .n{ font-family:var(--mono); font-size:var(--t-12); color:var(--cinnabar); width:16px; flex:0 0 16px; padding-top:2px }
.mini-list .t{ font-size:var(--t-14); color:var(--ink-2); line-height:1.5 }
.mini-list li:hover .t{ color:var(--cinnabar-dp) }
.mini-list .s{ font-size:var(--t-12); color:var(--ink-4); margin-top:2px }

/* ---- 作品库 / 列表页 ---- */
.list-head{ display:flex; align-items:flex-end; justify-content:space-between; padding-top:var(--s-8) }
.list-title{ font-family:var(--serif); font-size:var(--t-36); font-weight:600; letter-spacing:.05em }
.list-sub{ color:var(--ink-3); font-size:var(--t-14); margin-top:var(--s-2); max-width:60ch; line-height:1.8 }
.filters{ display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--s-6) }
.filter-row{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--t-14) }
.filter-row > span{ color:var(--ink-4); flex:0 0 56px; font-size:var(--t-13) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  padding:5px 13px; border:1px solid var(--line); border-radius:var(--r-full);
  font-size:var(--t-13); color:var(--ink-2); background:var(--white); transition:all var(--dur-s);
}
.chip:hover{ border-color:var(--ink-3) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:500 }
.list-tools{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--s-5) }
.list-count{ font-size:var(--t-13); color:var(--ink-3) }
.list-count b{ color:var(--ink); font-family:var(--mono) }
.sort-group{ display:flex; gap:var(--s-4); font-size:var(--t-13); color:var(--ink-3) }
.sort-group button.on{ color:var(--cinnabar-dp); font-weight:600 }
.fe-grid--wide{ grid-template-columns:repeat(4,1fr); margin-top:var(--s-5) }
.hr-work{ display:flex; gap:var(--s-5); padding:var(--s-5) 0; border-bottom:1px solid var(--line-soft) }
.hr-work__cover{ width:104px; height:104px; flex:0 0 104px; border-radius:var(--r-1); position:relative }
.hr-work__body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center }
.hr-work__title{ font-family:var(--serif); font-size:var(--t-18); font-weight:600 }
.hr-work__title:hover{ color:var(--cinnabar-dp) }
.hr-work__desc{ font-size:var(--t-13); color:var(--ink-3); margin-top:6px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.hr-work__meta{ display:flex; gap:var(--s-4); font-size:var(--t-12); color:var(--ink-4); margin-top:10px; align-items:center }
.hr-work__play{ align-self:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--cinnabar-dp); transition:all var(--dur-s) }
.hr-work:hover .hr-work__play{ background:var(--cinnabar); border-color:var(--cinnabar); color:#fff }

/* ---- 创作中心 ---- */
.cr-grid{ display:grid; grid-template-columns:1fr 300px; gap:var(--s-8); padding-top:var(--s-8) }
.cr-title{ font-family:var(--serif); font-size:var(--t-28); font-weight:600; letter-spacing:.04em }
.dropzone{
  margin-top:var(--s-5); border:1.5px dashed var(--line); background:var(--white);
  padding:var(--s-10) var(--s-6); text-align:center; transition:all var(--dur) var(--ease-q);
}
.dropzone:hover{ border-color:var(--cinnabar); background:var(--cinnabar-tint) }
.dropzone__icon{ width:56px; height:56px; margin:0 auto var(--s-4); display:flex; align-items:flex-end; justify-content:center; gap:3px }
.dropzone__icon i{ width:4px; background:var(--cinnabar); border-radius:1px; opacity:.55 }
.dropzone h4{ font-family:var(--serif); font-size:var(--t-18); font-weight:600 }
.dropzone p{ font-size:var(--t-13); color:var(--ink-3); margin-top:6px }
.dropzone .hint{ font-family:var(--mono); font-size:11px; color:var(--ink-4); margin-top:var(--s-4); letter-spacing:.04em }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s-6) }
.stat{ background:var(--white); padding:var(--s-4) var(--s-5) }
.stat__k{ font-size:var(--t-12); color:var(--ink-4); letter-spacing:.06em }
.stat__v{ font-family:var(--serif); font-size:var(--t-28); font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums }
.stat__d{ font-size:var(--t-12); color:var(--jade); margin-top:2px }
.myworks{ margin-top:var(--s-6); border:1px solid var(--line); background:var(--white) }
.myworks__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line) }
.myworks__head h4{ font-family:var(--serif); font-size:var(--t-18); font-weight:600 }
.mw-row{ display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line-soft) }
.mw-row:last-child{ border-bottom:0 }
.mw-row__cov{ width:44px; height:44px; border-radius:2px; flex:0 0 44px; position:relative }
.mw-row__t{ flex:1; min-width:0 }
.mw-row__t b{ font-family:var(--serif); font-size:var(--t-16); font-weight:600; display:block }
.mw-row__t span{ font-size:var(--t-12); color:var(--ink-4) }
.mw-row__stat{ font-family:var(--mono); font-size:var(--t-13); color:var(--ink-3); width:88px; text-align:right }
.mw-row__act{ display:flex; gap:var(--s-3); font-size:var(--t-13); color:var(--ink-3) }
.mw-row__act button:hover{ color:var(--cinnabar-dp) }

.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:var(--t-12);
  padding:3px 9px; border-radius:var(--r-full); font-weight:500; white-space:nowrap;
}
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.badge--wait{ background:var(--gold-tint); color:#8A6626 }
.badge--ok{ background:var(--jade-tint); color:#3A5745 }
.badge--no{ background:var(--cinnabar-tint); color:var(--cinnabar-dp) }
.badge--info{ background:var(--indigo-tint); color:var(--indigo) }
.badge--off{ background:var(--paper-3); color:var(--ink-3) }

/* 空态 / 骨架 */
.empty{ text-align:center; padding:var(--s-16) var(--s-6); color:var(--ink-3) }
.empty h4{ font-family:var(--serif); font-size:var(--t-18); color:var(--ink-2); margin-bottom:6px }
.empty p{ font-size:var(--t-14); max-width:34ch; margin:0 auto; line-height:1.8 }
.sk{ background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-2) 37%,var(--paper-3) 63%); background-size:400% 100%; animation:shimmer 1.6s infinite linear; border-radius:2px }
@keyframes shimmer{ from{ background-position:100% 0 } to{ background-position:-100% 0 } }