/* ==========================================================================
   DevCN UI Refresh 2026-11-10
   作用：在全部 26 个既有样式之后加载，做一次统一收口。
   范围：body.front-ui（公开站点），不进入后台 body.admin-layout。
   原则：只改排版、间距、圆角、配色与可读性，不改 DOM 结构。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量：把现存四套变量体系（--dc- / --ui- / --community- / --studio-）
      收敛到一套语义值上，保留旧名做别名，让既有规则里的 var() 一起生效。
   -------------------------------------------------------------------------- */
:root {
  --ui-ink:        #151a23;
  --ui-ink-2:      #3a4556;
  --ui-muted:      #59657a;
  --ui-faint:      #6d7891;

  --ui-bg:         #ffffff;
  --ui-bg-soft:    #f7f9fc;
  --ui-bg-sink:    #f1f4fa;

  --ui-line:       #e3e8f0;
  --ui-line-soft:  #eef1f6;

  --ui-accent:     #2563eb;
  --ui-accent-ink: #1d4ed8;
  --ui-accent-soft:#eff4ff;

  --ui-r-sm: 8px;
  --ui-r:    12px;
  --ui-r-lg: 16px;

  --ui-ease: cubic-bezier(.2,.6,.3,1);

  /* 旧变量别名 */
  --text: var(--ui-ink);
  --text-soft: var(--ui-muted);
  --text-faint: var(--ui-faint);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --border: var(--ui-line);

  --dc-ink: var(--ui-ink);
  --dc-muted: var(--ui-muted);
  --dc-line: var(--ui-line);
  --dc-soft: var(--ui-bg-soft);
  --dc-bg: var(--ui-bg-soft);

  --community-ink: var(--ui-ink);
  --community-muted: var(--ui-muted);
  --community-line: var(--ui-line);

  --studio-ink: var(--ui-ink);
  --studio-muted: var(--ui-muted);
  --studio-line: var(--ui-line);

  --primary: var(--ui-accent);
  --primary-2: var(--ui-accent-ink);
}

/* --------------------------------------------------------------------------
   2. 基础排版：正文 15px / 1.75，最小字号守到 12px
   -------------------------------------------------------------------------- */
body.front-ui {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.front-ui p,
body.front-ui li {
  line-height: 1.75;
}

/* 全站最小字号：8/9/10/11px 一律抬到 12px（401 条规则的主要来源） */
body.front-ui small,
body.front-ui time,
body.front-ui .kicker,
body.front-ui .eyebrow,
body.front-ui [class*="cms-"] small,
body.front-ui [class*="cms-"] time,
body.front-ui .article-index-meta,
body.front-ui .reading-byline,
body.front-ui .article-byline {
  font-size: 12px !important;
  line-height: 1.6;
}

/* 辅助文字统一到合格的对比度 */
body.front-ui .muted,
body.front-ui .article-index-summary,
body.front-ui .cms-lead-copy p,
body.front-ui .side-stats,
body.front-ui .article-index-meta,
body.front-ui .reading-byline {
  color: var(--ui-muted);
}

/* 标题层级收口 */
body.front-ui h1 { letter-spacing: -.022em; }
body.front-ui h2 { letter-spacing: -.016em; }
body.front-ui h3 { letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   3. 页头：统一高度、分隔线、导航选中态与搜索框
   -------------------------------------------------------------------------- */
body.front-ui .site-head {
  border-bottom: 1px solid var(--ui-line);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(8px);
}

body.front-ui .head-in {
  gap: 24px;
}

body.front-ui .brand-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.front-ui .brand-desc {
  font-size: 12px;
  color: var(--ui-faint);
}

body.front-ui .main-nav .nav-in > a {
  font-size: 14px;
  color: var(--ui-ink-2);
  padding-bottom: 10px;
  border-bottom-width: 2px;
  transition: color .18s var(--ui-ease), border-color .18s var(--ui-ease);
}

body.front-ui .main-nav .nav-in > a:hover {
  color: var(--ui-accent);
}

body.front-ui .main-nav .nav-in > a.on {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
  font-weight: 500;
}

body.front-ui .head-search {
  background: var(--ui-bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .18s var(--ui-ease), background .18s var(--ui-ease);
}

body.front-ui .head-search:focus-within {
  background: #fff;
  border-color: var(--ui-accent);
}

body.front-ui .head-search input {
  font-size: 13px;
}

/* 统一按钮：主按钮实心、次按钮描边，圆角一致 */
body.front-ui .btn,
body.front-ui .article-index-submit,
body.front-ui button.btn {
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  transition: background .18s var(--ui-ease), border-color .18s var(--ui-ease), transform .12s var(--ui-ease);
}

body.front-ui .btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   4. 卡片与侧栏：统一圆角 12、1px 描边、无重投影
   -------------------------------------------------------------------------- */
body.front-ui .article-side-card,
body.front-ui .article-author-card,
body.front-ui .listing-sidebar > *,
body.front-ui .article-tag-panel {
  border-radius: var(--ui-r);
  border: 1px solid var(--ui-line);
  box-shadow: none;
  padding: 20px;
}

body.front-ui .article-side-card h2,
body.front-ui .article-side-card .side-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

/* 侧栏里的数字统计：一行放下，不再各占一块 */
body.front-ui .article-author-stats,
body.front-ui .side-stats {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-line-soft);
  border-bottom: 1px solid var(--ui-line-soft);
}

body.front-ui .article-author-stats > *,
body.front-ui .side-stats > * {
  flex: 0 0 auto;
  text-align: left;
}

/* --------------------------------------------------------------------------
   5. 文章列表页：行分隔、封面对齐、摘要字号
   -------------------------------------------------------------------------- */
body.page-articles .article-index-row {
  grid-template-columns: minmax(0,1fr) 156px;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--ui-line-soft);
  transition: background .16s var(--ui-ease);
}

body.page-articles .article-index-row:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

body.page-articles .article-index-row:hover {
  background: var(--ui-bg-soft);
}

body.page-articles .article-index-cover img {
  border-radius: 10px;
  border: 1px solid var(--ui-line-soft);
  object-fit: cover;
}

body.page-articles .article-index-copy > a,
body.page-articles .article-index-copy h2,
body.page-articles .article-index-copy h3 {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.012em;
}

body.page-articles .article-index-summary {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ui-muted);
  -webkit-line-clamp: 2;
}

