/* SeraGPU Supply Catalog · public page styles
   Desktop: multi-dimensional market table. Mobile: card list. */

.sup-body{background:transparent;color:#14181F;-webkit-font-smoothing:antialiased}
/* ⚠ 2026-10-14：原来是 `.sup-body header,.sup-body main{position:relative;z-index:1}`。
 * 「.sup-body header」(0-1-1) 的特异性高于「.hd」(0-1-0)，会把统一页头的
 * z-index:60 压成 1 → 滚到底时表格盖住吸顶页头，页头整条点不动。
 * 页头已经统一到 .hd，这条规则只管 main。 */
.sup-body main{position:relative;z-index:1}
/* 2026-10-14 统一：原 max-width:1040px / padding:0 48px，比页头（1160/24）窄，
   内容与页头左右不对齐。现在跟全站容器一致 —— 表格页最需要宽度，没理由更窄。 */
.sup-wrap{max-width:var(--s-container);margin:0 auto;padding:0 24px}
/* main.css 的全局 section{padding:112px 0} 是首页落地页节奏；
   这里只作用于两个「无 class 的裸 <section>」视图容器。
   ⚠ 2026-10-14：site.css 的隔离层曾经把带 class 的组件 section 也清零过，
   导致本页所有卡片内边距归零、文字贴边框。现在组件靠 :not([class]) 豁免——
   **本页新增组件的 class 一律以 sup- 开头**，别写无 class 的组件 section。 */
#supListView{padding:36px 0 56px}
#supDetailView{padding:36px 0 56px}
/* 2026-10-13：原来的 .sup-top 页头规则已删除 —— 页头统一到 site.css 的 .hd。
 * main.css 的裸 `header{pointer-events:none}` 污染改由 site.css 的隔离层
 * （body.page-supply header{...pointer-events:auto}）统一处理，本页不再各写一份补丁。 */
.sup-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 0 16px;flex-wrap:wrap}
.sup-tag{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#0052FF}
.sup-head h1{font-size:30px;font-weight:850;letter-spacing:-.6px;margin:6px 0 6px}
.sup-sub{font-size:13.5px;color:#5A6272;max-width:60ch;line-height:1.7}
.sup-head-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sup-search input{width:290px;padding:10px 13px;border:1.5px solid #E8ECF2;border-radius:10px;font-size:13.5px;background:#fff}
.sup-search input:focus{outline:none;border-color:#0052FF;box-shadow:0 0 0 3px rgba(0,82,255,.12)}

.sup-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#0052FF;color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s}
.sup-btn:hover{background:#003ECC}
.sup-btn.ghost{background:#fff;color:#5A6272;border:1.5px solid #E8ECF2}
.sup-btn.ghost:hover{border-color:#0052FF;color:#0052FF;background:#fff}
.sup-btn.sm{padding:7px 12px;font-size:12.5px}
.sup-btn.block{width:100%;margin-top:6px}

.sup-tabs{display:flex;gap:8px;padding:4px 0 14px;flex-wrap:wrap}
.sup-tab{border:1.5px solid #E8ECF2;background:#fff;border-radius:999px;padding:8px 20px;font-size:13.5px;font-weight:700;color:#5A6272;cursor:pointer;transition:all .2s}
.sup-tab:hover{border-color:#BFD2FF;color:#0052FF}
.sup-tab.on{background:#0052FF;border-color:#0052FF;color:#fff}

.sup-adv{border:1px solid #E8ECF2;background:#fff;border-radius:12px;padding:12px 16px;margin-bottom:14px}
.sup-adv summary{cursor:pointer;font-size:13px;font-weight:700;color:#5A6272}
.sup-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.sup-adv-grid label{display:block;font-size:11.5px;font-weight:700;color:#8A93A6}
.sup-adv-grid select,.sup-adv-grid input{width:100%;margin-top:5px;padding:9px 11px;border:1.5px solid #E8ECF2;border-radius:9px;font-size:13px;background:#fff}
.sup-adv-reset{display:flex;align-items:flex-end}

.sup-meta{font-size:12.5px;color:#8A93A6;margin-bottom:10px}

.sup-table-wrap{background:#fff;border:1px solid #E8ECF2;border-radius:14px;
  box-shadow:0 2px 12px rgba(24,41,72,.05);overflow-x:auto}
/* ⚠ 2026-10-13 修（用户报「Supply 子页面点不到按钮」，用 CDP 探针定位到：
 *   `.sup-table-wrap` 右边界 x=1192，而「查看详情 →」在 x=1196–1263，整块在
 *   横向滚动容器之外 → 不可命中）。
 *
 *   根因（**第一版诊断写错了，这里更正**）：
 *     不是缺 box-sizing —— main.css 第 8 行本来就 `*{margin:0;padding:0;box-sizing:border-box}`。
 *     真正原因是 `table-layout:auto`（默认值）：表格会按**内容最小宽度**分配列，
 *     而下面几处 `white-space:nowrap` 让最小宽度远大于我的列宽声明 ——
 *       价格格里的「128 台（可供 32–128 台）· 可拆」≈ 218px
 *       交期格里的「4 周起，每周交付 32 台 · 中国香港」≈ 238px
 *     全部固定列的最小宽加起来 ≈ 1046px，塞不进 942px 容器 → 溢出被裁。
 *
 *   修法（两手都要）：
 *     ① `table-layout:fixed` —— 让列宽声明说了算，内容不再顶宽列
 *     ② 对允许换行的格解除 nowrap（价格的数量行、交期行），内容换行而不是被裁
 *     ③ 重排列宽，把「最近确认」并入编码列（8 列 → 7 列）
 *     ④ 操作列 `position:sticky; right:0` —— 任何宽度下的兜底，永远点得到
 *     ⑤ 可滚时右侧渐隐，提示「右边还有内容」 */
.sup-table{min-width:820px}
.sup-table{width:100%;border-collapse:collapse;font-size:13px;box-sizing:border-box;
  /* ⚠ table-layout:fixed 是必须的：auto 布局会把 nowrap 的内容当最小宽
   *   （编码 18 字符 nowrap ≈ 132px），列宽声明形同虚设 —— 实测 auto 时表格 1046px。 */
  table-layout:fixed}
.sup-table th,.sup-table td{box-sizing:border-box;overflow:hidden}
/* 表在 1040 容器（内容 944px）里偏挤：收紧内边距、价格/交期禁止断行、
   「主要规格」按摘要定位截到 2 行（完整信息在详情页） */
.sup-table th,.sup-table td{padding:11px 12px}
.sup-table td{line-height:1.45}
.sup-code{font-size:12px;white-space:nowrap}
.sup-prod{font-size:12.5px}
.sup-price{font-size:13.5px}
.sup-price,.sup-price span,.sup-when,.sup-when em{white-space:nowrap}
.sup-flow{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:#5F6B7A}
/* 7 列配宽（border-box，含内边距）：固定列合计 766，剩 ~176 给「主要规格」。
   合计 942 = 桌面内容区宽度，1440 下不出横向滚动条。
   窄于 1080 会出滚动条 → 操作列 sticky 兜底 + 右侧渐隐提示。 */
.sup-table th:nth-child(1),.sup-table td:nth-child(1){width:158px}
.sup-table th:nth-child(2),.sup-table td:nth-child(2){width:190px}
.sup-table th:nth-child(3),.sup-table td:nth-child(3){width:70px}
.sup-table th:nth-child(4),.sup-table td:nth-child(4){width:134px}
.sup-table th:nth-child(5),.sup-table td:nth-child(5){width:126px}
.sup-table th:nth-child(6),.sup-table td:nth-child(6){width:auto}
.sup-table th:nth-child(7),.sup-table td:nth-child(7){width:96px}
/* 编码列：编号 + 确认时间两行 */
.sup-code-cell{display:flex;flex-direction:column;gap:3px}
.sup-code-time{font-size:11px;color:#8A93A6;white-space:nowrap}
/* fixed 布局下每格都要能收：长内容换行，不撑破列 */
.sup-table td:nth-child(4) .sup-price span{white-space:normal}
.sup-table td:nth-child(5) .sup-when{white-space:normal}
.sup-table td:nth-child(2) .sup-prod{overflow-wrap:anywhere}
/* 操作列固定右侧：不管表格多宽、横向滚到哪，「查看详情」永远点得到 */
.sup-table th:last-child,.sup-table td:last-child{
  position:sticky;right:0;z-index:2;background:#fff;
  box-shadow:-10px 0 14px -10px rgba(20,30,60,.16);
}
.sup-table th:last-child{background:#F9FBFF}
.sup-table tbody tr:hover td:last-child{background:#F7FAFF}
/* 横向可滚时右侧渐隐提示（提示"右边还有内容"，而不是让人以为表格就这些） */
.sup-table-wrap.scrollable{
  background-image:linear-gradient(to left,rgba(20,30,60,.07),rgba(20,30,60,0));
  background-repeat:no-repeat;background-position:right center;background-size:22px 100%;
}
.sup-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.5px;color:#8A93A6;background:#F9FBFF;padding:12px 14px;border-bottom:1px solid #E8ECF2;white-space:nowrap}
.sup-table td{padding:14px;border-bottom:1px solid #E8ECF2;vertical-align:middle}
.sup-table tr:last-child td{border-bottom:none}
.sup-table tbody tr:hover{background:#F7FAFF}
.sup-code{font-family:Menlo,monospace;font-size:12px;font-weight:700;color:#0052FF;white-space:nowrap}
.sup-prod{font-weight:800;color:#14181F;line-height:1.4}
.sup-prod span{display:block;font-weight:500;color:#8A93A6;font-size:11.5px;margin-top:3px}
.sup-pill{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sup-pill.spot{background:#EAF9F0;color:#17875C}
.sup-pill.near{background:#EEF4FF;color:#0052FF}
.sup-pill.futures{background:#FFF8EC;color:#A96B00}
.sup-pill.unknown{background:rgba(90,98,114,.09);color:#5A6272}
.sup-price{font-weight:800;color:#14181F}
.sup-price span{display:block;font-weight:500;color:#8A93A6;font-size:11.5px;margin-top:3px}
.sup-flow{font-size:12px;color:#5A6272;max-width:230px;line-height:1.5}
.sup-when{font-size:12px;color:#5A6272;white-space:nowrap}
.sup-when em{display:block;font-style:normal;color:#A96B00;font-weight:700;font-size:11px;margin-top:2px}
.sup-act{white-space:nowrap}
.sup-link{color:#0052FF;font-weight:700;text-decoration:none;font-size:13px}
.sup-link:hover{text-decoration:underline}
.sup-cards{display:none}
.sup-empty{background:#fff;border:1px solid #E8ECF2;border-radius:14px;padding:52px 24px;text-align:center}
.sup-empty h3{font-size:16px;font-weight:800;margin-bottom:6px}
.sup-empty p{font-size:13px;color:#8A93A6;margin-bottom:16px}
.sup-note{font-size:12px;color:#8A93A6;line-height:1.7;margin:16px 0 46px}

/* ---------- detail ---------- */
.sup-d-top{background:#fff;border:1px solid #E8ECF2;border-radius:16px;padding:26px 28px;box-shadow:0 2px 12px rgba(24,41,72,.05);margin:26px 0 16px}
.sup-back{background:none;border:none;color:#0052FF;font-weight:700;font-size:13px;font-family:inherit;padding:0;cursor:pointer;margin-bottom:14px}
.sup-d-title{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap}
.sup-d-title h1{font-size:26px;font-weight:850;letter-spacing:-.5px;margin:8px 0 10px}
.sup-code-box{display:inline-flex;align-items:center;gap:9px;background:#F7FAFF;border:1px solid #DDE6F8;border-radius:9px;padding:7px 12px;font-size:12.5px;color:#5A6272}
.sup-code-box b{font-family:Menlo,monospace;color:#0052FF;font-size:13px}
.sup-copy{background:none;border:none;color:#0052FF;font-weight:800;font-size:11.5px;cursor:pointer}
.sup-d-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:22px;border-top:1px solid #E8ECF2;padding-top:18px}
.sup-kpi .k{font-size:11px;font-weight:700;color:#8A93A6;letter-spacing:.4px}
.sup-kpi .v{font-size:16px;font-weight:850;margin-top:4px;line-height:1.35}
.sup-kpi .v small{font-size:11.5px;font-weight:600;color:#8A93A6;display:block;margin-top:2px}
.sup-d-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.sup-d-block{background:#fff;border:1px solid #E8ECF2;border-radius:14px;padding:22px 24px;margin-bottom:14px;box-shadow:0 2px 12px rgba(24,41,72,.05)}
.sup-d-block h2{font-size:15px;font-weight:850;margin-bottom:4px}
.sup-d-block .hint{font-size:12px;color:#8A93A6;margin-bottom:14px;line-height:1.6}
.sup-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 16px;font-size:14px;line-height:1.5}
.sup-kv .k{color:#8A93A6}
.sup-kv .v{color:#14181F;font-weight:600;word-break:break-word}
.sup-kv .v.pending{color:#A96B00;font-weight:600}

.sup-tl{list-style:none;margin:0;padding:0;position:relative}
.sup-tl:before{content:'';position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:#E8ECF2}
.sup-tl li{position:relative;padding:0 0 18px 42px}
.sup-tl li:last-child{padding-bottom:0}
.sup-tl .dot{position:absolute;left:6px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid #0052FF}
.sup-tl .who{font-size:11.5px;font-weight:800;color:#0052FF;letter-spacing:.3px}
.sup-tl .what{font-size:13.5px;font-weight:700;margin-top:2px}
.sup-tl .meta{font-size:11.5px;color:#8A93A6;margin-top:3px}

.sup-matrix{width:100%;border-collapse:collapse;font-size:13px}
.sup-matrix th{text-align:left;font-size:11px;font-weight:800;color:#8A93A6;background:#F9FBFF;padding:10px 12px;border-bottom:1px solid #E8ECF2}
.sup-matrix td{padding:11px 12px;border-bottom:1px solid #E8ECF2;color:#5A6272}
.sup-matrix tr:last-child td{border-bottom:none}
.sup-matrix td.doc{color:#14181F;font-weight:700}

.sup-spec td.state{white-space:nowrap}
.sup-state{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px}
.sup-state.c{background:#EAF9F0;color:#17875C}
.sup-state.k{background:#EEF4FF;color:#0052FF}
.sup-state.r{background:#FFF8EC;color:#A96B00}
.sup-state.p{background:rgba(90,98,114,.09);color:#5A6272}
.sup-warn{background:#FFF8EC;border:1px solid #F5E3B8;border-radius:10px;padding:11px 14px;font-size:12.5px;color:#A96B00;font-weight:600;line-height:1.6;margin-bottom:14px}

.sup-note-inline{font-size:12px;color:#8A93A6;line-height:1.7;margin-top:12px}

/* ---------- modal ---------- */
.sup-mask{position:fixed;inset:0;background:rgba(18,26,48,.4);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.sup-modal{background:#fff;border-radius:16px;padding:26px 26px 24px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 60px rgba(18,26,48,.24)}
.sup-modal-x{position:absolute;right:14px;top:12px;border:none;background:none;font-size:22px;color:#8A93A6;cursor:pointer;line-height:1}
.sup-modal h3{font-size:18px;font-weight:850;margin-bottom:4px}
.sup-modal-code{font-size:12.5px;color:#0052FF;font-family:Menlo,monospace;font-weight:700;margin-bottom:16px}
.sup-f{margin-bottom:12px}
.sup-f label{display:block;font-size:12px;font-weight:700;color:#5A6272;margin-bottom:5px}
.sup-f input,.sup-f select{width:100%;padding:10px 12px;border:1.5px solid #E8ECF2;border-radius:9px;font-size:13.5px;background:#fff}
.sup-f input:focus,.sup-f select:focus{outline:none;border-color:#0052FF;box-shadow:0 0 0 3px rgba(0,82,255,.12)}
.sup-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sup-f-err{color:#C83A4B;font-size:12.5px;margin-top:10px;font-weight:600}
.sup-cta-done{text-align:center}
.sup-done-tag{display:inline-block;background:#EAF9F0;color:#17875C;font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 12px}
.sup-done-code{font-family:Menlo,monospace;font-size:17px;font-weight:800;color:#0052FF;margin:14px 0 16px;word-break:break-all}
.sup-done-act{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.sup-done-note{font-size:12.5px;color:#8A93A6;margin-top:14px;line-height:1.7}
.sup-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#14181F;color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:10px 20px;z-index:300}
.sup-foot{border-top:1px solid #E8ECF2;background:#fff;padding:20px 0;margin-top:30px}
.sup-foot p{font-size:12px;color:#8A93A6}

@media (max-width:900px){
  .sup-wrap{padding:0 16px}
  .sup-adv-grid{grid-template-columns:1fr 1fr}
  .sup-d-kpis{grid-template-columns:1fr 1fr}
  .sup-table{display:none}
  .sup-cards{display:block;padding:12px}
  .sup-card{border:1px solid #E8ECF2;border-radius:12px;padding:14px;margin-bottom:10px}
  .sup-card:last-child{margin-bottom:0}
  .sup-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .sup-card .sup-prod{font-size:14.5px}
  .sup-card-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
  .sup-card-rows div{font-size:12px;color:#5A6272}
  .sup-card-rows i{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:#8A93A6;margin-bottom:2px}
  .sup-card-flow{font-size:12px;color:#5A6272;line-height:1.55;margin-bottom:10px}
  .sup-card-act{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sup-table-wrap{box-shadow:none}
}
@media (max-width:560px){
  .sup-head{padding:22px 0 14px}
  .sup-head h1{font-size:24px}
  .sup-search input{width:100%}
  .sup-head-act{width:100%}
  .sup-adv-grid{grid-template-columns:1fr}
  .sup-d-kpis{grid-template-columns:1fr 1fr}
  .sup-kv{grid-template-columns:104px minmax(0,1fr);font-size:13.5px}
  .sup-f2{grid-template-columns:1fr}
}

.sup-pill-model{background:#14181F;color:#fff;font-weight:700;letter-spacing:.5px;margin-right:6px}

/* 列表卡头部：型号 / 交付档位 / 货源编号，纯数据，无封面图 */
.sup-card-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.sup-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700}
.sup-chip.model{background:rgba(20,24,31,.92);color:#fff}
.sup-chip.lane{background:rgba(250,238,218,.95);color:#854F0B}
/* 已无货：继续展示但标出来（2026-10-15）。灰底 + 删除线语义，不跟现货/期货撞色 */
.sup-chip.out{background:rgba(90,98,114,.14);color:#5A6272}
.sup-pill.out{background:rgba(90,98,114,.14);color:#5A6272}
.sup-card.is-out{background:var(--s-sunken,#F7F8FA)}
tr.is-out td{background:var(--s-sunken,#F7F8FA)}
tr.is-out .sup-prod{color:#5A6272}
.sup-card-code{margin-left:auto;font-size:11px;font-weight:600;color:#2C2C2A;background:#F6F8FB;border:1px solid rgba(20,30,60,.08);border-radius:999px;padding:4px 9px;white-space:nowrap}

/* ====== 详情页组件化版式 ====== */
.sup-hero{display:grid;grid-template-columns:1fr;gap:20px;background:#fff;border:1px solid var(--line,#E8ECF2);border-radius:12px;padding:24px;margin-bottom:22px;align-items:start}
.sup-hero-info{min-width:0;display:flex;flex-direction:column;gap:12px}
.sup-hero-chips{display:flex;gap:6px;flex-wrap:wrap}
.sup-hero-info h1{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:normal;line-height:1.3}
.sup-hero-model{font-size:13px;color:#5F6B7A;margin-top:-6px}
.sup-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.sup-stat{background:#F7F9FC;border:1px solid var(--line,#E8ECF2);border-radius:10px;padding:12px 14px;min-width:0;line-height:1.4}
.sup-stat .k{font-size:12px;color:#8A93A6}
.sup-stat .v{font-size:17px;font-weight:700;margin-top:4px;letter-spacing:.2px;overflow-wrap:anywhere}
.sup-stat .s{font-size:11px;color:#8A93A6;margin-top:2px}
.sup-hero-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.sup-hero-meta{font-size:12px;color:#8A93A6;margin-top:0}

.sup-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.sup-card{background:#fff;border:1px solid var(--line,#E8ECF2);border-radius:12px;padding:26px 28px;min-width:0;box-shadow:0 1px 3px rgba(20,30,60,.03)}
.sup-card h2{font-size:16px;font-weight:700;letter-spacing:normal;line-height:1.4;margin-bottom:16px}
.sup-card-hint,.sup-note-inline{font-size:12px;color:#8A93A6;margin-top:12px;line-height:1.6}
.sup-card-wide{margin-bottom:40px}
.sup-muted{font-size:13px;color:#8A93A6}
.sup-spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-content:start}
.sup-spec-cell{border:1px solid var(--line,#E8ECF2);border-radius:8px;padding:11px 13px;background:#FCFDFE;min-width:0;position:relative;line-height:1.4}
.sup-spec-cell .k{font-size:12px;color:#8A93A6}
.sup-spec-cell .v{font-size:14px;font-weight:600;margin-top:3px;word-break:break-word}
.sup-spec-cell .sup-state{display:inline-block;margin-top:7px}

@media (max-width:900px){
  .sup-hero{grid-template-columns:1fr;gap:18px;padding:20px}
  .sup-grid2{grid-template-columns:1fr}
  .sup-stats{grid-template-columns:1fr 1fr}
  .sup-card{padding:20px}
}

/* 四角度图册 */