.merchant-tabs {
    display: flex;
    gap: 8px;
    margin: 14px 0
}

.merchant-tabs button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    cursor: pointer
}

.merchant-tabs button.on {
    border-color: #e7272d;
    background: #e7272d;
    color: #fff
}

.merchant-offers {
    display: grid;
    gap: 10px
}

.merchant-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 120px 250px;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px
}

.merchant-offer h3 {
    margin: 0 0 5px;
    font-size: 17px
}

.merchant-offer p {
    margin: 0;
    color: #777
}

.merchant-offer .price {
    color: #e7272d;
    font-size: 18px;
    font-weight: 900
}

.merchant-offer .status {
    font-weight: 800
}

.merchant-offer .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 0
}

.merchant-offer button {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer
}

.merchant-offer button.primary {
    border-color: #e7272d;
    color: #e7272d
}

/* ---------- 商家「评价管理」页（/supplier/reviews，supplier-workbench.js 的 renderReviews） ----------
   故意不复用 .merchant-offer：那是 4 列网格（1fr 110px 120px 250px），为「标题/价格/状态/按钮」
   这种短字段设计；评价是长文本 + 图片 + 商家回复，挤进窄列会变成一条竖长的字。
   这里改成两列：正文自适应 + 右侧固定操作列。 */
.merchant-reviews {
    display: grid;
    gap: 10px
}

.merchant-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: start;
    gap: 16px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px
}

.merchant-review .rv-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap
}

.merchant-review .rv-head b {
    font-size: 16px
}

.merchant-review .rv-score {
    color: #f5a623;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px
}

.merchant-review .rv-meta {
    margin: 5px 0 0;
    color: #888;
    font-size: 13px
}

.merchant-review .rv-text {
    margin: 9px 0 0;
    color: #333;
    line-height: 1.75;
    /* 评价是买家原文（可能很长且无空格）：允许任意处换行，避免撑破卡片 */
    overflow-wrap: anywhere
}

.merchant-review .rv-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.merchant-review .rv-imgs img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 6px;
    display: block
}

.merchant-review .rv-scores {
    margin: 9px 0 0;
    color: #777;
    font-size: 13px
}

.merchant-review .rv-reply {
    margin-top: 11px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 7px
}

.merchant-review .rv-reply b {
    display: block;
    font-size: 13px;
    color: #c51b21
}

.merchant-review .rv-reply p {
    margin: 5px 0 0;
    color: #444;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.merchant-review .rv-reply em {
    display: block;
    margin-top: 5px;
    color: #999;
    font-size: 12px;
    font-style: normal
}

.merchant-review .rv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch
}

/* 操作列必须自带完整按钮外观：只写 text-align 是不够的 ——
   ① 不能靠 .wb-op-link（它的样式全挂在 `.wb-ops a.wb-op-link` 下，而这里没有 .wb-ops 祖先）→ 会渲染成裸链接；
   ② 裸 button 会吃到 commerce.css 的 `body [type=button]{min-height:42px;display:inline-flex}` → 42px 高的默认灰按钮，
      与 /supplier/offers 的 .merchant-offer button（padding 7px 10px）观感不一致。 */
.merchant-review .rv-actions button {
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer
}

.merchant-review .rv-actions button.primary {
    border-color: #e7272d;
    color: #e7272d;
    font-weight: 700
}

.merchant-review .rv-actions a {
    display: block;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #555;
    font-size: 13px;
    text-align: center;
    text-decoration: none
}

.merchant-review .rv-actions a:hover {
    border-color: #e7272d;
    color: #e7272d
}

/* ---------- 回复弹窗内部（都在 GRUI.dialog 正文里，所以统一用 .gr-dialog 限定作用域） ----------
   这几个类名（.rv-quote/.rv-editor/.rv-msg/.rv-actions-row）本身很通用，不加限定会成为全局类：
   商品页 rental-booking.css 与买家评价表单 merchant-commerce.css 里都已经有别的 `.rv-*`。 */
/* 引用原评价，让商家一边看原文一边写回复 */
.gr-dialog .rv-quote {
    margin: 0 0 14px;
    padding: 11px 13px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 7px
}

