/* ═══════════════════════════════════════════════════════════════
   gcs-industrial.css — UI 工业化升级（覆盖层，最后加载）
   ───────────────────────────────────────────────────────────────
   方向（用户已定）：
     · 双主题对等：深色与浅色都按工业标准重做，各自独立调明度阶梯
     · 面板语言：微圆角 + 明度分层、**不靠边框和阴影**划分区域
     · 密度：适中（行高/内边距较原来收紧约 12%）
     · 中文字体：HarmonyOS Sans SC（自托管，缺字体时优雅回落）
     · 强调色：青蓝，只给"活的数据"与当前选中项；其余走中性灰阶
   本文件只做覆盖，不改动原有 CSS，回滚＝去掉这一行 <link>。
   ═══════════════════════════════════════════════════════════════ */

/* ── 字体：把 woff2 放到 static/fonts/ 即生效；没有文件时自动回落系统字体 ── */
@font-face{font-family:'HarmonyOS Sans SC';src:url('../fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:url('../fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:url('../fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* 中英混排：英文/数字走 Rajdhani，中文走 HarmonyOS，等宽数字走 JetBrains Mono */
  --f-ui:'Rajdhani','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-body:'HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','HarmonyOS Sans SC',ui-monospace,monospace;

  /* 形态：微圆角 + 极细分隔，不用大圆角和投影 */
  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:100px;
  --hair:1px;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:0 12px 32px rgba(0,0,0,.28); --shadow-xl:0 18px 48px rgba(0,0,0,.34);
  --shadow-accent:none; --shadow-glow:none;

  /* 密度（适中）：所有面板/行高统一引用这几个变量 */
  --pad-panel:10px; --pad-row:6px; --pad-cell:5px 9px; --gap-tight:6px; --gap:10px;
  --h-control:28px; --fs-ui:12.5px; --fs-label:11px; --fs-num:12px;

  /* 动效：短、线性偏出，工业界面不做弹跳 */
  --dur-fast:110ms; --dur-base:160ms; --dur-slow:240ms;
  --ease:cubic-bezier(.2,0,0,1);
}

/* ── 浅色主题：不再是"灰蓝网页底"，改中性偏冷的仪器白，四级明度阶梯 ── */
html:not([data-theme="dark-gray"]){
  --c-bg:#e7eaee;          /* 最底：机箱面板 */
  --c-surface:#eef1f4;     /* 侧栏/次级容器 */
  --c-card:#f6f8fa;        /* 面板主体 */
  --c-elevated:#ffffff;    /* 标题条/浮层：最亮 */
  --c-text:#11161c; --c-text-2:#3d4753; --c-text-3:#6b7684;
  --c-border:rgba(17,22,28,.10); --c-border-h:rgba(14,116,144,.45);
  --c-accent:#0e7490; --c-accent-2:#0891b2;
  --c-accent-glow:rgba(14,116,144,.12);
  --gcs-accent:#0e7490; --gcs-accent-dim:rgba(14,116,144,.10); --gcs-accent-glow:rgba(14,116,144,.20);
  --c-success:#047857; --c-warning:#b45309; --c-danger:#b91c1c;
  --gcs-green:#047857; --gcs-amber:#b45309; --gcs-red:#b91c1c;
  --c-primary-btn:#11161c; --c-primary-btn-hover:#232c37; --c-primary-btn-text:#fff;
  --c-soft-btn:#e7eaee; --c-soft-btn-hover:#dde2e8;
  --navbar-bg:#f6f8fa; --navbar-bg-scrolled:#f6f8fa;
}
/* ── 深色主题：加大三级明度差，原来 surface/card/elevated 几乎看不出层次 ── */
html[data-theme="dark-gray"]{
  --c-bg:#0e1216; --c-surface:#151a20; --c-card:#1b2129; --c-elevated:#232b34;
  --c-text:#e8eef5; --c-text-2:#aab6c4; --c-text-3:#79879a;
  --c-border:rgba(232,238,245,.09); --c-border-h:rgba(56,189,248,.45);
  --c-accent:#38bdf8; --c-accent-2:#22d3ee;
  --c-accent-glow:rgba(56,189,248,.16);
  --gcs-accent:#38bdf8; --gcs-accent-dim:rgba(56,189,248,.12); --gcs-accent-glow:rgba(56,189,248,.22);
  --c-success:#34d399; --c-warning:#fbbf24; --c-danger:#f87171;
  --gcs-green:#34d399; --gcs-amber:#fbbf24; --gcs-red:#f87171;
  --c-primary-btn:#e8eef5; --c-primary-btn-hover:#fff; --c-primary-btn-text:#0e1216;
  --c-soft-btn:rgba(255,255,255,.05); --c-soft-btn-hover:rgba(255,255,255,.09);
  --navbar-bg:#151a20; --navbar-bg-scrolled:#151a20;
}

body{font-family:var(--f-ui);font-size:var(--fs-ui);letter-spacing:.1px}
/* 所有数字等宽对齐：读数变化时不再左右跳动 */
.htg-val,.pfd-tape-box,.pfd-hdg-box,.status-pill,.prx-val,.lp-meta,.param-table td,.rstat-v,
input[type=number],.mono,[class*="mono"],code,kbd{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 面板：无边框，靠明度分层 ── */
.panel{background:var(--c-card);border:none;border-radius:var(--r-md);overflow:hidden}
.panel-title{background:var(--c-elevated);border-bottom:var(--hair) solid var(--c-border);
  padding:7px var(--pad-panel);font-size:var(--fs-label);font-weight:600;letter-spacing:.6px;color:var(--c-text)}
#header,#hud-conn-bar,#chart-header,#prx-toolbar,#replay-toolbar,.map-stabs,#config-subtabs,#map-sidebar-tabs{
  background:var(--c-elevated);border-color:var(--c-border)}
#sidebar,#map-sidebar,#prx-side{background:var(--c-surface)}
#hud-wrap{background:var(--c-surface)}
.htg-cell,#log-header,#hud-quick-cmds .hqc-btn{background:var(--c-card)}

/* ── 按钮三级：主/次/幽灵，统一 28px 高、4px 圆角、无阴影 ── */
.btn,.gcs-btn{height:var(--h-control);padding:0 11px;border-radius:var(--r-md);border:var(--hair) solid transparent;
  background:var(--c-soft-btn);color:var(--c-text-2);font-family:var(--f-ui);font-size:var(--fs-ui);font-weight:600;
  letter-spacing:.3px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover,.gcs-btn:hover{background:var(--c-soft-btn-hover);color:var(--c-text);border-color:var(--c-border)}
.btn:active,.gcs-btn:active{transform:none;filter:brightness(.94)}
.btn.accent-btn,.gcs-btn.accent{background:var(--gcs-accent-dim);color:var(--gcs-accent);border-color:color-mix(in srgb,var(--gcs-accent) 45%,transparent)}
.btn.accent-btn:hover,.gcs-btn.accent:hover{background:color-mix(in srgb,var(--gcs-accent) 22%,transparent);color:var(--gcs-accent)}
.btn.danger,.gcs-btn.danger{color:var(--gcs-red);border-color:color-mix(in srgb,var(--gcs-red) 40%,transparent);background:transparent}
.btn.danger:hover,.gcs-btn.danger:hover{background:color-mix(in srgb,var(--gcs-red) 14%,transparent)}
.btn.green-btn,.gcs-btn.green{color:var(--gcs-green);border-color:color-mix(in srgb,var(--gcs-green) 40%,transparent);background:transparent}
.auth-btn,.confirm-ok,.moc-btn-ok{border-radius:var(--r-md)}

/* ── 输入：填充式、无边框，聚焦用 1px 强调环 ── */
input[type=text],input[type=number],input[type=password],select,textarea,
.auth-form input,.param-search input,#chat-input,.chat-input,.modal-box input,.modal-box select,.quick-param-input{
  height:auto;min-height:var(--h-control);background:var(--c-surface);border:var(--hair) solid transparent;
  border-radius:var(--r-md);color:var(--c-text);font-family:var(--f-mono);font-size:var(--fs-num);
  padding:5px 9px;outline:none;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--gcs-accent);background:var(--c-card)}
input::placeholder,textarea::placeholder{color:var(--c-text-3)}

/* ── 参数表：仪器感的行列，表头常驻、行分隔发丝线、hover 整行提亮 ── */
.param-table{border-collapse:separate;border-spacing:0;font-size:var(--fs-num)}
.param-table thead th{position:sticky;top:0;z-index:2;background:var(--c-elevated);color:var(--c-text-2);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.5px;text-align:left;padding:var(--pad-cell);
  border-bottom:var(--hair) solid var(--c-border)}
.param-table td{padding:var(--pad-cell);border-bottom:var(--hair) solid var(--c-border);color:var(--c-text-2)}
.param-table tbody tr:hover td{background:var(--c-elevated);color:var(--c-text)}
.param-table td:first-child{color:var(--c-param-name,var(--c-accent));font-family:var(--f-mono)}
.param-modified{position:relative}
.param-modified::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gcs-amber)}

