/* GBP Review Analytics — 唯一样式表，由 PTC Insight 的 insight.css 精简而来，token 与组件规则照搬。

   宪法（同 Insight）：
   1. 深度只标容器，永不标数据——面板/按钮/输入有圆角与投影；表格/行/单元格零圆角零投影零渐变。
   2. 一色一职：navy=文字/结构/主操作，red=差评语义与登录页 CTA，green=好评，amber=警示。
   3. 导航当前项用 navy 淡底 + navy 标记条；不引入第四种点缀色。
   4. 数据区绝对安静。
   5. 零魔法数字，尺寸与颜色一律走 :root token。
   6. 无运行时外链，且零字体请求。 */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* 底 + 面（官方 Off White / White） */
  --bg: #f8f8f8;
  --surface: #ffffff;
  --hairline: rgba(26, 48, 89, 0.09);

  /* 中性梯度：真中性，不带蓝调 */
  --n-100: #f8f8f9;
  --n-200: #ededf0;
  --n-400: #d8d8dc;
  --n-500: #aeaeb4;
  --n-600: #8a8a91;
  --n-700: #62626a;

  /* 品牌 + 状态（官方 Navy / Red；green/amber 品牌未定义，沿用功能色原值） */
  --ink: #1a3059;
  /* --action = 应用内交互色，官方 navy 本色；-700/-800 是 hover/active 加深档 */
  --action: #1a3059;
  --action-700: #142647;
  --action-800: #0f1d36;
  --action-100: #e8edf4;
  --ok: #12855a;
  --ok-700: #0c6a47;
  --warn: #c47a0a;
  --warn-700: #8f5606;
  --warn-100: #fdf3e2;
  /* red 一色两职：差评语义 + 登录页的限量品牌 CTA */
  --alert: #cc271d;
  --alert-700: #a31f17;
  --alert-100: #fae9e8;

  /* 圆角 */
  --r-panel: 16px;
  --r-key: 11px;
  --r-tag: 6px;
  --r-puck: 999px;

  /* 高度（阴影层） */
  --e1: 0 1px 2px rgba(26, 48, 89, 0.05);
  --e2: 0 1px 2px rgba(26, 48, 89, 0.05), 0 8px 20px -4px rgba(26, 48, 89, 0.14);
  --e3: 0 1px 3px rgba(26, 48, 89, 0.06), 0 14px 32px -8px rgba(26, 48, 89, 0.18),
        0 40px 72px -32px rgba(26, 48, 89, 0.3);

  /* muted-500/600 刻意映射到更深一档，中性梯度去蓝后浅档对白底不足 4.5:1 */
  --line: var(--hairline);
  --fill-100: var(--n-100);
  --fill-200: var(--n-200);
  --muted-500: var(--n-600);
  --muted-600: var(--n-700);
  --muted-700: var(--n-700);

  /* 间距 / 尺寸 */
  --pad: 14px;
  --gap: 12px;
  --card-pad: 16px;
  --tap: 44px;
  --btn-lg: 48px;
  --sidebar-w: 236px;
  --logo-h: 26px;

  /* 字号 */
  --fs-title: 18px;
  --fs-section: 20px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-kicker: 11px;
  --fs-micro: 10px;

  /* 零字体请求 */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --z-header: 20;
  --z-toast: 50;

  /* 表格 */
  --row-h: 36px;
  --th-h: 34px;
  --cell-pad-x: 12px;

  /* 顶部状态条 */
  --topbar-h: 56px;
  --topbar-h-sm: 48px;

  /* 加载态 */
  --spinner-size: 16px;
  --spinner-size-lg: 24px;

  /* 动效：唯一允许的时长常量，组件里禁止写裸毫秒 */
  --t-ui: 160ms;
  --t-color: 200ms;

  /* 表头 sticky 必须低于 --z-header，否则滚动时表头会盖住状态条 */
  --z-sticky-th: 10;

  /* KPI 卡的大数字 */
  --fs-kpi: 28px;

  /* 下拉层：高于 sticky 表头与状态条 */
  --pop-gap: 6px;
  --z-pop: 40;

  /* ---- GBP 新增 ---- */
  /* 星级是好→差的有序量：5 绿、4 navy、3 中性、2 琥珀、1 红；图表颜色只从这里取 */
  --star-5: var(--ok);
  --star-4: var(--action);
  /* 3★ 用 n-500：n-600 与琥珀相邻时正常色觉 ΔE 不足 15；对白底 <3:1，靠图例、数值标签与段间白边补偿 */
  --star-3: var(--n-500);
  --star-2: var(--warn);
  --star-1: var(--alert);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --chart-h: 300px;
  --date-w: 150px;
  --picker-max-h: 320px;
  --info-col-w: 220px;
  --mobnav-w: 220px;
  --col-sticky-w: 150px;
}

