/* ============================================================================
   明渠 AI · 作战平台 · Mac 作战驾驶舱设计系统（cockpit.css · 深色玻璃科技版）
   ----------------------------------------------------------------------------
   视觉语言：深邃科技指挥舱底 + frosted glass 玻璃拟态 + 青/紫/蓝霓虹辉光 +
            扫光高光描边 + 多层光场景深。Mac 原生壳气质（三色灯功能键/menu-bar/⌘K）。
   非破坏式：全部 mq- 前缀，可与现有 index.html 共存；锁定后再收编。
   红线对齐：零业务自算（纯视觉层）/ 信任分级四态 / 提交≠生效 / 预测低置信强隔离 /
            语义色严格表意 + 红色穿透。
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
.mq-root {
  /* 深邃科技底 */
  --mq-void:    #04070f;
  --mq-deep:    #070d1b;
  --mq-deep-2:  #0a1426;
  --mq-panel-ink: #0c1730;

  /* 玻璃文字（浅，落深底） */
  --mq-ink:     #eaf2ff;
  --mq-ink-2:   #a7b8d6;
  --mq-ink-3:   #6d80a6;
  --mq-line:    rgba(170,210,255,.12);
  --mq-line-2:  rgba(170,210,255,.07);

  /* 作战强调：青 → 蓝 → 紫 辉光 */
  --mq-cyan:    #22d3ee;
  --mq-cyan-d:  #06b6d4;
  --mq-blue:    #3b82f6;
  --mq-violet:  #a78bfa;
  --mq-violet-d:#7c3aed;
  --mq-grad:    linear-gradient(118deg, #22d3ee 0%, #3b82f6 50%, #a78bfa 100%);
  --mq-grad-d:  linear-gradient(118deg, #06b6d4 0%, #2563eb 52%, #7c3aed 100%);

  /* 语义色（达标 / 逼近 / 超限） */
  --mq-ok:      #34d399;
  --mq-warn:    #fbbf24;
  --mq-bad:     #f87171;
  --mq-info:    #60a5fa;
  --mq-ok-bg:   rgba(52,211,153,.14);
  --mq-warn-bg: rgba(251,191,36,.15);
  --mq-bad-bg:  rgba(248,113,113,.15);

  /* 严重度阶 */
  --mq-sev-red:   #f87171;
  --mq-sev-orange:#fb923c;
  --mq-sev-yellow:#fbbf24;

  /* 信任来源色 */
  --mq-trust-real:    #34d399;
  --mq-trust-partial: #fbbf24;
  --mq-trust-pending: #94a3b8;
  --mq-trust-manual:  #c4b5fd;

  /* 角色色板（7-Agent 工位） */
  --mq-a1:#60a5fa; --mq-a2:#f87171; --mq-a3:#34d399; --mq-a4:#fbbf24;
  --mq-a5:#a78bfa; --mq-a6:#22d3ee; --mq-a7:#94a3b8;

  /* 玻璃配方 */
  --mq-glass-bg:
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.028) 22%, rgba(255,255,255,0) 46%),
    linear-gradient(162deg, rgba(46,86,150,.20), rgba(9,18,40,.40));
  --mq-glass-bg-2:
    linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 24%, rgba(255,255,255,0) 50%),
    linear-gradient(162deg, rgba(30,58,108,.16), rgba(7,14,32,.46));
  --mq-glass-border: 1px solid rgba(180,215,255,.18);
  --mq-glass-blur: blur(22px) saturate(165%);
  --mq-glass-sh:
    0 24px 60px rgba(0,0,0,.46),
    0 2px 10px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 64px rgba(80,160,230,.05);
  --mq-glow-cyan:   0 0 0 1px rgba(34,211,238,.32), 0 8px 26px rgba(34,211,238,.30);
  --mq-glow-violet: 0 0 0 1px rgba(167,139,250,.32), 0 8px 26px rgba(124,58,237,.30);

  --mq-r-sm: 9px; --mq-r: 13px; --mq-r-lg: 18px;

  font-family: -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  color: var(--mq-ink);
  -webkit-font-smoothing: antialiased;
}
.mq-root *, .mq-root *::before, .mq-root *::after { box-sizing: border-box; }
.mq-num { font-variant-numeric: tabular-nums; }

/* 玻璃面工具 mixin */
.mq-glass {
  position: relative;
  background: var(--mq-glass-bg);
  border: var(--mq-glass-border);
  box-shadow: var(--mq-glass-sh);
  backdrop-filter: var(--mq-glass-blur);
  -webkit-backdrop-filter: var(--mq-glass-blur);
}
/* 顶部扫光高光线 */
.mq-glass::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,235,255,.85), rgba(125,211,252,.45), transparent);
  opacity: .7; pointer-events: none;
}

