/* TamaBox 全站基础样式：设计令牌 / 主题覆盖 / 组件质感 / 响应式。
   由 base/header.html 内联块抽出，集中一份便于缓存与维护。
   ⚠️ 改完务必把 header 里的 ?v= 版本号 +1，否则老访客仍用缓存。 */

/* 设计令牌：亮色为默认（:root），深色在 html[data-theme="dark"] 覆盖。
   页面与组件样式一律引用 var(--tb-*)，不再写死色值/圆角/阴影；
   var() 的第二个参数仅作兜底（旧缓存页、邮件模板等不引入本文件的场景）。
   改配色只动这一块，亮暗两套自动保持一致。 */
  :root {
      --tb-bg: #f7f8fa;
      --tb-surface: #ffffff;
      --tb-surface-2: #f4f6f8;
      --tb-surface-hover: #f3f7ff;
      /* 顶栏底色：默认跟随卡片面；主题想消除「纯白顶栏压在彩色底上」的割裂时单独覆盖 */
      --tb-navbar: var(--tb-surface);
      --tb-border: #e8eaee;
      --tb-text: #1f2329;
      --tb-text-secondary: #5c6370;
      /* 次要文字：必须是 #6b7280 而不是更浅的灰。实测 #8a919c 在纯白上只有 3.18:1、
         旧的 #999 只有 2.85:1，都低于 WCAG AA 正文要求的 4.5:1；
         这个值在 #fff 上 4.83:1、在 --tb-surface-2 上 4.6:1，是能兼顾「淡」和「看得清」的下限。 */
      --tb-text-muted: #6b7280;
      /* 主色同时也是 14px 链接/按钮文字的颜色，必须满足 AA 4.5:1。
         #1e87f0 white 底上只有 3.42:1（大号字够 3:1，正文不够），压深到 #0e6fd0 = 4.70:1，
         白字压在按钮上反而更清楚（5.00:1）。色相不变，只降亮度。 */
      --tb-primary: #0e6fd0;
      --tb-primary-weak: rgba(14, 111, 208, 0.10);
      /* 主色作背景时的文字色。浅色模式主色深 → 白字；深色模式主色浅 → 深字。
         深色块里主色是「亮强调」（#5c8dff 之流），白字压上去只有 2.2~3.1:1。 */
      --tb-on-primary: #ffffff;
      --tb-radius: 12px;
      --tb-radius-sm: 8px;
      --tb-radius-xs: 6px;
      --tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
      --tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
      --tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
      /* 字号阶梯：只留 5 档。之前页面里散落 0.7/0.72/0.78/0.8/0.82/0.84/0.85/0.86/0.88/0.9/0.95/0.98
         十几个值，14px 上下挤了五六档，肉眼分不出来、只会显得排版乱。
         lg 取 1rem 而不是 17px：UIkit 原生的 .uk-card-title / h4 就是 16px，
         顺着它才能让自定义标题与组件标题落在同一档，而不是差 1px 的两档并存。 */
      --tb-fs-xs: 0.75rem;    /* 12px 标签、脚注、meta */
      --tb-fs-md: 0.875rem;   /* 14px 正文、列表、按钮 */
      --tb-fs-lg: 1rem;       /* 16px 区块小标题、卡片标题 */
      --tb-fs-xl: 1.5rem;     /* 24px 页面标题、大数字 */
      --tb-fs-hero: 1.75rem;  /* 28px 首页主标题 */
      /* 整页背景：主题可覆盖。图案层叠在背景图之上，两者都不用时保持纯色底。 */
      --tb-page-image: none;
      --tb-page-pattern: none;
      --tb-page-pattern-size: auto;
      --tb-page-position: center center;
      /* 装饰层：固定像素尺寸 + 四角定位，不受 cover 裁切影响（整页背景图做不到这一点，
         视口比例一变，贴在图片边缘的插画就会被裁掉）。
         ⚠️ 固定 6 个槽位：background-* 各列表的层数必须恒定（1 图案 + 6 装饰 + 1 背景 = 8），
         缺省用 none 占位；值的个数一变，多背景的分层就会整体错位。 */
      /* 装饰层：固定 10 个槽位。主题可按页面作用域整体替换（html[data-page-scope="..."]），
         但每组都必须写满 10 个值 —— 数量不足会让 background-* 列表与图层错位。 */
      --tb-deco: none, none, none, none, none, none, none, none, none, none;
      --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
      --tb-deco-position: left top, left top, left top, left top, left top, left top, left top,
          left top, left top, left top;
  }
  html[data-theme="dark"] {
      --tb-bg: #1a1d23;
      --tb-surface: #242830;
      --tb-surface-2: #2d323c;
      --tb-surface-hover: rgba(92, 141, 255, 0.12);
      --tb-border: #3a404c;
      --tb-text: #d8dce4;
      --tb-text-secondary: #a8b0bd;
      --tb-text-muted: #8b93a1;
      --tb-primary: #5c8dff;
      --tb-primary-weak: rgba(92, 141, 255, 0.14);
      --tb-on-primary: #0b1016;
      --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
      --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
  }

