/* ================= 品牌与门店屏 · A 方案重构（批一五三，李叔拍板原型 bs-proto-v1 的 A） =================
   作用域 .pg-brand —— host.js 的 PG_SCOPES 给 #/brand 与 #/stores 都打这个标，
   所以老链接 #/stores 走同一套皮肤，不会一半新一半旧。

   本文件排在 app.css 之后（同特异性后来者胜），app.css 里 pg-brand 的粗修段一字未删，
   回退 = 删本文件 + 删 index.html 一行 + 还原 brandkit.js 三处（bs-kpi / st-grid / bs-ini）。

   配合的渲染层改动只有两处，都在 brandkit.js：
     ① 页头概览四格（原来进这一屏得自己数：几家品牌、几家店、几个有标志）
     ② 门店一行一条 → 一家店一张卡（地址/时间/电话各占一行带图标）
   其余全是纯 CSS 重排：
     a 品牌标准色：7 个色每个占一整行 1030×91 → 色板网格（色块在上，色值/用途在下）
     b 品牌标志：两列各 509px 宽、第三张落单 → 三等分
     c 公司信息：竖排 4 行 → 四宫格
     d 品牌清单：每行加品牌首字圆标

   口径零改动：数据、字段与全部锚点（data-bedit / data-bdel / data-lb / data-hex /
   data-open / data-adel / data-edit / data-del / #brandAddBtn / #editBrandBtn /
   #addAssetBtn / #addStoreBtn / #logoBrandChips）全留，CSS 只动摆放不动内容。
   零裸色值：全部走 tokens.css（含批一五一新增的 UI 语言层令牌）。
==================================================================================================== */

/* ── ① 概览四格：进屏先看数，再看清单 ── */
.pg-brand .bs-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 0 0 18px;
}
.pg-brand .bs-kpi-c {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 18px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pg-brand .bs-kpi-c:hover { box-shadow: var(--shadow-hover); transform: translateY(var(--lift-1)); }
.pg-brand .bs-kpi-n {
  font-size: 26px; font-weight: 700; color: var(--text);
  font-variant-numeric: var(--num); line-height: 1.15;
}
.pg-brand .bs-kpi-l { font-size: var(--t-body); font-weight: 600; color: var(--text-2); margin-top: 5px; }
.pg-brand .bs-kpi-d { font-size: var(--t-weak); color: var(--text-3); margin-top: 3px; }

/* ── ② 品牌清单：首字圆标（以前四行纯文字分不出谁是谁） ── */
.pg-brand .bs-list .cell { gap: 12px; }
.pg-brand .bs-ini {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-m);
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}

/* ── ③ 品牌标志：三版本三等分（原来两列 + 一张孤牌，留白比图大） ── */
.pg-brand .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pg-brand .logo-ver {
  border-radius: var(--r-card); border-color: var(--line);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pg-brand .logo-ver:hover { box-shadow: var(--shadow-hover); transform: translateY(var(--lift-1)); }
.pg-brand .lv-preview { height: 104px; }
.pg-brand .lv-meta { flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px 3px; }
.pg-brand .lv-use { line-height: 1.6; }
.pg-brand .lv-dl { margin: 0 13px 12px; text-align: center; border-radius: var(--r-btn); }

/* ── ④ 品牌标准色：竖列表 → 色板网格 ── */
.pg-brand .cs-group {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 14px;
}
.pg-brand .cs-group + .cs-group { margin-top: 16px; }
.pg-brand .cs-gt { grid-column: 1 / -1; margin-bottom: 0; font-size: var(--t-body); color: var(--text); }
.pg-brand .cs-row {
  flex-direction: column; gap: 0; padding: 0; border-bottom: 0;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pg-brand .cs-row:hover { box-shadow: var(--shadow-hover); transform: translateY(var(--lift-1)); }
.pg-brand .cs-sw {
  width: 100%; height: 62px; border-radius: 0; padding: 9px 11px;
}
.pg-brand .cs-info { padding: 9px 11px 11px; }
.pg-brand .cs-codes { gap: 5px; }
.pg-brand .cs-use {
  font-size: var(--t-weak); color: var(--text-3); margin-top: 5px; line-height: 1.6;
  /* 用途说明限两行：色板是让人扫一眼认色的，长段落交给下面的规范条款去说 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 规范条款：编号灰片，与色板分开呼吸 */
.pg-brand .cs-rules { margin-top: 18px; }
.pg-brand .cs-rule {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 11px; border-radius: var(--r-m); background: var(--card-2);
  margin-bottom: 5px; font-size: var(--t-aux); color: var(--text-2); line-height: 1.6;
}
.pg-brand .cs-rule b {
  flex: none; width: 18px; height: 18px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-top: 1px;
}

/* ── ⑤ 公司信息：竖排 4 行 → 四宫格 ── */
.pg-brand .bi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pg-brand .bi-grid .cell {
  display: block; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--card-2);
}
.pg-brand .bi-grid .cell-d { margin-top: 0; margin-bottom: 7px; }
.pg-brand .bi-grid .cell-t { line-height: 1.55; word-break: break-word; }

/* ── ⑥ 门店：一行一条 → 一家一卡 ── */
.pg-brand .st-top { margin: 14px 0 14px; }
.pg-brand .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pg-brand .st-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pg-brand .st-card:hover {
  box-shadow: var(--shadow-hover); transform: translateY(var(--lift-1)); border-color: var(--line-strong);
}
.pg-brand .st-hd { display: flex; align-items: center; gap: 12px; }
.pg-brand .st-ic {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-btn);
  background: var(--brand-soft); color: var(--brand); display: grid; place-items: center;
}
.pg-brand .st-nm { min-width: 0; }
.pg-brand .st-t { font-size: var(--t-body); font-weight: 700; color: var(--text); line-height: 1.4; }
.pg-brand .st-sub { font-size: var(--t-weak); color: var(--text-3); margin-top: 2px; }
.pg-brand .st-sub.warn { color: var(--warn); }
.pg-brand .st-rows { display: flex; flex-direction: column; gap: 7px; }
.pg-brand .st-r {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--t-aux); color: var(--text-2); line-height: 1.6;
}
.pg-brand .st-r svg { flex: none; margin-top: 2px; color: var(--text-3); }
.pg-brand .st-r span { min-width: 0; word-break: break-all; }
/* 操作行贴底：卡等高时按钮在同一水平线上，不再随内容长短浮动 */
.pg-brand .st-ops {
  display: flex; gap: 8px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ── ⑦ 响应式：1180 / 860 / 560 三档降级 ── */
@media (max-width: 1180px) {
  .pg-brand .st-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-brand .cs-group { grid-template-columns: repeat(3, 1fr); }
  .pg-brand .bi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pg-brand .bs-kpi { grid-template-columns: repeat(2, 1fr); }
  .pg-brand .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-brand .cs-group { grid-template-columns: repeat(2, 1fr); }
  .pg-brand .st-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pg-brand .bs-kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pg-brand .bs-kpi-c { padding: 12px 14px; }
  .pg-brand .bs-kpi-n { font-size: 22px; }
  .pg-brand .st-grid { grid-template-columns: 1fr; }
  .pg-brand .logo-grid { grid-template-columns: 1fr; }
  .pg-brand .bi-grid { grid-template-columns: 1fr; }
  .pg-brand .cs-group { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}