/* ── 2. App Shell：Mac 原生壳（深玻璃） ─────────────────────────────────────── */
.mq-app {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden; border-radius: 12px; position: relative;
  background:
    radial-gradient(1300px 640px at 82% -16%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(1000px 620px at -6% 112%, rgba(124,58,237,.16), transparent 58%),
    radial-gradient(900px 500px at 50% 50%, rgba(30,64,160,.10), transparent 70%),
    linear-gradient(180deg, #061025 0%, #040a18 52%, var(--mq-void) 100%);
}
/* 冰晶网格 + 斜纹光场 */
.mq-app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(90deg, rgba(120,200,255,.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(180deg, rgba(120,200,255,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    repeating-linear-gradient(118deg, transparent 0 84px, rgba(125,211,252,.035) 85px, transparent 87px 170px);
}

/* 2.1 顶栏 traffic 带（48px·玻璃） */
.mq-titlebar {
  position: relative; z-index: 3; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(20,34,62,.72), rgba(8,16,34,.62));
  border-bottom: 1px solid var(--mq-line);
  backdrop-filter: var(--mq-glass-blur); -webkit-backdrop-filter: var(--mq-glass-blur);
  -webkit-app-region: drag; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.mq-lights { display: flex; gap: 8px; align-items: center; }
.mq-light {
  width: 13px; height: 13px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5), 0 0 10px var(--lg, transparent);
  transition: filter .12s, box-shadow .15s;
}
.mq-light:hover { filter: brightness(1.08) saturate(1.25); }
.mq-light.red    { background: radial-gradient(circle at 35% 30%, #ff948c, #ff5f57); --lg: rgba(255,95,87,.5); }
.mq-light.yellow { background: radial-gradient(circle at 35% 30%, #ffe08a, #febc2e); --lg: rgba(254,188,46,.45); }
.mq-light.green  { background: radial-gradient(circle at 35% 30%, #9af0ad, #28c840); --lg: rgba(40,200,64,.45); }
.mq-light .gly { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: rgba(0,0,0,.55); opacity: 0; font-weight: 800; }
.mq-lights:hover .mq-light .gly { opacity: 1; }

.mq-menubar { display: flex; align-items: center; gap: 2px; -webkit-app-region: no-drag; }
.mq-menu { font-size: 12.5px; color: var(--mq-ink-2); padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.mq-menu:hover { background: rgba(255,255,255,.08); color: #fff; }
.mq-menu kbd { font: inherit; font-size: 10.5px; color: var(--mq-cyan); margin-left: 4px;
  border: 1px solid rgba(34,211,238,.3); border-radius: 4px; padding: 0 4px; background: rgba(34,211,238,.08); }

.mq-wintitle { font-size: 12.5px; font-weight: 600; color: var(--mq-ink-2); }
.mq-spacer { flex: 1; }

/* 作战平台自有顶栏（非模拟 Mac chrome）：品牌 + 面包屑 */
.mq-brandmini { display: inline-flex; align-items: center; gap: 9px; -webkit-app-region: no-drag; }
.mq-brandmini .logo { position: relative; overflow: hidden; width: 27px; height: 27px; border-radius: 8px; background: var(--mq-grad);
  display: grid; place-items: center; font-weight: 800; color: #06121f; font-size: 13px; box-shadow: 0 4px 14px rgba(34,211,238,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.mq-brandmini .logo::after { content: ""; position: absolute; inset: -30% 45% -20% -15%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }
.mq-brandmini .bt { font-size: 13.5px; font-weight: 700; color: #fff; text-shadow: 0 0 14px rgba(125,211,252,.3); }
.mq-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mq-ink-3); -webkit-app-region: no-drag; }
.mq-crumb sep, .mq-crumb .sep { color: var(--mq-ink-3); opacity: .6; }
.mq-crumb b { color: var(--mq-ink); font-weight: 650; }

.mq-cmdk {
  -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--mq-ink-3); min-width: 220px;
  background: rgba(10,20,42,.55); border: 1px solid var(--mq-line); border-radius: 9px; padding: 6px 11px; cursor: pointer;
  backdrop-filter: blur(8px); transition: border-color .15s, box-shadow .15s, color .15s;
}
.mq-cmdk:hover { border-color: rgba(34,211,238,.5); color: var(--mq-ink-2); box-shadow: 0 0 0 3px rgba(34,211,238,.1), 0 6px 18px rgba(34,211,238,.12); }
.mq-cmdk .k { margin-left: auto; border: 1px solid var(--mq-line); border-radius: 5px; padding: 0 5px; font-size: 11px; color: var(--mq-cyan); background: rgba(34,211,238,.06); }

.mq-tools { display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
.mq-clock { font-size: 12px; color: var(--mq-ink-3); white-space: nowrap; flex-shrink: 0; -webkit-app-region: no-drag;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mq-icobtn {
  position: relative; width: 33px; height: 33px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; cursor: pointer; display: grid; place-items: center; font-size: 15px; color: var(--mq-ink-2);
  transition: background .15s, border-color .15s, color .15s;
}
.mq-icobtn:hover { background: rgba(255,255,255,.06); border-color: var(--mq-line); color: #fff; }
.mq-dot {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--mq-bad); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 16px; text-align: center;
  padding: 0 3px; box-shadow: 0 0 0 2px var(--mq-deep), 0 0 10px rgba(248,113,113,.6);
}
.mq-dot.amber { background: var(--mq-warn); color: #3a2a00; box-shadow: 0 0 0 2px var(--mq-deep), 0 0 10px rgba(251,191,36,.55); }

.mq-ai { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mq-ink-2);
  padding: 5px 10px; border-radius: 999px; background: rgba(10,20,42,.5); border: 1px solid var(--mq-line); }
.mq-ai .led { width: 7px; height: 7px; border-radius: 50%; }
.mq-ai.on  .led { background: var(--mq-ok);  box-shadow: 0 0 0 3px rgba(52,211,153,.2), 0 0 8px var(--mq-ok); }
.mq-ai.deg .led { background: var(--mq-warn); box-shadow: 0 0 0 3px rgba(251,191,36,.2), 0 0 8px var(--mq-warn); animation: mq-blink 1.4s infinite; }
.mq-ai.off .led { background: var(--mq-ink-3); }
@keyframes mq-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.mq-user { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 9px 3px 3px;
  border-radius: 999px; border: 1px solid var(--mq-line); background: rgba(10,20,42,.5); }
.mq-avatar { width: 25px; height: 25px; border-radius: 50%; background: var(--mq-grad); color: #06121f;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; box-shadow: 0 0 12px rgba(34,211,238,.4); }
.mq-user .nm { font-size: 12px; color: #fff; font-weight: 600; }
.mq-user .rl { font-size: 10.5px; color: var(--mq-ink-3); }

/* 2.2 全局选择器条（40px·玻璃） */
.mq-selectorbar {
  position: relative; z-index: 3; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(12,24,48,.55), rgba(8,16,34,.45));
  border-bottom: 1px solid var(--mq-line); backdrop-filter: var(--mq-glass-blur); overflow-x: auto;
}
.mq-sel { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; color: var(--mq-ink);
  background: rgba(12,24,48,.6); border: 1px solid var(--mq-line); border-radius: 8px; padding: 4px 10px; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.mq-sel:hover { border-color: rgba(34,211,238,.5); box-shadow: 0 0 0 2px rgba(34,211,238,.08); }
.mq-sel .lab { color: var(--mq-ink-3); font-size: 11px; }
.mq-sel .car { color: var(--mq-ink-3); font-size: 9px; pointer-events: none; }
.mq-sel:has(.mq-selnative) { cursor: pointer; }
.mq-selnative { font: inherit; font-size: 12px; color: var(--mq-ink); background: transparent; border: none; outline: none;
  cursor: pointer; -webkit-appearance: none; appearance: none; max-width: 120px; padding: 0; margin: 0; }
.mq-selnative option { background: #0c1830; color: #fff; }
.mq-caliber { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--mq-warn); background: var(--mq-warn-bg);
  border: 1px solid rgba(251,191,36,.4); border-radius: 999px; padding: 3px 12px; cursor: pointer;
  box-shadow: 0 0 14px rgba(251,191,36,.16); }

/* 合并顶栏（汪总 2026-06-08）：原 selectorbar 的选择器组(城市/业务线/期号/数据域 + 口径变更)并入 titlebar 单行 */
.mq-selgroup { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0;
  -webkit-app-region: no-drag; overflow-x: auto; scrollbar-width: none; }
.mq-selgroup::-webkit-scrollbar { display: none; }
.mq-selgroup .mq-caliber { margin-left: 4px; }          /* 并入后不再 auto 撑满，紧随选择器 */
.mq-titlebar { gap: 12px; }                              /* 容纳更多元素，间距略收 */
.mq-titlebar .mq-cmdk { min-width: 150px; flex-shrink: 1; }   /* 让出空间给选择器组，命令面板可收窄 */

/* 驾驶舱密排流（masonry · 汪总 2026-06-08）：CSS columns 自上而下密排消除模块间纵向空域；
   无数据模块由 JS 排到末尾自动沉底；整体感来自统一列宽 + 紧凑间距，无固定列的对齐空洞。 */
.mq-cockpit-flow { columns: 3 340px; column-gap: 16px; }
.mq-cockpit-flow > .mq-panel { display: inline-block; width: 100%; margin: 0 0 16px; break-inside: avoid; vertical-align: top; }
@media (max-width: 1180px) { .mq-cockpit-flow { columns: 2 320px; } }
@media (max-width: 720px)  { .mq-cockpit-flow { columns: 1; } }

/* 动态作战态势雷达 */
/* 雷达 hero：左动态雷达 + 右态势研判（填满全宽，无横向空洞） */
.mq-radar-bd { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mq-radar-chart { flex: 0 0 320px; max-width: 340px; min-width: 260px; }
.mq-radar-verdict { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 9px; }
.mq-rv-hd { font-size: 13px; font-weight: 650; color: #fff; }
.mq-rv-list { display: flex; flex-direction: column; gap: 6px; }
.mq-rv-row { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 9px;
  background: rgba(12,24,48,.5); border: 1px solid var(--mq-line); transition: border-color .12s, background .12s; }
.mq-rv-row:hover { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.06); }
.mq-rv-row .rk { color: var(--mq-cyan); font-weight: 700; font-size: 12px; }
.mq-rv-row .lb { color: var(--mq-ink-2); font-size: 12.5px; flex: 1; }
.mq-rv-row .vv { color: #fff; font-weight: 700; font-size: 16px; }
/* 动态雷达：旋转扫描臂 + 脉冲顶点 */
@keyframes mq-radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mq-radar-sweep { animation: mq-radar-spin 4s linear infinite; }
@keyframes mq-radar-pulse { 0%, 100% { r: 3; opacity: 1; } 50% { r: 5.5; opacity: .55; } }
.mq-radar-vtx { animation: mq-radar-pulse 2.2s ease-in-out infinite; }
.mq-radar-leg { flex: 1; min-width: 230px; display: flex; flex-direction: column; gap: 2px; }
.mq-radar-axis { transition: background .12s; padding: 2px 6px; border-radius: 7px; }
.mq-radar-axis:hover { background: rgba(34,211,238,.08); }
.mq-radar-axis .v { color: var(--mq-cyan); font-weight: 700; }

/* Tier 2 此刻战场：今日最该救 | 城市×域热力 两列等高（align-stretch，两卡同高，无纵向空洞） */
.mq-battlegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.mq-battlegrid > .mq-panel { display: flex; flex-direction: column; }
@media (max-width: 980px) { .mq-battlegrid { grid-template-columns: 1fr; } }
/* Tier 3 作战明细折叠：全量明细下沉，masonry 两列密排消空域 */
.mq-detailfold { background: linear-gradient(180deg, rgba(16,28,52,.5), rgba(8,16,34,.4)); }
.mq-detailfold > summary:hover { background: rgba(255,255,255,.04); }
.mq-detailfold .mq-cockpit-flow { columns: 2 320px; }
@media (max-width: 820px) { .mq-detailfold .mq-cockpit-flow { columns: 1; } }

/* 2.3 主工作区 */
.mq-body { position: relative; z-index: 2; flex: 1; display: flex; min-height: 0; }

/* 侧栏（236px·更深玻璃） */
.mq-side {
  width: 236px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto;
  background: linear-gradient(180deg, rgba(9,18,38,.78), rgba(6,12,28,.72));
  border-right: 1px solid var(--mq-line); backdrop-filter: var(--mq-glass-blur);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}
.mq-brand { display: flex; align-items: center; gap: 10px; padding: 15px 16px 10px; }
.mq-brand .logo { position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 9px; background: var(--mq-grad);
  display: grid; place-items: center; font-weight: 800; color: #06121f; font-size: 15px; box-shadow: 0 6px 18px rgba(34,211,238,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.mq-brand .logo::after { content: ""; position: absolute; inset: -30% 45% -20% -15%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
.mq-brand .nm { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 0 16px rgba(125,211,252,.3); }
.mq-brand .sub { font-size: 10.5px; color: var(--mq-ink-3); }

.mq-persona { display: flex; gap: 3px; margin: 4px 12px 8px; padding: 3px; background: rgba(255,255,255,.04);
  border: 1px solid var(--mq-line-2); border-radius: 10px; }
.mq-persona button { flex: 1; font: inherit; font-size: 12px; font-weight: 600; color: var(--mq-ink-3);
  background: transparent; border: none; border-radius: 8px; padding: 6px 0; cursor: pointer; transition: all .15s; }
.mq-persona button.on { color: #fff; background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(124,58,237,.16));
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.3), 0 4px 14px rgba(34,211,238,.16); }

.mq-nav { padding: 2px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.mq-nav .grp { font-size: 10px; letter-spacing: .1em; color: var(--mq-ink-3); text-transform: uppercase; padding: 13px 10px 5px; }
.mq-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--mq-ink-2);
  font-size: 13px; cursor: pointer; position: relative; text-decoration: none; transition: background .14s, color .14s; }
.mq-nav a .ico { width: 23px; height: 23px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.mq-nav a .tx { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.mq-nav a.on { background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(124,58,237,.08) 70%, transparent);
  color: #fff; box-shadow: inset 0 0 0 1px rgba(125,211,252,.16); }
.mq-nav a.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--mq-cyan), var(--mq-violet)); box-shadow: 0 0 10px var(--mq-cyan); }
.mq-nav a[data-role] .ico { background: color-mix(in srgb, var(--role) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 50%, transparent); color: var(--role); }
.mq-nav .nbadge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 999px; background: var(--mq-bad); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; padding: 0 5px; box-shadow: 0 0 10px rgba(248,113,113,.5); }
.mq-nav .nbadge.amber { background: var(--mq-warn); color: #3a2a00; box-shadow: 0 0 10px rgba(251,191,36,.45); }
.mq-nav .role-pill { margin-left: auto; font-size: 9.5px; font-weight: 800; color: var(--role); background: color-mix(in srgb, var(--role) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--role) 40%, transparent); border-radius: 5px; padding: 1px 5px; }

/* 内容区 */
.mq-content { flex: 1; min-width: 0; overflow-y: auto; position: relative; }
.mq-canvas { max-width: 1680px; margin: 0 auto; padding: 22px 26px 60px; }

/* 2.4 底部状态栏（28px·玻璃） */
.mq-statusbar {
  position: relative; z-index: 3; height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(10,20,42,.6), rgba(6,12,28,.55)); border-top: 1px solid var(--mq-line);
  backdrop-filter: var(--mq-glass-blur); font-size: 11px; color: var(--mq-ink-3);
}
.mq-st { display: inline-flex; align-items: center; gap: 6px; }
.mq-st code { font-family: ui-monospace, "SF Mono", monospace; color: var(--mq-cyan); }
.mq-breath { width: 8px; height: 8px; border-radius: 50%; }
.mq-breath.fresh { background: var(--mq-ok); box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 8px var(--mq-ok); animation: mq-breathe 2.4s ease-in-out infinite; }
.mq-breath.lag   { background: var(--mq-warn); box-shadow: 0 0 8px var(--mq-warn); animation: mq-blink 1.2s infinite; }
.mq-breath.dead  { background: var(--mq-bad); box-shadow: 0 0 8px var(--mq-bad); }
@keyframes mq-breathe { 0%,100%{transform:scale(.82);opacity:.6} 50%{transform:scale(1.1);opacity:1} }

/* ── 3. 组件库（玻璃化） ───────────────────────────────────────────────────── */

/* 3.1 OpsPanel */
.mq-panel { position: relative; background: var(--mq-glass-bg); border: var(--mq-glass-border); border-radius: var(--mq-r);
  box-shadow: var(--mq-glass-sh); backdrop-filter: var(--mq-glass-blur); -webkit-backdrop-filter: var(--mq-glass-blur);
  margin-bottom: 16px; overflow: hidden; }
.mq-panel::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,235,255,.7), transparent); opacity: .65; pointer-events: none; }
.mq-panel-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--mq-line-2); }
.mq-panel-hd h3 { font-size: 14px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; color: #fff; }
.mq-panel-hd h3::before { content: ""; width: 4px; height: 15px; border-radius: 3px; background: var(--mq-grad); box-shadow: 0 0 8px rgba(34,211,238,.5); }
.mq-panel-hd .ep { font-size: 10.5px; color: var(--mq-ink-3); background: rgba(10,20,42,.5); border: 1px solid var(--mq-line);
  border-radius: 6px; padding: 1px 7px; font-family: ui-monospace, monospace; }
.mq-panel-hd .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mq-cyan); background: rgba(34,211,238,.1);
  border: 1px solid rgba(34,211,238,.25); border-radius: 999px; padding: 1px 11px; }
.mq-panel-bd { padding: 14px 16px; }

/* 3.1b Card（玻璃） */
.mq-card { position: relative; border: 1px solid var(--mq-line); border-radius: var(--mq-r-sm); padding: 13px 15px;
  background: var(--mq-glass-bg-2); backdrop-filter: blur(10px); transition: box-shadow .16s, border-color .16s, transform .12s; }
.mq-card:hover { border-color: rgba(34,211,238,.35); box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.18); transform: translateY(-1px); }
.mq-card.sev-red    { border-left: 3px solid var(--mq-sev-red); box-shadow: -8px 0 22px -14px var(--mq-sev-red); }
.mq-card.sev-orange { border-left: 3px solid var(--mq-sev-orange); }
.mq-card.sev-yellow { border-left: 3px solid var(--mq-sev-yellow); }

/* 3.2 StatTile（玻璃 + 辉光侧条） */
.mq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.mq-tile { position: relative; overflow: hidden; border: 1px solid var(--mq-line); border-radius: var(--mq-r); padding: 15px 16px;
  background: var(--mq-glass-bg-2); backdrop-filter: blur(12px); cursor: pointer; transition: box-shadow .16s, transform .12s, border-color .16s; }
.mq-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone, var(--mq-cyan)) 40%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 22px color-mix(in srgb, var(--tone, var(--mq-cyan)) 22%, transparent); }
.mq-tile::before { content: ""; position: absolute; right: -20px; top: -30px; width: 130px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--mq-cyan)) 26%, transparent), transparent 70%); pointer-events: none; }
.mq-tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--mq-cyan)); box-shadow: 0 0 12px var(--tone, var(--mq-cyan)); }
.mq-tile .v { font-size: 28px; font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(125,211,252,.2); }
.mq-tile .l { font-size: 12px; color: var(--mq-ink-2); margin-top: 4px; }
.mq-tile .h { font-size: 10.5px; color: var(--mq-ink-3); margin-top: 3px; }
.mq-tile.t-red{--tone:var(--mq-bad)} .mq-tile.t-amber{--tone:var(--mq-warn)} .mq-tile.t-green{--tone:var(--mq-ok)}
.mq-tile.t-violet{--tone:var(--mq-violet)} .mq-tile.t-cyan{--tone:var(--mq-cyan)}

