/* ═══════════════════════════════════════════════════════════
   Muse UI · 统一设计基座 v1.0   2026-09-20
   ───────────────────────────────────────────────────────────
   唯一真相源。改这里 → 跑 build.py 重新内联进各工具页。
   两条铁律：
     ① 页面里只许用本文件的变量(--m-*)与组件类(.m-*)，禁新造颜色/字号
     ② 所有可点元素 ≥44×44；输入框字号 ≥16（iOS 会自动放大整页）
   为什么：Muse 是科技产品（蓝白系统语言），葡隐是葡萄酒品牌（米白金线）
          —— 工具页借葡隐的金色/纸感 = 混搭，两个品牌都会脏。
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ── 品牌蓝（三支各司其职，都有对比度依据，2026-09-20 实测）──
     --m-brand      实心按钮底 / 选中框底   白字压它 = 4.20:1 ✓(大字≥3)
     --m-brand-bright 图标与点缀（不承载小字）白底图形 3.22:1 ✓(图形≥3)
     --m-brand-text 白底/浅底上的蓝字：返回、文字按钮、链接  5.77:1 ✓
     主站那支亮蓝 #0b93f6 保留为品牌亮色；实心按钮改用深一档，
     否则白字只有 3.22:1，擦线。 */
  --m-brand:#0a7fd4; --m-brand-bright:#0b93f6; --m-brand-text:#0868b3; --m-brand-weak:#e9f4fe;
  /* ── 面 ── */
  --m-bg:#f5f6f8; --m-surface:#fff; --m-surface-2:#fafbfc;
  --m-line:#e6e8eb; --m-line-2:#eef0f2;
  /* ── 字（四级灰，禁新增）──
     规则：只有 --m-ink / --m-ink2 能承载"要读的字"；ink3 只做装饰，
     ink4 只做未选边框（#8a919e 白底 3.17:1，图形门槛 3:1）。
     ink2 取 #616c7c 而非 #6b7280：后者压页底只有 4.47:1，差一点。 */
  --m-ink:#1c1c1e; --m-ink2:#616c7c; --m-ink3:#9ca3af; --m-ink4:#8a919e;
  /* ── 语义色：底色用亮色，压在彩色浅底上的"字"必须用深色版 ──
     ok-text 5.02:1 · warn-text 5.65:1 · danger-text 5.38:1（都按白/浅底实算）*/
  --m-ok:#34c759; --m-ok-text:#0f7a35;
  --m-warn:#ff9500; --m-warn-text:#8a5700;
  --m-danger:#ff3b30; --m-danger-text:#d70015; --m-danger-weak:#fff1f1;
  /* ── 字号六档（禁新增；正文 17 / 长文 15 / 辅助 13 / 标签 11） ── */
  --m-fs-h1:28px; --m-fs-h2:22px; --m-fs-body:17px; --m-fs-sub:15px; --m-fs-cap:13px; --m-fs-tag:11px;
  /* ── 行高：标题紧、中文松 ── */
  --m-lh-tight:1.3; --m-lh-body:1.72;
  /* ── 间距：4 的倍数 ── */
  --m-s1:4px; --m-s2:8px; --m-s3:12px; --m-s4:16px; --m-s5:20px; --m-s6:24px; --m-s8:32px;
  /* ── 圆角 ── */
  --m-r-sm:8px; --m-r:12px; --m-r-card:16px; --m-r-sheet:22px; --m-r-pill:999px;
  /* ── 影：只有两级，别乱加 ── */
  --m-sh-1:0 1px 2px rgba(16,24,40,.04);
  --m-sh-2:0 8px 24px rgba(16,24,40,.10);
  /* ── 触控与动效 ── */
  --m-tap:44px; --m-dur:160ms; --m-dur-2:220ms; --m-ease:cubic-bezier(.32,.72,0,1);
  /* ── 版心：手机上满宽，桌面居中 ── */
  --m-page:560px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
