/* JINROO UI Styles — v3.0
 * 变更要点：
 * 1) 默认浅色；深色仅用 @media(prefers-color-scheme: dark) 覆盖
 * 2) 小提示与“最近生成/检索”列表字体更小更淡
 * 3) 手机下 .hero-icon 固定圆形，不被挤压；文案自动换行
 * 4) 图标统一 currentColor，上色稳定；☎电话图标单独改为 background-SVG；✔对勾改实心路径以保证浅色可见
 */

/* ===== 默认：浅色 ===== */
:root {
  color-scheme: light;

  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --brand: #f3b343;
  --success: #2ecc71;
  --warning: #f6c25b;
  --danger: #ff6b6b;

  --outline: rgba(0, 0, 0, 0.12);
  --outline2: rgba(0, 0, 0, 0.08);

  --base-font: 16px;
  --line: 1.55;

  --btn-bg: rgba(0, 0, 0, 0.03);
  --input-bg: rgba(0, 0, 0, 0.03);

  /* 日间：深色图标 & 浅色边框 */
  --brand-mark-fg: #111; /* 图标颜色（白天） */
  --brand-mark-border: rgba(0, 0, 0, 0.12);
}

/* ===== 深色覆盖 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0c10;
    --card: #15171d;
    --text: #eef1f5;
    --muted: #aeb6c2;

    --outline: rgba(255, 255, 255, 0.12);
    --outline2: rgba(255, 255, 255, 0.08);

    --btn-bg: rgba(255, 255, 255, 0.06);
    --input-bg: rgba(255, 255, 255, 0.04);
  }
}

/* ===== Reset & 基础 ===== */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  font-size: var(--base-font);
  line-height: var(--line);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
a {
  color: var(--text);
  text-decoration: none;
}
input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* ===== 布局与卡片 ===== */
.container {
  max-width: 840px;
  margin: 0 auto;
  padding: 16px;
}
.card {
  background: var(--card);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  border: 1px solid var(--outline2);
}
@media (prefers-color-scheme: dark) {
  .card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
}

/* v2.17 补充：内联 SVG 作为 .icon 时的统一尺寸与着色 */
svg.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
}

/* 工具栏按钮可点的兜底（防止第三方样式意外禁用交互） */
.toolbar .btn {
  pointer-events: auto;
}

.site-header {
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--outline2);
  position: sticky;
  top: 0;
  z-index: 1000; /* ↑ 永远压过 keepaliveCard(z=10) */
  isolation: isolate; /* 建独立叠层，避免子元素层级外溢影响内容区 */
}
.brand {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent; /* 只要边框，不要底色 */
  border: 1px solid var(--brand-mark-border); /* 昼夜自适应 */
  padding: 4px;
  box-sizing: border-box;
}
.brand-name {
  font-weight: 800;
  letter-spacing: 0.5px;
}
.brand-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1.2px;
}
.toolbar {
  margin-left: auto;
}

/* ===== Hero（防挤压：图标固定圆，文本可换行） ===== */
.hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: radial-gradient(
      1200px 400px at 0% 0%,
      rgba(46, 204, 113, 0.12),
      transparent 60%
    ),
    var(--card);
}
.hero-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  flex: 0 0 56px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.35);
  overflow: hidden;
}
.hero-icon.warning {
  background: rgba(246, 194, 91, 0.12);
  border-color: rgba(246, 194, 91, 0.45);
}
.hero-icon.error {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.45);
}
.hero-content {
  flex: 1 1 auto;
  min-width: 0;
}
.hero-title {
  font-size: 24px;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-subtitle {
  color: var(--muted);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== 标题/键值对/徽章 ===== */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 18px;
}
.kv {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px dashed var(--outline2);
  border-radius: 12px;
  overflow: hidden;
}
.kv li {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--outline2);
}
.kv li:last-child {
  border-bottom: none;
}
.kv li span {
  color: var(--muted);
}
.kv li strong {
  font-weight: 700;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid var(--outline2);
  font-size: 13px;
  color: var(--text);
}

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 700;
}
.btn.primary {
  background: linear-gradient(180deg, #ffd479, #f3b343);
  color: #1a1a1a;
  border-color: transparent;
}
.btn.ghost {
  background: transparent;
}
.btn.mini {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  min-height: 40px;
}
.btn.danger {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
}
.actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
button,
.btn {
  min-height: 48px;
}
.actions .btn.primary {
  min-width: 44%;
}
@media (max-width: 480px) {
  .actions {
    flex-direction: column;
  }
  .actions .btn {
    width: 100%;
  }
}

/* ===== 提示/网格/页脚 ===== */
.tips {
  padding-left: 18px;
  margin: 0;
  color: var(--muted);
}
.tips li {
  margin: 8px 0;
}
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.svc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--outline2);
}
.svc:last-child {
  border-bottom: none;
}
.svc-label {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hidden {
  display: none;
}

/* ===== A) 小提示更小更淡 ===== */
p.muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}
p.muted.sm {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.66;
}