/* 3.3 TrustBadge（四态 + 微辉光） */
.mq-trust { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; line-height: 1.5; border: 1px solid transparent; }
.mq-trust::before { content: ""; width: 7px; height: 7px; border-radius: 2px; }
.mq-trust.real    { color: var(--mq-ok); background: var(--mq-ok-bg); border-color: rgba(52,211,153,.3); }
.mq-trust.real::before { background: var(--mq-trust-real); box-shadow: 0 0 6px var(--mq-trust-real); }
.mq-trust.partial { color: var(--mq-warn); background: var(--mq-warn-bg); border-color: rgba(251,191,36,.3); }
.mq-trust.partial::before { background: var(--mq-trust-partial); border-radius: 0 2px 2px 0; box-shadow: inset 3px 0 0 rgba(7,14,32,.9); }
.mq-trust.pending { color: var(--mq-ink-3); background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.25); }
.mq-trust.pending::before { background: var(--mq-trust-pending); }
.mq-trust.manual  { color: var(--mq-violet); background: rgba(167,139,250,.14); border: 1px dashed rgba(167,139,250,.5); }
.mq-trust.manual::before { background: var(--mq-trust-manual); transform: rotate(45deg); box-shadow: 0 0 6px var(--mq-trust-manual); }

/* 3.4 TracePill */
.mq-trace { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-family: ui-monospace, "SF Mono", monospace;
  color: var(--mq-ink-3); background: rgba(10,20,42,.5); border: 1px solid var(--mq-line); border-radius: 999px; padding: 1px 9px; cursor: help; transition: color .15s, box-shadow .15s; }
