/* =========================================================
   织豆 BeadWeaver · 主题层 v4（20260925a）
   消费 /hashguard/css/app.css 令牌，对齐 convert / hashguard 的液态玻璃语言。
   约定：全文件不出现 important 声明 —— 打包 CSS 无 important，#root 前缀特异性即胜。
   若 beadweaver bundle 被重新部署，请在 index.html 重新挂回本文件的 <link>。
   ========================================================= */

/* ---- 统一表面令牌：所有卡片/面板/工具条共用，保证背景连续与"嵌入感" ---- */
#root {
  --bw-surface: rgba(22,30,35, .40);
  --bw-surface-hover: rgba(22,30,35, .52);
  --bw-surface-2: rgba(255, 255, 255, .22);
  --bw-edge: rgba(255, 255, 255, .06);
  --bw-edge-strong: rgba(255, 255, 255, .12);
  --bw-blur: 24px;
}
body.day-mode #root {
  --bw-surface: rgba(255, 255, 255, .62);
  --bw-surface-hover: rgba(255, 255, 255, .62);
  --bw-surface-2: rgba(255, 255, 255, .50);
  --bw-edge: rgba(0, 0, 0, .06);
  --bw-edge-strong: rgba(0, 0, 0, .12);
  --bw-blur: 28px;
}

/* ---- S1 应用根背景透明：露出站点粒子画布与水体 ---- */
#root > div.min-h-full,
#root > div.min-h-full.bg-gradient-to-b {
  background: transparent;
  background-image: none;
}
#root .from-stone-950,
#root .via-stone-950,
#root .to-stone-950,
#root .to-amber-950\/20 {
  --tw-gradient-from: transparent;
  --tw-gradient-to: transparent;
  --tw-gradient-stops: transparent, transparent;
}
#root .bg-stone-950,
#root .bg-stone-950\/90,
#root .bg-stone-900,
#root .bg-stone-900\/80,
#root .bg-stone-900\/40,
#root .bg-stone-800 {
  background-color: transparent;
}

/* ---- S2 应用内 header → 玻璃子工具条（保留，不隐藏） ---- */
#root header {
  background: transparent;
  border-bottom: 1px solid var(--bw-edge);
  box-shadow: none;
}
#root header.mx-auto.max-w-6xl { display: none; }

/* ---- S3 卡片 / 面板 → 液态玻璃 ---- */
#root .card {
  background: var(--bw-surface) !important;
  border: 1px solid var(--bw-edge);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 10px 30px rgba(0, 0, 0, .10);
  transition: box-shadow .3s, border-color .3s, background .3s, transform .3s;
}
#root .card:hover {
  background: var(--bw-surface-hover) !important;
  border-color: var(--bw-edge-strong);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 16px 40px rgba(0, 0, 0, .16);
}
#root .panel-title {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .08em;
}

/* ---- S4 按钮 → 玻璃药丸 + 扫光（hover 复用液态气泡 transform） ---- */
#root .btn-primary,
#root .btn-ghost {
  position: relative;
  overflow: hidden;
  border-radius: 100px;
  padding: .6rem 1.4rem;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: .5px;
  border: 1px solid transparent;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, background .3s, border-color .3s, color .3s;
}
#root .btn-primary {
  background: var(--glass-sheen), linear-gradient(180deg, rgba(111,184,171, .42), rgba(111,184,171, .18));
  border-color: rgba(111,184,171, .55);
  color: var(--text-primary);
  box-shadow: inset 0 1px 1px var(--glass-edge-top), inset 0 -1px 1.5px var(--glass-edge-bottom),
              inset 0 0 16px rgba(111,184,171, .10), 0 4px 18px rgba(111,184,171, .16);
}
#root .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .30) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .6s ease;
}
#root .btn-primary:hover::after { transform: translateX(130%); }
#root .btn-primary:hover {
  background: var(--glass-sheen), linear-gradient(180deg, rgba(111,184,171, .55), rgba(111,184,171, .28));
  border-color: var(--accent-bronze);
  box-shadow: inset 0 1px 1px var(--glass-edge-top), inset 0 -1px 1.5px var(--glass-edge-bottom), 0 8px 22px var(--glass-accent);
  transform: translate(var(--bub-x, 0px), calc(var(--bub-y, 0px) - 3px))
             rotate(var(--bub-lean, 0deg)) scale(1.03)
             rotate(calc(var(--bub-lean, 0deg) * -1));
}
#root .btn-ghost {
  background: var(--glass-sheen), linear-gradient(180deg, var(--glass-fill-strong), var(--glass-fill));
  border-color: var(--nav-border);
  color: var(--text-primary);
  box-shadow: inset 0 1px 1px var(--glass-edge-top), inset 0 -1px 1.5px var(--glass-edge-bottom);
}
#root .btn-ghost:hover {
  border-color: rgba(143,202,191, .5);
  background-color: var(--glass-card-hover);
  color: var(--accent-bronze-light);
  transform: translate(var(--bub-x, 0px), calc(var(--bub-y, 0px) - 3px))
             rotate(var(--bub-lean, 0deg)) scale(1.03)
             rotate(calc(var(--bub-lean, 0deg) * -1));
}
#root .btn-primary:disabled,
#root .btn-ghost:disabled { opacity: .38; box-shadow: none; transform: none; }
#root .btn-primary:disabled::after { display: none; }
body.day-mode #root .btn-primary {
  background: linear-gradient(120deg, #2f7068, #2f7068);
  border-color: rgba(45, 139, 104, .6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(45, 139, 104, .3);
}
body.day-mode #root .btn-ghost {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(0, 0, 0, .12);
  color: var(--text-primary);
}
#root button.rounded-lg {
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
#root button.rounded-lg:hover {
  background: var(--glass-fill-strong);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

