/* ==========================================================================
   Logr 时间线主题 - emlog 前台样式
   设计体系移植自 logr 插件（logr.cn 风格）：红绿灯顶栏 + 活动栏 + 资源管理器
   边栏 + 分类标签栏 + 蛇形卡片时间线连线。浅色/暗色双主题。
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- 设计令牌 ---------- */
:root {
  --bg-0: #ffffff;
  --bg-1: #f5f5f7;
  --bg-2: #ebebee;
  --bg-3: #dcdce0;
  --border: #e5e5e7;
  --text: #1f1f23;
  --text-soft: #52525b;
  --text-mute: #8b8b93;
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --warn: #f59e0b;
  --top-color: #f59e0b;
  --tl-bg: #ffffff;
  --tl-text: #1f1f23;
  --tl-head: #1f1f23;
  --tl-head-sub: #8b8b93;
  --tl-empty: #8b8b93;
  --tl-border: #e5e5e7;
  --cat-bar-bg: rgba(255, 255, 255, 0.82);
  --card-bg: #ffffff;
  --card-title: #1f1f23;
  --card-excerpt: #52525b;
  --card-meta: #8b8b93;
  --card-border: #e5e5e7;
  --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.14);
  --chip-bg: #ffffff;
  --chip-border: #d8d8db;
  --chip-text: #52525b;
  --chip-hover-bg: #f0f0f2;
  --chip-hover-border: #b8b8bc;
  --chip-active-bg: var(--accent);
  --chip-active-text: #ffffff;
  --chip-cnt: #8b8b93;
  --chip-active-cnt: rgba(255, 255, 255, 0.8);
  --modal-bg: #ffffff;
  --modal-title: #1f1f23;
  --modal-meta: #8b8b93;
  --modal-meta-border: #e5e5e7;
  --modal-excerpt-bg: #f5f5f7;
  --modal-excerpt-text: #52525b;
  --modal-content-text: #1f1f23;
  --modal-foot-border: #e5e5e7;
  --wire-stroke: #000000;
  --wire-arrow: #000000;
  --footer-h: 36px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg-0: #0f0f10;
  --bg-1: #161617;
  --bg-2: #1c1d1f;
  --bg-3: #232427;
  --border: #2a2b2e;
  --text: #e4e4e7;
  --text-soft: #a1a1aa;
  --text-mute: #6b6c70;
  --accent-soft: rgba(16, 185, 129, 0.18);
  --tl-bg: #0f0f10;
  --tl-text: #e4e4e7;
  --tl-head: #e4e4e7;
  --tl-head-sub: #6b6c70;
  --tl-empty: #6b6c70;
  --tl-border: #2a2b2e;
  --cat-bar-bg: rgba(15, 15, 16, 0.82);
  --card-bg: #1c1d1f;
  --card-title: #e4e4e7;
  --card-excerpt: #a1a1aa;
  --card-meta: #71717a;
  --card-border: #2a2b2e;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.6);
  --wire-stroke: #ffffff;
  --wire-arrow: #ffffff;
  --chip-bg: #1c1d1f;
  --chip-border: #2a2b2e;
  --chip-text: #a1a1aa;
  --chip-hover-bg: #232427;
  --chip-hover-border: #383a3f;
  --chip-active-text: #0f0f10;
  --chip-cnt: #6b6c70;
  --chip-active-cnt: rgba(15, 15, 16, 0.7);
  --modal-bg: #1c1d1f;
  --modal-title: #e4e4e7;
  --modal-meta: #71717a;
  --modal-meta-border: #2a2b2e;
  --modal-excerpt-bg: #161617;
  --modal-excerpt-text: #a1a1aa;
  --modal-content-text: #d4d4d8;
  --modal-foot-border: #2a2b2e;
  color-scheme: dark;
}

/* 主题切换瞬间：只保留位移/透明度过渡，颜色类属性直接落位，避免浅色背景残留造成的闪白 */
html.theme-swap *,
html.theme-swap *::before,
html.theme-swap *::after {
  transition-property: opacity, transform !important;
}

html, body {
  font-family: "JetBrains Mono", "Cascadia Code", "Consolas", "Microsoft YaHei", monospace;
  background: var(--bg-0);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
}

a { color: var(--accent); }
img { max-width: 100%; }