/* 壳的断点必须与 token 换档点同一个值，否则会出现「桌面布局 + 手机间距」的中间态 */
@media (min-width: 900px) {
  :root {
    --pad: 28px;
    --gap: 20px;
    --card-pad: 18px;
    --fs-title: 24px;
  }
}

/* --- 基础重置 / 排版 ------------------------------------------------------ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(120% 90% at 50% -10%, #ffffff 0%, #fafafa 45%, #f2f2f2 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 金额、日期、店号全站等宽对齐；表格扫读靠的就是这个 */
  font-variant-numeric: tabular-nums;
}

a { color: var(--action-800); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Arial 无 800：字重上限 700，靠收紧字距补回原本由重字重承担的密度 */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }

.kicker {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-600);
}
.muted { color: var(--muted-700); font-size: var(--fs-sm); }
.note { font-size: var(--fs-kicker); color: var(--muted-700); }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* --- a11y 工具类 --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* 键盘用户不必 tab 过整条侧栏才能进正文 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 壳的两套形态共用同一份 DOM，靠这两个类切换，避免重复渲染两遍导航。
   刻意只写「隐藏」不写「显示」：显示态留给元素自己的 display，
   否则会把 .topbar-pagetitle 从 block 改成 flex，text-overflow 省略号就失效了。 */
@media (max-width: 899px) { .desk-only { display: none !important; } }
@media (min-width: 900px) { .mob-only { display: none !important; } }

/* --- 应用壳 -------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.shell-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sidebar { display: none; }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  padding: var(--pad);
  /* Tab Bar 是 sticky 不是 fixed，这里只补一点呼吸位 */
  padding-bottom: calc(var(--pad) + 8px);
}

/* --- 顶部状态条 ---------------------------------------------------------- */
/* 实底不用 backdrop-filter：council 弃用 blur，且它在门店旧安卓 WebView 上掉帧 */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h-sm);
  padding: 0 var(--pad);
  padding-top: max(0px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.topbar-pagetitle {
  min-width: 0;
  margin-right: auto;
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-user { flex: none; text-align: right; line-height: 1.25; }
.topbar-user-name { font-size: var(--fs-sm); font-weight: 700; }
.topbar-user-role { font-size: var(--fs-kicker); color: var(--muted-700); }

.topbar-logout { display: flex; flex: none; margin: 0; }

/* 手机端图标登出：整块 44×44 才点得中，图标本身 20px */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-color) ease, transform var(--t-ui) ease;
}
.icon-btn:hover { background: var(--fill-100); text-decoration: none; }
.icon-btn:active { transform: scale(0.97); }
.icon-btn svg { width: 20px; height: 20px; }

/* --- 桌面壳 -------------------------------------------------------------- */
@media (min-width: 900px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--surface);
    /* 方角无影：侧栏是结构不是卡片，只用一条 hairline 与正文分开 */
    box-shadow: 1px 0 0 var(--hairline);
  }

  .sidebar-brand { flex: none; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
  .sidebar-wordmark {
    display: block;
    font-size: var(--fs-section);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: var(--logo-h);
    color: var(--ink);
  }
  .sidebar-brand .kicker { margin-top: 3px; }

  /* 导航能长到 ~19 项 + 6 个分组标签，必须自己滚，品牌位与页脚不跟着走 */
  .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }

  .nav-group-label {
    padding: 14px 20px 4px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-600);
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 0 20px;
    border-left: 3px solid transparent;
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 400;
    transition: background-color var(--t-color) ease, color var(--t-color) ease;
  }
  /* 导航项不做 scale：整行缩放会让侧栏「抖」，council 的 .97 是给按钮的 */
  .nav-item:hover { background: var(--fill-100); text-decoration: none; }
  .nav-item:active { background: var(--fill-200); }
  /* 内缩描边，否则焦点框会被侧栏边界裁掉 */
  .nav-item:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
  .nav-item.is-active {
    background: var(--action-100);
    color: var(--action-800);
    font-weight: 700;
    border-left-color: var(--action);
  }

  .sidebar-foot {
    flex: none;
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid var(--hairline);
  }
  .sidebar-name { font-size: var(--fs-body); font-weight: 700; }
  .sidebar-role { font-size: var(--fs-xs); color: var(--muted-700); }

  .topbar { min-height: var(--topbar-h); }
  /* 桌面的产品名只是身份标识，不能比页面 h1 大 */
  .topbar-pagetitle { font-size: var(--fs-body); letter-spacing: 0; }

  /* 跨店对比表列多，不设 1200 硬顶；行长由列宽控制，不去限制表格宽度 */
  .app-main { max-width: 1440px; padding: 28px var(--pad) 40px; }
}