/* ---- S5 表单控件 ---- */
#root .input-range,
#root .accent-amber-500 { accent-color: var(--accent-teal); }
#root input[type="text"],
#root input[type="number"],
#root select,
#root textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: .45rem .7rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#root input[type="text"]:focus,
#root input[type="number"]:focus,
#root select:focus,
#root textarea:focus {
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px rgba(111,184,171, .16);
  outline: none;
}
#root input[type="checkbox"] { accent-color: var(--accent-teal); width: 15px; height: 15px; border-radius: 4px; }
body.day-mode #root input[type="text"],
body.day-mode #root input[type="number"],
body.day-mode #root select,
body.day-mode #root textarea {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(0, 0, 0, .12);
}

/* ---- S6 上传拖拽区 ---- */
#root section.border-dashed {
  background: var(--bw-surface-2);
  border: 1.5px dashed var(--bw-edge-strong);
  border-radius: 24px;
  padding: 52px 28px;
  box-shadow: inset 0 1px 0 var(--bw-edge-strong);
  transition: border-color .3s, box-shadow .3s, transform .3s, background .3s;
}
#root section.border-dashed.border-amber-400 {
  border-color: var(--accent-bronze);
  background: var(--bw-surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(111,184,171, .12);
}

/* ---- S7 侧栏 / 浮动工具条 / 画布台 ---- */
#root .flex.h-full.w-1\/4 {
  background: var(--bw-surface-2);
  border-right: 1px solid var(--bw-edge);
}
#root .absolute.rounded-lg[class*="bg-stone-900"] {
  background: var(--bw-surface);
  border: 1px solid var(--bw-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 8px 24px rgba(0, 0, 0, .18);
}
#root .min-h-\[50vh\].flex-1 {
  background: var(--bw-surface);
  border: 1px solid var(--bw-edge);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 14px;
}
#root .min-h-\[50vh\].flex-1 canvas { border-radius: 12px; display: block; }

/* ---- S17 原图/转换图 可拖动对比滑块 ---- */
.bw-cmp-enter {
  position: fixed;
  right: 22px;
  bottom: 76px;
  z-index: 9000;
  border: 1px solid var(--bw-edge-strong);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bw-surface-hover);
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, border-color .3s;
}
.bw-cmp-enter:hover { transform: translateY(-2px); border-color: var(--accent-bronze); }
.bw-cmp {
  position: absolute;
  z-index: 60;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bw-edge-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.bw-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.bw-cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-gold);
  box-shadow: 0 0 12px rgba(201, 169, 110, .6);
  transform: translateX(-1px);
}
.bw-cmp-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bw-surface-hover);
  border: 1px solid var(--accent-gold);
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 6px 18px rgba(0, 0, 0, .35);
}
.bw-cmp-handle span::before {
  content: '◂ ▸';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent-gold);
}
.bw-cmp-tag {
  position: absolute;
  top: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bw-surface-hover);
  border: 1px solid var(--bw-edge-strong);
  pointer-events: none;
}
.bw-cmp-tag-l { left: 10px; }
.bw-cmp-tag-r { right: 10px; }
.bw-cmp-exit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--bw-edge-strong);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bw-surface-hover);
}
.bw-cmp-exit:hover { border-color: var(--accent-bronze); }