/* UIkit 补丁：复刻原自建版 "modify-black-font"（官方版与自建版仅 3 处颜色差异——把有色容器内默认白字/白标题改为黑字）。
   模板当前只用到 .uk-light 容器（用户背景封面，question/list.html、question-not-found.html；
   其中 h3/p 已由 #usernamecolor/#introcolor 内联 style 覆盖），故只需补该容器的 3 处投影即可保持渲染一致。
   若日后新增 .uk-card-primary/.uk-card-secondary/.uk-section-primary/.uk-tile-*/.uk-overlay-primary 等容器且需黑字，须同步扩展。 */
  .uk-light { color: rgba(0,0,0,.7); }
  .uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6,
  .uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge,
  .uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6 { color: #000; }
  .uk-light .uk-table th { color: rgba(0,0,0,.7); }

  .grecaptcha-badge {visibility: hidden;}
  .icon-container {
     display: flex;
     justify-content: center;
     width: 100%;
  }
  .icon {
     margin-left: 10px;
     width: 20px; /* 设置图标的宽度 */
     height: auto; /* 保持图标的高度自动调整 */
  }
  .emoji-placeholder {
     display: inline-block;
     animation: jump 0.5s ease-in-out;
  }

  @keyframes jump {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-5px); }
  }
 /* 防止 UIkit Dropbar 初始闪烁 */
 .uk-dropbar {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0.2s ease;
 }
 
 .uk-dropbar.uk-open {
   opacity: 1;
   visibility: visible;
 }
 
 a.uk-button.uk-button-link {
   text-transform: none;
 }

 /* 移动端优化：缩小字体和间距，避免右侧空白 */
 @media (max-width: 640px) {
     .uk-logo {
         font-size: var(--tb-fs-lg);
     }
     .uk-navbar-nav a {
         font-size: var(--tb-fs-xs);
         padding: 0 4px;
     }
     .emoji-placeholder {
         font-size: var(--tb-fs-lg);
     }
     /* 移动端用户名限宽省略，避免长英文用户名撑爆顶栏 */
     .tb-nav-username {
         max-width: 64px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         display: inline-block;
         vertical-align: middle;
     }
 }

