/* Equipment Lifecycle Platform - Industrial Dark Design */

/* ============================================
   DESIGN TOKENS - Industrial Dark
   ============================================ */
:root {
    /* 侧栏宽度（与 dashboard.css、components.js 折叠态一致） */
    --sidebar-width: 180px;
    --sidebar-width-collapsed: 48px;
    --global-topbar-height: 48px;

    /* Background layers — 默认按 sRGB/Windows 略提亮，广色域屏见 @media (color-gamut: p3) */
    --bg-base:    #222C3E;
    --bg-sidebar: #1A2436;
    --bg-topbar:  #141C2C;
    --bg-card:    #2B364A;
    --bg-card-2:  #334055;
    --bg-input:   #1F2A3C;
    --bg-table-h: #1F2A3C;
    --bg-row-alt: rgba(255,255,255,0.035);

    /* 卡片顶缘高光（sRGB 下替代 Mac 上 P3 自然提亮） */
    --surface-top-glow: rgba(255,255,255,0.058);
    --surface-top-glow-strong: rgba(255,255,255,0.085);

    /* Brand Blue - 蓝色点缀 */
    --blue-700: #1D4ED8;
    --blue-600: #2563EB;
    --blue-500: #3B82F6;
    --blue-400: #60A5FA;
    --blue-300: #93C5FD;
    --blue-200: #BFDBFE;
    --blue-100: #DBEAFE;

    /* Accent - 激活/高亮 */
    --accent:       #3B82F6;
    --accent-light: rgba(59,130,246,0.15);
    --accent-glow:  rgba(59,130,246,0.25);

    /* Borders */
    --border:       rgba(255,255,255,0.14);
    --border-light: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.18);
    --border-focus: rgba(59,130,246,0.55);

    /* Text - 高对比度 */
    --text-primary:   #E8F0F8;   /* 主文字 */
    --text-secondary: #C4D4E4;   /* 次要文字 */
    --text-muted:     #A8BFD4;   /* 辅助/标签（略提亮，长时阅读） */
    --text-650:       #CBDEE8;   /* 表格正文（亮度档位 650） */
    --text-700:       #D6E6F0;   /* 能耗管理等页正文（亮度档位 700） */
    --text-bright:    #F5F8FC;   /* 标题/数字 */

    /* Semantic */
    --color-success:       #10B981;
    --color-success-soft:  #6EE7B7;
    --color-warning:       #D97706;
    --color-warning-soft:  #FBBF24;
    --color-error:         #EF4444;
    --color-error-soft:    #FCA5A5;
    --color-danger:        var(--color-error);
    --color-danger-soft:   var(--color-error-soft);
    --color-info:          #3B82F6;
    --color-info-soft:     var(--blue-300);

    /* 机房卡片 UI（毛玻璃 + 分色；图表仍用 JLB_ROOM_CHART_COLORS） */
    --room-accent-bar:   var(--blue-400);
    --room-title-color:  var(--text-bright);
    --room-glass-blur:   blur(14px) saturate(1.22);

    /* Aliases */
    --color-background:       var(--bg-base);
    --color-surface:          var(--bg-card);
    --color-surface-elevated: var(--bg-card-2);
    --color-border:           var(--border);
    --color-border-hover:     var(--border-hover);
    --color-text:             var(--text-primary);
    --color-text-secondary:   var(--text-secondary);
    --color-text-muted:       var(--text-muted);
    --color-primary:          var(--blue-500);
    --color-secondary:        var(--blue-400);
    --color-accent:           var(--blue-300);
    --color-cta:              var(--blue-500);
    --color-cta-hover:        var(--blue-600);
    --bio-ocean:              var(--blue-400);
    --bio-forest:             var(--blue-500);
    --bio-text:               var(--text-primary);
    --bio-text-light:         var(--text-secondary);

    /* Spacing */
    --space-xs:2px; --space-sm:8px; --space-md:16px;
    --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px;

    /* Ops 页垂直节奏（概览 / 工作台 / 故障等同密度） */
    --ops-stack-gap: 16px;
    --ops-zone-gap: 8px;
    --ops-toolbar-pad: 10px 12px;
    --ops-zone-label-fs: 10px;
    --ops-card-radius: var(--radius-lg);

    /* Shadows — sRGB 屏加强层次，广色域 Mac 用 p3 块还原 */
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.62), 0 2px 10px rgba(0,0,0,0.28);
    --shadow-soft:   0 2px 12px rgba(0,0,0,0.42), 0 1px 4px rgba(0,0,0,0.24);
    --shadow-medium: 0 4px 24px rgba(0,0,0,0.52), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-strong: 0 10px 38px rgba(0,0,0,0.58), 0 4px 14px rgba(0,0,0,0.32);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.46), 0 2px 6px rgba(0,0,0,0.24);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.52), 0 3px 12px rgba(0,0,0,0.26);
    --shadow-xl:     0 16px 48px rgba(0,0,0,0.58), 0 6px 18px rgba(0,0,0,0.28);
    --shadow-blue:   0 2px 16px rgba(59,130,246,0.38), 0 4px 14px rgba(0,0,0,0.24);
    --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -1px 0 rgba(0,0,0,0.22);

    /* Glass (弹窗专用) */
    --glass-bg:     rgba(21,28,43,0.95);
    --glass-border: rgba(255,255,255,0.10);
    --glass-blur:   blur(20px);
    --glass-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);

    /* Modal contract（全站弹窗视觉真源；页面可覆写宽度，勿另起色调） */
    --modal-overlay-bg: rgba(0,0,0,0.7);
    --modal-z: 1000;
    --modal-radius: var(--radius-xl);
    --modal-title-size: 17px;
    --modal-title-compact: 16px;
    --modal-label-size: 12px;
    --modal-pad: var(--space-2xl);
    --modal-pad-compact: 16px 20px;
    --modal-header-mb-compact: 10px;
    --modal-header-pb-compact: 8px;
    --modal-footer-mt-compact: 10px;
    --modal-footer-pt-compact: 8px;
    --lightbox-z: 11000;
    --lightbox-overlay-bg: rgba(0,0,0,0.88);

    /* Glass Panel — 通用毛玻璃卡片 L1/L2（glass-preview → 全站推广） */
    --glass-panel-bg:           rgba(43, 54, 74, 0.68);
    --glass-panel-bg-hover:     rgba(51, 64, 85, 0.78);
    --glass-panel-blur:         blur(14px) saturate(1.18);
    --glass-panel-border:       rgba(255, 255, 255, 0.12);
    --glass-panel-border-hover: rgba(255, 255, 255, 0.18);
    --glass-panel-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.22);
    --glass-panel-tint-primary: rgba(59, 130, 246, 0.10);
    --glass-panel-tint-warn:    rgba(217, 119, 6, 0.10);
    --glass-panel-tint-danger:  rgba(239, 68, 68, 0.10);
    --glass-panel-tint-success: rgba(16, 185, 129, 0.10);

    /* Typography（system-ui 优先：跨 Mac/Win 系统字体各自最优渲染） */
    --font-heading: ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, 'Courier New', monospace;
    --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                    'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
    /* 流体字号阶梯（相对 html 根字号，见下方 clamp） */
    --text-xs:   0.8rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.0625rem;
    --text-lg:   1.125rem;

    /* Radius - 工业感，圆角适中 */
    --radius-sm:4px; --radius-md:8px; --radius-gentle:8px;
    --radius-lg:12px; --radius-soft:12px;
    --radius-xl:16px; --radius-organic:16px; --radius-full:9999px;
    /* Dashboard 风格全局压缩版（外部 26px → 14px）；面板/KPI 优先用此 */
    --radius-card: 14px;
    --dash-card-radius: var(--radius-card);

    /* 语义强调条（多彩错列 → 全站 KPI/摘要） */
    --dash-accent-fault: #f87171;
    --dash-accent-inspect: #fbbf24;
    --dash-accent-overdue: #fb923c;
    --dash-accent-log: #60a5fa;
    --dash-accent-pue: #34d399;
    --dash-accent-temp: #22d3ee;
    --dash-accent-dc: #c084fc;
    --jlb-tab-active-bg: linear-gradient(135deg, rgba(59,130,246,0.28) 0%, rgba(245,158,11,0.16) 100%);
    --jlb-select-amber: rgba(245, 158, 11, 0.22);
    --jlb-dot-grid: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);

    /* Transitions */
    --transition-fast:   120ms ease;
    --transition-base:   180ms ease;
    --transition-slow:   280ms ease;
    --transition-smooth: all 200ms cubic-bezier(0.4,0,0.2,1);

    /* Legacy */
    --color-gray-50:#F8FAFC; --color-gray-100:#F1F5F9; --color-gray-200:#E2E8F0;
    --color-gray-300:#CBD5E1; --color-gray-400:#94A3B8; --color-gray-500:#64748B;
    --color-gray-600:#475569; --color-gray-700:#334155; --color-gray-800:#1E293B;
    --color-gray-900:#0F172A;

    /* 状态色（全站在线/告警/离线统一引用） */
    --status-online:  var(--color-success);
    --status-offline: var(--color-gray-500);
    --status-alarm:   var(--color-error);
    --status-warn:    var(--color-warning);

    /* 嵌入式画布/平面图/iframe 深色底（与工业暗色同系，非旧青绿） */
    --bg-canvas: var(--bg-topbar);

    /*
     * Elevation（亮度叠层，仅别名现有色，不新增色相）
     * L0 画布 → L1 壳层 → L2 面板 → L3 内嵌 → L4 浮层（modal/dropdown）
     * 参考：Siemens Industrial / Linear luminance stacking
     */
    --elev-0: var(--bg-canvas);
    --elev-1: var(--bg-base);
    --elev-2: var(--bg-card);
    --elev-3: var(--bg-card-2);
    --elev-panel-bg: linear-gradient(180deg, var(--surface-top-glow) 0%, rgba(255,255,255,0) 42%), var(--bg-card);
    --elev-panel-bg-strong: linear-gradient(145deg, var(--surface-top-glow-strong) 0%, rgba(255,255,255,0) 52%), var(--bg-card);
    --elev-panel-shadow: var(--shadow-medium), var(--shadow-inset);
    --elev-panel-shadow-hover: var(--shadow-strong), var(--shadow-inset);
    --elev-nest-bg: var(--bg-card-2);
    --elev-nest-border: var(--border-light);
    --elev-chrome-bg: linear-gradient(180deg, var(--surface-top-glow-strong) 0%, rgba(255,255,255,0) 70%), var(--bg-table-h);

    /* 旧页遗留变量 → 统一到工业蓝 token（users / emergency / equipment 等） */
    --primary-color:  var(--blue-500);
    --primary-dark:   var(--blue-700);
    --primary-light:  var(--blue-300);
    --danger-color:   var(--color-error);
    --danger-light:   #FCA5A5;
    --text-tertiary:  var(--text-muted);
    --font-size-sm:   var(--text-sm);

    /* 旧页遗留语义别名（emergency-response 等） */
    --text-color:     var(--text-primary);
    --card-bg:        var(--bg-card);
    --bg-secondary:   var(--bg-card-2);
}

