/* rb_shelf.css — 红账单选购系统 · 买家端 (货架 / 售后 / 一步出码抽屉 / 我的订单) * 2026-09-20 第三十四条 (用户「供应商的风格比买家的好看, 买家的 UI 也跟供应商看齐: 简约、美观、专业, 手机端也要」): * - 设计变量与部件配方**逐字沿用 rb_supplier.css**: 深色底 + 网格 / 光晕 / 噪点固定背景, 毛玻璃 sticky 顶栏, eyebrow 胶囊 + 大标题页头, * 18px 圆角 surface 卡, 胶囊徽标, 分段控件 / 筹码, 系统字体; 亮色主题一键切换 (html.theme-light, localStorage rb_theme, * 首访沿用 rb_sup_theme, 预加载防闪)。信息层级靠字重与 fg / muted / dim 三级灰度, 不再靠实色填块; * 线色 (红账单号 = 玫红, 普通号 = 绿) 只用在时间块竖线 / 大字时间 / 徽标 / 分段控件圆点上。 * - 类名一个没改 (.rb-* 全部保留, 用例守的是类名), 接口零变化, 文案零变化; 二维码保持白底 (微信长按识别)。 * - 手机档 ≤ 760px 与供应商同一个断点: 顶栏不吸顶 (品牌一行 + 入口一行横滚), 卡片一列, 按钮 ≥ 40px, 控件字号 ≥ 14 (iOS 不自动放大), 抽屉贴底。 * - 独立样式, 不依赖 style.css / partner.css, 不影响任何老页面; 供应商 rb_supplier.css 不引用、不改动。 */ /* ============================== 设计变量 (与 rb_supplier.css 同源) ============================== */ :root { --page-pad: clamp(14px, 3vw, 56px); --content-max: 1320px; --bg: #07080c; --bg-elevated: #0c0e14; --fg: #eef0f4; --fg-strong: #fff; --muted: #9aa3b2; --dim: #667085; --line: #ffffff14; --line-strong: #ffffff29; --card: #ffffff09; --card-hover: #ffffff0f; --card-solid: #0f1219; --accent: #4f8cff; --accent-strong: #3b7bff; --accent-soft: #4f8cff24; --accent-line: #4f8cff66; --success: #34d399; --success-soft: #34d39924; --warn: #fbbf24; --warn-soft: #fbbf2424; --danger: #f87171; --danger-soft: #f8717124; --violet: #a78bfa; --violet-soft: #a78bfa24; --shadow-card: 0 1px 0 #ffffff0a inset, 0 12px 32px #00000059; --shadow-card-hover: 0 1px 0 #ffffff0f inset, 0 24px 60px #00000080; --grid-line: #ffffff09; --glow-a: #4f8cff38; --glow-b: #8b5cf629; --nav-bg: #07080c8c; --nav-bg-scrolled: #07080cd1; --code-bg: #00000059; --backdrop: #000000a6; --toast-bg: #f4f6fb; --toast-fg: #0b1220; /* 两个货架的线色 (只做点缀): 红账单号 = 玫红 (与「错误」的 --danger 区分开), 普通号 = 绿 (现在就能用) */ --lane-red: #fb7185; --lane-red-soft: #fb718524; --lane-auto: var(--success); --lane-auto-soft: var(--success-soft); /* 老别名 (抽屉 / 售后页内联片段在用) */ --rb-bg: var(--bg); --rb-card: var(--card); --rb-line: var(--line); --rb-text: var(--fg); --rb-muted: var(--muted); --rb-brand: var(--accent); --rb-auto: var(--lane-auto); --rb-red: var(--lane-red); --radius: 18px; --rb-radius: var(--radius); } html.theme-light { --bg: #f6f7fb; --bg-elevated: #fff; --fg: #0f172a; --fg-strong: #0b1220; --muted: #5b6472; --dim: #8a93a3; --line: #0f172a14; --line-strong: #0f172a29; --card: #fff; --card-hover: #f8f9fc; --card-solid: #fff; --accent: #2f6fed; --accent-strong: #245fd6; --accent-soft: #2f6fed1a; --accent-line: #2f6fed59; --success: #15a36a; --success-soft: #15a36a1f; --warn: #b7791f; --warn-soft: #b7791f1f; --danger: #d64545; --danger-soft: #d645451f; --violet: #7c5cd6; --violet-soft: #7c5cd61a; --shadow-card: 0 1px 2px #0f172a0a, 0 10px 30px #0f172a0f; --shadow-card-hover: 0 2px 4px #0f172a0d, 0 22px 50px #0f172a1a; --grid-line: #0f172a0d; --glow-a: #2f6fed1f; --glow-b: #8b5cf614; --nav-bg: #f6f7fb99; --nav-bg-scrolled: #f6f7fbe0; --code-bg: #0f172a0a; --backdrop: #0f172a66; --toast-bg: #0f172a; --toast-fg: #fff; --lane-red: #dc2650; --lane-red-soft: #dc26501a; } /* ============================== 基础 ============================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: dark; } html.theme-light { color-scheme: light; } body.rb { background: var(--bg); color: var(--fg); min-width: 320px; min-height: 100vh; position: relative; font: 14px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } b { font-weight: 600; } .hidden { display: none !important; } .mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; } .small { font-size: 12px; color: var(--muted); } .rb-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad); width: 100%; position: relative; z-index: 1; } /* 固定背景: 网格 (顶部渐隐) + 两团光晕 + 噪点 —— 与供应商中心同一张底 */ .site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .site-bg .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 55% at 50% 0, #000 30%, #0000 100%); mask-image: radial-gradient(70% 55% at 50% 0, #000 30%, #0000 100%); } .site-bg .bg-glow { position: absolute; border-radius: 50%; filter: blur(80px); } .site-bg .bg-glow-a { background: var(--glow-a); width: 720px; height: 720px; top: -320px; left: 50%; transform: translateX(-60%); } .site-bg .bg-glow-b { background: var(--glow-b); width: 560px; height: 560px; top: -200px; right: -160px; } .site-bg .bg-noise { position: absolute; inset: 0; opacity: .045; mix-blend-mode: overlay; background-size: 160px 160px; background-image: url("data:image/svg+xml;utf8,"); } html.theme-light .site-bg .bg-noise { opacity: .35; mix-blend-mode: multiply; } /* ============================== 顶栏 (毛玻璃, 吸顶) ============================== */ .rb-top { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; } .rb-top.scrolled { background: var(--nav-bg-scrolled); border-bottom-color: var(--line); } .rb-top-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad); min-height: 60px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* 品牌不参与收缩、标题不折行 (2026-09-19 审计 A2: 390 宽下曾被入口挤成两行「号选 / 购」) */ .rb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-strong); flex-shrink: 0; min-width: 0; } .rb-brand:hover { text-decoration: none; } .rb-brand > span:last-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rb-brand b { font-size: 15.5px; font-weight: 650; letter-spacing: .2px; line-height: 1.2; white-space: nowrap; display: block; } .rb-brand small { color: var(--dim); font-size: 12px; font-weight: 500; display: block; white-space: nowrap; } .rb-logo { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: inset 0 0 0 1px #ffffff14; color: #fff; font-weight: 800; font-size: 13px; line-height: 1; } .rb-links { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; } .rb-links a, .rb-link-btn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 7px 12px; border-radius: 8px; white-space: nowrap; line-height: 1.4; transition: color .2s, background .2s; } .rb-links a:hover, .rb-link-btn:hover { color: var(--fg-strong); background: var(--card-hover); text-decoration: none; } /* 「我的订单 (N)」(第二十一条): 本机有记录时点亮成胶囊, 一眼能找到 */ .rb-link-btn.has { background: var(--accent-soft); color: var(--accent); font-weight: 600; border-radius: 999px; } .rb-link-btn.has:hover { background: var(--accent-soft); color: var(--accent-strong); } .rb-theme { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; transition: color .2s, border-color .2s; } .rb-theme:hover { color: var(--fg-strong); border-color: var(--line-strong); } /* 独立第三方声明 (原文不动): 第四十七条起收在页脚最后一行小字 */ .rb-tm { position: relative; z-index: 1; font-size: 11.5px; color: var(--dim); margin: 10px 0 0; line-height: 1.6; } /* 动态提示条 (#rbNotice / 售后查单结果 / 卡片里那句重点说明) */ .rb-notice { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--line); background: var(--card); color: var(--fg); } .rb-notice.err { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } .rb-notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--fg); font-weight: 500; } .rb-notice.warn b { color: var(--fg-strong); } /* ============================== 页头: eyebrow 胶囊 + 大标题 + 一句副标 ============================== */ .rb-head { padding: 30px 0 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; } .rb-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: 13px; } .rb-eyebrow strong { color: var(--fg-strong); font-weight: 600; } .rb-live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); display: inline-block; flex: none; } .rb-title { margin: 14px 0 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -.8px; font-weight: 700; color: var(--fg-strong); } .rb-sub { margin: 10px 0 0; font-size: 15px; color: var(--muted); max-width: 720px; line-height: 1.6; } .rb-sub b { color: var(--fg-strong); } /* 货架首页页头 (第四十七条): 标题放大、留白放宽; 右侧「怎么买」三步胶囊 */ #rbHero { align-items: center; padding: 42px 0 24px; } #rbHero .rb-title { font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; } .rb-flow { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .rb-flow li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .rb-flow li span { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; } /* ============================== 货架分段 (红账单号 / 普通号) + 说明 + 承诺 ============================== */ .rb-tabs { display: flex; gap: 2px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 4px 0 12px; } .rb-tab { flex: 1; height: 40px; border: none; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s; } .rb-tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lane-red); opacity: .45; flex: none; transition: opacity .2s; } .rb-tab[data-kind="auto"]::before { background: var(--lane-auto); } .rb-tab[data-kind="premium"]::before { background: var(--violet); } /* 退役线 (第十五条), 老链接只读 */ .rb-tab[data-kind="hosted"]::before { background: var(--accent); } /* 退役线 (第二十三条), 老链接只读 */ .rb-tab:hover { color: var(--fg-strong); } .rb-tab.active { background: var(--card-solid); color: var(--fg-strong); box-shadow: 0 1px 2px #0003, 0 0 0 1px var(--line); } .rb-tab.active::before { opacity: 1; box-shadow: 0 0 0 3px var(--lane-red-soft); } .rb-tab[data-kind="auto"].active::before { box-shadow: 0 0 0 3px var(--lane-auto-soft); } /* 两个货架 = 两张大按钮 (第四十七条): 第一行线名, 第二行一句话说明 (kinds[].short), 原「我该买哪个」对比块并进来 */ .rb-kinds { padding: 5px; gap: 5px; border-radius: 16px; margin: 0 0 10px; } .rb-kinds .rb-tab { position: relative; height: auto; min-height: 66px; padding: 11px 16px 11px 38px; border-radius: 12px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; text-align: left; min-width: 0; } .rb-kinds .rb-tab::before { position: absolute; left: 17px; top: 19px; width: 8px; height: 8px; } .rb-kinds .rb-tab b { font-size: 16px; font-weight: 700; line-height: 1.3; } .rb-tab-sub { max-width: 100%; font-size: 12.5px; font-weight: 500; color: var(--dim); line-height: 1.45; } .rb-kinds .rb-tab.active .rb-tab-sub { color: var(--muted); } .rb-kinds .rb-tab .rb-spin { position: absolute; left: 14px; top: 16px; margin: 0; } .rb-kinds .rb-tab .rb-busy-t { display: none; } .rb-desc { margin: 4px 2px 12px; color: var(--muted); font-size: 13px; line-height: 1.65; } /* 「详细说明」一行 (第四十七条: lead + desc 全部收起, 默认只见这一行小链接) */ #rbKindDesc { margin: 0 2px 4px; } #rbKindDesc:empty { display: none; } .rb-desc-detail > summary { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; padding: 2px 0; } .rb-desc-detail > summary::-webkit-details-marker { display: none; } .rb-desc-detail > summary::before { content: "▸ "; } .rb-desc-detail[open] > summary::before { content: "▾ "; } .rb-desc-detail > span { display: block; margin: 6px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--muted); line-height: 1.7; } .rb-desc-detail > span b { color: var(--fg-strong); font-weight: 600; } /* 平台三句承诺 (文案与 rb_shelf_api.PROMISES 一字不差): 一段小字, 不加框 */ #rbPromise { font-size: 12.5px; color: var(--dim); margin: 0 2px 16px; line-height: 1.7; } #rbPromise b { color: var(--fg); } /* 档位 + 三枚筹码 (第二十八条): 筹码样式 */ .rb-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; } .rb-subtab { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; } .rb-subtab:hover { border-color: var(--accent-line); color: var(--fg-strong); } .rb-subtab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .rb-subtab-chip { border-style: dashed; } .rb-subtab-first-chip { margin-left: auto; } .rb-subtab-api.active { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 45%, transparent); color: var(--violet); border-style: solid; } .rb-subtab-cred.active { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); border-style: solid; } .rb-subtab-managed.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); border-style: solid; } /* ============================== 商品卡 ============================== */ .rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .rb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: box-shadow .2s, transform .2s, border-color .2s; } .rb-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .rb-card.sold { opacity: .45; filter: grayscale(1); } .rb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rb-card-head > span:last-child { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .rb-tier { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--fg-strong); } /* 徽标 = 胶囊 (与供应商 .pill 同一配方): 默认灰, 按种类点亮 */ .rb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; background: var(--code-bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; } .rb-badge.red { background: var(--lane-red-soft); color: var(--lane-red); border-color: transparent; } .rb-badge.auto { background: var(--lane-auto-soft); color: var(--lane-auto); border-color: transparent; } .rb-badge.rec { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .rb-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .rb-badge.fresh { background: var(--success-soft); color: var(--success); border-color: transparent; } .rb-badge.cred { background: var(--violet-soft); color: var(--violet); border-color: transparent; } /* 含账密 (2026-09-17 附带账密): 只标种类 */ .rb-badge.managed { background: var(--accent-soft); color: var(--accent); border-color: transparent; } /* 第二十八条: 普通号「平台管登录 · token 可刷新找回」 */ .rb-badge.unit { background: var(--code-bg); color: var(--muted); } .rb-badge.premium { background: var(--violet-soft); color: var(--violet); border-color: transparent; } /* 存量老线角标 (第十五条), 只读保留 */ .rb-badge.hosted { background: var(--accent-soft); color: var(--accent); border-color: transparent; } /* 存量老线角标 (第二十三条), 只读保留 */ .rb-kv.hi span:last-child { font-size: 15px; font-weight: 700; color: var(--violet); } /* 到期 / 截止特写块: 大字时间 + 一句含义 —— 只留一根线色竖线, 不填底 */ .rb-when { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; padding: 6px 0 6px 12px; border-left: 3px solid var(--lane-red); background: transparent; border-radius: 0; } .rb-when.auto { border-left-color: var(--lane-auto); } .rb-when.premium { border-left-color: var(--violet); } .rb-when.hosted { border-left-color: var(--accent); } .rb-when-label { font-size: 12px; color: var(--dim); font-weight: 600; } .rb-when-val, .rb-when-val.mono { font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; color: var(--lane-red); font-variant-numeric: tabular-nums; } .rb-when.auto .rb-when-val { color: var(--lane-auto); font-size: 19px; } .rb-when.premium .rb-when-val { color: var(--violet); font-size: 19px; } .rb-when.hosted .rb-when-val { color: var(--accent); font-size: 19px; } .rb-when-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 2px; } /* 「你能拿到的额度」(第二十六条): 四线同一位置同一形状的主字段 —— 上下两根细线, 标签灰 / 值亮 */ .rb-offer { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rb-offer-label { font-size: 11.5px; color: var(--dim); font-weight: 600; } .rb-offer-main { font-size: 14.5px; font-weight: 700; color: var(--fg-strong); line-height: 1.35; } .rb-offer-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* 红单那句重点说明 (/config red_no_quota_outside): 一行灰字 + 一根琥珀色竖线, 不再黄底大框 */ .rb-card .rb-notice.warn { margin: 0; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--warn); border-radius: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.55; } /* 三池额度块 (验号详情里): 标题 + 每池一行「已用 / 剩余」+ 细进度条 + 尾注 */ .rb-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .rb-kv span:first-child { color: var(--muted); white-space: nowrap; } .rb-kv span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); } .rb-kv .mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; } .rb-quota { margin: 6px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .rb-quota-head { font-size: 12px; color: var(--dim); font-weight: 600; } .rb-quota-sub { font-size: 11px; color: var(--dim); margin-top: 2px; } .rb-quota-row { display: flex; flex-direction: column; gap: 3px; } .rb-quota-row .rb-kv { font-size: 12.5px; } .rb-quota-row .rb-kv span:last-child { white-space: nowrap; } .rb-quota-row b { font-weight: 700; color: var(--fg-strong); } .rb-bar { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--line-strong); overflow: hidden; } .rb-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--success); } .rb-bar.low > i { background: var(--warn); } .rb-bar.empty > i { background: var(--danger); } .rb-quota-note { font-size: 11.5px; color: var(--dim); border-top: 1px dashed var(--line-strong); padding-top: 5px; margin-top: 2px; line-height: 1.55; } /* 超额 (按量付费) 行 (第十八条): 已开且已用 → 亮字; 未开 → 灰 */ .rb-od { border-top: 1px dashed var(--line-strong); padding-top: 5px; margin-top: 1px; } .rb-od.off .rb-kv span:last-child { color: var(--dim); } .rb-od.on.used .rb-kv b { color: var(--warn); } .rb-co-quota { color: var(--fg); } .rb-window { font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line-strong); padding-top: 6px; margin-top: 4px; line-height: 1.55; } .rb-verified { margin-top: 6px; } /* 卡片折叠区「验号详情」: 正面只留做决定要用的四件事 */ .rb-more { margin: 0; } .rb-more > summary { font-size: 12px; color: var(--muted); font-weight: 600; cursor: pointer; list-style: none; padding: 6px 0; border-top: 1px dashed var(--line-strong); } .rb-more > summary::-webkit-details-marker { display: none; } .rb-more > summary::before { content: "▸ "; color: var(--dim); } .rb-more[open] > summary::before { content: "▾ "; } .rb-more > summary:hover { color: var(--fg-strong); } .rb-more .rb-window { border-top: 0; padding-top: 2px; } /* 卡脚: 价 + 去下单, 推到卡底 (同一行卡等高) */ .rb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); } .rb-price { font-size: 24px; font-weight: 700; color: var(--fg-strong); letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; } .rb-price small { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; letter-spacing: 0; } /* 按钮 (与供应商 .btn / .btn.primary 同一配方) */ .rb-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .15s; } .rb-go:hover { background: var(--accent-strong); border-color: var(--accent-strong); text-decoration: none; } .rb-go:active { transform: scale(.98); } .rb-go:disabled, .rb-go[disabled] { opacity: .45; cursor: not-allowed; transform: none; } .rb-go.ghost { background: var(--card); border-color: var(--line-strong); color: var(--fg); } .rb-go.ghost:hover { background: var(--card-hover); border-color: var(--accent-line); color: var(--fg-strong); } .rb-go.rb-go-refresh { background: var(--success); border-color: var(--success); color: #062b1c; } .rb-go.rb-go-creds { background: var(--warn); border-color: var(--warn); color: #3a2a00; } html.theme-light .rb-go.rb-go-refresh, html.theme-light .rb-go.rb-go-creds { color: #fff; } .rb-go.rb-go-refresh:hover, .rb-go.rb-go-creds:hover { filter: brightness(1.08); } .rb-empty { grid-column: 1 / -1; padding: 44px 10px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.7; } /* ============================== 页脚: 一排入口 + 一句售后 + 独立声明 ============================== */ .rb-foot { margin: 44px 0 0; padding: 22px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; line-height: 1.7; } .rb-foot p { margin: 4px 0; } .rb-foot a { color: var(--muted); } .rb-foot a:hover { color: var(--fg-strong); } .rb-foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 10px; } .rb-foot-links a { color: var(--fg); font-weight: 600; font-size: 13px; } /* ============================== toast ============================== */ .rb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 999; padding: 10px 16px; border-radius: 12px; background: var(--toast-bg); color: var(--toast-fg); font-size: 13.5px; font-weight: 500; box-shadow: 0 12px 32px #00000059; max-width: min(92vw, 560px); text-align: center; line-height: 1.5; } .rb-toast.ok { background: var(--success); color: #062b1c; } .rb-toast.err { background: var(--danger); color: #fff; } .rb-toast a { color: inherit; font-weight: 700; text-decoration: underline; } .rb-toast-btn { margin-left: 8px; padding: 3px 10px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; cursor: pointer; } /* ============================== 售后 / 查单页 ============================== */ .rb-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px 24px; margin-top: 16px; position: relative; } .rb-panel h1 { margin: 0 0 6px; font-size: 18px; font-weight: 650; color: var(--fg-strong); letter-spacing: -.2px; } .rb-panel .lead { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; } .rb-field { display: flex; gap: 8px; flex-wrap: wrap; } .rb-field input { flex: 1; min-width: 220px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--code-bg); color: var(--fg-strong); font: inherit; font-size: 15px; letter-spacing: .3px; outline: none; transition: border-color .2s, box-shadow .2s; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; } .rb-field input::placeholder { color: var(--dim); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; } .rb-field input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .rb-field .rb-go { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; } .rb-result { margin-top: 14px; } /* 查到的那张单 (内联片段渲染): 嵌在面板里的二级卡 */ .rb-panel .rb-card { background: var(--code-bg); box-shadow: none; border-radius: 14px; padding: 14px 16px; gap: 8px; } .rb-panel .rb-card:hover { transform: none; box-shadow: none; border-color: var(--line); } .rb-panel .rb-card .rb-kv { flex-wrap: wrap; } .rb-panel .rb-card .rb-kv span:last-child { word-break: break-all; } .rb-acc-line, .rb-cred-line { align-items: center; } .rb-acc-line > span:last-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .rb-cred-line .mono { font-size: 12px; word-break: break-all; } .rb-panel .rb-card .rb-notice { margin-top: 8px; } .rb-panel .rb-card-foot { flex-wrap: wrap; gap: 8px 10px; border-top: 1px solid var(--line-strong); } .rb-panel .rb-card-foot > .small { flex: 1 1 240px; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.55; } .rb-panel .rb-card-foot > .rb-go { flex: none; height: 36px; padding: 0 14px; font-size: 13px; } /* 说明 (首登质保 15 分钟): 一条一张小 tip 卡, 三列; 每条开头那个 是小标题独占一行, 句中 保持行内 (2026-09-19 审计 A1) */ .rb-steps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .rb-steps li { padding: 14px 16px; border-radius: 14px; background: var(--code-bg); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.65; } .rb-steps li > b:first-child { display: block; margin-bottom: 4px; font-size: 13px; color: var(--fg-strong); font-weight: 600; } .rb-steps li strong { color: var(--fg); font-weight: 600; } /* ============================== 一步出码抽屉 (第十三条) / 我的订单 (第二十一条) ============================== */ .rb-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; } .rb-modal-mask { position: absolute; inset: 0; background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rb-modal-box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 80px #00000080; color: var(--fg); } .rb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 8px; } .rb-modal-head h3 { margin: 0; font-size: 18px; font-weight: 650; color: var(--fg-strong); letter-spacing: -.3px; } .rb-modal-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: color .2s, border-color .2s; } .rb-modal-x:hover { color: var(--fg-strong); border-color: var(--line-strong); } .rb-modal-body { padding: 4px 22px 22px; } .rb-modal-body .rb-empty { padding: 28px 8px; } .rb-co-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); margin-bottom: 14px; } .rb-co-item > div:first-child { min-width: 0; } .rb-co-item > div:first-child > b { font-size: 15px; color: var(--fg-strong); font-weight: 700; margin-right: 4px; } .rb-co-item .rb-price { font-size: 20px; flex: none; } .rb-co-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; } /* 抽屉摘要 (2026-09-19 审计 A5): 「你能拿到的额度」与卡片同一句、亮字; 三池快照收进「验号详情」折叠 */ .rb-co-offer b { color: var(--accent); font-weight: 700; } .rb-co-item .rb-more { margin: 2px 0 0; } .rb-co-item .rb-more > summary { border-top: 0; padding: 2px 0; } .rb-co-item .rb-quota-note { border-top: 0; padding-top: 0; margin-top: 1px; } .rb-co-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; } .rb-co-input { width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--code-bg); color: var(--fg-strong); font: inherit; font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; } .rb-co-input::placeholder { color: var(--dim); } .rb-co-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .rb-co-hint { font-size: 12px; color: var(--dim); margin: 6px 0 0; line-height: 1.6; } .rb-co-hint b { color: var(--fg); } .rb-co-channels { display: flex; gap: 8px; } .rb-co-ch { flex: 1; height: 44px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--card); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .2s, background .2s, color .2s; } .rb-co-ch:hover { border-color: var(--accent-line); } .rb-co-ch.active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .rb-co-ch .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .rb-co-ch[data-ch="alipay"] .dot { background: #1677ff; } .rb-co-ch[data-ch="wxpay"] .dot { background: #07c160; } .rb-co-pay { width: 100%; margin-top: 14px; height: 48px; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; background: var(--accent); transition: background .2s, transform .15s; } .rb-co-pay:hover { background: var(--accent-strong); } .rb-co-pay:active { transform: scale(.99); } .rb-co-pay:disabled { opacity: .45; cursor: not-allowed; transform: none; } .rb-co-alt { text-align: center; margin: 12px 0 0; font-size: 13px; color: var(--muted); } .rb-co-alt a, .rb-co-alt button { color: var(--accent); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; } .rb-co-alt a:hover, .rb-co-alt button:hover { text-decoration: underline; } .rb-co-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); font-size: 13px; line-height: 1.6; } .rb-co-err a { color: inherit; text-decoration: underline; } /* 「立即支付」前按线那句确认 (/config checkout_confirm 下发) */ .rb-co-confirm { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid transparent; border-left: 3px solid var(--accent); color: var(--fg); font-size: 13px; line-height: 1.6; } .rb-co-ok { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); font-size: 13px; font-weight: 600; line-height: 1.6; } .rb-co-ok a { color: inherit; text-decoration: underline; } /* 二维码: 永远白底 (支付宝 / 微信要扫得出来), 深色主题下也是 */ .rb-qr-wrap { text-align: center; padding: 8px 0 2px; } .rb-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; } .rb-qr svg { width: 220px; height: 220px; display: block; } /* 二维码是 (2026-09-18 第二十一条): 微信「长按识别」只认 ; touch-callout 留 default 才会弹出「识别图中的二维码 / 保存图片」 */ .rb-qr img { width: 220px; height: 220px; display: block; -webkit-touch-callout: default; -webkit-user-select: none; user-select: none; } .rb-qr-amt { font-size: 28px; font-weight: 700; color: var(--fg-strong); margin: 10px 0 0; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .rb-qr-amt small { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 2px; letter-spacing: 0; } .rb-qr-tip { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.6; } .rb-qr-tip b { color: var(--fg-strong); } .rb-qr-tip.warn { color: var(--warn); } .rb-qr-tip.warn b { color: var(--warn); } .rb-qr-count { font-size: 12px; color: var(--dim); margin: 4px 0 0; font-variant-numeric: tabular-nums; } /* 金额 / 提示 / 倒计时 不可选中: 微信里长按二维码旁边时不再把「¥」选中 (用户 2026-09-18) */ .rb-qr-amt, .rb-qr-tip, .rb-qr-count, .rb-co-mobile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* 订单号特写 (第二十一条): 琥珀胶囊底、大号等宽, 出码那一刻就在最上面, 付完还在 */ .rb-orderno { margin: 0 0 10px; } .rb-orderno .rb-card-line { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); } .rb-orderno .rb-card-line > span:first-child { white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--warn); } .rb-orderno code { font-size: 15px; font-weight: 700; letter-spacing: .3px; max-height: none; color: var(--fg-strong); } .rb-orderno .rb-co-hint { margin-top: 6px; } /* 「我的订单」列表 (第二十一条) */ .rb-order { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--code-bg); } .rb-order-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rb-order-head > b { font-size: 15px; color: var(--fg-strong); font-weight: 700; } .rb-order-head .rb-price { margin-left: auto; font-size: 18px; } .rb-order .rb-card-line { background: var(--card); } .rb-order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .rb-order-actions .rb-go { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; } .rb-co-mobile a.alipay.ghost { background: transparent; color: #1677ff; border: 1px solid #1677ff; } .rb-co-poll { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; animation: rbpulse 1.2s ease-in-out infinite; } @keyframes rbpulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .rb-co-mobile { display: grid; gap: 8px; margin: 10px 0 4px; } .rb-co-mobile a { display: block; text-align: center; padding: 13px; border-radius: 12px; font-weight: 700; color: #fff; text-decoration: none; font-size: 15px; } .rb-co-mobile a.alipay { background: #1677ff; } .rb-co-mobile a.wxpay { background: #07c160; } .rb-co-mobile a:hover { text-decoration: none; opacity: .92; } /* 卡密行 (付完显示): 一行一条, 各自能复制 */ .rb-cards { display: grid; gap: 8px; margin: 8px 0; } .rb-card-line { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); } .rb-card-line code { flex: 1; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; color: var(--fg-strong); max-height: 84px; overflow: auto; line-height: 1.5; } .rb-card-line.rb-card-extra code { color: var(--warn); } .rb-copy { height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--card); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; transition: border-color .2s, color .2s; } .rb-copy:hover { border-color: var(--accent-line); color: var(--fg-strong); } .rb-co-steps { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.65; } .rb-co-steps li { margin: 4px 0; } .rb-co-steps b { color: var(--fg); } /* ============================== 在飞态 (t-1474, 用户 2026-09-20「点击提交后应该提示提交中, 而不是没反应」) ============================== */ /* rb_shelf.js / rb_aftersale.html / rb_team.js 各自的 busy(): 按钮加 .busy + disabled + aria-busy, 内容换成 转圈 (.rb-spin) + 场景文案 + 计时 (.rb-busy-t, 3 秒后才有字); * 它在干活不是不可用 —— 不按 :disabled 那样灰掉一半; 不是 button 的控件靠 pointer-events:none 挡住再点。转圈用 currentColor, 深 / 亮主题、任何底色都跟着字色走。 */ .busy { pointer-events: none; cursor: progress; } .rb-go.busy, .rb-go.busy:disabled, .rb-co-pay.busy:disabled, .rb-copy.busy, .rb-tab.busy, .rb-subtab.busy, .rb-co-alt button.busy { opacity: .9; cursor: progress; transform: none; } .rb-spin { display: inline-block; width: .9em; height: .9em; box-sizing: border-box; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rb-spin .7s linear infinite; vertical-align: -.12em; margin-right: .45em; } .rb-go .rb-spin, .rb-tab .rb-spin, .rb-subtab .rb-spin { margin-right: 0; } /* 这些是 inline-flex, 间距由 gap 给 */ .rb-tab.busy::before { display: none; } /* 转圈顶替线色圆点, 别两个小圆挤一起 */ .rb-busy-t { margin-left: .35em; opacity: .75; font-variant-numeric: tabular-nums; font-weight: 500; } .rb-go .rb-busy-t, .rb-tab .rb-busy-t, .rb-subtab .rb-busy-t { margin-left: 0; } .rb-busy-t:empty { display: none; } @keyframes rb-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rb-spin { animation-duration: 1.6s; } } /* ============================== 联系群主 (第三十九条号码; 第四十七条起只在售后页 / 卖 Team 查单区) ============================== */ /* 一张安静的卡: 标题一句 + 两行号码 (等宽大字、整段可选) + 复制; 只用设计变量, 不新加颜色, 深 / 亮主题都读得清。复制走页面现成的 [data-copy]。 */ .rb-contact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px; } .rb-contact-lead { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rb-contact-lead b { font-size: 16px; font-weight: 650; color: var(--fg-strong); line-height: 1.35; } .rb-contact-lead span { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .rb-contact-items { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .rb-contact-item { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); min-width: 0; } .rb-contact-k { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .rb-contact-num { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 19px; font-weight: 700; letter-spacing: .4px; line-height: 1.2; color: var(--fg-strong); text-decoration: none; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; min-width: 0; } a.rb-contact-num:hover { text-decoration: underline; color: var(--accent); } .rb-contact .rb-copy { height: 28px; padding: 0 10px; } .rb-contact-note { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.55; } /* 嵌在面板里时 (卖 Team 查单区) 降一级: 不投影、底色退一档 */ .rb-panel .rb-contact { margin-top: 16px; padding: 16px; box-shadow: none; background: var(--code-bg); } .rb-panel .rb-contact-item { background: var(--card); } /* 售后结果卡 token 行下方 / 付完那一屏的短句: 「登不上 IDE 用 CursorAccountManager 切号工具」 */ .rb-ide-tip { font-size: 12px; color: var(--muted); line-height: 1.55; padding: 8px 10px; border-radius: 10px; background: var(--code-bg); border-left: 3px solid var(--accent); } .rb-ide-tip b { color: var(--fg-strong); font-weight: 600; } /* 售后页两栏: 左查单 (主操作), 右联系群主; ≤ 1000px 上下叠 */ .rb-as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 4px; } .rb-as-grid > .rb-panel { margin-top: 0; } .rb-as-side { position: sticky; top: 76px; } /* 常见问题 (第四十七条): 一问一答, 默认只见问题; 两列 */ .rb-faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .rb-faq-head h1 { margin: 0; } .rb-faq-head a { font-size: 13px; font-weight: 600; } .rb-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .rb-faq-item { border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); transition: border-color .2s; } .rb-faq-item[open] { border-color: var(--line-strong); } .rb-faq-item > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--fg-strong); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rb-faq-item > summary::-webkit-details-marker { display: none; } .rb-faq-item > summary::after { content: "+"; color: var(--dim); font-size: 16px; font-weight: 500; line-height: 1; flex: none; } .rb-faq-item[open] > summary::after { content: "−"; } .rb-faq-item > summary:hover { color: var(--accent); } .rb-faq-item > p { margin: 0; padding: 0 14px 13px; font-size: 13px; color: var(--muted); line-height: 1.7; } @media (max-width: 1000px) { .rb-as-grid { grid-template-columns: 1fr; } .rb-as-side { position: static; } } @media (max-width: 760px) { .rb-faq-list { grid-template-columns: 1fr; } .rb-contact { padding: 16px; } .rb-contact-num { font-size: 18px; } } /* ============================== 第四十二条 (2026-09-21): 质保角标 / 下单「已阅读政策」/ 售后「这单附带了什么」/ 政策页 ============================== */ /* 普通号卡片角标「质保 x」(份上快照 warranty_label; 商家自选, 同档同价质保长的排前): 琥珀胶囊, 与「推荐」同色系 (推荐只在红账单号卡上, 不会同框) */ .rb-badge.warranty { background: var(--warn-soft); color: var(--warn); border-color: transparent; } /* 折叠区里「平台验号 · 首登质保 x」旁的「售后规则」小链接 → /policy (PRD 第四十二条 ① 卡片一句「售后规则」) */ .rb-verified { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rb-policy-link { font-size: 12px; color: var(--muted); white-space: nowrap; } .rb-policy-link:hover { color: var(--fg-strong); } /* 抽屉「立即支付」上方一句「下单即表示已阅读《售后与退款政策》」(/config policy_ack_text, 链接 policy_url 新开页) */ .rb-co-ack { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.6; } .rb-co-ack a { color: var(--accent); font-weight: 600; } /* 付完那一屏「本单质保至 xx:xx」 */ .rb-co-warranty { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); } .rb-co-warranty b { color: var(--fg-strong); font-variant-numeric: tabular-nums; } /* 售后查单结果卡「这单附带了什么」(order_detail.attached): 标题 + 三行 有 / 无 + 接码地址明文可复制 + 一句责任提示 */ .rb-attached { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .rb-attached-head { font-size: 12px; color: var(--dim); font-weight: 600; } .rb-attached .rb-kv { font-size: 12.5px; } .rb-attached .rb-kv span:last-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .rb-attached code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; color: var(--fg-strong); text-align: left; } .rb-attached .yes { color: var(--success); font-weight: 600; } .rb-attached .no { color: var(--dim); } .rb-attached-note { font-size: 11.5px; color: var(--dim); border-top: 1px dashed var(--line-strong); padding-top: 5px; line-height: 1.55; } .rb-attached-note a { color: var(--muted); } /* ---- 政策页 /policy (templates/rb_policy.html): 与货架同一套壳, 正文八块 + 供应商条款, 手机档不横溢 ---- */ .rb-policy .rb-sub { max-width: 860px; } .rb-policy-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; } .rb-policy-toc a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--muted); white-space: nowrap; transition: border-color .2s, color .2s; } .rb-policy-toc a:hover { border-color: var(--accent-line); color: var(--fg-strong); text-decoration: none; } .rb-policy-toc a.sup { border-style: dashed; margin-left: auto; } .rb-policy-sec { scroll-margin-top: 72px; } .rb-policy-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 650; color: var(--fg-strong); letter-spacing: -.2px; } .rb-policy-no { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; } .rb-policy-no.sup { background: var(--violet-soft); color: var(--violet); } .rb-policy-sec .lead { margin: 0 0 12px; } .rb-policy-sec .lead b { color: var(--fg-strong); } /* (1) 三张商品卡: 一行三张, 线色竖线区分 */ .rb-policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .rb-policy-card { padding: 14px 16px; border-radius: 14px; background: var(--code-bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: 12.5px; color: var(--muted); line-height: 1.65; } .rb-policy-card.auto { border-left-color: var(--lane-auto); } .rb-policy-card.red { border-left-color: var(--lane-red); } .rb-policy-card.team { border-left-color: var(--dim); } .rb-policy-card h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--fg-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rb-policy-card p { margin: 6px 0 0; } .rb-policy-card b { color: var(--fg); } .rb-policy-card code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--fg); } /* (2)(5)(7) 说明卡复用 .rb-steps 的三列小卡; 政策页里改两列更宽 */ .rb-policy-steps { grid-template-columns: 1fr 1fr; margin-top: 0; } /* (3) 责任矩阵白话版: 一行一件事 = 责任胶囊 + 情形 + 处置, 不用表格 (390 宽也不横溢) */ .rb-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rb-case { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; } .rb-case > b { color: var(--fg-strong); font-weight: 600; } .rb-case > span:last-child { grid-column: 2; color: var(--muted); } .rb-case > span:last-child strong { color: var(--fg); font-weight: 600; } .rb-case-who { grid-row: 1 / span 2; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; margin-top: 1px; } .rb-case-who.seller { background: var(--lane-red-soft); color: var(--lane-red); } .rb-case-who.buyer { background: var(--accent-soft); color: var(--accent); } .rb-case-who.none { background: var(--code-bg); color: var(--muted); border: 1px solid var(--line-strong); } /* (4) 流程: 编号竖排 */ .rb-policy-flow { margin: 0; padding: 0; list-style: none; counter-reset: flow; display: grid; gap: 8px; } .rb-policy-flow li { counter-increment: flow; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; } .rb-policy-flow li::before { content: counter(flow); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; grid-row: 1 / span 2; } .rb-policy-flow li > b { color: var(--fg-strong); font-weight: 600; } .rb-policy-flow li > span { grid-column: 2; color: var(--muted); } .rb-policy-note { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--fg); font-size: 12.5px; line-height: 1.6; } .rb-policy-num { color: var(--warn); font-variant-numeric: tabular-nums; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; -webkit-user-select: all; user-select: all; } .rb-policy-sec .rb-copy { height: 26px; padding: 0 8px; vertical-align: middle; } /* 供应商条款: 有序小卡 */ .rb-terms { border-color: color-mix(in srgb, var(--violet) 35%, transparent); } .rb-terms-list { margin: 0; padding: 0; list-style: none; counter-reset: terms; display: grid; gap: 8px; } .rb-terms-list li { counter-increment: terms; padding: 10px 12px 10px 40px; position: relative; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.65; } .rb-terms-list li::before { content: counter(terms); position: absolute; left: 12px; top: 11px; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--violet-soft); color: var(--violet); font-size: 12px; font-weight: 800; } .rb-terms-list li > b:first-child { display: block; margin-bottom: 3px; color: var(--fg-strong); font-weight: 600; font-size: 13px; } .rb-terms-list li strong { color: var(--fg); font-weight: 600; } /* ============================== 第四十三条 (2026-09-22): 售后协同 —— 凭号找单 / 发起售后表单 / 进度条 / 留言区 (只用设计变量, 不新加颜色) ============================== */ /* 查单框下第二个入口「用当时发给你的号找」:
折叠, summary 像一行小链接 */ .rb-alt { margin-top: 10px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--code-bg); } .rb-alt > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; user-select: none; } .rb-alt > summary::-webkit-details-marker { display: none; } .rb-alt > summary::before { content: "▸"; color: var(--accent); font-size: 12px; transition: transform .2s; } .rb-alt[open] > summary::before { transform: rotate(90deg); } .rb-alt > summary b { color: var(--accent); font-weight: 600; } .rb-alt > summary:hover b { text-decoration: underline; } .rb-alt-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; } .rb-alt-lead, .rb-alt-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .rb-alt-lead b { color: var(--fg-strong); font-weight: 600; } .rb-alt-note { font-size: 12px; color: var(--dim); } .rb-alt-row { display: flex; gap: 8px; flex-wrap: wrap; } .rb-alt-row input { flex: 1 1 200px; min-width: 0; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--card); color: var(--fg-strong); font: inherit; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; } .rb-alt-row input::placeholder, .rb-alt textarea::placeholder, .rb-aform textarea::placeholder, .rb-aform input::placeholder { color: var(--dim); } .rb-alt-row input:focus, .rb-alt textarea:focus, .rb-aform textarea:focus, .rb-aform input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .rb-alt-row .rb-go { flex: none; height: 42px; padding: 0 18px; font-size: 14px; border-radius: 11px; } .rb-alt textarea, .rb-aform textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--card); color: var(--fg-strong); font: inherit; font-size: 13.5px; line-height: 1.5; outline: none; transition: border-color .2s, box-shadow .2s; } .rb-alt textarea { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; } /* 「发起售后」表单 (点按钮才画在卡片里) 与 售后单留言表单 共用一套 */ .rb-aform { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: 8px; } .rb-aform-title { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); } .rb-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; } .rb-radio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--code-bg); font-size: 13px; color: var(--fg); cursor: pointer; } .rb-radio:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg-strong); } .rb-radio.off { opacity: .55; cursor: not-allowed; } .rb-radio input { margin: 0; accent-color: var(--accent); flex: none; } .rb-aform-row { display: flex; gap: 8px; flex-wrap: wrap; } .rb-aform-row input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--code-bg); color: var(--fg-strong); font: inherit; font-size: 13.5px; outline: none; transition: border-color .2s, box-shadow .2s; } .rb-aform-row .rb-go { flex: none; height: 40px; padding: 0 16px; font-size: 13.5px; } .rb-aform-note { font-size: 12px; color: var(--dim); line-height: 1.55; } .rb-aform-note [data-cfg] { color: var(--fg); font-weight: 600; } .rb-aform-err { font-size: 12.5px; color: var(--danger); background: var(--danger-soft); border-radius: 8px; padding: 6px 10px; line-height: 1.5; } .rb-aform-foot { display: flex; justify-content: flex-end; gap: 8px; } .rb-aform-foot .rb-go { height: 38px; padding: 0 16px; font-size: 13.5px; } /* 售后单块: 头 + 进度条 4 段 + 责任提示 + 结果句 + 留言 */ .rb-aftersale { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .rb-aftersale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rb-aftersale-head b { font-size: 14px; color: var(--fg-strong); font-weight: 650; } .rb-aftersale-head span { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .rb-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; } .rb-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 4px 6px; border-radius: 10px; background: var(--code-bg); border: 1px solid var(--line); min-width: 0; } .rb-step i { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); box-sizing: border-box; } .rb-step b { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; word-break: break-word; } .rb-step small { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; } .rb-step.done i { background: var(--success); border-color: var(--success); } .rb-step.done b { color: var(--fg-strong); } .rb-step.current { border-color: var(--warn); background: var(--warn-soft); } .rb-step.current i { background: var(--warn); border-color: var(--warn); animation: rb-step-pulse 1.4s ease-in-out infinite; } .rb-step.current b { color: var(--fg-strong); } .rb-step.skipped { opacity: .55; } .rb-step.skipped b { text-decoration: line-through; } .rb-step.pending i { border-style: dashed; } @keyframes rb-step-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--warn-soft); } 50% { box-shadow: 0 0 0 5px var(--warn-soft); } } @media (prefers-reduced-motion: reduce) { .rb-step.current i { animation: none; } } .rb-liab { font-size: 12.5px; color: var(--muted); line-height: 1.6; padding: 8px 10px; border-radius: 10px; background: var(--code-bg); border-left: 3px solid var(--violet); } .rb-liab b { color: var(--fg-strong); font-weight: 600; } .rb-msgs-title { font-size: 12px; color: var(--dim); font-weight: 600; border-top: 1px dashed var(--line-strong); padding-top: 8px; } .rb-msgs { display: flex; flex-direction: column; gap: 6px; } .rb-msg { padding: 8px 10px; border-radius: 10px; background: var(--code-bg); border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--line-strong); } .rb-msg.buyer { border-left-color: var(--accent); } .rb-msg.supplier { border-left-color: var(--violet); } .rb-msg.admin { border-left-color: var(--warn); } .rb-msg.system { border-left-color: var(--line-strong); background: transparent; border-style: dashed; } .rb-msg-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 3px; } .rb-msg-who { font-weight: 700; color: var(--fg-strong); } .rb-msg.buyer .rb-msg-who { color: var(--accent); } .rb-msg.supplier .rb-msg-who { color: var(--violet); } .rb-msg.admin .rb-msg-who { color: var(--warn); } .rb-msg.system .rb-msg-who { color: var(--dim); font-weight: 600; } .rb-msg-at { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .rb-msg-text { font-size: 13px; color: var(--fg); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .rb-msg.system .rb-msg-text { color: var(--muted); font-size: 12.5px; } .rb-msg-img { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--accent); } .rb-msg-empty, .rb-msg-closed { font-size: 12.5px; color: var(--dim); } .rb-msg-form { margin-top: 2px; border-color: var(--line); background: var(--code-bg); } .rb-msg-form textarea, .rb-msg-form .rb-aform-row input { background: var(--card); } /* ============================== 响应式 ============================== */ @media (max-width: 1100px) { .rb-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .rb-steps { grid-template-columns: 1fr 1fr; } .rb-policy-grid { grid-template-columns: 1fr; } } /* ---- 手机 (≤ 760px, 与供应商同一断点): 顶栏不吸顶、品牌一行 + 入口一行横滚; 卡片一列; 抽屉贴底 ---- */ @media (max-width: 760px) { :root { --page-pad: 14px; } /* 顶栏一行: 品牌 + 「我的订单 / 售后」+ 主题 (第四十七条: 入口只剩两个, 不再第二行横滚) */ .rb-top-inner { min-height: 54px; gap: 6px; flex-wrap: nowrap; } .rb-brand small { display: none; } .rb-links { flex-wrap: nowrap; gap: 0; min-width: 0; } .rb-links a, .rb-link-btn { font-size: 13px; padding: 6px 8px; } .rb-theme { width: 32px; height: 32px; } .rb-head { padding: 18px 0 12px; } #rbHero { padding: 22px 0 14px; } .rb-title, #rbHero .rb-title { font-size: 26px; letter-spacing: -.6px; } .rb-sub { font-size: 14px; } .rb-flow { width: 100%; gap: 6px; flex-wrap: nowrap; } .rb-flow li { flex: 1 1 0; justify-content: center; height: 34px; padding: 0 6px 0 4px; gap: 6px; font-size: 12.5px; } .rb-flow li span { width: 20px; height: 20px; font-size: 11px; } .rb-tab { font-size: 14px; } .rb-kinds .rb-tab { min-height: 74px; padding: 10px 10px 10px 28px; } .rb-kinds .rb-tab::before { left: 12px; top: 17px; } .rb-kinds .rb-tab b { font-size: 15px; } .rb-tab-sub { font-size: 12px; } .rb-subtabs { margin-bottom: 12px; } .rb-subtab-first-chip { margin-left: 0; } .rb-grid { grid-template-columns: 1fr; gap: 12px; } .rb-card { padding: 16px; } .rb-when-val, .rb-when-val.mono { font-size: 21px; } .rb-go { height: 40px; font-size: 14px; } .rb-price { font-size: 23px; } .rb-panel { padding: 16px; } .rb-field input { min-width: 0; flex: 1 1 160px; font-size: 15px; } .rb-steps { grid-template-columns: 1fr; } /* 政策页 (第四十二条): 目录横滚不撑宽、矩阵一列、责任胶囊挪到情形上方 */ .rb-policy-toc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rb-policy-toc::-webkit-scrollbar { display: none; } .rb-policy-toc a.sup { margin-left: 0; } .rb-policy-sec { scroll-margin-top: 12px; } .rb-policy-steps, .rb-cases { grid-template-columns: 1fr; } .rb-case { grid-template-columns: 1fr; } .rb-case-who { grid-row: auto; justify-self: start; margin-bottom: 2px; } .rb-case > span:last-child { grid-column: 1; } .rb-attached .rb-kv { flex-wrap: wrap; } .rb-attached .rb-kv span:last-child { justify-content: flex-start; } /* 售后卡脚 (2026-09-19 审计 A4): 说明小字独占一行, 两三个按钮另起一行平分 */ .rb-panel .rb-card-foot > .small { flex: 1 1 100%; } .rb-panel .rb-card-foot > .rb-go { flex: 1 1 auto; height: 40px; font-size: 13.5px; } /* 第四十三条: 凭号找单三件竖排、进度条两列、原因单选一列、留言时间换行不挤 (390 宽不横溢) */ .rb-alt-row input, .rb-alt-row .rb-go { flex: 1 1 100%; } .rb-progress { grid-template-columns: 1fr 1fr; } .rb-radios { grid-template-columns: 1fr; } .rb-aform-row input, .rb-aform-row .rb-go { flex: 1 1 100%; } .rb-aform-foot .rb-go { flex: 1 1 auto; } .rb-msg-head { flex-wrap: wrap; } /* 抽屉全宽贴底 */ .rb-modal { align-items: flex-end; padding: 0; } .rb-modal-box { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; } .rb-modal-head { padding: 16px 16px 6px; } .rb-modal-body { padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)); } .rb-co-input, .rb-co-ch { font-size: 14px; } .rb-qr svg { width: 180px; height: 180px; } .rb-qr img { width: 200px; height: 200px; } /* 微信长按识别: 码别太小 */ .rb-toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 13px; } } @media (max-width: 400px) { .rb-card-head { flex-wrap: wrap; } .rb-card-head > span:last-child { justify-content: flex-start; } }