/* ============================================================
   OPC 园区数据驾驶舱 · 深蓝科技风
   设计稿 1920×1080 (1rem = 100px), 全站 rem 自适应
   字体: 阿里妈妈数黑体 / Orbitron (本地 fonts/ 目录, 离线可用)
   ============================================================ */

@font-face {
  font-family: "AlimamaShuHeiTi";
  src: url("../fonts/AlimamaShuHeiTi-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #020a1a;
  --panel-bg: linear-gradient(160deg, rgba(9, 38, 82, 0.72) 0%, rgba(3, 16, 42, 0.82) 100%);
  --line: rgba(46, 126, 255, 0.35);
  --main: #00e5ff;
  --blue: #2f7bff;
  --violet: #8a63ff;
  --ok: #00ffa3;
  --warn: #ffb02e;
  --danger: #ff4d6a;
  --text: #e2f2ff;
  --sub: #7fa9dc;
  --font-cn: "AlimamaShuHeiTi", "Microsoft YaHei", sans-serif;
  --font-body: "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-num: "Orbitron", "DIN Alternate", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body);
}

/* ---------- 全局背景层 ---------- */
.screen {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(20, 90, 210, 0.35), transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(0, 110, 200, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(90, 60, 220, 0.14), transparent 70%),
    #020a1a;
}
.screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(44, 120, 230, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 120, 230, 0.045) 1px, transparent 1px);
  background-size: 0.5rem 0.5rem;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
}
.bg-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 2.2rem rgba(0, 0, 0, 0.85);
}
/* 扫描光带 */
.scan-beam {
  position: absolute; left: 0; right: 0; height: 22%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 210, 255, 0.045) 45%, rgba(0, 230, 255, 0.09) 50%, transparent);
  animation: scanMove 9s linear infinite;
}
@keyframes scanMove {
  0% { top: -25%; }
  100% { top: 105%; }
}

/* ==================== 顶部 ==================== */
.header {
  position: relative; z-index: 6; flex: none;
  height: 0.94rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.26rem 0.04rem;
}
.header::after {
  content: ""; position: absolute; left: 0.2rem; right: 0.2rem; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 190, 255, 0.35) 12%, rgba(0, 224, 255, 0.9) 50%, rgba(0, 190, 255, 0.35) 88%, transparent);
  box-shadow: 0 0 0.14rem rgba(0, 200, 255, 0.55);
}

/* 左侧品牌 */
.header-left { width: 4.4rem; flex: none; display: flex; align-items: center; gap: 0.22rem; }
.brand { display: flex; align-items: center; gap: 0.1rem; }
.brand-mark { display: flex; align-items: flex-end; gap: 0.035rem; height: 0.3rem; }
.brand-mark span {
  width: 0.055rem; border-radius: 0.01rem;
  background: linear-gradient(180deg, var(--main), rgba(47, 123, 255, 0.2));
  box-shadow: 0 0 0.1rem rgba(0, 224, 255, 0.6);
  animation: barPulse 2.4s ease-in-out infinite;
}
.brand-mark span:nth-child(1) { height: 55%; animation-delay: 0s; }
.brand-mark span:nth-child(2) { height: 100%; animation-delay: 0.3s; }
.brand-mark span:nth-child(3) { height: 72%; animation-delay: 0.6s; }
@keyframes barPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b {
  font-family: var(--font-num); font-size: 0.15rem; font-weight: 700;
  letter-spacing: 0.02rem; color: #bfe9ff;
}
.brand-txt i { font-style: normal; font-size: 0.11rem; color: rgba(127, 169, 220, 0.8); letter-spacing: 0.03rem; }