/* 广色域屏（Mac Retina 等）— 保持原有工业暗色基准，避免过亮 */
@media (color-gamut: p3) {
    :root {
        --bg-base:    #1C2333;
        --bg-sidebar: #151C2B;
        --bg-topbar:  #111827;
        --bg-card:    #232D3F;
        --bg-card-2:  #2A3547;
        --bg-input:   #1A2235;
        --bg-table-h: #1A2235;
        --bg-row-alt: rgba(255,255,255,0.02);

        --surface-top-glow: rgba(255,255,255,0.028);
        --surface-top-glow-strong: rgba(255,255,255,0.045);

        --border:       rgba(255,255,255,0.10);
        --border-light: rgba(255,255,255,0.04);
        --border-hover: rgba(255,255,255,0.13);
        --border-focus: rgba(59,130,246,0.5);

        --shadow-sm:     0 1px 2px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.22);
        --shadow-soft:   0 2px 10px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.2);
        --shadow-medium: 0 4px 22px rgba(0,0,0,0.48), 0 2px 6px rgba(0,0,0,0.25);
        --shadow-strong: 0 10px 34px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.28);
        --shadow-md:     0 4px 14px rgba(0,0,0,0.42), 0 2px 5px rgba(0,0,0,0.2);
        --shadow-lg:     0 8px 28px rgba(0,0,0,0.48), 0 3px 10px rgba(0,0,0,0.22);
        --shadow-xl:     0 16px 44px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.25);
        --shadow-blue:   0 2px 14px rgba(59,130,246,0.32), 0 4px 12px rgba(0,0,0,0.2);
        --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.085), inset 0 -1px 0 rgba(0,0,0,0.26);

        --room-glass-blur: blur(14px) saturate(1.12);
    }
}

