/* ==========================================================================
   城轨综合监控课程智能体集群 · 设计系统
   视觉语言：城轨线网 + 综合监控控制中心（浅色）
   全部尺寸使用 rem，根字号随屏幕自适应：1080P / 2K / 带鱼屏 / 4K / 系统缩放 均保持同一版式
   ========================================================================== */
:root {
  --bg: #F2F4F7;
  --bg-2: #E9EDF2;
  --panel: #FFFFFF;
  --panel-2: #F7F9FB;
  --panel-3: #EEF2F6;
  --line: #E3E8EE;
  --line-2: #D2D9E2;
  --ink: #0E1B2C;
  --ink-2: #2E3D52;
  --ink-3: #5F6E83;
  --ink-4: #95A1B3;
  --navy: #173E7A;
  --navy-2: #0F2B57;
  --navy-3: #0A1F40;
  --blue: #1E6FD9;
  --amber: #F2A007;
  --amber-2: #FFB627;
  --ok: #1F9D55;
  --warn: #EE8A12;
  --bad: #D8383A;
  --c-dispatcher: #173E7A;
  --c-overview: #1597D8;
  --c-equipment: #1F9D55;
  --c-passenger: #EE8A12;
  --c-safety: #D8383A;
  --c-quality: #0E8F86;
  --c-linkage: #173E7A;
  --r: .75rem;
  --r-sm: .5rem;
  --shadow: 0 .0625rem .125rem rgba(14, 27, 44, .05), 0 .375rem 1.25rem -.5rem rgba(14, 27, 44, .12);
  --shadow-lg: 0 .125rem .25rem rgba(14, 27, 44, .05), 0 1.25rem 3rem -1rem rgba(14, 27, 44, .25);
  --font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --num: "Bahnschrift", "DIN Alternate", "DIN", "Segoe UI", "Roboto", sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
  --side: 16.5rem;
  --ease: cubic-bezier(.22, .9, .24, 1);
}

/* 根字号：以 1920×960 可视区为基准（16px），按宽高中较小的比例缩放 */
html { font-size: clamp(12px, min(.8333vw, 1.6667vh), 40px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font); color: var(--ink-2); background: var(--bg); font-size: 1rem;
  -webkit-font-smoothing: antialiased; line-height: 1.6; min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
svg.i { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
::-webkit-scrollbar { width: .5rem; height: .5rem; }
::-webkit-scrollbar-thumb { background: rgba(95, 110, 131, .28); border-radius: 1rem; border: .125rem solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(95, 110, 131, .45); }
::selection { background: rgba(242, 160, 7, .25); }

/* ---------- 背景：工程网格 + 线网装饰 ---------- */
.gridbg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(23, 62, 122, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 62, 122, .045) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem; mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%); }
.bglines { position: fixed; right: -4rem; top: 3rem; width: 46rem; height: 30rem; z-index: -1; pointer-events: none; opacity: .5; }
.bglines path { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 30; display: flex; flex-direction: column;
  background: #FFFFFF; border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); position: relative; }
.brand::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -1px; height: .1875rem;
  background: linear-gradient(90deg, var(--c-dispatcher) 0 16.6%, var(--c-overview) 0 33.3%, var(--c-equipment) 0 50%, var(--c-passenger) 0 66.6%, var(--c-safety) 0 83.3%, var(--c-quality) 0); border-radius: .2rem; }