/* 深色模式：html[data-theme="dark"] 时覆盖 UIkit 3.3.3 编译主题的关键颜色 */
  /* 变量（--tb-*）已上移到 head 顶部的令牌块，亮暗两套同名常量在那里定义。 */
  /* 根元素与 body 一起覆盖，确保整个视口（含内容不足一屏时的空白区）都是深色背景 */
  html[data-theme="dark"],
  html[data-theme="dark"] body {
      background-color: var(--tb-bg) !important;
      color: var(--tb-text) !important;
  }
  /* 通用表面容器 */
  html[data-theme="dark"] .uk-card,
  html[data-theme="dark"] .uk-card-default,
  html[data-theme="dark"] .uk-card-secondary,
  html[data-theme="dark"] .uk-dropbar,
  html[data-theme="dark"] .uk-navbar-dropdown,
  html[data-theme="dark"] .uk-modal-dialog,
  html[data-theme="dark"] .uk-dropdown,
  html[data-theme="dark"] .uk-offcanvas-bar,
  html[data-theme="dark"] .uk-section,
  html[data-theme="dark"] .uk-tile,
  html[data-theme="dark"] .uk-panel,
  html[data-theme="dark"] .uk-background-default,
  html[data-theme="dark"] .uk-search-default .uk-search-input {
      background-color: var(--tb-surface) !important;
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] .uk-navbar-container {
      background-color: var(--tb-navbar, var(--tb-surface)) !important;
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] .uk-navbar-nav > li > a,
  html[data-theme="dark"] .uk-card a,
  html[data-theme="dark"] .uk-link,
  html[data-theme="dark"] a.uk-button-link,
  html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a,
  html[data-theme="dark"] .uk-dropdown-nav > li > a,
  html[data-theme="dark"] .uk-list a {
      color: var(--tb-text) !important;
  }
  /* 顶栏链接在深色下也用次要文字色：亮色块已经改成 secondary，
     这里若保持 --tb-text（正文色），同一个顶栏在深浅两种模式下权重会跳一档。 */
  html[data-theme="dark"] .uk-navbar-nav > li > a {
      color: var(--tb-text-secondary) !important;
  }
  html[data-theme="dark"] .uk-navbar-nav > li > a:hover,
  html[data-theme="dark"] .uk-card a:hover,
  html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a:hover,
  html[data-theme="dark"] .uk-dropdown-nav > li > a:hover {
      color: var(--tb-primary) !important;
  }
  html[data-theme="dark"] .uk-input,
  html[data-theme="dark"] .uk-textarea,
  html[data-theme="dark"] .uk-select {
      background-color: var(--tb-surface-2) !important;
      color: var(--tb-text) !important;
      border-color: var(--tb-border) !important;
  }
  html[data-theme="dark"] .uk-input:focus,
  html[data-theme="dark"] .uk-textarea:focus,
  html[data-theme="dark"] .uk-select:focus {
      border-color: var(--tb-primary) !important;
  }
  html[data-theme="dark"] .uk-text-muted,
  html[data-theme="dark"] .uk-text-meta,
  html[data-theme="dark"] .uk-text-secondary,
  html[data-theme="dark"] .uk-text-muted a,
  html[data-theme="dark"] .uk-text-small.uk-text-muted {
      color: var(--tb-text-muted) !important;
  }
  html[data-theme="dark"] .uk-divider-icon::after,
  html[data-theme="dark"] hr,
  html[data-theme="dark"] .uk-table th,
  html[data-theme="dark"] .uk-table td,
  html[data-theme="dark"] .uk-list-divider > li:nth-child(n+2) {
      border-color: var(--tb-border) !important;
  }
  html[data-theme="dark"] .uk-button-default {
      background-color: var(--tb-surface-2) !important;
      color: var(--tb-text) !important;
      border-color: var(--tb-border) !important;
  }
  html[data-theme="dark"] .uk-modal-title,
  html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
  html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
  html[data-theme="dark"] .uk-card-title {
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] .uk-alert-warning,
  html[data-theme="dark"] .uk-alert-danger,
  html[data-theme="dark"] .uk-alert-success,
  html[data-theme="dark"] .uk-alert-primary {
      background-color: var(--tb-surface-2) !important;
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] #math-captcha-modal .uk-modal-dialog {
      background-color: var(--tb-surface) !important;
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] #math-captcha-modal .captcha-equation-box {
      background-color: var(--tb-surface-2) !important;
      border-color: var(--tb-border) !important;
  }
  html[data-theme="dark"] #math-captcha-modal .math-captcha-modal-question {
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer {
      background-color: var(--tb-surface) !important;
      color: var(--tb-text) !important;
      border-color: var(--tb-border) !important;
  }
  html[data-theme="dark"] #math-captcha-modal #captcha-modal-answer::placeholder {
      color: var(--tb-text-muted) !important;
  }
  html[data-theme="dark"] #math-captcha-modal .uk-text-meta,
  html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh {
      color: var(--tb-text-muted) !important;
  }
  html[data-theme="dark"] #math-captcha-modal #captcha-modal-refresh:hover {
      color: var(--tb-primary) !important;
  }
  html[data-theme="dark"] .uk-label {
      color: #fff !important;
  }
  /* 自定义组件（探索页推荐卡片等）深色覆盖 */
  html[data-theme="dark"] .recommend-card,
  html[data-theme="dark"] .recommend-card:hover {
      background-color: var(--tb-surface-2) !important;
  }
  html[data-theme="dark"] .explore-name a {
      color: var(--tb-text) !important;
  }
  html[data-theme="dark"] .explore-name a:hover {
      color: var(--tb-primary) !important;
  }
  html[data-theme="dark"] .explore-intro {
      color: var(--tb-text-muted) !important;
  }
  /* 切换按钮图标切换（内联 SVG，不依赖 UIkit 图标库） */
  #theme-toggle .tb-icon-light, #theme-toggle-mobile .tb-icon-light,
  #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark {
      display: inline-flex;
      align-items: center;
  }
  #theme-toggle .tb-icon-light svg, #theme-toggle-mobile .tb-icon-light svg,
  #theme-toggle .tb-icon-dark svg, #theme-toggle-mobile .tb-icon-dark svg { display: block; }
  #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark { display: none; }
  html[data-theme="dark"] #theme-toggle .tb-icon-light,
  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-light { display: none; }
  html[data-theme="dark"] #theme-toggle .tb-icon-dark,
  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline-flex; }

