@charset "UTF-8";
/*
 * 湘伟恒 · 深空玻璃设计令牌（PC + 移动共用一份）
 * 只做两件事：1) 把散落各处的颜色/圆角/阴影/间距/字号/动效收敛成变量
 *            2) 提供 .wh-card / .wh-empty / .wh-badge 等基础玻璃构件
 * 本文件不含任何 !important，也不覆盖第三方组件 —— 覆盖层仍然是 wh-theme.css / wh-mobile.css。
 * 加载位置：必须在 wh-theme.css / wh-mobile.css 之前。
 */

:root {
    /* ---------- 底色与页面渐变 ---------- */
    --wh-bg-0: #040917;
    --wh-bg-1: #070d1c;
    --wh-bg-2: #0a1226;
    --wh-grad-page: linear-gradient(162deg, var(--wh-bg-0) 0%, var(--wh-bg-2) 46%, var(--wh-bg-0) 100%);

    /* ---------- 亚克力 / 磨砂玻璃 ---------- */
    --wh-blur: 18px;                       /* 卡片 */
    --wh-blur-lg: 30px;                    /* 顶栏、弹窗 */
    --wh-sat: 1.55;                        /* 饱和度：亚克力"透而不薄"的关键 */
    --wh-glass-bg: rgba(17, 27, 48, .58);
    --wh-glass-bg-2: rgba(20, 34, 60, .74);
    --wh-glass-bg-solid: #101c33;          /* 不支持 backdrop-filter 时的兜底 */
    --wh-glass-grad: linear-gradient(168deg, rgba(46, 74, 122, .30) 0%, rgba(17, 27, 48, .16) 42%, rgba(9, 16, 30, .34) 100%);
    --wh-glass-border: rgba(120, 190, 255, .16);
    --wh-glass-border-hi: rgba(150, 210, 255, .28);
    --wh-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08);       /* 顶边高光 */
    --wh-glass-hi-2: inset 0 0 0 1px rgba(255, 255, 255, .03);   /* 内描边 */
    --wh-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");

    /* ---------- 主色与语义色 ---------- */
    --wh-accent: #22d3ee;
    --wh-accent-2: #3b82f6;
    --wh-accent-3: #818cf8;
    --wh-grad-brand: linear-gradient(120deg, var(--wh-accent) 0%, var(--wh-accent-2) 100%);
    --wh-grad-brand-soft: linear-gradient(120deg, rgba(34, 211, 238, .18) 0%, rgba(59, 130, 246, .18) 100%);
    --wh-on-accent: #04121f;

    --wh-ok: #34d399;
    --wh-ok-soft: rgba(52, 211, 153, .14);
    --wh-warn: #fbbf24;
    --wh-warn-soft: rgba(251, 191, 36, .14);
    --wh-danger: #fb7185;
    --wh-danger-soft: rgba(251, 113, 133, .14);
    --wh-off: #7d93b5;                     /* 离线：灰蓝，不用红色，避免和告警抢注意力 */
    --wh-off-soft: rgba(125, 147, 181, .12);
    --wh-info: #60a5fa;
    --wh-brand-orange: #ea3e00;            /* 企业橙，只用于品牌位 */

    /* ---------- 文字 ---------- */
    --wh-t1: #e6f0ff;
    --wh-t2: #a9c2e0;
    --wh-t3: #6d82a3;
    --wh-t4: #4a5c78;                      /* 禁用/水印 */

    /* ---------- 圆角 ---------- */
    --wh-r-sm: 8px;
    --wh-r-ctl: 10px;
    --wh-r-card: 16px;
    --wh-r-pill: 999px;

    /* ---------- 阴影（含彩色外发光，深底上比纯黑阴影更"贵"） ---------- */
    --wh-sh-1: 0 2px 10px rgba(2, 8, 20, .34);
    --wh-sh-2: 0 12px 30px rgba(2, 8, 20, .42);
    --wh-sh-3: 0 28px 64px rgba(2, 8, 20, .52);
    --wh-glow-accent: 0 0 22px rgba(34, 211, 238, .20);
    --wh-glow-danger: 0 0 22px rgba(251, 113, 133, .18);

    /* ---------- 间距（4pt 标度） ---------- */
    --wh-s1: 4px;
    --wh-s2: 8px;
    --wh-s3: 12px;
    --wh-s4: 16px;
    --wh-s5: 24px;
    --wh-s6: 32px;
    --wh-s7: 48px;

    /* ---------- 字号 / 字重 / 行高 ---------- */
    --wh-fs-12: 12px;
    --wh-fs-13: 13px;
    --wh-fs-14: 14px;
    --wh-fs-16: 16px;
    --wh-fs-20: 20px;
    --wh-fs-24: 24px;
    --wh-fs-32: 32px;
    --wh-fs-44: 44px;                      /* 看板大数字 */
    --wh-fw-med: 500;
    --wh-fw-semi: 600;
    --wh-fw-bold: 700;
    --wh-lh-tight: 1.15;
    --wh-lh-body: 1.6;
    --wh-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wh-font-num: "DIN Alternate", "Bahnschrift", "Segoe UI", var(--wh-font); /* 数字用窄体更仪表感 */
    --wh-ls-num: .01em;                    /* 大数字略微收字距 */

    /* ---------- 动效 ---------- */
    --wh-t-fast: .12s;
    --wh-t-base: .22s;
    --wh-t-slow: .36s;
    --wh-ease: cubic-bezier(.22, 1, .36, 1);

    /* ---------- 图表（JS 会读这几个值，见 wh-chart.js） ---------- */
    --wh-chart-grid: rgba(120, 190, 255, .10);
    --wh-chart-axis: rgba(120, 190, 255, .22);
    --wh-chart-text: #6d82a3;
    --wh-chart-c1: #22d3ee;
    --wh-chart-c2: #3b82f6;
    --wh-chart-c3: #34d399;
    --wh-chart-c4: #fbbf24;
    --wh-chart-c5: #fb7185;
    --wh-chart-c6: #a78bfa;
}

