@charset "UTF-8";

/* ============================================================
   诗辞 · SiCi — PC 端暗色主题 + Tailwind 布局
   保留：水墨动画、印章效果、加载动画、卡片特效
   布局交给 Tailwind 处理
   ============================================================ */

/* ---------- 字体 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* ---------- 诗文阅读页主题配色 ---------- */
/* 暗色（默认，与整体应用一致） */
html.t-dark .apaper,
[data-theme="dark"] .apaper {
  background:rgba(28,27,24,.85);border-color:rgba(255,255,255,.05);
}
html.t-dark .ahead h1,
[data-theme="dark"] .ahead h1 { color:#E8E3D8 }
html.t-dark .acontent,
[data-theme="dark"] .acontent { color:#E8E3D8 }
html.t-dark .sec p,
html.t-dark .notes li,
[data-theme="dark"] .sec p,
[data-theme="dark"] .notes li { color:#C4BEB0 }
[data-theme="dark"] .expitem { background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.04) }
[data-theme="dark"] .expitem dt { color:#E8E3D8 }
[data-theme="dark"] .expitem dd { color:#C4BEB0 }

/* 亮色 */
html.t-bright .artscrim,
[data-theme="bright"] .artscrim {
  background:linear-gradient(180deg,rgba(245,242,237,.5) 0%,rgba(245,242,237,.92) 100%);
}
html.t-bright .apaper,
[data-theme="bright"] .apaper {
  background:rgba(245,242,237,.9);border-color:rgba(0,0,0,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
html.t-bright .ahead h1,
[data-theme="bright"] .ahead h1 { color:#2C2C2C }
html.t-bright .ahead .dtag,
[data-theme="bright"] .ahead .dtag { color:#C5373A;border-color:rgba(197,55,58,.4) }
html.t-bright .ahead .author,
[data-theme="bright"] .ahead .author { color:#5A5A5A }
html.t-bright .ahead,
[data-theme="bright"] .ahead { border-bottom-color:#E8E3D8 }
html.t-bright .acontent,
[data-theme="bright"] .acontent { color:#2C2C2C }
html.t-bright .sec,
[data-theme="bright"] .sec { border-top-color:#E8E3D8 }
html.t-bright .sec h4,
[data-theme="bright"] .sec h4 { color:#2C2C2C;border-left-color:#3B5998 }
html.t-bright .sec p,
html.t-bright .notes li,
[data-theme="bright"] .sec p,
[data-theme="bright"] .notes li { color:#5A5A5A }
html.t-bright .notes li b,
[data-theme="bright"] .notes li b { color:#2C2C2C }
html.t-bright .back,
[data-theme="bright"] .back { color:#5A5A5A }
html.t-bright .back:hover,
[data-theme="bright"] .back:hover { color:#2C2C2C;border-bottom-color:#2C2C2C }
html.t-bright .artbg,
[data-theme="bright"] .artbg { filter:brightness(1) saturate(1) blur(0px);opacity:.85 }
[data-theme="bright"] .expitem { background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06) }
[data-theme="bright"] .expitem dt { color:#2C2C2C }
[data-theme="bright"] .expitem dd { color:#5A5A5A }

/* 暖色 */
html.t-warm .artscrim,
[data-theme="warm"] .artscrim {
  background:linear-gradient(180deg,rgba(44,38,28,.6) 0%,rgba(30,26,20,.92) 100%);
}
html.t-warm .apaper,
[data-theme="warm"] .apaper {
  background:rgba(36,31,24,.88);border-color:rgba(184,150,60,.1);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
html.t-warm .ahead h1,
[data-theme="warm"] .ahead h1 { color:#E8D9A8 }
html.t-warm .acontent,
[data-theme="warm"] .acontent { color:#D4C9A8 }
html.t-warm .ahead .dtag,
[data-theme="warm"] .ahead .dtag { color:#E8A040;border-color:rgba(232,160,64,.4) }
html.t-warm .ahead .author,
[data-theme="warm"] .ahead .author { color:#B8A070 }
html.t-warm .ahead,
[data-theme="warm"] .ahead { border-bottom-color:#3D3420 }
html.t-warm .sec,
[data-theme="warm"] .sec { border-top-color:#3D3420 }
html.t-warm .sec h4,
[data-theme="warm"] .sec h4 { color:#E8D9A8;border-left-color:#B8963C }
html.t-warm .sec p,
html.t-warm .notes li,
[data-theme="warm"] .sec p,
[data-theme="warm"] .notes li { color:#B8A070 }
html.t-warm .notes li b,
[data-theme="warm"] .notes li b { color:#E8D9A8 }
html.t-warm .back,
[data-theme="warm"] .back { color:#B8A070 }
html.t-warm .back:hover,
[data-theme="warm"] .back:hover { color:#E8D9A8;border-bottom-color:#E8D9A8 }
html.t-warm .artbg,
[data-theme="warm"] .artbg { filter:brightness(1) saturate(1) blur(0px);opacity:.85 }
[data-theme="warm"] .expitem { background:rgba(184,150,60,.06);border-color:rgba(184,150,60,.1) }
[data-theme="warm"] .expitem dt { color:#E8D9A8 }
[data-theme="warm"] .expitem dd { color:#B8A070 }

/* 护眼 */
html.t-eye .artscrim,
[data-theme="eye"] .artscrim {
  background:linear-gradient(180deg,rgba(225,238,218,.5) 0%,rgba(218,232,210,.92) 100%);
}
html.t-eye .apaper,
[data-theme="eye"] .apaper {
  background:rgba(218,232,210,.9);border-color:rgba(0,0,0,.04);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
html.t-eye .ahead h1,
[data-theme="eye"] .ahead h1 { color:#3A4A35 }
html.t-eye .acontent,
[data-theme="eye"] .acontent { color:#3A4A35 }
html.t-eye .ahead .dtag,
[data-theme="eye"] .ahead .dtag { color:#5A8A4A;border-color:rgba(90,138,74,.4) }
html.t-eye .ahead .author,
[data-theme="eye"] .ahead .author { color:#5A6B55 }
html.t-eye .ahead,
[data-theme="eye"] .ahead { border-bottom-color:#D0E0C8 }
html.t-eye .sec,
[data-theme="eye"] .sec { border-top-color:#D0E0C8 }
html.t-eye .sec h4,
[data-theme="eye"] .sec h4 { color:#3A4A35;border-left-color:#5A8A4A }
html.t-eye .sec p,
html.t-eye .notes li,
[data-theme="eye"] .sec p,
[data-theme="eye"] .notes li { color:#5A6B55 }
html.t-eye .notes li b,
[data-theme="eye"] .notes li b { color:#3A4A35 }
html.t-eye .back,
[data-theme="eye"] .back { color:#6B7B65 }
html.t-eye .back:hover,
[data-theme="eye"] .back:hover { color:#3A4A35;border-bottom-color:#3A4A35 }
html.t-eye .artbg,
[data-theme="eye"] .artbg { filter:brightness(1) saturate(1) blur(0px);opacity:.85 }
[data-theme="eye"] .expitem { background:rgba(90,138,74,.06);border-color:rgba(90,138,74,.1) }
[data-theme="eye"] .expitem dt { color:#3A4A35 }
[data-theme="eye"] .expitem dd { color:#5A6B55 }

/* ---------- 全局 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  background: #151412;
  color: #E8E3D8;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.7;
  /* 暗色底的宣纸纹理 */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(200,200,200,0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(197,55,58,0.02) 0%, transparent 50%);
}
a { text-decoration: none; color: inherit; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3A3630; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5A5548; }

/* ===== 加载动画 ===== */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 24px;
}
.ink-loader { position: relative; width: 60px; height: 60px; }
.ink-loader .ink-circle {
  position: absolute; border: 2px solid transparent; border-radius: 50%;
  animation: inkSpread 2s ease-in-out infinite;
}
.ink-loader .ink-circle:nth-child(1) { width:60px;height:60px;top:0;left:0;border-top-color:#8B8575;animation-delay:0s }
.ink-loader .ink-circle:nth-child(2) { width:44px;height:44px;top:8px;left:8px;border-right-color:#5A5548;animation-delay:0.3s }
.ink-loader .ink-circle:nth-child(3) { width:28px;height:28px;top:16px;left:16px;border-bottom-color:#C5373A;animation-delay:0.6s }
.ink-loader .ink-drop {
  position:absolute;top:50%;left:50%;width:8px;height:8px;background:#E8E3D8;
  border-radius:50% 50% 50% 50%/30% 30% 70% 70%;transform:translate(-50%,-50%);
  animation:inkDrop 2s ease-in-out infinite;
}
@keyframes inkSpread {
  0%,100% { opacity:0.15;transform:scale(0.8) }
  50% { opacity:0.5;transform:scale(1.1) }
}
@keyframes inkDrop {
  0%,100% { opacity:0.3;transform:translate(-50%,-50%) scale(1) }
  50% { opacity:1;transform:translate(-50%,-50%) scale(1.8) }
}
.loading-text-art {
  font-family:'Noto Serif SC',serif;font-size:14px;color:#8B8575;
  letter-spacing:.3em;animation:fadeInOut 2s ease-in-out infinite;
}
@keyframes fadeInOut {
  0%,100% { opacity:0.3 }
  50% { opacity:0.7 }
}

/* ===== 墨粒子动画 ===== */
.ink-particles {
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;overflow:hidden;
}
.ink-particle {
  position:absolute;width:4px;height:4px;background:rgba(255,255,255,0.06);
  border-radius:50%;animation:floatUp linear infinite;
}
@keyframes floatUp {
  0% { transform:translateY(100%) translateX(0) scale(0);opacity:0 }
  10% { opacity:0.6 }
  50% { transform:translateY(50%) translateX(20px) scale(1.5) }
  90% { opacity:0.2 }
  100% { transform:translateY(0%) translateX(-10px) scale(0.5);opacity:0 }
}

/* ===== 滚动入场动画 ===== */
.anim-on-scroll {
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.anim-on-scroll.visible { opacity:1;transform:translateY(0) }
.anim-on-scroll:nth-child(1){transition-delay:0s}
.anim-on-scroll:nth-child(2){transition-delay:.05s}
.anim-on-scroll:nth-child(3){transition-delay:.10s}
.anim-on-scroll:nth-child(4){transition-delay:.15s}
.anim-on-scroll:nth-child(5){transition-delay:.20s}
.anim-on-scroll:nth-child(6){transition-delay:.25s}
.anim-on-scroll:nth-child(7){transition-delay:.30s}
.anim-on-scroll:nth-child(8){transition-delay:.35s}
.anim-on-scroll:nth-child(9){transition-delay:.40s}
.anim-on-scroll:nth-child(10){transition-delay:.45s}

/* ===== 页面过渡 ===== */
.page-enter-active { animation:pageIn .35s ease-out }
.page-leave-active { animation:pageOut .2s ease-in }
@keyframes pageIn {
  from { opacity:0;transform:translateY(12px) }
  to { opacity:1;transform:translateY(0) }
}
@keyframes pageOut {
  from { opacity:1 }
  to { opacity:0 }
}

/* ===== SiteHeader Hero ===== */
.siteheader { min-height: 280px; }
@media (min-width: 768px) { .siteheader { min-height: 380px; } }

.hero-bg {
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.6) saturate(.5);
  animation:slowZoom 20s ease-in-out infinite alternate;
}
.hero-bg-fallback {
  background:linear-gradient(160deg,#2A2520 0%,#1C1B18 30%,#252018 60%,#1A1510 100%);
}
.hero-overlay {
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.25) 100%);
}
.hero-gradient-bottom {
  position:absolute;bottom:-1px;left:0;right:0;height:40px;
  background:linear-gradient(to top,#151412 0%,transparent 100%);
  z-index:2;
}
.hero-seal {
  position:absolute;top:24px;right:28px;width:52px;height:52px;
  border:2px solid rgba(255,255,255,.4);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Ma Shan Zheng',cursive;font-size:22px;
  color:rgba(255,255,255,.6);transform:rotate(8deg);z-index:3;
  text-shadow:0 1px 3px rgba(0,0,0,.2);
}
@keyframes slowZoom {
  from { transform:scale(1) }
  to { transform:scale(1.08) }
}

/* ===== 搜索栏 ===== */
.searchbar {
  display:flex;align-items:center;gap:8px;padding:16px 0;
}
.searchbar select {
  padding:10px 14px;border:1px solid #2D2B26;border-radius:10px;
  background:#1C1B18;font-family:inherit;font-size:14px;color:#E8E3D8;
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
  appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8575' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.searchbar select:focus {
  outline:none;border-color:#C5373A;
  box-shadow:0 0 0 3px rgba(197,55,58,.15);
}
.searchbar input {
  padding:10px 14px;border:1px solid #2D2B26;border-radius:10px;
  background:#1C1B18;font-family:inherit;font-size:14px;color:#E8E3D8;
  transition:border-color .2s,box-shadow .2s;flex:3;
}
.searchbar input:focus {
  outline:none;border-color:#8B8575;
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.searchbar input::placeholder { color:#8B8575 }

/* ===== 数据统计行 ===== */
.meta {
  font-size:12px;color:#8B8575;padding:4px 0 8px;letter-spacing:.05em;
}
.meta b { color:#C4BEB0;font-weight:500 }

/* ===== 列表容器 ===== */
.list { display:flex;flex-direction:column;gap:2px }

/* ===== PoemRow 列表行 ===== */
.row {
  display:flex;align-items:center;gap:16px;
  padding:38px 16px;border-radius:10px;
  cursor:pointer;transition:background .25s,transform .2s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.row:hover {
  background:#1C1B18;transform:translateX(4px);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.row:active { transform:translateX(2px) scale(.985) }
.row::after {
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.04) 20%,rgba(255,255,255,.04) 80%,transparent);
}
.row:last-child::after { display:none }
.row .seal-stamp {
  position:absolute;right:16px;top:50%;
  transform:translateY(-50%) rotate(12deg);
  font-family:'Ma Shan Zheng',cursive;font-size:16px;
  color:transparent;border:1px solid transparent;
  border-radius:3px;padding:2px 4px;opacity:0;
  transition:all .35s ease;
}
.row:hover .seal-stamp { color:#C5373A;border-color:#C5373A;opacity:.3 }
.row .idx {
  font-family:'Noto Serif SC',serif;font-size:13px;font-weight:300;
  color:#8B8575;min-width:28px;text-align:right;flex-shrink:0;
}
.row .body { flex:1;min-width:0 }
.row .t {
  font-family:'Noto Serif SC',serif;font-size:17px;font-weight:600;
  color:#E8E3D8;line-height:1.4;transition:color .2s;
}
.row:hover .t { color:#fff }
.row .a {
  font-size:12px;color:#8B8575;margin-top:3px;letter-spacing:.04em;
}
.row .c {
  font-size:13px;color:#C4BEB0;margin-top:6px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== PoemCard 卡片 ===== */
.pcard {
  display:block;padding:24px;background:#1C1B18;
  border-radius:16px;border:1px solid rgba(255,255,255,.05);
  margin-bottom:16px;cursor:pointer;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden;
}
.pcard:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  border-color:rgba(255,255,255,.1);
}
.pcard::before {
  content:'';position:absolute;top:0;left:0;width:3px;height:0;
  background:linear-gradient(180deg,#E8655A,#C5373A);
  transition:height .3s ease;border-radius:0 2px 2px 0;
}
.pcard:hover::before { height:100% }
.pcard .d {
  font-size:11px;color:#C5373A;letter-spacing:.08em;
  margin-bottom:6px;font-weight:500;
}
.pcard .t {
  font-family:'Noto Serif SC',serif;font-size:20px;font-weight:600;
  color:#E8E3D8;line-height:1.4;margin-bottom:6px;
}
.pcard .a { font-size:13px;color:#8B8575;letter-spacing:.05em }

/* ===== Poem 详情 ===== */
.poem-section { padding:40px 0 }
.poem-header { text-align:center;margin-bottom:40px;position:relative }
.poem-header .poem-title {
  font-family:'Noto Serif SC',serif;font-size:30px;font-weight:700;
  color:#E8E3D8;letter-spacing:.1em;line-height:1.3;margin-bottom:8px;
}
.poem-header .poem-meta { font-size:13px;color:#8B8575;letter-spacing:.08em }
.poem-header .poem-dynasty-tag {
  display:inline-block;font-size:11px;color:#C5373A;
  border:1px solid rgba(197,55,58,.4);border-radius:100px;
  padding:2px 10px;margin-bottom:10px;letter-spacing:.06em;
}
.poem-body {
  font-family:'Noto Serif SC',serif;font-size:18px;line-height:2.2;
  color:#E8E3D8;text-align:center;padding:40px 24px;
  background:#1C1B18;border-radius:16px;
  position:relative;margin-bottom:40px;white-space:pre-wrap;letter-spacing:.05em;
}
.poem-body::before,.poem-body::after {
  content:'';position:absolute;width:24px;height:1px;
  background:#2D2B26;top:28px;
}
.poem-body::before { left:24px }
.poem-body::after { right:24px }
.poem-notes { margin-top:24px }
.poem-notes h3 {
  font-family:'Noto Serif SC',serif;font-size:16px;font-weight:600;
  color:#E8E3D8;margin-bottom:8px;padding-left:12px;
  border-left:2px solid #3B5998;
}
.poem-notes p {
  font-size:14px;color:#C4BEB0;line-height:1.9;
  margin-bottom:16px;text-indent:2em;
}

/* ===== 分页器 ===== */
.pager {
  display:flex;align-items:center;justify-content:center;
  gap:12px;padding:40px 0;flex-wrap:wrap;
}
.pager button {
  font-family:'Noto Serif SC',serif;font-size:14px;padding:8px 16px;
  border:1px solid #2D2B26;background:#1C1B18;color:#C4BEB0;
  border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:.04em;
}
.pager button:hover:not(:disabled) {
  border-color:#8B8575;color:#E8E3D8;background:#2D2B26;
}
.pager button:disabled { opacity:.3;cursor:not-allowed }
.pager .pg {
  font-family:'Noto Serif SC',serif;font-size:14px;color:#8B8575;
  padding:0 8px;
}

/* ===== 标签页 ===== */
.tab-bar {
  display:flex;gap:0;border-bottom:2px solid #2D2B26;
  margin-bottom:24px;overflow-x:auto;scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar { display:none }
.tab-btn {
  font-family:'Noto Serif SC',serif;font-size:15px;padding:10px 20px;
  border:none;background:none;color:#8B8575;cursor:pointer;
  transition:all .25s;position:relative;white-space:nowrap;
  letter-spacing:.06em;flex-shrink:0;
}
.tab-btn::after {
  content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;
  background:#E8E3D8;transition:all .3s ease;transform:translateX(-50%);
}
.tab-btn:hover { color:#E8E3D8 }
.tab-btn.active { color:#E8E3D8;font-weight:600 }
.tab-btn.active::after { width:60% }

/* ===== 课本分段 ===== */
.textbook-stage { margin-bottom:40px;position:relative }
.textbook-stage-title {
  font-family:'Noto Serif SC',serif;font-size:18px;font-weight:600;
  color:#E8E3D8;padding:8px 0;margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.textbook-stage-title::before {
  content:'';width:4px;height:18px;background:#E8E3D8;
  border-radius:2px;
}
.textbook-stage-count { font-size:12px;font-weight:400;color:#8B8575 }
.stage-head {
  display:flex;align-items:center;gap:8px;padding:24px 0 8px;margin-bottom:8px;
}
.stage-head h2 {
  font-family:'Noto Serif SC',serif;font-size:19px;font-weight:700;
  color:#E8E3D8;letter-spacing:.08em;
}
.stage-head .bar {
  flex:1;height:1px;
  background:linear-gradient(to right,#2D2B26,transparent);
  margin:0 8px;
}
.stage-head .cnt { font-size:12px;color:#8B8575;white-space:nowrap }

/* ===== 卡片网格 ===== */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;padding-bottom:24px;
}
@media (min-width: 1024px) {
  .grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
}

/* ===== 主题浏览 ===== */
.theme-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;padding:16px 0;
}
@media (min-width: 768px) {
  .theme-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
}
.theme-card {
  padding:24px;background:#1C1B18;border-radius:10px;
  border:1px solid transparent;cursor:pointer;
  transition:all .3s;text-align:center;position:relative;overflow:hidden;
}
.theme-card:hover {
  border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transform:translateY(-2px);
}
.theme-card .theme-icon { font-size:28px;margin-bottom:8px;display:block }
.theme-card .theme-name {
  font-family:'Noto Serif SC',serif;font-size:16px;font-weight:600;
  color:#E8E3D8;margin-bottom:4px;
}
.theme-card .theme-count { font-size:12px;color:#8B8575 }

/* ===== 空态 ===== */
.empty {
  text-align:center;padding:40px;color:#8B8575;
  font-family:'Noto Serif SC',serif;font-size:15px;letter-spacing:.1em;
}

/* ===== 书籍分割装饰 ===== */
.chinese-divider {
  display:flex;align-items:center;justify-content:center;
  gap:16px;padding:24px 0;color:#2D2B26;
}
.chinese-divider::before,.chinese-divider::after {
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,#2D2B26,transparent);
}
.chinese-divider .divider-dot {
  width:4px;height:4px;background:#2D2B26;border-radius:50%;
}

/* ===== 阅读设置面板 ===== */
.reading-panel {
  position:fixed;inset:0;background:#151412;z-index:200;
  overflow-y:auto;padding:40px 24px;animation:pageIn .3s ease-out;
}
.reading-panel .close-btn {
  position:fixed;top:16px;right:16px;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.04);
  border:none;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#8B8575;transition:all .2s;z-index:10;
}
.reading-panel .close-btn:hover { background:rgba(255,255,255,.08);color:#E8E3D8 }

/* ===== 诗文详情页 - 古典排版 ===== */
.poem-root { position:relative;min-height:100vh }
.artbg {
  position:fixed;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;filter:brightness(.4) saturate(.3) blur(1px);
  z-index:0;opacity:.3;
}
.artscrim {
  position:fixed;inset:0;
  background:linear-gradient(180deg,rgba(21,20,18,.5) 0%,rgba(21,20,18,.85) 100%);
  z-index:1;pointer-events:none;
}
.progress {
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(90deg,#C5373A,#E8655A);
  z-index:150;transition:width .15s ease-out;
}
.article {
  position:relative;z-index:2;max-width:720px;margin:0 auto;
  padding:20px 16px 100px;
}
.article.long { max-width:850px }
@media (min-width: 1024px) {
  .article { max-width:800px }
  .article.long { max-width:900px }
  /* 不再用 !important 强制字号，让用户偏好生效 */
}
.abar {
  display:flex;align-items:center;gap:16px;
  padding:8px 0;margin-bottom:24px;
}
.abar .back {
  font-family:'Noto Serif SC',serif;font-size:14px;color:#8B8575;
  background:none;border:none;border-bottom:1px solid transparent;
  cursor:pointer;transition:all .2s;padding:4px 0;
}
.abar .back:hover { color:#E8E3D8;border-bottom-color:#E8E3D8 }
.abar .back.ghost { color:#8B8575;font-size:13px }
.abar .spacer { flex:1 }

.apaper {
  background:rgba(28,27,24,.85);backdrop-filter:blur(8px);
  border-radius:16px;padding:40px 32px;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.ahead {
  text-align:center;padding-bottom:40px;margin-bottom:40px;
  border-bottom:1px solid #2D2B26;
}
.ahead .dtag {
  display:inline-block;font-size:11px;color:#C5373A;
  border:1px solid rgba(197,55,58,.4);border-radius:100px;
  padding:2px 10px;margin-bottom:12px;letter-spacing:.06em;
}
.ahead h1 {
  font-family:'Noto Serif SC',serif;font-size:26px;font-weight:700;
  color:#E8E3D8;letter-spacing:.1em;line-height:1.3;margin-bottom:8px;
}
.ahead .author { font-size:14px;color:#8B8575;letter-spacing:.08em }
.acontent {
  font-family:'Noto Serif SC',serif;font-size:17px;line-height:2.4;
  color:#E8E3D8;text-align:center;white-space:pre-wrap;
  letter-spacing:.06em;padding:16px 0;
}
.article.long .acontent { text-align:justify;text-indent:2em;font-size:16px;line-height:2 }
.sec {
  margin-top:40px;padding-top:16px;
  border-top:1px solid #2D2B26;
}
.sec h4 {
  font-family:'Noto Serif SC',serif;font-size:15px;font-weight:600;
  color:#E8E3D8;letter-spacing:.12em;margin-bottom:16px;
  padding-left:10px;border-left:2px solid #3B5998;
}
.sec p { font-size:14px;color:#C4BEB0;line-height:2;text-indent:2em }
.notes { list-style:none;padding:0 }
.notes li { font-size:14px;color:#C4BEB0;line-height:1.9;padding:4px 0 }
.notes li b { color:#E8E3D8;margin-right:4px }
.tags {
  margin-top:32px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.tags em {
  font-size:11px;color:#7BA686;background:rgba(123,166,134,.1);
  padding:2px 10px;border-radius:100px;font-style:normal;letter-spacing:.04em;
}
.credit {
  margin-top:16px;font-size:11px;color:#8B8575;text-align:right;
}
.credit a { color:#3B5998;text-decoration:underline;text-underline-offset:2px }

/* ===== 译文 / 赏析 / 注释 公用节 ===== */
.sec.translation p,
.sec.appreciation p {
  font-size:14px;color:#C4BEB0;line-height:2;text-indent:2em;margin:0;
}
/* 字词解释列表 */
.explist {
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;
}
.expitem {
  display:flex;align-items:baseline;gap:6px;
  padding:4px 10px;background:rgba(255,255,255,.03);
  border-radius:6px;border:1px solid rgba(255,255,255,.04);
}
.expitem dt {
  font-family:'Noto Serif SC',serif;font-size:14px;font-weight:600;
  color:#E8E3D8;min-width:fit-content;
}
.expitem dd {
  font-size:13px;color:#C4BEB0;line-height:1.6;margin:0;
}

/* 阅读面板（浮层） */
.fab {
  position:fixed;bottom:20px;right:20px;width:44px;height:44px;
  border-radius:50%;background:rgba(28,27,24,.9);
  border:1px solid rgba(255,255,255,.08);cursor:pointer;
  font-size:20px;display:flex;align-items:center;justify-content:center;
  color:#8B8575;transition:all .2s;z-index:90;
  backdrop-filter:blur(10px);
}
.fab:hover { color:#E8E3D8;background:rgba(45,43,38,.9) }

.panel {
  position:fixed;bottom:72px;right:20px;width:300px;
  background:rgba(28,27,24,.95);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:20px;z-index:200;
  backdrop-filter:blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.panel h5 {
  font-family:'Noto Serif SC',serif;font-size:13px;color:#8B8575;
  letter-spacing:.1em;margin:14px 0 8px;
}
.panel h5:first-of-type { margin-top:0 }
.panel h5 .hint {
  font-size:11px;color:#5A5548;letter-spacing:0;margin-left:6px;font-weight:400;
}
.panel .opts { display:flex;gap:6px;flex-wrap:wrap }
.panel .opt {
  font-family:'Noto Serif SC',serif;font-size:13px;
  padding:6px 14px;border:1px solid #2D2B26;border-radius:8px;
  background:transparent;color:#C4BEB0;cursor:pointer;transition:all .2s;
}
.panel .opt:hover { border-color:#8B8575 }
.panel .opt.active {
  border-color:#C5373A;color:#C5373A;
  background:rgba(197,55,58,.1);
}
.panel .rowset {
  display:flex;align-items:center;gap:12px;
}
.panel .rowset input[type=range] {
  flex:1;accent-color:#C5373A;
}
.panel .rowset .val { font-size:12px;color:#8B8575;min-width:40px }
.panel .panel-head {
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Noto Serif SC',serif;font-size:14px;color:#E8E3D8;
  letter-spacing:.12em;font-weight:600;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.panel .panel-head .title { letter-spacing:.12em }
.panel .panel-head .x,
.panel .panel-close {
  width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(255,255,255,.04);color:#8B8575;
  font-size:18px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .2s;
}
.panel .panel-head .x:hover,
.panel .panel-close:hover { background:rgba(255,255,255,.1);color:#E8E3D8 }
.panel .actions {
  display:flex;gap:8px;margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.panel .reset-btn,
.panel .ok-btn {
  flex:1;font-family:'Noto Serif SC',serif;font-size:13px;
  padding:8px 12px;border-radius:8px;cursor:pointer;
  border:1px solid #2D2B26;background:transparent;
  color:#C4BEB0;transition:all .2s;letter-spacing:.04em;
}
.panel .reset-btn:hover { border-color:#8B8575;color:#E8E3D8 }
.panel .ok-btn {
  background:rgba(197,55,58,.15);border-color:#C5373A;color:#E8655A;
}
.panel .ok-btn:hover { background:rgba(197,55,58,.25);color:#fff }

/* 全局偏好面板（顶部导航 ⚙）— 在桌面端居中显示 */
.panel.gpanel {
  position:fixed;top:64px;right:16px;width:320px;bottom:auto;
  animation:popIn .25s ease-out;
}
@media (min-width: 768px) {
  .panel.gpanel { right:24px;width:340px }
}

.pop-enter-active { animation:popIn .25s ease-out }
.pop-leave-active { animation:popOut .2s ease-in }
@keyframes popIn {
  from { opacity:0;transform:scale(.9) translateY(8px) }
  to { opacity:1;transform:scale(1) translateY(0) }
}
@keyframes popOut {
  from { opacity:1;transform:scale(1) }
  to { opacity:0;transform:scale(.9) translateY(8px) }
}

/* ===== 响应式：小屏适配 ===== */
@media (max-width: 640px) {
  .siteheader { min-height:200px }
  .hero-seal { width:36px;height:36px;font-size:16px;top:16px;right:16px }
  .poem-body { font-size:16px;padding:24px 16px }
  .poem-header .poem-title { font-size:22px }
  .row { padding:35px 12px }
  .row .t { font-size:15px }
  .theme-grid { grid-template-columns:repeat(2,1fr) }
  .pcard { padding:16px }
  .searchbar { flex-direction:column }
  .searchbar input { width:100% }
  .apaper { padding:24px 16px }
  .panel { right:8px;left:8px;width:auto }
}

/* ===== 旧版 loading 兼容 ===== */
.loading {
  text-align:center;padding:60px 24px;
  font-family:'Noto Serif SC',serif;font-size:14px;
  color:#8B8575;letter-spacing:.2em;
}

/* ===== 通用按钮 ===== */
.btn {
  font-family:'Noto Serif SC',serif;font-size:13px;padding:8px 18px;
  border-radius:6px;border:1px solid transparent;cursor:pointer;
  transition:all .2s;letter-spacing:.06em;white-space:nowrap;background:none;
}
.btn.primary { background:#E8E3D8;color:#151412;border-color:#E8E3D8 }
.btn.primary:hover { background:#C4BEB0;border-color:#C4BEB0 }
.btn.ghost { border-color:#2D2B26;color:#C4BEB0;background:#1C1B18 }
.btn.ghost:hover { border-color:#8B8575;color:#E8E3D8;background:#2D2B26 }

/* ===== 用户菜单（顶部导航） ===== */
.usermenu { position:relative; }
.um-login {
  padding:6px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;
  color:#fff;background:linear-gradient(135deg,#C5373A,#E8655A);border:none;transition:all .2s;white-space:nowrap;
}
.um-login:hover { filter:brightness(1.08); }
.um-trigger {
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;border-radius:100px;cursor:pointer;
  font-size:13px;color:#C4BEB0;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);transition:all .2s;white-space:nowrap;
}
.um-trigger:hover { color:#E8E3D8;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07); }
.um-avatar {
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,#C5373A,#E8655A);color:#fff;font-size:12px;
}
.um-avatar.um-anon { background:linear-gradient(135deg,#3A4A35,#5A6B55); }
.um-name { max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.um-caret { font-size:10px;color:#8B8575; }
.um-drop {
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  min-width:196px;padding:8px;border-radius:12px;
  background:rgba(28,27,24,.98);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(0,0,0,.5);backdrop-filter:blur(12px);
}
.um-meta { padding:8px 10px 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:6px; }
.um-meta-name { font-size:14px;color:#E8E3D8;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.um-meta-type { font-size:11px;color:#8B8575;margin-top:3px; }
.um-item {
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13px;color:#C4BEB0;background:none;border:none;text-align:left;transition:all .15s;
}
.um-item:hover { background:rgba(255,255,255,.06);color:#E8E3D8; }

/* ===== 评论区 ===== */
.comments-wrap {
  position:relative;z-index:2;max-width:720px;margin:0 auto;padding:8px 16px 120px;
}
@media (min-width:1024px){ .comments-wrap { max-width:800px } }
.comments {
  background:rgba(28,27,24,.85);backdrop-filter:blur(8px);
  border-radius:16px;padding:26px 22px;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  font-family:'Noto Sans SC',system-ui,sans-serif;
}
.comments-head {
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06);
}
.comments-head h3 {
  font-family:'Noto Serif SC',serif;font-size:16px;font-weight:600;color:#E8E3D8;letter-spacing:.12em;margin:0;
}
.comments-count { font-size:12px;color:#8B8575; }
.comments-sort {
  margin-left:auto;font-size:12px;color:#8B8575;background:none;border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:4px 10px;cursor:pointer;transition:all .15s;
}
.comments-sort:hover { color:#E8E3D8;border-color:rgba(255,255,255,.2); }

.comment-editor { margin-bottom:16px; }
.editor-gate {
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:16px;font-size:13px;color:#8B8575;
}
.gate-or { color:#6E6A60;font-size:12px; }
.editor-input {
  width:100%;min-height:80px;resize:vertical;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px;
  color:#E8E3D8;outline:none;font-family:inherit;font-size:14px;line-height:1.7;transition:all .15s;
}
.editor-input:focus { border-color:rgba(197,55,58,.4);background:rgba(255,255,255,.05); }
.editor-input::placeholder { color:#6E6A60; }
.editor-bar { display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap; }
.editor-anon { display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8B8575;cursor:pointer;user-select:none; }
.editor-anon input { accent-color:#C5373A;width:14px;height:14px; }
.editor-count { margin-left:auto;font-size:11px;color:#6E6A60; }
.editor-error { color:#E8655A;font-size:12px;margin-top:8px; }

/* 通用按钮（评论 / 弹窗复用） */
.btn-primary {
  border:none;cursor:pointer;font-size:13px;font-weight:500;padding:8px 18px;border-radius:9px;
  background:linear-gradient(135deg,#C5373A,#E8655A);color:#fff;transition:all .2s;letter-spacing:.04em;white-space:nowrap;
}
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn-primary:disabled { opacity:.5;cursor:not-allowed; }
.btn-ghost {
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#C4BEB0;cursor:pointer;
  font-size:13px;padding:8px 16px;border-radius:9px;transition:all .2s;white-space:nowrap;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.2);color:#E8E3D8;background:rgba(255,255,255,.08); }
.btn-text {
  border:none;background:none;color:#C5373A;cursor:pointer;font-size:13px;padding:6px 4px;transition:all .15s;
}
.btn-text:hover { text-decoration:underline; }
.btn-primary.sm, .btn-ghost.sm, .btn-text.sm { font-size:12px;padding:7px 14px; }

.comments-loading, .comments-empty {
  text-align:center;color:#6E6A60;font-size:13px;padding:36px 0;
}
.comments-list { list-style:none;margin:0;padding:0; }
.comment { display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05); }
.comment:last-child { border-bottom:none; }
.c-avatar {
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;
  background:linear-gradient(135deg,#5A5A5A,#8B8B8B);
}
.c-avatar.anon { background:linear-gradient(135deg,#3A4A35,#5A6B55); }
.c-body { flex:1;min-width:0; }
.c-meta { display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap; }
.c-name { font-size:13px;font-weight:500;color:#E8E3D8; }
.c-tag {
  font-size:10px;color:#8B8575;border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:1px 5px;
}
.c-time { font-size:11px;color:#6E6A60; }
.c-content { font-size:14px;line-height:1.7;color:#D4CFC5;white-space:pre-wrap;word-break:break-word; }
.c-actions { display:flex;align-items:center;gap:14px;margin-top:8px; }
.c-like {
  display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#8B8575;
  background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .15s;
}
.c-like:hover { color:#E8E3D8;background:rgba(255,255,255,.05); }
.c-like.liked { color:#C5373A; }
.c-like.liked:hover { background:rgba(197,55,58,.12); }
.c-del { background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .15s;font-size:12px;color:#6E6A60; }
.c-del:hover { color:#E8655A;background:rgba(232,101,90,.1); }

/* 楼中楼回复 */
.replies {
  list-style:none;margin:12px 0 0;padding:12px 0 0;
  border-top:1px dashed rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:12px;
}
.reply { display:flex;gap:10px; }
.c-avatar.sm { width:30px;height:30px;font-size:12px; }
.reply .c-body { flex:1;min-width:0; }
.reply .c-content { font-size:13px; }
.c-reply-to { font-size:11px;color:#C5373A; }
.c-reply {
  background:none;border:none;cursor:pointer;font-size:12px;color:#6E6A60;
  padding:4px 8px;border-radius:8px;transition:all .15s;
}
.c-reply:hover { color:#E8E3D8;background:rgba(255,255,255,.05); }
.c-like.sm, .c-reply.sm { font-size:11px;padding:3px 7px;gap:4px; }
.reply-editor { margin-top:12px; }
.reply-editor .editor-input {
  width:100%;resize:vertical;font:inherit;font-size:13px;line-height:1.6;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;color:#D4CFC5;padding:8px 10px;
}
.reply-editor .editor-input::placeholder { color:#6E6A60; }
.reply-editor .editor-bar { display:flex;align-items:center;gap:10px;margin-top:8px; }
.reply-editor .editor-anon { font-size:12px;color:#8B8575;display:inline-flex;align-items:center;gap:5px; }

/* 评论区主题适配（与 apaper 一致） */
html.t-bright .comments { background:rgba(245,242,237,.9);border-color:rgba(0,0,0,.07);box-shadow:0 2px 12px rgba(0,0,0,.06); }
html.t-bright .comments-head { border-color:rgba(0,0,0,.08); }
html.t-bright .comments-head h3 { color:#2C2C2C; }
html.t-bright .comments-count { color:#9A958C; }
html.t-bright .comments-sort { color:#9A958C;border-color:rgba(0,0,0,.12); }
html.t-bright .comments-sort:hover { color:#2C2C2C;border-color:rgba(0,0,0,.2); }
html.t-bright .editor-gate { background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);color:#9A958C; }
html.t-bright .btn-text { color:#C5373A; }
html.t-bright .editor-input { background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#2C2C2C; }
html.t-bright .editor-input::placeholder { color:#B0ABA2; }
html.t-bright .comment { border-color:rgba(0,0,0,.07); }
html.t-bright .c-name { color:#2C2C2C; }
html.t-bright .c-content { color:#3A3A3A; }
html.t-bright .c-time { color:#9A958C; }
html.t-bright .comments-empty, html.t-bright .comments-loading { color:#9A958C; }
html.t-bright .c-avatar { background:linear-gradient(135deg,#8B8B8B,#B0B0B0); }
html.t-bright .c-avatar.anon { background:linear-gradient(135deg,#7FA86F,#A6C293); }
html.t-bright .c-like:hover { background:rgba(0,0,0,.05); }
html.t-bright .btn-ghost { border-color:rgba(0,0,0,.15);color:#5A5A5A;background:rgba(0,0,0,.03); }
html.t-bright .btn-ghost:hover { color:#2C2C2C;background:rgba(0,0,0,.06); }

html.t-warm .comments { background:rgba(36,31,24,.88);border-color:rgba(184,150,60,.12); }
html.t-warm .comments-head { border-color:rgba(184,150,60,.14); }
html.t-warm .comments-head h3 { color:#E8D9A8; }
html.t-warm .comments-count, html.t-warm .comments-sort { color:#B8A070; }
html.t-warm .comments-sort { border-color:rgba(184,150,60,.2); }
html.t-warm .editor-gate { background:rgba(184,150,60,.06);border-color:rgba(184,150,60,.16);color:#B8A070; }
html.t-warm .editor-input { background:rgba(184,150,60,.06);border-color:rgba(184,150,60,.16);color:#E8D9A8; }
html.t-warm .comment { border-color:rgba(184,150,60,.12); }
html.t-warm .c-name { color:#D4C9A8; }
html.t-warm .c-content { color:#C9BC95; }
html.t-warm .c-time { color:#B8A070; }
html.t-warm .comments-empty, html.t-warm .comments-loading { color:#B8A070; }
html.t-warm .c-avatar { background:linear-gradient(135deg,#8A6E2E,#C0A050); }
html.t-warm .c-avatar.anon { background:linear-gradient(135deg,#6E5524,#9C7A38); }
html.t-warm .c-like:hover { background:rgba(184,150,60,.1); }
html.t-warm .btn-ghost { border-color:rgba(184,150,60,.2);color:#D4C9A8;background:rgba(184,150,60,.06); }
html.t-warm .btn-ghost:hover { color:#E8D9A8;background:rgba(184,150,60,.1); }
html.t-warm .btn-text { color:#C99B4A; }

html.t-eye .comments { background:rgba(218,232,210,.92);border-color:rgba(58,74,53,.14);box-shadow:0 2px 12px rgba(0,0,0,.08); }
html.t-eye .comments-head { border-color:rgba(58,74,53,.16); }
html.t-eye .comments-head h3 { color:#3A4A35; }
html.t-eye .comments-count, html.t-eye .comments-sort { color:#6E7E62; }
html.t-eye .comments-sort { border-color:rgba(58,74,53,.18); }
html.t-eye .editor-gate { background:rgba(58,74,53,.06);border-color:rgba(58,74,53,.16);color:#6E7E62; }
html.t-eye .editor-input { background:rgba(58,74,53,.06);border-color:rgba(58,74,53,.16);color:#3A4A35; }
html.t-eye .comment { border-color:rgba(58,74,53,.14); }
html.t-eye .c-name { color:#3F4F3A; }
html.t-eye .c-content { color:#3F4F3A; }
html.t-eye .c-time { color:#6E7E62; }
html.t-eye .comments-empty, html.t-eye .comments-loading { color:#6E7E62; }
html.t-eye .c-avatar { background:linear-gradient(135deg,#7FA86F,#A6C293); }
html.t-eye .c-avatar.anon { background:linear-gradient(135deg,#9CB07C,#C0CF9E); }
html.t-eye .c-like.liked { color:#6E8B3A; }
html.t-eye .c-like.liked:hover { background:rgba(110,139,58,.12); }
html.t-eye .btn-ghost { border-color:rgba(58,74,53,.2);color:#5A6B55;background:rgba(58,74,53,.06); }
html.t-eye .btn-ghost:hover { color:#3A4A35;background:rgba(58,74,53,.1); }

/* ===== 登录弹窗 ===== */
.modal-mask {
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);padding:16px;
}
.auth-card {
  width:100%;max-width:380px;background:rgba(28,27,24,.98);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6);
  font-family:'Noto Sans SC',system-ui,sans-serif;position:relative;
}
.auth-x {
  position:absolute;top:14px;right:16px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.05);border:none;color:#8B8575;font-size:18px;line-height:1;cursor:pointer;transition:all .15s;
}
.auth-x:hover { background:rgba(255,255,255,.1);color:#E8E3D8; }
.auth-title { text-align:center;font-family:'Noto Serif SC',serif;font-size:20px;color:#E8E3D8;margin-bottom:6px;letter-spacing:.04em; }
.auth-sub { text-align:center;font-size:12px;color:#8B8575;margin-bottom:18px; }
.auth-tabs { display:flex;gap:6px;background:rgba(255,255,255,.04);border-radius:10px;padding:4px;margin-bottom:18px; }
.auth-tabs button {
  flex:1;padding:8px;border-radius:8px;border:none;background:none;cursor:pointer;
  font-size:13px;color:#8B8575;transition:all .15s;
}
.auth-tabs button.active { background:rgba(255,255,255,.08);color:#E8E3D8; }
.auth-pane { display:flex;flex-direction:column;gap:12px; }
.wx-tip { font-size:13px;color:#8B8575;text-align:center; }
.btn-wx {
  width:100%;padding:11px;border-radius:10px;border:none;cursor:pointer;
  font-size:14px;font-weight:500;color:#fff;transition:all .2s;
  background:linear-gradient(135deg,#3D9A5B,#5CB97A);display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn-wx:hover:not(:disabled) { filter:brightness(1.08); }
.btn-wx:disabled { opacity:.5;cursor:not-allowed; }
.wx-ico { font-weight:700; }
.wx-note { font-size:11px;color:#6E6A60;line-height:1.6;text-align:center; }
.auth-input {
  width:100%;padding:11px 12px;border-radius:10px;font-size:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#E8E3D8;outline:none;transition:all .15s;
}
.auth-input:focus { border-color:rgba(197,55,58,.5);background:rgba(255,255,255,.06); }
.auth-code-row { display:flex;gap:8px; }
.auth-code-row .auth-input { flex:1; }
.auth-send {
  flex:none;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#C4BEB0;font-size:13px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.auth-send:hover:not(:disabled) { background:rgba(255,255,255,.08);color:#E8E3D8; }
.auth-send:disabled { opacity:.5;cursor:not-allowed; }
.auth-dev-code { font-size:12px;color:#8B8575;text-align:center; }
.auth-dev-code b { color:#E8655A;letter-spacing:.1em; }
.anon-tip { font-size:12px;color:#8B8575;line-height:1.6;text-align:center; }
.auth-error { color:#E8655A;font-size:12px;text-align:center;margin-top:10px;min-height:14px; }

/* 登录弹窗过渡 */
.pop-enter-active, .pop-leave-active { transition:opacity .2s ease; }
.pop-enter-from, .pop-leave-to { opacity:0; }

/* 楼中楼回复 · 主题适配 */
html.t-bright .replies { border-top-color:rgba(0,0,0,.08); }
html.t-bright .reply .c-content { color:#3A3A3A; }
html.t-bright .c-reply { color:#9A958C; }
html.t-bright .c-reply:hover { background:rgba(0,0,0,.05); }
html.t-bright .c-reply-to { color:#C5373A; }
html.t-bright .reply-editor .editor-input { background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#2C2C2C; }
html.t-bright .reply-editor .editor-input::placeholder { color:#B0ABA2; }
html.t-bright .reply-editor .editor-anon { color:#9A958C; }

html.t-warm .replies { border-top-color:rgba(184,150,60,.16); }
html.t-warm .reply .c-content { color:#C9BC95; }
html.t-warm .c-reply { color:#B8A070; }
html.t-warm .c-reply:hover { background:rgba(184,150,60,.1); }
html.t-warm .c-reply-to { color:#C99B4A; }
html.t-warm .reply-editor .editor-input { background:rgba(184,150,60,.06);border-color:rgba(184,150,60,.16);color:#E8D9A8; }
html.t-warm .reply-editor .editor-input::placeholder { color:#B8A070; }
html.t-warm .reply-editor .editor-anon { color:#B8A070; }

html.t-eye .replies { border-top-color:rgba(58,74,53,.16); }
html.t-eye .reply .c-content { color:#3F4F3A; }
html.t-eye .c-reply { color:#6E7E62; }
html.t-eye .c-reply:hover { background:rgba(58,74,53,.1); }
html.t-eye .c-reply-to { color:#C5373A; }
html.t-eye .reply-editor .editor-input { background:rgba(58,74,53,.06);border-color:rgba(58,74,53,.16);color:#3F4F3A; }
html.t-eye .reply-editor .editor-input::placeholder { color:#6E7E62; }
html.t-eye .reply-editor .editor-anon { color:#6E7E62; }

/* ===== 顶部用户菜单补充：通知铃铛 / 徽标 ===== */
.um-bell {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;cursor:pointer;border:none;background:none;
  font-size:16px;color:#C4BEB0;transition:all .2s;
}
.um-bell:hover { color:#E8E3D8;background:rgba(255,255,255,.06); }
.um-badge {
  position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:linear-gradient(135deg,#C5373A,#E8655A);color:#fff;
  font-size:10px;line-height:17px;text-align:center;font-weight:700;
}
.um-item-badge {
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#C5373A;color:#fff;font-size:10px;line-height:18px;text-align:center;font-weight:700;
}
.um-danger { color:#E8655A; }
.um-danger:hover { background:rgba(229,101,90,.12);color:#F08A7F; }

/* ===== 登录弹窗补充：邮箱子页签 ===== */
.auth-subtabs { display:flex;gap:6px;margin-bottom:14px; }
.auth-subtabs button {
  flex:1;padding:7px 0;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:#8B8575;font-size:13px;transition:all .2s;
}
.auth-subtabs button:hover { color:#C4BEB0; }
.auth-subtabs button.active { background:rgba(197,55,58,.16);color:#E8655A;border-color:rgba(229,101,90,.35); }

/* ===== 诗词详情：收藏按钮 ===== */
.fav-btn { }
.fav-btn.on { color:#E8655A !important;border-color:rgba(229,101,90,.5) !important;background:rgba(197,55,58,.14) !important; }

/* ===== 广场 ===== */
.square-page { min-height:60vh;padding:28px 0 80px; }
.sq-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap; }
.sq-title { font-size:24px;font-weight:700;color:#E8E3D8;letter-spacing:.06em; }
.sq-sub { font-size:13px;color:#8B8575;margin-top:6px;letter-spacing:.04em; }
.sq-publish { display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07); }
.sq-textarea { min-height:150px;resize:vertical;font-family:'Noto Serif SC',serif; }
.sq-textarea-sm { min-height:80px;resize:vertical;font-family:'Noto Serif SC',serif; }
.sq-row { display:flex;gap:12px; }
.sq-row .auth-input { flex:1; }
.sq-actions { display:flex;gap:12px; }
.sq-state { text-align:center;padding:46px 16px;color:#8B8575;font-size:14px;letter-spacing:.1em; }
.sq-card {
  padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);margin-bottom:14px;cursor:pointer;transition:all .2s;
}
.sq-card:hover { background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);transform:translateY(-1px); }
.sq-card-head { display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap; }
.sq-card-author { font-size:13px;color:#E8655A;font-weight:600; }
.sq-tag { font-size:11px;color:#B8A070;background:rgba(184,150,60,.1);border:1px solid rgba(184,150,60,.2);padding:2px 8px;border-radius:10px; }
.sq-tag-sm { font-size:10px;padding:1px 6px; }
.sq-time { font-size:11px;color:#6E6A60;margin-left:auto; }
.sq-card-title { font-size:17px;font-weight:600;color:#E8E3D8;margin-bottom:6px;letter-spacing:.03em; }
.sq-card-excerpt { font-size:13px;color:#A9A394;line-height:1.7;margin-bottom:10px; }
.sq-card-foot { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.sq-stat { font-size:12px;color:#8B8575; }
.sq-detail {
  padding:26px 26px 20px;border-radius:14px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);margin-bottom:18px;
}
.sq-detail-title { font-size:22px;font-weight:700;color:#E8E3D8;margin:8px 0 14px;letter-spacing:.05em; }
.sq-detail-content { font-size:15px;color:#D6D2C6;line-height:2;white-space:pre-wrap;font-family:'Noto Serif SC',serif; }
.sq-detail-tags { margin-top:14px;display:flex;gap:8px;flex-wrap:wrap; }
.sq-detail-foot { margin-top:18px;display:flex;align-items:center;gap:14px; }
.sq-like-btn {
  padding:7px 18px;border-radius:20px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#C4BEB0;transition:all .2s;
}
.sq-like-btn:hover { border-color:rgba(229,101,90,.5);color:#E8655A; }
.sq-like-btn.liked { background:rgba(197,55,58,.18);border-color:rgba(229,101,90,.55);color:#E8655A; }
.sq-del { padding:7px 16px;border-radius:8px;cursor:pointer;font-size:12px;border:1px solid rgba(229,101,90,.3);background:none;color:#E8655A;transition:all .2s; }
.sq-del:hover { background:rgba(229,101,90,.12); }
.sq-comments { padding:0 4px; }
.sq-comments-title { font-size:15px;color:#E8E3D8;margin-bottom:14px;letter-spacing:.06em; }
.sq-comment-form { display:flex;flex-direction:column;gap:10px;margin-bottom:16px; }
.sq-comment-login { font-size:13px;color:#8B8575;padding:12px 0 16px; }
.sq-link { color:#E8655A;cursor:pointer;text-decoration:underline; }
.sq-comment { padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);margin-bottom:10px; }
.sq-comment-head { display:flex;align-items:center;gap:10px;margin-bottom:5px; }
.sq-comment-author { font-size:12px;color:#B8A070;font-weight:600; }
.sq-comment-text { font-size:14px;color:#D6D2C6;line-height:1.7; }
.sq-err { margin-top:16px; }

/* ===== 我的 ===== */
.me-page { min-height:60vh;padding:28px 0 80px; }
.me-title { font-size:24px;font-weight:700;color:#E8E3D8;letter-spacing:.06em;margin-bottom:22px; }
.me-login-prompt {
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:60px 24px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);text-align:center;
}
.me-login-avatar {
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#C5373A,#E8655A);color:#fff;font-size:26px;font-weight:700;
}
.me-login-text { font-size:14px;color:#8B8575;letter-spacing:.05em; }
.me-head { display:flex;align-items:center;gap:16px;padding:22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);margin-bottom:20px;flex-wrap:wrap; }
.me-avatar-lg { flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.me-avatar-img { width:100%;height:100%;background-size:cover;background-position:center; }
.me-avatar-txt { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#C5373A,#E8655A);color:#fff;font-size:22px;font-weight:700; }
.me-head-main { flex:1;min-width:160px; }
.me-head-name { font-size:18px;font-weight:600;color:#E8E3D8;display:flex;align-items:center;gap:8px; }
.me-type-badge { font-size:11px;color:#B8A070;background:rgba(184,150,60,.12);border:1px solid rgba(184,150,60,.25);padding:1px 8px;border-radius:10px;font-weight:400; }
.me-head-bio { font-size:13px;color:#8B8575;margin-top:6px; }
.me-subtabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px; }
.me-subtab {
  padding:7px 14px;border-radius:20px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#8B8575;transition:all .2s;position:relative;
}
.me-subtab:hover { color:#C4BEB0; }
.me-subtab.active { background:rgba(197,55,58,.16);color:#E8655A;border-color:rgba(229,101,90,.4); }
.me-sub-badge {
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#C5373A;color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:700;
}
.me-msg { padding:10px 14px;border-radius:8px;background:rgba(58,122,70,.14);border:1px solid rgba(90,160,105,.35);color:#8FD09A;font-size:13px;margin-bottom:14px; }
.me-err { margin-bottom:14px; }
.me-stats { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px; }
.me-stat {
  padding:18px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  text-align:center;cursor:pointer;transition:all .2s;
}
.me-stat:hover { background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14); }
.me-stat b { display:block;font-size:24px;color:#E8655A;font-weight:700; }
.me-stat span { font-size:12px;color:#8B8575;margin-top:4px;display:block; }
.me-box { padding:22px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07); }
.me-box-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.me-box-title { font-size:15px;color:#E8E3D8;letter-spacing:.06em;margin-bottom:14px; }
.me-box-head .me-box-title { margin-bottom:0; }
.me-label { display:block;font-size:12px;color:#8B8575;margin:12px 0 6px;letter-spacing:.06em; }
.me-textarea { min-height:90px;resize:vertical;font-family:'Noto Serif SC',serif; }
.me-contact-row { display:flex;gap:8px;font-size:14px;padding:6px 0; }
.me-contact-label { color:#8B8575; }
.me-contact-val { color:#E8E3D8; }
.me-contact-tabs { display:flex;gap:8px;margin:16px 0 14px; }
.me-contact-tabs button {
  flex:1;padding:8px 0;border-radius:8px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#8B8575;transition:all .2s;
}
.me-contact-tabs button.active { background:rgba(197,55,58,.16);color:#E8655A;border-color:rgba(229,101,90,.4); }
.me-contact-form { display:flex;flex-direction:column;gap:10px; }
.me-empty { text-align:center;padding:36px 16px;color:#8B8575;font-size:13px;letter-spacing:.08em; }
.me-item {
  display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:10px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);margin-bottom:10px;cursor:pointer;transition:all .2s;
}
.me-item:hover { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12); }
.me-item-main { flex:1;min-width:0; }
.me-item-title { font-size:14px;color:#E8E3D8;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px; }
.me-item-sub { font-size:12px;color:#8B8575;margin-top:4px; }
.me-post-tag { font-size:10px;color:#B8A070;background:rgba(184,150,60,.12);border:1px solid rgba(184,150,60,.25);padding:0 6px;border-radius:8px;font-weight:400;flex:none; }
.me-del { padding:5px 12px;border-radius:8px;cursor:pointer;font-size:12px;border:1px solid rgba(229,101,90,.3);background:none;color:#E8655A;transition:all .2s;flex:none; }
.me-del:hover { background:rgba(229,101,90,.12); }
.me-notif { display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);margin-bottom:10px; }
.me-notif.unread { border-color:rgba(229,101,90,.35);background:rgba(197,55,58,.07); }
.me-notif-main { flex:1;min-width:0;cursor:pointer; }
.me-notif-title { font-size:14px;color:#E8E3D8; }
.me-notif-sub { font-size:12px;color:#8B8575;margin-top:4px; }

/* ===== 全局主题化（CSS 变量驱动，覆盖写死的暗色值） =====
   --app-* 变量在 index.html <style> 中按 html.t-* 定义；
   本块以相同选择器后置覆盖，使自定义组件随全局主题（暗/亮/暖/护眼）换肤。 */
body { background: var(--app-bg); }
.modal-mask { background: var(--app-mask); }

/* 通用按钮 */
.btn.primary { background: var(--app-text); color: var(--app-bg); border-color: var(--app-text); }
.btn.primary:hover { background: var(--app-text-dim); border-color: var(--app-text-dim); }
.btn.ghost { border-color: var(--app-border-strong); color: var(--app-text-dim); background: var(--app-card); }
.btn.ghost:hover { border-color: var(--app-text-faint); color: var(--app-text); background: var(--app-card-hover); }
.btn-text { color: var(--app-accent); }

/* 分页 */
.pager button { border:1px solid var(--app-border-strong); background: var(--app-input); color: var(--app-text-dim); }
.pager button:hover:not(:disabled) { border-color: var(--app-text-faint); color: var(--app-text); background: var(--app-card-hover); }
.pager .pg { color: var(--app-text-faint); }

/* 顶部用户菜单 */
.um-login { background: linear-gradient(135deg, rgb(var(--verm)), rgb(var(--verm-light))); }
.um-trigger { color: var(--app-text-dim); background: var(--app-card); border-color: var(--app-border); }
.um-trigger:hover { color: var(--app-text); border-color: var(--app-border-strong); background: var(--app-card-hover); }
.um-avatar { background: linear-gradient(135deg, rgb(var(--verm)), rgb(var(--verm-light))); }
.um-avatar.um-anon { background: linear-gradient(135deg, #3A4A35, #5A6B55); }
.um-name { color: var(--app-text-dim); }
.um-caret { color: var(--app-text-faint); }
.um-drop { background: var(--app-nav); border-color: var(--app-border-strong); box-shadow:0 8px 28px rgba(0,0,0,.45); }
.um-meta { border-bottom-color: var(--app-border); }
.um-meta-name { color: var(--app-text); }
.um-meta-type { color: var(--app-text-faint); }
.um-item { color: var(--app-text-dim); }
.um-item:hover { background: var(--app-card-hover); color: var(--app-text); }
.um-bell { color: var(--app-text-faint); }
.um-bell:hover { color: var(--app-text); background: var(--app-card-hover); }
.um-badge { background: linear-gradient(135deg, rgb(var(--verm)), rgb(var(--verm-light))); }
.um-item-badge { background: rgb(var(--verm)); }
.um-danger { color: var(--app-danger); }
.um-danger:hover { background: color-mix(in srgb, var(--app-danger) 14%, transparent); color: var(--app-danger); }

/* 登录弹窗 */
.auth-card { background: var(--app-nav); border-color: var(--app-border-strong); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.auth-x { background: var(--app-card); color: var(--app-text-faint); }
.auth-x:hover { background: var(--app-card-hover); color: var(--app-text); }
.auth-title { color: var(--app-text); }
.auth-sub { color: var(--app-text-faint); }
.auth-tabs { background: var(--app-card); }
.auth-tabs button { color: var(--app-text-faint); }
.auth-tabs button.active { background: var(--app-card-hover); color: var(--app-text); }
.wx-tip { color: var(--app-text-faint); }
.wx-note { color: var(--app-text-mute); }
.auth-input { background: var(--app-card); border-color: var(--app-border); color: var(--app-text); }
.auth-input:focus { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); background: var(--app-card-hover); }
.auth-send { border-color: var(--app-border-strong); background: var(--app-card); color: var(--app-text-dim); }
.auth-send:hover:not(:disabled) { background: var(--app-card-hover); color: var(--app-text); }
.auth-dev-code { color: var(--app-text-faint); }
.auth-dev-code b { color: var(--app-accent); }
.anon-tip { color: var(--app-text-faint); }
.auth-error { color: var(--app-danger); }
.auth-subtabs button { border-color: var(--app-border); background: var(--app-card); color: var(--app-text-faint); }
.auth-subtabs button:hover { color: var(--app-text-dim); }
.auth-subtabs button.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }

/* 阅读偏好面板 / 回顶 / 返回 */
.panel { background: var(--app-nav); border-color: var(--app-border-strong); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.panel .opt { border-color: var(--app-border-strong); color: var(--app-text-dim); }
.panel .opt:hover { border-color: var(--app-text-faint); }
.panel .opt.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 50%, transparent); }
.panel .rowset .val { color: var(--app-text-faint); }
.panel .panel-head .x, .panel .panel-close { background: var(--app-card); color: var(--app-text-faint); }
.panel .panel-head .x:hover, .panel .panel-close:hover { background: var(--app-card-hover); color: var(--app-text); }
.panel .reset-btn, .panel .ok-btn { border-color: var(--app-border-strong); color: var(--app-text-dim); background: var(--app-card); }
.panel .reset-btn:hover { border-color: var(--app-text-faint); color: var(--app-text); }
.panel .ok-btn { background: var(--app-accent-soft); border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); color: var(--app-accent); }
.panel .ok-btn:hover { background: color-mix(in srgb, var(--app-accent) 26%, transparent); color: var(--app-accent); }
.fab { background: var(--app-nav); color: var(--app-text-dim); border-color: var(--app-border-strong); }
.fab:hover { color: var(--app-text); background: var(--app-card-hover); }
.abar .back { color: var(--app-text-dim); border-bottom-color: var(--app-border); }
.abar .back:hover { color: var(--app-text); border-bottom-color: var(--app-text); }
.abar .back.ghost { color: var(--app-text-faint); }

/* 诗词收藏按钮 */
.fav-btn.on { color: var(--app-accent) !important; border-color: color-mix(in srgb, var(--app-accent) 55%, transparent) !important; background: var(--app-accent-soft) !important; }

/* 广场 */
.square-page { background: var(--app-bg); }
.sq-title { color: var(--app-text); }
.sq-sub { color: var(--app-text-faint); }
.sq-publish { background: var(--app-card); border-color: var(--app-border); }
.sq-state { color: var(--app-text-faint); }
.sq-card { background: var(--app-card); border-color: var(--app-border); }
.sq-card:hover { background: var(--app-card-hover); border-color: var(--app-border-strong); }
.sq-card-author { color: var(--app-accent); }
.sq-tag { color: var(--app-gold); background: color-mix(in srgb, var(--app-gold) 12%, transparent); border-color: color-mix(in srgb, var(--app-gold) 26%, transparent); }
.sq-time { color: var(--app-text-mute); }
.sq-card-title { color: var(--app-text); }
.sq-card-excerpt { color: var(--app-text-dim); }
.sq-stat { color: var(--app-text-faint); }
.sq-detail { background: var(--app-card); border-color: var(--app-border); }
.sq-detail-title { color: var(--app-text); }
.sq-detail-content { color: var(--app-text-dim); }
.sq-like-btn { border-color: var(--app-border-strong); background: var(--app-card); color: var(--app-text-dim); }
.sq-like-btn:hover { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); color: var(--app-accent); }
.sq-like-btn.liked { background: var(--app-accent-soft); border-color: color-mix(in srgb, var(--app-accent) 60%, transparent); color: var(--app-accent); }
.sq-del { border-color: color-mix(in srgb, var(--app-danger) 35%, transparent); color: var(--app-danger); }
.sq-del:hover { background: color-mix(in srgb, var(--app-danger) 14%, transparent); }
.sq-comments-title { color: var(--app-text); }
.sq-comment-login { color: var(--app-text-faint); }
.sq-link { color: var(--app-accent); }
.sq-comment { background: var(--app-card); border-color: var(--app-border); }
.sq-comment-author { color: var(--app-gold); }
.sq-comment-text { color: var(--app-text-dim); }

/* 我的 */
.me-page { background: var(--app-bg); }
.me-title { color: var(--app-text); }
.me-login-prompt { background: var(--app-card); border-color: var(--app-border); }
.me-login-avatar { background: linear-gradient(135deg, rgb(var(--verm)), rgb(var(--verm-light))); }
.me-login-text { color: var(--app-text-faint); }
.me-head { background: var(--app-card); border-color: var(--app-border); }
.me-avatar-txt { background: linear-gradient(135deg, rgb(var(--verm)), rgb(var(--verm-light))); }
.me-head-name { color: var(--app-text); }
.me-type-badge { color: var(--app-gold); background: color-mix(in srgb, var(--app-gold) 14%, transparent); border-color: color-mix(in srgb, var(--app-gold) 28%, transparent); }
.me-head-bio { color: var(--app-text-faint); }
.me-subtab { border-color: var(--app-border); background: var(--app-card); color: var(--app-text-faint); }
.me-subtab:hover { color: var(--app-text-dim); }
.me-subtab.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }
.me-sub-badge { background: rgb(var(--verm)); }
.me-msg { background: rgba(58,122,70,.16); border-color: rgba(90,160,105,.4); color: #8FD09A; }
.me-stat { background: var(--app-card); border-color: var(--app-border); }
.me-stat:hover { background: var(--app-card-hover); border-color: var(--app-border-strong); }
.me-stat b { color: var(--app-accent); }
.me-stat span { color: var(--app-text-faint); }
.me-box { background: var(--app-card); border-color: var(--app-border); }
.me-box-title { color: var(--app-text); }
.me-label { color: var(--app-text-faint); }
.me-contact-label { color: var(--app-text-faint); }
.me-contact-val { color: var(--app-text); }
.me-contact-tabs button { border-color: var(--app-border); background: var(--app-card); color: var(--app-text-faint); }
.me-contact-tabs button.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }
.me-empty { color: var(--app-text-faint); }
.me-item { background: var(--app-card); border-color: var(--app-border); }
.me-item:hover { background: var(--app-card-hover); border-color: var(--app-border-strong); }
.me-item-title { color: var(--app-text); }
.me-item-sub { color: var(--app-text-faint); }
.me-post-tag { color: var(--app-gold); background: color-mix(in srgb, var(--app-gold) 14%, transparent); border-color: color-mix(in srgb, var(--app-gold) 28%, transparent); }
.me-del { border-color: color-mix(in srgb, var(--app-danger) 35%, transparent); color: var(--app-danger); }
.me-del:hover { background: color-mix(in srgb, var(--app-danger) 14%, transparent); }
.me-notif { background: var(--app-card); border-color: var(--app-border); }
.me-notif.unread { border-color: color-mix(in srgb, var(--app-danger) 40%, transparent); background: color-mix(in srgb, var(--app-danger) 8%, transparent); }
.me-notif-title { color: var(--app-text); }
.me-notif-sub { color: var(--app-text-faint); }

/* 评论区基础（阅读区细调已由原 html.t-* 规则覆盖） */
.comment-editor .editor-input { background: var(--app-card); border-color: var(--app-border); color: var(--app-text); }
.comment-editor .editor-input::placeholder { color: var(--app-text-faint); }
.comment-editor .editor-count { color: var(--app-text-mute); }
.comments-empty, .comments-loading { color: var(--app-text-faint); }
.c-name { color: var(--app-text); }
.c-time { color: var(--app-text-mute); }
.c-content { color: var(--app-text-dim); }
.c-like, .c-reply, .c-del { color: var(--app-text-faint); }
.c-like:hover, .c-reply:hover, .c-del:hover { color: var(--app-text); }

/* ===== 网站底部：站点统计 ===== */
/* ===== 网站底栏：一行紧凑固定在页面底部 ===== */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  padding: 6px 20px;
  font-size: 11px;
  color: var(--app-text-faint);
  background: rgba(49,49,49,1);
  border-top: 1px solid var(--app-border);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
}
.sf-item { color: var(--app-text-dim); }
.sf-sep { margin: 0 8px; color: var(--app-border-strong); }
.sf-copy { color: var(--app-text-mute); }

/* ===== 全站标签统计（主题页） ===== */
.tag-stats { margin-top: 56px; }
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  padding: 20px; margin-top: 8px;
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 14px;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--app-border); background: var(--app-card-hover);
  color: var(--app-text-dim); border-radius: 999px;
  padding: 4px 12px; font-family: 'Noto Serif SC', serif;
  transition: all .18s;
}
.tag-chip:hover {
  border-color: color-mix(in srgb, var(--app-accent) 55%, transparent);
  color: var(--app-accent); background: var(--app-accent-soft);
}
.tag-chip .tc {
  font-size: 10px; color: var(--app-text-faint); letter-spacing: .02em;
}
.tag-chip:hover .tc { color: var(--app-accent); }
.tag-chip.sz-xl { font-size: 20px; padding: 7px 18px; }
.tag-chip.sz-lg { font-size: 17px; padding: 6px 15px; }
.tag-chip.sz-md { font-size: 14px; padding: 5px 13px; }
.tag-chip.sz-sm { font-size: 12px; padding: 4px 11px; }
.tag-chip.sz-xs { font-size: 11px; padding: 3px 9px; }

/* ===== 搜索页：标签筛选条 ===== */
.search-tagbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 4px; font-size: 13px;
}
.search-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 12px; border-radius: 999px;
  background: var(--app-accent-soft); border: 1px solid color-mix(in srgb, var(--app-accent) 45%, transparent);
  color: var(--app-accent); font-weight: 500;
}
.search-tag-x {
  border: none; background: none; cursor: pointer;
  color: var(--app-accent); font-size: 15px; line-height: 1; padding: 2px;
}
.search-tag-x:hover { opacity: .75; }
.search-tag-hint { color: var(--app-text-faint); }

/* ===== 主题页：每日标签 ===== */
.daily-tags { }
.daily-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.daily-head-left { flex: 1; min-width: 260px; }
.daily-head .btn.ghost { margin-top: 8px; }
.daily-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-top: 10px;
}
.daily-card {
  background: var(--app-card); border: 1px solid var(--app-border);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; min-height: 0;
}
.daily-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--app-border);
}
.daily-tag-btn {
  border: none; background: none; cursor: pointer; padding: 0;
  font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 700;
  color: var(--app-accent); letter-spacing: .05em; transition: opacity .15s;
}
.daily-tag-btn:hover { opacity: .78; text-decoration: underline; }
.daily-tag-count { font-size: 11px; color: var(--app-text-faint); letter-spacing: .04em; }
.daily-poems {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 560px; overflow-y: auto; padding-right: 4px;
}
.daily-poems::-webkit-scrollbar { width: 5px; }
.daily-poems::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 3px; }

/* ===== 底部统计栏：访问统计分隔 ===== */
.sf-stat.sf-sep {
  width: 1px; min-width: 1px; padding: 0; background: var(--app-border-strong);
  align-self: stretch; margin: 4px 0;
}
.sf-sep b, .sf-sep span { display: none; }

/* ===== 广场：动态/配图 子页签 ===== */
.sq-subtabs { display: flex; gap: 8px; margin: -6px 0 20px; }
.sq-subtabs button {
  padding: 7px 20px; border-radius: 20px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--app-border); background: var(--app-card); color: var(--app-text-faint);
  transition: all .2s;
}
.sq-subtabs button:hover { color: var(--app-text-dim); }
.sq-subtabs button.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }

/* ===== 诗意配图 ===== */
.pi-view { min-height: 40vh; }
.pi-upload {
  padding: 20px; border-radius: 14px; margin-bottom: 26px;
  background: var(--app-card); border: 1px solid var(--app-border);
}
.pi-upload-title { font-size: 16px; color: var(--app-text); font-weight: 600; letter-spacing: .04em; }
.pi-upload-sub { font-size: 12px; color: var(--app-text-faint); margin: 6px 0 14px; }
.pi-upload-body { display: flex; gap: 18px; flex-wrap: wrap; }
.pi-file-box {
  flex: none; width: 180px; height: 135px; border-radius: 10px; cursor: pointer;
  border: 2px dashed var(--app-border-strong); background: var(--app-card-hover);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color .2s;
}
.pi-file-box:hover { border-color: var(--app-accent); }
.pi-file-box img { width: 100%; height: 100%; object-fit: cover; }
.pi-file-hint { text-align: center; font-size: 13px; color: var(--app-text-faint); line-height: 1.7; }
.pi-file-hint small { font-size: 11px; }
.pi-upload-fields { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.pi-poem-pick { display: flex; gap: 8px; }
.pi-poem-pick .auth-input { flex: 1; }
.pi-poem-results {
  display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto;
  padding: 8px; border-radius: 8px; background: var(--app-card-hover); border: 1px solid var(--app-border);
}
.pi-poem-item {
  text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; border: none;
  background: none; color: var(--app-text-dim); font-size: 13px; transition: all .15s;
}
.pi-poem-item:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.pi-poem-chosen { font-size: 13px; color: var(--app-text); padding: 6px 10px; border-radius: 8px; background: var(--app-accent-soft); border: 1px solid color-mix(in srgb, var(--app-accent) 40%, transparent); }
.pi-poem-chosen b { color: var(--app-accent); }
.pi-msg { font-size: 13px; color: var(--app-danger); }
.pi-msg.ok { color: #8FD09A; }
.pi-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pi-feed-head h4 { font-size: 16px; color: var(--app-text); letter-spacing: .04em; }
.pi-total { font-size: 12px; color: var(--app-text-faint); margin-left: 6px; }
.pi-hint { font-size: 12px; color: var(--app-text-faint); }
.pi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.pi-card {
  background: var(--app-card); border: 1px solid var(--app-border);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  transition: all .2s;
}
.pi-card:hover { border-color: var(--app-border-strong); }
.pi-img { position: relative; aspect-ratio: 4 / 3; cursor: zoom-in; background: #000; }
.pi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-img-rank {
  position: absolute; top: 8px; right: 8px; padding: 3px 10px; border-radius: 12px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700;
}
.pi-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pi-poem-link { font-size: 14px; color: var(--app-accent); cursor: pointer; font-weight: 600; }
.pi-poem-link:hover { text-decoration: underline; }
.pi-note { font-size: 12px; color: var(--app-text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 19px; }
.pi-meta { font-size: 11px; color: var(--app-text-faint); }
.pi-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.pi-vote {
  padding: 5px 14px; border-radius: 16px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--app-border-strong); background: var(--app-card); color: var(--app-text-dim);
  transition: all .18s;
}
.pi-vote:hover:not(:disabled) { border-color: var(--app-accent); color: var(--app-accent); background: var(--app-accent-soft); }
.pi-vote.voted, .pi-vote:disabled { background: var(--app-accent-soft); border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); color: var(--app-accent); cursor: default; }

/* 诗词详情页配图区 */
.poem-images {
  position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 20px 16px 8px;
}
.pi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pi-head h4 { font-size: 15px; color: var(--app-text); letter-spacing: .08em; }
.pi-count { font-size: 12px; color: var(--app-text-faint); margin-left: 6px; }
.pi-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pi-head .pi-hint { font-size: 11px; }
.pi-empty { text-align: center; padding: 22px 12px; color: var(--app-text-faint); font-size: 13px; letter-spacing: .05em; border: 1px dashed var(--app-border); border-radius: 10px; }
.pi-err { color: var(--app-danger); font-size: 12px; margin-bottom: 8px; }

/* ===== 诗词详情页：默认居中竖排（单栏阅读）→ 下滑到「配图/评论」越过视窗中线后切左右两栏 ===== */
/* 默认（未分栏）：居中单栏阅读，正文宽度舒适（约 720px），诗词在上、配图与评论依次居中堆叠 */
.poem-layout {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 76px;
  display: block;
  min-height: calc(100vh - 130px);
}
/* 左诗词卡（默认在文档流中；分栏后由 .split 切换为 fixed 悬浮） */
.poem-left {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 18px;
  padding: 30px 34px 38px;
  z-index: 2;
}
/* 详情页内层 .apaper 不再作为独立卡片（外层 .poem-left 已是卡片），仅保留留白 */
.poem-left .article { max-width: none; margin: 0; padding: 0; }
.poem-left .abar { margin-bottom: 18px; }
.poem-left .apaper { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
.poem-left .acontent { padding: 22px 0; }

/* ---- 分栏态 (.split) ：编辑式两栏，左诗词固定悬浮，右栏自然滚动 ---- */
.poem-layout.split {
  width: 80%;
  max-width: 1240px;
  display: flex;
  align-items: flex-start;
  gap: 38px;
}
/* 左诗词：fixed 钉在导航下沿，自身超高时内部滚动（避免长诗时 sticky 失效）。
   用 top/bottom 双约束替代 max-height：top:64 给导航、bottom:38 给底栏（30+8）——这样无论 zoom 多少，
   卡片高度 = 100vh - 64 - 38，永远不会伸进底栏被遮住 */
.poem-layout.split .poem-left {
  position: fixed;
  top: 64px;
  bottom: 38px;
  left: calc((100vw - min(80vw, 1240px)) / 2);
  width: calc((min(80vw, 1240px) - 38px) * 0.44);
  overflow-y: auto;
  z-index: 5;
}
/* 右栏：自然滚动的编辑流，让出左栏宽度 + 间距；分栏时 translateY 补偿滚动偏移让顶部与左栏对齐 */
.poem-layout.split .poem-right {
  margin-left: calc((min(80vw, 1240px) - 38px) * 0.44 + 38px);
  transform: translateY(var(--right-y, 0px));
}
.poem-right { min-width: 0; }
.poem-layout.split .poem-images { max-width: none; padding: 4px 0 32px; }
.poem-layout.split .comments-wrap { max-width: none; padding: 0 4px 120px; }
/* 分栏时配图网格不再内部嵌套滚动，整页右栏自然滚动 */
.poem-layout.split .pi-rail { max-height: none; overflow: visible; }

/* 配图独立滚动容器（单栏模式用） */
.pi-rail {
  max-height: 72vh; overflow-y: auto; padding: 14px;
  border: 1px solid var(--app-border); border-radius: 16px;
  background: var(--app-card);
}
.pi-rail::-webkit-scrollbar { width: 6px; }
.pi-rail::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 3px; }
.poem-right .pi-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ===== 「更多图片」弹窗（完整配图列表） ===== */
.pi-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(3px);
  padding: 40px 20px;
}
.pi-modal {
  width: 96vw; height: 92vh; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 18px;
  overflow: hidden;
}
.pi-m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--app-border);
  font-size: 15px; color: var(--app-text); letter-spacing: .06em;
}
.pi-m-close {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--app-border); background: var(--app-card-hover);
  color: var(--app-text-dim); font-size: 18px; line-height: 1; cursor: pointer;
  transition: all .18s;
}
.pi-m-close:hover { background: var(--app-danger-soft, rgba(197,55,58,.12)); color: var(--app-danger); }
.pi-m-body { padding: 18px 22px 22px; overflow-y: auto; }
/* 「更多图片」弹窗：瀑布流（多列布局，卡片保留原始宽高比） */
.pi-m-body .pi-grid {
  display: block;
  columns: 250px;            /* 浏览器按宽度自动计算列数，自适应瀑布流 */
  column-gap: 14px;
}
.pi-m-body .pi-card {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;       /* 关键：防止卡片被拆到两列之间 */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* 弹窗内图片保留各自宽高比（取消 4:3 固定比例与裁切），形成高低错落瀑布流 */
.pi-m-body .pi-img { aspect-ratio: auto; background: var(--app-card-hover); }
.pi-m-body .pi-img img { height: auto; }

/* ===== 精选：人气最高配图大图 ===== */
.pi-featured {
  position: relative;
  margin-bottom: 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  background: var(--app-card);
}
.pi-featured .pf-img { width: 100%; display: block; max-height: 360px; object-fit: cover; }
.pi-featured .pf-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; padding: 3px 10px; border-radius: 100px;
  background: rgba(197,55,58,.88); color: #fff; letter-spacing: .06em;
  backdrop-filter: blur(4px);
}
.pi-featured .pf-cap {
  padding: 10px 16px 4px;
  font-size: 13px; color: var(--app-text-dim); line-height: 1.65;
}
.pi-featured .pf-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 14px 14px;
}
.pi-featured .pf-author { font-size: 12px; color: var(--app-text-faint); }

/* 右栏区块垂直节奏（编辑式留白，让内容呼吸） */
.poem-right > section { margin-bottom: 30px; }

/* ===== 分栏右侧固定面板 (split-panel)：默认隐藏，.split 时显示 ===== */
.split-panel { display: none; }

/* 面板本体：fixed 定位，填满导航下方到视窗底部 */
.split-panel {
  position: fixed;
  top: 64px;
  right: calc((100vw - min(75vw, 1280px)) / 2);
  width: calc((min(75vw, 1280px) - 28px) * 0.58);
  height: calc(100vh - 72px);
  flex-direction: column;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  overflow: hidden;
  z-index: 20;
}

/* --- 上半：人气最高配图大展 --- */
.sp-image {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.sp-image img.sp-img-main {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.sp-img-tags {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; z-index: 2;
}
.sp-tag {
  font-size: 11px; padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  backdrop-filter: blur(6px);
  letter-spacing: .06em;
}
.sp-tag.hot { background: rgba(220,60,60,.7); }
.sp-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #e8e4df;
  font-size: 13px;
  line-height: 1.5;
}
.sp-image-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--app-text-faint);
  background: var(--app-bg);
}

/* --- 下半：评论预览列表 --- */
.sp-comments {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--app-border);
}
.sp-c-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 6px;
  font-size: 13px; font-weight: 600;
  color: var(--app-text);
  letter-spacing: .08em;
  flex-shrink: 0;
}
.sp-c-count { font-size: 11px; color: var(--app-text-faint); font-weight: 400; }

.sp-c-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
  min-height: 0;
}
.sp-c-list::-webkit-scrollbar { width: 4px; }
.sp-c-list::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 2px; }

.sp-c-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--app-border);
  transition: background .15s;
}
.sp-c-item:hover { background: rgba(255,255,255,.03); }
.sp-c-item:last-child { border-bottom: none; }

.sp-c-avatar {
  flex-shrink: 0;
  width: 28px; height: 28px; line-height: 28px;
  text-align: center; border-radius: 50%;
  font-size: 12px; font-weight: 600;
  background: var(--app-accent, #c4a35a); color: #fff;
}
.sp-c-avatar.anon { background: #556; }

.sp-c-body { flex: 1; min-width: 0; }
.sp-c-meta {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 2px;
}
.sp-c-name { font-size: 12px; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-c-tag { font-size: 10px; padding: 0 5px; border-radius: 8px; background: #334; color: #aab; }
.sp-c-time { font-size: 10px; color: var(--app-text-faint); margin-left: auto; flex-shrink: 0; }
.sp-c-content {
  font-size: 12px; line-height: 1.55;
  color: var(--app-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-c-like {
  flex-shrink: 0;
  font-size: 11px; color: var(--app-text-faint);
  margin-top: 2px;
  align-self: flex-start;
}
.sp-c-empty { text-align: center; padding: 20px; color: var(--app-text-faint); font-size: 12px; }

/* 更多按钮 */
.sp-more-btn {
  display: block; width: 100%; padding: 8px;
  background: transparent;
  border: none; border-top: 1px solid var(--app-border);
  font-size: 12px; color: var(--app-text-faint);
  cursor: pointer; letter-spacing: .2em;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.sp-more-btn:hover { color: var(--app-text); background: rgba(255,255,255,.04); }

/* ===== 「更多」弹窗：仅覆盖右侧区域 ===== */
.sp-modal-overlay {
  position: fixed;
  top: 64px;
  right: calc((100vw - min(75vw, 1280px)) / 2);
  width: calc((min(75vw, 1280px) - 28px) * 0.58);
  height: calc(100vh - 72px);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  z-index: 60;
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
}
.sp-modal {
  width: 100%; height: 100%;
  background: var(--app-card);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sp-m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-border);
  font-size: 14px; font-weight: 600;
  letter-spacing: .08em;
  flex-shrink: 0;
}
.sp-m-close {
  background: none; border: none; font-size: 22px;
  color: var(--app-text-faint); cursor: pointer;
  line-height: 1; padding: 0 4px;
}
.sp-m-close:hover { color: var(--app-text); }
.sp-m-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 32px;
}
.sp-m-body::-webkit-scrollbar { width: 6px; }
.sp-m-body::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 3px; }
.sp-m-section { margin-bottom: 24px; }
.sp-m-section h4 { font-size: 14px; margin-bottom: 10px; color: var(--app-text); letter-spacing: .06em; }
.sp-m-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* 弹窗过渡 */
.fade-enter-active, .fade-leave-active { transition: opacity .25s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 背景底图：清晰展示配图（原图亮度/饱和度，无模糊，不透明度 .85） */
.artbg {
  filter: brightness(1) saturate(1) blur(0px);
  transform: scale(1.12);
  opacity: .85;
}

/* 响应式：窄屏始终单栏（不分栏） */
@media (max-width: 980px) {
  .poem-layout, .poem-layout.split { width: auto; max-width: none; display: block; padding-top: 68px; }
  .poem-left, .poem-layout.split .poem-left { position: static; left: auto; width: auto; max-height: none; overflow: visible; padding: 18px 16px 22px; }
  .poem-layout.split .poem-right { margin-left: 0; }
  .poem-left .article { padding: 0; }
  .poem-right { margin-left: 0; padding: 0 14px 24px; }
  .pi-rail { max-height: none; }
  .poem-right .comments-wrap { padding: 18px 16px 90px; max-width: none; }
  /* 窄屏永远不显示分栏面板和弹窗 */
  .split-panel, .sp-modal-overlay { display: none !important; }
  .poem-layout.split .poem-right > .poem-images,
  .poem-layout.split .poem-right > .comments-wrap { display: block !important; }
}


/* ==========================================================================
   AI 功能样式（详情页赏析面板 + AI 助手页）
   全部使用 --app-* 主题变量，跟随浅色/深色/护眼主题自动切换
   ========================================================================== */

/* ---------- 通用 AI 徽标 ---------- */
.ai-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 5px;
  border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent), var(--app-gold));
  flex: none;
}
.ai-badge.lg { min-width: 34px; height: 28px; font-size: 14px; border-radius: 8px; }

/* ---------- 详情页：AI 赏析折叠面板 ---------- */
.ai-sec { margin-top: 18px; }
.ai-head {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 6px 0;
}
.ai-head h4 { margin: 0; }
.ai-hint { font-size: 11px; color: var(--app-text-faint); }
.ai-caret {
  margin-left: auto; font-size: 12px;
  color: var(--app-text-mute);
}
.ai-head:hover .ai-caret { color: var(--app-accent); }

.ai-body {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-card);
}

.ai-loading { display: flex; align-items: center; gap: 6px; }
.ai-loading-text { font-size: 13px; color: var(--app-text-mute); margin-left: 4px; }
.ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--app-accent);
  animation: aiBounce 1.2s infinite ease-in-out;
}
.ai-dot:nth-child(2) { animation-delay: .18s; }
.ai-dot:nth-child(3) { animation-delay: .36s; }
@keyframes aiBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.ai-error {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--app-danger);
}
.ai-retry {
  font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--app-border-strong);
  border-radius: 6px;
  background: transparent; color: var(--app-text-mute);
  cursor: pointer;
}
.ai-retry:hover { border-color: var(--app-accent); color: var(--app-accent); }

.ai-block { margin-bottom: 12px; }
.ai-block:last-of-type { margin-bottom: 6px; }
.ai-block h5 {
  margin: 0 0 4px; font-size: 12px; font-weight: 600;
  color: var(--app-accent); letter-spacing: 1px;
}
.ai-block p {
  margin: 0; font-size: 14px; line-height: 1.85;
  color: var(--app-text);
}

.ai-notes { margin: 0; }
.ai-note { display: flex; gap: 8px; margin-bottom: 3px; font-size: 13px; }
.ai-note dt { flex: none; min-width: 62px; color: var(--app-text-dim); font-weight: 600; }
.ai-note dd { margin: 0; color: var(--app-text); line-height: 1.7; }

.ai-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--app-border);
  font-size: 11px; color: var(--app-text-faint);
}
.ai-foot .ai-retry { margin-left: auto; }
.ai-model { padding: 1px 6px; border-radius: 4px; background: var(--app-accent-soft); color: var(--app-accent); }
.ai-disclaim { color: var(--app-text-faint); }

/* ---------- AI 助手页 ---------- */
.ai-studio { padding-bottom: 40px; }
.ai-hero {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.ai-hero h2 { margin: 0; font-size: 20px; }
.ai-sub { margin: 2px 0 0; font-size: 13px; color: var(--app-text-mute); }

.ai-tabs {
  display: flex; gap: 6px; margin-bottom: 16px;
  border-bottom: 1px solid var(--app-border);
}
.ai-tab {
  padding: 8px 16px; border: none; background: transparent;
  font-size: 14px; color: var(--app-text-mute);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ai-tab:hover { color: var(--app-text); }
.ai-tab.on { color: var(--app-accent); border-bottom-color: var(--app-accent); font-weight: 600; }

.ai-pane { min-height: 240px; }

.ai-modes { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ai-mode {
  padding: 5px 14px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: transparent; color: var(--app-text-mute);
}
.ai-mode:hover { border-color: var(--app-accent); color: var(--app-accent); }
.ai-mode.on {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  color: var(--app-accent); font-weight: 600;
}

.ai-card {
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-card);
}
.ai-answer {
  font-size: 15px; line-height: 1.9; color: var(--app-text);
  white-space: pre-wrap;
}

.ai-refs { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--app-border); }
.ai-refs-title { font-size: 12px; color: var(--app-text-faint); margin-bottom: 6px; }

.ai-poems { display: grid; gap: 8px; margin-top: 10px; }
.ai-poem {
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-card);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ai-poem:hover { border-color: var(--app-accent); background: var(--app-card-hover); }
.ai-poem-t { font-size: 15px; font-weight: 600; color: var(--app-text); }
.ai-poem-m { font-size: 12px; color: var(--app-text-mute); margin-top: 2px; }
.ai-poem-c {
  margin-top: 5px; font-size: 13px; line-height: 1.7;
  color: var(--app-text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-poem-title {
  font-size: 18px; font-weight: 600; color: var(--app-text);
  margin-bottom: 8px; text-align: center;
}
.ai-poem-body {
  margin: 0 0 12px; padding: 12px;
  font-family: inherit; font-size: 16px; line-height: 2;
  white-space: pre-wrap; text-align: center;
  color: var(--app-text);
  background: var(--app-input);
  border-radius: 8px;
}

.ai-intent {
  margin-top: 12px; padding: 8px 12px;
  font-size: 13px; color: var(--app-accent);
  background: var(--app-accent-soft);
  border-radius: 8px;
}

/* ==========================================================================
   流式输出（SSE）相关
   ========================================================================== */

/* 推理模型的思维链尾巴。
   agnes 是推理型模型，经常先"想"20~30 秒才吐正文；
   这段时间如果只显示转圈，用户会以为页面卡死，所以把思考过程漏一点出来。 */
.ai-thinking {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  border-radius: 8px;
  background: var(--app-accent-soft);
  border: 1px dashed var(--app-border);
  font-size: 12.5px; line-height: 1.7;
  color: var(--app-text-mute);
}
.ai-thinking-label {
  flex: none; padding: 1px 6px; border-radius: 4px;
  background: var(--app-accent); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
}
.ai-thinking-text { min-width: 0; word-break: break-all; }

/* 流式光标：贴在正文末尾随内容一起推进 */
.ai-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--app-accent);
  animation: ai-blink 1s steps(2, start) infinite;
}
@keyframes ai-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 已经渲染出正文之后才失败：错误提示挂在内容下方，
   不要把已经显示出来的内容顶掉，用户好歹能看见半截结果 */
.ai-error-inline {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 10px;
  border-radius: 8px;
  background: var(--app-accent-soft);
  border: 1px solid var(--app-accent);
  font-size: 13px; color: var(--app-text);
}
.ai-error-inline .ai-retry { margin-left: auto; }

/* ===== AI 创作配图 + 我的创作弹层 ===== */
.ai-modes-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ci-hint {
  margin-top: 12px; padding: 8px 12px;
  font-size: 13px; color: var(--app-ink-3, #888);
  background: var(--app-surface-2, rgba(0,0,0,.04));
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
}
.ci-wrap { margin-top: 14px; }
.ci-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ci-head h4 {
  margin: 0; font-size: 14px; font-weight: 600;
  color: var(--app-ink-1, #333);
}
.ci-count { margin-left: 6px; font-size: 12px; color: var(--app-ink-3, #999); font-weight: 400; }
.ci-err {
  font-size: 12.5px; color: var(--app-danger, #c0392b);
  padding: 6px 10px; border-radius: 8px; margin-bottom: 8px;
  background: rgba(192,57,43,.08);
}
.ci-loading, .ci-empty {
  font-size: 13px; color: var(--app-ink-3, #999);
  padding: 14px 0;
}
.ci-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.ci-card {
  border: 1px solid var(--app-border, rgba(0,0,0,.1));
  border-radius: 10px; overflow: hidden;
  background: var(--app-surface-2, rgba(0,0,0,.03));
}
.ci-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ci-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; font-size: 12px;
}
.ci-vote {
  border: none; background: none; cursor: pointer;
  font-size: 12.5px; color: var(--app-ink-3, #888); padding: 0;
}
.ci-vote.on { color: var(--app-accent, #b3432b); }
.ci-author { flex: 1; color: var(--app-ink-3, #aaa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-del {
  border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--app-ink-3, #aaa); padding: 0;
}
.ci-del:hover { color: var(--app-danger, #c0392b); }

/* 我的创作弹层 */
.ai-modal-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ai-modal {
  width: min(560px, 100%); max-height: 76vh;
  background: var(--app-bg, #fff);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
}
.ai-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-size: 15px; font-weight: 600;
  color: var(--app-ink-1, #333);
  border-bottom: 1px solid var(--app-border, rgba(0,0,0,.08));
}
.ai-modal-close {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--app-ink-3, #999);
}
.ai-modal-body { overflow-y: auto; padding: 12px 16px 18px; }
.mine-item { border-bottom: 1px solid var(--app-border, rgba(0,0,0,.06)); }
.mine-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; cursor: pointer;
}
.mine-tag { padding: 2px 8px; font-size: 11.5px; }
.mine-title {
  flex: 1; font-size: 14px; color: var(--app-ink-1, #333);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mine-meta { font-size: 12px; color: var(--app-ink-3, #999); }
.mine-arrow { font-size: 12px; color: var(--app-ink-3, #aaa); }
.mine-detail { padding: 2px 2px 14px; }