/* ========================================
   通用设备管理平台
   深海蓝工业风格 · 务实商务数字化管理平台
   色彩体系：深蓝基底 + 橙色数据强调 + 绿色状态
   ======================================== */

/* ---- Reset & Base ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ---- 深蓝基底色系 ---- */
    --bg-base: #0a1929;
    --bg-dark: #071523;
    --bg-gradient: linear-gradient(160deg, #0a1929 0%, #0d2540 40%, #0a1f35 100%);
    --bg-card: #0f2847;
    --bg-card-soft: #13304f;
    --bg-sidebar: linear-gradient(180deg, #071523 0%, #0a1929 50%, #081827 100%);
    --bg-topbar: rgba(10, 25, 41, 0.85);

    /* ---- 橙色主强调色 ---- */
    --c-orange: #ff8c00;
    --c-orange-light: #ffa940;
    --c-orange-dark: #e67700;

    /* ---- 绿色状态色 ---- */
    --c-green: #00b96b;
    --c-green-light: #1ec97e;
    --c-green-dark: #009456;

    /* ---- 辅助功能色 ---- */
    --c-blue: #4a90d9;
    --c-blue-light: #6ab0e9;
    --c-cyan: #13c2c2;
    --c-yellow: #faad14;
    --c-red: #ff4d4f;
    --c-red-light: #ff7875;
    --c-purple: #7b61ff;
    --c-gold: #d4a017;

    /* ---- 浅灰白文字色 ---- */
    --text-primary: #e0e6ed;
    --text-secondary: #9aafc4;
    --text-muted: #7a92a8;
    --text-light: #5a7088;
    --text-on-dark: #e0e6ed;
    --text-on-dark-muted: #9aafc4;

    /* ---- AI诊断辅助强调色 ---- */
    --accent-cyan: #36cfc9;
    --accent-purple: #9254de;
    --accent-orange: #ffa940;
    --accent-green: #52c41a;

    /* ---- 边框 ---- */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 255, 255, 0.10);
    --border-light: rgba(255, 255, 255, 0.04);
    --border-accent: rgba(255, 140, 0, 0.30);

    /* ---- 阴影 ---- */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.40);

    /* ---- 圆角 ---- */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-xs: 4px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---- 布局 ---- */
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --transition: all 0.2s ease;
}

body {
    font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transition: var(--transition);
    border-right: 1px solid var(--border-color);
}

.sidebar-logo {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sidebar-logo .logo-img {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.sidebar-logo .logo-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.sidebar-logo .logo-text span {
    color: var(--c-orange);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); }

.nav-item {
    display: flex;
    align-items: center;
    padding: 11px 22px;
    gap: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    border-left: 3px solid transparent;
    white-space: nowrap;
    position: relative;
    font-size: 13px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.nav-item.active {
    background: rgba(255, 140, 0, 0.08);
    color: var(--c-orange);
    border-left-color: var(--c-orange);
    font-weight: 500;
}

.nav-item .nav-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.nav-item .nav-label { font-size: 13px; }

.nav-item .nav-badge {
    margin-left: auto;
    background: var(--c-red);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-weight: 600;
}

.sidebar-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-footer .conn-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 6px rgba(0, 185, 107, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========================================
   MAIN LAYOUT
   ======================================== */
.main-wrapper {
    margin-left: var(--sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Topbar ---- */
.topbar {
    height: var(--topbar-height);
    background: var(--bg-topbar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    z-index: 50;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.breadcrumb {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
}

.topbar-info .icon { font-size: 13px; }

.topbar-alert {
    position: relative;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    transition: var(--transition);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
}

.topbar-alert:hover {
    color: var(--c-orange);
    background: rgba(255, 140, 0, 0.08);
}

.topbar-alert .alert-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--c-red);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 15px;
    text-align: center;
    font-weight: 600;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.topbar-user:hover { background: rgba(255, 255, 255, 0.03); }

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.user-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.topbar-user .user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.topbar-user .user-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* ---- Content Area ---- */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.card:hover {
    border-color: var(--border-medium);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title .title-icon {
    color: var(--c-orange);
    font-size: 16px;
}

.card-body { padding: 18px; }
.card-actions { display: flex; gap: 8px; }

/* ========================================
   KPI CARDS
   ======================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 3px 0 0 3px;
}

.kpi-card.c-cyan::before { background: var(--c-blue); }
.kpi-card.c-green::before { background: var(--c-green); }
.kpi-card.c-orange::before { background: var(--c-orange); }
.kpi-card.c-red::before { background: var(--c-red); }
.kpi-card.c-purple::before { background: var(--c-purple); }
.kpi-card.c-blue::before { background: var(--c-blue); }
.kpi-card.c-gold::before { background: var(--c-gold); }

.kpi-card:hover {
    border-color: var(--border-medium);
    background: var(--bg-card-soft);
}

.kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.kpi-value .unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

.kpi-trend {
    margin-top: 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.kpi-trend.up { color: var(--c-green); }
.kpi-trend.down { color: var(--c-red); }

.kpi-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 26px;
    opacity: 0.08;
}

/* ========================================
   GRID LAYOUTS
   ======================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }

/* ========================================
   TABLES
   ======================================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-medium);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: var(--transition);
}

.data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.data-table tbody tr:hover td {
    background: rgba(255, 140, 0, 0.04);
}

.data-table .text-muted { color: var(--text-muted); }
.data-table .text-cyan { color: var(--c-blue); }

/* ========================================
   STATUS BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success { background: rgba(0, 185, 107, 0.12); color: var(--c-green); border: 1px solid rgba(0, 185, 107, 0.25); }
.badge-warning { background: rgba(250, 173, 20, 0.12); color: var(--c-yellow); border: 1px solid rgba(250, 173, 20, 0.25); }
.badge-danger { background: rgba(255, 77, 79, 0.12); color: var(--c-red); border: 1px solid rgba(255, 77, 79, 0.25); }
.badge-info { background: rgba(74, 144, 217, 0.12); color: var(--c-blue); border: 1px solid rgba(74, 144, 217, 0.25); }
.badge-muted { background: rgba(90, 112, 136, 0.12); color: var(--text-muted); border: 1px solid rgba(90, 112, 136, 0.25); }

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.badge-dot.green { background: var(--c-green); box-shadow: 0 0 6px rgba(0, 185, 107, 0.6); }
.badge-dot.orange { background: var(--c-orange); box-shadow: 0 0 6px rgba(255, 140, 0, 0.5); }
.badge-dot.red { background: var(--c-red); box-shadow: 0 0 6px rgba(255, 77, 79, 0.5); }
.badge-dot.gray { background: var(--text-muted); }

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border: 1px solid var(--border-medium);
    background: var(--bg-card-soft);
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-weight: 500;
}

.btn:hover {
    border-color: var(--c-orange);
    color: var(--c-orange);
    background: rgba(255, 140, 0, 0.06);
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
    color: #fff;
}

.btn-sm { padding: 4px 12px; font-size: 11px; }

.btn-danger {
    color: var(--c-red);
    border-color: rgba(255, 77, 79, 0.25);
}

.btn-danger:hover {
    background: rgba(255, 77, 79, 0.08);
    color: var(--c-red);
    border-color: var(--c-red);
}

.btn-success {
    color: var(--c-green-light);
    border-color: rgba(0, 185, 107, 0.25);
}

.btn-success:hover {
    background: rgba(0, 185, 107, 0.1);
    color: var(--c-green-light);
    border-color: var(--c-green);
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.progress-fill.green { background: var(--c-green); }
.progress-fill.orange { background: var(--c-orange); }
.progress-fill.red { background: var(--c-red); }
.progress-fill.cyan { background: var(--c-blue); }
.progress-fill.purple { background: var(--c-purple); }
.progress-fill.gold { background: var(--c-gold); }

/* ---- Chart Container ---- */
.chart-container { width: 100%; height: 280px; }
.chart-container-sm { width: 100%; height: 200px; }
.chart-container-md { width: 100%; height: 300px; }
.chart-container-lg { width: 100%; height: 360px; }

/* ========================================
   能耗统计（印机小智AI模块）
   ======================================== */
.energy-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.energy-toolbar .form-select { min-width: 220px; }
.energy-tab-btn {
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-medium);
    background: var(--bg-card-soft); color: var(--text-primary); cursor: pointer;
    font-size: 13px; transition: all .15s ease;
}
.energy-tab-btn:hover { border-color: var(--c-orange); }
.energy-tab-btn.active {
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff; border-color: transparent; font-weight: 600;
}

.energy-card-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.energy-stat-card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 12px; padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.energy-stat-card:hover { transform: translateY(-2px); transition: transform .15s; }
.energy-stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.energy-stat-value {
    font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1;
}
.energy-stat-unit { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.energy-stat-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

.energy-chart-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 900px) {
    .energy-chart-grid { grid-template-columns: 1fr; }
}

.energy-peak-tag   { background: rgba(255,77,79,0.15);  color: #ff4d4f; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.energy-flat-tag   { background: rgba(250,173,20,0.15); color: #faad14; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.energy-valley-tag { background: rgba(19,194,194,0.15); color: #13c2c2; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.energy-gas-tag    { background: rgba(122,191,255,0.15); color: #7abfff; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }

/* ========================================
   DEVICE CARDS
   ======================================== */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.device-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.device-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-orange);
    opacity: 0;
    transition: var(--transition);
}

.device-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-card-soft);
}

.device-card:hover::before { opacity: 1; }

.device-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.device-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.device-code {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    font-family: 'Consolas', 'SF Mono', monospace;
}

.device-status-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.device-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.device-param {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    border: 1px solid var(--border-color);
}

.device-param-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 500;
}

.device-param-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-orange);
}

.device-param-value .unit {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}

.device-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

/* 设备卡片 - 水箱采集数据 */
.device-watertank {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(19, 194, 194, 0.04);
    border: 1px solid rgba(19, 194, 194, 0.15);
    border-radius: var(--radius);
}

.device-wt-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #13c2c2;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(19, 194, 194, 0.1);
}

.device-wt-header .wt-icon {
    font-size: 14px;
}

.device-wt-live-badge {
    margin-left: auto;
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(19, 194, 194, 0.15);
    color: #36cfc9;
    border: 1px solid rgba(19, 194, 194, 0.25);
    animation: wt-pulse 2s ease-in-out infinite;
    font-weight: 500;
    letter-spacing: 0.5px;
}

@keyframes wt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.device-wt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.device-wt-item {
    text-align: center;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
}

.device-wt-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.device-wt-value {
    font-size: 16px;
    font-weight: 700;
    font-family: 'DIN Alternate', 'Roboto Mono', monospace;
    line-height: 1.2;
}

.device-wt-value .unit {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-light);
    margin-left: 2px;
}

.device-wt-value.green { color: var(--c-green); }
.device-wt-value.orange { color: var(--c-orange); }
.device-wt-value.red { color: var(--c-red); }
.device-wt-value.cyan { color: var(--c-cyan); }

.device-wt-range {
    font-size: 9px;
    color: var(--text-light);
    margin-top: 3px;
    opacity: 0.7;
}

.device-param-range {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 4px;
    opacity: 0.7;
}

