/* =========================================================================
 * app.css · Tailwind 之外的补充样式
 * 仅放：基础排版、图片淡入、轮播指示点、弹窗动画、两行截断、减弱动效
 * ========================================================================= */

:root {
  --ink: #171719;
  --surface: #222226;
  --text: #e6e6e8;
  --muted: #99999f;
  --accent: #c9c0b4; /* 低饱和暖灰点缀色 */
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  color: var(--text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

::selection { background: rgba(201, 192, 180, .22); color: var(--text); }

/* 图片淡入加载 */
.img-fade { opacity: 0; transition: opacity .6s ease; }
.img-fade.is-loaded { opacity: 1; }

/* 两行截断（卡片标题） */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 列表切换淡入 */
.fade-in { animation: fadeUp .38s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 弹窗入场 */
.modal-panel { animation: modalIn .24s ease both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 轮播指示点 */
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  transition: width .3s ease, background-color .3s ease;
}
.carousel-dot.is-active { width: 20px; background: var(--accent); }

/* 横向缩略图条：隐藏滚动条 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 图集查看器：切换时的淡入 + 位移过渡 */
[data-media-slide] { will-change: opacity, transform; }

/* -------------------------------------------------------------------------
 * 自定义页面：富文本正文排版（前台 page.html / 后台 contenteditable 编辑器共用）
 * 暗灰 ins 深色风，留白充足，与详情页质感一致
 * ---------------------------------------------------------------------- */
.prose-custom { color: var(--text); font-size: 15px; line-height: 1.95; }
.prose-custom > *:first-child { margin-top: 0; }
.prose-custom p { margin: 0 0 1.15em; color: rgba(230,230,232,.9); }
.prose-custom h1,
.prose-custom h2,
.prose-custom h3 { color: var(--text); font-weight: 500; line-height: 1.4; letter-spacing: .01em; }
.prose-custom h1 { font-size: 24px; margin: 1.6em 0 .7em; }
.prose-custom h2 { font-size: 20px; margin: 1.6em 0 .7em; }
.prose-custom h3 { font-size: 17px; margin: 1.4em 0 .6em; }
.prose-custom strong, .prose-custom b { color: var(--text); font-weight: 600; }
.prose-custom em, .prose-custom i { color: rgba(230,230,232,.9); }
.prose-custom a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-custom a:hover { color: #e2d9cb; }
.prose-custom img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: 14px; border: 1px solid var(--line); }
.prose-custom ul, .prose-custom ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose-custom ul { list-style: disc; }
.prose-custom ol { list-style: decimal; }
.prose-custom li { margin: .35em 0; color: rgba(230,230,232,.9); }
.prose-custom li::marker { color: var(--accent); }
.prose-custom blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 2px solid var(--accent); color: var(--muted);
}
.prose-custom hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.prose-custom div { min-height: 1em; }

/* 后台富文本编辑器占位提示 */
[data-placeholder]:empty::before { content: attr(data-placeholder); color: rgba(153,153,159,.55); pointer-events: none; }
[data-editor] { outline: none; }

/* 尊重系统「减弱动效」设置 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}