/* ── 子标签 / 视图切换：下划线式，不做胶囊 ── */
.config-subtab,.map-stab,.cvt-btn,.auth-tab{border-radius:0;background:none;font-size:var(--fs-ui);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.config-subtab.active,.map-stab.active,.auth-tab.active{color:var(--gcs-accent);border-bottom-color:var(--gcs-accent);background:none}
.cvt-btn{border:var(--hair) solid transparent;border-radius:var(--r-sm);padding:3px 9px}
.cvt-btn.active{background:var(--gcs-accent-dim);border-color:color-mix(in srgb,var(--gcs-accent) 40%,transparent);color:var(--gcs-accent)}

/* ── 侧边栏：当前项用左侧 2px 色条 + 明度提升，不用整块高亮 ── */
.sidebar-tab{padding:9px 12px;font-size:var(--fs-ui);border-left:2px solid transparent}
.sidebar-tab:hover{background:var(--c-card)}
.sidebar-tab.active{background:var(--c-card);border-left-color:var(--gcs-accent);color:var(--gcs-accent)}
.drone-item{border-left:2px solid transparent;padding:7px 12px}
.drone-item.active{background:var(--c-card);border-left-color:var(--gcs-accent);animation:none}

/* ── 状态徽标：细边 + 低饱和底，不用实心色块 ── */
.status-pill,.arm-badge,.mode-badge{height:24px;border-radius:var(--r-sm);border:var(--hair) solid var(--c-border);
  background:var(--c-card);font-family:var(--f-mono);font-size:11px;letter-spacing:.6px}
.arm-badge.armed{background:color-mix(in srgb,var(--gcs-red) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-red) 45%,transparent)}
.arm-badge.disarmed{background:color-mix(in srgb,var(--gcs-green) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-green) 45%,transparent)}
.dot{box-shadow:none}

/* ── 弹窗：小圆角、深遮罩、标题条分层 ── */
.modal-box,.confirm-box,.moc-modal,.auth-card,#gcmd-box{border-radius:var(--r-lg);border:var(--hair) solid var(--c-border);
  background:var(--c-card);box-shadow:var(--shadow-lg)}
.modal-overlay,#confirm-overlay,.moc-overlay,#gcmd-overlay{backdrop-filter:blur(2px)}
.modal-title{border-bottom:var(--hair) solid var(--c-border);padding-bottom:8px;color:var(--c-text);letter-spacing:.6px}

/* ── AI 对话：去掉气泡感，改左色条 + 分层底（更像终端记录）── */
.msg,.chat-msg,.feed-item{border-radius:var(--r-sm)}
.msg.user,.chat-msg.user{background:var(--c-elevated);border-left:2px solid var(--gcs-accent)}
.msg.assistant,.chat-msg.assistant{background:var(--c-card);border-left:2px solid var(--c-border)}

/* ── 图表 / 雷达 / 日志：统一发丝线分隔，去圆角内容区 ── */
#chart-area,#radar-view,#prx-stage,#log-console,#replay-chart-col,#replay-3d-col{border-radius:0}
#replay-chart-col,#replay-3d-col{border:var(--hair) solid var(--c-border)}
.prx-head{background:var(--c-elevated);border-bottom:var(--hair) solid var(--c-border);font-size:var(--fs-label)}
.prx-row,.prx-sens{border-bottom:var(--hair) solid var(--c-border)}

/* ── 微交互规范：统一时长与缓动；hover 只改明度，不做位移/放大 ── */
.btn,.gcs-btn,.cvt-btn,.sidebar-tab,.drone-item,.config-subtab,.map-stab,.gcmd-item,.accel-pose,.lp-row,.wp-item{
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease)}
.btn:hover,.gcs-btn:hover,.accel-pose:hover{transform:none}
.gcmd-item.on{background:var(--gcs-accent-dim);border-left-color:var(--gcs-accent)}
*:focus-visible{outline:1px solid var(--gcs-accent);outline-offset:1px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--c-elevated);border-radius:0;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── 配置子标签：标签内竖排（图标在上 / 文字在下），整行不换行 ──
   原来是横排 + 允许整行换行，窄一点就折成两行、间距还不均。
   竖排后单个标签宽度砍掉近一半，一排放得下；真放不下就横向滚动，不再折行。 */
#config-subtabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;gap:0}
#config-subtabs::-webkit-scrollbar{height:4px}
.config-subtab{flex:0 0 auto!important;display:inline-flex!important;flex-direction:column!important;
  align-items:center;justify-content:center;gap:3px!important;min-width:60px;padding:6px 10px!important;
  line-height:1.15;white-space:nowrap;font-size:11.5px}
.config-subtab .ico{margin:0}
.config-subtab .ico svg{width:16px!important;height:16px!important}
@media(max-width:900px){.config-subtab{min-width:54px;padding:5px 7px!important;font-size:11px}}

/* ── 飞机列表：记忆/存档角标与右侧操作按钮重叠 ──
   角标里的 <i class="ico"> 默认 18px，而那行字号只有 9px，图标撑破行宽后压到按钮上。
   这里把列表内图标统一压到 11px，并让文本行自身可收缩、超出隐藏。 */
