/* =====================================================================
   seed.css — 设计令牌（Design Tokens）＋通用组件样式
   目标：一次维护，全站一致；不写任何“业务”样式。
   使用方式：页面仅需要 <link rel="stylesheet" href="/seed/css/seed.css"> 即可复用。
   注意：相对路径以本 CSS 文件所在目录 /seed/ 为基准。
   ===================================================================== */

/* ========== 基础排版与 Reset ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* —— 在 :root 内【追加】以下令牌 —— */
:root{
  /* 渐变与光晕强度（可微调） */
  --glow-alpha-1: .25;
  --glow-alpha-2: .18;

  /* 统一阴影语言（更有层次） */
  --shadow-soft:   0 10px 30px rgba(0,0,0,.12);
  --shadow-strong: 0 30px 60px rgba(0,0,0,.28);

  /* 统一动效时序（更丝滑） */
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* ========== ① 原子色值：只在这里写一次（L = Light，D = Dark） ========== */
:root{
  /* —— Light 基底 —— */
  --L-bg:        #ffffff;
  --L-bg-grad-1: #f9fafb;
  --L-bg-grad-2: #ffffff;
  --L-card:      #ffffff;
  --L-text:      #111827;
  --L-muted:     #374151;
  --L-line:      #e5e7eb;
  --L-focus:     #3b82f6;

  /* 语义色：健康／警告／危险（主色同用作按钮、徽标等） */
  --L-ok:        #22c55e;  /* 成功 */
  --L-ok-strong: #16a34a;
  --L-warn:      #f59e0b;  /* 警告 */
  --L-warn-strong:#b45309;
  --L-bad:       #ef4444;  /* 错误 */
  --L-bad-strong:#b91c1c;
  --L-pri:       #03f85d;  /* 主色 */
  --L-pri-strong:#09b247;

  /* 墨色（亮色主题下，彩色文字用“深墨色”保证可读性） */
  --L-ok-ink:    #097055;
  --L-warn-ink:  #ab3c17;
  --L-bad-ink:   #8b0000;

  /* —— Dark 基底 —— */
  --D-bg:        #0f172a;
  --D-bg-grad-1: #0b1220;
  --D-bg-grad-2: #0f172a;
  --D-card:      rgba(17,24,39,.7);
  --D-text:      #e5e7eb;
  --D-muted:     #94a3b8;
  --D-line:      #1f2937;
  --D-focus:     #60a5fa;

  /* 语义色在暗色下通常共用同一主色值（也可按需替换为暗色友好版本） */
  --D-ok:        #22c55e;
  --D-ok-strong: #16a34a;
  --D-warn:      #f59e0b;
  --D-warn-strong:#b45309;
  --D-bad:       #ef4444;
  --D-bad-strong:#b91c1c;
  --D-pri:       #03f85d;
  --D-pri-strong:#09b247;

  /* 暗色下的“浅墨色”以提升彩色文字在深背景的对比度 */
  --D-ok-ink:    #afffcb; /* ~ green-100 */
  --D-warn-ink:  #ffe16a; /* ~ amber-200 */
  --D-bad-ink:   #ff7777; /* ~ red-200 */

  /* 形状与动效（与主题无关，可全局共用） */
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --dur-fast:  150ms;
  --dur-med:   250ms;
  --dur-theme: 320ms;

  /* 半透明气泡的透明度令牌（可按需微调） */
  --bubble-alpha:     .15; /* 背景透明度 */
  --bubble-alpha-bd:  .35; /* 边框透明度 */
  --bubble-blur:       6px; /* 毛玻璃程度 */
}

/* ========== ② 生效映射：默认采用 Light，把“当前主题变量”指向 L ========== */
/* 提示：这批变量是“最终使用”的变量，组件与页面应只用它们，不直接用 L/D */
:root{
  /* 基础面与文字 */
  --bg:        var(--L-bg);
  --bg-grad-1: var(--L-bg-grad-1);
  --bg-grad-2: var(--L-bg-grad-2);
  --card:      var(--L-card);
  --text:      var(--L-text);
  --muted:     var(--L-muted);
  --line:      var(--L-line);
  --focus:     var(--L-focus);

  /* 语义色与主色 */
  --ok:          var(--L-ok);
  --ok-strong:   var(--L-ok-strong);
  --warn:        var(--L-warn);
  --warn-strong: var(--L-warn-strong);
  --bad:         var(--L-bad);
  --bad-strong:  var(--L-bad-strong);
  --pri:         var(--L-pri);
  --pri-strong:  var(--L-pri-strong);

  /* 墨色（彩色文字的对比色） */
  --ok-ink:    var(--L-ok-ink);
  --warn-ink:  var(--L-warn-ink);
  --bad-ink:   var(--L-bad-ink);

  /* —— ③ data-系列一键复用：直接指向“当前主题变量” —— */
  /* 约定：data- 系列只做别名聚合，永不写死色值，保证复用与可移植性。 */
  --data-bg:        var(--bg);
  --data-bg-grad-1: var(--bg-grad-1);
  --data-bg-grad-2: var(--bg-grad-2);
  --data-card:      var(--card);
  --data-text:      var(--text);
  --data-muted:     var(--muted);
  --data-line:      var(--line);
  --data-focus:     var(--focus);

  --data-pri:       var(--pri);
  --data-pri-strong:var(--pri-strong);

  --data-ok:          var(--ok);
  --data-ok-strong:   var(--ok-strong);
  --data-warn:        var(--warn);
  --data-warn-strong: var(--warn-strong);
  --data-bad:         var(--bad);
  --data-bad-strong:  var(--bad-strong);

  --data-ok-ink:    var(--ok-ink);
  --data-warn-ink:  var(--warn-ink);
  --data-bad-ink:   var(--bad-ink);
}

/* ========== ④ 系统暗色偏好：当未手动指定 data-theme 时，自动切 Dark ========== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){             /* 未手动设定时才跟随系统 */
    color-scheme: dark;
    --bg:        var(--D-bg);
    --bg-grad-1: var(--D-bg-grad-1);
    --bg-grad-2: var(--D-bg-grad-2);
    --card:      var(--D-card);
    --text:      var(--D-text);
    --muted:     var(--D-muted);
    --line:      var(--D-line);
    --focus:     var(--D-focus);

    --ok:          var(--D-ok);
    --ok-strong:   var(--D-ok-strong);
    --warn:        var(--D-warn);
    --warn-strong: var(--D-warn-strong);
    --bad:         var(--D-bad);
    --bad-strong:  var(--D-bad-strong);
    --pri:         var(--D-pri);
    --pri-strong:  var(--D-pri-strong);

    --ok-ink:    var(--D-ok-ink);
    --warn-ink:  var(--D-warn-ink);
    --bad-ink:   var(--D-bad-ink);
  }
}