.datetime { display: flex; flex-direction: column; line-height: 1.1; padding-left: 0.16rem; border-left: 1px solid rgba(70, 140, 240, 0.3); }
#clock-time {
  font-family: var(--font-num); font-size: 0.26rem; font-weight: 700; color: var(--main);
  letter-spacing: 0.02rem; text-shadow: 0 0 0.14rem rgba(0, 224, 255, 0.7);
}
#clock-date { font-size: 0.12rem; color: var(--sub); margin-top: 0.02rem; }

/* 中央标题 */
.header-center { flex: 1; text-align: center; position: relative; }
.title-wrap { display: flex; align-items: center; justify-content: center; gap: 0.18rem; }
.main-title {
  font-family: var(--font-cn);
  font-size: 0.42rem; font-weight: normal; letter-spacing: 0.04rem;
  background: linear-gradient(180deg, #ffffff 8%, #9fe6ff 45%, #2f9bff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.16rem rgba(0, 180, 255, 0.55));
  white-space: nowrap;
}
.title-wing {
  width: 1.5rem; height: 0.1rem; position: relative;
  background: linear-gradient(90deg, transparent, var(--main));
  clip-path: polygon(0 45%, 72% 45%, 72% 0, 100% 50%, 72% 100%, 72% 55%, 0 55%);
  opacity: 0.9;
}
.title-wing.right { transform: scaleX(-1); }
.header-sub {
  display: flex; align-items: center; justify-content: center; gap: 0.1rem;
  font-size: 0.145rem; color: #8fc4ec; letter-spacing: 0.08rem; margin-top: 0.03rem;
}
.sub-dot { width: 0.05rem; height: 0.05rem; background: var(--main); transform: rotate(45deg); box-shadow: 0 0 0.08rem var(--main); }

/* 右侧 HUD */
.header-right { width: 4.4rem; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.08rem; }
.hud-chips { display: flex; gap: 0.1rem; }
.hud-chip {
  display: flex; align-items: baseline; gap: 0.05rem;
  padding: 0.03rem 0.1rem;
  background: rgba(10, 46, 100, 0.55);
  border: 1px solid rgba(60, 140, 255, 0.3);
  border-radius: 0.03rem;
}
.hud-chip i { font-style: normal; font-size: 0.105rem; color: var(--sub); }
.hud-chip b { font-family: var(--font-num); font-size: 0.15rem; color: var(--main); }
.header-btns { display: flex; gap: 0.1rem; }
.hbtn {
  font-family: var(--font-cn); font-size: 0.13rem;
  color: #cfeeff; cursor: pointer;
  padding: 0.05rem 0.16rem;
  background: linear-gradient(180deg, rgba(30, 90, 190, 0.55), rgba(8, 30, 70, 0.55));
  border: 1px solid rgba(60, 150, 255, 0.45);
  border-radius: 0.03rem;
  transition: all 0.25s;
}
.hbtn:hover {
  color: #fff; border-color: var(--main);
  box-shadow: 0 0 0.16rem rgba(0, 200, 255, 0.55), inset 0 0 0.1rem rgba(0, 200, 255, 0.25);
}

/* ==================== 主体 ==================== */
.main {
  position: relative; z-index: 3; flex: 1; min-height: 0;
  display: flex; gap: 0.16rem;
  padding: 0.14rem 0.2rem 0.1rem;
}
.col { display: flex; flex-direction: column; gap: 0.14rem; min-height: 0; }
.col > .panel { flex: 1; min-height: 0; }
.col-left, .col-right { width: 23.2%; flex: none; }
.col-center { flex: 1; min-width: 0; }
.col-center .panel-3d { flex: 1.65; }
.col-center #panel-trend { flex: 1; }
.col-right #panel-warning { flex: 1.1; }

/* ---------- 面板 ---------- */
.panel {
  position: relative; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 0.04rem;
  box-shadow:
    inset 0 0 0.36rem rgba(0, 120, 255, 0.1),
    0 0.04rem 0.18rem rgba(0, 20, 60, 0.35);
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  clip-path: polygon(0 0.12rem, 0.12rem 0, 100% 0, 100% calc(100% - 0.12rem), calc(100% - 0.12rem) 100%, 0 100%);
}
.panel:hover {
  border-color: rgba(0, 220, 255, 0.7);
  box-shadow:
    inset 0 0 0.4rem rgba(0, 160, 255, 0.18),
    0 0 0.24rem rgba(0, 170, 255, 0.35);
  transform: translateY(-0.02rem);
}
/* 四角装饰 */
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, var(--main), var(--main)) left top / 0.22rem 1px no-repeat,
    linear-gradient(180deg, var(--main), var(--main)) left top / 1px 0.22rem no-repeat,
    linear-gradient(90deg, var(--main), var(--main)) right bottom / 0.22rem 1px no-repeat,
    linear-gradient(180deg, var(--main), var(--main)) right bottom / 1px 0.22rem no-repeat;
  opacity: 0.85;
}
/* 顶部扫光 */
.panel::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(0, 235, 255, 0.95), transparent);
  animation: panelSweep 4.5s ease-in-out infinite;
  pointer-events: none; z-index: 2;
}
@keyframes panelSweep {
  0% { left: -30%; opacity: 0; }
  15% { opacity: 1; }
  60% { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
.panel-header {
  flex: none; position: relative; z-index: 3;
  display: flex; align-items: center; gap: 0.09rem;
  padding: 0.09rem 0.14rem 0.07rem;
  border-bottom: 1px solid rgba(46, 126, 255, 0.22);
  background: linear-gradient(90deg, rgba(0, 120, 255, 0.2), rgba(0, 120, 255, 0.02) 65%, transparent);
}
.panel-title {
  font-family: var(--font-cn); font-size: 0.185rem; letter-spacing: 0.02rem;
  color: #f0fbff; position: relative; padding-left: 0.13rem; white-space: nowrap;
}
.panel-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0.045rem; height: 0.17rem;
  background: linear-gradient(180deg, var(--main), var(--blue));
  box-shadow: 0 0 0.1rem var(--main);
}
.panel-en {
  font-family: var(--font-num); font-size: 0.09rem; letter-spacing: 0.03rem;
  color: rgba(120, 170, 225, 0.5); white-space: nowrap;
}
.panel-tip { margin-left: auto; font-size: 0.1rem; color: rgba(120, 170, 225, 0.55); }
.panel-live {
  margin-left: auto; display: flex; align-items: center; gap: 0.06rem;
  font-family: var(--font-num); font-size: 0.1rem; color: #7ff5c4; letter-spacing: 0.02rem;
}
.panel-live i {
  width: 0.06rem; height: 0.06rem; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0.1rem var(--ok);
  animation: dotBlink 1.4s ease-in-out infinite;
}
.panel-body { position: relative; flex: 1; min-height: 0; }
.chart { width: 100%; height: 100%; }

/* ---------- KPI ---------- */
.kpi-row { flex: none; height: 1.0rem; display: flex; gap: 0.13rem; }
.kpi-card {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 0.14rem;
  background: linear-gradient(165deg, rgba(12, 52, 116, 0.8), rgba(3, 15, 40, 0.85));
  border: 1px solid var(--line);
  border-radius: 0.04rem;
  cursor: pointer;
  transition: all 0.3s;
}
.kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--main), transparent);
  box-shadow: 0 0 0.1rem var(--main);
}
.kpi-card::after {
  content: ""; position: absolute; right: -0.2rem; top: -0.3rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 190, 255, 0.22), transparent 65%);
}
.kpi-card:hover {
  border-color: rgba(0, 225, 255, 0.8); transform: translateY(-0.02rem);
  box-shadow: 0 0.05rem 0.22rem rgba(0, 140, 255, 0.35);
}
.kpi-label { font-size: 0.12rem; color: var(--sub); letter-spacing: 0.01rem; }
.kpi-num {
  font-family: var(--font-num); font-weight: 700;
  font-size: 0.3rem; line-height: 1.12; color: #fff;
  text-shadow: 0 0 0.18rem rgba(0, 210, 255, 0.85);
  white-space: nowrap;
}
.kpi-num .unit { font-family: var(--font-cn); font-size: 0.115rem; color: var(--sub); margin-left: 0.03rem; text-shadow: none; }
.kpi-foot { display: flex; align-items: center; gap: 0.06rem; margin-top: 0.02rem; }
.kpi-trend { font-size: 0.1rem; }
.kpi-trend.up { color: var(--ok); }
.kpi-trend.down { color: var(--danger); }
.kpi-bar { flex: 1; height: 0.025rem; background: rgba(70, 130, 220, 0.22); border-radius: 1px; overflow: hidden; }
.kpi-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--main));
  box-shadow: 0 0 0.06rem var(--main);
  transition: width 1.4s ease-out;
}