.gr-dialog .rv-quote b {
    display: block;
    font-size: 13px;
    color: #666
}

.gr-dialog .rv-quote p {
    margin: 5px 0 0;
    color: #333;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.gr-dialog .rv-editor {
    display: block
}

.gr-dialog .rv-editor span {
    display: block;
    margin-bottom: 6px;
    color: #555;
    font-size: 14px
}

.gr-dialog .rv-editor textarea {
    width: 100%;
    min-height: 108px;
    box-sizing: border-box;
    /* ⚠️ 必须 !important：commerce.css 是全站**后加载**的（writeRobotHTML 注入在 </head> 末尾），
       它那条 `textarea{border:1px solid #ccc!important;border-radius:4px!important;padding:9px 12px!important}`
       会静默吃掉不带 !important 的本地规则（本文件后面还有同类注释）。 */
    padding: 10px 12px !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 7px !important;
    background: #fff !important;
    font: inherit;
    resize: vertical
}

/* 错误提示与按钮行：不能复用 .merchant-form-grid .form-error / #offerForm footer
   （那两条都绑在商品表单的 DOM 结构上，弹窗正文不在其中） */
.gr-dialog .rv-msg {
    min-height: 18px;
    margin-top: 8px;
    color: #b6201d;
    font-size: 13px
}

.gr-dialog .rv-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px
}

/* ---------- 租赁套餐弹窗（supplier-workbench.js 的 openPackages） ----------
   正文已有 .gr-dialog-body 的 20px 22px 内边距，这里不再自己加左右 padding；
   表单那层要显式去掉 .merchant-form-grid 自带的 22px 24px，否则与弹窗内边距叠加、左边距过大。 */
.gr-dialog-body .pkg-form {
    padding: 0;
    max-height: none
}

.pkg-lead {
    margin: 0 0 14px;
    color: #667085;
    line-height: 1.7
}

.pkg-list {
    display: grid;
    gap: 10px
}

.pkg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 136px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eef0f3;
    border-radius: 8px
}

.pkg-row b {
    font-size: 15px
}

.pkg-key {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f2f4f7;
    color: #667085;
    font-size: 12px
}

.pkg-main p {
    margin: 5px 0 0;
    color: #8b95a5;
    font-size: 13px
}

.pkg-state {
    color: #98a2b3;
    font-size: 13px;
    text-align: center
}

.pkg-state.on {
    color: #21824b;
    font-weight: 700
}

.pkg-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end
}

/* 套餐弹窗里的按钮自己给外观：不像 .merchant-offer 里有现成的 button 规则，
   裸 button 会吃到 commerce.css 的 `body [type=button]{min-height:42px}` */
/* ⚠️ 必须带 .gr-dialog 前缀：commerce.css 是全站**后加载**的，它的 `body [type=button]{min-height:42px}`
   与这里的 (0,1,1) 同权重、后写者赢 → 不带前缀时 min-height:0 会被吃掉，按钮又变回 42px 灰块。
   与 .merchant-review .rv-actions button（多了 .merchant-review 一层）口径一致。 */
.gr-dialog .pkg-actions button,
.gr-dialog .pkg-foot button,
.gr-dialog .pkg-form-foot button {
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer
}

.gr-dialog .pkg-actions button:hover,
.gr-dialog .pkg-foot button:hover,
.gr-dialog .pkg-form-foot button:hover {
    border-color: #e7272d;
    color: #e7272d
}

.gr-dialog .pkg-foot button.primary,
.gr-dialog .pkg-form-foot button.primary {
    border-color: #e7272d;
    color: #e7272d;
    font-weight: 700
}

.pkg-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3
}

.pkg-foot #pkgListMessage {
    margin-right: auto;
    color: #b6201d;
    font-size: 13px
}

.pkg-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end
}

.pkg-form-foot .field-hint {
    flex: 1 1 100%;
    margin: 0
}

.pkg-form-foot #pkgFormMessage {
    margin-right: auto;
    color: #b6201d;
    font-size: 13px
}

