/* 页面骨架: 顶栏 + 三 Tab 切换条 + 每 Tab 内"控制条(常驻) + 可滚动内容区"
   两段式布局。与 planning_emulator 的地图全屏铺满不同, 本工具是数据浏览
   工具, 内容(图表/表格)可能超出一屏, 故不对 body 设 overflow:hidden,
   改由每个 Tab 自己的 .tabcontent 承担滚动 */
#topbar{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;
  height:52px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line);
  position:relative}
#topbar .tb-title{font-size:17px;font-weight:700;letter-spacing:.4px;white-space:nowrap}
#topbar .tb-sub{font-size:11px;color:var(--muted);white-space:nowrap}
#topbar #themeBtn{position:absolute;right:18px;top:50%;transform:translateY(-50%);flex:none}
#topbar #dbWarn{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--warn)}

/* Tab 切换条: 三个 Tab 平铺, 对齐 planning_emulator #sideRail 的 on/hover 语义,
   但横排且不折叠(本工具没有"地图常驻+侧栏可收起"的空间争用问题) */
#tabbar{flex:none;display:flex;background:var(--panel2);border-bottom:1px solid var(--line)}
#tabbar .tab{flex:1;text-align:center;padding:11px 8px;cursor:pointer;user-select:none;
  font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;
  transition:.15s}
#tabbar .tab:hover{color:var(--txt)}
#tabbar .tab.on{color:var(--accent2);border-bottom-color:var(--accent2)}
#tabbar .tab .badge{margin-left:6px}

#app{flex:1;min-height:0;display:flex;flex-direction:column}
.tabpane{display:none;flex:1;min-height:0;flex-direction:column}
.tabpane.on{display:flex}

/* 每 Tab 内: 顶部控制条常驻(上传/时间过滤/翻页/操作按钮), 下方内容区可滚动 */
.controlbar{flex:none;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
.controlbar .crow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.controlbar .cfield{display:flex;flex-direction:column;gap:3px;min-width:0}
.controlbar .cfield label{font-size:11px;color:var(--muted)}
.controlbar .cfield.grow{flex:1;min-width:160px}
.tabcontent{flex:1;min-height:0;overflow-y:auto;padding:14px 16px}
.tabcontent::-webkit-scrollbar{width:10px}
.tabcontent::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:5px}

/* 翻页条: 上一/下一/跳转输入, Tab1/Tab3 共用 */
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pager .pg-pos{font-size:12px;color:var(--muted);white-space:nowrap}
.pager .pg-pos b{color:var(--txt)}
.pager input[type="number"]{width:72px}

/* 图表卡片网格: 逐候选一张图 */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.chart-card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px}
.chart-card .cc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.chart-card .cc-head .cc-title{flex:1;font-weight:600;color:var(--txt)}
.chart-card .cc-plot{width:100%;height:320px}

/* 详情弹窗内 8 格布局(路径叠对 + 一二三阶导数对照 + 输入对照表 + 逐点数值表) */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-grid .dg-plot{width:100%;height:260px}
.detail-grid .dg-cell{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;min-width:0}
.detail-grid .dg-cell h3{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr}}