/* ══════════════════════════════════════════════════════════════
   科技感主题层 · Tech Skin
   ──────────────────────────────────────────────────────────────
   加载顺序在 app.css 之后，只做「覆盖 + 增强」，不改动既有结构类名，
   因此任何页面（含尚未改版的老视图）都能整体获益，不会局部失效。

   设计取向（响应"既然是智能数算实验室，应该更加科技感"）：
     · 深空底色 + 青蓝光晕：把浅灰后台感换成数算中枢感
     · 网格底纹 + 扫描线：给出"算力在跑"的持续动感
     · 玻璃拟态卡片 + 顶部渐隐光条：层次靠光而非靠重阴影
     · 数据用等宽字体 + 发光数字：读数更像仪表
   ══════════════════════════════════════════════════════════════ */
:root{
  /* 科技感主色：由政务蓝转为青蓝（cyan→blue）光谱 */
  --p:#2b6cff; --p-deep:#1a4fd6; --p-soft:rgba(43,108,255,.09); --p-line:rgba(43,108,255,.28);
  --neon:#22d3ee; --neon-2:#4f7dff; --neon-3:#a855f7;
  /* 深空底色体系 */
  --bg:#070c18; --surface:rgba(19,28,48,.82); --surface-2:rgba(26,37,62,.62);
  --solid:#0f1729; --solid-2:#152040;
  --t1:#e8eefb; --t2:#93a4c4; --t3:#6a7a9c; --t4:#4a5878;
  --line:rgba(120,160,230,.16); --line-2:rgba(120,160,230,.10);
  --grid-line:rgba(90,140,220,.075);
  /* 侧栏改为更深的中枢色 */
  --nav-bg:#060a14; --nav-bg2:#0b1428; --nav-t:#8fa1c2; --nav-t-on:#eaf2ff; --nav-hover:rgba(80,140,255,.12);
  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
  --glow-p:0 0 18px rgba(43,108,255,.42);
  --glow-neon:0 0 20px rgba(34,211,238,.42);
}

/* ─────────── 全局底色：深空 + 双层网格 + 顶部光晕 ─────────── */
body{
  background:var(--bg)!important;color:var(--t1);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(43,108,255,.20), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(168,85,247,.14), transparent 60%),
    radial-gradient(700px 420px at 50% 108%, rgba(34,211,238,.10), transparent 62%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px)!important;
  background-size:auto,auto,auto,44px 44px,44px 44px!important;
  background-attachment:fixed!important;
}
/* 极细扫描线，给"算力持续在跑"的观感；pointer-events:none 不挡交互 */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(120,180,255,.028) 0 1px, transparent 1px 3px);
  animation:scan 9s linear infinite;
}
@keyframes scan{from{background-position-y:0}to{background-position-y:60px}}
#app{position:relative;z-index:1}
#toasts{z-index:999}

::-webkit-scrollbar-thumb{background:rgba(120,170,255,.26);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(120,170,255,.44);background-clip:content-box}

/* ─────────── 侧栏：品牌区发光 + 分组竖线 + 菜单项科技化 ─────────── */
.nav{background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg2))!important;
  border-right:1px solid var(--line);box-shadow:inset -1px 0 0 rgba(90,150,255,.10)}
.nav::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),transparent)}
.nav-brand{border-bottom:1px solid var(--line)!important;position:relative}
.nav-brand::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(43,108,255,.7),transparent)}
.nav-mark{background:linear-gradient(135deg,#22d3ee,#2b6cff 55%,#a855f7)!important;
  box-shadow:0 0 0 1px rgba(120,200,255,.28), 0 6px 22px rgba(43,108,255,.5)!important;
  position:relative;overflow:hidden}
.nav-mark::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.nav-brand b{text-shadow:0 0 14px rgba(120,200,255,.4)}
.nav-brand small{color:rgba(140,200,255,.62)!important;letter-spacing:2.2px}
/* 分组标题：前置发光短杠 */
.nav-group>span{color:rgba(140,180,240,.42)!important;letter-spacing:1.8px;position:relative;padding-left:20px}
.nav-group>span::before{content:'';position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon)}
/* 菜单项：左侧能量条 + 悬停滑动光 */
.nav-item{border-radius:10px!important;border:1px solid transparent;position:relative;overflow:hidden;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.nav-item::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(34,211,238,.22),transparent);transition:width .28s}
.nav-item:hover{background:var(--nav-hover)!important;color:var(--nav-t-on)!important;
  border-color:rgba(90,150,255,.22);transform:translateX(2px)}