/* 商品弹窗的壳已交给全站通用组件（ui.css 的 .gr-dialog + GRUI.dialog）：
   原来的 .merchant-dialog 骨架（宽度 / backdrop / 标题条 / 关闭按钮）已删除，
   表单 DOM 仍留在模板里，由 supplier-workbench.js 搬进弹窗正文本。这里只保留表单内部布局。 */

#offerForm footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 24px;
    border-top: 1px solid #eee
}

/* 表单搬进弹窗后（.gr-dialog-body 自带 20px 22px 内边距 + overflow-y:auto），内边距与滚动都要
   交回正文：grid 自带的 22px 24px 会与弹窗叠加成 42/46px（字段整体右缩、与弹窗标题不对齐），
   grid 自己的 max-height:65vh + overflow:auto 又与外层正文的滚动叠成**双层滚动条** ——
   后面的「取消规则」「允许用户直接下单」「默认包含技术人员」被藏在 grid 的滚动区里，
   用户以为字段没了（2026-09-23 用户报「发布租赁商品弹窗样式有 bug」）。
   与租赁套餐弹窗（.gr-dialog-body .pkg-form）同一解法。 */
.gr-dialog-body .merchant-form-grid {
    padding: 0;
    max-height: none;
    overflow: visible
}

.gr-dialog-body #offerForm footer {
    margin-top: 18px;
    padding: 16px 0 0
}

/* 校验提示条空着时不占位：表单刚打开不该出现一条空白红框
   （#offerFormMessage 已从 footer 搬进 grid 末尾并改成 .form-error 的形态）。 */
.merchant-form-grid .form-error:empty {
    display: none
}

.merchant-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 22px 24px;
    max-height: 65vh;
    overflow: auto
}

.merchant-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-weight: 700
}

.merchant-form-grid label.wide,
/* 提示块（.wb-detail-note）也当整行用，不与字段挤在同一列 */
.merchant-form-grid .wide {
    grid-column: 1/-1
}

.merchant-form-grid label.check {
    flex-direction: row;
    align-items: center
}

/* 表单里的纯展示行：
   .field-title —— 不裹在 <label> 里的字段标题（「适用场景」是 checkbox 组，整块塞进 label
                   会让点标题也切换选项）
   .field-hint  —— 字段下方的灰色说明（<em> 默认斜体，这里改正常） */
.merchant-form-grid .field-title {
    font-weight: 700
}

.merchant-form-grid .field-hint {
    display: block;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5
}

/* 适用场景多选：流式网格（7 项在小弹窗里排单列太高） */
.merchant-scenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px 12px
}

.merchant-scenes .scene-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    font-weight: 400
}

/* ⚠️ 必须覆盖 .merchant-form-grid input 的 `width:100%` 与 `min-height:44px !important`，
   否则每个勾选框都会被拉成整行宽、44px 高的大方块（后端那几个复选框是靠 .check 单独处理的） */
.merchant-scenes .scene-item input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
    min-height: 0 !important;
    /* commerce.css 给 checkbox 带了 margin:0 8px 0 0，与 .scene-item 的 gap:7px 会叠成 15px 间距 */
    margin: 0 !important;
    flex: 0 0 auto
}

/* 全站 commerce.css 有一条 input,select,textarea{border:1px solid #ccc!important;border-radius:4px!important;
   background:#fff!important;padding:9px 12px!important;min-height:42px!important}，不带 !important 的局部
   规则会被它静默吃掉 —— 结果同一个弹窗里 select 43px / 文本框 46px / 日期框 48px 三种高度、边框与圆角
   也各不相同（用户看到的"奇怪的双层边界"就是这个不一致）。这里逐条带 !important 覆盖回本弹窗口径。
   字体不能用 font:inherit：label 是 font-weight:700，继承下去输入框里的字和 placeholder 全变粗体。 */
.merchant-form-grid input,
.merchant-form-grid select,
.merchant-form-grid textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid #dfe3e9 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #313a46 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important
}

/* 必须连 :focus-visible 一起覆盖：commerce.css 有 `input:focus{border-color:var(--gr-brand)!important}` +
   `body input:focus-visible{outline:2px solid; outline-offset:2px}`，聚焦时是「红边框 + 外圈红描边」两层、
   中间还夹着 2px 空隙 —— 就是用户说的「双层边界」。（order-chat.css / rental-checkout.css 都单独治过这条。） */