/* --- 面板 ---------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--e2);
  /* 里面的表格是方角，四角由面板自己裁 */
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px var(--card-pad);
  border-bottom: 1px solid var(--hairline);
}
.panel-head .kicker { letter-spacing: 0.1em; color: var(--ink); }
.panel-head-note { font-size: var(--fs-kicker); color: var(--muted-700); }
.panel-head-end { margin-left: auto; }
.panel-body { padding: var(--card-pad); }
/* 表格直贴面板边，不再套一层内距 */
.panel-body--flush { padding: 0; }
.panel-title { font-size: var(--fs-section); font-weight: 700; letter-spacing: -0.02em; }
.panel-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted-700); }

/* --- 按钮 ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-key);
  box-shadow: var(--e2);
  cursor: pointer;
  /* 逐属性列出，禁止 transition:all——否则 disabled 的 opacity 也会跟着动 */
  transition: transform var(--t-ui) ease, box-shadow var(--t-ui) ease,
              background-color var(--t-color) ease, color var(--t-color) ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--e3); }
/* 按下是「落下去」，不是盖章；.97 与 160ms 是 council 强制值 */
.btn:active { transform: scale(0.97); box-shadow: var(--e1); }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* 应用内唯一主操作：navy 实底白字。平涂无描边无渐变；
   深度只走中性阴影层，不再有有色环境光（navy 已是最深的一档，不需要再发光） */