.mq-trace::before { content: "⌖"; font-size: 11px; }
.mq-trace:hover { color: var(--mq-cyan); box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 0 12px rgba(34,211,238,.2); }
.mq-trace.missing { color: var(--mq-bad); background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.mq-trace.missing::before { content: "⚠"; }

/* 3.5 DataTable */
.mq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--mq-ink-3); text-transform: uppercase; letter-spacing: .03em;
  padding: 9px 12px; border-bottom: 1px solid var(--mq-line); white-space: nowrap; }
.mq-table td { padding: 10px 12px; border-bottom: 1px solid var(--mq-line-2); vertical-align: middle; color: var(--mq-ink); }
.mq-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.mq-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mq-table .muted { color: var(--mq-ink-3); }

/* 3.6 Badge */
.mq-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; }
.mq-badge.ok { color: var(--mq-ok); background: var(--mq-ok-bg); border-color: rgba(52,211,153,.28); }
.mq-badge.warn { color: var(--mq-warn); background: var(--mq-warn-bg); border-color: rgba(251,191,36,.28); }
.mq-badge.bad { color: var(--mq-bad); background: var(--mq-bad-bg); border-color: rgba(248,113,113,.3); box-shadow: 0 0 12px rgba(248,113,113,.18); }
.mq-badge.info { color: var(--mq-info); background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.28); }
.mq-badge.ghost { color: var(--mq-ink-3); background: rgba(148,163,184,.1); border-color: var(--mq-line); }

/* 3.7 按钮 */
.mq-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--mq-line);
  background: rgba(12,24,48,.55); color: var(--mq-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; backdrop-filter: blur(6px); }