.drone-item{gap:6px;overflow:hidden}
.drone-item .ico svg,.drone-item svg.moc-svg-ico{width:11px!important;height:11px!important}
.drone-item > div[style*="flex:1"]{min-width:0;overflow:hidden}
.drone-item .drone-name{min-width:0}
.drone-item .drone-name > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 元信息行（机型 · 存档数 · 记忆数）：单行、可截断，绝不挤压右侧按钮 */
.drone-item > div[style*="flex:1"] > div:last-child{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-width:0}
.drone-item button{flex:0 0 auto;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.drone-item button:hover{background:var(--c-soft-btn-hover)}

/* ── 顶栏：窄屏右侧按钮被挤出可视区 ──
   #header 是固定 52px 单行，右侧一串状态药丸 + 登录 + 主题 + 官网 + 引导，
   窗口一窄就整体溢出、最右边的按钮直接看不见（而且没有滚动条提示）。
   策略：左侧标题可收缩 → 右侧按优先级逐级降级（文字转图标 → 隐藏次要项），
   仍放不下时右侧区域可横向滚动，保证任何宽度下都够得到。 */
#header{overflow:hidden;gap:8px}
.hdr-logo{flex:0 1 auto;min-width:0;overflow:hidden}
.hdr-logo span,.hdr-logo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-spacer{flex:1 1 auto;min-width:0}
.hdr-right{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:0;mask-image:linear-gradient(to right,transparent 0,#000 10px)}
.hdr-right::-webkit-scrollbar{display:none}
.hdr-right > *{flex:0 0 auto}

/* 1520px 以下：状态药丸收窄，只留关键读数 */
@media(max-width:1520px){
  .hdr-right .status-pill{padding:3px 7px;font-size:10px}
  #hdr-tools .gcs-btn,#hdr-tools .btn{padding:0 8px}
}
/* 1320px 以下：官网主页 / 引导 只留图标（font-size:0 收掉文字节点，图标用固定尺寸保住） */
@media(max-width:1320px){
  #hdr-home,#moc-ob-guide-btn{font-size:0!important;gap:0!important;padding:0 9px!important;min-width:0}
  #hdr-home .ico svg,#hdr-home svg,#moc-ob-guide-btn svg{width:16px!important;height:16px!important;display:block}
  #hdr-user{font-size:0!important;padding:0 6px}
}
/* 1100px 以下：AI 状态药丸让位（信息在侧栏与浮窗里都有） */
@media(max-width:1100px){
  .hdr-right .status-pill.ai,.hdr-right #xiaomo-pill{display:none}
}
/* 900px 以下：只保留连接状态 / ARM / 登录 / 主题，其余交给命令面板 */
@media(max-width:900px){
  .hdr-right .status-pill:not(.keep){display:none}
  .hdr-logo .hdr-sub,.hdr-logo small{display:none}
}

/* ── 主题切换：改成 28×28 方形图标按钮 ──
   原来是「☀ / ☾」两个图标加一个斜杠，83px 宽，在顶栏里过于抢眼。
   现在只显示"切过去"的那个图标：浅色主题显示月亮，深色主题显示太阳。 */
#header .hdr-right button:has([data-icon="sun"]):has([data-icon="moon"]){
  width:var(--h-control);height:var(--h-control);min-width:var(--h-control);
  padding:0!important;gap:0!important;font-size:0!important;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center}
#header .hdr-right button:has([data-icon="sun"]) .ico svg{width:15px!important;height:15px!important}
html:not([data-theme="dark-gray"]) #header .hdr-right button [data-icon="sun"]{display:none}
html[data-theme="dark-gray"] #header .hdr-right button [data-icon="moon"]{display:none}

/* ── 顶栏精简：分组、图标按钮、去重复文案 ── */
.hdr-group{display:inline-flex;align-items:center;gap:0;border:var(--hair) solid var(--c-border);border-radius:var(--r-md);overflow:hidden;height:var(--h-control)}
.hdr-group .status-pill{border:none;border-radius:0;background:var(--c-card);height:100%;padding:0 9px}
.hdr-group .gcs-btn{border:none;border-radius:0;border-left:var(--hair) solid var(--c-border);height:100%}
.hdr-div{width:1px;height:16px;background:var(--c-border);flex-shrink:0;margin:0 2px}
.hdr-icon-btn{width:var(--h-control);height:var(--h-control);min-width:var(--h-control);padding:0!important;gap:0!important;font-size:0!important;
  align-items:center;justify-content:center;border-radius:var(--r-md)}
.hdr-icon-btn[style*="display:none"]{display:none!important}
.hdr-icon-btn .ico svg{width:15px!important;height:15px!important}
#hdr-user:empty{display:none}
.ai-hdr-status{height:var(--h-control);border-radius:var(--r-md);padding:0 9px}
@media(max-width:1240px){#ai-task-label{display:none}.ai-hdr-status{width:var(--h-control);padding:0;justify-content:center}}

/* ── 顶栏图标按钮：图标居中 ──
   .ico 基础样式带 vertical-align:-2px（为行内文字对齐设的），在纯图标按钮里会把图标压低；
   另外部分按钮还留着 padding:5px 10px 的行内样式，图标被推离中心。这里统一收口。 */
#header .gcs-btn:not([style*="display:none"]),#header .btn:not([style*="display:none"]),
#header a.gcs-btn:not([style*="display:none"]),#hdr-tools button,#hdr-tools a{
  display:inline-flex!important;align-items:center;justify-content:center;line-height:0}
#header .ico,#hdr-tools .ico{vertical-align:0!important;line-height:0;display:inline-flex;align-items:center;justify-content:center}
#header .ico svg,#hdr-tools .ico svg,#header svg.moc-svg-ico{display:block}
.hdr-icon-btn,#moc-ob-guide-btn{padding:0!important;width:var(--h-control);height:var(--h-control);min-width:var(--h-control)}
#moc-ob-guide-btn{font-size:0!important;gap:0!important}
#moc-ob-guide-btn svg{width:15px!important;height:15px!important}

/* 纯图标按钮里要去掉 "button .ico{margin-right:5px}" 那条通用间距，
   否则图标会整体左偏 2.5px（实测），看起来就是"不在中间"。 */
.hdr-icon-btn .ico,#moc-ob-guide-btn .ico,#header .gcs-btn:not(:has(> :not(.ico))) .ico{margin:0!important}
#header .hdr-icon-btn .ico,#header .hdr-icon-btn svg{margin:0!important}

/* ── 分隔线分两级：区域边界要看得见，行内分隔保持克制 ──
   之前统一用了 .09 的发丝线，"面板不带边框、只靠明度分层"在深色下层差不够，
   整屏没有骨架线，眼睛要自己找边界 → 视觉疲劳。现在：
     --c-line-strong 区域边界（顶栏/侧栏/分栏/面板头）
     --c-border      行内分隔（表格行、列表项）保持轻 */
html:not([data-theme="dark-gray"]){--c-border:rgba(17,22,28,.13);--c-line-strong:rgba(17,22,28,.24)}
html[data-theme="dark-gray"]{--c-border:rgba(232,238,245,.11);--c-line-strong:rgba(232,238,245,.20)}

/* 区域骨架线 */
#header{border-bottom:1px solid var(--c-line-strong)}
#sidebar{border-right:1px solid var(--c-line-strong)}
#hud-wrap{border-right:1px solid var(--c-line-strong)}
#hud-right-col{border-left:none}
#map-sidebar,#prx-side{border-left:1px solid var(--c-line-strong)}
#config-subtabs,#map-sidebar-tabs,.map-stabs{border-bottom:1px solid var(--c-line-strong)}
#chart-header,#prx-toolbar,#replay-toolbar,#hud-conn-bar{border-bottom:1px solid var(--c-line-strong)}
#log-section{border-top:1px solid var(--c-line-strong)}
#log-header{border-bottom:1px solid var(--c-border)}
#hud-tele-grid,#hud-quick-cmds{border-top:1px solid var(--c-line-strong)}
.panel{border:1px solid var(--c-border)}
.panel-title{border-bottom:1px solid var(--c-line-strong)}
.modal-box,.confirm-box,.moc-modal,#gcmd-box,.auth-card{border:1px solid var(--c-line-strong)}
/* 拖动分隔条：给出可见的抓手，而不是一条几乎看不见的缝 */
.hud-resize-handle,.hud-vresize-handle,.sidebar-vresize-handle{background:var(--c-line-strong)}
.hud-resize-handle:hover,.hud-vresize-handle:hover,.sidebar-vresize-handle:hover{background:var(--gcs-accent)}
/* 表格/列表行内线保持轻，避免整屏"格子纸" */
.param-table td,.prx-row,.prx-sens,.lp-row,.wp-item,.drone-item{border-bottom-color:var(--c-border)}

#panel-config #config-subtabs{border-bottom:1px solid var(--c-line-strong)!important}

/* ── AI 对话输入行：上传/发送按钮 ──
   这两个按钮带行内样式（实心强调色 + 深色字），在灰阶界面里像两块广告牌。
   统一进按钮体系：上传收成 28px 图标按钮（语义走 title），发送用低饱和强调色。 */
.chat-input-row{gap:6px;padding:8px 10px;background:var(--c-elevated);border-top:1px solid var(--c-line-strong)}
.chat-input-row .chat-input{flex:1;min-width:0;height:30px;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);font-family:var(--f-body);font-size:var(--fs-ui);padding:0 10px}
.chat-input-row .chat-input:focus{border-color:var(--gcs-accent);background:var(--c-card)}
.chat-send-btn{height:30px!important;min-width:30px;padding:0 10px!important;border-radius:var(--r-md)!important;
  background:var(--c-soft-btn)!important;color:var(--c-text-2)!important;border:1px solid var(--c-border)!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:5px;font-family:var(--f-ui);
  font-size:var(--fs-ui);font-weight:600;letter-spacing:.3px;box-shadow:none!important;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.chat-send-btn:hover{background:var(--c-soft-btn-hover)!important;color:var(--c-text)!important;border-color:var(--c-line-strong)!important}
.chat-send-btn svg{width:15px;height:15px;display:block}
/* 上传日志：只留图标 */
#main-log-file-btn,#float-log-file-btn,button[onclick*="log-file"]{width:30px;padding:0!important;font-size:0!important;gap:0!important}
#main-log-file-btn svg,#float-log-file-btn svg{margin:0!important}
/* 发送：低饱和强调色，不用实心亮块 */
#main-send-btn,#float-send-btn{background:var(--gcs-accent-dim)!important;color:var(--gcs-accent)!important;
  border-color:color-mix(in srgb,var(--gcs-accent) 42%,transparent)!important;padding:0 14px!important}
#main-send-btn:hover,#float-send-btn:hover{background:color-mix(in srgb,var(--gcs-accent) 20%,transparent)!important;color:var(--gcs-accent)!important}

/* ── 顶栏 AI 状态胶囊：内容被截断、状态点跑出边界、头像不居中 ──
   .ai-hdr-status 之前只给了 height/padding，没约束内部三个元素（状态点/头像/文字）的
   收缩与对齐，窄栏时 flex 默认可收缩 → 状态点被压出左边、头像被拉扁。 */
.ai-hdr-status{display:inline-flex!important;align-items:center;gap:6px;overflow:hidden;
  border:1px solid var(--c-border);background:var(--c-card);white-space:nowrap;max-width:190px}
.ai-hdr-status:hover{border-color:var(--c-line-strong);background:var(--c-elevated)}
.ai-hdr-status > *{flex:0 0 auto}
.ai-hdr-status .ai-task-dot{width:6px;height:6px;border-radius:50%;margin:0}
.ai-hdr-status img{width:16px!important;height:16px!important;border-radius:50%;object-fit:cover;display:block}
#ai-task-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;line-height:1}
/* 收成图标态时（窄屏）：只剩头像，居中 */
@media(max-width:1240px){
  .ai-hdr-status{width:var(--h-control);max-width:var(--h-control);padding:0;justify-content:center;gap:0}
  .ai-hdr-status .ai-task-dot{position:absolute;transform:translate(9px,-8px)}
  .ai-hdr-status{position:relative}
}

/* ── 悬浮小Mo 按钮：默认态底色反了 ──
   原来用的是 --c-primary-btn（"主按钮"色）：深色主题下它是浅色 → 深色界面里冒出一个白球；
   浅色主题下它是近黑 → 又变成一个黑球。默认态应该跟随界面：深色深、浅色浅，
   只有激活（面板展开）时才用强调色。 */
#ai-float-btn{background:var(--c-elevated);border:1px solid var(--c-line-strong);color:var(--c-text);
  box-shadow:var(--shadow-lg);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
#ai-float-btn:hover{background:var(--c-card);border-color:var(--gcs-accent);transform:none}
#ai-float-btn.active{background:var(--gcs-accent-dim);border-color:var(--gcs-accent);color:var(--gcs-accent);box-shadow:var(--shadow-lg)}
#ai-float-unread{background:var(--gcs-red);color:#fff;border:1px solid var(--c-elevated)}

/* ── 顶栏 AI 状态胶囊里的小Mo 头像：16px 圆形在深色底上糊成一团 ──
   给一层浅底 + 细描边把它从背景里"抠"出来，并稍微放大到 18px。 */
.ai-hdr-status img{width:18px!important;height:18px!important;border-radius:50%;object-fit:cover;
  background:var(--c-elevated);border:1px solid var(--c-border);padding:0;box-sizing:border-box}
html[data-theme="dark-gray"] .ai-hdr-status img{background:#e8eef5;border-color:rgba(232,238,245,.35)}
.ai-hdr-status:hover img{border-color:var(--gcs-accent)}
/* 悬浮按钮里的头像同理：默认态底色已改跟随主题，头像要有对比 */
#ai-float-btn img{background:var(--c-elevated);border:1px solid var(--c-border);box-sizing:border-box}
html[data-theme="dark-gray"] #ai-float-btn img{background:#e8eef5;border-color:rgba(232,238,245,.3)}

/* ── 日志回放页：上方工具栏 + 统计卡吃掉太多高度，曲线与 3D 航迹被压扁 ──
   压缩上方三块（工具栏 / 统计条 / 时间轴）的高度与内边距，把省下的高度还给 #replay-main。 */
#panel-replay #replay-toolbar{padding:5px 10px;gap:5px;min-height:0}
#panel-replay #replay-toolbar .btn,#panel-replay #replay-toolbar .gcs-btn{height:26px;padding:0 9px}
#panel-replay #replay-toolbar select,#panel-replay #replay-toolbar input{min-height:26px;padding:3px 8px}
#replay-stats{padding:6px 12px;gap:6px}
#replay-stats .rstat{padding:4px 10px;min-width:72px;gap:1px;border-radius:6px}
#replay-stats .rstat-l{font-size:9px}
#replay-stats .rstat-v{font-size:14px}
#replay-timeline{padding:6px 12px;gap:8px}
/* 主区拿满剩余高度，两栏各自最小高度也提上去，避免被挤成一条 */
#replay-main{flex:1 1 auto;min-height:340px;padding:8px 12px;gap:8px}
#replay-chart-col,#replay-3d-col{min-height:300px}
.replay-col-head{padding:5px 10px}
.replay-col-title{font-size:10.5px}
@media(max-height:900px){
  #replay-stats{padding:4px 12px}
  #replay-stats .rstat{padding:3px 9px}
  #replay-stats .rstat-v{font-size:13px}
  #replay-main{min-height:280px}
  #replay-chart-col,#replay-3d-col{min-height:240px}
}


/* ── 串口配置：行布局是 div（#serial-row-N），最右的写入/读取按钮被挤出面板 ──
   让行内所有列可收缩（min-width:0），操作列固定不收缩并吸附右侧，面板不再横向溢出。 */
#csp-serial .panel{overflow-x:hidden}
#csp-serial [id^="serial-row"]{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;box-sizing:border-box}
#csp-serial [id^="serial-row"] > *{min-width:0}
#csp-serial [id^="serial-row"] > *:last-child{flex:0 0 auto;display:flex;gap:6px;white-space:nowrap}
#csp-serial select{width:100%;max-width:none;min-width:0}
#csp-serial [id^="serial-row"] .btn{height:24px;padding:0 9px;font-size:11px;flex:0 0 auto}
@media(max-width:1200px){#csp-serial [id^="serial-row"] .btn{padding:0 7px}}

/* ── 地图底图下拉：浅色主题下仍是深色底 ──
   它带行内 style（bg-secondary/border/color 老变量），且 <select> 的原生下拉在部分浏览器
   不继承父级配色。统一进输入体系，并把 option 也一起指定，避免"白界面里一个黑框"。 */
#map-source-select,#map-container select,#map-sidebar select{
  background:var(--c-surface)!important;color:var(--c-text)!important;
  border:1px solid var(--c-border)!important;border-radius:var(--r-md)!important;
  font-family:var(--f-mono);font-size:11px;padding:4px 8px!important;min-height:26px}
#map-source-select:focus,#map-container select:focus{border-color:var(--gcs-accent)!important}
#map-source-select option,#map-container select option,#map-sidebar select option{
  background:var(--c-card);color:var(--c-text)}
/* 地图上的浮层控件统一跟随主题（工具按钮/信息条同理） */
.map-tool-btn{background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-2)}
.map-tool-btn:hover,.map-tool-btn.active{background:var(--gcs-accent-dim);border-color:var(--gcs-accent);color:var(--gcs-accent)}
.map-info-pill{background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-3)}