.btn--primary {
  background: var(--action);
  color: #fff;
  border: 0;
}
.btn--primary:hover { background: var(--action-700); color: #fff; }
.btn--primary:active { background: var(--action-800); color: #fff; transform: scale(0.97); box-shadow: var(--e1); }
/* navy 底上的 navy 描边看不见，改用白色 */
.btn--primary:focus-visible { outline-color: #fff; outline-offset: -4px; }

/* 品牌红 CTA：只允许出现在无数据语义的页面（登录页 Sign in 等），每屏一次。
   数据页面禁止使用——那里的红专属「未达标」 */
.btn--brand {
  background: var(--alert);
  color: #fff;
  border: 0;
}
.btn--brand:hover { background: var(--alert-700); color: #fff; }
.btn--brand:active { background: var(--alert-700); color: #fff; transform: scale(0.97); box-shadow: var(--e1); }
.btn--brand:focus-visible { outline-color: #fff; outline-offset: -4px; }

.btn--ghost {
  min-height: 32px;
  padding: 0 8px;
  background: transparent;
  color: var(--action-800);
  border-color: transparent;
  box-shadow: none;
}
.btn--ghost:hover { background: var(--action-100); box-shadow: none; }
.btn--ghost:active { transform: scale(0.97); box-shadow: none; }

.btn--lg { min-height: var(--btn-lg); padding: 0 20px; }
.btn--block { display: flex; width: 100%; }
/* 全宽按钮上 .97 的位移观感偏大，降一档 */
.btn--block:active { transform: scale(0.99); }

.btn[disabled], .btn.is-disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: var(--e1);
  transform: none;
}
.btn[disabled]:hover, .btn.is-disabled:hover { box-shadow: var(--e1); }
.btn[disabled]:active, .btn.is-disabled:active { transform: none; box-shadow: var(--e1); }
.btn--primary[disabled], .btn--primary.is-disabled { box-shadow: var(--e1); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* 提交中不 disabled：保留可聚焦，读屏才读得到 aria-busy；pointer-events 挡重复提交 */
.btn.is-loading { pointer-events: none; }

/* --- 表单 ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-600);
}
.field-note { margin: 5px 0 0; font-size: var(--fs-kicker); color: var(--muted-700); }
.field-error { margin: 5px 0 0; font-size: var(--fs-kicker); font-weight: 700; color: var(--alert-700); }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="search"],
select {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px; /* iOS 下 <16px 聚焦会强制放大页面 */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-key);
  box-shadow: inset 0 1px 2px rgba(26, 48, 89, 0.04);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-color) ease, box-shadow var(--t-ui) ease;
}
select {
  /* appearance:none 去掉了原生箭头，用内联 SVG 补回来（不外链图标） */
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;
}
input:hover, select:hover { border-color: var(--n-400); }

/* 全站唯一允许 outline:none 的地方——4px navy 光晕是等效替代，可见性不降 */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 4px rgba(26, 48, 89, 0.35);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

input:disabled, select:disabled, textarea:disabled {
  background: var(--fill-100);
  color: var(--muted-700);
  cursor: not-allowed;
  box-shadow: none;
}
::placeholder { color: var(--muted-500); }

/* 红边不是唯一编码：必须同时有 .field-error 文字并 aria-describedby 关联 */
.is-invalid, [aria-invalid="true"] { border-color: var(--alert); }

/* --- 数据表 -------------------------------------------------------------- */
/* 横向溢出交给包裹层，表格本身不设 max-width */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
/* 零圆角零投影零渐变——宪法第 1 条，任何装饰蔓延到这里即打回 */
.dtable th,
.dtable td {
  height: var(--row-h);
  padding: 0 var(--cell-pad-x);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.dtable thead th {
  position: sticky;
  top: 0;
  /* 必须低于 --z-header，否则滚动时表头会盖住顶部状态条 */
  z-index: var(--z-sticky-th);
  height: var(--th-h);
  background: var(--n-100);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-600);
  border-bottom: 1px solid var(--hairline);
}
/* th 也要写进来：行首是 <th> 的表（排行榜/留客率）末行会剩半截分隔线 */
.dtable tbody tr:last-child td,
.dtable tbody tr:last-child th { border-bottom: 0; }
/* 唯一允许的行反馈：底色。无位移、无投影、无边框变化 */
.dtable tbody tr:hover { background: var(--fill-100); }

.dtable .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; /* 老 WebKit 兜底 */
  white-space: nowrap;
}

/* 手机端横滑时店名列冻结在左侧 */
.dtable .col-sticky {
  position: sticky;
  left: 0;
  background: var(--surface);
}
.dtable thead .col-sticky { background: var(--n-100); z-index: var(--z-sticky-th); }

/* --- 状态标签 ------------------------------------------------------------ */
/* 文案本身就是第二编码，黑白打印/色弱下仍可读 */
.tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--n-200);
  color: var(--n-700);
  border: 1px solid var(--n-400);
  border-radius: var(--r-tag);
  box-shadow: none;
}
.tag--ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.tag--pending { background: var(--warn-100); color: var(--warn-700); border-color: var(--warn); }
.tag--failed { background: var(--alert); color: #fff; border-color: var(--alert); }
.tag--na { background: var(--n-200); color: var(--n-700); border-color: var(--n-400); }

/* --- 加载态 -------------------------------------------------------------- */
.spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-puck);
  animation: spin 700ms linear infinite;
}
.spinner--lg { width: var(--spinner-size-lg); height: var(--spinner-size-lg); }

@keyframes spin { to { transform: rotate(360deg); } }

/* --- 空态 / 错误态 ------------------------------------------------------- */
/* 无插画、无 emoji；容器高度尽量贴近成功态，避免布局跳动 */
.empty { padding: 32px var(--card-pad); text-align: center; }
.empty-title { font-size: var(--fs-body); font-weight: 700; }
/* 一行说明宽到 140 字符就没人读了，按 65ch 左右收住 */
.empty-note {
  max-width: 62ch;
  margin: 6px auto 0;
  font-size: var(--fs-sm);
  color: var(--muted-700);
}

