/* 工作台侧栏（个人中心 / 商家中心共用）——版式来自设计原型 Desktop\2026-09-08-10-27-50\pc-workspace.html
   与 pc-mc.html 的 .side-user（深色底 + 用户卡位 + 分组标题 + 通栏菜单项 + 红色渐变高亮当前页）。

   为什么单独一个文件、而不是往 workbench.css 里加：
   这些页面改成「无商城顶栏/站脚」后，侧栏是靠新 HTML（Go 模板变更 → 必须重编二进制）落地的，
   若样式还留在 workbench.css，老访客会命中「HTML 是新的、CSS 是旧缓存」的错配；
   新文件用全新 URL（带 ?v=20260924a）必然回源，且不必递增 workbench.css 的 ?v=。

   命名一律带 wb- 前缀：commerce.css / marketplace-compact.css 有大量无作用域 !important
   （body button、h1~h6、卡片底色），前缀是最省事的隔离手段。
   作用域固定在 .wb-side（= 工作台侧栏），页面正文里的其它 <aside> 不受影响。 */

.wb-side {
   padding: 20px 12px 26px
}

.wb-side .wb-nav-title {
   padding: 18px 12px 6px;
   color: #9c9ca8;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .06em
}

.wb-side .wb-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 11px 14px;
   margin: 3px 0;
   border-radius: 8px;
   color: #e3e3ea;
   font-size: 14.5px;
   font-weight: 600;
   line-height: 1.45;
   transition: background .15s, color .15s
}

.wb-side .wb-item:hover {
   background: #2e2e36;
   color: #fff
}

