/* ── 门店对比页 ──  只作用于 #page-cmp：每条选择器都以 #page-cmp 开头、类名一律 cmp- 前缀，其它页签一个像素都不动。
   骨架沿用看板和客户页（楷体标题、蓝色强调、分段按钮、白卡片）；数字用无衬线等宽数字，上下能对齐。
   条形图：条高 14px（上限 24）、数据端 4px 圆角、基线端直角、单一颜色；参考线用虚线；文字一律用文字色，不用条的颜色。 */
#page-cmp{
  --cmp-ink:#1b1b1b;--cmp-ink2:#3b4252;--cmp-dim:#646b78;--cmp-faint:#7d8594;
  --cmp-line:#e6e8ee;--cmp-hair:#eff1f5;--cmp-soft:#f6f8fb;--cmp-canvas:#f4f5f7;
  --cmp-blue:var(--blue,#2f5bb7);--cmp-blue-bg:#eef3ff;
  --cmp-red:#b83a32;--cmp-green:#23804a;
  --cmp-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Microsoft YaHei",sans-serif;
  --cmp-top:48px;--cmp-pad:calc(54px + var(--tb-pad,0px) + env(safe-area-inset-bottom) + 12px);
  --cmp-c1:92px;--cmp-c3:84px;--cmp-gap:8px;      /* 排名行三列：店名 | 条 | 数值。参考线的位置要用到这三个数 */
  background:var(--cmp-canvas);min-height:calc(100vh - 48px);color:var(--cmp-ink);
  margin-bottom:calc(-1 * var(--cmp-pad));padding-bottom:var(--cmp-pad);   /* 灰底铺到底栏下面，盖住 .app 的白色留白；只作用于本页 */
}
#page-cmp *{box-sizing:border-box}
#page-cmp button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
#page-cmp button:focus-visible,#page-cmp .cmp-tbl:focus-visible{outline:2px solid var(--cmp-blue);outline-offset:2px;border-radius:6px}

/* ── 吸顶筛选区：日期范围一行，餐段 + 区域一行 ── */
#page-cmp .cmp-head{position:-webkit-sticky;position:sticky;top:var(--cmp-top);z-index:4;padding:8px 12px 9px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line,#e6e6e6)}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){#page-cmp .cmp-head{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}}
#page-cmp .cmp-seg{display:flex;flex:1 1 0;min-width:0;padding:3px;border-radius:10px;background:#e9ecf1}
#page-cmp .cmp-seg button{flex:1 1 0;min-width:0;padding:6px 2px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--cmp-ink2);text-align:center;white-space:nowrap;transition:background .18s,box-shadow .18s,color .18s}
#page-cmp .cmp-seg button.cmp-on{background:#fff;color:var(--cmp-blue);font-weight:600;box-shadow:0 1px 3px rgba(23,43,77,.12)}
#page-cmp .cmp-two{display:flex;align-items:center;gap:6px;margin-top:7px}
#page-cmp .cmp-two>span{flex:none;font-family:var(--cmp-sans);font-size:11.5px;color:var(--cmp-dim)}
#page-cmp .cmp-two .cmp-seg+span{margin-left:4px}
#page-cmp .cmp-two .cmp-seg button{font-size:13px;padding:5px 2px}

/* ── 正文 ── */
#page-cmp .cmp-body{padding-bottom:18px;animation:cmp-in .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes cmp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#page-cmp .cmp-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:14px 14px 8px}
#page-cmp .cmp-title{font-size:18px;font-weight:600;letter-spacing:.01em;line-height:1.2}
#page-cmp .cmp-title small{font-size:12.5px;font-weight:400;color:var(--cmp-dim);margin-left:8px}
#page-cmp .cmp-fresh{margin-left:auto;font-family:var(--cmp-sans);font-size:11.5px;color:var(--cmp-dim);font-variant-numeric:tabular-nums}
#page-cmp .cmp-notes{list-style:none;margin:0 12px 10px;padding:9px 12px;border-radius:10px;background:#fff8ec;border:1px solid #f4e0bd;font-size:12.5px;line-height:1.65;color:#7a4b06}
#page-cmp .cmp-notes li{position:relative;padding-left:12px}
#page-cmp .cmp-notes li+li{margin-top:3px}
#page-cmp .cmp-notes li::before{content:"";position:absolute;left:1px;top:.72em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
#page-cmp .cmp-card{margin:0 12px 12px;padding:13px 14px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(23,43,77,.06),0 0 0 1px rgba(23,43,77,.04)}
#page-cmp .cmp-card h4{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:15px;font-weight:600}
#page-cmp .cmp-card h4 small{font-size:12px;font-weight:400;color:var(--cmp-dim)}
#page-cmp .cmp-hint{margin:10px 0 0;font-size:12px;line-height:1.65;color:var(--cmp-dim)}
#page-cmp .cmp-flush{padding-left:0;padding-right:0;padding-bottom:12px}
#page-cmp .cmp-flush .cmp-hint{padding:0 14px}
#page-cmp .cmp-flush h4{padding:0 14px}