.merchant-form-grid input:focus,
.merchant-form-grid select:focus,
.merchant-form-grid textarea:focus,
.merchant-form-grid input:focus-visible,
.merchant-form-grid select:focus-visible,
.merchant-form-grid textarea:focus-visible {
    border-color: #c51b21 !important;
    outline: none !important;
    box-shadow: none !important
}

.merchant-form-grid .check input {
    width: auto
}

/* 字段级红字 + 输入框描红（2026-09-28，型号输入框的「该型号已有商品」校验用它）。
   ⚠️ 输入框那条必须带 !important：上面的 `.merchant-form-grid input`（(0,1,1)）与
   `input:focus`（(0,2,1)）都带 !important，不带就会被静默吃掉、描红完全不生效。 */
.merchant-form-grid .field-hint.err {
    color: #b5201b;
    font-weight: 600
}

.merchant-form-grid input.err,
.merchant-form-grid input.err:focus,
.merchant-form-grid input.err:focus-visible {
    border-color: #e7272d !important
}

/* 空的提示位不占高：label 是 flex column + gap:7px，空 <em> 会白白多出一段间距，
   让「机器人型号」那一格比邻居「商品分类」高出一截。 */
.merchant-form-grid .field-hint:empty {
    display: none
}

/* 弹窗内的校验 / 提交失败提示（order-fulfillment.js 的派单、归还表单）。
   光靠一闪而过的 toast，用户容易以为「点了没反应」（2026-09-22 用户反馈「报错需要有提示」），
   所以在表单里留一行常驻红字：位置在字段下方、按钮上方，重新提交时清掉。 */
.merchant-form-grid .form-error {
    padding: 9px 12px;
    border: 1px solid #f0b4b7;
    border-radius: 8px;
    background: #fdf3f3;
    color: #b5201b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6
}

/* 验机凭证缩略图（归还验机弹窗：选中图片立即上传，成功后显示在这里，可单张移除）。
   移除按钮是 <button>，全局 commerce.css 对 button 有 padding/min-height/边框的 !important 规则，
   这里按本文件既有做法逐条带 !important 覆盖，否则会出现「圆形变胶囊」的错位。 */
.merchant-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.merchant-evidence:empty {
    display: none
}

.merchant-evidence-item {
    position: relative;
    width: 84px;
    height: 84px;
    border: 1px solid #dfe3e9;
    border-radius: 10px;
    overflow: hidden
}

.merchant-evidence-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.merchant-evidence-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(31, 35, 41, .72) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer
}

.merchant-evidence-remove:hover {
    background: #c51b21 !important
}

/* ---------- 图标式凭证上传：售后申请弹窗（order-after-sale.js）与归还验机弹窗（order-fulfillment.js）共用 ----------
   （.as- 前缀来自售后弹窗，验机弹窗按产品要求统一成同一套外观，2026-09-22 一并复用这里的选择器。）
   凭证原来是 <input type="file"> 的原生「选择文件」按钮（文案/样式由浏览器决定，与站内表单不同一套），
   2026-09-22 用户要求改成图标式的「上传图片」方框：点方框选图 → 立即上传 → 缩略图可单张移除。
   缩略图沿用上面的 .merchant-evidence-item / .merchant-evidence-remove。
   字段标题/提示用 .as-field* —— 不能直接复用 `label`，因为上传方框本身就是个 label，会被字段样式吃掉。 */
.as-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

/* `hidden` 属性必须真能生效：.as-field{display:flex} 是作者样式，会盖过 UA 的 [hidden]{display:none}
   （与 .merchant-form-grid label 是同一类坑）。当前靠 bindKindSwitch 的内联 style 兜着，
   但 JS 在切换前若出错，损坏凭证块会直接暴露在「验机通过」上。 */
.as-field[hidden] {
    display: none
}

.as-field-title {
    font-weight: 700
}

.as-field-title b {
    color: #c51b21
}

.as-field-hint {
    font-style: normal;
    font-size: 12px;
    color: #8a939e
}

.as-field-hint:empty {
    display: none
}