/* ---- S8 拼豆格 ---- */
#root .grid.grid-cols-4.gap-1 > div {
  background: var(--glass-fill);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s;
}
#root .grid.grid-cols-4.gap-1 > div:hover {
  border-color: var(--accent-bronze);
  background: var(--glass-accent);
}

/* ---- S9 amber / sky / violet → gold / teal / bronze ---- */
#root .text-amber-300,
#root .text-amber-400 { color: var(--accent-gold); }
#root .text-amber-500,
#root .text-amber-300\/80,
#root .text-amber-300\/90 { color: var(--accent-teal); }
#root .bg-amber-500,
#root .bg-amber-500\/10,
#root .bg-amber-500\/15,
#root .bg-amber-500\/25 { background-color: var(--glass-accent); }
#root [class*="border-amber-500"],
#root [class*="border-amber-400"] { border-color: var(--border-accent); }
#root .hover\:text-amber-300:hover { color: var(--accent-gold); }
#root .hover\:bg-amber-400:hover { background-color: rgba(201, 169, 110, .18); }
#root .text-sky-300 { color: var(--bar-to); }
#root .text-violet-300 { color: var(--accent-bronze-light); }
#root .bg-sky-500\/15,
#root .bg-violet-500\/15 { background-color: var(--glass-accent); }

/* ---- S10 stone 文字与边框 → 站点令牌（token 自动翻转，无需 day-mode） ---- */
#root .text-stone-100,
#root .text-stone-200 { color: var(--text-primary); }
#root .text-stone-300,
#root .text-stone-400,
#root .text-stone-500 { color: var(--text-secondary); }
#root .text-stone-600 { color: var(--text-muted); }
#root [class*="border-stone-600"],
#root [class*="border-stone-700"],
#root [class*="border-stone-800"] { border-color: var(--border-subtle); }

/* ---- S11 字体：正文 sans，标题/数字展示体 ---- */
#root { font-family: var(--sans); color: var(--text-primary); }
#root h1,
#root h2.text-4xl,
#root h2.md\:text-5xl {
  font-family: 'Smiley Sans Oblique', 'Noto Serif SC', serif;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-primary);
}
#root .font-mono,
#root .tabular-nums { font-family: var(--mono); font-variant-numeric: tabular-nums; }
#root .text-4xl.font-extrabold,
#root .text-3xl.font-bold {
  font-family: 'Smiley Sans Oblique', 'Noto Serif SC', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--accent-teal);
}
body.day-mode #root .text-4xl.font-extrabold,
body.day-mode #root .text-3xl.font-bold {
  background: linear-gradient(120deg, #2f7068, #6f9bd1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- S12 圆角归一 ---- */
#root .rounded-lg { border-radius: var(--radius-sm); }
#root .rounded-2xl,
#root .rounded-xl { border-radius: var(--radius); }
#root .rounded { border-radius: 6px; }

/* ---- S13 落地对比区 ---- */
#root section.mt-16 .flex.flex-wrap.items-end {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
#root section.mt-16 h2,
#root section.mt-16 .text-xl {
  font-family: 'Smiley Sans Oblique', 'Noto Serif SC', serif;
  letter-spacing: 1px;
}
#root .mt-16.grid > *,
#root .mt-4.grid > * {
  background: var(--bw-surface) !important;
  border: 1px solid var(--bw-edge);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--bw-edge-strong), 0 10px 30px rgba(0, 0, 0, .10);
  transition: box-shadow .3s, border-color .3s, background .3s, transform .3s;
}
#root .mt-16.grid > *:hover,
#root .mt-4.grid > *:hover {
  background: var(--bw-surface-hover);
  border-color: var(--bw-edge-strong);
  transform: translateY(-2px);
}
#root img.object-contain {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--glass-fill);
}

/* ---- S14 应用内弹窗 / 设置面板（复用 block1 的 @keyframes bwPop） ---- */
#root div.fixed.inset-0 {
  background: rgba(4, 8, 16, .55);
}
#root div.fixed.inset-0 .card,
#root [role="dialog"] > div {
  border-radius: 28px;
  border: 1px solid var(--bw-edge-strong);
  background: var(--bw-surface-hover);
  box-shadow: inset 0 1px 1px var(--glass-edge-top), inset 0 -1px 1.5px var(--glass-edge-bottom),
              0 24px 70px rgba(0, 0, 0, .5), 0 0 44px rgba(111,184,171, .16);
  animation: bwPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