/* ===== B) “最近生成 / 检索” 列表更小更淡（按钮/徽章除外） ===== */
#list {
  font-size: 13px;
  color: var(--muted);
}
#list p,
#list li,
#list span,
#list td,
#list th,
#list div,
#list code,
#list pre {
  font-size: 13px;
  color: var(--muted);
}
#list .btn,
#list button,
#list a.btn,
#list .badge {
  color: var(--text);
  font-size: 14px;
}
#list table {
  width: 100%;
  border-collapse: collapse;
}
#list th,
#list td {
  padding: 6px 8px;
  vertical-align: middle;
}

/* ===== 一行输入 + 按钮 ===== */
.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-row.nowrap {
  flex-wrap: nowrap;
}
.input {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--text);
  min-height: 48px;
}
/* 统一输入（含 iOS 白底覆盖） */
.input,
.input-row .input,
input.input {
  flex: 1 1 1px;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background-color: var(--input-bg) !important;
  color: var(--text);
  box-shadow: none !important;
}
.input::placeholder {
  color: var(--muted);
  opacity: 0.9;
}
.input:focus {
  border-color: rgba(0, 0, 0, 0.28);
}
@media (prefers-color-scheme: dark) {
  .input:focus {
    border-color: rgba(255, 255, 255, 0.28);
  }
}
/* 极小屏按钮尺寸 */
.input-row .btn {
  flex: 0 0 auto;
  min-height: 48px;
  height: 48px;
}
@media (max-width: 360px) {
  .input-row .btn {
    padding: 12px 12px;
  }
}

/* ===== 适老化（大字版） ===== */
body.senior {
  --base-font: 19px;
  --line: 1.7;
}
body.senior .hero-title {
  font-size: 28px;
}
body.senior .btn {
  padding: 14px 18px;
  font-weight: 800;
}
body.senior .btn.mini {
  padding: 10px 12px;
  font-size: 14px;
}
body.senior .kv li {
  padding: 14px 16px;
}
body.senior .badge {
  padding: 10px 12px;
}
body.senior .muted {
  color: #4b5563;
}
body.senior .kv {
  border-color: rgba(0, 0, 0, 0.12);
}
body.senior .kv li {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* ===== 图标（mask + currentColor） ===== */
.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
  color: inherit;
  vertical-align: -2px;
}
/* 所有图标统一使用 currentColor */
.icon.check::before,
.icon.shield::before,
.icon.warranty::before,
.icon.return::before,
.icon.headset::before,
.icon.info::before,
.icon.phone::before,
.icon.wechat::before,
.icon.copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}

/* footer */
/* ===== Footer（备案最佳实践）===== */
.footer {
  margin-top: 24px;
  padding: 12px 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* 两行间距尽量小 */
  text-align: center;
  line-height: 1.6;
  color: var(--footer-muted, #999); /* 弱化色（浅灰） */
  font-size: 12px; /* 备案常用小字号 */
}

.footer a {
  color: inherit; /* 链接颜色跟随文本（统一、低打扰） */
  text-decoration: none;
}
.footer a:hover,
.footer a:focus-visible {
  text-decoration: underline; /* 悬停/键盘聚焦下划线，提升可用性 */
}

.footer .footer-line1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.5;
  color: var(--footer-strong, #666); /* 第一行稍深一点 */
  font-size: 13px; /* 第一行略大于备案行 */
  font-weight: 500;
}

.footer .slogan {
  font-weight: 500;
}

.footer .footer-line2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* ICP/公网安备之间的间距 */
  flex-wrap: wrap;
  margin-top: 2px;
}