input,textarea,select{font-size:16px !important}   /* 🔴 iOS 防整页放大，删不得 */
body{background:var(--m-bg);color:var(--m-ink);
  font:400 var(--m-fs-body)/var(--m-lh-body) -apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
a{color:var(--m-brand-text);text-decoration:none}
b,strong{font-weight:600}

/* ══ 页面骨架 ══ */
.m-page{max-width:var(--m-page);margin:0 auto;background:var(--m-surface);min-height:100vh;
  padding-bottom:calc(var(--m-s8) + env(safe-area-inset-bottom));
  box-shadow:0 0 60px rgba(16,24,40,.05)}
.m-page.has-bar{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.m-pad{padding:0 var(--m-s5)}
.m-sect{padding:var(--m-s5) var(--m-s5) var(--m-s2)}

/* ══ 顶栏：高 52，返回与图标都是 44×44 触控区 ══ */
.m-top{display:flex;align-items:center;gap:var(--m-s1);height:52px;padding:0 var(--m-s3);
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:.5px solid var(--m-line-2)}
.m-top.solid{border-bottom-color:var(--m-line)}
.m-back{min-width:var(--m-tap);height:var(--m-tap);border-radius:var(--m-r-pill);
  display:flex;align-items:center;gap:2px;padding:0 var(--m-s2) 0 var(--m-s1);
  color:var(--m-brand-text);background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--m-fs-sub);font-weight:500;line-height:1}
.m-back .gl{font-size:22px;line-height:1;margin-top:-2px}           /* 箭头略大，视觉对齐 */
.m-back:active{background:var(--m-brand-weak)}
.m-title{flex:1;text-align:center;font-size:var(--m-fs-body);font-weight:600;
  letter-spacing:.01em;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-topact{display:flex;align-items:center;gap:var(--m-s1)}
/* 图标按钮：42×42 视觉、44×44 触控 */
.m-iconbtn{width:var(--m-tap);height:var(--m-tap);border:0;background:none;cursor:pointer;
  border-radius:var(--m-r-pill);display:flex;align-items:center;justify-content:center;
  color:var(--m-ink2);font-size:20px;line-height:1}
.m-iconbtn:active{background:var(--m-line-2)}
.m-iconbtn.on{color:var(--m-brand-text);background:var(--m-brand-weak)}
.m-iconbtn .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--m-brand);
  transform:translate(14px,-14px)}

/* ══ 标题区 ══ */
.m-hero{padding:var(--m-s4) var(--m-s5) var(--m-s5);border-bottom:.5px solid var(--m-line)}
.m-eyebrow{font-size:var(--m-fs-tag);letter-spacing:.18em;color:var(--m-ink2);text-transform:uppercase}
.m-h1{font-size:var(--m-fs-h1);font-weight:600;letter-spacing:-.02em;line-height:var(--m-lh-tight);
  margin:var(--m-s2) 0 var(--m-s3)}
.m-h2{font-size:var(--m-fs-h2);font-weight:600;letter-spacing:-.015em;line-height:var(--m-lh-tight)}
.m-meta{font-size:var(--m-fs-cap);color:var(--m-ink2);line-height:1.6}
.m-meta b{font-weight:500;color:var(--m-ink)}
.m-secttl{display:flex;align-items:baseline;gap:var(--m-s2);font-size:var(--m-fs-tag);
  font-weight:500;letter-spacing:.16em;color:var(--m-ink2);
  margin:var(--m-s6) 0 var(--m-s3);padding-bottom:var(--m-s2);border-bottom:.5px solid var(--m-line)}
.m-secttl i{font-style:normal;letter-spacing:0;color:var(--m-ink2);opacity:.75;font-weight:400}

/* ══ 卡 ══ */
.m-card{background:var(--m-surface);border:.5px solid var(--m-line);border-radius:var(--m-r-card);
  padding:var(--m-s4);margin-bottom:var(--m-s3);box-shadow:var(--m-sh-1)}