/* ── 地图工具按钮：图标不居中 + hover 几乎消失 ──
   .map-tool-btn 用的是通用 button 规则（含 .ico{margin-right:5px}），纯图标按钮被推偏；
   hover 又只改了底色透明度，深色底上看起来像整个按钮消失。 */
.map-tool-btn{width:34px;height:34px;padding:0!important;display:flex!important;align-items:center;justify-content:center;
  border-radius:var(--r-md);background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-2);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.map-tool-btn .ico{margin:0!important;line-height:0}
.map-tool-btn .ico svg,.map-tool-btn svg{width:16px!important;height:16px!important;display:block}
.map-tool-btn:hover{background:var(--c-elevated);color:var(--gcs-accent);border-color:var(--gcs-accent)}
.map-tool-btn.active{background:var(--gcs-accent-dim);color:var(--gcs-accent);border-color:var(--gcs-accent)}
.map-tool-btn.danger:hover{background:color-mix(in srgb,var(--gcs-red) 14%,transparent);color:var(--gcs-red);border-color:var(--gcs-red)}

/* 触屏：分隔条要有足够的可触区域（视觉仍是细线，热区放大到 14px） */
.hud-resize-handle,.hud-vresize-handle,.sidebar-vresize-handle{touch-action:none;position:relative}
.hud-resize-handle::before{content:'';position:absolute;top:0;bottom:0;left:-5px;right:-5px}
.hud-vresize-handle::before,.sidebar-vresize-handle::before{content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px}
@media(pointer:coarse){
  .hud-resize-handle{width:10px}
  .hud-vresize-handle,.sidebar-vresize-handle{height:10px}
}