/* ========== ⑤ 手动主题覆盖：<html data-theme="light|dark"> 一键切换 ========== */
/* 只有“映射别名”变更；data-系列自动跟随，无需额外代码。 */
html[data-theme="light"]{
  color-scheme: light;
  --bg:        var(--L-bg);
  --bg-grad-1: var(--L-bg-grad-1);
  --bg-grad-2: var(--L-bg-grad-2);
  --card:      var(--L-card);
  --text:      var(--L-text);
  --muted:     var(--L-muted);
  --line:      var(--L-line);
  --focus:     var(--L-focus);

  --ok:          var(--L-ok);
  --ok-strong:   var(--L-ok-strong);
  --warn:        var(--L-warn);
  --warn-strong: var(--L-warn-strong);
  --bad:         var(--L-bad);
  --bad-strong:  var(--L-bad-strong);
  --pri:         var(--L-pri);
  --pri-strong:  var(--L-pri-strong);

  --ok-ink:    var(--L-ok-ink);
  --warn-ink:  var(--L-warn-ink);
  --bad-ink:   var(--L-bad-ink);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:        var(--D-bg);
  --bg-grad-1: var(--D-bg-grad-1);
  --bg-grad-2: var(--D-bg-grad-2);
  --card:      var(--D-card);
  --text:      var(--D-text);
  --muted:     var(--D-muted);
  --line:      var(--D-line);
  --focus:     var(--D-focus);

  --ok:          var(--D-ok);
  --ok-strong:   var(--D-ok-strong);
  --warn:        var(--D-warn);
  --warn-strong: var(--D-warn-strong);
  --bad:         var(--D-bad);
  --bad-strong:  var(--D-bad-strong);
  --pri:         var(--D-pri);
  --pri-strong:  var(--D-pri-strong);

  --ok-ink:    var(--D-ok-ink);
  --warn-ink:  var(--D-warn-ink);
  --bad-ink:   var(--D-bad-ink);
}