.mq-btn:hover { border-color: rgba(34,211,238,.5); color: var(--mq-cyan); box-shadow: 0 0 0 2px rgba(34,211,238,.1); }
.mq-btn.primary { background: var(--mq-grad-d); color: #fff; border: none; box-shadow: 0 8px 22px rgba(34,99,235,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.mq-btn.primary:hover { filter: brightness(1.08); color: #fff; box-shadow: 0 10px 28px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.mq-btn.danger { background: rgba(248,113,113,.08); color: var(--mq-bad); border-color: rgba(248,113,113,.4); }
.mq-btn.danger:hover { background: var(--mq-bad); color: #2a0808; border-color: var(--mq-bad); box-shadow: 0 0 18px rgba(248,113,113,.4); }
.mq-btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.mq-btn.sm { font-size: 12px; padding: 5px 11px; }

/* 3.8 Stepper */
.mq-stepper { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.mq-step { display: inline-flex; align-items: center; gap: 8px; }
.mq-step .n { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.06); color: var(--mq-ink-3); border: 1px solid var(--mq-line); flex-shrink: 0; }
.mq-step .t { font-size: 12.5px; color: var(--mq-ink-3); }
.mq-step.done .n { background: var(--mq-ok-bg); color: var(--mq-ok); border-color: rgba(52,211,153,.4); box-shadow: 0 0 10px rgba(52,211,153,.25); }
.mq-step.done .t { color: var(--mq-ink-2); }
.mq-step.on .n { background: var(--mq-grad-d); color: #fff; border: none; box-shadow: 0 0 0 4px rgba(34,211,238,.15), 0 0 16px rgba(34,211,238,.4); }
.mq-step.on .t { color: #fff; font-weight: 700; }
.mq-step-line { width: 30px; height: 2px; background: var(--mq-line); margin: 0 9px; }
.mq-step-line.done { background: linear-gradient(90deg, var(--mq-ok), rgba(52,211,153,.3)); }
.mq-ctxchip { font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--mq-cyan); background: rgba(34,211,238,.1);
  border: 1px solid rgba(34,211,238,.22); border-radius: 5px; padding: 1px 7px; margin-left: 8px; }

/* AI 参谋「怎么问更准」引导卡（取不到数时） */
.cp-guide { margin-top: 8px; border: 1px solid rgba(34,211,238,.28); border-radius: 11px; padding: 11px 13px;
  background: linear-gradient(180deg, rgba(34,211,238,.07), rgba(12,24,48,.4)); }
.cp-gt { font-size: 12.5px; font-weight: 650; color: #cbeaff; margin-bottom: 7px; }
.cp-bk { font-size: 11.5px; color: var(--mq-warn); margin-bottom: 7px; }
.cp-gl { font-size: 12px; color: var(--mq-ink-2); line-height: 1.7; margin-bottom: 9px; }
.cp-gl b { color: #fff; }
.cp-gex { display: flex; flex-direction: column; gap: 6px; }
.cp-gx { text-align: left; font: inherit; font-size: 12px; color: var(--mq-ink); cursor: pointer;
  background: rgba(12,24,48,.6); border: 1px solid var(--mq-line); border-radius: 8px; padding: 7px 11px; transition: border-color .12s, background .12s; }
.cp-gx:hover { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.08); color: #fff; }
.cp-gx::before { content: "💬 "; }

/* AI 参谋 facts 真实数字表（带 trace） */
.cp-fcap { margin-top: 8px; font-size: 11px; color: var(--mq-ink-3); line-height: 1.6; padding: 7px 10px;
  background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.18); border-radius: 8px; }
.cp-fcap b { color: var(--mq-cyan); }
.cp-facts { margin-top: 9px; border: 1px solid rgba(34,211,238,.22); border-radius: 10px; overflow-x: auto; background: rgba(8,16,34,.5); }
.cp-ftab { width: 100%; border-collapse: collapse; font-size: 12px; }
.cp-ftab th { text-align: left; color: var(--mq-ink-3); font-weight: 600; padding: 7px 10px; background: rgba(34,211,238,.06); border-bottom: 1px solid var(--mq-line); white-space: nowrap; }
.cp-ftab td { padding: 7px 10px; color: var(--mq-ink); border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
.cp-ftab tbody tr:last-child td { border-bottom: none; }
.cp-ftab td:nth-child(n+3) { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-ftrace { font-size: 10.5px; color: var(--mq-ok); padding: 5px 10px; background: rgba(16,185,129,.06); }

/* AI 参谋 历史会话（本机持久化真实问答） */
.cp-hist-hd { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--mq-ink-3); margin-bottom: 4px; }
.cp-hist-clr { font: inherit; font-size: 11px; color: var(--mq-ink-3); background: none; border: 1px solid var(--mq-line); border-radius: 6px; padding: 2px 9px; cursor: pointer; }
.cp-hist-clr:hover { color: var(--mq-bad); border-color: rgba(239,68,68,.4); }
.cp-hist-item { padding: 9px 11px; border: 1px solid var(--mq-line); border-radius: 9px; margin-bottom: 8px; cursor: pointer;
  background: rgba(12,24,48,.45); transition: border-color .12s, background .12s; }
.cp-hist-item:hover { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.06); }
.cp-hist-item.open { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.05); }
.cp-hist-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cp-hist-item .hq { font-size: 12.5px; color: #fff; font-weight: 600; flex: 1; }
.cp-hist-q .hcv { font-size: 11px; color: var(--mq-ink-3); flex: none; line-height: 1.4; }
.cp-hist-item .hs { font-size: 11.5px; color: var(--mq-cyan); margin-top: 2px; }
.cp-hist-item .ht { font-size: 10.5px; color: var(--mq-ink-3); margin-top: 3px; }
/* 就地展开回看缓存答案（命中缓存、不重跑 LLM） */
.cp-hist-detail { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--mq-line); cursor: default; }
.cp-hist-detail .mq-ans { background: rgba(8,16,34,.5); border: 1px solid var(--mq-line); border-radius: 9px; padding: 9px 11px; }
.cp-hist-noans { font-size: 11.5px; color: var(--mq-ink-3); padding: 4px 0; }
.cp-hist-acts { margin-top: 9px; display: flex; justify-content: flex-end; }
.cp-hist-reask { font: inherit; font-size: 11.5px; color: var(--mq-cyan); background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.35); border-radius: 7px; padding: 4px 12px; cursor: pointer; }
.cp-hist-reask:hover { background: rgba(34,211,238,.16); }

/* 3.9 ApprovalRibbon */
.mq-ribbon { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mq-warn);
  background: linear-gradient(90deg, var(--mq-warn-bg), transparent 80%); border: 1px solid rgba(251,191,36,.35);
  border-left: 3px solid var(--mq-warn); border-radius: var(--mq-r-sm); padding: 10px 14px; box-shadow: inset 0 0 30px rgba(251,191,36,.05); }
.mq-ribbon b { color: #fff; }
.mq-ribbon .ic { font-size: 15px; }

/* 3.10 StateBanner（8 异常态） */
.mq-state { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--mq-r-sm); font-size: 13px; line-height: 1.55; border: 1px solid; }
.mq-state .ic { font-size: 16px; flex-shrink: 0; line-height: 1.3; }
.mq-state .ti { font-weight: 700; margin-bottom: 2px; color: #fff; }
.mq-state .ds { color: var(--mq-ink-2); font-size: 12px; }
.mq-state.empty   { background: rgba(148,163,184,.08); border-color: var(--mq-line); border-style: dashed; color: var(--mq-ink-2); }
.mq-state.partial { background: var(--mq-warn-bg); border-color: rgba(251,191,36,.4); color: var(--mq-warn); }
.mq-state.blocked { background: var(--mq-bad-bg); border-color: rgba(248,113,113,.4); color: var(--mq-bad); }
.mq-state.locked  { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.4); color: var(--mq-violet); }
.mq-state.pending { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.4); color: var(--mq-info); }
.mq-state.degraded{ background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.4); color: var(--mq-sev-orange); }

/* 3.11 EmptyAction */
.mq-empty { text-align: center; padding: 28px 20px; }
.mq-empty .ei { font-size: 32px; opacity: .55; }
.mq-empty .et { font-size: 14px; font-weight: 700; margin: 10px 0 4px; color: #fff; }
.mq-empty .er { font-size: 12.5px; color: var(--mq-ink-2); max-width: 440px; margin: 0 auto 6px; line-height: 1.6; }
.mq-empty .ek { font-size: 11.5px; color: var(--mq-ink-3); font-family: ui-monospace, monospace; margin-bottom: 14px; }

/* 3.12 SkeletonBlock */
.mq-skel { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%; animation: mq-shimmer 1.4s infinite; border-radius: 6px; height: 14px; }
.mq-skel + .mq-skel { margin-top: 9px; }
@keyframes mq-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* 3.13 Drawer（玻璃） */
.mq-drawer { position: relative; display: flex; flex-direction: column; background: var(--mq-glass-bg); border: var(--mq-glass-border);
  border-radius: var(--mq-r); box-shadow: var(--mq-glass-sh); backdrop-filter: var(--mq-glass-blur); -webkit-backdrop-filter: var(--mq-glass-blur); overflow: hidden; }
.mq-drawer::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,235,255,.7), transparent); opacity: .65; pointer-events: none; }
.mq-drawer-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--mq-line-2); }
.mq-drawer-hd h3 { font-size: 14.5px; font-weight: 700; margin: 0; color: #fff; }
.mq-anchors { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--mq-line-2); }
.mq-anchor { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mq-ink-3); background: transparent; border: none;
  border-bottom: 2px solid transparent; padding: 8px 13px; cursor: pointer; }
.mq-anchor:hover { color: var(--mq-ink); }
.mq-anchor.on { color: var(--mq-cyan); border-bottom-color: var(--mq-cyan); text-shadow: 0 0 12px rgba(34,211,238,.5); }
.mq-drawer-bd { padding: 16px; overflow-y: auto; }
.mq-drawer-ft { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--mq-line-2);
  background: rgba(8,16,34,.5); position: sticky; bottom: 0; backdrop-filter: blur(10px); }

/* 3.14 Toast */
.mq-toast { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #fff; background: rgba(10,18,38,.92);
  border: 1px solid var(--mq-line); border-radius: 11px; padding: 11px 15px; box-shadow: 0 18px 44px rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.mq-toast .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #06121f; }
.mq-toast.ok .ic { background: var(--mq-ok); box-shadow: 0 0 10px var(--mq-ok); }
.mq-toast.warn .ic { background: var(--mq-warn); box-shadow: 0 0 10px var(--mq-warn); }

/* 3.15 Countdown */
.mq-countdown { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
  color: var(--mq-ink); background: rgba(12,24,48,.55); border: 1px solid var(--mq-line); border-radius: 9px; padding: 5px 11px; }
.mq-countdown .cl { font-size: 10.5px; font-weight: 600; color: var(--mq-ink-3); }
.mq-countdown.warn { color: var(--mq-warn); background: var(--mq-warn-bg); border-color: rgba(251,191,36,.4); }
.mq-countdown.crit { color: var(--mq-bad); background: var(--mq-bad-bg); border-color: rgba(248,113,113,.5); animation: mq-pulse 1.1s infinite; }
@keyframes mq-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.45)} 50%{box-shadow:0 0 0 6px rgba(248,113,113,0)} }

