/* 北京公交（人追着车跑嘿）三个页面共用的样式
   2026-09-19 从 bj.html 里抽出来的（首页 / 线路页 / 车号页 共用）
   视觉语言对齐主站的「公交车来了」：居中渐变标题 + 白卡模块 */
:root{--bj:#1a73e8;--ink:#1a1a2e;--mut:#80868b;--line:#eceef2;--warn:#e65100;--bad:#c5221f}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#f5f6f8}
.app{max-width:760px;margin:0 auto;padding:20px 20px 44px}

/* 标题区 */
.header{text-align:center;padding:16px 0 14px;position:relative}
.header h1{font-size:26px;margin:0;background:linear-gradient(135deg,#1a73e8,#6c5ce7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.header .sub{font-size:13px;color:#1a1a2e;margin-top:5px}
.home-link{position:absolute;right:0;top:18px;font-size:13px;color:var(--bj);text-decoration:none}
.home-link:hover{text-decoration:underline}

/* 模块白卡 */
.module{background:#fff;border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.module-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.module-title{font-size:15px;font-weight:700}
.module-sub{font-size:11px;font-weight:400;color:#9aa0a6}
.module-link{font-size:12px;color:var(--bj);text-decoration:none;font-weight:500;cursor:pointer}

/* 搜索与列表 */
.search{display:flex;gap:8px}
.search input{flex:1;padding:11px 13px;border:1px solid #dfe3e8;border-radius:10px;font-size:16px;outline:none;min-width:0}
.search input:focus{border-color:var(--bj);box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.search button{padding:0 18px;border:0;border-radius:10px;background:var(--bj);color:#fff;font-size:15px;font-weight:600;cursor:pointer;flex-shrink:0}
.lines{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.line-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fafbfc;border:1px solid var(--line);cursor:pointer;font-size:13px;text-decoration:none;color:inherit}
.line-item:hover{background:#f0f6ff;border-color:#d7e6fb}
.line-item .no{font-weight:700;color:var(--bj);flex:0 0 auto;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-item .ends{flex:1;min-width:0;color:#5f6368;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 每条线路的实时在线车数（2026-09-22，bj.html 首页用；数据来自 /api/bjc/line-counts）*/
.line-item .online{margin-left:auto;font-size:11px;font-weight:600;color:#1a73e8;white-space:nowrap;flex-shrink:0}
.line-item .online.zero{color:#c4c7cc;font-weight:400}

/* 线路号分组：5 个大类各占一行，行内是细分组胶囊（空的不显示）
   胶囊写短标签、完整名字在 title 上 —— 目标是 5 行一屏看完、不出滚动条 */
.groups{margin-top:10px;max-height:212px;overflow-y:auto;padding-right:2px}
.grp-sec{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:3px 0}
.grp-sec + .grp-sec{border-top:1px dashed #f1f3f5}
.grp-lab{flex:0 0 58px;font-size:11px;color:#9aa0a6;line-height:1.4}
.groups a{font-size:12px;padding:3px 9px;border-radius:20px;border:1px solid #dfe3e8;color:#5f6368;text-decoration:none;background:#fff;cursor:pointer;white-space:nowrap}
.groups a.on{background:var(--bj);border-color:var(--bj);color:#fff;font-weight:600}
.groups a:hover{border-color:var(--bj)}
.groups a .n{font-size:10px;opacity:.65;margin-left:4px}

/* 线路详情头部 */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:8px 14px;border-radius:12px;background:linear-gradient(135deg,#1a73e8,#4d7fe8);color:#fff;font-size:22px;font-weight:800;letter-spacing:.5px;box-shadow:0 3px 10px rgba(26,115,232,.28)}
.lmeta{font-size:12.5px;color:#5f6368;line-height:1.9}
.lmeta b{color:var(--ink);font-size:13.5px}
.iconbtn{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid #dfe3e8;color:#5f6368;cursor:pointer;background:#fff;text-decoration:none}
.iconbtn:hover{border-color:var(--bj);color:var(--bj);background:#f0f6ff}
/* 地图：容器 + 图层开关（对齐主站「公交车来了」详情页的圆按钮） */
.map-wrap{position:relative;margin-top:12px}
#map{width:100%;height:340px;border-radius:12px;overflow:hidden;background:#eef0f3}
.map-tgs{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:20}
.map-tg{width:38px;height:38px;border:none;border-radius:50%;background:#fff;color:#9aa0a6;font-size:11px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);padding:0;line-height:1;transition:all .15s}
.map-tg:hover{color:var(--bj)}
.map-tg.on{background:var(--bj);color:#fff}
/* 地图左上角的「车标视图」切换（大头/车牌/自编/全部）。
   ⚠️ 放左上不放左下 —— 高德的 logo 与比例尺在左下，会打架
   ⚠️ 这是套**独立于站点线路图 .rd-tabs 的**第二套视图状态（MAPV vs RD_VIEW） */
.map-cv{position:absolute;left:10px;top:10px;display:flex;gap:3px;z-index:20;background:rgba(255,255,255,.94);border-radius:9px;padding:3px;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.map-cvv{font-size:11px;font-weight:600;color:#5f6368;border-radius:7px;padding:3px 8px;cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap;line-height:1.2}
.map-cvv:hover{color:var(--bj)}
.map-cvv.on{background:var(--bj);color:#fff}
/* 地图上的站名标签：用 DOM Marker 画（比 AMap.Text 可控，也不会被 canvas 层压住） */
.station-label{display:inline-block;background:rgba(255,255,255,.9);border:1px solid #dfe3e8;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:600;color:#3c4043;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.station-label.term{background:var(--bj);border-color:var(--bj);color:#fff;font-weight:700}
/* 车号后面的车牌 / 车型小标（自编号 + 车牌 + 车型 一起给出来） */
.plate-tag{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:#1a1a2e;background:#eef2f7;border-radius:4px;padding:1px 5px;letter-spacing:.3px;white-space:nowrap}
.model-tag{font-size:10.5px;color:#5f6368;background:#f4f6f8;border-radius:4px;padding:1px 5px;display:inline-block;vertical-align:middle;word-break:break-all}
.model-tag.none{color:#c0c4c9}

/* 车队概况 */
.fl{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.fl .fln{flex:0 0 172px;color:#3c4043;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl .flb{flex:1;height:14px;background:#f1f3f4;border-radius:7px;overflow:hidden;min-width:40px}
.fl .flb i{display:block;height:100%;background:linear-gradient(90deg,#1a73e8,#6c5ce7);border-radius:7px}
.fl b{flex:0 0 30px;text-align:right;color:var(--bj);font-weight:700}
.flsum{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.flsum span{font-size:11.5px;background:#f4f6f8;color:#5f6368;border-radius:10px;padding:2px 9px}
.flsum span b{color:#1a1a2e}

/* 在途车辆卡片 */
.buslist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.bus{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:#fafbfc;border:1px solid var(--line);font-size:13px}
.bus .dot{width:9px;height:9px;border-radius:50%;background:#34a853;flex-shrink:0;box-shadow:0 0 0 3px rgba(52,168,83,.16)}
.bus .car{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#1a1a2e;min-width:72px}
.bus .cr{font-size:11px;padding:2px 8px;border-radius:10px;background:#e8f5e9;color:#1e8e3e;font-weight:600;flex-shrink:0}
.bus .cr.c2{background:#fff3e0;color:var(--warn)}
.bus .cr.c3{background:#fce8e6;color:var(--bad)}
.bus .loc{color:#5f6368;font-size:12px;margin-left:auto;text-align:right;line-height:1.5}
.bus .loc em{font-style:normal;color:var(--bj);font-weight:600}
.bus .vinfo{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.bus .plate{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;color:#1a1a2e;background:#eef2f7;border-radius:5px;padding:2px 7px;letter-spacing:.5px}
/* ⚠️ 车型**不要截断加省略号** —— 用户 2026-09-20 明确说「有些没显示全，出省略号了，这不好」
   ⇒ 去掉 max-width/ellipsis，长车型号让它换行显示（完整优先于整齐） */
.bus .model{font-size:11px;color:#5f6368;background:#f4f6f8;border-radius:5px;padding:2px 7px;word-break:break-all}
.bus .model.none{color:#c0c4c9;background:#fafbfc}

/* 站点时间轴 */
.tl{margin-top:14px}
.tl .st{position:relative;padding:7px 0 7px 30px;font-size:13px;color:#3c4043;border-left:2px solid #e8eaed;margin-left:5px}
.tl .st:last-child{border-left-color:transparent}
.tl .st .pt{position:absolute;left:-6.5px;top:12px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--bj)}
.tl .st.first .pt,.tl .st.lastst .pt{background:var(--bj);width:13px;height:13px;left:-7.5px}
.tl .st .ord{display:inline-block;min-width:22px;color:#9aa0a6;font-size:11.5px}
.tl .st .buses{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
.tl .st .b{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#e8f0fe;color:#1a73e8;padding:2px 7px;border-radius:8px;font-weight:600}
.tl .st .b.c2{background:#fff3e0;color:var(--warn)}
.tl .st .b.c3{background:#fce8e6;color:var(--bad)}

/* ── 站点详情（点站点展开）+ 今日班次（2026-09-20 加）───────────────── */
.tl .st{cursor:pointer}
.tl .st:hover{background:#f8fbff;border-radius:8px}
.tl .st .st-more{font-size:10.5px;color:#b0b6bd;margin-left:6px;opacity:0;transition:opacity .15s}
.tl .st:hover .st-more{opacity:1}
.tl .stx{margin-top:8px;padding:10px 12px;background:#f7f9fc;border-radius:9px;border:1px solid var(--line);cursor:default}
.sb-lab{font-size:11.5px;font-weight:600;color:#5f6368;margin:10px 0 6px}
.sb-lab:first-child{margin-top:0}
.chip.sm{font-size:11px;padding:2px 8px}
.pass-list{display:flex;flex-wrap:wrap;gap:5px}
.ps{font-size:11px;background:#e8f0fe;color:#1a73e8;padding:2px 7px;border-radius:8px;font-family:ui-monospace,Menlo,monospace}
.ps i{font-style:normal;opacity:.75}
.ps.c2{background:#fff3e0;color:var(--warn)}
.ps.c3{background:#fce8e6;color:var(--bad)}
.gapbars{display:flex;align-items:flex-end;gap:2px;height:56px;padding:4px 0;margin-bottom:4px}
.gapbars span{flex:1;min-width:3px;background:linear-gradient(180deg,#4d7fe8,#1a73e8);border-radius:2px 2px 0 0}
.mut{color:#9aa0a6;font-size:10.5px}
a.carlink{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#1a1a2e;text-decoration:none}
a.carlink:hover{color:var(--bj)}
/* 无轨迹底料时的提示（部分线路反方向上游没有轨迹） */
.geo-warn{margin-top:8px;padding:8px 12px;border-radius:9px;background:#fff8e1;border:1px solid #ffe082;color:#8d6e00;font-size:12px;line-height:1.6}
/* 时刻表（每日逐站时刻）+ 驻车地点（2026-09-20 加） */
.mut2{color:#9aa0a6;font-size:11px}
.tt-station{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-size:12.5px;color:#5f6368;flex-wrap:wrap}
.tt-station select{padding:4px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;max-width:60%;background:#fff;color:#3c4043}
.tt-t{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--bj)}
table.rec td .mut2,table.rec .tt-t.mut2{font-weight:400}
#ttInfo table.rec{font-size:12.5px}
#ttInfo table.rec th{position:sticky;top:0;background:#f8f9fa;z-index:1}
/* 头部信息胶囊 + 运行图（甘特）（2026-09-20 优化「详情页太空」） */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lc{font-size:11.5px;background:#eef2f7;color:#3c4043;border-radius:12px;padding:3px 10px;font-weight:600;white-space:nowrap}
.gantt{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafbfc}
.gt-row{display:flex;align-items:center;gap:8px;height:19px;padding:0 8px;border-top:1px solid #f1f3f4}
.gt-row:first-child{border-top:none}
.gt-head{height:17px;background:#f4f6f8}
.gt-car{flex:0 0 56px;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:#1a1a2e;text-decoration:none;text-align:right}
a.gt-car:hover{color:var(--bj)}
.gt-track{flex:1;position:relative;height:100%}
.gt-head .gt-track i{position:absolute;top:2px;font-style:normal;font-size:9.5px;color:#9aa0a6;transform:translateX(-50%)}
.gt-track .gt-seg{position:absolute;top:5px;height:9px;background:linear-gradient(90deg,#4d7fe8,#1a73e8);border-radius:4px}
.gt-track .gt-seg:hover{background:var(--warn)}

/* ── 站点：横向线路图（仿主站「公交车来了」详情页，2026-09-20）──────────
   一条横线串起所有站、站名**竖排**、在途车叠在站点上方、左右可滚 */
.rd-scroll{overflow-x:auto;padding:10px 6px 8px;border:1px solid var(--line);border-radius:12px;background:#fafbfc}
.rd-row{display:flex;min-width:max-content;align-items:flex-start}
.rd-station{display:flex;flex-direction:column;align-items:center;width:46px;cursor:pointer;border-radius:8px;transition:background .15s}
.rd-station:hover{background:#eef4ff}
.rd-station.on{background:#e8f0fe;box-shadow:inset 0 0 0 1px #c7dbff}
.rd-buses{display:flex;flex-direction:column;gap:2px;min-height:36px;justify-content:flex-end;align-items:center}
.rd-b{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1}
.rd-b img{width:30px;height:20px;object-fit:contain;display:block}
.rd-b i{font-style:normal;font-size:9px;font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#fff;background:rgba(20,25,35,.5);border-radius:3px;padding:0 2px;margin-top:-3px}
.rd-b.noimg i{background:#34a853;padding:1px 4px;font-size:9.5px;margin-top:0}
.rd-b.c2.noimg i{background:var(--warn)}
.rd-b.c3.noimg i{background:var(--bad)}
.rd-line{position:relative;height:14px;width:100%}
.rd-line::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,#e8eaed,#d0d4d8,#e8eaed);transform:translateY(-50%);border-radius:1px}
.rd-dot{width:8px;height:8px;border-radius:50%;background:var(--bj);border:2px solid #fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:0 1px 3px rgba(26,115,232,.35)}
.rd-station.term .rd-dot{width:11px;height:11px;box-shadow:0 1px 5px rgba(26,115,232,.55)}
.rd-station.term .rd-name{color:var(--bj);font-weight:700}
.rd-name{writing-mode:vertical-rl;font-size:11.5px;color:#3c4043;font-weight:500;letter-spacing:9px;min-height:104px;margin-top:4px;line-height:1.15}
.rd-ord{font-size:9px;color:#b0b6bd;margin-top:2px}
.stx-hd{font-size:13.5px;font-weight:700;color:#1a1a2e;margin-bottom:8px}
/* 站点线路图的车标视图切换（仿主站的多视图，2026-09-20） */
.rd-tabs{display:inline-flex;gap:4px;margin-left:2px}
.rd-tab{font-size:11px;font-weight:600;color:#5f6368;background:#f4f6f8;border:1px solid var(--line);border-radius:8px;padding:2px 8px;cursor:pointer;text-decoration:none;transition:all .15s}
.rd-tab:hover{border-color:var(--bj);color:var(--bj)}
.rd-tab.on{background:var(--bj);border-color:var(--bj);color:#fff}
/* 配车卡片墙（仿主站「公交车来了」的 fleet-card，2026-09-20） */
.fleet-wall{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:90px;padding:6px 9px;background:#fff;border:1px solid var(--line);border-radius:9px;text-decoration:none;transition:all .15s}
.fc:hover{border-color:var(--bj);background:#f0f6ff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(26,115,232,.12)}
.fc b{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;color:#1a1a2e;white-space:nowrap}
.fc img{width:78px;height:54px;object-fit:contain;display:block;margin-bottom:3px}
.fc /* 配车卡片上的自编号（2026-09-22 加：自编总是显示 ✓）*/
.fc-car{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;color:#3c4043;white-space:nowrap;letter-spacing:.2px}
.fc-car i{font-style:normal;font-weight:400;color:#9aa0a6;font-size:9.5px;margin-right:2px}
.fc-model{font-size:10px;color:#8a9099;text-align:center;line-height:1.3;word-break:break-all}
/* ⚠️ 别用 `.fc span{}` 这种通配选择器 —— 会连车牌内部的 .plate-pre/.plate-body 一起选中，
      给它们套上 max-width:98px + 省略号 ⇒ 车牌被截断、样式全乱 ✗（2026-09-20 就是这原因）
   ⇒ 一律用具体类名 .fc-model ✓ */
.fc .bus-plate{margin-bottom:3px}
.fc.none{background:#fafbfc}
.fc.none b{color:#b0b6bd;font-weight:600}

/* ── 线路详情页的模块骨架（2026-09-20 重排：站点线路图提到地图之上）──────
   统一成「区块」：细分割线 + 一行标题（图标 + 标题 + 副标 + 小提示） */
.lc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lc-head-main{flex:1;min-width:160px}
.lc-head-act{display:flex;gap:8px;align-items:center}
.sec{margin-top:18px;padding-top:16px;border-top:1px solid #eef1f4}
.sec:first-of-type{border-top:none;padding-top:0;margin-top:12px}
.sec-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.sec-hd b{font-size:14.5px;color:#1a1a2e;font-weight:700}
.sec-sub{font-size:12px;color:#5f6368}
.sec-tip{font-size:11.5px;color:#9aa0a6}
/* 地图上的车标：优先用**车型大头照**，没图的车型自动退回圆形车号点（2026-09-20） */
.map-car{position:relative;width:36px;height:28px}
.map-car img{width:36px;height:28px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.mc-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:30px;height:24px;padding:0 2px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
/* 「车牌」视图：车牌比 36px 的框宽得多，绝对定位居中，让它自然溢出两边（别裁） */
.map-car.v-plate .bus-plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* 「全部」视图：大头照 + 底下挂一枚小的自编标（光有图认不出是哪辆车）
   ⚠️ 这里**故意不给 img 加 margin-top** —— 加了会让大头照整体上移、
      "全部"档的车标就比其它档偏 6px（实测）✗
      大头照就该正对着车的真实位置，小标往下挂是它自己的事 */
.map-car.v-all .mc-dot{top:auto;bottom:-10px;transform:translateX(-50%);min-width:26px;height:15px;font-size:9px;border-width:1.5px;padding:0 3px}
/* 在途车辆卡片左侧的车头照 */
.buslist .bus .bimg{width:46px;height:34px;object-fit:contain;flex-shrink:0}

/* ── 车牌：**严格照搬主站「公交车来了」的 .bus-plate**（2026-09-20）────────────
   ⚠️ 用户明确要求「车牌严格模仿乌市，不要自己加戏」⇒ 类名 / 数值 / 字体栈 / 渐变角度
      逐字照抄，包括容易漏的 letter-spacing:-5px（车牌字体自带宽字距，要压这么狠才对）
      和 font-weight:200、min-height:24px、padding:2px 1px ✓ */
@font-face{font-family:plate;src:url(/plates.otf)}
.bus-plate{display:inline-flex;align-items:center;gap:0;border-radius:3px;border:1.5px solid #222;font-weight:200;font-size:14px;font-family:plate,'Franklin Gothic Heavy','Arial Black','PingFang SC','Microsoft YaHei',sans-serif;flex-shrink:0;line-height:.95;overflow:hidden;color:#111;letter-spacing:-5px;cursor:pointer;min-height:24px}
.bus-plate.yellow{background:linear-gradient(180deg,#f8b830,#e0991a);padding:2px 1px}
.bus-plate.yellow span{padding:1px 0}
.bus-plate.green{align-items:stretch}
.bus-plate.green .plate-pre{background:linear-gradient(180deg,#f8b830,#e0991a);padding:2px 1px;display:inline-flex;align-items:center}
.bus-plate.green .plate-body{background:linear-gradient(180deg,#00b85a,#00a650);padding:2px 1px;display:inline-flex;align-items:center}
/* 小尺寸变体（列表里用）：只等比缩，其余同理照旧 */
.bus-plate.sm{font-size:11px;min-height:19px;letter-spacing:-4px;border-width:1px}
/* ⚠️ 车牌里的「省份简称 / 号码」绝对不能换行 ——
   站点线路图的站点只有 38px 宽，车牌塞进去会被压着换行，京A 就变成竖的了 ✗
   （2026-09-20 用户报的）⇒ 强制 nowrap + 车牌视图下把站点放宽 */
.bus-plate,.bus-plate .plate-pre,.bus-plate .plate-body{white-space:nowrap}
#tl.rd-plate-mode .rd-station{width:82px}
#tl.rd-plate-mode .rd-name{letter-spacing:3px}
/* ── 按车型找车（2026-09-20）—— 想坐铰接/三轴，看哪条线在跑 ────────── */
.kind-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.kind-tab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#3c4043;background:#f4f6f8;border:1px solid var(--line);border-radius:10px;padding:5px 12px;cursor:pointer;text-decoration:none;transition:all .15s}
.kind-tab:hover{border-color:var(--bj)}
.kind-tab span{font-size:11px;color:#9aa0a6;font-weight:400}
.kind-tab.on{background:var(--bj);border-color:var(--bj);color:#fff}
.kind-tab.on span{color:rgba(255,255,255,.82)}
.kind-hint{font-size:11.5px;color:#9aa0a6;margin-bottom:10px}
.bm-model{padding:9px 11px;border-radius:9px;background:#fafbfc;border:1px solid var(--line);margin-bottom:8px}
.bm-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.bm-hd b{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#1a1a2e}
.bm-len{font-size:11px;background:#e8f0fe;color:var(--bj);border-radius:8px;padding:1px 7px;font-weight:600}
.bm-n{font-size:11px;color:#9aa0a6;margin-left:auto}
.bm-nick{font-size:11.5px;font-weight:700;background:#fff3e0;color:#e65100;border-radius:8px;padding:1px 8px;white-space:nowrap}
.bm-nick.guess{background:#f1f3f4;color:#9aa0a6;font-weight:600}
/* 车型昵称小标（线路页在途车辆 / 配车卡片上跟随车型显示） */
.nick-tag{font-style:normal;font-weight:700;background:#fff3e0;color:#e65100;border-radius:6px;padding:0 5px;margin-right:4px;font-size:10.5px;white-space:nowrap}
.nick-tag.guess{background:#f1f3f4;color:#9aa0a6;font-weight:600}
/* 轴型 / 双层 标记（用户要求：三轴、双层要标出来） */
.axis-tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:0 6px;margin-right:4px;white-space:nowrap}
.axis-tag.jie{background:#e8f0fe;color:#1a73e8}    /* 铰接 */
.axis-tag.san{background:#e6f4ea;color:#137333}    /* 三轴 */
.axis-tag.dbl{background:#f3e8fd;color:#7b1fa2}    /* 双层 */
/* 「按车型 / 按线路」两个视图的切换 */
.bm-tabs{display:flex;gap:0;margin-bottom:10px;border-bottom:1px solid var(--line)}
.bm-tab{font-size:13px;font-weight:600;color:#5f6368;padding:7px 14px;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.bm-tab:hover{color:var(--bj)}
.bm-tab.on{color:var(--bj);border-bottom-color:var(--bj)}
.bm-rk{flex:0 0 20px;text-align:right;font-size:11px;color:#9aa0a6;font-weight:600}
.bm-model .bm-hd a{color:#1a1a2e;font-weight:700;font-size:13px}
.bm-model .bm-hd a:hover{color:var(--bj)}

/* ══ 手机适配（2026-09-20）══════════════════════════════════════════════
   之前一条 @media 都没有 ⇒ 手机上表格挤爆、首跑事件行溢出、配车卡片过宽 ✗
   下面只调「窄屏真会坏」的地方：留白 / 字号 / 表格横滑 / 事件行换行 / 地图高度
   （横向线路图 `.rd-scroll` 本身就能左右滑，不用特别处理） */
@media (max-width: 640px){
  .app{max-width:100%;padding:12px 12px 32px}
  .header h1{font-size:19px}
  .header .sub{font-size:12px}
  .home-link{font-size:12px}
  .nav-bar{gap:6px;margin-bottom:10px}
  .nav-btn{padding:9px 6px;font-size:12.5px;border-radius:10px}
  .module{padding:14px 12px;border-radius:12px;margin-bottom:12px}
  .module-title{font-size:14px}
  .module-sub{font-size:11px}
  .badge{font-size:20px;padding:5px 11px}
  .lmeta{font-size:13px}
  .lc{font-size:11px;padding:2px 8px}
  .hint-sm{font-size:11px}
  /* 地图矮一点，别占掉一屏 */
  #map{height:260px}
  .map-tgs{right:8px;top:8px;gap:5px}
  .map-tg{width:32px;height:32px;font-size:10px}
  /* 车标视图切换：窄屏再小一档（4 个按钮要跟地图同宽） */
  .map-cv{left:8px;top:8px;padding:2px;gap:2px}
  .map-cvv{font-size:10px;padding:3px 6px}
  /* ⛔ 别在这里缩 .map-car / .mc-dot ——
     JS 里的车标偏移是写死的 `AMap.Pixel(-18,-14)`（正好 36×28 的一半），
     一改尺寸车标就整体偏掉，而且**光看代码看不出来**（踩坑 228）。
     真要缩，就得让 JS 按 CSS 实际尺寸算 offset，别两处各写一个数。 */
  /* 站点横向线路图：站点与站名都收一档 */
  .rd-scroll{padding:8px 4px 6px}
  .rd-station{width:38px}
  .rd-name{font-size:10.5px;letter-spacing:5px;min-height:88px}
  .rd-b img{width:26px;height:17px}
  .rd-b i{font-size:8.5px}
  .rd-dot{width:7px;height:7px}
  /* 表格：允许横向滑动，别把整页撑破 */
  .module,#vehInfo,#carRes,#histInfo,#schedInfo,#ttInfo,#depotInfo,#bmBody{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.rec{font-size:11.5px}
  table.rec th,table.rec td{padding:6px 6px}
  table.rec th{white-space:nowrap}
  /* 首跑事件行：允许换行；空间不够就把 NEW 徽章让到下一行 */
  .ev{flex-wrap:wrap;gap:6px;padding:7px 9px}
  .ev .t{flex:0 0 54px;font-size:10.5px}
  .ev .nw{margin-left:0}
  /* 配车卡片墙：卡片与图都小一点 */
  .fleet-wall{gap:5px}
  .fc{min-width:74px;padding:5px 6px}
  .fc img{width:62px;height:44px}
  .fc .fc-model{max-width:80px}
  /* ⛔ 窄屏的「在途车辆」卡片原来会**横向溢出**：实测 390px 屏上
     .bus 可视宽 340 但内容宽 452 ⇒ 车牌+昵称+车型超出右边界 89px、
     位置信息超出 111px（整个在屏幕外，要横向滑才看得到）✗
     ⚠️ 光断言 `.model` 自己的 scrollWidth 是**查不出来**的 —— 元素没被裁，
        只是被挤出了容器（见 CLAUDE.md 226 的补充）
     ⇒ 窄屏改成换行布局：位置独占一行，车型那一块允许整体换行 ✓ */
  .bus{flex-wrap:wrap;gap:6px 8px;padding:9px 10px}
  .bus .vinfo{flex-shrink:1;min-width:0;flex-wrap:wrap}
  .bus .car{min-width:52px}
  .bus .loc{margin-left:0;flex-basis:100%;text-align:left}
  /* 运行图：车号列收窄 */
  .gt-car{flex:0 0 44px;font-size:10px}
  .gt-track .gt-seg{height:8px;top:6px}
  .gt-row{height:17px}
  /* 各类标签 */
  .kind-tab{font-size:11.5px;padding:4px 9px}
  .bm-tab{font-size:12.5px;padding:6px 11px}
  .chip{font-size:11px;padding:3px 9px}
  .chip.sm{font-size:10.5px}
  .chips{gap:5px}
  /* 车牌组件在窄屏再小一档 */
  .bus-plate{font-size:12px;min-height:21px;letter-spacing:-4px}
  .bus-plate.sm{font-size:10px;min-height:18px;letter-spacing:-3.5px}
  #vehInfo table.rec th{width:70px !important;font-size:11px}
  .stx{padding:9px 10px}
  .ev .vinfo2 .model-tag{max-width:80px}
  .ev .vinfo2 .bjimg{width:24px;height:18px}
  .chip .bjimg{width:20px;height:15px}
  .sec{margin-top:14px;padding-top:13px}
}
/* 更窄的（iPhone SE 这类 ≤380px）再压一档 */
@media (max-width: 380px){
  .app{padding:10px 10px 26px}
  .nav-btn{font-size:11.5px;padding:8px 4px}
  .rd-station{width:34px}
  .rd-name{font-size:10px;letter-spacing:3px;min-height:78px}
  .fc{min-width:68px}
  .fc img{width:56px;height:40px}
  .badge{font-size:18px}
}

/* 表格（车号查询） */
table.rec{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
table.rec th{text-align:left;color:#9aa0a6;font-weight:500;font-size:11.5px;padding:6px;border-bottom:1px solid #eceef2}
table.rec td{padding:6px;border-bottom:1px solid #f5f6f8}
table.rec tr:hover td{background:#fafbfc}

/* 杂项 */
.no-data{padding:16px;text-align:center;color:#9aa0a6;font-size:13px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #dfe3e8;border-top-color:var(--bj);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.gate{background:#fff;border-radius:14px;padding:34px 20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.gate h2{margin:0 0 14px;font-size:18px}
.gate input{width:100%;padding:11px 13px;border:1px solid #dfe3e8;border-radius:10px;font-size:14px;outline:none;text-align:center}
.gate button{margin-top:12px;padding:10px 24px;border:0;border-radius:10px;background:var(--bj);color:#fff;font-weight:600;cursor:pointer}
.nav-bar{display:flex;gap:8px;margin-bottom:14px}
.nav-btn{flex:1;padding:12px;background:#fff;border-radius:12px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;color:#1a1a2e;box-shadow:0 1px 3px rgba(0,0,0,.06);border:2px solid transparent;transition:all .15s}
.nav-btn:hover{background:#e8f0fe;border-color:var(--bj);color:var(--bj)}
.nav-btn.blue{background:var(--bj);color:#fff}
.nav-btn.blue:hover{background:#1557b0;color:#fff}

/* ── 上线动态页（bj-new.html）───────────────────────────────────────── */
.hint-sm{font-size:11.5px;color:#9aa0a6;line-height:1.7;margin:0 0 10px}
.sub-lab{font-size:11.5px;font-weight:600;color:#5f6368;margin:14px 0 7px}
.sub-lab:first-child{margin-top:2px}

/* 首跑事件行 */
.ev{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:9px;background:#fafbfc;border:1px solid var(--line);font-size:12.5px}
.ev + .ev{margin-top:4px}
.ev .t{flex:0 0 62px;color:#9aa0a6;font-size:11px;font-variant-numeric:tabular-nums}
.ev .car{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#1a1a2e;text-decoration:none;min-width:56px}
.ev .car:hover{color:var(--bj)}
.ev .arw{color:#c0c4c9;font-size:11px}
.ev .ln{color:var(--bj);font-weight:700;text-decoration:none}
.ev .ln:hover{text-decoration:underline}
.ev .nw{margin-left:auto;font-size:10px;font-weight:700;background:#e8f5e9;color:#1e8e3e;padding:1px 7px;border-radius:9px}
/* 车号后面的「车牌 + 车型」（用户要求别只写自编号） */
.ev .vinfo2{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0}
.ev .vinfo2 .model-tag{max-width:104px}
/* 上线动态页的车辆大头照（跟线路页配车卡片同一套图） */
.ev .vinfo2 .bjimg{width:28px;height:21px;object-fit:contain;flex-shrink:0}
.chip .bjimg{width:24px;height:18px;object-fit:contain;flex-shrink:0}
.chip .vinfo2{display:inline-flex;align-items:center;gap:4px}
.chip .plate-tag{background:#fff;font-size:10.5px;padding:0 4px}
.chip .model-tag{background:rgba(255,255,255,.75);font-size:10px;max-width:88px;padding:0 4px}

/* 药丸（新车 / 首跑名单） */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:ui-monospace,Menlo,monospace;font-weight:600;background:#f4f6f8;color:#3c4043;border:1px solid var(--line);border-radius:16px;padding:4px 11px;text-decoration:none}
.chip i{font-style:normal;font-family:inherit;font-weight:400;font-size:11px;color:var(--bj)}
.chip:hover{border-color:var(--bj);background:#f0f6ff}
.chip.new{background:#e8f5e9;border-color:#c8e6c9;color:#1e8e3e}
.chip.new i{color:#2e7d32}

/* 跨线运营折叠组 */
.xg{padding:9px 11px;border-radius:9px;background:#fafbfc;border:1px solid var(--line);font-size:12.5px;margin-top:6px;cursor:pointer}
.xg:hover{border-color:#d7e6fb;background:#f8fbff}
.xg .xgh{display:flex;align-items:center;gap:8px}
.xg .pr{color:#1a1a2e;font-weight:700;font-family:ui-monospace,Menlo,monospace}
.xg .cnt{margin-left:auto;color:var(--bj);font-weight:700;font-size:12px;white-space:nowrap}
.xg .cars{display:none;flex-wrap:wrap;gap:4px;margin-top:8px}
.xg.open .cars{display:flex}
.xg .cars span{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#e8f0fe;color:#1a73e8;padding:2px 8px;border-radius:9px;cursor:pointer}
.xg .cars span:hover{background:var(--bj);color:#fff}

/* 排行序号（复用 .fl 条形图）*/
.fl .fln.rank{flex:0 0 20px;text-align:right;color:#9aa0a6;font-size:11px;font-weight:600}
.fl .fln.rank + .fln{flex:0 0 128px}

/* 上线历史（车号页）：月份热力条 */
.hm{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.hm i{display:block;width:13px;height:13px;border-radius:3px;background:#eef1f5}
.hm i.l1{background:#cfe0f8}
.hm i.l2{background:#9cc2f0}
.hm i.l3{background:#5c9ae8}
.hm i.l4{background:var(--bj)}
.hm b{font-size:11px;color:#5f6368;font-weight:600;align-self:center;margin:0 2px}
.hist-line{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.hist-line .hl{flex:0 0 110px;color:#3c4043;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-line .hb{flex:1;height:13px;background:#f1f3f4;border-radius:7px;overflow:hidden;min-width:40px}
.hist-line .hb i{display:block;height:100%;background:linear-gradient(90deg,#1a73e8,#6c5ce7);border-radius:7px}
.hist-line b{flex:0 0 52px;text-align:right;color:var(--bj);font-weight:700;font-size:12px}

/* ════════════════════════════════════════════════════════════════════════════
   「JR 的设计语言 × 北京的格局」主题 —— 2026-09-22
   用户：「你设计的好看点。要符合北京的格局。可以模仿 jr 的设计。」

   ⚠️ **追加式覆盖**：本段以下的规则**只覆盖视觉**，上面一条旧规则都不删
      （bj.css 被北京 5 页共用，删了会连累别的页 ✗）

   设计基调
     · JR 的语言 —— **方正直角**（不搞大圆角/悬浮阴影）· **线路色带**（ラインカラー）·
       **案内標識式导航**（白底 + 底边色条）· 大量留白 · 无衬线 · 字号层级分明
     · 北京的格局 —— **中轴对称** · 灰砖底色 · **宫墙红**点缀 · 直来直去的线条
     · 「运行中」用 **JR 深绿**（在线车数就挂这个色 + 一个圆点）

   配色
     底 #f2f0ec（青灰砖） · 卡 #fff · 墨 #2b2926 · 线 #e3e0da
     主色 **宫墙红 #b4231f** · 运行中 **JR 深绿 #00693e**
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --bj:#b4231f;            /* 主色：宫墙红（原为蓝 #1a73e8）*/
  --ink:#2b2926;           /* 墨灰（原 #1a1a2e）*/
  --mut:#8a857d;
  --line:#e3e0da;
  --paper:#fff;
  --bg:#f2f0ec;
  --jr:#00693e;            /* JR 深绿：运行中 */
  --lc:#b4231f;            /* 线路色带（每条线路一个，由页面 inline 覆盖）*/
}
body{background:var(--bg);color:var(--ink)}
.app{max-width:720px}

/* ── 页头：中轴对称（北京的中轴）+ 一条红线收口 ───────────────────────── */
.header{padding:20px 0 16px}
.header h1{
  font-size:24px;font-weight:800;letter-spacing:3px;
  background:none;background-image:none;background-clip:border-box;-webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--ink);
}
.sub{font-size:12px;color:var(--mut);letter-spacing:1.5px;margin-top:6px}
.header::after{
  content:'';display:block;width:44px;height:3px;background:var(--bj);
  margin:12px auto 0;
}

/* ── 导航：案内標識（白底 + 底边 3px 色条；当前项色条变红）───────────── */
.nav-bar{
  gap:0;border:1px solid var(--line);background:var(--paper);
  border-radius:2px;overflow:hidden;margin-bottom:12px;
}
.nav-btn{
  border-radius:0;border:1px solid transparent;border-bottom:3px solid transparent;
  background:var(--paper);color:var(--mut);font-weight:600;letter-spacing:1px;
  padding:11px 6px;transition:none;
}
.nav-btn:hover{background:#faf9f7;color:var(--ink)}
.nav-btn.blue,.nav-btn.on{
  background:var(--paper);color:var(--bj);
  border-bottom-color:var(--bj);box-shadow:none;
}

/* ── 模块：白卡 + 1px 细线（去掉阴影与大圆角）────────────────────────── */
.module{
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  box-shadow:none;padding:16px;margin-bottom:12px;
}
.module-title{
  font-size:14px;font-weight:700;letter-spacing:.5px;
  border-left:4px solid var(--bj);padding-left:9px;line-height:1.2;
}
.module-sub{font-size:11px;color:var(--mut);letter-spacing:.3px}

/* ── 搜索框：方角 + 聚焦红线 ─────────────────────────────────────────── */
.search input{
  border:1px solid var(--line);border-radius:2px;background:var(--paper);
  color:var(--ink);padding:9px 11px;font-size:13px;
}
.search input:focus{
  outline:none;border-color:var(--bj);box-shadow:0 0 0 2px rgba(180,35,31,.10);
}

/* ── 分组胶囊：方角小牌（白底细边；选中 = 红底白字）───────────────────── */
.grp-lab{color:var(--mut);letter-spacing:.5px}
.grp-sec a{
  border:1px solid var(--line);border-radius:2px;background:var(--paper);
  color:var(--ink);font-size:12px;padding:2px 8px;text-decoration:none;
}
.grp-sec a:hover{border-color:#cfc9c0}
.grp-sec a.on{background:var(--bj);border-color:var(--bj);color:#fff}
.grp-sec a .n{color:var(--mut);font-size:11px;margin-left:5px}
.grp-sec a.on .n{color:rgba(255,255,255,.78)}

/* ── 线路条目：左侧线路色带 + 等宽大号线路号 ─────────────────────────── */
.line-item{
  border:1px solid var(--line);border-left:5px solid var(--lc);
  border-radius:2px;background:var(--paper);
  padding:10px 12px;gap:12px;
}
.line-item:hover{background:#fbfaf8;border-color:#ddd8d0;border-left-color:var(--lc)}
.line-item .no{
  color:var(--ink);font-size:15px;font-weight:800;letter-spacing:1px;
  font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;max-width:170px;
}
.line-item .ends{color:#5f5a52;font-size:12.5px;letter-spacing:.2px}

/* ── 「在线 N 辆」：JR 深绿 + 圆点（运行中指示）───────────────────────── */
.line-item .online{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--jr);font-size:12px;font-weight:700;letter-spacing:.4px;
}
.line-item .online::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--jr);flex:0 0 auto;
}
.line-item .online.zero{color:#c2beb7;font-weight:400}
.line-item .online.zero::before{background:#d8d4cd}

/* ── 页面底部那句说明：改成细线提示 ───────────────────────────────────── */
.no-data{color:var(--mut);letter-spacing:.3px}

/* ════════════════════════════════════════════════════════════════════════════
   高级化（2026-09-22 用户：「不要放这些 emoji…请你给我做成高级的设计」）
   · 页面里的**彩色 emoji 全部去掉**（保留 → ⇄ ← × ⚠ ✓ 这些**排版符号** ✓）
   · 导航改成 **JR 案内標識式「中文 + 英文小字」双层**排版（替代 emoji ✓）
   · 标题换 **宋体**（宋体标题 + 无衬线正文 = 杂志级对比；也贴合"北京的格局"）
   ⚠️ 仍是**追加式覆盖**，不动上面任何旧规则 ✓
   ════════════════════════════════════════════════════════════════════════════ */

/* 导航按钮：上中文 / 下英文小字（字距拉开，像车站的案内標識）*/
.nav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;line-height:1.15;
}
.nav-btn i{
  font-style:normal;font-size:8.5px;font-weight:500;
  letter-spacing:.18em;text-indent:.18em;opacity:.5;
}

/* 标题：宋体 + 大字距（高级感；副题保持无衬线，形成对比）*/
.header h1{
  font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  font-weight:700;font-size:25px;letter-spacing:.22em;text-indent:.22em;
}
.header .sub{
  font-size:11px;letter-spacing:.34em;text-indent:.34em;color:var(--mut);
  text-transform:uppercase;
}
/* 副题加一行极小的英文（排版的"层次"感）*/
.header::before{display:none}
.header h1 + .sub{margin-top:8px}

/* 模块标题：纯文字 + 左红条（去掉 emoji 后靠字重和字距撑住）*/
.module-title{letter-spacing:.06em}
.module-sub{letter-spacing:.02em}