/* ========================================
   ENVIRONMENT CARDS
   ======================================== */
.env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.env-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.env-card:hover {
    border-color: var(--border-medium);
    background: var(--bg-card-soft);
}

.env-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.env-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.env-value {
    font-size: 24px;
    font-weight: 700;
}

.env-value.green { color: var(--c-green); }
.env-value.orange { color: var(--c-orange); }
.env-value.red { color: var(--c-red); }
.env-value.cyan { color: var(--c-blue); }
.env-value.gold { color: var(--c-gold); }

.env-value .unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.env-range {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

/* ---- 车间环境分区标签 ---- */
.section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 16px 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--c-orange);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- 水箱采集数据区块 ---- */
.wt-section-label {
    border-left-color: var(--c-cyan);
}
.wt-icon {
    font-size: 15px;
}
.wt-badge {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 185, 107, 0.12);
    color: var(--c-green-light);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wt-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-green);
    animation: wtPulse 1.5s infinite;
}
@keyframes wtPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.wt-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.wt-card {
    border-color: rgba(19, 194, 194, 0.10);
}
.wt-card:hover {
    border-color: rgba(19, 194, 194, 0.30);
}

/* ========================================
   ALERT LIST
   ======================================== */
.alert-list {
    max-height: 320px;
    overflow-y: auto;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.alert-item:last-child { border-bottom: none; }

.alert-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.alert-icon.danger { background: rgba(255, 77, 79, 0.10); color: var(--c-red); }
.alert-icon.warning { background: rgba(250, 173, 20, 0.10); color: var(--c-yellow); }
.alert-icon.info { background: rgba(74, 144, 217, 0.10); color: var(--c-blue); }

.alert-content { flex: 1; min-width: 0; }

.alert-title {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
    font-weight: 600;
}

.alert-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.alert-time {
    font-size: 10px;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Consolas', monospace;
}

/* ========================================
   MODAL
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.show { display: flex; }

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 20px;
    transition: var(--transition);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
}

.modal-close:hover {
    color: var(--c-red);
    background: rgba(255, 77, 79, 0.06);
}

.modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-soft);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.form-input,
.form-select {
    width: 100%;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition);
}

.form-input::placeholder { color: var(--text-light); }

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--c-orange);
    background: rgba(255, 140, 0, 0.04);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ========================================
   TABS
   ======================================== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}

.tab {
    padding: 9px 20px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    font-weight: 500;
    margin-bottom: -1px;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
    color: var(--c-orange);
    border-bottom-color: var(--c-orange);
    font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Gauge Mini ---- */
.gauge-mini {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: relative;
}

/* ========================================
   OEE SPECIFIC — 空心环形仪表盘
   ======================================== */
.oee-display {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-content: center;
    padding: 12px 0;
}

.oee-ring {
    position: relative;
    width: 160px;
    height: 160px;
}

.oee-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.oee-center-text .oee-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--c-orange);
}

.oee-center-text .oee-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.oee-breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.oee-factor {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oee-factor-label {
    font-size: 12px;
    color: var(--text-secondary);
    width: 70px;
    font-weight: 500;
}

.oee-factor-bar { flex: 1; width: 120px; }

.oee-factor-value {
    font-size: 14px;
    font-weight: 700;
    width: 50px;
    text-align: right;
    color: var(--text-primary);
}

/* ========================================
   TIMELINE
   ======================================== */
.timeline {
    position: relative;
    padding-left: 26px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-medium);
}

.timeline-item {
    position: relative;
    padding-bottom: 18px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    background: var(--bg-card);
    transition: var(--transition);
}

.timeline-item.active::before {
    border-color: var(--c-green);
    background: var(--c-green);
    box-shadow: 0 0 8px rgba(0, 185, 107, 0.5);
}

.timeline-item.warning::before {
    border-color: var(--c-yellow);
    background: var(--c-yellow);
}

.timeline-item.danger::before {
    border-color: var(--c-red);
    background: var(--c-red);
}

.timeline-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-family: 'Consolas', monospace;
}

.timeline-title {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 3px;
    font-weight: 600;
}

.timeline-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ========================================
   TOOLBAR
   ======================================== */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    padding: 0 12px;
    transition: var(--transition);
}

.search-box:focus-within {
    border-color: var(--c-orange);
    background: rgba(255, 140, 0, 0.04);
}

.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    padding: 7px 4px;
    font-size: 13px;
    width: 160px;
}

.search-box input::placeholder { color: var(--text-light); }

.search-box .search-icon {
    color: var(--text-muted);
    font-size: 14px;
}

/* ========================================
   PROTOCOL TAGS
   ======================================== */
.protocol-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Consolas', 'SF Mono', monospace;
}

.protocol-tag.modbus { background: rgba(74, 144, 217, 0.12); color: var(--c-blue); }
.protocol-tag.plc { background: rgba(123, 97, 255, 0.12); color: var(--c-purple); }
.protocol-tag.dlt { background: rgba(212, 160, 23, 0.12); color: var(--c-gold); }
.protocol-tag.opcua { background: rgba(0, 185, 107, 0.12); color: var(--c-green); }
.protocol-tag.mqtt { background: rgba(19, 194, 194, 0.12); color: var(--c-cyan); }

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.15;
}

/* ========================================
   PORTAL PAGE
   ======================================== */
.portal-body {
    margin: 0;
    min-height: 100vh;
    height: auto;
    background: linear-gradient(160deg, #071523 0%, #0a1929 40%, #0d2540 100%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 左上角橙色光晕 */
.portal-body::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(255, 140, 0, 0.07) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}

/* 右下角蓝绿色光晕 */
.portal-body::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 50%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(19, 194, 194, 0.05) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}

.portal-container {
    width: 100%;
    max-width: 1200px;
    padding: 20px 24px 16px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
    box-sizing: border-box;
}

/* ---- 入场动画 ---- */
@keyframes portalFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.portal-header { animation: portalFadeIn 0.5s ease-out both; }
.portal-hero { animation: portalFadeIn 0.5s ease-out 0.08s both; }
.portal-stats { animation: portalFadeIn 0.5s ease-out 0.16s both; }
.portal-features { animation: portalFadeIn 0.5s ease-out 0.24s both; }
.portal-steps { animation: portalFadeIn 0.5s ease-out 0.32s both; }
.portal-cards { animation: portalFadeIn 0.5s ease-out 0.40s both; }
.portal-footer { animation: portalFadeIn 0.5s ease-out 0.48s both; }

.portal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.portal-logo {
    height: 48px;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.portal-logo img {
    height: 48px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 14px rgba(14, 159, 208, 0.22));
}

.portal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.portal-title span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

.portal-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 6px;
}

.portal-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.portal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.portal-card.frontend::before {
    background: linear-gradient(90deg, var(--c-orange), var(--c-orange-light));
}

.portal-card.backend::before {
    background: linear-gradient(90deg, var(--c-blue), var(--c-blue-light));
}

.portal-card:hover::before {
    transform: scaleX(1);
}

.portal-card:hover {
    border-color: var(--border-medium);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.portal-card.frontend:hover {
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.12);
    border-color: rgba(255, 140, 0, 0.25);
}

.portal-card.backend:hover {
    box-shadow: 0 8px 28px rgba(74, 144, 217, 0.12);
    border-color: rgba(74, 144, 217, 0.25);
}

.portal-card-icon {
    font-size: 32px;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}
.portal-card:hover .portal-card-icon {
    transform: scale(1.1);
}

.portal-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.portal-card-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

.portal-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: 8px;
}

.portal-card-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-weight: 500;
}

.portal-card.frontend .portal-card-tag {
    background: rgba(255, 140, 0, 0.08);
    color: var(--c-orange-light);
    border-color: rgba(255, 140, 0, 0.15);
}

.portal-card.backend .portal-card-tag {
    background: rgba(74, 144, 217, 0.08);
    color: var(--c-blue-light);
    border-color: rgba(74, 144, 217, 0.15);
}

/* 卡片底部箭头 */
.portal-card-arrow {
    font-size: 18px;
    color: var(--text-light);
    transition: all 0.3s ease;
    margin-top: 2px;
}
.portal-card.frontend:hover .portal-card-arrow {
    color: var(--c-orange);
    transform: translateX(4px);
}
.portal-card.backend:hover .portal-card-arrow {
    color: var(--c-blue-light);
    transform: translateX(4px);
}

.portal-footer {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 12px;
    padding-bottom: 8px;
}

.portal-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.02) 50%, transparent 100%);
}

.portal-stat {
    text-align: center;
    flex: 1;
    position: relative;
}
.portal-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: var(--border-color);
}

.portal-stat-value {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.portal-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* ========================================
   ADMIN SIDEBAR (Blue accent differentiation)
   ======================================== */
.sidebar.admin {
    background: linear-gradient(180deg, #060f1a 0%, #0a1929 50%, #061220 100%);
}

.sidebar.admin .nav-item.active {
    background: rgba(74, 144, 217, 0.08);
    color: var(--c-blue);
    border-left-color: var(--c-blue);
}

.sidebar.admin .sidebar-logo .logo-text span {
    color: var(--c-blue);
}

.sidebar.admin .conn-dot {
    background: var(--c-blue);
    box-shadow: 0 0 6px rgba(74, 144, 217, 0.6);
}

/* ========================================
   SWITCH LINK
   ======================================== */
.switch-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    font-weight: 500;
}

.switch-link:hover {
    border-color: var(--c-orange);
    color: var(--c-orange);
    background: rgba(255, 140, 0, 0.06);
}

.switch-link.backend:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
    background: rgba(74, 144, 217, 0.06);
}

.switch-link.frontend:hover {
    border-color: var(--c-orange);
    color: var(--c-orange);
}

/* ========================================
   ROLE BADGE
   ======================================== */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 600;
}

.role-badge.admin { background: rgba(123, 97, 255, 0.12); color: var(--c-purple); }
.role-badge.manager { background: rgba(74, 144, 217, 0.12); color: var(--c-blue); }
.role-badge.operator { background: rgba(0, 185, 107, 0.12); color: var(--c-green); }
.role-badge.viewer { background: rgba(90, 112, 136, 0.12); color: var(--text-secondary); }

/* ========================================
   SWITCH TOGGLE
   ======================================== */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch-toggle input { opacity: 0; width: 0; height: 0; }

.switch-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-medium);
    border-radius: 22px;
    transition: var(--transition);
}

.switch-toggle .slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.switch-toggle input:checked + .slider {
    background: var(--c-orange);
}

.switch-toggle input:checked + .slider::before {
    transform: translateX(18px);
}

/* ========================================
   LOG ENTRY
   ======================================== */
.log-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
}

.log-entry:last-child { border-bottom: none; }

.log-time {
    color: var(--text-muted);
    white-space: nowrap;
    width: 140px;
    flex-shrink: 0;
    font-family: 'Consolas', monospace;
    font-size: 11px;
}

.log-user {
    color: var(--text-secondary);
    width: 80px;
    flex-shrink: 0;
    font-weight: 500;
}

.log-action {
    color: var(--text-primary);
    flex: 1;
}

.log-level {
    width: 50px;
    flex-shrink: 0;
}

/* ========================================
   SETTING ROW
   ======================================== */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.setting-row:last-child { border-bottom: none; }