.nav-item:hover::after{width:100%}
.nav-item:hover svg{stroke:var(--neon);filter:drop-shadow(0 0 5px rgba(34,211,238,.6))}
.nav-item.on{background:linear-gradient(90deg,rgba(43,108,255,.34),rgba(34,211,238,.10) 62%,transparent)!important;
  border-color:rgba(90,160,255,.42)!important;box-shadow:inset 0 0 22px rgba(43,108,255,.22), 0 0 16px rgba(43,108,255,.20)!important}
.nav-item.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--neon),var(--neon-2));
  box-shadow:0 0 12px var(--neon)}
.nav-item.on svg{stroke:var(--neon);filter:drop-shadow(0 0 6px rgba(34,211,238,.75))}
.nav-item.on .label{color:#fff;text-shadow:0 0 12px rgba(120,200,255,.55)}
.nav-item .badge{background:linear-gradient(135deg,var(--neon),var(--neon-2))!important;color:#04121f!important;
  font-weight:700;box-shadow:0 0 12px rgba(34,211,238,.65)}
.nav-foot{border-top:1px solid var(--line)!important;color:rgba(140,180,240,.42)!important;
  background:linear-gradient(180deg,transparent,rgba(43,108,255,.06))}

/* ─────────── 顶栏：玻璃拟态 + 底部光带 ─────────── */
.top{background:rgba(11,20,38,.82)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)!important;position:sticky;top:0;z-index:50}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),rgba(43,108,255,.5),transparent)}
.top-toggle{background:rgba(43,108,255,.10)!important;border-color:var(--line)!important;color:var(--t2)}
.top-toggle:hover{border-color:var(--p-line)!important;background:rgba(43,108,255,.22)!important;
  box-shadow:var(--glow-p)}
.top-toggle svg{stroke:var(--t2)}
.crumb b{color:var(--t1)}
.crumb .sub{color:var(--t3)}
.domain-tabs{background:rgba(9,16,32,.7)!important;border:1px solid var(--line)!important;
  backdrop-filter:blur(8px);border-radius:11px}
.domain-tabs button{color:var(--t2)}
.domain-tabs button.on{background:linear-gradient(135deg,rgba(43,108,255,.34),rgba(34,211,238,.16))!important;
  color:#fff!important;box-shadow:inset 0 0 0 1px rgba(120,180,255,.32), 0 0 14px rgba(43,108,255,.35)!important}
.top-live{background:rgba(13,148,136,.16)!important;border-color:rgba(34,211,238,.34)!important;
  color:#5eead4!important;box-shadow:0 0 14px rgba(34,211,238,.18) inset}
.top-live .dot{background:#22d3ee;box-shadow:0 0 9px #22d3ee}
.top-live.off{background:rgba(90,110,150,.14)!important;border-color:var(--line)!important;color:var(--t3)!important}
.top-live.off .dot{background:var(--t3);box-shadow:none}
.top-user:hover{background:rgba(43,108,255,.14)!important;border-color:var(--p-line)!important}
.avatar{background:linear-gradient(135deg,#22d3ee,#2b6cff 60%,#a855f7)!important;
  box-shadow:0 0 0 1px rgba(120,200,255,.3), 0 4px 14px rgba(43,108,255,.45)}
.top-user .who b{color:var(--t1)}
.top-user .who small{color:var(--t3)}
.menu{background:rgba(15,24,44,.97)!important;border:1px solid var(--line)!important;
  backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.6)!important}
.menu button{color:var(--t1)!important}
.menu button:hover{background:rgba(43,108,255,.2)!important;color:#fff!important}
.menu .sep{background:var(--line)!important}

/* ─────────── 卡片：玻璃 + 顶部光条 + 悬停升辉 ─────────── */
.card,.kpi{background:linear-gradient(160deg,rgba(24,36,62,.88),rgba(13,21,38,.92))!important;
  border:1px solid var(--line)!important;backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(150,200,255,.05) inset, 0 12px 34px rgba(0,0,0,.38)!important;
  position:relative;overflow:hidden}
.card::before,.kpi::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),rgba(43,108,255,.55),transparent);opacity:.85}
.card{transition:border-color .22s,box-shadow .22s,transform .22s}
.card:hover{border-color:rgba(90,160,255,.30)!important;
  box-shadow:0 1px 0 rgba(150,200,255,.07) inset, 0 18px 46px rgba(0,0,0,.46), 0 0 26px rgba(43,108,255,.14)!important}
.card-h{border-bottom:1px solid var(--line-2)!important;background:linear-gradient(180deg,rgba(43,108,255,.07),transparent)}
.card-h h3{color:var(--t1);position:relative;padding-left:11px;letter-spacing:.3px}
.card-h h3::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--neon),var(--neon-2));
  box-shadow:0 0 9px rgba(34,211,238,.75)}