.footer .beian {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer .beian.hidden {
  display: none;
} /* 兼容 JS 的显示/隐藏 */

.footer .beian-badge {
  width: 14px;
  height: 14px;
  opacity: 0.75;
  vertical-align: middle;
}

.footer .sep {
  opacity: 0.35;
} /* 第一行的「｜」弱化 */

@media (prefers-color-scheme: dark) {
  .footer {
    color: rgba(255, 255, 255, 0.6);
  }
  .footer .footer-line1 {
    color: rgba(255, 255, 255, 0.75);
  }
  /* 保持 PNG 原色，不受深色模式/Auto Dark 影响 */
  .footer .beian-badge {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal;
    opacity: 0.85; /* 需要更淡可改回 0.75 */
  }
}

/* 若检测到你的 auto-dark-bug 标记，也强制保留原色 */
html.auto-dark-bug .footer .beian-badge {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal;
}

/* CTA 下方说明：更小字号 + 与按钮拉开距离 */
.cta-desc {
  margin-top: 8px; /* 与上方黄色按钮留白 */
  font-size: 12px; /* 比正文更小，贴近备案说明风格 */
  line-height: 1.6; /* 可读性更好 */
}

/* ✔ 对勾：实心路径，浅色可见性更好 */
.icon.check::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z"/>\
</svg>')
    center/contain no-repeat;
}
/* 盾牌 */
.icon.shield::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 2l7 3v6c0 5-3.5 9.5-7 11-3.5-1.5-7-6-7-11V5l7-3z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 2l7 3v6c0 5-3.5 9.5-7 11-3.5-1.5-7-6-7-11V5l7-3z"/>\
</svg>')
    center/contain no-repeat;
  opacity: 0.9;
}
/* 质保 */
.icon.warranty::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 2l7 3v6c0 5-3.5 9.5-7 11-3.5-1.5-7-6-7-11V5l7-3zm-1 6h2v5h-2V8zm0 7h2v2h-2v-2z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 2l7 3v6c0 5-3.5 9.5-7 11-3.5-1.5-7-6-7-11V5l7-3zm-1 6h2v5h-2V8zm0 7h2v2h-2v-2z"/>\
</svg>')
    center/contain no-repeat;
}
/* 退换 */
.icon.return::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 5V2L7 7l5 5V9c3.3 0 6 2.7 6 6 0 1.1-.3 2.1-.8 3l1.8 1c.7-1.3 1-2.8 1-4.3 0-4.4-3.6-8-8-8z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 5V2L7 7l5 5V9c3.3 0 6 2.7 6 6 0 1.1-.3 2.1-.8 3l1.8 1c.7-1.3 1-2.8 1-4.3 0-4.4-3.6-8-8-8z"/>\
</svg>')
    center/contain no-repeat;
}
/* 耳机客服 */
.icon.headset::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 3a7 7 0 0 0-7 7v4a3 3 0 0 0 3 3h2v-6H7v-1a5 5 0 0 1 10 0v1h-3v6h2a3 3 0 0 0 3-3v-4a7 7 0 0 0-7-7z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M12 3a7 7 0 0 0-7 7v4a3 3 0 0 0 3 3h2v-6H7v-1a5 5 0 0 1 10 0v1h-3v6h2a3 3 0 0 0 3-3v-4a7 7 0 0 0-7-7z"/>\
</svg>')
    center/contain no-repeat;
}
/* 信息 */
.icon.info::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>\
</svg>')
    center/contain no-repeat;
}
/* ☎ 电话：仅此图标禁用 mask，改为 background-SVG（避免历史 mask 语法问题） */
.icon.phone::before {
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: url("data:image/svg+xml;utf8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E\
%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l1.48-1.48a1 1 0 0 1 1.11-.21c1.2.49 2.5.76 3.85.76a1 1 0 0 1 1 1V22a1 1 0 0 1-1 1C11.4 23 1 12.6 1 3a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.35.27 2.65.76 3.85a1 1 0 0 1-.21 1.11L6.62 10.79z'/%3E\
%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  position: absolute;
  inset: 0;
}
/* 微信 */
.icon.wechat::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M10 3c-3.9 0-7 2.6-7 5.8 0 1.8 1.1 3.4 2.8 4.5L5 16l2.2-1.2c.9.2 1.8.3 2.8.3 3.9 0 7-2.6 7-5.8S13.9 3 10 3zm-3 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M10 3c-3.9 0-7 2.6-7 5.8 0 1.8 1.1 3.4 2.8 4.5L5 16l2.2-1.2c.9.2 1.8.3 2.8.3 3.9 0 7-2.6 7-5.8S13.9 3 10 3zm-3 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/>\
</svg>')
    center/contain no-repeat;
}
/* 复制 */
.icon.copy::before {
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/>\
</svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill="white" d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/>\
</svg>')
    center/contain no-repeat;
}