body.day-mode #root div.fixed.inset-0 { background: rgba(238, 244, 248, .55); }
body.day-mode #root div.fixed.inset-0 .card,
body.day-mode #root [role="dialog"] > div {
  box-shadow: inset 0 1px 1px var(--glass-edge-top), inset 0 -1px 1.5px var(--glass-edge-bottom),
              0 24px 70px rgba(61, 92, 80, .25), 0 0 44px rgba(74,138,128, .14);
}

/* ---- S15 入场动画（纯 CSS，不 reintroduce observer） ---- */
@keyframes bwRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
#root section,
#root .card { animation: bwRise .6s cubic-bezier(.25, .46, .45, .94) both; }

/* ---- S16 视图节奏 + 页脚（仅落地/文档视图） ---- */
#root > div.min-h-full.to-amber-950\/20 { padding-top: 120px; }
#root > div.min-h-full.to-stone-950 { padding-top: 96px; }
#root main.mx-auto.max-w-6xl { max-width: 960px; padding: 0 32px 96px; margin: 0 auto; }
#root main.mx-auto.max-w-5xl { max-width: 960px; padding: 0 32px 80px; margin: 0 auto; }
#root section.mt-16,
#root section.mt-10 { padding: 46px 0 20px; }

.bw-footer { padding: 60px 48px 40px; border-top: 1px solid var(--border-subtle); }
.bw-footer-in {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
}
.bw-footer-in a { color: var(--text-secondary); transition: color .25s; }
.bw-footer-in a:hover { color: var(--accent-bronze-light); }
.bw-footer-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bw-footer-links a { font-size: 13px; }
.bw-footer .bw-help-btn {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}
body:has(#root > .flex.h-full.flex-col) .bw-footer { display: none; }

/* =========================================================
   S18 工作台（studio）布局与可读性重排（2026-09-25）
   ========================================================= */

/* 画布占满画板，去掉浅色内衬造成的黑槽观感 */
#root .min-h-\[50vh\].flex-1 { padding: 0; }

/* 工具条：竖排窄条 → 横向玻璃工具栏，置于画板左上 */
body:has(#root > .flex.h-full.flex-col) #root .absolute.left-2.top-2.flex.flex-col {
  flex-direction: row;
  top: 10px;
  left: 10px;
  gap: 4px;
  padding: 5px;
}
body:has(#root > .flex.h-full.flex-col) #root .absolute.left-2.top-2.flex.flex-col > button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-secondary);
  transition: background .2s, color .2s, border-color .2s;
}
body:has(#root > .flex.h-full.flex-col) #root .absolute.left-2.top-2.flex.flex-col > button:hover {
  background: var(--bw-surface-hover);
  color: var(--text-primary);
}

/* 缩放条与提示分离：提示上移，缩放条做成清晰药丸 */
#root .pointer-events-none.fixed.bottom-3 { bottom: 58px; }
#root .absolute.bottom-2.left-1\/2 {
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
}
#root .absolute.bottom-2.left-1\/2 button { min-width: 24px; height: 24px; }

/* 分段控件激活态必须一眼可辨 */
#root .bg-amber-500\/25 {
  background: linear-gradient(120deg, rgba(111,184,171, .9), rgba(47, 158, 126, .8));
  color: #fff;
}
#root .bg-amber-500\/25.text-amber-300 { color: #fff; }
#root .bg-stone-800.text-stone-200 {
  background: var(--bw-surface-hover);
  color: var(--text-primary);
  border: 1px solid var(--bw-edge-strong);
}
#root button.flex-1.rounded, #root button.rounded.px-1\.5 {
  color: var(--text-secondary);
}
#root button.flex-1.rounded:hover, #root button.rounded.px-1\.5:hover {
  color: var(--text-primary);
  background: var(--bw-surface);
}

/* 小字可读性：统一抬到可辨识字号与对比度 */
#root .panel-title { color: var(--text-secondary); font-weight: 600; }
#root .text-xs { font-size: 12px; color: var(--text-secondary); }
#root .text-\[9px\] { font-size: 10px; }
#root .text-\[10px\], #root .text-\[11px\] { font-size: 11.5px; color: var(--text-secondary); }
#root .tabular-nums { color: var(--text-secondary); }