/* ── 顶栏 AI 状态胶囊：窄屏收成图标态后左边框丢了、头像也太小 ──
   收窄那条规则把 padding 归零导致边框视觉被裁；头像 18px 在 28px 按钮里偏小。
   现在：保持完整 1px 边框 + 圆角，头像放大到 22px 并居中。 */
@media(max-width:1240px){
  .ai-hdr-status{
    width:var(--h-control)!important;max-width:var(--h-control)!important;
    padding:0!important;justify-content:center;gap:0;
    border:1px solid var(--c-border)!important;border-radius:var(--r-md)!important;
    box-sizing:border-box;overflow:visible}
  .ai-hdr-status img{width:22px!important;height:22px!important;margin:0}
  .ai-hdr-status .ai-task-dot{transform:translate(11px,-9px)}
}
/* 宽屏态头像也稍微放大，跟文字齐平更清楚 */
.ai-hdr-status img{width:20px!important;height:20px!important}
.ai-hdr-status{border:1px solid var(--c-border)!important;box-sizing:border-box}

/* ── AI 状态胶囊左边框仍然看不见 ──
   真因不是边框没画，是 .hdr-right 上那条 mask-image（左侧 10px 渐隐，用来暗示可滚动）
   正好把这个"第一个子元素"的左边缘吃掉了。改为只在真的溢出可滚动时才加遮罩，
   并把渐隐宽度收到 6px、给右侧留出滚动提示。 */
.hdr-right{mask-image:none!important;-webkit-mask-image:none!important;padding-left:1px}
.hdr-right.is-scrollable{
  mask-image:linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 10px),transparent 100%)!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 10px),transparent 100%)!important}
.ai-hdr-status{outline:1px solid var(--c-border);outline-offset:-1px;border-color:transparent!important}
.ai-hdr-status:hover{outline-color:var(--gcs-accent)}

/* ── 图表头部两行按钮排布奇怪 ──
   #chart-header 是 flex-wrap:wrap，左边一串遥测分组按钮、右边视图切换用 margin-left:auto 顶开，
   一换行右侧那组就被甩到第二行最右、和左边脱节，看起来像两块散装控件。
   改成两栏网格：左＝标题+分组（可换行），右＝视图切换（永远右上角，不参与换行）。 */
#chart-header{display:grid!important;grid-template-columns:1fr auto;align-items:start;gap:6px 10px;
  padding:6px 10px;row-gap:6px}
#chart-header > span:first-child{grid-column:1;align-self:center;font-size:var(--fs-label);
  color:var(--c-text-3);letter-spacing:.5px;white-space:nowrap}
#tele-group-btns{grid-column:1;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
#chart-view-toggle{grid-column:2;grid-row:1 / span 2;margin-left:0!important;display:flex;gap:4px;align-self:start;flex-shrink:0}
/* 两组按钮统一尺寸，不再一大一小 */
#chart-header .cvt-btn{height:24px;padding:0 9px;font-size:11px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
#tele-group-btns .cvt-btn.custom .ctg-del{margin-left:4px;opacity:.5}
@media(max-width:820px){
  #chart-header{grid-template-columns:1fr}
  #chart-view-toggle{grid-column:1;grid-row:auto;justify-content:flex-start}
}

/* ── 演示飞行提示卡：应该居中在回放画面里 ──
   #replay-demo-badge 用 position:absolute + translate(-50%,-50%) 定位，但父级 #replay-main
   是 flex 容器且没有定位上下文时会以更外层为参照，卡片偏到一侧。
   显式给 #replay-main 定位上下文，并把卡片钉死在其几何中心。 */
#replay-main{position:relative}
#replay-demo-badge{position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;margin:0!important;z-index:8;
  max-width:min(420px,86%);text-align:center}
#replay-demo-badge.show{display:flex!important;flex-direction:column;align-items:center}
/* 同一张提示的另一种形态（覆盖整块的 overlay）也居中 */
#replay-demo-overlay{display:flex;align-items:center;justify-content:center}
#replay-demo-hint{margin:0 auto}

/* ── AI 页右侧「待确认操作」栏可折叠 ── */
#ai-cmd-panel{position:relative;transition:width var(--dur-base) var(--ease)}
#ai-cmd-panel.collapsed{width:34px!important;min-width:34px!important;overflow:hidden}
#ai-cmd-toggle{position:absolute;top:6px;left:6px;z-index:3;width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-3);cursor:pointer}
#ai-cmd-toggle:hover{color:var(--gcs-accent);border-color:var(--gcs-accent)}
#ai-cmd-panel.collapsed #ai-cmd-toggle{left:6px;top:6px}

/* ── 待确认操作栏的折叠按钮：压住标题、图形不直观 ──
   改为放在标题行右端（不再绝对定位覆盖文字），图标换成明确的"收起/展开"箭头。 */
#ai-cmd-panel .pq-header{display:flex;align-items:center;gap:8px;padding-right:6px}
#ai-cmd-panel .pq-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#ai-cmd-toggle{position:static!important;margin-left:auto;width:22px;height:22px;flex-shrink:0}
#ai-cmd-toggle svg{transition:transform var(--dur-base) var(--ease)}
#ai-cmd-panel.collapsed #ai-cmd-toggle svg{transform:rotate(180deg)}
#ai-cmd-panel.collapsed{width:36px!important;min-width:36px!important}
#ai-cmd-panel.collapsed .pq-header{padding:6px 0;justify-content:center}
#ai-cmd-panel.collapsed .pq-title{display:none}
#ai-cmd-panel.collapsed > *:not(.pq-header){display:none!important}

/* 工具审批：展开式菜单（不再点一下盲切） */
#tool-approval-menu{display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:60;min-width:230px;
  background:var(--c-card);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:4px}
#tool-approval-menu.open{display:block}
.tam-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:var(--r-md);cursor:pointer}
.tam-item:hover{background:var(--c-elevated)}
.tam-item.on{background:var(--gcs-accent-dim);outline:1px solid color-mix(in srgb,var(--gcs-accent) 40%,transparent);outline-offset:-1px}
.tam-ico{line-height:0;flex-shrink:0;margin-top:1px}
.tam-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tam-txt b{font-size:12px;color:var(--c-text);font-weight:600}
.tam-txt i{font-style:normal;font-size:10.5px;color:var(--c-text-3);white-space:normal}
.lp-shared{cursor:help}

/* ── 折叠态：只留一个可点的按钮 + 待确认数量，不再旋转文字 ── */
#ai-cmd-panel.collapsed{width:38px!important;min-width:38px!important;overflow:visible}
#ai-cmd-panel.collapsed > *:not(.pq-header){display:none!important}
#ai-cmd-panel.collapsed .pq-header{display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
#ai-cmd-panel.collapsed .pq-title{display:none}
#ai-cmd-panel.collapsed #ai-cmd-toggle{display:inline-flex!important;margin:0}
#ai-cmd-panel.collapsed .pq-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;font-size:10px;
  background:var(--gcs-accent-dim);color:var(--gcs-accent)}

/* ── 折叠态改为"一条粗边 + 外挂标签" ──
   面板收成 10px 竖条（就是一条加粗的分隔边），旁边挂一枚小标签露在外面，
   点条或点标签都能展开；不再有旋转文字和拥挤的图标堆。 */