/* 3.16 AssocGrid */
.mq-assoc { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.mq-assoc th, .mq-assoc td { border: 1px solid var(--mq-line-2); padding: 8px 10px; text-align: center; color: var(--mq-ink); }
.mq-assoc thead th { background: rgba(255,255,255,.04); font-weight: 600; color: var(--mq-ink-3); }
.mq-assoc tbody th { background: rgba(255,255,255,.04); text-align: left; font-weight: 600; white-space: nowrap; }
.mq-fn { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mq-fn.ok  { color: var(--mq-ok); }
.mq-fn.par { color: var(--mq-warn); }
.mq-fn.no  { color: var(--mq-bad); }
.mq-assoc td.blocked { background: rgba(248,113,113,.08); }

/* 3.17 预测/低置信强隔离 */
.mq-forecast { position: relative; background: repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 8px, rgba(255,255,255,.05) 8px, rgba(255,255,255,.05) 16px);
  border: 1.5px dashed var(--mq-ink-3); border-radius: var(--mq-r-sm); padding: 14px; }
.mq-forecast::before { content: "规则外推·非时序·低置信·不进计分·不进警告罚款"; display: block; font-size: 11px; font-weight: 800; color: var(--mq-bad); letter-spacing: .02em; margin-bottom: 10px; }

/* 3.18 双轨并列 */
.mq-dual { display: flex; gap: 8px; flex-wrap: wrap; }
.mq-dual .lane { flex: 1; min-width: 130px; border: 1px solid var(--mq-line); border-radius: var(--mq-r-sm); padding: 10px 12px; background: rgba(12,24,48,.4); }
.mq-dual .lane .lh { font-size: 11px; font-weight: 700; color: var(--mq-ink-2); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.mq-dual .lane.perf .lh::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--mq-a5); box-shadow: 0 0 6px var(--mq-a5); }
.mq-dual .lane.biz  .lh::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--mq-a3); box-shadow: 0 0 6px var(--mq-a3); }

/* 工具类 */
.mq-row { display: flex; align-items: center; gap: 10px; }
.mq-wrap { flex-wrap: wrap; }
.mq-gap { flex: 1; }
.mq-muted { color: var(--mq-ink-3); }
.mq-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 5px; color: #fff; text-shadow: 0 0 22px rgba(125,211,252,.22); }
.mq-sub { font-size: 13px; color: var(--mq-ink-2); line-height: 1.6; margin: 0 0 16px; max-width: 860px; }
.mq-divider { height: 1px; background: var(--mq-line-2); margin: 12px 0; }
.mq-kv { display: flex; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--mq-line-2); align-items: baseline; }
.mq-kv:last-child { border-bottom: none; }
.mq-kv .k { min-width: 150px; color: var(--mq-ink-3); font-size: 12.5px; }
.mq-kv .v { flex: 1; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; color: var(--mq-ink); }

/* 焦点可达性 */
.mq-root :focus-visible { outline: 2px solid var(--mq-cyan); outline-offset: 2px; border-radius: 4px; }

/* 断点 */
@media (max-width: 1280px) { .mq-canvas { padding: 18px 18px 50px; } }
@media (max-width: 1024px) { .mq-side { width: 64px; } .mq-side .mq-nav a .tx,
  .mq-side .mq-brand .nm, .mq-side .mq-brand .sub, .mq-side .mq-persona, .mq-side .mq-nav .grp { display: none; } }

/* ── 4. 决策驾驶舱大屏组件（指挥墙气质） ──────────────────────────────────────── */

/* 4.1 战况栏：进度环 + 态势灯 + 判断 */
.mq-warbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 14px;
  border-radius: var(--mq-r); border: var(--mq-glass-border); background: var(--mq-glass-bg); box-shadow: var(--mq-glass-sh); backdrop-filter: var(--mq-glass-blur); position: relative; }
.mq-warbar::after { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,235,255,.7), transparent); opacity: .6; }
.mq-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(var(--mq-cyan) calc(var(--p) * 1%), rgba(255,255,255,.07) 0);
  box-shadow: 0 0 24px rgba(34,211,238,.22), inset 0 0 18px rgba(0,0,0,.4); position: relative; }
.mq-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle, rgba(12,24,48,.95), rgba(6,12,28,.95)); }
.mq-ring .rv { position: relative; z-index: 1; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.mq-ring .rl { position: relative; z-index: 1; font-size: 9.5px; color: var(--mq-ink-3); margin-top: 2px; }

.mq-stancelamp { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: #fff; }
.mq-stancelamp .big { width: 16px; height: 16px; border-radius: 50%; }
.mq-stancelamp.lead .big { background: var(--mq-ok); box-shadow: 0 0 0 5px rgba(52,211,153,.18), 0 0 16px var(--mq-ok); }
.mq-stancelamp.draw .big { background: var(--mq-warn); box-shadow: 0 0 0 5px rgba(251,191,36,.18), 0 0 16px var(--mq-warn); animation: mq-blink 1.8s infinite; }
.mq-stancelamp.risk .big { background: var(--mq-bad); box-shadow: 0 0 0 5px rgba(248,113,113,.2), 0 0 18px var(--mq-bad); animation: mq-pulse 1.2s infinite; }
.mq-warbar .verdict { font-size: 12.5px; color: var(--mq-ink-2); max-width: 420px; line-height: 1.55; }
.mq-warbar .verdict b { color: #fff; }

/* 4.2 敞口热力矩阵（5城×5域·红穿透） */
.mq-heat { display: grid; gap: 7px; }
.mq-heat .hrow { display: grid; grid-template-columns: 78px repeat(var(--cols, 5), 1fr); gap: 7px; align-items: stretch; }
.mq-heat .hh { font-size: 11px; color: var(--mq-ink-3); display: flex; align-items: center; }
.mq-heat .hh.col { justify-content: center; text-align: center; padding-bottom: 2px; }
.mq-heat .hh.row { font-weight: 600; color: var(--mq-ink-2); }
.mq-hcell { position: relative; min-height: 54px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--mq-line);
  background: rgba(255,255,255,.04); color: var(--mq-ink-2); transition: transform .12s, box-shadow .15s; }
.mq-hcell:hover { transform: scale(1.04); z-index: 1; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.mq-hcell .sub { font-size: 9.5px; font-weight: 500; opacity: .8; }
.mq-hcell.ok   { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.3); color: var(--mq-ok); }
.mq-hcell.warn { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.36); color: var(--mq-warn); }
.mq-hcell.orange { background: rgba(251,146,60,.18); border-color: rgba(251,146,60,.4); color: var(--mq-sev-orange); }
.mq-hcell.bad  { background: rgba(248,113,113,.2); border-color: rgba(248,113,113,.5); color: var(--mq-bad); box-shadow: 0 0 16px rgba(248,113,113,.25); animation: mq-pulse 1.4s infinite; }
.mq-hcell.muted{ background: rgba(148,163,184,.08); border-style: dashed; color: var(--mq-ink-3); }
.mq-hcell.lock { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.35); color: var(--mq-violet); }

/* 4.3 今日最该救卡 */
.mq-rescue { border: 1px solid rgba(248,113,113,.4); border-left: 3px solid var(--mq-bad); border-radius: var(--mq-r);
  background: linear-gradient(160deg, rgba(248,113,113,.08), var(--mq-glass-bg-2)); backdrop-filter: blur(12px); padding: 15px 16px; box-shadow: 0 0 24px rgba(248,113,113,.1); }