.setting-info { flex: 1; }

.setting-label {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 3px;
    font-weight: 600;
}

.setting-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.setting-control {
    flex-shrink: 0;
    margin-left: 16px;
}

/* ========================================
   TEXT COLORS
   ======================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-cyan { color: var(--c-blue); }
.text-green { color: var(--c-green); }
.text-orange { color: var(--c-orange); }
.text-red { color: var(--c-red); }
.text-success { color: var(--c-green); }
.text-warning { color: var(--c-yellow); }
.text-danger { color: var(--c-red); }
.text-gold { color: var(--c-gold); }
.font-bold { font-weight: 600; }
.font-lg { font-size: 16px; }
.font-sm { font-size: 12px; }
.font-xs { font-size: 11px; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.w-full { width: 100%; }

/* Table Container */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* KPI Card muted modifier */
.kpi-card.c-muted .kpi-value { color: var(--text-secondary); }

/* Diagnosis Status Badge */
.diagnosis-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.diagnosis-status-badge.confirmed {
    background: rgba(0, 185, 107, 0.12);
    color: #00b96b;
}
.diagnosis-status-badge.pending {
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
}
.diagnosis-status-badge.rejected {
    background: rgba(255, 77, 79, 0.12);
    color: #ff4d4f;
}

/* ========================================
   STAT CARDS (admin maintenance)
   ======================================== */
.stat-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card-mini {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-orange);
    opacity: 0.5;
}

.stat-card-mini:hover {
    border-color: var(--border-medium);
    background: var(--bg-card-soft);
}

.stat-card-mini .stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stat-card-mini .stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ========================================
   DETAIL GRID
   ======================================== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin-bottom: 20px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
}

.detail-item .detail-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 72px;
    font-weight: 500;
}

.detail-item .detail-value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.detail-section { margin-bottom: 18px; }

.detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-orange);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.detail-section-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.sidebar.admin ~ * .detail-section-title,
.sidebar.admin .detail-section-title {
    color: var(--c-blue);
}

/* ========================================
   AI DIAGNOSIS
   ======================================== */
.ai-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.ai-tab {
    padding: 10px 22px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    margin-bottom: -1px;
}

.ai-tab:hover { color: var(--text-primary); }
.ai-tab.active {
    color: var(--c-orange);
    border-bottom-color: var(--c-orange);
    font-weight: 600;
}

/* Health Radar & Trend Charts */
.health-radar-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
}

.health-radar-chart {
    width: 100%;
    height: 320px;
}

/* Health Score Cards */
.health-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.health-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.health-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-card-soft);
}

.health-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.health-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.health-score-ring {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
}

.health-score-ring svg { transform: rotate(-90deg); }

.health-score-ring .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 6;
}

.health-score-ring .ring-fg {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.health-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
}

.health-score-value .unit {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

.health-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.health-item-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.health-item-chip .chip-val {
    font-weight: 700;
    margin-left: 3px;
}

/* Risk colors */
.risk-healthy { color: var(--c-green); }
.risk-normal { color: var(--c-blue); }
.risk-attention { color: var(--c-yellow); }
.risk-warning { color: var(--c-orange); }
.risk-critical { color: var(--c-red); }

.risk-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.risk-badge.healthy { background: rgba(0, 185, 107, 0.12); color: var(--c-green); }
.risk-badge.normal { background: rgba(74, 144, 217, 0.12); color: var(--c-blue); }
.risk-badge.attention { background: rgba(250, 173, 20, 0.12); color: var(--c-yellow); }
.risk-badge.warning { background: rgba(255, 140, 0, 0.12); color: var(--c-orange); }
.risk-badge.critical { background: rgba(255, 77, 79, 0.12); color: var(--c-red); }

/* AI Chat */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: 560px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.ai-chat-header {
    padding: 16px 22px;
    background: rgba(255, 140, 0, 0.04);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 14px;
}

.ai-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ai-chat-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-chat-status {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-chat-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 6px rgba(0, 185, 107, 0.6);
    display: inline-block;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-message.ai { align-self: flex-start; }
.ai-message.user { align-self: flex-end; flex-direction: row-reverse; }

.ai-message-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ai-message.ai .ai-message-avatar {
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
}

.ai-message.user .ai-message-avatar {
    background: rgba(255, 255, 255, 0.05);
}

.ai-message-bubble {
    padding: 13px 18px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-message.ai .ai-message-bubble {
    background: rgba(255, 140, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.12);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}

.ai-message.user .ai-message-bubble {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-top-right-radius: 4px;
}

.ai-thinking {
    display: flex;
    gap: 5px;
    padding: 8px 0;
}

.ai-thinking span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-orange);
    animation: thinking 1.4s infinite ease-in-out;
}

.ai-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* AI Quick Buttons */
.ai-quick-btn {
    padding: 8px 16px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.ai-quick-btn:hover {
    border-color: var(--c-orange);
    color: var(--c-orange);
    background: rgba(255, 140, 0, 0.06);
}

/* AI Chat Input */
.ai-chat-input-area {
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.ai-chat-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    transition: var(--transition);
}

.ai-chat-input:focus {
    outline: none;
    border-color: var(--c-orange);
    background: rgba(255, 140, 0, 0.04);
}

.ai-chat-send {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.ai-chat-send:hover {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
}

/* ---- select 下拉框适配深色主题 ---- */
.form-input option,
.form-select option {
    background: #0d2540;
    color: #e0e6ed;
    padding: 8px 12px;
}

/* ========================================
   AI 诊断 - 故障分析 & 预测预警 组件
   ======================================== */

/* 诊断输入区 */
.ai-diagnosis-input {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

/* 症状选择芯片 */
.ai-symptom-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-symptom-chip {
    padding: 7px 14px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.ai-symptom-chip:hover {
    border-color: var(--c-orange);
    color: var(--c-orange-light);
    background: rgba(255, 140, 0, 0.04);
}

.ai-symptom-chip.selected {
    background: rgba(255, 140, 0, 0.12);
    border-color: var(--c-orange);
    color: var(--c-orange-light);
    font-weight: 600;
}

/* 诊断结果卡片 */
.diagnosis-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    transition: var(--transition);
}

.diagnosis-result-card:hover {
    border-color: var(--border-medium);
}

.diagnosis-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.diagnosis-result-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.diagnosis-result-category {
    font-size: 12px;
    color: var(--text-muted);
}

/* 置信度条 */
.confidence-bar {
    display: inline-block;
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.confidence-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--c-orange), var(--c-orange-light));
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* 可能原因列表 */
.cause-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cause-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.cause-item.top {
    background: rgba(255, 140, 0, 0.04);
    border-color: rgba(255, 140, 0, 0.15);
}

.cause-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cause-item.top .cause-rank {
    background: var(--c-orange);
    color: #fff;
}

.cause-info {
    flex: 1;
    min-width: 0;
}

.cause-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cause-prob-bar {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.cause-prob-fill {
    display: block;
    height: 100%;
    background: var(--c-orange);
    border-radius: 2px;
}

.cause-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.6;
}

/* 建议措施列表 */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.action-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.10);
    color: var(--c-orange-light);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* 预测预警卡片 */
.prediction-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--c-blue);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: var(--transition);
}

.prediction-card.high { border-left-color: var(--c-red); }
.prediction-card.medium { border-left-color: var(--c-orange); }
.prediction-card.low { border-left-color: var(--c-blue); }

.prediction-card:hover {
    border-color: var(--border-medium);
}

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.prediction-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.prediction-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

.prediction-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.prediction-meta strong {
    color: var(--text-primary);
}

.prediction-recommendation {
    font-size: 13px;
    color: var(--text-secondary);
    background: rgba(255, 140, 0, 0.04);
    border: 1px solid rgba(255, 140, 0, 0.08);
    border-radius: var(--radius-xs);
    padding: 10px 14px;
    line-height: 1.6;
}

/* 紧急程度徽章 */
.urgency-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-weight: 600;
}

.urgency-badge.high {
    background: rgba(255, 77, 79, 0.12);
    color: var(--c-red-light);
}

.urgency-badge.medium {
    background: rgba(255, 140, 0, 0.12);
    color: var(--c-orange-light);
}

.urgency-badge.low {
    background: rgba(74, 144, 217, 0.12);
    color: var(--c-blue-light);
}

/* 统计卡片行 */
.stat-card-row .card {
    text-align: center;
}

/* ---- 快捷问题区域 ---- */
.ai-quick-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 22px 14px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1400px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stat-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .portal-cards { grid-template-columns: 1fr; }
    .portal-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 200px; }
    .portal-stats { gap: 20px; flex-wrap: wrap; }
    .portal-stat-value { font-size: 18px; }
    .portal-features { grid-template-columns: 1fr; }
    .portal-steps { flex-direction: column; gap: 12px; }
    .portal-step { flex: none; }
    .portal-step:not(:last-child)::after { display: none; }
    .portal-cards { grid-template-columns: 1fr; }
    .portal-title { font-size: 16px; }
    .portal-title span { display: block; margin-left: 0; }
    .portal-hero-title { font-size: 18px; }
}

/* ========================================
   SaaS 平台样式
   ======================================== */

/* ---- 工厂标识徽章 ---- */
.factory-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 140, 0, 0.08);
    border: 1px solid var(--border-accent);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    width: fit-content;
}
.factory-badge-icon { font-size: 14px; }
.factory-badge-plan {
    background: var(--c-orange);
    color: #fff;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

/* ---- 退出登录按钮 ---- */
.switch-link.logout {
    color: var(--c-red-light) !important;
    border-color: rgba(255, 77, 79, 0.3) !important;
}
.switch-link.logout:hover {
    background: rgba(255, 77, 79, 0.1) !important;
}

/* ========================================
   认证页面（登录 / 注册）
   ======================================== */
.auth-body {
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.auth-body::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-body::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 185, 107, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-container {
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 1;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}
.auth-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}
.auth-logo-title {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.auth-logo-subtitle {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
}

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    background: var(--bg-dark);
    border-radius: var(--radius);
    padding: 4px;
}
.auth-tab {
    flex: 1;
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.25s;
}
.auth-tab.active {
    background: var(--c-orange);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}
.auth-tab:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field {
    margin-bottom: 20px;
}
.auth-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}
.auth-label .req { color: var(--c-red-light); margin-left: 2px; }

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.25s;
}
.auth-input:focus {
    outline: none;
    border-color: var(--c-orange);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.12);
}
.auth-input::placeholder { color: var(--text-light); }
.auth-input option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.auth-row {
    display: flex;
    gap: 12px;
}
.auth-row .auth-field { flex: 1; }

.auth-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 1px;
}
.auth-btn:hover {
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.35);
    transform: translateY(-1px);
}
.auth-btn:active { transform: translateY(0); }

.auth-error {
    background: rgba(255, 77, 79, 0.1);
    border: 1px solid rgba(255, 77, 79, 0.3);
    color: var(--c-red-light);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
    display: none;
}
.auth-error.show { display: block; }