body.page-articles .article-index-meta {
  margin-top: 10px;
  gap: 10px;
}

body.page-articles .article-index-meta > * {
  font-size: 12px;
}

/* 分类筛选栏：弱化成胶囊，不再抢首屏 */
body.page-articles .article-index-channels a,
body.page-articles .article-index-channels button {
  border-radius: 999px;
  font-size: 13px;
  padding: 5px 13px;
}

/* 首屏标题区收紧 */
body.page-articles .article-index-page > header {
  padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   6. 文章详情页：控制行宽、提升正文可读性
   -------------------------------------------------------------------------- */
body.page-article .article-layout,
body.page-article .reading-layout {
  max-width: 1080px;
  grid-template-columns: minmax(0,1fr) 288px;
  gap: 24px;
}

body.page-article .article-prose {
  font-size: 16px;
  line-height: 1.88;
  color: #1d2531;
}

body.page-article .article-prose > p {
  margin: 0 0 1.1em;
}

body.page-article .article-prose h2 {
  font-size: 21px;
  line-height: 1.45;
  margin: 2.1em 0 .75em;
  padding-top: .2em;
}

body.page-article .article-prose h3 {
  font-size: 17px;
  line-height: 1.5;
  margin: 1.8em 0 .6em;
}

body.page-article .article-prose ul,
body.page-article .article-prose ol {
  padding-left: 1.35em;
  margin: 0 0 1.1em;
}

body.page-article .article-prose li {
  margin-bottom: .4em;
}

body.page-article .article-prose blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--ui-accent);
  background: var(--ui-bg-soft);
  border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0;
  color: var(--ui-ink-2);
}

body.page-article .article-prose code {
  background: var(--ui-bg-sink);
  border-radius: 5px;
  padding: .12em .38em;
  font-size: .92em;
}

body.page-article .article-prose pre {
  border-radius: var(--ui-r);
  padding: 16px 18px;
  line-height: 1.7;
  overflow: auto;
}

body.page-article .article-prose img {
  border-radius: var(--ui-r);
}

/* 详情页不显示列表页的分类导航（读了文章不需要再筛分类） */
body.page-article .channel-bar {
  display: none;
}