.m-card.tint{background:var(--m-surface-2)}
.m-card.brand{border-color:#cde7fd;background:var(--m-brand-weak)}
.m-card-hd{display:flex;align-items:baseline;gap:var(--m-s2);margin-bottom:var(--m-s2)}
.m-card-hd b{font-size:var(--m-fs-body);font-weight:600;letter-spacing:-.01em}
.m-card-hd i{font-style:normal;font-size:var(--m-fs-tag);color:var(--m-ink2)}
/* 报告正文（长文档 15px） */
.m-txt{font-size:var(--m-fs-sub);color:var(--m-ink);line-height:1.78}
.m-txt em{font-style:normal;font-weight:600;color:var(--m-ink)}
.m-note{font-size:var(--m-fs-cap);color:var(--m-ink2);line-height:1.7}
/* 半透明只能压装饰；要读的字一律用实色 token */
.m-row{display:flex;align-items:center;justify-content:space-between;gap:var(--m-s3);
  min-height:52px;padding:var(--m-s3) var(--m-s4);background:var(--m-surface);
  border-bottom:.5px solid var(--m-line-2);cursor:pointer}
.m-row:last-child{border-bottom:0}
.m-row:active{background:var(--m-surface-2)}
.m-row .t{font-size:var(--m-fs-sub);color:var(--m-ink)}
.m-row .v{font-size:var(--m-fs-sub);color:var(--m-ink2)}
.m-row .chev{color:var(--m-ink4);font-size:18px}
.m-list{border:.5px solid var(--m-line);border-radius:var(--m-r-card);overflow:hidden;background:var(--m-surface)}

/* ══ 按钮 ══ */
.m-btn{min-height:48px;padding:0 var(--m-s6);border:0;border-radius:var(--m-r);
  font-family:inherit;font-size:var(--m-fs-body);font-weight:500;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--m-s2);
  transition:transform var(--m-dur) var(--m-ease),opacity var(--m-dur) var(--m-ease)}