/* ---------- 3D 沙盘 ---------- */
.panel-3d { overflow: hidden; }
.city-body { overflow: hidden; }
.city-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(0, 140, 255, 0.12), transparent 70%);
}
.city-hud {
  position: absolute; top: 0.14rem; left: 0.16rem;
  display: flex; gap: 0.22rem; pointer-events: none;
}
.city-hud-item { display: flex; flex-direction: column; gap: 0.02rem; }
.city-hud-item span { font-size: 0.1rem; color: var(--sub); }
.city-hud-item b {
  font-family: var(--font-num); font-size: 0.19rem; color: #d8f4ff;
  text-shadow: 0 0 0.12rem rgba(0, 210, 255, 0.6);
}
.city-hud-item b i { font-style: normal; font-size: 0.095rem; color: var(--sub); margin-left: 0.02rem; }
.city-legend {
  position: absolute; left: 0.16rem; bottom: 0.62rem;
  display: flex; flex-direction: column; gap: 0.05rem; pointer-events: none;
}
.city-legend span { display: flex; align-items: center; gap: 0.06rem; font-size: 0.1rem; color: var(--sub); }
.city-legend .lg { width: 0.1rem; height: 0.04rem; border-radius: 1px; display: inline-block; }
.city-legend .lg.high { background: var(--main); box-shadow: 0 0 0.06rem var(--main); }
.city-legend .lg.mid { background: var(--blue); }
.city-legend .lg.low { background: var(--warn); }