[data-theme="dark"] {
    --color-text:           var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted:     var(--text-muted);
}

/* ============================================
   DESIGN TOKENS - Industrial Light (soft)
   无纯白底，蓝灰中调，减轻刺眼感
   ============================================ */
[data-theme="light"] {
    --bg-base:    #C5CED9;
    --bg-sidebar: #B8C4D4;
    --bg-topbar:  #B0BECD;
    --bg-card:    #D4DCE8;
    --bg-card-2:  #DAE2ED;
    --bg-input:   #CBD6E4;
    --bg-table-h: #BFCBD9;
    --bg-row-alt: rgba(15, 23, 42, 0.04);

    --accent-light: rgba(59, 130, 246, 0.14);
    --accent-glow:  rgba(59, 130, 246, 0.2);

    --border:       rgba(15, 23, 42, 0.11);
    --border-light: rgba(15, 23, 42, 0.06);
    --border-hover: rgba(15, 23, 42, 0.17);
    --border-focus: rgba(59, 130, 246, 0.5);

    --text-primary:   #0F172A;
    --text-secondary: #1E293B;
    --text-muted:     #475569;
    --text-650:       #334155;
    --text-700:       #1E293B;
    --text-bright:    #020617;

    --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-soft:   0 2px 8px rgba(15, 23, 42, 0.09), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-medium: 0 4px 14px rgba(15, 23, 42, 0.11), 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-strong: 0 10px 26px rgba(15, 23, 42, 0.13), 0 4px 8px rgba(15, 23, 42, 0.07);
    --shadow-md:     0 4px 12px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-lg:     0 8px 22px rgba(15, 23, 42, 0.11), 0 3px 8px rgba(15, 23, 42, 0.06);
    --shadow-xl:     0 16px 36px rgba(15, 23, 42, 0.13), 0 6px 12px rgba(15, 23, 42, 0.07);
    --shadow-blue:   0 2px 12px rgba(59, 130, 246, 0.24), 0 4px 8px rgba(15, 23, 42, 0.05);
    --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(15, 23, 42, 0.06);

    --glass-bg:     rgba(212, 220, 232, 0.94);
    --glass-border: rgba(15, 23, 42, 0.1);
    --glass-shadow: 0 24px 44px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);

    --color-text:           var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted:     var(--text-muted);

    --color-success-soft:  #047857;
    --color-warning-soft:  #B45309;
    --color-error-soft:    #B91C1C;
    --color-danger-soft:   var(--color-error-soft);
}

html[data-theme="light"] { color-scheme: light; }

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    text-shadow: none;
}

[data-theme="light"] p { color: var(--text-secondary); }

[data-theme="light"] a { color: var(--blue-600); }
[data-theme="light"] a:hover { color: var(--blue-700); }