/* ========== ⑥ 使用示例：data-系列在组件里即插即用（可选） ========== */
/* 例：语义气泡（无需关心亮暗色，自动适配） */
[data-tone="ok"]{
  color: var(--data-ok-ink);
  background: color-mix(in oklab, var(--data-ok) calc(var(--bubble-alpha)*100%), transparent);
  border: 1px solid color-mix(in oklab, var(--data-ok) calc(var(--bubble-alpha-bd)*100%), transparent);
  backdrop-filter: blur(var(--bubble-blur));
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
}
[data-tone="warn"]{
  color: var(--data-warn-ink);
  background: color-mix(in oklab, var(--data-warn) calc(var(--bubble-alpha)*100%), transparent);
  border: 1px solid color-mix(in oklab, var(--data-warn) calc(var(--bubble-alpha-bd)*100%), transparent);
  backdrop-filter: blur(var(--bubble-blur));
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
}
[data-tone="bad"]{
  color: var(--data-bad-ink);
  background: color-mix(in oklab, var(--data-bad) calc(var(--bubble-alpha)*100%), transparent);
  border: 1px solid color-mix(in oklab, var(--data-bad) calc(var(--bubble-alpha-bd)*100%), transparent);
  backdrop-filter: blur(var(--bubble-blur));
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
}


/* =========================================================
   ① 三档字号基准（搭积木式开关）
   说明：只改 <html> 的 font-size，所有用 rem 的地方自动联动。
   ========================================================= */
:root{
  --fs-sm: 15px;  /* 小档 */
  --fs-md: 16px;  /* 中档（默认） */
  --fs-lg: 18px;  /* 大档 */
}

html{ font-size: var(--fs-md); }
html[data-font="sm"]{ font-size: var(--fs-sm); }
html[data-font="lg"]{ font-size: var(--fs-lg); }

/* =========================================================
   ② 页面骨架与常用布局（全部用 rem／em，颜色走令牌）
   ========================================================= */
/* —— 用分层渐变替换 body 的 background —— */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--focus) calc(var(--glow-alpha-1)*100%), transparent), transparent 60%),
    radial-gradient(800px 400px at 90% 8%,  color-mix(in oklab, var(--pri)   calc(var(--glow-alpha-2)*100%), transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2) 30%, var(--bg));
  color: var(--text);
  padding-bottom: 2.5rem;
  transition: background var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease);
  background-attachment: fixed; /* 轻微景深感 */
}


/* 容器：宽度不必须随字号联动，max-width 可保持 px（或改成 rem 亦可） */
.wrap{ max-width: 1100px; margin: 1.5rem auto; padding: 1rem; }

/* 标题与副标题：字号用 rem，字距用 em，保证随字体比例变化 */
.title{ color: var(--text); font-weight: 700; font-size: 1.5rem; letter-spacing: .03em; }
.sub{ color: var(--muted); margin-top: .25rem; font-size: .875rem; }

.logo-wrap{ text-align: center; padding: 1.25rem; }
.logo-wrap img{ max-width: 100px; height: auto; margin: 0 auto; }

.grid{ display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.card{
  grid-column: span 12;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1rem;
  color: var(--text);
  backdrop-filter: blur(var(--bubble-blur));
  border: 1px solid color-mix(in oklab, var(--text) 8%, transparent); /* 发丝边，亮暗自适配 */
  box-shadow: var(--shadow-soft);
  position: relative;
}
@media (min-width: 900px){
  .card.half{ grid-column: span 6; }
  .card.third{ grid-column: span 4; }
}
.card h3{ margin: .2rem 0 .6rem 0; font-size: 1.125rem; }

/* 两列行：间距改 rem，移动端可按需再加断点堆叠 */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* =========================================================
   ③ 表单与可交互元素（颜色走令牌，尺寸 rem／em）
   ========================================================= */
label{
  display:block;
  margin:.6rem 0 .25rem 0;
  color: var(--text);
  font-size: .8125rem; /* 13px@16 */
}

/* 让输入框字号参与全局缩放；padding 用 em 跟随本控件字号同步缩放 */
input,select,textarea{
  width: 100%;
  font-size: 1rem;
  line-height: 1.4;
  padding: .625em .75em;              /* 10px 12px@16 → em */
  border-radius: .625rem;             /* 10px@16 */
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur-med), box-shadow var(--dur-med), background var(--dur-med), color var(--dur-med);
}