/* 侧栏卡片里的全大写装饰英文与下方中文标题重复，隐藏 */
body.page-article .article-side-card header > div > small {
  display: none;
}

/* 标题与导语 */
body.page-article .reading-kicker,
body.page-article .article-back {
  font-size: 12px;
  letter-spacing: .02em;
}

body.page-article .reading-actions a,
body.page-article .reading-actions button {
  border-radius: 8px;
  font-size: 12px;
}

/* 标签 */
body.page-article .article-tag-list a,
body.page-article .article-related-tags a,
body.page-article .pill-link {
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 11px;
  border: 1px solid var(--ui-line);
  color: var(--ui-ink-2);
  background: #fff;
}

body.page-article .article-tag-list a:hover,
body.page-article .article-related-tags a:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* 评论区 */
body.page-article .comment-form {
  border-radius: var(--ui-r);
  border: 1px solid var(--ui-line);
  padding: 18px;
  background: #fff;
}

body.page-article .comment-form input,
body.page-article .comment-form textarea {
  border-radius: 9px;
  font-size: 13.5px;
}

body.page-article .comment-empty {
  border-radius: var(--ui-r);
  border: 1px dashed var(--ui-line);
  background: var(--ui-bg-soft);
  color: var(--ui-muted);
  font-size: 13px;
  padding: 28px 18px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. 登录 / 注册：垂直居中，去掉广告，卡片收口
   -------------------------------------------------------------------------- */
body.page-auth .form-wrap {
  min-height: calc(100vh - 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
}

body.page-auth .form-card {
  width: 452px;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 32px;
  border-radius: var(--ui-r-lg);
  border: 1px solid var(--ui-line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10);
}

body.page-auth .form-card h1 {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

body.page-auth .form-card input {
  border-radius: 9px;
  font-size: 14px;
  padding: 11px 13px;
}

body.page-auth .auth-form-links {
  font-size: 12.5px;
}

/* 登录/注册页不放广告 */
body.page-auth .list-ad,
body.page-auth .article-ad,
body.page-auth [data-ad-slot] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. 广告位：统一容器（保留投放，只去掉"意外感"）
   -------------------------------------------------------------------------- */
body.front-ui .list-ad img,
body.front-ui .article-ad img {
  border-radius: var(--ui-r-sm);
  display: block;
}

body.front-ui .list-ad small,
body.front-ui .article-ad small {
  font-size: 10px !important;
  color: var(--ui-faint);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   9. 首页：小字抬升、大卡标题截断、图文卡统一
   -------------------------------------------------------------------------- */
body.page-home .cms-lead h2 {
  font-size: clamp(20px, 2.05vw, 26px);
  line-height: 1.4;
  letter-spacing: -.02em;
}

body.page-home .cms-lead h2 a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-home .cms-lead-copy p {
  font-size: 13.5px;
  line-height: 1.72;
}

body.page-home .cms-feature-links a {
  padding: 11px 0;
  border-top: 1px solid var(--ui-line-soft);
}

body.page-home .cms-feature-links b {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

body.page-home .cms-image-card img {
  border-radius: 10px;
}

body.page-home .cms-section-head h2 {
  font-size: 17px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. 页脚：与内容同宽，字号抬到 12.5
   -------------------------------------------------------------------------- */
body.front-ui .foot-col a,
body.front-ui .foot-col p {
  font-size: 12.5px;
  color: var(--ui-muted);
}

body.front-ui .foot-col a:hover {
  color: var(--ui-accent);
}

/* --------------------------------------------------------------------------
   11. 移动端
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.front-ui {
    font-size: 15px;
    /* 底部固定导航会压住最后一条内容，留出安全区 */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.page-home .cms-lead h2 {
    font-size: 21px;
    line-height: 1.38;
  }

  body.page-articles .article-index-row {
    grid-template-columns: minmax(0,1fr) 88px;
    gap: 14px;
    padding: 18px 0;
  }

  body.page-articles .article-index-row .article-index-cover img {
    border-radius: 8px;
  }

  body.page-article .article-prose {
    font-size: 16px;
    line-height: 1.85;
  }

  body.page-auth .form-wrap {
    min-height: auto;
    padding: 28px 16px 40px;
  }

  body.page-auth .form-card {
    padding: 24px 20px;
    max-width: none;
  }
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  body.front-ui * {
    transition: none !important;
    animation: none !important;
  }
}