/* 不支持 backdrop-filter 的老 WebView（APP 壳里可能遇到）：退回实心面板，不留透明糊底 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    :root {
        --wh-glass-bg: var(--wh-glass-bg-solid);
        --wh-glass-bg-2: #142440;
    }
}

/* 低配机器降级：由 login.jsp 掉帧检测或 ljc_0.2.js 的硬件探测挂上 data-wh-perf="low"。
   背景有动画时，玻璃面板的 backdrop-filter 是"每帧重新采样整块面板"——
   老办公机核显跑不动就是这个原因（不是页面本身数据慢）。降级后仍保持深蓝配色，只是不做实时模糊。 */
html[data-wh-perf="low"] {
    --wh-blur: 0px;
    --wh-blur-lg: 0px;
    --wh-sat: 1;
    --wh-glass-bg: var(--wh-glass-bg-solid);
    --wh-glass-bg-2: #142440;
}

html[data-wh-perf="low"] .wh-card,
html[data-wh-perf="low"] .login_container,
html[data-wh-perf="low"] .wh-topbar,
html[data-wh-perf="low"] .layui-layer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ============ 基础构件 ============ */

/* 玻璃卡：所有面板的统一外壳 */
.wh-card {
    position: relative;
    background-color: var(--wh-glass-bg);
    background-image: var(--wh-glass-grad), var(--wh-noise);
    border: 1px solid var(--wh-glass-border);
    border-radius: var(--wh-r-card);
    box-shadow: var(--wh-sh-2), var(--wh-glass-hi);
    -webkit-backdrop-filter: blur(var(--wh-blur)) saturate(var(--wh-sat));
    backdrop-filter: blur(var(--wh-blur)) saturate(var(--wh-sat));
    overflow: hidden;
}

/* 卡片头：标题 + 右侧操作区 */
.wh-card__hd {
    display: flex;
    align-items: center;
    gap: var(--wh-s2);
    padding: var(--wh-s3) var(--wh-s4);
    border-bottom: 1px solid var(--wh-glass-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}
.wh-card__title {
    font-size: var(--wh-fs-14);
    font-weight: var(--wh-fw-semi);
    color: var(--wh-t1);
    letter-spacing: .02em;
}
.wh-card__sub {
    font-size: var(--wh-fs-12);
    color: var(--wh-t3);
}
.wh-card__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--wh-s2);
}
.wh-card__bd {
    padding: var(--wh-s4);
}

/* 强调卡（KPI 用）：左上角一道细光 + 更亮描边 */
.wh-card--accent {
    border-color: var(--wh-glass-border-hi);
    box-shadow: var(--wh-sh-2), var(--wh-glass-hi), var(--wh-glow-accent);
}
.wh-card--accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 1px;
    background: linear-gradient(90deg, var(--wh-accent), rgba(34, 211, 238, 0));
}

/* KPI 数字 */
.wh-kpi__val {
    font-family: var(--wh-font-num);
    font-weight: var(--wh-fw-bold);
    font-size: var(--wh-fs-44);
    line-height: var(--wh-lh-tight);
    letter-spacing: var(--wh-ls-num);
    color: var(--wh-t1);
    font-variant-numeric: tabular-nums;
}
.wh-kpi__unit {
    font-family: var(--wh-font);
    font-size: var(--wh-fs-14);
    font-weight: var(--wh-fw-med);
    color: var(--wh-t3);
    margin-left: var(--wh-s1);
}
.wh-kpi__delta {
    font-size: var(--wh-fs-12);
    font-variant-numeric: tabular-nums;
}
.wh-kpi__delta--up { color: var(--wh-ok); }
.wh-kpi__delta--down { color: var(--wh-danger); }
.wh-kpi__delta--flat { color: var(--wh-t3); }