/* 基础质感层：只调整外观（圆角/投影/字体/数字对齐），不改任何结构与布局。
   颜色一律取自头部令牌，亮暗两套自动生效，因此这里不需要再写 html[data-theme="dark"] 分支。 */
  /* 根元素与 body 同时上色：内容不足一屏时，body 之外的视口区域也要是同一底色 */
  html,
  body {
      font-family: var(--tb-font);
      background-color: var(--tb-bg);
      /* 主题的整页背景：平铺图案(1) + 装饰层(10) + cover 背景图(1) = 12 层，顺序即绘制顺序。
         下面四个列表的层数必须与 12 对齐：少一个就会循环取值，导致图层与 size/position 错位。 */
      background-image: var(--tb-page-pattern), var(--tb-deco), var(--tb-page-image);
      background-size: var(--tb-page-pattern-size), var(--tb-deco-size), cover;
      background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
          no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
      background-position: left top, var(--tb-deco-position), var(--tb-page-position, center center);
      background-attachment: scroll, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed,
          fixed, fixed;
      color: var(--tb-text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  /* 卡片：12px 圆角 + 一层极淡接触影 + 一层大扩散影（UIkit 默认的 0 5px 15px 偏硬） */
  .uk-card {
      border-radius: var(--tb-radius);
  }
  .uk-card-default {
      background-color: var(--tb-surface);
      box-shadow: var(--tb-shadow);
  }
  .uk-card-default.uk-card-hover:hover {
      box-shadow: var(--tb-shadow-hover);
  }
  .uk-card-header {
      border-radius: var(--tb-radius) var(--tb-radius) 0 0;
  }
  .uk-card-footer {
      border-radius: 0 0 var(--tb-radius) var(--tb-radius);
  }
  .uk-card,
  .uk-button,
  .uk-alert,
  .uk-label {
      transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  /* 交互元素：统一 8px 圆角，标签 6px */
  .uk-button {
      border-radius: var(--tb-radius-sm);
  }
  .uk-input,
  .uk-select,
  .uk-textarea,
  .uk-form-small,
  .uk-search-input {
      border-radius: var(--tb-radius-sm);
  }
  .uk-label {
      border-radius: var(--tb-radius-xs);
  }
  .uk-alert {
      border-radius: var(--tb-radius-sm);
  }
  .uk-modal-dialog {
      border-radius: var(--tb-radius);
  }
  .uk-dropdown,
  .uk-navbar-dropdown {
      border-radius: var(--tb-radius-sm);
      box-shadow: var(--tb-shadow);
  }
  .uk-navbar-container:not(.uk-navbar-transparent) {
      background-color: var(--tb-navbar, var(--tb-surface));
  }
  /* 顶栏导航：UIkit 默认用 rgba(0,0,0,.5)，在纯白上实测只有 2.68:1（AA 需 4.5）。
     改用次要文字色（6.05:1），hover / 当前页走主色；暗色由下方 dark 分支统一接管。 */
  .uk-navbar-nav > li > a {
      color: var(--tb-text-secondary);
  }
  .uk-navbar-nav > li > a:hover,
  .uk-navbar-nav > li.uk-active > a {
      color: var(--tb-primary);
  }
  /* 键盘可达性：仅在键盘聚焦时出现描边，鼠标点击不出现 */
  .uk-button:focus-visible,
  .uk-navbar-nav > li > a:focus-visible {
      outline: 2px solid var(--tb-primary);
      outline-offset: 2px;
  }
  /* 次要文字统一走令牌，避免 #999 / #8a919c 混用。
     ⚠️ 必须 !important：UIkit 3.3.3 自带 .uk-text-muted{color:#999!important}，
     普通声明一律压不过它（踩过：规则写了但全站仍是 #999，实测 2.85:1）。 */
  .uk-text-muted,
  .uk-text-meta {
      color: var(--tb-text-muted) !important;
  }
  
/* 主题选择器（设置页）：色块 + 名称。纯展示，不参与主题令牌，所以放在基础层。 */
.tb-theme-hint {
    margin: 0 0 6px;
    font-size: var(--tb-fs-xs);
    color: var(--tb-text-muted);
}
.tb-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 8px 0 2px;
}
.tb-theme-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-sm);
    cursor: pointer;
}
.tb-theme-opt:hover {
    background-color: var(--tb-surface-hover);
}
.tb-theme-opt input {
    margin: 0;
}
.tb-theme-swatch {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--tb-radius-xs);
    border: 1px solid var(--tb-border);
    background-color: var(--tb-surface-2);
}
/* 选中态用描边而不是 :has()，兼容老 WebView */
.tb-theme-opt input:checked + .tb-theme-swatch {
    outline: 2px solid var(--tb-primary);
    outline-offset: 1px;
}
.tb-theme-name {
    font-size: var(--tb-fs-xs);
    line-height: 1.3;
}
.tb-theme-opt input:checked ~ .tb-theme-name {
    color: var(--tb-primary);
}

