/* =========================================================
   503咖啡馆 · 用户端公共样式（纯静态预览版）
   ========================================================= */
:root {
  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-primary: #6f4e37;
  --color-primary-light: #8b6f5a;
  --color-primary-hover: #5a3f2c;
  --color-text: #2c2c2c;
  --color-text-secondary: #6b6b6b;
  --color-text-muted: #999999;
  --color-border: #e8e6e1;
  --color-border-light: #f0eee9;
  --color-accent: #c8a27c;
  --color-tag-bg: #f5f0ea;
  --color-tag-text: #7a6347;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 16px rgba(111,78,55,0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --max-width: 1200px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* 顶部导航 */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; height: 60px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.logo-icon { font-size: 22px; }
.nav-main { display: flex; gap: 20px; margin-left: 8px; }
.nav-link { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; padding: 6px 2px; position: relative; transition: color .15s; }
.nav-link:hover { color: var(--color-primary); }
.nav-link.is-active { color: var(--color-primary); }
.nav-link.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--color-primary); border-radius: 2px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search-box { display: flex; align-items: center; gap: 6px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; transition: border-color .15s; }
.search-box:focus-within { border-color: var(--color-primary-light); }
.search-icon { color: var(--color-text-muted); flex-shrink: 0; }
.search-input { border: none; background: transparent; outline: none; font-size: 13px; width: 150px; color: var(--color-text); }
.search-input::placeholder { color: var(--color-text-muted); }
.lang-toggle { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all .15s; }
.lang-toggle:hover { border-color: var(--color-primary-light); background: var(--color-tag-bg); }
.menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; }
.menu-toggle span { width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; }

/* 欢迎致辞（首页侧栏） */
.welcome-block { position: relative; overflow: hidden; }
.welcome-block::after { content: '☕'; position: absolute; right: -8px; bottom: -18px; font-size: 72px; opacity: .06; transform: rotate(-12deg); pointer-events: none; }
.welcome-block .block-title { display: flex; align-items: center; }
.welcome-block .welcome-icon { font-size: 18px; margin-right: 6px; }
.welcome-block .welcome-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.9; }

/* 站点数据条（首页） */
.stats-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 28px; }
.stats-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.stats-item { font-size: 13px; color: var(--color-text-secondary); }
.stats-item b { font-size: 18px; font-weight: 700; color: var(--color-text); margin-right: 4px; }
.stats-link { font-size: 13px; font-weight: 600; color: var(--color-primary); transition: opacity .15s; }
.stats-link:hover { opacity: .75; }

/* 精选置顶 */
.featured { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 32px; margin-bottom: 32px; position: relative; overflow: hidden; }
.featured::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-primary); }
.featured-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.featured-badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--color-primary); border-radius: var(--radius-sm); padding: 2px 8px; }
.featured-series { font-size: 11px; font-weight: 600; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); padding: 1px 6px; }
.featured-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.featured-title { font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--color-text); margin-bottom: 12px; }
a:hover .featured-title { color: var(--color-primary); }
.featured-excerpt { font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 18px; }
.featured-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* 文章卡片 */
.post-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 24px; display: block; color: inherit; transition: all .2s ease; cursor: pointer; }
.post-card:hover { border-color: var(--color-border); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-tag-bg); color: var(--color-tag-text); }
.tag-bell { background: #f0ebe4; color: #7a6347; }
.tag-grow { background: #eef3ee; color: #4a7a56; }
.tag-share { background: #eeeef5; color: #564a7a; }
.series-badge { font-size: 11px; font-weight: 600; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); padding: 1px 6px; }
.download-mark { font-size: 13px; }
.card-title { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--color-text); margin-bottom: 8px; }
.post-card:hover .card-title { color: var(--color-primary); }
.card-excerpt { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag { font-size: 12px; color: var(--color-text-muted); }
.card-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.meta-sep { margin: 0 4px; }
.meta-stat { white-space: nowrap; }

/* 侧边栏 */
.sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 80px; align-self: flex-start; }
.side-block { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 20px; }
.block-title { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-light); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-tag { font-size: 13px; color: var(--color-tag-text); background: var(--color-tag-bg); border-radius: var(--radius-sm); padding: 4px 10px; transition: all .15s; cursor: pointer; }
.cloud-tag:hover { background: var(--color-primary); color: #fff; }
.cloud-count { font-size: 11px; opacity: .6; margin-left: 4px; }
.archive-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.archive-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-text-secondary); padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
a.archive-item { display: flex; }
a.archive-item .archive-label { color: inherit; }
.archive-item:hover { background: var(--color-bg); color: var(--color-primary); }
.archive-count { font-size: 12px; color: var(--color-text-muted); }
.contact-block { text-align: center; }
.qr-placeholder { width: 96px; height: 96px; margin: 0 auto 10px; border: 2px dashed var(--color-border); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--color-text-muted); gap: 2px; }
.qr-hint { font-size: 12px; color: var(--color-text-muted); }