.wb-side .wb-item.on {
   background: linear-gradient(135deg, #e63939, #ce2b2b);
   color: #fff;
   font-weight: 700
}

/* 尾部两个通栏按钮：先「切换角色」，再「返回首页」（顺序是用户 2026-09-24 明确要求） */
.wb-side .wb-item-switch {
   margin-top: 14px;
   justify-content: center;
   border: 1px solid #33333b;
   background: #26262c;
   color: #fff;
   font-weight: 700
}

.wb-side .wb-item-switch:hover {
   background: linear-gradient(135deg, #e63939, #ce2b2b);
   border-color: transparent
}

.wb-side .wb-item-home {
   margin-top: 8px;
   justify-content: center;
   gap: 7px;
   border: 1px dashed #3a3d44;
   color: #cbd0d7
}

.wb-side .wb-item-home svg {
   width: 15px;
   height: 15px;
   flex-shrink: 0
}

.wb-side .wb-item-home:hover {
   background: #2e2e36;
   border-style: solid;
   color: #fff
}

/* 选中/悬停的红底上再放红角标等于看不见 → 反白（workbench.css 里那份只覆盖了 aside a.on，
   没有 .wb-item 这类写法，这里补齐；不要删，删了「售后处理 / 改期审核 / 发票管理」在选中页上就没有数字） */
.wb-side .wb-item.on .wb-nav-badge,
.wb-side .wb-item:hover .wb-nav-badge {
   background: #fff;
   color: #c51b21
}

/* 页面没有商城顶栏了：主区补足整屏高，内容不足一屏时页面底部不会露出空白背景 */
.wb-shell>main {
   min-height: 100vh
}

/* ≤900px：workbench.css 原本把侧栏整块 display:none（那时顶栏还在，页面还有导航）。
   现在顶栏与站脚都不在，侧栏是页面上唯一的导航 —— 不能再隐藏，改成横向换行的按钮条。 */
@media(max-width:900px) {
   .wb-shell>aside.wb-side {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      position: static;
      top: auto;
      height: auto;
      min-height: 0;
      max-height: none;
      overflow: visible;
      padding: 12px
   }

   .wb-side .wb-nav-title {
      display: none
   }

   .wb-side .wb-item {
      margin: 0;
      padding: 9px 12px;
      font-size: 13px
   }

   .wb-side .wb-item-switch,
   .wb-side .wb-item-home {
      margin-top: 0
   }
}

/* ============ 个人中心列表页（我的采购供求 / 我的询价记录） ============
   列数多（8~10 列），复用不了 .wb-tr 那套固定 6 列布局，所以自建一套：
   列宽由各页面在内联 style 里给 CSS 变量 --cols，改列不必动 CSS。 */
.mb-table {
   margin-top: 14px;
   border: 1px solid #eee;
   border-radius: 10px;
   overflow: hidden
}

.mb-tr {
   display: grid;
   grid-template-columns: var(--cols);
   gap: 10px;
   align-items: center;
   padding: 13px 14px;
   border-bottom: 1px solid #f5f6f8;
   font-size: 13px;
   color: #31404f;
   transition: background-color .16s ease
}

.mb-tr:last-child {
   border-bottom: none
}

/* 行悬停：列多的表格靠背景高亮定位当前行（表头不参与） */
.mb-tr:not(.mb-th):hover {
   background: #fff6f5
}

.mb-tr.mb-th {
   background: #f2f3f6;
   border-bottom: 1px solid #e6e8ec;
   font-weight: 700;
   font-size: 12.5px;
   color: #4a535e
}

.mb-tr>* {
   min-width: 0
}

.mb-tr a {
   color: #c51b21;
   font-weight: 700
}

.mb-cell-main b {
   display: block;
   font-size: 13.5px;
   color: #1b1b1f;
   line-height: 1.5
}

.mb-cell-main span {
   display: block;
   font-size: 12px;
   color: #9a9aa5;
   margin-top: 3px
}

.mb-num {
   font-variant-numeric: tabular-nums;
   font-weight: 700;
   color: #1b1b1f
}

.mb-goods {
   display: flex;
   align-items: center;
   gap: 10px
}

.mb-thumb {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 800;
   color: #b4b5be;
   overflow: hidden;
   background: linear-gradient(135deg, #f3f4f7, #e8eaef)
}

.mb-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

/* 页签上的计数（原型 bk-tabs 的 <em>）；merchant-tabs 原本没有 b 的样式 */
.merchant-tabs button b {
   margin-left: 6px;
   font-size: 12px;
   opacity: .8
}

/* ============ 收藏机器人 ============ */
.mb-fav-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 14px
}

.mb-fav-grid.is-empty {
   display: block
}

.mb-fav-card {
   border: 1px solid #e7e7e7;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   display: flex;
   flex-direction: column
}

.mb-fav-card .fth {
   width: 100%;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   font-weight: 800;
   color: #b4b5be;
   overflow: hidden;
   background: linear-gradient(135deg, #f3f4f7, #e8eaef)
}

.mb-fav-card .fth img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.mb-fav-card .fbd {
   padding: 13px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   flex: 1
}

.mb-fav-card h3 {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.5;
   margin: 0;
   min-height: 42px
}

.mb-fav-card .mb-price {
   font-size: 17px;
   font-weight: 800;
   color: #c51b21
}

.mb-fav-card .mb-price i {
   font-size: 12px;
   font-weight: 600;
   font-style: normal;
   color: #9a9aa5
}

.mb-fav-card .mb-acts {
   display: flex;
   gap: 8px;
   margin-top: auto
}

.mb-fav-card .mb-acts a,
.mb-fav-card .mb-acts button {
   flex: 1;
   height: 32px;
   border-radius: 8px;
   font-size: 12.5px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #e2e2e2;
   background: #fff;
   color: #5a636e;
   cursor: pointer
}

.mb-fav-card .mb-acts a.primary {
   background: #e7272d;
   border-color: #e7272d;
   color: #fff
}

/* ============ 消息通知（左分类栏 + 右列表） ============ */
.mb-msg-layout {
   display: grid;
   grid-template-columns: 224px minmax(0, 1fr);
   gap: 16px;
   align-items: start
}

.mb-msg-cats {
   background: #fff;
   border: 1px solid #ececec;
   border-radius: 12px;
   padding: 10px;
   position: sticky;
   top: 12px
}

.mb-msg-cats a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 11px 13px;
   border-radius: 8px;
   font-size: 13.5px;
   font-weight: 600;
   color: #31404f;
   margin: 2px 0;
   cursor: pointer
}

.mb-msg-cats a:hover {
   background: #f6f7f9
}

.mb-msg-cats a.on {
   background: #fdecec;
   color: #c51b21;
   font-weight: 700
}

.mb-msg-cats em {
   font-style: normal;
   font-size: 12px;
   color: #9a9aa5
}

.mb-msg-cats a.on em {
   color: #c51b21
}

.mb-msg-readall {
   width: 100%;
   margin-top: 8px;
   height: 36px;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
   background: #fff;
   font-size: 13px;
   font-weight: 700;
   color: #5a636e;
   cursor: pointer
}

.mb-msg-readall:hover {
   border-color: #c51b21;
   color: #c51b21
}

/* ============ 资料与账号安全 ============ */
.mb-2col {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
   gap: 16px;
   align-items: start
}

.mb-account-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 6px 0 14px;
   border-bottom: 1px solid #f1f1f1;
   margin-bottom: 8px
}

.mb-avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #ff6b5b, #e63939);
   color: #fff;
   font-size: 18px;
   font-weight: 800
}