/* UIkit 组件跟随主题色：UIkit 3.3.3 的主色是编译期常量（写死在 uikit.min.css 里），
   CSS 变量注入不进去，只能按组件逐个覆盖成 var(--tb-primary)。
   少了这段，换主题后会出现「页面变粉、按钮还蓝」。 */
a, .uk-link {
    color: var(--tb-primary);
}
a:hover, .uk-link:hover {
    color: var(--tb-primary);
}
.uk-button-primary {
    background-color: var(--tb-primary);
    color: var(--tb-on-primary);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: var(--tb-primary);
    filter: brightness(1.07);
}
.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked {
    background-color: var(--tb-primary);
    border-color: transparent;
}
/* 胶囊按钮/状态标签（提问管理里的「置顶」「未回答」，投票的「已参与」）也走主色。
   danger / warning / success / secondary 是语义色，必须用 :not() 排除——
   同特异性下 base.css 在 UIkit 之后加载，不排除会把它们一并刷成主色。 */
.uk-label:not(.uk-label-danger):not(.uk-label-warning):not(.uk-label-success):not(.uk-label-secondary) {
    background-color: var(--tb-primary);
    color: var(--tb-on-primary);
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--tb-primary);
}
.uk-tab > .uk-active > a {
    border-color: var(--tb-primary);
}
.uk-text-primary {
    color: var(--tb-primary) !important;
}