.mq-rescue .rk { font-size: 11px; font-weight: 800; color: var(--mq-bad); letter-spacing: .04em; }
.mq-rescue .rt { font-size: 16px; font-weight: 800; color: #fff; margin: 5px 0 8px; }
.mq-rescue .rcond { font-size: 12.5px; color: var(--mq-ink-2); line-height: 1.6; background: rgba(0,0,0,.2); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.mq-rescue .rcond b { color: var(--mq-ok); }

/* 4.4 战况总分卡（无顶层源→按模块汇总） */
.mq-scorecard { border: var(--mq-glass-border); border-radius: var(--mq-r); background: var(--mq-glass-bg); backdrop-filter: var(--mq-glass-blur); box-shadow: var(--mq-glass-sh); padding: 16px; text-align: center; }
.mq-scorecard .big { font-size: 46px; font-weight: 850; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(125,211,252,.3); }
.mq-scorecard .note { font-size: 11.5px; color: var(--mq-warn); margin-top: 8px; }

/* ── 5. 数据可视化大屏组件（HUD 科技风·首页大盘） ─────────────────────────────── */

/* 大屏底（更深·扫描装饰） */
.mq-bigscreen { padding: 14px 18px 22px; }
.mq-bigscreen .mq-canvas { max-width: none; padding: 0; }

/* 5.1 大屏居中标题栏 */
.mq-screen-top { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 14px; position: relative; }
.mq-screen-top .deco { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(60,160,255,.5)); position: relative; }
.mq-screen-top .deco.r { background: linear-gradient(270deg, transparent, rgba(60,160,255,.5)); }
.mq-screen-top .deco::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--mq-cyan); box-shadow: 0 0 10px var(--mq-cyan); }
.mq-screen-top .deco.r::after { right: auto; left: 0; }
.mq-screen-top h1 { margin: 0; font-size: 27px; font-weight: 850; letter-spacing: .14em; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #8fccff); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(60,160,255,.4); }
.mq-screen-top .clk { position: absolute; right: 0; top: 4px; font-size: 12px; color: var(--mq-ink-3); font-variant-numeric: tabular-nums; }
.mq-screen-top .clk b { color: var(--mq-cyan); }

/* 5.2 HUD 切角发光面板 */
.mq-hud { position: relative; background: linear-gradient(160deg, rgba(18,38,72,.5), rgba(8,18,40,.46));
  border: 1px solid rgba(64,140,220,.32); border-radius: 4px; padding: 12px 14px;
  box-shadow: inset 0 0 34px rgba(34,110,200,.1), 0 6px 22px rgba(0,0,0,.34); backdrop-filter: blur(9px); }
.mq-hud::before, .mq-hud::after { content: ""; position: absolute; width: 13px; height: 13px; border: 2px solid var(--mq-cyan); pointer-events: none; filter: drop-shadow(0 0 4px rgba(34,211,238,.7)); }
.mq-hud::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.mq-hud::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }
.mq-hud-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #dbeeff;
  padding-bottom: 8px; margin-bottom: 11px; border-bottom: 1px solid rgba(64,140,220,.22); }
.mq-hud-hd::before { content: ""; width: 0; height: 0; border-left: 7px solid var(--mq-cyan); border-top: 4px solid transparent; border-bottom: 4px solid transparent; filter: drop-shadow(0 0 5px var(--mq-cyan)); }
.mq-hud-hd .ext { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--mq-ink-3); }

/* 5.3 发光大 KPI 灯 */
.mq-kpibar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1200px) { .mq-kpibar { grid-template-columns: repeat(3, 1fr); } }
.mq-kpibig { text-align: center; position: relative; padding: 6px 4px; }
.mq-kpibig .v { font-size: 29px; font-weight: 850; color: #5fe0ff; line-height: 1.05; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(34,211,238,.6); font-family: "DIN Alternate", ui-monospace, system-ui, sans-serif; }
.mq-kpibig .v .u { font-size: 13px; font-weight: 600; color: var(--mq-ink-2); margin-left: 3px; text-shadow: none; }
.mq-kpibig .l { font-size: 11.5px; color: var(--mq-ink-3); margin-top: 4px; }
.mq-kpibig .dt { font-size: 10.5px; margin-top: 2px; }
.mq-kpibig .dt.up { color: var(--mq-ok); } .mq-kpibig .dt.down { color: var(--mq-bad); }
.mq-kpibig + .mq-kpibig::before { content: ""; position: absolute; left: -6px; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(64,140,220,.3), transparent); }

/* 5.4 主指标超大数字 */
.mq-hero-num { text-align: center; padding: 6px 0; }
.mq-hero-num .v { font-size: 48px; font-weight: 850; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(60,160,255,.5); letter-spacing: .02em; }
.mq-hero-num .v .u { font-size: 18px; color: var(--mq-cyan); margin-left: 5px; }
.mq-hero-num .l { font-size: 12px; color: var(--mq-ink-2); margin-top: 6px; letter-spacing: .1em; }

/* 5.5 CSS 柱状图 */
.mq-bars { display: flex; align-items: flex-end; gap: 8px; height: 128px; padding-top: 6px; }
.mq-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.mq-bar i { width: 100%; max-width: 20px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--mq-cyan), rgba(34,211,238,.12));
  box-shadow: 0 0 12px rgba(34,211,238,.35); position: relative; transition: height .4s ease; }
.mq-bar.v2 i { background: linear-gradient(180deg, var(--mq-violet), rgba(167,139,250,.12)); box-shadow: 0 0 12px rgba(167,139,250,.35); }
.mq-bar b { font-size: 10px; color: var(--mq-ink-3); white-space: nowrap; }
.mq-bar em { font-size: 10px; color: var(--mq-ink-2); font-style: normal; font-variant-numeric: tabular-nums; }