.m-btn:active{transform:scale(.97)}
.m-btn.primary{background:var(--m-brand);color:#fff}
.m-btn.primary:disabled{opacity:.4;transform:none}
.m-btn.ghost{background:var(--m-line-2);color:var(--m-ink)}
.m-btn.quiet{background:none;color:var(--m-brand-text);padding:0 var(--m-s3)}
.m-btn.danger{background:var(--m-danger);color:#fff}
.m-btn.danger-ghost{background:var(--m-danger-weak);color:var(--m-danger-text)}
.m-btn.block{display:flex;width:100%}

/* ══ 标签 / 徽标 ══ */
.m-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 var(--m-s2);
  border-radius:var(--m-r-pill);font-size:var(--m-fs-tag);font-weight:500;letter-spacing:.02em}
.m-tag.brand{background:var(--m-brand-weak);color:var(--m-brand-text)}
.m-tag.ok{background:#e8faee;color:var(--m-ok-text)}
.m-tag.warn{background:#fff5e6;color:var(--m-warn-text)}
.m-tag.off{background:var(--m-line-2);color:var(--m-ink2)}
.m-tag.data{background:var(--m-line-2);color:var(--m-ink);font-variant-numeric:tabular-nums}

/* ══ 选择行（勾选态 = 颜色 + 形状双编码） ══ */
.m-check{display:flex;align-items:center;justify-content:space-between;gap:var(--m-s3);
  min-height:52px;padding:var(--m-s3) var(--m-s4);background:var(--m-surface);cursor:pointer;
  border-bottom:.5px solid var(--m-line-2)}
.m-check:last-child{border-bottom:0}
.m-check:active{background:var(--m-surface-2)}
.m-check .nm{font-size:var(--m-fs-sub);color:var(--m-ink)}
.m-check .bx{flex:0 0 auto;width:24px;height:24px;border-radius:var(--m-r-sm);
  border:1.5px solid var(--m-ink4);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:transparent;transition:all var(--m-dur) var(--m-ease)}
.m-check.on .bx{background:var(--m-brand);border-color:var(--m-brand);color:#fff}
.m-check.on .bx::after{content:"✓"}
.m-check.on .nm{font-weight:500}

/* ══ 底部动作条：主操作是拇指动作，永远全宽在最后 ══ */
.m-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:var(--m-page);margin:0 auto;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:.5px solid var(--m-line);padding:var(--m-s3) var(--m-s5) calc(var(--m-s3) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--m-s3)}
.m-bar .cnt{flex:1;font-size:var(--m-fs-cap);color:var(--m-ink2);font-variant-numeric:tabular-nums}

/* ══ 空 / 载 / 错 三态 ══ */
.m-empty{text-align:center;padding:56px var(--m-s5);color:var(--m-ink2);font-size:var(--m-fs-sub);line-height:1.9}
.m-empty .ico{font-size:28px;display:block;margin-bottom:var(--m-s3);opacity:.5}
.m-loading{text-align:center;padding:48px var(--m-s5);color:var(--m-ink2);font-size:var(--m-fs-sub)}
.m-spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--m-line);
  border-top-color:var(--m-brand);animation:m-spin .8s linear infinite;display:inline-block;
  vertical-align:-4px;margin-right:var(--m-s2)}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-skel{height:14px;border-radius:var(--m-r-sm);margin-bottom:var(--m-s3);
  background:linear-gradient(90deg,#f0f1f3,#f7f8f9,#f0f1f3);background-size:200% 100%;
  animation:m-sh 1.4s linear infinite}
@keyframes m-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══ 轻提示 ══ */
.m-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(12px);
  opacity:0;background:rgba(28,28,30,.94);color:#fff;font-size:var(--m-fs-cap);
  padding:var(--m-s3) var(--m-s5);border-radius:var(--m-r);transition:all var(--m-dur-2) var(--m-ease);
  pointer-events:none;z-index:60;max-width:78%}
.m-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ 折叠块 ══ */
.m-fold{margin-top:var(--m-s3);border-top:.5px solid var(--m-line-2);padding-top:var(--m-s3)}
.m-fold summary{font-size:var(--m-fs-cap);color:var(--m-ink2);cursor:pointer;list-style:none;
  min-height:44px;display:flex;align-items:center}   /* 折叠开关是控件，按 44 判，不是行内链 */
.m-fold summary::-webkit-details-marker{display:none}
.m-fold ul{margin:var(--m-s1) 0 0 var(--m-s4);list-style:none}
.m-fold li{font-size:var(--m-fs-cap);color:var(--m-ink2);line-height:1.7;margin-bottom:var(--m-s2)}
/* 行内链：不必 44（会撑坏版式），但要撑到 ≥32 的行高，手指才点得准 */
.m-fold li a{display:inline-block;padding:6px 0;color:var(--m-ink2);border-bottom:1px dotted var(--m-ink4)}
.m-fold li span{color:var(--m-ink2);opacity:.8}
/* ═══════════════════════════════════════════════════════════
   v1.1 追加（2026-09-23 · 唱片车间三端落地时发现基座缺三件）
   ① 底部标签栏 —— 工具页有多个目的地（待办/判断/生产）
   ② 桌面骨架   —— 生产视图要在电脑上三栏，手机版缩小解决不了
   ③ 指标格     —— 判断屏四条判据要一眼看完
   ④ 筹码筛选   —— 列表要筛（没过判据/没听过/体检有硬伤）
   规矩不变：只有本文件能定义颜色与字号；页面里只许用 --m-* 与 .m-*。
   ═══════════════════════════════════════════════════════════ */

/* ── 底部标签栏：标签 13px（11px 会被自检红线判「字号过小」，标签也要读得清）── */
.m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:var(--m-page);margin:0 auto;
  display:flex;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:.5px solid var(--m-line);padding-bottom:env(safe-area-inset-bottom)}