/* 上限提示里的价格用红字突出（「最高不超过可退余额 ¥0.02」的 ¥0.02） */
.as-field-hint b {
    color: #c51b21;
    font-weight: 700
}

/* 售后申请弹窗的「申请退款金额」字段（order-after-sale.js）：该字段所有类型都展示，提示里的
   「实际支付金额 / 可退余额」来自一次异步的订单详情请求 —— 沿用 .as-field-hint:empty 的
   display:none 会让提示出现时把下方的「申诉内容 / 凭证图片」整体下移（用户 2026-09-28 明确
   反感弹窗刷新时信息跳动），所以这里把这一行的高度**预留**出来：空态与有内容态都是 1 行 17px。
   ⚠️ 必须显式 display:block —— <em> 是行内元素，min-height 对它无效（原来是 :empty 就 display:none，
   只靠 min-height 兜不住）。作用域只到 .as-refund，派单 / 验机弹窗的同名提示不受影响。 */
.as-refund .as-field-hint {
    display: block;
    min-height: 17px;
    line-height: 17px
}

/* 必填标记：红星号（2026-09-22 用户要求）。
   ⚠️ 只能挂在**包着文字的行内元素**（span）上：.merchant-form-grid label 是 flex column，
   把类挂在 label 上时 ::before 会成为独立 flex 项，红星单独占一行（用户实测踩到）。
   派单 / 验机弹窗以后要统一也按这个写法挂。 */
.required-star::before {
    content: '*';
    margin-right: 4px;
    color: #c51b21;
    font-weight: 700
}

/* ---------- 平铺单选按钮组（`.flat-options`）：点哪个哪个高亮，不再用下拉 ----------
   用于两处弹窗：售后类型（order-after-sale.js 的「申请售后」）与配送方式（order-fulfillment.js 的
   「安排交付 / 申请归还」）。2026-09-28 用户要求：与 APP 端一致 —— 选项**直接摆出来**、
   点选即切换（红边 + 浅红底 + 红字）。
   ⚠️ `.as-type-options` 是售后侧先落地的旧类名，与 `.flat-options` **共用同一组规则**（新写的用
   `.flat-options`；售后侧因为当轮已实测通过，暂不动它，避免与并发会话抢同一个文件）。
   ⚠️ min-height / display 必须在这里显式写死：commerce.css 是**全站**注入的（global_robot.go 的
   </head> 注入，不受 workbenchShell 影响，工作台里的弹窗同样命中），其中
   `body button,[type=button],[type=submit]{min-height:42px;display:inline-flex}` 与 height 是两个属性、
   不构成覆盖 —— 不写 min-height:0 就被撑成 42px 高（.gr-dialog-close 踩过同一根因，见 ui.css 注释）。
   这里靠 .merchant-form-grid 前缀（(0,2,1) > (0,0,2)）压过它，不依赖注入顺序。 */
.merchant-form-grid .as-type-options,
.merchant-form-grid .flat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.merchant-form-grid .as-type-options button,
.merchant-form-grid .flat-options button {
    flex: 1 1 0;
    min-width: 104px;
    min-height: 0;
    padding: 9px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #3c4658;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer
}

.merchant-form-grid .as-type-options button:hover,
.merchant-form-grid .flat-options button:hover {
    border-color: #c51b21;
    color: #c51b21
}

.merchant-form-grid .as-type-options button.on,
.merchant-form-grid .flat-options button.on {
    border-color: #c51b21;
    background: #fff1f1;
    color: #c51b21;
    font-weight: 700
}

/* 「平台保障」提示（售后申请弹窗，order-after-sale.js）：文案与红标题对齐小程序的 notice 块 */
.as-notice {
    padding: 9px 12px;
    border: 1px solid #f6d9da;
    border-radius: 8px;
    background: #fff7f7;
    color: #5f6a76;
    font-size: 13px;
    line-height: 1.6
}

.as-notice b {
    display: block;
    margin-bottom: 2px;
    color: #c51b21;
    font-weight: 700
}

.as-notice span {
    display: block
}

.as-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px
}

.as-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.as-upload-list:empty {
    display: none
}

