/* 产品目录（2026-09-27 br6：多语种、勾选拼客户链接、大图先显示缩略图；br4：场景 / 大类小类 / 页型标签筛选、整本目录、中英切换）：搜 → 卡片网格 → 点开大图/下载。
   色值一律走 tokens.css 语义 token。内容区不设 px 宽度上限。 */
[hidden] { display: none !important; }
body { background: var(--canvas); }
.br-app { margin: 0 auto; padding: 22px 18px 60px; }
.br-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.br-head h1 { margin: 0 0 4px; font-size: 22px; }
.br-head p { margin: 0; color: var(--muted); font-size: 13px; max-width: 860px; line-height: 1.6; }
.br-lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; background: var(--surface); }
.br-lang button { border: 0; background: transparent; color: var(--ink-2); padding: 6px 14px; font-size: 13px; cursor: pointer; }
.br-lang button.on { background: var(--green); color: var(--surface); }
.br-search { margin: 16px 0 10px; }
.br-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: var(--surface); color: var(--ink); }
.br-search input:focus { outline: 2px solid var(--mint); outline-offset: 1px; border-color: var(--green); }

/* 整本目录（10-15 改直观）：常用的看稿版两本做成带封面的卡片（咖啡琥珀色、餐饮蓝色），印刷厂版收在下面一行点开才出 */
.br-books { margin: 4px 0 14px; }
/* 10-24 整本画册挪到最下面：和上面的目录页隔开一点 */
.br-pages + .br-books { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-books h2 { font-size: 14px; margin: 0 0 8px; color: var(--ink-2); }
.br-book-list { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 12px; max-width: 860px; }   /* 咖啡 / 餐饮 × 英 / 中：一行一本书的两种语言 */   /* 列宽上限写成 1fr + 整块封顶：写成 minmax(280px, 420px) 时浏览器按 420 算能放几列，窄窗口只剩一列 */
.br-book { background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 12px; display: flex; gap: 14px; align-items: flex-start; }
.br-book-coffee { background: var(--a-50); border-color: var(--a-200); border-left-color: var(--a-600); }
.br-book-kitchen { background: var(--b-50); border-color: var(--b-200); border-left-color: var(--b-600); }
.br-book-cover { flex: none; display: block; width: 92px; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-1); }
.br-book-cover img { display: block; width: 100%; aspect-ratio: 595 / 842; object-fit: cover; }
.br-book-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.br-book-name { font-size: 20px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.br-book-lang { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.br-book-coffee .br-book-name { color: var(--a-700); }
.br-book-kitchen .br-book-name { color: var(--b-700); }
.br-book-facts { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.br-book-made { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.br-book-open { margin-top: 6px; font-size: 14px; font-weight: 700; padding: 6px 18px; }
.br-book-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }   /* 「打开看」（网页版）+「PDF」一排 */
.br-book-acts .br-book-open { margin-top: 0; }
.br-book-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.br-book-send em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--muted); }
.br-book .br-btn, .br-book-prow .br-btn { white-space: nowrap; }
.br-book-print { margin-top: 10px; font-size: 12px; color: var(--muted); }
.br-book-print summary { cursor: pointer; display: inline-block; padding: 4px 12px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--ink-2); font-weight: 600; list-style: none; }
.br-book-print summary::-webkit-details-marker { display: none; }
.br-book-print summary::before { content: "▸"; color: var(--muted); margin-right: 6px; }
.br-book-print[open] summary::before { content: "▾"; }
.br-book-print summary span { font-weight: 400; color: var(--muted); margin-left: 8px; }
.br-book-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 6px 10px; border-left: 4px solid var(--line); background: var(--surface); border-radius: 8px; max-width: 860px; }
.br-book-prow.br-book-coffee { border-left-color: var(--a-600); }
.br-book-prow.br-book-kitchen { border-left-color: var(--b-600); }
.br-book-prow b { font-size: 13px; color: var(--ink); }
.br-book-prow > span { margin-right: auto; }
@media (max-width: 640px) {
  .br-book-list { grid-template-columns: 1fr; }
  .br-book-cover { width: 76px; }
  .br-book-name { font-size: 18px; }
}