.auth-success {
    background: rgba(0, 185, 107, 0.1);
    border: 1px solid rgba(0, 185, 107, 0.3);
    color: var(--c-green-light);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
    display: none;
}
.auth-success.show { display: block; }

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
}
.auth-footer a {
    color: var(--c-orange-light);
    text-decoration: none;
    font-weight: 500;
}
.auth-footer a:hover { text-decoration: underline; }

.auth-hint {
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(74, 144, 217, 0.06);
    border: 1px solid rgba(74, 144, 217, 0.15);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}
.auth-hint strong { color: var(--c-blue-light); }

.auth-plan-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.auth-plan-option {
    padding: 14px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}
.auth-plan-option:hover { border-color: var(--border-accent); }
.auth-plan-option.selected {
    border-color: var(--c-orange);
    background: rgba(255, 140, 0, 0.06);
}
.auth-plan-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.auth-plan-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* ========================================
   平台首页（Portal）
   ======================================== */
.portal-hero {
    text-align: center;
    padding: 14px 20px 8px;
}
.portal-hero-tag {
    display: inline-block;
    padding: 3px 14px;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid var(--border-accent);
    border-radius: 16px;
    font-size: 11px;
    color: var(--c-orange-light);
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.portal-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
    line-height: 1.3;
}
.portal-hero-title span {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portal-hero-subtitle {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.portal-hero-slogan {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-orange);
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.15);
}

.portal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 14px 0 8px;
}
.portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 30px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    letter-spacing: 1px;
}
.portal-btn-primary {
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.25);
}
.portal-btn-primary:hover {
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.4);
    transform: translateY(-2px);
}
.portal-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}
.portal-btn-secondary:hover {
    border-color: var(--c-orange);
    background: rgba(255, 140, 0, 0.04);
    color: var(--c-orange-light);
}

.portal-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0;
}
.portal-feature {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    transition: all 0.25s;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.portal-feature::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.3), transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.portal-feature:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.portal-feature:hover::after {
    transform: scaleX(1);
}
.portal-feature-icon {
    font-size: 22px;
    margin-bottom: 6px;
    display: inline-block;
}
.portal-feature-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.portal-feature-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.portal-steps {
    display: flex;
    gap: 0;
    justify-content: center;
    margin: 14px 0;
}
.portal-step {
    flex: 0 0 200px;
    text-align: center;
    position: relative;
}
.portal-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 16px;
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, var(--c-orange), transparent);
}
.portal-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    border: 2px solid var(--c-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-orange);
    transition: all 0.25s;
}
.portal-step:hover .portal-step-num {
    background: var(--c-orange);
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 140, 0, 0.3);
}
.portal-step-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.portal-step-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---- 超级管理后台顶部导航 ---- */
.super-admin-body {
    background: var(--bg-base);
}
.super-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.super-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.super-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}
.super-stat-card.orange::before { background: var(--c-orange); }
.super-stat-card.green::before { background: var(--c-green); }
.super-stat-card.blue::before { background: var(--c-blue); }
.super-stat-card.purple::before { background: var(--c-purple); }
.super-stat-icon {
    font-size: 24px;
    margin-bottom: 12px;
}
.super-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}
.super-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ---- 工厂列表表格 ---- */
.factory-table {
    width: 100%;
    border-collapse: collapse;
}
.factory-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.factory-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.factory-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.factory-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.factory-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.factory-name-text {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.factory-name-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}
.status-badge.active {
    background: rgba(0, 185, 107, 0.12);
    color: var(--c-green-light);
}
.status-badge.pending {
    background: rgba(250, 173, 20, 0.12);
    color: var(--c-yellow);
}
.status-badge.suspended {
    background: rgba(255, 77, 79, 0.12);
    color: var(--c-red-light);
}
.status-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.status-badge.active .dot { background: var(--c-green); }
.status-badge.pending .dot { background: var(--c-yellow); }
.status-badge.suspended .dot { background: var(--c-red); }

.plan-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
}
.plan-tag.basic {
    background: rgba(122, 146, 168, 0.12);
    color: var(--text-secondary);
}
.plan-tag.premium {
    background: rgba(255, 140, 0, 0.12);
    color: var(--c-orange-light);
}
.plan-tag.enterprise {
    background: rgba(123, 97, 255, 0.12);
    color: #b396ff;
}

.factory-action-btn {
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    border: 1px solid var(--border-medium);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 6px;
}
.factory-action-btn:hover {
    border-color: var(--c-orange);
    color: var(--c-orange-light);
    background: rgba(255, 140, 0, 0.05);
}
.factory-action-btn.danger {
    border-color: rgba(255, 77, 79, 0.3);
    color: var(--c-red-light);
}
.factory-action-btn.danger:hover {
    background: rgba(255, 77, 79, 0.08);
}
.factory-action-btn.success {
    border-color: rgba(0, 185, 107, 0.3);
    color: var(--c-green-light);
}
.factory-action-btn.success:hover {
    background: rgba(0, 185, 107, 0.08);
}

/* ---- 工厂搜索栏 ---- */
.factory-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.factory-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
}
.factory-search:focus {
    outline: none;
    border-color: var(--c-orange);
}
.factory-filter {
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.factory-filter option { background: var(--bg-card); }

/* ---- 工厂详情弹窗 ---- */
.factory-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.factory-detail-item {
    padding: 16px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.factory-detail-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.factory-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.factory-detail-value.orange { color: var(--c-orange-light); }
.factory-detail-value.green { color: var(--c-green-light); }
.factory-detail-value.red { color: var(--c-red-light); }

/* ---- 设备新增/编辑表单 ---- */
.equip-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.equip-form-field {
    margin-bottom: 4px;
}
.equip-form-field.full { grid-column: 1 / -1; }
.equip-form-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.equip-form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 13px;
}
.equip-form-input:focus {
    outline: none;
    border-color: var(--c-orange);
}
.equip-form-input option { background: var(--bg-card); }

.equip-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}
.equip-form-btn {
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.25s;
}
.equip-form-btn.cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-medium);
}
.equip-form-btn.cancel:hover {
    color: var(--text-secondary);
    border-color: var(--text-light);
}
.equip-form-btn.save {
    background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dark));
    color: #fff;
}
.equip-form-btn.save:hover {
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}

/* ---- 超级管理后台 card-panel ---- */
.card-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}
.card-panel .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.card-panel .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
    .portal-steps { gap: 12px; }
    .super-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .factory-detail-grid { grid-template-columns: 1fr; }
    .equip-form-grid { grid-template-columns: 1fr; }
    .auth-plan-group { grid-template-columns: 1fr; }
}

/* 协议接入 - 协议 Tab 过滤 */
.proto-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.proto-tab { padding:6px 14px; border-radius:20px; font-size:13px; cursor:pointer;
    background:rgba(148,163,184,0.12); color:#94a3b8; border:1px solid transparent; transition:all .15s; }
.proto-tab:hover { background:rgba(148,163,184,0.22); }
.proto-tab.active { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border-color:rgba(59,130,246,0.5); }
.form-tip { background:rgba(59,130,246,0.08); border-left:3px solid #3b82f6; padding:8px 12px; border-radius:6px; margin:6px 0; }

/* ============================================================
   立体感增强 (Depth / Elevation) — Fluent 风格
   在原有深蓝工业风基础上加入 elevation 阴影体系 +
   悬浮抬升 + 顶部高光倒角，形成清晰空间层次，不增加视觉复杂度。
   仅新增/增强表现层，不改动任何既有结构与逻辑；如需回退直接删除本块即可。
   ============================================================ */

:root {
    /* 立体感 elevation 体系：环境光 + 主光 + 顶部高光倒角(inset) */
    --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
    --elev-2: 0 4px 10px rgba(0,0,0,.30), 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
    --elev-3: 0 10px 24px rgba(0,0,0,.36), 0 4px 12px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07);
    --elev-hover: 0 8px 20px rgba(0,0,0,.34), 0 4px 10px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
    --elev-overlay: 0 24px 64px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.30);
}

/* ---- 通用卡片：默认浮起，hover 抬升 ---- */
.card {
    box-shadow: var(--elev-1);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-hover);
}

/* ---- KPI 卡片：渐变釉面 + 强投影 + 抬升 ---- */
.kpi-card {
    background: linear-gradient(155deg, var(--bg-card-soft) 0%, var(--bg-card) 100%);
    box-shadow: var(--elev-2);
}
.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
}

/* ---- 设备卡片 ---- */
.device-card {
    box-shadow: var(--elev-1);
}
.device-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-hover);
}

/* ---- 环境卡片 ---- */
.env-card {
    background: linear-gradient(155deg, var(--bg-card-soft) 0%, var(--bg-card) 100%);
    box-shadow: var(--elev-1);
}
.env-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-hover);
}

/* ---- 统计小卡 ---- */
.stat-card-mini {
    box-shadow: var(--elev-1);
}
.stat-card-mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-hover);
}

/* ---- 超级后台统计卡 ---- */
.super-stat-card {
    background: linear-gradient(155deg, var(--bg-card-soft) 0%, var(--bg-card) 100%);
    box-shadow: var(--elev-2);
}
.super-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
}

/* ---- 诊断 / 健康 / 预测 / 面板类卡片 ---- */
.health-card,
.diagnosis-result-card,
.prediction-card,
.card-panel,
.ai-diagnosis-input {
    box-shadow: var(--elev-1);
}
.health-card:hover,
.diagnosis-result-card:hover,
.prediction-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-hover);
}

/* ---- 侧边栏：右侧深度投影，与主区拉开层次 ---- */
.sidebar {
    box-shadow: 3px 0 18px rgba(0,0,0,.35);
}

/* ---- 顶栏：底部投影，强化悬浮层次 ---- */
.topbar {
    box-shadow: 0 2px 14px rgba(0,0,0,.28);
}

/* ---- 模态框：更强立体浮层 ---- */
.modal {
    box-shadow: var(--elev-overlay);
}

/* ---- 按钮：默认轻投影，hover 浮起，active 按下 ---- */
.btn {
    box-shadow: 0 1px 3px rgba(0,0,0,.30);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.btn-primary {
    box-shadow: 0 4px 14px rgba(255,140,0,.28);
}
.btn-primary:hover {
    box-shadow: 0 8px 22px rgba(255,140,0,.40);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.30);
}

/* ---- 表单主要按钮（登录/保存/发送类）---- */
.auth-btn,
.portal-btn-primary,
.ai-chat-send,
.equip-form-btn.save {
    box-shadow: 0 4px 14px rgba(255,140,0,.28);
}
.auth-btn:active,
.portal-btn-primary:active,
.ai-chat-send:active,
.equip-form-btn.save:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.30);
}

/* ---- 卡片内小方块（device-param / 采集项）也加一点浮起 ---- */
.device-param,
.device-wt-item {
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: var(--transition);
}
.device-param:hover,
.device-wt-item:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    transform: translateY(-1px);
}

/* ==========================================================
   3D 驾驶舱 (Cockpit HUD) — 2026-08-20
   深蓝科技 HUD：透视网格底 + 发光面板 + 角标 + 扫描线
   仅新增，不改动原有样式；删除本块即可整体回退
   ========================================================== */
