/* ============================================================
* Monitor HUD Theme - 鏅烘収璺伅鐩戞帶涓績 HUD 鐨偆
* 鏉ユ簮锛氭闈?11.css锛屼綔鐢ㄥ煙鍒?.hud-shell锛岄伩鍏嶆薄鏌撴棫鏍峰紡
* 涓儴 .map 鐢ㄤ綔 Three.js #canvas-container 鐨勫鍣? * ============================================================ */
/* ---- 浣滅敤鍩?reset ---- */
.hud-shell,
.hud-shell *,
.hud-shell *::before,
.hud-shell *::after {
box-sizing: border-box;
}
.hud-shell button,
.hud-shell a {
font: inherit;
}
/* ---- HUD 婵€娲绘椂閬斀鏃?UI ---- */
body.hud-active {
overflow: hidden;
}
/* HUD 激活时隐藏旧版 UI 元素 */
body.hud-active #leftUnifiedPanel,
body.hud-active #rightUnifiedPanel,
body.hud-active .right-unified-panel,
body.hud-active .top-header,
body.hud-active .bottom-bar,
body.hud-active .laser-emitter-left,
body.hud-active .laser-emitter-right,
body.hud-active .laser-beam,
body.hud-active .print-particle {
display: none !important;
}
/* 涓诲３锛氳鐩栨暣涓鍙ｏ紝鍙犲姞鍦?Three.js 鐢诲竷涓?*/
.hud-shell {
position: fixed;
inset: 0;
z-index: 50;
width: 100vw;
height: 100vh;
min-width: 1180px;
min-height: 650px;
overflow: hidden;
font-family: "Microsoft YaHei", Arial, sans-serif;
color: #dff6ff;
pointer-events: none;
background:
linear-gradient(rgba(82, 194, 255, .025) 1px, transparent 1px),
linear-gradient(90deg, rgba(82, 194, 255, .025) 1px, transparent 1px),
radial-gradient(circle at 50% 35%, rgba(41, 178, 255, .08), transparent 50%);
background-size: 36px 36px, 36px 36px, auto;
}
/* 璁╅潰鏉?鎸夐挳鎺ユ敹浜嬩欢锛屼絾涓儴鐢诲竷閫氳 */
.hud-shell > .topbar,
.hud-shell > .tabs,
.hud-shell > .rail,
.hud-shell > .dock,
.hud-shell > .hud-device-switch {
pointer-events: auto;
}
/* .map 是透明全屏容器，本身不拦截事件，子元素各自设 pointer-events */
.hud-shell::before,
.hud-shell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.hud-shell::before {
background:
linear-gradient(90deg, rgba(2, 16, 36, .25), transparent 18%, transparent 82%, rgba(2, 16, 36, .25)),
linear-gradient(0deg, rgba(1, 9, 22, .35), transparent 22%, transparent 100%);
}
.hud-shell::after {
border: 1px solid rgba(0, 183, 255, .22);
box-shadow:
inset 0 0 32px rgba(0, 166, 255, .12),
inset 0 0 90px rgba(0, 11, 29, .22);
}
.hud-shell .topbar {
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
height: 72px;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 24px 0;
background: linear-gradient(180deg, rgba(0, 26, 62, .88), rgba(0, 26, 62, .14));
border-bottom: 1px solid rgba(61, 181, 255, .45);
}
.hud-shell .topbar::before,
.hud-shell .topbar::after {
content: "";
position: absolute;
bottom: -1px;
width: 31%;
height: 1px;
background: linear-gradient(90deg, transparent, #45c8ff, transparent);
box-shadow: 0 0 12px rgba(69, 200, 255, .9);
}
.hud-shell .topbar::before {
left: 0;
}
.hud-shell .topbar::after {
right: 0;
}
.hud-shell .brand {
position: absolute;
top: 0;
left: 50%;
width: 580px;
height: 72px;
transform: translateX(-50%);
text-align: center;
background:
linear-gradient(90deg, transparent, rgba(20, 111, 194, .72), transparent),
linear-gradient(180deg, rgba(14, 79, 151, .88), rgba(6, 36, 82, .45));
/* 姊舰锛氫笂瀹戒笅绐?*/
clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
filter: drop-shadow(0 0 18px rgba(33, 164, 255, .65));
overflow: visible;
}
.hud-shell .brand::before,
.hud-shell .brand::after {
content: "";
position: absolute;
top: 17px;
width: 84px;
height: 1px;
background: linear-gradient(90deg, transparent, #7fe3ff);
}
.hud-shell .brand::before {
left: 24px;
}
.hud-shell .brand::after {
right: 24px;
transform: scaleX(-1);
}
.hud-shell .brand h1 {
position: relative;
z-index: 2;
margin: 6px 0 0;
font-size: 31px;
line-height: 1;
letter-spacing: 8px;
color: #ffffff;
text-shadow:
0 0 6px rgba(120, 220, 255, .85),
0 0 14px rgba(45, 175, 255, .55);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-weight: 700;
}
.hud-shell .brand h1::before,
.hud-shell .brand h1::after {
content: "";
position: absolute;
top: 50%;
width: 74px;
height: 1px;
background: linear-gradient(90deg, transparent, #89efff, transparent);
box-shadow: 0 0 10px rgba(137, 239, 255, .95);
}
.hud-shell .brand h1::before {
left: 18px;
}
.hud-shell .brand h1::after {
right: 18px;
}
.hud-shell .brand p {
position: relative;
z-index: 2;
margin: 8px 0 0;
font-size: 10px;
letter-spacing: 7px;
color: #7fd5ff;
text-shadow: 0 0 10px rgba(71, 209, 255, .9);
}
.hud-shell .title-particles {
position: absolute;
inset: 4px 54px;
z-index: 1;
pointer-events: none;
}
.hud-shell .title-particles i {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #dffaff;
box-shadow: 0 0 7px #42dcff, 0 0 14px rgba(66, 220, 255, .8);
animation: particleFloat 2.8s ease-in-out infinite;
}
.hud-shell .title-particles i:nth-child(1) { left: 7%; top: 24%; animation-delay: 0s; }
.hud-shell .title-particles i:nth-child(2) { left: 18%; top: 66%; animation-delay: .3s; }
.hud-shell .title-particles i:nth-child(3) { left: 32%; top: 18%; animation-delay: .7s; }
.hud-shell .title-particles i:nth-child(4) { left: 46%; top: 76%; animation-delay: 1s; }
.hud-shell .title-particles i:nth-child(5) { left: 61%; top: 20%; animation-delay: .45s; }
.hud-shell .title-particles i:nth-child(6) { left: 73%; top: 70%; animation-delay: .85s; }
.hud-shell .title-particles i:nth-child(7) { left: 84%; top: 34%; animation-delay: 1.2s; }
.hud-shell .title-particles i:nth-child(8) { left: 94%; top: 62%; animation-delay: .15s; }
@keyframes particleFloat {
0%, 100% {
transform: translateY(0) scale(.85);
opacity: .38;
}
50% {
transform: translateY(-7px) scale(1.25);
opacity: 1;
}
}
.hud-shell .time,
.hud-shell .account {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #9ddcff;
}
.hud-shell .time strong {
font-size: 18px;
color: white;
}
.hud-shell .time-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0px;
line-height: 1.2;
}
.hud-shell .time-stack strong {
font-size: 18px;
color: #ffffff;
letter-spacing: 1px;
line-height: 1.1;
}
.hud-shell .time-stack span {
font-size: 11px;
color: #7ec8e3;
letter-spacing: 0.5px;
line-height: 1.2;
}
.hud-shell .hud-hide-data-btn {
position: relative;
width: 34px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(74, 180, 255, .48);
border-radius: 15px;
color: #bdeaff;
background: linear-gradient(135deg, rgba(24, 90, 158, .72), rgba(15, 42, 81, .56));
box-shadow: inset 0 0 12px rgba(86, 190, 255, .16);
cursor: pointer;
font-size: 12px;
white-space: nowrap;
}
.hud-shell .hud-hide-data-btn svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hud-shell .hud-hide-data-btn::after {
content: "";
position: absolute;
width: 22px;
height: 2px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px rgba(189, 234, 255, .55);
transform: rotate(-42deg) scaleX(0);
opacity: 0;
transition: transform .18s ease, opacity .18s ease;
}
.hud-shell .hud-hide-data-btn.is-hidden::after {
opacity: 1;
transform: rotate(-42deg) scaleX(1);
}
.hud-shell .hud-hide-data-btn:hover {
color: #fff;
border-color: rgba(96, 205, 255, .82);
box-shadow: inset 0 0 18px rgba(86, 190, 255, .28), 0 0 12px rgba(36, 155, 255, .22);
}
.hud-shell .weather {
padding-left: 28px;
position: relative;
min-height: 22px;
display: inline-flex;
align-items: center;
}
/* 澶╂皵鍥炬爣 - 榛樿 鏅?*/
.hud-shell .weather::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 22px;
height: 22px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter: drop-shadow(0 0 6px rgba(112, 209, 255, .6));
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="cloudy"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="overcast"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="rain"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="thunder"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="snow"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .weather[data-weather="fog"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hud-shell .avatar {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: #88ccff;
background: rgba(74, 156, 255, .35);
border-radius: 50%;
}
.hud-shell .account button {
width: 62px;
height: 28px;
color: #bdeaff;
border: 0;
border-radius: 16px;
background: linear-gradient(180deg, #174b8a, #0b2d5d);
}
.hud-shell .tabs {
position: absolute;
z-index: 6;
top: 17px;
right: 200px;
display: flex;
gap: 6px;
}
.hud-shell .tabs a {
width: 78px;
height: 28px;
display: grid;
place-items: center;
color: #beddf4;
font-size: 12px;
text-decoration: none;
background: linear-gradient(135deg, rgba(24, 90, 158, .75), rgba(15, 42, 81, .6));
border: 1px solid rgba(59, 156, 232, .35);
border-radius: 15px;
clip-path: none;
}
.hud-shell .tabs a.active {
color: #fff;
background: linear-gradient(180deg, rgba(46, 109, 225, .95), rgba(16, 82, 173, .58));
box-shadow: inset 0 0 18px rgba(122, 202, 255, .7), 0 0 14px rgba(36, 155, 255, .45);
}
/* tabs 鐐瑰嚮娑熸吉鍙嶉 */
.hud-shell .tabs a {
position: relative;
overflow: hidden;
}
.hud-shell .hud-top-stats {
position: absolute;
z-index: 4;
top: 88px;
left: 354px;
right: 354px;
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 16px;
pointer-events: none;
}
.hud-shell .hud-top-stat {
position: relative;
min-height: 66px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 15px;
border: 1px solid rgba(0, 164, 255, .22);
border-radius: 4px;
background:
linear-gradient(180deg, rgba(5, 30, 64, .5), rgba(2, 13, 34, .36)),
radial-gradient(circle at 16% 20%, rgba(63, 172, 255, .12), transparent 45%);
box-shadow:
inset 0 0 24px rgba(0, 152, 255, .06),
0 8px 24px rgba(0, 0, 0, .18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hud-shell .hud-top-stat::before {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 8px;
height: 8px;
border-top: 1px solid rgba(92, 214, 255, .7);
border-left: 1px solid rgba(92, 214, 255, .7);
}
.hud-shell .hud-top-stat i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
color: #dff8ff;
}
.hud-shell .hud-top-stat i svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.hud-shell .hud-top-stat.energy i { background: rgba(75, 150, 205, .38); color: #aee8ff; }
.hud-shell .hud-top-stat.alarm i { background: rgba(173, 89, 79, .36); color: #ffc2b6; }
.hud-shell .hud-top-stat.patrol i { background: rgba(94, 98, 205, .38); color: #c8c9ff; }
.hud-shell .hud-top-stat.online i { background: rgba(45, 170, 133, .38); color: #9df2d7; }
.hud-shell .hud-top-stat div {
min-width: 0;
}
.hud-shell .hud-top-stat span {
display: block;
color: rgba(196, 221, 238, .62);
font-size: 12px;
font-weight: 700;
line-height: 1.1;
}
.hud-shell .hud-top-stat strong {
display: block;
margin-top: 3px;
color: #f5fbff;
font-size: 21px;
line-height: 1;
font-weight: 800;
letter-spacing: 0;
}
.hud-shell .hud-top-stat em {
color: rgba(206, 231, 245, .78);
font-size: 12px;
font-style: normal;
font-weight: 700;
}
.hud-shell .hud-top-stat small {
display: block;
margin-top: 6px;
color: rgba(196, 221, 238, .56);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.hud-shell .hud-top-stat b {
font-weight: 800;
}
.hud-shell .hud-top-stat .down {
color: #28c78d;
}
.hud-shell .hud-top-stat .up {
color: #ff6d78;
}
/* 椤堕儴 toast */
@media (max-width: 1500px) {
.hud-shell .tabs {
top: 78px;
right: 24px;
}
.hud-shell .hud-top-stats {
top: 116px;
left: 336px;
right: 336px;
gap: 10px;
}
.hud-shell .hud-top-stat {
min-height: 70px;
padding: 11px 12px;
gap: 10px;
}
.hud-shell .hud-top-stat strong {
font-size: 20px;
}
}
.hud-toast {
position: fixed;
z-index: 80;
top: 96px;
left: 50%;
transform: translate(-50%, -16px);
padding: 10px 22px;
background: linear-gradient(180deg, rgba(7, 49, 99, .95), rgba(3, 28, 65, .92));
border: 1px solid rgba(75, 220, 255, .55);
border-radius: 6px;
color: #dff7ff;
font-size: 13px;
letter-spacing: 1px;
box-shadow: 0 0 18px rgba(36, 155, 255, .42), inset 0 0 18px rgba(75, 220, 255, .18);
opacity: 0;
transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
pointer-events: none;
}
.hud-toast.visible {
opacity: 1;
transform: translate(-50%, 0);
}
.hud-shell .rail {
position: absolute;
z-index: 3;
top: 96px;
bottom: 24px;
width: 318px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
padding-right: 4px;
}
/* ---------- 涓や晶鑳屾櫙绮掑瓙灞傦紙鐙珛 DOM锛岀敱 hud-adapter.js 鐢熸垚锛?--------- */
.rail-bg-particles {
position: absolute;
z-index: 1;
top: 88px;
bottom: 0;
width: 360px;
pointer-events: none;
overflow: hidden;
opacity: 1;
}
.rail-bg-particles.left { left: 0; }
.rail-bg-particles.right { right: 0; }
.rail-bg-particles::before,
.rail-bg-particles::after {
content: "";
position: absolute;
inset: -40px -10px -10px;
background-repeat: repeat-y;
background-size: 360px 540px;
}
.rail-bg-particles::before {
background-image:
radial-gradient(1.6px 1.6px at 18px 22px, rgba(200, 245, 255, 1), transparent 60%),
radial-gradient(1px 1px at 60px 56px, rgba(160, 230, 255, .9), transparent 60%),
radial-gradient(1.3px 1.3px at 110px 18px, rgba(190, 240, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 150px 78px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(2px 2px at 210px 36px, rgba(220, 250, 255, 1), transparent 60%),
radial-gradient(1px 1px at 250px 96px, rgba(150, 225, 255, .9), transparent 60%),
radial-gradient(1.4px 1.4px at 300px 54px, rgba(190, 240, 255, .95), transparent 60%),
radial-gradient(1px 1px at 340px 110px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(1.5px 1.5px at 32px 142px, rgba(200, 245, 255, 1), transparent 60%),
radial-gradient(.9px .9px at 88px 168px, rgba(150, 225, 255, .85), transparent 60%),
radial-gradient(1.2px 1.2px at 134px 132px, rgba(180, 235, 255, .95), transparent 60%),
radial-gradient(1.7px 1.7px at 196px 188px, rgba(210, 248, 255, 1), transparent 60%),
radial-gradient(1px 1px at 240px 154px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(1.4px 1.4px at 290px 200px, rgba(190, 240, 255, .95), transparent 60%),
radial-gradient(1px 1px at 332px 168px, rgba(160, 230, 255, .9), transparent 60%),
radial-gradient(1.6px 1.6px at 22px 232px, rgba(200, 245, 255, 1), transparent 60%),
radial-gradient(1px 1px at 70px 268px, rgba(150, 225, 255, .85), transparent 60%),
radial-gradient(1.3px 1.3px at 118px 246px, rgba(180, 235, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 168px 290px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(2px 2px at 226px 256px, rgba(220, 250, 255, 1), transparent 60%),
radial-gradient(1px 1px at 274px 302px, rgba(150, 225, 255, .9), transparent 60%),
radial-gradient(1.4px 1.4px at 322px 274px, rgba(190, 240, 255, .95), transparent 60%),
radial-gradient(1.5px 1.5px at 36px 332px, rgba(200, 245, 255, 1), transparent 60%),
radial-gradient(.9px .9px at 92px 360px, rgba(150, 225, 255, .85), transparent 60%),
radial-gradient(1.2px 1.2px at 142px 320px, rgba(180, 235, 255, .95), transparent 60%),
radial-gradient(1.7px 1.7px at 200px 376px, rgba(210, 248, 255, 1), transparent 60%),
radial-gradient(1px 1px at 250px 348px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(1.4px 1.4px at 300px 396px, rgba(190, 240, 255, .95), transparent 60%),
radial-gradient(1.6px 1.6px at 26px 432px, rgba(200, 245, 255, 1), transparent 60%),
radial-gradient(1px 1px at 76px 460px, rgba(150, 225, 255, .85), transparent 60%),
radial-gradient(1.3px 1.3px at 126px 444px, rgba(180, 235, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 176px 488px, rgba(140, 220, 255, .85), transparent 60%),
radial-gradient(2px 2px at 234px 466px, rgba(220, 250, 255, 1), transparent 60%),
radial-gradient(1px 1px at 284px 504px, rgba(150, 225, 255, .9), transparent 60%),
radial-gradient(1.4px 1.4px at 332px 472px, rgba(190, 240, 255, .95), transparent 60%);
animation: railParticleFloat 22s linear infinite;
}
.rail-bg-particles::after {
background-image:
radial-gradient(1.1px 1.1px at 42px 30px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.8px .8px at 92px 68px, rgba(110, 230, 255, .85),transparent 60%),
radial-gradient(1.3px 1.3px at 144px 34px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 196px 90px, rgba(120, 235, 255, .85),transparent 60%),
radial-gradient(1px 1px at 248px 56px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(1.2px 1.2px at 296px 100px, rgba(110, 230, 255, .9), transparent 60%),
radial-gradient(.8px .8px at 50px 138px, rgba(75, 220, 255, .85), transparent 60%),
radial-gradient(1px 1px at 102px 178px, rgba(120, 235, 255, .9), transparent 60%),
radial-gradient(1.3px 1.3px at 156px 142px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 210px 196px, rgba(110, 230, 255, .85),transparent 60%),
radial-gradient(1px 1px at 264px 158px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(1.2px 1.2px at 312px 210px, rgba(120, 235, 255, .9), transparent 60%),
radial-gradient(1px 1px at 38px 246px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(.8px .8px at 88px 280px, rgba(110, 230, 255, .85),transparent 60%),
radial-gradient(1.3px 1.3px at 140px 254px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 192px 308px, rgba(120, 235, 255, .85),transparent 60%),
radial-gradient(1px 1px at 248px 270px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(1.2px 1.2px at 300px 322px, rgba(110, 230, 255, .9), transparent 60%),
radial-gradient(1px 1px at 46px 358px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(.8px .8px at 96px 392px, rgba(110, 230, 255, .85),transparent 60%),
radial-gradient(1.3px 1.3px at 150px 368px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 204px 414px, rgba(120, 235, 255, .85),transparent 60%),
radial-gradient(1px 1px at 256px 386px, rgba(75, 220, 255, .9), transparent 60%),
radial-gradient(1.2px 1.2px at 308px 432px, rgba(110, 230, 255, .9), transparent 60%),
radial-gradient(1.1px 1.1px at 32px 472px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.8px .8px at 84px 502px, rgba(110, 230, 255, .85),transparent 60%),
radial-gradient(1.3px 1.3px at 138px 478px, rgba(75, 220, 255, .95), transparent 60%),
radial-gradient(.9px .9px at 192px 522px, rgba(120, 235, 255, .85),transparent 60%);
animation: railParticleFloat 32s linear infinite reverse;
mix-blend-mode: screen;
opacity: .85;
}
/* 杈圭紭娓愰殣锛岃绮掑瓙闈犺繎涓儴鏃舵贰鍑?*/
.rail-bg-particles.left::before,
.rail-bg-particles.left::after {
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
}
.rail-bg-particles.right::before,
.rail-bg-particles.right::after {
-webkit-mask-image: linear-gradient(270deg, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(270deg, #000 0%, #000 60%, transparent 100%);
}
@keyframes railParticleFloat {
from { background-position: 0 0; }
to { background-position: 0 -540px; }
}
.hud-shell .left {
left: 20px;
top: 76px;
}
.hud-shell .right {
right: 20px;
top: 76px;
bottom: 110px;
overflow: visible;
}
.hud-shell .panel {
position: relative;
padding: 8px 12px 10px;
background:
linear-gradient(160deg, rgba(4, 22, 58, .92) 0%, rgba(2, 12, 36, .88) 100%),
radial-gradient(120% 60% at 50% -10%, rgba(0, 180, 255, .18), transparent 60%);
border: 1px solid rgba(0, 180, 255, .55);
box-shadow:
inset 0 0 32px rgba(0, 140, 255, .14),
inset 0 1px 0 rgba(100, 220, 255, .35),
0 0 8px rgba(0, 160, 255, .35),
0 0 2px rgba(0, 220, 255, .5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
isolation: isolate;
}
/* 瑁呴グ浼厓绱犺嚜宸辨埅杈癸紝panel 涓嶅啀 overflow:hidden 璁╂寜閽矑瀛愯兘婧㈠嚭 */
.hud-shell .panel::before,
.hud-shell .panel::after {
border-radius: inherit;
overflow: hidden;
}
/* 鍐呴儴瑁呴グ灞傦細妯悜鎵弿绾?+ 娴佸姩鍏夋檿 + 寰矑 */
.hud-shell .panel > h2 ~ *,
.hud-shell .panel > h2 {
position: relative;
z-index: 1;
}
.hud-shell .panel::before,
.hud-shell .panel::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
/* 娣辫摑缃戞牸 + 鎵弿绾?+ 鏄熺偣绮掑瓙 */
.hud-shell .panel::before {
inset: 0;
background-image:
linear-gradient(rgba(0, 160, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 160, 255, .06) 1px, transparent 1px),
radial-gradient(1.2px 1.2px at 14% 22%, rgba(180, 240, 255, .85), transparent 60%),
radial-gradient(1px 1px at 38% 68%, rgba(120, 220, 255, .8), transparent 60%),
radial-gradient(1.4px 1.4px at 72% 38%, rgba(190, 245, 255, .9), transparent 60%),
radial-gradient(1px 1px at 88% 84%, rgba(110, 215, 255, .7), transparent 60%),
radial-gradient(1.1px 1.1px at 26% 86%, rgba(160, 235, 255, .85), transparent 60%),
radial-gradient(.9px .9px at 60% 18%, rgba(180, 240, 255, .9), transparent 60%);
background-size: 20px 20px, 20px 20px, auto, auto, auto, auto, auto, auto;
opacity: .55;
mix-blend-mode: screen;
animation: panelTwinkle 6s ease-in-out infinite;
}
.hud-shell .panel::after {
display: none;
}
@keyframes panelTwinkle {
0%, 100% { opacity: .35; }
50% { opacity: .65; }
}
@keyframes panelSheen {
0% { transform: translateX(-40%); }
60% { transform: translateX(40%); }
100% { transform: translateX(40%); }
}
/* 鍥涜鍙戝厜瑙掓爣 + 椤堕儴鑳介噺鐏偣 + 鍥涜浜偣 鈥斺€?background-image 澶氬眰鍙犲姞 */
.hud-shell .panel {
background-clip: padding-box;
background-image:
/* 宸︿笂瑙?妯?*/
linear-gradient(#00e5ff, #00e5ff),
/* 宸︿笂瑙?绔?*/
linear-gradient(#00e5ff, #00e5ff),
/* 鍙充笂瑙?妯?*/
linear-gradient(#00e5ff, #00e5ff),
/* 鍙充笂瑙?绔?*/
linear-gradient(#00e5ff, #00e5ff),
/* 宸︿笅瑙?妯?*/
linear-gradient(#00e5ff, #00e5ff),
/* 宸︿笅瑙?绔?*/
linear-gradient(#00e5ff, #00e5ff),
/* 鍙充笅瑙?妯?*/
linear-gradient(#00e5ff, #00e5ff),
/* 鍙充笅瑙?绔?*/
linear-gradient(#00e5ff, #00e5ff),
/* 鍥涜浜偣锛氬乏涓?*/
radial-gradient(circle, #ffffff 0%, #00e5ff 35%, rgba(0,229,255,0) 70%),
/* 鍥涜浜偣锛氬彸涓?*/
radial-gradient(circle, #ffffff 0%, #00e5ff 35%, rgba(0,229,255,0) 70%),
/* 鍥涜浜偣锛氬乏涓?*/
radial-gradient(circle, #ffffff 0%, #00e5ff 35%, rgba(0,229,255,0) 70%),
/* 鍥涜浜偣锛氬彸涓?*/
radial-gradient(circle, #ffffff 0%, #00e5ff 35%, rgba(0,229,255,0) 70%),
/* 椤堕儴宸﹁兘閲忕伅鐐?*/
radial-gradient(circle, #00e5ff 0%, rgba(0,229,255,0) 70%),
/* 椤堕儴鍙宠兘閲忕伅鐐?*/
radial-gradient(circle, #00e5ff 0%, rgba(0,229,255,0) 70%),
/* 鐜荤拑搴曡壊 */
linear-gradient(160deg, rgba(4, 22, 58, .92) 0%, rgba(2, 12, 36, .88) 100%),
radial-gradient(120% 60% at 50% -10%, rgba(0, 180, 255, .18), transparent 60%);
background-repeat: no-repeat;
background-size:
16px 2px, /* TL 妯?*/
2px 16px, /* TL 绔?*/
16px 2px, /* TR 妯?*/
2px 16px, /* TR 绔?*/
16px 2px, /* BL 妯?*/
2px 16px, /* BL 绔?*/
16px 2px, /* BR 妯?*/
2px 16px, /* BR 绔?*/
6px 6px, /* 浜偣 TL */
6px 6px, /* 浜偣 TR */
6px 6px, /* 浜偣 BL */
6px 6px, /* 浜偣 BR */
6px 6px, /* 椤堕儴宸︾伅鐐?*/
6px 6px, /* 椤堕儴鍙崇伅鐐?*/
auto, auto;
background-position:
0 0, /* TL 妯?*/
0 0, /* TL 绔?*/
100% 0, /* TR 妯?*/
100% 0, /* TR 绔?*/
0 100%, /* BL 妯?*/
0 100%, /* BL 绔?*/
100% 100%, /* BR 妯?*/
100% 100%, /* BR 绔?*/
-1px -1px, /* 浜偣 TL */
calc(100% + 1px) -1px, /* 浜偣 TR */
-1px calc(100% + 1px), /* 浜偣 BL */
calc(100% + 1px) calc(100% + 1px), /* 浜偣 BR */
18px 0, /* 椤堕儴宸︾伅鐐?*/
calc(100% - 18px) 0, /* 椤堕儴鍙崇伅鐐?*/
0 0,
0 0;
}
.hud-shell .panel h2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: -2px 0 8px;
font-size: 14px;
letter-spacing: 2px;
color: #dff7ff;
}
.hud-shell .panel h2::before {
content: "";
width: 9px;
height: 9px;
border-radius: 2px;
background: #00e5ff;
box-shadow: 0 0 9px #00e5ff, 0 0 18px rgba(0,229,255,.5);
}
.hud-shell .panel h2 small {
margin-left: auto;
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
color: #79a9cd;
}
.hud-shell .metric-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 9px;
}
/* 鍗曞垪鍫嗗彔锛氭瘡琛?鍥炬爣 + 鏍囩 + 鏁板€?妯悜甯冨眬锛屼粠涓婂埌涓嬫帓 */
.hud-shell .metric-grid.stacked {
grid-template-columns: 1fr;
gap: 2px;
}
.hud-shell .metric-grid.stacked article {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
column-gap: 8px;
min-height: 24px;
padding: 1px 8px;
}
.hud-shell .metric-grid.stacked span {
font-size: 11px;
letter-spacing: .5px;
color: #c8e6ff;
}
.hud-shell .metric-grid.stacked strong {
font-size: 15px;
color: #ffffff;
font-weight: 600;
text-shadow: 0 0 8px rgba(75, 220, 255, .4);
}
.hud-shell .metric-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 5px;
background: rgba(75, 220, 255, .12);
border: 1px solid rgba(75, 220, 255, .35);
box-shadow: inset 0 0 8px rgba(75, 220, 255, .18);
color: #8ff4ff;
flex: 0 0 auto;
}
.hud-shell .metric-icon svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(75, 220, 255, .55));
}
.hud-shell .metric-icon.total {
color: #8ff4ff;
background: rgba(143, 244, 255, .12);
border-color: rgba(143, 244, 255, .42);
}
.hud-shell .metric-icon.online {
color: #6dffae;
background: rgba(109, 255, 174, .12);
border-color: rgba(109, 255, 174, .42);
box-shadow: inset 0 0 10px rgba(109, 255, 174, .22), 0 0 8px rgba(109, 255, 174, .15);
}
.hud-shell .metric-icon.off {
color: #c5d6e6;
background: rgba(197, 214, 230, .1);
border-color: rgba(197, 214, 230, .35);
}
.hud-shell .metric-icon.warn {
color: #ff9b6c;
background: rgba(255, 155, 108, .14);
border-color: rgba(255, 155, 108, .5);
box-shadow: inset 0 0 10px rgba(255, 155, 108, .22), 0 0 8px rgba(255, 155, 108, .2);
animation: hudWarnPulse 2.4s ease-in-out infinite;
}
@keyframes hudWarnPulse {
0%, 100% { box-shadow: inset 0 0 10px rgba(255, 155, 108, .22), 0 0 8px rgba(255, 155, 108, .2); }
50% { box-shadow: inset 0 0 14px rgba(255, 155, 108, .42), 0 0 14px rgba(255, 155, 108, .55); }
}
.hud-shell .env-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
}
.hud-shell .metric-grid article,
.hud-shell .env-grid article {
min-height: 64px;
padding: 11px;
border: 1px solid rgba(87, 165, 224, .28);
border-radius: 3px;
background: rgba(7, 35, 71, .72);
box-shadow: inset 0 0 14px rgba(58, 163, 255, .11);
}
.hud-shell .metric-grid article:hover,
.hud-shell .env-grid article:hover,
.hud-shell .tool-grid button:hover,
.hud-shell .mode-grid button:hover {
border-color: rgba(107, 222, 255, .72);
box-shadow: inset 0 0 18px rgba(70, 193, 255, .24), 0 0 12px rgba(42, 174, 255, .18);
transform: translateY(-1px);
}
.hud-shell .metric-grid article,
.hud-shell .env-grid article,
.hud-shell .tool-grid button,
.hud-shell .mode-grid button {
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hud-shell .metric-grid article {
display: grid;
grid-template-columns: 38px 1fr;
align-items: center;
column-gap: 8px;
}
.hud-shell .metric-grid span,
.hud-shell .env-grid span {
font-size: 12px;
color: #9fc8e6;
}
.hud-shell .metric-grid strong {
grid-column: 2;
font-size: 20px;
color: #fff;
}
em {
font-style: normal;
}
.hud-shell .metric-grid em {
font-size: 11px;
color: #9cc6e5;
}
.hud-shell .icon {
grid-row: span 2;
width: 34px;
height: 34px;
border-radius: 50%;
background: radial-gradient(circle, #8ff4ff, #145b8c 54%, #0b2448);
box-shadow: 0 0 12px rgba(83, 222, 255, .65);
}
.hud-shell .icon.online {
background: radial-gradient(circle, #93ffdf, #1e8f96 55%, #0b2448);
}
.hud-shell .icon.off {
background: radial-gradient(circle, #ffffff, #7c8b9a 55%, #1a2c45);
}
.hud-shell .icon.warn {
background: radial-gradient(circle, #ffc1b7, #d66b6f 55%, #311d36);
}
.hud-shell .tool-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.hud-shell .mode-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
/* 鈹€鈹€ 鎵嬪姩鐏厜鎺у埗琛?鈹€鈹€ */
.hud-shell .lamp-manual-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.hud-shell .lamp-manual-btn {
flex: 1;
min-width: 0;
height: 48px;
padding: 4px 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #c8e8ff;
font: inherit;
border: 1px solid rgba(92, 166, 223, .35);
border-radius: 6px;
background: rgba(7, 35, 71, .72);
cursor: pointer;
position: relative;
overflow: visible;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.hud-shell .lamp-manual-btn i {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(100, 180, 255, .5);
background: rgba(20, 80, 160, .4);
flex-shrink: 0;
transition: background .2s, border-color .2s, box-shadow .2s;
}
.hud-shell .lamp-manual-btn i svg {
width: 14px;
height: 14px;
stroke: #76caff;
fill: none;
display: block;
}
.hud-shell .lamp-manual-btn span {
font-size: 11px;
color: rgba(180, 215, 255, .85);
line-height: 1;
white-space: nowrap;
}
.hud-shell .lamp-manual-btn:hover,
.hud-shell .lamp-manual-btn.active {
border-color: rgba(42, 180, 255, .7);
background: rgba(12, 60, 130, .82);
box-shadow: 0 0 12px rgba(42, 180, 255, .35);
}
.hud-shell .lamp-manual-btn.active i {
background: rgba(30, 130, 230, .55);
border-color: rgba(80, 200, 255, .8);
box-shadow: 0 0 8px rgba(60, 200, 255, .6);
}
/* 绔栧悜鎸′綅杩涘害鏉?*/
.hud-shell .lamp-gear-bar {
width: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.hud-shell .gear-track {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
}
.hud-shell .gear-seg {
position: relative;
height: 11px;
border-radius: 3px;
background: rgba(20, 60, 110, .6);
border: 1px solid rgba(60, 140, 220, .3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .18s, border-color .18s, box-shadow .18s;
}
.hud-shell .gear-seg span {
font-size: 8px;
color: rgba(140, 190, 240, .6);
line-height: 1;
pointer-events: none;
transition: color .18s;
}
/* 鍚勬尅浜壊 */
.hud-shell .gear-seg[data-gear="0"].lit {
background: rgba(80, 80, 120, .55);
border-color: rgba(140, 140, 200, .7);
box-shadow: 0 0 6px rgba(120, 120, 200, .4);
}
.hud-shell .gear-seg[data-gear="1"].lit {
background: rgba(30, 140, 255, .45);
border-color: rgba(60, 180, 255, .7);
box-shadow: 0 0 6px rgba(40, 170, 255, .5);
}
.hud-shell .gear-seg[data-gear="2"].lit {
background: rgba(0, 200, 220, .45);
border-color: rgba(0, 220, 255, .7);
box-shadow: 0 0 6px rgba(0, 210, 255, .5);
}
.hud-shell .gear-seg[data-gear="3"].lit {
background: rgba(255, 220, 80, .45);
border-color: rgba(255, 235, 120, .8);
box-shadow: 0 0 8px rgba(255, 220, 80, .6);
}
.hud-shell .gear-seg.lit span {
color: #e8f8ff;
}
/* 瑙嗚闈㈡澘锛? 鍒楀ぇ鎸夐挳 */
.hud-shell .view-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.hud-shell .view-grid button {
min-width: 0;
height: 60px;
padding: 5px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #c8e8ff;
font: inherit;
border: 1px solid rgba(92, 166, 223, .35);
border-radius: 4px;
background: rgba(7, 35, 71, .72);
cursor: pointer;
position: relative;
overflow: visible;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hud-shell .view-grid button:hover {
border-color: rgba(107, 222, 255, .72);
box-shadow: inset 0 0 18px rgba(70, 193, 255, .24), 0 0 12px rgba(42, 174, 255, .18);
transform: translateY(-1px);
}
.hud-shell .view-grid button[data-view="player"].is-prewarming {
cursor: wait;
opacity: .72;
}
.hud-shell .view-grid button[data-view="player"].is-prewarming span {
font-size: 0;
}
.hud-shell .view-grid button[data-view="player"].is-prewarming span::after {
content: "准备中";
font-size: 12px;
}
.hud-shell .view-grid button.selected {
color: #ecfff6;
border-color: rgba(77, 255, 178, .55);
background: rgba(38, 99, 91, .38);
}
.hud-shell .view-grid button i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
font-style: normal;
border-radius: 50%;
background: radial-gradient(circle, rgba(36, 219, 255, .8), rgba(7, 60, 123, .85));
box-shadow: 0 0 10px rgba(44, 193, 255, .55);
color: #dffaff;
}
.hud-shell .view-grid button.selected i {
background: radial-gradient(circle, #6dff94, #1d7a68);
animation: hudSelectedPulse 2.4s ease-in-out infinite;
}
.hud-shell .view-grid button i svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(223, 250, 255, .8));
}
.hud-shell .view-grid button span {
font-size: 12px;
letter-spacing: 1px;
}
.player-roam-menu {
position: fixed;
right: 410px;
top: 132px;
z-index: 10020;
width: 320px;
color: #dff8ff;
border: 1px solid rgba(14, 252, 255, .42);
border-radius: 6px;
background: rgba(4, 21, 48, .94);
box-shadow: 0 0 24px rgba(0, 180, 255, .22), inset 0 0 20px rgba(14, 252, 255, .08);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease;
}
.player-roam-menu.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.player-roam-menu .prm-header {
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
border-bottom: 1px solid rgba(14, 252, 255, .24);
}
.player-roam-menu .prm-header strong {
font-size: 15px;
letter-spacing: 1px;
}
.player-roam-menu .prm-header button {
width: 26px;
height: 26px;
border: 1px solid rgba(14, 252, 255, .35);
border-radius: 4px;
color: #c8f7ff;
background: rgba(14, 252, 255, .08);
cursor: pointer;
}
.player-roam-menu .prm-body {
display: grid;
gap: 9px;
padding: 12px;
}
.player-roam-menu .prm-row {
display: grid;
grid-template-columns: 92px 1fr 42px;
align-items: center;
gap: 8px;
font-size: 12px;
}
.player-roam-menu .prm-row input[type="range"] {
width: 100%;
accent-color: #0efcff;
}
.player-roam-menu .prm-row b {
color: #fff;
font-size: 12px;
text-align: right;
}
.player-roam-menu .prm-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.player-roam-menu .prm-check input {
accent-color: #0efcff;
}
.player-roam-menu .prm-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 0 12px 12px;
}
.player-roam-menu .prm-actions button {
height: 32px;
border: 1px solid rgba(92, 166, 223, .45);
border-radius: 4px;
color: #dff8ff;
background: rgba(7, 35, 71, .72);
cursor: pointer;
}
.player-roam-menu .prm-actions button:hover,
.player-roam-menu .prm-header button:hover {
border-color: rgba(107, 222, 255, .72);
box-shadow: inset 0 0 14px rgba(70, 193, 255, .2);
}
.player-roam-crosshair {
position: fixed;
left: 50%;
top: 50%;
width: 28px;
height: 28px;
transform: translate(-50%, -50%);
z-index: 10030;
pointer-events: none;
display: none;
opacity: .62;
mix-blend-mode: screen;
}
.player-roam-crosshair.active {
display: block;
}
.player-roam-crosshair span {
position: absolute;
left: 50%;
top: 50%;
background: rgba(210, 250, 255, .72);
box-shadow: 0 0 6px rgba(0, 220, 255, .55);
border-radius: 999px;
}
.player-roam-crosshair span:first-child {
width: 28px;
height: 1px;
transform: translate(-50%, -50%);
}
.player-roam-crosshair span:last-child {
width: 1px;
height: 28px;
transform: translate(-50%, -50%);
}
body.player-roam-first-person,
body.player-roam-first-person #canvas-container canvas {
cursor: none !important;
}
.hud-shell .tool-grid button,
.hud-shell .mode-grid button,
.hud-shell .dock button {
cursor: pointer;
}
.hud-shell .tool-grid button,
.hud-shell .mode-grid button {
min-width: 0;
min-height: 70px;
height: 70px;
padding: 6px 4px;
display: grid;
grid-template-rows: 30px 1fr;
align-items: center;
justify-items: center;
gap: 4px;
color: #c8e8ff;
border: 1px solid rgba(92, 166, 223, .32);
border-radius: 4px;
background: rgba(7, 35, 71, .78);
position: relative;
overflow: visible;
}
.hud-shell .tool-grid button > i,
.hud-shell .mode-grid button > i {
align-self: center;
}
.hud-shell .tool-grid button > span,
.hud-shell .mode-grid button > span {
align-self: start;
padding-top: 2px;
}
/* 鎸夐挳绮掑瓙鐖嗙偣 + 鑴夊啿 */
.hud-shell .mode-grid button,
.hud-shell .tool-grid button {
position: relative;
overflow: visible;
}
.hud-burst {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 4;
}
.hud-burst i {
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0 30%, #4bdcff 60%, rgba(75, 220, 255, 0) 100%);
box-shadow: 0 0 8px rgba(150, 240, 255, .9), 0 0 14px rgba(75, 220, 255, .8);
opacity: 0;
animation: hudBurstFly .75s cubic-bezier(.18, .68, .32, 1.05) var(--d, 0ms) forwards;
}
/* 缁嗙矑瀛愶紙鐢ㄤ簬 mode-grid / view-grid 杈冪獎鎸夐挳锛?/
.hud-burst.fine i {
background: radial-gradient(circle, #ffffff 0 40%, #9be6ff 70%, rgba(155, 230, 255, 0) 100%);
box-shadow: 0 0 5px rgba(180, 240, 255, .9), 0 0 9px rgba(75, 220, 255, .55);
}
@keyframes hudBurstFly {
0% { opacity: 0; transform: translate(0, 0) scale(.6); }
18% { opacity: 1; transform: translate(calc(var(--tx) * .35), calc(var(--ty) * .35)) scale(1.2); }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.4); }
}
.hud-shell .mode-grid button.pulse,
.hud-shell .tool-grid button.pulse,
.hud-shell .view-grid button.pulse,
.hud-shell .switches button.pulse,
.hud-shell .tabs a.pulse,
.hud-shell .dock button.pulse {
animation: hudBtnPulse .55s ease-out;
}
@keyframes hudBtnPulse {
0% { box-shadow: inset 0 0 0 rgba(75, 220, 255, 0), 0 0 0 rgba(75, 220, 255, 0); }
35% { box-shadow: inset 0 0 22px rgba(75, 220, 255, .55), 0 0 22px rgba(75, 220, 255, .55); }
100% { box-shadow: inset 0 0 0 rgba(75, 220, 255, 0), 0 0 0 rgba(75, 220, 255, 0); }
}
/* 閫変腑鎬佹寔缁井鍔?*/
.hud-shell .mode-grid button.selected i {
animation: hudSelectedPulse 2.4s ease-in-out infinite;
z-index: 1;
}
/* 绮掑瓙灞傛案杩滃湪閫変腑鍏夋檿涔嬩笂 */
.hud-shell .hud-burst {
z-index: 6;
}
@keyframes hudSelectedPulse {
0%, 100% { box-shadow: 0 0 8px rgba(109, 255, 148, .35); }
50% { box-shadow: 0 0 14px rgba(109, 255, 148, .65), 0 0 22px rgba(109, 255, 148, .25); }
}
/* 鈹€鈹€ 鍚堝苟闈㈡澘锛氳澶囨瑙?+ 鍦嗗舰缁熻鍥?鈹€鈹€ */
.hud-shell .panel.overview-status .overview-status-body {
display: flex;
align-items: center;
gap: 10px;
}
.hud-shell .panel.overview-status .metric-grid.stacked {
flex: 1 1 0;
min-width: 0;
}
.hud-shell .donut-wrap {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.hud-shell .donut {
width: 90px;
height: 90px;
display: grid;
place-items: center;
align-content: center;
border-radius: 50%;
background: conic-gradient(#43dec1 0 82%, #ff9b6c 82% 85%, #a9c2d9 85% 100%);
position: relative;
box-shadow: 0 0 18px rgba(67, 222, 193, .28);
flex: 0 0 auto;
transition: background 0.6s ease;
}
.hud-shell .donut::after {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: #08264e;
}
.hud-shell .donut span,
.hud-shell .donut strong {
position: relative;
z-index: 1;
}
.hud-shell .donut strong {
font-size: 13px;
color: #fff;
transition: opacity 0.3s;
}
.hud-shell .donut span {
font-size: 9px;
color: #9fc8e6;
transition: opacity 0.3s;
}
.hud-shell .donut-legend {
display: none;
}
.hud-shell .donut-legend .dl {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #43dec1;
}
.hud-shell .donut-legend .dl.fault { background: #ff9b6c; }
.hud-shell .donut-legend .dl.lost { background: #a9c2d9; }
.hud-shell .donut-cycle-dots {
display: flex;
gap: 4px;
}
.hud-shell .donut-cycle-dots i {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(100, 180, 240, .3);
border: 1px solid rgba(100, 180, 240, .4);
transition: background .3s, box-shadow .3s;
font-style: normal;
}
.hud-shell .donut-cycle-dots i.active {
background: #43dec1;
box-shadow: 0 0 6px rgba(67, 222, 193, .7);
}
.hud-shell .panel.alarms {
flex: 1 1 auto;
min-height: 240px;
display: flex;
flex-direction: column;
}
.hud-shell .panel.alarms ul {
flex: 1;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(0, 200, 255, .34) transparent;
}
.hud-shell .panel.alarms ul::-webkit-scrollbar {
width: 6px;
}
.hud-shell .panel.alarms ul::-webkit-scrollbar-track {
background: rgba(0, 20, 48, .28);
border-radius: 8px;
}
.hud-shell .panel.alarms ul::-webkit-scrollbar-thumb {
border-radius: 8px;
background: linear-gradient(180deg, rgba(44, 219, 255, .58), rgba(18, 119, 219, .34));
border: 1px solid rgba(80, 215, 255, .22);
}
.hud-shell .panel.alarms ul::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(76, 234, 255, .82), rgba(25, 146, 240, .54));
}
.hud-shell #hudAlarmMore {
display: inline-grid;
place-items: center;
min-width: 46px;
height: 20px;
padding: 0 8px;
border: 1px solid rgba(54, 170, 255, .34);
border-radius: 3px;
color: #9ddcff;
background: rgba(8, 60, 112, .34);
cursor: pointer;
transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.hud-shell #hudAlarmMore:hover {
color: #e6fbff;
border-color: rgba(98, 215, 255, .72);
background: rgba(18, 104, 177, .5);
box-shadow: inset 0 0 12px rgba(76, 202, 255, .18), 0 0 10px rgba(31, 157, 255, .16);
}
.hud-shell .alarms ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 鈹€鈹€ 蹇嵎鍔熻兘鎸夐挳锛氬杈瑰舰鍖呰９鍥炬爣 鈹€鈹€ */
.hud-shell .ring,
.hud-shell .mode-grid i {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: grid;
place-items: center;
font-style: normal;
font-size: 16px;
color: #dffaff;
border-radius: 0;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
background: radial-gradient(circle, rgba(36, 219, 255, .8), rgba(7, 60, 123, .85));
box-shadow: none;
}
.hud-shell .ring.amber {
background: radial-gradient(circle, #ffc55b, #7f5222);
}
.hud-shell .ring.violet {
background: radial-gradient(circle, #c6b2ff, #45388f);
}
.hud-shell .ring.red {
background: radial-gradient(circle, #ff9c98, #7c2e40);
}
.hud-shell .ring svg,
.hud-shell .mode-grid i svg,
.hud-shell .dock i svg {
display: block;
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(223, 250, 255, .8));
}
.hud-shell .mode-grid i svg polygon,
.hud-shell .tool-grid .ring svg polygon {
fill: none;
}
.hud-shell .mode-grid button:nth-child(2) svg circle:last-child {
fill: rgba(7, 60, 123, .85);
stroke: rgba(223, 250, 255, .72);
}
.hud-shell .dock i svg {
width: 24px;
height: 24px;
}
.hud-shell .tool-grid span,
.hud-shell .mode-grid span {
display: block;
max-width: 100%;
line-height: 1.15;
white-space: normal;
overflow: visible;
text-align: center;
font-size: 11px;
letter-spacing: 0.5px;
}
.hud-shell .mode-grid button.selected {
color: #ecfff6;
border-color: rgba(77, 255, 178, .55);
}
.hud-shell .mode-grid button.selected i {
background: radial-gradient(circle, #6dff94, #1d7a68);
}
/* tool-grid 鑷姩妯″紡閫変腑鎬?*/
.hud-shell .tool-grid button.selected {
color: #ecfff6;
border-color: rgba(180, 130, 255, .65);
box-shadow: inset 0 0 18px rgba(180, 130, 255, .25), 0 0 12px rgba(180, 130, 255, .35);
}
.hud-shell .tool-grid button.selected .ring.violet {
background: radial-gradient(circle, #d6b6ff, #5c3fb0 55%, #1f1452);
box-shadow: 0 0 16px rgba(190, 150, 255, .85);
animation: hudSelectedPulse 2.4s ease-in-out infinite;
}
.hud-shell .map {
position: absolute;
z-index: 2;
inset: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
pointer-events: none;
}
/* 鍥涜 HUD 瀹氫綅瑙?鈥?鐢?JS 娉ㄥ叆鐨?.map-corner 鍏冪礌 */
.hud-shell .map-corner {
display: none;
}
.hud-shell .map-corner.tl { top: 12px; left: 12px; border-top: 2px solid #00e5ff; border-left: 2px solid #00e5ff; }
.hud-shell .map-corner.tr { top: 12px; right: 12px; border-top: 2px solid #00e5ff; border-right: 2px solid #00e5ff; }
.hud-shell .map-corner.bl { bottom: 12px; left: 12px; border-bottom: 2px solid #00e5ff; border-left: 2px solid #00e5ff; }
.hud-shell .map-corner.br { bottom: 12px; right: 12px; border-bottom: 2px solid #00e5ff; border-right: 2px solid #00e5ff; }
.hud-shell .map-corner {
filter: drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 10px rgba(0,200,255,.6));
}
/* 瑙掔偣浜偣 */
.hud-shell .map-corner::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #00e5ff 50%, transparent 100%);
box-shadow: 0 0 8px #00e5ff;
animation: mapCornerPulse 2s ease-in-out infinite;
}
.hud-shell .map-corner.tl::before { top: -3px; left: -3px; }
.hud-shell .map-corner.tr::before { top: -3px; right: -3px; }
.hud-shell .map-corner.bl::before { bottom: -3px; left: -3px; }
.hud-shell .map-corner.br::before { bottom: -3px; right: -3px; }
@keyframes mapCornerPulse {
0%, 100% { opacity: .7; transform: scale(.85); }
50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 14px #00e5ff; }
}
}
.hud-shell .env {
min-height: 214px;
}
.hud-shell .env-grid {
grid-template-columns: repeat(3, 1fr);
}
.hud-shell .env-grid article {
min-height: 0;
padding: 6px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
}
.hud-shell .env-grid article > span {
font-size: 11px;
color: #9fc8e6;
letter-spacing: 1px;
white-space: nowrap;
}
.hud-shell .env-grid strong {
display: block;
margin: 0;
font-size: 16px;
font-weight: 600;
color: #ffffff;
text-shadow: 0 0 8px rgba(75, 220, 255, .4);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-shell .energy p {
margin: 4px 0 8px;
color: #9fc8e6;
}
.hud-shell .energy p strong {
color: white;
}
.hud-shell .energy p em {
float: right;
color: #2ff090;
}
.hud-shell .switches {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 9px;
}
.hud-shell .switches button {
height: 24px;
font-size: 11px;
color: #98bad8;
border: 1px solid rgba(78, 148, 207, .25);
border-radius: 2px;
background: rgba(7, 35, 71, .7);
position: relative;
overflow: visible;
}
.hud-shell .switches button.active {
color: white;
background: linear-gradient(180deg, #2d78dc, #164086);
box-shadow: inset 0 0 12px rgba(144, 214, 255, .55);
}
.hud-shell .chart {
height: 105px;
padding: 6px 0 0;
background:
repeating-linear-gradient(0deg, rgba(111, 182, 232, .18) 0 1px, transparent 1px 25%),
linear-gradient(180deg, rgba(0, 29, 66, .48), rgba(0, 29, 66, .12));
position: relative;
overflow: hidden;
}
.hud-shell .chart svg {
width: 100%;
height: 100%;
display: block;
}
.hud-shell .chart polyline.line {
filter: drop-shadow(0 0 4px rgba(75, 220, 255, .85));
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: hudLineDraw 1.4s ease-out .15s forwards;
}
.hud-shell .chart path.area {
opacity: 0;
animation: hudAreaFade 1.2s ease-out .9s forwards;
}
.hud-shell .chart circle.dot {
fill: #ffffff;
stroke: #4bdcff;
stroke-width: 1.4;
filter: drop-shadow(0 0 4px rgba(75, 220, 255, .9));
opacity: 0;
animation: hudDotPop .35s ease-out forwards;
}
@keyframes hudLineDraw {
to { stroke-dashoffset: 0; }
}
@keyframes hudAreaFade {
to { opacity: 1; }
}
@keyframes hudDotPop {
to { opacity: 1; }
}
.hud-shell #hudEnergyAxis {
position: relative;
height: 14px;
margin-top: 6px;
font-size: 10px;
color: #7da4c5;
}
.hud-shell #hudEnergyAxis span {
position: absolute;
top: 0;
transform: translateX(-50%);
white-space: nowrap;
}
.hud-shell .alarms li {
min-height: 31px;
display: grid;
grid-template-columns: 10px 1fr 42px 58px;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 0 8px;
border: 1px solid rgba(72, 153, 218, .22);
border-radius: 3px;
background: rgba(7, 35, 71, .62);
transition: transform .18s ease, border-color .18s ease;
}
.hud-shell .alarms li:hover {
transform: translateX(-3px);
border-color: rgba(91, 210, 255, .56);
}
.hud-shell .alarms li b {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4fffe0;
box-shadow: 0 0 9px #4fffe0;
}
.hud-shell .alarms li span,
.hud-shell .alarms li time {
font-size: 12px;
color: #a9cde9;
}
.hud-shell .alarms li em {
height: 20px;
display: grid;
place-items: center;
border-radius: 3px;
font-size: 12px;
}
.hud-shell .danger {
color: #ffaaa3;
border: 1px solid rgba(255, 112, 105, .5);
background: rgba(107, 41, 45, .62);
}
.hud-shell .warn {
color: #ffd37b;
border: 1px solid rgba(255, 185, 57, .5);
background: rgba(102, 74, 21, .58);
}
.hud-shell .mid {
color: #ffd37b;
border: 1px solid rgba(255, 185, 57, .45);
background: rgba(102, 74, 21, .42);
}
.hud-shell .info {
color: #84d9ff;
border: 1px solid rgba(68, 187, 255, .45);
background: rgba(23, 83, 121, .55);
}
/* 鈺愨晲 鏈潵绉戞妧鎮诞 Dock 鈺愨晲 */
.hud-shell .dock {
position: absolute;
z-index: 10;
left: 50%;
bottom: 5px;
display: flex;
align-items: center;
gap: 22px;
transform: translateX(-50%);
padding: 9px 52px;
background: transparent;
border-radius: 4px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
filter: none;
}
/* 鑳屾櫙灞傦細鎵胯浇 clip-path 鍜?box-shadow锛屼笉瑁佸壀瀛愬厓绱?*/
.hud-shell .dock::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
clip-path: none;
box-shadow: none;
border-top: none;
pointer-events: none;
z-index: -1;
}
/* 宸﹀彸鑳介噺缈?*/
.hud-shell .dock::after {
content: "";
position: absolute;
top: 50%; left: -36px; right: -36px;
height: 1px;
transform: translateY(-50%);
background: transparent;
pointer-events: none;
}
/* dock 娴姩绮掑瓙 */
.hud-shell .dock .dock-particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #00e5ff;
box-shadow: 0 0 6px #00e5ff, 0 0 12px rgba(0, 220, 255, .6);
pointer-events: none;
animation: dockParticleRise var(--dur, 3s) ease-in infinite;
animation-delay: var(--delay, 0s);
opacity: 0;
}
@keyframes dockParticleRise {
0% { transform: translateY(0) scale(1); opacity: 0; }
10% { opacity: .9; }
80% { opacity: .5; }
100% { transform: translateY(-60px) scale(.3); opacity: 0; }
}
/* dock 鎸夐挳 */
.hud-shell .dock button {
width: 112px;
height: 42px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
color: #e4f8ff;
border-radius: 50px;
border: 1px solid rgba(0, 180, 255, .45);
background:
linear-gradient(180deg, rgba(45, 137, 204, .24), transparent 42%),
linear-gradient(160deg, rgba(4, 40, 90, .85), rgba(2, 16, 48, .92));
box-shadow:
inset 0 1px 0 rgba(100, 220, 255, .3),
inset 0 0 18px rgba(0, 140, 255, .15),
0 0 10px rgba(0, 160, 255, .25);
opacity: .82;
transition: transform .18s ease, opacity .18s ease, filter .18s ease;
position: relative;
cursor: pointer;
}
.hud-shell .dock button:hover {
transform: translateY(-6px) scale(1.06);
opacity: 1;
filter:
drop-shadow(0 0 12px rgba(0, 220, 255, .8))
drop-shadow(0 0 24px rgba(0, 180, 255, .4));
}
.hud-shell .dock button.selected {
opacity: 1;
border-color: rgba(112, 226, 255, .92);
background:
linear-gradient(180deg, rgba(22, 140, 255, .86), rgba(7, 70, 138, .9));
box-shadow:
inset 0 0 22px rgba(89, 210, 255, .34),
0 0 22px rgba(35, 171, 255, .34);
}
/* 鈺愨晲 鐩戞帶涓績涓绘寜閽?鈺愨晲 */
.hud-shell .dock-monitor-btn {
width: 86px !important;
height: 68px !important;
flex-direction: column !important;
gap: 2px !important;
border-radius: 50% !important;
border: 1px solid rgba(96, 220, 255, .7) !important;
background:
linear-gradient(180deg, rgba(42, 150, 230, .82), rgba(10, 64, 142, .86)) !important;
box-shadow:
inset 0 1px 0 rgba(194, 241, 255, .54),
0 0 18px rgba(0, 180, 255, .5),
inset 0 0 20px rgba(0, 140, 255, .2) !important;
opacity: 1 !important;
position: relative;
overflow: visible !important;
margin-bottom: 0;
flex-shrink: 0;
width: 72px !important;
height: 72px !important;
}
.hud-shell .dock-monitor-btn:hover {
transform: translateY(-8px) scale(1.08) !important;
box-shadow:
inset 0 1px 0 rgba(220, 250, 255, .72),
0 0 32px rgba(0, 200, 255, .7),
inset 0 0 24px rgba(0, 160, 255, .3) !important;
}
/* 鍙屾棆杞兘閲忕幆 */
.hud-shell .monitor-ring {
position: absolute;
border-radius: 50%;
clip-path: none;
pointer-events: none;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.hud-shell .monitor-ring-1 {
width: 88px;
height: 88px;
border: 1.5px solid transparent;
border-top-color: rgba(0, 220, 255, .9);
border-right-color: rgba(0, 180, 255, .4);
animation: monitorRing1 2s linear infinite;
}
.hud-shell .monitor-ring-2 {
width: 104px;
height: 104px;
border: 1px solid transparent;
border-bottom-color: rgba(0, 200, 255, .7);
border-left-color: rgba(0, 160, 255, .3);
animation: monitorRing2 3s linear infinite reverse;
}
@keyframes monitorRing1 {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes monitorRing2 {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hud-shell .dock i {
width: 26px;
height: 26px;
display: grid;
place-items: center;
font-style: normal;
font-size: 20px;
border-radius: 50%;
background: transparent;
box-shadow: none;
}
.hud-shell .dock .alert i {
color: #ffd6d6;
}
.hud-shell .dock span {
position: static;
transform: none;
display: block;
width: auto;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
text-align: center;
color: #b8eeff;
text-shadow: 0 0 8px rgba(0, 210, 255, .9);
letter-spacing: 0.5px;
}
.hud-shell .dock-monitor-btn span {
font-size: 10px;
line-height: 1;
}
.hud-shell .dock .bean-icon svg path:first-child {
fill: rgba(113, 238, 255, .18);
}
.hud-shell .hud-device-switch {
position: absolute;
left: 50%;
bottom: 112px;
z-index: 11;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(6, minmax(86px, 1fr));
align-items: center;
width: min(92vw, 586px);
min-height: 42px;
padding: 3px;
border: 1px solid rgba(0, 154, 255, .34);
border-radius: 23px;
background:
linear-gradient(180deg, rgba(5, 34, 70, .76), rgba(1, 13, 37, .86)),
radial-gradient(circle at 50% -30%, rgba(64, 180, 255, .18), transparent 55%);
box-shadow:
inset 0 1px 0 rgba(125, 220, 255, .18),
inset 0 0 28px rgba(0, 130, 255, .11),
0 0 16px rgba(0, 139, 255, .23),
0 12px 30px rgba(0, 0, 0, .38);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.hud-shell .hud-device-switch-btn {
position: relative;
height: 34px;
min-width: 0;
padding: 0 12px;
border: 0;
border-radius: 18px;
background: transparent;
color: rgba(189, 219, 238, .64);
font-size: 13px;
font-weight: 700;
line-height: 34px;
white-space: nowrap;
text-align: center;
cursor: pointer;
letter-spacing: 0;
transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hud-shell .hud-device-switch-btn:hover {
color: #e8fbff;
background: rgba(24, 111, 178, .2);
}
.hud-shell .hud-device-switch-btn.active {
color: #e9fbff;
background:
linear-gradient(180deg, rgba(38, 129, 220, .88), rgba(8, 69, 149, .92));
box-shadow:
inset 0 1px 0 rgba(168, 230, 255, .34),
inset 0 -1px 0 rgba(0, 90, 190, .35),
0 0 10px rgba(0, 144, 255, .58),
0 0 22px rgba(0, 90, 255, .34);
}
@media (max-width: 900px) {
body {
overflow: auto;
}
.hud-shell .screen {
min-width: 0;
height: auto;
min-height: 100vh;
padding: 96px 14px 24px;
overflow: visible;
}
.hud-shell .topbar {
height: 86px;
padding: 8px 12px;
}
.hud-shell .time span:not(.weather),
.hud-shell .weather,
.hud-shell .account span,
.hud-shell .account strong {
display: none;
}
.hud-shell .brand {
width: 78vw;
}
.hud-shell .brand h1 {
margin-top: 10px;
font-size: 18px;
letter-spacing: 2px;
}
.hud-shell .brand p {
display: none;
}
.hud-shell .tabs,
.hud-shell .rail,
.hud-shell .hud-top-stats,
.hud-shell .map,
.hud-shell .hud-device-switch,
.hud-shell .dock {
position: relative;
inset: auto;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
transform: none;
}
.hud-shell .tabs {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 14px;
}
.hud-shell .tabs a {
width: 30%;
min-width: 96px;
}
.hud-shell .hud-top-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 14px;
}
.hud-shell .rail {
margin-bottom: 14px;
}
.hud-shell .map {
height: 360px;
margin: 14px 0;
border: 1px solid rgba(43, 175, 255, .38);
background: rgba(0, 18, 45, .34);
border-radius: 18px;
}
.hud-shell .hud-device-switch {
grid-template-columns: repeat(3, minmax(0, 1fr));
width: auto;
margin: 0 0 14px;
}
.hud-shell .hud-device-switch-btn {
padding: 0 8px;
font-size: 12px;
}
.hud-shell .right {
margin-top: 14px;
}
.hud-shell .dock {
flex-wrap: wrap;
justify-content: center;
margin-top: 12px;
}
}
/* ============================================================
* 鏍囬涓や晶绮掑瓙鎵╂暎 (Brand Burst)
* 鐢?.brand h1 鏂囧瓧涓ょ鍚戝鎵囧舰鍠峰皠灏忕矑瀛? * ============================================================ */
.hud-shell .brand-burst {
position: absolute;
top: 50%;
width: 0;
height: 0;
z-index: 1;
pointer-events: none;
}
.hud-shell .brand-burst.left { left: 18%; transform: translateY(2px); }
.hud-shell .brand-burst.right { right: 18%; transform: translateY(2px); }
.hud-shell .brand-burst i {
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #b8f1ff 35%, rgba(66, 220, 255, 0) 75%);
box-shadow: 0 0 6px #6fe4ff, 0 0 14px rgba(66, 220, 255, .85);
opacity: 0;
animation: brandBurst 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.hud-shell .brand-burst.right i {
animation-name: brandBurstRight;
}
/* 8 棰楃矑瀛愭寜瑙掑害宸敊鎺掑垪锛屽乏渚ф湞宸﹀銆佸彸渚ф湞鍙冲鎵╂暎 */
.hud-shell .brand-burst.left i:nth-child(1) { --angle: 170deg; animation-delay: 0s; --dist: 64px; }
.hud-shell .brand-burst.left i:nth-child(2) { --angle: 158deg; animation-delay: .15s; --dist: 78px; }
.hud-shell .brand-burst.left i:nth-child(3) { --angle: 186deg; animation-delay: .3s; --dist: 70px; }
.hud-shell .brand-burst.left i:nth-child(4) { --angle: 148deg; animation-delay: .45s; --dist: 58px; }
.hud-shell .brand-burst.left i:nth-child(5) { --angle: 198deg; animation-delay: .6s; --dist: 86px; }
.hud-shell .brand-burst.left i:nth-child(6) { --angle: 176deg; animation-delay: .75s; --dist: 72px; }
.hud-shell .brand-burst.left i:nth-child(7) { --angle: 164deg; animation-delay: .9s; --dist: 60px; }
.hud-shell .brand-burst.left i:nth-child(8) { --angle: 192deg; animation-delay: 1.05s; --dist: 80px; }
.hud-shell .brand-burst.right i:nth-child(1) { --angle: 10deg; animation-delay: 0s; --dist: 64px; }
.hud-shell .brand-burst.right i:nth-child(2) { --angle: 22deg; animation-delay: .15s; --dist: 78px; }
.hud-shell .brand-burst.right i:nth-child(3) { --angle: -6deg; animation-delay: .3s; --dist: 70px; }
.hud-shell .brand-burst.right i:nth-child(4) { --angle: 32deg; animation-delay: .45s; --dist: 58px; }
.hud-shell .brand-burst.right i:nth-child(5) { --angle: -18deg; animation-delay: .6s; --dist: 86px; }
.hud-shell .brand-burst.right i:nth-child(6) { --angle: 4deg; animation-delay: .75s; --dist: 72px; }
.hud-shell .brand-burst.right i:nth-child(7) { --angle: 16deg; animation-delay: .9s; --dist: 60px; }
.hud-shell .brand-burst.right i:nth-child(8) { --angle: -12deg; animation-delay: 1.05s; --dist: 80px; }
@keyframes brandBurst {
0% {
transform: rotate(var(--angle)) translateX(0) scale(.6);
opacity: 0;
}
18% {
opacity: 1;
transform: rotate(var(--angle)) translateX(calc(var(--dist) * .25)) scale(1.2);
}
62% {
opacity: .85;
transform: rotate(var(--angle)) translateX(calc(var(--dist) * .8)) scale(.95);
}
100% {
transform: rotate(var(--angle)) translateX(var(--dist)) scale(.3);
opacity: 0;
}
}
@keyframes brandBurstRight {
0% {
transform: rotate(var(--angle)) translateX(0) scale(.6);
opacity: 0;
}
18% {
opacity: 1;
transform: rotate(var(--angle)) translateX(calc(var(--dist) * .25)) scale(1.2);
}
62% {
opacity: .85;
transform: rotate(var(--angle)) translateX(calc(var(--dist) * .8)) scale(.95);
}
100% {
transform: rotate(var(--angle)) translateX(var(--dist)) scale(.3);
opacity: 0;
}
}
@media (max-width: 1500px) {
.hud-shell .brand-burst.left { left: 14%; }
.hud-shell .brand-burst.right { right: 14%; }
.hud-shell .brand-burst i { animation-duration: 2s; }
}
@media (max-width: 1200px) {
.hud-shell .brand-burst.left { left: 10%; }
.hud-shell .brand-burst.right { right: 10%; }
.hud-shell .brand-burst i:nth-child(n+5) { display: none; }
}
/* ============================================================
* 涓儴 .map 鐢ㄤ綔 Three.js 鐢诲竷瀹瑰櫒
* hud-adapter.js 浼氭妸 #canvas-container 绉诲叆 .map
* ============================================================ */
/* canvas-container 保持在 body 下全屏，不移入 .map，此规则已废弃 */
/* canvas-container 全屏由 layout.css 统一管理 */
/* 鑱氱劍鐏叿鏃舵妸鏁翠綋鐨勬殫鍖栧眰杩涗竴姝ユ贰鍑猴紝璁?3D 瑙嗛噹鏇撮€?*/
.hud-shell.lamp-focus::before,
.hud-shell.lamp-focus::after {
opacity: .35;
transition: opacity .3s ease;
}
/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
AI 鍒嗘瀽涓績妯″潡
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.ai-center-panel {
position: relative;
width: 100%;
z-index: 3;
pointer-events: none;
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
will-change: transform, opacity;
margin-top: 8px;
}
.ai-center-panel .ai-chat-input,
.ai-center-panel .ai-chat-send {
pointer-events: all;
}
/* 鍏竟褰㈢鎶€澶栨 SVG 鎻忚竟 */
.ai-center-panel .ai-hex-border {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
.ai-center-panel .ai-hex-border rect {
fill: none;
stroke: rgba(0, 200, 255, 0.55);
stroke-width: 1.2;
filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.7));
animation: aiHexPulse 3s ease-in-out infinite;
}
.ai-center-panel .ai-hex-border polyline,
.ai-center-panel .ai-hex-border path {
fill: none;
stroke: rgba(0, 200, 255, 0.9);
filter: drop-shadow(0 0 5px rgba(0, 220, 255, 0.8));
}
@keyframes aiHexPulse {
0%, 100% { stroke-opacity: 0.55; filter: drop-shadow(0 0 6px rgba(0,200,255,.7)); }
50% { stroke-opacity: 0.9; filter: drop-shadow(0 0 14px rgba(0,220,255,1)); }
}
/* 涓讳綋闈㈡澘 */
.ai-center-panel .ai-body {
position: relative;
margin: 8px 10px 0;
padding: 12px 14px 10px;
background: linear-gradient(145deg, rgba(2, 14, 38, 0.88), rgba(4, 22, 58, 0.82));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(0, 180, 255, 0.28);
border-radius: 6px 6px 0 0;
box-shadow:
inset 0 0 30px rgba(0, 160, 255, 0.08),
0 0 20px rgba(0, 180, 255, 0.18);
overflow: hidden;
}
/* 鑳屾櫙鏁板瓧缃戞牸 */
.ai-center-panel .ai-body::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 180, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 180, 255, 0.04) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
/* 鐢佃矾绾挎潯瑁呴グ */
.ai-center-panel .ai-body::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40px;
background: linear-gradient(180deg, transparent, rgba(0, 160, 255, 0.06));
pointer-events: none;
}
/* 鏍囬琛?*/
.ai-center-panel .ai-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.ai-center-panel .ai-title-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
position: relative;
}
/* AI 鏍稿績鐞冧綋 */
.ai-center-panel .ai-core {
width: 28px;
height: 28px;
border-radius: 50%;
background: radial-gradient(circle at 38% 36%, #a0f0ff, #0080ff 45%, #003080 80%);
box-shadow: 0 0 10px rgba(0, 180, 255, 0.9), 0 0 22px rgba(0, 140, 255, 0.5);
animation: aiCorePulse 2.4s ease-in-out infinite;
position: relative;
}
.ai-center-panel .ai-core::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid rgba(0, 220, 255, 0.5);
animation: aiRingSpin 3s linear infinite;
}
.ai-center-panel .ai-core::after {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px dashed rgba(0, 200, 255, 0.28);
animation: aiRingSpin 6s linear infinite reverse;
}
@keyframes aiCorePulse {
0%, 100% { box-shadow: 0 0 10px rgba(0,180,255,.9), 0 0 22px rgba(0,140,255,.5); }
50% { box-shadow: 0 0 18px rgba(0,220,255,1), 0 0 36px rgba(0,180,255,.7); }
}
@keyframes aiRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ai-center-panel .ai-title-text {
flex: 1;
}
.ai-center-panel .ai-title-text h3 {
margin: 0;
font-size: 13px;
font-weight: 700;
color: #00e5ff;
letter-spacing: 1.5px;
text-shadow: 0 0 10px rgba(0, 220, 255, 0.8);
line-height: 1.2;
}
.ai-center-panel .ai-title-text p {
margin: 1px 0 0;
font-size: 9px;
color: rgba(100, 200, 255, 0.55);
letter-spacing: 0.5px;
}
/* 鍒嗛殧绾?*/
.ai-center-panel .ai-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.5), transparent);
margin-bottom: 10px;
position: relative;
z-index: 1;
}
/* 鏁版嵁鎸囨爣缃戞牸 */
.ai-center-panel .ai-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.ai-center-panel .ai-metric {
background: rgba(0, 100, 200, 0.15);
border: 1px solid rgba(0, 180, 255, 0.22);
border-radius: 4px;
padding: 7px 8px;
position: relative;
overflow: hidden;
}
.ai-center-panel .ai-metric::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: linear-gradient(180deg, #00e5ff, #0060ff);
border-radius: 2px 0 0 2px;
}
.ai-center-panel .ai-metric-label {
font-size: 9px;
color: rgba(140, 210, 255, 0.7);
display: block;
margin-bottom: 3px;
letter-spacing: 0.3px;
}
.ai-center-panel .ai-metric-val {
font-size: 18px;
font-weight: 700;
color: #00e5ff;
line-height: 1;
text-shadow: 0 0 10px rgba(0, 220, 255, 0.7);
display: block;
}
.ai-center-panel .ai-metric-val em {
font-size: 10px;
font-style: normal;
color: rgba(100, 200, 255, 0.6);
margin-left: 1px;
}
/* 鏁呴殰棰勬祴鐗规畩鑹?*/
.ai-center-panel .ai-metric.warn .ai-metric-val { color: #ffb347; text-shadow: 0 0 10px rgba(255,160,60,.7); }
.ai-center-panel .ai-metric.warn::before { background: linear-gradient(180deg, #ffb347, #ff6020); }
/* 鏁版嵁绮掑瓙娴佸姩鏉?*/
.ai-center-panel .ai-particle-bar {
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,200,255,.15), transparent);
margin-bottom: 8px;
position: relative;
z-index: 1;
overflow: hidden;
}
.ai-center-panel .ai-particle-bar::after {
content: "";
position: absolute;
top: 0; left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, #00e5ff, rgba(0,220,255,.4), transparent);
animation: aiParticleFlow 2s linear infinite;
}
@keyframes aiParticleFlow {
from { left: -40%; }
to { left: 110%; }
}
/* AI 杩愯鐘舵€?*/
.ai-center-panel .ai-status {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 8px;
background: rgba(0, 60, 30, 0.35);
border: 1px solid rgba(0, 220, 100, 0.25);
border-radius: 4px;
position: relative;
z-index: 1;
}
.ai-center-panel .ai-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #00e676;
box-shadow: 0 0 8px rgba(0, 230, 118, 0.9);
flex-shrink: 0;
animation: aiStatusBlink 2s ease-in-out infinite;
}
@keyframes aiStatusBlink {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0,230,118,.9); }
50% { opacity: 0.6; box-shadow: 0 0 4px rgba(0,230,118,.4); }
}
.ai-center-panel .ai-status-text {
font-size: 10px;
color: rgba(100, 255, 160, 0.85);
letter-spacing: 0.5px;
}
.ai-center-panel .ai-status-tag {
margin-left: auto;
font-size: 8px;
color: rgba(0, 200, 100, 0.6);
letter-spacing: 0.3px;
}
/* ============================================================
* HUD 鍥涜杈规 鈥?鍙犲湪 .map 涓夌淮鍦烘櫙涓婃柟锛宲ointer-events: none
* ============================================================ */
.hud-corner-frame {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
}
/* SVG 鎵弿绾垮眰 */
.hud-corner-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.hud-scan-h,
.hud-scan-v {
stroke: rgba(0, 210, 255, .12);
stroke-width: 0.3;
vector-effect: non-scaling-stroke;
stroke-dasharray: 4 6;
}
/* L 褰㈠洓瑙?鈥?鍏叡鍩虹 */
.hc {
position: absolute;
width: 48px;
height: 48px;
pointer-events: none;
}
/* 宸︿笂 */
.hc.tl {
top: 16px; left: 16px;
border-top: 1.5px solid #00e5ff;
border-left: 1.5px solid #00e5ff;
filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 14px rgba(0, 200, 255, .5));
}
/* 鍙充笂 */
.hc.tr {
top: 16px; right: 16px;
border-top: 1.5px solid #00e5ff;
border-right: 1.5px solid #00e5ff;
filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 14px rgba(0, 200, 255, .5));
}
/* 宸︿笅 */
.hc.bl {
bottom: 16px; left: 16px;
border-bottom: 1.5px solid #00e5ff;
border-left: 1.5px solid #00e5ff;
filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 14px rgba(0, 200, 255, .5));
}
/* 鍙充笅 */
.hc.br {
bottom: 16px; right: 16px;
border-bottom: 1.5px solid #00e5ff;
border-right: 1.5px solid #00e5ff;
filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 14px rgba(0, 200, 255, .5));
}
/* 棰濆缁嗚摑绾垮欢浼革紙blueprint 鎰燂級 */
.hc::before,
.hc::after {
content: '';
position: absolute;
background: rgba(0, 210, 255, .35);
pointer-events: none;
}
/* 妯悜寤朵几绾?*/
.hc::before {
height: 1px;
width: 24px;
}
.hc.tl::before { top: 0; left: 48px; }
.hc.tr::before { top: 0; right: 48px; }
.hc.bl::before { bottom: 0; left: 48px; }
.hc.br::before { bottom: 0; right: 48px; }
/* 绾靛悜寤朵几绾?*/
.hc::after {
width: 1px;
height: 24px;
}
.hc.tl::after { left: 0; top: 48px; }
.hc.tr::after { right: 0; top: 48px; }
.hc.bl::after { left: 0; bottom: 48px; }
.hc.br::after { right: 0; bottom: 48px; }
/* 鍥涜浜偣 */
.hc-dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #00e5ff 45%, rgba(0,229,255,0) 100%);
box-shadow: 0 0 8px #00e5ff, 0 0 16px rgba(0, 200, 255, .6);
pointer-events: none;
animation: hudDotPulse 2.4s ease-in-out infinite;
}
.hc-dot.tl { top: 13px; left: 13px; }
.hc-dot.tr { top: 13px; right: 13px; }
.hc-dot.bl { bottom: 13px; left: 13px; }
.hc-dot.br { bottom: 13px; right: 13px; }
.hc-dot.tr { animation-delay: .6s; }
.hc-dot.bl { animation-delay: 1.2s; }
.hc-dot.br { animation-delay: 1.8s; }
@keyframes hudDotPulse {
0%, 100% { opacity: .7; transform: scale(.85); box-shadow: 0 0 6px #00e5ff, 0 0 12px rgba(0,200,255,.5); }
50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px #00e5ff, 0 0 22px rgba(0,220,255,.8); }
}
/* 鈹€鈹€ 鐩戞帶涓績锛氳矾鐏ご椤舵偓娴暟鎹潰鏉?鈹€鈹€ */
.lamp-monitor-label {
background: rgba(1, 10, 30, 0.88);
border: 1px solid rgba(0, 200, 255, 0.55);
border-radius: 6px;
padding: 7px 10px 6px;
width: 130px;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 11px;
color: #9ddcff;
box-shadow: 0 0 12px rgba(0, 180, 255, 0.35), inset 0 0 8px rgba(0, 100, 200, 0.15);
pointer-events: none;
transform: translateX(-50%);
}
.lamp-monitor-label .lml-title {
font-size: 12px;
font-weight: bold;
color: #00e5ff;
text-align: center;
margin-bottom: 5px;
letter-spacing: 1px;
border-bottom: 1px solid rgba(0, 200, 255, 0.25);
padding-bottom: 4px;
}
.lamp-monitor-label .lml-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3px;
line-height: 1.4;
}
.lamp-monitor-label .lml-row span:first-child {
color: rgba(157, 220, 255, 0.65);
}
.lamp-twin-window:not(.lamp-dashboard-window) {
border: 1px solid rgba(0, 164, 255, .22) !important;
border-radius: 4px !important;
background:
linear-gradient(180deg, rgba(5, 30, 64, .82), rgba(2, 13, 34, .68)),
radial-gradient(circle at 16% 20%, rgba(63, 172, 255, .16), transparent 45%) !important;
box-shadow:
inset 0 0 24px rgba(0, 152, 255, .08),
0 8px 24px rgba(0, 0, 0, .22) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.lamp-twin-window:not(.lamp-dashboard-window)::before {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 8px;
height: 8px;
border-top: 1px solid rgba(92, 214, 255, .7);
border-left: 1px solid rgba(92, 214, 255, .7);
pointer-events: none;
}
.lamp-twin-window:not(.lamp-dashboard-window):hover {
box-shadow:
inset 0 0 24px rgba(0, 152, 255, .12),
0 8px 24px rgba(0, 0, 0, .24),
0 0 18px rgba(0, 164, 255, .16) !important;
}
.lamp-twin-window:not(.lamp-dashboard-window) .lw-hdr {
min-height: 42px;
padding: 9px 14px 8px 15px !important;
border-bottom: 1px solid rgba(0, 164, 255, .16) !important;
}
.lamp-twin-window:not(.lamp-dashboard-window) .lw-hdr > span:first-child {
color: #f5fbff !important;
font-size: 16px !important;
font-weight: 800 !important;
text-shadow: 0 0 10px rgba(86, 191, 255, .35);
}
.lamp-twin-window:not(.lamp-dashboard-window) .lw-hdr > span:first-child::first-letter {
color: #20b9ff;
}
.lamp-twin-window:not(.lamp-dashboard-window) .lw-body {
color: #dceeff;
}
.lw-close-placeholder {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.lamp-mini-action {
height: 28px;
border: 1px solid rgba(28, 143, 255, .44);
border-radius: 4px;
color: #dcecff;
background: rgba(10, 85, 158, .48);
font-size: 12px;
cursor: pointer;
}
.lamp-mini-action:hover {
border-color: rgba(89, 187, 255, .82);
background: rgba(18, 104, 177, .62);
}
.lamp-trend-panel {
height: 100%;
display: grid;
grid-template-rows: 24px minmax(0, 1fr);
gap: 2px;
}
.lamp-trend-tabs {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 3px;
}
.lamp-trend-tabs button {
min-width: 28px;
height: 24px;
border: 0;
border-radius: 12px;
color: #8fa8c6;
background: transparent;
font-size: 12px;
}
.lamp-trend-tabs button.active {
color: #fff;
background: rgba(0, 148, 255, .38);
box-shadow: inset 0 0 12px rgba(74, 177, 255, .2);
}
.lamp-trend-chart {
display: block;
overflow: visible;
}
.lamp-trend-chart .trend-grid path {
fill: none;
stroke: rgba(105, 170, 230, .14);
stroke-width: 1;
}
.lamp-trend-chart .trend-grid path.v {
stroke: rgba(105, 170, 230, .07);
}
.lamp-trend-chart .trend-legend text,
.lamp-trend-chart .trend-axis text,
.lamp-trend-chart .trend-labels text {
fill: #8fa8c6;
font-size: 10px;
}
.lamp-trend-chart .axis-line path {
fill: none;
stroke: rgba(132, 197, 255, .22);
stroke-width: 1;
}
.lamp-trend-chart .trend-legend circle,
.lamp-trend-chart .energy-dots circle {
fill: #00aaff;
stroke: rgba(210, 245, 255, .45);
stroke-width: 1.2;
}
.lamp-trend-chart .trend-legend .power,
.lamp-trend-chart .power-dots circle {
fill: #d6b533;
stroke: rgba(255, 240, 168, .5);
stroke-width: 1.2;
}
.lamp-trend-chart .energy-line {
fill: none;
stroke: #00aaff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 5px rgba(0, 170, 255, .5));
}
.lamp-trend-chart .power-line-mini {
fill: none;
stroke: #d6b533;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(214, 181, 51, .35));
}
.lamp-trend-chart .trend-labels text {
fill: #8ddcff;
font-size: 10px;
font-weight: 700;
}
.lamp-trend-chart .trend-labels text.power {
fill: #ead16a;
}
.lamp-env-energy-panel {
height: 100%;
display: grid;
grid-template-rows: minmax(108px, .92fr) minmax(50px, .38fr);
gap: 10px;
}
.lamp-env-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.lamp-env-cards article {
min-width: 0;
min-height: 0;
padding: 16px 10px 12px;
display: grid;
grid-template-rows: auto auto auto auto;
align-content: center;
border: 1px solid rgba(0, 142, 224, .30);
border-radius: 5px;
background: rgba(3, 28, 64, .55);
text-align: center;
box-shadow: inset 0 0 18px rgba(46, 158, 255, .08);
}
.lamp-env-cards span {
display: block;
color: #99aeca;
font-size: 14px;
}
.lamp-env-cards strong {
display: block;
margin-top: 10px;
color: #fff;
font-size: 24px;
line-height: 1;
text-shadow: 0 0 9px rgba(80, 190, 255, .28);
}
.lamp-env-cards em {
margin-left: 2px;
color: #b9c7da;
font-size: 13px;
font-style: normal;
}
.lamp-env-cards em.warn {
color: #f8c85b;
}
.lamp-env-cards small {
display: block;
margin-top: 9px;
color: #9daec4;
font-size: 12px;
}
.lamp-env-bottom {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.lamp-env-bottom div {
min-width: 0;
padding: 9px 10px;
border: 1px solid rgba(0, 142, 224, .20);
border-radius: 4px;
background: rgba(3, 22, 52, .46);
}
.lamp-env-bottom span {
display: block;
color: #8fa8c6;
font-size: 12px;
}
.lamp-env-bottom b {
display: block;
margin-top: 4px;
color: #fff;
font-size: 17px;
}
.lamp-env-bottom b.ok {
color: #16dba8;
}
.lamp-alarm-overview-panel {
height: 100%;
display: grid;
grid-template-rows: minmax(58px, auto) minmax(62px, 1fr) 36px;
gap: 10px;
}
.lamp-alarm-main {
display: grid;
grid-template-columns: 52px 82px minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.lamp-alarm-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid #ff654f;
color: #ff8a69;
font-size: 25px;
clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}
.lamp-alarm-total {
display: flex;
align-items: center;
gap: 8px;
border-right: 1px solid rgba(41, 136, 215, .32);
}
.lamp-alarm-total strong {
color: #fff;
font-size: 30px;
line-height: 1;
}
.lamp-alarm-total span,
.lamp-alarm-levels {
color: #aebbd0;
}
.lamp-alarm-levels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
}
.lamp-alarm-levels b {
display: block;
margin-top: 7px;
color: #fff;
font-size: 18px;
}
.lamp-alarm-levels b.danger {
color: #ff6454;
}
.lamp-alarm-list {
min-height: 0;
display: grid;
align-content: center;
gap: 8px;
}
.lamp-alarm-list p {
min-width: 0;
height: 27px;
margin: 0;
padding: 0 10px;
display: grid;
grid-template-columns: 8px minmax(0, 1fr) 52px;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 125, 87, .22);
border-radius: 4px;
background: rgba(89, 28, 24, .26);
color: #dceeff;
}
.lamp-alarm-list i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ffb05c;
}
.lamp-alarm-list i.danger {
background: #ff6454;
}
.lamp-alarm-list span {
overflow: hidden;
color: #dceeff;
text-overflow: ellipsis;
white-space: nowrap;
}
.lamp-alarm-list b {
color: #ffad96;
font-size: 12px;
font-weight: 500;
text-align: right;
}
.lamp-alarm-overview-panel button {
width: 100%;
height: 36px;
border: 1px solid rgba(255, 105, 80, .34);
border-radius: 4px;
color: #ffad96;
background: rgba(88, 24, 18, .42);
cursor: pointer;
font-size: 13px;
}
.lamp-status-detail {
height: 100%;
display: grid;
grid-template-rows: 34px minmax(0, 1fr) 78px;
color: #dceeff;
}
.lamp-status-head {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
border-bottom: 1px solid rgba(72, 145, 200, .16);
}
.lamp-status-head em {
justify-self: center;
display: inline-flex;
align-items: center;
gap: 9px;
color: #13d4b4;
font-style: normal;
font-size: 17px;
font-weight: 700;
}
.lamp-status-head em i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #13d4b4;
box-shadow: 0 0 10px rgba(19, 212, 180, .8);
}
.lamp-status-main {
display: grid;
grid-template-columns: minmax(260px, 1fr) 230px minmax(260px, 1fr);
align-items: center;
justify-items: center;
gap: 42px;
padding: 8px 72px 8px;
}
.lamp-status-side {
width: 100%;
max-width: 360px;
display: grid;
gap: 18px;
}
.lamp-status-side:first-child {
justify-self: end;
}
.lamp-status-side:last-child {
justify-self: start;
}
.lamp-status-item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: 18px;
}
.lamp-status-side:first-child .lamp-status-item {
grid-template-columns: minmax(0, 1fr) 48px;
}
.lamp-status-side:first-child .lamp-status-item > i {
grid-column: 2;
grid-row: 1;
}
.lamp-status-side:first-child .lamp-status-item p {
grid-column: 1;
grid-row: 1;
text-align: right;
}
.lamp-status-item > i {
width: 48px;
height: 48px;
border-radius: 12px;
background:
radial-gradient(circle at 50% 45%, rgba(161, 255, 224, .34), transparent 42%),
linear-gradient(145deg, rgba(22, 184, 137, .88), rgba(7, 102, 82, .84));
border: 1px solid rgba(74, 255, 196, .48);
box-shadow:
inset 0 0 13px rgba(151, 255, 220, .22),
0 0 14px rgba(22, 220, 166, .22);
}
.lamp-status-item > i::after {
content: "";
display: block;
width: 13px;
height: 13px;
margin: 17px auto 0;
border-radius: 50%;
background: rgba(95, 255, 210, .88);
box-shadow: 0 0 14px rgba(67, 255, 198, .78);
}
.lamp-status-item p {
margin: 0;
}
.lamp-status-item span {
display: block;
color: #9fb4cf;
font-size: 13px;
}
.lamp-status-item b {
display: block;
margin-top: 5px;
color: #cdddf2;
font-size: 19px;
line-height: 1.1;
}
.lamp-status-item b.ok {
color: #13d4b4;
}
.lamp-status-check {
width: 166px;
height: 166px;
justify-self: center;
display: grid;
place-items: center;
border: 5px solid rgba(19, 212, 180, .70);
border-radius: 50%;
color: #fff;
font-size: 66px;
font-weight: 800;
background: radial-gradient(circle, rgba(55, 148, 200, .58), rgba(5, 39, 82, .56) 62%, transparent 63%);
box-shadow: 0 0 34px rgba(19, 212, 180, .18), inset 0 0 28px rgba(77, 180, 255, .16);
}
.lamp-status-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 28px;
align-items: center;
justify-self: center;
width: min(100%, 1120px);
padding: 13px 72px 0;
border-top: 1px solid rgba(72, 145, 200, .28);
}
.lamp-status-actions button {
display: grid;
justify-items: center;
gap: 7px;
border: 0;
color: #dcecff;
background: transparent;
cursor: pointer;
}
.lamp-status-actions i {
height: 24px;
color: #dcecff;
font-size: 24px;
line-height: 1;
font-style: normal;
text-shadow: 0 0 10px rgba(78, 184, 255, .22);
}
.lamp-status-actions span {
color: #dcecff;
font-size: 14px;
}
.lamp-status-actions button.active span,
.lamp-action-strip button.active {
color: #32f2bd;
}
.lamp-status-actions button.active i,
.lamp-action-strip button.active {
text-shadow: 0 0 12px rgba(50, 242, 189, .55);
}
.lamp-dashboard-window {
position: fixed;
left: 20px;
right: 20px;
top: 126px;
bottom: 18px;
width: auto !important;
min-width: 0;
min-height: 0;
z-index: 9500;
color: #dceeff;
border: 0;
border-radius: 0;
background: linear-gradient(145deg, rgba(4, 22, 52, .82), rgba(2, 12, 32, .74));
box-shadow: none;
backdrop-filter: none;
opacity: 0;
transform: translateY(18px) scale(.985);
transition: opacity .28s ease, transform .28s ease;
overflow: hidden;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.lamp-dashboard-window.active { opacity: 1; transform: translateY(0) scale(1); }
.lamp-dashboard-header {
height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
border-bottom: 0;
background: transparent;
}
.lamp-dashboard-header strong {
display: block;
color: #f4fbff;
font-size: 20px;
letter-spacing: 1px;
text-shadow: 0 0 12px rgba(86, 191, 255, .55);
}
.lamp-dashboard-header span {
display: block;
margin-top: 4px;
color: rgba(174, 207, 234, .72);
font-size: 11px;
letter-spacing: 1.8px;
}
.lamp-dashboard-header .lw-close {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid rgba(54, 170, 255, .4);
border-radius: 3px;
color: #b9d5ee;
background: rgba(11, 62, 112, .5);
cursor: pointer;
}
.lamp-dashboard-header .lw-close:hover {
color: #fff;
border-color: rgba(255, 112, 105, .7);
background: rgba(122, 40, 48, .62);
}
.lamp-dashboard-body {
height: calc(100% - 46px);
display: grid;
grid-template-columns: 23% minmax(0, 1fr) 23%;
grid-template-rows: minmax(0, .88fr) minmax(0, .88fr) minmax(0, .82fr);
gap: 10px;
padding: 8px 6px 0;
overflow: hidden;
}
.lamp-card,
.lamp-top-metrics {
min-width: 0;
min-height: 0;
position: relative;
overflow: hidden;
border: 1px solid rgba(28, 147, 255, .38);
border-radius: 5px;
background: linear-gradient(145deg, rgba(4, 34, 76, .86), rgba(2, 14, 38, .78));
box-shadow: inset 0 0 18px rgba(19, 123, 215, .12), 0 0 10px rgba(0, 112, 255, .12);
}
.lamp-card { padding: 10px 12px; }
.lamp-card {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 200, 255, .34) transparent;
background-color: rgba(4, 20, 46, .28);
}
.lamp-card::-webkit-scrollbar { width: 6px; }
.lamp-card::-webkit-scrollbar-track { background: rgba(0, 18, 44, .32); }
.lamp-card::-webkit-scrollbar-thumb {
border-radius: 999px;
background: linear-gradient(180deg, rgba(49, 170, 255, .68), rgba(0, 101, 210, .52));
}
.lamp-card h3 {
margin: 0 0 10px;
padding-bottom: 8px;
color: #f5fbff;
border-bottom: 1px solid rgba(67, 145, 217, .22);
font-size: 15px;
line-height: 1;
text-shadow: 0 0 10px rgba(86, 191, 255, .38);
}
.lamp-card h3::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 9px;
border-radius: 2px;
background: #00e5ff;
box-shadow: 0 0 9px #00e5ff;
}
.lamp-card h3 em {
float: right;
color: #14d5af;
font-style: normal;
font-size: 13px;
}
.lamp-overview-card { grid-row: 1 / span 3; }
.lamp-top-metrics { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lamp-top-metrics article {
min-width: 0;
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-content: center;
column-gap: 10px;
padding: 10px 16px;
border-right: 1px solid rgba(39, 122, 202, .32);
}
.lamp-top-metrics article:last-child { border-right: 0; }
.lamp-top-metrics i {
grid-row: span 3;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
color: #bfeaff;
background: rgba(39, 104, 188, .42);
font-style: normal;
}
.lamp-top-metrics span,
.lamp-kv-list span,
.lamp-runtime-row span,
.lamp-stat-row span,
.lamp-icon-row span { color: #9fb4cf; font-size: 13px; }
.lamp-top-metrics strong { margin-top: 4px; color: #fff; font-size: 24px; line-height: 1; }
.lamp-top-metrics em,
.lamp-runtime-row em,
.lamp-stat-row em { margin-left: 4px; color: #c6d4e8; font-size: 12px; font-style: normal; }
.lamp-top-metrics small,
.lamp-stat-row small { margin-top: 5px; color: #91a8c7; font-size: 12px; }
.lamp-dashboard-window .up { color: #ff7b68; }
.lamp-dashboard-window .down,
.lamp-dashboard-window .ok { color: #16dba8 !important; }
.lamp-ring-large { display: grid; place-items: center; padding: 8px 0 12px; }
.lamp-ring-large svg { width: 116px; height: 116px; }
.lamp-ring-large b { color: #16dba8; font-size: 14px; }
.lamp-kv-list p {
min-height: 26px;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid rgba(67, 145, 217, .18);
}
.lamp-kv-list b { color: #dceaff; font-weight: 700; }
.lamp-kv-list b em {
margin-left: 6px;
padding: 2px 6px;
border-radius: 4px;
color: #d9fff2;
background: rgba(0, 190, 125, .66);
font-size: 11px;
font-style: normal;
}
.lamp-status-card { grid-column: 2; grid-row: 1 / span 2; }
.lamp-status-grid {
height: calc(100% - 58px);
display: grid;
grid-template-columns: 1fr 210px 1fr;
align-items: center;
gap: 18px;
}
.lamp-icon-row {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 50px;
}
.lamp-icon-row i {
width: 34px;
height: 34px;
border-radius: 11px;
background:
radial-gradient(circle at 50% 45%, rgba(161, 255, 224, .34), transparent 42%),
linear-gradient(145deg, rgba(22, 184, 137, .9), rgba(7, 102, 82, .86));
border: 1px solid rgba(74, 255, 196, .48);
box-shadow:
inset 0 0 12px rgba(151, 255, 220, .2),
0 0 12px rgba(22, 220, 166, .22);
}
.lamp-icon-row i::after {
content: "";
display: block;
width: 9px;
height: 9px;
margin: 11px auto 0;
border-radius: 50%;
background: rgba(95, 255, 210, .88);
box-shadow: 0 0 11px rgba(67, 255, 198, .78);
}
.lamp-icon-row p { margin: 0; }
.lamp-icon-row b { display: block; margin-top: 4px; color: #dceaff; font-size: 15px; }
.lamp-check-ring {
width: 126px;
height: 126px;
margin: 0 auto;
display: grid;
place-items: center;
border: 5px solid rgba(19, 212, 180, .62);
border-radius: 50%;
color: #fff;
font-size: 58px;
background: radial-gradient(circle, rgba(36, 134, 185, .5), rgba(6, 42, 88, .68));
box-shadow: 0 0 28px rgba(19, 212, 180, .18), inset 0 0 28px rgba(19, 212, 180, .16);
}
.lamp-action-strip {
height: 48px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
border-top: 1px solid rgba(67, 145, 217, .22);
padding-top: 8px;
}
.lamp-action-strip button,
.lamp-alarm-card button,
.lamp-device-card button {
border: 1px solid rgba(28, 143, 255, .48);
border-radius: 4px;
color: #dcecff;
background: rgba(10, 85, 158, .42);
cursor: pointer;
}
.lamp-action-strip button.active {
border-color: rgba(74, 255, 196, .62);
background: rgba(14, 137, 102, .38);
box-shadow: inset 0 0 16px rgba(74, 255, 196, .14), 0 0 12px rgba(22, 220, 166, .18);
}
.lamp-runtime-card { grid-column: 2; grid-row: 3; }
.lamp-runtime-card .sub { margin-top: 16px; }
.lamp-runtime-row,
.lamp-stat-row { display: grid; gap: 8px; }
.lamp-runtime-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lamp-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.lamp-runtime-row article,
.lamp-stat-row article {
min-width: 0;
padding: 8px 6px;
text-align: center;
border: 1px solid rgba(61, 174, 255, .24);
border-radius: 4px;
background: rgba(6, 42, 88, .52);
}
.lamp-runtime-row b,
.lamp-stat-row b { display: block; margin-top: 5px; color: #fff; font-size: 18px; }
.lamp-load-ring { text-align: center; }
.lamp-load-ring svg { width: 96px; height: 96px; }
.lamp-load-ring span { display: block; margin-top: -5px; color: #aebbd0; }
.lamp-traffic-card { grid-column: 3; grid-row: 1; }
.lamp-alarm-card { grid-column: 3; grid-row: 2; }
.lamp-device-card { grid-column: 3; grid-row: 3; }
.lamp-traffic-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin-bottom: 10px;
text-align: center;
}
.lamp-traffic-grid b {
padding: 8px 4px;
border: 1px solid rgba(61, 174, 255, .22);
border-radius: 4px;
color: #fff;
background: rgba(6, 42, 88, .48);
font-size: 21px;
}
.lamp-traffic-grid em {
display: block;
margin-top: 5px;
color: #aebbd0;
font-size: 12px;
font-style: normal;
}
.lamp-kv-list.compact p { min-height: 25px; }
.lamp-alarm-summary { display: flex; justify-content: space-between; color: #aebbd0; margin-bottom: 12px; }
.lamp-alarm-summary b { margin-left: 10px; color: #fff; }
.lamp-alarm-card ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.lamp-alarm-card li {
min-height: 36px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 64px;
align-items: center;
gap: 8px;
padding: 0 10px;
border: 1px solid rgba(208, 190, 68, .28);
border-radius: 4px;
color: #f1d768;
background: rgba(94, 82, 28, .24);
}
.lamp-alarm-card li.danger { border-color: rgba(255, 105, 88, .35); color: #ff8a74; background: rgba(104, 42, 44, .32); }
.lamp-alarm-card li.warn { border-color: rgba(255, 157, 58, .34); color: #ffb05c; background: rgba(108, 70, 34, .28); }
.lamp-alarm-card time { color: #aebbd0; font-size: 12px; }
.lamp-alarm-card button,
.lamp-device-card button { width: 100%; height: 32px; margin-top: 10px; }
@media (max-width: 1380px) {
.lamp-dashboard-body { grid-template-columns: 250px minmax(0, 1fr) 280px; }
.lamp-runtime-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 鈹€鈹€ AI 鍒嗘瀽涓績鍐呭祵瀵硅瘽妗?鈹€鈹€ */
.ai-center-panel .ai-chat-box {
margin: 0 10px 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
background: linear-gradient(145deg, rgba(2, 14, 38, 0.88), rgba(4, 22, 58, 0.82));
border: 1px solid rgba(0, 180, 255, 0.28);
border-top: none;
border-radius: 0 0 6px 6px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ai-center-panel .ai-chat-messages {
background: rgba(0, 10, 30, 0.6);
border: 1px solid rgba(0, 200, 255, 0.2);
border-radius: 6px;
padding: 8px;
min-height: 72px;
max-height: 120px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 5px;
scrollbar-width: thin;
scrollbar-color: rgba(0, 200, 255, 0.3) transparent;
}
.ai-center-panel .ai-chat-msg {
font-size: 11px;
line-height: 1.5;
padding: 4px 7px;
border-radius: 4px;
max-width: 92%;
word-break: break-all;
}
.ai-center-panel .ai-chat-msg--ai {
background: rgba(0, 180, 255, 0.1);
border: 1px solid rgba(0, 200, 255, 0.2);
color: #9ddcff;
align-self: flex-start;
}
.ai-center-panel .ai-chat-msg--user {
background: rgba(0, 100, 200, 0.2);
border: 1px solid rgba(0, 160, 255, 0.3);
color: #ffffff;
align-self: flex-end;
}
.ai-center-panel .ai-chat-msg--loading {
color: rgba(157, 220, 255, 0.5);
font-style: italic;
align-self: flex-start;
}
.ai-center-panel .ai-chat-input-row {
display: flex;
gap: 5px;
}
.ai-center-panel .ai-chat-input {
flex: 1;
background: rgba(0, 10, 30, 0.7);
border: 1px solid rgba(0, 200, 255, 0.35);
border-radius: 4px;
color: #d3f9ff;
font-size: 11px;
padding: 5px 8px;
outline: none;
font-family: "Microsoft YaHei", Arial, sans-serif;
transition: border-color 0.2s;
}
.ai-center-panel .ai-chat-input:focus {
border-color: rgba(0, 220, 255, 0.7);
box-shadow: 0 0 6px rgba(0, 200, 255, 0.25);
}
.ai-center-panel .ai-chat-input::placeholder {
color: rgba(157, 220, 255, 0.35);
}
.ai-center-panel .ai-chat-send {
background: linear-gradient(135deg, rgba(0, 180, 255, 0.25), rgba(0, 100, 200, 0.2));
border: 1px solid rgba(0, 200, 255, 0.45);
border-radius: 4px;
color: #00e5ff;
font-size: 11px;
padding: 5px 10px;
cursor: pointer;
font-family: "Microsoft YaHei", Arial, sans-serif;
transition: background 0.2s, box-shadow 0.2s;
pointer-events: all;
}
.ai-center-panel .ai-chat-send:hover {
background: linear-gradient(135deg, rgba(0, 200, 255, 0.4), rgba(0, 140, 255, 0.3));
box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}
/* 鈹€鈹€ AI 瀵硅瘽鎮诞鐞?鈹€鈹€ */
.ai-orb-wrap {
position: fixed;
left: 360px;
bottom: 13px;
z-index: 4000;
display: flex;
align-items: flex-start;
gap: 10px;
transition: left .1s, bottom .1s;
user-select: none;
}
.ai-orb {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: radial-gradient(circle at 38% 36%, rgba(0,220,255,.35) 0%, rgba(0,80,180,.7) 60%, rgba(0,20,60,.9) 100%);
box-shadow:
0 0 0 2px rgba(0,200,255,.45),
0 0 18px rgba(0,180,255,.55),
0 0 40px rgba(0,120,255,.25);
cursor: grab;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #00e5ff;
transition: box-shadow .25s ease, transform .2s ease;
}
.ai-orb:active {
cursor: grabbing;
}
.ai-orb:hover {
transform: scale(1.1);
box-shadow:
0 0 0 2px rgba(0,220,255,.7),
0 0 28px rgba(0,200,255,.8),
0 0 60px rgba(0,140,255,.4);
}
.ai-orb svg {
width: 24px;
height: 24px;
position: relative;
z-index: 1;
}
.ai-orb-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0,200,255,.5);
animation: aiOrbRingSpin 3s linear infinite;
pointer-events: none;
}
.ai-orb-ring-1 {
width: 70px;
height: 70px;
border-style: dashed;
animation-duration: 4s;
}
.ai-orb-ring-2 {
width: 84px;
height: 84px;
border-color: rgba(0,160,255,.3);
animation-direction: reverse;
animation-duration: 6s;
}
@keyframes aiOrbRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 寮瑰嚭瀵硅瘽妗?*/
.ai-chat-popup {
position: absolute;
width: 280px;
background: linear-gradient(145deg, rgba(2,14,38,.95), rgba(4,22,58,.92));
border: 1px solid rgba(0,180,255,.4);
border-radius: 10px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 0 24px rgba(0,160,255,.3), inset 0 0 20px rgba(0,100,200,.1);
overflow: hidden;
display: none;
flex-direction: column;
transform-origin: center center;
animation: aiChatPopIn .22s cubic-bezier(.34,1.56,.64,1);
z-index: 1;
}
.ai-chat-popup.open {
display: flex;
}
@keyframes aiChatPopIn {
from { opacity: 0; transform: scale(.85) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.ai-chat-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid rgba(0,180,255,.2);
font-size: 12px;
font-weight: bold;
color: #00e5ff;
letter-spacing: 1px;
}
.ai-chat-close {
background: none;
border: none;
color: rgba(0,200,255,.6);
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0 2px;
transition: color .15s;
}
.ai-chat-close:hover { color: #fff; }
.ai-chat-popup .ai-chat-messages {
padding: 10px;
min-height: 80px;
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(0,200,255,.3) transparent;
}
.ai-chat-popup .ai-chat-input-row {
display: flex;
gap: 6px;
padding: 8px 10px;
border-top: 1px solid rgba(0,180,255,.15);
}
.ai-chat-popup .ai-chat-input {
flex: 1;
background: rgba(0,10,30,.7);
border: 1px solid rgba(0,200,255,.35);
border-radius: 4px;
color: #d3f9ff;
font-size: 11px;
padding: 5px 8px;
outline: none;
font-family: "Microsoft YaHei", Arial, sans-serif;
transition: border-color .2s;
}
.ai-chat-popup .ai-chat-input:focus {
border-color: rgba(0,220,255,.7);
}
.ai-chat-popup .ai-chat-input::placeholder {
color: rgba(157,220,255,.35);
}
.ai-chat-popup .ai-chat-send {
background: linear-gradient(135deg, rgba(0,180,255,.25), rgba(0,100,200,.2));
border: 1px solid rgba(0,200,255,.45);
border-radius: 4px;
color: #00e5ff;
font-size: 11px;
padding: 5px 10px;
cursor: pointer;
font-family: "Microsoft YaHei", Arial, sans-serif;
transition: background .2s;
}
.ai-chat-popup .ai-chat-send:hover {
background: linear-gradient(135deg, rgba(0,200,255,.4), rgba(0,140,255,.3));
}
.ai-chat-popup .ai-chat-msg {
font-size: 11px;
line-height: 1.5;
padding: 5px 8px;
border-radius: 5px;
max-width: 90%;
word-break: break-all;
}
.ai-chat-popup .ai-chat-msg--ai {
background: rgba(0,180,255,.1);
border: 1px solid rgba(0,200,255,.2);
color: #9ddcff;
align-self: flex-start;
}
.ai-chat-popup .ai-chat-msg--user {
background: rgba(0,100,200,.2);
border: 1px solid rgba(0,160,255,.3);
color: #fff;
align-self: flex-end;
}
.ai-chat-popup .ai-chat-msg--loading {
color: rgba(157,220,255,.5);
font-style: italic;
align-self: flex-start;
}
/* 鈹€鈹€ AI 瀵硅瘽妗嗚闊虫寜閽?鈹€鈹€ */
.ai-chat-voice {
width: 30px;
height: 30px;
flex-shrink: 0;
background: rgba(0, 10, 30, 0.7);
border: 1px solid rgba(0, 200, 255, 0.35);
border-radius: 4px;
color: rgba(0, 200, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .2s, color .2s, box-shadow .2s;
pointer-events: all;
}
.ai-chat-voice svg {
width: 15px;
height: 15px;
}
.ai-chat-voice:hover {
border-color: rgba(0, 220, 255, 0.7);
color: #00e5ff;
box-shadow: 0 0 8px rgba(0, 200, 255, 0.3);
}
.ai-chat-voice.recording {
border-color: #ff4d4d;
color: #ff4d4d;
box-shadow: 0 0 10px rgba(255, 60, 60, 0.5);
animation: voicePulse .8s ease-in-out infinite;
}
@keyframes voicePulse {
0%, 100% { box-shadow: 0 0 6px rgba(255, 60, 60, 0.4); }
50% { box-shadow: 0 0 16px rgba(255, 60, 60, 0.8); }
}
/* 鈹€鈹€ 鑸垫満鍏柟鍚戞帶鍒堕潰鏉?鈹€鈹€ */
.servo-pad {
position: fixed;
left: 24px;
bottom: 110px;
z-index: 4500;
background: linear-gradient(145deg, rgba(2,14,38,.96), rgba(4,22,58,.94));
border: 1px solid rgba(0,180,255,.45);
border-radius: 12px;
padding: 14px 16px 12px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 0 28px rgba(0,160,255,.35), inset 0 0 16px rgba(0,100,200,.1);
user-select: none;
animation: servoPadIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes servoPadIn {
from { opacity:0; transform: scale(.88) translateY(10px); }
to { opacity:1; transform: scale(1) translateY(0); }
}
.servo-pad-title {
font-size: 11px;
color: #00e5ff;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
font-weight: bold;
}
.servo-pad-grid {
display: grid;
grid-template-columns: repeat(3, 44px);
grid-template-rows: repeat(3, 44px);
gap: 6px;
}
.servo-btn {
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid rgba(0,180,255,.35);
background: rgba(0,30,70,.7);
color: #7dd8ff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.servo-btn svg {
width: 20px;
height: 20px;
}
.servo-btn:hover {
background: rgba(0,100,200,.55);
border-color: rgba(0,220,255,.7);
box-shadow: 0 0 10px rgba(0,200,255,.4);
}
.servo-btn:active {
transform: scale(.9);
background: rgba(0,140,255,.6);
box-shadow: 0 0 16px rgba(0,220,255,.6);
}
.servo-center {
color: #00e5ff;
border-color: rgba(0,220,255,.5);
background: rgba(0,60,140,.6);
}
.servo-pad-close {
position: absolute;
top: 6px;
right: 8px;
background: none;
border: none;
color: rgba(0,200,255,.5);
font-size: 12px;
cursor: pointer;
line-height: 1;
transition: color .15s;
}
.servo-pad-close:hover { color: #fff; }
/* ══ 界面管理面板 ══ */
.ui-manager-panel {
position: absolute;
top: 60px;
right: 12px;
z-index: 200;
width: 240px;
background: linear-gradient(160deg, rgba(4, 22, 52, .96), rgba(2, 12, 34, .98));
border: 1px solid rgba(0, 180, 255, .45);
border-radius: 8px;
box-shadow: 0 0 24px rgba(0, 160, 255, .3), inset 0 0 30px rgba(0, 100, 200, .08);
backdrop-filter: blur(16px);
display: none;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
}
.ui-manager-panel.open {
display: flex;
}
.ui-manager-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 8px;
border-bottom: 1px solid rgba(0, 180, 255, .2);
color: #7fd8ff;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
}
.ui-manager-close {
background: none;
border: none;
color: rgba(0, 200, 255, .6);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 4px;
transition: color .2s;
}
.ui-manager-close:hover { color: #fff; }
.ui-manager-body {
padding: 8px 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ui-manager-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px;
}
.ui-manager-row > span {
color: #b0d8f0;
font-size: 12px;
}
.ui-manager-toggle {
width: 56px;
height: 24px;
border-radius: 12px;
border: 1px solid rgba(0, 180, 255, .4);
font-size: 11px;
cursor: pointer;
transition: all .2s;
}
.ui-manager-toggle.on {
background: linear-gradient(135deg, rgba(0, 160, 255, .35), rgba(0, 100, 200, .25));
color: #7fd8ff;
}
.ui-manager-toggle.off {
background: rgba(20, 20, 40, .6);
color: rgba(120, 160, 200, .5);
border-color: rgba(80, 120, 160, .3);
}
.ui-manager-all-row {
margin-top: 4px;
gap: 8px;
justify-content: center;
border-top: 1px solid rgba(0, 180, 255, .15);
padding-top: 10px;
}
.ui-manager-all-btn {
flex: 1;
height: 28px;
border-radius: 4px;
border: 1px solid rgba(0, 180, 255, .35);
background: linear-gradient(135deg, rgba(0, 120, 200, .25), rgba(0, 60, 120, .2));
color: #7fd8ff;
font-size: 11px;
cursor: pointer;
transition: all .2s;
}
.ui-manager-all-btn:hover {
background: linear-gradient(135deg, rgba(0, 160, 255, .4), rgba(0, 100, 200, .3));
border-color: rgba(0, 200, 255, .6);
color: #fff;
}
/* discharge management dashboard */
.hud-shell .discharge-dashboard {
position: absolute;
z-index: 4;
left: 36px;
right: 36px;
top: 86px;
bottom: 30px;
display: grid;
grid-template-columns: 1.15fr .95fr 1.15fr;
grid-template-rows: .98fr 1fr;
gap: 16px;
pointer-events: auto;
}
.hud-shell .discharge-dashboard[hidden] { display: none !important; }
body.discharge-page-active #canvas-container { opacity: .12; filter: saturate(.6) brightness(.45); }
body.discharge-page-active #aiOrbWrap { display: none !important; }
body.system-page-active #canvas-container { opacity: .12; filter: saturate(.6) brightness(.45); }
body.system-page-active #aiOrbWrap { display: none !important; }
body.device-page-active #canvas-container { opacity: .12; filter: saturate(.6) brightness(.45); }
body.device-page-active #aiOrbWrap { display: none !important; }
.hud-shell .discharge-panel {
position: relative;
min-width: 0;
overflow: hidden;
padding: 16px 20px;
border: 1px solid rgba(28, 147, 255, .75);
border-radius: 5px;
background: linear-gradient(145deg, rgba(5, 36, 82, .92), rgba(2, 17, 43, .88)), radial-gradient(circle at 30% 0%, rgba(27, 154, 255, .18), transparent 45%);
box-shadow: inset 0 0 28px rgba(19, 123, 215, .18), 0 0 18px rgba(0, 112, 255, .24);
}
.hud-shell .discharge-panel::before,
.hud-shell .discharge-panel::after {
content: "";
position: absolute;
width: 42px;
height: 12px;
border-color: #1b96ff;
pointer-events: none;
}
.hud-shell .discharge-panel::before { left: -1px; top: -1px; border-top: 2px solid; border-left: 2px solid; }
.hud-shell .discharge-panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.hud-shell .discharge-panel h2 {
margin: 0 0 16px;
color: #f4fbff;
font-size: 20px;
line-height: 1;
text-shadow: 0 0 10px rgba(86, 191, 255, .55);
}
.hud-shell .discharge-panel h2::after {
content: "";
display: block;
width: 78px;
height: 1px;
margin-top: 10px;
background: linear-gradient(90deg, #20a9ff, transparent);
}
.discharge-status { display: grid; grid-template-columns: 44% 1fr; gap: 16px; }
.discharge-status h2 { grid-column: 1 / -1; }
.discharge-status-body { display: grid; align-content: center; justify-items: center; gap: 18px; }
.discharge-gauge { position: relative; width: 190px; height: 190px; }
.discharge-gauge svg, .soc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dg-track, .soc-track { fill: none; stroke: rgba(25, 105, 190, .55); stroke-width: 14; }
.dg-value { fill: none; stroke: #18a8ff; stroke-width: 14; stroke-dasharray: 280 390; stroke-linecap: round; }
.dg-break { fill: none; stroke: rgba(4, 24, 56, .95); stroke-width: 18; stroke-dasharray: 26 68; }
.discharge-gauge-text, .soc-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.discharge-gauge-text span, .soc-ring em { color: #bfd0e8; font-size: 15px; }
.discharge-gauge-text strong { color: #fff; font-size: 34px; }
.discharge-gauge-text em { color: #dceaff; font-size: 20px; font-style: normal; }
.discharge-state-pill {
width: 180px;
height: 44px;
display: grid;
place-items: center;
color: #19aaff;
font-size: 18px;
font-weight: 700;
border: 1px solid rgba(38, 136, 233, .48);
border-radius: 9px;
background: rgba(25, 90, 150, .28);
}
.discharge-kv-list { align-self: center; }
.discharge-kv-list div, .mode-rows div, .soc-list div {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 10px 0;
border-bottom: 1px solid rgba(67, 145, 217, .24);
color: #9fb4cf;
}
.discharge-kv-list strong, .mode-rows strong, .soc-list strong { color: #f2f7ff; font-size: 17px; }
.discharge-kv-list em, .soc-list em { color: #aebcd0; font-style: normal; font-size: 14px; }
.mode-current {
display: grid;
grid-template-columns: 1fr 1.3fr;
align-items: center;
height: 50px;
padding: 0 16px;
margin: 4px 0 8px;
border: 1px solid rgba(31, 149, 255, .72);
border-radius: 4px;
background: rgba(12, 77, 138, .48);
}
.mode-current span { color: #fff; font-weight: 700; }
.mode-current strong { color: #b8d8ff; font-size: 18px; }
.mode-progress b {
flex: 1;
height: 9px;
margin: 4px 12px 0;
border-radius: 12px;
background: rgba(55, 120, 205, .46);
overflow: hidden;
}
.mode-progress i { display: block; width: 65%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #138fff, #1fd3ff); }
.discharge-action, .stats-more {
height: 40px;
border: 1px solid rgba(28, 143, 255, .7);
border-radius: 4px;
color: #eef8ff;
background: rgba(10, 85, 158, .54);
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.discharge-action { width: 84%; margin: 8px auto 0; display: block; }
.soc-main { display: grid; grid-template-columns: 42% 1fr; gap: 18px; }
.soc-ring { position: relative; width: 150px; height: 150px; align-self: center; justify-self: center; }
.soc-value { fill: none; stroke: #17aaff; stroke-width: 16; stroke-dasharray: 145 345; stroke-linecap: round; }
.soc-ring strong { color: #fff; font-size: 34px; }
.soc-ring span { color: #cfe9ff; font-size: 17px; }
.soc-chart {
margin-top: 16px;
padding: 10px 12px 8px;
border: 1px solid rgba(54, 140, 226, .28);
border-radius: 5px;
background:
repeating-linear-gradient(0deg, rgba(111, 182, 232, .15) 0 1px, transparent 1px 25%),
repeating-linear-gradient(90deg, rgba(111, 182, 232, .08) 0 1px, transparent 1px 16.66%),
linear-gradient(180deg, rgba(0, 29, 66, .48), rgba(0, 29, 66, .12));
box-shadow: inset 0 0 18px rgba(31, 128, 226, .12);
}
.chart-title { height: 31px; display: flex; align-items: center; justify-content: space-between; color: #f5fbff; font-weight: 700; }
.chart-title span { padding: 4px 12px; color: #cfe2ff; border-radius: 15px; background: rgba(73, 130, 210, .44); font-size: 12px; }
.soc-line, .power-line {
fill: none;
stroke: #28a6ff;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 7px rgba(37, 159, 255, .58));
}
.soc-area { fill: url(#socArea); }
.chart-axis, .curve-axis { display: flex; justify-content: space-around; color: #91a8c7; font-size: 12px; }
.realtime-curve .curve-axis { display: none; }
.realtime-curve { grid-column: 1 / span 2; }
.curve-tabs {
display: grid;
grid-template-columns: minmax(340px, auto) 1fr;
align-items: center;
gap: 18px;
margin-bottom: 12px;
}
.curve-tab-buttons {
display: grid;
grid-template-columns: repeat(4, minmax(72px, 1fr));
gap: 10px;
max-width: 430px;
}
.curve-tabs button {
width: 100%;
height: 36px;
color: #a9bdd9;
border: 1px solid rgba(50, 130, 220, .34);
border-radius: 3px;
background: rgba(16, 58, 112, .45);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.discharge-action.is-stopped {
border-color: rgba(38, 233, 109, .62);
background: linear-gradient(180deg, rgba(28, 126, 78, .88), rgba(16, 88, 58, .92));
}
.curve-tabs button.active { color: #fff; background: #168cff; box-shadow: 0 0 14px rgba(22, 140, 255, .32); }
.curve-tabs button:hover,
.discharge-action:hover,
.stats-more:hover {
border-color: rgba(89, 187, 255, .86);
box-shadow: inset 0 0 18px rgba(70, 169, 255, .28), 0 0 14px rgba(36, 145, 255, .22);
}
.curve-tabs button.is-pressed,
.discharge-action.is-pressed,
.stats-more.is-pressed {
transform: translateY(1px) scale(.985);
box-shadow: inset 0 0 24px rgba(94, 196, 255, .42), 0 0 20px rgba(40, 152, 255, .34);
}
.curve-legend {
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
color: #9fb4cf;
font-size: 14px;
white-space: nowrap;
}
.curve-legend i, .curve-legend b {
display: inline-block;
width: 28px;
height: 3px;
margin: 0;
background: #159cff;
vertical-align: middle;
}
.curve-legend b { background: #23d599; }
.power-chart {
width: 100%;
height: calc(100% - 86px);
min-height: 224px;
border: 1px solid rgba(54, 140, 226, .28);
border-radius: 5px;
background:
repeating-linear-gradient(0deg, rgba(111, 182, 232, .14) 0 1px, transparent 1px 25%),
repeating-linear-gradient(90deg, rgba(111, 182, 232, .08) 0 1px, transparent 1px 16.66%),
linear-gradient(180deg, rgba(0, 29, 66, .5), rgba(0, 29, 66, .12));
box-shadow: inset 0 0 18px rgba(31, 128, 226, .12);
}
.grid-lines path { fill: none; stroke: rgba(108, 178, 235, .18); stroke-width: 1; }
.plan-line { fill: none; stroke: #25e3ad; stroke-width: 2.4; stroke-dasharray: 8 6; filter: drop-shadow(0 0 6px rgba(37, 227, 173, .55)); }
.power-area-path { fill: url(#powerArea); }
.curve-markers circle {
fill: #f5fbff;
stroke: #36bdff;
stroke-width: 2;
filter: drop-shadow(0 0 6px rgba(57, 190, 255, .85));
}
.curve-markers text {
fill: #a9c7e4;
font-size: 10px;
text-anchor: middle;
}
.curve-axis-svg path {
fill: none;
stroke: rgba(128, 195, 246, .35);
stroke-width: 1;
}
.curve-axis-svg line {
stroke: rgba(128, 195, 246, .55);
stroke-width: 1;
}
.curve-axis-svg text {
fill: #9fb9d8;
font-size: 10px;
text-anchor: middle;
}
.discharge-stats {
grid-column: 3;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
min-height: 0;
}
.stat-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-bottom: 16px;
}
.stat-cards article {
min-width: 0;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
column-gap: 10px;
padding: 4px 0;
}
.stat-cards i {
grid-row: span 2;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(40, 116, 212, .45);
font-style: normal;
font-size: 22px;
}
.stat-cards span {
min-width: 0;
color: #aebbd0;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
}
.stat-cards strong {
min-width: 0;
color: #14b8ff;
font-size: 19px;
line-height: 1.18;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-cards em { color: #c9d6e8; font-size: 13px; font-style: normal; }
.discharge-table-wrap {
min-height: 0;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 200, 255, .34) transparent;
}
.discharge-table-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
.discharge-table-wrap::-webkit-scrollbar-track { background: rgba(0, 20, 48, .35); }
.discharge-table-wrap::-webkit-scrollbar-thumb {
border-radius: 999px;
background: linear-gradient(180deg, rgba(49, 170, 255, .72), rgba(0, 101, 210, .58));
}
.discharge-table { width: 100%; border-collapse: collapse; color: #bdd0eb; }
.discharge-table thead {
position: sticky;
top: 0;
z-index: 1;
}
.discharge-table th {
height: 40px;
color: #bfd9ff;
font-weight: 500;
background: rgba(35, 98, 172, .55);
border: 1px solid rgba(29, 134, 237, .35);
}
.discharge-table td { height: 38px; border-bottom: 1px solid rgba(67, 145, 217, .24); text-align: center; }
.discharge-table td:first-child, .discharge-table th:first-child { text-align: left; padding-left: 14px; }
.stats-more {
width: 150px;
display: block;
margin: 10px auto 0;
align-self: end;
}
.stats-more.is-expanded {
border-color: rgba(64, 211, 255, .86);
background: rgba(20, 114, 197, .72);
}
/* device management dashboard */
.hud-shell .device-dashboard {
position: absolute;
z-index: 4;
left: 20px;
right: 20px;
top: 82px;
bottom: 18px;
display: grid;
grid-template-rows: 32px 148px 40px minmax(0, 1fr) 42px;
gap: 14px;
color: #dceeff;
pointer-events: auto;
}
.hud-shell .device-page-title,
.hud-shell .device-page-actions,
.hud-shell .device-filter-row,
.hud-shell .device-pagination {
display: flex;
align-items: center;
}
.hud-shell .device-page-title { justify-content: space-between; }
.hud-shell .device-page-title h2 {
margin: 0;
padding-left: 13px;
border-left: 4px solid #1b96ff;
color: #f3f9ff;
font-size: 19px;
text-shadow: 0 0 12px rgba(83, 185, 255, .46);
}
.hud-shell .device-page-actions { gap: 14px; }
.hud-shell .device-page-actions button,
.hud-shell .device-filter-row select,
.hud-shell .device-filter-row input,
.hud-shell .device-pagination button,
.hud-shell .device-pagination input {
height: 38px;
border: 1px solid rgba(28, 143, 255, .66);
border-radius: 4px;
color: #cfe8ff;
background: rgba(7, 39, 83, .58);
outline: none;
}
.hud-shell .device-page-actions button {
min-width: 80px;
color: #2aa7ff;
font-weight: 700;
cursor: pointer;
box-shadow: inset 0 0 14px rgba(33, 134, 245, .12);
}
.hud-shell .device-page-actions button:hover,
.hud-shell .device-management-table button:hover,
.hud-shell .device-pagination button.active {
color: #fff;
border-color: rgba(75, 184, 255, .9);
background: rgba(20, 115, 205, .72);
box-shadow: inset 0 0 18px rgba(70, 169, 255, .24), 0 0 12px rgba(36, 145, 255, .2);
}
.hud-shell .device-summary-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.hud-shell .device-summary-card,
.hud-shell .device-type-panel,
.hud-shell .device-table-panel {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(67, 144, 220, .42);
border-radius: 5px;
background:
linear-gradient(145deg, rgba(8, 36, 78, .9), rgba(3, 18, 45, .88)),
radial-gradient(circle at 20% 0%, rgba(35, 152, 255, .15), transparent 48%);
box-shadow: inset 0 0 28px rgba(32, 124, 215, .13), 0 0 16px rgba(0, 111, 255, .14);
}
.hud-shell .device-summary-card::before,
.hud-shell .device-type-panel::before,
.hud-shell .device-table-panel::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
width: 46px;
height: 12px;
border-top: 2px solid rgba(67, 166, 255, .72);
border-left: 2px solid rgba(67, 166, 255, .72);
pointer-events: none;
}
.hud-shell .device-summary-card {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
align-items: center;
padding: 18px 18px;
}
.hud-shell .device-summary-card > i {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 50%;
color: #bfe6ff;
background: radial-gradient(circle, rgba(48, 145, 255, .42), rgba(25, 69, 140, .34));
box-shadow: inset 0 0 18px rgba(92, 184, 255, .08);
}
.hud-shell .device-summary-card svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hud-shell .device-summary-card.broadcast > i { color: #d8c6ff; background: radial-gradient(circle, rgba(117, 91, 210, .42), rgba(55, 45, 130, .34)); }
.hud-shell .device-summary-card.screen > i { color: #77efff; background: radial-gradient(circle, rgba(27, 172, 202, .42), rgba(21, 85, 118, .34)); }
.hud-shell .device-summary-card.drone > i { color: #9abaff; background: radial-gradient(circle, rgba(73, 130, 235, .42), rgba(35, 62, 136, .34)); }
.hud-shell .device-summary-card span {
display: block;
color: #d5e8ff;
font-size: 15px;
}
.hud-shell .device-summary-card strong {
display: block;
margin: 8px 0 14px;
color: #fff;
font-size: 29px;
line-height: 1;
}
.hud-shell .device-summary-card em {
color: #d6e2f0;
font-size: 15px;
font-style: normal;
}
.hud-shell .device-summary-card small {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 14px;
color: #aac4df;
font-size: 13px;
}
.hud-shell .device-summary-card small b,
.hud-shell .dot {
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
background: #30d394;
box-shadow: 0 0 8px rgba(48, 211, 148, .66);
}
.hud-shell .device-summary-card .muted b { background: #e1666b; box-shadow: 0 0 8px rgba(225, 102, 107, .55); }
.hud-shell .online-rate {
grid-template-columns: 108px minmax(0, 1fr);
}
.hud-shell .device-ring {
position: relative;
width: 104px;
height: 104px;
}
.hud-shell .device-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-shell .device-ring circle {
fill: none;
stroke-width: 14;
}
.hud-shell .device-ring circle:first-child { stroke: rgba(45, 104, 165, .66); }
.hud-shell .device-ring circle:last-child {
stroke: #35d392;
stroke-linecap: round;
stroke-dasharray: 264 264;
filter: drop-shadow(0 0 8px rgba(53, 211, 146, .48));
}
.hud-shell .device-ring strong {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
font-size: 22px;
}
.hud-shell .device-filter-row {
gap: 28px;
}
.hud-shell .device-filter-row label {
display: grid;
grid-template-columns: auto 174px;
align-items: center;
gap: 12px;
color: #b7c9df;
font-size: 14px;
}
.hud-shell .device-filter-row .device-search-label {
grid-template-columns: minmax(260px, 1fr);
width: 320px;
}
.hud-shell .device-filter-row select,
.hud-shell .device-filter-row input {
width: 100%;
padding: 0 14px;
}
.hud-shell .device-main-grid {
min-height: 0;
display: grid;
grid-template-columns: 228px minmax(0, 1fr);
gap: 14px;
}
.hud-shell .device-type-panel {
padding: 18px 14px;
}
.hud-shell .device-type-panel h3 {
margin: 0 0 16px;
padding-bottom: 14px;
color: #f4fbff;
font-size: 16px;
border-bottom: 1px solid rgba(70, 150, 225, .28);
}
.hud-shell .device-type-panel button {
width: 100%;
height: 46px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 3px;
color: #bed2e9;
background: transparent;
cursor: pointer;
}
.hud-shell .device-type-panel button.active,
.hud-shell .device-type-panel button:hover {
color: #4fb7ff;
border-color: rgba(35, 151, 255, .52);
background: rgba(24, 96, 174, .42);
box-shadow: inset 3px 0 0 #2099ff;
}
.hud-shell .device-type-panel b { color: inherit; font-weight: 700; }
.hud-shell .device-table-panel {
min-height: 0;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 200, 255, .34) transparent;
}
.hud-shell .device-table-panel::-webkit-scrollbar { width: 8px; height: 8px; }
.hud-shell .device-table-panel::-webkit-scrollbar-track { background: rgba(0, 20, 48, .45); }
.hud-shell .device-table-panel::-webkit-scrollbar-thumb {
border-radius: 999px;
background: linear-gradient(180deg, rgba(49, 170, 255, .72), rgba(0, 101, 210, .58));
}
.hud-shell .device-management-table {
width: 100%;
min-width: 1040px;
border-collapse: collapse;
color: #c6d8ef;
}
.hud-shell .device-management-table th {
height: 52px;
padding: 0 18px;
color: #d9ecff;
text-align: left;
font-weight: 700;
background: rgba(32, 85, 150, .52);
}
.hud-shell .device-management-table td {
height: 46px;
padding: 0 18px;
border-bottom: 1px solid rgba(67, 145, 217, .24);
white-space: nowrap;
}
.hud-shell .device-management-table tr:hover td {
background: rgba(25, 93, 165, .22);
}
.hud-shell .device-management-table tr.device-row-selected td {
background: rgba(28, 129, 217, .3);
box-shadow: inset 0 1px 0 rgba(80, 178, 255, .18), inset 0 -1px 0 rgba(80, 178, 255, .18);
}
.hud-shell .device-management-table button {
min-width: 54px;
height: 28px;
margin-right: 8px;
padding: 0 10px;
border: 1px solid rgba(42, 160, 255, .55);
border-radius: 3px;
color: #bfe5ff;
font-weight: 700;
line-height: 26px;
background:
linear-gradient(180deg, rgba(27, 111, 190, .34), rgba(7, 45, 91, .34)),
rgba(4, 31, 70, .46);
box-shadow: inset 0 0 12px rgba(42, 160, 255, .12), 0 0 0 1px rgba(7, 27, 62, .28);
cursor: pointer;
transition: color .16s ease, transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.hud-shell .device-management-table .device-op-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
vertical-align: middle;
}
.hud-shell .device-management-table .device-op-more {
min-width: 66px;
padding-right: 8px;
}
.hud-shell .device-management-table .device-op-more i {
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: .9;
transition: transform .16s ease;
}
.hud-shell .device-management-table .device-op-more.is-pressed i,
.hud-shell .device-management-table .device-op-more:active i {
transform: rotate(45deg) translateY(0);
}
.hud-shell .device-management-table button:hover {
color: #fff;
border-color: rgba(85, 196, 255, .88);
background:
linear-gradient(180deg, rgba(42, 151, 238, .58), rgba(11, 71, 137, .48)),
rgba(8, 58, 116, .62);
box-shadow: inset 0 0 14px rgba(89, 193, 255, .2), 0 0 12px rgba(36, 145, 255, .22);
}
.hud-shell .device-management-table button.is-pressed,
.hud-shell .device-management-table button:active {
color: #fff;
transform: translateY(1px);
border-color: rgba(124, 214, 255, .95);
background: rgba(24, 119, 205, .74);
box-shadow: inset 0 0 16px rgba(98, 202, 255, .28), 0 0 14px rgba(53, 161, 255, .26);
}
.hud-shell .dt-icon {
width: 16px;
height: 16px;
display: inline-block;
margin-right: 9px;
border: 1px solid rgba(175, 214, 255, .75);
border-radius: 3px;
vertical-align: -3px;
box-shadow: inset 0 0 8px rgba(88, 178, 255, .22);
}
.hud-shell .dt-icon.broadcast { border-radius: 50%; }
.hud-shell .dt-icon.screen { border-radius: 2px; }
.hud-shell .dt-icon.drone { transform: rotate(45deg); }
.hud-shell .device-management-table .dt-icon {
display: none;
}
.hud-shell .device-management-table td:nth-child(3),
.hud-shell .device-management-table th:nth-child(3) {
padding-left: 24px;
text-align: left;
}
.hud-shell .dot.ok { margin-right: 8px; }
.hud-shell .dot.warn {
margin-right: 8px;
background: #ffc451;
box-shadow: 0 0 8px rgba(255, 196, 81, .66);
}
.hud-shell .device-empty-state {
padding: 44px;
color: #85a4c5;
text-align: center;
}
.hud-shell .device-pagination {
justify-content: flex-end;
gap: 12px;
color: #8ea9c9;
}
.hud-shell .device-pagination button { min-width: 38px; padding: 0 12px; }
.hud-shell .device-pagination input {
width: 48px;
text-align: center;
}
.hud-shell .pager-pages {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hud-shell .device-action-panel,
.hud-shell .device-more-menu {
position: absolute;
z-index: 12;
border: 1px solid rgba(82, 176, 255, .52);
border-radius: 5px;
background: rgba(5, 25, 58, .96);
box-shadow: 0 14px 34px rgba(0, 9, 26, .42), inset 0 0 20px rgba(40, 142, 255, .14);
}
.hud-shell .device-action-panel[hidden],
.hud-shell .device-more-menu[hidden] {
display: none !important;
}
.hud-shell .device-action-panel {
width: 310px;
padding: 15px 16px 16px;
}
.hud-shell .device-action-panel h3 {
margin: 0 28px 12px 0;
color: #f4fbff;
font-size: 16px;
}
.hud-shell .device-action-panel dl {
margin: 0;
display: grid;
gap: 9px;
}
.hud-shell .device-action-panel dl div {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 12px;
}
.hud-shell .device-action-panel dt {
color: #8fb2d2;
}
.hud-shell .device-action-panel dd {
min-width: 0;
margin: 0;
color: #dff1ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hud-shell .device-action-close {
position: absolute;
right: 8px;
top: 8px;
width: 24px;
height: 24px;
border: 0;
color: #9bc9f4;
background: transparent;
cursor: pointer;
}
.hud-shell .device-more-menu {
width: 140px;
padding: 6px;
}
.hud-shell .device-more-menu button {
width: 100%;
height: 34px;
padding: 0 10px;
border: 0;
border-radius: 3px;
color: #cfe8ff;
text-align: left;
background: transparent;
cursor: pointer;
}
.hud-shell .device-more-menu button:hover,
.hud-shell .device-more-menu button:active {
color: #fff;
background: rgba(31, 129, 218, .58);
}
.hud-shell .pager-ellipsis {
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
color: #83a4c7;
font-weight: 700;
}
.hud-shell .device-pagination button:disabled,
.hud-shell .system-pagination button:disabled {
opacity: .38;
cursor: not-allowed;
box-shadow: none;
}
/* system management dashboard */
.hud-shell .system-dashboard {
position: absolute;
z-index: 4;
left: 34px;
right: 34px;
top: 82px;
bottom: 28px;
pointer-events: auto;
}
.hud-shell .system-dashboard[hidden] { display: none !important; }
.hud-shell .device-dashboard[hidden] { display: none !important; }
.hud-shell .system-panel {
width: 100%;
height: 100%;
min-width: 0;
overflow: hidden;
color: #d9e8fb;
}
.hud-shell .system-panel > h2 {
margin: 0 0 18px;
color: #f3f9ff;
font-size: 21px;
line-height: 1;
text-shadow: 0 0 12px rgba(95, 190, 255, .45);
}
.hud-shell .system-grid {
height: calc(100% - 40px);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: 1.04fr .96fr;
gap: 16px;
}
.hud-shell .system-card {
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 16px;
border: 1px solid rgba(67, 144, 220, .42);
border-radius: 5px;
background: linear-gradient(145deg, rgba(10, 35, 65, .92), rgba(4, 18, 39, .88)), radial-gradient(circle at 45% 0%, rgba(64, 156, 255, .15), transparent 48%);
box-shadow: inset 0 0 28px rgba(32, 124, 215, .13), 0 0 16px rgba(0, 111, 255, .14);
}
.hud-shell .system-card::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
width: 46px;
height: 12px;
border-top: 2px solid rgba(67, 166, 255, .72);
border-left: 2px solid rgba(67, 166, 255, .72);
pointer-events: none;
}
.hud-shell .system-card h3 {
margin: 0 0 28px;
display: flex;
align-items: center;
gap: 10px;
color: #f2f7ff;
font-size: 18px;
font-weight: 700;
}
.hud-shell .monitor-card { grid-column: 1; grid-row: 1; }
.hud-shell .status-card { grid-column: 2; grid-row: 1; }
.hud-shell .quick-card { grid-column: 3; grid-row: 1; }
.hud-shell .scene-card { grid-column: 4; grid-row: 1; }
.hud-shell .servo-card { grid-column: 5 !important; grid-row: 1 !important; }
.hud-shell .log-card { grid-column: 1 / span 4; grid-row: 2; }
.hud-shell .backup-card { grid-column: 5; grid-row: 2; }
.hud-shell .monitor-card,
.hud-shell .servo-card,
.hud-shell .status-card,
.hud-shell .scene-card {
display: flex;
flex-direction: column;
}
.hud-shell .monitor-card h3 {
margin-bottom: 14px;
}
.hud-shell .sys-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: #d7ecff;
font-size: 18px;
font-style: normal;
}
.hud-shell .sys-control-block { margin-bottom: 28px; }
.hud-shell .sys-control-block label,
.hud-shell .sys-subtitle,
.hud-shell .system-card p {
display: block;
margin: 0 0 14px;
color: #b9c8dd;
font-size: 14px;
}
.hud-shell .sys-slider-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px;
align-items: center;
gap: 18px;
}
.hud-shell .sys-track {
position: relative;
height: 5px;
border-radius: 999px;
background: rgba(92, 130, 171, .55);
overflow: visible;
}
.hud-shell .sys-track i {
display: block;
height: 100%;
border-radius: inherit;
background: #1a8bff;
}
.hud-shell .sys-track i::after {
content: "";
position: absolute;
top: 50%;
left: var(--knob-left, 50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #1b8dff;
box-shadow: 0 0 12px rgba(35, 150, 255, .55);
transform: translate(-50%, -50%);
}
.hud-shell .monitor-card .sys-control-block:first-of-type .sys-track { --knob-left: 58%; }
.hud-shell .monitor-card .sys-control-block:nth-of-type(2) .sys-track { --knob-left: 62%; }
.hud-shell .servo-card .sys-track { --knob-left: 50%; }
.hud-shell .sys-slider-row b {
color: #2a91ff;
font-size: 16px;
text-align: right;
}
.hud-shell .env-live-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 0 12px;
}
.hud-shell .env-live-summary div {
min-width: 0;
padding: 8px;
border: 1px solid rgba(62, 137, 214, .28);
border-radius: 4px;
background: rgba(25, 58, 96, .36);
}
.hud-shell .env-live-summary span {
display: block;
color: #aebed4;
font-size: 12px;
line-height: 1.2;
}
.hud-shell .env-live-summary b {
display: block;
margin-top: 6px;
color: #2c9bff;
font-size: 17px;
}
.hud-shell .env-line-chart {
height: 108px;
margin-bottom: 10px;
padding: 8px 8px 4px;
border: 1px solid rgba(62, 137, 214, .22);
border-radius: 4px;
background: rgba(3, 18, 42, .34);
}
.hud-shell .env-line-chart svg { width: 100%; height: 82px; display: block; }
.hud-shell .env-grid { fill: none; stroke: rgba(88, 143, 203, .2); stroke-width: 1; }
.hud-shell .temp-line,
.hud-shell .humi-line {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 5px rgba(37, 146, 255, .45));
}
.hud-shell .temp-line { stroke: #2896ff; }
.hud-shell .humi-line { stroke: #2de0bb; }
.hud-shell .env-line-legend { display: flex; gap: 16px; color: #aec0d6; font-size: 12px; }
.hud-shell .env-line-legend i {
width: 18px;
height: 3px;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
border-radius: 999px;
}
.hud-shell .env-line-legend .temp { background: #2896ff; }
.hud-shell .env-line-legend .humi { background: #2de0bb; }
.hud-shell .env-live-table {
width: 100%;
margin-bottom: 10px;
border-collapse: collapse;
color: #b9c8dd;
font-size: 12px;
}
.hud-shell .env-live-table td {
height: 25px;
border-bottom: 1px solid rgba(62, 137, 214, .18);
}
.hud-shell .env-live-table td:not(:first-child) { text-align: right; }
.hud-shell .servo-range-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 54px;
align-items: center;
gap: 18px;
}
.hud-shell .servo-range-row input[type="range"] {
width: 100%;
accent-color: #2495ff;
cursor: pointer;
}
.hud-shell .servo-range-row b {
color: #2a91ff;
font-size: 16px;
text-align: right;
}
.hud-shell .system-primary-btn,
.hud-shell .system-ghost-btn,
.hud-shell .system-danger-btn,
.hud-shell .system-outline-btn,
.hud-shell .sys-button-grid button,
.hud-shell .system-pagination button {
height: 46px;
border: 1px solid rgba(55, 147, 255, .48);
border-radius: 4px;
color: #e5f3ff;
background: linear-gradient(180deg, rgba(35, 102, 180, .86), rgba(17, 78, 150, .9));
box-shadow: inset 0 0 14px rgba(54, 157, 255, .18);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.hud-shell .system-primary-btn:hover,
.hud-shell .system-ghost-btn:hover,
.hud-shell .system-outline-btn:hover,
.hud-shell .sys-button-grid button:hover,
.hud-shell .system-pagination button:hover {
border-color: rgba(89, 187, 255, .86);
box-shadow: inset 0 0 18px rgba(70, 169, 255, .28), 0 0 14px rgba(36, 145, 255, .22);
}
.hud-shell .system-primary-btn.is-pressed,
.hud-shell .system-ghost-btn.is-pressed,
.hud-shell .system-danger-btn.is-pressed,
.hud-shell .system-outline-btn.is-pressed,
.hud-shell .sys-button-grid button.is-pressed,
.hud-shell .system-pagination button.is-pressed {
transform: translateY(1px) scale(.985);
box-shadow: inset 0 0 24px rgba(94, 196, 255, .42), 0 0 20px rgba(40, 152, 255, .34);
}
.hud-shell .system-primary-btn { width: 100%; margin-top: auto; }
.hud-shell .system-ghost-btn,
.hud-shell .system-danger-btn { width: 100%; margin-top: 20px; }
.hud-shell .system-danger-btn {
border-color: rgba(255, 74, 66, .62);
background: linear-gradient(180deg, rgba(183, 42, 36, .88), rgba(128, 24, 22, .92));
}
.hud-shell .system-outline-btn {
min-width: 104px;
background: rgba(22, 45, 76, .68);
border-color: rgba(156, 190, 224, .42);
}
.hud-shell .sys-kv {
height: 47px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
margin-bottom: 9px;
border-radius: 4px;
background: rgba(70, 94, 121, .28);
}
.hud-shell .sys-kv span { color: #c3cfde; font-size: 14px; }
.hud-shell .ok { color: #26e96d !important; }
.hud-shell .sys-button-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.hud-shell .sys-button-grid button {
height: 44px;
background: rgba(43, 71, 107, .68);
border-color: rgba(80, 124, 174, .42);
font-size: 15px;
}
.hud-shell .sys-button-grid button.active {
background: linear-gradient(180deg, rgba(34, 130, 236, .95), rgba(19, 87, 166, .95));
border-color: rgba(49, 159, 255, .8);
box-shadow: inset 0 0 22px rgba(95, 190, 255, .3), 0 0 16px rgba(30, 140, 255, .28);
}
.hud-shell .log-card {
display: flex;
flex-direction: column;
}
.hud-shell .log-card h3 {
margin-bottom: 22px;
}
.hud-shell .system-log-table {
width: 100%;
border-collapse: collapse;
color: #b9c8dd;
font-size: 14px;
table-layout: fixed;
}
.hud-shell .system-log-table th {
height: 40px;
color: #dbeaff;
text-align: left;
padding: 0 12px;
background: rgba(66, 104, 148, .46);
border: 1px solid rgba(74, 143, 210, .25);
}
.hud-shell .system-log-table td {
height: 37px;
padding: 0 12px;
border: 1px solid rgba(53, 111, 170, .22);
background: rgba(21, 46, 78, .25);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hud-shell .system-pagination {
height: 34px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: auto;
color: #b8c6da;
font-size: 14px;
}
.hud-shell .system-pagination button,
.hud-shell .system-pagination input {
width: 96px;
height: 30px;
font-size: 13px;
font-weight: 500;
background: rgba(28, 55, 88, .55);
color: #dcecff;
border: 1px solid rgba(55, 147, 255, .48);
border-radius: 4px;
text-align: center;
}
.hud-shell .system-pagination .pager-icon,
.hud-shell .system-pagination button[data-page] {
width: 32px;
min-width: 32px;
}
.hud-shell .system-pagination button.active,
.hud-shell .system-pagination b {
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: rgba(28, 111, 190, .65);
color: #fff;
}
.hud-shell .system-pagination input {
width: 82px;
outline: none;
}
.hud-shell .system-pagination input:focus {
border-color: rgba(89, 187, 255, .9);
box-shadow: inset 0 0 16px rgba(70, 169, 255, .24), 0 0 12px rgba(36, 145, 255, .22);
}
.hud-shell .backup-actions { display: flex; gap: 12px; align-items: center; }
.hud-shell .backup-actions .system-primary-btn { width: 108px; margin: 0; }
@media (max-width: 1280px) {
.hud-shell .system-dashboard { left: 24px; right: 24px; }
.hud-shell .system-grid { gap: 12px; }
.hud-shell .system-card { padding: 14px; }
.hud-shell .system-card h3 { font-size: 16px; }
.hud-shell .system-log-table { font-size: 12px; }
}