/* 高级文章样式（采集页面专用，完整适配来源结构） */
:root {
  --article-max-width: 860px;
  --article-radius: 16px;
  --article-shadow: 0 10px 30px rgba(0,0,0,0.15);
  --article-accent: #6c8cff;
}

/* 外层容器优化 */
.article-view {
  padding: 0 !important;
  background: transparent !important;
}

/* 文章卡片 */
.ext-article {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--article-radius);
  box-shadow: var(--article-shadow);
  max-width: var(--article-max-width);
  margin: 24px auto;
  overflow: hidden;
}

/* 顶部标题区 */
.ext-article > h1 {
  margin: 0;
  padding: 28px 28px 8px 28px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--text-primary);
}

/* 元信息栏 */
.ext-article .ext-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px 18px 28px;
  font-size: 13px;
  color: var(--text-primary);
  opacity: 0.75;
  border-bottom: 1px solid var(--border-color);
}
.ext-article .ext-meta a { color: var(--article-accent); text-decoration: none; }
.ext-article .ext-meta a:hover { text-decoration: underline; }

/* 正文容器 */
.ext-article .ext-body { padding: 24px 28px 32px 28px; color: var(--text-primary); }

/* 通用重置（限定在文章正文范围） */
.ext-article .ext-body *,
.ext-article .ext-body *::before,
.ext-article .ext-body *::after { box-sizing: border-box; color: var(--text-primary); }
.ext-article .ext-body a { color: var(--article-accent); text-decoration: none; }
.ext-article .ext-body a:hover { text-decoration: underline; }
.ext-article .ext-body .fl, .ext-article .ext-body .fr { float: none !important; }

/* .bb 通用容器（来源站常用块） */
.ext-article .ext-body .bb { padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; margin: 12px 0; }

/* 正文字体排版 */
.ext-article .ext-body p { margin: 0 0 1.1em 0; font-size: 16px; line-height: 1.8; }
/* 来源站常见段落容器 */
.ext-article .ext-body .m { margin: 0 0 1.1em 0; font-size: 16px; line-height: 1.8; }
/* 内容块容器（如 .c） */
.ext-article .ext-body .c { margin-bottom: 12px; }
/* 列表项行距优化 */
.ext-article .ext-body li { line-height: 1.7; }

/* 标题层级 */
.ext-article .ext-body h2 { margin: 1.2em 0 .6em 0; font-size: 22px; line-height: 1.35; border-left: 3px solid var(--article-accent); padding-left: 10px; }
.ext-article .ext-body h3 { margin: 1.1em 0 .5em 0; font-size: 18px; line-height: 1.35; }

/* 引用与列表 */
.ext-article .ext-body ul, .ext-article .ext-body ol { margin: .8em 0 1em 1.4em; padding: 0; }
.ext-article .ext-body blockquote { margin: 1em 0; padding: 14px 16px; border-left: 3px solid var(--article-accent); background: var(--bg-secondary); border-radius: 12px; opacity: .95; }

/* 图片与媒体 */
.ext-article .ext-body img, .ext-article .ext-body video, .ext-article .ext-body iframe { max-width: 100%; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); margin: 14px 0; }

/* 表格 */
.ext-article .ext-body table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.ext-article .ext-body th, .ext-article .ext-body td { border: 1px solid var(--border-color); padding: 10px 12px; }
.ext-article .ext-body thead th { background: var(--bg-secondary); }

/* 代码区块 */
.ext-article .ext-body pre, .ext-article .ext-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.ext-article .ext-body pre { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; overflow: auto; }
.ext-article .ext-body code { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 6px; }

/* 顶部区块：#top.bb 简化为轻量导航条 */
/* 兼容结构：#top 内部 .bb（实际结构为 #top > .bb） */
.article-view .ext-article .ext-body #top .bb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0;
}
/* 显示站点 logo（使用本地 images/logo.png），音乐入口暂时隐藏以避免空内容 */
.article-view .ext-article .ext-body #top .bb #logo {
  display: inline-block !important;
  width: 28px; height: 28px;
  background: url('images/logo.png') center/contain no-repeat;
  text-indent: -9999px;
}
.article-view .ext-article .ext-body #top .bb #music { display: none !important; }

.article-view .ext-article .ext-body #top .bb .fl,
.article-view .ext-article .ext-body #top .bb .fr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* 导航项胶囊效果（不过度卡片化） */
.article-view .ext-article .ext-body #top .bb .mt { position: relative; display: inline-flex; align-items: center; }
.article-view .ext-article .ext-body #top .bb .mt > a.l,
.article-view .ext-article .ext-body #top .bb .mt > a.s {
  display: inline-block;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: 0 !important;
}
.article-view .ext-article .ext-body #top .bb .mt.sel > a.l {
  background: var(--article-accent) !important;
  color: #fff !important;
}
.article-view .ext-article .ext-body #top .bb .mt > a.l:hover,
.article-view .ext-article .ext-body #top .bb .mt > a.s:hover {
  background: var(--bg-secondary) !important;
}