[data-theme="light"] .btn-secondary {
    background: linear-gradient(180deg, #DAE2ED 0%, #CCD6E2 100%);
    color: var(--text-secondary);
    border-color: var(--border-hover);
}
[data-theme="light"] .btn-secondary:hover {
    background: linear-gradient(180deg, #E2E9F2 0%, #D4DCE8 100%);
    color: var(--text-primary);
}

[data-theme="light"] .btn-info {
    color: var(--blue-700);
    border-color: rgba(59, 130, 246, 0.35);
}
[data-theme="light"] .btn-success { color: #047857; border-color: rgba(16, 185, 129, 0.35); }
[data-theme="light"] .btn-warning { color: #B45309; border-color: rgba(245, 158, 11, 0.35); }
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-error { color: #B91C1C; border-color: rgba(239, 68, 68, 0.35); }

[data-theme="light"] .btn-ghost:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-primary);
}

[data-theme="light"] .btn-outline:hover {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 42%), var(--bg-card);
}

[data-theme="light"] .form-control {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

[data-theme="light"] .form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .table th {
    background: var(--bg-table-h);
    color: var(--text-muted);
}

[data-theme="light"] .table tbody tr:nth-child(even) {
    background: var(--bg-row-alt);
}

[data-theme="light"] .sidebar-overlay {
    background: rgba(15, 23, 42, 0.35);
}

/* Light：语义色用深色调，避免浅字发灰/反光 */
[data-theme="light"] .badge-success,
[data-theme="light"] .alert-success { color: #047857; }
[data-theme="light"] .badge-warning,
[data-theme="light"] .alert-warning { color: #B45309; }
[data-theme="light"] .badge-danger,
[data-theme="light"] .alert-danger { color: #B91C1C; }
[data-theme="light"] .badge-info,
[data-theme="light"] .alert-info { color: #1D4ED8; }

[data-theme="light"] ::placeholder {
    color: #64748B;
    opacity: 1;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
    scroll-behavior:smooth;
    color-scheme: dark;
    /* 全站流体根字号：窄屏 14px，宽屏最高 16px，子元素用 rem 自动跟随 */
    font-size: clamp(13.5px, 12.5px + 0.15vw, 15px);
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-primary);
    background-color: var(--bg-base);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: 600; line-height: 1.3;
    color: var(--text-bright);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}
h1{font-size:1.57rem} h2{font-size:1.29rem} h3{font-size:1.14rem}
h4{font-size:1rem} h5{font-size:1rem} h6{font-size:0.86rem}

p { margin-bottom: var(--space-md); color: #A8BDD0; }
a { color: var(--blue-400); text-decoration:none; transition: var(--transition-base); }
a:hover { color: var(--blue-300); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 7px 14px;
    font-size: 0.93rem; font-weight: 500; font-family: var(--font-body);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition-smooth);
    white-space: nowrap; text-decoration: none;
    box-shadow: var(--shadow-inset);
}

/* Primary */
.btn-primary {
    background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
    color: #fff; border-color: #1D4ED8;
    box-shadow: var(--shadow-blue), var(--shadow-inset);
}
.btn-primary:hover { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
    background: linear-gradient(180deg, #2E3D52 0%, #263347 100%);
    color: var(--text-secondary); border-color: var(--border-hover);
}
.btn-secondary:hover { background: linear-gradient(180deg, #364559 0%, #2E3D52 100%); color: var(--text-primary); }

/* Info - 导出/查看 */
.btn-info {
    background: linear-gradient(180deg, rgba(59,130,246,0.2) 0%, rgba(37,99,235,0.15) 100%);
    color: var(--blue-300); border-color: rgba(59,130,246,0.3);
}
.btn-info:hover { background: linear-gradient(180deg, rgba(59,130,246,0.28) 0%, rgba(37,99,235,0.22) 100%); color: var(--blue-200); transform: translateY(-1px); }

/* Success */
.btn-success {
    background: linear-gradient(180deg, rgba(16,185,129,0.2) 0%, rgba(5,150,105,0.15) 100%);
    color: var(--color-success-soft); border-color: rgba(16,185,129,0.3);
}
.btn-success:hover { background: linear-gradient(180deg, rgba(16,185,129,0.28) 0%, rgba(5,150,105,0.22) 100%); transform: translateY(-1px); }

/* Warning */
.btn-warning {
    background: linear-gradient(180deg, rgba(217,119,6,0.2) 0%, rgba(180,83,9,0.15) 100%);
    color: var(--color-warning-soft); border-color: rgba(217,119,6,0.35);
}
.btn-warning:hover { background: linear-gradient(180deg, rgba(217,119,6,0.28) 0%, rgba(180,83,9,0.22) 100%); transform: translateY(-1px); }

/* Danger */
.btn-danger, .btn-error {
    background: linear-gradient(180deg, rgba(239,68,68,0.2) 0%, rgba(220,38,38,0.15) 100%);
    color: #FCA5A5; border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover, .btn-error:hover { background: linear-gradient(180deg, rgba(239,68,68,0.28) 0%, rgba(220,38,38,0.22) 100%); color: #FECACA; transform: translateY(-1px); }

/* Ghost */
.btn-ghost {
    background: transparent; color: var(--text-muted); border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text-secondary); border-color: var(--border); }

/* Outline */
.btn-outline {
    background: transparent; color: var(--text-secondary); border-color: var(--border-hover);
    box-shadow: none;
}
.btn-outline:hover { background: rgba(255,255,255,0.04); border-color: var(--border-focus); color: var(--text-primary); }

/* Sizes */
.btn-xs    { padding: 3px 8px;   font-size: 0.79rem; border-radius: var(--radius-sm); }
.btn-sm    { padding: 5px 10px;  font-size: 0.86rem; }
.btn-lg    { padding: 10px 20px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* States */
.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:active:not(:disabled) { transform: translateY(0) !important; }

/* Icons */
.btn [data-lucide]    { width: 14px; height: 14px; flex-shrink: 0; }
.btn-xs [data-lucide] { width: 12px; height: 12px; }
.btn-sm [data-lucide] { width: 13px; height: 13px; }
.btn-lg [data-lucide] { width: 16px; height: 16px; }

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--elev-panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    padding: var(--space-lg);
    box-shadow: var(--elev-panel-shadow);
    transition: var(--transition-smooth);
}
.card:hover {
    background: var(--elev-3);
    border-color: var(--border-hover);
    box-shadow: var(--elev-panel-shadow-hover);
}

/* 可复用：L2 面板 / L3 内嵌井（不改色相，只统一层次） */
.jlb-elev-panel {
    background: var(--elev-panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    box-shadow: var(--elev-panel-shadow);
}
.jlb-elev-nest {
    background: var(--elev-nest-bg);
    border: 1px solid var(--elev-nest-border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.18);
}
.jlb-elev-chrome {
    background: var(--elev-chrome-bg);
    border-bottom: 1px solid var(--border);
}

/*
 * Ops 列表页筛选条 / 次级面板（阶段 C）
 * 筛选条：面板内顶光条；独立块：L2 面板。色相不变。
 */
.fault-filter-bar,
.eq-filter-bar,
.insp-filter-bar,
.wl-search-bar,
.ops-stack .users-toolbar,
.fault-list-header,
.eq-list-header {
    background: var(--elev-chrome-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.fault-list-header,
.eq-list-header {
    padding: 10px 12px;
}
.fault-filter-bar,
.eq-filter-bar,
.wl-search-bar {
    margin: 0;
    padding: 10px 12px;
    border-radius: 0;
}
.wl-search-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-inset);
}
.insp-panel {
    background: var(--elev-panel-bg) !important;
    border: 1px solid var(--border);
    box-shadow: var(--elev-panel-shadow);
}
.insp-panel-hd,
.date-nav {
    background: var(--elev-chrome-bg) !important;
}

/*
 * Remaining shell pages elevation（阶段 D）
 * 应急/资料/负载月报/知识库/图谱/简介/导入/门禁/工作台等；色相不变。
 */
.kg-toolbar,
.doc-toolbar,
.vault-toolbar,
.imp-toolbar,
.ra-filters,
.ec-toolbar,
.rdp-root .doc-toolbar,
.pl-batch-bar,
.pl-section-hd {
    background: var(--elev-chrome-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.kg-toolbar,
.imp-toolbar,
.ra-filters,
.ec-toolbar,
.doc-toolbar,
.vault-toolbar,
.rdp-root .doc-toolbar {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    margin-bottom: 10px;
}
.kb-summary-card,
.kb-result-card,
.pl-panel,
.wl-panel,
.room-banner:not(.jlb-room-glass),
.rdp-root .folder-panel,
.ec-panel-card {
    background: var(--elev-panel-bg);
    border: 1px solid var(--border);
    box-shadow: var(--elev-panel-shadow);
}
.kb-stat-pill,
.wl-input-area {
    background: var(--elev-nest-bg);
    border: 1px solid var(--elev-nest-border);
}
.kb-drawer {
    background: var(--elev-2);
    box-shadow: var(--elev-panel-shadow-hover);
}
.kb-drawer-hd,
.wl-panel-hd {
    background: var(--elev-chrome-bg);
}

.card-header {
    margin-bottom: var(--space-lg); padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size:1rem; font-weight:600; color:var(--text-bright); margin:0; }
.card-body  { color: var(--text-secondary); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: var(--space-lg); }

.form-section-title {
    font-size:0.79rem; font-weight:600; color:var(--blue-400);
    margin:18px 0 10px 0; padding-bottom:6px;
    border-bottom:1px solid var(--border);
    text-transform:uppercase; letter-spacing:0.8px;
}
.form-section-title:first-child { margin-top:0; }

.form-label {
    display:block; margin-bottom:5px;
    font-weight:500; color: #C4D4E4; font-size:0.86rem;
}

.form-control {
    width:100%; padding:8px 11px; font-size:0.93rem;
    font-family:var(--font-body);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: var(--transition-base);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12), inset 0 1px 3px rgba(0,0,0,0.3);
    outline: none;
    background: #1E2A3D;
}
.form-control::placeholder { color: var(--text-muted); }

select.form-control {
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A8BA0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;
}
textarea.form-control { resize:vertical; min-height:90px; }

/* ============================================
   TABLES
   ============================================ */
.table-container {
    background: var(--elev-panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    padding: var(--space-lg);
    box-shadow: var(--elev-panel-shadow);
    overflow-x: auto;
}
table { width:100%; border-collapse:collapse; }
th {
    padding:9px 13px; text-align:left;
    font-weight:600; color: #C4D4E4;
    font-size:0.79rem; text-transform:uppercase; letter-spacing:0.7px;
    border-bottom:1px solid var(--border);
    background: var(--bg-table-h);
}
td {
    padding:10px 13px;
    border-bottom:1px solid var(--border-light);
    color: #E8F0F8; font-size:0.93rem;
}
tr:last-child td { border-bottom:none; }
tbody tr:hover { background: var(--bg-row-alt); }

/* ============================================
   BADGES
   ============================================ */
.badge {
    display:inline-flex; align-items:center;
    padding:2px 8px; font-size:0.79rem; font-weight:600;
    border-radius:var(--radius-full); line-height:1.4;
}
.badge-success { background:rgba(16,185,129,0.15); color:var(--color-success-soft); border:1px solid rgba(16,185,129,0.25); }
.badge-warning { background:rgba(217,119,6,0.15); color:var(--color-warning-soft); border:1px solid rgba(217,119,6,0.28); }
.badge-error   { background:rgba(239,68,68,0.15);  color:#FCA5A5; border:1px solid rgba(239,68,68,0.25); }
.badge-info    { background:rgba(59,130,246,0.15);  color:#93C5FD; border:1px solid rgba(59,130,246,0.25); }

/* ============================================
   ALERTS
   ============================================ */
.alert {
    padding:var(--space-md); border-radius:var(--radius-md);
    border:1px solid; display:flex; align-items:flex-start;
    gap:10px; margin-bottom:var(--space-lg);
}
.alert-success { background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.2); color:var(--color-success-soft); }
.alert-warning { background:rgba(217,119,6,0.08); border-color:rgba(217,119,6,0.22); color:var(--color-warning-soft); }
.alert-error   { background:rgba(239,68,68,0.08);  border-color:rgba(239,68,68,0.2);  color:#FCA5A5; }
.alert-info    { background:rgba(59,130,246,0.08);  border-color:rgba(59,130,246,0.2); color:#93C5FD; }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--modal-overlay-bg);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    z-index:var(--modal-z); opacity:0; visibility:hidden;
    transition:var(--transition-smooth);
}
.modal-overlay.active,
.modal-overlay.open { opacity:1; visibility:visible; }

.modal {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--modal-radius);
    padding: var(--modal-pad);
    box-shadow: var(--glass-shadow);
    max-width:600px; width:92%; max-height:90vh; overflow-y:auto;
    transform:scale(0.96) translateY(8px);
    transition:var(--transition-smooth);
}
.modal-overlay.active .modal,
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

.modal-header {
    margin-bottom:var(--space-lg); padding-bottom:var(--space-md);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:var(--modal-title-size); font-weight:600; color:var(--text-bright); margin:0; }

.modal-close {
    background: var(--bg-card-2); border:1px solid var(--border);
    border-radius:50%; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-muted); transition:var(--transition-base);
}
.modal-close:hover { color:var(--text-primary); background:var(--bg-card); transform:rotate(90deg); }
.modal-close [data-lucide] { width:13px; height:13px; }

.modal-footer {
    display:flex; align-items:center; justify-content:flex-end;
    gap:10px; margin-top:var(--space-lg); padding-top:var(--space-md);
    border-top:1px solid var(--border);
}

/* 密度 / 宽度修饰（故障/能耗/设备等 ops 表单用 compact，勿再私造字号色调） */
.modal--compact { padding: var(--modal-pad-compact); }
.modal--compact .modal-header {
    margin-bottom: var(--modal-header-mb-compact);
    padding-bottom: var(--modal-header-pb-compact);
}
.modal--compact .modal-title { font-size: var(--modal-title-compact); }
.modal--compact .modal-footer {
    margin-top: var(--modal-footer-mt-compact);
    padding-top: var(--modal-footer-pt-compact);
}
.modal-footer--center { justify-content: center; }
.modal--sm { max-width: 420px; }
.modal--md { max-width: 720px; width: min(720px, 95vw); }
.modal--lg { max-width: 1000px; width: min(1000px, 95vw); }
.modal--xl { max-width: 1200px; width: min(1200px, 95vw); }

/* 图片灯箱共用基底（各页可挂自己的 id，视觉对齐） */
.jlb-lightbox {
    display: none; position: fixed; inset: 0;
    background: var(--lightbox-overlay-bg); z-index: var(--lightbox-z);
    align-items: center; justify-content: center; padding: 24px;
}
.jlb-lightbox.active,
.jlb-lightbox.open { display: flex; }
.jlb-lightbox img {
    max-width: min(920px, 96vw); max-height: 90vh; object-fit: contain;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
}
.jlb-lightbox-close {
    position: absolute; top: 16px; right: 20px; border: 0; background: transparent;
    color: var(--text-bright); font-size: 28px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.jlb-lightbox-close:hover { opacity: 1; }

/* ============================================
   LOADING
   ============================================ */
.loading-spinner {
    width:30px; height:30px;
    border:3px solid rgba(59,130,246,0.15);
    border-top-color:var(--blue-400);
    border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.loading-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(21,28,43,0.85); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; z-index:9999;
}

/* ============================================
   ICONS
   ============================================ */
[data-lucide]            { width:16px; height:16px; stroke-width:1.8; }
.nav-icon [data-lucide]  { width:16px; height:16px; }
.btn [data-lucide]       { width:14px; height:14px; vertical-align:middle; }
.btn-sm [data-lucide]    { width:13px; height:13px; }
.btn-lg [data-lucide]    { width:16px; height:16px; }
.stat-icon [data-lucide] { width:20px; height:20px; }
.empty-icon [data-lucide]{ width:40px; height:40px; }
.modal-close [data-lucide]{ width:13px; height:13px; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination-container {
    display:flex; align-items:center; justify-content:center;
    gap:16px; margin-top:20px; flex-wrap:wrap;
}
.pagination-info { font-size:12px; color:var(--text-muted); }
.pagination-controls { display:flex; align-items:center; gap:4px; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

/* ============================================
   HEADER USER INFO
   ============================================ */
.header { display:flex; align-items:center; }
.header.page-header {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 4px;
}
.page-header__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.page-header__subtitle,
.page-subtitle-muted {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.header .d-flex { flex-wrap:nowrap !important; width:100%; }

.user-info-header {
    display:flex; align-items:center; gap:10px;
    padding:6px 12px;
    background: var(--bg-card);
    border-radius:var(--radius-md); border:1px solid var(--border);
    flex-shrink:0;
}

.user-avatar-small {
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue-500), var(--blue-700));
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}

.user-details-small { display:flex; flex-direction:column; gap:1px; }
.user-name-small  { font-size:12px; font-weight:600; color:var(--text-primary); line-height:1.2; }
.user-role-small  { font-size:10px; color:var(--text-muted); line-height:1.2; }

.header-actions { display:flex; align-items:center; gap:12px; }

/* 时钟在 page-header__actions 内时由 actions 容器右对齐 */
.header .page-header__actions .current-time {
    margin-left: 0;
}

.header .current-time {
    margin-left: auto;
}

.current-time {
    font-size:12px; color:var(--text-muted);
    font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
    white-space:nowrap; flex-shrink:0;
    min-width:24ch; text-align:right; display:inline-block;
}

.logout-btn-header { display:flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; }

.u-hidden { display: none !important; }

/* ============================================
   PAGE CONTENT — 全站内容区契约（Phase 1）
   ============================================ */
.page-content,
.content-wrapper,
.content-area {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

/* 宽表格页略放宽阅读宽度 */
.page-content.table-page,
.content-wrapper.table-page,
.content-area.table-page {
    max-width: 1600px;
}


/* ============================================
   OPS LAYOUT — ContextBar / SummaryStrip / MainStage
   （故障 / 设备 / 能耗等列表页共用；页内可覆写细控件）
   ============================================ */
.ops-context-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 10px;
    margin-bottom: 0;
}

.ops-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.ops-summary-strip__sep {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 4px;
}

.ops-summary-kpi {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 72px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ops-summary-kpi:hover {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.08);
}

.ops-summary-kpi.is-active {
    border-color: rgba(96, 165, 250, 0.65);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.ops-summary-kpi__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}

.ops-summary-kpi__label {
    font-size: 11px;
    color: rgba(226, 232, 240, 0.65);
}

.ops-summary-kpi--room .ops-summary-kpi__value {
    font-size: 16px;
    color: #fbbf24;
}

.ops-main-stage > .chart-card {
    margin-top: 0;
}

.ops-stack > .ops-context-bar,
.ops-stack > .ops-summary-strip,
.ops-stack > .ops-main-stage,
.ops-stack > .fault-summary-row {
    margin-top: 0;
    margin-bottom: 0;
}

/* Ops 栈：指挥台同款区块间距（概览 / 工作台 / 故障 / 能耗等） */
.content-wrapper.ops-stack,
.dash-layout,
.wl-layout,
.content-wrapper.fault-layout,
#panelUnified.ops-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ops-stack-gap, 16px);
}

/* ops-stack 直属块：去掉遗留 margin，避免与 gap 叠双距 */
.ops-stack > .chart-card,
.ops-stack > .data-table-container,
.ops-stack > .kb-hero,
.ops-stack > .kb-summary-row,
.ops-stack > .kb-filters,
.ops-stack > .kb-results,
.ops-stack > .room-cards,
.ops-stack > .em-chart-mb,
.ops-stack > .unified-page-toolbar,
.ops-stack > .monitor-map-panel,
.ops-stack > .monitor-list-panel,
.ops-stack > .dc-load-error {
    margin-bottom: 0;
    margin-top: 0;
}

.ops-zone-label,
.wl-zone__label,
.dash-zone-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--ops-zone-gap, 8px);
    font-size: var(--ops-zone-label-fs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ops-zone-label [data-lucide],
.dash-zone-label [data-lucide] {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

/* ============================================
   ROOM GRID — 五机房卡片统一断点
   ============================================ */
.room-grid,
.fault-room-grid,
.energy-room-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: var(--ops-stack-gap, 16px);
}
/* ops-stack 内由 flex gap 承担间距，去掉双重 margin */
.ops-stack .room-grid,
.ops-stack .fault-room-grid,
.ops-stack .energy-room-grid,
.dash-layout .room-grid,
.wl-layout .room-grid,
.fault-layout .fault-room-grid {
    margin-bottom: 0;
}
@media (max-width: 1200px) {
    .room-grid,
    .fault-room-grid,
    .energy-room-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .room-grid,
    .fault-room-grid,
    .energy-room-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .room-grid,
    .fault-room-grid,
    .energy-room-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right}
.mt-xs{margin-top:var(--space-xs)} .mt-sm{margin-top:var(--space-sm)} .mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}
.mb-xs{margin-bottom:var(--space-xs)} .mb-sm{margin-bottom:var(--space-sm)} .mb-md{margin-bottom:var(--space-md)}
.mb-lg{margin-bottom:var(--space-lg)} .mb-xl{margin-bottom:var(--space-xl)}
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center}
.justify-center{justify-content:center} .justify-between{justify-content:space-between}
.gap-sm{gap:var(--space-sm)} .gap-md{gap:var(--space-md)} .gap-lg{gap:var(--space-lg)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px) { .user-details-small { display:none; } }

@media (max-width:768px) {
    h1{font-size:18px} h2{font-size:15px} h3{font-size:14px}
    .card { padding:var(--space-md); }
    .modal { padding:var(--space-lg); }
    .current-time { display:none; }
    .logout-btn-header span { display:none; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
:focus-visible { outline:2px solid var(--blue-400); outline-offset:2px; }

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-2) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-row {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}
.skeleton-cell { height: 14px; border-radius: 4px; }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 24px; gap: 10px;
}
.empty-state .empty-icon { color: var(--text-muted); opacity: 0.55; }
.empty-state .empty-text { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.empty-state .empty-hint { font-size: 12px; color: var(--text-muted); opacity: 0.75; }

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted); opacity: 0.75;
    margin-bottom: 6px;
}
.breadcrumb-sep { color: var(--text-muted); opacity: 0.45; }
.breadcrumb-current { color: var(--text-muted); }

/* ============================================
   STATUS BADGE WITH ICON
   ============================================ */
.badge [data-lucide] { width: 11px; height: 11px; flex-shrink: 0; }

/* ============================================
   TABLE ROW HOVER - 整行可点击提示
   ============================================ */
tbody tr[onclick] { cursor: pointer; }
tbody tr[onclick]:hover { background: rgba(255,255,255,0.04) !important; }

/* ============================================
   BORDER GLOW EFFECT
   ============================================ */
.glow-card{position:relative;isolation:isolate}

.glow-card::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:radial-gradient(
    ellipse var(--glow-size,120px) var(--glow-size,120px) at var(--glow-x,50%) var(--glow-y,50%),
    rgba(96,165,250,0.55) 0%,
    rgba(34,211,238,0.25) 40%,
    transparent 70%
  );
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
  z-index:0;
  filter:blur(4px);
}

.glow-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(
    from var(--glow-angle,0deg) at var(--glow-x,50%) var(--glow-y,50%),
    transparent 0deg,
    rgba(96,165,250,0) calc(var(--glow-cone,0deg) * -0.8),
    rgba(147,197,253,1) 0deg,
    rgba(34,211,238,0.9) calc(var(--glow-cone,0deg) * 0.4),
    rgba(96,165,250,1) var(--glow-cone,0deg),
    transparent calc(var(--glow-cone,0deg) + 2deg)
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
  z-index:1;
}
.glow-card.glow-active::before{opacity:1}
.glow-card.glow-active::after{opacity:1}
.glow-card > *{position:relative;z-index:2}

/* ============================================
   ROOM GLASS CARDS — 机房分色毛玻璃
   由 room-constants.js jlbApplyRoomGlass() 注入 CSS 变量
   ============================================ */
.jlb-room-glass {
    background: var(--room-glass-bg, linear-gradient(148deg, rgba(59,130,246,0.14) 0%, rgba(28,35,51,0.68) 100%)) !important;
    backdrop-filter: var(--room-glass-blur);
    -webkit-backdrop-filter: var(--room-glass-blur);
    border: 1px solid var(--room-glass-border, rgba(255,255,255,0.12)) !important;
    box-shadow: var(--shadow-medium), inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 28px var(--room-glass-glow, transparent) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.jlb-room-glass:hover {
    background: var(--room-glass-bg-hover, var(--room-glass-bg)) !important;
    border-color: var(--room-glass-border-hover, var(--room-glass-border)) !important;
    box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,0.09), 0 12px 36px var(--room-glass-glow, transparent) !important;
}
.jlb-room-glass::before,
.jlb-room-glass .room-card-accent,
.jlb-room-glass .fault-room-card__accent,
.jlb-room-glass .room-banner-bar {
    box-shadow: 0 0 14px var(--room-accent-glow, transparent);
}
.jlb-room-glass .room-card-name,
.jlb-room-glass .room-card-title-fault,
.jlb-room-glass .room-name,
.jlb-room-glass .em-room-name,
.jlb-room-glass .fault-room-card__title,
.jlb-room-glass .floor-card-title,
.jlb-room-glass .dash-room-name {
    color: var(--room-title-color, var(--text-bright));
}
.jlb-room-glass .room-icon,
.jlb-room-glass .floor-icon.active {
    background: var(--room-icon-bg, rgba(59,130,246,0.14));
    color: var(--room-accent, var(--blue-400));
}
.jlb-room-glass .env-room-activity {
    color: var(--room-accent, var(--blue-400));
}

@media (color-gamut: p3) {
    .jlb-room-glass {
        background: var(--room-glass-bg, linear-gradient(148deg, rgba(59,130,246,0.12) 0%, rgba(28,35,51,0.62) 100%)) !important;
        border-color: var(--room-glass-border, rgba(255,255,255,0.1)) !important;
        box-shadow: var(--shadow-medium), inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 28px var(--room-glass-glow, transparent) !important;
    }
}

/* ============================================
   GLASS PANEL — 通用毛玻璃卡片 L1/L2
   ============================================ */
.jlb-glass-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
        var(--glass-panel-bg);
    backdrop-filter: var(--glass-panel-blur);
    -webkit-backdrop-filter: var(--glass-panel-blur);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-soft);
    box-shadow: var(--glass-panel-shadow), var(--glass-panel-highlight);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.jlb-glass-panel:hover {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
        var(--glass-panel-bg-hover);
    border-color: var(--glass-panel-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-strong), var(--glass-panel-highlight);
}
.jlb-glass-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--radius-soft) 0 0 var(--radius-soft);
    background: var(--glass-panel-accent, transparent);
    opacity: var(--glass-panel-accent-opacity, 0);
    pointer-events: none;
}
.jlb-glass-panel--primary {
    --glass-panel-accent: var(--blue-500);
    --glass-panel-accent-opacity: 1;
    background:
        linear-gradient(155deg, var(--glass-panel-tint-primary) 0%, rgba(255, 255, 255, 0) 38%),
        var(--glass-panel-bg);
}
.jlb-glass-panel--warn {
    --glass-panel-accent: var(--color-warning);
    --glass-panel-accent-opacity: 1;
    background:
        linear-gradient(155deg, var(--glass-panel-tint-warn) 0%, rgba(255, 255, 255, 0) 38%),
        var(--glass-panel-bg);
}
.jlb-glass-panel--danger {
    --glass-panel-accent: var(--color-error);
    --glass-panel-accent-opacity: 1;
    background:
        linear-gradient(155deg, var(--glass-panel-tint-danger) 0%, rgba(255, 255, 255, 0) 38%),
        var(--glass-panel-bg);
}
.jlb-glass-panel--success {
    --glass-panel-accent: var(--color-success);
    --glass-panel-accent-opacity: 1;
    background:
        linear-gradient(155deg, var(--glass-panel-tint-success) 0%, rgba(255, 255, 255, 0) 38%),
        var(--glass-panel-bg);
}
.jlb-glass-panel__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}
.jlb-glass-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-bright);
    font-family: var(--font-heading);
}
.jlb-glass-panel__meta {
    font-size: 11px;
    color: var(--text-muted);
}
.jlb-glass-panel__body {
    padding: 14px 16px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .jlb-glass-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bg-card);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jlb-glass-panel:hover {
        transform: none;
    }
}

/* ============================================
   UX FIXES - ui-ux-pro-max recommendations
   ============================================ */

/* 1. 所有表格容器强制横向滚动（移动端） */
.table-container, .data-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 2. 表单错误状态 */
.form-control.is-error {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}
.form-error-msg {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: #FCA5A5;
    animation: fadeIn 0.2s ease;
}
.form-error-msg::before {
    content: '⚠';
    font-size: 10px;
}

/* 3. 空状态改进 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
}
.empty-state .empty-icon { color: var(--text-muted); opacity: 0.5; }
.empty-state .empty-text { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.empty-state .empty-hint { font-size: 12px; color: var(--text-muted); opacity: 0.75; }
.empty-state .empty-action { margin-top: 8px; }

/* 4. 加载骨架屏增强 */
.skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}
.skeleton-cell { height: 14px; border-radius: 4px; }

/* 5. 搜索建议下拉 */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-strong);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.search-suggestion-item {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-suggestion-item:hover { background: var(--bg-card-2); color: var(--text-primary); }
.search-suggestion-item [data-lucide] { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }

/* 6. 操作反馈 Toast（z-index 低于 globalPlatformAlertDock 10050，有告警时上移避免遮挡） */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(400px, calc(100vw - 32px));
}