.card-h .h-sub{color:var(--t3)}
.card-b{color:var(--t1)}

/* KPI：数字发光 + 角标光晕 */
.kpi::after{background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%)!important;opacity:1!important;
  right:-24px;top:-24px;width:82px;height:82px}
.kpi .k-top{color:var(--t2)!important}
.kpi .k-ico{background:rgba(43,108,255,.18);box-shadow:0 0 12px rgba(43,108,255,.28) inset}
.kpi .k-val{color:#fff!important;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(90,180,255,.52)}
.kpi .k-val small{color:var(--t3)!important}

/* ─────────── 表格：深色斑马 + 悬停发光行 ─────────── */
table{color:var(--t1)}
thead th{background:rgba(43,108,255,.10)!important;color:var(--t2)!important;
  border-bottom:1px solid var(--line)!important;letter-spacing:.3px}
tbody tr{border-bottom:1px solid var(--line-2)!important;transition:background .16s}
tbody tr:hover{background:rgba(43,108,255,.13)!important;box-shadow:inset 3px 0 0 var(--neon)}
td{color:var(--t1)}
.pager{border-top:1px solid var(--line-2)!important;color:var(--t2)}

/* ─────────── 表单控件 ─────────── */
.field>label{color:var(--t2)!important}
.field input,.field select,.field textarea,
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  background:rgba(9,16,32,.66)!important;border-color:var(--line)!important;color:var(--t1)!important}
.field input::placeholder,.field textarea::placeholder,input::placeholder{color:var(--t4)!important}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  border-color:rgba(34,211,238,.6)!important;background:rgba(9,16,32,.9)!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.16)!important;outline:none}
.field select option,select option{background:#0f1729;color:var(--t1)}
.field .hint{color:var(--t3)}

/* ─────────── 按钮：主按钮能量渐变 + 悬停发光 ─────────── */
.btn{background:rgba(24,36,62,.7)!important;border-color:var(--line)!important;color:var(--t1)!important}
.btn:hover{border-color:rgba(34,211,238,.45)!important;background:rgba(43,108,255,.20)!important;color:#fff!important;
  box-shadow:0 0 16px rgba(43,108,255,.3)}
.btn.pri{background:linear-gradient(135deg,#22d3ee,#2b6cff 58%,#4f7dff)!important;border-color:transparent!important;
  color:#04121f!important;font-weight:600;box-shadow:0 4px 16px rgba(43,108,255,.45)!important}
.btn.pri:hover{box-shadow:0 6px 26px rgba(34,211,238,.55)!important;color:#04121f!important;
  background:linear-gradient(135deg,#3ee0f7,#3a7aff 58%,#6b93ff)!important}
.btn.danger{border-color:rgba(225,29,72,.45)!important;color:#fb7185!important;background:rgba(225,29,72,.10)!important}
.btn.danger:hover{background:rgba(225,29,72,.22)!important;color:#fda4af!important}
.btn.ok{border-color:rgba(34,211,238,.42)!important;color:#5eead4!important;background:rgba(13,148,136,.14)!important}
.btn.ok:hover{background:rgba(13,148,136,.26)!important}

/* ─────────── 标签 / 分段控件 / 状态块 ─────────── */
.tag{background:rgba(43,108,255,.14)!important;border-color:rgba(43,108,255,.3)!important;color:#a8c4ff!important}
.tag.pri{background:rgba(43,108,255,.18)!important;color:#a8c4ff!important;border-color:rgba(43,108,255,.38)!important}
.tag.red{background:rgba(225,29,72,.16)!important;color:#fb7185!important;border-color:rgba(225,29,72,.36)!important}
.tag.orange{background:rgba(245,158,11,.16)!important;color:#fbbf24!important;border-color:rgba(245,158,11,.36)!important}
.tag.green{background:rgba(13,148,136,.18)!important;color:#5eead4!important;border-color:rgba(34,211,238,.34)!important}
.tag.purple{background:rgba(168,85,247,.18)!important;color:#c4b5fd!important;border-color:rgba(168,85,247,.36)!important}
.tag.blue{background:rgba(43,108,255,.18)!important;color:#93c5fd!important;border-color:rgba(43,108,255,.38)!important}
.tag.cyan{background:rgba(34,211,238,.16)!important;color:#67e8f9!important;border-color:rgba(34,211,238,.36)!important}
.tag.solid{color:#04121f!important}
.seg{background:rgba(9,16,32,.66)!important;border-color:var(--line)!important}
.seg button{color:var(--t2)}
.seg button.on{background:linear-gradient(135deg,rgba(43,108,255,.32),rgba(34,211,238,.16))!important;
  color:#fff!important;box-shadow:inset 0 0 0 1px rgba(120,180,255,.3)!important}
.stat{background:linear-gradient(160deg,rgba(26,37,62,.66),rgba(13,21,38,.72))!important;
  border-color:var(--line-2)!important}
.stat .l{color:var(--t3)!important}
.stat .v{color:#fff!important;text-shadow:0 0 16px rgba(90,180,255,.36)}
.stat .v small{color:var(--t3)!important}

/* ─────────── 抽屉 / 弹窗 ─────────── */
.drawer{background:linear-gradient(180deg,rgba(15,24,44,.99),rgba(9,16,32,.99))!important;
  border-left:1px solid var(--line);box-shadow:-16px 0 60px rgba(0,0,0,.62)!important;backdrop-filter:blur(18px)}
.modal{background:linear-gradient(160deg,rgba(20,31,54,.99),rgba(11,18,34,.99))!important;
  border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.7)!important;backdrop-filter:blur(18px)}
.modal .m-h{border-bottom:1px solid var(--line-2);color:var(--t1)}
.modal .m-f{border-top:1px solid var(--line-2)}
.mask{background:rgba(3,7,15,.72)!important;backdrop-filter:blur(4px)}
.toast{background:rgba(15,24,44,.96)!important;border:1px solid var(--line)!important;color:var(--t1)!important;
  backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.6)!important}
.toast.ok{border-color:rgba(34,211,238,.5)!important}
.toast.err{border-color:rgba(225,29,72,.5)!important}
.toast.warn{border-color:rgba(245,158,11,.5)!important}

/* ─────────── 图表容器：网格底噪，读数像仪表盘 ─────────── */
.chart{background:
  linear-gradient(rgba(90,140,220,.05) 1px,transparent 1px) 0 0/100% 28px,
  linear-gradient(90deg,rgba(90,140,220,.05) 1px,transparent 1px) 0 0/28px 100%;
  border-radius:var(--r-sm)}
.map-wrap{background:rgba(6,10,20,.9)!important;border-radius:var(--r-sm);overflow:hidden}
.map-legend,.map-tools{background:rgba(15,24,44,.92)!important;border:1px solid var(--line)!important;
  color:var(--t1)!important;backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,.5)!important}

/* ─────────── 等宽读数 / 代码 / 证据 ─────────── */
.mono,.code,code,pre{font-family:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace!important}
.mono{color:#93c5fd;letter-spacing:.2px}

/* ─────────── 其他中性件 ─────────── */
.divider{background:var(--line)!important}
.muted{color:var(--t3)}
.bar{background:rgba(9,16,32,.7)!important}
.bar i{box-shadow:0 0 10px rgba(43,108,255,.4)}
.view-head h2{color:#fff;text-shadow:0 0 24px rgba(90,180,255,.34)}
.view-head p{color:var(--t2)}
.loading,.empty{color:var(--t3)}
a{color:#7dd3fc}

/* ─────────── 导航重构：分组头（中英双行）+ 菜单项（图标块 + 主副标题） ─────────── */
.ng-head{display:flex;align-items:baseline;gap:7px;padding:0 12px 3px;
  position:relative;padding-left:20px}
.ng-head::before{content:'';position:absolute;left:11px;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.ng-cn{font-size:11.5px;font-weight:600;color:rgba(180,212,255,.78);letter-spacing:1.1px;white-space:nowrap}
.ng-en{font-size:8.5px;letter-spacing:1.4px;color:rgba(130,170,225,.34);white-space:nowrap}
.ng-hint{font-size:10px;color:rgba(130,170,225,.30);padding:0 12px 7px 20px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* 覆盖旧的单行分组标题规则，避免两条样式打架 */
.nav-group>span{display:none!important}
.nav-group{margin-top:13px}

/* 菜单项：图标独立成块，右侧主标题 + 副标题 */
.nav-item{height:auto!important;min-height:44px;padding:7px 10px!important;gap:10px!important;align-items:center}
.nav-item .ni-ico{width:29px;height:29px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(120,180,255,.09);border:1px solid rgba(120,180,255,.14);
  transition:background .2s,border-color .2s,box-shadow .2s}
.nav-item .ni-ico svg{width:15px;height:15px}
.nav-item .ni-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-item .ni-txt .label{font-size:13px;line-height:1.25;display:block}
.nav-item .ni-sub{font-size:9.5px;color:rgba(140,175,225,.42);line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.nav-item:hover .ni-ico{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.42);
  box-shadow:0 0 14px rgba(34,211,238,.28)}
.nav-item:hover .ni-sub{color:rgba(160,210,255,.68)}
.nav-item.on .ni-ico{background:linear-gradient(135deg,rgba(34,211,238,.30),rgba(43,108,255,.28));
  border-color:rgba(120,200,255,.5);box-shadow:0 0 16px rgba(34,211,238,.42)}
.nav-item.on .ni-sub{color:rgba(180,215,255,.7)}
/* 折叠态：只留图标块，副标题一并藏掉 */
.nav.min .nav-item{justify-content:center;padding:7px 0!important}
.nav.min .nav-item .ni-txt{display:none}

/* 侧栏底部状态栏（替代原来的单行版本号） */
.nav-foot{padding:10px 13px 12px!important}
.nf-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:10.5px;white-space:nowrap}
.nf-dot{width:5px;height:5px;border-radius:50%;flex:none;background:rgba(140,175,225,.35)}
.nf-dot.on{background:#22d3ee;box-shadow:0 0 8px #22d3ee}
.nf-k{color:rgba(140,175,225,.5)}
.nf-v{margin-left:auto;color:rgba(190,220,255,.78);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.nf-ver{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.9px;color:rgba(130,170,225,.34)}


/* ─────────── 表格内"轻可视化"积木 ───────────
   ★ 为什么不用 ECharts：表格里每格一个 canvas，几百行就是几百个实例，
   初始化与滚动重绘都会拖垮页面。以下四个组件用纯 DOM + inline style 实现，
   零实例、零依赖、可无限复用；只承载"一眼看量级"的信息。
   凡是需要坐标轴/提示框/缩放交互的，仍然交给 ECharts。
   —— 与 ui.js 的 miniBar / miniStack / miniRing / miniLv 一一对应。 */

/* 单元格内小型条形：底槽 + 填充 + 文字压在条上（保证窄列也读得清数值） */
.mbar{position:relative;height:19px;border-radius:5px;overflow:hidden;
  background:rgba(120,160,220,.11);border:1px solid rgba(120,160,220,.13)}
.mbar>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;opacity:.72;
  transition:width .55s cubic-bezier(.3,.9,.3,1)}
.mbar>span{position:absolute;left:7px;right:6px;top:50%;transform:translateY(-50%);
  font-size:11px;font-variant-numeric:tabular-nums;color:#e8eefb;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* 单元格内堆叠条：用于"总数 = 正常 + 异常"这类构成，比两个孤立数字直观 */
.mstack{display:flex;height:13px;border-radius:4px;overflow:hidden;gap:1px;
  background:rgba(120,160,220,.09)}
.mstack>i{display:block;height:100%;transition:width .55s cubic-bezier(.3,.9,.3,1)}

/* 单元格内环形占比：22px 见方，可与文字并排 */
.mring{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.mring svg{flex:none}
.mring b{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:#cfe0ff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 单元格内等级色块：把 lvTag 压扁成一行高度，用于高密度表格。
   类名与 L.levelCls() 一致（crit / high / mid / low），并保留中文别名的容错。 */
.mlv{display:inline-block;padding:1px 7px;border-radius:5px;font-size:10.5px;font-weight:600;
  line-height:1.55;white-space:nowrap}
.mlv.crit,.mlv.high,.mlv.极高,.mlv.高{background:rgba(244,63,94,.16);color:#fda4af}
.mlv.mid,.mlv.中{background:rgba(245,158,11,.16);color:#fcd34d}
.mlv.low,.mlv.低{background:rgba(34,211,238,.14);color:#67e8f9}
/* 色块 + 数值并排时用（app.css 只有 mt* 一套外边距工具类，缺左间距的） */
.ml6{margin-left:6px}
/* 表格上方的一行小结：与表头同宽，弱化到"注释"级别，不抢表格本身的注意力 */
.tbl-cap{padding:0 2px 6px;color:var(--t3)}
.tbl-cap b{color:#cfe0ff;font-variant-numeric:tabular-nums}
/* 一屏速览：六类证据并排一行，窄屏自动换行 */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:rgba(120,160,220,.13);border:1px solid rgba(120,160,220,.13);
  border-radius:10px;overflow:hidden;margin-top:12px}
.gl-cell{background:linear-gradient(160deg,rgba(26,37,62,.55),rgba(13,21,38,.6));padding:9px 12px;min-width:0}
.gl-cell .gl-t{font-size:11.5px;color:var(--t3);margin-bottom:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gl-cell .gl-v{min-height:22px;display:flex;align-items:center}
.gl-cell .gl-s{margin-top:3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ─────────── 选区细节 ─────────── */
::selection{background:rgba(34,211,238,.32);color:#fff}