/* 页面骨架: 顶栏 + 三 Tab 切换条 + 每 Tab 内"日志说明卡(常驻) + 控制条(常驻) +
   可滚动内容区"结构, 布局骨架抄自 pathtest_web, 去掉账号/存储相关样式,
   新增日志需求说明卡(.reqcard)、文件匹配状态徽章行(.filematch)、
   单图/双图绘图区(.plot-single/.plot-dual) */
#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 .tb-right{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:8px}

/* Tab 切换条: 三个 Tab 平铺 */
#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)}

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

/* 日志需求说明卡: 页面加载即可见, 不依赖任何 JS 状态, 纯文字/徽章 */
.reqcard{flex:none;padding:10px 16px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.7}
.reqcard b{color:var(--txt)}
.reqcard .badge{margin:0 4px}

/* 每 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 .crow .crow-right{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  margin-left:auto}
.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-width:0;min-height:0;overflow-y:auto;padding:14px 16px}
.tabcontent::-webkit-scrollbar{width:10px}
.tabcontent::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:5px}

/* 已匹配到的日志文件状态行 */
.filematch{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.filematch .fm-row{font-size:11px;color:var(--muted);word-break:break-all}

/* 翻页/播放控制条: 上一帧/下一帧/播放/暂停/跳转输入 */
.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}
.pager .pg-tip{font-size:11px;color:var(--faint);white-space:nowrap}

/* 绘图区: 选项一单图, 选项二/三双图并排(窄屏下堆叠) */
.plot-single{width:100%;min-width:0;height:640px}
.plot-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;min-width:0}
.plot-dual .plot-cell{min-width:0;height:640px}
.plot-title{font-size:11px;color:var(--muted);white-space:pre-line;margin:0 0 6px;line-height:1.6}

@media (max-width:900px){
  .plot-dual{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .tabcontent{padding-right:10px;padding-left:10px}
  .controlbar .crow .crow-right{margin-left:0}
  .plot-single{height:460px}
  .plot-dual .plot-cell{height:460px}
}