/* 发票文件预览块（supplier-invoices.js 开票弹窗）：图片沿用 .merchant-evidence-item 的缩略图，
   非图片（PDF / OFD）走这里 —— 84×84 方块里居中放一枚文件图标 + 扩展名小字，点块在新标签打开预览。
   尺寸/圆角/移除按钮都复用 .merchant-evidence-item 那一套，这里只补内容排版。 */
.merchant-evidence-item.inv-file-item {
    cursor: pointer
}

.inv-file-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    background: #fbfcfd;
    color: #8a939e;
    font-size: 11px
}

.inv-file-thumb svg {
    width: 26px;
    height: 26px
}

.inv-file-thumb em {
    font-style: normal;
    letter-spacing: .5px
}

/* 上传方框：带 .merchant-form-grid 前缀提高权重 —— 那条 `.merchant-form-grid label` 是 (0,1,1)，
   只用 .as-upload-btn（0,1,0）会被它的 display/flex-direction/font-weight 静默盖掉。 */
.merchant-form-grid .as-upload-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 84px;
    height: 84px;
    border: 1px dashed #cfd6df;
    border-radius: 10px;
    background: #fafbfc;
    color: #8a939e;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer
}

.merchant-form-grid .as-upload-btn:hover {
    border-color: #c51b21;
    background: #fff7f7;
    color: #c51b21
}

.merchant-form-grid .as-upload-btn svg {
    width: 26px;
    height: 26px
}

.merchant-form-grid .as-upload-btn em {
    font-style: normal
}

/* 键盘可达性：file input 被裁成 1px 后仍可聚焦，用 :focus-within 把焦点画在方框上 */
.merchant-form-grid .as-upload-btn:focus-within {
    border-color: #c51b21;
    box-shadow: 0 0 0 2px rgba(197, 27, 33, .18)
}

/* 原生 file 输入框藏掉但保留功能。commerce.css 对 input 有 padding/min-height 的 !important 规则，
   这里用更高权重的选择器覆盖，否则它会把 1px 的隐藏框撑成 44px 高、把方框顶歪。 */
.merchant-form-grid .as-upload-btn input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important
}

/* ---------- 评价晒单弹窗（order-review.js） ----------
   三行星级评分 + 评价内容 + 现场图片（图片与售后/验机共用 .as-upload / .merchant-evidence）。
   ⚠️ 星级用 <i> 而不是 <button>：commerce.css 对 button 有 padding/min-height 的 !important 规则，
   用按钮会把 5 颗星撑成 5 个 42px 高的灰块（本项目在别处踩过这个坑）。 */
/* 商品区改成「左图 + 右两行文字」（2026-09-29 用户要求：商品名左侧要有商品缩略图，与 APP 一致）。
   ⚠️ 原来是 flex-direction:column 的纯文字堆叠，加图后必须去掉 column，否则图片会独占一行。 */
.rv-subject {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #f7f8fa
}

/* 缩略图尺寸/圆角沿用订单详情商品卡（workbench.css 的 .od-goods-cover）那套口径：object-fit:cover + 兜底色 */
.rv-subject-cover {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #eef1f5
}

/* 没有封面时的字母方块：底色 / 字色与小程序 review.vue 的 .shop .logo 一致 */
.rv-subject-cover.is-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0f0;
    color: #e1252d;
    font-size: 18px;
    font-weight: 700
}

.rv-subject-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.rv-subject b {
    font-size: 14px
}

.rv-subject em {
    font-style: normal;
    font-size: 12px;
    color: #8a939e
}

.rv-field {
    display: flex;
    align-items: center;
    gap: 12px
}

.rv-label {
    flex: 0 0 auto;
    min-width: 68px;
    font-size: 13px;
    font-weight: 700
}

.rv-stars {
    display: flex;
    align-items: center;
    gap: 4px
}

.rv-star {
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    color: #d7dbe0;
    cursor: pointer;
    user-select: none
}

.rv-star.on {
    color: #ff9f19
}

.rv-stars small {
    margin-left: 6px;
    color: #8a939e;
    font-size: 12px
}

#offerForm footer button {
    padding: 10px 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-weight: 800;
    cursor: pointer
}

#offerForm footer button.primary {
    border-color: #e7272d;
    background: #e7272d;
    color: #fff
}