/* 焦点态：用 focus 令牌生成可主题化的环，不再写死 rgba 蓝 */
input:focus,select:focus,textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 .1875rem color-mix(in oklab, var(--focus) 22%, transparent); /* ~3px@16 */
}

/* 说明：不再写 prefers-color-scheme 的专门深色样式；
   深浅模式由令牌 --card／--text／--line 在主题层统一切换。 */

/* =========================================================
   ④ 按钮（字号 rem，内边距 em，同步缩放）
   ========================================================= */
/* —— 基础按钮：半透明玻璃感，轻阴影，无需贴图 —— */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:.625rem; padding:.625em .875em;
  border-radius:.75rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 88%, transparent), color-mix(in oklab, var(--card) 70%, transparent));
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); /* 轻边界，可视但不抢眼 */
  color: var(--text);
  cursor:pointer; user-select:none;
  font-size: 1rem; line-height:1.1;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(6px);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.btn:active{ transform: translateY(-1px) scale(.99); }

/* —— 主色按钮：纯 CSS 渐变＋自动可读对比 —— */
.btn.primary{
  border: none; font-weight: 700;
  background: linear-gradient(135deg, color-mix(in oklab, var(--pri-strong) 90%, black 10%), var(--pri));
  color: color-mix(in oklab, white 92%, var(--pri) 8%);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--pri) 28%, transparent);
}
.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in oklab, var(--pri) 36%, transparent);
}

/* —— 轻描边按钮（ghost）：默认浅底深字，悬停反转 —— */
.btn.ghost{
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
  color: var(--text);
}
.btn.ghost:hover{
  background: color-mix(in oklab, var(--text) 10%, transparent);
  color: color-mix(in oklab, var(--text) 92%, white 8%);
}

/* —— 焦点按钮（focus）：用焦点色的渐变，适合“主行动” —— */
.btn.focus{
  border: none; font-weight: 700;
  background: linear-gradient(135deg, var(--focus), color-mix(in oklab, var(--focus) 30%, white));
  color: var(--bg);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--focus) 28%, transparent);
}
.btn.focus:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in oklab, var(--focus) 36%, transparent);
}

/* —— 小号款保持一致视觉语法 —— */
.btn.tiny{ font-size:.875rem; padding:.45em .7em; border-radius:.6rem; }



/* —— 入场淡入上浮 —— */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); will-change: transform, opacity; }
.reveal.in{ opacity:1; transform:none;
  transition: opacity var(--dur-theme) var(--ease), transform var(--dur-theme) var(--ease);
}
/* —— 3D 细微倾斜（用于卡片或产品块）—— */
.tilt{
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  transform-style: preserve-3d;
}
.tilt:hover{ transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-2px); box-shadow: var(--shadow-strong); }

/* —— 尊重减少动效偏好 —— */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  .tilt, .btn{ transition:none; }
}

/* =========================================================
   ⑤ 提示、输出块、徽签与 KPI（全部令牌化＋相对单位）
   ========================================================= */
.muted{ color:var(--muted); font-size:.8rem; } /* 12px@16 */

.out{
  margin-top:.625rem;                    /* 10px@16 */
  padding:.75rem;                        /* 12px@16 */
  border-radius:.75rem;                  /* 12px@16 */
  background: color-mix(in oklab, var(--bg) 92%, var(--text) 8%); /* 浅层对比，亮暗自适应 */
  border:1px dashed var(--line);
  color:var(--text);
  white-space:pre-line;
}
/* 注：上面一行用令牌生成浅底色，替代手写 #f9fafb／暗色分支 */

.pill{
  display:inline-block;
  padding:.25rem .5rem;                  /* 4px 8px@16 */
  border-radius:999px;
  font-size:.75rem;                      /* 12px@16 */
  border:1px solid var(--line);
  color:var(--text);
  margin-right:.375rem;                  /* 6px@16 */
}

