/* 询价单 / 询价记录
   ---------------------------------------------------------------
   1. 「询价记录 / 询价详情」整页显示（此前是居中弹层，只占半屏）。
   2. 「已选 N 款 / 查看询价单」浮条出现时，右下角「回到顶部」抬到浮条上方。
   3. 询价单商品行重排：图片放大、价格行与单位控件对齐、数量与小计同一条结算带。
   4. 计量单位只出现一次：多单位时是价格行右端的小下拉，单单位时只是一行字。
   5. 预估金额栏改成与底部导航同一套形态语言（同缩进、同圆角、留出呼吸）。

   ⚠️ 为什么选择器都写成 `.commerce-dialog.page-inquiry`（而不是 `.page-inquiry`）：
   本文件虽然最后加载，但 st-reference-v6 / st-density-v5 / st-layout-v4 里遗留了
   一整套「上一版卡片」的规则，它们的选择器更深（如
   `.page-inquiry .inquiry-copy p{white-space:nowrap}`、`.page-inquiry .inquiry-footer
   .inquiry-summary strong{font-size:25px;color:#ff6600}`），同权重下不是「后加载的赢」。
   这里统一多挂一个 `.commerce-dialog` + 一层后代，稳定压过它们，不必去翻旧文件。
   改坏了的现象很隐蔽：名称/规格会被锁成单行截断、金额变回橙色、说明行被 display:none ——
   所以下面几乎每条规则都要保持这个前缀。 */

/* 底部悬浮件的共用尺寸。放在 :root 是因为「回到顶部」按钮在弹层之外，
   用 body:has(...) 抬高它时取不到弹层作用域里的变量。
   ⚠️ --inq-nav-h / --inq-nav-inset 必须与 st-bottom-navigation.css 里
      nav.st-bottom-navigation 移动端规则（height:60px / bottom:10px）保持一致。 */
:root{
  --inq-bar-h:80px;      /* 预估金额栏自身高度（仅作兜底，见 --inq-bar-actual-h） */
  --inq-bar-gap:9px;     /* 金额栏与导航之间的呼吸 */
  --inq-nav-h:60px;      /* 底部导航高度 */
  --inq-nav-inset:10px;  /* 底部导航距屏幕底 */
  --inq-bar-bottom:calc(var(--inq-nav-inset) + env(safe-area-inset-bottom) + var(--inq-nav-h) + var(--inq-bar-gap));
  /* 金额栏的真实高度（栏顶距视口底 = --inq-bar-bottom + --inq-bar-actual-h）。
     窄屏栏高「跟内容走」：中文一行 ≈80px、泰/老语两行 ≈137–150px（实测 360/390 宽）。
     这里必须有定义 —— st-commerce-v2.js 的 syncInquiryBarHeight() 只是把实测值
     写进 documentElement 的行内样式**覆盖**它；若这里不写，JS 没跑成时
     `calc(… + var(--inq-bar-actual-h) + …)` 会因为「未定义的自定义属性」整条失效
     （不是退回这个兜底，而是整条 bottom/padding 声明作废），按钮与留白一起失守。 */
  --inq-bar-actual-h:var(--inq-bar-h);
}