.cockpit {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 14px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0,163,255,.07), transparent 62%),
        linear-gradient(rgba(0,214,143,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,214,143,.032) 1px, transparent 1px),
        linear-gradient(160deg, rgba(10,22,40,.55), rgba(6,14,27,.7));
    background-size: 100% 100%, 34px 34px, 34px 34px, 100% 100%;
}

/* ---- 顶部 HUD 状态条 ---- */
.cockpit-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(13,27,46,.94), rgba(10,20,36,.97));
    border: 1px solid rgba(0,214,143,.18);
    box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
}
.cockpit-topbar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,214,143,.028) 3px);
    pointer-events: none;
}
.cockpit-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d7e6f5;
    font-weight: 600;
    letter-spacing: .5px;
    white-space: nowrap;
}
.cockpit-logo-badge {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #00d68f, #00a3ff);
    color: #04121f;
    font-size: 18px;
    box-shadow: 0 0 16px rgba(0,214,143,.45);
}
.cockpit-ver {
    font-size: 10px;
    color: #5c7490;
    border: 1px solid rgba(255,255,255,.08);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.cockpit-stats {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.cockpit-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 16px;
    border-left: 1px solid rgba(255,255,255,.07);
}
.cockpit-stat .cs-label {
    font-size: 10px;
    color: #7d95ad;
    letter-spacing: 1px;
}
.cockpit-stat .cs-value {
    font-size: 20px;
    font-weight: 700;
    color: #eaf4ff;
    line-height: 1.25;
    text-shadow: 0 0 12px rgba(0,214,143,.35);
}
.cockpit-stat .cs-value.warn {
    color: #ff5f5f;
    text-shadow: 0 0 12px rgba(255,93,93,.4);
}
.cockpit-sys {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #5c7490;
    letter-spacing: 1.5px;
    white-space: nowrap;
}
.sys-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d68f;
    box-shadow: 0 0 10px #00d68f;
    animation: sysPulse 2s infinite;
}
@keyframes sysPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- 主体三列 ---- */
.cockpit-body {
    display: grid;
    grid-template-columns: 300px 1fr 340px;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
.cockpit-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

/* ---- HUD 面板 ---- */
.hud-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(13,28,48,.93), rgba(9,19,34,.97));
    border: 1px solid rgba(0,214,143,.14);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}
.hud-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,214,143,.55), transparent);
}
.hud-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 20% 0%, rgba(0,163,255,.05), transparent 60%);
    pointer-events: none;
}
.hud-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #cfe0ee;
    margin-bottom: 10px;
    letter-spacing: .5px;
    z-index: 1;
}
.hud-title small {
    font-size: 9px;
    color: #5c7490;
    letter-spacing: 1.5px;
    margin-left: auto;
}
.hud-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, #00d68f, #00a3ff);
    box-shadow: 0 0 8px rgba(0,214,143,.6);
    transform: rotate(45deg);
}
.cockpit-chart {
    position: relative;
    flex: 1;
    min-height: 220px;
    z-index: 1;
}
.hero-chart {
    min-height: 380px;
}

/* ---- 图例 ---- */
.cockpit-legend {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: #8fa8c0;
    z-index: 1;
}
.lg-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: 0;
}

/* ---- 关键指标小卡 ---- */
.cockpit-kpis {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    z-index: 1;
}
.ck {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 8px 10px;
    transition: var(--transition);
}
.ck:hover {
    border-color: rgba(0,214,143,.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.ck-label { font-size: 10px; color: #7d95ad; }
.ck-value { font-size: 20px; font-weight: 700; color: #eaf4ff; }
.ck-value em { font-style: normal; font-size: 11px; color: #7d95ad; margin-left: 2px; }
.ck.k-green .ck-value { color: #00d68f; }
.ck.k-orange .ck-value { color: #ffa640; }
.ck.k-red .ck-value { color: #ff5f5f; }
.ck.k-cyan .ck-value { color: #00c2ff; }

/* ---- 告警列表 ---- */
.cockpit-alerts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    z-index: 1;
}
.cockpit-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    transition: var(--transition);
}
.cockpit-alert:hover {
    border-color: rgba(0,214,143,.3);
    background: rgba(0,214,143,.04);
}
.ca-icon { font-size: 16px; line-height: 1.3; }
.ca-body { flex: 1; min-width: 0; }
.ca-title { font-size: 12px; color: #d7e6f5; }
.ca-desc { font-size: 11px; color: #7d95ad; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-time { font-size: 10px; color: #5c7490; white-space: nowrap; }

/* ---- 响应式 ---- */
@media (max-width: 1360px) {
    .cockpit-body { grid-template-columns: 270px 1fr 300px; }
}
@media (max-width: 1160px) {
    .cockpit-body { grid-template-columns: 1fr; }
    .col-b .hero-chart { min-height: 320px; }
    .cockpit-stats { gap: 6px; }
    .cockpit-stat { padding: 2px 10px; }
}
@media (max-width: 900px) {
    .cockpit-topbar { flex-wrap: wrap; }
    .cockpit-stats { order: 3; width: 100%; justify-content: space-between; }
    .cockpit-sys { display: none; }
}

/* ===== 品牌 Logo 徽章化：透明底 + 浅色发光徽章（深色界面一体凸显） ===== */
.sidebar-logo .logo-img {
    background: linear-gradient(135deg, #ffffff 0%, #eef6fc 50%, #d8e9f7 100%);
    border-radius: 9px;
    padding: 5px 13px;
    height: 42px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.30),
        0 4px 12px rgba(0,0,0,.38),
        0 0 18px rgba(0,163,255,.30),
        inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sidebar-logo .logo-img:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.40),
        0 6px 16px rgba(0,0,0,.45),
        0 0 28px rgba(0,214,143,.42),
        inset 0 1px 0 rgba(255,255,255,.98);
}
.sidebar.admin .sidebar-logo .logo-img {
    height: 38px;
    padding: 4px 12px;
}
/* 驾驶舱 HUD 顶部徽章：放透明 logo 图 */
.cockpit-logo-badge {
    width: auto;
    height: 38px;
    padding: 4px 12px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ffffff 0%, #eef6fc 50%, #d8e9f7 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.30),
        0 2px 10px rgba(0,0,0,.35),
        0 0 18px rgba(0,163,255,.32);
}
.cockpit-logo-badge img {
    height: 30px;
    width: auto;
    display: block;
}

/* ===== 设备图纸管理弹窗（2026-08-21） ===== */
.btn-dw {
    background: #e8f4ff;
    color: #0a7bd1;
    border: 1px solid #bcdcff;
}
.btn-dw:hover {
    background: #d6ecff;
    border-color: #9ccaff;
}
.dw-badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 5px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #0a7bd1;
    color: #fff;
    font-weight: 600;
}
.dw-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.dw-list {
    border: 1px solid #eef2f7;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.dw-head, .dw-row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 210px 150px;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
}
.dw-head {
    background: #f5f8fb;
    font-size: 12px;
    color: #7d95ad;
    font-weight: 600;
    border-bottom: 1px solid #eef2f7;
    letter-spacing: .3px;
}
.dw-row {
    border-bottom: 1px solid #f0f3f7;
    font-size: 13px;
    transition: background .15s;
}
.dw-row:last-child { border-bottom: none; }
.dw-row:hover { background: #fafcfe; }
.dw-cat {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 6px;
    background: rgba(0,163,255,.1);
    color: #0a7bd1;
    border: 1px solid rgba(0,163,255,.2);
    white-space: nowrap;
}
.dw-name {
    color: #1f2d3d;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dw-meta {
    color: #90a4b8;
    font-size: 12px;
}
.dw-ops {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
@media (max-width: 680px) {
    .dw-head, .dw-row { grid-template-columns: 90px 1fr 130px; }
    .dw-head span:last-child, .dw-ops { display: none; }
}

/* ============================================================
   ✦ 整体视觉升级增强段（2026-08-21）
   在既有设计系统之上做"大气"化增强：纯追加覆盖，不影响功能
   ============================================================ */

/* ---------- 全局精致化 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(120, 150, 180, 0.22);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 140, 0, 0.45); }

::selection { background: rgba(255, 140, 0, 0.28); color: #fff; }

/* ---------- Portal 首屏大气化 ---------- */
/* 科技网格背景层 */
.portal-hero { position: relative; }
.portal-hero::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 460px;
    background-image:
        linear-gradient(rgba(74, 144, 217, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 217, 0.08) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 42%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 78% at 50% 42%, #000 0%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.portal-hero > * { position: relative; z-index: 1; }

/* 主标题：更大更厚重 + 流动渐变 */
.portal-hero-title {
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.portal-hero-title span {
    background: linear-gradient(120deg, #ffb84d 0%, var(--c-orange) 32%, #ff6a00 62%, #ffd08a 92%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroShimmer 7s ease-in-out infinite;
}
@keyframes heroShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 标签胶囊亮化 */
.portal-hero-tag {
    padding: 5px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    background: linear-gradient(120deg, rgba(255, 140, 0, 0.16), rgba(255, 140, 0, 0.05));
    border-color: rgba(255, 140, 0, 0.38);
    box-shadow: 0 0 22px rgba(255, 140, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.portal-hero-subtitle { font-size: 13px; letter-spacing: 2px; }
.portal-hero-slogan { text-shadow: 0 0 24px rgba(255, 140, 0, 0.28); }

/* 按钮更大气 */
.portal-btn { padding: 12px 34px; font-size: 14px; border-radius: 8px; }
.portal-btn-primary {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange) 55%, var(--c-orange-dark));
    background-size: 160% 160%;
    box-shadow: 0 6px 22px rgba(255, 140, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.portal-btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 10px 34px rgba(255, 140, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
.portal-btn-secondary { border-radius: 8px; }

/* 统计数字：更大 + 白银渐变 + 发光 */
.portal-stat-value {
    font-size: 36px;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #ffffff 25%, rgba(165, 195, 225, 0.85) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px rgba(0, 163, 255, 0.12);
}
.portal-stat {
    transition: transform 0.25s;
}
.portal-stat:hover { transform: translateY(-3px); }

/* 特性卡：图标发光 + 顶部内高光 */
.portal-feature {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.12);
}
.portal-feature-icon {
    display: inline-block;
    transition: transform 0.25s, filter 0.25s;
}
.portal-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.portal-feature:hover .portal-feature-icon {
    transform: scale(1.14);
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.45));
}

/* 步骤数字：渐变实心 + 发光 */
.portal-step-num {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange) 60%, var(--c-orange-dark));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 18px rgba(255, 140, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 入口卡：更强悬浮层次 */
.portal-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.15);
}
.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 响应式：小屏标题收缩 */
@media (max-width: 760px) {
    .portal-hero-title { font-size: 30px; }
    .portal-stat-value { font-size: 28px; }
    .portal-features { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 登录 / 注册页：玻璃拟态 ---------- */
.auth-card {
    background: linear-gradient(160deg, rgba(20, 42, 73, 0.78), rgba(11, 27, 49, 0.88));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.auth-logo img { height: 54px; filter: drop-shadow(0 0 16px rgba(255, 140, 0, 0.22)); }
.auth-logo-title { font-size: 26px; letter-spacing: 2px; }

.auth-tabs { background: rgba(6, 16, 30, 0.6); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); }
.auth-tab.active {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange) 55%, var(--c-orange-dark));
    box-shadow: 0 4px 14px rgba(255, 140, 0, 0.38);
}
.auth-input:focus {
    border-color: var(--c-orange);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.14), 0 4px 18px rgba(255, 140, 0, 0.08);
}
.auth-btn {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange) 50%, var(--c-orange-dark));
    background-size: 180% 180%;
    border-radius: 8px;
}
.auth-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 140, 0, 0.42);
}

/* ---------- 后台：卡片质感 / 表格 / 按钮 ---------- */
/* 内容区背景光晕（不影响布局） */
.content-area {
    background-image:
        radial-gradient(120% 60% at 50% 0%, rgba(0, 163, 255, 0.045), transparent 60%),
        radial-gradient(90% 45% at 100% 100%, rgba(255, 140, 0, 0.035), transparent 60%);
}

/* 卡片顶部高光 + 悬浮层次 */
.card, .kpi-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 10px rgba(0, 0, 0, 0.10);
}
.card:hover, .kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.24);
}

/* KPI 数字：发光强化 */
.kpi-value {
    text-shadow: 0 0 22px rgba(0, 163, 255, 0.14);
}
.kpi-card.c-orange .kpi-value { text-shadow: 0 0 22px rgba(255, 140, 0, 0.20); }
.kpi-card.c-green .kpi-value { text-shadow: 0 0 22px rgba(0, 185, 107, 0.18); }
.kpi-card.c-purple .kpi-value { text-shadow: 0 0 22px rgba(157, 111, 255, 0.18); }
.kpi-card.c-red .kpi-value { text-shadow: 0 0 22px rgba(255, 77, 79, 0.20); }

/* KPI 左条发光 */
.kpi-card.c-cyan::before { box-shadow: 0 0 10px rgba(0, 163, 255, 0.5); }
.kpi-card.c-green::before { box-shadow: 0 0 10px rgba(0, 185, 107, 0.5); }
.kpi-card.c-orange::before { box-shadow: 0 0 10px rgba(255, 140, 0, 0.5); }
.kpi-card.c-red::before { box-shadow: 0 0 10px rgba(255, 77, 79, 0.5); }
.kpi-card.c-purple::before { box-shadow: 0 0 10px rgba(157, 111, 255, 0.5); }
.kpi-card.c-blue::before { box-shadow: 0 0 10px rgba(0, 163, 255, 0.5); }
.kpi-card.c-gold::before { box-shadow: 0 0 10px rgba(250, 173, 20, 0.5); }

/* 表格行 hover：左侧橙色指示条 */
.data-table tbody tr:hover td {
    box-shadow: inset 3px 0 0 var(--c-orange);
    background: rgba(255, 140, 0, 0.06);
}

/* 徽章圆角统一（更现代） */
.badge { border-radius: 6px; padding: 3px 11px; }

/* 按钮：圆角 + hover 上浮 */
.btn { border-radius: 6px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange) 55%, var(--c-orange-dark));
    background-size: 160% 160%;
    box-shadow: 0 4px 14px rgba(255, 140, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.38);
}