/* ---------- 顶栏（红绿灯 + 站名 + 状态） ---------- */
.titlebar {
  width: 100%;
  height: 50px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: fixed;
  top: 0;
  z-index: 10;
}
.titlebar-dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r { background: #ff5f57; }
.dot.y { background: #febc2e; }
.dot.g { background: #28c840; }
.titlebar-title {
  color: var(--text-mute);
  font-size: 13px;
  margin-left: 12px;
  text-decoration: none;
  white-space: nowrap;
}
a.titlebar-title:hover { color: var(--accent); }
.titlebar-logo-img { height: 32px; width: auto; max-width: 96px; object-fit: contain; vertical-align: middle; }
.titlebar-subtitle {
  color: var(--text-soft);
  font-size: 13px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  opacity: 0.85;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.titlebar-spacer { flex: 1; }
.titlebar-status {
  color: var(--accent);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.titlebar-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* ---------- 主体 ---------- */
.app-body {
  padding-top: 50px;
  padding-bottom: var(--footer-h, 36px);
  display: flex;
  height: 100vh;
}

/* ---------- 活动栏 ---------- */
.activitybar {
  width: 52px;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  flex-shrink: 0;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.activitybar::-webkit-scrollbar { display: none; }
.act-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
}
.act-icon:hover { color: var(--text); text-decoration: none; }
.act-icon.active { color: var(--text); }
.act-icon.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
}
.act-icon svg { width: 22px; height: 22px; }
.act-icon .icon-moon { display: none; }
html[data-theme="dark"] .act-icon .icon-sun { display: none; }
html[data-theme="dark"] .act-icon .icon-moon { display: block; }
.activitybar .act-icon[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-0);
  color: var(--text);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}
.activitybar .act-icon[data-label]:hover::after { opacity: 1; visibility: visible; }
.act-spacer { flex: 1; }
.act-avatar-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}

/* ---------- 边栏（资源管理器） ---------- */
.feeds {
  width: 240px;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.25s ease, width 0.25s ease;
}
@media (min-width: 769px) {
  .feeds.collapsed { transform: translateX(-100%); width: 0; border-right: none; overflow: hidden; }
}
.feeds-head {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  flex-shrink: 0;
}
.feeds-head .act-btn {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.feeds-head .act-btn:hover { color: var(--text); }

/* ---------- 边栏站长资料卡 ---------- */
.side-profile { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.profile-row { display: flex; align-items: center; gap: 12px; }
.profile-avatar img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
  background: var(--bg-1);
}
.profile-info { min-width: 0; flex: 1; }
.profile-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.profile-badge { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }
.profile-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-tag {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 3px 10px;
  line-height: 1.5;
}

.checkin-area { margin-top: 12px; }
.checkin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.checkin-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.checkin-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.checkin-btn.checked {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
}
.checkin-btn.checked .checkin-points {
  margin-left: auto;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  color: #6b7280;
}
.checkin-login:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.feed-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.feed-list::-webkit-scrollbar { width: 3px; }
.feed-list::-webkit-scrollbar-track { background: transparent; }
.feed-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.widget { padding: 8px 0 6px; border-bottom: 1px solid var(--border); }
.widget:last-child { border-bottom: none; }
.widget-title {
  padding: 4px 16px;
  color: var(--text-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget-list { list-style: none; }
.feed-item {
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-soft);
  border-left: 2px solid transparent;
  font-size: 12px;
  transition: all 0.12s;
  text-decoration: none;
}
.feed-item:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.feed-item.active { background: var(--accent-soft); color: var(--text); border-left-color: var(--accent); }
.feed-avatar {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-2);
}
.feed-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
}
.feed-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-count {
  color: var(--text-mute);
  font-size: 10px;
  background: var(--bg-2);
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  border-radius: 2px;
}
.feed-item.active .feed-count { background: var(--accent); color: var(--bg-0); }

/* 边栏：标签 chips */
.side-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 6px; }
.side-tags a {
  padding: 3px 8px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  font-size: 11px;
  color: var(--chip-text);
  text-decoration: none;
  transition: all 0.15s;
}
.side-tags a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* 边栏：文字型列表（最新文章/评论/归档等） */
.side-text-list { list-style: none; }
.side-text-list li {
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.5;
  border-left: 2px solid transparent;
  transition: background 0.12s;
}
.side-text-list li:hover { background: var(--bg-2); }
.side-text-list a { color: var(--text-soft); text-decoration: none; }
.side-text-list a:hover { color: var(--accent); }
.side-text-list .side-sub {
  display: block;
  color: var(--text-mute);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-text-list select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  border-radius: 2px;
}
.side-empty { padding: 12px 16px; color: var(--text-mute); font-size: 11px; }
.widget .custom-text { padding: 4px 16px 8px; font-size: 12px; color: var(--text-soft); line-height: 1.7; }
.widget .custom-text ul, .widget .custom-text ol { list-style: none; }
.widget .custom-text a { color: var(--text-soft); text-decoration: none; }
.widget .custom-text a:hover { color: var(--accent); }

/* 边栏内小搜索 */
.search { padding: 0 12px 10px; }
.search input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}
.search input:focus { border-color: var(--accent); }
.search button { display: none; }

/* ---------- 内容区（滚动容器） ---------- */
.timeline-area {
  flex: 1;
  position: relative;
  background: var(--tl-bg);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--tl-text);
  transition: background 0.2s ease, color 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.timeline-area::-webkit-scrollbar { width: 3px; }
.timeline-area::-webkit-scrollbar-track { background: transparent; }
.timeline-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ---------- 分类标签栏 + 搜索 ---------- */
.cat-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--tl-border);
  background: var(--tl-bg);
}
@supports (backdrop-filter: blur(10px)) {
  .cat-bar {
    background: var(--cat-bar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }
}
.cat-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.cat-chip {
  padding: 5px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  font-size: 12px;
  color: var(--chip-text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.cat-chip:hover { background: var(--chip-hover-bg); border-color: var(--chip-hover-border); color: var(--chip-text); text-decoration: none; }
.cat-chip.active { background: var(--chip-active-bg); color: var(--chip-active-text); border-color: var(--chip-active-bg); }
.cat-chip .cnt { color: var(--chip-cnt); margin-left: 4px; font-size: 11px; }
.cat-chip.active .cnt { color: var(--chip-active-cnt); }

.article-search { position: relative; flex-shrink: 0; margin-left: auto; }
.article-search form { margin: 0; }
.article-search input {
  width: 240px;
  padding: 6px 28px 6px 30px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  border-radius: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.article-search input::placeholder { color: var(--text-mute); }
.article-search input:focus { border-color: var(--accent); background: var(--bg-0); }
.article-search > svg {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}
.article-search .clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
}
.article-search.has-value .clear-btn { display: flex; }
.article-search .clear-btn:hover { color: var(--text); }
@media (max-width: 600px) {
  .article-search { width: 100%; margin-left: 0; }
  .article-search input { width: 100%; }
}

/* ---------- 时间线（按行分组，奇数行反转实现蛇形，JS 负责分组与连线） ---------- */
.timeline {
  --cols: 3;
  --gap-x: 30px;
  --gap-y: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-y);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 30px;
}
.row { display: flex; gap: var(--gap-x); }
.row.reverse { flex-direction: row-reverse; }
.timeline .card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); margin-bottom: 0; }
@media (max-width: 900px) { .timeline { --cols: 2; } }
@media (max-width: 768px) {
  .feeds {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 36px;
    width: 240px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
  }
  .feeds.open { transform: translateX(0); }
  .cat-bar-inner { padding: 12px 16px; }
  .timeline { --cols: 2; padding: 16px 12px; }
}
@media (max-width: 480px) {
  .cat-bar-inner { padding: 10px 12px; }
  .timeline { --cols: 1; padding: 16px 12px; --gap-x: 16px; --gap-y: 20px; }
  .subpage { padding: 20px 14px 36px; }
  .subpage-head { flex-wrap: wrap; }
}