body:has(#globalPlatformAlertDock .global-alert-card) .toast-container {
    bottom: max(120px, calc(20px + env(safe-area-inset-bottom, 0px)));
}

.toast-item {
    pointer-events: auto;
    min-width: 200px;
    max-width: min(400px, 92vw);
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-bright);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    animation: toastSlideIn 0.2s ease;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-item-info {
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.12)), var(--glass-bg);
}
.toast-item-success {
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.12)), var(--glass-bg);
}
.toast-item-warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.12)), var(--glass-bg);
}
.toast-item-error {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.12)), var(--glass-bg);
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 7. 按钮加载状态 */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.loading::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* 8. 无搜索结果提示 */
.no-results {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}
.no-results .no-results-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; }
.no-results .no-results-text { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.no-results .no-results-hint { font-size: 12px; color: var(--text-muted); opacity: 0.75; }

/* 9. aria-live 错误区域 */
[role="alert"] { animation: fadeIn 0.2s ease; }

/* ============================================
   CROSS-PLATFORM DISPLAY — sRGB / Windows 立体增强
   Mac P3 广色域由上方 @media (color-gamut: p3) 保持原样
   ============================================ */
@media not all and (color-gamut: p3) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }

    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] .card-title,
    [data-theme="dark"] .page-title,
    [data-theme="dark"] .stat-value {
        text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    }

    .btn-primary {
        box-shadow: 0 2px 18px rgba(59,130,246,0.42), var(--shadow-inset);
    }

    .btn-secondary {
        background: linear-gradient(180deg, #364559 0%, #2E3D52 100%);
        border-color: var(--border-hover);
    }

    .form-control:focus {
        background: #243247;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.16), inset 0 1px 3px rgba(0,0,0,0.28);
    }

    .modal {
        background: rgba(24,32,48,0.97);
        box-shadow: 0 24px 64px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .jlb-room-glass {
        background: var(--room-glass-bg, linear-gradient(148deg, rgba(59,130,246,0.16) 0%, rgba(34,42,58,0.78) 100%)) !important;
        border-color: var(--room-glass-border, rgba(255,255,255,0.14)) !important;
        box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 28px var(--room-glass-glow, transparent) !important;
    }

    .toast-item {
        background: rgba(24,32,48,0.96);
        box-shadow: var(--shadow-xl);
    }
}

html.display-srgb body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}
html.display-srgb [data-theme="dark"] h1,
html.display-srgb [data-theme="dark"] h2,
html.display-srgb [data-theme="dark"] h3,
html.display-srgb [data-theme="dark"] .card-title,
html.display-srgb [data-theme="dark"] .page-title,
html.display-srgb [data-theme="dark"] .stat-value {
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}