/* 布局 */
.page-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; }
.main-col { min-width: 0; }
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.section-head h2 { font-size: 18px; font-weight: 700; color: var(--color-text); }
.section-count { font-size: 13px; color: var(--color-text-muted); background: var(--color-tag-bg); border-radius: var(--radius-sm); padding: 1px 8px; }
.post-list { display: flex; flex-direction: column; gap: 16px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); font-size: 14px; }
.load-more-wrap { text-align: center; margin-top: 28px; }
.load-more { display: inline-block; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 10px 32px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); transition: all .15s; }
.load-more:hover { border-color: var(--color-primary-light); color: var(--color-primary); }

/* 筛选条 */
.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-label { font-size: 13px; color: var(--color-text-muted); }
.filter-btn { font-size: 13px; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; transition: all .15s; }
.filter-btn:hover { border-color: var(--color-primary-light); }
.filter-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-tag-text); background: var(--color-tag-bg); border-radius: var(--radius-sm); padding: 2px 8px; }
.filter-chip .x { cursor: pointer; opacity: .5; }
.filter-chip .x:hover { opacity: 1; }

/* 搜索页顶部搜索条 */
.search-hero { margin-bottom: 28px; padding: 28px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.search-hero .search-box { width: 100%; max-width: 640px; background: var(--color-surface); border: 2px solid var(--color-primary-light); border-radius: var(--radius-md); padding: 12px 16px; gap: 10px; box-shadow: var(--shadow-sm); }
.search-hero .search-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(111,78,55,0.15); }
.search-hero .search-input { font-size: 15px; width: 100%; }
.search-hero .search-icon { color: var(--color-primary-light); }
.search-hero-hint { margin-top: 12px; font-size: 14px; color: var(--color-text-secondary); }
.search-hero-hint .keyword { font-weight: 600; color: var(--color-primary); }

/* 工具卡片 */
.tool-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 24px; transition: all .2s; }
.tool-card:hover { border-color: var(--color-border); box-shadow: var(--shadow-hover); }
.tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tool-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-tag-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tool-title { font-size: 17px; font-weight: 600; color: var(--color-text); }
.tool-version { font-size: 12px; color: var(--color-text-muted); margin-left: 8px; }
.tool-excerpt { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 14px; }
.tool-foot { display: flex; justify-content: space-between; align-items: center; }
.tool-type { font-size: 12px; color: var(--color-tag-text); background: var(--color-tag-bg); border-radius: var(--radius-sm); padding: 2px 8px; }
.download-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); padding: 6px 16px; font-size: 13px; font-weight: 500; transition: all .15s; }
.download-btn:hover { background: var(--color-primary-hover); }

/* 工具网格 */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* 文章详情 */
.post-detail { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 40px 48px; }
.post-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-light); }
.post-title { font-size: 28px; font-weight: 700; line-height: 1.4; color: var(--color-text); margin-bottom: 14px; }
.post-body { font-size: 16px; line-height: 1.8; color: var(--color-text); }
.post-body h2 { font-size: 22px; margin: 28px 0 12px; }
.post-body h3 { font-size: 18px; margin: 22px 0 10px; }
.post-body p { margin: 12px 0; }
.post-body pre { background: #f6f4f0; border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; margin: 14px 0; }
.post-body code { font-family: var(--font-mono); }
.post-body blockquote { border-left: 3px solid var(--color-primary-light); padding-left: 14px; color: var(--color-text-secondary); margin: 14px 0; }
.post-body img { border-radius: var(--radius-sm); margin: 14px 0; }

/* 文章工具条 */
.post-toolbar { display: flex; gap: 16px; align-items: center; margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text-secondary); background: none; border: none; cursor: pointer; transition: color .15s; }
.tool-btn:hover { color: var(--color-primary); }
.tool-btn.is-active { color: var(--color-primary); }

/* 作者卡 */
.author-card { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 20px; margin: 24px 0; }
.author-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-tag-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.author-info p { font-size: 13px; color: var(--color-text-secondary); }