/* 轻量胶囊：用于投票类型、热门标签等「只是分类信息」的位置。
   实心 uk-label 一屏多个会变成一排色块，这里统一降级为浅底 + 次要色文字。 */
.tb-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--tb-radius-xs);
    background-color: var(--tb-surface-2);
    color: var(--tb-text-secondary);
    font-size: var(--tb-fs-xs);
    line-height: 1.7;
    white-space: nowrap;
}
a.tb-chip:hover {
    background-color: var(--tb-primary-weak);
    color: var(--tb-primary);
    text-decoration: none;
}

/* 统计/日期等数字列等宽对齐，避免刷新时左右跳动 */
  .uk-table,
  .tb-num {
      font-variant-numeric: tabular-nums;
  }
  /* 图片上传条：原为 item/new-question 两处各写一份内联 style（写死 #f8f8f8，深色下露白），
     收敛到一处并走令牌，亮暗自动适配 */
  .tb-img-uploader {
      width: 100%;
      background-color: var(--tb-surface-2);
      display: flex;
      padding-top: 5px;
      padding-bottom: 5px;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
  }
  /* 背景图封面（提问箱主页）：渐变遮罩，保证用户自选文字色叠加后仍可读。
     默认浅色遮罩（页面 .uk-light 补丁把文字兜底成深色）；若箱主选了浅色文字，
     question/list.html 会按亮度加上 .tb-cover-dark 换成深色遮罩。 */
  .tb-cover {
      position: relative;
      border-radius: var(--tb-radius) var(--tb-radius) 0 0;
      overflow: hidden;
  }
  /* ⚠️ 必须带 .uk-flex 复合选择器：UIkit 3.3.3 里有
     .uk-flex::after,.uk-flex::before{display:none}（优先级 0,2,0），
     会把这个遮罩伪元素整个干掉——不报错、只是什么都不显示（踩过一次）。
     单写 .tb-cover::after 优先级不够，会被它压回 display:none。 */
  .tb-cover::after,
  .tb-cover.uk-flex::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(255, 255, 255, 0.84) 100%);
      pointer-events: none;
  }
  .tb-cover.tb-cover-dark::after {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0.46) 100%);
  }
  .tb-cover > * {
      position: relative;
      z-index: 1;
  }
  .tb-cover h3,
  .tb-cover p {
      text-shadow: 0 1px 10px rgba(255, 255, 255, 0.65);
  }
  .tb-cover.tb-cover-dark h3,
  .tb-cover.tb-cover-dark p {
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  }
  /* 尊重系统的减少动效设置 */
  @media (prefers-reduced-motion: reduce) {
      .uk-card,
      .uk-button,
      .emoji-placeholder {
          transition: none;
          animation: none;
      }
  }

