/* =========================================================
   全栈文章分享与创作者收益平台 (Design System & Styles)
   采用 Modern Premium Aesthetics: Sleek Dark Accents, Vibrant Gradients, Glassmorphism
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-main: #0b0f19;
  --bg-card: rgba(22, 28, 45, 0.75);
  --bg-card-hover: rgba(30, 39, 64, 0.85);
  --bg-input: #121829;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(99, 102, 241, 0.4);
  
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-glow: rgba(99, 102, 241, 0.25);
  
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.15);
  
  --glass-bg: rgba(15, 23, 42, 0.65);
  --glass-backdrop: blur(16px);

  /* 内容板块：由左下的天空蓝，斜向过渡至右上的深色。 */
  --panel-surface: linear-gradient(to top right, rgba(14, 116, 144, 0.38) 0%, rgba(22, 38, 62, 0.9) 46%, rgba(22, 28, 45, 0.94) 100%);
  --panel-surface-hover: linear-gradient(to top right, rgba(14, 165, 233, 0.42) 0%, rgba(30, 46, 74, 0.94) 52%, rgba(30, 39, 64, 0.97) 100%);
}

/* 白色/浅色主题 (Refined Premium Light Theme) */
[data-theme="light"] {
  --bg-main: #fdfaf5;
  --bg-card: #fffdf9;
  --bg-card-hover: #fffefb;
  --bg-input: #f8f3eb;
  --border-color: #e9e1d6;
  --border-hover: #d9cbbb;
  
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-glow: rgba(79, 70, 229, 0.12);
  
  --accent-cyan: #0284c7;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-backdrop: blur(16px);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 8px 30px rgba(15, 23, 42, 0.06);

  /* 亮色模式以雾白为主：天空蓝只留在左下角，避免大面积色块突兀。 */
  --panel-surface: linear-gradient(to top right, #e9f7fd 0%, #f5fbfe 28%, #ffffff 58%, #ffffff 100%);
  --panel-surface-hover: linear-gradient(to top right, #e1f4fd 0%, #f5fbfe 34%, #ffffff 66%, #ffffff 100%);
}

/* 暖白画布配低对比矢量圆点；不依赖图片，滚动与加载都保持轻量。 */
[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(176, 139, 96, 0.16) 0.85px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(14, 116, 144, 0.08) 0.7px, transparent 0.9px),
    radial-gradient(circle at 6% 96%, rgba(255, 224, 185, 0.34) 0%, transparent 34%),
    radial-gradient(circle at 96% 6%, rgba(206, 241, 249, 0.3) 0%, transparent 28%);
  background-size: 24px 24px, 48px 48px, 100% 100%, 100% 100%;
  background-position: 0 0, 12px 12px, 0 0, 0 0;
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(6, 182, 212, 0.06) 0%, transparent 40%);
}

a {
  color: inherit;
  text-decoration: none;
}

/* =============== 导航栏 Navbar =============== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border-bottom: 1px solid var(--border-color);

  /* 导航内容与页面内容左右对齐。
     背景条仍然通栏（否则宽屏上会出现一条悬空的横条），
     但里面的 logo 与菜单收进和 .container 一样的 1200px 区间 ——
     不这么做的话，宽屏上 logo 贴在屏幕最左、菜单贴最右，
     和下面 1200px 居中的正文明显对不齐。
     max() 保证窄屏时退回 1.5rem 的常规内边距。 */
  padding: 0 max(1.5rem, calc((100% - 1200px) / 2));
  height: 62px;
  display: flex;
  /* 品牌靠左、其余靠右成一组。
     原来用 space-between + 四个直接子元素，浏览器会把它们均匀铺开 ——
     主题按钮就被甩到屏幕正中间，和右侧的菜单中间空一大片
     （2026-08-27 桌面端实测）。改成靠左排列 + 品牌吃掉剩余空间。 */
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
}

.navbar > .brand-logo { margin-right: auto; }

/* 顺序：菜单 → 主题按钮 → 汉堡。
   主题按钮排在菜单之后，视觉上和右侧操作区连在一起，不再孤零零悬在中间。 */
.navbar > .nav-links   { order: 2; }
.navbar > .theme-toggle { order: 3; margin-left: 0; }
.navbar > .nav-toggle  { order: 4; }

.brand-logo {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  /* 直接用文字色，不再用「白→紫」渐变裁切：
     浅色主题下白色那一半会变成几乎看不见的灰白 */
  color: var(--text-main);
}

.brand-logo .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.brand-logo span.badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-weight: 600;
}
[data-theme="light"] .brand-logo span.badge { color: var(--primary); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.nav-link {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-main);
  background: var(--bg-card);
}

/* 当前页要一眼可辨，而不是只有颜色深一点点 */
.nav-link.active {
  color: var(--text-main);
  background: var(--primary-glow);
  font-weight: 600;
}

#nav-auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 导航里的主题按钮独立成统一组件，登录前后、所有页面都保持相同尺寸与交互。 */
.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--primary-glow);
  outline-offset: 2px;
}

[data-theme="light"] .theme-toggle {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

[data-theme="dark"] .theme-toggle {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(165, 180, 252, 0.28);
  color: #c7d2fe;
}

.nav-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 0.84rem;
  white-space: nowrap;
}

.nav-user-chip .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
}