#ai-cmd-panel.collapsed{width:10px!important;min-width:10px!important;flex:0 0 10px!important;
  background:var(--c-line-strong)!important;border:0!important;border-radius:var(--r-sm);
  overflow:visible;cursor:pointer;position:relative;transition:background var(--dur-fast) var(--ease)}
#ai-cmd-panel.collapsed:hover{background:var(--gcs-accent)!important}
#ai-cmd-panel.collapsed > *{display:none!important}
#ai-cmd-panel.collapsed::before{
  content:attr(data-collapsed-label);position:absolute;top:50%;transform:translateY(-50%);right:calc(100% + 5px);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:3px 9px;border-radius:var(--r-pill);font-size:11px;line-height:1.4;
  background:var(--c-card);color:var(--c-text-2);border:1px solid var(--c-border);
  box-shadow:var(--shadow-sm)}
#ai-cmd-panel.collapsed:hover::before{color:var(--gcs-accent);border-color:var(--gcs-accent)}

/* ── 图表头部分组按钮：之前统一尺寸那条规则只写了 height/padding/radius，
   把原有边框样式的层叠顺序盖掉了，看起来"没有边框"。这里补回完整描边。 */
#chart-header .cvt-btn{background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-2);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
#chart-header .cvt-btn:hover{background:var(--c-elevated);border-color:var(--c-line-strong);color:var(--c-text)}
#chart-header .cvt-btn.active{background:var(--gcs-accent-dim);border-color:var(--gcs-accent);color:var(--gcs-accent)}
#chart-header .cvt-btn.custom{border-style:dashed}

/* ── 航线面板：航点列表为空时是一大块纯空白 ──
   给空态一个居中的说明占位（说明怎么加航点），并让工具行紧贴上方，不再撑出空隙。 */
#mstab-content-mission{display:flex;flex-direction:column;min-height:0}

#wp-list{flex:1 1 auto;min-height:96px;display:flex;flex-direction:column}
#wp-list:empty::before,#wp-list .wp-empty{
  content:'地图上点击添加航点，或用上方「按方位 / 距离生成航点」';
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 18px;font-size:11px;line-height:1.7;color:var(--c-text-3)}
#wp-list > *:only-child{margin:auto 0}

/* 侧栏窄，数字输入去掉微调箭头才放得下数值 */
#wp-vector-tool input[type=number]{-moz-appearance:textfield;appearance:textfield;
  padding:3px 5px;font-size:11px;height:24px;text-align:right}
#wp-vector-tool input[type=number]::-webkit-outer-spin-button,
#wp-vector-tool input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#wp-vector-tool summary::-webkit-details-marker{display:none}
#wp-vector-tool[open] summary{color:var(--c-text-2)}

/* 航点小工具：收起时就是一行字，高度随展开状态自适应 */
#wp-vector-tool{flex:0 0 auto;height:auto;padding:2px 10px 0!important;border-bottom:0}
#wp-vector-tool:not([open]){padding-bottom:2px!important}
#wp-vector-tool summary{padding:4px 0!important;margin:0;line-height:1.4}
#wp-vector-tool[open]{padding-bottom:8px!important;border-bottom:1px solid var(--c-border)}

/* 折叠标签：竖直居中挂在粗边中部，别压住顶部的标题/模型胶囊 */

#ai-cmd-panel.collapsed{cursor:pointer}

/* ── 折叠标签改成"书签"：与粗边连成一体，只在左侧有圆角，右侧平接 ── */
#ai-cmd-panel.collapsed::before{
  border-radius:var(--r-md) 0 0 var(--r-md)!important;
  right:100%!important;margin-right:0!important;
  padding:9px 8px!important;
  background:var(--c-line-strong)!important;color:var(--c-bg)!important;
  border:0!important;box-shadow:none!important;
  writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px!important;
  font-size:10.5px!important;line-height:1}
#ai-cmd-panel.collapsed:hover::before{background:var(--gcs-accent)!important;color:#fff!important}

/* ── 航线标签页容器：里面只有一行小工具（30px），容器却被拉到 164px，剩下全是空白 ──
   让它高度贴合内容，多余空间交给下方的航点列表（那里已有空态说明）。 */
#mstab-content-mission{flex:0 0 auto!important;height:auto!important;min-height:0!important}
#map-sidebar #wp-list{flex:1 1 auto;min-height:120px}

/* 书签标签：可点击（伪元素事件冒泡到面板本身）＋ 补描边 */
#ai-cmd-panel.collapsed::before{
  pointer-events:auto!important;cursor:pointer;
  border:1px solid var(--c-line-strong)!important;border-right:0!important;
  background:var(--c-card)!important;color:var(--c-text-2)!important;
  box-shadow:-1px 0 4px rgba(0,0,0,.12)!important}
#ai-cmd-panel.collapsed:hover::before{
  background:var(--gcs-accent)!important;color:#fff!important;border-color:var(--gcs-accent)!important}

/* ── 深色主题调暗降饱和：原来的底色偏蓝（#0e1216→#232b34，b 明显高于 r），
   大面积铺开像"鬼火"。改成近中性的深灰，只留一点点冷调，整体再压暗一档。 ── */
html[data-theme="dark-gray"]{
  --c-bg:#0b0c0e;          /* 最底 */
  --c-surface:#111316;     /* 侧栏 / 次级容器 */
  --c-card:#16181c;        /* 面板主体 */
  --c-elevated:#1d2025;    /* 标题条 / 浮层 */
  --c-text:#e2e6ea; --c-text-2:#a4abb3; --c-text-3:#757c85;
  --c-border:rgba(226,230,234,.10); --c-line-strong:rgba(226,230,234,.17);
  --gcs-accent-dim:rgba(56,189,248,.12);
}
/* 强调色也收一档：原来的亮青在暗底上过跳 */
html[data-theme="dark-gray"]{--gcs-accent:#4aa8cc;--c-border-h:rgba(74,168,204,.42)}
html[data-theme="dark-gray"] body,html[data-theme="dark-gray"] #app{background:var(--c-bg)}

/* 浅色主题：分隔条原来用 .24 深灰实色，白底上像一条黑杠 */
html:not([data-theme="dark-gray"]) .hud-resize-handle,
html:not([data-theme="dark-gray"]) .hud-vresize-handle,
html:not([data-theme="dark-gray"]) .sidebar-vresize-handle{background:rgba(17,22,28,.09)}
html:not([data-theme="dark-gray"]) .hud-resize-handle:hover,
html:not([data-theme="dark-gray"]) .hud-vresize-handle:hover,
html:not([data-theme="dark-gray"]) .sidebar-vresize-handle:hover{background:var(--gcs-accent)}
html:not([data-theme="dark-gray"]) #ai-cmd-panel.collapsed{background:rgba(17,22,28,.12)!important}
html:not([data-theme="dark-gray"]) #ai-cmd-panel.collapsed:hover{background:var(--gcs-accent)!important}

/* ── 日志回放：曲线区 / 3D 航迹区 / 演示遮罩写死了 #0a0e16 深色底，浅色主题下是三块黑砖 ── */
#replay-chart-col,#replay-3d-col,#replay-demo-overlay,#replay-canvas-wrap{
  background:var(--c-card)!important;color:var(--c-text-2)}
#replay-main .rdc-title,#replay-main .demo-hint-title{color:var(--c-text)}
#replay-main .rdc-desc,#replay-main .demo-hint-desc,
#replay-main .rdc-formats,#replay-main .demo-hint-formats{color:var(--c-text-3)}
#replay-main .rdc-icon,#replay-main .demo-hint-icon{color:var(--gcs-accent)}
#replay-chart-col,#replay-3d-col{border:1px solid var(--c-border);border-radius:var(--r-md)}
/* 画布本身背景交给 JS 绘制，这里给个兜底底色，避免透明处露出旧深色 */
#replay-chart-canvas,#replay-3d-canvas{background:var(--c-card)}

/* ── 演示提示卡：让遮罩铺满整个回放主区，卡片正中 ──
   之前遮罩只盖住中间一条横带，卡片虽在带内居中，但相对整块画面是偏的。 */