.alert-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--alert-100);
  color: var(--alert-700);
  border: 1px solid rgba(204, 39, 29, 0.22);
  /* 左侧 4px 实心条 = 颜色之外的第二编码 */
  border-left: 4px solid var(--alert);
  border-radius: var(--r-key);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ok-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  color: var(--ok-700);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--ok);
  border-radius: var(--r-key);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* --- 后台 ---------------------------------------------------------------- */
/* 一行里多个独立 POST 表单：form 本身不占位，按钮才能排在一起换行 */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-form { max-width: 520px; }
.check-row { display: flex; align-items: center; gap: 8px; }
.check-row input { width: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* --- 同步页 -------------------------------------------------------------- */
/* 提示条在 app-main 外：与正文同宽同边距，否则贴着状态条 */
.app-banner {
  padding: 10px var(--pad);
  background: var(--alert-100);
  color: var(--alert-700);
  border-bottom: 1px solid rgba(204, 39, 29, 0.22);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.app-banner a { color: inherit; text-decoration: underline; }
.sync-stack { margin-top: var(--gap); }
.sync-store-form { margin-top: 18px; }
.sync-job { padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-key); }
.sync-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sync-job-line { margin: 6px 0 0; font-size: var(--fs-sm); }
.sync-job-failures { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); }

/* --- 登录页 -------------------------------------------------------------- */
.auth {
  min-height: 100dvh; /* dvh 防 iOS 地址栏收起时卡片跳动 */
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--e2);
  padding: 28px 24px;
}
/* 戏在字重对比上，不在装饰上：品牌 800 / 说明 400 */
.auth-brand {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.auth-sub {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted-700);
}
.auth-form { margin-top: 20px; }
.auth-submit { margin-top: 18px; }
.auth-foot {
  margin: 18px 0 0;
  font-size: var(--fs-kicker);
  color: var(--muted-700);
  text-align: center;
}

@media (max-width: 419px) {
  .auth-card { max-width: 100%; padding: 24px 18px; }
}

/* --- 页头 ---------------------------------------------------------------- */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap); }
.pagehead-text { flex: 1 1 auto; min-width: 0; }
.pagehead-title { font-size: var(--fs-section); }
.pagehead-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted-700); }
.pagehead-back { align-self: center; }

/* --- 筛选栏 -------------------------------------------------------------- */
/* 门店选择器的下拉要伸出面板，不能被 .panel 的 overflow 裁掉 */
.panel--open { overflow: visible; }

.pagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 0;
}
.fsel { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; }
.fsel-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-600);
}
.fsel select { min-width: 0; }
.fsel--date { flex: 1 1 var(--date-w); }
.fsel-apply { flex: 0 0 auto; }

.quickrange { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

/* 加载指示：htmx 内联样式已关（includeIndicatorStyles=false），这里接管 */
.htmx-indicator { opacity: 0; transition: opacity var(--t-ui) ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-kicker);
  color: var(--muted-700);
}

/* --- 门店多选 ------------------------------------------------------------ */
/* <details> + 复选框：零依赖、键盘原生可用，手机上不触发原生 select 的多选弹层 */
.picker { position: relative; }
.picker-toggle {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 40px 0 12px;
  font-size: 16px; /* 与 select 同号，并排时不显小 */
  color: var(--ink);
  background: var(--surface) var(--select-arrow) no-repeat right 12px center / 18px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-key);
  box-shadow: inset 0 1px 2px rgba(26, 48, 89, 0.04);
  cursor: pointer;
  list-style: none;
}
.picker-toggle::-webkit-details-marker { display: none; }
.picker-toggle:hover { border-color: var(--n-400); }
.picker[open] .picker-toggle { border-color: var(--action); }
.picker-menu {
  position: absolute;
  z-index: var(--z-pop);
  top: calc(100% + var(--pop-gap));
  left: 0;
  right: 0;
  max-height: var(--picker-max-h);
  overflow-y: auto;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-key);
  box-shadow: var(--e3);
}
.picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.picker-option:hover { background: var(--fill-100); }
.picker-option input { flex: none; width: 16px; height: 16px; accent-color: var(--action); }
.picker-empty { margin: 0; padding: 10px 12px; font-size: var(--fs-sm); color: var(--muted-700); }