/* ⚠️ 这里曾有 `#offerFormMessage{margin-right:auto;color:#777}`：id 选择器 (1,0,0) 会压过
   `.merchant-form-grid .form-error` (0,2,0) 的红色，把校验提示又变回一条不起眼的灰字
   （就是用户报的「没有提示」）。提示条现已搬进 .merchant-form-grid 并改用 .form-error 形态，
   这条规则必须去掉，颜色交回 .form-error。 */

@media(max-width:850px) {
    .merchant-offer {
        grid-template-columns: 1fr
    }

    .merchant-offer .actions {
        justify-content: flex-start
    }

    .merchant-form-grid {
        grid-template-columns: 1fr
    }

    .merchant-form-grid label.wide {
        grid-column: auto
    }
}

.member-asset-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0
}

.member-asset-tabs button {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 18px;
    padding: 7px 12px;
    cursor: pointer
}

.member-asset-tabs button.on {
    color: #fff;
    background: #e2231a;
    border-color: #e2231a
}

.member-asset-rows {
    display: grid;
    gap: 8px;
    min-height: 72px
}

.member-asset-row {
    display: flex;
    gap: 10px;
    padding: 9px;
    border: 1px solid #eee;
    border-radius: 10px;
    color: #202124;
    text-decoration: none
}

.member-asset-row img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover
}

.member-asset-row span {
    display: grid;
    gap: 3px;
    min-width: 0
}

.member-asset-row b,
.member-asset-row em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.member-asset-row em {
    color: #e2231a;
    font-size: 13px;
    font-style: normal
}

/* 「暂无数据」统一版式 = 图标 + 提示（2026-09-29 用户要求）。这枚图标与 workbench.css 的
   .wb-empty::before 是同一个（灰线「空收件箱」），只是小一号 —— 这块是左对齐的灰底卡片，
   不是列表中央的空态。grid 布局下 ::before 自动成为第一行。 */
.member-asset-empty::before {
    content: '';
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b2c0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l1.6 2.7h4.8L16 13h4'/%3E%3Cpath d='M6.3 4.6h11.4a2 2 0 0 1 1.8 1.1l2.5 5.4v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l2.5-5.4a2 2 0 0 1 1.8-1.1Z'/%3E%3C/svg%3E") center/contain no-repeat
}

.member-asset-empty {
    display: grid;
    gap: 6px;
    padding: 14px;
    background: #f7f8fa;
    border-radius: 10px
}

.member-asset-empty span {
    color: #7b8491;
    font-size: 13px
}

.member-asset-empty a {
    color: #e2231a
}

/* ---------- 延租费用明细（order-after-sale.js 的 extensionSummaryHTML）---------- */
/* 只服务「申请延租」弹窗里的价目表：标签在左、金额在右，排成两列。
   三个刻意的口径（2026-09-28 用户要求「规范字段和值 + 金额高亮」）：
   ① 括号里的说明一律写在**标签**里，值列只放金额（或一个短横）→ 右对齐后金额成列、可比；
   ② 金额带 tabular-nums：等宽数字让上下几行的小数点对齐（¥0.01 与 ¥1,234.56 不会错位）；
   ③ 只有「增加的钱」（租金差额、技术人员费）与「应付差价」用品牌红，参考值（原租金、押金）压灰。
   类名统一 as-extra- 前缀（after-sale），避免与全站通用类相撞。 */
.as-extra {
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #eef0f2;
    border-radius: 8px
}

.as-extra-title {
    display: block;
    margin-bottom: 6px;
    color: #222;
    font-size: 13px;
    font-weight: 600
}

.as-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0
}

.as-extra-row > span {
    color: #6b7280;
    font-size: 13px
}

.as-extra-row > b {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum"
}

/* 增值金额（租金差额、技术人员费）—— 品牌红 */
.as-extra-row > b.is-plus {
    color: #c51b21
}

/* 参考值（押金「不变」、技术人员「本次不加配」）—— 压灰，不抢眼 */
.as-extra-row > b.is-muted {
    color: #9aa1ab;
    font-weight: 400
}

/* 应付差价：买家唯一要掏的钱 —— 虚线分隔 + 最大字号 + 最红 */
.as-extra-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #dcdfe4
}