#replay-main{position:relative}
#replay-demo-overlay{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:color-mix(in srgb,var(--c-bg) 72%,transparent)!important;z-index:9}
#replay-demo-overlay > *{margin:0!important;max-width:min(460px,84%)}
#replay-demo-card,#replay-demo-overlay .rdc-wrap{background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px 26px;text-align:center}

/* 日志池标题：原来用的是 dim 级文字色，两个主题下都偏浅看不清 */
.lp-panel .lp-head b{color:var(--c-text)!important;font-weight:600}
.lp-panel .lp-head b .ico{color:var(--c-text-2)}
.lp-panel .lp-shared{color:var(--c-text-2)!important;background:var(--c-elevated);
  border:1px solid var(--c-border);padding:1px 7px;border-radius:var(--r-pill);font-size:10.5px}
.lp-panel .lp-head{color:var(--c-text-2)}

/* 回放两栏标题：原本为深色底设计的浅字，改到卡片底后看不清 */
#replay-main .replay-col-head{color:var(--c-text-2);border-bottom:1px solid var(--c-border)}
#replay-main .replay-col-title{color:var(--c-text)!important;font-weight:600}
#replay-main .replay-col-title .ico{color:var(--gcs-accent)}
#replay-main .replay-col-hint,#replay-main .replay-col-head span:not(.replay-col-title){color:var(--c-text-3)!important}

/* 演示提示卡：整卡接入主题（原来是为深色底写死的半透明黑 + 亮字） */
#replay-demo-badge{background:var(--c-card)!important;border:1px solid var(--c-line-strong)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--shadow-lg)!important;color:var(--c-text-2)!important;
  padding:20px 26px!important;gap:8px}
#replay-demo-badge > span:first-child{background:var(--gcs-accent-dim);color:var(--gcs-accent);
  border:1px solid color-mix(in srgb,var(--gcs-accent) 35%,transparent);
  padding:2px 9px;border-radius:var(--r-pill);font-size:10.5px;align-self:center}
#replay-demo-badge div:nth-of-type(1){color:var(--c-text)!important;font-size:17px;font-weight:600}
#replay-demo-badge div:nth-of-type(2),#replay-demo-badge div:nth-of-type(3){color:var(--c-text-3)!important}
#replay-demo-badge label{background:var(--gcs-accent);color:#fff;border:0;border-radius:var(--r-md);
  padding:8px 18px;font-size:12px;cursor:pointer;align-self:center}
#replay-demo-badge label:hover{filter:brightness(1.08)}
#replay-demo-badge > div:last-child{color:var(--c-text-3)!important;font-size:10.5px;font-family:var(--f-mono)}

/* 遮罩提到整页后，铺满 panel-replay */
#panel-replay{position:relative}
#panel-replay > #replay-demo-overlay{position:absolute;inset:0;z-index:20}

#replay-demo-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:color-mix(in srgb,var(--c-bg) 82%,transparent)!important}

#replay-demo-overlay{background:color-mix(in srgb,var(--c-bg) 42%,transparent)!important}

/* 3D 视图底部姿态信息条：写死深色底 */
#replay-3d-col .r3-info,#replay-3d-col .replay-3d-info,#replay-3d-col [class*="r3-hud"]{
  background:var(--c-elevated)!important;color:var(--c-text-2)!important;border-top:1px solid var(--c-border)}
#replay-3d-col .r3-info b,#replay-3d-col .replay-3d-info b{color:var(--c-text)!important}

/* 演示提示卡：不透明卡片窗口（原来是半透明，压在曲线上看不清） */
#replay-demo-hint,#replay-demo-badge{
  background:var(--c-elevated)!important;opacity:1!important;
  border:1px solid var(--c-line-strong)!important;border-radius:var(--r-lg)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
  padding:24px 30px!important;color:var(--c-text-2)!important;backdrop-filter:none!important}
#replay-demo-hint *{opacity:1}
/* 遮罩本身不再压暗背景，只负责居中 */
#replay-demo-overlay{background:transparent!important}

/* 地图工具状态提示条 */
#map-tool-hint{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:1200;
  display:none;align-items:center;gap:10px;padding:6px 10px 6px 14px;border-radius:var(--r-pill);
  background:var(--c-card);border:1px solid var(--gcs-accent);color:var(--c-text-2);
  font-size:11px;box-shadow:var(--shadow-md)}
#map-tool-hint b{color:var(--gcs-accent);font-weight:600}
#map-tool-hint .mth-esc{color:var(--c-text-3);font-family:var(--f-mono);font-size:10px}
#map-tool-hint button{height:22px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--gcs-accent);color:#fff;border:0;font-size:11px;cursor:pointer}
#map-tool-hint button:hover{filter:brightness(1.08)}

/* 两套演示提示同时存在（#replay-demo-hint 与 #replay-demo-badge），画面上重叠成两块。
   统一只保留遮罩里的 #replay-demo-hint。 */
#replay-demo-badge{display:none!important}
#replay-demo-overlay.hidden{display:none!important}

#replay-demo-hint{position:relative}
#replay-demo-close{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--c-text-3);cursor:pointer}
#replay-demo-close:hover{background:var(--c-elevated);border-color:var(--c-border);color:var(--c-text)}

/* 工具按钮激活态：加左侧强调条，暗示"当前生效，再点一次退出" */
.map-tool-btn.active{position:relative}
.map-tool-btn.active::after{content:'';position:absolute;left:-1px;top:6px;bottom:6px;width:2px;
  border-radius:1px;background:var(--gcs-accent)}

/* 地图工具按钮：激活态改成实心强调色（原来是半透明的 accent-dim，看着像"按下去没弹起来"） */
.map-tool-btn{background:var(--c-card);opacity:1!important}
.map-tool-btn.active{background:var(--gcs-accent)!important;border-color:var(--gcs-accent)!important;color:#fff!important}
.map-tool-btn.active .ico,.map-tool-btn.active svg{color:#fff!important}
.map-tool-btn.active::after{display:none}
.map-tool-btn:hover{background:var(--c-elevated);color:var(--gcs-accent);border-color:var(--gcs-accent)}
.map-tool-btn.active:hover{background:var(--gcs-accent)!important;color:#fff!important;filter:brightness(1.08)}
.map-tool-btn:active{transform:translateY(0.5px)}
.map-tool-btn.danger:hover{background:var(--gcs-red)!important;border-color:var(--gcs-red)!important;color:#fff!important}

/* AI 额度胶囊 */
.ai-quota-pill{display:inline-flex;align-items:center;height:var(--h-control);padding:0 9px;
  border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-card);
  color:var(--c-text-3);font-family:var(--f-mono);font-size:11px;white-space:nowrap;cursor:help}
.ai-quota-pill.warn{color:var(--gcs-amber);border-color:color-mix(in srgb,var(--gcs-amber) 45%,transparent)}
.ai-quota-pill.danger{color:var(--gcs-red);border-color:color-mix(in srgb,var(--gcs-red) 55%,transparent)}
@media(max-width:1240px){.ai-quota-pill{display:none!important}}

/* 账号菜单里的 AI 额度详情 */
.aqd{padding:10px 12px;border-bottom:1px solid var(--c-border);display:flex;flex-direction:column;gap:9px}
.aqd-tier{font-size:11px;color:var(--c-text-3)}
.aqd-tier b{color:var(--c-text);font-weight:600;margin-left:4px}
.aqd-row{display:flex;flex-direction:column;gap:3px}
.aqd-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--c-text-3)}
.aqd-head b{font-family:var(--f-mono);color:var(--c-text-2);font-weight:500}
.aqd-head b.warn{color:var(--gcs-amber)}
.aqd-head b.danger{color:var(--gcs-red)}
.aqd-track{height:4px;border-radius:2px;background:var(--c-elevated);overflow:hidden}
.aqd-track i{display:block;height:100%;background:var(--gcs-accent);border-radius:2px;transition:width var(--dur-base) var(--ease)}
.aqd-track i.warn{background:var(--gcs-amber)}
.aqd-track i.danger{background:var(--gcs-red)}
.aqd-foot{font-size:10px;color:var(--c-text-3);font-family:var(--f-mono)}

.ai-quota-pill{display:none!important}
/* 未登录时账号菜单里的额度区给一句说明，不留空块 */
.aqd:empty{display:none}

/* 账号下拉（顶栏用户名点开） */
#hdr-user:hover{background:var(--c-elevated);color:var(--c-text-2)!important}
#acct-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:200;min-width:266px;
  background:var(--c-card);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
#acct-menu.open{display:block}
#acct-menu .aqd{border-bottom:0}
.aqd-empty{padding:14px;font-size:11px;color:var(--c-text-3);text-align:center}

/* ── 账号按钮：原来是裸 span，看不出可点 ── */
#hdr-user{display:inline-flex;align-items:center;gap:6px;height:var(--h-control);padding:0 10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.5px;color:var(--c-text-2);
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);cursor:pointer}
#hdr-user:hover{border-color:var(--gcs-accent);color:var(--gcs-accent)}
#hdr-user:empty{display:none}
#acct-menu.open{display:block}