/* 上下篇导航 */
.post-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }

/* 目录 */
.toc { position: sticky; top: 80px; align-self: flex-start; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.toc-link { font-size: 13px; color: var(--color-text-muted); padding: 2px 8px; border-left: 2px solid var(--color-border-light); transition: all .15s; }
.toc-link:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
.toc-link.lvl-3 { padding-left: 20px; }

/* 评论区 */
.comment-section { margin-top: 40px; }
.comment-form { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 20px; margin-bottom: 24px; }
.comment-textarea { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; font-size: 14px; resize: vertical; min-height: 80px; font-family: var(--font-sans); outline: none; transition: border-color .15s; }
.comment-textarea:focus { border-color: var(--color-primary-light); }
.comment-submit { margin-top: 12px; border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); padding: 8px 20px; font-size: 14px; font-weight: 500; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 16px 20px; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comment-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-tag-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.comment-author { font-size: 13px; font-weight: 600; color: var(--color-text); }
.comment-date { font-size: 12px; color: var(--color-text-muted); }
.comment-ops { margin-left: auto; display: flex; gap: 12px; }
.comment-op { font-size: 12px; color: var(--color-text-muted); cursor: pointer; text-decoration: none; }
.comment-op:hover { color: var(--color-primary); }
.comment-body { font-size: 14px; color: var(--color-text-secondary); }
.comment-body .comment-textarea { margin-bottom: 0; }
.comment-body .comment-edit-bar { display: flex; gap: 8px; margin-top: 8px; }
.comment-body .comment-edit-cancel { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* 搜索结果高亮 */
.highlight { color: orangered; }

/* 自定义确认弹窗（替代原生 confirm） */
.ui-confirm-overlay { position: fixed; inset: 0; background: rgba(23,20,16,0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity .16s ease; padding: 20px; }
.ui-confirm-overlay.is-open { opacity: 1; }
.ui-confirm-overlay.is-leaving { opacity: 0; }
.ui-confirm-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 20px 50px rgba(23,20,16,0.25)); max-width: 320px; width: 100%; padding: 28px 24px 20px; text-align: center; transform: scale(.92) translateY(8px); transition: transform .16s ease; }
.ui-confirm-overlay.is-open .ui-confirm-card { transform: scale(1) translateY(0); }
.ui-confirm-icon { font-size: 34px; line-height: 1; }
.ui-confirm-msg { font-size: 14px; color: var(--color-text); line-height: 1.7; margin: 14px 0 20px; white-space: pre-line; }
.ui-confirm-btns { display: flex; gap: 10px; }
.ui-confirm-btn { flex: 1; padding: 10px 0; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); }
.ui-confirm-btn:hover { background: var(--color-tag-bg); }
.ui-confirm-ok { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ui-confirm-ok:hover { background: var(--color-primary-hover); }

/* 分页 */
.pagination { display: flex; justify-content: center; gap: 4px; margin-top: 32px; }
.page-btn { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; transition: all .15s; }
.page-btn:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.page-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 关于页 */
.about-hero { padding-top: 48px; padding-bottom: 48px; }
.about-card { text-align: center; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 60px 32px; }
.about-icon { font-size: 48px; }
.about-card h1 { font-size: 24px; font-weight: 700; color: var(--color-text); margin: 16px 0 8px; }
.about-slogan { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 8px; }
.about-placeholder { font-size: 14px; color: var(--color-text-muted); }
.about-content { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 40px 48px; }
.about-content h2 { font-size: 20px; margin: 24px 0 12px; color: var(--color-text); }
.about-content p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.8; margin: 12px 0; }
.about-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.about-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-tag-text); background: var(--color-tag-bg); border-radius: var(--radius-sm); padding: 8px 16px; transition: all .15s; }
.about-link:hover { background: var(--color-primary); color: #fff; }

/* 页脚 */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: 60px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--color-primary); }
.footer-logo { font-size: 20px; }
.footer-slogan { margin-top: 6px; font-size: 13px; color: var(--color-text-muted); }
.footer-right { text-align: right; }
.footer-copy { font-size: 13px; color: var(--color-text-secondary); }
.footer-meta { margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }

