/* ================= Node Action Buttons (复制 / SR / v2 / 返回) ================= */
:root{
  --btn-h: 44px;
  --btn-r: 14px;
  --btn-px: 16px;
  --btn-font: 15px;
  --btn-weight: 800;

  --btn-fg: var(--text, #e8eefb);
  --btn-bg-1: var(--card, #121b2d);
  --btn-bg-2: var(--card-2, #0f1728);
  --btn-border: var(--stroke, #2b3a55);

  --btn-g1: var(--brand-3, #53e0d2);
  --btn-g2: var(--brand-1, #6aa7ff);
  --btn-g3: var(--brand-2, #a78bfa);
}

/* 竖直按钮列容器（节点操作区） */
.btns{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(10px, 2.2vw, 14px);
  width:min(420px, 100%);
  margin-inline:auto;
}

/* 基类 */
.btn{
  -webkit-appearance:none; appearance:none;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;

  height:var(--btn-h);
  padding:0 var(--btn-px);
  border-radius:var(--btn-r);
  border:1px solid var(--btn-border);

  background:linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
  color:var(--btn-fg);
  text-decoration:none; white-space:nowrap; cursor:pointer;

  font-weight:var(--btn-weight);
  font-size:var(--btn-font);
  letter-spacing:.2px;

  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .12s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* 图标：稳定尺寸/基线/抗锯齿 */
.btn .ic{
  width:18px; height:18px; flex:0 0 18px;
  fill:currentColor;
  vertical-align:middle;
  transform:translateY(-0.5px); /* 视觉基线微调 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  shape-rendering:geometricPrecision;
}

.btn::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--btn-g1), var(--btn-g2), var(--btn-g3));
  opacity:0; transform:scaleX(.4); transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
}
.btn:hover::after, .btn:focus-visible::after{ opacity:.95; transform:scaleX(1); }

.btn:hover{
  filter:brightness(1.06);
  border-color:color-mix(in srgb, var(--btn-border), white 28%);
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn:active{ transform:translateY(1px); filter:brightness(1.03); }
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-g2) 26%, transparent),
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06);
  border-color:var(--btn-g2);
}

.btn--ghost{
  background:linear-gradient(180deg, color-mix(in srgb, var(--btn-bg-1), white 4%), var(--btn-bg-1));
}

/* 超窄屏收紧 */
@media (max-width:420px){
  :root{ --btn-h:40px; --btn-r:12px; --btn-font:14px; --btn-px:14px; }
}

/* ===== 全局 CTA 基础样式（中性深色，Windows 风格） ===== */
.dl-cta{
  --cta-h: 52px;
  --cta-r: 22px;
  --cta-px: 22px;

  /* 深色中性背景 + 细描边 */
  --cta-border: color-mix(in srgb, var(--stroke,#2b3a55), white 18%);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--card,#121b2d), white 6%),
              var(--card-2,#0f1728));
  border: 1px solid var(--cta-border);
  color: var(--text,#e8eefb);

  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--cta-h); padding: 0 var(--cta-px);
  border-radius: 999px; text-decoration: none;
  font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, filter .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

.dl-cta .ic{
  width: 20px; height: 20px; flex: 0 0 20px;
  margin-right: 12px;
  fill: currentColor;
  vertical-align: middle; transform: translateY(-0.5px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  shape-rendering: geometricPrecision;
}

/* 内发光细节 */
.dl-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 8px 22px rgba(255,255,255,.05);
}

.dl-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--cta-border), white 18%);
  box-shadow: 0 16px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
.dl-cta:active{ transform: translateY(0); filter: brightness(1.02); }
.dl-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--brand-1,#6aa7ff) 60%, transparent),
    0 16px 32px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* 小屏整行铺满更好点按 */
@media (max-width:680px){
  .dl-cta{ width:100%; justify-content:center; }
}

/* ===== 软件下载布局容器（保留你原来的栅格和行间距） ===== */
.dl-cta-row{
  display:flex; flex-wrap:wrap; gap:14px; align-items:stretch;
}
/* 可留空：软件下载的单个按钮现在直接用全局 .dl-cta 样式即可 */

/* ===== 教程区专用：让按钮在卡片里占满一行、居中 ===== */
.guide .video-cta{
  --cta-h: 48px;           /* 教程按钮略低一点 */
  --cta-px: 18px;
  width: 100%;
  justify-content: center;
  gap: 10px;
}
.guide .video-cta .ic{ width:18px; height:18px; flex:0 0 18px; margin-right:10px }

/* ================= Download CTA row（软件下载） =================== */
.dl-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;
}

/* —— 统一深色中性风（与 Windows 按钮一致） —— */
/* 强化选择器 + !important，彻底覆盖以前的彩色主题 */
.panel .dl-cta-row .dl-cta,
.panel .dl-cta-row .dl-cta.is-ios,
.panel .dl-cta-row .dl-cta.is-android,
.panel .dl-cta-row .dl-cta.is-win,
.panel .dl-cta-row .dl-cta.is-mac,
.panel .dl-cta-row .dl-cta.is-linux{
  --cta-h: 52px;
  --cta-r: 22px;
  --cta-px: 22px;

  background: linear-gradient(180deg,
              color-mix(in srgb, var(--card,#121b2d), white 6%),
              var(--card-2,#0f1728)) !important;
  border: 1px solid color-mix(in srgb, var(--stroke,#2b3a55), white 18%) !important;
  color: var(--text,#e8eefb) !important;

  position:relative; isolation:isolate;
  display:inline-flex; align-items:center;
  height:var(--cta-h); padding:0 var(--cta-px);
  border-radius:999px; text-decoration:none; font-weight:800; letter-spacing:.2px;

  box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dl-cta-row .dl-cta .ic{
  width:20px; height:20px; margin-right:12px; flex:0 0 20px;
  vertical-align:middle; transform:translateY(-0.5px);
  fill:currentColor;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; shape-rendering:geometricPrecision;
}

/* 内发光增加层次 */
.dl-cta-row .dl-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 8px 22px rgba(255,255,255,.05);
}

.dl-cta-row .dl-cta:hover{
  transform:translateY(-1px); filter:brightness(1.06);
  border-color:color-mix(in srgb, var(--stroke,#2b3a55), white 26%);
  box-shadow:0 16px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
.dl-cta-row .dl-cta:active{ transform:translateY(0); filter:brightness(1.02); }
.dl-cta-row .dl-cta:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--brand-1,#6aa7ff) 60%, transparent),
    0 16px 32px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* 窄屏整行 */
@media (max-width:680px){
  .dl-cta-row .dl-cta{ width:100%; justify-content:center; }
}

/* ================= 教程区（Guide） ================= */
.guide{ margin-top:28px }
.guide h2{ margin:0 0 10px; font-size:20px; font-weight:800 }
.guide-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .guide-grid{ grid-template-columns:1fr } }

/* 教程卡片复用 panel 风格，稍加收紧排版 */
.guide-card{ padding:18px; border-radius:16px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2));
}
.guide-card .title{ font-weight:800; font-size:16px; margin:0 0 10px }
.guide-card .desc{ color:var(--muted); font-size:13px; margin:0 0 10px }

/* 步骤列表：数字圆点 */
.steps{
  list-style:none; padding:0; margin:0 0 12px;
  display:grid; gap:8px; counter-reset:step;
}
.steps li{
  counter-increment:step; display:flex; align-items:flex-start; gap:10px;
  line-height:1.5; color:var(--text);
}
.steps li::before{
  content:counter(step);
  width:22px; height:22px; border-radius:999px; flex:0 0 22px;
  display:grid; place-items:center; font-weight:800; font-size:12px;
  color:var(--bg);
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1));
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}

/* 视频按钮行：用 dl-cta（已是中性深色风） */
.guide-actions{ display:flex; flex-wrap:wrap; gap:10px }
.guide-actions .dl-cta .ic{ width:18px; height:18px; margin-right:10px }

/* ========= 教程区视频按钮：深色中性风（与 Windows 一致） ========= */
/* 继承你已有的 .dl-cta 中性按钮，再做一些细节 */
.guide .video-cta{
  /* 用中性深色（不加渐变），与 Windows/macOS/Linux 下载按钮一致 */
  --cta-h: 48px;
  --cta-px: 18px;
  --cta-border: color-mix(in srgb, var(--stroke,#2b3a55), white 12%);
  --cta-bg: linear-gradient(180deg, var(--card,#121b2d), var(--card-2,#0f1728));

  width: 100%;                /* 卡片里占满一行，更稳重 */
  justify-content: center;    /* 居中排版 */
  gap: 10px;
}
.guide .video-cta .ic{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  opacity: .98;
}

/* hover/active 细节与 dl-cta 同步（保持统一） */
.guide .video-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--cta-border), white 18%);
  box-shadow: 0 14px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.guide .video-cta:active{ transform: translateY(0); filter: brightness(1.02); }
.guide .video-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--brand-1,#6aa7ff) 70%, transparent),
    0 14px 26px rgba(0,0,0,.28);
}

/* 小屏本来就 100% 宽，保持居中 */
@media (max-width:680px){
  .guide .video-cta{ width:100%; justify-content:center; }
}

/* ================= 教程区 · 视频按钮（重设计） =================== */
/* 用在 <a class="dl-cta video-cta">…</a> 上；默认跟随 --brand-1 */
.guide .video-cta{
  --accent: var(--brand-1, #6aa7ff);

  position: relative;
  overflow: hidden;
  width: 100%;                 /* 在卡片里占满一行，气质更稳重 */
  justify-content: center;     /* 文字居中，图标用绝对定位 */
  gap: 10px;

  /* 稍微调低高度，和教程卡片密度更协调 */
  --cta-h: 48px;
  --cta-px: 18px;

  /* 为左侧圆形徽章留出空间（文本仍保持居中） */
  padding-left: calc(var(--cta-px) + 14px);
}

/* 左侧“播放”圆形徽章（在按钮内部，位于左边） */
.guide .video-cta::before{
  content: "";
  position: absolute;
  left: 14px;                   /* 圆心位置；与下方 .ic 同步 */
  top: 50%;
  translate: 0 -50%;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, white 25%) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, black 0%), color-mix(in srgb, var(--accent) 8%, black 0%));
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
  opacity: .9;
}

/* 播放图标：定位到圆形徽章中间，文本保持居中 */
.guide .video-cta .ic{
  position: absolute;
  left: 20px;                  /* 让图标落在圆形徽章里 */
  top: 50%;
  translate: 0 -50%;
  width: 12px;                 /* 视频小三角更精致一点 */
  height: 12px;
  margin: 0 !important;
  fill: var(--bg, #0c1321);    /* 反差更强，读性好 */
}

/* 斜向掠过的光带（hover 时出现） */
.guide .video-cta::after{
  content: "";
  position: absolute;
  inset: -20%;                 /* 稍大，避免裁切边缘 */
  background:
    linear-gradient( 75deg,
      transparent 35%,
      color-mix(in srgb, var(--accent) 20%, white 30%) 45%,
      transparent 55%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .guide .video-cta:hover::after{
    animation: videoShine 900ms ease-out forwards;
    opacity: .35;
  }
}
@keyframes videoShine{
  to { transform: translateX(120%); opacity: 0; }
}

/* 交互反馈：边框与阴影略提亮，保持与全局 dl-cta 统一 */
.guide .video-cta:hover{
  border-color: color-mix(in srgb, var(--stroke,#2b3a55), white 28%);
  filter: brightness(1.06);
}
.guide .video-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent),
    0 16px 32px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* 可选：快速切换品牌色（如需） */
.guide .video-cta.is-bili { --accent: #00a1d6; }  /* Bilibili */
.guide .video-cta.is-yt   { --accent: #ff4e45; }  /* YouTube */

/* 超窄屏：保持整行铺满、依然对齐 */
@media (max-width: 680px){
  .guide .video-cta{ width: 100%; }
}

/* ================= 教程区 · 视频按钮（无需改 HTML） =================== */
/* 作用范围：教程区卡片内的 dl-cta，不影响下载区 */
.guide-card .dl-cta{
  --accent: var(--brand-1, #6aa7ff);

  position: relative;
  overflow: hidden;

  /* 更紧凑的高度与内边距 */
  --cta-h: 48px;
  --cta-px: 18px;

  /* 为左侧“播放徽章”留出空间，文本仍然居中 */
  padding-left: calc(var(--cta-px) + 36px);
  justify-content: center;
  gap: 10px;

  /* 底部“进度线”（hover 展开） */
  background-image:
    linear-gradient(180deg, transparent, transparent),                   /* 占位，便于拓展 */
    linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white 25%)); /* 底部线 */
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center calc(100% - 1px);
  background-size: 100% 100%, 0 2px;  /* 第二层宽度为 0，hover 时拉满 */
  transition: background-size .28s ease, border-color .18s ease, filter .18s ease;
}

/* 左侧“播放”圆形徽章（纯 CSS 生成，不用改 HTML / 不用 SVG） */
.guide-card .dl-cta::before{
  content: "▶";
  position: absolute;
  left: 14px; top: 50%;
  translate: 0 -50%;

  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 13px;
  color: var(--bg, #0c1321);     /* 三角形颜色 */

  /* 圆徽章质感：外环微光 + 内部轻渐变 */
  background:
    radial-gradient(closest-side, #ffffff18 0 35%, transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 26%, white 6%),
      color-mix(in srgb, var(--accent) 10%, black 0%));
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20);
  text-indent: 1px; /* 视觉居中微调 */
}

/* 斜向掠过光带（hover 时出现） */
.guide-card .dl-cta::after{
  content: "";
  position: absolute;
  inset: -22%;
  background: linear-gradient(75deg,
    transparent 35%,
    color-mix(in srgb, var(--accent) 20%, white 32%) 48%,
    transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .guide-card .dl-cta:hover::after{
    animation: _gv_shine 900ms ease-out forwards;
    opacity: .35;
  }
}
@keyframes _gv_shine{
  to{ transform: translateX(120%); opacity: 0; }
}

/* 悬停反馈：底部进度线铺满，整体微提亮 */
.guide-card .dl-cta:hover{
  background-size: 100% 100%, 100% 2px;
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--stroke,#2b3a55), white 26%) !important;
}

/* 键盘无障碍焦点 */
.guide-card .dl-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent),
    0 16px 32px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* 可选：不同平台强调色（仍然不改 HTML，只加类就能换色） */
.guide-card .dl-cta.is-bili{ --accent:#00a1d6; } /* Bilibili 蓝青 */
.guide-card .dl-cta.is-yt  { --accent:#ff4e45; } /* YouTube 红 */

@media (max-width:680px){
  .guide-card .dl-cta{ width:100%; }  /* 小屏整行铺满，易点按 */
}

/* ===== Bridge: 让 .button 用回与 .btn 一致的深色按钮样式 ===== */
.panel .cta > a.button,
.panel .cta > button.button,
a.button, button.button, .button{
  -webkit-appearance:none !important; appearance:none !important;
  position:relative !important; isolation:isolate !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;

  height:var(--btn-h,44px) !important;
  padding:0 var(--btn-px,16px) !important;
  border-radius:var(--btn-r,14px) !important;
  border:1px solid var(--btn-border, var(--stroke,#2b3a55)) !important;

  background:linear-gradient(180deg,
              var(--btn-bg-1, var(--card,#121b2d)),
              var(--btn-bg-2, var(--card-2,#0f1728))) !important;
  color:var(--btn-fg, var(--text,#e8eefb)) !important;

  text-decoration:none !important; white-space:nowrap !important; cursor:pointer !important;
  font-weight:var(--btn-weight,800) !important;
  font-size:var(--btn-font,15px) !important;
  letter-spacing:.2px !important;

  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:transform .12s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;

  -webkit-tap-highlight-color: transparent;
}
a.button:link, a.button:visited{ color:var(--btn-fg, var(--text,#e8eefb)) !important; text-decoration:none !important; }

/* 底部彩线动画（保留） */
a.button::after, button.button::after, .button::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--btn-g1,#53e0d2), var(--btn-g2,#6aa7ff), var(--btn-g3,#a78bfa));
  opacity:0; transform:scaleX(.4); transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
}
a.button:hover::after, a.button:focus-visible::after,
button.button:hover::after, button.button:focus-visible::after,
.button:hover::after, .button:focus-visible::after{
  opacity:.95; transform:scaleX(1);
}

/* 交互反馈 */
a.button:hover, button.button:hover, .button:hover{
  filter:brightness(1.06) !important;
  border-color:color-mix(in srgb, var(--btn-border,#2b3a55), white 28%) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
a.button:active, button.button:active, .button:active{
  transform:translateY(1px) !important; filter:brightness(1.03) !important;
}
a.button:focus-visible, button.button:focus-visible, .button:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-g2,#6aa7ff) 26%, transparent),
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-color:var(--btn-g2,#6aa7ff) !important;
}

/* 按钮里的图标（可选） */
a.button .ic, button.button .ic, .button .ic{
  width:18px; height:18px; flex:0 0 18px;
  fill:currentColor;
  transform:translateY(-0.5px);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; shape-rendering:geometricPrecision;
}

/* 产品区 CTA 的紧凑尺寸（保留你原本的意图，给权重+important） */
.panel .cta > .button{ height:36px !important; padding:0 14px !important; }

/* 订单查询里的“确定”按钮也套用同样视觉 */
.code-open > .button{ height:36px !important; padding:0 14px !important; border-radius:12px !important; }

/* ===== Bridge: 让 .button 用回深色按钮外观（不改 HTML/JS） ===== */
.panel .cta > a.button,
.panel .cta > button.button,
a.button, button.button, .button{
  -webkit-appearance:none !important; appearance:none !important;
  position:relative !important; isolation:isolate !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;

  height:var(--btn-h,44px) !important;
  padding:0 var(--btn-px,16px) !important;
  border-radius:var(--btn-r,14px) !important;
  border:1px solid var(--btn-border, var(--stroke,#2b3a55)) !important;

  background:linear-gradient(180deg,
              var(--btn-bg-1, var(--card,#121b2d)),
              var(--btn-bg-2, var(--card-2,#0f1728))) !important;
  color:var(--btn-fg, var(--text,#e8eefb)) !important;

  text-decoration:none !important; white-space:nowrap !important; cursor:pointer !important;
  font-weight:var(--btn-weight,800) !important;
  font-size:var(--btn-font,15px) !important;
  letter-spacing:.2px !important;

  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:transform .12s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  -webkit-tap-highlight-color:transparent;
}
a.button:link, a.button:visited{
  color:var(--btn-fg, var(--text,#e8eefb)) !important;
  text-decoration:none !important;
}

/* 底部彩线动画（保留） */
a.button::after, button.button::after, .button::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--btn-g1,#53e0d2), var(--btn-g2,#6aa7ff), var(--btn-g3,#a78bfa));
  opacity:0; transform:scaleX(.4); transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
}
a.button:hover::after, a.button:focus-visible::after,
button.button:hover::after, button.button:focus-visible::after,
.button:hover::after, .button:focus-visible::after{
  opacity:.95; transform:scaleX(1);
}

/* 交互反馈 */
a.button:hover, button.button:hover, .button:hover{
  filter:brightness(1.06) !important;
  border-color:color-mix(in srgb, var(--btn-border,#2b3a55), white 28%) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
a.button:active, button.button:active, .button:active{
  transform:translateY(1px) !important; filter:brightness(1.03) !important;
}
a.button:focus-visible, button.button:focus-visible, .button:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-g2,#6aa7ff) 26%, transparent),
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-color:var(--btn-g2,#6aa7ff) !important;
}

/* 产品卡片里的 CTA 紧凑尺寸（保持你的原设定） */
.panel .cta > .button{ height:36px !important; padding:0 14px !important; border-radius:12px !important; }

/* 订单查询里的“确定”按钮也统一 */
.code-open > .button{ height:36px !important; padding:0 14px !important; border-radius:12px !important; }

/* ===== 订单查询输入框统一样式（#codeInput） ===== */
.panel .code-open{ display:flex; align-items:center; gap:10px; margin-top:10px; }

.panel .code-open input[type="text"],
.panel .code-open input[type="search"],
#codeInput{
  -webkit-appearance:none !important; appearance:none !important;
  height:36px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  border:1px solid var(--stroke,#2b3a55) !important;
  background:linear-gradient(180deg, var(--card,#121b2d), var(--card-2,#0f1728)) !important;
  color:var(--text,#e8eefb) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size:14px !important; letter-spacing:.2px !important;
  outline:none !important; caret-color: var(--brand-1,#6aa7ff) !important;
  min-width:220px; flex:1 1 280px;  /* 自适应但不至于太窄 */
}
.panel .code-open input::placeholder{
  color:color-mix(in srgb, var(--muted,#98a2b3), white 4%) !important;
  opacity:.95 !important;
}
.panel .code-open input:focus{
  border-color:color-mix(in srgb, var(--stroke,#2b3a55), white 26%) !important;
  box-shadow:
    0 0 0 3px #fff3,
    0 0 0 6px color-mix(in srgb, var(--brand-1,#6aa7ff) 60%, transparent),
    0 14px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}