/* 语义徽签直接吃令牌，暗色自动换墨色与对比色 */
.ok{   color:var(--ok-ink);   background:var(--ok);   border-color:var(--ok-strong); }
.warn{ color:var(--warn-ink); background:var(--warn); border-color:var(--warn-strong); }
.bad{  color:var(--bad-ink);  background:var(--bad);  border-color:var(--bad-strong); }

.hint{ font-size:.75rem; color:var(--muted); margin-top:.375rem; } /* 6px@16 */
.err{  color: var(--bad); font-size:.75rem; margin-top:.375rem; }

.split{ height:1px; background:var(--line); margin:1rem 0; }

.kpi{ display:flex; gap:.625rem; flex-wrap:wrap; }            /* 10px@16 */
.kpi .box{
  flex:1 1 7.5rem; min-width:7.5rem;                         /* 120px@16 */
  padding:.625rem; border-radius:.75rem;                      /* 10px／12px@16 */
  background: color-mix(in oklab, var(--bg) 94%, var(--text) 6%);
  border:1px solid var(--line); text-align:center;
}
.box b{ display:block; font-size:1.125rem; margin-bottom:.125rem; } /* 18px／2px@16 */

/*双栏*/
.card.two-cols{ display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:start; }
.card.two-cols .right-col{ justify-self:end; text-align:right; }
.btn-group{ display:flex; gap:.5rem; flex-wrap:wrap; }

.btn.tiny{ font-size:.875rem; padding:.45em .7em; border-radius:.6rem; } /* 小号款 */


/* ========== 主题切换过渡：卡片/表单/输出/按钮等 ========== */
.card,
input, select, textarea,
.out,
.btn,
.pill {
  transition:
    background-color var(--dur-theme) ease,
    color            var(--dur-theme) ease,
    border-color     var(--dur-theme) ease,
    box-shadow       var(--dur-theme) ease;
}

    /* ========== 红绿灯高亮字体：加粗＋语义色 ========== */
    /* 用法：<span class="hl hl-ok">文本</span>、hl-warn、hl-bad */
    .hl{ font-weight: 700; letter-spacing:.2px; }
    .hl-ok   { color: var(--ok-ink); }
    .hl-warn { color: var(--warn-ink); }
    .hl-bad  { color: var(--bad-ink); }

    /* ========== 红绿灯半透明气泡：自动适配不同背景 ========== */
    /* 用法：<span class="bubble bubble-ok">内容</span>（支持块级与行内） */
    .bubble{
      display: inline-flex; align-items: center; gap: .4em;
      padding: .35em .6em;
      border-radius: 999px;
      font-size: 12px; line-height: 1.2;
      backdrop-filter: blur(var(--bubble-blur));
      -webkit-backdrop-filter: blur(var(--bubble-blur));
      border: 1px solid transparent;
      /* 阴影和过渡，保证主题切换丝滑 */
      box-shadow: var(--shadow-sm);
      transition:
        background-color var(--dur-theme) ease,
        color            var(--dur-theme) ease,
        border-color     var(--dur-theme) ease,
        box-shadow       var(--dur-theme) ease;
    }

    /* —— 绿色（健康、安全） —— */
    .bubble-ok{
      /* 半透明背景：使用 oklch 或 rgba 都可；这里用 rgba 兼容性最好 */
      background: rgba(34,197,94, var(--bubble-alpha));     /* #22c55e */
      border-color: rgba(22,163,74, var(--bubble-alpha-bd));/* #16a34a */
      color: var(--ok-ink);
    }

    /* —— 黄色（健康风险） —— */
    .bubble-warn{
      background: rgba(245,158,11, var(--bubble-alpha));      /* #f59e0b */
      border-color: rgba(180,83,9, var(--bubble-alpha-bd));   /* #b45309 */
      color: var(--warn-ink);
    }

    /* —— 红色（严重错误/不健康） —— */
    .bubble-bad{
      background: rgba(239,68,68, var(--bubble-alpha));      /* #ef4444 */
      border-color: rgba(185,28,28, var(--bubble-alpha-bd)); /* #b91c1c */
      color: var(--bad-ink);
    }

    /* 尺寸可选：.sm / .lg 方便搭积木 */
    .bubble.sm{ font-size:11px; padding:.25em .5em; }
    .bubble.lg{ font-size:13px; padding:.5em .8em; }

    /* 图标槽位：给你放 emoji 或 svg 用（可选） */
    .bubble .dot{
      width:.6em; height:.6em; border-radius:999px; flex:0 0 auto;
      background: currentColor; opacity:.85;
    }

    /* ↑ 若你的构建链不支持 composes，可用 attribute 选择器降级这样写： */
    .bubble[data-level="ok"]   { background: rgba(34,197,94, var(--bubble-alpha));  border-color: rgba(22,163,74, var(--bubble-alpha-bd)); color: var(--ok-ink); }
    .bubble[data-level="warn"] { background: rgba(245,158,11, var(--bubble-alpha)); border-color: rgba(180,83,9, var(--bubble-alpha-bd));  color: var(--warn-ink); }
    .bubble[data-level="bad"]  { background: rgba(239,68,68, var(--bubble-alpha));  border-color: rgba(185,28,28, var(--bubble-alpha-bd)); color: var(--bad-ink); }

    /* ========== 可访问性增强：在极端背景下给气泡加“环光” ========== */
    /* 说明：当气泡放在特别杂的背景图上时，添加 .halo 提升边界对比。 */
    .bubble.halo{
    box-shadow:
    0 0 0 2px color-mix(in oklab, var(--bg) 70%, transparent),
    0 6px 16px rgba(0,0,0,.10);
    }
    html[data-theme="dark"] .bubble.halo{
      box-shadow:
        0 0 0 2px rgba(255,255,255,.06),
        0 2px 10px rgba(0,0,0,.25);
    }
    /* 高亮字体：加粗＋对应色 */
    .hl{ font-weight:700; letter-spacing:.2px; }
    .hl-ok   { color: var(--ok-ink); }
    .hl-warn { color: var(--warn-ink); }
    .hl-bad  { color: var(--bad-ink); }