.nav-user-chip .member-no {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* 移动端汉堡菜单 */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  width: 38px; height: 34px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 860px) {
  .navbar { padding: 0 1rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute;
    /* 右侧小面板，不再整屏铺开。
       原来是 left:0;right:0 的整宽下拉，四个按钮就吃掉大半个屏幕，
       而且盖住的内容比它自己还多。改成贴右边、限宽，
       视觉上更像「从汉堡按钮展开」，也少遮内容。 */
    top: 58px; right: 0.6rem; left: auto;
    width: min(19rem, calc(100vw - 1.2rem));
    border-radius: var(--radius-md);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.75rem 1rem 1rem;
    /* 🛑 必须不透明。原来用的是 --glass-bg（半透明毛玻璃），
       展开后首页的大标题会直接透过菜单显出来，字叠字看不清
       （2026-08-27 手机实测）。桌面端导航条悬浮在内容之上，
       毛玻璃是好看的；手机端这是一个覆盖整屏宽的下拉面板，性质不同。 */
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    z-index: 60;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 0.6rem 0.8rem; }
  #nav-auth-buttons { flex-direction: column; align-items: stretch; margin-top: 0.4rem; }
  #nav-auth-buttons .btn, #nav-auth-buttons a.btn { width: 100%; text-align: center; }
  .nav-user-chip { justify-content: center; }
}

/* 顶部阅读进度条 */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary), var(--accent-emerald));
  z-index: 1001;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* ---------- 图集阅读页 ---------- */

/* 大图：图集类内容里图片才是主角，给足宽度 */
.pg-image {
  margin: 0 0 1.2rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel-surface);
}

.pg-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 文字块：左侧角标 + 右上角页码，读者始终知道自己在第几页 */
.pg-text {
  position: relative;
  padding: 1rem 1.1rem 0.6rem 2.2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-surface);
}

.pg-mark {
  position: absolute;
  left: 0.75rem;
  top: 0.9rem;
  font-weight: 800;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-rose);
  letter-spacing: -1px;
}

.pg-num {
  float: right;
  margin-left: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.pg-num b {
  font-size: 1rem;
  color: var(--accent-rose);
}

.pg-text p { margin: 0 0 0.85rem; }
.pg-text p:last-child { margin-bottom: 0.4rem; }

/* 小编推荐：读到最后一页才出现，是引导下一次点击的位置 */
.related-box { margin: 2rem 0 1rem; }

.related-title {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--primary);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
}

.related-item {
  display: block;
  text-decoration: none;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel-surface);
  transition: border-color 0.15s, transform 0.15s;
}

.related-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.related-item img,
.related-noimg {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
  background: var(--bg-main);
}

.related-item span {
  display: block;
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  /* 标题统一截两行，卡片高度才一致 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文字型链接按钮（举报等） */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
}

.link-btn:hover { color: var(--accent-rose); }

/* 整页编辑器的底部提交栏：长表单里不用滚回顶部找按钮 */
.submit-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 3rem;
  padding: 0.9rem 1.1rem;
  background: var(--panel-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  z-index: 20;
}

@media (max-width: 480px) {
  .submit-bar { padding: 0.75rem; }
  .submit-bar .btn { flex: 1; }
  #submit-hint { width: 100%; margin-bottom: 0.4rem; }
}