/* 5.6 SVG 折线/面积（svg 内联，class 控样式） */
.mq-spark { width: 100%; height: 110px; display: block; overflow: visible; }
.mq-spark .ln { fill: none; stroke: var(--mq-cyan); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); }
.mq-spark .ln.v2 { stroke: var(--mq-violet); filter: drop-shadow(0 0 6px rgba(167,139,250,.7)); }
.mq-spark .ar { stroke: none; }
.mq-spark .grid { stroke: rgba(64,140,220,.14); stroke-width: 1; }
.mq-spark .dot { fill: #fff; filter: drop-shadow(0 0 6px var(--mq-cyan)); }

/* 5.7 环形占比 donut */
.mq-donut { width: 116px; height: 116px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: conic-gradient(var(--mq-cyan) 0 38%, var(--mq-violet) 38% 63%, var(--mq-blue) 63% 82%, rgba(148,163,184,.5) 82% 100%);
  box-shadow: 0 0 22px rgba(34,211,238,.16); }
.mq-donut::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, rgba(10,22,46,.96), rgba(6,14,34,.96)); }
.mq-donut .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.mq-donut .c b { font-size: 17px; color: #fff; font-weight: 800; } .mq-donut .c span { font-size: 10px; color: var(--mq-ink-3); }
.mq-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.mq-legend .li { display: flex; align-items: center; gap: 7px; color: var(--mq-ink-2); }
.mq-legend .li .sw { width: 9px; height: 9px; border-radius: 2px; }

/* 5.8 排行条 */
.mq-rank { display: flex; flex-direction: column; gap: 9px; }
.mq-rank .ri { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--mq-ink-2); }
.mq-rank .ri .rn { width: 17px; height: 17px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: rgba(255,255,255,.06); color: var(--mq-ink-3); flex-shrink: 0; }
.mq-rank .ri:nth-child(1) .rn { background: var(--mq-grad); color: #06121f; }
.mq-rank .ri .nm { min-width: 56px; color: var(--mq-ink); }
.mq-rank .ri .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.mq-rank .ri .bar i { display: block; height: 100%; background: var(--mq-grad); box-shadow: 0 0 8px rgba(34,211,238,.4); transition: width .4s ease; }
.mq-rank .ri .vl { font-variant-numeric: tabular-nums; color: var(--mq-ink); min-width: 44px; text-align: right; }

/* 5.9 半环仪表 gauge */
.mq-gauge { --p: 0; width: 130px; height: 70px; position: relative; overflow: hidden; margin: 0 auto; }
.mq-gauge::before { content: ""; position: absolute; left: 0; top: 0; width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(from 270deg, var(--mq-cyan) calc(var(--p) * 1.8deg), rgba(255,255,255,.08) 0deg 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(circle 65px at 65px 65px, transparent 40px, #000 41px); mask: radial-gradient(circle 65px at 65px 65px, transparent 40px, #000 41px); }
.mq-gauge .gv { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 22px; font-weight: 850; color: #fff; font-variant-numeric: tabular-nums; }

/* 5.10 区域散点雷达（城市分布占位） */
.mq-radarmap { position: relative; height: 200px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(34,110,200,.16), transparent 70%), rgba(6,16,36,.5); }
.mq-radarmap .ring { position: absolute; left: 50%; top: 55%; border: 1px solid rgba(64,160,255,.2); border-radius: 50%; transform: translate(-50%,-50%); }
.mq-radarmap .scan { position: absolute; left: 50%; top: 55%; width: 50%; height: 50%; transform-origin: 0 0;
  background: conic-gradient(rgba(34,211,238,.25), transparent 30%); animation: mq-scan 4s linear infinite; }
@keyframes mq-scan { to { transform: rotate(360deg); } }
.mq-radarmap .pt { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--mq-cyan); box-shadow: 0 0 12px var(--mq-cyan); transform: translate(-50%,-50%); }
.mq-radarmap .pt.bad { background: var(--mq-bad); box-shadow: 0 0 12px var(--mq-bad); animation: mq-pulse 1.4s infinite; }
.mq-radarmap .pt.warn { background: var(--mq-warn); box-shadow: 0 0 12px var(--mq-warn); }
.mq-radarmap .pt label { position: absolute; left: 12px; top: -4px; font-size: 10px; color: var(--mq-ink-2); white-space: nowrap; }

/* 5.11 水位条（降级风险） */
.mq-level { height: 16px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; position: relative; }
.mq-level i { display: block; height: 100%; background: linear-gradient(90deg, var(--mq-ok), var(--mq-warn) 70%, var(--mq-bad)); box-shadow: 0 0 12px rgba(248,113,113,.3); }
.mq-level .mk { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; }

/* ── 6. AI 参谋面板（全站常驻问答 · 历史留存） ──────────────────────────────── */
.mq-copilot-mask { position: fixed; inset: 0; z-index: 88; background: rgba(3,7,16,.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s; }
.mq-copilot-mask.on { opacity: 1; visibility: visible; }
.mq-copilot { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw; z-index: 89; display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(165deg, rgba(16,30,60,.97), rgba(8,16,36,.97)); border-left: 1px solid rgba(64,140,220,.32);
  box-shadow: -24px 0 64px rgba(0,0,0,.55); backdrop-filter: blur(26px) saturate(150%); }
.mq-copilot.on { transform: none; }
.mq-copilot-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mq-line); }
.mq-copilot-hd .ttl { font-size: 14.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.mq-copilot-hd .ttl .av { width: 24px; height: 24px; border-radius: 7px; background: var(--mq-grad); display: grid; place-items: center; color: #06121f; font-size: 12px; font-weight: 800; box-shadow: 0 0 12px rgba(34,211,238,.4); }
.mq-copilot-hd .sp { flex: 1; }
.mq-copilot-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--mq-line); }
.mq-copilot-tabs button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mq-ink-3); background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 12px; cursor: pointer; }
.mq-copilot-tabs button.on { color: var(--mq-cyan); border-bottom-color: var(--mq-cyan); }
.mq-copilot-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mq-copilot-body[hidden] { display: none; }   /* 修复：类选择器 display:flex 覆盖了 [hidden] 的 UA display:none，致当前对话/历史会话两面板同显、会话区被挤小 */

/* 对话气泡 */
.mq-msg { max-width: 90%; font-size: 13px; line-height: 1.6; }
.mq-msg.user { align-self: flex-end; background: var(--mq-grad-d); color: #fff; border-radius: 13px 13px 4px 13px; padding: 9px 13px; box-shadow: 0 6px 16px rgba(34,99,235,.3); }
.mq-msg.ai { align-self: flex-start; width: 100%; max-width: 100%; }
.mq-ans { background: rgba(255,255,255,.04); border: 1px solid var(--mq-line); border-radius: 13px 13px 13px 4px; padding: 12px 13px; }
.mq-ans .fresh { font-size: 10.5px; color: var(--mq-cyan); margin-bottom: 9px; display: inline-flex; gap: 6px; align-items: center; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22); border-radius: 999px; padding: 2px 9px; }
.mq-ans .bd { color: var(--mq-ink); }
.mq-ans .src { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 历史会话列表 */
.mq-hist { display: flex; flex-direction: column; gap: 8px; }
.mq-hist .hi { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--mq-line); background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .15s, background .15s; }
.mq-hist .hi:hover { border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.05); }
.mq-hist .hi .q { font-size: 13px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-hist .hi .m { font-size: 11px; color: var(--mq-ink-3); margin-top: 4px; display: flex; gap: 8px; }

/* 输入区 + 上下文芯片 */
.mq-copilot-ft { padding: 10px 14px 14px; border-top: 1px solid var(--mq-line); }
.mq-ctxbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mq-askwrap { display: flex; gap: 8px; align-items: flex-end; }
.mq-ask { flex: 1; background: rgba(8,16,36,.7); border: 1px solid var(--mq-line); border-radius: 11px; color: #fff; padding: 10px 12px; font: inherit; font-size: 13px; resize: none; min-height: 42px; max-height: 120px; outline: none; transition: border-color .15s; }
.mq-ask:focus { border-color: rgba(34,211,238,.5); box-shadow: 0 0 0 3px rgba(34,211,238,.1); }
.mq-ask::placeholder { color: var(--mq-ink-3); }
.mq-sendbtn { width: 42px; height: 42px; border-radius: 11px; border: none; background: var(--mq-grad-d); color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; box-shadow: 0 6px 16px rgba(34,99,235,.3); }
.mq-sendbtn:hover { filter: brightness(1.08); }

/* ── 7. 过渡收编：重做页（body.mq-page）深底透明 + states.js/ui.js 输出 class 玻璃化 ── */
body.mq-root.mq-page #app { background: transparent; color: var(--mq-ink); box-shadow: none; margin: 0; padding: 22px 26px 60px; border-radius: 0; }
.mq-page .state-box { border-radius: var(--mq-r-sm); font-size: 13px; padding: 12px 14px; }
.mq-page .state-loading { background: rgba(255,255,255,.04); color: var(--mq-ink-2); border: 1px solid var(--mq-line); }
.mq-page .state-empty { background: rgba(148,163,184,.08); border: 1px dashed var(--mq-line); color: var(--mq-ink-2); }
.mq-page .state-partial { background: var(--mq-warn-bg); border: 1px solid rgba(251,191,36,.4); color: var(--mq-warn); }
.mq-page .state-401, .mq-page .state-403, .mq-page .state-400, .mq-page .state-422, .mq-page .state-500, .mq-page .state-error { background: var(--mq-bad-bg); border: 1px solid rgba(248,113,113,.4); color: var(--mq-bad); }
.mq-page .state-title { color: #fff; font-weight: 700; }
.mq-page .state-detail { color: var(--mq-ink-2); }
.mq-page .trace-chip { background: rgba(10,20,42,.5); border: 1px solid var(--mq-line); color: var(--mq-ink-3); }
.mq-page .trace-chip.trace-missing { background: rgba(248,113,113,.1); color: var(--mq-bad); border-color: rgba(248,113,113,.3); }