/* 下拉菜单（mu）：无 JS 的悬停/聚焦显示、卡片化面板 */
.article-view .ext-article .ext-body #top .bb .mt .mu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: none; min-width: 180px; padding: 8px 10px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 12px; box-shadow: var(--article-shadow);
}
.article-view .ext-article .ext-body #top .bb .mt:hover .mu,
.article-view .ext-article .ext-body #top .bb .mt:focus-within .mu { display: block; }
.article-view .ext-article .ext-body #top .bb .mt .mu li { list-style: none; margin: 4px 0; }
.article-view .ext-article .ext-body #top .bb .mt .mu a {
  display: block; padding: 6px 8px; border-radius: 8px; text-decoration: none;
  color: var(--text-primary);
}
.article-view .ext-article .ext-body #top .bb .mt .mu a:hover { background: var(--bg-secondary); }

/* 日夜间开关与主题色选择的分段样式 */
.article-view .ext-article .ext-body #top .bb #dark-switcher {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px; padding: 4px;
}
.article-view .ext-article .ext-body #top .bb #dark-switcher > div {
  padding: 4px 8px; border-radius: 8px;
}
.article-view .ext-article .ext-body #top .bb #nav-color { display: inline-flex; gap: 6px; }
.article-view .ext-article .ext-body #top .bb #nav-color > div {
  padding: 4px 10px; border: 1px solid var(--border-color);
  border-radius: 10px; background: var(--bg-secondary); font-size: 12px;
}

/* 登录占位：简洁占位框 */
.article-view .ext-article .ext-body #top .bb #toplogin .init {
  width: 64px; height: 28px; border: 1px dashed var(--border-color);
  border-radius: 8px; opacity: .6;
}
.article-view .ext-article .ext-body #top .bb .mu { list-style: none; margin: 6px 0; padding: 0; }
.article-view .ext-article .ext-body #top .bb .mu li { margin: 4px 0; }

/* 订阅 / 应用弹出菜单在文章页中保持简洁（无需交互 JS） */
.article-view #menu-sub .mu, .article-view #menu-app .mu, .article-view #settings .mu { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px 10px; }
.ext-article .ext-body .mu { list-style: none; margin: 6px 0; padding: 0; }
.ext-article .ext-body .mu li { margin: 4px 0; }

/* 导航区块：#nav.bb 左右布局 */
.ext-article .ext-body #nav.bb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ext-article .ext-body #nav.bb .fl, .ext-article .ext-body #nav.bb .fr { display: flex; align-items: center; gap: 10px; }
.ext-article .ext-body .st { margin: 0; font-size: 20px; }
.ext-article .ext-body .st a { color: var(--text-primary); text-decoration: none; }

/* 频道导航（domain-nav） */
.ext-article .ext-body .domain-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 14px; border-bottom: 1px solid var(--border-color); }
.ext-article .ext-body .domain-nav a { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-primary); }
.ext-article .ext-body .domain-nav a.sel { background: var(--article-accent); color: #fff; border-color: transparent; }

/* 顶部搜索区（#nav .search） */
.ext-article .ext-body .search { display: flex; gap: 8px; align-items: center; }
.ext-article .ext-body .search input[type="search"] { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); }
.ext-article .ext-body .search button { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--article-accent); color: #fff; cursor: pointer; }

/* 热词区域 */
.ext-article .ext-body .hotkeyword { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ext-article .ext-body .hotkeyword a { padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); }

/* 列表区域（#list .bl） */
.ext-article .ext-body #list .bl { list-style: none; margin: 0; padding: 0; }
.ext-article .ext-body #list .bl li { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); margin: 12px 0; }
/* 左侧缩略图 */
.ext-article .ext-body #list .bl li a.img { display: block; }
.ext-article .ext-body #list .bl li a.img img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
/* 右侧内容 */
.ext-article .ext-body #list .bl li .c { margin: 0; }
.ext-article .ext-body #list .bl li .c h2 { margin: 0 0 6px 0; font-size: 18px; line-height: 1.5; }
.ext-article .ext-body #list .bl li .c .title { color: var(--text-primary); }
/* 摘要 */
.ext-article .ext-body #list .bl li .c .m { color: var(--text-primary); opacity: .9; }
/* 标签与日期 */
.ext-article .ext-body #list .bl li .o { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.ext-article .ext-body #list .bl li .o .tags { font-size: 13px; opacity: .8; }
.ext-article .ext-body #list .bl li .o .tags strong { font-weight: 600; margin-right: 6px; }
.ext-article .ext-body #list .bl li .o .d .state { display: inline-block; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-tertiary); font-size: 12px; }

/* 可能出现的菜单类元素（m-menu、mu、mt）基础样式 */
.ext-article .ext-body .m-menu { display: none; }
.ext-article .ext-body .mt { display: inline-flex; align-items: center; gap: 6px; }

/* 小屏优化 */
@media (max-width: 640px) {
  .ext-article { border-radius: 12px; margin: 14px auto; }
  .ext-article > h1 { padding: 18px 16px 6px; font-size: 20px; }
  .ext-article .ext-meta { padding: 0 16px 12px; }
  .ext-article .ext-body { padding: 14px 16px 20px; }
  .ext-article .ext-body #list .bl li { grid-template-columns: 1fr; }
}
/* 例外：不要把顶部与导航 .bb 卡片化（保持为普通行内/块级布局） */
.article-view #top .bb,
.article-view #nav.bb,
.article-view .domain-nav.bb {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
/* 顶部链接恢复为普通链接（不按钮化） */
.article-view #top .bb .mt a,
.article-view #top .bb .mt .s {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}