.core-flow {
  position: absolute; left: 0; right: 0; bottom: 0.08rem;
  display: flex; align-items: center; justify-content: center; gap: 0.06rem;
  z-index: 4;
}
.flow-step {
  display: flex; align-items: center; gap: 0.05rem;
  font-family: var(--font-cn); font-size: 0.125rem; color: #d6efff;
  padding: 0.04rem 0.13rem;
  background: linear-gradient(180deg, rgba(14, 60, 130, 0.85), rgba(5, 22, 55, 0.85));
  border: 1px solid rgba(60, 160, 255, 0.5);
  border-radius: 0.18rem;
  cursor: pointer;
  transition: all 0.3s;
}
.flow-step:hover {
  border-color: var(--main); color: #fff;
  box-shadow: 0 0 0.14rem rgba(0, 210, 255, 0.6);
  transform: translateY(-0.01rem);
}
.flow-step .idx {
  width: 0.17rem; height: 0.17rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 0.095rem;
  background: linear-gradient(135deg, var(--blue), var(--main)); color: #02142e;
}
.flow-arrow { color: rgba(0, 224, 255, 0.6); font-size: 0.1rem; animation: arrowBlink 1.6s linear infinite; }
@keyframes arrowBlink { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- 人才结构 ---------- */
.talent-body { display: flex; align-items: center; }
.talent-body .chart { flex: 1.15; }
.talent-side {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 0.08rem; padding-right: 0.14rem;
}
.talent-item { display: flex; flex-direction: column; gap: 0.03rem; }
.talent-item-top { display: flex; align-items: baseline; justify-content: space-between; }
.talent-item-top span { font-size: 0.12rem; color: var(--sub); }
.talent-item-top b { font-family: var(--font-num); font-size: 0.15rem; color: #d9f3ff; }
.talent-item-top b i { font-style: normal; font-size: 0.095rem; color: var(--sub); }
.talent-track { height: 0.045rem; background: rgba(70, 130, 220, 0.18); border-radius: 1px; overflow: hidden; }
.talent-track i { display: block; height: 100%; transition: width 1.2s ease-out; }

/* ---------- 预警 ---------- */
.warning-body { overflow: hidden; }
.warning-scroll { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.warn-item {
  display: flex; align-items: center; gap: 0.09rem;
  padding: 0.09rem 0.14rem;
  border-bottom: 1px dashed rgba(60, 130, 230, 0.18);
  cursor: pointer; transition: background 0.25s;
}
.warn-item:hover { background: rgba(0, 140, 255, 0.14); }
.warn-dot { flex: none; width: 0.07rem; height: 0.07rem; border-radius: 50%; }
.warn-dot.high { background: var(--danger); box-shadow: 0 0 0.09rem var(--danger); animation: dotBlink 1s ease-in-out infinite; }
.warn-dot.mid { background: var(--warn); box-shadow: 0 0 0.08rem var(--warn); }
.warn-dot.low { background: var(--main); box-shadow: 0 0 0.08rem var(--main); }
.warn-content { flex: 1; min-width: 0; }
.warn-title { font-size: 0.135rem; color: #e6f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warn-meta { font-size: 0.1rem; color: rgba(127, 169, 220, 0.8); margin-top: 0.02rem; }
.warn-tag { flex: none; font-size: 0.1rem; padding: 0.015rem 0.07rem; border-radius: 0.02rem; }
.warn-tag.high { color: var(--danger); border: 1px solid rgba(255, 77, 106, 0.55); background: rgba(255, 77, 106, 0.1); }
.warn-tag.mid { color: var(--warn); border: 1px solid rgba(255, 176, 46, 0.55); background: rgba(255, 176, 46, 0.1); }
.warn-tag.low { color: var(--main); border: 1px solid rgba(0, 224, 255, 0.5); background: rgba(0, 224, 255, 0.08); }
.warn-badge {
  margin-left: auto; font-family: var(--font-num); font-size: 0.115rem; color: #fff;
  background: linear-gradient(135deg, #ff4d6a, #ff7a3d);
  border-radius: 0.14rem; padding: 0.01rem 0.09rem;
  box-shadow: 0 0 0.12rem rgba(255, 77, 106, 0.75);
}

/* ---------- 底部播报 ---------- */
.ticker {
  position: relative; z-index: 5; flex: none;
  height: 0.4rem; margin: 0 0.2rem 0.12rem;
  display: flex; align-items: center; gap: 0.14rem;
  padding: 0 0.16rem;
  font-size: 0.13rem; line-height: 1.2;
  background: linear-gradient(90deg, rgba(10, 46, 105, 0.8), rgba(4, 18, 45, 0.7));
  border: 1px solid rgba(46, 126, 255, 0.32);
  border-radius: 0.03rem;
  overflow: hidden;
}
.ticker-label {
  flex: none; font-family: var(--font-cn); font-size: 0.12rem; color: #00253f;
  background: linear-gradient(135deg, var(--main), #59b8ff);
  padding: 0.03rem 0.12rem; border-radius: 0.02rem;
  box-shadow: 0 0 0.12rem rgba(0, 210, 255, 0.55);
}
.ticker-view { flex: 1; overflow: hidden; position: relative; }
.ticker-track {
  display: inline-flex; gap: 0.6rem; white-space: nowrap;
  animation: tickerMove 46s linear infinite;
  font-size: 0.13rem; color: #c3e6ff;
  text-shadow: 0 0 0.08rem rgba(0, 180, 255, 0.35);
}
.ticker-track span { display: inline-flex; align-items: center; gap: 0.08rem; }
.ticker-track span::before {
  content: ""; width: 0.05rem; height: 0.05rem; background: var(--main);
  transform: rotate(45deg); box-shadow: 0 0 0.06rem var(--main);
}
@keyframes tickerMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-time { flex: none; font-family: var(--font-num); font-size: 0.12rem; color: var(--main); }

/* ==================== 弹窗 ==================== */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(1, 7, 20, 0.76);
  backdrop-filter: blur(0.05rem);
}
.modal-mask.show { display: flex; }
.modal {
  position: relative; width: 9.2rem; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(9, 42, 96, 0.97), rgba(2, 12, 34, 0.98));
  border: 1px solid rgba(0, 200, 255, 0.55);
  border-radius: 0.05rem;
  box-shadow: 0 0 0.6rem rgba(0, 140, 255, 0.5), inset 0 0 0.5rem rgba(0, 130, 255, 0.12);
  animation: modalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--main), var(--main)) left top / 0.3rem 2px no-repeat,
    linear-gradient(180deg, var(--main), var(--main)) left top / 2px 0.3rem no-repeat,
    linear-gradient(90deg, var(--main), var(--main)) right bottom / 0.3rem 2px no-repeat,
    linear-gradient(180deg, var(--main), var(--main)) right bottom / 2px 0.3rem no-repeat;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(0.3rem) scale(0.95); }
  to { opacity: 1; transform: none; }
}
.modal-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0.14rem 0.2rem;
  border-bottom: 1px solid rgba(0, 190, 255, 0.32);
  background: linear-gradient(90deg, rgba(0, 130, 255, 0.28), transparent 75%);
}
.modal-title {
  font-family: var(--font-cn); font-size: 0.24rem; color: #fff; letter-spacing: 0.02rem;
  text-shadow: 0 0 0.16rem rgba(0, 210, 255, 0.6);
}
.modal-close { font-size: 0.3rem; line-height: 1; color: var(--sub); cursor: pointer; transition: color 0.2s; }
.modal-close:hover { color: var(--danger); }
.modal-body { flex: 1; overflow-y: auto; padding: 0.16rem 0.2rem 0.2rem; }
.modal-body::-webkit-scrollbar { width: 0.05rem; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(0, 170, 255, 0.45); border-radius: 0.03rem; }
.msummary { display: flex; gap: 0.12rem; flex-wrap: wrap; margin-bottom: 0.14rem; }
.msummary .chip {
  font-size: 0.13rem; color: #cfeaff;
  background: linear-gradient(180deg, rgba(12, 58, 128, 0.9), rgba(5, 22, 55, 0.9));
  border: 1px solid rgba(60, 150, 255, 0.45);
  border-left: 2px solid var(--main);
  border-radius: 0.03rem; padding: 0.05rem 0.12rem;
}
.msummary .chip b {
  font-family: var(--font-num); font-size: 0.15rem; color: var(--main); margin-left: 0.05rem;
}
.mtable { width: 100%; border-collapse: collapse; }
.mtable th {
  font-family: var(--font-cn); font-size: 0.145rem; color: var(--main); text-align: left;
  padding: 0.08rem 0.1rem; white-space: nowrap;
  border-bottom: 1px solid rgba(0, 190, 255, 0.45);
  background: rgba(0, 120, 255, 0.1);
}
.mtable td {
  font-size: 0.135rem; color: #d5ecff;
  padding: 0.075rem 0.1rem;
  border-bottom: 1px dashed rgba(60, 130, 230, 0.18);
}
.mtable tr:hover td { background: rgba(0, 130, 255, 0.12); }
.mtable .num { font-family: var(--font-num); color: #90dcff; }