/* ── 指标切换：八个一次排开，不藏在横向滚动里 ── */
#page-cmp .cmp-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#page-cmp .cmp-metrics button{padding:5px 2px;border:1px solid #dcdfe6;border-radius:15px;background:#fff;font-size:13px;line-height:1.4;color:#333;text-align:center;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
#page-cmp .cmp-metrics button.cmp-off{color:var(--cmp-faint);border-style:dashed}
#page-cmp .cmp-metrics button.cmp-on{background:var(--cmp-blue);border-color:var(--cmp-blue);border-style:solid;color:#fff}
#page-cmp .cmp-metrics button:active{opacity:.75}

/* ── 排名条 ── */
#page-cmp .cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:20px;margin:12px 0 4px;font-family:var(--cmp-sans);font-size:12px;color:var(--cmp-dim);font-variant-numeric:tabular-nums}
#page-cmp .cmp-legend>i{flex:none;width:0;height:13px;margin-right:-3px;border-left:1.5px dashed var(--cmp-ink2)}
#page-cmp .cmp-legend b{font-weight:600;color:var(--cmp-ink)}
#page-cmp .cmp-legend em{margin-left:auto;font-style:normal;color:var(--cmp-faint)}
#page-cmp .cmp-bars{position:relative}
#page-cmp .cmp-row{display:grid;grid-template-columns:var(--cmp-c1) minmax(0,1fr) var(--cmp-c3);column-gap:var(--cmp-gap);align-items:center;min-height:34px}
#page-cmp .cmp-nm{display:flex;align-items:center;gap:6px;min-width:0;font-size:13.5px;white-space:nowrap}
#page-cmp .cmp-nm b{flex:none;width:17px;height:17px;border-radius:50%;font-family:var(--cmp-sans);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;color:#7a8290;background:#f0f2f5;font-variant-numeric:tabular-nums}
#page-cmp .cmp-top .cmp-nm{font-weight:600}
#page-cmp .cmp-top .cmp-nm b{color:#fff;background:var(--cmp-blue)}
#page-cmp .cmp-low .cmp-nm b{color:var(--cmp-red);background:#fdeeec}
#page-cmp .cmp-none .cmp-nm{color:var(--cmp-dim)}
#page-cmp .cmp-none .cmp-nm b{background:none}
#page-cmp .cmp-track{display:block;height:14px;border-left:1px solid #d5d9e0}
#page-cmp .cmp-track i{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--cmp-blue);transform-origin:0 50%;animation:cmp-grow .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes cmp-grow{from{transform:scaleX(0)}to{transform:none}}
#page-cmp .cmp-val{font-family:var(--cmp-sans);font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--cmp-ink)}
#page-cmp .cmp-none .cmp-val{font-weight:400;color:var(--cmp-faint)}
#page-cmp .cmp-ref{position:absolute;top:2px;bottom:2px;width:0;border-left:1.5px dashed var(--cmp-ink2);pointer-events:none;
  left:calc(var(--cmp-c1) + var(--cmp-gap) + (100% - var(--cmp-c1) - var(--cmp-c3) - 2 * var(--cmp-gap)) * var(--cmp-x))}

/* ── 各店的区域算了哪些营业餐厅：默认收着，点开是一张单子 ── */
#page-cmp .cmp-scope{margin:12px 0 0;font-size:12px;line-height:1.65;color:var(--cmp-dim)}
#page-cmp .cmp-scope summary{display:inline-block;padding:3px 0;color:var(--cmp-blue);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
#page-cmp .cmp-scope summary::-webkit-details-marker{display:none}
#page-cmp .cmp-scope summary::after{content:"▾";margin-left:4px;font-size:10px}
#page-cmp .cmp-scope[open] summary::after{content:"▴"}
#page-cmp .cmp-scope ul{list-style:none;margin:6px 0 0;padding:9px 12px;border-radius:10px;background:var(--cmp-soft)}
#page-cmp .cmp-scope li{display:flex;flex-wrap:wrap;gap:0 8px;color:var(--cmp-ink2)}
#page-cmp .cmp-scope li+li{margin-top:4px}
#page-cmp .cmp-scope li b{flex:none;width:6em;font-weight:600;color:var(--cmp-ink)}
#page-cmp .cmp-scope li em{flex:0 0 100%;padding-left:6.65em;font-style:normal;color:#8a5a0a}
#page-cmp .cmp-scope p{margin:8px 0 0}