/* 语义着色 */
.section-title .icon {
  color: var(--brand);
}
.btn .icon {
  color: currentColor;
}
.btn.mini .icon {
  width: 14px;
  height: 14px;
}

/* --- JINROO Admin 滚动抖动修复包 v1.1 (dark 修复) --- */

/* A. 关闭毛玻璃（避免滚动抖动），但背景颜色按主题区分 */
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .site-header,
  .card,
  .card.hero {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 统一用变量控制“卡片/头部”表面色与阴影，按主题切换 */
:root {
  --surface-bg: rgba(255, 255, 255, 0.86); /* 亮色下的卡片/头部 */
  --surface-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* 暗色下的卡片/头部（深色半透明，不泛灰雾） */
    --surface-bg: rgba(22, 24, 28, 0.88);
    --surface-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
}

/* 应用到头部与卡片 */
.site-header,
.card {
  background-color: var(--surface-bg) !important;
  box-shadow: var(--surface-shadow) !important;
  opacity: 1 !important; /* 防外部样式误设低透明 */
}

/* B.（保留上一版性能优化） */
.card {
  contain: layout paint;
}
#list > div[style*="overflow:auto"] {
  overscroll-behavior: contain;
  will-change: transform;
}
.btn,
label.btn {
  user-select: none;
}

/* 你已有 data-theme 机制：强制深色时改为白色图标 & 浅色边框 */
html[data-theme="dark"] {
  --brand-mark-fg: #fff; /* 图标颜色（夜间） */
  --brand-mark-border: rgba(255, 255, 255, 0.22);
}

html:not([data-theme]) {
  --brand-mark-fg: #fff;
  --brand-mark-border: rgba(255, 255, 255, 0.22);
}

/* 品牌标记：36x36 容器 + 边框（无背景） */
/* 36x36 容器 + 边框（无背景渐变） */
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;

  /* 深色 LOGO（黑底透明） */
  padding: 2px; /* 给图标留出安全边距，避免贴边 */
  background: center / contain no-repeat content-box
    url("/static/brand/jinroo-logo.png?v=20251031");
}

/* 夜间：白色 LOGO + 更轻的边框 */
html[data-theme="dark"] body .brand-mark {
  border-color: rgba(255, 255, 255, 0.22);
  background: center / contain no-repeat content-box
    url("/static/brand/jinroo-logo-light.png?v=20251031") !important;
}

/*系统暗色也生效（即使 data-theme 失效）*/
@media (prefers-color-scheme: dark) {
  .brand-mark {
    border-color: rgba(255, 255, 255, 0.22);
    background: center / contain no-repeat content-box
      url("/static/brand/jinroo-logo-light.png?v=20251031") !important;
  }
}

/* ============ 批量生成行：防抖动稳定布局 ============ */
.gen-row {
  display: grid;
  /* 列：SKU | 批次 | 数量 | 按钮  */
  grid-template-columns: minmax(260px, 1.3fr) minmax(180px, 1fr) 120px auto;
  gap: 10px;
  align-items: center;
}

/* 允许输入在网格中收缩，不把容器撑爆 */
.gen-row .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 避免按钮换行导致的高度跳动 */
.gen-row .btn {
  white-space: nowrap;
}

/* 小屏两列：SKU|批次 分两列，数量/按钮下一行 */
@media (max-width: 900px) {
  .gen-row {
    grid-template-columns: 1fr 1fr;
  }
  .gen-row .count {
    grid-column: 1 / 2;
  }
  .gen-row #btnGen {
    grid-column: 2 / 3;
    justify-self: start;
  }
}

