/* 页面骨架：顶栏 / 主区 / 地图 / 左右侧栏 / 子面板与卡片三态 */
  /* ---- 顶栏（整幅标题，居中）---- */
  #topbar{flex:none;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
    height:52px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line)}
  #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 #settingsBtn{position:absolute;right:18px;top:50%;transform:translateY(-50%);flex:none}
  /* --pane-w：右侧内容区展开后的宽度。定义在 #app 上而不是 #side 上，
     是为了让地图里的浮层（如底部回放时间轴 #rpDock）也能继承到、按它避让 */
  #app{--pane-w:360px;display:flex;flex:1;min-height:0;width:100vw}
  #map{flex:1;height:100%;position:relative}
  /* ---- 高德自带的 logo / 版权条（.amap-logo + .amap-copyright）----
     默认贴在地图左下角，与同在左下角的比例尺（见 js/map-core.js）挤在一起。整条挪到右下角。
     ⚠ 只挪位置，不隐藏也不遮挡：高德的服务条款要求 logo 与版权信息始终完整可见，
       故不能 display:none，也不能挪到会被 #sideContent 盖住的地方——右侧内容区是浮在
       地图上的，展开时按 --pane-w 让开（与 #rpDock/#scDock 同一套，见 components.css）。
     两条的先后：logo 靠最右，版权文字排在它左边（默认是 logo 在左、文字在右，
     整体右移后调个个儿，读起来仍是「图标 + 文字」连成一块）。
     !important：这两个元素的位置由高德自己注入的样式表控制，个别版本还带 style 属性，
     且会在地图 resize 后重写，不加压不住。 */
  #map .amap-logo     {left:auto!important;right:10px!important}
  #map .amap-copyright{left:auto!important;right:88px!important}   /* 88 ≈ logo 宽 78 + 10 间距 */
  /* 右侧内容区展开时整体再左移一个面板宽，别被浮层盖住 */
  #app:has(#side:not(.collapsed)) #map .amap-logo     {right:calc(var(--pane-w) + 10px)!important}
  #app:has(#side:not(.collapsed)) #map .amap-copyright{right:calc(var(--pane-w) + 88px)!important}
  /* ---- side panel（右侧：图标竖条 rail 常驻；内容区浮层覆盖在地图上，不挤压左侧）---- */
  /* --rail-w：图标条宽度，内容区靠它定位，改一处即可 */
  #side{--rail-w:64px;flex:none;height:100%;position:relative;z-index:30}
  /* 右侧竖直图标条（始终显示：图标 + 下方功能名）*/
  #sideRail{width:var(--rail-w);height:100%;background:var(--panel2);border-left:1px solid var(--line);
    display:flex;flex-direction:column;padding:10px 0;gap:6px}
  #sideRail .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;margin:0 8px;height:48px;cursor:pointer;user-select:none;border-radius:9px;
    transition:.15s;font-size:20px;line-height:1}
  #sideRail .tab .ic{line-height:1}
  /* 图标下方的功能名：四个字要塞进 48px 净宽，故字号压到 10px 且不加字距 */
  #sideRail .tab .lbl{font-size:10px;line-height:1;font-weight:600;letter-spacing:0;white-space:nowrap}
  #sideRail .tab:hover{filter:brightness(1.12)}
  /* 铅笔改为「右上→左下」方向（水平镜像使笔尖指向左下、笔杆朝右上）*/
  #sideRail .tab[data-tab="edit"] .ic{display:inline-block;transform:scaleX(-1)}
  /* 场景运行图标略小一些 */
  #sideRail .tab[data-tab="run"] .ic{font-size:15px}
  /* 场景复现循环箭头加粗一些 */
  #sideRail .tab[data-tab="replay"] .ic{font-weight:900;font-size:22px}
  /* 推演复现循环箭头同样加粗（与场景复现的 ↻ 做方向区分：⟲ 逆时针）*/
  #sideRail .tab[data-tab="deduc"] .ic{font-weight:900;font-size:22px}
  /* 五个功能各自配色（收起时用浅色底块区分）：编辑=橙 运行=青 复现=蓝 回放=红 推演复现=紫 */
  #sideRail .tab[data-tab="edit"]  {background:rgba(var(--warn-rgb),.16);   color:var(--warn)}
  #sideRail .tab[data-tab="run"]   {background:rgba(var(--accent-rgb),.16); color:var(--accent)}
  #sideRail .tab[data-tab="replay"]{background:rgba(var(--accent2-rgb),.16);color:var(--accent2)}
  #sideRail .tab[data-tab="record"]{background:rgba(var(--danger-rgb),.16); color:var(--danger)}
  #sideRail .tab[data-tab="deduc"] {background:rgba(var(--purple-rgb),.16); color:var(--purple)}
  /* 激活态：实心底 + 反色字。五种底色下 --btn-txt（深色主题=近黑、浅色主题=白）
     对比度均 ≥4.8:1，故字色五个共用一条，只有底色分开写。
     选择器末尾的 [data-tab] 不是多余的：它把特异度抬到 (1,3,0)，
     稳压上面五条 (1,2,0) 的 color——否则就要靠「写在下面」这种易碎的源码顺序取胜。 */
  #sideRail .tab.on[data-tab]{color:var(--btn-txt)}
  #sideRail .tab.on[data-tab="edit"]  {background:var(--warn)}
  #sideRail .tab.on[data-tab="run"]   {background:var(--accent)}
  #sideRail .tab.on[data-tab="replay"]{background:var(--accent2)}
  #sideRail .tab.on[data-tab="record"]{background:var(--danger)}
  #sideRail .tab.on[data-tab="deduc"] {background:var(--purple)}
  /* 可折叠内容区：绝对定位浮在地图之上，从 rail 左侧展开（不挤压地图/左栏）*/
  #sideContent{position:absolute;top:0;right:var(--rail-w);width:var(--pane-w);height:100%;
    background:var(--panel);border-left:1px solid var(--line);
    display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.28)}
  #side.collapsed #sideContent{display:none}
  /* ---- left panel (船体状态) ---- */
  #sideLeft{width:340px;min-width:340px;height:100%;background:var(--panel);
    border-right:1px solid var(--line);display:flex;flex-direction:column}
  #sideContent header,#sideLeft header{padding:12px 14px;border-bottom:1px solid var(--line)}
  #sideContent header h1,#sideLeft header h1{font-size:15px;margin:0;letter-spacing:.3px}
  #sideContent header p,#sideLeft header p{margin:4px 0 0;font-size:11px;color:var(--muted)}
  /* 内容区标题条：显示当前功能名 + 收起按钮 */
  #sideContentHead{flex:none;display:flex;align-items:center;gap:8px;padding:11px 14px;
    border-bottom:1px solid var(--line)}
  #sideContentHead h1{flex:1;font-size:15px;margin:0;letter-spacing:.3px}
  #sideContentHead .collapseBtn{flex:none;padding:4px 9px}
  .tabpane{display:none}
  .tabpane.on{display:block}
  .soon{font-size:11px;color:var(--faint);text-align:center;padding:14px 8px;line-height:1.6;
    border:1px dashed var(--line);border-radius:8px;margin-top:8px}
  /* ---- 归属标签（层徽标）---- */
  .lbadge{display:inline-block;font-size:9px;padding:0 5px;border-radius:8px;line-height:15px;
    font-weight:600;margin-left:6px;vertical-align:middle;border:1px solid transparent}
  /* 静障碍类标签用红、动目标类标签用绿，与地图上对象颜色一致 */
  .lbadge.shared,.lbadge.sceneobs{color:var(--danger);border-color:rgba(var(--danger-rgb),.42);background:rgba(var(--danger-rgb),.12)}
  .lbadge.scene,.lbadge.realtime{color:var(--tgt);border-color:rgba(var(--tgt-rgb),.42);background:rgba(var(--tgt-rgb),.12)}
  /* 暂停中的动目标：橙，与「暂停」按钮 button.warn 同色，两处指的是同一件事 */
  .lbadge.paused{color:var(--warn);border-color:rgba(var(--warn-rgb),.42);background:rgba(var(--warn-rgb),.12)}
  /* 推演复现里实时动目标的两种「不在下发」态：未开始/已结束，都用中性灰，
     与橙色的「暂停」区分开——暂停仍在下发，这两种不发 */
  .lbadge.wait,.lbadge.ended{color:var(--muted);border-color:var(--line);background:transparent}
  /* ---- 场景/库 归属分段 ---- */
  .ownerbar{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
  .ownerbar .ol{font-size:11px;color:var(--muted);flex:none}
  /* ---- 场景编辑 子选项分段（共用静障碍/场景/实时动目标）---- */
  /* 场景编辑：竖列三个入口菜单（点入口才进入其内容）*/
  #editSubTabs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
  #editSubTabs.hidden{display:none}
  #editSubTabs .stab{display:flex;align-items:center;gap:8px;padding:13px 12px;cursor:pointer;user-select:none;
    font-size:13px;font-weight:600;color:var(--txt);background:var(--panel2);
    border:1px solid var(--line);border-radius:8px;transition:.15s}
  #editSubTabs .stab::after{content:'›';margin-left:auto;color:var(--muted);font-size:16px;font-weight:400}
  #editSubTabs .stab:hover{border-color:var(--accent2);color:var(--accent2)}
  .subpane{display:none}
  .subpane.on{display:block}
  /* 子面板顶部返回栏（← 回到入口菜单）*/
  .subpane-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .subpane-head .back{flex:none;padding:4px 9px}
  .subpane-head .nm{font-size:14px;font-weight:600;color:var(--txt)}
  .iconbtn{flex:none;width:34px;padding:6px 0;font-size:16px;line-height:1}
  .disabledpane{opacity:.5;pointer-events:none}