/* 状态徽标：在线/离线/告警级别统一用它 */
.wh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--wh-r-pill);
    font-size: var(--wh-fs-12);
    font-weight: var(--wh-fw-med);
    white-space: nowrap;
    border: 1px solid transparent;
}
.wh-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.wh-badge--ok { color: var(--wh-ok); background: var(--wh-ok-soft); border-color: rgba(52, 211, 153, .28); }
.wh-badge--warn { color: var(--wh-warn); background: var(--wh-warn-soft); border-color: rgba(251, 191, 36, .28); }
.wh-badge--danger { color: var(--wh-danger); background: var(--wh-danger-soft); border-color: rgba(251, 113, 133, .28); }
.wh-badge--off { color: var(--wh-off); background: var(--wh-off-soft); border-color: rgba(125, 147, 181, .24); }
.wh-badge--off::before { box-shadow: none; }

/* 空态 / 加载失败态 */
.wh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wh-s2);
    min-height: 120px;
    padding: var(--wh-s5) var(--wh-s4);
    text-align: center;
    color: var(--wh-t3);
    font-size: var(--wh-fs-13);
}
.wh-empty__icon {
    width: 34px;
    height: 34px;
    opacity: .5;
    border-radius: 50%;
    border: 1px dashed var(--wh-glass-border-hi);
    background: radial-gradient(circle at 50% 40%, rgba(120, 190, 255, .16), rgba(120, 190, 255, 0) 70%);
}
.wh-empty__act {
    margin-top: var(--wh-s1);
    color: var(--wh-accent);
    cursor: pointer;
}

/* 骨架屏（替代"永久转圈"） */
.wh-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(120, 190, 255, .07);
    border-radius: var(--wh-r-sm);
}
.wh-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
    transform: translateX(-100%);
    animation: whShimmer 1.4s var(--wh-ease) infinite;
}
@keyframes whShimmer { to { transform: translateX(100%); } }

/* 细滚动条（看板里的长列表用） */
.wh-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 190, 255, .24) transparent;
}
.wh-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.wh-scroll::-webkit-scrollbar-thumb {
    background: rgba(120, 190, 255, .24);
    border-radius: var(--wh-r-pill);
}
.wh-scroll::-webkit-scrollbar-track { background: transparent; }

/* 数字/时间等宽，避免刷新时跳动 */
.wh-num {
    font-family: var(--wh-font-num);
    font-variant-numeric: tabular-nums;
}

/* 图表容器：ECharts 必须要"确定的尺寸"，所以高度写死、宽度交给父级 */
.wh-chart {
    position: relative;
    width: 100%;
    height: 300px;
}
.wh-chart--sm { height: 220px; }
.wh-chart--tall { height: 420px; }

/* 时间段切换：近1小时 / 近24小时 / …（全站统一用它，不再每页一套灰按钮） */
.wh-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--wh-glass-border);
    border-radius: var(--wh-r-pill);
    background: rgba(9, 16, 30, .5);
}
.wh-seg__i {
    border: 0;
    background: transparent;
    color: var(--wh-t3);
    font-family: inherit;
    font-size: var(--wh-fs-13);
    line-height: 1;
    padding: 7px 14px;
    border-radius: var(--wh-r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--wh-t-base) var(--wh-ease), background var(--wh-t-base) var(--wh-ease);
}
.wh-seg__i:hover { color: var(--wh-t1); }
.wh-seg__i.is-active {
    color: var(--wh-on-accent);
    background: var(--wh-grad-brand);
    font-weight: var(--wh-fw-semi);
}

/* 叠加对比的传感器标签 */
.wh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wh-s2);
}
.wh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 10px;
    border-radius: var(--wh-r-pill);
    border: 1px solid var(--wh-glass-border-hi);
    background: var(--wh-grad-brand-soft);
    color: var(--wh-t1);
    font-size: var(--wh-fs-12);
}
.wh-chip__x {
    width: 16px;
    height: 16px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    color: var(--wh-t3);
    cursor: pointer;
}
.wh-chip__x:hover { color: var(--wh-danger); background: var(--wh-danger-soft); }

/* 曲线摘要条：点数 / 最大 / 最小 / 均值 */
.wh-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wh-s2) var(--wh-s6);
}
.wh-stats__i {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--wh-fs-12);
    color: var(--wh-t3);
}
.wh-stats__i b {
    font-family: var(--wh-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: var(--wh-fw-semi);
    font-size: var(--wh-fs-16);
    color: var(--wh-t1);
}

@media (max-width: 700px) {
    .wh-chart { height: 240px; }
    .wh-seg__i { padding: 6px 10px; font-size: var(--wh-fs-12); }
}

/* 尊重系统"减少动态效果"（只作用于本文件的构件，不动第三方组件） */
@media (prefers-reduced-motion: reduce) {
    .wh-skeleton::after { animation: none; }
    .wh-card, .wh-badge, .wh-card--accent, .wh-seg__i { transition: none; }
}