/* 侧栏导航 hover：轻滑 + 左边条浮现 */
.nav-item:hover {
    transform: translateX(2px);
    border-left-color: rgba(255, 140, 0, 0.55);
}
.nav-item.active { border-left-color: var(--c-orange); }

/* 顶栏：底部层次强化 */
.topbar { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.03); }

/* ---------- 模态框：入场动画 + 渐变边框感 ---------- */
.modal-overlay {
    background: rgba(3, 10, 20, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal {
    border-color: rgba(255, 140, 0, 0.16);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.modal-overlay.show .modal { animation: modalIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* ---------- 驾驶舱 HUD：hover 强化 ---------- */
.hud-panel:hover { border-color: rgba(0, 214, 143, 0.32); }
.cockpit-chart { transition: opacity 0.3s; }

/* ---------- 图纸管理弹窗：统一深色主题 ---------- */
.dw-list {
    background: var(--bg-card-soft);
    border-color: var(--border-medium);
}
.dw-head {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-bottom-color: var(--border-medium);
}
.dw-row { border-bottom-color: var(--border-light); }
.dw-row:hover { background: rgba(255, 140, 0, 0.05); }
.dw-name { color: var(--text-primary); }
.dw-meta { color: var(--text-muted); }
.dw-cat {
    background: rgba(0, 163, 255, 0.12);
    color: #4db4ff;
    border-color: rgba(0, 163, 255, 0.28);
}

/* ---------- 页面切换动效微增强 ---------- */
.page { animation: fadeInUp 0.32s ease both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px) scale(0.998); }
    to { opacity: 1; transform: none; }
}

/* ============================================================
   🛡️ 设备预防性维修策略（2026-08-21）
   AI 诊断页 · 规则引擎输出：概览统计条 + 策略列表 + 详情弹窗
   ============================================================ */
.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- 概览统计条 ---------- */
.pm-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.pm-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.pm-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}
.pm-stat.high::before { background: var(--c-red); box-shadow: 0 0 8px rgba(255,77,79,0.55); }
.pm-stat.medium::before { background: var(--c-orange); box-shadow: 0 0 8px rgba(255,140,0,0.55); }
.pm-stat.low::before { background: var(--c-green); box-shadow: 0 0 8px rgba(0,185,107,0.5); }
.pm-stat.due::before { background: #4db4ff; box-shadow: 0 0 8px rgba(0,163,255,0.5); }
.pm-stat-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
.pm-stat-val {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}
.pm-stat.high .pm-stat-val { color: #ff6b6d; text-shadow: 0 0 12px rgba(255,77,79,0.35); }
.pm-stat.medium .pm-stat-val { color: #ffa540; text-shadow: 0 0 12px rgba(255,140,0,0.35); }
.pm-stat.low .pm-stat-val { color: #2fd48a; text-shadow: 0 0 12px rgba(0,185,107,0.35); }
.pm-stat.due .pm-stat-val { color: #4db4ff; text-shadow: 0 0 12px rgba(0,163,255,0.35); }
.pm-stat-label { font-size: 12px; color: var(--text-muted); }
.pm-summary-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-left: 2px;
}

/* ---------- 策略列表 ---------- */
.pm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pm-row {
    display: grid;
    grid-template-columns: 1.6fr 64px 110px 1.4fr 1fr 92px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.pm-row:hover {
    border-color: rgba(255, 140, 0, 0.3);
    background: rgba(255, 140, 0, 0.045);
    transform: translateY(-1px);
}
.pm-dev-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-dev-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pm-health {
    display: flex;
    justify-content: center;
}
.pm-health-ring {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.45);
    position: relative;
    overflow: hidden;
}
.pm-health-ring.high { background: conic-gradient(var(--c-red) 0deg, rgba(255,255,255,0.08) 0deg); }
.pm-health-ring.medium { background: conic-gradient(var(--c-orange) 0deg, rgba(255,255,255,0.08) 0deg); }
.pm-health-ring.low { background: conic-gradient(var(--c-green) 0deg, rgba(255,255,255,0.08) 0deg); }
.pm-risk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.pm-score { font-size: 11px; color: var(--text-muted); }
.pm-triggers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
}
.pm-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 20px;
    color: #ffb36b;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.22);
    white-space: nowrap;
}
.pm-chip.ok { color: #2fd48a; background: rgba(0,185,107,0.1); border-color: rgba(0,185,107,0.22); }
.pm-next {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.pm-nm { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pm-nm.soon { color: #ffa540; }
.pm-nm.over { color: #ff6b6d; }
.pm-cycle { font-size: 11px; color: var(--text-muted); }
.pm-op { text-align: right; }

/* ---------- 加载 / 空态 ---------- */
.pm-loading {
    padding: 26px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.pm-empty {
    padding: 26px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---------- 详情弹窗 ---------- */
.pm-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.pm-detail-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pm-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.pm-detail-cell {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.pm-detail-cell span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.pm-detail-cell b { font-size: 15px; color: var(--text-primary); font-weight: 700; }
.pm-detail-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    margin-bottom: 6px;
    background: rgba(255, 140, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-primary);
}
.pm-detail-trigger b { color: #ffa540; font-size: 13px; }
.pm-detail-none { font-size: 13px; color: var(--text-muted); padding: 4px 0 8px; }
.pm-action {
    padding: 10px 14px;
    background: rgba(0, 185, 107, 0.07);
    border: 1px solid rgba(0, 185, 107, 0.2);
    border-left: 3px solid var(--c-green);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}
.pm-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pm-check-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 2;
}
.pm-history {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--text-secondary);
}
.pm-history b { color: var(--text-primary); }

@media (max-width: 900px) {
    .pm-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-row { grid-template-columns: 1fr 56px 1fr; }
    .pm-op { text-align: left; }
    .pm-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-detail-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pm-summary-grid { grid-template-columns: 1fr; }
    .pm-row { grid-template-columns: 1fr; }
}

/* ========== 预防性维修预警（总览看板） ========== */
.pm-widget {
    margin-top: 20px;
    background: linear-gradient(160deg, rgba(15,40,71,0.92), rgba(10,25,41,0.97));
    border: 1px solid rgba(120,160,200,0.16);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(2,10,22,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    animation: fadeInUp 0.32s ease both;
}
.pm-widget-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 13px 20px 11px;
    border-bottom: 1px solid rgba(120,160,200,0.12);
}
.pm-widget-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pm-widget-title small { font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted); margin-left: 4px; }
.pm-widget-actions { display: flex; align-items: center; gap: 14px; }
.pm-widget-time { font-size: 12px; color: var(--text-muted); }
.pm-widget-more { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-orange); text-decoration: none; transition: all .2s; }
.pm-widget-more:hover { color: #ffa940; text-shadow: 0 0 10px rgba(255,140,0,.5); }
.pm-widget-summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px 0; }
.pmw-stat {
    flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(120,160,200,0.10);
    transition: all .2s;
}
.pmw-stat:hover { border-color: rgba(255,140,0,0.25); transform: translateY(-1px); }
.pmw-stat-icon { font-size: 20px; }
.pmw-stat-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pmw-stat.high .pmw-stat-val { color: #ff4d4f; text-shadow: 0 0 14px rgba(255,77,79,.4); }
.pmw-stat.medium .pmw-stat-val { color: #ff8c00; text-shadow: 0 0 14px rgba(255,140,0,.4); }
.pmw-stat.low .pmw-stat-val { color: #00b96b; text-shadow: 0 0 14px rgba(0,185,107,.4); }
.pmw-stat.due .pmw-stat-val { color: #ffc53d; text-shadow: 0 0 14px rgba(255,197,61,.4); }
.pmw-stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; }
.pmw-total { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding-right: 4px; flex: none; }
.pm-widget-list { padding: 12px 20px 18px; }
.pmw-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid transparent; transition: all .2s;
}
.pmw-row + .pmw-row { margin-top: 8px; }
.pmw-row:hover { background: rgba(255,140,0,0.05); border-color: rgba(255,140,0,0.18); }
.pmw-rank {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: rgba(255,140,0,0.12); color: #ffa940;
    font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.pmw-dev { flex: 2.2; min-width: 0; }
.pmw-dev-name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmw-dev-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmw-health { flex: none; }
.pmw-risk { width: 108px; flex: none; display: flex; align-items: center; gap: 8px; }
.pmw-triggers { flex: 2; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pmw-next { width: 88px; flex: none; text-align: right; }
.pmw-op { flex: none; }
.pm-widget-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
@media (max-width: 1100px) { .pmw-triggers { display: none; } }
@media (max-width: 760px) {
    .pmw-risk, .pmw-health { display: none; }
    .pm-widget-summary { flex-wrap: wrap; }
    .pmw-stat { flex: 1 1 40%; }
    .pmw-row { flex-wrap: wrap; }
}

/* ========== AI 设备诊断页视觉增强 ========== */
/* 1. 页面氛围：蓝紫 + 橙色光晕 */
#page-ai-diagnosis { position: relative; }
#page-ai-diagnosis::before {
    content: '';
    position: absolute;
    top: -40px; right: -60px;
    width: 520px; height: 420px;
    background: radial-gradient(circle, rgba(64,120,255,0.14), rgba(64,120,255,0) 65%);
    pointer-events: none;
    z-index: 0;
}
#page-ai-diagnosis::after {
    content: '';
    position: absolute;
    bottom: 40px; left: -80px;
    width: 460px; height: 380px;
    background: radial-gradient(circle, rgba(255,140,0,0.10), rgba(255,140,0,0) 62%);
    pointer-events: none;
    z-index: 0;
}
#page-ai-diagnosis > * { position: relative; z-index: 1; }

/* 2. AI 智能诊断中心横幅 */
.ai-banner {
    position: relative; overflow: hidden;
    margin-bottom: 16px; padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(23,58,102,0.75), rgba(10,25,41,0.92) 55%, rgba(35,20,60,0.75));
    border: 1px solid rgba(120,160,200,0.22);
    box-shadow: 0 10px 32px rgba(2,10,22,0.40), inset 0 1px 0 rgba(255,255,255,0.07);
    animation: fadeInUp 0.4s ease both;
}
.ai-banner-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(420px 160px at 12% 0%, rgba(64,120,255,0.18), transparent 60%),
        radial-gradient(360px 150px at 88% 110%, rgba(255,140,0,0.16), transparent 60%);
}
.ai-banner-grid {
    position: absolute; inset: 0; opacity: .35; pointer-events: none;
    background-image:
        linear-gradient(rgba(120,160,200,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,160,200,0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.85), transparent 75%);
    mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.85), transparent 75%);
}
.ai-banner-left { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.ai-banner-icon {
    width: 58px; height: 58px; border-radius: 16px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    background: linear-gradient(145deg, rgba(255,140,0,0.22), rgba(255,140,0,0.06));
    border: 1px solid rgba(255,140,0,0.35);
    box-shadow: 0 0 22px rgba(255,140,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    animation: aiPulse 3s ease-in-out infinite;
}
@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255,140,0,0.22), inset 0 1px 0 rgba(255,255,255,0.15); }
    50% { box-shadow: 0 0 30px rgba(255,140,0,0.42), inset 0 1px 0 rgba(255,255,255,0.15); }
}
.ai-banner-title { font-size: 21px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.5px; }
.ai-banner-sub { font-size: 12px; color: var(--text-secondary); margin-top: 5px; letter-spacing: 0.3px; }
.ai-banner-stats { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.ai-banner-stat {
    min-width: 108px; padding: 10px 16px; border-radius: 12px; text-align: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,200,0.14);
    transition: all .2s;
}
.ai-banner-stat:hover {
    border-color: rgba(255,140,0,0.30); background: rgba(255,140,0,0.05); transform: translateY(-2px);
}
.ai-banner-val {
    font-size: 22px; font-weight: 800; color: var(--text-primary);
    text-shadow: 0 0 16px rgba(64,120,255,0.35);
    font-variant-numeric: tabular-nums;
}
.ai-banner-ok { color: #00d68f; text-shadow: 0 0 16px rgba(0,214,143,0.45); }
.ai-banner-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 3. 健康卡升级：渐变底 + 顶部高光 + 分级光晕 */
#page-ai-diagnosis .health-card {
    background: linear-gradient(165deg, rgba(20,52,90,0.60), rgba(10,25,41,0.88));
    border: 1px solid rgba(120,160,200,0.16);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(2,10,22,0.28);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: fadeInUp .34s ease both;
}
#page-ai-diagnosis .health-card::before {
    content: '';
    position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}
#page-ai-diagnosis .health-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,140,0,0.40);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 26px rgba(2,10,22,0.45), 0 0 22px rgba(255,140,0,0.10);
}
.hc-ok .health-score-ring svg { filter: drop-shadow(0 0 8px rgba(0,185,107,0.50)); }
.hc-warn .health-score-ring svg { filter: drop-shadow(0 0 8px rgba(255,140,0,0.50)); }
.hc-danger .health-score-ring svg { filter: drop-shadow(0 0 9px rgba(255,77,79,0.55)); }
.hc-ok .health-score-value { color: #00e69a; text-shadow: 0 0 14px rgba(0,185,107,0.50); }
.hc-warn .health-score-value { color: #ffa940; text-shadow: 0 0 14px rgba(255,140,0,0.50); }
.hc-danger .health-score-value { color: #ff6b6e; text-shadow: 0 0 14px rgba(255,77,79,0.55); }
.health-score-ring .ring-bg { stroke: rgba(255,255,255,0.06); }
/* chips 语义色 */
.chip-ok { color: #00d68f; }
.chip-warn { color: #ffa940; }
.chip-danger { color: #ff6b6e; }
#page-ai-diagnosis .health-item-chip {
    background: rgba(255,255,255,0.035);
    border-color: rgba(120,160,200,0.14);
}
/* 健康卡入场 stagger */
#page-ai-diagnosis .health-card:nth-child(2) { animation-delay: .03s; }
#page-ai-diagnosis .health-card:nth-child(3) { animation-delay: .06s; }
#page-ai-diagnosis .health-card:nth-child(4) { animation-delay: .09s; }
#page-ai-diagnosis .health-card:nth-child(5) { animation-delay: .12s; }
#page-ai-diagnosis .health-card:nth-child(6) { animation-delay: .15s; }
#page-ai-diagnosis .health-card:nth-child(7) { animation-delay: .18s; }
#page-ai-diagnosis .health-card:nth-child(8) { animation-delay: .21s; }
#page-ai-diagnosis .health-card:nth-child(9) { animation-delay: .24s; }
#page-ai-diagnosis .health-card:nth-child(10) { animation-delay: .27s; }

/* 4. 预测性维护建议升级：发光竖条 + 紧迫感 */
.prediction-card { border-radius: 12px; }
.prediction-card::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    border-radius: 3px 0 0 3px;
}
.prediction-card.high { border-left-color: transparent; background: linear-gradient(160deg, rgba(70,25,35,0.55), rgba(10,25,41,0.90)); }
.prediction-card.high::after {
    background: linear-gradient(180deg, #ff4d4f, #ff8c00);
    animation: dangerPulse 2s ease-in-out infinite;
}
.prediction-card.medium { border-left-color: transparent; background: linear-gradient(160deg, rgba(64,42,20,0.55), rgba(10,25,41,0.90)); }
.prediction-card.medium::after {
    background: linear-gradient(180deg, #ff8c00, #ffc53d);
    box-shadow: 0 0 12px rgba(255,140,0,0.45);
}
@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,77,79,0.40); }
    50% { box-shadow: 0 0 20px rgba(255,77,79,0.75); }
}
.prediction-card:hover { transform: translateX(2px); }
.prediction-card:hover { transition: transform .2s ease; }
.prediction-recommendation {
    background: linear-gradient(135deg, rgba(255,140,0,0.07), rgba(255,140,0,0.02));
    border-color: rgba(255,140,0,0.14);
}
.urgency-badge.high { box-shadow: 0 0 10px rgba(255,77,79,0.35); }
.urgency-badge.medium { box-shadow: 0 0 10px rgba(255,140,0,0.30); }

/* 5. 响应式 */
@media (max-width: 760px) {
    .ai-banner { padding: 18px; }
    .ai-banner-stats { width: 100%; }
    .ai-banner-stat { flex: 1 1 40%; }
    .ai-banner-title { font-size: 18px; }
}

/* ========== 故障分析AI ========== */
.fa-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
    padding: 18px 22px; margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(13,35,64,0.95), rgba(10,25,41,0.92));
    border: 1px solid rgba(64,169,255,0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(2,10,22,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.fa-banner::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(500px 180px at 88% 0%, rgba(64,169,255,0.14), transparent 70%),
        radial-gradient(400px 160px at 5% 100%, rgba(255,140,0,0.09), transparent 70%);
}
.fa-banner-icon {
    width: 54px; height: 54px; flex: none; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    background: linear-gradient(145deg, rgba(64,169,255,0.18), rgba(255,140,0,0.10));
    border: 1px solid rgba(64,169,255,0.25);
    box-shadow: 0 0 18px rgba(64,169,255,0.25);
    animation: faPulse 2.6s ease-in-out infinite;
}
@keyframes faPulse { 0%,100% { box-shadow: 0 0 14px rgba(64,169,255,0.22); } 50% { box-shadow: 0 0 26px rgba(64,169,255,0.45); } }
.fa-banner-info { min-width: 170px; }
.fa-banner-title { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: .5px; }
.fa-banner-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.fa-banner-stats { display: flex; gap: 12px; flex: 1; flex-wrap: wrap; }
.fa-bstat { min-width: 92px; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,0.035); border: 1px solid rgba(120,160,200,0.10); }
.fa-bstat-val { font-size: 20px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.fa-bstat-val.fa-up { color: #ff4d4f; text-shadow: 0 0 12px rgba(255,77,79,.4); }
.fa-bstat-val.fa-down { color: #00b96b; text-shadow: 0 0 12px rgba(0,185,107,.4); }
.fa-bstat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.fa-banner-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: relative; }
.fa-banner-time { font-size: 11px; color: var(--text-muted); }
.fa-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fa-mid-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.fa-chart-card .card-body { padding-top: 6px; }
.fa-type-rows { margin-top: 8px; border-top: 1px dashed rgba(120,160,200,0.12); padding-top: 10px; }
.fa-type-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: all .18s;
}
.fa-type-row:hover { background: rgba(255,140,0,0.06); }
.fa-type-icon { font-size: 15px; width: 20px; text-align: center; }
.fa-type-name { font-size: 13px; font-weight: 600; color: var(--text-primary); width: 76px; flex: none; }
.fa-type-bar-wrap { flex: 1; height: 6px; border-radius: 3px; background: rgba(120,160,200,0.10); overflow: hidden; }
.fa-type-bar { display: block; height: 100%; border-radius: 3px; opacity: .85; }
.fa-type-num { font-size: 12px; color: var(--text-secondary); width: 88px; text-align: right; flex: none; }
.fa-type-pending { font-size: 10px; padding: 2px 7px; border-radius: 8px; flex: none; background: rgba(255,77,79,0.12); color: #ff7875; border: 1px solid rgba(255,77,79,0.22); }
.fa-type-pending.fa-zero { background: rgba(0,185,107,0.10); color: #52c41a; border-color: rgba(0,185,107,0.20); }
.fa-type-arrow { color: var(--text-muted); font-size: 16px; }
.fa-dev-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fa-dev-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.fa-count-badge {
    display: inline-block; min-width: 30px; text-align: center;
    padding: 3px 9px; border-radius: 14px; font-weight: 800; font-size: 13px;
    background: rgba(255,140,0,0.13); color: #ffa940; border: 1px solid rgba(255,140,0,0.28);
}
.fa-ws-row { padding: 9px 4px; }
.fa-ws-row + .fa-ws-row { border-top: 1px dashed rgba(120,160,200,0.10); }
.fa-ws-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fa-ws-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fa-ws-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.fa-ws-bar-wrap { height: 7px; border-radius: 4px; background: rgba(120,160,200,0.10); overflow: hidden; }
.fa-ws-bar { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #40a9ff, #ff8c00); box-shadow: 0 0 8px rgba(64,169,255,.4); }
.fa-insight-card { margin-bottom: 16px; }
.fa-insight-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.fa-insight {
    display: flex; gap: 12px; padding: 13px 15px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(120,160,200,0.10);
    border-left: 3px solid #5b8def; transition: all .2s;
}
.fa-insight:hover { transform: translateY(-1px); background: rgba(255,255,255,0.05); }
.fa-insight.danger { border-left-color: #ff4d4f; background: linear-gradient(160deg, rgba(255,77,79,0.06), rgba(255,255,255,0.02)); }
.fa-insight.warn { border-left-color: #ff8c00; background: linear-gradient(160deg, rgba(255,140,0,0.06), rgba(255,255,255,0.02)); }
.fa-insight.ok { border-left-color: #00b96b; }
.fa-insight-icon { font-size: 20px; line-height: 1.2; }
.fa-insight-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.fa-insight-text { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; }
.fa-action-list { display: flex; flex-direction: column; gap: 12px; }
.fa-action { border: 1px solid rgba(120,160,200,0.12); border-radius: 10px; overflow: hidden; }
.fa-action-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(120,160,200,0.10);
}
.fa-action-icon {
    width: 30px; height: 30px; border-radius: 8px; flex: none; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.fa-action-icon.danger { background: rgba(255,77,79,0.12); }
.fa-action-icon.warn { background: rgba(255,140,0,0.12); }
.fa-action-icon.info { background: rgba(64,169,255,0.12); }
.fa-action-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.fa-action-target { font-size: 11px; color: #ffa940; margin-left: auto; }
.fa-action-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.fa-action-block { padding: 12px 16px; }
.fa-action-block + .fa-action-block { border-left: 1px dashed rgba(120,160,200,0.12); }
.fa-action-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; }
.fa-action-ol, .fa-kb-ol { margin: 0; padding-left: 18px; }
.fa-action-ol li, .fa-kb-ol li { font-size: 12px; color: var(--text-secondary); line-height: 1.9; }
.fa-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-spare-chip {
    font-size: 11px; padding: 3px 10px; border-radius: 12px;
    background: rgba(64,169,255,0.10); color: #69b1ff; border: 1px solid rgba(64,169,255,0.22);
}
.fa-prevention { font-size: 12px; color: #ffa940; margin-top: 10px; line-height: 1.7; background: rgba(255,140,0,0.05); padding: 8px 10px; border-radius: 8px; border-left: 2px solid rgba(255,140,0,0.5); }
.fa-empty, .fa-loading { padding: 22px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* 知识库弹窗 */
.fa-kb-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; border-bottom: 1px dashed rgba(120,160,200,0.15); margin-bottom: 14px; }
.fa-kb-icon {
    width: 48px; height: 48px; border-radius: 12px; flex: none; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.25);
    color: var(--fa-c, #ff8c00);
}
.fa-kb-title { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.fa-kb-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.fa-kb-sec { margin-bottom: 14px; }
.fa-kb-sec-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.fa-kb-ul { margin: 0; padding-left: 18px; }
.fa-kb-ul li { font-size: 12px; color: var(--text-secondary); line-height: 1.9; }
.fa-kb-prevention { font-size: 13px; color: #ffa940; line-height: 1.7; background: rgba(255,140,0,0.06); padding: 10px 12px; border-radius: 8px; border-left: 3px solid rgba(255,140,0,0.55); }
@media (max-width: 1100px) {
    .fa-charts-grid, .fa-mid-grid { grid-template-columns: 1fr; }
    .fa-action-body { grid-template-columns: 1fr; }
    .fa-action-block + .fa-action-block { border-left: none; border-top: 1px dashed rgba(120,160,200,0.12); }
}
@media (max-width: 760px) {
    .fa-banner { padding: 16px; }
    .fa-bstat { flex: 1 1 40%; min-width: 84px; }
    .fa-type-pending { display: none; }
}

/* ================================================================
   印机通 PRINTM TECH — 全站 Logo 统一优化（深蓝工业风一体感）
   素材：logo_printm.jpg（蓝底白齿轮 + PRINTM TECH 印机通 横版）
   设计理念：LOGO 蓝底(#4A90D9) 与页面深蓝工业风无缝融合，
   发光/圆角/阴影围绕「蓝+白」配色体系，打造悬浮一体感。
   ================================================================ */

/* --- 门户页：与主站一致，完整显示不截断 --- */
.portal-logo { height: 54px; display: inline-flex; align-items: center; }
.portal-logo img {
    max-width: min(100%, 200px);
    max-height: 54px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transition: opacity 0.2s ease, transform 0.25s ease;
}
.portal-logo img:hover {
    opacity: 0.92;
    transform: scale(1.02) translateY(-1px);
}

/* --- 登录/注册页：与主站一致，透明底白字完整显示，不截断 --- */
.auth-logo {
    display: inline-block;
    max-width: 100%;
}
.auth-logo img {
    max-width: min(100%, 240px);
    max-height: 58px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- 侧栏（驾驶舱/后台/超管）：与主站一致，完整显示不截断 --- */
.sidebar-logo .logo-img {
    box-sizing: border-box;
    max-width: min(100%, 190px);
    max-height: 50px;
    width: auto;
    height: auto;
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: opacity 0.2s ease, transform 0.25s ease;
}
.sidebar-logo .logo-img:hover {
    opacity: 0.92;
    transform: translateY(-1px) scale(1.02);
}
/* 后台侧栏 Logo 同规格 */
.sidebar.admin .sidebar-logo .logo-img {
    max-height: 48px;
    max-width: min(100%, 190px);
}

/* --- 驾驶舱 HUD 徽章：与主站一致，完整显示 --- */
.cockpit-logo-badge {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}
.cockpit-logo-badge img {
    max-width: min(100%, 120px);
    max-height: 28px;
    width: auto;
    height: auto;
    border-radius: 0;
    display: block;
}

/* ============================================================
   移动端抽屉式侧边栏 (Mobile Off-canvas Drawer)  —  断点 ≤ 768px
   手机上侧边栏默认收起为离屏抽屉，内容区占满全宽；
   桌面端（>768px）行为完全不变，确保零回归。
   ============================================================ */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
.sidebar-toggle:hover { border-color: var(--c-orange); color: var(--c-orange); }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

@media (max-width: 768px) {
    /* 门户页顶部：Logo 与返回按钮分行，避免小屏重叠 */
    .portal-header { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .portal-header .portal-logo { flex: 0 0 100%; justify-content: center; }
    .portal-header .switch-link { position: static !important; transform: none !important; margin-left: auto; margin-right: auto; white-space: nowrap; }

    /* 显示汉堡按钮与遮罩 */
    .sidebar-toggle { display: flex; }
    .sidebar-backdrop {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* 侧边栏变为离屏抽屉：默认收起，打开时滑入 */
    .sidebar {
        transform: translateX(-100%);
        width: 240px;
        max-width: 82vw;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
        transition: transform 0.25s ease;
        z-index: 100;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }

    /* 内容区占满全宽 */
    .main-wrapper { margin-left: 0; }

    /* Topbar 紧凑化：隐藏日期/时间，链接换行到第二行 */
    .topbar {
        padding: 0 12px;
        gap: 8px;
        height: auto;
        min-height: var(--topbar-height);
        flex-wrap: wrap;
    }
    .topbar-left { gap: 10px; min-width: 0; }
    .topbar-right {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-basis: 100%;
    }
    .topbar-info { display: none; }              /* 省空间：隐藏日期/时间 */
    .topbar-user .user-meta { display: none; }   /* 移动端仅留头像，避免挤压 */
    .topbar-alert { margin: 0; }

    /* 内容内边距收紧 */
    .content-area { padding: 14px 12px; }

    /* 多列网格统一单列 */
    .grid-2,
    .grid-3,
    .grid-4,
    .stat-row,
    .super-stat-grid,
    .chart-grid,
    .plan-cards-grid,
    .portal-cards,
    .portal-features,
    .energy-chart-grid { grid-template-columns: 1fr !important; }

    /* 卡片网格自适应单列 */
    .energy-card-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

    /* 表格横向滚动，避免溢出挤压 */
    .card-body { overflow-x: auto; }
    .data-table { min-width: 600px; }

    /* 能耗工具栏纵向堆叠 */
    .energy-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .energy-toolbar > * { width: 100%; }
    .energy-toolbar .form-select { min-width: 0; }

    /* 图表容器自适应（高度保持，宽度 100%） */
    .chart-container,
    .chart-container-md,
    .chart-container-lg,
    .chart-container-sm { width: 100% !important; min-width: 0; }
}

/* ============================================================
   printm.cn 主站视觉对齐层 (2026-09-02)
   印机管家 = 设备管理系统。保持深蓝工业底不变，
   将橙色强调体系切换为主站香槟金/金铜体系，字体对齐主站。
   通过 CSS 变量覆盖实现，仅追加，不修改既有规则。
   ============================================================ */
:root{
  /* 强调色：主站香槟金体系（原橙色 #ff8c00 -> 香槟金） */
  --c-orange:#c8a45c;
  --c-orange-light:#dfc188;
  --c-orange-dark:#a9863f;
  --c-gold:#c8a45c;
  --border-accent:rgba(200,164,92,0.32);
  --accent-orange:#dfc188;
  /* 侧栏/背景：更贴近主站深墨蓝，微调而非颠覆 */
  --bg-base:#0e2540;
  --bg-dark:#0a1c33;
  --bg-card:#12304f;
  --bg-card-soft:#163a5e;
  --bg-gradient:linear-gradient(160deg,#0e2540 0%,#14406b 42%,#0d2b4a 100%);
  --bg-sidebar:linear-gradient(180deg,#0a1c33 0%,#0e2540 55%,#0d2b4a 100%);
  /* 字体对齐主站：Aptos/Segoe UI/微软雅黑 */
  --font-main:"Aptos","Segoe UI","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
}
body,button,input,select,textarea{font-family:var(--font-main);}
/* 品牌按钮/高亮 hover 增加主站同款金色过渡 */
a,button,.btn,.nav-item,.stat-card,.device-card{transition:all .22s cubic-bezier(.22,.61,.36,1);}
/* 主站式金色聚焦光圈 */
:focus-visible{outline:2px solid rgba(200,164,92,.7);outline-offset:2px;}