#healthBubbles{ display:flex; flex-wrap:wrap; gap:6px; }


/* ========== Logo 自动切换（仅用于 <img id="logo">） ========== */
/* 说明：此处使用 content 替换 <img> 的呈现资源，路径相对 /seed/ 目录。 */
@media (prefers-color-scheme: dark){
  #logo{ content: url("/seed/logo/logo-dark.png"); }
}
@media (prefers-color-scheme: light){
  #logo{ content: url("/seed/logo/logo-light.png"); }
}
html[data-theme="dark"] #logo{ content: url("/seed/logo/logo-dark.png"); }
html[data-theme="light"] #logo{ content: url("/seed/logo/logo-light.png"); }

/* ========== 🎉 连点彩蛋基础样式（JS 物理 & CSS 回退通用） ========== */
.confetti{
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  /* 注意：JS 物理版不依赖 animation；CSS 回退会设置 animation */
}

/* ========== CSS 回退动画（当 JS 物理禁用或 reduce-motion 时启用） ========== */
@keyframes confetti-fall{
  0%   { transform: translate3d(0,-10px,0) rotate(0deg);   opacity:1; }
  100% { transform: translate3d(var(--dx,0),110vh,0) rotate(720deg); opacity:0; }
}
/* 仅在需要时由 JS 注入 animation，或你也可以保留默认： */
.confetti.fallback{
  animation: confetti-fall var(--dur,1500ms) linear forwards;
}

/* 可选：若用户偏好“减少动态”，强制走回退且极短动画 */
@media (prefers-reduced-motion: reduce){
  .confetti{ animation: confetti-fall 1ms linear forwards !important; }
}

/* ========== 作者名高亮样式 ========== */
.highlight{
  font-size: 18px;             /* 放大字号，相对 footer 文字更突出 */
  font-weight: 700;            /* 加粗 */
  color: var(--focus);           /* 颜色突出 */
  display: inline-block;
  animation: breathe 4s ease-in-out infinite;
}

/* 缓慢呼吸特效：轻微缩放 + 透明度变化 */
@keyframes breathe {
  0%, 100% { transform: scale(0.8);   opacity: 0.8;   }
  50%      { transform: scale(1.1); opacity: 1;}
}