/* 顶栏自适应：导航全部直接显示，窄屏时分级缩小字号/间距，保证英文/日文等长文字不溢出 */
  .uk-navbar-nav a {
      font-size: var(--tb-fs-md);
      padding: 0 10px;
  }
  /* 未登录移动端占位：桌面端隐藏，仅 ≤640px 显示（见下方 media 查询）。
     桌面端布局与改动前完全一致，不受影响。 */
  .tb-mobile-balancer { display: none; }
  /* 桌面端保持 UIkit 原生居中三列布局（无需额外 CSS） */
  .tb-navbar .uk-logo {
      white-space: nowrap;
  }
  @media (max-width: 1200px) {
      .uk-navbar-nav a {
          font-size: var(--tb-fs-md);
          padding: 0 8px;
      }
  }
  @media (max-width: 1000px) {
      .uk-navbar-nav a {
          font-size: var(--tb-fs-xs);
          padding: 0 6px;
      }
      .uk-logo {
          font-size: var(--tb-fs-lg);
      }
      /* 登录用户名限宽，过长省略号截断 */
      .tb-nav-username {
          max-width: 110px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          vertical-align: middle;
      }
  }
  @media (max-width: 800px) {
      .uk-navbar-nav a {
          font-size: var(--tb-fs-xs);
          padding: 0 4px;
      }
      .uk-logo {
          font-size: var(--tb-fs-lg);
      }
      .tb-nav-username {
          max-width: 80px;
      }
  }
  /* 手机端（≤640px）：沿用 UIkit 桌面端 navbar 的原生三列定位。
     不再重写 .uk-navbar-center / center-left / center-right 的定位，
     避免 logo 被挤到下一行；底部语言与深色模式按钮仍由下方独立栏承载。 */
  @media (max-width: 640px) {
      .tb-navbar {
          position: relative;
          min-height: 56px;
          overflow: visible;
      }
      .tb-navbar > .uk-navbar-center {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          transform: none !important;
          display: flex !important;
          align-items: center;
          justify-content: center;
          width: 100%;
          min-height: 56px;
          white-space: nowrap;
          flex-wrap: nowrap;
      }
      .tb-navbar .uk-navbar-center-left,
      .tb-navbar .uk-navbar-center-right {
          position: static !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          transform: none !important;
          display: flex !important;
          align-items: center;
          flex: 0 0 auto;
          white-space: nowrap;
      }
      .tb-navbar .uk-navbar-center-left > div,
      .tb-navbar .uk-navbar-center-right > div {
          display: flex;
          align-items: center;
          white-space: nowrap;
      }
      .tb-navbar .uk-navbar-nav {
          display: flex;
          flex-wrap: nowrap;
          flex: 0 0 auto;
      }
      .tb-navbar .uk-navbar-nav > li > a,
      .tb-navbar .uk-logo {
          white-space: nowrap;
      }
      /* 未登录：移动端显示与「我的」等宽的隐藏占位，使左栏「探索+占位」与
         右栏「注册/登录」两项等宽，logo 真正居中，左右视觉平衡 */
      .tb-mobile-balancer { display: block; }
  }

/* 标签样式的按钮（管理页置顶等）：
   尺寸完全继承 .uk-label（font-size/padding/line-height/text-transform 等），
   仅覆盖 button 元素特有的默认样式（边框/字体族/光标等），保证与相邻 span 标签完全一致。 */
  .tb-label-btn {
      border: none !important;
      cursor: pointer;
      font-family: inherit;
      margin: 0;
      vertical-align: middle;
      outline: none;
      background-image: none;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
  }
  .tb-label-btn:hover {
      opacity: 0.85;
  }
  /* 公开页置顶小图标：仅一个图钉，不占行高、不影响原布局 */
  .tb-pin-flag {
      font-size: 0.9em;
      margin-right: 4px;
      vertical-align: -1px;
      cursor: default;
  }