.m-tabbar a{flex:1;min-height:54px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:var(--m-fs-cap);color:var(--m-ink2);
  padding-top:4px;cursor:pointer}
.m-tabbar a i{font-style:normal;font-size:19px;line-height:1}
.m-tabbar a.on{color:var(--m-brand-text);font-weight:600}
.m-page.has-tabbar{padding-bottom:calc(74px + env(safe-area-inset-bottom))}

/* ── 筹码筛选：热区按 44 判；选中态用浅蓝底+蓝字（13px 白字压实心蓝只有 4.20:1，不够 4.5）── */
.m-chips{display:flex;flex-wrap:wrap;gap:var(--m-s2)}
.m-chip{min-height:var(--m-tap);padding:0 var(--m-s4);border-radius:var(--m-r-pill);
  border:.5px solid var(--m-line);background:var(--m-surface);color:var(--m-ink2);
  font-family:inherit;font-size:var(--m-fs-cap);font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.m-chip.on{background:var(--m-brand-weak);border-color:#bcdffb;color:var(--m-brand-text)}
.m-chip:active{background:var(--m-line-2)}

/* ── 指标格：值 22/600（大字 3:1 门槛），标签与注解都用 13px 灰 ── */
.m-mets{display:grid;grid-template-columns:1fr 1fr;gap:.5px;background:var(--m-line);
  border:.5px solid var(--m-line);border-radius:var(--m-r-card);overflow:hidden}
.m-met{background:var(--m-surface);padding:var(--m-s3) var(--m-s4);min-height:78px}
.m-met .k{font-size:var(--m-fs-cap);color:var(--m-ink2);line-height:1.5}
.m-met .v{font-size:var(--m-fs-h2);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;margin:2px 0;color:var(--m-ink)}
.m-met .h{font-size:var(--m-fs-cap);color:var(--m-ink2);line-height:1.5}
.m-met.bad .v{color:var(--m-danger-text)}
.m-met.ok .v{color:var(--m-ok-text)}

/* ── 桌面骨架：≥1080 三栏，窄屏自动落回单栏（同一份 HTML，不写两套页面）── */
.m-wide{max-width:1180px;margin:0 auto;background:var(--m-surface);min-height:100vh;
  box-shadow:0 0 60px rgba(16,24,40,.05);padding-bottom:var(--m-s8)}
.m-wrap{display:grid;grid-template-columns:300px minmax(0,1fr) 320px}
.m-col{padding:var(--m-s5);border-right:.5px solid var(--m-line-2);min-height:60vh;min-width:0}
.m-col:last-child{border-right:0}
@media (max-width:1079px){
  .m-wrap{grid-template-columns:1fr}
  .m-col{border-right:0;border-bottom:.5px solid var(--m-line-2);min-height:0}
}
@media (min-width:1080px){ .only-narrow{display:none!important} }
@media (max-width:1079px){ .only-wide{display:none!important} }

/* ── 数据行里的紧凑表（桌面判据表用）：只借 token，不新造颜色字号 ── */
.m-tbl{width:100%;border-collapse:collapse;font-size:var(--m-fs-cap)}
.m-tbl th{text-align:right;font-weight:500;color:var(--m-ink2);padding:var(--m-s2) var(--m-s2);
  border-bottom:.5px solid var(--m-line);white-space:nowrap}
.m-tbl th:first-child,.m-tbl td:first-child{text-align:left}
.m-tbl td{text-align:right;padding:var(--m-s2);border-bottom:.5px solid var(--m-line-2);
  font-variant-numeric:tabular-nums;color:var(--m-ink)}
.m-tbl tr.on td{background:var(--m-brand-weak)}
.m-tbl .num{font-variant-numeric:tabular-nums}
/* 列表行选中态（选中 = 颜色 + 左侧色条，双编码） */
.m-row.on{background:var(--m-brand-weak);box-shadow:inset 3px 0 0 var(--m-brand)}