/* --- 结果区 -------------------------------------------------------------- */
.results { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.resultbar-range { flex: 1 1 auto; margin: 0; font-size: var(--fs-sm); color: var(--muted-700); }
.resultbar-range strong { color: var(--ink); }

/* --- KPI 卡 -------------------------------------------------------------- */
/* 手机两列同旧页面（xs=12）：四张卡一屏看完，不用滚 */
.kpirow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

/* KPI 卡是唯一允许圆角 + 投影的数据容器（摘要，非明细） */
.kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--e2);
  padding: var(--card-pad);
}
.kpi-label {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-600);
}
.kpi-value {
  margin: 6px 0 0;
  font-size: var(--fs-kpi);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* 大号孤立数字用比例数字：等宽在这个字号下会显得松散 */
  font-variant-numeric: normal;
}
/* 状态做文字色一律 -700 档，白底 ≥4.5:1 */
.kpi-value--ok { color: var(--ok-700); }
.kpi-value--alert { color: var(--alert-700); }

/* --- 图表 ---------------------------------------------------------------- */
.chartgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
/* 固定高度：ECharts 迟到或换片段时不撑开又塌陷 */
.chart { position: relative; width: 100%; height: var(--chart-h); }
.chart--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--card-pad);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted-700);
}

@media (min-width: 900px) {
  .kpirow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chartgrid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .chartgrid-wide { grid-column: 1 / -1; }
}

/* --- 门店信息 ------------------------------------------------------------ */
.infolist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--info-col-w), 1fr));
  gap: var(--gap);
  margin: 0;
}
.infolist dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-600);
}
/* location 名是长串无空格的路径，不断行会把手机撑出横向滚动 */
.infolist dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* --- 门店表 -------------------------------------------------------------- */
.dtable--stores td { white-space: nowrap; }
/* 长列名折行：13 列在 1440 宽下才放得进一屏，不用横滑才看到操作列 */
.dtable--stores thead th,
.dtable--stores thead th.num {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.3;
  vertical-align: bottom;
  white-space: normal;
}
/* 冻结列有自己的底色，行 hover 必须同步，否则整行反馈断在第一列 */
.dtable tbody tr:hover .col-sticky { background: var(--fill-100); }
.dtable thead th.col-sticky { z-index: calc(var(--z-sticky-th) + 1); }

/* 手机上冻结列占太宽就没地方横滑了，长店名截断（全名在门店详情页） */
@media (max-width: 899px) {
  .dtable--stores .col-sticky {
    max-width: var(--col-sticky-w);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 排序表头整格可点；方向用箭头（形状）而非只靠颜色 */
.dtable .th-sort {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.dtable .th-sort:hover { text-decoration: underline; }
.dtable th.num .th-sort { justify-content: flex-end; text-align: right; }
.dtable th[aria-sort="ascending"] .th-sort,
.dtable th[aria-sort="descending"] .th-sort { color: var(--ink); }
.th-arrow { font-size: var(--fs-kicker); }

/* --- 分页器 -------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 8px var(--card-pad) 12px;
  font-size: var(--fs-kicker);
  color: var(--muted-700);
}
.pager-current { font-weight: 700; color: var(--ink); }
.pager-size { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pager-size select { width: auto; font-size: var(--fs-sm); }

/* --- 手机菜单 ------------------------------------------------------------ */
/* 桌面侧栏在 <900px 隐藏；后台入口有 7 项，底部 Tab Bar 放不下，改用顶栏下拉 */
.mobnav { position: relative; flex: none; }
.mobnav summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}
.mobnav summary::-webkit-details-marker { display: none; }
.mobnav summary svg { width: 20px; height: 20px; }
.mobnav-menu {
  position: absolute;
  z-index: var(--z-pop);
  top: 100%;
  left: 0;
  min-width: var(--mobnav-w);
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-key);
  box-shadow: var(--e3);
}
.mobnav-menu a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  color: var(--ink);
}
.mobnav-menu a[aria-current="page"] { background: var(--action-100); font-weight: 700; }
.mobnav-user {
  padding: 8px 16px 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--muted-700);
  overflow-wrap: anywhere;
}

/* --- reduced-motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 加载反馈是功能性的，不能停——只放慢 */
  .spinner { animation: spin 1.4s linear infinite !important; }
}

/* --- 打印 ---------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .btn, .skip-link, .pagebar, .quickrange { display: none !important; }
  .panel { box-shadow: none; border: 1px solid #999; }
  .app-main { max-width: none; padding: 0; }
}