/* ===== 回到顶部按钮（固定在右下角） ===== */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: var(--radius-md);
  display: none;                 /* 初始隐藏，滚动后显示 */
  opacity: 0;                    /* 渐隐出现 */
  transition: opacity var(--dur-med) ease, transform var(--dur-med) ease;
  font-weight: 700;  /* 700 = bold，加粗 */
  color: #000;  /* 文字颜色 */
  text-shadow:
    1px 1px 1px #fff,

}
    .to-top.show{
      display: inline-flex;
      opacity: 1;
    }
    .to-top:hover{ transform: translateY(-2px); }

    /* 大屏稍微离边缘远一点，方便手指点击 */
    @media (min-width: 900px){
      .to-top{ right: 24px; bottom: 24px; }
    }

    /* 遵循减少动画偏好 */
    @media (prefers-reduced-motion: reduce){
      .to-top{ transition: none; }
    }

/* ========== 小徽签（tag）组件｜使用最终变量，保持可移植性 ========== */
    /* 容器：自动换行与间距。*/
    .badges{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.5rem;
    }

    /* 基础徽签：胶囊圆角、细边框、随主题变色。*/
    .tag{
      display:inline-block;
      padding:.25rem .75rem;
      font-size:.85rem;
      line-height:1.2;
      border-radius:var(--radius-lg);   /* 可替换 999px 得到更圆的效果。*/
      border:1px solid var(--line);     /* 边框：使用设计令牌。*/
      background:var(--card);           /* 背景：与卡片一致。*/
      color:var(--text);                /* 文字色：随主题。*/
      white-space:nowrap;
      transition:
        background var(--dur-med),
        color var(--dur-med),
        border-color var(--dur-med),
        transform var(--dur-fast);
    }

    /* 悬停：主色高亮。*/
    .tag:hover{
      background: var(--pri); color: var(--bg); border-color: var(--pri);
      box-shadow: 0 8px 24px color-mix(in oklab, var(--pri) 26%, transparent);
      color:var(--bg);
      border-color:var(--pri);
      transform:translateY(-1px);
    }
    

    /* 可选：实心主色版本。*/
    .tag.solid{
      background:var(--pri);
      color:var(--bg);
      border-color:var(--pri);
    }

    /* ========== 语义徽签（ok / warn / bad） ========== */
    /* 默认：浅色底 + 深色字 */
    .tag.ok{
      background: var(--ok);        /* 浅绿色背景 */
      color: var(--bg);         /* 文字 */
      border-color: var(--ok);
    }
    .tag.warn{
      background: var(--warn);      /* 浅橙色背景 */
      color: var(--bg);       /* 文字 */
      border-color: var(--warn);
    }
    .tag.bad{
      background: var(--bad);       /* 浅红色背景 */
      color: var(--bg);        /* 文字 */
      border-color: var(--bad);
    }

    /* 悬停：深色底 + 浅色字 */
    .tag.ok:hover{
      background: var(--bg);
      color: var(--text);
      border-color: var(--ok);
    }
    .tag.warn:hover{
      background: var(--bg);
      color: var(--text);
      border-color: var(--warn);
    }
    .tag.bad:hover{
      background: var(--bg);
      color: var(--text);
      border-color: var(--bad);
    }

/* ========== 联系我们：微信二维码弹层（最简） ========== */
  .qr-mask{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:10000; background:rgba(0,0,0,.5); }
  .qr-mask.show{ display:flex; }

  .qr-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    text-align: center;
  }
  .qr-card img{
    width: 260px; max-width: 72vw; height: auto;
    display: block; margin: 8px auto;
    border-radius: 12px; background: #fff; /* 白底更利于扫码 */
  }
  .qr-card .tip{ font-size:12px; color:var(--muted); margin-top:6px; }
.center{ text-align:center; margin-top:8px; }


/* ===== 全局备案号 Footer（方案B样式） ===== */
.site-beian{
  text-align: center;       /* 居中对齐 */
  font-size: 12px;          /* 小字 */
  color: var(--muted);      /* 使用次要文字色，暗色自适配 */
  opacity: 0.7;             /* 半透明 */
  padding: 12px 8px;        /* 内边距 */
  margin-top: 12px;         /* 与上方内容留间距 */
}
.site-beian:hover{ opacity: 1; } /* 悬停时变清晰 */
.site-beian a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}