/* 响应式 */
@media (max-width: 960px) { .page-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .header-inner { height: 52px; gap: 12px; }
  .search-box { display: none; }
  .nav-main { position: absolute; top: 52px; left: 0; right: 0; flex-direction: column; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 12px 16px; gap: 8px; display: none; }
  .nav-main.open { display: flex; }
  .menu-toggle { display: flex; }
  .featured { padding: 20px; }
  .featured-title { font-size: 20px; }
  .sidebar { position: static; }
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }
  .footer-right { text-align: center; }
  .post-detail { padding: 24px 20px; }
  .post-title { font-size: 22px; }
  .tool-grid { grid-template-columns: 1fr; }
  .about-content { padding: 24px 20px; }
}

/* =========================================================
   主题：浅色科技风（body[data-theme="tech"]，默认为咖啡风）
   仅覆盖 CSS 变量与少量硬编码色，切换即全站换肤
   ========================================================= */
body[data-theme='tech'] {
  --color-bg: #f6f9fc;
  --color-surface: #ffffff;
  --color-primary: #2f7ce6;
  --color-primary-light: #8ab9f3;
  --color-primary-hover: #1f63ca;
  --color-text: #1b2735;
  --color-text-secondary: #5a6a80;
  --color-text-muted: #93a2b5;
  --color-border: #e2eaf4;
  --color-border-light: #ecf1f8;
  --color-accent: #29b6f6;
  --color-tag-bg: #ecf3fc;
  --color-tag-text: #3a76c4;
  --shadow-sm: 0 1px 3px rgba(20,55,120,0.04);
  --shadow-md: 0 2px 8px rgba(20,55,120,0.05);
  --shadow-hover: 0 4px 16px rgba(47,124,230,0.10);
}

