/* ==========================================================================
鸿祈大屏 · 统一视觉主题 v1（2026-09-12 立）
--------------------------------------------------------------------------
红线（与整个大屏一致）：
① 零外链 —— 字体只用系统自带，无 @import、无 CDN、无 canvas 依赖
② 令牌化 —— 各页只准用本文件变量，禁止再写裸色值
③ 性能 —— 动效一律走 transform / opacity（GPU 合成），
禁 setInterval 每帧重画；低配机可整档降级（body.fx-lite）
引入：
降级： URL 带 ?fx=lite 或给 body 加 class="fx-lite"
========================================================================== */
/* --------------------------------------------------------------------------
一、设计令牌
-------------------------------------------------------------------------- */
:root{
/* 底色阶：从最深到最亮，大屏所有背景只准从这里取 */
--bg-0:#04070F;
--bg-1:#071120;
--bg-2:#0B1A2E;
--bg-3:#10243C;
/* 描边 */
--line-1:rgba(0,180,255,.16);
--line-2:rgba(0,200,255,.45);
/* 语义色：**每个颜色都有唯一含义**，不许当装饰乱用 */
--cyan:#00D4FF; /* 当前项目 / 主强调 */
--teal:#22E6B8; /* 正常 · 已接入 */
--gold:#FFC247; /* 世界遗产 · 预警 */
--violet:#8B5CF6; /* 数据流 · 飞线 */
--red:#FF4D5E; /* 告警 */
/* 语义别名（写页面时用这个，别直接写 --cyan） */
--c-now:var(--cyan); /* 当前项目 */
--c-ok:var(--teal); /* 已接入监测 */
--c-heritage:var(--gold); /* 世界文化遗产 */
--c-flow:var(--violet); /* 数据流 */
--c-alarm:var(--red); /* 告警 */
--c-off:#5A7392; /* 未接入 */
/* 文字三级 */
--tx-1:#EAF4FF; /* 主信息：标题、数字 */
--tx-2:#93A9C4; /* 次信息：标签、说明 */
--tx-3:#5B7392; /* 弱信息：单位、脚注 */
/* ★ 字体（零外链，全部系统自带）
Bahnschrift 是 Windows 10+ 自带的可变字体，SemiCondensed 窄体最像工业仪表；
退到 DIN Alternate（部分 Win 也带）→ Consolas → 系统等宽。
★★ 关键暗功：数字必须走与中文不同的字体族，否则「4.24 MPa」和中文标签
糊成一片，远看完全没有仪表感。 */
--ff-num:"Bahnschrift SemiCondensed","Bahnschrift","DIN Alternate",
Consolas,"Cascadia Mono","MS Gothic",monospace;
--ff-cn:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
--ff-title:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
/* 字号阶 */
--fs-hero:40px; /* 首屏主角数字 */
--fs-num:34px; /* 指标卡主数字 */
--fs-num2:26px; /* 次级数字 */
--fs-title:15px; /* 面板标题 */
--fs-body:12.5px;
--fs-tag:10.5px; /* 标注（配 letter-spacing:2~3px） */
/* 发光（炫彩档；lite 档会被压掉） */
--glow-cyan:0 0 12px rgba(0,212,255,.55),0 0 32px rgba(0,212,255,.20);
--glow-teal:0 0 12px rgba(34,230,184,.55),0 0 32px rgba(34,230,184,.20);
--glow-gold:0 0 12px rgba(255,194,71,.55),0 0 32px rgba(255,194,71,.20);
--glow-red:0 0 12px rgba(255,77,94,.70),0 0 34px rgba(255,77,94,.28);
--txt-glow-cyan:0 0 10px rgba(0,212,255,.75),0 0 26px rgba(0,212,255,.35);
/* 节奏 */
--ease-out:cubic-bezier(.22,.68,.36,1);
--dur:600ms;
--breath:2.4s; /* 状态呼吸：正常 */
--breath-alarm:1s; /* 告警呼吸 */
/* 面板材质 */
--panel-bg:linear-gradient(158deg,rgba(11,26,46,.92) 0%,rgba(7,17,32,.86) 100%);
--panel-blur:blur(8px);
--corner:16px; /* 角标臂长 */
--corner-w:2px; /* 角标粗细 */
}
/* --------------------------------------------------------------------------
二、基础字体工具类
-------------------------------------------------------------------------- */
.hq-num{
font-family:var(--ff-num);
font-variant-numeric:tabular-nums; /* 等宽数字：跳数时不左右抖 */
font-feature-settings:"tnum" 1;
letter-spacing:.02em;
line-height:1;
}
.hq-num-unit{font-family:var(--ff-num);font-size:.42em;color:var(--tx-3);
letter-spacing:.08em;margin-left:3px;font-weight:400;}
.hq-cn{font-family:var(--ff-cn);}
.hq-tag{font-family:var(--ff-num);font-size:var(--fs-tag);letter-spacing:2.6px;
color:var(--tx-3);text-transform:uppercase;}
/* 渐变文字（白→青），用于主标题 */
.hq-title-grad{
background:linear-gradient(96deg,#FFFFFF 6%,#BEE9FF 42%,var(--cyan) 88%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 18px rgba(0,212,255,.35));
}
/* 发光数字（炫彩档：三层 shadow 叠出"灯牌"感） */
.hq-glow{ text-shadow:var(--txt-glow-cyan); }
.hq-glow-teal{ text-shadow:0 0 10px rgba(34,230,184,.75),0 0 26px rgba(34,230,184,.35); }
.hq-glow-gold{ text-shadow:0 0 10px rgba(255,194,71,.75),0 0 26px rgba(255,194,71,.35); }
.hq-glow-red{ text-shadow:0 0 10px rgba(255,77,94,.85),0 0 28px rgba(255,77,94,.40); }
/* --------------------------------------------------------------------------
三、装饰五件套
-------------------------------------------------------------------------- */
/* ① 四角 L 形角标 —— 用多重 linear-gradient 画，零额外 DOM */
.hq-corners{position:relative;}
.hq-corners::before,
.hq-corners::after,
.hq-corners>.hq-c4a,
.hq-corners>.hq-c4b{
content:"";position:absolute;width:var(--corner);height:var(--corner);
pointer-events:none;z-index:2;
}
.hq-corners::before{top:0;left:0;border-top:var(--corner-w) solid var(--cyan);
border-left:var(--corner-w) solid var(--cyan);
filter:drop-shadow(0 0 6px rgba(0,212,255,.85));}
.hq-corners::after{top:0;right:0;border-top:var(--corner-w) solid var(--cyan);
border-right:var(--corner-w) solid var(--cyan);
filter:drop-shadow(0 0 6px rgba(0,212,255,.85));}
.hq-corners>.hq-c4a{bottom:0;left:0;border-bottom:var(--corner-w) solid var(--cyan);
border-left:var(--corner-w) solid var(--cyan);
filter:drop-shadow(0 0 6px rgba(0,212,255,.85));}
.hq-corners>.hq-c4b{bottom:0;right:0;border-bottom:var(--corner-w) solid var(--cyan);
border-right:var(--corner-w) solid var(--cyan);
filter:drop-shadow(0 0 6px rgba(0,212,255,.85));}
/* 只用两个伪元素时的简化版（不带 两个子元素时） */
.hq-corners.hq-corners-2>.hq-c4a,
.hq-corners.hq-corners-2>.hq-c4b{display:none;}
/* 角标换色 */
.hq-corners.c-teal::before,.hq-corners.c-teal::after,
.hq-corners.c-teal>.hq-c4a,.hq-corners.c-teal>.hq-c4b{
border-color:var(--teal);filter:drop-shadow(0 0 6px rgba(34,230,184,.85));}
.hq-corners.c-gold::before,.hq-corners.c-gold::after,
.hq-corners.c-gold>.hq-c4a,.hq-corners.c-gold>.hq-c4b{
border-color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,194,71,.85));}
.hq-corners.c-red::before,.hq-corners.c-red::after,
.hq-corners.c-red>.hq-c4a,.hq-corners.c-red>.hq-c4b{
border-color:var(--red);filter:drop-shadow(0 0 6px rgba(255,77,94,.9));}
/* ② 标题栏 —— 3px 发光竖条 + 中文标题 + 右侧英文小字 */
.hq-titlebar{display:flex;align-items:center;gap:10px;position:relative;
padding:0 0 0 12px;min-height:22px;}
.hq-titlebar::before{content:"";position:absolute;left:0;top:50%;
transform:translateY(-50%);width:3px;height:14px;border-radius:1px;
background:var(--cyan);box-shadow:var(--glow-cyan);}
.hq-titlebar b{font-family:var(--ff-title);font-size:var(--fs-title);
font-weight:700;color:var(--tx-1);letter-spacing:1.4px;}
.hq-titlebar em{font-family:var(--ff-num);font-style:normal;
font-size:var(--fs-tag);letter-spacing:2.2px;color:var(--tx-3);margin-left:auto;}
.hq-titlebar.t-teal::before{background:var(--teal);box-shadow:var(--glow-teal);}
.hq-titlebar.t-gold::before{background:var(--gold);box-shadow:var(--glow-gold);}
.hq-titlebar.t-red::before{background:var(--red);box-shadow:var(--glow-red);}
/* ③ 同心雷达环 —— 三层环 + 旋转扫描扇（纯 CSS，GPU 合成） */
.hq-radar{position:absolute;pointer-events:none;border-radius:50%;
border:1px solid rgba(0,212,255,.13);}
.hq-radar::before{content:"";position:absolute;inset:18%;border-radius:50%;
border:1px solid rgba(0,212,255,.10);}
.hq-radar::after{content:"";position:absolute;inset:36%;border-radius:50%;
border:1px solid rgba(0,212,255,.08);}
.hq-radar>.hq-sweep-fan{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(from 0deg,rgba(0,212,255,.20) 0deg,
rgba(0,212,255,.06) 26deg,rgba(0,212,255,0) 62deg,rgba(0,212,255,0) 360deg);
animation:hqRotate 8s linear infinite;will-change:transform;}
@keyframes hqRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ④ 细网格底 —— 44px 格，中心向外淡出 */
.hq-grid{position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(0,180,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,180,255,.055) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 12%,transparent 78%);
mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 12%,transparent 78%);}
/* ⑤ 水印大字 —— 极低透明度的中/英文衬底，撑住画面不空 */
.hq-watermark{position:absolute;pointer-events:none;user-select:none;
font-family:var(--ff-num);font-weight:700;letter-spacing:.06em;
color:rgba(130,196,255,.075);white-space:nowrap;line-height:.86;}
/* --------------------------------------------------------------------------
四、常用构件
-------------------------------------------------------------------------- */
/* 面板（直角，不圆角 —— 圆角会立刻"软"掉，不像工程仪表） */
.hq-panel{position:relative;background:var(--panel-bg);
border:1px solid var(--line-1);backdrop-filter:var(--panel-blur);
-webkit-backdrop-filter:var(--panel-blur);}
/* 切角容器 clip-path */
.hq-cut{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),
calc(100% - 10px) 100%,0 100%,0 10px);}
.hq-cut-sm{clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),
calc(100% - 6px) 100%,0 100%,0 6px);}
/* 光扫：悬停时一道斜光从左扫到右（只动 transform，不触发布局） */
.hq-sweep{position:relative;overflow:hidden;}
.hq-sweep::after{content:"";position:absolute;top:-60%;left:-70%;width:46%;height:220%;
background:linear-gradient(90deg,transparent,rgba(190,235,255,.16),transparent);
transform:skewX(-22deg) translateX(0);opacity:0;pointer-events:none;
transition:transform .78s var(--ease-out),opacity .4s;}
.hq-sweep:hover::after{transform:skewX(-22deg) translateX(430%);opacity:1;}
/* 状态灯（呼吸） */
.hq-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
flex:none;vertical-align:middle;}
.hq-dot.on{background:var(--teal);box-shadow:0 0 8px rgba(34,230,184,.9);
animation:hqBreath var(--breath) ease-in-out infinite;}
.hq-dot.warn{background:var(--gold);box-shadow:0 0 8px rgba(255,194,71,.9);
animation:hqBreath var(--breath) ease-in-out infinite;}
.hq-dot.alarm{background:var(--red);box-shadow:0 0 10px rgba(255,77,94,.95);
animation:hqBreath var(--breath-alarm) ease-in-out infinite;}
.hq-dot.off{background:var(--tx-3);}
/* 徽标 */
.hq-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
font-family:var(--ff-num);font-size:var(--fs-tag);letter-spacing:1.4px;
border:1px solid var(--line-1);color:var(--tx-2);background:rgba(9,32,58,.6);}
.hq-badge.b-cyan{border-color:rgba(0,212,255,.42);color:#9FE6FF;
background:rgba(0,212,255,.10);}
.hq-badge.b-teal{border-color:rgba(34,230,184,.42);color:#A6F2DE;
background:rgba(34,230,184,.10);}
.hq-badge.b-gold{border-color:rgba(255,194,71,.42);color:#FFE0A6;
background:rgba(255,194,71,.10);}
/* 指标卡（大屏最常见的构件） */
.hq-kpi{position:relative;padding:9px 13px;border:1px solid var(--line-1);
background:linear-gradient(158deg,rgba(11,26,46,.72),rgba(7,17,32,.52));}
.hq-kpi .k-lab{font-family:var(--ff-cn);font-size:11px;color:var(--tx-2);
letter-spacing:.6px;}
.hq-kpi .k-val{font-family:var(--ff-num);font-size:var(--fs-num);font-weight:700;
color:var(--tx-1);letter-spacing:.02em;line-height:1.06;
font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px;}
.hq-kpi .k-val.v-cyan{color:#EAF7FF;text-shadow:var(--txt-glow-cyan);}
.hq-kpi .k-val.v-teal{color:#DDFBF3;
text-shadow:0 0 10px rgba(34,230,184,.75),0 0 26px rgba(34,230,184,.32);}
.hq-kpi .k-val.v-gold{color:#FFF3D8;
text-shadow:0 0 10px rgba(255,194,71,.75),0 0 26px rgba(255,194,71,.32);}
/* --------------------------------------------------------------------------
五、动效库（全部 transform/opacity，GPU 合成）
-------------------------------------------------------------------------- */
/* 呼吸（状态灯、重点数字） */
@keyframes hqBreath{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.52;transform:scale(.90);}
}
/* 告警脉冲（向外扩散的光圈，用 box-shadow 会重绘；这里用 scale+opacity 的伪元素） */
@keyframes hqPulse{
0%{transform:scale(.62);opacity:.85;}
70%{transform:scale(1.5);opacity:0;}
100%{transform:scale(1.5);opacity:0;}
}
/* 扫描线（视频空态 / 面板装饰） */
@keyframes hqScanY{
0%{transform:translateY(-100%);}
100%{transform:translateY(1100%);}
}
/* 流动虚线（管线 / 飞线底座） */
@keyframes hqDash{
to{stroke-dashoffset:-64;}
}
/* 生长（面板/列表进场：向右展开 + 淡入） */
@keyframes hqRise{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes hqWipe{
from{opacity:0;transform:translateX(-14px);}
to{opacity:1;transform:translateX(0);}
}
/* 数据流（沿 X 匀速平移，配 background-size 做流动光带） */
@keyframes hqFlow{
to{background-position:220% 0;}
}
.hq-ani-rise{animation:hqRise 600ms var(--ease-out) both;}
.hq-ani-wipe{animation:hqWipe 600ms var(--ease-out) both;}
/* 依次进场：给同一批元素加 data-i 或用 nth-child 延时 */
.hq-stagger>*{animation:hqRise 600ms var(--ease-out) both;}
.hq-stagger>*:nth-child(1){animation-delay:40ms}
.hq-stagger>*:nth-child(2){animation-delay:110ms}
.hq-stagger>*:nth-child(3){animation-delay:180ms}
.hq-stagger>*:nth-child(4){animation-delay:250ms}
.hq-stagger>*:nth-child(5){animation-delay:320ms}
.hq-stagger>*:nth-child(6){animation-delay:390ms}
.hq-stagger>*:nth-child(7){animation-delay:460ms}
.hq-stagger>*:nth-child(8){animation-delay:530ms}
/* 顶部滚动光带（标题栏装饰，一个元素搞定） */
.hq-beam{position:absolute;left:0;right:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(0,212,255,0) 12%,
rgba(0,212,255,.75) 50%,rgba(0,212,255,0) 88%,transparent);
background-size:220% 100%;animation:hqFlow 5.5s linear infinite;}
/* --------------------------------------------------------------------------
六、降级档（低配机 / 老板本机跑 62M 泼溅点时）
-------------------------------------------------------------------------- */
body.fx-lite .hq-ani-rise,
body.fx-lite .hq-ani-wipe,
body.fx-lite .hq-stagger>*,
body.fx-lite .hq-dot,
body.fx-lite .hq-radar>.hq-sweep-fan,
body.fx-lite .hq-beam{animation:none!important;}
body.fx-lite .hq-beam{opacity:.5;}
body.fx-lite .hq-sweep::after{display:none;}
body.fx-lite .hq-glow,
body.fx-lite .hq-glow-teal,
body.fx-lite .hq-glow-gold,
body.fx-lite .hq-glow-red,
body.fx-lite .hq-kpi .k-val{text-shadow:none;}
body.fx-lite .hq-title-grad{filter:none;}
body.fx-lite .hq-corners::before,body.fx-lite .hq-corners::after,
body.fx-lite .hq-corners>.hq-c4a,body.fx-lite .hq-corners>.hq-c4b{filter:none;}
@media (prefers-reduced-motion:reduce){
.hq-ani-rise,.hq-ani-wipe,.hq-stagger>*,.hq-dot,
.hq-radar>.hq-sweep-fan,.hq-beam{animation:none!important;}
}