/* ===== 数据大屏样式（从 bigscreen.html 拆分）===== */
:root {
--bg-color: #020814;
--panel-bg: rgba(4, 18, 42, 0.8);
--border-color: #0d4b8c;
--border-glow: #00e5ff;
--text-main: #7badd6;
--text-white: #ffffff;
--highlight: #00e5ff;
--warning: #f5a623;
--danger: #ff4d4f;
--success: #52c41a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: var(--bg-color);
background-image: radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, .06) 0%, transparent 60%);
color: var(--text-main);
height: 100vh; overflow: hidden;
}
/* ===== 顶栏 ===== */
header {
height: 96px; display: flex; flex-direction: column;
position: relative;
background: linear-gradient(180deg, rgba(0, 229, 255, .08) 0%, transparent 100%);
border-bottom: 1px solid var(--border-color);
}
.header-top {
height: 62px; flex-shrink: 0; width: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; position: relative;
}
.header-left { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-white); font-weight: 600; }
.header-left .logo { font-size: 22px; }
.header-title {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-size: 23px; font-weight: 700; color: var(--text-white); letter-spacing: 3px;
text-shadow: 0 0 15px rgba(0, 229, 255, .6), 0 0 30px rgba(0, 229, 255, .3);
white-space: nowrap;
}
.header-right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
/* 管理导航菜单（对齐对标平台 nav-tabs） */
.nav-tabs {
display: flex; gap: 4px; height: 34px; flex-shrink: 0;
justify-content: center; align-items: stretch; padding: 0 24px;
overflow-x: auto; scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs div {
padding: 0 18px; cursor: pointer; font-size: 13.5px; color: #5c8bb0;
position: relative; transition: all .3s; display: flex; align-items: center;
white-space: nowrap; user-select: none;
}
.nav-tabs div:hover { color: #9dc9e8; }
.nav-tabs div.active { color: var(--highlight); text-shadow: 0 0 10px var(--highlight); font-weight: 700; }
.nav-tabs div.active::before {
content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 100%;
background: linear-gradient(0deg, rgba(0, 229, 255, .2) 0%, transparent 100%);
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.nav-tabs div.active::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 40px; height: 2px; background: var(--highlight);
box-shadow: 0 0 10px var(--highlight);
}
#clock { color: var(--highlight); font-variant-numeric: tabular-nums; font-size: 15px; }
.alert-bell { color: var(--warning); position: relative; }
.alert-bell .dot {
position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
background: var(--danger); color: #fff; border-radius: 8px; font-size: 10px;
display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.header-btn {
color: var(--highlight); text-decoration: none; font-size: 13px;
border: 1px solid var(--border-color); padding: 4px 12px; border-radius: 4px;
transition: all .2s;
}
.header-btn:hover { background: rgba(0, 229, 255, .12); border-color: var(--highlight); }
/* ===== 三栏布局 ===== */
.container {
flex: 1; display: flex; padding: 12px; gap: 12px;
height: calc(100vh - 96px);
}
.side-panel { width: 26%; display: flex; flex-direction: column; gap: 12px; }
.center-panel {
width: 48%; position: relative;
background: rgba(4, 18, 42, 0.4);
border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden;
box-shadow: inset 0 0 50px rgba(0, 229, 255, .05);
}
/* 科技感盒子 */
.tech-box {
background: var(--panel-bg); border: 1px solid var(--border-color);
position: relative; padding: 12px 14px; display: flex; flex-direction: column;
box-shadow: inset 0 0 20px rgba(0, 229, 255, .05); border-radius: 2px;
flex: 1; min-height: 0;
}
.tech-box::before, .tech-box::after {
content: ''; position: absolute; width: 12px; height: 12px;
border: 2px solid var(--border-glow); opacity: .8;
}
.tech-box::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tech-box::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.box-title {
font-size: 15px; color: var(--text-white); font-weight: 600;
margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
letter-spacing: 1px; text-shadow: 0 0 8px rgba(0, 229, 255, .5); flex-shrink: 0;
}
.box-title .sub { font-size: 11px; color: var(--text-main); font-weight: 400; letter-spacing: 0; }
.box-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
/* 设备总览 */
.overview-chart { width: 42%; height: 100%; min-height: 90px; }
.overview-stats {
width: 58%; display: grid; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; gap: 6px; align-content: center;
}
.stat-item {
display: flex; flex-direction: column; justify-content: center; align-items: center;
font-size: 11px; background: rgba(0, 229, 255, .03);
border: 1px solid rgba(0, 229, 255, .1); border-radius: 3px; padding: 4px;
}
.stat-item .num { font-size: 19px; font-weight: 700; color: var(--highlight); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-item .num.green { color: var(--success); }
.stat-item .num.red { color: var(--danger); }
.stat-item .num.orange { color: var(--warning); }
.stat-item .lbl { color: var(--text-main); font-size: 10px; margin-top: 2px; }
/* 图表容器 */
.chart-wrap { flex: 1; position: relative; min-height: 0; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
/* 报警总览圆形 */
.alert-circles { display: flex; justify-content: space-around; align-items: center; flex: 1; }
.alert-circle {
width: 100px; height: 100px; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
position: relative; background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
}
.alert-circle::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid rgba(255, 77, 79, .35); animation: pulse 2s infinite;
}
.alert-circle.today::before { border-color: rgba(255, 77, 79, .5); }
.alert-circle.month::before { border-color: rgba(245, 166, 35, .45); }
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.05); opacity: .5; }
}
.alert-circle .num { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.alert-circle.today .num { color: var(--danger); text-shadow: 0 0 12px rgba(255,77,79,.6); }
.alert-circle.month .num { color: var(--warning); text-shadow: 0 0 12px rgba(245,166,35,.6); }
.alert-circle .label { font-size: 12px; color: var(--text-main); margin-top: 4px; }
/* 实时报警列表 */
.alert-list { flex: 1; overflow-y: auto; margin: -4px -4px 0; }
.alert-list::-webkit-scrollbar { width: 4px; }
.alert-list::-webkit-scrollbar-thumb { background: rgba(0,229,255,.25); border-radius: 2px; }
.alert-item {
display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px;
border-bottom: 1px solid rgba(13, 75, 140, .3); font-size: 12px;
}
.alert-item:last-child { border-bottom: none; }
.alert-item .icon { flex-shrink: 0; font-size: 12px; }
.alert-item .body { flex: 1; min-width: 0; }
.alert-item .msg { color: #cfe4f5; line-height: 1.4; word-break: break-all; }
.alert-item .time { color: #4a6b8a; font-size: 10px; margin-top: 2px; }
.alert-item.critical { background: rgba(255, 77, 79, .06); }
.alert-item.warning { background: rgba(245, 166, 35, .05); }
/* 中间：楼层分布 + 设备信息 */
.center-col {
position: absolute; inset: 0; display: flex; flex-direction: column;
gap: 10px; padding: 12px;
}
.floor-block, .device-block { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.floor-block .box-title, .device-block .box-title { margin-bottom: 8px; font-size: 13px; }
.floor-map {
flex: 1; min-height: 0; overflow-y: auto;
display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 8px; align-content: start; padding-right: 4px;
}
.floor-map::-webkit-scrollbar, .device-table-wrap::-webkit-scrollbar { width: 4px; }
.floor-map::-webkit-scrollbar-thumb, .device-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,229,255,.25); border-radius: 2px; }
/* 设备信息表格 */
.device-table-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
position: sticky; top: 0; z-index: 2;
background: rgba(4, 18, 42, .97); color: #5c8bb0; font-weight: 500;
padding: 6px 8px; text-align: left; font-size: 11px;
border-bottom: 1px solid rgba(13, 75, 140, .6); white-space: nowrap;
}
.data-table td {
padding: 6px 8px; border-bottom: 1px solid rgba(13, 75, 140, .22);
color: #cfe4f5; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.data-table tr:hover td { background: rgba(0, 229, 255, .05); }
.data-table .td-empty { text-align: center; color: #3d5a75; padding: 18px; }
.dot-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.dot-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4a6b8a; }
.dot-status.online { color: var(--success); }
.dot-status.online::before { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot-status.alarm { color: var(--danger); }
.dot-status.alarm::before { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.dot-status.offline { color: #6b8299; }
.floor-card {
background: rgba(0, 229, 255, .04); border: 1px solid rgba(0, 229, 255, .18);
border-radius: 4px; padding: 12px; position: relative; transition: all .2s;
}
.floor-card:hover { background: rgba(0, 229, 255, .09); border-color: var(--highlight); box-shadow: 0 0 16px rgba(0,229,255,.2); }
.floor-card .fname { font-size: 13px; color: var(--text-white); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.floor-card .fname::before { content: ''; width: 6px; height: 6px; background: var(--highlight); border-radius: 50%; box-shadow: 0 0 8px var(--highlight); }
.floor-card .frow { display: flex; justify-content: space-between; font-size: 12px; margin: 4px 0; }
.floor-card .frow .k { color: var(--text-main); }
.floor-card .frow .v { color: var(--highlight); font-weight: 600; font-variant-numeric: tabular-nums; }
.floor-card .frow .v.green { color: var(--success); }
.floor-card .frow .v.red { color: var(--danger); }
/* 中心浮动面板 */
.center-float-panel {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 190px; height: 190px; border-radius: 50%;
background: rgba(2, 12, 30, .92); border: 2px solid rgba(0, 229, 255, .3);
box-shadow: 0 0 40px rgba(0, 229, 255, .2), inset 0 0 30px rgba(0, 229, 255, .06);
display: flex; flex-direction: column; align-items: center; justify-content: center;
z-index: 5; pointer-events: none;
}
.center-float-panel .cf-num {
font-size: 40px; font-weight: 700; color: var(--highlight); line-height: 1;
text-shadow: 0 0 20px rgba(0, 229, 255, .7); font-variant-numeric: tabular-nums;
}
.center-float-panel .cf-lbl { font-size: 12px; color: var(--text-main); margin-top: 4px; letter-spacing: 1px; }
.center-float-panel .cf-sub { font-size: 11px; color: var(--success); margin-top: 6px; }
/* 载入/空态 */
.loading { display: flex; align-items: center; justify-content: center; height: 100%; color: #3d5a75; font-size: 13px; }
/* ===== 大屏内模块视图（不跳转） ===== */
.view { height: calc(100vh - 96px); }
.data-panel {
margin: 12px; height: calc(100vh - 96px - 24px);
background: var(--panel-bg); border: 1px solid var(--border-color);
position: relative; padding: 14px 16px; display: flex; flex-direction: column;
box-shadow: inset 0 0 20px rgba(0, 229, 255, .05); border-radius: 2px;
}
.data-panel::before, .data-panel::after {
content: ''; position: absolute; width: 14px; height: 14px;
border: 2px solid var(--border-glow); opacity: .8;
}
.data-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.data-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.data-panel .box-title { cursor: default; }
.data-toolbar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.data-toolbar select, .data-toolbar button, .data-toolbar input {
background: rgba(0, 229, 255, .06); border: 1px solid var(--border-color);
color: #cfe4f5; padding: 5px 10px; border-radius: 3px; font-size: 12px;
cursor: pointer; outline: none; transition: all .2s;
}
.data-toolbar button:hover, .data-toolbar select:focus { border-color: var(--highlight); background: rgba(0, 229, 255, .12); }
.data-toolbar .tb-label { font-size: 12px; color: var(--text-main); }
.data-body { flex: 1; min-height: 0; overflow: auto; }
.data-body::-webkit-scrollbar { width: 5px; height: 5px; }
.data-body::-webkit-scrollbar-thumb { background: rgba(0,229,255,.25); border-radius: 3px; }
.data-body .chart-area { height: 100%; min-height: 300px; }
.msg-card {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; gap: 14px; color: var(--text-main); font-size: 14px;
}
.msg-card .big-ico { font-size: 46px; opacity: .8; }
.msg-card a {
color: var(--highlight); border: 1px solid var(--border-color);
padding: 7px 20px; border-radius: 4px; text-decoration: none; font-size: 13px;
}
.msg-card a:hover { background: rgba(0, 229, 255, .12); border-color: var(--highlight); }
@media (max-width: 1600px) {
.header-title { font-size: 20px; letter-spacing: 2px; }
.tech-box { padding: 9px 11px; }
.box-title { font-size: 13px; margin-bottom: 7px; }
.alert-circle { width: 84px; height: 84px; }
.alert-circle .num { font-size: 24px; }
.center-float-panel { width: 150px; height: 150px; }
.center-float-panel .cf-num { font-size: 32px; }
.floor-card { padding: 9px; }
}
/* 窄屏（<1100）才降级为纵向滚动 */
@media (max-width: 1100px) {
body { height: auto; overflow-y: auto; }
header { height: auto; padding-bottom: 4px; }
.header-title { font-size: 16px; letter-spacing: 1px; }
.nav-tabs { justify-content: flex-start; padding: 0 12px; }
.container { flex-direction: column; height: auto; }
.view { height: auto; }
.data-panel { height: auto; min-height: 70vh; }
.side-panel, .center-panel { width: 100%; }
.center-panel { min-height: 380px; }
.tech-box { min-height: 170px; }
.floor-block, .device-block { min-height: 220px; }
}
/* ===== 统一大屏：管理组件暗色主题桥接 ===== */
body.scrollable { height: auto; min-height: 100vh; overflow-y: auto; }
.bs-main { display: flex; flex-direction: column; min-height: 100vh; }
.bs-content { flex: 1; min-height: 0; padding: 12px 16px 24px; }
body.scrollable .bs-content { overflow: visible; }
.bs-main .tab-content {
max-width: none; max-height: none; overflow: visible;
padding: 4px 8px 20px; margin: 0;
}
.header-user { color: #9dc9e8; font-size: 13px; white-space: nowrap; }
.header-right .header-btn { cursor: pointer; }
/* 登录：深色背景上的卡片 */
#loginPage {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: var(--bg-color);
background-image: radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, .08) 0%, transparent 60%);
}
#loginPage .login-card {
background: rgba(4, 18, 42, .92); border: 1px solid var(--border-color);
color: var(--text-white); box-shadow: 0 0 40px rgba(0, 229, 255, .12);
}
#loginPage .login-card h1 { color: var(--text-white); }
#loginPage .login-subtitle { color: var(--text-main); }
#loginPage .form-group input {
background: rgba(0, 229, 255, .06); border-color: var(--border-color); color: #cfe4f5;
}
#loginPage .form-group input::placeholder { color: #5c8bb0; }
/* 面板 / 统计 / 图表 */
.bs-main .panel,
.bs-main .settings-form,
.bs-main .chart-container,
.bs-main .data-table-card,
.bs-main .stat-card {
background: var(--panel-bg);
border: 1px solid var(--border-color);
box-shadow: inset 0 0 20px rgba(0, 229, 255, .04);
color: var(--text-main);
}
.bs-main .panel-head { border-bottom-color: rgba(13, 75, 140, .6); }
.bs-main .panel-title { color: var(--text-white); text-shadow: 0 0 8px rgba(0, 229, 255, .4); }
.bs-main .panel-sub { color: var(--text-main); }
.bs-main .stat-card .stat-label { color: var(--text-main); }
.bs-main .stat-card .stat-foot { color: #5c8bb0; font-size: 11px; margin-top: 4px; }
.bs-main .stat-card.stat-total .stat-num { color: var(--highlight); }
.bs-main .stat-card.stat-online .stat-num { color: var(--success); }
.bs-main .stat-card.stat-alarm .stat-num { color: var(--danger); }
.bs-main .stat-card.stat-rate .stat-num { color: var(--warning); }
.bs-main .empty-hint { color: #5c8bb0; text-align: center; padding: 24px; }
.bs-main .empty-state {
background: var(--panel-bg); border: 1px solid var(--border-color);
color: #7badd6; box-shadow: none;
}
/* 告警列表 */
.bs-main .alarm-list { background: transparent; box-shadow: none; }
.bs-main .alarm-item { border-bottom-color: rgba(13, 75, 140, .5); }
.bs-main .alarm-item:hover { background: rgba(0, 229, 255, .06); }
.bs-main .alarm-msg { color: #cfe4f5; }
.bs-main .alarm-time { color: #5c8bb0; }
.bs-main .alarm-item.level-critical { background: rgba(255, 77, 79, .08); }
.bs-main .alarm-item.level-warning { background: rgba(245, 166, 35, .08); }
/* 设备卡片 */
.bs-main .device-card {
background: rgba(4, 18, 42, .7); border-color: var(--border-color);
color: #cfe4f5; box-shadow: none;
}
.bs-main .device-card:hover { box-shadow: 0 0 12px rgba(0, 229, 255, .2); }
.bs-main .card-name { color: var(--text-white); }
.bs-main .card-temp { color: var(--highlight); font-size: 22px; font-weight: 700; }
.bs-main .card-hum { color: var(--success); font-size: 15px; }
.bs-main .card-floor { color: #5c8bb0; font-size: 12px; margin-top: 4px; }
.bs-main .device-grid::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, .25); }
/* 工具栏 */
.bs-main .toolbar .search-input,
.bs-main .toolbar select,
.bs-main .toolbar input {
background: rgba(0, 229, 255, .06); border: 1px solid var(--border-color);
color: #cfe4f5; outline: none;
}
.bs-main .toolbar .search-input:focus,
.bs-main .toolbar select:focus { border-color: var(--highlight); }
.bs-main .toolbar select option { background: #04122a; color: #cfe4f5; }
.bs-main .page-info { color: #7badd6; }
/* 按钮 */
.bs-main .btn {
background: rgba(0, 229, 255, .1); color: #cfe4f5;
border: 1px solid var(--border-color);
}
.bs-main .btn:hover { background: rgba(0, 229, 255, .18); border-color: var(--highlight); }
.bs-main .btn-primary {
background: rgba(0, 229, 255, .22); color: #fff;
border-color: var(--highlight);
}
.bs-main .btn-primary:hover { background: rgba(0, 229, 255, .35); }
.bs-main .btn-secondary {
background: rgba(123, 173, 214, .08); color: #9dc9e8;
border-color: var(--border-color);
}
.bs-main .btn-danger {
background: rgba(255, 77, 79, .2); color: #ff8a8c;
border-color: rgba(255, 77, 79, .45);
}
.bs-main .btn-warn {
background: rgba(245, 166, 35, .2); color: #f5a623;
border-color: rgba(245, 166, 35, .45);
}
.bs-main .btn:disabled { opacity: .4; cursor: default; }
/* 表格 */
.bs-main .table {
background: rgba(4, 18, 42, .6); color: #cfe4f5;
box-shadow: none; border: 1px solid var(--border-color);
}
.bs-main .table th {
background: rgba(0, 229, 255, .08); color: #9dc9e8;
border-bottom: 1px solid var(--border-color);
}
.bs-main .table td { border-top-color: rgba(13, 75, 140, .45); color: #cfe4f5; }
.bs-main .table tr:hover { background: rgba(0, 229, 255, .06); }
.bs-main .sn-text, .bs-main .time-text { color: #7badd6; }
.bs-main .cell-temp { color: var(--highlight); }
.bs-main .cell-hum { color: var(--success); }
/* 分页 */
.bs-main .pagination button,
.bs-main .page-num {
background: rgba(0, 229, 255, .06); border-color: var(--border-color); color: #cfe4f5;
}
.bs-main .pagination button:hover:not(:disabled),
.bs-main .page-num:hover {
background: rgba(0, 229, 255, .14); border-color: var(--highlight); color: var(--highlight);
}
.bs-main .page-num.active {
background: rgba(0, 229, 255, .28); border-color: var(--highlight); color: #fff;
box-shadow: 0 0 8px rgba(0, 229, 255, .3);
}
.bs-main .data-table-card .pagination {
background: rgba(0, 229, 255, .04); border-top-color: var(--border-color);
}
/* 表单 / 设置 */
.bs-main .settings-form { max-width: 640px; }
.bs-main .settings-form h3 { color: var(--text-white); }
.bs-main .form-group label { color: #9dc9e8; }
.bs-main .form-group input,
.bs-main .form-group select,
.bs-main .settings-form input,
.bs-main .settings-form select,
.bs-main .settings-form textarea {
background: rgba(0, 229, 255, .06); border: 1px solid var(--border-color);
color: #cfe4f5;
}
.bs-main .form-group input:focus,
.bs-main .form-group select:focus {
border-color: var(--highlight); outline: none;
}
.bs-main .form-group input::placeholder { color: #5c8bb0; }
.bs-main .form-group select option { background: #04122a; color: #cfe4f5; }
/* 弹窗 */
.bs-main .modal { background: rgba(0, 8, 20, .72); }
.bs-main .modal-content {
background: #04122a; border: 1px solid var(--border-color);
color: #cfe4f5; box-shadow: 0 0 40px rgba(0, 229, 255, .15);
}
.bs-main .modal-content h3,
.bs-main .modal-content h4 { color: var(--text-white); }
.bs-main .modal-close { color: #7badd6; }
.bs-main .modal-close:hover { color: var(--highlight); }
.bs-main .detail-header .sn-text { color: #7badd6; }
.bs-main .detail-section { margin-top: 14px; }
.bs-main .detail-info-item {
background: rgba(0, 229, 255, .04); border: 1px solid rgba(13, 75, 140, .5);
border-radius: 4px; padding: 8px 10px;
}
.bs-main .info-label { color: #5c8bb0; }
.bs-main .info-value { color: #cfe4f5; }
.bs-main .detail-big .big-val { color: var(--highlight); }
.bs-main .detail-big .big-lbl { color: #7badd6; }
.bs-main .chart-container { background: rgba(0, 229, 255, .03); border-color: var(--border-color); }
/* 顶栏标题：覆盖 style.css 的 .header-title */
.bs-main .header-title,
header .header-title {
font-size: 23px; font-weight: 700; color: var(--text-white); letter-spacing: 3px;
text-shadow: 0 0 15px rgba(0, 229, 255, .6), 0 0 30px rgba(0, 229, 255, .3);
}
@media (max-width: 1600px) {
.bs-main .header-title, header .header-title { font-size: 20px; letter-spacing: 2px; }
}
@media (max-width: 1100px) {
.bs-main .header-title, header .header-title { font-size: 16px; letter-spacing: 1px; }
}