/* 科技风下的板块标配色（杂谈=蓝 / 养成=青绿 / 分享=紫，清新低饱和） */
body[data-theme='tech'] .tag-bell { background: #e5f2fd; color: #2470c9; }
body[data-theme='tech'] .tag-grow { background: #e2f6ef; color: #0d9d6e; }
body[data-theme='tech'] .tag-share { background: #efeafd; color: #7a5cd0; }

/* 代码块与搜索高亮 */
body[data-theme='tech'] .post-body pre { background: #f0f5fc; }
body[data-theme='tech'] .highlight { background: #dcebfe; }

/* 搜索页搜索框 focus 光晕 */
body[data-theme='tech'] .search-hero .search-box:focus-within { box-shadow: 0 0 0 3px rgba(47,124,230,0.15); }

/* 登录/注册页输入框 focus 光晕 */
body[data-theme='tech'] .field-input:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(47,124,230,0.08); }

/* 登录/注册页二维码示意与图片验证码配色跟随（CSS 优先级高于 SVG 属性） */
body[data-theme='tech'] .auth-qr-svg > rect:first-child { fill: #edf4fc; }
body[data-theme='tech'] .captcha-img svg > rect:first-child { fill: #edf4fc; }
body[data-theme='tech'] .captcha-img path { stroke: #8fb8f0; }
body[data-theme='tech'] .captcha-img text { fill: #2470c9; }
body[data-theme='tech'] .captcha-img circle { fill: #6b9be0; }

/* 主题切换按钮（与语言切换按钮同风格） */
.theme-toggle { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all .15s; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--color-primary-light); background: var(--color-tag-bg); }
@media (max-width: 768px) { .theme-toggle .theme-label { display: none; } }

/* =========================================================
   主题：绚丽风（body[data-theme="colorful"]，三主题循环之一）
   柔和渐变方案：Hero/彩虹线均已降饱和
   ========================================================= */
body[data-theme='colorful'] {
  --color-bg: #fafbff;
  --color-surface: #ffffff;
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --color-primary-hover: #6d28d9;
  --color-text: #2a2233;
  --color-text-secondary: #5f5470;
  --color-text-muted: #948aa5;
  --color-border: #e4def0;
  --color-border-light: #edf0f6;
  --color-accent: #ec4899;
  --color-tag-bg: #f3e8ff;
  --color-tag-text: #7c3aed;
  --shadow-sm: 0 1px 3px rgba(76,29,149,0.04);
  --shadow-md: 0 2px 8px rgba(76,29,149,0.06);
  --shadow-hover: 0 4px 16px rgba(124,58,237,0.12);
  background-color: #fafbff;
  background-image:
    radial-gradient(620px circle at 12% 8%, rgba(168,85,247,.13), transparent 45%),
    radial-gradient(520px circle at 88% 12%, rgba(236,72,153,.11), transparent 48%),
    radial-gradient(720px circle at 50% 92%, rgba(59,130,246,.11), transparent 52%);
  background-attachment: fixed;
}

/* 顶部导航：毛玻璃 + 柔和渐变底线 */
body[data-theme='colorful'] .site-header { background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: none; position: relative; }
body[data-theme='colorful'] .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(251,191,119,.7), rgba(240,166,192,.7), rgba(183,157,240,.7), rgba(147,197,253,.7), rgba(134,220,184,.7)); }
body[data-theme='colorful'] .logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 4px 12px rgba(236,72,153,.35); font-size: 18px; }
body[data-theme='colorful'] .logo-text { background: linear-gradient(90deg, #7c3aed, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
body[data-theme='colorful'] .nav-link { font-weight: 600; }
body[data-theme='colorful'] .nav-link:hover { color: #a855f7; }
body[data-theme='colorful'] .nav-link.is-active { color: #a855f7; }
body[data-theme='colorful'] .nav-link.is-active::after { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
body[data-theme='colorful'] .search-box:focus-within { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.12); }
body[data-theme='colorful'] .header-actions .login-btn { background: linear-gradient(135deg, #6366f1, #a855f7) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(124,58,237,.35); }

/* Hero 横幅（绚丽主题首页专属元素，仅绚丽主题渲染） */
.colorful-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 44px 48px; margin-bottom: 28px; background: linear-gradient(135deg, #8b7cf6 0%, #b08bd9 52%, #e8a3c9 100%); color: #fff; box-shadow: 0 12px 32px rgba(168,85,247,.18); }
.colorful-hero::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.12); top: -140px; right: -80px; }
.colorful-hero::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08); bottom: -100px; left: 28%; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); font-size: 13px; font-weight: 600; margin-bottom: 16px; backdrop-filter: blur(4px); }
.hero-title { font-size: 32px; font-weight: 800; line-height: 1.3; margin: 0 0 10px; letter-spacing: .5px; }
.hero-sub { font-size: 15px; opacity: .92; margin: 0 0 22px; max-width: 560px; line-height: 1.7; }
.hero-stats { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-stat { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 10px 18px; font-size: 13px; backdrop-filter: blur(4px); }
.hero-stat b { font-size: 18px; margin-right: 4px; }
.hero-float { position: absolute; font-size: 26px; opacity: .55; animation: heroFloat 5s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.hero-float.f1 { top: 22%; right: 14%; animation-delay: 0s; }
.hero-float.f2 { top: 55%; right: 26%; animation-delay: 1.2s; font-size: 20px; }
.hero-float.f3 { top: 30%; right: 36%; animation-delay: 2.1s; font-size: 22px; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 精选置顶：柔和渐变卡片 */
body[data-theme='colorful'] .featured { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #fdf4ff 45%, #eff6ff 100%); border: 1px solid #e9d5ff; }
body[data-theme='colorful'] .featured::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, rgba(240,166,192,.9), rgba(183,157,240,.9), rgba(147,197,253,.9)); }
body[data-theme='colorful'] .featured-badge { background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; border: none; box-shadow: 0 4px 12px rgba(236,72,153,.3); }
body[data-theme='colorful'] .featured-series { background: linear-gradient(135deg, #10b981, #14b8a6); color: #fff; border: none; }
body[data-theme='colorful'] .featured-title { background: linear-gradient(90deg, #7c3aed, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body[data-theme='colorful'] .featured .tag-bell, body[data-theme='colorful'] .featured .tag-share, body[data-theme='colorful'] .featured .tag-grow { color: #fff; }
body[data-theme='colorful'] .featured .tag-bell { background: linear-gradient(135deg, #f97316, #ec4899); }
body[data-theme='colorful'] .featured .tag-grow { background: linear-gradient(135deg, #10b981, #14b8a6); }
body[data-theme='colorful'] .featured .tag-share { background: linear-gradient(135deg, #8b5cf6, #3b82f6); }

/* 最新发布：渐变标题 + 渐变计数 */
body[data-theme='colorful'] .section-head h2 { background: linear-gradient(90deg, #6366f1, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body[data-theme='colorful'] .section-count { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 13px; }

/* 文章卡片：悬浮升起 + 紫色光晕 */
body[data-theme='colorful'] .post-card { border: 1px solid var(--color-border-light); transition: transform .2s, box-shadow .2s, border-color .2s; }
body[data-theme='colorful'] .post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(124,58,237,.15); border-color: #ddd6fe; }
body[data-theme='colorful'] .post-card .card-title { transition: color .15s; }
body[data-theme='colorful'] .post-card:hover .card-title { color: #7c3aed; }
body[data-theme='colorful'] .section-tag.tag-bell { background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; }
body[data-theme='colorful'] .section-tag.tag-grow { background: linear-gradient(135deg, #10b981, #14b8a6); color: #fff; }
body[data-theme='colorful'] .section-tag.tag-share { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; }
body[data-theme='colorful'] .series-badge { background: linear-gradient(135deg, #10b981, #14b8a6); color: #fff; }
body[data-theme='colorful'] .download-mark { filter: drop-shadow(0 2px 4px rgba(139,92,246,.4)); }

/* 标签：六色循环 */
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+1) { background: #ede9fe; color: #7c3aed; }
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+2) { background: #fce7f3; color: #db2777; }
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+3) { background: #dbeafe; color: #2563eb; }
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+4) { background: #d1fae5; color: #059669; }
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+5) { background: #ffedd5; color: #ea580c; }
body[data-theme='colorful'] .card-tags .tag:nth-child(6n+6) { background: #fae8ff; color: #a21caf; }

/* 加载更多：渐变按钮 */
body[data-theme='colorful'] .load-more { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; border: none; box-shadow: 0 8px 20px rgba(124,58,237,.3); }
body[data-theme='colorful'] .load-more:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,58,237,.4); }

/* 侧边栏：柔和彩虹顶边 + 渐变标题 */
body[data-theme='colorful'] .side-block { position: relative; overflow: hidden; border: 1px solid var(--color-border-light); }
body[data-theme='colorful'] .side-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(251,191,119,.7), rgba(240,166,192,.7), rgba(183,157,240,.7), rgba(147,197,253,.7), rgba(134,220,184,.7)); }
body[data-theme='colorful'] .block-title { background: linear-gradient(90deg, #6366f1, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
body[data-theme='colorful'] .cloud-tag { border: 1px solid transparent; font-weight: 600; transition: transform .15s; }
body[data-theme='colorful'] .cloud-tag:hover { transform: translateY(-2px); }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+1) { background: #ede9fe; color: #6d28d9; }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+2) { background: #fce7f3; color: #be185d; }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+3) { background: #dbeafe; color: #1d4ed8; }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+4) { background: #d1fae5; color: #047857; }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+5) { background: #ffedd5; color: #c2410c; }
body[data-theme='colorful'] .cloud-tag:nth-child(6n+6) { background: #fae8ff; color: #86198f; }
body[data-theme='colorful'] .cloud-count { background: rgba(255,255,255,.75); border-radius: 8px; padding: 0 5px; font-size: 11px; }
body[data-theme='colorful'] .archive-count { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 12px; }
body[data-theme='colorful'] .qr-placeholder { background: linear-gradient(135deg, #f3e8ff, #dbeafe); border: 1px solid #e9d5ff; color: #6d28d9; font-weight: 600; }
body[data-theme='colorful'] .qr-hint { color: #7c6f9c; }

/* 页脚：深色渐变 */
body[data-theme='colorful'] .site-footer { background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 55%, #831843 100%); color: #e9e4ff; }
body[data-theme='colorful'] .footer-brand { color: #fff; font-weight: 700; }
body[data-theme='colorful'] .footer-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #f97316, #ec4899); font-size: 15px; }
body[data-theme='colorful'] .footer-slogan { color: rgba(233,228,255,.72); }
body[data-theme='colorful'] .footer-copy, body[data-theme='colorful'] .footer-meta { color: rgba(233,228,255,.5); }

/* 绚丽主题下其余页面的细节跟随 */
body[data-theme='colorful'] .post-body pre { background: #f5f1fc; }
body[data-theme='colorful'] .highlight { background: #f1e0ff; }
body[data-theme='colorful'] .search-hero .search-box:focus-within { box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
body[data-theme='colorful'] .field-input:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(124,58,237,.10); }
body[data-theme='colorful'] .auth-qr-svg > rect:first-child { fill: #f3ecfe; }
body[data-theme='colorful'] .captcha-img svg > rect:first-child { fill: #f3ecfe; }
body[data-theme='colorful'] .captcha-img path { stroke: #b79df0; }
body[data-theme='colorful'] .captcha-img text { fill: #7c3aed; }
body[data-theme='colorful'] .captcha-img circle { fill: #a78bfa; }

/* Hero 响应式 */
@media (max-width: 768px) {
  .colorful-hero { padding: 28px 24px; border-radius: 16px; }
  .hero-title { font-size: 24px; }
  .hero-sub { font-size: 13px; }
  .hero-float { display: none; }
  .hero-stat { padding: 8px 12px; font-size: 12px; }
}