/* ── 1. 询价记录 / 询价详情：整页 ───────────────────────────── */
.commerce-dialog.page-history{background:#fff;color:#0e1a3a}
.commerce-dialog.page-history::backdrop{background:#fff;backdrop-filter:none}
.commerce-dialog.page-history .dialog-head{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:56px;
  padding:6px 14px;
  background:#fff;
  border-bottom:1px solid #1423490c;
}
.commerce-dialog.page-history .dialog-head p{text-align:left;font-size:17px;font-weight:750;letter-spacing:-.2px}
.commerce-dialog.page-history .dialog-body{
  width:min(720px,100%);
  margin:0 auto;
  padding:18px 20px calc(30px + env(safe-area-inset-bottom));
}
.commerce-dialog.page-history .history-heading{padding:6px 0 20px}
/* 询价详情顶部那张状态卡（`<div class="order-status">`）。
   🔴 左右内边距不能是 0（2026-09-26 修）。这里原先写的是 `padding:4px 0 18px`，
   像是从上面那条 .history-heading 的「出血式」节奏抄过来的；但 .order-status 是
   **带底色 + 圆角**的卡片（background:#e4e9f3 / border-radius:18px 来自
   st-refinement-v2.css），padding 一旦归零，状态徽标和大标题就贴在卡片左右边缘上 ——
   手机上一眼就是「边距不对」（用户 2026-09-26 截图圈的就是这里）。
   而且这条选择器特异度是 0,3,0，比基础规则（0,1,0）和它的移动端媒体查询（0,1,0）
   都深 ⇒ 写 0 等于把两处 padding 一起作废，只改基础规则救不回来。
   所以这里显式对齐全站数值，不做任何收缩：
     · 桌面            26px      ← 同 st-refinement-v2.css 的 .order-status
     · ≤720px  24px 20px  ← 同该文件的移动端值
   ⚠️ 因为特异度更高，移动端那份必须在这里再写一遍（媒体查询不改特异度）。 */
.commerce-dialog.page-history .order-status{padding:26px}
@media(max-width:720px){
  .commerce-dialog.page-history .order-status{padding:24px 20px}
}
.commerce-dialog.page-history .empty-inquiry{margin:26px 0}

/* ── 2. 浮条出现时把「回到顶部」抬起来 ───────────────────────── */
@media(max-width:720px){
  body:has(.catalog-inquiry-dock:not([hidden])) .st-back-to-top[data-context="document"]{
    bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 70px);
  }
  /* 询价单页底部有金额栏，同样要给它让位，别压住「填写联系与配送」 */
  body:has(.commerce-dialog.page-inquiry .inquiry-footer) .st-back-to-top[data-context="document"]{
    bottom:calc(var(--inq-bar-bottom) + var(--inq-bar-actual-h) + 14px);
  }
}

/* ── 3. 询价单商品行 ─────────────────────────────────────────────
   分区：左图右文 + 下方一整条出血结算带。
   文字区锁死 112px（与图等高），内部四块的高度也全部写死：
       名称 2 行(40) + 规格 2 行(3+27) + 价格行(2+24) + 换算行(2+14) = 112
   短名称、短规格也照样占满两行 —— 这是「单价行 / 换算行 / 结算带」能在
   所有卡片里落在同一条水平线上的原因（以前靠 margin-top:auto 把价格顶到底，
   多单位那张被下拉撑高 7.8px，卡片之间就参差了）。 */
.commerce-dialog.page-inquiry .inquiry-list{display:grid;gap:12px;padding:0 12px}
/* 名称恒定占两行：短名字也把第二行留着，标题区高度就不会随名字长短忽高忽低 */
/* 规格同样占两行：长规格本来就要换行，短的也留着，保证下面两块位置不动 */
/* 价格行：单价 —— 点线 —— 单位控件。
   中间那条虚线把两端连成一句话（「₭205,000 ／ 盒」），
   而不是「一个价格」加「一个孤零零的下拉」。
   四列全部 align-items:center —— 下拉 24px 高、文字 12px 高，中线对齐后
   单价数字不会再被下拉顶上去（以前多单位那行整体高 7.8px）。 */
/* 换算行常驻占位：既解释单价为什么是这个数，也把所有卡片的价格行压在同一水平线上 */
.commerce-dialog.page-inquiry .remove-line{
  position:absolute;
  top:6px;
  right:6px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#b0b7c6;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.commerce-dialog.page-inquiry .remove-line svg{width:15px;height:15px}
.commerce-dialog.page-inquiry .remove-line:hover{background:#fdf3f2;color:#d0453a}

/* 结算带：跨满整卡宽度的出血条，把「数量」和「小计」收进同一个容器里。
   两者用 align-items:center 做中线对齐 —— 过去是 flex-end（底部对齐），
   数量框比小计高 14px，中心差 6.4px，看起来像两个不相干的东西。 */
/* 焦点画在步进器外框上，而不是 34px 的小输入框里 ——
   全局的 input:focus-visible 内嵌环在这里仍显局促，直接接管 */
.commerce-dialog .stepper input:focus-visible{outline:none}
.commerce-dialog .stepper:has(input:focus-visible){
  border-color:#f4a45c;
  box-shadow:0 0 0 3px #f4770026;
}

/* ── 4. 计量单位：价格行右端的小控件 ─────────────────────────── */
/* 🔴 2026-09-22 修复「可选单位下拉栏显示有问题」（用户截图红框）：
   这个 ::after 是给**原生 select** 画的箭头（默认箭头已被上面的 appearance:none 去掉）。
   但 st-select-v1.js 会把 select 增强成一个自带 .st-select-chevron 的按钮触发器 ——
   两者同时存在就叠成「双箭头 + 怪异符号」，正是用户圈出的那个东西。
   加 :not(:has(.st-select-native)) 后：增强成功时只留触发器自己的箭头；
   万一增强没跑（脚本加载失败等），原生箭头仍在，不会退化成「没有箭头」。 */

/* ── 5. 询价记录卡片：整卡开详情，缩略图各自开商品卡片 ─────────── */
/* 🔴 .page-workbench 必须一并纳入（2026-09-21 修复）：
   询价单总览用的是同一套 .history-card / .history-open 标记，但它挂在 page-workbench 上。
   原先只有 .page-history 拿到了 `position:relative`，而 .history-open 的 `inset:0`
   却是**不带页面作用域**写的 —— 于是总览页的 .history-card 不是定位祖先，
   5 张卡片的透明覆盖按钮全部相对滚动容器铺满，层层叠在一起，**最后一张盖在最上面**，
   点任何一行都跳到最后那张单（INQ20260907RRADO9）。
   教训：一个「作用域的定位父级」配一个「无作用域的绝对覆盖子级」＝ 定时炸弹。
   凡是共用 .history-* 标记的页面，必须一起列进选择器。 */
.commerce-dialog.page-history .history-card,
.commerce-dialog.page-workbench .history-card{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  margin:0 0 12px;
  padding:16px 18px;
  border:1px solid #eef1f6;
  border-radius:16px;
  background:#fff;
  color:#0e1a3a;
  box-shadow:inset 0 1px 0 #fff,0 6px 16px #1423490d;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.commerce-dialog.page-history .history-card:hover,
.commerce-dialog.page-workbench .history-card:hover{border-color:#dde4f0;box-shadow:inset 0 1px 0 #fff,0 10px 22px #14234914}
/* 整卡覆盖一层透明按钮收「打开询价单」，缩略图浮在它上面收「打开商品卡片」 */
.commerce-dialog.page-history .history-open,
.commerce-dialog.page-workbench .history-open{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.commerce-dialog.page-history .history-open:focus-visible,
.commerce-dialog.page-workbench .history-open:focus-visible{outline:2px solid #123dab;outline-offset:3px}
.commerce-dialog.page-history .history-thumbnails,
.commerce-dialog.page-workbench .history-thumbnails{display:flex;gap:9px;margin:14px 0}
.commerce-dialog.page-history .history-thumb,
.commerce-dialog.page-workbench .history-thumb{
  position:relative;
  z-index:2;
  width:72px;
  height:72px;
  margin:0;
  padding:5px;
  border:1px solid #eceff4;
  border-radius:12px;
  background:linear-gradient(150deg,#fbfbfa,#f2f5fa);
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease;
}
.commerce-dialog.page-history .history-thumb:hover{border-color:#d5ddec;transform:translateY(-2px)}
.commerce-dialog.page-history .history-thumb[disabled]{cursor:default;opacity:.55;transform:none}
.commerce-dialog.page-history .history-thumb img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.commerce-dialog.page-history .history-card-bottom strong{color:#0b2d91}

/* ── 6. 询价详情的商品行：同样可以点开商品卡片 ────────────────── */
.commerce-dialog.page-history .order-line{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid #081f8012}
.commerce-dialog.page-history .order-art{
  display:block;
  width:78px;
  height:96px;
  margin:0;
  padding:5px;
  border:1px solid #eceff4;
  border-radius:12px;
  background:linear-gradient(150deg,#fbfbfa,#f2f5fa);
  overflow:hidden;
  cursor:default;
}
.commerce-dialog.page-history .order-art[data-detail]{cursor:pointer}
.commerce-dialog.page-history .order-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.commerce-dialog.page-history .order-line h3{margin:0 0 6px;font-size:15.5px;line-height:1.4}
.commerce-dialog.page-history .order-line .line-name{
  display:inline;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.commerce-dialog.page-history .order-line .line-name:hover{color:#0b2d91}

@media(max-width:720px){
  .commerce-dialog.page-history .order-line{grid-template-columns:68px minmax(0,1fr);gap:12px}
  .commerce-dialog.page-history .order-art{width:68px;height:86px}
}

/* ── 7. 预估金额栏 ───────────────────────────────────────────────
   以前它是通栏直角的板子（left/right:0，无圆角），下面压着一个内缩 12px、
   圆角 21px 的导航胶囊，中间还夹着 4px 缝 —— 两种形态语言打架，
   所以看起来「悬浮得不自然」。现在两者同一套语言：同样内缩 12px、
   同样圆角、中间留 --inq-bar-gap 的呼吸。

   ⚠️ 2026-09-24 改「一栏两列」→ flex 自适应换行（用户上报泰语/老挝语下
   金额被按钮压住）。原写法 `display:grid;grid-template-columns:minmax(0,1fr) auto`
   + `.inquiry-actions .button{white-space:nowrap}`：
   右列 auto = 按钮的 max-content，泰语 CTA「กรอกข้อมูลติดต่อและจัดส่ง」要 196px、
   老挝语要 264px（实测），390px 手机上金额列被挤到只剩 60px 宽；
   更糟的是金额块里 `align-items:flex-start` 让 <strong>/<small> 按 max-content 定宽
   （金额 126 / 说明 315），**越出 60px 的列**，后绘制的按钮正好盖在上面 ——
   这就是截图里「₭2,604,0」被切断的原因。实测重叠：cta∩金额 53px、cta∩说明 242px。

   现在：flex + wrap。放得下就还是「金额在左、按钮在右」（桌面原样）；
   放不下（窄屏 + 长译文）按钮整块换到第二行，金额列拿满整行宽度。
   各处放宽阈值靠 flex-basis，不写媒体查询 —— 阈值由译文长度自己决定，
   换语种不用改 CSS。 */
.commerce-dialog.page-inquiry .inquiry-footer{
  position:static;
  z-index:4;
  left:auto;
  right:auto;
  bottom:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 12px;
  min-height:0;
  margin:14px 12px 0;
  padding:13px 15px;
  border:1px solid #e9edf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 2px #0b265406,0 14px 30px -22px #0b26544d;
  backdrop-filter:none;
}
/* ⚠️ align-items / gap / justify-content 必须显式写：
   st-density-v5.css 给 .inquiry-summary 留了 align-items:end + gap:20px，
   只覆盖 display 的话三行会被拉开 20px 并右对齐，金额栏整体被撑到 120px。
   ✱ align-items 用 stretch（不是 flex-start）：flex 列容器里 flex-start 会让子元素
     按 max-content 定宽，<strong>（金额）与 <small>（说明）都是 nowrap，
     于是它们会溢出列宽、被右侧按钮盖住 —— 上面那段 bug 的另一半根因。
     stretch 让它们等于列宽，overflow:hidden + text-overflow:ellipsis 才真正生效。 */
.commerce-dialog.page-inquiry .inquiry-footer .inquiry-summary{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  flex:1 1 168px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.commerce-dialog.page-inquiry .inquiry-footer .inquiry-summary>span{font-size:10.5px;line-height:14px;color:#8b93a6;letter-spacing:.03em}
.commerce-dialog.page-inquiry .inquiry-footer .inquiry-summary strong{
  display:block;
  margin:1px 0 0;
  font-size:23px;
  line-height:27px;
  font-weight:800;
  letter-spacing:-.7px;
  color:#0e1a3a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  font-variant-numeric:tabular-nums;
}
/* 说明行以前是 nowrap：泰/老语这条能到 315px（实测），窄屏必然溢出。
   现在允许折行，最多 2 行（钳住高度，金额栏才不会被一段长文案顶高）。
   泰语/老挝语没有词间空格，浏览器按 ICU 词典断行；再加 overflow-wrap:anywhere
   兜住「连词典也切不开」的长串，保证任何语种都不会顶破这一栏。 */
.commerce-dialog.page-inquiry .inquiry-footer .inquiry-summary small{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  margin:2px 0 0;
  font-size:9.5px;
  line-height:12px;
  color:#a6adbd;
  white-space:normal;
  overflow-wrap:anywhere;
  overflow:hidden;
}
/* 动作区参与伸缩：放得下时右对齐在金额右边（原样），放不下时整块换到第二行。
   justify-content:flex-end 保证按钮始终贴右边界，不被 grow 出来的空白顶歪。 */
/* ⛔ 这里原来是 white-space:nowrap —— 泰语「กรอกข้อมูลติดต่อและจัดส่ง」196px、
   老挝语「ຕື່ມຂໍ້ມູນໃສ່ໃນການຕິດຕໍ່ແລະການຈັດສົ່ງ」264px，nowrap 就把整栏压垮。
   改成可折行 + flex:0 1 auto（跟着内容走，放不下才缩，不主动撑宽）。
   line-height 故意不写：交给 st-locale-v2.css 的语种层（lo/th 是 1.65），
   泰文/老挝文的上下标音符号需要更高的行距，写死会压掉符号。 */

@media(max-width:720px){
  /* 金额栏高度改为「跟内容走」：本栏现在是 flex 换行布局，中文一行 (≈80px)、
     泰/老语两行 (≈137–150px)，写死 min-height 会把这个差异抹平成一条空荡荡的板子。
     --inq-bar-h 从此只当兜底（JS 没跑成时的最坏高度），真实值走 --inq-bar-actual-h。 */
  :root{--inq-bar-h:156px}
  /* 浮动金额栏：与导航同缩进、同圆角，底边与导航顶边留 --inq-bar-gap */
  .commerce-dialog.page-inquiry .inquiry-footer{
    position:fixed;
    left:12px;
    right:12px;
    bottom:var(--inq-bar-bottom);
    min-height:0;
    margin:0;
    padding:11px 14px;
    border-radius:21px;
    box-shadow:0 16px 34px -18px #0b265445,0 2px 6px #0b26540a;
  }
  /* 正文底部留白 = 导航占位 + 金额栏 + 呼吸。用同一组变量算，
     免得按钮被浮栏盖住（以前是写死 136px，与浮栏高度各算各的）。 */
  .commerce-dialog.page-inquiry>.dialog-body{
    padding-bottom:calc(var(--inq-bar-bottom) + var(--inq-bar-actual-h) + 18px);
  }
}

/* ── 8. 列表下方的承诺卡 / 继续选购：与列表同一条竖线 ─────────── */
/* 币种面板原来吃的是 16px 内边距，比列表的 12px 多出 4px（桌面实测 x=280 vs 292），
   统一到 12px 的竖向节奏上 */
.commerce-dialog.page-inquiry .quote-meta{margin-left:12px;margin-right:12px;padding-left:0;padding-right:0}
.commerce-dialog.page-inquiry .inquiry-promise{
  margin:14px 12px 6px;
  padding:14px 15px;
  border-radius:16px;
  background:linear-gradient(140deg,#f7f9fd,#f2f6fc);
  color:#122040;
}
.commerce-dialog.page-inquiry .inquiry-promise>span{color:#98a4bd}
.commerce-dialog.page-inquiry .inquiry-promise strong{font-size:13.5px;font-weight:750}
.commerce-dialog.page-inquiry .inquiry-promise p{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:#818aa0}
.commerce-dialog.page-inquiry .inquiry-continue{margin:0 12px 4px;font-size:12px}

/* 小屏（≤360px）再收一档，别让价格行被挤到换行 */

/* ═════════════════════════════════════════════════════════════════════════
   9. 询价单「后台提交」横幅（2026-09-26）
   -------------------------------------------------------------------------
   提交不再阻塞按钮：点提交 → 立刻收起表单 → 进度与结果只落在这条横幅上，
   用户可以接着浏览；完成后点横幅上的按钮才打开结果页。
   渲染在 st-commerce-v2.js 的 renderSubmitBanner()，宿主是 index.html 里
   静态声明的 `<div id="st-submit-banner">`（**必须存在**，否则函数静默不动）。

   三种状态靠 `data-state` 区分（pending / done / error），配色统一走 `--tone`：
   这样「转圈 / 对勾 / 感叹号」和边框、文字色只需改一处。

   ⚠️ 它是 body 里的 fixed 元素，而站内弹层一律 `showModal()`（进 top layer）
      ⇒ **任何模态弹层打开时，横幅会被压在下层**。这是刻意接受的取舍：
      提交那一刻我们就已经 closeDialog()，用户回到普通页面即可看到横幅、
      也能正常继续浏览。要让它在弹层之上，得把它也做成 dialog（引入新的层级管理）。
   ═════════════════════════════════════════════════════════════════════════ */
.st-submit-banner{
  --tone:#001c81;
  position:fixed;
  z-index:60;
  top:max(14px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(520px,calc(100vw - 24px));
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--tone) 20%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,#fff 93%,var(--tone));
  box-shadow:0 1px 2px #0b26540a,0 18px 40px -18px #0b26544d;
  animation:st-submit-in .22s cubic-bezier(.22,.61,.36,1);
}
/* ⚠️ 必须显式写 [hidden]：`display:flex` 是作者样式，会盖掉 UA 的
   `[hidden]{display:none}`（同特异度、作者优先）⇒ 少了这条，横幅就关不掉。 */
.st-submit-banner[hidden]{display:none}
.st-submit-banner[data-state="done"]{--tone:#176b3a}
.st-submit-banner[data-state="error"]{--tone:#c2410c}

.st-submit-mark{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
/* 提交中：转圈。做成「环」而不是实心点 —— 和「进度」的语义对得上 */
.st-submit-banner[data-state="pending"] .st-submit-mark{
  border:2px solid color-mix(in srgb,var(--tone) 22%,transparent);
  border-top-color:var(--tone);
  animation:st-submit-spin .8s linear infinite;
}
.st-submit-banner[data-state="done"] .st-submit-mark{background:var(--tone)}
.st-submit-banner[data-state="done"] .st-submit-mark::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.st-submit-banner[data-state="error"] .st-submit-mark{background:var(--tone);color:#fff}
.st-submit-banner[data-state="error"] .st-submit-mark::after{content:"!";font-size:13px;font-weight:800;line-height:1}

.st-submit-copy{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.st-submit-copy>strong{font-size:12.5px;font-weight:650;line-height:1.4;color:var(--ink,#1c1c1c)}
.st-submit-copy>small{font-size:11.5px;line-height:1.5;color:var(--muted,#6b7280);overflow-wrap:anywhere}

.st-submit-action{
  flex:none;min-height:32px;padding:0 14px;border:0;border-radius:999px;
  background:var(--tone);color:#fff;
  font:inherit;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer;
}
.st-submit-action:focus-visible{outline:2px solid var(--tone);outline-offset:2px}
.st-submit-dismiss{
  flex:none;width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:var(--muted,#6b7280);
  font:inherit;font-size:17px;line-height:1;cursor:pointer;
}
.st-submit-dismiss:hover{background:color-mix(in srgb,var(--ink,#1c1c1c) 7%,transparent)}
.st-submit-dismiss:focus-visible{outline:2px solid var(--tone);outline-offset:1px}

@keyframes st-submit-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes st-submit-spin{to{transform:rotate(360deg)}}

@media(prefers-color-scheme:dark){
  /* 基础色提亮：深色底上 #001c81 的进度环几乎看不见 */
  .st-submit-banner{--tone:#7fa0ff;background:color-mix(in srgb,#171a21 92%,var(--tone));color:#e8eaee}
  .st-submit-copy>strong{color:#f2f3f5}
  .st-submit-copy>small{color:#a8adb8}
  .st-submit-banner[data-state="done"]{--tone:#5ddc93}
  .st-submit-banner[data-state="error"]{--tone:#f59e6b}
  /* 绿 / 橙底上用深字，蓝底（pending）仍用白字 */
  .st-submit-banner[data-state="done"] .st-submit-action,
  .st-submit-banner[data-state="error"] .st-submit-action{color:#10131a}
  .st-submit-dismiss{color:#a8adb8}
}
/* 系统开了「减弱动态效果」：别转、别滑 */
@media(prefers-reduced-motion:reduce){
  .st-submit-banner{animation:none}
  .st-submit-banner[data-state="pending"] .st-submit-mark{animation:none}
}
@media(max-width:720px){
  .st-submit-banner{gap:8px;padding:9px 10px;border-radius:13px}
}