/* ── 明细表：首列固定，其余横向滑动 ── */
#page-cmp .cmp-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#page-cmp .cmp-tbl table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--cmp-sans);font-size:12.5px;font-variant-numeric:tabular-nums}
#page-cmp .cmp-tbl th,#page-cmp .cmp-tbl td{padding:9px 9px;text-align:right;white-space:nowrap;border-top:1px solid var(--cmp-hair);background:#fff}
#page-cmp .cmp-tbl thead th{padding:0;border-top:0;font-size:11.5px;font-weight:500;color:var(--cmp-dim);background:#fafbfc}
#page-cmp .cmp-tbl thead button{display:block;width:100%;padding:8px 9px;text-align:right;white-space:nowrap}
#page-cmp .cmp-tbl thead button i{font-style:normal;margin-left:2px;color:var(--cmp-blue)}
#page-cmp .cmp-tbl thead th[aria-sort="ascending"] button,#page-cmp .cmp-tbl thead th[aria-sort="descending"] button{color:var(--cmp-blue);font-weight:600}
#page-cmp .cmp-tbl tr>:first-child{position:-webkit-sticky;position:sticky;left:0;z-index:1;text-align:left;padding-left:14px;box-shadow:1px 0 0 var(--cmp-hair)}
#page-cmp .cmp-tbl thead tr>:first-child{padding-left:0}
#page-cmp .cmp-tbl thead tr>:first-child button{text-align:left;padding-left:14px}
#page-cmp .cmp-tbl tbody th{font-family:inherit;font-size:13px;font-weight:600;color:var(--cmp-ink)}
#page-cmp .cmp-tbl tr>:last-child{padding-right:14px}
#page-cmp .cmp-tbl thead tr>:last-child{padding-right:0}
#page-cmp .cmp-tbl thead tr>:last-child button{padding-right:14px}
#page-cmp .cmp-tbl td.cmp-cur{background:#f7f9fe}
#page-cmp .cmp-tbl thead th.cmp-cur{background:#f1f5fd}
#page-cmp .cmp-tbl td.cmp-na{color:var(--cmp-faint)}
#page-cmp .cmp-tbl td.cmp-bad{color:var(--cmp-red)}
#page-cmp .cmp-tbl td.cmp-ok{color:var(--cmp-green)}
#page-cmp .cmp-tbl tr.cmp-tot th,#page-cmp .cmp-tbl tr.cmp-tot td{font-weight:700;background:#fafbfc;border-top:1px solid #dfe3ea}
#page-cmp .cmp-tbl tr.cmp-tot td.cmp-cur{background:#f1f5fd}

/* ── 空 / 载入 / 脚注 ── */
#page-cmp .cmp-empty{margin:12px 0 0;padding:22px 16px;border-radius:12px;background:var(--cmp-soft);text-align:center}
#page-cmp .cmp-body>.cmp-empty{margin:14px 12px 0;background:#fff;box-shadow:0 0 0 1px rgba(23,43,77,.04)}
#page-cmp .cmp-empty h5{margin:0 0 4px;font-size:15px;font-weight:600}
#page-cmp .cmp-empty p{margin:0;font-size:12.5px;line-height:1.7;color:var(--cmp-dim)}
#page-cmp .cmp-empty button{margin-top:12px;padding:7px 18px;border-radius:16px;border:1px solid var(--cmp-blue);color:var(--cmp-blue);font-size:13px}
#page-cmp .cmp-body[aria-busy="true"]{padding-top:14px}
#page-cmp .cmp-sk{border-radius:10px;background:linear-gradient(90deg,#eceef2 25%,#e3e6eb 37%,#eceef2 63%);background-size:400% 100%;animation:cmp-sh 1.3s ease infinite}
@keyframes cmp-sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
#page-cmp .cmp-foot{margin:16px 16px 0;font-size:11.5px;line-height:1.75;color:var(--cmp-dim);text-align:center}

@media (max-width:359px){#page-cmp{--cmp-c1:86px;--cmp-c3:78px}#page-cmp .cmp-nm,#page-cmp .cmp-val{font-size:12.5px}#page-cmp .cmp-seg button{font-size:12.5px}#page-cmp .cmp-two .cmp-seg button{font-size:12px}#page-cmp .cmp-metrics button{font-size:12px}}
@media (prefers-reduced-motion:reduce){#page-cmp .cmp-body,#page-cmp .cmp-track i{animation:none}#page-cmp *{transition:none!important}#page-cmp .cmp-sk{animation:none}}

/* ── 本文件唯一一条不在 #page-cmp 里的规则：底部页签栏「管理」右上角的待办角标 ──
   加了「对比」后页签栏从六格变七格，每格窄了 9px 左右；角标原来按右边距 14px 定位，格子一窄就往左压到图标上（390 宽盖住七成，360 宽九成）。
   改成跟着格子中线走，位置与原来 390 宽六格时相同。index.html 这次只做接线，所以放在这里；以后整理页签栏样式时挪回去。 */
.tabbar #todoBadge{right:auto;left:calc(50% + 2.5px)}