/* Markdown 渲染排版（问题/回答/追问正文，左对齐以保留排版格式） */
  /* 纯文本列表：保留换行与连续空格（pre-wrap），不渲染 Markdown 大字号/彩色 */
  .tb-preline {
      white-space: pre-wrap;
  }
  /* 纯文本列表：超过 5 行截断并显示省略号（不足 5 行则完整显示） */
  .tb-clamp-5 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden;
  }
  .md-body {
      line-height: 1.7;
      text-align: left;
      word-break: break-word;
  }
  .md-body p { margin: 0.5em 0; }
  .md-body h1, .md-body h2, .md-body h3,
  .md-body h4, .md-body h5, .md-body h6 {
      margin: 0.8em 0 0.4em;
      font-weight: 600;
      line-height: 1.4;
  }
  .md-body ul, .md-body ol { padding-left: 1.6em; margin: 0.5em 0; }
  .md-body li { margin: 0.2em 0; }
  .md-body blockquote {
      border-left: 3px solid #d3d1c7;
      margin: 0.6em 0;
      padding: 0.2em 1em;
      color: #5f5e5a;
  }
  .md-body pre {
      background: #f5f5f5;
      padding: 0.8em 1em;
      border-radius: var(--tb-radius-xs);
      overflow-x: auto;
      margin: 0.6em 0;
  }
  .md-body code {
      background: #f0f0f0;
      padding: 0.1em 0.35em;
      border-radius: var(--tb-radius-xs);
      font-size: 0.9em;
  }
  .md-body pre code { background: none; padding: 0; }
  .md-body img { max-width: 100%; height: auto; }
  .md-body table { border-collapse: collapse; margin: 0.6em 0; }
  .md-body th, .md-body td {
      border: 1px solid #ddd;
      padding: 0.4em 0.8em;
  }
  .md-body hr { margin: 1em 0; }
  html[data-theme="dark"] .md-body blockquote {
      border-color: #3a404c;
      color: #8b93a1;
  }
  html[data-theme="dark"] .md-body pre,
  html[data-theme="dark"] .md-body code { background: #2d323c; }
  html[data-theme="dark"] .md-body th,
  html[data-theme="dark"] .md-body td { border-color: #3a404c; }

/* 投票结果占比条：模板已改用 UIkit 3 原生 <progress class="uk-progress" value max>，
   这里只把默认的 15px 高 / 500px 圆角 / 20px 外边距收紧到与页面一致的规格。
   （原先为 UIkit 2 的 .uk-progressbar 结构打的补丁已删除） */
.uk-progress {
    height: 10px;
    margin: 0;
    border-radius: var(--tb-radius-xs);
    background-color: var(--tb-surface-2);
}
.uk-progress::-webkit-progress-bar {
    background-color: var(--tb-surface-2);
    border-radius: var(--tb-radius-xs);
}
.uk-progress::-webkit-progress-value {
    /* 两端都圆：值 100% 时若只圆左边，右端方角会顶出轨道圆角 */
    background-color: var(--tb-primary);
    border-radius: var(--tb-radius-xs);
}
.uk-progress::-moz-progress-bar {
    background-color: var(--tb-primary);
    border-radius: var(--tb-radius-xs);
}

/* 站内公告：配置驱动（conf/app.ini [announcement]），位于导航栏下方、正文之上。
   时间窗由服务端判定，窗口外模板整块不渲染，因此这里不需要任何隐藏状态类。 */
/* 与下方正文的间距挂在容器上：UIkit 的 `.uk-container > :last-child { margin-bottom: 0 }`
   会把公告条自身的 margin-bottom 清零，表现为公告紧贴下方卡片（改动前就是这样）。 */
.tb-announce-wrap {
    margin-bottom: 20px;
}
.tb-announce {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--tb-border);
    border-left: 3px solid var(--tb-primary);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-primary-weak);
    color: var(--tb-text);
    font-size: var(--tb-fs-md);
    line-height: 1.6;
    /* 贴长链接时不要把卡片撑破 */
    overflow-wrap: anywhere;
}
.tb-announce-icon {
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--tb-primary);
}
.tb-announce-body {
    min-width: 0;
}
.tb-announce-body a {
    color: var(--tb-primary);
    text-decoration: underline;
}

/* 移动端底部操作栏：固定底栏承载语言切换与深色模式，桌面端隐藏 */
  #tb-mobile-utils {
      display: none;
  }
  @media (max-width: 640px) {
      /* 顶栏不再容纳语言/深色按钮，恢复原有导航空间 */
      .tb-nav-utils {
          display: none !important;
      }
      /* 手机端隐藏登录用户名（左边仅保留"探索"），保证 logo 居中、
         两侧各不超过 2 个短按钮，避免用户名宽度挤压布局 */
      .tb-nav-username {
          display: none !important;
      }
      /* 固定底部操作栏 */
      #tb-mobile-utils {
          display: flex;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1000;
          justify-content: center;
          align-items: center;
          gap: 10px;
          padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
          background: rgba(255, 255, 255, 0.92);
          -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
          box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
      }
      #tb-mobile-utils .uk-select {
          width: 110px;
      }
      html[data-theme="dark"] #tb-mobile-utils {
          background: rgba(36, 40, 48, 0.92);
          box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
      }
      /* 给页面底部预留空间，避免页脚内容被固定底栏遮挡 */
      body {
          padding-bottom: 56px;
      }
  }