/* ── 统一提示气泡：替代原生 title（原生要等 1~2 秒、系统黑框、与设计不搭）── */
/* 2026-09-08：原来是 display:none → block，同一帧内改 display 会让 opacity 过渡
   直接失效，气泡是"硬弹出"的。改用 visibility + opacity，淡入才真的跑起来。
   visibility 同样不吃鼠标事件，且配合 pointer-events:none 不会挡住下面的元素。 */
#moc-tip{position:fixed;z-index:9999;visibility:hidden;max-width:280px;padding:6px 10px;
  border-radius:var(--r-md);background:var(--c-elevated);color:var(--c-text);
  border:1px solid var(--c-line-strong);box-shadow:var(--shadow-md);
  font-size:11.5px;line-height:1.5;white-space:normal;pointer-events:none;
  opacity:0;transform:translateY(-2px);
  /* 隐藏态：先淡出 120ms，visibility 延后到淡出结束才切 —— 否则 visibility
     瞬间生效会把淡出动画整个吃掉，表现为"突然消失"。 */
  transition:opacity 120ms var(--ease),transform 120ms var(--ease),visibility 0s linear 120ms}
/* 显示态：visibility 立刻可见，opacity 用 140ms 淡入（比淡出稍慢，出场更柔和） */
#moc-tip.show{visibility:visible;opacity:1;transform:none;
  transition:opacity 140ms var(--ease),transform 140ms var(--ease),visibility 0s}
#moc-tip::after{content:'';position:absolute;left:var(--tip-arrow,50%);margin-left:-4px;
  width:8px;height:8px;background:var(--c-elevated);
  border-left:1px solid var(--c-line-strong);border-top:1px solid var(--c-line-strong)}
#moc-tip[data-side="below"]::after{top:-5px;transform:rotate(45deg)}
#moc-tip[data-side="above"]::after{bottom:-5px;transform:rotate(225deg)}

/* 侧向气泡（竖排工具栏）：箭头改挂左右边 */
#moc-tip[data-side="right"]::after{left:-5px;top:var(--tip-arrow,50%);margin-top:-4px;margin-left:0;transform:rotate(315deg)}
#moc-tip[data-side="left"]::after{right:-5px;left:auto;top:var(--tip-arrow,50%);margin-top:-4px;margin-left:0;transform:rotate(135deg)}
/* 地图工具条按钮的悬停反馈跟其它按钮统一 */
#map-toolbar .map-tool-btn{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}

/* 额度浮层：必须完全不透明（原来能透出后面的聊天内容，数字读不清） */
#acct-menu{background:var(--c-card)!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;opacity:1!important}
#acct-menu .aqd{background:var(--c-card)}
/* 百分比是主信息，放大加粗 */
.aqd-head b{font-size:13px;font-weight:600;color:var(--c-text)}
.aqd-head b.warn{color:var(--gcs-amber)}
.aqd-head b.danger{color:var(--gcs-red)}
.aqd-foot{font-size:10px;color:var(--c-text-3)}

/* 顶栏额度按钮：图标是活的柱状图 */
#hdr-quota{padding:0 8px}
#hdr-quota .qb-track{fill:currentColor;opacity:.16}
#hdr-quota .qb-fill{fill:var(--gcs-accent);transition:height var(--dur-base) var(--ease),y var(--dur-base) var(--ease)}
#hdr-quota.warn .qb-fill{fill:var(--gcs-amber)}
#hdr-quota.danger .qb-fill{fill:var(--gcs-red)}
#hdr-quota.warn{border-color:color-mix(in srgb,var(--gcs-amber) 45%,transparent)}
#hdr-quota.danger{border-color:color-mix(in srgb,var(--gcs-red) 55%,transparent)}
#hdr-quota:hover{border-color:var(--gcs-accent)}

#hdr-quota.empty{opacity:.55}
#hdr-quota.empty .qb-track{opacity:.22}
#hdr-quota.empty:hover{opacity:1;border-color:var(--gcs-accent)}

/* 柱图要有颜色：轨道用强调色淡底，未登录也看得出是图表 */
#hdr-quota .qb-track{fill:var(--gcs-accent);opacity:.20}
#hdr-quota.empty{opacity:1}
#hdr-quota.empty .qb-track{fill:var(--c-text-3);opacity:.28}
#hdr-quota.warn .qb-track{fill:var(--gcs-amber);opacity:.20}
#hdr-quota.danger .qb-track{fill:var(--gcs-red);opacity:.20}
/* 未登录时不留空壳账号按钮 */
#hdr-user:empty{display:none!important}

/* 顶栏唯一账号按钮 */
#hdr-login{display:inline-flex!important;align-items:center;height:var(--h-control);
  padding:0 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.4px;white-space:nowrap}
#hdr-login.acct-signed{color:var(--c-text-2);background:var(--c-card);border:1px solid var(--c-border)}
#hdr-login.acct-signed:hover{color:var(--gcs-accent);border-color:var(--gcs-accent)}

/* 三根柱子各自上色：5 小时 / 7 天 / 最紧的那个，一眼分得清 */
#hdr-quota #qb-1{fill:var(--gcs-accent)}
#hdr-quota #qb-2{fill:var(--gcs-green,#16a34a)}
#hdr-quota #qb-3{fill:var(--gcs-amber)}
#hdr-quota.warn #qb-3{fill:var(--gcs-amber)}
#hdr-quota.danger #qb-3{fill:var(--gcs-red)}
#hdr-quota.empty #qb-1{fill:var(--gcs-accent);opacity:.55}
#hdr-quota.empty #qb-2{fill:var(--gcs-green,#16a34a);opacity:.55}
#hdr-quota.empty #qb-3{fill:var(--gcs-amber);opacity:.55}
#hdr-quota .qb-track{fill:currentColor;opacity:.12}

/* 分组按钮属于「图表」子栏，隐藏时标题独占左栏 */
#chart-header #tele-group-btns[style*="display: none"]{display:none!important}
#chart-header > span:first-child{grid-row:1}

/* AI 动态：巡检开关条 */
#ai-feed-controls{display:flex;align-items:center;gap:10px;padding:7px 12px;
  border-bottom:1px solid var(--c-border);background:var(--c-elevated);font-size:11px}
.aif-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.aif-switch input{position:absolute;opacity:0;width:0;height:0}
.aif-slider{width:30px;height:17px;border-radius:9px;background:var(--c-line-strong);
  position:relative;transition:background var(--dur-fast) var(--ease);flex-shrink:0}
.aif-slider::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:var(--c-card);transition:transform var(--dur-fast) var(--ease)}
.aif-switch input:checked + .aif-slider{background:var(--gcs-accent)}
.aif-switch input:checked + .aif-slider::after{transform:translateX(13px)}
.aif-label{color:var(--c-text-2)}
.aif-sel{height:24px;padding:0 6px;font-size:11px;border-radius:var(--r-sm);
  background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-2)}
.aif-state{margin-left:auto;font-family:var(--f-mono);font-size:10.5px}
.aif-state.off{color:var(--c-text-3)}
.aif-state.wait{color:var(--gcs-amber)}
.aif-state.live{color:var(--gcs-green,#16a34a)}