/* 极小屏单列，顺序不变，仍不抖动 */
@media (max-width: 560px) {
  .gen-row {
    grid-template-columns: 1fr;
  }
  .gen-row #btnGen {
    justify-self: start;
  }
}

/* 额外小优化：聚焦时不改变边框粗细，避免微抖 */
.input {
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
}
.input:focus {
  outline: none;
  border-color: var(--focus-color, rgba(255, 255, 255, 0.28));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* （可选）防止滚动条出现/消失引起整体横向抖动 */
html {
  overflow-y: scroll;
}

/* ------- 全局：消除隐形抖动源 ------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable both-edges;
} /* 预留滚动条空间，防版面跳动 */
body {
  overflow-anchor: auto;
}

/* 把回流限制在卡片内部，别牵连整页 */
.card--stable {
  contain: layout paint;
} /* 只加在“批量生成”卡片即可 */

/* ------- 批量生成行：Grid 固定列 ------- */
.gen-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(180px, 1fr) 120px auto;
  gap: 10px;
  align-items: center;
}

/* 关键：允许子项在容器内收缩（Chrome flex/grid 的老坑） */
.gen-row .input,
.gen-row .btn,
.card .input,
.card select,
.card button {
  min-width: 0;
  max-width: 100%;
}

/* 按钮不换行，避免行高抖 */
.gen-row .btn {
  white-space: nowrap;
}

/* 断点降级也稳定，不 wrap 抖动 */
@media (max-width: 900px) {
  .gen-row {
    grid-template-columns: 1fr 1fr;
  }
  .gen-row .count {
    grid-column: 1 / 2;
  }
  .gen-row #btnGen {
    grid-column: 2 / 3;
    justify-self: start;
  }
}
@media (max-width: 560px) {
  .gen-row {
    grid-template-columns: 1fr;
  }
  .gen-row #btnGen {
    justify-self: start;
  }
}

/* 焦点样式只改颜色，不改边框粗细，避免 1px 抖动 */
.input {
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}
.input:focus {
  outline: none;
  border-color: var(--focus-color, rgba(255, 255, 255, 0.35));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* 若你的全局写过 transition: all; 这里就拦截一下（只动画“非布局”属性） */
.card--stable * {
  transition-property: color, background-color, border-color, box-shadow,
    opacity, transform;
}

/* 第二个卡片里的第一行（你的内联 flex 那行）强制替换为 Grid */
section.card:nth-of-type(2) > div[style*="display: flex"]{
  display: grid !important;
  grid-template-columns: minmax(260px, 1.3fr) minmax(180px, 1fr) 120px auto !important;
  gap: 10px !important;
  align-items: center !important;
}
section.card:nth-of-type(2) > div[style*="display: flex"] .input,
section.card:nth-of-type(2) > div[style*="display: flex"] .btn{
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap;
}
@media (max-width: 900px){
  section.card:nth-of-type(2) > div[style*="display: flex"]{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px){
  section.card:nth-of-type(2) > div[style*="display: flex"]{
    grid-template-columns: 1fr !important;
  }
}

/* 让卡片只在局部回流，避免整页抖动 */
.card--stable { contain: layout paint; } /* 局部隔离，可显著减抖动。参考: CSS contain。*/

/* 批量生成行：固定 4 列，稳定 */
.gen-row{
  display: grid;
  grid-template-columns: minmax(260px,1.3fr) minmax(180px,1fr) 120px auto;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 0;
}

/* 关键：允许输入与按钮收缩，避免把容器撑爆（Chrome flex/grid 经典坑） */
.gen-row .input,
.gen-row .btn,
.card .input,
.card select,
.card button {
  min-width: 0;
  max-width: 100%;
}

/* 确保按钮永远在最上层可点 */
#btnGen { position: relative; z-index: 10; pointer-events: auto; }

/* 滚动条预留空间，避免滚动条出现/消失引发布局跳动 */
html { scrollbar-gutter: stable both-edges; }

/* 小屏断点 */
@media (max-width:900px){ .gen-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .gen-row{ grid-template-columns: 1fr; } }