/* 侧栏面板内距收紧，信息分组更清楚 */
body:has(#root > .flex.h-full.flex-col) #root .card { padding: 12px 14px; }
body:has(#root > .flex.h-full.flex-col) #root .flex.h-full.w-1\/4 { padding: 10px; gap: 10px; }

/* 对比滑块入口移到画板顶部居中，不再压右栏 */
.bw-cmp-enter {
  right: auto;
  bottom: auto;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
}
.bw-cmp-enter:hover { transform: translateX(-50%) translateY(-2px); }

/* =========================================================
   S19 按钮与细节打磨（2026-09-25）
   ========================================================= */

/* 按钮：统一高度/对齐/焦点环/按压反馈 */
#root .btn-primary,
#root .btn-ghost {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#root .btn-primary:focus-visible,
#root .btn-ghost:focus-visible,
#root button:focus-visible,
#root select:focus-visible,
#root input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(111,184,171, .35), inset 0 1px 0 var(--bw-edge-strong);
}
#root .btn-primary:active,
#root .btn-ghost:active {
  transform: translate(var(--bub-x, 0px), var(--bub-y, 0px)) scale(.97);
}

/* 落地页排版：正文对比与行高 */
#root h1 { line-height: 1.18; }
#root main p { color: var(--text-secondary); line-height: 1.9; }

/* 工作台子工具栏状态文字对比 */
#root header .text-stone-400,
#root header .text-stone-500,
#root header span.text-xs { color: var(--text-secondary); }

/* 主题化滚动条 */
#root ::-webkit-scrollbar { width: 8px; height: 8px; }
#root ::-webkit-scrollbar-thumb { background: var(--bw-edge-strong); border-radius: 100px; }
#root ::-webkit-scrollbar-thumb:hover { background: var(--accent-bronze); }
#root ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   S20 右栏：用色行 hover 与导出按钮图标化（2026-09-25）
   ========================================================= */

/* 用色行：可感知 hover + 内件对齐 */
#root .group.items-center.gap-2.rounded {
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .2s, transform .2s;
}
#root .group.items-center.gap-2.rounded:hover {
  background: var(--bw-surface);
  transform: translateX(2px);
}
#root .hover\:bg-stone-800\/60:hover { background: var(--bw-surface); }
#root .group.items-center.gap-2.rounded .h-5.w-5 {
  border-radius: 6px;
  border-color: var(--bw-edge-strong);
  box-shadow: inset 0 1px 0 var(--bw-edge-strong);
}
#root .group.items-center.gap-2.rounded .font-mono { color: var(--text-primary); }

/* 导出按钮：按位图标 + 统一节奏 */
#root .grid.grid-cols-2.gap-2.text-xs > button::before {
  font-size: 13px;
  line-height: 1;
  filter: saturate(.9);
}
#root .grid.grid-cols-2.gap-2.text-xs > button:nth-child(1)::before { content: '🖼'; }
#root .grid.grid-cols-2.gap-2.text-xs > button:nth-child(2)::before { content: '📄'; }
#root .grid.grid-cols-2.gap-2.text-xs > button:nth-child(3)::before { content: '🧩'; }
#root .grid.grid-cols-2.gap-2.text-xs > button:nth-child(4)::before { content: '🛒'; }
#root .grid.grid-cols-2.gap-2.text-xs > button:nth-child(5)::before { content: '🧾'; }
#root .grid.grid-cols-2.gap-2.text-xs > button { font-size: 12.5px; }
#root .grid.grid-cols-2.gap-2.text-xs + p { color: var(--text-muted); line-height: 1.7; }

/* 导出按钮单行化，行高统一 40px */
#root .grid.grid-cols-2.gap-2.text-xs > button {
  white-space: nowrap;
  font-size: 11.5px;
  padding: 0 10px;
}

/* ---- v5 水墨：琥珀强调 → 墨青/雾蓝（令牌驱动，明暗自适应） ---- */
#root .bg-amber-500\/10 { background-color: color-mix(in srgb, var(--accent-ink) 10%, transparent) !important; }
#root .bg-amber-500\/15 { background-color: color-mix(in srgb, var(--accent-ink) 14%, transparent) !important; }
#root .bg-amber-500\/25 { background-color: color-mix(in srgb, var(--accent-ink) 22%, transparent) !important; }
#root .border-amber-500\/60 { border-color: var(--border-accent) !important; }
#root .text-amber-500\/70 { color: color-mix(in srgb, var(--accent-ink) 82%, transparent) !important; }
#root .accent-amber-500, #root .input-range { accent-color: var(--accent-ink); }
#root .btn-active {
  border-color: var(--border-accent) !important;
  background-color: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
}