.head {
  font-weight: 700;
  font-size: 18px;
  color: var(--tl-head);
}
.head small {
  display: block;
  font-weight: 400;
  color: var(--tl-head-sub);
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 2px;
}
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--tl-empty);
  font-size: 13px;
}

/* ---------- 文章卡片 ---------- */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: var(--card-shadow);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--tl-text);
  break-inside: avoid;
}
.card.visible { opacity: 1; transform: translateY(0); }
.card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.card-top-flag {
  display: inline-block;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 2px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}
html[data-theme="dark"] .card-top-flag { color: #062e2b; }
/* 置顶卡片：按图1渲染 —— 外围黄色光晕 + 卡内黄色渐变底 */
.card.is-top-card {
  border-color: var(--top-color);
  background: linear-gradient(150deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 40%, var(--card-bg) 75%);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35), 0 0 18px rgba(245, 158, 11, 0.25);
}
.card.is-top-card:hover {
  border-color: var(--top-color);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 4px 22px rgba(245, 158, 11, 0.35);
}
html[data-theme="dark"] .card.is-top-card {
  background: linear-gradient(150deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 40%, var(--card-bg) 75%);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.25), 0 0 16px rgba(245, 158, 11, 0.15);
}

.card-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 0; }
.card-avatar { width: 28px; height: 28px; border-radius: 2px; flex-shrink: 0; object-fit: cover; background: var(--bg-2); margin-top: 1px; }
.card-title-wrap { flex: 1; min-width: 0; }
.card h3 {
  font-size: 15px;
  color: var(--card-title);
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.card .excerpt {
  font-size: 13px;
  color: var(--card-excerpt);
  padding: 8px 12px 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .excerpt p { margin: 0; }
.ai-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 8px;
  margin-bottom: 4px;
  vertical-align: middle;
  font-weight: 500;
}
.card .meta {
  font-size: 12px;
  color: var(--card-meta);
  padding: 10px 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  border-top: 1px solid var(--tl-border);
  transition: background 0.15s;
}
.card .meta-left, .card .meta-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card .meta .author { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.card .meta time { color: var(--card-meta); flex-shrink: 0; white-space: nowrap; }
.card .meta .m-icon { display: inline-flex; align-items: center; gap: 3px; color: var(--card-meta); white-space: nowrap; }
.card .meta .m-icon svg { width: 12px; height: 12px; }
.card .meta .m-tag {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

/* ---------- 卡片悬停封面底（羽化淡出） ---------- */
.card-cover {
  position: absolute;
  inset: -14px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(10px) saturate(1.1);
  transform: scale(1.06);
  transition: opacity 0.35s ease, transform 0.8s ease;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, rgba(0, 0, 0, 0.9) 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, rgba(0, 0, 0, 0.9) 30%, transparent 76%);
}
.card:hover .card-cover { opacity: 0.2; transform: scale(1); }
.card-cat-tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 今日 NEW 徽标：跟随标志列排在置顶/分类下方，不覆盖它们 */
.card-today-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.94);
  color: #047857;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.35px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.14);
  pointer-events: none;
}
.card-today-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: todayDotPulse 2.2s ease-out infinite;
}
.card-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; align-self: flex-start; }
.card-flags-row { display: flex; align-items: flex-start; gap: 10px; }
.card-flags-row:empty { display: none; }
@keyframes todayDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
html[data-theme="dark"] .card-today-badge {
  background: rgba(6, 78, 59, 0.88);
  border-color: rgba(52, 211, 153, 0.5);
  color: #a7f3d0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ---------- 卡片水印序号 / 蛇形连线（JS 绘制） ---------- */
.card-watermark {
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 64px;
  font-weight: 800;
  color: var(--card-title);
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  font-family: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;
  user-select: none;
  letter-spacing: -2px;
}
.card-head, .card .excerpt, .card .meta { position: relative; z-index: 1; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wires path.wire { fill: none; stroke: var(--wire-stroke); stroke-width: 1; stroke-dasharray: 4 4; shape-rendering: crispEdges; }
.wires marker path { fill: var(--wire-arrow); }

/* 悬停卡片 → 顶部分类的绿色虚线 */
#hoverWire { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; opacity: 0; transition: opacity 0.15s ease; }
#hoverWire.on { opacity: 1; }
#hoverWire path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
#hoverWire marker path { fill: var(--accent); }
.cat-chip.wire-hit { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition: box-shadow 0.2s, border-color 0.18s ease; }
  .card-today-badge, .card-today-badge i { animation: none; }
}

/* ---------- 分页 ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 24px;
  flex-wrap: wrap;
}
.pager a, .pager span, .pager em {
  padding: 5px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  font-size: 12px;
  color: var(--chip-text);
  text-decoration: none;
  font-style: normal;
}
.pager a:hover { background: var(--chip-hover-bg); border-color: var(--accent); color: var(--accent); }
.pager span { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-text); }
.pager em { border: none; background: none; color: var(--text-mute); padding: 0; }

/* ---------- 无限滚动 ---------- */
.tl-loading { text-align: center; padding: 18px; color: var(--text-mute); font-size: 12px; }
.tl-load-more { height: 1px; }

/* ---------- 文章 / 页面 详情面板（浮窗卡片风格） ---------- */
.blog-page {
  --bp-pad: clamp(20px, 6%, 96px);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px clamp(12px, 2.5%, 30px) 40px;
}
.blog-panel {
  background: var(--modal-bg);
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: background 0.2s ease;
}
.blog-panel + .blog-panel { margin-top: 20px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px var(--bp-pad, 20px) 8px; gap: 12px; }
.modal-head h1, .modal-head h2 { font-size: 20px; font-weight: 600; color: var(--modal-title); line-height: 1.4; margin: 0; word-break: break-word; }
.modal-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-head-actions a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 4px 10px;
  white-space: nowrap;
}
.modal-head-actions a:hover { background: var(--accent); color: #fff; }
.modal-meta {
  display: flex;
  gap: 12px;
  padding: 6px var(--bp-pad, 20px) 12px;
  font-size: 12px;
  color: var(--modal-meta);
  border-bottom: 1px solid var(--modal-meta-border);
  align-items: center;
  flex-wrap: wrap;
}
.modal-meta a { color: var(--accent); text-decoration: none; }
.modal-meta .sep { opacity: 0.5; }
.log-cover { padding: 12px var(--bp-pad, 20px) 0; }
.log-cover img { width: 100%; border-radius: 3px; display: block; }
.modal-content {
  padding: 16px var(--bp-pad, 20px);
  font-size: 15px;
  color: var(--modal-content-text);
  line-height: 1.9;
  word-break: break-word;
}
.modal-content p { margin: 0 0 14px; }
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4 { margin: 22px 0 12px; line-height: 1.5; color: var(--modal-title); }
.modal-content h1 { font-size: 21px; } .modal-content h2 { font-size: 19px; } .modal-content h3 { font-size: 17px; }
.modal-content ul, .modal-content ol { margin: 0 0 14px; padding-left: 24px; }
.modal-content li { margin-bottom: 6px; }
.modal-content img { max-width: 100%; height: auto; border-radius: 3px; }
.modal-content a { color: var(--accent); }
.modal-content blockquote {
  margin: 0 0 14px;
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  background: var(--modal-excerpt-bg);
  color: var(--text-soft);
}
.modal-content pre { background: var(--modal-excerpt-bg); padding: 12px; overflow-x: auto; font-size: 12px; border-radius: 3px; margin-bottom: 14px; }
.modal-content code { background: var(--modal-excerpt-bg); padding: 2px 5px; border-radius: 2px; font-size: 13px; }
.modal-content pre code { background: none; padding: 0; }
.modal-content table { border-collapse: collapse; margin-bottom: 14px; width: 100%; }
.modal-content th, .modal-content td { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; }
.modal-foot {
  padding: 12px var(--bp-pad, 20px);
  border-top: 1px solid var(--modal-foot-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.modal-foot .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-foot .tags a {
  padding: 3px 10px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  font-size: 11px;
  color: var(--chip-text);
  text-decoration: none;
}
.modal-foot .tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 卡片弹窗预览 ---------- */
.logr-modal-card.article-modal-card {
  max-width: var(--am-w, 720px);
  max-height: var(--am-h, 88vh);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.article-modal-card .modal-head { padding: 16px 20px 8px; }
.article-modal-card .modal-head h2 { font-size: 18px; }
.article-modal-card .modal-meta { padding: 0 20px 10px; }
/* 弹窗预填充复用卡片 meta 结构，需还原其图标/标签样式 */
.article-modal-card .modal-meta:has(.meta-left) { justify-content: space-between; }
.article-modal-card .meta-left, .article-modal-card .meta-right { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.article-modal-card .modal-meta .author { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.article-modal-card .modal-meta time { color: var(--modal-meta); flex-shrink: 0; white-space: nowrap; }
.article-modal-card .modal-meta .m-icon { display: inline-flex; align-items: center; gap: 3px; color: var(--modal-meta); white-space: nowrap; }
.article-modal-card .modal-meta .m-icon svg { width: 12px; height: 12px; flex-shrink: 0; }
.article-modal-card .modal-meta .m-tag {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-modal-card .modal-excerpt {
  padding: 12px 20px;
  background: var(--modal-excerpt-bg);
  border-left: 3px solid var(--accent);
  margin: 12px 20px 0;
  font-size: 13px;
  color: var(--modal-excerpt-text);
  line-height: 1.6;
  border-radius: 0 2px 2px 0;
}
.modal-scroll { flex: 1; overflow-y: auto; min-height: 80px; }
.modal-scroll::-webkit-scrollbar { width: 6px; }
.modal-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.modal-empty { color: var(--modal-meta); text-align: center; padding: 40px 0; }
.modal-readmore {
  margin-left: auto;
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  border-radius: 2px;
  white-space: nowrap;
}
.modal-readmore:hover { background: #0ea370; color: #fff; }
.timeline-area.modal-lock { overflow: hidden !important; }
@media (max-width: 768px) {
  .logr-modal-card.article-modal-card { max-width: 100%; max-height: min(var(--am-h, 88vh), 92vh); }
  .article-modal-card .modal-head h2 { font-size: 16px; }
  .article-modal-card .modal-content { font-size: 13px; }
  .logr-modal { padding: 12px; }
}

/* 上/下一篇文章 */
.neighbor-log {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.neighbor-log .neighbor-link {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.15s;
}
.neighbor-log .neighbor-link:hover { border-style: solid; border-color: var(--accent); text-decoration: none; }
.neighbor-log .neighbor-dir { color: var(--accent); font-size: 11px; letter-spacing: 1px; }
.neighbor-log .neighbor-title { font-size: 13px; line-height: 1.5; }

/* ---------- 评论区 ---------- */
.comments-panel { padding: 16px var(--bp-pad, 20px) 20px; }
.comment-header { font-size: 14px; font-weight: 700; color: var(--modal-title); margin-bottom: 14px; }
.comment-post { margin-bottom: 18px; }
.commentform textarea, .commentform input[type="text"], .commentform input[type="email"], .commentform input[type="url"] {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 10px;
}
.commentform textarea:focus, .commentform input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.commentform .comment-info { display: flex; gap: 10px; flex-wrap: wrap; }
.commentform .comment-info input { flex: 1; min-width: 160px; width: auto; }
.commentform .btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.commentform .btn:hover { background: #0ea370; }
.commentform .cancel-reply { display: none; background: transparent; color: var(--text-mute); border: 1px solid var(--border); }
.commentform.replying .cancel-reply { display: inline-block; }
.captcha-container { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.captcha-container img { height: 36px; border-radius: 3px; cursor: pointer; }

/* 评论表情：选择器面板 + 正文内联图片 */
.emo-bar { position: relative; margin: -2px 0 10px; }
.emo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.emo-btn:hover { border-color: var(--accent); color: var(--accent); }
.emo-btn svg { width: 15px; height: 15px; }
.emo-panel {
  display: none;
  position: absolute;
  left: 0;
  /* 面板在输入框下方，向下展开会盖住提交按钮，因此朝上展开压住输入区 */
  bottom: calc(100% + 6px);
  z-index: 30;
  width: 388px;
  max-width: 100%;
  padding: 8px;
  max-height: 184px;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* 11 列 x 4 行正好放下 44 个表情，面板矮一些才不会被 .comments-panel 的 overflow 裁掉 */
.emo-bar.open .emo-panel {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
}
.emo-item { padding: 2px; border: 0; border-radius: 4px; background: none; line-height: 0; cursor: pointer; }
.emo-item:hover { background: var(--accent-soft); }
.emo-item img { display: block; width: 36px; height: 36px; margin: 0 auto; }
.cm-emoji { display: inline-block; width: 28px; height: 28px; margin: 0 1px; vertical-align: -5px; }
.comment-content img.cm-emoji { max-height: 28px; }
@media (max-width: 768px) {
  .emo-bar.open .emo-panel { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .emo-bar.open .emo-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 友情链接页面 */
.links-page-wrap { padding-bottom: 40px; }
.links-page { padding: 24px; }
@media (max-width: 768px) { .links-page { padding: 16px; } }
.links-header-card { display: flex; align-items: baseline; justify-content: flex-start; gap: 16px; padding: 20px 24px; background: var(--bg-1); border-radius: 12px; margin-bottom: 24px; }
.links-title { font-size: 26px; font-weight: 700; color: var(--text-main); margin: 0; letter-spacing: 1px; white-space: nowrap; }
.links-subtitle { font-size: 13px; color: var(--text-mute); margin: 0; white-space: nowrap; }
.links-intro { font-size: 14px; color: var(--text-soft); line-height: 1.8; margin: 0 0 24px; padding: 0 4px; }
.links-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.links-section-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0; }
.links-badge { font-size: 11px; padding: 4px 12px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; white-space: nowrap; }
.links-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 768px) { .links-cards { grid-template-columns: 1fr; } }
.links-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.links-card-title { margin: 0 0 12px; }
.links-card-pill { display: inline-block; font-size: 13px; font-weight: 600; color: var(--text-main); background: var(--accent-soft); border-radius: 14px; padding: 3px 12px; }
/* 左侧：编号列表 + 灰色副标题 */
.links-req-list { display: flex; flex-direction: column; gap: 12px; }
.links-req-item { display: flex; gap: 10px; align-items: flex-start; }
.links-req-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--text-main); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.links-req-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 2px; }
.links-req-sub { font-size: 11px; color: var(--text-mute); line-height: 1.5; margin: 0; }
/* 右侧：label/value 键值对行 — label 在左，value 在右，水平排列 */
.links-kv-list { display: flex; flex-direction: column; gap: 0; }
.links-kv-row { display: flex; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.links-kv-row:last-child { border-bottom: none; }
.links-kv-label { flex-shrink: 0; min-width: 42px; font-size: 12px; font-weight: 500; color: var(--text-mute); }
.links-kv-value { font-size: 13px; color: var(--text-main); word-break: break-all; line-height: 1.5; }
.links-code-block { margin-top: 24px; }
.links-code-block label { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.links-code-block pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 12px; color: var(--text-soft); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.links-list-section { margin-top: 32px; }
.links-list-title { font-size: 18px; font-weight: 700; color: var(--text-main); margin: 0 0 16px; text-align: center; }
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.link-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text-main); transition: border-color .15s, box-shadow .15s; }
.link-item:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(16,185,129,.12); }
.link-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.link-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.comment:last-child { border-bottom: none; }
.comment .avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.comment-infos { flex: 1; min-width: 0; }
.comment-infos b, .comment-infos b a { color: var(--modal-title); font-size: 13px; text-decoration: none; }
.comment-infos b a:hover { color: var(--accent); }
.comment-time { color: var(--text-mute); font-size: 11px; margin-left: 8px; }
.comment-content { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin-top: 5px; word-break: break-word; }
.comment-content img { max-height: 120px; }
.comment-reply { margin-top: 6px; }
.com-reply {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-mute);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
}
.com-reply:hover { color: var(--accent); border-color: var(--accent); }
.comment .comment { margin-left: 20px; border-bottom: none; padding: 10px 0 2px; }
.comment-children { border-left: 2px solid var(--accent-soft); padding-left: 10px; }
#pagenavi { margin-top: 12px; font-size: 12px; }
#pagenavi a { color: var(--accent); text-decoration: none; margin-right: 6px; }

/* ---------- 独立页（404 / 密码页） ---------- */
.standalone {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-0);
}
.standalone-card {
  max-width: 460px;
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  box-shadow: var(--card-shadow);
}
.standalone-card h1 { font-size: 44px; color: var(--accent); margin-bottom: 8px; }
.standalone-card p { font-size: 13px; color: var(--text-mute); margin-bottom: 20px; line-height: 1.7; }
.standalone-card .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9px 26px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.standalone-card .btn:hover { background: #0ea370; }
.standalone-card input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  margin-bottom: 14px;
}
.standalone-card input[type="password"]:focus { border-color: var(--accent); }

/* ---------- 底部与返回顶部 ---------- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 8px 16px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  backdrop-filter: blur(8px);
}
.site-footer a { color: var(--text-mute); text-decoration: none; transition: color 0.15s; }
.site-footer a:hover { color: var(--accent); }
.site-footer .ft-line { line-height: 1.6; }
.ft-beian-line { margin-top: 1px; }
/* 备案信息单独成行时，固定底栏变高，需同步让出空间 */
body:has(.ft-beian-line) { --footer-h: 60px; }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: calc(var(--footer-h, 36px) + 12px);
  width: 36px;
  height: 36px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, color 0.15s, border-color 0.15s;
  z-index: 50;
  border-radius: 4px;
}
.back-to-top:hover { color: var(--text); border-color: var(--text-mute); }
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- 边栏：搜索 / 概览 / 切换 ---------- */
.search form { margin: 0; }
.feed-overview { padding: 4px 0 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.time-filters { display: flex; gap: 4px; padding: 4px 12px 6px; }
.time-chip {
  flex: 1;
  padding: 4px 6px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  transition: all 0.12s;
}
.time-chip:hover { color: var(--text); border-color: var(--accent); }
.time-chip .time-label { font-size: 11px; }
.time-chip .time-count { font-size: 14px; font-weight: 700; }
.sub-scope {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 0 14px 12px;
}
.sub-scope-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-mute);
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.sub-scope-btn .cnt { font-weight: 700; }
.sub-scope-btn:hover { border-color: var(--accent); color: var(--accent); }
.sub-scope-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.feed-section { padding: 8px 0 4px; }
.feed-section[hidden] { display: none; }
.feed-section-title {
  padding: 4px 16px;
  color: var(--text-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.feed-section-title:hover { color: var(--text); }

/* ---------- 子页面（数据统计） ---------- */
.subpage { max-width: 1080px; margin: 0 auto; padding: 28px 32px 48px; }
.subpage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.subpage-head h1 { font-size: 22px; font-weight: 700; color: var(--tl-head); }
.subpage-head p { margin-top: 4px; font-size: 13px; color: var(--tl-head-sub); }
.subpage-refresh {
  flex-shrink: 0;
  padding: 7px 16px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-0);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.subpage-refresh:hover { color: var(--accent); border-color: var(--accent); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card .stat-label { font-size: 13px; color: var(--tl-head-sub); }
.stat-card .stat-value { font-size: 26px; font-weight: 700; color: var(--tl-head); }
@media (max-width: 900px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}
.stats-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr; }
}
.stats-panel {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 15px; font-weight: 700; color: var(--tl-head); }
.panel-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
}
.rank-list { list-style: none; }
.rank-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--border);
}
.rank-list li:last-child { border-bottom: none; }
.rank-no {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--text-soft);
}
.rank-list li:nth-child(1) .rank-no { background: var(--accent); color: #fff; }
.rank-list li:nth-child(2) .rank-no { background: var(--accent-soft); color: var(--accent); }
.rank-list li:nth-child(3) .rank-no { background: var(--accent-soft); color: var(--accent); }
.rank-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
a.rank-name:hover { color: var(--accent); }
.rank-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--tl-head);
  white-space: nowrap;
}
.rank-item { transition: background 0.15s; }
.rank-item:hover { background: var(--accent-soft); }

/* ---------- 数据统计：近14天阅读量柱状图 ---------- */
.trend-chart {
  margin-top: 18px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 10px;
  overflow: hidden;
}
.trend-chart .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; border-bottom: none; padding-bottom: 0; }
.trend-chart .panel-head h2 { font-size: 15px; font-weight: 700; color: var(--tl-head); margin: 0; }
.trend-chart .panel-tag { font-size: 12px; color: var(--tl-head-sub); border: none; padding: 0; font-weight: 400; }
.trend-chart svg { display: block; }
.tc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.tc-col { cursor: pointer; }
.tc-hit { fill: transparent; }
.tc-bar { transition: fill-opacity .15s ease; }
.tc-bar-read { fill: var(--accent); }
.tc-bar-visit { fill: #3b82f6; }
html[data-theme="dark"] .tc-bar-visit { fill: #60a5fa; }
.tc-col:hover .tc-bar { fill-opacity: .72; }
.tc-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 400; color: var(--tl-head-sub); }
.tc-legend .tl-item { display: inline-flex; align-items: center; gap: 5px; }
.tc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.tc-legend .tl-visit { background: #3b82f6; }
html[data-theme="dark"] .tc-legend .tl-visit { background: #60a5fa; }
.tc-xlab { font-size: 10px; fill: var(--tl-head-sub); }
.tc-tip { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.tc-tip-bg { fill: #1f1f23; }
.tc-tip-date { font-size: 9px; fill: #a1a1aa; }
.tc-tip-txt { font-size: 10px; fill: #fff; }
.tc-col:hover .tc-tip { opacity: 1; }
html[data-theme="dark"] .tc-tip-bg { fill: #e5e5ea; }
html[data-theme="dark"] .tc-tip-date { fill: #71717a; }
html[data-theme="dark"] .tc-tip-txt { fill: #1f1f23; }

/* ---------- 数据统计：分类分布环形图 ---------- */
.cat-dist-donut { display: flex; align-items: center; gap: 26px; padding: 8px 4px 6px; flex-wrap: wrap; }
.donut { width: 128px; height: 128px; border-radius: 50%; flex-shrink: 0; position: relative; transition: transform .3s ease; }
.donut:hover { transform: scale(1.04); }
.donut-hole {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border);
}
.donut-total { font-size: 20px; font-weight: 800; color: var(--tl-head); line-height: 1.1; }
.donut-unit { font-size: 11px; color: var(--tl-head-sub); }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background .18s ease, transform .18s ease;
}
.donut-legend-item:hover { background: var(--bg-2); transform: translateX(3px); }
.donut-legend-item i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.dl-name { font-size: 13px; color: var(--tl-head); font-weight: 600; }
.dl-num { margin-left: auto; font-size: 12px; color: var(--tl-head-sub); }

/* ---------- 通用弹窗（关于） ---------- */
.logr-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 18, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.logr-modal-mask.open { opacity: 1; pointer-events: auto; }
.logr-modal {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.logr-modal.open { opacity: 1; pointer-events: auto; }
.logr-modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 20px 24px;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.2s;
}
.logr-modal.open .logr-modal-card { transform: none; }
.logr-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.logr-modal-head h3 { font-size: 16px; color: var(--text); font-weight: 600; }
.logr-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-mute);
  padding: 4px;
  border-radius: 4px;
}
.logr-modal-close:hover { color: var(--text); background: var(--bg-2); }
/* 关于弹窗：与文章弹窗共用主题尺寸设置（宽度上限 620px），圆角/阴影一致 */
.logr-modal-card.about-modal-card {
  max-width: min(var(--am-w, 720px), 620px);
  max-height: var(--am-h, 88vh);
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.about-modal-card .about-body { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 768px) {
  .logr-modal-card.about-modal-card { max-width: 100%; max-height: min(var(--am-h, 88vh), 92vh); }
}
.about-body { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.about-body::-webkit-scrollbar { width: 6px; }
.about-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.about-section { margin-bottom: 16px; }
.about-section:last-child { margin-bottom: 0; }
.about-section h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text); border-left: 4px solid var(--accent); padding-left: 8px; }
.about-section p { font-size: 13px; line-height: 1.7; margin: 0; color: var(--text-mute); }
.about-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); text-align: center; }

/* ---------- 底部备案 ---------- */
.ft-beian { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.ft-beian:hover { color: var(--accent); text-decoration: none; }
.ft-beian svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.ft-beian:hover svg { opacity: 1; color: var(--accent); }

/* ---------- 归档页面：年 / 月 / 周 折叠时间线 ---------- */
.ar-sub { margin-top: 6px; font-size: 12px; color: var(--card-meta); }
.ar-sub b { color: var(--accent); font-weight: 600; }
.ar-tools { display: flex; gap: 6px; flex-shrink: 0; }
.ar-btn {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ar-btn:hover { background: var(--chip-hover-bg); border-color: var(--chip-hover-border); color: var(--text); text-decoration: none; }
.ar-intro { padding: 4px var(--bp-pad, 20px) 14px; font-size: 13px; line-height: 1.75; color: var(--card-excerpt); }
.ar-intro p { margin: 0 0 8px; }
.ar-tabs { display: flex; gap: 2px; padding: 0 var(--bp-pad, 20px); border-bottom: 1px solid var(--card-border); }
.ar-tab {
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--card-meta);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ar-tab:hover { color: var(--text-soft); }
.ar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ar-pane { display: none; padding: 16px var(--bp-pad, 20px) 4px; }
.ar-pane.active { display: block; }
.ar-empty { padding: 30px 0; text-align: center; font-size: 13px; color: var(--tl-empty); }
.ar-sum { list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 0; cursor: pointer; user-select: none; }
.ar-sum::-webkit-details-marker { display: none; }
.ar-sum:hover .ar-label { color: var(--accent); }
.ar-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); background: var(--tl-bg); }
.ar-dot-year { width: 12px; height: 12px; }
.ar-dot-week { border-color: var(--text-mute); }
.ar-dot-tag { border-color: var(--warn); }
.ar-label { font-size: 14px; font-weight: 600; color: var(--card-title); transition: color 0.15s ease; }
.ar-month > .ar-sum .ar-label { font-size: 13px; }
.ar-week > .ar-sum .ar-label, .ar-tag > .ar-sum .ar-label { font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
.ar-cnt { font-size: 11px; color: var(--card-meta); }
.ar-caret {
  margin-left: auto;
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-mute);
  border-bottom: 1.5px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
details[open] > .ar-sum .ar-caret { transform: rotate(225deg); }
.ar-children { margin-left: 6px; padding-left: 18px; border-left: 1px dashed var(--card-border); }
.ar-list {
  list-style: none;
  margin: 0 0 10px 6px;
  padding: 0 0 0 18px;
  border-left: 1px dashed var(--card-border);
}
.ar-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ar-item::before { content: ''; position: absolute; left: -19px; top: 50%; width: 12px; height: 1px; background: var(--card-border); }
.ar-day { flex: none; width: 40px; font-size: 11px; color: var(--card-meta); font-family: "JetBrains Mono", "Consolas", monospace; }
.ar-post {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  color: var(--card-title);
  text-decoration: none;
  transition: color 0.15s ease;
}
.ar-post:hover { color: var(--accent); text-decoration: none; }
.ar-meta { flex: none; display: flex; gap: 4px; margin-left: auto; }
.ar-chip {
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 2px;
  border: 1px solid var(--card-border);
  background: var(--bg-1);
  color: var(--card-meta);
  white-space: nowrap;
}
.ar-chip-sort { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.ar-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ar-cloud-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ar-cloud-chip i { font-style: normal; margin-left: 4px; font-size: 11px; color: var(--chip-cnt); }
.ar-cloud-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
@media (max-width: 768px) {
  .ar-item { flex-wrap: wrap; }
  .ar-meta { margin-left: 48px; width: 100%; }
  .ar-children, .ar-list { padding-left: 12px; }
}

/* ---------- 微语页面：发布框 + 九宫格 + 大图预览 ---------- */
.wy-sub { margin-top: 6px; font-size: 12px; color: var(--card-meta); }
.wy-sub b { color: var(--accent); font-weight: 600; }
.wy-compose {
  margin: 4px var(--bp-pad, 20px) 18px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--modal-excerpt-bg);
}
.wy-compose-top { display: flex; align-items: flex-start; gap: 8px; }
.wy-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  resize: vertical;
  min-height: 44px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--modal-content-text);
}
.wy-input::placeholder { color: var(--card-meta); }
.wy-count { flex: none; padding-top: 4px; font-size: 11px; color: var(--card-meta); font-family: "JetBrains Mono", "Consolas", monospace; }
.wy-piclist { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-border); }
.wy-piclist.has { display: block; }
.wy-pic-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wy-pic-thumb { flex: none; width: 26px; height: 26px; border-radius: 3px; object-fit: cover; background: var(--bg-2); display: none; }
.wy-pic-thumb.ok { display: block; }
.wy-pic-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--chip-border);
  border-radius: 3px;
  background: var(--chip-bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.wy-pic-input:focus { border-color: var(--accent); }
.wy-pic-row.bad .wy-pic-input { border-color: #ef4444; }
.wy-pic-tip { flex: none; max-width: 42%; font-size: 11px; line-height: 1.3; color: #ef4444; text-align: right; }
.wy-pic-del {
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--card-meta);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.wy-pic-del:hover { background: var(--bg-2); color: var(--text); }
.wy-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wy-add {
  font: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px dashed var(--chip-border);
  border-radius: 3px;
  background: none;
  color: var(--chip-text);
  cursor: pointer;
}
.wy-add:hover { border-color: var(--accent); color: var(--accent); }
.wy-tip { font-size: 11px; color: var(--card-meta); }
.wy-msg { margin-left: auto; font-size: 12px; color: #ef4444; }
.wy-msg.ok { color: var(--accent); }
.wy-send {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.wy-send:hover { opacity: 0.88; }
.wy-send[disabled] { opacity: 0.5; cursor: progress; }
html[data-theme="dark"] .wy-send { color: #0f0f10; }
.wy-login-tip {
  margin: 4px var(--bp-pad, 20px) 18px;
  padding: 10px 12px;
  border: 1px dashed var(--card-border);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--card-meta);
}
.wy-login-tip a { color: var(--accent); text-decoration: none; }
.wy-feed { padding: 0 var(--bp-pad, 20px); }
.wy-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px dashed var(--card-border); }
.wy-item:last-child { border-bottom: none; }
.wy-avatar { flex: none; }
.wy-avatar img { display: block; width: 36px; height: 36px; border-radius: 50%; }
.wy-main { flex: 1 1 auto; min-width: 0; }
.wy-line { display: flex; align-items: center; gap: 8px; }
.wy-name { font-size: 13px; font-weight: 600; color: var(--card-title); }
.wy-flag { font-size: 10px; padding: 1px 5px; border-radius: 2px; background: var(--accent-soft); color: var(--accent); }
.wy-time { margin-left: auto; font-size: 11px; color: var(--card-meta); }
.wy-del { font-size: 11px; color: var(--card-meta); text-decoration: none; }
.wy-del:hover { color: var(--accent); text-decoration: none; }
.wy-text { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--modal-content-text); word-break: break-word; }
.wy-text p { margin: 0 0 6px; }
.wy-text p:last-child { margin-bottom: 0; }
.wy-grid { display: grid; gap: 4px; margin-top: 8px; }
.wy-grid-single { grid-template-columns: minmax(0, 620px); justify-items: start; }
.wy-grid-2 { grid-template-columns: repeat(2, minmax(0, 190px)); }
.wy-grid-3 { grid-template-columns: repeat(3, minmax(0, 132px)); }
.wy-cell { position: relative; display: block; padding: 0; border: none; background: var(--bg-2); border-radius: 3px; overflow: hidden; cursor: zoom-in; }
.wy-grid-single .wy-cell { border-radius: 4px; max-width: 100%; }
.wy-grid-single img { display: block; width: auto; max-width: 100%; height: auto; max-height: 62vh; }
.wy-grid-2 .wy-cell, .wy-grid-3 .wy-cell { aspect-ratio: 1 / 1; }
.wy-grid-2 img, .wy-grid-3 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wy-cell img { transition: transform 0.25s ease; }
.wy-cell:hover img { transform: scale(1.04); }
.wy-cell-more { position: absolute; right: 0; bottom: 0; padding: 3px 8px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.6); }
.wy-pager { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px var(--bp-pad, 20px) 0; }
.wy-page-btn {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--chip-border);
  border-radius: 3px;
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration: none;
}
.wy-page-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.wy-page-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .wy-page-btn.is-on { color: #0f0f10; }
.wy-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.88);
  cursor: zoom-out;
}
.wy-viewer.open { display: flex; }
.wy-viewer img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  background: #fff;
  padding: 8px;
}
.wy-view-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.wy-view-close:hover { background: rgba(255, 255, 255, 0.24); }
@media (max-width: 768px) {
  .wy-grid-single { grid-template-columns: minmax(0, 100%); }
  .wy-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wy-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wy-pic-tip { max-width: none; }
}