.as-extra-total > span {
    color: #222;
    font-weight: 600
}

.as-extra-total > b {
    color: #c51b21;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum"
}

.as-extra-note {
    margin-top: 8px;
    color: #9aa1ab;
    font-size: 12px;
    line-height: 1.6
}

/* 明细宿主（弹窗里那个 [data-extra-summary] 容器）：
   min-height 是**实测标定值**（本机字体下「标题 + 5 行明细 + 合计 + 脚注」= **286px**），
   目的是让「首次加载 / 重算 / 出错」三种状态高度都相同 —— 弹窗不会因为内容从 1 行变 6 行而重排
   （用户 2026-09-28：「刷新信息不要跳动」）。
   ⚠️ 2026-09-28 校正：原值是 261px（比实际内容矮 25px）→ 空态（核价未回来）526 与有明细时 552
   差 26px，弹窗在核价回来那一下仍会往下长一截。这次按复现页实测（1440×900 / 1080p 两档）
   改成 286，实测高度差降到取整误差（1px）。
   ⚠️ 明细增删行（例如给「技术人员」以外再加一行）时必须同步改这个值（矮屏档的 211 一起改），
   否则首次加载会跳一次。 */
[data-extra-summary] {
    position: relative;
    min-height: 286px
}

/* 重算过渡态：保留旧明细、压暗，右上角标「核算中…」——
   不清空、不换占位行，所以不产生任何位移 */
[data-extra-summary].is-loading > .as-extra {
    opacity: .45
}

[data-extra-summary].is-loading::after {
    content: '核算中…';
    position: absolute;
    top: 12px;
    right: 14px;
    color: #9aa1ab;
    font-size: 12px
}

/* ---------- 延租弹窗：矮视口紧凑档（2026-09-28 用户「申请延租弹窗不要显示滚动条」）----------
   实测（复现页 F:\zclaw-temp\extratest\dialog.html，真实表单 + 真实 CSS）：
     · 1440×900（正文可视 587）并排改造后内容 552 → 不滚 ✅
     · 1366×768（正文可视 471）内容 571 → 仍溢出 100px ❌
   矮视口只能靠压缩：行内间距、明细行高、标题与脚注的留白一起收，且**隐藏「费用明细」标题** ——
   它是纯标签（弹窗标题已写明"申请延租"，明细里的「应付差价」行自解释），矮屏下省下的 28px
   正是压进视口的关键。作用域限定在 .as-extension-dialog（order-after-sale.js 给延租弹窗挂的类），
   **不影响其它弹窗**。⚠️ 阈值 820px 取的是视口高度：1080p（视口≈929）不命中，1440×900 与
   1366×768 命中（它们本来也不富裕）。 */
@media (max-height:820px) {
   .as-extension-dialog [data-extra-summary] {
      /* 矮屏档的标定值（与宽松档的 286 同理）：隐藏标题 + 紧凑行高后实测 211px。
         **不能写 auto** —— 那会让「首次加载（空）/ 重算 / 出错」三态高度不同，
         弹窗在核价回来那一下会往下长一截（用户 2026-09-28：「刷新信息不要跳动」）。
         ⚠️ 明细增删行时必须同步改这个值（宽松档的 286 一起改）。 */
      min-height: 211px
   }

   .as-extension-dialog .merchant-form-grid {
      gap: 10px
   }

   .as-extension-dialog .gr-dialog-body {
      padding: 14px 18px
   }

   .as-extension-dialog .gr-dialog-foot {
      margin-top: 12px
   }

   .as-extension-dialog .as-extra-title {
      display: none
   }

   .as-extension-dialog .as-extra-row {
      padding: 1px 0
   }

   .as-extension-dialog .as-extra-row > span {
      font-size: 12px
   }

   .as-extension-dialog .as-extra-row > b {
      font-size: 14px
   }

   .as-extension-dialog .as-extra-total {
      margin-top: 4px;
      padding-top: 6px
   }

   .as-extension-dialog .as-extra-total > b {
      font-size: 18px
   }

   .as-extension-dialog .as-extra-note {
      margin-top: 3px;
      line-height: 1.35
   }
}