/* 社区模块 · 共用样式 */
html, body { background:#FFFFFF; color:var(--folio-ink); }
body { font-family:'Inter','Noto Sans SC',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:var(--folio-yellow); color:var(--folio-ink); }

.serif-display { font-family:'Fraunces','Noto Serif SC',serif; font-weight:400; letter-spacing:-0.01em; line-height:1; }
.serif-title   { font-family:'Fraunces','Noto Serif SC',serif; font-weight:400; letter-spacing:-0.005em; line-height:1.15; }
.serif-small   { font-family:'Fraunces','Noto Serif SC',serif; }
.zh            { font-family:'Noto Serif SC','Fraunces',serif; }
.num-serif     { font-family:'Fraunces','Noto Serif SC',serif; font-feature-settings:"lnum" 1, "tnum" 1; }

.inner-nav { background:rgba(255,255,255,.92); border-bottom:1px solid var(--folio-rule); }

.text-link { position:relative; display:inline-block; }
.text-link::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:currentColor; transform-origin:left; transform:scaleX(1);
  transition: transform .25s ease;
}
.text-link:hover::after { transform:scaleX(0); transform-origin:right; }

.back-link { transition: color .15s ease; }
.back-link:hover { color:var(--folio-ink) !important; }

/* 头像占位（圆形 + 暖色 + 单字符） */
.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--folio-rule);
  font-family:'Fraunces','Noto Serif SC',serif;
  color:var(--folio-ink); flex-shrink:0;
  aspect-ratio:1;
  align-self:center;
  background:#EFE4D2;
}
.avatar.rose { background:#F2C7A3; }
.avatar.blue  { background:#E3D2B5; }
.avatar.green  { background:#D9C6A7; }
.avatar.blue { background:#D6C6D0; }
.avatar.green  { background:#BEC6A5; }
.avatar.seal { background:var(--folio-seal); color:#FFFFFF; }
.avatar.ink   { background:var(--folio-ink); color:#FFFFFF; }

/* feed tab */
.feed-tab {
  position:relative; padding:8px 0; cursor:pointer;
  font-size:14px; color:var(--folio-ink-2);
  font-family:'Noto Serif SC','Fraunces',serif;
  transition: color .15s ease;
}
.feed-tab:hover { color:var(--folio-ink); }
.feed-tab.is-active { color:var(--folio-ink); font-weight:600; }
.feed-tab.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-9px;
  height:2px; background:var(--folio-ink);
}

/* 卡片 */
.card {
  background:#FFFFFF; border:1px solid var(--folio-rule);
  border-radius:var(--folio-radius);
}

/* 互动图标按钮 */
.act {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--folio-ink-2);
  background:transparent; border:0; padding:0;
  font-family:'Fraunces','Noto Serif SC',serif;
  cursor:pointer; transition: color .15s ease;
}
.act:hover { color:var(--folio-ink); }
.act.is-active { color:var(--folio-seal); }
.act svg { stroke:currentColor; }

/* 按钮 */
.btn-coral {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--folio-ink); color:#FFFFFF; border:1px solid var(--folio-ink);
  padding:12px 20px; border-radius:var(--folio-radius); cursor:pointer;
  font-family:'Noto Serif SC','Fraunces',serif; font-size:14px;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-coral:hover { background:var(--folio-seal); border-color:var(--folio-seal); }
.btn-coral.is-disabled, .btn-coral:disabled {
  background:var(--folio-rule); border-color:var(--folio-rule); color:#8E887D; cursor:not-allowed;
}
.btn-ink {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--folio-ink); border:1px solid var(--folio-ink);
  padding:11px 18px; border-radius:var(--folio-radius); cursor:pointer;
  font-family:'Noto Serif SC','Fraunces',serif; font-size:13px;
  transition: all .2s ease;
}
.btn-ink:hover { background:var(--folio-ink); color:#FFFFFF; }
.btn-ink:disabled, .btn-ink.is-disabled {
  border-color:var(--folio-rule); color:#8E887D; cursor:not-allowed;
}
.btn-ink:disabled:hover, .btn-ink.is-disabled:hover {
  background:transparent; color:#8E887D;
}

/* AI 评论卡片 */
.ai-card {
  background:#FFFFFF; border:1px solid var(--folio-rule);
  border-radius:var(--folio-radius); padding:24px;
}
.ai-model-label {
  font-family:'Fraunces','Noto Serif SC',serif;
  font-size:13px; letter-spacing:0.18em;
  color:var(--folio-ink);
}
.ai-score {
  font-family:'Fraunces','Noto Serif SC',serif;
  font-size:32px; line-height:1; color:var(--folio-ink);
}

/* 输入框 */
.field {
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--folio-rule);
  padding:10px 0; font-size:15px; color:var(--folio-ink); outline:none;
  transition: border-color .15s ease;
  font-family:'Inter','Noto Sans SC',sans-serif;
}
.field::placeholder { color:#A89F8C; }
.field:focus { border-bottom-color:var(--folio-ink); }
.field-area {
  width:100%; background:transparent; border:0;
  padding:0; font-size:17px; line-height:1.8; color:var(--folio-ink);
  outline:none; resize:none;
  font-family:'Inter','Noto Sans SC',sans-serif;
}
.field-area::placeholder { color:#A89F8C; }

/* 模态 */
.modal-bg {
  position:fixed !important; inset:0 !important; z-index:5000;
  width:100vw; min-height:100vh;
  background:rgba(26,26,26,0.30);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-card {
  background:#FFFFFF; border:1px solid var(--folio-rule); border-radius:0;
  max-width:480px; width:100%; padding:40px;
}
.modal-card.folio-observed {
  opacity:1 !important;
  transform:none !important;
}

/* 模型选择卡片 */
.model-card {
  display:flex; align-items:center; justify-content:space-between;
  background:#FFFFFF; border:1px solid var(--folio-rule); border-radius:0;
  padding:14px 16px; cursor:pointer;
  transition: background-color .12s ease, border-color .15s ease;
  text-align:left;
}
.model-card:hover { background:rgba(242,216,83,.14); }
.model-card.is-active { border-color:var(--folio-ink); box-shadow:inset 0 -5px 0 rgba(242,216,83,.35); }

/* 图片占位 */
.img-ph {
  background:#EFE4D2; border:1px solid var(--folio-rule); border-radius:var(--folio-radius);
  background-image: repeating-linear-gradient(135deg,
    rgba(26,26,26,0.06) 0 2px, transparent 2px 14px);
}
.img-ph.rose { background-color:#F2C7A3; }
.img-ph.blue  { background-color:#E3D2B5; }
.img-ph.green  { background-color:#D9C6A7; }
.img-ph.blue { background-color:#D6C6D0; }
.img-ph.green  { background-color:#BEC6A5; }

/* 链接预览 */
.link-prev {
  display:flex; gap:14px; padding:14px;
  border:1px solid var(--folio-rule); border-radius:0; background:#FFFFFF;
  text-decoration:none; color:inherit;
  transition: border-color .15s ease;
}
.link-prev:hover { border-color:var(--folio-ink); box-shadow:inset 0 -5px 0 rgba(191,220,231,.28); }

/* 回复缩进 */
.indent { margin-left:44px; padding-left:20px; border-left:1px solid var(--folio-rule); }

/* 评论输入 */
.comment-box {
  border:1px solid var(--folio-rule); border-radius:0; background:#FFFFFF;
  padding:14px 16px;
  transition: border-color .15s ease;
}
.comment-box:focus-within { border-color:var(--folio-ink); box-shadow:inset 0 -5px 0 rgba(242,216,83,.2); }

/* 集市作品富卡片 */
.market-card {
  display:flex; gap:18px; padding:16px;
  border:1px solid var(--folio-rule); border-radius:var(--folio-radius);
  background:#FFFFFF; text-decoration:none; color:inherit;
  transition: border-color .15s ease;
  position:relative;
}
.market-card:hover { border-color:var(--folio-ink); box-shadow:inset 0 -5px 0 rgba(242,216,83,.2); }
.market-card .cover {
  width:30%; aspect-ratio:4/3; flex-shrink:0;
  border:1px solid var(--folio-rule); border-radius:var(--folio-radius);
  background-image: repeating-linear-gradient(135deg,
    rgba(26,26,26,0.06) 0 2px, transparent 2px 14px);
}
.ex-tag {
  position:absolute; top:10px; left:10px;
  background:var(--folio-seal); color:#FFFFFF;
  font-family:'Inter','Noto Sans SC',sans-serif;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--folio-radius);
}

/* lightbox */
.lightbox-bg {
  position:fixed; inset:0; z-index:200;
  background:rgba(26,26,26,0.85);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox-img {
  max-width:90vw; max-height:85vh; min-width:300px; min-height:300px;
  width:60vw; height:60vw;
  border:1px solid var(--folio-rule); border-radius:var(--folio-radius);
}

/* feed 高亮锚点 */
@keyframes flash-anchor {
  0%   { background:#FFFFFF; }
  20%  { background:#FCEBD8; }
  100% { background:#FFFFFF; }
}
.is-anchor { animation: flash-anchor 1.6s ease-out; }

/* 工具栏小标签按钮（编辑器） */
.tool-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:6px 8px;
  color:var(--folio-ink-2); cursor:pointer; border-radius:var(--folio-radius);
  font-family:'Inter','Noto Sans SC',sans-serif; font-size:12px;
  transition: color .15s ease, background-color .15s ease;
}
.tool-btn:hover { color:var(--folio-ink); background:rgba(242,216,83,.18); }

/* Persona remarks: AI comments should read like marginal notes, not ordinary cards. */
.ai-section-head {
  border-top:1px solid var(--folio-rule);
  padding-top:18px;
}
.ai-section-title {
  position:relative;
  padding-left:22px;
}
.ai-section-title::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:14px;
  height:2px;
  transform:translateY(-50%);
  background:var(--folio-yellow);
}
.persona-summon-btn {
  border-radius:999px !important;
  background:var(--folio-ink) !important;
  color:#FFFFFF !important;
  border-color:var(--folio-ink) !important;
  box-shadow:none !important;
  height:30px !important;
  min-height:30px !important;
  padding:6px 12px !important;
  gap:5px !important;
  font-size:12px !important;
  line-height:1 !important;
}
.persona-summon-btn:hover {
  background:var(--folio-seal) !important;
  border-color:var(--folio-seal) !important;
}
.persona-note {
  position:relative;
  border:0;
  border-left:4px solid var(--folio-ink);
  border-top:1px solid var(--folio-rule);
  border-bottom:1px solid var(--folio-rule);
  border-right:1px solid var(--folio-rule);
  padding:20px 22px 18px 24px;
  box-shadow:none;
  background:
    linear-gradient(90deg, rgba(242,216,83,.18) 0 58px, transparent 58px),
    #FFFFFF;
}
.persona-note:nth-child(2n) {
  border-left-color:var(--folio-seal);
  background:
    linear-gradient(90deg, rgba(191,220,231,.22) 0 58px, transparent 58px),
    #FFFFFF;
}
.persona-note-head [class^="c-"] {
  width:38px !important;
  height:38px !important;
  border-radius:0;
  box-shadow:6px 6px 0 rgba(242,216,83,.35);
}
.persona-note-head a {
  color:var(--folio-ink) !important;
  text-decoration:none !important;
}
.persona-note-head a:hover {
  color:var(--folio-seal) !important;
}
.persona-mood-stamp {
  border:1px solid currentColor !important;
  border-radius:0 !important;
  background:#FFFFFF !important;
  letter-spacing:.08em;
  transform:translateY(1px);
}
.persona-note-rule {
  background:var(--folio-rule) !important;
  margin:16px 0 14px !important;
}
.persona-note-body {
  font-family:'Noto Serif SC','Fraunces',serif;
  font-size:15px !important;
}
.persona-note-foot {
  border-top:1px solid rgba(231,225,214,.75);
  padding-top:12px;
}

/* Summon modal: invitation cards for personas. */
.summon-modal-card {
  max-width:620px;
  padding:42px 46px 34px;
  box-shadow:none;
  position:relative;
  background:
    linear-gradient(90deg, rgba(242,216,83,.12) 0 16px, transparent 16px),
    #FFFFFF;
  animation:modal-paper-in .24s ease both;
}
.summon-modal-card::before {
  content:"";
  position:absolute;
  left:46px;
  top:-1px;
  width:86px;
  height:5px;
  background:var(--folio-yellow);
}
@keyframes modal-paper-in {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.summon-modal-card > .flex.flex-col {
  max-height:390px !important;
  gap:12px !important;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--folio-ink) #F7F3EA;
}
.summon-modal-card > .flex.flex-col::-webkit-scrollbar { width:8px; }
.summon-modal-card > .flex.flex-col::-webkit-scrollbar-track { background:#F7F3EA; }
.summon-modal-card > .flex.flex-col::-webkit-scrollbar-thumb {
  background:var(--folio-ink);
  border:2px solid #F7F3EA;
}
.summon-persona-card {
  position:relative;
  border-radius:0 !important;
  padding:18px 20px !important;
  background:#FFFFFF !important;
  border:1px solid var(--folio-rule) !important;
  box-shadow:inset 0 0 0 0 var(--folio-yellow);
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.summon-persona-card:hover:not(:disabled) {
  border-color:var(--folio-ink) !important;
  transform:translateX(3px);
}
.summon-persona-card.is-active {
  border-color:var(--folio-ink) !important;
  background:
    linear-gradient(90deg, rgba(242,216,83,.24) 0 78px, transparent 78px),
    #FFFFFF !important;
  box-shadow:inset 0 -5px 0 rgba(242,216,83,.75);
}
.summon-persona-card.is-active::after {
  content:"INVITED";
  position:absolute;
  right:18px;
  top:14px;
  font-family:'Inter','Noto Sans SC',sans-serif;
  font-size:9px;
  letter-spacing:.18em;
  color:var(--folio-seal);
}
.summon-persona-card [class^="c-"] {
  border-radius:0;
  box-shadow:5px 5px 0 rgba(191,220,231,.28);
}
.summon-modal-card .btn-coral {
  border-radius:0 !important;
  box-shadow:none !important;
}