/* 图集编辑器：内容块 */
.ge-block {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.ge-block-ops {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.ge-block-no {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-right: auto;
}

.ge-block-ops button {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.ge-block-ops button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.ge-block-ops button:disabled { opacity: 0.35; cursor: not-allowed; }
.ge-block-ops button.ge-danger:hover { border-color: var(--accent-rose); color: var(--accent-rose); }

.ge-block-body {
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem;
}

.ge-block-img {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ge-block-img img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.ge-img-empty {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.ge-block-img input { font-size: 0.72rem; padding: 0.3rem 0.4rem; }
.ge-block-text { flex: 1; min-height: 110px; resize: vertical; }

@media (max-width: 560px) {
  .ge-block-body { flex-direction: column; }
  .ge-block-img { flex: none; }
}

/* 编辑器里的合规提示：必须显眼，但不至于盖过表单本身 */
.notice-warn {
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
}

/* 文章页的转载出处 */
.source-note {
  margin: 1.2rem 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--panel-surface);
  border-left: 3px solid var(--border-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  word-break: break-all;
}

.source-note a { color: var(--accent-cyan); }

/* 专属链接是阅读前的快捷操作；转载出处则安静地留在文章收尾。 */
.article-quick-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin: 0.85rem 0 1.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-left: 4px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  background: var(--panel-surface);
  box-shadow: 0 6px 18px rgba(14, 116, 144, 0.09);
}

.article-share-link-group {
  display: flex;
  align-items: center;
  flex: 1 1 420px;
  min-width: 0;
  gap: 0.6rem;
}

.article-share-label {
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.article-quick-actions .btn {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.article-share-copy {
  font-weight: 700;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.article-share-url {
  width: auto;
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 2px solid rgba(2, 132, 199, 0.34);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-main);
  font: 0.84rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}

.article-share-url:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

[data-theme="light"] .article-quick-actions {
  background: linear-gradient(135deg, rgba(224, 247, 255, 0.86), rgba(255, 255, 255, 0.94));
}

[data-theme="light"] .article-share-url {
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 620px) {
  .article-quick-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .article-share-link-group {
    align-items: stretch;
    flex-direction: column;
    /* 竖排后不该再纵向撑开，否则它会把整块拉长 */
    flex: 0 0 auto;
  }

  .article-share-url {
    width: 100%;
    /* 🛑 必须复位。桌面端这里是 flex:1（横向占满剩余宽度），
       一旦父容器改成 column，主轴变成纵向，flex:1 就变成「纵向撑满」——
       输入框会从 34px 长成 390px，把手机首屏整个吃掉。
       2026-08-27 实测就是这么来的。改布局方向时记得一起复位 flex。 */
    flex: 0 0 auto;
  }
}

.source-note-bottom {
  margin-top: 2.25rem;
  margin-bottom: 0;
}

/* 文章分页控件 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0 3rem;
  padding: 1.2rem;
  background: var(--panel-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* 翻页控件是 <a> 而不是 <button>：每一页都是独立地址，
   要让读者能新标签打开、能收藏、也要让搜索引擎顺着链接抓到第 2 页。
   到头的那一端没有 href，用 .off 表示不可点（<a> 没有 :disabled）。 */
.pager-btn {
  display: inline-block;
  text-decoration: none;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.pager-btn:hover:not(.off) {
  border-color: var(--primary);
  color: var(--primary);
}

.pager-btn.off {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 下一页做成主按钮：翻页是这套模式的核心动作，要显眼 */
.pager-btn-primary:not(.off) {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pager-btn-primary:hover:not(.off) {
  filter: brightness(1.1);
  color: #fff;
}

.pager-info {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 5rem;
  text-align: center;
}

/* 当前页号放大标红，进度一眼可见 */
.pager-info b {
  font-size: 1.5rem;
  color: var(--accent-rose);
}

@media (max-width: 480px) {
  .pager { gap: 0.6rem; padding: 1rem 0.6rem; }
  .pager-btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
}

/* 按钮设计 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-success {
  background: var(--accent-emerald);
  color: #fff;
}

.btn-danger {
  background: var(--accent-rose);
  color: #fff;
}

/* 风控操作栏。
   为什么要单独一个容器：这两个按钮原先靠 margin-left 并排，
   在窄列里换行后没有行间距 —— 按钮高度大于单元格行高，
   两个行盒直接叠在一起（2026-08-27 Wing 截图）。
   inline 元素的换行不产生垂直间距，只有 flex + gap 才有。 */
.risk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.risk-actions .btn { white-space: nowrap; }

/* 扣钱的按钮做成描边版，和「封禁」区分开。
   两个一模一样的红块紧挨着，误点的代价是直接改掉别人的余额 ——
   封禁可以撤销，扣回余额要人工重新加回去。 */
.btn-danger-soft {
  background: transparent;
  color: var(--accent-rose);
  border: 1px solid var(--accent-rose);
}
.btn-danger-soft:hover {
  background: var(--accent-rose);
  color: #fff;
}

/* 页面主体与 Banner */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (max-width: 640px) {
  .container { padding: 1.25rem 1rem; }
}

/* =============== 页面头部与分区（解决「一堆卡片平铺、没有层级」）=============== */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.page-head h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.page-head .page-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.page-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* CPM 是结算说明，不与余额、阅读量并列为统计卡片。 */
.cpm-rate-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.35rem 0.1rem;
  white-space: nowrap;
}

.cpm-rate-inline strong {
  color: var(--accent-cyan);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.cpm-rate-inline small {
  color: var(--text-dim);
  font-size: 0.75rem;
}

/* 分区标题：给每组内容一个明确的归属，而不是无穷无尽的同级卡片 */
.section {
  margin-bottom: 2.25rem;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.section-head h2 {
  font-size: 1.05rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-head .section-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* =============== 标签页 =============== */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.7rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text-main); }

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 650;
}
[data-theme="dark"] .tab-btn.active { color: #a5b4fc; border-bottom-color: #a5b4fc; }

/* 公告未读角标 */
.notice-badge {
  display: inline-block;
  background: var(--accent-amber, #f59e0b);
  color: #1a1207;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.18s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* =============== 表格：统一样式，替换到处内联的 style =============== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.data-table thead th {
  padding: 0.7rem 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 0.8rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--primary-glow); }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.num { font-variant-numeric: tabular-nums; }

.stat-foot {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  line-height: 1.45;
}

/* 空状态：比一行灰字更能说明「接下来该做什么」 */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 1.9rem; display: block; margin-bottom: 0.6rem; opacity: 0.7; }
.empty-state .empty-title { color: var(--text-main); font-weight: 600; margin-bottom: 0.3rem; }
.empty-state .empty-desc { font-size: 0.85rem; }

/* =============== 信任说明区（结算规则公开）=============== */
.trust-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--primary-glow);
  border: 1px solid var(--border-hover);
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.trust-note .trust-icon { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.trust-note strong { color: var(--text-main); }

/* 首页的创作者入门区：用清晰的问答和单一注册入口，既方便读者判断，也让搜索与 AI 摘要能读到真实规则。 */
.seo-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  align-items: start;
  margin: 0 0 2.5rem;
  padding: 1.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--panel-surface);
}

.seo-eyebrow {
  margin-bottom: 0.35rem;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.seo-faq h2 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.35;
}

.seo-faq-intro > p:not(.seo-eyebrow) {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.seo-faq-list { display: grid; gap: 0.65rem; }

.seo-faq-item {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
}

.seo-faq-item summary {
  padding: 0.85rem 1rem;
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
}

.seo-faq-item summary::marker { color: var(--accent-cyan); }
.seo-faq-item p {
  padding: 0 1rem 0.95rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

[data-theme="light"] .seo-faq-item { background: rgba(255, 255, 255, 0.76); }

@media (max-width: 760px) {
  .seo-faq { grid-template-columns: 1fr; padding: 1.1rem; }
}

/* 计费漏斗条 */
.funnel-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-input);
  margin: 0.75rem 0 0.6rem;
}
.funnel-seg { height: 100%; transition: width 0.4s ease; }
.funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.funnel-legend .dot-key {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.hero-banner {
  background: var(--panel-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}

[data-theme="light"] .hero-banner {
  background: var(--panel-surface);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.08);
}

.hero-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  pointer-events: none;
}

.hero-title {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #ffffff;
}

[data-theme="light"] .hero-title {
  color: #0f172a;
}

.hero-title span {
  background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 1.5rem;
}

[data-theme="light"] .hero-desc {
  color: #475569;
}

/* 挂牌单价标签。
   颜色必须两个色系分别定 —— 原来写死 #34d399，那是给深色底调的浅薄荷绿，
   放到亮色面板上对比度只有 1.92:1（门槛 4.5），几乎看不清。
   实算过的取值：亮色 #047857 = 5.48:1，暗色 #34d399 = 9.03:1。
   🛑 不要改成 --accent-emerald：那个 token 的亮色值 #059669 只有 3.77:1，
      同样不达标，它是给图标和边框用的，不是给正文级文字用的。 */
.cpm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

[data-theme="light"] .cpm-tag {
  background: rgba(4, 120, 87, 0.10);
  border-color: rgba(4, 120, 87, 0.35);
  color: #047857;
}

/* 分类标签与搜索 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.category-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  /* 手机上滑动时不显示丑陋的滚动条，但仍可滑 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.15rem;
}
.category-tabs::-webkit-scrollbar { display: none; }

.tab-item {
  /* 🛑 这两行是「文字被压成竖排」的解药。
     父容器是 overflow-x 的 flex 行，没有它们的话浏览器会把每个标签
     压缩到一个字宽、逐字折行（2026-08-27 手机实测：「全 部」竖排成两行）。
     nowrap 保证不折行，flex-shrink:0 保证不被压缩，放不下就横向滑动。 */
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-item:hover, .tab-item.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 文章网格 Card Grid */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
}

.article-card {
  background: var(--panel-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.article-card:hover {
  transform: translateY(-4px);
  background: var(--panel-surface-hover);
  border-color: var(--border-hover);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* 首页文章整块都是入口，减少读者只点标题才可阅读的困惑。 */
.article-card-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.article-card-link:focus-visible {
  outline: 3px solid var(--primary-glow);
  outline-offset: 3px;
}

.article-card-link .card-title {
  transition: color 0.2s ease;
}

.article-card-link:hover .card-title {
  color: var(--accent-cyan);
}

.card-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: var(--text-main);
}

.card-summary {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.8rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* 创作者 Dashboard 数据卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--panel-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
}

/* 浅色卡片采用细边与轻阴影，让层次来自留白，而不是浓重蓝色。 */
[data-theme="light"] .stat-card,
[data-theme="light"] .article-card {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.035);
}

[data-theme="light"] .article-card:hover {
  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.12);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.stat-value.highlight {
  color: var(--accent-emerald);
}

/* 广告位容器。
   刻意不加边框和「广告」标签：空的广告框比没有广告更伤阅读体验，
   未配置或未填充时由 ads.js 直接隐藏整块。 */
.ad-slot {
  margin: 1.8rem 0;
  text-align: center;
  /* 广告本身宽度固定，容器负责在窄屏上不撑破布局 */
  max-width: 100%;
  overflow: hidden;
}

.ad-slot iframe {
  max-width: 100%;
}

/* 防刷量追踪调试器浮窗 (只在文章页可见) */
.anti-fraud-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  z-index: 999;
  max-width: 280px;
  font-size: 0.85rem;
}

.widget-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
}

.dot.active {
  background: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
}

/* 社交媒体分享栏组件 */
.share-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 1.2rem;
  background: var(--panel-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 2rem 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.share-facebook { background: #1877f2; }
.share-twitter { background: #1da1f2; }
.share-whatsapp { background: #25d366; }
.share-telegram { background: #0088cc; }

/* 创作者/管理员数据标签 Badge */
.status-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.status-pill.active { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.status-pill.banned { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); }
.status-pill.pending { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 550px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: var(--primary);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* 创作者中心：设定与客服 */
.dashboard-extra-panels {
  padding-top: 0;
  padding-bottom: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
}

.settings-card-title {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.settings-help {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.support-ticket-list {
  display: grid;
  gap: 0.85rem;
}

.support-ticket {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-surface);
}

.support-ticket-head {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.support-ticket-meta {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

.support-ticket-content,
.support-reply p {
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 0.75rem;
}

.support-reply {
  margin-top: 0.8rem;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--primary-glow) 60%, transparent);
}

.support-reply strong {
  color: var(--text-main);
  font-size: 0.82rem;
}

.support-reply p {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* Footer */
footer {
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 0;
  margin-top: 4rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ============================================================
   文章页 · 标题与信息行（含手机版）
   参考 vivi 手机版的取舍：标题 26px/行高 1.35，正文信息只留必要项，
   一行放不下就整组换行，绝不让单个元素被压缩到逐字折行。
   ============================================================ */

.article-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.5rem 0 1rem 0;
  /* 中文长标题在窄屏可能出现超长不可断的连续串（网址、英文品牌名） */
  overflow-wrap: break-word;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;              /* ← 关键：放不下就换行，而不是压扁 */
  gap: 0.8rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.article-meta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  min-width: 0;
}

/* 每一项都不许在内部折行 —— 这条是「字被竖着排成一列」的直接解药。
   配合上面的 flex-wrap，放不下时是整项换到下一行，而不是把字挤散。 */
.article-meta > .article-meta-group > * {
  white-space: nowrap;
  flex-shrink: 0;
}

.article-meta-author { font-weight: 600; color: var(--text-main); }
.article-meta-earn   { color: var(--accent-emerald); }





@media (max-width: 640px) {
  /* vivi 手机版标题是 26px/39px，我们取同一量级 */
  .article-title { font-size: 1.62rem; line-height: 1.35; margin: 0.4rem 0 0.9rem; }

  .article-meta { font-size: 0.8rem; gap: 0.55rem; padding-bottom: 0.9rem; }
  .article-meta-group { gap: 0.55rem; }

  /* 操作组单独占一整行，和作者/日期分开，避免两组互相挤 */
  .article-meta-actions { width: 100%; justify-content: flex-start; }

  /* 手机上点击目标要够大，但别把这一行撑高 */
  
  /* 分页控件在手机上占满宽度：翻页是最高频动作，不该是个小按钮 */
  .pager { flex-wrap: wrap; }
  .pager-btn { flex: 1 1 0; min-width: 7.5rem; text-align: center; }
  .pager-info { order: -1; width: 100%; text-align: center; margin-bottom: 0.4rem; }
}

@media (max-width: 640px) {
  /* 会员才看得到这块。手机上压成两行（标签+输入框 / 按钮），
     不让它把正文挤出首屏 —— 桌面端维持原样。 */
  .article-quick-actions { gap: 0.5rem; padding: 0.75rem; }
  .article-share-label   { font-size: 0.78rem; }
  .article-share-url     { font-size: 0.78rem; padding: 0.45rem 0.6rem; }
  .article-share-copy    { width: 100%; padding: 0.6rem; font-size: 0.85rem; }
}

/* ============================================================
   hidden 属性必须真的隐藏
   ------------------------------------------------------------
   踩过的坑：.article-quick-actions 这类带 display:flex 的类，
   优先级高于 hidden 属性 —— JS 里设了 el.hidden = true，元素照样显示，
   而且不报任何错。2026-08-27 手机版首屏被一个「已隐藏」的块占掉 490px
   就是这么来的。这条规则让 hidden 在任何类上都成立。
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   阅读校验浮窗：手机端不显示
   ------------------------------------------------------------
   手机屏幕小，这个浮窗压在正文上，而它对读者没有可行动的信息。
   桌面端保留给已登录会员 —— 他们要靠它核对平台有没有少算。

   🛑 必须用 CSS 隐藏，不能在 JS 里移除元素或设 hidden。
      AntiFraudTracker.isDetached() 靠「挂件还在不在 DOM 里」判断实例是否作废，
      元素一旦被移除，心跳计时器立刻停止 —— 所有有效阅读消失，
      而且页面完全正常、不报任何错。display:none 的元素仍在 DOM 中，
      isConnected 为 true，计时与上报照常。
   ============================================================ */
@media (max-width: 640px) {
  .anti-fraud-widget { display: none !important; }
}

/* ============================================================
   联盟推广位
   ------------------------------------------------------------
   刻意做得比广告克制、比正文低调：它出现在读者刚读完的位置，
   目的是「顺手看一眼」，不是抢注意力。
   揭露标注一定要看得见 —— 联盟条款要求，读者也应该知道。
   ============================================================ */
.affiliate-box {
  margin: 2rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.aff-head {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.8rem;
}

.aff-list { display: flex; flex-direction: column; gap: 0.6rem; }

.aff-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  text-decoration: none;
  transition: border-color 0.15s;
}

.aff-item:hover { border-color: var(--primary); }

.aff-name { font-weight: 600; color: var(--text-main); white-space: nowrap; }
.aff-desc { font-size: 0.85rem; color: var(--text-muted); }

.aff-note {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .affiliate-box { padding: 0.9rem; }
  .aff-item { flex-direction: column; gap: 0.25rem; }
  .aff-desc { font-size: 0.8rem; }
}

/* 首屏联盟位：比文末那个更紧凑。这里是读者第一眼，
   占太多高度会把正文推下去 —— 而有效阅读要求滚动 ≥30%。 */
.affiliate-box-top { margin: 1.2rem 0; padding: 0.85rem 1rem; }
.affiliate-box-top .aff-head { font-size: 0.88rem; margin-bottom: 0.55rem; }
.affiliate-box-top .aff-note { margin-top: 0.55rem; font-size: 0.72rem; }

/* 带配图的自家广告：横幅形状，图在左、文字在右。
   ------------------------------------------------------------
   为什么不做「整块大图」：图铺满内容宽度时，桌面端会被拉到 500~700px 高，
   一块广告吃掉整屏（2026-08-27 实测 698px）。横排的高度只由缩略图决定，
   在任何宽度下都稳定在 110px 上下，宽度永远大于高度。 */
.aff-item-card {
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem;
}

.aff-item-card .aff-img {
  flex: 0 0 auto;
  width: 160px;
  height: 90px;          /* 16:9，与图片实际比例一致 */
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  display: block;
}

.aff-item-card .aff-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;          /* 没有这行，长文案会把图挤变形 */
}

.aff-item-card .aff-name { white-space: normal; }
.aff-item-card .aff-desc { white-space: normal; }

@media (max-width: 480px) {
  /* 窄屏缩图，保持一行放得下 */
  .aff-item-card { gap: 0.6rem; padding: 0.6rem; }
  .aff-item-card .aff-img { width: 112px; height: 63px; }
}

/* 单张自家广告：外层不画装饰，整块高度只由卡片决定（约 110px）。 */
.affiliate-box-bare {
  padding: 0;
  border: 0;
  background: none;
  margin: 1.4rem 0;
}

/* 「推广」标签：必须看得见，但不该抢过内容。放卡片右上角。 */
.aff-item-card { position: relative; }
.aff-tag {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-size: 0.65rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  color: var(--text-dim);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
}

/* ============================================================
   导航栏：主题切换常驻 + 手机菜单改小格子
   ============================================================ */

/* 主题按钮常驻在导航栏右侧、汉堡按钮左边。
   桌面端它在 .nav-links 之外，所以要靠 margin-left:auto 推到右边。 */
.navbar > .theme-toggle { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 900px) {
  /* 手机上主题按钮紧挨汉堡（靠 order 排序，不用 margin） */
  .navbar > .theme-toggle { margin-right: 0.15rem; }

  /* 菜单项改成两列小格子。
     原来是一行一个、每个占满宽度 —— 四个按钮就吃掉大半个屏幕，
     而且视觉上像一串同等重要的东西，其实不是。 */
  #nav-auth-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-top: 0.5rem;
  }

  /* 用户信息横跨两列：它是身份显示，不是可点的操作 */
  #nav-auth-buttons > .nav-user-chip {
    grid-column: 1 / -1;
    justify-content: center;
  }

  /* 格子里的按钮统一高度与字号，不再各写各的内联 padding */
  #nav-auth-buttons > .btn,
  #nav-auth-buttons > a.btn,
  #nav-auth-buttons > button.btn {
    padding: 0.62rem 0.5rem !important;
    font-size: 0.85rem;
    text-align: center;
    justify-content: center;
    white-space: nowrap;   /* 防止「创作者工作台」被压成竖排 */
  }

  /* 所有操作按钮同一尺寸，两列并排。
     原来让主按钮独占一行是想突出主次，但实测下来它比旁边大一倍，
     在这个小面板里显得突兀，而且把菜单撑高。
     颜色已经足够区分主次（主按钮是实色），不需要再靠尺寸强调。 */
}

/* ============================================================
   手机端：一律上下滑，不做左右拖
   ------------------------------------------------------------
   横向滚动在手机上有两个问题：
   ① 拇指自然的动作是上下滑，横向拖要换姿势
   ② 滑出屏幕的选项读者不知道存在 —— 分类少一半没人点，
      不是因为不感兴趣，是因为没看见
   所以分类与导航改成自动换行、全部露出来。

   🛑 例外：数据表格（.table-wrap）保留横向滚动。
      表格的列有固定含义，换行会把一行数据拆散，反而读不了。
      那是「宽内容」，不是「一串并列的选项」，性质不同。
   ============================================================ */
@media (max-width: 768px) {
  .category-tabs,
  .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* 每个标签本身仍然不折行（否则又变成竖排一个字），
     但整行放不下时，是整个标签换到下一行 */
  .category-tabs > .tab-item,
  .tabs > .tab-btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .category-tabs { gap: 0.4rem; }
  .category-tabs > .tab-item { padding: 0.45rem 0.85rem; font-size: 0.85rem; }

  /* 工作台/管理台导航换行后，底部那条线会被切断，改成每项自己带下划线 */
  .tabs { border-bottom: 0; gap: 0.3rem 0.5rem; padding-bottom: 0.25rem; }
}

/* 联盟官方横幅：整幅显示、等比缩放、不放大。
   728×90 在 343 宽的手机上缩成 343×42，是标准的 leaderboard 观感。 */
.aff-banner {
  position: relative;
  display: block;
  text-decoration: none;
  line-height: 0;            /* 去掉 inline 图片底部的空隙 */
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.aff-banner img { border: 0; }
.aff-banner .aff-tag { top: 0.3rem; right: 0.35rem; line-height: 1; }

/* 规则说明块：比正文醒目、比警告克制 */
.rule-callout {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}
/* 🛑 只有开头那个 strong 才独占一行 —— 它是这块内容的标签。
   原来写的是 `.rule-callout strong`，句子中间用来强调的 strong
   也被变成了整块，一句话被切成七八行（2026-08-27 Wing 截图）。
   加粗在中文里是最常用的行内强调，这条规则等于禁掉了它。 */
.rule-callout > strong:first-child { display: block; margin-bottom: 0.5rem; }
.rule-callout strong { color: var(--text-main); }
.rule-callout p { margin: 0.5rem 0; }
.rule-callout ul { margin: 0.4rem 0 0.6rem; padding-left: 1.2rem; }
.rule-callout li { margin: 0.2rem 0; }
.rule-callout code {
  padding: 0.1rem 0.35rem; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  font-size: 0.85em;
}
.rule-callout .hl { color: var(--accent-amber); font-weight: 600; }
.rule-callout .muted { color: var(--text-dim); font-size: 0.85rem; }

/* 警告版：左侧红条，但不做成整块红底 —— 那会像报错 */
.rule-callout-warn { border-left: 3px solid var(--accent-rose); }

/* 菜单里的分类：两列小格，够点又不占高 */
#nav-categories { margin-bottom: 0.55rem; }
.nav-cat-title {
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 0.15rem 0.15rem 0.4rem;
  letter-spacing: 0.05em;
}
.nav-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.nav-cat {
  display: block;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;      /* 防止「娱乐」被压成竖排 */
}
.nav-cat:hover { border-color: var(--primary); color: var(--primary); }

/* 桌面端导航条是横向的，分类不塞进去 —— 首页本来就有分类标签栏 */
@media (min-width: 901px) {
  #nav-categories { display: none; }
}

/* 涉及钱的操作用专属颜色（绿），不和主按钮（紫）抢。
   原来提现按钮是 btn-secondary 描边款，在一排按钮里几乎看不见 ——
   而它是创作者最在意的动作，藏起来没有道理。
   不直接用 btn-primary：那会和「发布新文章」两个实色按钮互相打架。 */
.btn-accent {
  background: var(--accent-emerald);
  border: 1px solid var(--accent-emerald);
  color: #04231a;
  font-weight: 700;
}
.btn-accent:hover { filter: brightness(1.08); color: #04231a; }

/* 全站计费总闸。停用时整张卡变红边 ——
   这个状态一旦忘记恢复，作者的收益会一直是 0 而没有任何人报错，
   所以它必须在页面上刺眼到不可能被忽略。 */
.kill-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.kill-switch.is-off {
  border: 1px solid var(--accent-rose);
  background: rgba(244, 63, 94, 0.08);
}

/* 封面加载失败时的兜底。
   默认行为是把 alt 文字整段铺在卡片上（截图里那两张就是），
   比没有图还难看，而且看起来像网站坏了。
   兜底成一块带首字的色块，卡片结构不变。 */
.cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  overflow: hidden;
}

/* 上线卡片。
   信息有主次：谁是上线（要一眼看到）、编号（要能核对）、
   规则说明（次要）。全塞进一个段落里就会像截图那样糊成一片。 */
.upline-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  margin-bottom: 1.2rem;
}
.upline-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.upline-body { flex: 1; min-width: 0; }
.upline-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.upline-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.upline-no {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
}
.upline-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
}

/* 热文表格里的分享按钮组。
   窄屏下会换行 —— inline 元素换行没有行距，按钮会叠在一起
   （2026-08-27 风控页那两个红按钮就是这么撞上的）。 */
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.share-actions .btn { white-space: nowrap; }

/* 热文页的日期切换。
   用按钮而不是下拉：这几个选项是每天都要来回点的，
   下拉每次要「点开→找→点中」三步，按钮一步。 */
.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.day-btn {
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.day-btn:hover { border-color: var(--primary); color: var(--primary); }
.day-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.day-date {
  padding: 0.28rem 0.5rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
}
/* 日历图标在暗色系下默认是黑的，几乎看不见 */
[data-theme="dark"] .day-date::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* 首页的三步说明。
   用三张并排的卡片而不是有序列表：落在首页的人多半在快速判断
   「这值不值得我花时间」，三个并排的块一眼扫完，列表要一行行读。 */
.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.home-step {
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.home-step-no {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.home-step h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.home-step p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.7; }

/* 表格行里的文章缩略图 + 标题。
   比例跟封面一致（1.92:1），缩略图看起来才和文章页是同一张图。 */
.row-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.row-title a {
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.5;
}
.row-title a:hover { color: var(--primary); }
.row-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
}
/* 没有封面时的替代块：带首字，不留空洞 */
.row-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-color: transparent;
}
@media (max-width: 640px) {
  /* 手机上表格本来就挤，缩略图缩小但不去掉 —— 挑文章还是要看图 */
  .row-thumb { width: 52px; height: 28px; }
}

/* 只装一张表格的卡片。
   为什么需要：数据表原本直接落在页面底纹上，看起来像内容掉在页面外面。
   套普通 .article-card 又会多一圈内边距，让表格离边框很远 ——
   表格自己的单元格已经有内边距了，再加一层就浪费横向空间，
   窄屏上更明显。所以这里给背景和边框，但不给内边距。 */
.card-table {
  /* 🛑 不能用 --bg-card：亮色系下它是 #fffdf9，而页面底是 #fdfaf5，
     两者几乎是同一个颜色，卡片等于不存在（2026-08-27 Wing 反馈）。
     这里用纯白 + 更实的边框 + 阴影，让「表格是一块东西」这件事看得出来。 */
  background: #ffffff;
  border: 1px solid #e7e1d6;
  border-radius: var(--radius-sm);
  overflow: hidden;          /* 表格四角跟着卡片圆角切齐 */
  box-shadow: 0 2px 10px rgba(120, 100, 70, 0.07);
}

[data-theme="dark"] .card-table,
:root:not([data-theme="light"]) .card-table {
  /* 暗色系同理：要比页面底 #0b0f19 明显亮一档才看得出边界 */
  background: #161d2e;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* 表头再压一档底色，和数据行分开 —— 长表格滚动时更容易对上列 */
.card-table .data-table thead th { background: rgba(0, 0, 0, 0.025); }
[data-theme="dark"] .card-table .data-table thead th,
:root:not([data-theme="light"]) .card-table .data-table thead th {
  background: rgba(255, 255, 255, 0.04);
}

/* 隔行浅底：行多的时候一眼看得出哪些数字是同一行的 */
.card-table .data-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }
[data-theme="dark"] .card-table .data-table tbody tr:nth-child(even),
:root:not([data-theme="light"]) .card-table .data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
/* 加载中 / 空状态不是表格，需要自己的呼吸空间 */
.card-table > div:not(.table-wrap) { padding: 0.5rem; }
/* 最后一行不要再画一条底线，卡片边框已经是收口了 */
.card-table .data-table tbody tr:last-child td { border-bottom: none; }


/* ==========================================================================
   導航列：統一尺寸
   ==========================================================================
   在此之前導覽列裡有三套尺寸在打架 ——
   .nav-link（padding 0.45rem、圓角 --radius-sm）、
   .btn（padding 0.6rem，但被 app.js 的內聯樣式改成 0.4rem）、
   .theme-toggle（36px 方塊、圓角 10px）。
   三種高度兩種圓角，所以整條導覽看起來像拼湊的。

   🛑 這裡用 !important 覆蓋 app.js 留下的內聯 padding。
      正確做法是把內聯樣式從 JS 裡拿掉（已一併處理），
      但 JS 是靜態資源、瀏覽器可能還快取著舊版，
      這條保證即使拿到舊 JS，導覽列也不會高低不齊。
   ========================================================================== */
.navbar .nav-link,
.navbar .btn,
.navbar .theme-toggle,
.navbar .nav-user-chip {
  height: 36px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.navbar .nav-link,
.navbar .btn {
  padding: 0 0.85rem !important;
  font-weight: 500;
}

.navbar .theme-toggle {
  width: 36px;
  padding: 0;
}

.navbar .nav-user-chip {
  padding: 0 0.7rem;
}

/* 主行動只能有一個。管理後台與退出都退到次要，
   否則三顆同樣重的按鈕擠在一起，讀者不知道該點哪個。 */
.navbar .btn-primary {
  font-weight: 600;
}

/* 退出是最不希望被誤點的動作，做成最輕的樣式 */
.navbar .btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}
.navbar .btn-quiet:hover {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
  transform: none;
}

/* ==========================================================================
   手機端首屏排版
   ========================================================================== */
@media (max-width: 600px) {
  .hero-banner {
    /* 桌面的 3rem/2.5rem 在 375px 螢幕上只剩很窄的一條可讀寬度 */
    padding: 1.8rem 1.2rem;
    margin-bottom: 1.5rem;
  }

  .hero-title {
    font-size: 1.6rem;
    line-height: 1.35;
    /* 讓瀏覽器把各行長度配平，避免最後一行只剩兩個字 */
    text-wrap: balance;
  }

  /* 桌面靠這個 <br> 分成兩行；手機寬度本來就會換行，
     再強制斷一次會斷在奇怪的地方。 */
  .hero-title br {
    display: none;
  }

  .hero-desc {
    font-size: 0.95rem;
    /* 中文密排需要比英文更大的行距，1.6 在手機上會糊成一塊 */
    line-height: 1.85;
  }

  /* 一段裡出現四五處粗體時，視覺上是散的。
     手機上把粗體的對比降一級 —— 仍然是重點，但不再互相搶。 */
  .hero-desc strong {
    font-weight: 600;
  }

  .cpm-tag {
    font-size: 0.78rem;
  }
}


/* ==========================================================================
   統一按鈕系統
   ==========================================================================
   問題：全站按鈕原本有四種尺寸與三種視覺重量在混用 ——
   .btn 自己的 padding、各處的內聯 style 覆蓋、.btn-accent 的實心綠、
   .btn-primary 的紫色漸層。工作台頭部就是一顆綠的加一顆紫的並排，
   兩顆都是「主行動」的分量，讀者看不出該點哪個。

   規則只有一條：**一個區塊裡只能有一顆實心按鈕。**
   其餘一律描邊。顏色只用來表達語義（綠=錢、紅=危險），不用來搶注意力。
   ========================================================================== */
.btn {
  height: 38px;
  padding: 0 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
}

/* 唯一的實心按鈕。整個區塊裡只該出現一顆。 */
.btn-primary {
  border: 1px solid transparent;
}

/* 錢相關的動作（提現）。改成描邊 ——
   它和「釋出新文章」並排時，兩顆實心會互相搶；
   而且提現是低頻動作，不該和高頻的發文一樣顯眼。
   綠色保留在邊框與文字上，語義沒丟。 */
.btn-accent {
  background: transparent;
  border: 1px solid var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 600;
  box-shadow: none;
}
.btn-accent:hover {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  filter: none;
  transform: translateY(-1px);
}

/* 工作台/後台頭部的動作區：按鈕與單價標籤對齊到同一條基線 */
.page-actions {
  align-items: center;
}
.page-actions .btn,
.page-actions .cpm-rate-inline {
  height: 38px;
  box-sizing: border-box;
}
.page-actions .cpm-rate-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 表格裡的小按鈕：比主按鈕矮一級，但仍共用同一套圓角與字重 */
.data-table .btn,
.card-table .btn {
  height: 30px;
  padding: 0 0.7rem;
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  /* 手機上頭部動作換行時，按鈕撐滿更好按（44px 是可點區域的下限） */
  .page-actions .btn {
    height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ==========================================================================
   導覽列的「瀏覽」分組
   ==========================================================================
   把「首頁探索 / 粉專怎麼賺錢」圈成一個分段控件。
   它們是去哪裡看，右邊那幾顆是做什麼，性質不同 ——
   全部平級排成一排時，導覽條看起來就是六個按鈕，沒有結構。
   ========================================================================== */
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
}

.navbar .nav-group .nav-link {
  height: 30px;
  border-radius: 9px;
  background: transparent;
}

.navbar .nav-group .nav-link:hover {
  background: var(--bg-card-hover);
}

/* 當前頁在組內用實色標出，一眼看得出在哪一段 */
.navbar .nav-group .nav-link.active {
  background: var(--primary-glow);
  color: var(--text-main);
  font-weight: 600;
}

@media (max-width: 860px) {
  /* 手機的下拉面板是縱向的，分段控件橫著擠不下 */
  .nav-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-radius: 10px;
  }
  .navbar .nav-group .nav-link {
    height: 40px;
    justify-content: center;
  }
}


/* ==========================================================================
   中文防拆詞
   ==========================================================================
   中文沒有詞邊界，瀏覽器是逐字斷行的。375px 上實測到的斷法：
     「貼|一次」  「（Facebook|Page）」  「所在|地區」  「粉|絲數」
   詞被劈成兩行時，讀者要在腦子裡把它拼回去，整段就顯得碎。

   ⚠️ 只用在**短**詞組上。長句加 nowrap 會直接橫向溢出螢幕 ——
      那比斷錯行嚴重得多。經驗上不超過 14 個中文字。
   ========================================================================== */
.nb {
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* 首屏描述改成幾個短句，句與句之間留呼吸。
     一段 89 字在 375px 上是 5 行密排，掃不動。 */
  .hero-desc p {
    margin: 0 0 0.7rem;
  }
  .hero-desc p:last-child {
    margin-bottom: 0;
  }

  /* 首屏兩顆按鈕在手機上各佔一行，比並排擠成兩個窄條好按 */
  .hero-cta .btn {
    width: 100%;
  }
}


/* ==========================================================================
   消除導覽列的跳動
   ==========================================================================
   問題：#nav-auth-buttons 和 #dash-nav 在 HTML 裡是**空容器**，
   由 JS 在載入後才填內容。所以每次點擊導覽都是：
     頁面畫出來（那塊高度 0）→ JS 跑完 → 內容出現 → 整頁往下跳
   那個跳就是「閃爍」的來源，每換一頁都發生一次。

   🛑 這裡只預留高度，不改渲染方式。
      真正的根治是把這兩塊在伺服器端就渲染出來（內容是靜態的），
      但那要動 10 個工作台頁面的標記，而預留高度已經消掉了可見的跳動。
   ========================================================================== */
#nav-auth-buttons {
  min-height: 36px;
}

/* 工作台/後台的標籤列。10 個標籤在桌面是一行、手機會折成兩到三行，
   所以只保證「至少一行」，避免預留過多在手機上留下空白。 */
#dash-nav,
#admin-nav {
  min-height: 42px;
}

/* 主體內容區給一個最小高度：頁面資料還在載入時，
   頁腳不會先貼到導覽列下面、等資料回來再被推下去。 */
.container {
  min-height: 40vh;
}