/* 会展 AI 指挥中心 —— 亮色（ARC Collective 色系）
   Token 直接取自 group.arccollective.ai：暖白底 #FAFAF8 + 卡片白 + 金色 #C9A96E 系
   + DM Sans / PingFang SC，卡片 radius 12px + 极轻阴影。

   🔴 每个用到的 font-weight 都必须出现在 index.html 的 wght@ 列表里，
      否则中文字重会静默回退（components/ui.md L544）。
      本文件用到：400 / 500 / 600 / 700 —— 已全部在请求里。

   亮色化的两处关键调整（不是照抄 ARC 就完事）：
   ① 金色 #C9A96E 在白底上做正文色对比度不够 → 文字用 --gold-deep #A07840，
      填充/进度条才用 --gold。
   ② 大屏要一眼读出状态，状态色必须比 ARC 原站更饱和才压得住白底。 */

:root {
  /* ── ARC 原站 token ── */
  --bg:        #FAFAF8;
  --bg-card:   #FFFFFF;
  --bg-soft:   #F5F3EE;
  --bg-elevated: #F5F3EE;
  --bg-hover:  #EFEBE2;

  --text:           #1A1A1A;
  --text-primary:   #1A1A1A;
  --text-secondary: #666666;
  --text-muted:     #999999;

  --border:        #E8E4DD;
  --border-strong: #D8D1C4;

  --gold:       #C9A96E;
  --gold-2:     #B8956A;
  --gold-deep:  #A07840;   /* 白底上唯一可做正文的金 */
  --gold-4:     #D4AF78;
  --gold-5:     #E8D5B0;
  --gold-bg:    rgba(201,169,110,.12);
  --gold-grad:  linear-gradient(135deg,#C9A96E 0%,#D4AF78 40%,#B8956A 100%);

  --shadow:       0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --radius: 12px;

  /* ── 大屏状态色（比 ARC 原站饱和，白底才压得住）── */
  --success: #1E8055;
  --warning: #B8791A;
  --danger:  #C2413B;
  --amber:   #B8791A;
  --magenta: #B03A6B;

  --font-body:   'DM Sans','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-number: 'DM Sans','Inter',-apple-system,ui-monospace,monospace;

  --header-h: 58px;
  --gap: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ══ 两种显示模式 ══════════════════════════════════════
   阅读模式（默认）—— 人在浏览器里从头读到尾：页面整体滚动，
     卡片按内容撑开，不做内部滚动，什么都不截断。
   适屏模式 —— 投在会场大屏上无人值守：一屏装下，
     卡片内部滚动 + 列表自动循环滚。
   起因：2026-09-17 David 实测「想往下拉页面，却只能在 9 个卡片里拉动」。
   一屏装下是大屏的需求，不是读它的人的需求 —— 两者不能只留一个。 */

body.mode-read { overflow-y: auto; overflow-x: hidden; }
body.mode-fit  { overflow: hidden; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }

/* ══ 顶栏 ══════════════════════════════════════════════ */
.header {
  position: sticky; top: 0;      /* 阅读模式下拉页面时顶栏跟着走 */
  height: var(--header-h);
  display:flex; align-items:center; gap:16px;
  padding:0 18px;
  background: rgba(250,250,248,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  position:relative; z-index:10;
}
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark {
  width:32px; height:32px; border-radius:9px;
  background: var(--gold-grad);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow: var(--shadow);
}
.brand-text h1 { font-size:15px; font-weight:700; letter-spacing:-.2px; }
.brand-text p  { font-size:10.5px; color:var(--text-muted); font-weight:400; }

.phase-switch { display:flex; gap:2px; background:var(--bg-soft); padding:3px; border-radius:9px; border:1px solid var(--border); }
.phase-btn {
  border:0; background:transparent; color:var(--text-secondary);
  font-family:var(--font-body); font-size:11.5px; font-weight:500;
  padding:5px 12px; border-radius:7px; cursor:pointer;
  transition: background .18s, color .18s; white-space:nowrap;
}
.phase-btn:hover { color:var(--text); background:rgba(0,0,0,.03); }
.phase-btn.active { background:var(--bg-card); color:var(--gold-deep); font-weight:600; box-shadow:var(--shadow); }
.mode-switch { display:flex; gap:2px; background:var(--bg-soft); padding:3px; border-radius:9px; border:1px solid var(--border); }
.mode-btn {
  border:0; background:transparent; color:var(--text-secondary);
  font-family:var(--font-body); font-size:11px; font-weight:500;
  padding:5px 10px; border-radius:7px; cursor:pointer; white-space:nowrap;
  transition: background .18s, color .18s;
}
.mode-btn:hover { color:var(--text); background:rgba(0,0,0,.03); }
.mode-btn.active { background:var(--bg-card); color:var(--gold-deep); font-weight:600; box-shadow:var(--shadow); }

.phase-hint { font-size:10.5px; color:var(--text-muted); }
.phase-hint b { color:var(--gold-deep); font-weight:600; }

.header-spacer { flex:1; }

.hdr-weather { display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 11px; border-radius:9px; transition:background .18s; }
.hdr-weather:hover { background:var(--bg-soft); }
.hdr-weather .t { font-family:var(--font-number); font-size:17px; font-weight:600; }
.hdr-weather .meta { font-size:10px; color:var(--text-secondary); line-height:1.35; }
.hdr-weather .meta b { color:var(--gold-deep); font-weight:500; }

.hdr-clock { text-align:right; }
.hdr-clock .time { font-family:var(--font-number); font-size:15px; font-weight:600; letter-spacing:.3px; }
.hdr-clock .cd   { font-size:10.5px; color:var(--gold-deep); font-weight:500; }

.override-flag {
  background:var(--gold-bg); color:var(--gold-deep);
  font-size:10px; font-weight:600; padding:3px 9px; border-radius:6px;
  border:1px solid rgba(201,169,110,.35);
}

/* ══ 9 宫格（ARC 卡片式，不是暗色的 1px 分割线）══════════ */
.grid-9 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
}
/* 阅读模式：行高按内容撑开，页面自己变长 */
body.mode-read .grid-9 {
  grid-auto-rows: minmax(268px, auto);
  min-height: calc(100vh - var(--header-h));
  /* 🔴 grid 的 align-content 默认是 stretch：内容不够高时，
     多余的空间会被摊进行高，每个卡片下面拖一大片空白。
     start = 行高只由内容决定，剩下的留在页面底部。 */
  align-content: start;
}
body.mode-read .panel-body { overflow: visible; }

/* 适屏模式：锁死一屏，卡片内部滚 */
body.mode-fit .grid-9 {
  grid-template-rows: minmax(268px,39vh) minmax(228px,32vh) minmax(200px,auto);
  min-height: calc(100vh - var(--header-h));
  height: calc(100vh - var(--header-h));
}
body.mode-fit .panel-body { overflow-y: auto; }

.panel {
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
  transition: box-shadow .22s, border-color .22s, transform .16s;
}
.panel.clickable { cursor:pointer; }
.panel.clickable:hover { box-shadow: var(--shadow-hover); border-color:var(--gold-5); transform:translateY(-1px); }
.panel.lead::after {
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background: var(--gold-grad);
}

.panel-header {
  height:38px; min-height:38px;
  display:flex; align-items:center; gap:8px;
  padding:0 14px;
  border-bottom:1px solid var(--border);
}
.panel-header h2 { font-size:12.5px; font-weight:600; flex:1; letter-spacing:-.1px; }
.panel-header .tag {
  font-size:9.5px; font-weight:500; color:var(--text-muted);
  border:1px solid var(--border); border-radius:5px; padding:1px 6px;
}
.panel-badge {
  font-family:var(--font-number); font-size:10.5px; font-weight:600;
  color:var(--gold-deep); background:var(--gold-bg); padding:2px 8px; border-radius:6px;
}
.dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.dot[data-status="ok"]      { background:var(--success); }
.dot[data-status="warning"] { background:var(--warning); }
.dot[data-status="error"]   { background:var(--danger); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.panel-body { flex:1; overflow-y:auto; padding:10px 14px; scroll-behavior:smooth; }
.loading { color:var(--text-muted); font-size:11px; padding:14px 0; text-align:center; }

/* ══ 通用块 ════════════════════════════════════════════ */
.kpi-row { display:flex; gap:8px; margin-bottom:10px; }
.kpi {
  flex:1; background:var(--bg-soft); border-radius:9px; padding:9px 10px;
  border:1px solid transparent;
}
.kpi .v { font-family:var(--font-number); font-size:20px; font-weight:700; line-height:1.15; letter-spacing:-.5px; }
.kpi .v small { font-size:11px; font-weight:500; color:var(--text-secondary); margin-left:2px; letter-spacing:0; }
.kpi .l { font-size:10.5px; color:var(--text-secondary); margin-top:3px; }
/* 🔴 准则：一个 KPI 格只放一种分母的比例 —— 分母必须写出来，否则会被相加 */
.kpi .d { font-size:9.5px; color:var(--text-muted); margin-top:1px; }
.kpi.accent { background:var(--gold-bg); }
.kpi.accent .v { color:var(--gold-deep); }
.kpi.warn   .v { color:var(--warning); }
.kpi.bad    .v { color:var(--danger); }

.row { display:flex; align-items:center; gap:8px; padding:5.5px 0; border-bottom:1px solid var(--border); font-size:11.5px; }
.row:last-child { border-bottom:0; }
.row .grow { flex:1; min-width:0; }
.row .num { font-family:var(--font-number); font-weight:600; }
.ellip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 🔴 这些条在 HTML 里是 <span>，inline 元素不吃 height/width —— 必须显式 block。
      只有「flex 容器的直接子元素」会被自动 blockify，嵌在里面的那一层不会。 */
/* 行内「条」与「百分比」两栏：提成 class 才能按断点调，
   内联 style 压不住媒体查询（手机上条抢走太多宽度，名字被截成「中心广场·美食核…」）*/
.bar-cell { display:block; flex:1.2; min-width:44px; }
.pct-cell { width:40px; text-align:right; font-size:10px; color:var(--text-muted); flex-shrink:0; }

.bar-track { display:block; width:100%; height:7px; background:var(--bg-soft); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.bar-fill  { display:block; height:100%; border-radius:3px; transition:width .5s ease; background:var(--gold); }
.bar-fill.ok      { background:var(--success); }
.bar-fill.warning { background:var(--warning); }
.bar-fill.danger  { background:var(--danger); }
.bar-fill.muted   { background:var(--border-strong); }
.bar-fill.primary { background:var(--gold); }

.sev { display:inline-block; white-space:nowrap; font-size:9.5px; font-weight:600; padding:1.5px 7px; border-radius:5px; flex-shrink:0; }
.sev.low      { background:var(--bg-soft);            color:var(--text-secondary); }
.sev.medium   { background:rgba(184,121,26,.13);      color:var(--warning); }
.sev.high     { background:rgba(194,65,59,.12);       color:var(--danger); }
.sev.critical { background:rgba(194,65,59,.22);       color:#8E2B26; animation:pulse 1.2s infinite; }

.chip { display:inline-block; white-space:nowrap; font-size:9.5px; padding:2px 7px; border-radius:5px; background:var(--bg-soft); color:var(--text-secondary); }
.chip.jade { background:var(--gold-bg); color:var(--gold-deep); }
.chip.amber{ background:rgba(184,121,26,.13); color:var(--warning); }
.chip.mag  { background:rgba(176,58,107,.11); color:var(--magenta); }

.synthetic-note {
  font-size:9.5px; color:var(--text-muted); margin-top:9px;
  padding-top:7px; border-top:1px dashed var(--border-strong); line-height:1.6;
}

/* 漏斗（纯 CSS，无图表库） */
.funnel { display:flex; flex-direction:column; gap:3px; }
.funnel-step { display:flex; align-items:center; gap:8px; }
.funnel-bar {
  height:22px; border-radius:5px; display:flex; align-items:center;
  padding:0 9px; min-width:54px; color:#5A4218;
  background:linear-gradient(90deg, var(--gold-4), var(--gold-5));
  font-family:var(--font-number); font-size:10.5px; font-weight:600;
  transition:width .5s ease;
}
.funnel-label { font-size:10.5px; color:var(--text-secondary); width:58px; flex-shrink:0; text-align:right; }
.funnel-step-rate { font-size:9.5px; color:var(--text-muted); font-family:var(--font-number); }

/* 清洗流水线 */
.pipe { display:flex; flex-direction:column; gap:6px; }
.pipe-step { display:flex; align-items:center; gap:9px; font-size:11.5px; }
.pipe-idx {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:var(--gold-bg); color:var(--gold-deep);
  font-family:var(--font-number); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pipe-body { flex:1; min-width:0; }
.pipe-name { font-size:11.5px; }
.pipe-track { display:block; width:100%; height:5px; background:var(--bg-soft); border:1px solid var(--border); border-radius:3px; margin-top:4px; overflow:hidden; }
.pipe-kept { display:block; height:100%; background:var(--gold); transition:width .5s; }
.pipe-nums { font-family:var(--font-number); font-size:10.5px; text-align:right; flex-shrink:0; }
.pipe-nums .drop { color:var(--danger); font-size:9.5px; }

/* 柱状图 */
.bars { display:flex; align-items:flex-end; gap:5px; height:64px; margin:7px 0 4px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-v { font-family:var(--font-number); font-size:9.5px; color:var(--gold-deep); margin-bottom:2px; }
.bar-b { width:100%; border-radius:3px 3px 0 0; min-height:3px; transition:height .5s ease;
         background:linear-gradient(180deg, var(--gold-4), var(--gold)); }
.bar-b.future { background:var(--bg-soft); border:1px dashed var(--border-strong); }
.bar-l { font-size:8.5px; color:var(--text-muted); margin-top:3px; }

/* 平台行 */
.plat { display:flex; align-items:center; gap:8px; padding:5.5px 0; border-bottom:1px solid var(--border); }
.plat:last-child { border-bottom:0; }
.plat-ic { width:19px; text-align:center; font-size:13px; }
.plat-n { font-size:11.5px; width:68px; flex-shrink:0; }
.plat-track { display:block; flex:1; height:6px; background:var(--bg-soft); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.plat-fill { display:block; height:100%; border-radius:3px; transition:width .5s; background:var(--gold); }
.plat-v { font-family:var(--font-number); font-size:11.5px; font-weight:600; width:50px; text-align:right; }

/* 日历 */
.cal { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cal-d { background:var(--bg-soft); border-radius:8px; padding:7px 8px; border:1px solid transparent; cursor:pointer; transition:all .18s; }
.cal-d:hover { border-color:var(--gold-5); background:var(--bg-card); box-shadow:var(--shadow); }
.cal-d.focus { border-color:var(--gold); background:var(--gold-bg); }
.cal-date { font-family:var(--font-number); font-size:10px; color:var(--text-muted); }
.cal-title { font-size:11.5px; font-weight:600; margin-top:1px; }
.cal-state { font-size:9.5px; margin-top:3px; font-weight:500; }
.cal-state.已发布 { color:var(--success); }
.cal-state.待审核 { color:var(--warning); }
.cal-state.排期中 { color:var(--text-muted); }

/* 聊天 */
.chat { display:flex; flex-direction:column; gap:7px; }
.msg { font-size:11.5px; line-height:1.6; padding:8px 10px; border-radius:10px; max-width:92%; }
.msg.u { background:var(--gold-bg); color:var(--text); align-self:flex-end; border-bottom-right-radius:3px; }
.msg.a { background:var(--bg-soft); align-self:flex-start; border-bottom-left-radius:3px; }
.chat-input { display:flex; gap:7px; margin-top:9px; }
.chat-input input {
  flex:1; background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:9px; padding:8px 11px; color:var(--text);
  font-family:var(--font-body); font-size:11.5px; outline:none; transition:border-color .18s;
}
.chat-input input:focus { border-color:var(--gold); }
.chat-input button {
  background:var(--gold-grad); color:#fff; border:0; border-radius:9px;
  padding:0 15px; font-family:var(--font-body); font-size:11.5px; font-weight:600; cursor:pointer;
}
.chat-input button:disabled { opacity:.45; cursor:default; }
.quick { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.quick button {
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-secondary); font-family:var(--font-body); font-size:10.5px;
  padding:3.5px 9px; border-radius:12px; cursor:pointer; transition:all .18s;
}
.quick button:hover { border-color:var(--gold); color:var(--gold-deep); background:var(--gold-bg); }

/* ══ L2 覆盖层 ═════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:none; flex-direction:column; overflow-y:auto; overflow-x:hidden;
}
.overlay.open { display:flex; }
.ov-head {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:15px;
  padding:15px 28px; background:rgba(250,250,248,.94);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
/* 🔴 出口必须无条件渲染（components/ui.md L973）—— 返回键不依赖任何数据 */
.ov-back {
  background:var(--bg-card); border:1px solid var(--border-strong);
  color:var(--text); font-family:var(--font-body); font-size:12px;
  padding:7px 14px; border-radius:9px; cursor:pointer; box-shadow:var(--shadow);
  transition:all .18s;
}
.ov-back:hover { border-color:var(--gold); color:var(--gold-deep); }
.ov-head h2 { font-size:18px; font-weight:700; flex:1; letter-spacing:-.3px; }
.ov-body { max-width:1200px; width:100%; margin:0 auto; padding:22px 28px 52px; }
.ov-sec {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:14px;
  box-shadow:var(--shadow);
  min-width: 0;                 /* 同上：别被内部宽表撑开 */
}
.ov-sec h3 { font-size:13.5px; font-weight:700; margin-bottom:12px; color:var(--gold-deep); }
.ov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
/* 🔴 grid/flex 子项默认 min-width:auto —— 里面放宽表就会被撑开，
   横滚容器永远触发不了。这一条要覆盖到「所有」子项，包括没有 class 的裸 div。
   本轮实测：ov-body / ov-sec 都加了还不够，漏的就是 ov-grid 里包表格的那个裸 div。 */
.ov-grid > *, .ov-sec > * { min-width: 0; }

/* 表格容器：窄屏横滚，不撑破页面 */
.dt-wrap { width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.dt { width:100%; border-collapse:collapse; font-size:11.5px; }
table.dt th { text-align:left; font-weight:600; color:var(--text-secondary); padding:7px 9px; border-bottom:1px solid var(--border-strong); font-size:10.5px; }
table.dt td { padding:7px 9px; border-bottom:1px solid var(--border); }
table.dt td.n { font-family:var(--font-number); font-weight:600; text-align:right; }
table.dt tbody tr:hover { background:var(--bg-soft); }
table.dt tr:last-child td { border-bottom:0; }

ul.notes { list-style:none; }
ul.notes li { font-size:11.5px; color:var(--text-secondary); padding:5px 0 5px 16px; position:relative; line-height:1.6; }
ul.notes li::before { content:'—'; position:absolute; left:0; color:var(--gold); }

/* ══ 适配 ══════════════════════════════════════════════ */
@media (min-width: 2200px) { body { zoom: 1.3; } }
@media (min-width: 3400px) { body { zoom: 1.9; } }

@media (max-width: 1400px) {
  .grid-9 { grid-template-rows: minmax(250px,38vh) minmax(215px,31vh) minmax(190px,auto); }
  .kpi .v { font-size:18px; }
}
/* ══ 手机端（≤760px）════════════════════════════════════
   波哥多半是在微信里点开链接看的，这一档不是"顺带支持"，是主场景之一。 */
@media (max-width: 760px) {
  :root { --gap: 8px; --header-h: auto; }
  body, body.mode-fit { overflow-y:auto; overflow-x:hidden; }

  /* 顶栏拆成两行：品牌+时间 / 三态切换。长说明和模式开关在手机上没意义 */
  .header {
    position: sticky; top:0;
    height:auto; padding:8px 12px; gap:8px;
    flex-wrap:wrap; align-items:center;
  }
  .brand { flex:1; min-width:0; gap:8px; }
  .brand-mark { width:26px; height:26px; border-radius:7px; font-size:13px; }
  /* 🔴 标题必须 nowrap+省略号：不设的话窄屏会被挤成竖排一列字
     （320px 实测：「花园/美好/生活/季·/AI 指/挥中/心」）*/
  .brand-text { min-width:0; }
  .brand-text h1 { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-text p  { display:none; }           /* 副标题太长，手机上只添乱 */
  .phase-hint    { display:none; }
  .mode-switch   { display:none; }
  .header-spacer { display:none; }
  .hdr-weather   { padding:3px 6px; gap:5px; order:2; }
  .hdr-weather .t { font-size:14px; }
  .hdr-weather .meta { display:none; }       /* 只留温度和图标 */
  .hdr-clock { order:3; text-align:right; }
  .hdr-clock .time { font-size:12px; }
  .hdr-clock .cd   { font-size:9.5px; }
  .override-flag { order:4; font-size:9px; padding:2px 6px; }
  /* 三态切换独占一行，三等分，够大好点 */
  .phase-switch { order:5; width:100%; }
  .phase-btn { flex:1; padding:7px 0; font-size:12px; }

  /* 单列，卡片按内容撑开 */
  .grid-9, body.mode-fit .grid-9 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    height:auto; min-height:0;
    align-content: start;
  }
  body.mode-fit .panel-body { overflow:visible; }
  .panel { border-radius:10px; }
  .panel-header { height:36px; min-height:36px; padding:0 12px; }
  .panel-body { padding:10px 12px; }

  /* KPI：允许换行，窄到放不下三个就自动折 */
  .kpi-row { flex-wrap:wrap; gap:6px; }
  .kpi { min-width:96px; padding:8px; }
  .kpi .v { font-size:18px; }

  /* 手机上名字比条重要：条让宽，百分比收窄 */
  .row { font-size:12px; gap:6px; }
  .bar-cell { flex:0.7; min-width:40px; }
  .pct-cell { width:32px; font-size:9.5px; }
  .funnel-label { width:48px; font-size:10px; }
  .plat-n { width:58px; }
  .plat-v { width:46px; }

  /* 主题日日历四列 → 两列 */
  .cal { grid-template-columns:repeat(2,1fr); }

  /* 触摸目标放大 */
  .quick button { padding:6px 11px; font-size:11px; }
  .chat-input input { padding:10px 12px; font-size:12px; }
  .chat-input button { padding:0 16px; font-size:12px; }

  /* L2 覆盖层 */
  .ov-head { padding:10px 14px; gap:10px; flex-wrap:wrap; }
  .ov-head h2 { font-size:15px; width:100%; order:3; }
  .ov-back { padding:8px 14px; font-size:12px; }
  .ov-body { padding:14px 14px 40px; }
  .ov-sec { padding:14px; border-radius:10px; }
  .ov-grid { grid-template-columns:1fr; }
  .dt-wrap table.dt { min-width:480px; }   /* 手机上横滚看表，别硬挤成豆腐块 */
}

/* ══ 最窄档（≤420px，iPhone SE / 小屏安卓）══════════════ */
@media (max-width: 420px) {
  .brand { flex:1 1 100%; }          /* 品牌独占一行，不跟天气时钟抢宽度 */
  .hdr-weather { order:2; margin-left:0; }
  .hdr-clock   { order:3; margin-left:auto; }
  .override-flag { order:4; }
  .bar-cell { flex:0.45; min-width:34px; }
  .pct-cell { width:28px; }
  .kpi .v { font-size:17px; }
  .cal { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  /* 平板档：两列，按阅读模式来 */
  body, body.mode-fit { overflow-y:auto; overflow-x:hidden; }
  .grid-9, body.mode-fit .grid-9 {
    grid-template-columns:1fr 1fr; grid-template-rows:none;
    grid-auto-rows:minmax(240px,auto); height:auto;
  }
  body.mode-fit .panel-body { overflow:visible; }
  .header { flex-wrap:wrap; height:auto; position:static; padding:10px 14px; gap:10px; }
  .mode-switch { display:none; }
}