.mb-account-name b {
   display: block;
   font-size: 16px;
   color: #1b1b1f
}

.mb-kv {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px dashed #ececec;
   font-size: 13px
}

.mb-kv span {
   color: #9a9aa5
}

.mb-kv b {
   color: #1b1b1f;
   font-weight: 700;
   text-align: right;
   word-break: break-all
}

.mb-link {
   display: inline-block;
   margin-top: 14px;
   font-size: 13px;
   font-weight: 700;
   color: #c51b21
}

/* 退出登录按钮（2026-09-29 用户反馈原来那条 .mb-link 红字链接「没看到」，要求换成按钮）。
   仍用警示红，但做成描边次级按钮 —— 退出不是本页主操作。
   display / min-height / text-align 必须显式写：commerce.css 的 `body button` 会把按钮
   撑成 inline-flex 居中，不写就会出现「锚点与按钮观感不一致」（同 .wb-primary 的处理）。 */
.mb-logout {
   display: block;
   width: 100%;
   margin-top: 14px;
   padding: 10px 16px;
   min-height: 42px;
   border: 1px solid #e7272d;
   border-radius: 6px;
   background: #fff;
   color: #c51b21;
   font-size: 14px;
   font-weight: 800;
   line-height: 1.2;
   text-align: center;
   cursor: pointer
}

.mb-logout:hover {
   background: #e7272d;
   color: #fff
}

@media(max-width:1080px) {
   .mb-2col,
   .mb-msg-layout {
      grid-template-columns: 1fr
   }

   .mb-msg-cats {
      position: static
   }

   .mb-fav-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(max-width:820px) {
   .mb-fav-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   /* 列多的表格窄屏横向滚动，不压缩成读不了的一坨 */
   .mb-table {
      overflow-x: auto
   }

   .mb-tr {
      min-width: 880px
   }
}

/* 工作台顶部面包屑：版式照原型 pc-mc-goods.html 的 .crumb（左侧层级 + 灰字）。
   原型右侧那枚「返回首页」按钮本站已按用户要求放进侧栏（见 shell.go 的 wbNavFoot），此处不重复。
   生成逻辑见 shell.go 的 wbCrumbFor（由 renderWorkbench 注入到 <main> 首个子节点）。 */
.wb-crumb {
    font-size: 14.5px;
    color: #9a9aa5;
    line-height: 1.6
}

.wb-crumb a {
    color: #55585f;
    font-weight: 600
}

.wb-crumb a:hover {
    color: var(--brand, #e63939)
}

.wb-crumb b {
    color: #1b1b1f;
    font-weight: 700
}

/* —— 「我的采购供求」列宽兜底（2026-09-29）——
   该页 9 列原先按 fr 比例平摊，容器一窄就压扁：需求编号（13 位连号）溢出被裁、
   预算范围与发布时间折成两行 —— 用户报「字段被挤在一起」。
   现在列宽由模板内联的 --cols 给成「固定像素 + 需求内容列吸收剩余宽度」，并额外给
   --cols-min（= 固定列之和 + 间隙 + 内容列下限）；容器低于它时保持最小宽度横向滚动，
   而不是继续压扁每一列。用 [data-page] 限定，只影响本页 —— 同套件的
   「我的询价记录 / 我的报价单」列数与列宽不同，本轮未一起改。 */
[data-page="member-needs"] .mb-table {
   overflow-x: auto
}

[data-page="member-needs"] .mb-tr {
   min-width: var(--cols-min, 0)
}