.br-facets { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.br-row { display: flex; gap: 10px; align-items: flex-start; }
.br-row[hidden] { display: none; }
.br-lab { flex: none; width: 76px; font-size: 12px; color: var(--muted); padding-top: 5px; cursor: help; }
.br-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.br-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.br-chip em { font-style: normal; color: var(--muted); margin-left: 4px; font-size: 11px; }
.br-chip.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.br-chip.on em { color: var(--green); }
.br-chip.tag { border-style: dashed; }
.br-rule { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
/* 过期目录 + 重置条件（9-28）：一行放下，重置按钮靠右 */
.br-row-end { align-items: center; }
.br-row-end .br-chips { flex: 1 1 auto; }
.br-old { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.br-old em { font-style: normal; color: var(--muted); font-size: 11px; }
.br-oldbar { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 8px; padding: 6px 10px; }
.br-oldbar .br-btn { margin-left: 8px; }
.br-oldbar span { color: var(--muted); font-size: 11.5px; }
.br-stopped { font-size: 11.5px; line-height: 1.45; color: var(--warning-fg); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 6px; padding: 3px 7px; cursor: help; }
.br-card.expired .br-thumb img { filter: grayscale(0.7); opacity: .8; }

.br-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.br-count { font-size: 12px; color: var(--muted); }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.br-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.br-card.k-guide, .br-card.k-scene { border-color: var(--accent-soft-border); box-shadow: var(--shadow-1); }
.br-card.k-series { border-color: var(--brand-soft-border); }
.br-thumb { position: relative; display: block; border: 0; padding: 0; background: var(--surface-hover); cursor: zoom-in; aspect-ratio: 1588 / 2246; overflow: hidden; }
.br-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.br-kind { position: absolute; left: 8px; top: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-1); }
.k-guide .br-kind, .k-scene .br-kind { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.k-series .br-kind { background: var(--brand-soft-bg); color: var(--brand-soft-fg); }
.k-new .br-kind { background: var(--green-soft); color: var(--green); }
.br-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.br-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.br-code { font-size: 11.5px; font-weight: 700; color: var(--ink); background: var(--surface-hover); border-radius: 4px; padding: 1px 6px; }
.br-code.hit { background: var(--green-soft); color: var(--green); }
.br-restrict { font-size: 11.5px; line-height: 1.45; color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 6px; padding: 4px 7px; cursor: help; }
.br-restrict span { font-weight: 700; }
.br-restrict ul { margin: 2px 0 0; padding-left: 14px; }
.br-names { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.br-callout { font-size: 12.5px; font-weight: 700; color: var(--danger-fg); font-style: italic; }
.br-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.br-mini { border: 0; background: var(--surface-sunken); color: var(--ink-2); border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; }
.br-mini:hover { background: var(--green-soft); color: var(--green); }
.br-hot { font-size: 11px; font-weight: 700; color: var(--warning-fg); background: var(--warning-bg); border-radius: 4px; padding: 1px 6px; }
.br-fb { font-size: 11px; color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; padding: 0 5px; cursor: help; }
.br-source { font-size: 11px; color: var(--muted); }
.br-snip { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.br-snip mark { background: var(--warning-bg); color: inherit; }
.br-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.br-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; text-decoration: none; }
.br-btn.primary { background: var(--green); border-color: var(--green); color: var(--surface); }
.br-empty { color: var(--muted); font-size: 13px; margin-top: 20px; }
.br-hintline { color: var(--ink); margin-bottom: 10px; }   /* 0 条时「按参数找 → 问一问」「TC 路径 → 文件检索」那一行（10-18） */
.br-view { border: 0; padding: 0; border-radius: 10px; max-width: min(96vw, 900px); max-height: 94vh; overflow: auto; }
.br-view::backdrop { background: var(--overlay); }
.br-view-bar { position: sticky; top: 0; display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.br-view-bar #br-view-title { font-size: 13px; font-weight: 700; margin-right: auto; }
.br-view-actions { display: flex; gap: 6px; }
.br-view img { display: block; width: 100%; }
@media (max-width: 640px) {
  .br-head { flex-direction: column; }
  .br-row { flex-direction: column; gap: 4px; }
  .br-lab { width: auto; padding-top: 0; }
}

/* br6：语种说明、勾选拼客户链接、大图加载提示 */
.br-lang { flex-wrap: wrap; border-radius: 12px; }
.br-lang-note { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.br-card { position: relative; }
.br-pick { position: absolute; right: 8px; top: 8px; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 4px; font-size: 12px; color: var(--ink-2); display: flex; gap: 4px; align-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
.br-pick input { margin: 0; cursor: pointer; }
.br-selbar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 auto; padding: 10px 18px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 13px; }
.br-selbar #br-sel-n { margin-right: auto; color: var(--ink-2); }
.br-view-status { font-size: 12px; color: var(--muted); }
.br-view-tip { margin: 0; padding: 6px 12px; font-size: 12px; color: var(--ink-2); background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.br-view-bar { flex-wrap: wrap; }

/* br13：做页申请 */
.br-headr { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.br-reqs { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.br-reqs summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.br-reqs summary em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }
.br-req-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.br-req-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.br-req-row .who { color: var(--muted); font-size: 12px; }
.br-req-row .what b { color: var(--ink); }
.br-req-row .what span { color: var(--muted); margin-left: 6px; }
.br-req-st { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--surface-sunken); color: var(--ink-2); white-space: nowrap; }
.br-req-st.done { background: var(--green-soft); color: var(--green); }
.br-req-st.waiting { background: var(--warning-bg); color: var(--warning-fg); }
.br-req-st.rejected { background: var(--danger-bg); color: var(--danger-fg); }
.br-req-urgent { color: var(--danger-fg); font-weight: 700; margin-left: 4px; }
/* 我的联系方式（9-28）：登记了就是绿底，一眼看出自己发出去的是谁的号码 */
.br-me-open { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; border: 1px dashed var(--warning-border); background: var(--warning-bg); color: var(--warning-fg);
              border-radius: 10px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: right; }
.br-me-open small { font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.br-me-open.on { border-style: solid; border-color: var(--green); background: var(--green-soft); color: var(--green); }
.br-me-open b { color: var(--ink); }
.br-medlg .br-rule { font-size: 12.5px; }
.br-me-when { font-size: 12px; color: var(--muted); align-self: center; }
.br-me-all { font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; }
.br-me-all summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.br-me-all table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.br-me-all th, .br-me-all td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.br-me-all ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.br-reqdlg { border: 0; border-radius: 12px; padding: 0; width: min(560px, 94vw); }
.br-reqdlg::backdrop { background: var(--overlay); }
.br-reqdlg form { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.br-reqdlg h2 { margin: 0; font-size: 17px; }
.br-reqdlg label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.br-reqdlg label span { font-weight: 400; font-size: 12px; color: var(--muted); }
.br-reqdlg input:not([type]), .br-reqdlg textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); }
.br-reqdlg fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.br-reqdlg fieldset legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.br-reqdlg fieldset label, .br-reqdlg .br-inline { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.br-req-msg { margin: 0; font-size: 12.5px; color: var(--danger-fg); min-height: 1em; }
.br-req-actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .br-headr { align-items: stretch; } .br-req-row { grid-template-columns: 1fr; gap: 2px; } }

/* br13：卡片之间分得清（用户 9-27：「很长，视觉上区分一下，知道那张单张去到哪里」）
   页面图放在浅灰「托盘」上（白纸放在托盘里的感觉）、卡片顶上一条按页型的色条、只露上面六成（标题+主图+卖点），点开看整页 */
.br-grid { gap: 20px; }
.br-card { box-shadow: var(--shadow-1); border-top: 4px solid var(--muted); }
.br-card.k-new { border-top-color: var(--green); }
.br-card.k-guide, .br-card.k-scene { border-top-color: var(--accent-soft-fg); }
.br-card.k-series { border-top-color: var(--brand-soft-fg); }
.br-card.k-generated { border-top-color: var(--warning-fg); }
.br-thumb { aspect-ratio: 1588 / 1400; background: var(--surface-sunken); padding: 10px 10px 0; }
.br-thumb img { border-radius: 4px 4px 0 0; box-shadow: var(--shadow-1); object-position: top; }
.br-thumb::after { content: "点开看整页"; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: flex-end; justify-content: center;
                   padding-bottom: 6px; font-size: 11.5px; color: var(--ink-2); background: linear-gradient(to bottom, transparent, var(--surface-sunken) 72%); pointer-events: none; }
.br-body { border-top: 1px solid var(--line); }
.br-thumb img { background-size: cover; background-position: top; }   /* 换语种时先垫着旧图 */
/* 申请人那一格固定 96px：名字/账号再长也在格子里折行，不压到右边「型号」那一格（9-27 用户截图：fs_3805… 压着「简道云里没找到」） */
.br-req-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
.br-req-row .who { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }

/* br18：点开先看整页（9-27 用户：「右边能不能全屏显示…不要看不全，小一点都没关系」「下面稍微遮住了一点」）
   对话框定高一屏，整页按高度缩进来（A4 比例不变）；点图才放大到满宽看细节，再点缩回。
   注意：dialog 只能在 [open] 时设 display:flex，不然关着也会显示出来 */
.br-view { width: min(96vw, 1100px); max-width: none; height: 94vh; max-height: 94vh; overflow: hidden; }
.br-view[open] { display: flex; flex-direction: column; }
.br-view-bar { position: static; flex: none; flex-wrap: nowrap; }
.br-view-bar #br-view-title { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-view-actions { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.br-view-tip { flex: none; }
.br-view-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface-sunken); }
.br-view-stage img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px);
  box-shadow: var(--shadow-1); background: var(--surface); cursor: zoom-in; }
.br-view-stage.full img { position: static; max-width: none; max-height: none; width: 100%; margin: 0; cursor: zoom-out; }
@media (max-width: 640px) { .br-view { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .br-view-bar { flex-wrap: wrap; } }

/* 两周内上架（9-27 晚：打开先看新的，新的排最前、标出来） */
.br-new { align-self: flex-start; display: inline-block; font-size: 12px; font-weight: 700; color: var(--surface); background: var(--green); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }

/* br22 按钮小图标（9-28：一眼认得出哪个是链接 / 图片 / 下载 / PDF） */
.br-btn .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 4px; flex: none; }
.br-btn { display: inline-flex; align-items: center; }

/* br23 为什么做 / 发给谁 / 打什么点（9-28：业务员一眼知道发给什么人、打哪个点） */
.br-pitch { margin: 6px 0 4px; padding: 7px 10px; border-radius: 8px; background: var(--surface-sunken); display: grid; gap: 3px; font-size: 12.5px; line-height: 1.5; }
.br-pitch > div { display: grid; grid-template-columns: 4.6em 1fr; gap: 6px; }
.br-pitch b { color: var(--green); font-weight: 700; }
.br-pitch span { color: var(--ink); }
.br-pitch .basis { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.br-pitch.full > div { grid-template-columns: 7.2em 1fr; }
/* 10-24 卡片上只留「优势」「卖得怎样」两行（卖给谁 / 怎么卖在大图右边）；「下载 · PDF · 小语种 ›」是一行小字，点了开大图 */
.br-pitch-short > div { grid-template-columns: 4.6em 1fr; }
.br-actions .br-more { background: none; border: 0; padding: 4px 2px; color: var(--muted); font-size: 12px; cursor: pointer; }
.br-actions .br-more:hover { color: var(--accent); text-decoration: underline; }
.br-pitch .br-worries { display: block; }
.br-worries ul { margin: 3px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.br-worries li { display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid var(--line); }
.br-worries li em { font-style: normal; color: var(--ink); font-weight: 600; }
.br-worries li span { color: var(--muted); }
.br-view-pitch { flex: none; padding: 6px 12px 8px; background: var(--surface); border-bottom: 1px solid var(--line); max-height: 34vh; overflow-y: auto; }   /* 10-03 三问全套很长：限高、框里滚，别把整页图挤没 */
.br-view-pitch .br-pitch { margin: 0; }

/* 做页申请：状态旁边的预计时间（9-28 老板：同事提交时要知道什么时候能做出来） */
.br-req-st em { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; text-align: center; }

/* br29（9-28 老板）：重置条件显眼；语种只显示有这个语种的页，上面一条说清楚 + 申请做这个语种；卡片上「申请其他语种」 */
.br-search { display: flex; gap: 10px; align-items: stretch; }
.br-search input { flex: 1 1 auto; min-width: 0; }
.br-btn.reset { background: var(--warning-bg); border: 1.5px solid var(--warning-fg); color: var(--warning-fg); font-weight: 700; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.br-btn.reset:hover { background: var(--warning-fg); color: var(--surface); }
.br-search .br-btn.reset { border-radius: 10px; font-size: 15px; }
.br-lang-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--green-soft); border: 1px solid var(--green); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.br-lang-note b { color: var(--green); margin: 0 2px; }
.br-lang-note > span:first-child { flex: 1 1 320px; }
.br-lang-note .acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.br-link { border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 0 0 8px; text-decoration: underline; text-underline-offset: 2px; }
.br-link:hover { color: var(--ink); }
.br-reqdlg .had, #br-req .had { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }
#br-req input[name="langs"]:disabled + * , #br-req label:has(input:disabled) { color: var(--muted); }

/* br33 申请小语种按钮（9-28：要一眼看得到） */
.br-btn.lang { border-color: var(--green); color: var(--green); background: var(--green-soft); font-weight: 600; }
.br-btn.lang:hover { background: var(--green); color: var(--surface); }

/* br34 顺带问（关联推荐） */
.br-rel { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 6px; font-size: 12.5px; }
.br-rel > b { color: var(--warning-fg); white-space: nowrap; padding-top: 3px; cursor: help; }
.br-rel > span { display: flex; flex-wrap: wrap; gap: 5px; }
.br-relc { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; font-weight: 600; }
.br-relc.cat { font-weight: 500; border-style: dashed; }
.br-relc em { font-style: normal; color: var(--warning-fg); margin-left: 4px; font-size: 11px; }
.br-relc:hover { background: var(--warning-fg); color: var(--surface); }

/* AI 每天挑的页 · 用得怎么样（老板 2026-10-01）：卡片上「近 30 天几位同事发过」、申请列表里 AI 挑的那条、管理层看的效果面板 */
.br-reqs summary.sq-new { background: var(--warning-bg); border-radius: 6px; padding: 2px 4px; }
.br-used { align-self: flex-start; font-size: 11.5px; color: var(--green); background: var(--green-soft); border-radius: 4px; padding: 1px 7px; cursor: help; }
.br-req-ai { font-size: 11px; font-weight: 700; color: var(--accent-soft-fg); background: var(--accent-soft-bg); border-radius: 4px; padding: 0 6px; margin-left: 6px; cursor: help; white-space: nowrap; }
.br-req-row .what .br-req-ai { color: var(--accent-soft-fg); }
.br-eff-sec { margin-top: 12px; }
.br-eff-sec h3 { font-size: 12.5px; margin: 0 0 4px; color: var(--ink-2); }
.br-eff-sec h3 em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.br-eff-wrap { overflow-x: auto; }
.br-eff-t { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.br-eff-t th, .br-eff-t td { padding: 3px 14px 3px 0; text-align: right; border-top: 1px solid var(--line); }
.br-eff-t th:first-child, .br-eff-t td:first-child { text-align: left; }
.br-eff-t th { color: var(--muted); font-weight: 600; }
.br-eff-t td[data-hint], .br-eff-t th[data-hint] { cursor: help; }
.br-eff-t .z { color: var(--line); }
.br-eff-pick { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.br-eff-pick .d { color: var(--muted); font-size: 12px; line-height: 1.5; }
.br-eff-pick .d b { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.br-eff-pick .m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.br-eff-pick .why { flex-basis: 100%; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.br-eff-pick .st { font-size: 12px; color: var(--muted); }
.br-eff-v { font-size: 12px; font-weight: 700; white-space: nowrap; }
.br-eff-v.good { color: var(--green); }
.br-eff-v.bad { color: var(--danger-fg); }
.br-eff-v.wait { color: var(--muted); }
.br-eff-code { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.br-eff-code:hover { color: var(--green); text-decoration: underline; }
.br-eff-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }

/* gap1（10-02 老板：缺资料别光等，告诉开发和跟单缺什么）：做目录还缺的资料 */
.br-gaps { border-color: var(--warning-border); }
.br-gap-list { display: flex; flex-direction: column; margin-top: 6px; }
.br-gap-row { display: grid; grid-template-columns: 48px 1fr 150px; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.5; padding: 7px 0; border-top: 1px solid var(--line); }
.br-gap-row .pic { width: 48px; height: 48px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.br-gap-row .pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.br-gap-row .what b { color: var(--ink); }
.br-gap-row .what span { color: var(--muted); }
.br-gap-row .who { color: var(--muted); font-size: 12px; white-space: nowrap; text-align: right; }
.br-gap-row .who .lead { color: var(--ink); font-weight: 700; }
.br-gap-row .who em { font-style: normal; }
.br-gap-row.mine { background: var(--warning-bg); border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.br-gap-row.done { opacity: .65; }
.br-gap-kind { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 6px; background: var(--surface-sunken); color: var(--ink-2) !important; white-space: nowrap; }
.br-gap-kind.image { background: var(--warning-bg); color: var(--warning-fg) !important; }
.br-gap-kind.record { background: var(--danger-bg); color: var(--danger-fg) !important; }
.br-gap-me { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--warning-fg) !important; white-space: nowrap; }
.br-gap-row .what b.br-gap-ask { color: var(--warning-fg); }
.br-gap-dug { cursor: help; }
.br-gap-parked { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.br-gap-parked > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.br-gap-row.parked { opacity: .7; grid-template-columns: 36px 1fr 90px; }
.br-gap-row.parked .pic { width: 36px; height: 36px; }
@media (max-width: 640px) {
  .br-gap-row { grid-template-columns: 40px 1fr; }
  .br-gap-row .who { grid-column: 2; text-align: left; white-space: normal; }
  .br-gap-row.parked { grid-template-columns: 36px 1fr; }
}

/* 老板 10-04：可视化——「说明」折叠、三块折叠标题的小图标、申请状态牌（零件在 shared/viz.css）；卡片网格不动 */
.br-howto { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.br-howto summary { cursor: pointer; color: var(--accent); width: max-content; }
.br-howto p { margin: 4px 0 0; }
.br-reqs > summary .sqv-ico { color: var(--accent); margin-right: 6px; vertical-align: -2px; }
.br-gaps > summary .sqv-ico { color: var(--warning-fg); }
.br-req-stv { display: inline-flex; flex-direction: column; align-items: center; }
.br-req-stv em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.br-eff-pick .sqv-pill { height: 20px; }
/* 自己拍的视频入口（2026-10-09，/#own-videos） */
.br-vid { display: inline-flex; align-items: center; font-size: 12px; color: var(--danger-fg); border: 1px solid var(--danger-border); background: var(--danger-bg); border-radius: 4px; padding: 0 6px; text-decoration: none; white-space: nowrap; }
.br-vid:hover { border-color: var(--danger-fg); }
/* 视频单张（10-10）：卡片上「▶ 看视频」+「复制视频链接」一行；页型标签用 YouTube 红 */
.br-vrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.br-vrow .br-vid { font-weight: 600; }
.k-video .br-kind { background: var(--danger-bg); color: var(--danger-fg); }
.br-card.k-video { border-top-color: var(--danger-fg); }

/* 申请附图（老板 10-09：「能不能让我上传图片？这样能够更好表达我要做什么」）：选 / 粘贴 / 拖进来，小图带 × */
.br-req-imgs { display: flex; flex-direction: column; gap: 6px; }
.br-req-imgs-h { font-size: 13px; font-weight: 600; color: var(--ink); }
.br-req-imgs-h span { font-weight: 400; font-size: 12px; color: var(--muted); }
.br-req-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.br-req-thumbs:empty { display: none; }
.br-req-thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-sunken); }
.br-req-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-req-thumb i { display: block; width: 100%; height: 100%; }
.br-req-thumb .st { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 11px; text-align: center; background: var(--surface); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-req-thumb .st.err { color: var(--danger-fg); }
.br-req-thumb.err { border-color: var(--danger-border); }
.br-req-thumb-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); cursor: pointer; font-size: 15px; line-height: 22px; padding: 0; }
.br-req-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 8px; background: var(--surface-sunken); }
.br-req-drop span { font-size: 12px; color: var(--muted); }
.br-req-drop .br-btn { white-space: nowrap; }
.br-req-imgs.over .br-req-drop { border-color: var(--green); background: var(--green-soft); }
.br-req-row .what .br-req-pics { margin-top: 4px; gap: 6px; }
.br-req-row .what .br-req-pics span { margin-left: 0; }
.br-req-pics .sqf-card { width: 64px; padding: 2px; }
.br-req-pics .sqf-pic { height: 56px; }
.br-req-pics .sqf-name { display: none; }
.br-req-row .what .br-req-note { color: var(--ink-2); }

/* br-side（10-10 老板：「上面那个字有点挡住了，他们想截图都不方便」）：图上面只剩按钮条，
   「怎么卖」挪到图右边（窄窗口挪到图下面），能收起；收没收记在本机。点图选中会盖一层蓝，去掉 */
.br-view-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.br-view-body .br-view-stage { flex: 1 1 auto; min-height: 0; }
.br-view-stage img { -webkit-user-select: none; user-select: none; }
.br-view-side { flex: none; display: flex; flex-direction: column; min-height: 0; max-height: 34vh; background: var(--surface); border-top: 1px solid var(--line); }
.br-view-side[hidden] { display: none; }
.br-view-side-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 0; }
.br-view-side-hd b { font-size: 13px; color: var(--green); white-space: nowrap; }
.br-view-fold { padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.br-view-side .br-view-pitch { flex: 1 1 auto; min-height: 0; max-height: none; border-bottom: 0; overflow-y: auto; }
.br-view-unfold { flex: none; color: var(--green); font-weight: 700; white-space: nowrap; }
.br-view-unfold[hidden] { display: none; }
.br-view-bar .br-btn { white-space: nowrap; }   /* 窄窗口按钮别折成「关 / 闭」两行，挤了先缩标题 */
.br-view-bar #br-view-close, .br-view-bar .sq-q { flex: none; }
@media (min-width: 720px) {
  .br-view-body { flex-direction: row; }
  .br-view-side { width: clamp(250px, 34%, 380px); max-height: none; border-top: 0; border-left: 1px solid var(--line); }
  .br-view-side .br-pitch.full > div { grid-template-columns: 1fr; gap: 0; }   /* 窄栏里标题在上、内容在下，「为什么跟我们买」不折行 */
}
@media (max-width: 640px) { .br-view-actions { flex: 1 1 100%; min-width: 0; } }   /* 手机上按钮条折行，别把「申请小语种」挤出屏幕 */

/* br-max（10-10 老板：「想点这个图片的时候，能满屏打开，方便业务员截图」「左边栏要保留」）：
   对话框铺满这一页（外壳左边侧栏在 iframe 外面，照常留着），按钮条、「怎么卖」都收起，整页图按高度撑满；
   右上角只留一个小条（宽窗口落在图旁边的空白里，不压图） */
.br-view.max { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; inset: 0; border-radius: 0; }
.br-view.max .br-view-bar, .br-view.max .br-view-side { display: none; }
.br-view.max .br-view-stage img { max-width: calc(100% - 8px); max-height: calc(100% - 8px); box-shadow: none; }
.br-view.max .br-view-stage.full img { max-width: none; max-height: none; }
.br-view-unmax { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
.br-view-unmax .ic { margin: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.br-view-unmax:hover { color: var(--ink); background: var(--surface-sunken); }
.br-view-maxtip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; padding: 6px 14px; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.br-view-maxtip.gone { opacity: 0; }
/* 窗口偏竖（手机）时图按宽撑满，上下留出 50px，右上角的 ✕ 落在空白里不压图；横的窗口图按高撑满，✕ 在图旁边 */
@media (max-aspect-ratio: 1/1) { .br-view.max .br-view-stage:not(.full) img { max-height: calc(100% - 100px); } }
.br-view-maxbtn { flex: none; }

/* 旧版目录（10-11）：排在新目录后面，前面一条整行分隔；卡片上「旧产品」提醒用警示色 */
.br-archdiv { grid-column: 1 / -1; margin: 10px 0 2px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.55;
  color: var(--warning-fg); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.br-archdiv b { margin-right: 4px; }
.br-archdiv span { display: block; font-size: 12px; opacity: .9; }
.br-oldwarn { font-size: 11.5px; font-weight: 700; color: var(--warning-fg); background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-radius: 6px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: help; align-self: flex-start; }
.br-code.old { font-weight: 600; color: var(--ink-2); }
.br-card.k-archive .br-kind { background: var(--warning-bg); color: var(--warning-fg); }
.br-cat { font-size: 11.5px; color: var(--ink-2); }

/* 旧页核对（10-11 第二轮）：每款一个小标签，颜色 = 现在的状态；原厂那行只有供应链和管理层看得到 */
.br-verify { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 6px; background: var(--surface-hover); }
.br-vhead { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); flex-wrap: wrap; }
.br-vhead b { color: var(--ink); white-space: nowrap; }
.br-vhead span { flex-basis: 100%; line-height: 1.45; }
.br-vchips { display: flex; flex-wrap: wrap; gap: 4px; }
.br-vchip { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.br-vchip.good { background: var(--green-soft); color: var(--green); border-color: transparent; }
.br-vchip.bad { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; text-decoration: line-through; }
.br-vchip.muted { color: var(--ink-2); border-style: dashed; }
.br-vchip.hit { outline: 2px solid var(--accent); }
.br-vmore { font-size: 11px; color: var(--ink-2); align-self: center; }
.br-vdiff { font-size: 11.5px; color: var(--warning-fg); cursor: help; white-space: nowrap; }
.br-vdiff.old { color: var(--ink-2); }
.br-vfac { font-size: 11.5px; color: var(--ink); cursor: help; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.br-vfac em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: var(--accent-soft-bg); color: var(--accent-soft-fg); }

/* 旧版目录的筛选按钮 / 勾选换橙褐色，和新目录分开（10-11 老板：「筛选这里能不能做一个颜色的区分」） */
.br-chip.arch { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); border-style: solid; }
.br-chip.arch em { color: var(--warning-fg); opacity: .8; }
.br-chip.arch.on { background: var(--warning-fg); color: var(--surface); border-color: var(--warning-fg); }
.br-chip.arch.on em { color: var(--surface); }
.br-lab-arch, .br-arch { color: var(--warning-fg); }
.br-arch em { color: var(--warning-fg); }


/* 大图里换语种（10-12） */
.br-view-langs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.br-view-langs button { font: inherit; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.br-view-langs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.br-view-langs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-view.max .br-view-langs { display: none; }

.br-upd { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.br-admin { display: flex; gap: 6px; margin-top: 4px; }
.br-del { color: var(--danger-fg); border-color: var(--danger-border); }
.br-gone { opacity: .8; }
.br-gone-msg { padding: 18px 12px; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

/* 大图翻页（10-14） */
.br-view-stagewrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.br-view-stagewrap .br-view-stage { flex: 1 1 auto; }
.br-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 72px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); opacity: .85; font-size: 34px; line-height: 1; color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-1); }
.br-nav:hover { opacity: 1; }
.br-nav:disabled { opacity: .25; cursor: default; }
.br-nav.prev { left: 10px; }
.br-nav.next { right: 10px; }
.br-nav-n { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; font-size: 12px; color: var(--muted);
  background: var(--surface); border-radius: 10px; padding: 2px 10px; opacity: .9; }
@media (max-width: 640px) { .br-nav { width: 34px; height: 56px; font-size: 26px; } }

/* 卡片缩略图看整页（10-14 老板：「图能不能完整一点？现在只是裁掉了一部分，下面其实不用留太长」） */
.br-card .br-thumb { aspect-ratio: 1240 / 1755; padding: 8px 8px 8px; }
.br-card .br-thumb img { object-fit: contain; object-position: center; border-radius: 4px; }
.br-card .br-thumb::after { display: none; }

/* 卡片小图标：认证 / 燃气 / 电压（10-14） */
.br-bds { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.br-bd { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); white-space: nowrap; cursor: help; }
.br-bd.cert { border-color: var(--accent-soft-border); background: var(--accent-soft-bg); color: var(--accent-soft-fg); letter-spacing: .3px; }
.br-bd.claim { border-style: dashed; color: var(--muted); font-weight: 600; }
.br-bd.food { color: var(--muted); }
.br-bd.gas { border-color: var(--danger-border); color: var(--danger-fg); background: var(--danger-bg); }
.br-bd.v.hi { border-color: var(--danger-border); color: var(--danger-fg); }

/* 咖啡 / 餐饮各几页（10-15） */
.br-books-n { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: middle; }
.br-book-n { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.br-book-n.on { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-soft-fg); }