.logo { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
  background: var(--navy); box-shadow: 0 0 0 .1875rem #fff, 0 0 0 .3125rem var(--amber); }
.logo svg { width: 1.6rem; height: 1.6rem; }
.brand b { display: block; font-size: 1.0625rem; color: var(--ink); letter-spacing: .04em; line-height: 1.25; font-weight: 700; }
.brand small { display: block; font-size: 1.2rem; color: var(--navy); font-weight: 700; letter-spacing: .02em; line-height: 1.5; }

/* 导航：线路 + 车站 */
.nav { padding: .75rem .875rem .5rem; position: relative; }
.nav h6 { font-size: .75rem; font-weight: 600; color: var(--ink-4); letter-spacing: .14em; padding: .875rem .75rem .375rem 2.6rem; display: flex; align-items: center; gap: .4rem; position: relative; }
.nav h6::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.25rem; border-radius: .3rem; border: .1875rem solid var(--navy); background: #fff; z-index: 2; }
.nav .ln { position: relative; }
.nav .ln::before { content: ""; position: absolute; left: 1.425rem; top: 0; bottom: 0; width: .3rem; background: #D9E0EA; border-radius: .2rem; }
.nav .ln::after { content: ""; position: absolute; left: 1.375rem; top: 0; width: .4rem; height: 1.6rem; border-radius: .3rem; background: var(--amber); box-shadow: 0 0 .5rem rgba(242,160,7,.7); animation: runline 7s linear infinite; }
@keyframes runline { 0% { top: -1.6rem; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .66rem .75rem .66rem 2.6rem; margin: .125rem 0; border-radius: .5rem; color: var(--ink-3);
  font-size: .96rem; font-weight: 500; position: relative; transition: background .25s, color .25s; z-index: 1; }
.nav a::before { content: ""; position: absolute; left: 1.125rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%;
  background: #fff; border: .1875rem solid #C3CCD8; transition: all .3s var(--ease); z-index: 2; }
.nav a svg { width: 1.125rem; height: 1.125rem; color: var(--ink-4); transition: color .25s; }
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a:hover::before { border-color: var(--navy); }
.nav a.on { background: linear-gradient(90deg, rgba(23, 62, 122, .1), rgba(23, 62, 122, .02)); color: var(--navy); font-weight: 700; }
.nav a.on svg { color: var(--navy); }
.nav a.on::before { border-color: var(--navy); background: var(--amber); width: 1.05rem; height: 1.05rem; margin-top: -.525rem; left: 1.05rem; box-shadow: 0 0 0 .3rem rgba(242, 160, 7, .22); }
.nav a.on::after { content: ""; position: absolute; right: 0; top: .5rem; bottom: .5rem; width: .1875rem; border-radius: .2rem; background: var(--navy); }
.nav a .tag { margin-left: auto; font-size: .6875rem; padding: 0 .4rem; border-radius: .25rem; background: var(--bad); color: #fff; font-weight: 700; font-family: var(--num); letter-spacing: .05em; }
.nav a .tag.new { background: var(--amber); color: var(--navy-3); }

/* 侧栏底部：集群运行监视 */
.mon { margin: .75rem .875rem .875rem; padding: .875rem .875rem .75rem; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); position: relative; overflow: hidden;
  flex: 1 0 auto; display: flex; flex-direction: column; min-height: 22rem; }
.mon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .1875rem; background: linear-gradient(90deg, var(--navy) 0 70%, var(--amber) 0); }
.mon-h { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; font-weight: 700; color: var(--ink); margin-bottom: .625rem; }
.mon-h em { font-style: normal; font-size: .6875rem; font-family: var(--num); letter-spacing: .1em; color: var(--ok); display: flex; align-items: center; gap: .3rem; }
.mon-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; margin-bottom: .625rem; }
.mon-k div { background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: .4rem .3rem; text-align: center; }
.mon-k b { display: block; font-family: var(--num); font-size: 1.125rem; color: var(--navy); line-height: 1.2; font-weight: 600; }
.mon-k small { font-size: .6875rem; color: var(--ink-4); }
.mon-ag { display: grid; gap: .3rem; }
.mon-ag .r { display: grid; grid-template-columns: 1.375rem 1fr auto .5rem; gap: .5rem; align-items: center; font-size: .78rem; color: var(--ink-2); }
.mon-ag .r i { width: 1.375rem; height: 1.375rem; border-radius: .3rem; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; }
.mon-ag .r span { position: relative; height: .25rem; background: var(--line); border-radius: .2rem; overflow: hidden; }
.mon-ag .r span s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .2rem; transition: width 1.2s var(--ease); }
.mon-ag .r b { font-family: var(--num); font-size: .8125rem; color: var(--ink); font-weight: 600; min-width: 2.2rem; text-align: right; }
.mon-ag .r u { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .15rem rgba(31,157,85,.18); animation: blink 2.4s ease-in-out infinite; }
.mon-ag .r:nth-child(2n) u { animation-delay: -.8s; } .mon-ag .r:nth-child(3n) u { animation-delay: -1.6s; }
.mon-ag .r.busy u { background: var(--amber); box-shadow: 0 0 0 .15rem rgba(242,160,7,.25); animation-duration: .6s; }
@keyframes blink { 50% { opacity: .35; } }
.mon-line { margin-top: .5rem; height: 2.25rem; }
.mon-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mon-line text { font-family: var(--font); }
.mon-ev-h { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 700; color: var(--ink-3); margin: .5rem 0 .375rem; letter-spacing: .06em; }
.mon-ev-h small { font-weight: 500; color: var(--ink-4); font-family: var(--num); letter-spacing: 0; }
.mon-ev { flex: 1; min-height: 5rem; position: relative; overflow: hidden; border-radius: .5rem; background: #fff; border: 1px solid var(--line);
  mask-image: linear-gradient(180deg, transparent, #000 .75rem, #000 calc(100% - 1.25rem), transparent); }
.mon-ev .rail { position: absolute; left: 0; right: 0; top: 0; animation: evup var(--dur, 40s) linear infinite; }
.mon-ev:hover .rail { animation-play-state: paused; }
@keyframes evup { to { transform: translateY(-50%); } }
.mon-ev a { display: block; padding: .45rem .625rem; border-bottom: 1px dashed var(--line); font-size: .74rem; line-height: 1.45; color: var(--ink-2); }
.mon-ev a:hover { background: var(--panel-2); }
.mon-ev a .h { display: flex; align-items: center; gap: .375rem; color: var(--ink-4); font-size: .6875rem; }
.mon-ev a .h b { color: var(--ink); font-weight: 600; font-size: .74rem; }
.mon-ev a .h .num { margin-left: auto; }
.mon-ev a p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: .125rem 0; }
.mon-ev a .c { display: flex; gap: .2rem; }
.mon-ev a .c i { width: .5rem; height: .5rem; border-radius: 50%; }
.nav a .cnt { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: .65rem; background: var(--bad); color: #fff; font-style: normal; font-size: .6875rem;
  font-weight: 700; font-family: var(--num); display: grid; place-items: center; }
.nav a .cnt:empty { display: none; }

.main { flex: 1; margin-left: var(--side); min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .75rem 1.75rem; min-height: 4.25rem;
  background: rgba(242, 244, 247, .86); backdrop-filter: blur(.75rem); border-bottom: 1px solid var(--line);
}
.top h1 { font-size: 1.375rem; color: var(--ink); font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: .625rem; white-space: nowrap; }
.top h1::before { content: ""; width: .3125rem; height: 1.25rem; border-radius: .2rem; background: var(--navy); box-shadow: .4375rem 0 0 var(--amber); margin-right: .4375rem; }
.top .crumb { font-size: .8125rem; color: var(--ink-4); margin-top: .0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34rem; }
.top .sp { flex: 1; min-width: 1rem; }
/* PIS 走马灯 */
.pis { flex: 1; min-width: 12rem; max-width: 46rem; height: 2.375rem; border-radius: .5rem; background: var(--navy-3); color: var(--amber-2); position: relative; overflow: hidden;
  display: flex; align-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 .5rem 1rem rgba(0,0,0,.25); }
.pis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: .25rem .25rem; pointer-events: none; z-index: 2; }
.pis .lb { flex: none; height: 100%; display: flex; align-items: center; gap: .375rem; padding: 0 .75rem; background: var(--amber); color: var(--navy-3); font-weight: 800; font-size: .8125rem; letter-spacing: .08em; z-index: 3; }
.pis .lb i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--bad); animation: blink 1s steps(1) infinite; }
.pis .tk { flex: 1; overflow: hidden; height: 100%; position: relative; mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.pis .tk div { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; gap: 3rem; font-family: var(--font); font-size: .875rem; letter-spacing: .03em;
  animation: ticker var(--dur, 60s) linear infinite; padding-left: 100%; text-shadow: 0 0 .375rem rgba(255, 182, 39, .55); }
.pis .tk span b { color: #fff; font-weight: 600; margin: 0 .25rem; }
.pis .tk span em { font-style: normal; color: #7FD3A0; margin-left: .25rem; }
@keyframes ticker { to { transform: translateX(-100%); } }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .875rem; border-radius: .5rem; background: #fff; border: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-3); white-space: nowrap; }
.pill b { color: var(--ink); font-weight: 600; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); position: relative; flex: none; display: inline-block; }
.dot::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; background: inherit; opacity: .35; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2); opacity: 0; } }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.clock b { font-family: var(--num); font-size: 1.125rem; color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.clock small { font-size: .6875rem; color: var(--ink-4); }
.bell { position: relative; width: 2.375rem; height: 2.375rem; border-radius: .5rem; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.bell:hover { color: var(--navy); border-color: var(--line-2); }
.bell em { position: absolute; top: -.375rem; right: -.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .6rem; background: var(--bad); color: #fff;
  font-style: normal; font-size: .6875rem; font-weight: 700; font-family: var(--num); display: grid; place-items: center; box-shadow: 0 0 0 .125rem var(--bg); }
.bell em:empty { display: none; }
.pop { position: absolute; right: 0; top: calc(100% + .5rem); width: 23rem; background: #fff; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-.375rem); pointer-events: none; transition: all .2s; z-index: 50; cursor: default; overflow: hidden; }
.bell.on .pop, .user:hover .pop, .user:focus-within .pop { opacity: 1; transform: none; pointer-events: auto; }
.pop-h { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); font-size: .875rem; font-weight: 700; color: var(--ink); }
.pop-h a { font-size: .78rem; font-weight: 500; color: var(--blue); }
.pop-b { max-height: 22rem; overflow-y: auto; }
.pop-i { display: grid; grid-template-columns: .5rem 1fr; gap: .625rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
.pop-i:hover { background: var(--panel-2); }
.pop-i > i { width: .5rem; height: .5rem; border-radius: 50%; margin-top: .4rem; background: var(--line-2); }
.pop-i.unread > i, .pop-i.lv2 > i { background: var(--bad); } .pop-i.lv1 > i { background: var(--warn); }
.pop-i small { display: block; color: var(--ink-4); font-size: .72rem; margin-top: .125rem; }
.pop-e { padding: 1.5rem 1rem; text-align: center; color: var(--ink-4); font-size: .82rem; }
/* API 余额 */
.bal { position: relative; display: flex; align-items: center; gap: .55rem; height: 2.375rem; padding: 0 .75rem 0 .65rem; border-radius: .5rem; background: #fff; border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.bal:hover { border-color: var(--line-2); }
.bal .t { display: flex; flex-direction: column; line-height: 1.15; }
.bal .t small { font-size: .66rem; color: var(--ink-4); letter-spacing: .02em; }
.bal .t b { font-size: .92rem; color: var(--ink); font-weight: 600; }
.bal.low .t b { color: var(--bad); }
.bal.err .dot { background: var(--bad); }
.bal.low .dot { background: var(--warn); }
.bal:hover .pop, .bal:focus-within .pop { opacity: 1; transform: none; pointer-events: auto; }
.bal .pop { width: 21rem; }
.bal-b { padding: .875rem 1rem 1rem; }
.bal-b .big { display: flex; align-items: baseline; gap: .4rem; }
.bal-b .big b { font: 600 2.2rem/1.1 var(--num); color: var(--ink); }
.bal-b .big small { font-size: .8rem; color: var(--ink-4); }
.bal-b .big em { margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 700; padding: .05rem .45rem; border-radius: .25rem; background: rgba(31,157,85,.12); color: #17834A; }
.bal-b .big em.no { background: rgba(216,56,58,.12); color: #C02A2C; }
.bal-b .stk { display: flex; height: .45rem; border-radius: .3rem; overflow: hidden; background: var(--panel-3); margin: .6rem 0 .35rem; }
.bal-b .stk i { display: block; height: 100%; }
.bal-b .lg2 { display: flex; gap: 1rem; font-size: .74rem; color: var(--ink-3); }
.bal-b .lg2 i { display: inline-block; width: .55rem; height: .55rem; border-radius: .15rem; margin-right: .3rem; }
.bal-b dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem .75rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line-2); font-size: .8rem; }
.bal-b dt { color: var(--ink-4); } .bal-b dd { color: var(--ink); text-align: right; font-family: var(--num); }
.user { display: flex; align-items: center; gap: .625rem; padding: .25rem .625rem .25rem .25rem; border-radius: .5rem; background: #fff; border: 1px solid var(--line); position: relative; cursor: pointer; }
.user .av { width: 1.875rem; height: 1.875rem; border-radius: .375rem; font-size: .8125rem; }
.user > span { font-size: .875rem; color: var(--ink); font-weight: 600; white-space: nowrap; }
.user .pop { width: 12rem; padding: .375rem; }
.user .pop a { display: flex; align-items: center; gap: .625rem; padding: .6rem .75rem; border-radius: .375rem; font-size: .875rem; color: var(--ink-2); }
.user .pop a:hover { background: var(--panel-3); }
.content { padding: 1.5rem 1.75rem 2.5rem; }

/* ---------- 头像 ---------- */
.av { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .95rem; flex: none;
  background: var(--navy); }

/* ---------- 栅格与卡片 ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s10 { grid-column: span 10; } .s12 { grid-column: span 12; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.25rem 1.375rem; position: relative; min-width: 0;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.card.hover:hover { transform: translateY(-.1875rem); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card.frame::before, .card.frame::after { content: ""; position: absolute; width: .75rem; height: .75rem; border: 2px solid var(--navy); opacity: .35; pointer-events: none; }
.card.frame::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r); }
.card.frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r); }
.card-h { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; min-height: 2rem; }
.card-h h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: .03em; display: flex; align-items: center; gap: .625rem; white-space: nowrap; }
.card-h h3 .ic { width: 1.875rem; height: 1.875rem; border-radius: .4rem; display: grid; place-items: center; background: var(--c, var(--navy)); color: #fff; }
.card-h h3 .ic svg { width: 1.0625rem; height: 1.0625rem; }
.card-h .sub { font-size: .8125rem; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-h .sp { flex: 1; }
.chart { width: 100%; height: 18.75rem; }
.muted { color: var(--ink-4); }
.mt { margin-top: 1.25rem; }
.mono { font-family: var(--mono); }

/* 进入动画 */
.reveal { opacity: 0; transform: translateY(1rem); animation: reveal .7s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* ---------- KPI ---------- */
.kpi { padding: 1.125rem 1.25rem 1rem; overflow: hidden; border-top: .1875rem solid var(--kc, var(--navy)); }
.kpi .k-top { display: flex; align-items: center; justify-content: space-between; }
.kpi .k-lab { font-size: .875rem; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.kpi .k-lab svg { width: 1rem; height: 1rem; color: var(--kc); }
.kpi .k-code { font-family: var(--num); font-size: .6875rem; letter-spacing: .1em; color: var(--ink-4); }
.kpi .k-val { font-family: var(--num); font-size: 2.25rem; font-weight: 600; color: var(--ink); line-height: 1.15; margin-top: .5rem; letter-spacing: .01em; }
.kpi .k-val small { font-size: .875rem; color: var(--ink-4); font-weight: 500; margin-left: .25rem; font-family: var(--font); }
.kpi .k-foot { font-size: .78rem; color: var(--ink-4); margin-top: .25rem; display: flex; align-items: center; gap: .375rem; position: relative; z-index: 1; }
.kpi .k-foot .up { color: var(--ok); font-weight: 700; font-family: var(--num); }
.kpi .k-spark { position: absolute; right: 0; bottom: 0; width: 58%; height: 3.25rem; opacity: .95; }

/* ---------- 标签 / 徽章 ---------- */
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .15rem .6rem; border-radius: .3rem; font-size: .8125rem; font-weight: 500; line-height: 1.6;
  background: var(--panel-3); color: var(--ink-3); white-space: nowrap; }
.chip svg { width: .875rem; height: .875rem; }
.chip.c-dispatcher, .chip.c-linkage { background: rgba(23,62,122,.09); color: #173E7A; }
.chip.c-overview { background: rgba(21,151,216,.11); color: #0B78B0; }
.chip.c-equipment { background: rgba(31,157,85,.11); color: #17834A; }
.chip.c-passenger { background: rgba(238,138,18,.13); color: #B86605; }
.chip.c-safety { background: rgba(216,56,58,.1); color: #C02A2C; }
.chip.c-quality { background: rgba(14,143,134,.11); color: #0B7770; }
.chip.k-事件 { background: rgba(216,56,58,.1); color: #C02A2C; }
.chip.k-对象 { background: rgba(23,62,122,.09); color: #173E7A; }
.chip.k-场所 { background: rgba(31,157,85,.11); color: #17834A; }
.chip.k-设备 { background: rgba(238,138,18,.13); color: #B86605; }
.chip.k-系统, .chip.k-技术 { background: rgba(21,151,216,.11); color: #0B78B0; }
.chip.k-处置, .chip.k-故障, .chip.k-操作 { background: rgba(14,143,134,.11); color: #0B7770; }
.chip.solid { color: #fff; }
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: .1rem .5rem; border-radius: .3rem; font-family: var(--num);
  font-weight: 600; font-size: .875rem; }
.score.a { background: rgba(31,157,85,.12); color: #17834A; }
.score.b { background: rgba(21,151,216,.12); color: #0B78B0; }
.score.c { background: rgba(238,138,18,.14); color: #B86605; }
.score.d { background: rgba(216,56,58,.12); color: #C02A2C; }

/* 调用链：线路站点 */
.chain { display: inline-flex; align-items: center; gap: 0; }
.chain i { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .72rem; font-weight: 700;
  box-shadow: 0 0 0 .125rem #fff; position: relative; z-index: 1; }
.chain em { width: .75rem; height: .1875rem; background: var(--line-2); margin: 0 -.125rem; }
.chain.sm i { width: 1.3rem; height: 1.3rem; font-size: .66rem; }
.chain.sm em { width: .55rem; }
.ag-dispatcher { background: var(--c-dispatcher); color: var(--c-dispatcher); }
.ag-overview { background: var(--c-overview); color: var(--c-overview); }
.ag-equipment { background: var(--c-equipment); color: var(--c-equipment); }
.ag-passenger { background: var(--c-passenger); color: var(--c-passenger); }
.ag-safety { background: var(--c-safety); color: var(--c-safety); }
.ag-quality { background: var(--c-quality); color: var(--c-quality); }
.chain i[class*="ag-"] { color: #fff; }

/* ---------- 按钮 / 表单 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.125rem; border-radius: .5rem; font-size: .9rem; font-weight: 600;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); transition: all .2s var(--ease); white-space: nowrap; }
.btn svg { width: 1.0625rem; height: 1.0625rem; }
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn.pri { background: var(--navy); color: #fff; border-color: var(--navy); position: relative; overflow: hidden; }
.btn.pri:hover { background: var(--navy-2); color: #fff; }
.btn.pri::after { content: ""; position: absolute; left: 0; bottom: 0; height: .1875rem; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.btn.pri:hover::after { transform: scaleX(1); }
.btn.amb { background: var(--amber); border-color: var(--amber); color: var(--navy-3); }
.btn.amb:hover { background: var(--amber-2); color: var(--navy-3); }
.btn.sm { height: 2.125rem; padding: 0 .75rem; font-size: .82rem; border-radius: .4rem; }
.btn.sm svg { width: .95rem; height: .95rem; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--panel-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.input, .select { height: 2.5rem; border-radius: .5rem; border: 1px solid var(--line-2); background: #fff; padding: 0 .875rem; font-size: .9rem; outline: none; transition: all .2s; min-width: 0; }
.input:focus, .select:focus { border-color: var(--navy); box-shadow: 0 0 0 .1875rem rgba(23, 62, 122, .12); }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: .8rem; color: var(--ink-4); width: 1.0625rem; height: 1.0625rem; }
.search .input { padding-left: 2.4rem; }
.seg { display: inline-flex; padding: .1875rem; background: var(--panel-3); border-radius: .5rem; gap: .125rem; border: 1px solid var(--line); }
.seg button { padding: .375rem .875rem; border-radius: .375rem; font-size: .84rem; color: var(--ink-3); font-weight: 500; transition: all .2s; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: 0 .0625rem .25rem rgba(14,27,44,.12); font-weight: 700; }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.table th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: .8125rem; padding: .7rem .875rem; background: var(--panel-2); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); white-space: nowrap; }
.table th:first-child { border-left: 1px solid var(--line); border-top-left-radius: .5rem; } .table th:last-child { border-right: 1px solid var(--line); border-top-right-radius: .5rem; }
.table td { padding: .75rem .875rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: #F5F8FC; }
.table tbody tr.click { cursor: pointer; }
.table .q { color: var(--ink); font-weight: 500; max-width: 28rem; }
.who { display: flex; align-items: center; gap: .625rem; }
.who .av { width: 2.125rem; height: 2.125rem; font-size: .82rem; }
.who b { display: block; color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.3; }
.who small { display: block; color: var(--ink-4); font-size: .75rem; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: .875rem; color: var(--ink-3); }
.pager .pg { display: flex; gap: .375rem; }
.pager .pg button { min-width: 2.25rem; height: 2.25rem; border-radius: .4rem; border: 1px solid var(--line-2); background: #fff; font-size: .875rem; font-family: var(--num); }
.pager .pg button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager .pg button:disabled { opacity: .4; }

/* ---------- 抽屉 ---------- */
.mask { position: fixed; inset: 0; background: rgba(10, 31, 64, .3); backdrop-filter: blur(.125rem); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mask.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(48rem, 94vw); background: var(--bg); z-index: 61; transform: translateX(105%); transition: transform .45s var(--ease);
  box-shadow: -2rem 0 4rem -1.25rem rgba(10,31,64,.3); display: flex; flex-direction: column; }
.drawer.on { transform: none; }
.drawer .d-h { padding: 1.125rem 1.5rem; display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--line); background: #fff; position: relative; }
.drawer .d-h::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: .1875rem; background: linear-gradient(90deg, var(--navy) 0 30%, var(--amber) 0 36%, transparent 0); }
.drawer .d-h h3 { font-size: 1.125rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.drawer .d-b { flex: 1; overflow-y: auto; padding: 1.375rem 1.5rem 2.5rem; }
.x-btn { width: 2.375rem; height: 2.375rem; border-radius: .5rem; display: grid; place-items: center; color: var(--ink-3); margin-left: auto; }
.x-btn:hover { background: var(--panel-3); color: var(--ink); }

/* ---------- Markdown ---------- */
.md { font-size: .96rem; line-height: 1.85; color: var(--ink-2); word-break: break-word; }
.md p { margin: .25rem 0; }
.md strong { color: var(--ink); font-weight: 700; }
.md ol, .md ul { padding-left: 1.4em; margin: .375rem 0; }
.md li { margin: .2rem 0; }
.md li::marker { color: var(--navy); font-weight: 700; font-family: var(--num); }
.md blockquote { margin: .625rem 0 .125rem; padding: .55rem .875rem; border-left: .1875rem solid var(--amber); background: #FFF8EA; border-radius: 0 .5rem .5rem 0; color: #7A4E00; font-size: .92rem; }
.md code { font-family: var(--mono); background: var(--panel-3); padding: .0625rem .375rem; border-radius: .3rem; font-size: .9em; }
.md h4 { font-size: 1rem; color: var(--ink); margin: .5rem 0 .25rem; }

/* ---------- 空状态 / toast ---------- */
.toast { position: fixed; left: 50%; top: 1.5rem; transform: translate(-50%, -1.25rem); background: var(--navy-3); color: #fff; padding: .7rem 1.25rem; border-radius: .5rem; font-size: .9rem;
  z-index: 100; opacity: 0; transition: all .3s var(--ease); box-shadow: var(--shadow-lg); display: flex; gap: .5rem; align-items: center; border-left: .25rem solid var(--amber); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 1.0625rem; height: 1.0625rem; color: var(--amber); }
.skeleton { background: linear-gradient(90deg, #EDF1F5 25%, #F6F8FA 37%, #EDF1F5 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: .5rem; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 进度条 ---------- */
.bar { height: .5rem; border-radius: .3rem; background: var(--panel-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: .3rem; background: var(--navy); width: 0; transition: width 1.2s var(--ease); }

/* 线路编号徽标（类似地铁线路牌） */
.lno { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.375rem; padding: 0 .3rem; border-radius: .3rem; color: #fff; font-family: var(--num); font-weight: 700; font-size: .75rem; letter-spacing: .03em; }

/* ---------- 调用痕迹回放 ---------- */
.rp-q { background: #fff; border-radius: var(--r); padding: 1.125rem 1.25rem; border: 1px solid var(--line); position: relative; overflow: hidden; }
.rp-q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25rem; background: var(--navy); }
.rp-text { font-size: 1.1875rem; color: var(--ink); font-weight: 600; margin: .875rem 0 .75rem; line-height: 1.6; }
.rp-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rp-h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--ink); margin: 1.5rem 0 .75rem; }
.rp-h .n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--num); font-size: .78rem; box-shadow: 0 0 0 .1875rem rgba(242,160,7,.35); }
.rp-kw { display: flex; flex-wrap: wrap; gap: .5rem; }
.rp-kw .chip { font-size: .875rem; padding: .3rem .75rem; }
.rp-kw small { margin-left: .25rem; opacity: .75; }
.rp-intent { margin-top: .75rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: #F4F7FB; border: 1px solid var(--line); font-size: .9rem; line-height: 1.9; color: var(--ink-2); }
.rp-intent b { color: var(--navy); display: inline-flex; align-items: center; gap: .3rem; }
.rp-intent svg { width: .95rem; height: .95rem; }
.rp-sys { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.rp-sys span { font-family: var(--num); font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: .25rem; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; }
mark.kw { background: rgba(23,62,122,.1); color: var(--navy); padding: .0625rem .25rem; border-radius: .25rem; font-weight: 700; }
mark.kw.k-事件 { background: rgba(216,56,58,.12); color: #C02A2C; }
mark.kw.k-场所 { background: rgba(31,157,85,.13); color: #17834A; }
mark.kw.k-设备 { background: rgba(238,138,18,.16); color: #B86605; }
mark.kw.k-系统, mark.kw.k-技术 { background: rgba(21,151,216,.13); color: #0B78B0; }
.gantt { background: #fff; border-radius: var(--r); padding: .875rem 1rem; border: 1px solid var(--line); }
.g-row { display: grid; grid-template-columns: 14rem 1fr 4rem; gap: .75rem; align-items: center; padding: .375rem 0; font-size: .84rem; }
.g-name { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-name i { width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; flex: none; }
.g-track { position: relative; height: .75rem; background: var(--panel-3); border-radius: .2rem;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(14,27,44,.06) 0 10%); }
.g-track span { position: absolute; top: 0; bottom: 0; border-radius: .2rem; animation: gw .9s var(--ease) both; }
@keyframes gw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.g-ms { text-align: right; color: var(--ink-3); }
.ex-card { background: #fff; border-radius: var(--r); padding: 1rem 1.125rem; border: 1px solid var(--line); margin-bottom: .75rem; position: relative; overflow: hidden; }
.ex-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25rem; background: var(--c); }
.ex-card.sum { background: #FBFCFE; border-color: var(--line-2); }
.ex-h { display: flex; gap: .75rem; align-items: center; margin-bottom: .625rem; }
.ex-h b { display: block; color: var(--ink); font-size: .97rem; }
.ex-h small { color: var(--ink-4); font-size: .78rem; }
.ex-ic { width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ex-ic svg { stroke: #fff; width: 1.2rem; height: 1.2rem; }
.ex-refs { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin-bottom: .5rem; font-size: .78rem; color: var(--ink-4); }
.ex-refs svg { width: .875rem; height: .875rem; }
.ex-refs span, .ex-refs a { background: var(--panel-3); padding: .125rem .5rem; border-radius: .3rem; color: var(--ink-3); }
.qa { display: flex; gap: 1.5rem; align-items: center; background: #fff; border-radius: var(--r); padding: 1.125rem 1.375rem; border: 1px solid var(--line); }
.qa-ring { --p: 90; width: 7.5rem; height: 7.5rem; border-radius: 50%; flex: none; display: grid; place-items: center; align-content: center; position: relative;
  background: conic-gradient(var(--c-quality) calc(var(--p) * 1%), var(--panel-3) 0); }
.qa-ring::before { content: ""; position: absolute; inset: .625rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.qa-ring b, .qa-ring small { position: relative; }
.qa-ring b { font-size: 2.125rem; color: var(--ink); line-height: 1; font-family: var(--num); }
.qa-ring small { font-size: .8125rem; color: var(--ok); font-weight: 600; text-align: center; }
.qa-dims { flex: 1; display: grid; gap: .625rem; }
.qa-dims > div { display: grid; grid-template-columns: 4rem 1fr 2.25rem; gap: .625rem; align-items: center; font-size: .875rem; }
.qa-dims .bar i { background: var(--c-quality); }

/* ---------- 通用小部件 ---------- */
.ring { --p: 50; --c: var(--navy); width: 3.5rem; height: 3.5rem; border-radius: 50%; position: relative; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--panel-3) 0); }
.ring::before { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: #fff; }
.ring b { position: relative; font-family: var(--num); font-size: .95rem; color: var(--ink); font-weight: 600; line-height: 1; }
.ring b small { font-size: .6rem; color: var(--ink-4); }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs button { padding: .55rem 1rem; font-size: .9rem; color: var(--ink-3); font-weight: 600; position: relative; }
.tabs button.on { color: var(--navy); }
.tabs button.on::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: .1875rem; background: var(--navy); border-radius: .2rem; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-4); font-size: .9rem; }
.empty svg { width: 2.5rem; height: 2.5rem; display: block; margin: 0 auto .625rem; opacity: .5; }
.lv { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: .3rem; font-size: .78rem; font-weight: 700; }
.lv.lv2 { background: rgba(216,56,58,.12); color: #C02A2C; }
.lv.lv1 { background: rgba(238,138,18,.14); color: #B86605; }
.lv::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.chk { width: 1.05rem; height: 1.05rem; accent-color: var(--navy); cursor: pointer; }

/* ---------- 响应式 ---------- */
@media (max-width: 1500px) { .top .pill.model, .bal .t small { display: none; } }
@media (max-width: 1100px) {
  :root { --side: 4.75rem; }
  .brand div, .nav h6, .nav a span, .nav a .tag, .mon, .nav .ln::before, .nav .ln::after, .nav a::before { display: none; }
  .nav a { justify-content: center; padding: .75rem; }
  .pis { display: none; }
  .grid > * { grid-column: span 12 !important; }
  .grid.kpis > * { grid-column: span 6 !important; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-r { min-height: 18rem; }
  .scn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sysp { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 全屏查看 ---------- */
.fsb { flex: none; gap: .375rem; margin-left: auto; background: #fff; }
.fsb svg { width: .95rem; height: .95rem; }
.fsb.abs { position: absolute; right: .625rem; top: .5rem; z-index: 3; margin: 0; }
html.fs-lock { overflow: hidden; }
html.rv-done .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
[data-fs-anc] { transform: none !important; filter: none !important; backdrop-filter: none !important; perspective: none !important; will-change: auto !important; contain: none !important; }
.fs-on { position: fixed !important; inset: 0 !important; z-index: 55 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
  display: flex !important; flex-direction: column; overflow: auto; background: var(--bg); }
.fs-on:fullscreen { width: 100% !important; height: 100% !important; }
.fs-on::backdrop { background: var(--bg); }
.fs-on .fsb { border-color: var(--navy); color: var(--navy); }
.fs-on .st { width: 100%; height: 100% !important; max-height: none !important; }