/* ============================================================ 国家级零碳园区 · 综合能碳管控平台 V4.0 AI — 设计系统 深蓝黑玻璃拟态 + 蓝绿强调色，兼容现有 app.js / index.html 类名 ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* —— 2026-08-13 视觉规范统一：主背景 #020b1a / 卡片 rgba(10,36,66,.4)+毛玻璃 / 唯一强调色 科技青 #22d3ee —— */ --bg-deep:#020b1a;--bg-base:#061324;--bg-surface:#0A2442;--bg-card:rgba(10,36,66,.4); --bg-glass:rgba(10,36,66,.35);--bg-glass-hover:rgba(20,50,85,.55); --n-cyan:#22d3ee;--n-blue:#38bdf8;--n-green:#10b981;--n-amber:#f97316;--n-orange:#f97316;--n-red:#ef4444;--n-purple:#22d3ee;--n-pink:#22d3ee;--n-tech:#22d3ee;--n-yellow:#f97316; --t1:#ffffff;--t2:#cbd5e1;--t3:#64748b; --border:rgba(34,211,238,.18);--border-h:rgba(34,211,238,.45); --header-h:56px;--sidebar-w:240px; --r:4px;--r-sm:4px;--tr:cubic-bezier(.4,0,.2,1); } html,body{margin:0;padding:0;height:100%;} body{font-family:"Microsoft YaHei","PingFang SC",-apple-system,sans-serif;background:var(--bg-deep);color:var(--t1);font-size:13px;overflow:hidden;min-height:100vh} body.western-num .kpi-value,body.western-num .clock,body.western-num .nav-no{font-family:"Times New Roman",serif} body::before{content:'';position:fixed;inset:0;z-index:-2;background: radial-gradient(circle at 15% 10%, rgba(50,150,255,.10), transparent 45%), radial-gradient(circle at 85% 25%, rgba(50,200,50,.08), transparent 45%), radial-gradient(circle at 50% 100%, rgba(177,76,255,.07), transparent 50%);} .bg-mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .bg-mesh .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.20;animation:drift 20s ease-in-out infinite} .bg-mesh .b1{width:560px;height:560px;background:radial-gradient(circle,#3296FF,transparent 70%);top:-180px;left:-120px} .bg-mesh .b2{width:480px;height:480px;background:radial-gradient(circle,#32C832,transparent 70%);top:30%;right:-140px;animation-delay:5s} .bg-mesh .b3{width:430px;height:430px;background:radial-gradient(circle,#B14CFF,transparent 70%);bottom:-120px;left:30%;animation-delay:10s} .bg-mesh .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(50,150,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(50,150,255,.035) 1px,transparent 1px);background-size:50px 50px} #particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,50px) scale(.95)}} @keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}} /* ===================== 顶栏（按7.0.2设计规范） ===================== */ .header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:rgba(6,11,24,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200} .header-left{display:flex;align-items:center;gap:14px} .brand{display:flex;align-items:center;gap:10px} .brand-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);padding:3px} .brand-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:0.5px} .brand-sub{font-size:11px;color:var(--t2);margin-top:1px} .version-tag{font-size:10px;color:var(--t3);border:1px solid var(--border);border-radius:6px;padding:2px 8px;white-space:nowrap} .header-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px} .breadcrumb{color:var(--t2);font-size:13px;white-space:nowrap} .breadcrumb b{color:var(--t1);font-weight:600} .clock{font-size:13px;color:var(--n-cyan);font-family:"Times New Roman",monospace;letter-spacing:0.5px;background:rgba(50,150,255,.08);padding:3px 10px;border-radius:6px;border:1px solid var(--border)} .header-right{display:flex;align-items:center;gap:14px} .db-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--n-green);background:rgba(50,200,50,.08);border:1px solid rgba(50,200,50,.2);border-radius:20px;padding:4px 12px;white-space:nowrap} .search-box{position:relative;display:flex;align-items:center} .search-box svg{position:absolute;left:10px;width:15px;height:15px;fill:var(--t3)} .search-box input{background:var(--bg-glass);border:1px solid var(--border);border-radius:20px;padding:7px 14px 7px 32px;color:var(--t1);width:220px;outline:none;font-size:12px;cursor:pointer;transition:.3s} .search-box input:focus,.search-box input:hover{border-color:var(--border-h);width:260px} .search-box input::placeholder{color:var(--t3)} .header-actions{display:flex;align-items:center;gap:10px} .header-btn{cursor:pointer;color:var(--t2);display:flex;align-items:center;gap:5px;font-size:13px;transition:.2s;padding:7px 10px;border-radius:8px;position:relative} .header-btn:hover{color:var(--n-cyan);background:var(--bg-glass)} .user-avatar{width:30px;height:30px;border-radius:50%;background:var(--bg-glass);display:grid;place-items:center;font-size:14px;border:1px solid var(--border);cursor:pointer} /* ===================== 侧边栏（模块00-10 + 系统支撑） ===================== */ .sidebar{width:var(--sidebar-w);background:rgba(10,17,36,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--border);position:fixed;top:var(--header-h);bottom:0;left:0;overflow-y:auto;padding:12px 0;z-index:150} .sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:rgba(50,150,255,.2)} .nav-group-title{font-size:10px;color:var(--t3);padding:14px 20px 6px;letter-spacing:1px;text-transform:uppercase;font-weight:600} .nav-item{padding:9px 18px;font-size:12.5px;color:var(--t2);cursor:pointer;border-left:3px solid transparent;transition:all .25s var(--tr);position:relative;display:flex;align-items:center;gap:10px} .nav-item:hover{background:var(--bg-glass);color:var(--t1)} .nav-item.active{background:linear-gradient(90deg,rgba(50,150,255,.12),transparent);color:var(--n-cyan);border-left-color:var(--n-cyan)} .nav-no{font-size:10px;color:var(--t3);background:rgba(50,150,255,.08);border-radius:4px;padding:1px 5px;min-width:24px;text-align:center;font-family:"Times New Roman",monospace} .nav-item.active .nav-no{color:var(--n-cyan);background:rgba(50,150,255,.15)} .nav-icon{width:18px;text-align:center;font-size:14px;flex-shrink:0} .nav-text{flex:1} .nav-desc{font-size:10px;color:var(--t3);margin-top:2px} .nav-item:hover .nav-desc{color:var(--t2)} /* ===================== 主内容 ===================== */ .main{margin-left:var(--sidebar-w);margin-top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;padding:20px;min-width:0;position:relative;z-index:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .main::-webkit-scrollbar{width:8px} .main::-webkit-scrollbar-thumb{background:rgba(50,150,255,.28);border-radius:8px} .main::-webkit-scrollbar-thumb:hover{background:rgba(50,150,255,.5)} .main::-webkit-scrollbar-track{background:transparent} .module-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .panel-subtitle{font-size:11px;color:var(--t2)} /* ===================== 首页主视觉 Hero ===================== */ .home-hero{position:relative;height:340px;border-radius:var(--r);overflow:hidden;margin-bottom:16px;border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.45);isolation:isolate} .home-hero-bg{position:absolute;inset:0;background:url('assets/zero-carbon-park-aerial-hero.webp') no-repeat center 42%;background-size:cover;transform:scale(1.02);transition:transform 8s ease} .home-hero:hover .home-hero-bg{transform:scale(1.07)} .home-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,38,.12) 0%,rgba(8,18,38,.42) 45%,rgba(8,18,38,.84) 100%),radial-gradient(120% 80% at 50% 28%,rgba(20,60,110,0),rgba(6,14,30,.6));pointer-events:none} .home-hero-content{position:absolute;left:0;right:0;bottom:0;padding:24px 28px;display:flex;flex-direction:column;gap:8px;z-index:2} .home-hero-title{font-size:26px;font-weight:800;color:#EAF2FF;letter-spacing:2px;text-shadow:0 2px 18px rgba(0,0,0,.55)} .home-hero-subtitle{font-size:12px;letter-spacing:3px;color:#7FB3E8;font-weight:600} .home-hero-badges{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap} .hero-badge{font-size:12px;padding:5px 12px;border-radius:20px;background:rgba(15,40,75,.58);border:1px solid rgba(79,195,247,.32);color:#BFE0FF} .hero-badge i{font-style:normal;margin-right:5px} @media (max-width:1280px){.home-hero{height:280px}.home-hero-title{font-size:20px}.home-hero-badges{gap:8px}.hero-badge{font-size:11px;padding:4px 10px}} @media (max-width:768px){.home-hero{height:200px}.home-hero-title{font-size:16px}.home-hero-subtitle{display:none}} /* ===================== KPI 卡 ===================== */ .home-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px} /* 注：移除 kpi-card 的 backdrop-filter —— 卡片背后是 fixed 渐变背景，模糊几乎不可见， 但长页面滚动时每帧都要重采样背景，是掉帧主因；transition 由 all 收敛为具体属性，避免滚动时无谓的样式计算 */ .kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;transition:transform .3s var(--tr),border-color .3s var(--tr),box-shadow .3s var(--tr),background-color .3s var(--tr);cursor:pointer} .kpi-card:hover{transform:translateY(-3px);border-color:var(--border-h);box-shadow:0 8px 30px rgba(50,150,255,.10)} .kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ac,var(--n-cyan)),transparent);opacity:.6} .kpi-card.c1::before{--ac:var(--n-cyan)}.kpi-card.c2::before{--ac:var(--n-green)}.kpi-card.c3::before{--ac:var(--n-amber)}.kpi-card.c4::before{--ac:var(--n-red)}.kpi-card.c5::before{--ac:var(--n-purple)} .kpi-card.c1 .kpi-value{color:var(--n-cyan)}.kpi-card.c2 .kpi-value{color:var(--n-green)}.kpi-card.c3 .kpi-value{color:var(--n-amber)}.kpi-card.c4 .kpi-value{color:var(--n-red)}.kpi-card.c5 .kpi-value{color:var(--n-purple)} .kpi-label{font-size:11px;color:var(--t2);margin-bottom:8px} .kpi-value{font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.5px} .kpi-unit{font-size:13px;color:var(--t2);font-weight:400;margin-left:4px} .kpi-trend{font-size:11px;color:var(--t3);margin-top:6px} .kpi-icon{position:absolute;top:14px;right:14px;font-size:20px;opacity:.18} .kpi-meta{display:flex;gap:10px;font-size:11px;color:var(--t2);margin-top:6px} /* ===================== 图表盒（旧 panel 类兼容） ===================== */ .home-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px} .home-grid-bottom{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px} .home-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column} .home-panel-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .home-panel-title{font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px} .home-panel-subtitle{font-size:11px;color:var(--t2)} .home-panel-body{padding:12px;flex:1;position:relative} .home-panel-body.scroll{overflow-y:auto;max-height:340px} .panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column} .panel-header{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px} .panel-title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;letter-spacing:.3px} .panel-body{padding:16px;flex:1;position:relative;min-height:0} /* 模块内部子卡片：套用与顶部卡片一致的发光边框 / 深色半透明 / 圆角 / 外发光规范 */ .sub-card{background:rgba(10,36,66,.45);border:1px solid rgba(34,211,238,.22);border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(34,211,238,.04),0 8px 24px rgba(2,11,26,.40);position:relative;overflow:hidden;transition:border-color .25s var(--tr),box-shadow .25s var(--tr)} .sub-card:hover{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 1px rgba(34,211,238,.08),0 12px 32px rgba(2,11,26,.55),0 0 16px rgba(34,211,238,.12)} .chart{width:100%;height:260px} .chart-lg{height:340px} .chart-sm{height:180px} /* ===================== 通用栅格 ===================== */ .grid{display:grid;gap:14px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-5{grid-template-columns:repeat(5,1fr)} .grid-7{grid-template-columns:repeat(7,1fr)} .grid-left-320{display:grid;grid-template-columns:320px 1fr;gap:14px} .grid-left-420{display:grid;grid-template-columns:420px 1fr;gap:14px} /* ===================== 表格 ===================== */ .table-wrap{overflow:auto;border-radius:var(--r-sm)} table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed} th{background:rgba(50,150,255,.07);color:var(--t2);padding:11px 12px;text-align:center;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;font-size:10px;letter-spacing:.5px;text-transform:uppercase} td{padding:11px 12px;border-bottom:1px solid rgba(50,150,255,.06);color:var(--t1);text-align:center;vertical-align:middle;line-height:1.45;word-break:break-word} tr:nth-child(even) td{background:rgba(255,255,255,.025)} tr:hover td{background:rgba(50,150,255,.06)} /* 分页器 */ .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .pager-info{font-size:11px;color:var(--t2)} .pager-ctrls{display:flex;align-items:center;gap:6px} .pg-btn{padding:5px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg-glass);color:var(--t1);cursor:pointer;font-size:12px;transition:.2s;min-width:34px;text-align:center} .pg-btn:hover:not(:disabled){border-color:var(--border-h);color:var(--n-cyan)} .pg-btn:disabled{opacity:.4;cursor:not-allowed} .pg-btn.active{background:linear-gradient(135deg,var(--n-cyan),#1f6fd6);border-color:transparent;color:#fff} .pg-size{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2)} .pg-size select{background:var(--bg-glass);border:1px solid var(--border);border-radius:7px;padding:4px 8px;color:var(--t1);font-size:12px;outline:none} .pg-size select:focus{border-color:var(--border-h)} .pg-ellipsis{padding:5px 4px;color:var(--t2);font-size:12px} /* ===================== 徽章 ===================== */ .tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;border:1px solid var(--border);color:var(--t2)} .tag-blue{background:rgba(50,150,255,.12);color:var(--n-cyan);border-color:rgba(50,150,255,.2)} .tag-green{background:rgba(50,200,50,.12);color:var(--n-green);border-color:rgba(50,200,50,.2)} .tag-orange{background:rgba(255,179,0,.12);color:var(--n-amber);border-color:rgba(255,179,0,.2)} .tag-red{background:rgba(255,50,50,.12);color:var(--n-red);border-color:rgba(255,50,50,.2)} .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-glass);color:var(--t1);cursor:pointer;font-size:12px;transition:.25s} .btn:hover{border-color:var(--border-h);background:var(--bg-glass-hover);color:var(--n-cyan)} .btn.primary{background:linear-gradient(135deg,var(--n-cyan),#1f6fd6);border-color:transparent;color:#fff} .btn.primary:hover{box-shadow:0 4px 18px rgba(50,150,255,.35)} /* ===================== 筛选条 ===================== */ .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center} .filter-bar select,.filter-bar input{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--t1);font-size:12px;outline:none} .filter-bar select:focus,.filter-bar input:focus{border-color:var(--border-h)} /* 统一下拉选择框（工厂筛选 / 审计状态 / 每页条数等 .sel 控件，此前缺样式导致浏览器原生外观） */ .sel{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:7px 30px 7px 12px;color:var(--t1);font-size:12px;outline:none;cursor:pointer;transition:.15s;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(38,166,154,.2)} .sel option{background:var(--panel-h);color:var(--t1)} .filter-bar label{font-size:12px;color:var(--t2)} /* ===================== 告警 ===================== */ .alarm-list{display:flex;flex-direction:column;gap:8px} .alarm-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;background:rgba(255,255,255,.04);border-left:3px solid transparent} .alarm-item.critical{border-left-color:var(--n-red)} .alarm-item.warning{border-left-color:var(--n-amber)} .alarm-item.info{border-left-color:var(--n-cyan)} .alarm-time{font-size:11px;color:var(--t2);width:42px;flex-shrink:0} .alarm-content{flex:1;min-width:0} .alarm-title{font-size:12px} .alarm-loc{font-size:11px;color:var(--t2)} .alarm-stream{display:flex;flex-direction:column;gap:8px} .alarm-stream-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:8px;background:rgba(255,255,255,.04);border-left:3px solid transparent} .alarm-stream-item.critical{border-left-color:var(--n-red);background:linear-gradient(90deg,rgba(255,50,50,.08),rgba(255,255,255,.04))} .alarm-stream-item.warning{border-left-color:var(--n-amber);background:linear-gradient(90deg,rgba(255,179,0,.08),rgba(255,255,255,.04))} .alarm-stream-item.info{border-left-color:var(--n-cyan);background:linear-gradient(90deg,rgba(50,150,255,.08),rgba(255,255,255,.04))} .alarm-stream-time{font-size:11px;color:var(--t2);width:38px;flex-shrink:0} .alarm-stream-content{flex:1;min-width:0} .alarm-stream-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alarm-stream-loc{font-size:11px;color:var(--t2);margin-top:2px} .alarm-stream-status{font-size:10px;padding:1px 6px;border-radius:10px;margin-top:4px;display:inline-block} /* ===================== 状态点 / 合规卡 ===================== */ .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px} .status-run{background:var(--n-green)}.status-warn{background:var(--n-amber)}.status-alarm{background:var(--n-red)}.status-off{background:#546e7a} .compliance-cards{display:flex;flex-direction:column;gap:10px} .compliance-card{padding:12px 13px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 22px rgba(0,0,0,.18);transition:transform .2s var(--tr),border-color .2s var(--tr);cursor:default} .compliance-card:hover{border-color:rgba(50,150,255,.55);transform:translateX(2px)} .compliance-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px} .compliance-card-name{font-size:12px;font-weight:600;color:var(--t1);line-height:1.35} .compliance-card-sub{display:flex;justify-content:space-between;align-items:center;margin:7px 0 8px;font-size:11px;color:var(--t2)} .compliance-progress{height:7px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)} .compliance-progress-bar{height:100%;border-radius:6px;transition:width .6s var(--tr)} .compliance-progress-bar.risk-green{background:linear-gradient(90deg,#32C832,#66BB6A)} .compliance-progress-bar.risk-orange{background:linear-gradient(90deg,#FFB300,#FFCA28)} .compliance-progress-bar.risk-red{background:linear-gradient(90deg,#FF3232,#FF7043)} .compliance-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;color:var(--t2)} .compliance-card-val{font-size:13px;font-weight:800;color:var(--n-cyan)} .compliance-total{margin-top:12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(50,150,255,.14),rgba(50,200,50,.08));border:1px solid rgba(50,150,255,.35);text-align:center;box-shadow:inset 0 0 24px rgba(0,0,0,.2)} .compliance-total-label{font-size:11px;color:var(--t2);letter-spacing:1px} .compliance-total-val{font-size:30px;font-weight:900;line-height:1.2;margin:2px 0} .compliance-total-val span{font-size:13px;font-weight:600;margin-left:3px;color:var(--t2)} .compliance-total-val.good{color:var(--n-green)} .compliance-total-val.mid{color:var(--n-amber)} .compliance-total-val.bad{color:var(--n-red)} .compliance-total-sub{font-size:11px;color:var(--t2)} .mix-total{position:absolute;top:10px;right:14px;text-align:right;z-index:2;pointer-events:none} .mix-total-label{font-size:11px;color:var(--t2);letter-spacing:1px} .mix-total-val{font-size:24px;font-weight:900;color:var(--n-cyan);line-height:1.1} .mix-total-val span{font-size:12px;font-weight:600;color:var(--t2);margin-left:2px} .comp-pop{position:fixed;width:300px;max-width:90vw;background:rgba(8,16,34,.97);border:1px solid rgba(50,150,255,.5);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.55);z-index:1200;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--tr),transform .18s var(--tr);pointer-events:none} .comp-pop.show{opacity:1;visibility:visible;transform:translateY(0)} .comp-pop-title{font-size:13px;font-weight:800;color:var(--n-cyan);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)} .comp-pop-row{display:flex;gap:8px;font-size:11px;line-height:1.5;margin-bottom:7px} .comp-pop-k{flex:0 0 56px;color:var(--t2)} .comp-pop-v{flex:1;color:var(--t1)} .comp-pop-foot{margin-top:6px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--n-amber)} /* ===================== 下钻返回 ===================== */ .detail-back{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--t2);font-size:12px;margin-bottom:12px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);transition:.2s} .detail-back:hover{color:var(--n-cyan);border-color:var(--border-h);background:var(--bg-glass)} /* ===================== 地图 ===================== */ .map-container{position:relative;width:100%;height:100%;min-height:420px;background:radial-gradient(circle at center,rgba(26,58,110,.4) 0%,transparent 70%);border-radius:var(--r);overflow:hidden} .map-bg{position:absolute;inset:0;background:url('data:image/svg+xml;utf8,')} .map-node{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer} .map-node-dot{width:14px;height:14px;border-radius:50%;background:var(--n-cyan);box-shadow:0 0 12px var(--n-cyan);margin:0 auto 4px} .map-node.pv .map-node-dot{background:var(--n-amber)} .map-node.ess .map-node-dot{background:var(--n-green)} .map-node.heat .map-node-dot{background:var(--n-orange)} .map-node.load .map-node-dot{background:var(--n-purple)} .map-node-label{font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap} /* ===================== 全局搜索浮层 ===================== */ .search-overlay{position:fixed;inset:0;background:rgba(4,8,16,.6);backdrop-filter:blur(4px);z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:12vh} .search-overlay.open{display:flex} .search-modal{width:640px;max-width:92vw;background:rgba(12,20,38,.96);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden} .search-input-wrap{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)} .search-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:16px} .search-input-wrap .tag{color:var(--t3)} .search-results{max-height:60vh;overflow:auto;padding:8px} .search-result-group{font-size:11px;color:var(--t3);padding:10px 14px 4px;letter-spacing:1px;text-transform:uppercase} .search-result-item{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px;cursor:pointer;transition:.2s} .search-result-item:hover{background:var(--bg-glass)} .search-result-name{font-size:13px;color:var(--t1);font-weight:600} .search-result-name .hl{color:var(--n-cyan)} .search-result-desc{font-size:11px;color:var(--t2)} .search-result-title{font-size:11px;color:var(--n-purple);margin:6px 14px 2px} /* ===================== AI 助手浮窗 ===================== */ .ai-widget{position:fixed;right:24px;bottom:24px;z-index:600;font-family:inherit} .ai-toggle{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--n-purple),var(--n-cyan));display:grid;place-items:center;font-size:24px;cursor:pointer;box-shadow:0 8px 28px rgba(177,76,255,.45);transition:transform .3s} .ai-toggle:hover{transform:scale(1.08) rotate(8deg)} .ai-panel{position:absolute;right:0;bottom:66px;width:380px;height:540px;max-height:78vh;background:rgba(12,20,38,.97);border:1px solid rgba(177,76,255,.3);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;backdrop-filter:blur(12px)} .ai-panel.open{display:flex} .ai-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(177,76,255,.18),rgba(50,150,255,.12));color:#fff;font-weight:600;font-size:14px} .ai-close{cursor:pointer;font-size:14px;color:var(--t2);transition:.2s} .ai-close:hover{color:var(--n-red)} .ai-messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px} .ai-msg{display:flex;gap:8px;max-width:92%} .ai-bot .ai-avatar{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--n-purple),var(--n-cyan));display:grid;place-items:center;font-size:14px;flex-shrink:0} .ai-user{flex-direction:row-reverse;align-self:flex-end} .ai-user .ai-avatar{width:28px;height:28px;border-radius:8px;background:var(--bg-glass);display:grid;place-items:center;font-size:14px;flex-shrink:0} .ai-msg .bubble{padding:10px 13px;border-radius:12px;font-size:12.5px;line-height:1.7;background:var(--bg-glass);border:1px solid var(--border);color:var(--t1)} .ai-user .bubble{background:linear-gradient(135deg,rgba(50,150,255,.22),rgba(50,200,50,.12));border-color:transparent} .ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--border)} .ai-suggestion{font-size:11px;padding:6px 11px;border-radius:16px;background:var(--bg-glass);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:.15s} .ai-suggestion:hover{color:var(--n-cyan);border-color:var(--border-h)} .ai-input-wrap{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)} .ai-input-wrap input{flex:1;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:#fff;outline:none;font-size:12.5px} .ai-input-wrap input:focus{border-color:var(--border-h)} .ai-input-wrap button{background:linear-gradient(135deg,var(--n-purple),var(--n-cyan));border:none;border-radius:10px;color:#fff;width:40px;cursor:pointer;font-size:14px} /* ===================== 指标红线预警 / 分时电价 ===================== */ .kpi-card.kpi-alarm{border-color:rgba(255,50,50,.55);box-shadow:0 0 0 1px rgba(255,50,50,.25),0 8px 24px rgba(255,50,50,.12)} .kpi-redline{height:5px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden} .kpi-redline-bar{height:100%;border-radius:4px;transition:width .4s} .kpi-redline-bar.risk-red{background:linear-gradient(90deg,#FF3232,#FF7043)} .kpi-redline-bar.risk-orange{background:linear-gradient(90deg,#FFB300,#FFCA28)} .kpi-redline-bar.risk-green{background:linear-gradient(90deg,#32C832,#66BB6A)} .kpi-redline-text{font-size:10.5px;margin-top:3px;font-weight:600} .kpi-redline-text.risk-red{color:#FF5252} .kpi-redline-text.risk-orange{color:#FFB300} .kpi-redline-text.risk-green{color:#66BB6A} /* ===================== 告警闭环 ===================== */ .alarm-sla-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .sla-chip{padding:8px 14px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);font-size:12px;color:var(--t2)} .sla-chip b{font-size:18px;margin-right:4px} .sla-blue{border-left:3px solid var(--n-cyan)} .sla-blue b{color:var(--n-cyan)} .sla-red{border-left:3px solid var(--n-red)} .sla-red b{color:var(--n-red)} .sla-orange{border-left:3px solid var(--n-amber)} .sla-orange b{color:var(--n-amber)} .select-all{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);cursor:pointer;padding:0 6px} .alarm-check{width:15px;height:15px;accent-color:var(--n-cyan);cursor:pointer} .alarm-item.alarm-open{background:rgba(255,255,255,.04)} .sla-count{font-size:11px;color:var(--t2);white-space:nowrap} .sla-count.overdue{color:#FF5252;font-weight:700} .btn-warn{background:linear-gradient(135deg,#FF7043,#FFB300);border:none;color:#fff;font-weight:600} .btn-warn:hover{filter:brightness(1.1)} .btn-sm{padding:5px 11px;font-size:11px;border-radius:8px} /* ===================== 模态框 ===================== */ .modal-backdrop{position:fixed;inset:0;background:rgba(4,8,18,.72);backdrop-filter:blur(4px);z-index:900;display:flex;align-items:center;justify-content:center;padding:24px} .modal-box{width:min(720px,94vw);max-height:88vh;overflow:auto;background:rgba(13,22,42,.98);border:1px solid var(--border-h);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.7)} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;color:var(--t1);position:sticky;top:0;background:rgba(13,22,42,.98);z-index:2} .modal-close{cursor:pointer;font-size:16px;color:var(--t2);transition:.2s} .modal-close:hover{color:var(--n-red)} .modal-body{padding:18px 20px} .panel-subtitle{font-size:11px;color:var(--t3);font-weight:400;margin-top:2px} /* 弹窗图表加载遮罩 / 空态（能源排名分时弹窗） */ .chart-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--t2);font-size:13px;background:rgba(8,16,34,.35);border-radius:10px;z-index:3} .chart-loading .spin-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(80,160,255,.35);border-top-color:#5ab0ff;animation:spin .8s linear infinite} .chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:13px;background:rgba(8,16,34,.25);border-radius:10px;z-index:3} @keyframes spin{to{transform:rotate(360deg)}} /* ===================== 工单表单 ===================== */ .wo-form{display:flex;flex-direction:column;gap:2px} .wo-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:13px} .wo-k{width:110px;color:var(--t2);flex-shrink:0} .wo-v{color:var(--t1);flex:1} .wo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px} .wo-cell{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:3px} .wo-cell span{font-size:11px;color:var(--t3)} .wo-cell b{font-size:16px;color:var(--t1)} /* ===================== 故障知识库 / 备件 ===================== */ .kb-item{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)} .kb-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px} .kb-line{font-size:12px;color:var(--t2);line-height:1.6;margin:2px 0} .kb-meta{font-size:11px;color:var(--t3);margin-top:4px} .spare-item{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)} .spare-item.spare-low{background:rgba(255,50,50,.06);border-radius:6px;padding:10px;margin-bottom:4px} /* ===================== 高优先级优化新增样式 ===================== */ /* 分段切换按钮（预测周期） */ .seg{display:inline-flex;gap:4px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:3px} .seg-btn{background:transparent;border:none;color:var(--t2);padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:.2s} .seg-btn.active{background:linear-gradient(135deg,var(--n-purple),var(--n-cyan));color:#fff} .seg-btn:hover:not(.active){color:var(--t1)} /* AI 调度策略配置 */ .cfg-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;color:var(--t2)} .cfg-row label{width:120px;flex-shrink:0} .cfg-row input[type=range]{flex:1;accent-color:var(--n-cyan)} .cfg-val{width:36px;text-align:right;color:var(--t1);font-weight:600} .cfg-input{flex:1;background:var(--bg-glass);border:1px solid var(--border);border-radius:6px;padding:6px;color:var(--t1)} /* 通用按钮 */ .btn-primary{background:linear-gradient(135deg,var(--n-purple),var(--n-cyan))!important;border:none!important;color:#fff!important;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12.5px;transition:.2s} .btn-primary:hover{filter:brightness(1.1)} .btn-mini{padding:4px 10px;font-size:11px;border-radius:6px;background:var(--bg-glass);border:1px solid var(--border);color:var(--t1);cursor:pointer;transition:.2s} .btn-mini:hover{border-color:var(--border-h);color:var(--n-cyan)} .tag-purple{background:rgba(171,71,188,.16);color:#CE93D8;border:1px solid rgba(171,71,188,.4)} /* 数据血缘图谱 */ .ln-graph{position:relative;height:360px;background:radial-gradient(circle at 50% 40%,rgba(38,198,218,.06),transparent 70%);border:1px solid var(--border);border-radius:12px;overflow:hidden} .ln-svg{position:absolute;inset:0;width:100%;height:100%} .ln-node{position:absolute;transform:translate(-50%,-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:7px 10px;min-width:96px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.4)} .ln-dot{width:8px;height:8px;border-radius:50%;margin:0 auto 4px} .ln-name{font-size:11px;color:var(--t1);line-height:1.3} /* 因子版本 / 报表模板 / 风险台账 / 模拟 / 绿证 */ .factor-item{padding:9px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;font-size:12px} .tpl-item{padding:11px 13px;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;font-size:12px} .risk-item{padding:9px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;font-size:12px} .risk-item.risk-danger{border-color:rgba(255,50,50,.55);box-shadow:0 0 0 1px rgba(255,50,50,.2)} .sim-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.45;font-size:12px;color:var(--t1);background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer} .sim-row input{accent-color:var(--n-cyan);flex-shrink:0} .sim-row .tag{flex-shrink:0;margin-left:auto} /* LCA 减排模拟 4 Tab（后端数据源驱动） */ .lca-tabs{display:flex;gap:6px;margin-top:10px} .lca-tab{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12px;line-height:1.2;text-align:center;border-radius:8px;background:var(--bg-glass);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:.18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lca-tab:hover{border-color:var(--n-cyan);color:var(--t1)} .lca-tab.active{background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(34,211,238,.06));border-color:var(--n-cyan);color:var(--t1);box-shadow:0 0 0 1px rgba(34,211,238,.35) inset} .lca-box{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:260px;overflow:auto;padding-right:4px} .lca-note{font-size:11px;color:var(--t2);margin-top:10px;line-height:1.5} .lca-empty{font-size:12px;color:var(--t2);padding:10px 0;text-align:center} .cert-item{padding:9px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;font-size:12px} /* 模态内容 */ /* 编辑类表单弹窗头（sub31/sub32/sub33 ...） 修复：之前无 padding，标题"编辑主体 · P01"紧贴 modal-box 左侧边框，做得很丑。 现统一 padding:16px 20px，加 4px 渐变装饰条 + 等高 × 按钮容器。*/ .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:700; color:var(--t1); margin:0; padding:16px 20px; background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(34,211,238,.02)); border-bottom:1px solid var(--border); position:relative; } .modal-head::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(56,189,248,.5),transparent); pointer-events:none; } .modal-title{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.5px; } .modal-title::before{ content:""; flex:0 0 auto; width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg,#38bdf8,#22d3ee); box-shadow:0 0 10px rgba(56,189,248,.55); } .modal-x{ flex:0 0 auto; cursor:pointer; font-size:18px; line-height:1; color:var(--t2); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; transition:.2s; } .modal-x:hover{ color:var(--n-red); border-color:var(--n-red); background:rgba(244,63,94,.10); box-shadow:0 0 12px rgba(244,63,94,.25); } .modal-pre{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12px;color:var(--t2);white-space:pre-wrap;line-height:1.6;max-height:300px;overflow:auto} /* 首页 KPI 卡片点击提示 */ .kpi-card-hint{position:absolute;right:12px;bottom:10px;font-size:10px;color:var(--n-cyan);opacity:0;transition:.2s;pointer-events:none} .kpi-card:hover .kpi-card-hint{opacity:.9} /* 首页 KPI 详情弹窗 */ .kpi-modal-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px} .kpi-modal-metrics .wo-cell{padding:10px 12px} .kpi-metric-label{font-size:11px;color:var(--t2)} .kpi-metric-val{font-size:16px;font-weight:700;margin-top:4px} .kpi-modal-chart-title,.kpi-modal-table-title{font-size:12px;color:var(--t2);margin:6px 0} .kpi-drill-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .kpi-drill-label{font-size:12px;color:var(--t2);margin-bottom:8px} .kpi-drill-btns{display:flex;flex-wrap:wrap;gap:8px} .kpi-drill-crumb{font-size:12px;color:var(--t2);margin-bottom:10px} @media (max-width:760px){ .kpi-modal-metrics{grid-template-columns:repeat(2,1fr)} } /* ===================== 全域能源监测升级（子分类 / 综合负荷 / 介质排名） ===================== */ .energy-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .energy-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px} .energy-kpi .l{font-size:12px;color:var(--t2)} .energy-kpi .v{font-size:22px;font-weight:800;margin-top:4px;letter-spacing:-.5px} .energy-kpi .s{font-size:11px;color:var(--t2);margin-top:4px} .rank-list{display:flex;flex-direction:column;gap:9px} /* 通用进度条（用于 .va-bar / 能效诊断 / 综合负荷 等其它模块的 .bar-track + .bar-fill） */ .bar-track{position:relative;height:9px;border-radius:5px;background:rgba(0,0,0,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.55);overflow:hidden} .bar-fill{height:100%;border-radius:5px;transition:width .6s var(--tr)} /* ============================================================ 能源介质消耗排名 v2（参照 energy-ranking-full.html） - 顶部 4 KPI 摘要 - 表头 + 8~9 行排名 - 4 介质独立色：ele=蓝 / wat=青 / gas=橙 / het=红 - 进度条：45° 斜纹流动 + 末端白点呼吸 - 非线性缩放 pow 0.55（尾部 5% 仍可辨识） ============================================================ */ .rk-kpi-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px; padding:14px 18px; background:rgba(0,0,0,.18); border-bottom:1px solid rgba(22,48,73,.55); } .rk-kpi{display:flex;flex-direction:column;align-items:center;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.03)} .rk-kpi-n{font-size:20px;font-weight:800;color:#e6edf6;letter-spacing:.3px;line-height:1.1} .rk-kpi-l{font-size:11.5px;color:rgba(155,170,195,.65);margin-top:4px;letter-spacing:.3px} .rk-thead, .rk-row{ display:grid; grid-template-columns:52px 1.35fr 2.45fr 76px 88px 118px; align-items:center;gap:10px;padding:0 18px; } .rk-thead{height:42px;border-bottom:1px solid rgba(22,48,73,.55);font-size:12.5px;color:rgba(155,170,195,.65);font-weight:600;letter-spacing:.3px} .rk-thead .r{text-align:right} .rk-tbody{display:flex;flex-direction:column} .rk-row{ position:relative; min-height:56px; border-bottom:1px solid rgba(22,48,73,.45); transition:background .15s; color:#e6edf6; cursor:pointer; } .rk-row:nth-child(odd){background:rgba(13,29,48,.62)} .rk-row:nth-child(even){background:rgba(16,42,66,.55)} .rk-row:hover{background:rgba(255,255,255,.06)} .rk-row .r{text-align:right} /* 排名徽章：1/2/3 金银铜渐变；4+ 中性深色 */ .rk-medal{ width:30px;height:30px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-weight:800;font-size:14px;color:#cbd5e1; background:rgba(255,255,255,.05);border:1px solid rgba(34,49,73,.6); margin:0 auto; } .rk-medal.g1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3a2a00;border:none;box-shadow:0 0 14px rgba(251,191,36,.5)} .rk-medal.g2{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1e293b;border:none} .rk-medal.g3{background:linear-gradient(135deg,#e09b52,#b45309);color:#2a1500;border:none} /* 名称+meta */ .rk-name{min-width:0;padding:8px 0} .rk-name-n{font-size:14.5px;font-weight:600;color:#f1f5f9;line-height:1.2} .rk-name-m{font-size:11.5px;color:rgba(155,170,195,.65);font-weight:400;margin-top:3px} /* 消耗量+进度条（垂直） */ .rk-barwrap{display:flex;flex-direction:column;gap:6px;min-width:0} .rk-barval{font-size:15px;font-weight:700;color:#f1f5f9;font-variant-numeric:tabular-nums} .rk-barval .u{font-size:11px;color:rgba(155,170,195,.65);font-weight:400;margin-left:3px} .rk-track{ position:relative;height:9px;border-radius:6px; background:rgba(255,255,255,.06); overflow:visible; } .rk-fill{ position:relative;height:100%;border-radius:6px; width:0; transition:width .75s cubic-bezier(.22,1,.36,1); will-change:width; box-shadow:0 0 10px rgba(56,189,248,.45); } /* 4 介质独立渐变 + 发光 */ .rk-fill.ele{background:linear-gradient(90deg,#38bdf8,#60a5fa);box-shadow:0 0 10px rgba(56,189,248,.55)} .rk-fill.wat{background:linear-gradient(90deg,#22d3ee,#67e8f9);box-shadow:0 0 10px rgba(34,211,238,.55)} .rk-fill.gas{background:linear-gradient(90deg,#f97316,#fb923c);box-shadow:0 0 10px rgba(249,115,22,.55)} .rk-fill.het{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 10px rgba(239,68,68,.55)} /* 45° 斜纹流动纹理（呼应参考图） */ .rk-fill::before{ content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 9px,transparent 9px 18px); background-size:25px 25px;animation:rkStripeMove 1.1s linear infinite; } @keyframes rkStripeMove{from{background-position:0 0}to{background-position:25px 0}} /* 末端白点发光（脉动） */ .rk-fill::after{ content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%); width:11px;height:11px;border-radius:50%;background:#fff;pointer-events:none; box-shadow:0 0 10px rgba(255,255,255,.95); animation:rkDotPulse 1.5s ease-in-out infinite; } @keyframes rkDotPulse{0%,100%{transform:translateY(-50%) scale(1);opacity:.85}50%{transform:translateY(-50%) scale(1.4);opacity:1}} /* 占比 / 同比 / 单位产能能耗 */ .rk-pct{font-size:14px;font-weight:600;color:#cbd5e1;text-align:right;font-variant-numeric:tabular-nums} .rk-delta{font-size:13.5px;font-weight:700;text-align:right} .rk-delta .ar{font-size:11px;margin-right:2px} .rk-delta.up{color:#34d399} .rk-delta.down{color:#f87171} .rk-cost{font-size:14px;font-weight:700;color:#cbd5e1;text-align:right;font-variant-numeric:tabular-nums} .rk-cost .u{font-size:11px;color:rgba(155,170,195,.65);font-weight:400;margin-left:2px} /* 底部脚注 */ .rk-foot{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; padding:13px 18px 0;margin-top:6px; font-size:12px;color:rgba(155,170,195,.65); border-top:1px solid rgba(22,48,73,.55); } .rk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:6px;box-shadow:0 0 8px currentColor} .rk-dot.ele{background:#38bdf8;color:#38bdf8} .rk-dot.wat{background:#22d3ee;color:#22d3ee} .rk-dot.gas{background:#f97316;color:#f97316} .rk-dot.het{background:#ef4444;color:#ef4444} @media(max-width:1100px){ .rk-thead, .rk-row{grid-template-columns:42px 1.1fr 1.7fr 58px 72px;} .rk-cost, .rk-thead .u-cost-h{display:none} } @media(max-width:760px){ .rk-kpi-row{grid-template-columns:repeat(2,1fr)} .rk-thead, .rk-row{grid-template-columns:36px 1fr 1.4fr;} .rk-pct, .rk-delta, .rk-thead .r:not(:first-child){display:none} .rk-name-n{font-size:13px} } /* ============================================================ 个人中心下拉面板 ============================================================ */ .header-right{position:relative} .user-panel{position:absolute;top:calc(100% + 10px);right:0;width:268px;z-index:350; background:rgba(15,26,48,.98);border:1px solid var(--border-h);border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.5);padding:0;overflow:hidden; opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none; transition:opacity .2s var(--tr),transform .2s var(--tr)} .user-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .up-head{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(180deg,rgba(50,150,255,.12),transparent);border-bottom:1px solid var(--border)} .up-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg-glass);display:grid;place-items:center;font-size:20px;border:1px solid var(--border)} .up-name{font-size:14px;font-weight:700;color:var(--t1)} .up-role{font-size:11px;color:var(--t2);margin-top:2px} .up-badge{display:inline-block;margin-top:6px;font-size:10px;color:var(--n-cyan);border:1px solid var(--border-h);border-radius:6px;padding:1px 7px;background:rgba(50,150,255,.08)} .up-menu{padding:6px} .up-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--t1);cursor:pointer;transition:.18s} .up-item:hover{background:var(--bg-glass);color:var(--n-cyan)} .up-ic{width:18px;text-align:center;font-size:14px} .up-ver{margin-left:auto;font-size:10px;color:var(--t3);border:1px solid var(--border);border-radius:5px;padding:1px 6px} .up-foot{padding:10px 12px;border-top:1px solid var(--border)} .up-logout{width:100%;padding:9px;border-radius:9px;border:1px solid rgba(255,80,80,.4);background:rgba(255,60,60,.10);color:#FF6B6B;font-size:13px;cursor:pointer;transition:.2s} .up-logout:hover{background:rgba(255,60,60,.20);color:#FF8A8A} /* ============================================================ 浅色（日间）主题：专业浅灰蓝商务配色 ============================================================ */ [data-theme="light"]{ --bg-deep:#E9EEF5;--bg-base:#E1E8F2;--bg-surface:#F4F7FB; --bg-card:rgba(255,255,255,.90);--bg-glass:rgba(255,255,255,.72);--bg-glass-hover:rgba(255,255,255,.96); --t1:#1B2A41;--t2:#4A5C75;--t3:#8499B3; --border:rgba(20,70,140,.16);--border-h:rgba(20,90,170,.42); --n-cyan:#1577E0;--n-green:#1E9E3A;--n-amber:#C77B00;--n-red:#D82828;--n-purple:#8E3FD1;--n-pink:#D6336C;--n-tech:#0091C2; } [data-theme="light"] body{background:var(--bg-deep)} [data-theme="light"] body::before{opacity:.55} [data-theme="light"] .header{background:rgba(255,255,255,.92);border-bottom-color:var(--border)} [data-theme="light"] .sidebar{background:rgba(255,255,255,.82);border-right-color:var(--border)} [data-theme="light"] .brand-title{color:#10243F} [data-theme="light"] .module-title{color:#10243F} [data-theme="light"] .modal-box{background:rgba(255,255,255,.98);border-color:var(--border-h);box-shadow:0 30px 90px rgba(20,40,80,.22)} [data-theme="light"] .modal-header{background:rgba(255,255,255,.98)} [data-theme="light"] .search-modal{background:rgba(255,255,255,.98)} [data-theme="light"] .search-result-item:hover{background:var(--bg-glass)} [data-theme="light"] .ai-input-wrap input{color:#1F2A3A !important} [data-theme="light"] .ai-input-wrap input::placeholder{color:#8499B3} [data-theme="light"] select{background:rgba(255,255,255,.90) !important;color:#1F2A3A !important;border-color:var(--border) !important} [data-theme="light"] option{background:#fff;color:#1F2A3A} [data-theme="light"] .compliance-card{background:linear-gradient(180deg,rgba(20,40,80,.025),rgba(20,40,80,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 22px rgba(20,40,80,.05)} [data-theme="light"] .nav-item.active{background:linear-gradient(90deg,rgba(21,119,224,.10),transparent)} [data-theme="light"] .db-status{background:rgba(30,158,58,.10)} [data-theme="light"] .user-panel{background:rgba(255,255,255,.98);box-shadow:0 24px 70px rgba(20,40,80,.22)} [data-theme="light"] .kpi-card,[data-theme="light"] .panel,[data-theme="light"] .home-panel{box-shadow:0 8px 30px rgba(30,60,110,.10)} [data-theme="light"] .bar-track{background:rgba(20,70,140,.10);box-shadow:inset 0 1px 3px rgba(20,40,80,.10)} [data-theme="light"] .modal-header .ai-close{cursor:pointer;color:var(--t2)} /* 主题切换平滑过渡 */ body,.header,.sidebar,.main,.kpi-card,.panel,.home-panel,.btn,.tag,.nav-item,.seg,.filter-bar select,.compliance-card,.modal-backdrop,.user-panel{transition:background-color .28s var(--tr),color .28s var(--tr),border-color .28s var(--tr),box-shadow .28s var(--tr)} /* ===================== 能效分析与诊断 · 顶部对标卡片 / AI 诊断模块 ===================== */ .kpi-card.kpi-click{cursor:pointer} .kpi-card.kpi-click:hover{border-color:var(--border-h);box-shadow:0 10px 34px rgba(50,150,255,.22)} .diag-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:4px} .diag-ov-card{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s var(--tr),box-shadow .2s var(--tr)} .diag-ov-card:hover{border-color:var(--border-h);box-shadow:0 6px 22px rgba(50,150,255,.12)} .diag-ov-ic{font-size:22px;line-height:1} .diag-ov-val{font-size:21px;font-weight:800;letter-spacing:-.5px} .diag-ov-label{font-size:11px;color:var(--t2);margin-top:2px} .diag-list{display:flex;flex-direction:column;gap:10px;margin-top:4px} .diag-card{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--n-amber);border-radius:10px;overflow:hidden;transition:border-color .2s var(--tr),box-shadow .2s var(--tr)} .diag-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.18)} .diag-card.open{border-color:var(--border-h)} .diag-card-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none} .diag-card-title{font-weight:700;font-size:14px;color:var(--t1);flex:1;min-width:0} .diag-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .diag-expand-ic{color:var(--t2);font-size:13px;transition:transform .2s;margin-left:4px} .diag-card.open .diag-expand-ic{transform:rotate(0)} .diag-card-body{padding:0 14px 12px} .diag-metrics{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--t2);margin-bottom:8px} .diag-metrics b{font-size:13px} .diag-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .diag-progress-link{color:var(--n-cyan);font-size:12px;cursor:pointer;transition:.15s} .diag-progress-link:hover{color:#fff;text-decoration:underline} .diag-expand{border-top:1px dashed var(--border);padding-top:10px;margin-top:4px} .wo-steps{display:flex;flex-direction:column;gap:2px;margin-top:6px} .wo-step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);padding:6px 0} .wo-step .wo-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid var(--border);flex-shrink:0} .wo-step.done{color:var(--n-green)} .wo-step.done .wo-dot{background:var(--n-green);border-color:var(--n-green)} @media (max-width:760px){ .diag-overview{grid-template-columns:repeat(2,1fr)} } /* ===================== 全域能源监测 · 查询 / 横向滚动 / 综合负荷 ===================== */ .q-input{background:var(--bg-card);border:1px solid var(--border);color:var(--t1);border-radius:var(--r-sm);padding:6px 10px;font-size:13px;outline:none;transition:border-color .2s var(--tr)} .q-input:focus{border-color:var(--border-h)} .q-input::placeholder{color:var(--t3)} .filter-bar select.q-input,.filter-bar .q-input{margin-right:8px} .energy-loading{position:fixed;inset:0;background:rgba(6,11,24,.45);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:1200;color:var(--t1);font-size:14px} .spinner{width:34px;height:34px;border:3px solid rgba(79,195,247,.25);border-top-color:var(--n-cyan,#26C6DA);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .q-toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%) translateY(20px);background:rgba(20,40,72,.96);border:1px solid var(--border-h);color:#EAF2FF;padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:1300} .q-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* 横向滚动容器 */ .hscroll{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain} /* 无横向溢出时：不显示渐隐遮罩、不显示抓手，纵向滚轮完全交给页面 */ .hscroll.no-hscroll{overflow-x:hidden;cursor:default} .hscroll.no-hscroll .hscroll-fade{opacity:0!important} .hscroll-inner{display:flex;gap:14px;align-items:stretch} .hscroll.dragging{cursor:grabbing;user-select:none} .hscroll-fade{position:absolute;top:0;bottom:0;width:42px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:6} .hscroll-fade-l{left:0;background:linear-gradient(90deg,rgba(6,11,24,.62),transparent)} .hscroll-fade-r{right:0;background:linear-gradient(270deg,rgba(6,11,24,.62),transparent)} .hscroll:not(.at-start) .hscroll-fade-l{opacity:1} .hscroll:not(.at-end) .hscroll-fade-r{opacity:1} .hscroll::-webkit-scrollbar{height:9px} .hscroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:5px} .hscroll::-webkit-scrollbar-thumb{background:rgba(79,195,247,.35);border-radius:5px} .hscroll::-webkit-scrollbar-thumb:hover{background:rgba(79,195,247,.6)} .sub-col{flex:0 0 470px;min-width:470px} /* —— 子分类能源监测：左右分栏（左表格分页 / 右趋势放大）—— */ .energy-sub-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:stretch} .energy-sub-left,.energy-sub-right{min-width:0;display:flex;flex-direction:column} .energy-sub-table-wrap{overflow:visible} table#energySubTable{width:100%;table-layout:auto;font-size:12.5px;background:transparent} table#energySubTable th{white-space:normal;color:var(--t2);font-weight:600;background:rgba(50,150,255,.05);text-align:left;line-height:1.35;padding:9px 10px;border-bottom:1px solid var(--border)} table#energySubTable td{padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--border);color:var(--t1)} table#energySubTable tbody tr:hover{background:rgba(255,255,255,.04)} .st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:0 0 6px currentColor} .energy-sub-trend{width:100%;height:430px} .energy-sub-pager{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap} .pg-btn{min-width:34px;height:30px;padding:0 11px;font-size:12px;color:var(--t1);background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s} .pg-btn:hover:not(:disabled){background:rgba(79,195,247,.16);border-color:rgba(79,195,247,.5);color:#fff} .pg-btn.active{background:rgba(79,195,247,.22);border-color:rgba(79,195,247,.6);color:#fff;font-weight:600} .pg-btn:disabled{opacity:.4;cursor:not-allowed} .pg-info{font-size:12px;color:var(--t2);margin-right:auto} @media (max-width:1080px){.energy-sub-split{grid-template-columns:1fr}.energy-sub-trend{height:340px}} /* 综合负荷 · 右侧环形图卡片标题规范 */ .mix-title{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(34,211,238,.14);background:linear-gradient(180deg,rgba(34,211,238,.05),transparent)} .mix-title .mt-name{font-size:15px;font-weight:700;color:#EAF2FF;display:flex;align-items:center;gap:8px} .mix-title .mt-name::before{content:'';display:inline-block;width:3px;height:14px;background:var(--n-cyan);border-radius:2px;box-shadow:0 0 6px var(--n-cyan)} .mix-title .mt-hint{font-size:11px;color:var(--t2)} .mix-body{padding:6px 8px 10px} /* 综合负荷 · 右侧排名（两行布局：行1名称+数值+占比 ｜ 行2进度条全宽） */ .load-rank-row{padding:10px 6px 6px;border-bottom:1px dashed rgba(34,211,238,.10)} .load-rank-row:last-child{border-bottom:none} .lr-head{display:flex;align-items:center;gap:8px;font-size:13px} .lr-name{display:flex;align-items:center;gap:6px;color:#EAF2FF;font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor} .lr-val{color:#EAF2FF;font-weight:700;font-size:13px;flex:0 0 auto;white-space:nowrap} .lr-val .u{font-size:10px;color:var(--t2);font-weight:400;margin-left:2px} .lr-ratio{color:var(--n-cyan);font-weight:700;font-size:13px;flex:0 0 56px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .lr-bar{height:6px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-top:6px} .lr-bar-fill{height:100%;border-radius:4px;transition:width .4s var(--tr)} /* ===================== 个人中心 · 账号/通知/帮助/反馈/关于 ===================== */ .pc-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px} .pc-tab{background:transparent;border:none;color:var(--t2);font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:.2s} .pc-tab:hover{color:var(--t1)} .pc-tab.active{background:rgba(79,195,247,.14);color:var(--n-cyan,#26C6DA);font-weight:600} .pc-pane{animation:fadeIn .25s ease} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .form-row{display:flex;align-items:center;gap:14px;margin-bottom:12px} .form-row.col{flex-direction:column;align-items:stretch;gap:6px} .form-row label{width:84px;flex-shrink:0;color:var(--t2);font-size:13px} .form-row .q-input{flex:1;min-width:0} .form-val{display:flex;align-items:center;gap:12px} .form-val .q-input{width:200px} .notify-head{display:flex;justify-content:space-between;padding:8px 0 10px;color:var(--t2);font-size:12px;border-bottom:1px dashed var(--border)} .notify-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--border)} .nc-name{font-size:13px;color:var(--t1)} .nc-toggles{display:flex;gap:18px} .switch-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--t2)} .sw-label{min-width:30px} .switch{width:38px;height:20px;border-radius:20px;background:rgba(255,255,255,.16);position:relative;transition:background .2s;flex-shrink:0} .switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s} .switch.on{background:var(--n-cyan,#26C6DA)} .switch.on .knob{left:20px} .help-sec{margin-bottom:14px} .hs-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:6px} .hs-body{font-size:13px;color:var(--t2);line-height:1.8} .hs-list{margin:0;padding-left:18px;font-size:13px;color:var(--t2);line-height:1.9} .hs-list li{margin-bottom:6px} .hs-list b{color:var(--t1)} .about-body{padding:6px 4px} .about-top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .about-logo-img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.3)} .about-name{font-size:16px;font-weight:800;color:var(--t1)} .about-tag{font-size:11px;color:var(--t3);margin-top:2px} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .ag{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:10px 12px} .ag span{display:block;font-size:11px;color:var(--t2);margin-bottom:4px} .ag b{font-size:13px;color:var(--t1);font-weight:600;line-height:1.5} .about-copy{text-align:center;font-size:12px;color:var(--t3);line-height:1.8;border-top:1px dashed var(--border);padding-top:12px} /* ===================== 浅色主题适配 ===================== */ [data-theme="light"] .q-input{background:#fff;color:#1a2538;border-color:var(--border)} [data-theme="light"] .hscroll-fade-l{background:linear-gradient(90deg,rgba(255,255,255,.85),transparent)} [data-theme="light"] .hscroll-fade-r{background:linear-gradient(270deg,rgba(255,255,255,.85),transparent)} [data-theme="light"] .hscroll::-webkit-scrollbar-track{background:rgba(20,70,140,.08)} [data-theme="light"] .hscroll::-webkit-scrollbar-thumb{background:rgba(20,110,200,.32)} [data-theme="light"] .switch{background:rgba(20,40,80,.18)} [data-theme="light"] .lr-bar{background:rgba(20,70,140,.10)} [data-theme="light"] .energy-loading{background:rgba(225,235,250,.5)} [data-theme="light"] .q-toast{background:rgba(255,255,255,.98);color:#1a2538;border-color:var(--border)} /* ===================== 碳排放核算管理 7.4 ===================== */ .carbon-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 4px;flex-wrap:wrap} .carbon-toolbar .ct-left{font-size:13px;color:var(--t2)} .carbon-toolbar .ct-left b{color:var(--n-cyan);font-size:14px} .carbon-toolbar .ct-right{display:flex;align-items:center;gap:12px} .carbon-kpis .carbon-kpi{cursor:pointer;transition:all .3s var(--tr)} .carbon-kpis .carbon-kpi:hover{transform:translateY(-3px);border-color:var(--border-h);box-shadow:0 10px 34px rgba(50,150,255,.22)} .carbon-kpis .carbon-kpi .kpi-hint{font-size:10px;color:var(--n-cyan);margin-top:6px;opacity:.55} .carbon-kpis .carbon-kpi:hover .kpi-hint{opacity:1} /* 碳排放驾驶舱指标卡右上角图标：取消灰暗半透明，改为亮色高亮圆形发光，对齐能效页图标质感 */ .carbon-kpis .kpi-icon,.foot-base-grid .kpi-icon{opacity:1;top:13px;right:13px;width:36px;height:36px;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,rgba(56,189,248,.30),rgba(34,211,238,.14));border:1px solid rgba(56,189,248,.5);box-shadow:0 0 14px rgba(56,189,248,.4),inset 0 0 8px rgba(56,189,248,.18);text-shadow:0 0 8px rgba(56,189,248,.6)} .kpi-warn{border-color:var(--n-red)!important;box-shadow:0 0 0 1px var(--n-red),0 8px 24px rgba(255,50,50,.25)!important} .kpi-warn .kpi-hint{color:var(--n-red);opacity:1;font-weight:600} .warn-banner{background:rgba(255,50,50,.12);border:1px solid var(--n-red);border-radius:10px;padding:9px 12px;margin-bottom:14px;font-size:12px;color:#ffb3b3} .note-box{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--t2);line-height:1.6} .prog-bar{height:10px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;margin-top:4px} .prog-fill{height:100%;background:var(--n-cyan);border-radius:6px} .bal-col{min-width:0} .bal-title{font-weight:700;margin-bottom:8px;font-size:13px} .bal-table{width:100%;border-collapse:collapse;font-size:12px} .bal-table th{color:var(--t2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-weight:600} .bal-table td{padding:6px 8px;border-bottom:1px dashed rgba(255,255,255,.06)} .bal-row:hover{background:rgba(50,150,255,.10)} .bal-row td:nth-child(5){font-weight:700} .bal-total td{font-weight:700;background:rgba(50,150,255,.08);border-top:2px solid var(--border)} .bal-total.net td{background:rgba(50,200,120,.14);color:var(--n-green)} .asset-health{background:linear-gradient(135deg,rgba(20,40,80,.6),rgba(15,30,60,.6));border:1px solid var(--border);border-radius:14px;padding:16px} .ah-title{font-weight:700;margin-bottom:14px;color:var(--t1)} .ah-item{margin-bottom:14px} .ah-label{font-size:11px;color:var(--t2);margin-bottom:4px} .ah-val{font-size:24px;font-weight:800} .ah-note{font-size:10px;color:var(--t2);line-height:1.5;margin-top:6px;border-top:1px dashed var(--border);padding-top:8px} .mini-bar{height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;min-width:60px} .mini-fill{height:100%;border-radius:5px} .prog-cell{width:120px} [data-theme="light"] .bal-row td:nth-child(5),[data-theme="light"] .warn-banner{color:#a30000} [data-theme="light"] .note-box{background:rgba(255,255,255,.7);color:#33455e} [data-theme="light"] .bal-total.net td{color:#0a8f3c} .scope-wrap{display:flex;flex-direction:column;gap:6px} .scope-desc{font-size:11px;color:var(--t2);line-height:1.7;padding:0 6px 4px} .scope-desc b{color:var(--t1)} .m-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px} .m-metric{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center} .m-metric-v{font-size:18px;font-weight:700} .m-metric-l{font-size:11px;color:var(--t2);margin-top:2px} .modal-sub{font-size:13px;font-weight:700;color:var(--t1);margin:14px 0 8px} .modal-note{font-size:12px;color:var(--t2);line-height:1.7;margin-top:10px;padding:10px 12px;background:var(--bg-glass);border-left:3px solid var(--n-cyan);border-radius:6px} .modal-chart{width:100%;height:240px} .audit-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px} /* 三栏窄卡片内：4 灯牌改为 2×2 网格，利用横向宽度、降低卡片高度 */ .carbon-row3 .audit-stat{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px} .stat-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;position:relative;overflow:hidden} .stat-card.stat-click{cursor:pointer;transition:transform .18s var(--tr),border-color .2s var(--tr),box-shadow .25s var(--tr)} .stat-card.stat-click:hover{transform:translateY(-2px);border-color:rgba(94,168,255,.55);box-shadow:0 8px 22px rgba(0,0,0,.32),0 0 0 1px rgba(94,168,255,.18) inset} .stat-card.stat-click.active{border-color:rgba(94,168,255,.95);box-shadow:0 0 0 1px rgba(94,168,255,.55) inset,0 0 22px rgba(94,168,255,.32);background:linear-gradient(180deg,rgba(94,168,255,.12),rgba(94,168,255,.04) 60%,transparent)} .stat-card.stat-click.active::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(94,168,255,.95),transparent)} .stat-card .stat-hint{position:absolute;top:6px;right:8px;font-size:10px;color:rgba(180,210,255,.85);font-weight:600;letter-spacing:.5px;text-shadow:0 0 8px rgba(94,168,255,.55)} .stat-v{font-size:24px;font-weight:800} .stat-l{font-size:12px;color:var(--t2);margin-top:4px} .stat-blue .stat-v{color:var(--n-cyan)} .stat-green .stat-v{color:var(--n-green)} .stat-red .stat-v{color:var(--n-red)} .stat-amber .stat-v{color:var(--n-amber)} .carbon-audit-tabs{margin-bottom:12px} .carbon-audit-tabs{margin-bottom:12px} .trace-sec{margin-bottom:14px} .trace-h{font-size:13px;font-weight:700;color:var(--n-cyan);margin-bottom:6px} .trace-chain{font-size:12px;color:var(--t1);line-height:1.8;padding:10px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px} .trace-ver{font-size:12px;color:var(--n-green);padding:8px 12px;background:rgba(50,200,50,.08);border:1px solid rgba(50,200,50,.2);border-radius:8px;font-family:monospace} .trace-note{font-size:12px;color:var(--t2);line-height:1.7} .quota-bar{height:16px;background:rgba(0,0,0,.3);border-radius:8px;overflow:hidden;border:1px solid var(--border)} .quota-fill{height:100%;background:linear-gradient(90deg,var(--n-green),var(--n-cyan));border-radius:8px;transition:width .6s var(--tr)} .quota-cap{font-size:12px;color:var(--t2);margin-top:6px;text-align:center} /* —— 模块3 第三行：碳预算执行进度看板 —— */ /* 卡片内部左右横向分栏：左指标进度 · 右趋势图表 */ .budget-split{display:flex;gap:14px;align-items:stretch;min-height:0} .budget-left{flex:0 0 44%;min-width:0;display:flex;flex-direction:column;justify-content:center} .budget-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .budget-right .fill-grow-ech{flex:1 1 auto;min-height:208px;margin-top:6px} .budget-block{margin-bottom:6px} .budget-block-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:10px} .budget-chip{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600} .budget-chip.bf-green{background:rgba(50,200,100,.14);color:var(--n-green);border:1px solid rgba(50,200,100,.3)} .budget-chip.bf-orange{background:rgba(255,165,40,.14);color:var(--n-orange);border:1px solid rgba(255,165,40,.3)} .budget-chip.bf-red{background:rgba(255,90,90,.14);color:var(--n-red);border:1px solid rgba(255,90,90,.3)} .budget-row{margin-bottom:11px} .budget-row-h{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);margin-bottom:5px} .budget-row-v b{font-weight:800} .budget-row-v .bf-green{color:var(--n-green)} .budget-row-v .bf-orange{color:var(--n-orange)} .budget-row-v .bf-red{color:var(--n-red)} .budget-bar{position:relative;height:11px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:7px;overflow:hidden} .budget-fill{height:100%;border-radius:7px;transition:width .7s var(--tr)} .budget-fill.bf-green{background:linear-gradient(90deg,#1f9d57,var(--n-green))} .budget-fill.bf-orange{background:linear-gradient(90deg,#d98a1f,var(--n-orange))} .budget-fill.bf-red{background:linear-gradient(90deg,#d94646,var(--n-red));box-shadow:0 0 12px rgba(255,90,90,.5)} .budget-danger{position:absolute;top:-2px;width:2px;height:15px;background:var(--n-red);box-shadow:0 0 8px var(--n-red)} .budget-fore{font-size:11px;color:var(--t3);margin:8px 0 2px;line-height:1.5} .budget-fore.bf-green{color:var(--n-green)} .budget-fore.bf-orange{color:var(--n-orange)} .budget-fore.bf-red{color:var(--n-red)} .budget-foot{font-size:11px;color:var(--t3);margin-top:12px;padding-top:8px;border-top:1px dashed var(--border)} /* 第三行左：碳预算看板与右侧预警告警列表等高；内容纵向撑满、底部说明贴底，消除空白留白 */ #carbonBudget{display:flex;flex-direction:column;min-height:0} #carbonBudget .budget-block:last-of-type{margin-bottom:0} #carbonBudget .budget-foot{margin-top:auto} /* 第三行右：预警告警列表与左侧碳预算看板等高、内容区撑满、列表可滚动 */ #carbonAlertList{display:flex;flex-direction:column;min-height:0;overflow:hidden} #carbonAlertList .alert-list{flex:1 1 auto;min-height:0;max-height:none} /* —— 三面板纵向堆叠（碳预算 + 告警 + 审计）：每块占满整行宽 —— */ /* 顺序：碳预算（年度/月度+趋势图）→ 碳排放预警告警列表 → 多源数据接入与审计追溯 */ /* 上下充足的间距 22px，杜绝模块重叠、内容挤压 */ .carbon-row3{display:grid;grid-template-columns:1fr;gap:22px;margin-top:20px;align-items:stretch;min-height:0} .carbon-row3 .panel{min-height:0;display:flex;flex-direction:column;max-height:none} /* 卡片 header 不再强制多行，单行紧凑排布（标题左 + 副标题右 / 告警灯牌右） */ .carbon-row3 .panel-header{flex-wrap:nowrap;row-gap:6px;padding:14px 18px;display:flex;align-items:center} /* 标题不截断，整行宽下字号加大 */ .carbon-row3 .panel-title{flex:0 1 auto;font-size:15px;font-weight:700;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .carbon-row3 .panel-subtitle{flex:0 1 auto;font-size:11px;margin-top:0;margin-left:10px;color:var(--t2)} /* 告警灯牌靠右、不独占整行 */ .carbon-row3 .carbon-alert-tabs{flex:0 0 auto;width:auto;margin-bottom:0;margin-left:auto} /* 卡片主体使用块级自然排布；不再 flex 撑爆 */ .carbon-row3 .panel-body{flex:1 1 auto;min-height:0;overflow:visible;display:block;padding:16px 18px 18px} /* 整行卡片下 4 灯牌横向 4 列（在整行宽内利用空间） */ .carbon-row3 .audit-stat{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px} /* 预算卡横向布局：左指标 36% / 右趋势 64%，让趋势图利用整行宽度 */ .carbon-row3 .budget-left{flex:0 0 36%} .carbon-row3 .budget-right{flex:1 1 auto} .carbon-row3 #carbonBudgetChart{min-height:260px} /* 告警列表：2 列网格，整行宽度下更舒展 */ .carbon-row3 .alert-grid{grid-template-columns:1fr 1fr;gap:12px;max-height:none;overflow:visible;margin-bottom:14px} /* 审计表格：不需要 flex 滚动，让 audit 容器直接块级 + table 自带 max-height 滚动 */ .carbon-row3 #carbonAudit{display:block;min-height:0;overflow:visible} .carbon-row3 #carbonAudit .audit-stat{margin-bottom:12px} .carbon-row3 #carbonAudit .carbon-audit-tabs{margin-bottom:10px} .carbon-row3 #carbonAudit .audit-toolbar{margin-bottom:10px} .carbon-row3 #carbonAudit .table-wrap{max-height:380px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm)} .carbon-row3 #carbonAudit .audit-pager{margin-top:8px} .carbon-row3 #carbonBudget .fill-grow,#carbonAlertList .fill-grow{flex:0 0 auto} /* 数据来源 + 共 N 条 在卡片底部，常见分隔线 */ .carbon-row3 .budget-foot{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border)} /* —— 模块3 二级子导航（3.1~3.13） —— */ /* 碳排放核算管理 二级标签栏：完全复用 .eff-subnav 体系（与能效分析与诊断视觉统一） */ .sub-page-head{margin:4px 0 14px} .sph-title{font-size:19px;font-weight:800;color:var(--t1);display:flex;align-items:center} .sph-title::before{content:"";width:4px;height:18px;background:var(--accent);border-radius:3px;margin-right:10px;box-shadow:0 0 10px var(--accent)} .sph-sub{font-size:12px;color:var(--t3);margin:6px 0 0 14px} .carbon-sub-tabs{margin:0} .carbon-stat-row{margin:0 0 14px} .panel-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* 表单 */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-item{display:flex;flex-direction:column;gap:6px} .form-label{font-size:12px;color:var(--t2);font-weight:600} .inp{background:var(--panel-h);border:1px solid var(--border);border-radius:8px;color:var(--t1);font-size:13px;padding:9px 11px;outline:none;transition:.15s} .inp:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(38,166,154,.2)} .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(20px);background:rgba(20,40,72,.96);border:1px solid var(--border-h);color:#EAF2FF;padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:1400} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .btn-danger{color:#ff7a7a;border-color:rgba(255,90,90,.4)} .btn-danger:hover{background:rgba(255,90,90,.14)} /* —— 模块3 第三行：碳排放预警告警列表 —— */ .carbon-alert-tabs{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .cat-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;transition:transform .18s var(--tr),box-shadow .25s var(--tr),filter .2s var(--tr)} .cat-badge.cat-lv{cursor:pointer} .cat-badge.cat-lv:hover{transform:translateY(-1px);filter:brightness(1.18)} .cat-badge.cat-red{background:rgba(255,90,90,.16);color:var(--n-red);border:1px solid rgba(255,90,90,.35)} .cat-badge.cat-orange{background:rgba(255,165,40,.16);color:var(--n-orange);border:1px solid rgba(255,165,40,.35)} .cat-badge.cat-yellow{background:rgba(240,210,60,.16);color:var(--n-yellow);border:1px solid rgba(240,210,60,.35)} .cat-badge.cat-lv.active{transform:translateY(-1px) scale(1.06);box-shadow:0 0 0 1.5px currentColor,0 0 18px currentColor;font-weight:800} .cat-badge.cat-red.active{background:rgba(255,90,90,.32);border-color:rgba(255,90,90,.95)} .cat-badge.cat-orange.active{background:rgba(255,165,40,.32);border-color:rgba(255,165,40,.95)} .cat-badge.cat-yellow.active{background:rgba(240,210,60,.32);border-color:rgba(240,210,60,.95)} .cat-count{font-size:12px;color:var(--t2);margin-left:auto} .alert-list{max-height:340px;overflow-y:auto;padding-right:4px} /* 告警列表改为双列网格，利用卡片横向宽度、降低纵向高度 */ .alert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-height:330px;overflow-y:auto;padding-right:4px} .alert-grid .alert-item{margin-bottom:0} .alert-item{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:var(--bg-glass);border:1px solid var(--border);border-left-width:3px;border-radius:8px;margin-bottom:9px;transition:border-color .25s var(--tr),box-shadow .25s var(--tr)} .alert-item:hover{border-color:var(--border-h);box-shadow:0 6px 18px rgba(50,150,255,.14)} .alert-item.cat-red{border-left-color:var(--n-red)} .alert-item.cat-orange{border-left-color:var(--n-orange)} .alert-item.cat-yellow{border-left-color:var(--n-yellow)} .alert-lvl-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex:0 0 auto} .alert-item.cat-red .alert-lvl-dot{background:var(--n-red);box-shadow:0 0 10px var(--n-red)} .alert-item.cat-orange .alert-lvl-dot{background:var(--n-orange);box-shadow:0 0 10px var(--n-orange)} .alert-item.cat-yellow .alert-lvl-dot{background:var(--n-yellow);box-shadow:0 0 10px var(--n-yellow)} .alert-main{flex:1;min-width:0} .alert-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .alert-type{font-size:13px;font-weight:700;color:var(--t1)} .alert-time{font-size:11px;color:var(--t3);margin-left:auto} .alert-msg{font-size:12px;color:var(--t2);margin:5px 0 3px;line-height:1.5} .alert-obj{font-size:11px;color:var(--t3)} /* 文本级红橙黄绿着色（用于占比/合格率等） */ .cat-green{color:var(--n-green);font-weight:700} .cat-orange{color:var(--n-orange);font-weight:700} .cat-red{color:var(--n-red);font-weight:700} .cat-yellow{color:var(--n-yellow);font-weight:700} /* 核算引擎 / 数据质量：操作区与日志 */ .calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .calc-log{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding:10px;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px} .cl-item{font-size:12px;color:var(--t2);line-height:1.5;padding-left:12px;border-left:2px solid var(--accent)} .cl-t{color:var(--t3);font-size:11px;margin-right:6px} /* —— 模块3 第四行：审计追溯工具栏 + 分页器 —— */ /* 审计追溯状态标签可点击筛选（红/橙/黄/绿） */ .audit-status-tag{cursor:pointer;transition:transform .15s var(--tr),box-shadow .2s var(--tr)} .audit-status-tag:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(50,150,255,.25)} /* 碳核查支撑三级明细页 */ .sub-detail-back{background:var(--bg-glass);border:1px solid var(--border);color:var(--t1);font-size:12px;padding:7px 14px;border-radius:8px;cursor:pointer;margin-bottom:12px;transition:.18s var(--tr)} .sub-detail-back:hover{border-color:var(--border-h);background:rgba(50,150,255,.12);color:var(--accent)} .issue-row{display:flex;gap:10px;padding:10px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;margin-bottom:9px} .issue-no{font-size:12px;font-weight:700;color:var(--n-orange);background:rgba(255,165,40,.14);border:1px solid rgba(255,165,40,.32);border-radius:6px;padding:2px 7px;flex:0 0 auto} .issue-main{flex:1;min-width:0} .issue-desc{font-size:13px;color:var(--t1);line-height:1.5} .issue-meta{font-size:11px;color:var(--t3);margin-top:4px} .attach-list{display:flex;flex-direction:column;gap:9px} .attach-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px} .attach-ico{font-size:15px} .attach-name{flex:1;min-width:0;font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .audit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .audit-toolbar .at-left{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)} .audit-toolbar .at-right{display:flex;align-items:center;gap:8px} .audit-pager{display:flex;align-items:center;gap:10px;margin-top:12px;justify-content:flex-end} .ap-info{font-size:12px;color:var(--t2)} .pg-btn{background:var(--bg-glass);border:1px solid var(--border);color:var(--t1);font-size:12px;padding:5px 14px;border-radius:7px;cursor:pointer;transition:all .2s var(--tr)} .pg-btn:hover:not([disabled]){border-color:var(--border-h);background:rgba(50,150,255,.12)} .pg-btn[disabled]{opacity:.4;cursor:not-allowed} .empty-tip{text-align:center;color:var(--t3);font-size:12px;padding:18px 0} /* —— 源网荷储协同调度：边界条件可展开规则 —— */ .rule-item{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;transition:border-color .25s var(--tr),box-shadow .25s var(--tr)} .rule-item:hover{border-color:var(--border-h);box-shadow:0 6px 20px rgba(50,150,255,.16)} .rule-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none} .rule-dot{width:9px;height:9px;border-radius:50%;background:var(--n-cyan);box-shadow:0 0 10px var(--n-cyan);flex:0 0 auto} .rule-head b{font-size:13px;color:var(--t1);flex:1} .rule-arrow{color:var(--t2);font-size:13px;transition:transform .2s var(--tr)} .rule-detail{padding:0 16px 14px 33px;border-top:1px dashed var(--border)} .rule-d{font-size:12px;color:var(--t2);line-height:1.7;margin-top:8px} .rule-d b{color:var(--t1)} [data-theme="light"] .carbon-kpi .kpi-hint{color:#0a6ed1} [data-theme="light"] .scope-desc{color:#4a5a72} [data-theme="light"] .m-metric{background:rgba(255,255,255,.7);border-color:rgba(20,70,140,.15)} [data-theme="light"] .m-metric-l,[data-theme="light"] .modal-note,[data-theme="light"] .trace-note{color:#4a5a72} [data-theme="light"] .modal-note{background:rgba(230,240,252,.7);border-left-color:#0a6ed1} [data-theme="light"] .audit-stat .stat-l,[data-theme="light"] .scope-desc{color:#4a5a72} [data-theme="light"] .trace-chain{background:rgba(230,240,252,.7);border-color:rgba(20,70,140,.18)} [data-theme="light"] .trace-ver{background:rgba(50,160,50,.1);border-color:rgba(50,160,50,.25)} [data-theme="light"] .quota-bar{background:rgba(20,40,80,.1)} @media (max-width:900px){ .audit-stat{grid-template-columns:repeat(2,1fr)} } /* ===== 子分类明细：紫色筛选标签 / 摘要 / 空态 / 图表过渡 ===== */ .seg-purple .seg-btn{color:var(--t3);display:inline-flex;align-items:center;gap:5px} .seg-purple .seg-btn:hover:not(.active){color:var(--t1);background:rgba(177,76,255,.10)} .seg-purple .seg-btn.active{background:linear-gradient(135deg,#8B5CF6,var(--n-purple));color:#fff;box-shadow:0 2px 12px rgba(177,76,255,.38)} .seg-purple .seg-btn.is-empty:not(.active){opacity:.45} .seg-count{display:inline-block;min-width:16px;padding:0 4px;border-radius:8px;font-size:10px;line-height:15px;text-align:center;background:rgba(123,141,171,.20);color:var(--t2)} .seg-purple .seg-btn.active .seg-count{background:rgba(255,255,255,.26);color:#fff} .sub-meta{font-size:11px;color:var(--t2);margin:-4px 0 8px;line-height:1.6} .sub-meta b{color:var(--t1);font-weight:600} .tbl-empty{text-align:center;padding:34px 12px;color:var(--t3);font-size:12px} @keyframes chartFade{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}} .chart-fade{animation:chartFade .45s cubic-bezier(.22,.61,.36,1)} [data-theme="light"] .seg-purple .seg-btn{color:#7a879b} [data-theme="light"] .seg-purple .seg-btn:hover:not(.active){color:#1a2538;background:rgba(139,92,246,.10)} [data-theme="light"] .seg-count{background:rgba(26,37,56,.10);color:#4a5a72} [data-theme="light"] .sub-meta{color:#4a5a72} /* ===== 产品碳足迹追踪（7.5 迭代） ===== */ .foot-select{background:var(--bg-glass);color:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;outline:none;cursor:pointer} .foot-select:focus{border-color:var(--border-h)} .foot-live{font-size:12px;color:var(--t2);background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:4px} .foot-live b{font-size:15px;font-weight:800} .v-green{color:var(--n-green)} .tbl-scroll{max-height:280px;overflow:auto;border-radius:var(--r-sm);margin-top:2px} .cert-scroll{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px} .tbl-foot th{position:sticky;top:0;background:rgba(15,26,48,.98);z-index:1} .bench-info{position:relative;display:inline-block;margin-top:12px;font-size:11px;color:var(--n-cyan);cursor:help;border:1px dashed rgba(50,150,255,.35);border-radius:8px;padding:5px 10px} .bench-info .bench-pop{position:absolute;left:0;top:calc(100% + 8px);width:264px;background:rgba(8,16,34,.98);border:1px solid rgba(50,150,255,.45);border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.6;color:var(--t1);box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s var(--tr);z-index:50;white-space:normal} .bench-info:hover .bench-pop{opacity:1;visibility:visible;transform:translateY(0)} [data-theme="light"] .bench-info .bench-pop{background:rgba(255,255,255,.98);color:#1a2538} .foot-lca-hint{font-size:11px;color:var(--n-cyan);margin-top:8px;padding:5px 10px;border:1px dashed rgba(50,150,255,.3);border-radius:8px;background:rgba(50,150,255,.06)} .foot-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:-4px 0 14px} .ff-label{font-size:12px;font-weight:700;color:var(--n-cyan);display:flex;align-items:center;gap:6px} .ff-label::before{content:'';width:4px;height:14px;background:linear-gradient(var(--n-cyan),var(--n-blue));border-radius:2px;display:inline-block} .ff-sel{background:rgba(15,26,48,.6);border:1px solid var(--border);border-radius:8px;color:var(--t1);font-size:12px;padding:6px 10px;outline:none;cursor:pointer} .ff-sel:focus{border-color:var(--n-blue)} .cbam-prev{display:flex;flex-direction:column;gap:12px} .cbam-prev-field{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px} .cbam-prev-label{color:var(--n-cyan);font-weight:700} .cbam-prev-value{color:var(--t1);font-weight:600;letter-spacing:.3px} .cbam-dl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px} .cbam-dl-label{font-size:12px;color:var(--t2);font-weight:600} .cbam-dl-row .ff-sel{min-width:190px} .ff-count{font-size:11px;color:var(--t2);margin-left:auto} .note-box{padding:16px;text-align:center;color:var(--t2);font-size:13px;background:var(--bg-glass);border:1px dashed var(--border);border-radius:10px} .foot-base-grid{gap:12px} .foot-base-grid .carbon-kpi{margin:0} .base-sec{margin-top:14px} .base-sec-h{font-size:13px;font-weight:700;color:var(--n-cyan);margin-bottom:8px;display:flex;align-items:center;gap:6px} .base-sec-h::before{content:'';width:4px;height:14px;background:linear-gradient(var(--n-cyan),var(--n-blue));border-radius:2px;display:inline-block} .base-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:12px} .base-kv:last-child{border-bottom:none} .base-kv span{color:var(--t2)} .base-kv b{color:var(--t1);font-weight:600;text-align:right} .base-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .base-stage{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:10px 12px} .base-stage.off{opacity:.55;border-style:dashed} .base-stage .bs-top{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--t1)} .base-stage .bs-dot{width:8px;height:8px;border-radius:50%;background:var(--n-green);box-shadow:0 0 8px var(--n-green)} .base-stage.off .bs-dot{background:var(--n-amber);box-shadow:0 0 8px var(--n-amber)} .base-stage .bs-rule{font-size:11px;color:var(--t2);margin-top:5px;line-height:1.5} .base-stage .bs-ver{font-size:11px;color:var(--n-cyan);margin-top:4px} .detail-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .dg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:8px} .dg-tab{font-size:12px;padding:6px 14px;border-radius:8px;cursor:pointer;color:var(--t2);border:1px solid transparent;transition:.15s var(--tr)} .dg-tab:hover{color:var(--t1);background:rgba(50,150,255,.08)} .dg-tab.active{color:#fff;background:linear-gradient(135deg,var(--n-blue),var(--n-cyan));border-color:rgba(50,150,255,.5);box-shadow:0 4px 14px rgba(50,150,255,.25)} .dg-body{min-height:160px} .dg-stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2px} .dg-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t1);background:var(--bg-glass);border:1px solid var(--border);border-radius:20px;padding:6px 14px;white-space:nowrap;flex-shrink:0} .dg-pill .tag{white-space:nowrap;flex-shrink:0} /* 数据审核机制筛选标签（点击切换 + 计数同源真实数据） */ .dg-audit-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .dg-audit-tab{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer;transition:all .18s var(--tr);font-weight:600} .dg-audit-tab:hover{border-color:var(--border-h);color:var(--n-cyan);box-shadow:0 0 0 2px rgba(50,150,255,.15)} .dg-audit-tab.active{border-color:var(--n-cyan);background:rgba(50,150,255,.16);color:#fff} .dg-audit-tab.active .dg-at-name{color:#fff} .dg-empty{text-align:center;color:var(--t2);padding:18px 0} /* 原始凭证操作列按钮（按状态控制 + 均匀排布） */ .op-grp{display:inline-flex;gap:6px;flex-wrap:wrap} .op-grp .btn{flex:1 1 auto;min-width:64px} .btn.is-loading{opacity:.7;cursor:progress} .btn[disabled]{cursor:not-allowed;opacity:.55} /* 碳排放预警：统计卡数字配色（红/橙/黄/蓝） */ .stat-orange .stat-v{color:var(--n-orange)} .stat-yellow .stat-v{color:#fbbf24} /* 碳排放预警：红色预警行柔和呼吸闪烁（hover 暂停） */ .warn-row-red{animation:warnBreathe 2.6s ease-in-out infinite} .warn-row-red:hover{animation-play-state:paused} @keyframes warnBreathe{0%,100%{background:rgba(239,68,68,.06)}50%{background:rgba(239,68,68,.20);filter:brightness(1.08)}} .dg-log{display:flex;flex-direction:column;gap:6px} .dg-log-i{display:flex;gap:10px;font-size:11.5px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08)} .dg-log-t{color:var(--n-cyan);flex:0 0 130px} .dg-log-a{color:var(--t1);flex:1} .dq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .dq-item{display:flex;flex-direction:column;align-items:center;gap:8px} .dq-ring{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff} .dq-ring span{background:rgba(8,16,34,.85);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center} .dq-label{font-size:12px;color:var(--t2)} .foot-rc-grid{gap:12px} /* 模块3 数据治理与溯源面板 */ .gov-body{min-height:120px;margin-top:20px} .gov-qual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:14px} .gov-qual-card{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0} .gov-qual-hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .gov-qual-t{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gov-qual-n{font-size:22px;font-weight:800;line-height:1;white-space:nowrap} .gov-qual-n i{font-size:12px;font-style:normal;color:var(--t2);margin-left:2px;font-weight:600} .gov-qual-ring{width:100%;min-width:0} .gov-qual-cap{font-size:12px;color:var(--t2);text-align:center} .gov-qgrid{gap:12px} .gov-qgrid .kpi-card{cursor:default} .gov-ring-grid{gap:14px} .gov-ring-wrap{display:flex;flex-direction:column;align-items:center} .gov-ring-wrap>div:first-child{width:100%} .gov-ring-lb{font-size:12px;color:var(--t2);margin-top:4px;text-align:center} .rc-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:.15s var(--tr);display:flex;flex-direction:column;gap:4px} .rc-card:hover{border-color:var(--n-blue);box-shadow:0 6px 20px rgba(50,150,255,.18);transform:translateY(-2px)} .rc-ic{font-size:24px} .rc-t{font-size:14px;font-weight:700;color:var(--t1)} .rc-s{font-size:11px;color:var(--t2)} .rep-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .rep-field{display:flex;flex-direction:column;gap:5px} .rep-field label{font-size:11px;color:var(--t2)} .rep-preview{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(8,16,34,.4)} .rep-doc{font-size:12px;color:var(--t1);line-height:1.6} .rep-cover{text-align:center;padding:14px;border-bottom:1px dashed var(--border);margin-bottom:12px} .rep-cover-h{font-size:18px;font-weight:800;color:#fff} .rep-cover-s{font-size:13px;color:var(--n-cyan);margin-top:4px} .rep-cover-m{font-size:11px;color:var(--t2);margin-top:6px} .rep-sec{margin-bottom:12px} .rep-sec-h{font-size:12.5px;font-weight:700;color:var(--n-cyan);margin-bottom:5px} .rep-sec p{font-size:12px;color:var(--t1)} .cert-list{display:flex;flex-direction:column;gap:10px} .cert-block{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:10px 12px} .cert-block-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1)} .cert-org{font-size:11px;color:var(--t2);margin:5px 0 8px} .cert-conds{display:flex;flex-wrap:wrap;gap:6px} .cert-cond{font-size:11px;padding:3px 9px;border-radius:14px;border:1px solid var(--border)} .cert-cond.ok{color:var(--n-green);border-color:rgba(102,187,106,.5);background:rgba(102,187,106,.1)} .cert-cond.pend{color:var(--n-amber);border-color:rgba(255,167,38,.5);background:rgba(255,167,38,.1)} .src-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .src-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:10px 12px} .src-ic{font-size:18px;line-height:1.2;flex:0 0 auto} .src-meta{flex:1;min-width:0} .src-label{font-size:11px;color:var(--t2);margin-bottom:3px} .src-val{font-size:12.5px;color:var(--t1);line-height:1.5;word-break:break-word} .src-chain{margin-top:12px;background:linear-gradient(135deg,rgba(50,150,255,.1),rgba(38,198,218,.06));border:1px solid rgba(50,150,255,.35);border-radius:12px;padding:12px 14px} .src-chain-h{font-size:12px;font-weight:700;color:var(--n-cyan);margin-bottom:8px;display:flex;align-items:center;gap:6px} .src-chain-h::before{content:'';width:4px;height:14px;background:linear-gradient(var(--n-cyan),var(--n-blue));border-radius:2px;display:inline-block} .src-chain-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:12px} .src-chain-row:last-of-type{border-bottom:none} .src-chain-row span{color:var(--t2)} .src-chain-row b{color:var(--t1);font-weight:600} [data-theme="light"] .sub-meta b{color:#1a2538} [data-theme="light"] .tbl-empty{color:#8390a6} /* —— 模块顶部一级标题（统一参考图样式：5px 青蓝竖条 + 27px/800 主标题 + 12px 副标题） —— */ .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:12px} .ph-left{display:flex;align-items:center;gap:14px;min-width:0} .ph-bar{flex-shrink:0;width:5px;height:34px;border-radius:3px;background:linear-gradient(180deg,#4FC3F7,#26C6DA);box-shadow:0 0 14px rgba(79,195,247,.65)} .ph-title-wrap{display:flex;flex-direction:column;gap:4px;min-width:0} .ph-title{font-size:27px;font-weight:800;letter-spacing:1px;color:#EAF2FF;text-shadow:0 0 20px rgba(79,195,247,.35);display:flex;align-items:center;gap:8px;line-height:1.15} .ph-sub{font-size:12px;color:var(--t2);letter-spacing:.3px} .ph-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* —— ESG 报告与合规管理：模块专属样式 —— */ .module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap} .mh-left{display:flex;flex-direction:column;gap:3px} .mh-title{font-size:27px;font-weight:800;letter-spacing:1px;color:#EAF2FF;text-shadow:0 0 20px rgba(79,195,247,.35);display:flex;align-items:center;gap:8px} .mh-sub{font-size:12px;color:var(--t3)} .fb-label{font-size:12px;color:var(--t2)} .fselect{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--t1);font-size:12px;outline:none} .fselect:focus{border-color:var(--border-h)} .gri-table{width:100%;border-collapse:collapse;font-size:12px} .gri-table th,.gri-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--border)} .gri-table th{color:var(--t2);font-weight:600;background:rgba(255,255,255,.02)} .gri-table tbody tr:hover{background:rgba(50,150,255,.05)} .gri-name{cursor:pointer;color:var(--t1)} .gri-name:hover{color:var(--n-cyan)} .caret{font-size:10px;color:var(--t2);margin-left:2px} .gri-detail-row td{background:rgba(11,22,44,.4)} .sort-th{cursor:pointer} .sort-th:hover{color:var(--n-cyan)} .trace-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px} @media(max-width:720px){.trace-grid{grid-template-columns:1fr}} .task-list{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--t2);line-height:1.8} .task-list li{margin-bottom:4px} .comp-item{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden} .comp-item.comp-fail{border-color:rgba(255,50,50,.35)} .comp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none} .comp-name{flex:1;font-size:13px;color:var(--t1)} .comp-ic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} .comp-ic.ic-ok{background:rgba(50,200,50,.15);color:var(--n-green);cursor:help} .comp-ic.ic-no{background:rgba(255,50,50,.15);color:var(--n-red);cursor:help} .comp-detail{padding:4px 16px 14px;border-top:1px dashed var(--border)} .esg-2col{display:grid;grid-template-columns:1.5fr 1fr;gap:14px} @media(max-width:900px){.esg-2col{grid-template-columns:1fr}} .esg-col{display:flex;flex-direction:column;gap:10px} .esg-score{background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;padding:14px} .score-top{text-align:center;margin-bottom:10px} .score-num{font-size:32px;font-weight:800;color:var(--n-cyan)} .score-num span{font-size:14px;color:var(--t2);font-weight:500;margin-left:4px} .score-stars{font-size:20px;color:#FFD54F;letter-spacing:2px} .score-sub{font-size:11px;color:var(--t2);margin-top:2px} .filter-tag{background:var(--bg-glass);border:1px solid var(--border);color:var(--t2);padding:5px 12px;border-radius:18px;cursor:pointer;font-size:12px;transition:.2s} .filter-tag:hover{color:var(--t1);border-color:var(--border-h)} .filter-tag.active{background:linear-gradient(135deg,var(--n-purple),var(--n-cyan));color:#fff;border-color:transparent} .tpl-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px} .tpl-card:hover{border-color:var(--border-h)} .tpl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none} .tpl-meta{font-size:11px;color:var(--t3);margin-top:6px} .tpl-detail{padding-top:10px;margin-top:8px;border-top:1px dashed var(--border)} .risk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px} @media(max-width:720px){.risk-stats{grid-template-columns:repeat(2,1fr)}} .risk-item{border-radius:10px;margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s} .risk-item.risk-safe{border:1px solid rgba(50,200,50,.3)} .risk-item.risk-warn{border:1px solid rgba(255,179,0,.45);box-shadow:0 0 0 1px rgba(255,179,0,.15)} .risk-item.risk-danger{border:1px solid rgba(255,50,50,.55);box-shadow:0 0 0 1px rgba(255,50,50,.2);background:rgba(255,50,50,.04)} .risk-head{display:flex;align-items:center;gap:10px;padding:11px 14px} .risk-ic{font-size:14px} .risk-name{flex:1;font-size:13px;color:var(--t1)} .risk-detail{padding:4px 16px 14px;border-top:1px dashed var(--border)} .risk-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px} @media(max-width:720px){.risk-detail-grid{grid-template-columns:1fr}} .chart-xs{height:120px} .step-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px} @media(max-width:720px){.step-nav{grid-template-columns:repeat(2,1fr)}} .step-item{border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center;cursor:pointer;opacity:.55;transition:.2s;background:var(--bg-glass)} .step-item:hover{opacity:.8} .step-item.active{opacity:1;border-color:var(--n-cyan);box-shadow:0 6px 22px rgba(50,150,255,.25);transform:scale(1.04);background:linear-gradient(135deg,rgba(50,150,255,.12),rgba(177,76,255,.12))} .step-no{font-size:20px;font-weight:800;color:var(--n-cyan)} .step-t{font-weight:700;font-size:13px;color:var(--t1);margin:4px 0 2px} .step-d{font-size:11px;color:var(--t2)} .step-block{padding:6px 2px} .step-block h4{font-size:14px;color:var(--t1);margin:0 0 10px} .pick-row{display:flex;flex-wrap:wrap;gap:10px} .tpl-pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t1);background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:7px 11px;cursor:pointer} .export-fmts{display:flex;gap:10px;flex-wrap:wrap} .export-fmt{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:9px 18px;color:var(--t1);font-size:13px;cursor:pointer;transition:.2s} .export-fmt:hover{border-color:var(--n-cyan);color:var(--n-cyan)} .mini-bar-fill{height:100%;background:var(--n-cyan);border-radius:5px;transition:width .3s var(--tr);width:100%} .btn-disabled{background:rgba(120,130,150,.25)!important;color:var(--t3)!important;cursor:not-allowed;border-color:var(--border)!important} /* —— 智能运维管理：模块专属样式 —— */ .ops-kpi{cursor:pointer;transition:border-color .2s, box-shadow .2s, transform .2s} .ops-kpi:hover{border-color:var(--n-cyan);box-shadow:0 8px 26px rgba(50,150,255,.28);transform:translateY(-2px)} .kpi-card .kpi-hint{font-size:10px;color:var(--n-cyan);margin-top:6px;opacity:.55} .kpi-card:hover .kpi-hint{opacity:1} .row-hl{animation:rowHl 1.6s ease} @keyframes rowHl{0%{background:rgba(50,150,255,.35)}100%{background:transparent}} .trace-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:12px;color:var(--t2)} .trace-row b{color:var(--t1);font-weight:600} .mini-btn{display:inline-block;background:rgba(50,150,255,.12);border:1px solid var(--border);color:var(--n-cyan);border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer;margin-right:4px;transition:.2s} .mini-btn:hover{background:rgba(50,150,255,.24)} .dev-ops{white-space:nowrap} .seg-btn-group{display:inline-flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:3px} .kb-title{font-size:13px;color:var(--t1);cursor:pointer;padding:4px 0;font-weight:600} .kb-title:hover{color:var(--n-cyan)} .kb-line{font-size:12px;color:var(--t2);line-height:1.7;margin:2px 0} .kb-meta{font-size:11px;color:var(--t3);margin-top:4px} .kb-detail{padding:8px 0 10px;border-top:1px dashed var(--border);margin-top:4px} .spare-meta{font-size:11px;color:var(--t3);margin-top:4px} .rul-item{border-radius:10px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);transition:box-shadow .2s} .rul-item.rul-red{border-color:rgba(255,50,50,.5);background:rgba(255,50,50,.05)} .rul-item.rul-amber{border-color:rgba(255,179,0,.45);background:rgba(255,179,0,.05)} .rul-item.rul-green{border-color:rgba(50,200,50,.35);background:rgba(50,200,50,.04)} .rul-item:hover{box-shadow:0 6px 20px rgba(0,0,0,.25)} .rul-days{font-size:12px;color:var(--t1)} .rul-sub{font-size:11px;color:var(--t3);margin-top:4px} /* ===== 数字孪生可视化专属 ===== */ .twin-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .twin-edges .te-line{stroke:rgba(79,195,247,.5);stroke-width:.35;stroke-dasharray:2 2;animation:teflow 1.2s linear infinite} @keyframes teflow{to{stroke-dashoffset:-8}} .te-label{position:absolute;transform:translate(-50%,-50%);font-size:10px;color:#bfe6ff;background:rgba(11,22,44,.72);border:1px solid rgba(79,195,247,.35);border-radius:10px;padding:1px 6px;white-space:nowrap;pointer-events:none;z-index:2} .twin-node{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;z-index:3;transition:opacity .3s,transform .25s} .twin-node .tn-dot{width:var(--sz,40px);height:var(--sz,40px);max-width:62px;max-height:62px;border-radius:50%;margin:0 auto 4px;transition:transform .25s,box-shadow .25s} .twin-node .tn-label{font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);white-space:nowrap} .twin-node .tn-power{font-size:10px;color:#bfe6ff;margin-top:2px;font-family:'Times New Roman',monospace} .twin-node.twin-dim{opacity:.22} .twin-node.twin-hl{transform:translate(-50%,-50%) scale(1.18);z-index:6} .twin-node.twin-hl .tn-dot{box-shadow:0 0 24px rgba(79,195,247,.9)!important} .twin-node.twin-sel .tn-dot{outline:2px solid #fff;outline-offset:2px} .twin-node.twin-alarm .tn-dot{background:#FF3232!important;box-shadow:0 0 16px #FF3232!important;animation:tnblink 1s ease-in-out infinite} @keyframes tnblink{0%,100%{opacity:1}50%{opacity:.35}} .twin-panel{position:absolute;z-index:20;width:300px;max-width:82%;background:rgba(11,22,44,.97);border:1px solid var(--border-h);border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.5);overflow:hidden} .ttp-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border);cursor:move;background:linear-gradient(90deg,rgba(50,150,255,.16),rgba(177,76,255,.10))} .ttp-type{font-style:normal;font-size:10px;color:var(--n-cyan);background:rgba(50,150,255,.12);border-radius:6px;padding:1px 7px;margin-left:6px} .ttp-close{cursor:pointer;color:var(--t2);font-size:14px} .ttp-close:hover{color:var(--n-red)} .ttp-body{padding:12px;max-height:360px;overflow:auto} .ttp-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .ttp-m{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:7px 9px} .ttp-m span{display:block;font-size:10px;color:var(--t3)} .ttp-m b{font-size:13px;color:var(--t1)} .ttp-sub{font-size:12px;color:var(--n-cyan);font-weight:600;margin:10px 0 6px} .ttp-devs{display:flex;flex-wrap:wrap;gap:6px} .ttp-dev{font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;padding:3px 8px} .ttp-bar{height:8px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden} .ttp-bar i{display:block;height:100%;border-radius:6px} .tw-back{font-size:12px;color:var(--n-cyan);cursor:pointer;margin-bottom:8px} .tw-back:hover{text-decoration:underline} .tw-node-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)} .tw-metric{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:.2s} .tw-metric:hover{border-color:var(--border-h);background:var(--bg-glass)} .tw-metric span{font-size:12px;color:var(--t2)} .tw-metric b{font-size:14px;color:var(--t1);font-weight:700} .tw-metric b i{font-size:10px;color:var(--t3);font-style:normal;font-weight:400} .tw-sim-hint{font-size:11px;color:var(--t3);margin-top:4px} .tw-concl-h{font-size:14px;font-weight:700;color:var(--n-cyan);margin-bottom:6px} .tw-concl-desc{font-size:12px;color:var(--t2);line-height:1.7;margin-bottom:10px} .tw-concl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .tw-concl-t{font-size:12px;font-weight:700;margin-bottom:6px} .tw-concl-t.red{color:var(--n-red)} .tw-concl-t.green{color:var(--n-green)} .tw-concl-li{font-size:12px;color:var(--t1);line-height:1.7} .tw-concl-dur{margin-top:10px;font-size:12px;color:var(--t2)} .tw-concl-dur b{color:var(--n-amber)} /* ===== 园区综合管理门户 ===== */ .portal-kpi .kpi-ico{font-size:22px;margin-bottom:6px} .portal-kpi:hover{border-color:var(--n-cyan);box-shadow:0 8px 30px rgba(38,198,218,.18)} .pp-sec{font-size:12px;color:var(--n-cyan);font-weight:600;margin:12px 0 6px} .pp-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pp-dims{display:flex;flex-direction:column;gap:8px} .pp-dim-top{display:flex;justify-content:space-between;font-size:12px;color:var(--t1);margin-bottom:3px} .pp-bar{height:7px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden} .pp-bar i{display:block;height:100%;border-radius:6px;background:var(--n-green)} .pp-rank{font-size:13px;color:var(--t1);padding:8px 0} .pp-rank-list{display:flex;flex-direction:column;gap:4px} .pp-rank-row{display:flex;justify-content:space-between;font-size:12px;color:var(--t1);padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.04)} .pp-rank-row.pp-me{background:rgba(102,187,106,.14);color:var(--n-green);font-weight:600} .pp-list{display:flex;flex-direction:column;gap:4px} .pp-li{font-size:12px;color:var(--t1);line-height:1.6} .pp-kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px} .pp-kvrow{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--border)} .pp-kvrow span{color:var(--t3)} .pp-kvrow b{color:var(--t1)} .pp-row{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--t2);padding:6px 0} .pp-row b{color:var(--t1)} .pp-big{font-size:28px;font-weight:bold;color:var(--n-purple);margin:6px 0} .pp-input{background:var(--bg-glass);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--t1);font-size:13px;outline:none} .pp-input:focus{border-color:var(--n-cyan)} .pp-menu{display:flex;flex-wrap:wrap;gap:6px} .pp-menu-item{font-size:12px;color:var(--n-cyan);background:rgba(38,198,218,.1);border:1px solid rgba(38,198,218,.2);border-radius:6px;padding:4px 9px} .pp-range{font-size:12px;color:var(--t1);padding:8px 10px;background:rgba(255,255,255,.04);border-radius:8px;line-height:1.6} .pp-perm{font-size:12px;color:var(--t2);margin-top:10px} .pp-role-desc{font-size:12px;color:var(--t2);line-height:1.7;margin-bottom:6px} .role-name{position:relative;cursor:help;color:var(--t1)} .role-q{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;background:rgba(50,150,255,.18);color:var(--n-cyan);font-size:10px;margin-left:2px} .role-tip{display:none;position:absolute;left:0;top:130%;width:240px;z-index:9999;background:rgba(13,22,42,.98);border:1px solid var(--border-h);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--t1);line-height:1.6;box-shadow:0 10px 30px rgba(0,0,0,.5)} .role-name:hover .role-tip{display:block} .ov-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .25s var(--tr);position:relative;overflow:hidden} .ov-card:hover{transform:translateY(-3px);border-color:var(--n-cyan);box-shadow:0 8px 30px rgba(38,198,218,.16)} /* ===== 门户模块重构样式 (#89) ===== */ .sec-head{display:flex;align-items:baseline;gap:12px;margin:6px 0 12px} .sec-title{font-size:15px;font-weight:700;color:var(--t1);position:relative;padding-left:11px;line-height:1.3} .sec-title::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:linear-gradient(var(--n-cyan),var(--n-green))} .sec-sub{font-size:12px;color:var(--t3)} .portal-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r);background:linear-gradient(135deg,rgba(38,198,218,.06),rgba(102,187,106,.04));position:relative;overflow:hidden} .portal-hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#4FC3F7,#26C6DA);box-shadow:0 0 14px rgba(79,195,247,.65)} .portal-hero-l{min-width:0} .portal-hero-t{font-size:27px;font-weight:800;letter-spacing:1px;color:#EAF2FF;text-shadow:0 0 20px rgba(79,195,247,.35);display:flex;align-items:center;gap:8px;line-height:1.15} .portal-hero-sub{font-size:12px;color:var(--t3);margin-top:5px;line-height:1.6} .portal-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .portal-role{font-size:11px;color:var(--n-cyan);background:rgba(38,198,218,.1);border:1px solid rgba(38,198,218,.22);border-radius:20px;padding:3px 11px;white-space:nowrap} .portal-hero-r{display:flex;align-items:center;flex-shrink:0} @media(max-width:760px){.portal-hero{flex-direction:column}.portal-hero-r{width:100%}.portal-hero-r .filter-bar{width:100%}} .ov-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .ov-label{font-size:12px;color:var(--t2)} .ov-rate{font-size:12px;font-weight:700} .ov-val{font-size:24px;font-weight:bold;color:var(--t1)} .ov-unit{font-size:12px;color:var(--t2);font-weight:400;margin-left:4px} .ov-bar{height:6px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;margin-top:10px} .ov-bar i{display:block;height:100%;border-radius:6px} .ov-hint{font-size:10px;color:var(--t3);margin-top:5px} /* ===== 技术架构核查 ===== */ .arch-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px} .arch-layer-tag{cursor:pointer;border:1px solid var(--border);border-radius:12px;padding:14px 14px 12px;background:linear-gradient(180deg,rgba(79,195,247,.05),rgba(13,28,54,.4));transition:border-color .2s,box-shadow .2s,transform .2s} .arch-layer-tag:hover{border-color:var(--n-cyan);box-shadow:0 6px 18px rgba(38,198,218,.18);transform:translateY(-2px)} .alt-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--n-blue);color:#04101f;font-weight:700;font-size:12px;margin-bottom:6px} .alt-name{font-weight:600;font-size:15px;color:var(--t1);margin-bottom:8px} .alt-items{display:flex;flex-wrap:wrap;gap:5px} .alt-chip{font-size:11px;color:var(--t2);background:rgba(79,195,247,.1);border:1px solid rgba(79,195,247,.2);padding:2px 7px;border-radius:6px} .arch-list{margin:4px 0 0;padding-left:18px;color:var(--t2);font-size:12px;line-height:1.9} .arch-list li{margin-bottom:2px} .kv-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.07)} .kv-k{color:var(--t3);font-size:12px;flex:0 0 auto} .kv-v{color:var(--t1);font-size:13px;text-align:right} .kv-input{width:220px;max-width:55%;background:rgba(10,22,44,.9);border:1px solid var(--border);border-radius:6px;color:var(--t1);padding:5px 8px;font-size:12px;outline:none} .kv-input:focus{border-color:var(--n-cyan)} .arch-sec{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:rgba(13,28,54,.35)} .arch-sec-warn{border-color:rgba(255,167,38,.5);background:rgba(255,167,38,.06)} .arch-sec-h{font-weight:600;font-size:13px;color:var(--t1);margin-bottom:8px} .arch-modal-body{max-height:62vh;overflow:auto;padding:14px} .arch-modal-foot{padding:10px 14px;border-top:1px solid var(--border);text-align:right} .edge-ov{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px} .edge-ov-item{background:rgba(13,28,54,.45);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center} .eov-val{font-size:22px;font-weight:700} .eov-lbl{font-size:11px;color:var(--t3);margin-top:4px} .edge-rules{display:flex;flex-direction:column;gap:8px} .edge-rule{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(13,28,54,.3)} .edge-rule-h{cursor:pointer;padding:11px 14px;font-weight:600;color:var(--t1);display:flex;justify-content:space-between;align-items:center;transition:background .2s} .edge-rule-h:hover{background:rgba(79,195,247,.08)} .edge-rule-name{color:var(--t1)} .edge-rule-body{max-height:0;overflow:hidden;transition:max-height .35s ease} .edge-rule-body.open{max-height:560px} .edge-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px;border-top:1px solid var(--border)} .edge-grid b{color:var(--n-cyan);font-size:12px} .edge-grid p{margin:5px 0;font-size:12px;color:var(--t2);line-height:1.6} .edge-scn{color:var(--t3);font-size:11px} .perf-overview{font-size:13px;color:var(--t2);margin-bottom:12px} .perf-overview b{font-size:18px;margin-left:4px} .perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .perf-card{cursor:pointer;border:1px solid var(--border);border-radius:10px;padding:12px;background:rgba(13,28,54,.35);transition:border-color .2s,box-shadow .2s,transform .2s} .perf-card:hover{border-color:var(--n-cyan);box-shadow:0 6px 16px rgba(38,198,218,.16);transform:translateY(-2px)} .perf-name{font-size:12px;color:var(--t2);margin-bottom:6px;min-height:32px} .perf-vals{display:flex;align-items:baseline;gap:4px} .perf-cur{font-size:19px;font-weight:700;color:var(--t1)} .perf-unit{font-size:11px;color:var(--t3)} .perf-bar{height:5px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;margin:8px 0 6px} .perf-bar i{display:block;height:100%;border-radius:5px} .perf-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px} .perf-rate{color:var(--t3)} .perf-tag{padding:1px 7px;border-radius:6px;font-weight:600} .perf-green{border-left:3px solid var(--n-green)} .perf-green .perf-bar i{background:var(--n-green)} .perf-green .perf-tag{background:rgba(102,187,106,.15);color:var(--n-green)} .perf-orange{border-left:3px solid var(--n-amber)} .perf-orange .perf-bar i{background:var(--n-amber)} .perf-orange .perf-tag{background:rgba(255,167,38,.15);color:var(--n-amber)} .perf-red{border-left:3px solid var(--n-red)} .perf-red .perf-bar i{background:var(--n-red)} .perf-red .perf-tag{background:rgba(244,67,54,.15);color:var(--n-red)} .btn-sm{padding:4px 12px;font-size:12px} /* ===== 顶部【大屏展示】按钮 ===== */ .hdr-present-btn{ display:inline-flex;align-items:center;gap:6px; height:34px;padding:0 14px;margin-left:10px; font-size:13px;font-weight:600;color:#EAF2FF; background:linear-gradient(135deg,rgba(38,198,218,.22),rgba(79,195,247,.14)); border:1px solid rgba(38,198,218,.55); border-radius:9px;cursor:pointer;white-space:nowrap; box-shadow:0 0 0 1px rgba(38,198,218,.10),0 4px 14px rgba(38,198,218,.12); transition:transform .15s,border-color .2s,box-shadow .2s,background .2s; } .hdr-present-btn:hover{ transform:translateY(-1px); border-color:var(--n-cyan); background:linear-gradient(135deg,rgba(38,198,218,.34),rgba(79,195,247,.22)); box-shadow:0 0 0 1px rgba(38,198,218,.22),0 6px 18px rgba(38,198,218,.22); } .hdr-present-btn:active{transform:translateY(0)} /* ===== 大屏投屏模式（领导轮播 / 全屏投屏） ===== */ .present-exit{ display:none;position:fixed;top:16px;right:18px;z-index:1600; padding:8px 16px;font-size:13px;font-weight:600;color:#EAF2FF;cursor:pointer; background:rgba(11,22,44,.82);border:1px solid rgba(38,198,218,.55); border-radius:10px;backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.35); } .present-exit:hover{border-color:var(--n-cyan);background:rgba(11,22,44,.95)} .present-indicator{ display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:1600; padding:7px 18px;font-size:13px;font-weight:600;color:#EAF2FF;letter-spacing:.5px; background:rgba(11,22,44,.82);border:1px solid rgba(38,198,218,.5); border-radius:20px;backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.35); } body.present-mode .present-exit, body.present-mode .present-indicator{display:block} body.present-mode{background:#07111f} body.present-mode .sidebar, body.present-mode .nav-backdrop, body.present-mode .header-center, body.present-mode .search-box, body.present-mode .header-actions{display:none !important} body.present-mode .header{ background:rgba(7,17,31,.92);border-bottom:1px solid rgba(38,198,218,.18); justify-content:flex-start;padding-left:22px; } body.present-mode .header-left .version-tag{display:none} body.present-mode .main{ margin-left:0;width:100%;padding:14px 22px 30px; background:radial-gradient(1200px 600px at 50% -10%,rgba(38,198,218,.10),transparent 60%),#07111f; } body.present-mode .panel{box-shadow:0 0 0 1px rgba(38,198,218,.16),0 8px 26px rgba(0,0,0,.35)} body.present-mode .grid,.present-mode .grid-2,.present-mode .grid-4{gap:16px} /* ===== 当前一级页面专属全屏视图（page-fs-mode）：保留当前页全部图表/表格/筛选，隐藏侧栏与头部 chrome ===== */ body.page-fs-mode{background:#07111f;overflow:hidden} body.page-fs-mode .sidebar, body.page-fs-mode .nav-backdrop, body.page-fs-mode .search-box, body.page-fs-mode .header-center, body.page-fs-mode .header-actions{display:none !important} body.page-fs-mode .header{ background:rgba(7,17,31,.92);border-bottom:1px solid rgba(38,198,218,.18); justify-content:flex-start;padding-left:22px; } body.page-fs-mode .header-left .version-tag{display:none} body.page-fs-mode .main{ margin-left:0;width:100%;height:100vh;padding:14px 26px 30px;overflow:auto; background:radial-gradient(1200px 600px at 50% -10%,rgba(38,198,218,.10),transparent 60%),#07111f; } body.page-fs-mode .panel{box-shadow:0 0 0 1px rgba(38,198,218,.16),0 8px 26px rgba(0,0,0,.35)} body.page-fs-mode .grid,.page-fs-mode .grid-2,.page-fs-mode .grid-4{gap:18px} body.page-fs-mode .eff-layout,.page-fs-mode .energy-layout{gap:18px} /* ===== S4 消息中心 · 告警统计卡片 ===== */ .msg-stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:14px 0} .msg-stat-card{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:rgba(13,28,54,.4);position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s} .msg-stat-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%} .msg-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)} .scl-cyan{border-color:rgba(38,198,218,.4)}.scl-cyan::before{background:var(--n-cyan)}.scl-cyan:hover{box-shadow:0 8px 22px rgba(38,198,218,.22)} .scl-blue{border-color:rgba(79,195,247,.4)}.scl-blue::before{background:#4FC3F7}.scl-blue:hover{box-shadow:0 8px 22px rgba(79,195,247,.22)} .scl-red{border-color:rgba(244,67,54,.45)}.scl-red::before{background:var(--n-red)}.scl-red:hover{box-shadow:0 8px 22px rgba(244,67,54,.22)} .scl-amber{border-color:rgba(255,167,38,.45)}.scl-amber::before{background:var(--n-amber)}.scl-amber:hover{box-shadow:0 8px 22px rgba(255,167,38,.22)} .scl-green{border-color:rgba(102,187,106,.4)}.scl-green::before{background:var(--n-green)}.scl-green:hover{box-shadow:0 8px 22px rgba(102,187,106,.22)} .scl-deep{border-color:rgba(255,82,82,.5)}.scl-deep::before{background:#FF5252}.scl-deep:hover{box-shadow:0 8px 22px rgba(255,82,82,.25)} .msg-stat-top{display:flex;align-items:center;gap:10px} .msg-stat-ic{font-size:20px;filter:drop-shadow(0 0 6px rgba(38,198,218,.35))} .msg-stat-meta{flex:1;min-width:0} .msg-stat-label{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .msg-stat-n{font-size:24px;font-weight:800;line-height:1.1;color:var(--t1)} .msg-stat-spark{width:64px;height:34px;flex:none} /* ===== S4 消息中心 · 可视化图表区 ===== */ .msg-charts{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin-top:4px} .msg-chart-p{margin:0} .msg-chart-p .chart-md{height:240px} /* ===== S4 消息中心 · 高级筛选栏 ===== */ .adv-filter{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:16px 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(13,28,54,.4)} .af-item{display:flex;flex-direction:column;gap:5px} .af-lab{font-size:11px;color:var(--t2)} .af-sel{background:rgba(255,255,255,.05);color:var(--t1);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;min-width:120px;cursor:pointer} .af-sel:focus{outline:none;border-color:var(--n-cyan)} .af-spacer{flex:1} /* ===== S4 消息中心 · 告警卡片列表 ===== */ .alarm-card{display:flex;align-items:stretch;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:rgba(13,28,54,.34);transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer} .alarm-card:hover{border-color:rgba(38,198,218,.5);box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translateY(-1px)} .alarm-card.alarm-open{border-left:3px solid rgba(244,67,54,.5)} .ac-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-right:4px} .ac-check{width:16px;height:16px;cursor:pointer;accent-color:var(--n-cyan)} .ac-main{flex:1;min-width:0} .ac-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:5px} .ac-title .tag{margin-left:4px;font-weight:600} .ac-desc{font-size:12.5px;color:var(--t2);line-height:1.6;word-break:break-word} .ac-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12px;color:var(--t3)} .ac-meta span{white-space:nowrap} .ac-sla{padding:1px 8px;border-radius:6px;background:rgba(79,195,247,.14);color:var(--n-blue);font-weight:600} .ac-sla.overdue{background:rgba(244,67,54,.16);color:var(--n-red)} .ac-ops{display:flex;flex-direction:column;gap:8px;justify-content:center;flex:none;padding-left:6px;border-left:1px dashed rgba(255,255,255,.08)} .ac-ops .btn{min-width:92px} .msg-empty{padding:28px;text-align:center;color:var(--t2);font-size:13px} /* ===== S4 消息中心 · 右侧抽屉详情 ===== */ .alarm-drawer-mask{position:fixed;inset:0;z-index:1500;background:rgba(3,9,18,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s} .alarm-drawer-mask.show{opacity:1;visibility:visible} .alarm-drawer{position:absolute;top:0;right:0;height:100%;width:460px;max-width:92vw;background:#0c1a30;border-left:1px solid rgba(38,198,218,.35);box-shadow:-16px 0 40px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column} .alarm-drawer-mask.show .alarm-drawer{transform:translateX(0)} .ad-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(38,198,218,.06)} .ad-title{font-size:16px;font-weight:700;color:var(--t1);padding-right:12px;line-height:1.4} .ad-close{background:transparent;border:1px solid var(--border);color:var(--t2);width:30px;height:30px;border-radius:8px;cursor:pointer;flex:none;font-size:14px} .ad-close:hover{border-color:var(--n-cyan);color:var(--t1)} .ad-body{padding:16px 18px;overflow-y:auto;flex:1} .ad-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .ad-meta-item{border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:rgba(13,28,54,.4)} .ad-meta-k{font-size:11px;color:var(--t2);margin-bottom:4px} .ad-meta-v{font-size:14px;color:var(--t1);font-weight:600} .ad-section{margin-bottom:16px} .ad-sec-t{font-size:13px;font-weight:600;color:var(--n-cyan);margin-bottom:8px;padding-left:9px;border-left:3px solid var(--n-cyan)} .ad-desc{font-size:13px;color:var(--t2);line-height:1.8;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(13,28,54,.34);word-break:break-word} .ad-tl{position:relative;padding-left:18px} .ad-tl-item{position:relative;padding:0 0 16px 14px;border-left:2px solid rgba(38,198,218,.3)} .ad-tl-item:last-child{border-left-color:transparent;padding-bottom:0} .ad-tl-dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--n-cyan);box-shadow:0 0 0 3px rgba(38,198,218,.18)} .ad-tl-act{font-size:13px;font-weight:600;color:var(--t1)} .ad-tl-time{font-size:11px;color:var(--t3);font-weight:400;margin-left:8px} .ad-tl-note{font-size:12px;color:var(--t2);line-height:1.6;margin-top:3px} .ad-curve-note{font-size:11px;color:var(--t3);margin-top:6px} .ad-ops{display:flex;gap:10px;margin-top:6px} .ad-done-tip{font-size:13px;color:var(--n-green);font-weight:600;align-self:center} /* ===== S5 系统设置 · 左侧二级导航 + 右侧内容 ===== */ .set-layout{display:grid;grid-template-columns:200px 1fr;gap:16px;margin-top:6px;align-items:start} .set-nav{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(13,28,54,.4);position:sticky;top:14px} .set-nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:13.5px;color:var(--t2);cursor:pointer;transition:background .18s,color .18s,border-color .18s;border:1px solid transparent} .set-nav-item:hover{background:rgba(38,198,218,.08);color:var(--t1)} .set-nav-item.active{background:linear-gradient(135deg,rgba(38,198,218,.18),rgba(79,195,247,.08));color:var(--t1);border-color:rgba(38,198,218,.45);box-shadow:0 0 0 1px rgba(38,198,218,.12)} .set-nav-ic{font-size:16px;filter:drop-shadow(0 0 5px rgba(38,198,218,.3))} .set-content{min-width:0} .set-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px} .set-card{margin:0} .panel-head-btn{margin-left:auto} .set-scope{max-width:280px;color:var(--t2);word-break:break-word} .set-row-ops{white-space:nowrap} /* 角色矩阵分页 */ .set-pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.08)} .set-pg-info{font-size:12px;color:var(--t2)} .set-pager .btn:disabled{opacity:.4;cursor:not-allowed} /* 可视化选择组件 */ .vis-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0} .vis-label{font-size:13px;color:var(--t2);min-width:64px} .vis-opts{display:flex;gap:8px;flex-wrap:wrap} .vis-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;color:var(--t1);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s} .vis-opt:hover{border-color:rgba(38,198,218,.5)} .vis-opt.active{border-color:var(--n-cyan);background:rgba(38,198,218,.16);box-shadow:0 0 0 1px rgba(38,198,218,.18)} .vis-swatches{display:flex;gap:10px} .vis-sw{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .18s;box-shadow:0 2px 8px rgba(0,0,0,.3)} .vis-sw:hover{transform:scale(1.08)} .vis-sw.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)} /* 通用键值 / 表单 */ .kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:13px} .kv:last-child{border-bottom:none} .kv span{color:var(--t2)} .kv b{color:var(--t1);font-weight:600;text-align:right} .form-grid{display:flex;flex-direction:column;gap:2px} .form-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.07)} .form-row:last-child{border-bottom:none} .form-k{width:80px;flex:none;font-size:13px;color:var(--t2)} .form-v{flex:1;min-width:0} .form-v .af-sel{width:100%} .pf-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px;background:rgba(38,198,218,.12);border:1px solid rgba(38,198,218,.45);box-shadow:0 0 0 4px rgba(38,198,218,.08)} .pf-val{font-size:14px;color:var(--t1);font-weight:600} .ab-brand{font-size:14px;font-weight:700;color:var(--t1);line-height:1.6;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:rgba(38,198,218,.08);border:1px solid rgba(38,198,218,.25)} /* ===== 顶部信息组件：天气 / 地理位置 / 时间 ===== */ .topbar-info{display:flex;align-items:center;gap:10px;margin-right:6px} .ti-item{ display:inline-flex;align-items:center;gap:6px; height:32px;padding:0 12px;font-size:12.5px;color:var(--t1); background:rgba(13,28,52,.6);border:1px solid rgba(79,195,247,.28); border-radius:9px;white-space:nowrap; box-shadow:0 0 0 1px rgba(79,195,247,.06),0 2px 10px rgba(0,0,0,.25); transition:border-color .2s,box-shadow .2s,background .2s; } .ti-item:hover{border-color:rgba(79,195,247,.6);background:rgba(16,34,62,.7); box-shadow:0 0 0 1px rgba(79,195,247,.18),0 4px 14px rgba(79,195,247,.16)} .ti-ic{font-size:14px;line-height:1} .ti-txt{letter-spacing:.2px} .ti-clock{font-variant-numeric:tabular-nums;font-weight:600;color:#EAF2FF; background:rgba(38,198,218,.10);border-color:rgba(38,198,218,.35)} .ti-clock:hover{background:rgba(38,198,218,.18);border-color:rgba(38,198,218,.6)} @media (max-width:1280px){ .ti-location .ti-txt{display:none} .ti-weather .ti-txt{font-size:11.5px} } /* ===== 能源介质卡片区（v2：参考 energy-monitor-v2.html，深色玻璃卡 + 左色条呼吸 + 大数值 + 当日/累计） ===== */ .emc-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:14px;flex-wrap:wrap} .emc-bar-title{font-size:14px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:10px;letter-spacing:.3px} .emc-bar-title::before{content:"";width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,#4FC3F7,#26C6DA);box-shadow:0 0 8px rgba(38,198,218,.6)} /* 实时 心跳：标题右侧小圆点脉冲 + 「实时」二个字，强化"实时"的现场感 */ .emc-live{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#22d3ee;font-weight:600;letter-spacing:.3px} .emc-live-dot{width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 9px #22d3ee;animation:emcLivePulse 1.4s ease-in-out infinite} @keyframes emcLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}} /* 周期筛选 chip：替换原来的 .seg 灰色胶囊，改为参考 v2 的玻璃 chip + 蓝色填充激活态 */ .emc-periods{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;border-radius:10px;border:1px solid rgba(255,255,255,.08)} .emc-pbtn{ border:0;background:transparent;color:rgba(230,237,246,.6); padding:7px 16px;border-radius:7px;font-size:13px;cursor:pointer; font-family:inherit;transition:.2s;font-weight:600; } .emc-pbtn:hover{color:#e6edf6} .emc-pbtn.active{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#06121f;box-shadow:0 2px 10px rgba(34,211,238,.35)} /* 图例：7 个介质小圆点 + 名称 chip 排列，颜色与卡片色条对齐 */ .emc-legend{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 14px;font-size:12px;color:rgba(230,237,246,.55)} .emc-legend span{display:inline-flex;align-items:center;gap:6px} .emc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block} /* ===== 卡片本体 (energy-media-card.emc-v2) ===== */ .energy-media-card.emc-v2{ position:relative; overflow:hidden; display:flex;flex-direction:column; text-align:left; gap:0; background:rgba(14,27,46,.65); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px 14px 12px; transition:transform .22s ease, box-shadow .22s ease, background .22s ease; box-shadow:0 6px 18px rgba(0,0,0,.22); } /* 卡片左侧 3px 介质色条（核心视觉锚点）：呼吸闪烁、与 .emc-v2-dot 同相位但不同 keyframes */ .energy-media-card.emc-v2::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); opacity:.95; animation:emcV2Breath var(--bd,1.5s) ease-in-out infinite; animation-delay:var(--ad,0s); box-shadow:0 0 9px var(--c); } @keyframes emcV2Breath{0%,100%{opacity:.95;box-shadow:0 0 9px var(--c)}50%{opacity:.25;box-shadow:0 0 1px var(--c)}} /* hover：上浮 4px + 内嵌介质色边框（不让透明度 1px ring 撞穿深色玻璃） */ .energy-media-card.emc-v2:hover{ transform:translateY(-4px); background:rgba(20,38,62,.85); box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px var(--c); } /* 头部一行：dot + 名称 + 状态徽章 */ .emc-v2-head{display:flex; align-items:center; gap:7px; margin-bottom:11px; min-width:0} .emc-v2-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--c); box-shadow:0 0 8px var(--c); animation:emcV2Breath var(--bd,1.5s) ease-in-out infinite; animation-delay:var(--ad,0s); } .emc-v2-name{ font-size:13.5px; font-weight:600; color:#e6edf6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .emc-v2-stat{ margin-left:auto; font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:600; letter-spacing:.3px; background:rgba(52,211,153,.16); color:#34d399; border:1px solid rgba(52,211,153,.25); } /* 状态变体：复用全局 .emc-st-* 颜色 token */ .emc-v2-stat.emc-st-warn{background:rgba(251,191,36,.16);color:#fbbf24;border-color:rgba(251,191,36,.30)} .emc-v2-stat.emc-st-over{background:rgba(248,113,113,.16);color:#f87171;border-color:rgba(248,113,113,.30)} /* 主数值：30px tabular-nums + 单位 + 实时徽章 */ .emc-v2-value{ display:flex; align-items:baseline; gap:5px; line-height:1; margin-bottom:6px; } .emc-v2-value .num{ font-size:30px; font-weight:800; letter-spacing:.5px; font-variant-numeric:tabular-nums; color:#e6edf6; /* 与 v2 参考一致：清晰无 text-shadow，避免 30px 大数字发糊 */ } .emc-v2-value .u{font-size:12px; font-weight:600; color:var(--c); letter-spacing:.2px} /* 趋势行：▲/▼ + 环比，颜色按方向 */ .emc-v2-trend{ font-size:12.5px; font-weight:600; margin-bottom:12px; letter-spacing:.3px; } .emc-v2-trend.up{color:#f87171} /* 涨=红（中国惯例、参考能源耗量增减语义） */ .emc-v2-trend.down{color:#34d399} /* 底部当日/累计 分割 footer */ .emc-v2-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:auto; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); } .emc-v2-cell{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0} .emc-v2-cell .lab{font-size:10px; color:rgba(155,170,195,.65); letter-spacing:1px} .emc-v2-cell .val{font-size:13px; font-weight:700; color:#e6edf6; font-variant-numeric:tabular-nums} /* 窄屏：6/7 列自动塌缩 */ @media (max-width:1180px){ .emc-v2 .emc-v2-value .num{font-size:26px} } @media (max-width:980px){ .emc-v2-grid{gap:10px !important} .emc-v2{padding:14px 12px 11px} } /* 底部说明 note（v2 设计：等宽网格 + 当日/累计底栏的说明） */ .emc-note{margin-top:14px;padding:10px 12px;font-size:12px;color:rgba(155,170,195,.62);line-height:1.7; background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.04);border-radius:8px} /* 介质历史记录弹窗：有人云IoT风格时间筛选栏 */ .em-time-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px} .em-time-bar .seg{flex-wrap:wrap} .em-cal{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)} .em-cal label{display:inline-flex;align-items:center;gap:5px} .em-cal input[type="date"]{background:var(--bg-glass);border:1px solid var(--border);color:var(--t1); border-radius:7px;padding:5px 9px;font-size:12px;color-scheme:dark} .em-cal input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer} .em-time-bar .btn-primary{margin-left:auto} /* ====================== 能效分析与诊断（模块二）重构 ====================== */ .eff-filter{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:14px 0;padding:12px 16px; border:1px solid var(--border);border-radius:var(--r);background:var(--bg-glass);position:relative;overflow:hidden} .eff-filter::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--n-cyan),var(--n-blue))} .eff-filter-left,.eff-filter-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .eff-fl-label{font-size:12px;color:var(--t2)} .eff-custom{margin-left:2px} .eff-layout{display:flex;flex-direction:column;gap:14px;align-items:stretch} .eff-subnav{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:8px} /* 碳排放核算管理：顶部导航强制两行各 7 个、均匀对称（不影响能效模块 .eff-subnav） */ .carbon-subnav-grid{display:grid!important;grid-template-columns:repeat(7,1fr);gap:10px} .carbon-subnav-grid .eff-subnav-item{flex:none;min-width:0;width:100%} @media (max-width:1100px){.carbon-subnav-grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:680px){.carbon-subnav-grid{grid-template-columns:repeat(2,1fr)}} .eff-subnav-item{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 0;min-width:128px;padding:9px 8px;border-radius:10px;cursor:pointer; border:1px solid var(--border);background:rgba(255,255,255,.02);transition:.18s var(--tr);overflow:hidden} .eff-subnav-item::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:0;height:2px;background:transparent;transition:.18s} .eff-subnav-item:hover{border-color:var(--border-h);background:rgba(34,211,238,.07)} .eff-subnav-item.active{border-color:rgba(34,211,238,.5);background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(34,211,238,.04));box-shadow:0 0 0 1px rgba(34,211,238,.2),0 4px 16px rgba(2,11,26,.32)} .eff-subnav-item.active::before{width:62%;background:linear-gradient(var(--n-cyan),var(--n-blue));box-shadow:0 0 10px rgba(34,211,238,.6)} .eff-sub-ic{font-size:16px;flex-shrink:0} .eff-sub-name{font-size:12.5px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:visible;text-overflow:clip} .eff-sub-desc{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eff-main{min-width:0} .eff-kpi-row{gap:12px} .eff-kpi{padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-glass);cursor:pointer; transition:.18s var(--tr);position:relative;overflow:hidden} .eff-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--n-cyan),var(--n-blue));opacity:.7} .eff-kpi:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(2,11,26,.4)} .eff-kpi-ic{font-size:18px;margin-bottom:4px} .eff-kpi-val{font-size:23px;font-weight:800;color:var(--t1);letter-spacing:.5px;line-height:1.15} .eff-kpi-unit{font-size:11px;font-weight:500;color:var(--t2);margin-left:3px} .eff-kpi-label{font-size:12.5px;color:var(--t2);margin-top:3px;font-weight:600} .eff-kpi-sub{font-size:11px;color:var(--t3);margin-top:1px} .eff-drill-row{cursor:pointer;transition:.15s} .eff-drill-row:hover{background:rgba(34,211,238,.08)} /* 分品种消费表：三列水平+垂直居中、占比列进度条+真实百分比 */ .eff-variety-wrap table th,.eff-variety-wrap table td{text-align:center;vertical-align:middle;padding:10px 12px} .eff-variety-wrap .va-name{font-weight:700;color:var(--t1)} .eff-variety-wrap .va-val{color:var(--t2);font-variant-numeric:tabular-nums} .eff-variety-wrap .va-unit{font-size:11px;color:var(--t3);margin-left:2px} .eff-variety-wrap .va-rate{display:flex;align-items:center;justify-content:center;gap:10px} .eff-variety-wrap .va-bar{width:110px;flex-shrink:0} .eff-variety-wrap .va-pct{font-weight:800;font-size:13px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums} .eff-ai-wrap{min-height:40px} /* 能效诊断：诊断问题清单面板与左侧 AI 建议等高，表格区撑满、消除底部留白 */ .eff-issue-fill{display:flex;flex-direction:column;min-height:0} .eff-issue-fill .eff-table-v2{flex:1 1 auto;min-height:0} /* === 2026-08-27 修复：目标面板内容自适应填满剩余高度，消除底部深蓝空隙 === */ /* 4 个目标面板内容器设 flex 列布局，配合 .fill-grow 子容器即可撑满剩余高度 */ #carbonBudget, #carbonAlertList, #effAIWrap, #effIssueWrap{ display:flex;flex-direction:column;min-height:0;height:100% } /* —— c9 左右两面板：高度自然（不强行等高），整页 main 区可滚动 —— */ /* 让右卡按内容自然高（含统计带 + Top5），左卡同样自适应；让表格不被 flex 撑满 */ #main .eff-main .grid{align-items:start} #main .eff-main .grid > .panel{min-height:600px;display:flex;flex-direction:column;height:auto} #main .eff-main .grid > .panel > .panel-body{flex:0 0 auto;min-height:0;overflow:visible;padding:14px 18px 18px} /* —— c9 子容器（AI 建议 / 问题清单）按内容自然高度 —— */ #main .eff-main #effAIWrap, #main .eff-main #effIssueWrap{height:auto!important;overflow:visible!important;display:block!important} /* 表格行按内容自然高，不要 flex 撑爆 panel-body */ .eff-issue-fill{display:block!important} .eff-issue-fill .eff-table-v2{flex:none!important;height:auto!important} .eff-issue-fill > .eff-diag-stats{display:block!important;margin-top:18px} .fill-grow{flex:1 1 auto;min-height:0;width:100%;margin-top:12px;display:flex;flex-direction:column} .fill-grow-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;padding:0 2px} .fill-grow-h .fg-t{font-size:12px;color:var(--t2);font-weight:700;letter-spacing:.3px} .fill-grow-h .fg-cap{font-size:11px;color:var(--t3)} .fill-grow-ech{flex:1 1 auto;min-height:180px;width:100%;border-radius:10px;background:rgba(8,28,52,.45);border:1px solid rgba(34,211,238,.18);box-shadow:inset 0 0 0 1px rgba(34,211,238,.04);padding:10px 12px 6px} @media (max-width:1100px){.eff-subnav-item{flex:1 1 130px;min-width:130px}} /* 能效 c9 AI 诊断关键词标签云 */ .diag-keycloud{display:flex;align-items:center;flex-wrap:wrap;gap:6px} .kw-tag{display:inline-block;padding:2px 9px;border:1px solid;border-radius:14px;line-height:1.7;font-weight:600;white-space:nowrap} @media (max-width:1100px){.eff-subnav-item{flex:1 1 130px;min-width:130px}} /* 能效模块弹窗内时间维度筛选条（日/周/月/年/自定义） */ .eff-modal-range{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 8px;padding:7px 9px;background:var(--bg-glass);border:1px solid var(--border);border-radius:10px} .eff-modal-range .seg-btn{min-width:42px;padding:4px 12px} .eff-modal-range-custom{display:inline-flex;align-items:center;gap:6px;margin-left:6px} .eff-date{background:var(--bg-glass);border:1px solid var(--border);border-radius:6px;color:var(--t1);padding:4px 8px;font-size:12px;color-scheme:dark} .eff-date:focus{outline:none;border-color:var(--border-h)} /* 能效 c7/c9 表格统一美化：行高、分割线、悬浮高亮、规范对齐 */ .eff-table-v2 table{width:100%} .eff-table-v2 th{font-size:12px;color:var(--t2);font-weight:700;background:rgba(34,211,238,.06);border-bottom:1px solid var(--border-h);padding:12px 14px;text-align:left;white-space:nowrap} .eff-table-v2 td{border-bottom:1px solid var(--border);padding:13px 14px;font-size:12.5px;color:var(--t1);vertical-align:middle} .eff-table-v2 tbody tr{transition:.15s} .eff-table-v2 tbody tr:hover{background:rgba(34,211,238,.10)} .eff-table-v2 .cell-prob{text-align:left;font-weight:600} .eff-table-v2 .cell-c{text-align:center} .eff-table-v2 .cell-pot{text-align:center;font-weight:800;color:var(--n-amber)} /* 诊断问题清单 · 加载更多 */ .eff-load-more{background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(56,189,248,.08));border:1px solid var(--border-h);color:var(--n-cyan);font-weight:700} .eff-load-more:hover{background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(56,189,248,.14));box-shadow:0 4px 16px rgba(2,11,26,.3)} /* —— 诊断问题清单 · 底部统计带（让左右卡内容对称） —— */ .eff-diag-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;padding:12px 14px;background:linear-gradient(180deg,rgba(56,189,248,.05) 0%,rgba(34,211,238,.02) 100%);border:1px solid var(--border);border-radius:8px} .eff-diag-stats .eds-card{padding:0 4px} .eff-diag-stats .eds-h{font-size:12px;font-weight:700;color:var(--n-cyan);margin-bottom:10px;letter-spacing:.5px;display:flex;align-items:center;gap:6px} .eff-diag-stats .eds-h::before{content:"";width:3px;height:12px;background:linear-gradient(180deg,var(--n-cyan),var(--n-blue));border-radius:2px;box-shadow:0 0 6px rgba(34,211,238,.5)} .eff-diag-stats .dsb-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12px} .eff-diag-stats .dsb-l{flex:0 0 64px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eff-diag-stats .dsb-bar{flex:1;height:14px;background:rgba(0,0,0,.32);border:1px solid var(--border);border-radius:7px;position:relative;overflow:hidden} .eff-diag-stats .dsb-fill{height:100%;border-radius:7px;transition:width .6s ease;box-shadow:0 0 8px rgba(94,168,255,.32) inset} .eff-diag-stats .dsb-n{flex:0 0 auto;font-size:11px;color:var(--t2);margin-left:8px;min-width:88px;text-align:right} .eff-diag-stats .eds-foot{font-size:12px;color:var(--t2);padding-top:8px;border-top:1px dashed var(--border);line-height:1.7} .eff-diag-stats .eds-foot b{font-size:13px;margin:0 2px;text-shadow:0 0 8px rgba(94,168,255,.32)} .eff-diag-stats .eds-top5{padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:14px;padding-top:14px} .eff-diag-stats .eds-top5-list{display:flex;flex-direction:column;gap:7px;margin-top:8px} .eff-diag-stats .eds-top5-row{display:flex;align-items:center;gap:12px;font-size:12.5px;padding:8px 10px;background:rgba(56,189,248,.04);border:1px solid var(--border);border-radius:8px;transition:.15s} .eff-diag-stats .eds-top5-row:hover{background:rgba(56,189,248,.10);border-color:var(--border-h);transform:translateX(2px)} .eff-diag-stats .eds-rank{flex:0 0 22px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:linear-gradient(135deg,#fb923c,#f97316);color:#fff;font-weight:800;font-size:11px;box-shadow:0 2px 6px rgba(249,115,22,.4)} .eff-diag-stats .eds-top5-row:nth-child(2) .eds-rank{background:linear-gradient(135deg,#5ea8ff,#38bdf8)} .eff-diag-stats .eds-top5-row:nth-child(3) .eds-rank{background:linear-gradient(135deg,#22c55e,#16a34a)} .eff-diag-stats .eds-top5-row:nth-child(4) .eds-rank{background:linear-gradient(135deg,#a78bfa,#7c3aed)} .eff-diag-stats .eds-top5-row:nth-child(5) .eds-rank{background:linear-gradient(135deg,#94a3b8,#475569)} .eff-diag-stats .eds-name{flex:1;min-width:0;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .eff-diag-stats .eds-meta{flex:0 0 auto;font-size:12px;color:var(--t2);white-space:nowrap;text-align:right} .eff-diag-stats .eds-meta b{margin:0 1px;font-weight:700} .eff-diag-stats .eds-pot{flex:0 0 32px;text-align:center;font-weight:800;font-size:11px;padding:3px 0;border-radius:10px;background:rgba(34,211,238,.12);color:var(--n-cyan);border:1px solid rgba(34,211,238,.3)} /* —— 月度诊断趋势（mini ECharts） —— */ .eff-diag-stats .eds-trend{padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:14px;padding-top:14px} .eff-diag-stats .eds-trend #effDiagMonthChart{background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:6px;margin-top:4px} /* —— 类型 × 潜力 交叉矩阵 —— */ .eff-diag-stats .eds-matrix{padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:14px;padding-top:14px} .eff-diag-stats .eds-matrix-grid{margin-top:8px;display:block} .eff-diag-stats .eds-mx-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:6px;overflow:hidden} .eff-diag-stats .eds-mx-th{padding:9px 10px;background:rgba(56,189,248,.10);color:var(--t1);font-weight:700;text-align:center;border-bottom:1px solid var(--border);font-size:11.5px;letter-spacing:.3px} .eff-diag-stats .eds-mx-th:first-child{text-align:left;color:var(--n-cyan)} .eff-diag-stats .eds-mx-type{padding:7px 10px;color:var(--t1);font-weight:600;border-right:1px solid var(--border);border-bottom:1px solid rgba(56,189,248,.08);text-align:left} .eff-diag-stats .eds-mx-cell{padding:7px 6px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid rgba(56,189,248,.08);font-size:13px;transition:.15s} .eff-diag-stats .eds-mx-cell b{font-size:15px;font-weight:800} .eff-diag-stats .eds-mx-cell:hover{filter:brightness(1.4)} .eff-diag-stats .eds-mx-sum{padding:7px 6px;text-align:center;border-bottom:1px solid rgba(56,189,248,.08);font-weight:800;font-size:14px;background:rgba(56,189,248,.06)} .eff-diag-stats .eds-mx-foot td{padding:9px 10px;background:rgba(56,189,248,.10);font-size:13px;border-top:1px solid var(--border);text-align:center} .eff-diag-stats .eds-mx-foot td:first-child{text-align:left;color:var(--n-cyan);font-weight:700} .eff-diag-stats .eds-mx-foot td b{font-size:15px;font-weight:800} /* —— 2026-08-23 能效分析与诊断 全 Tab 优化 —— */ /* 图表业务释义文字（规范 #5：让数据含义清晰易懂） */ .eff-chart-note{font-size:11px;line-height:1.7;color:var(--t2);margin-top:10px;padding:8px 10px;border-left:2px solid var(--border-h);background:rgba(34,211,238,.05);border-radius:0 6px 6px 0} /* 能效对标图右上角分级标签 */ .eff-grade-box{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:2px 2px 10px} .eff-grade-cap{font-size:11px;color:var(--t3);font-weight:700;letter-spacing:.5px;margin-right:2px} .eff-grade{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:default; border:1px solid var(--border);background:rgba(120,140,170,.10);color:var(--t3);opacity:.55;transition:.18s} .eff-grade.active{opacity:1;color:#06121f;box-shadow:0 2px 12px rgba(0,0,0,.28)} .eff-grade.g-good.active{background:linear-gradient(180deg,#4ADE80,#22C55E);border-color:#22C55E;box-shadow:0 0 0 1px rgba(74,222,128,.4),0 4px 16px rgba(34,197,94,.35)} .eff-grade.g-pass.active{background:linear-gradient(180deg,#38BDF8,#0EA5E9);border-color:#0EA5E9;box-shadow:0 0 0 1px rgba(56,189,248,.4),0 4px 16px rgba(14,165,233,.35)} .eff-grade.g-comply.active{background:linear-gradient(180deg,#FACC15,#F59E0B);border-color:#F59E0B;box-shadow:0 0 0 1px rgba(250,204,21,.4),0 4px 16px rgba(245,158,11,.35)} .eff-grade.g-fail.active{background:linear-gradient(180deg,#FB7185,#EF4444);border-color:#EF4444;color:#fff;box-shadow:0 0 0 1px rgba(239,68,68,.4),0 4px 16px rgba(239,68,68,.4)} /* 能效对标面板：图注与右侧六维卡片互不挤压 */ .eff-c4-panel .panel-body{padding-bottom:14px} /* 桑基图图例（分组：来源/枢纽/终端） */ .eff-sankey-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .eff-sankey-legend .sl-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .eff-sankey-legend .sl-gtitle{font-size:11px;color:var(--t3);font-weight:700;letter-spacing:.5px} .eff-sankey-legend .sl-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--t2)} .eff-sankey-legend .sl-item i{width:9px;height:9px;border-radius:2px;display:inline-block;box-shadow:0 0 6px rgba(34,211,238,.35)} /* c7 异常诊断：左右面板等高对齐 */ .eff-c7-heat-panel .panel-body, .eff-c7-table-panel .panel-body{display:flex;flex-direction:column} /* 右表限制最大高度并内部滚动，避免面板被长表格撑高至超出视口，从而保证左右等高且热力图可点击 */ .eff-c7-table-panel .table-wrap{flex:1 1 auto;max-height:calc(100vh - 320px);overflow:auto;min-height:240px} .eff-c7-heat-panel .panel-body{flex:1 1 auto} .eff-c7-heat-panel #effC7Heat{flex:1 1 auto;width:100%} /* 热力图色块光标提示可点击 */ .eff-c7-heat-panel #effC7Heat canvas{cursor:pointer} /* —— 2026-08-22 通用模块数据加载遮罩（时间筛选切换 loading，全平台复用） —— */ .module-loading{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px; background:rgba(7,15,28,.62);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease} .module-loading.show{display:flex;opacity:1} .module-loading .ml-spin{width:46px;height:46px;border-radius:50%;border:3px solid rgba(34,211,238,.18);border-top-color:var(--accent,#22D3EE); box-shadow:0 0 18px rgba(34,211,238,.35);animation:ml-spin .8s linear infinite} .module-loading .ml-text{font-size:13px;color:var(--t1,#EAF2FF);letter-spacing:1px;text-shadow:0 1px 4px rgba(0,0,0,.5)} @keyframes ml-spin{to{transform:rotate(360deg)}} /* —— 2026-08-23 需求 C：首页单模块独立全屏 —— */ /* 统一风格右上角全屏图标（深色科技风，不遮挡内容） */ .fs-btn{position:absolute;top:10px;right:12px;z-index:6;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center; border-radius:7px;cursor:pointer;color:var(--t2,#94a3b8);background:rgba(13,28,52,.6);border:1px solid var(--border,#14304f); transition:all .18s ease;backdrop-filter:blur(2px)} .fs-btn:hover{color:var(--accent,#22D3EE);border-color:var(--accent,#22D3EE);box-shadow:0 0 12px rgba(34,211,238,.4);transform:translateY(-1px)} .fs-btn svg{display:block} .home-panel-header{position:relative} /* 为 header 内绝对定位的 fs-btn 提供参照 */ /* 全屏遮罩 */ .module-fs-mask{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center; background:rgba(5,11,22,.92);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease;padding:3vh 3vw} .module-fs-mask.show{display:flex;opacity:1} .module-fs-box{width:94vw;height:94vh;max-width:1600px;display:flex;background:transparent} .module-fs-box > .home-panel, .module-fs-box > .home-kpi-row, .module-fs-box > #homeAerial{ width:100%;height:100%;margin:0;animation:fs-in .3s ease} .module-fs-box > .home-kpi-row{flex-wrap:wrap;align-content:center;overflow:auto} .module-fs-box > .home-panel .home-panel-body, .module-fs-box > #homeAerial{flex:1 1 auto;min-height:0} .module-fs-box > #homeAerial{position:relative} .module-fs-box > .home-panel .chart-load, .module-fs-box > .home-panel .chart-doughnut{width:100%;height:100%!important;min-height:0} .module-fs-box .in-fs{width:100%;height:100%} @keyframes fs-in{from{transform:scale(.97);opacity:.4}to{transform:scale(1);opacity:1}} .module-fs-close{position:fixed;top:22px;right:26px;z-index:9600;width:40px;height:40px;border-radius:50%;cursor:pointer; color:#EAF2FF;background:rgba(13,28,52,.8);border:1px solid var(--accent,#22D3EE);font-size:18px;line-height:1; display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(34,211,238,.35);transition:all .18s ease} .module-fs-close:hover{background:var(--accent,#22D3EE);color:#04263a;transform:rotate(90deg)} body.fs-open{overflow:hidden} /* —— 2026-08-23 需求 B：首页 AI 能碳助手（机甲风机器人 + 对话弹窗） —— */ .ai-fab{position:fixed;right:26px;bottom:26px;z-index:8800;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center; cursor:pointer;background:linear-gradient(135deg,rgba(13,28,52,.92),rgba(8,18,36,.92));border:1px solid rgba(34,211,238,.45); box-shadow:0 6px 22px rgba(34,211,238,.30),inset 0 0 14px rgba(34,211,238,.12); transition:transform .2s ease,box-shadow .2s ease;animation:ai-fab-in .4s ease} .ai-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 30px rgba(34,211,238,.5),inset 0 0 18px rgba(34,211,238,.22)} .ai-fab::after{content:'';position:absolute;inset:-2px;border-radius:18px;border:1px solid rgba(34,211,238,.35);opacity:0;animation:ai-fab-pulse 2.4s ease-out infinite} @keyframes ai-fab-in{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}} @keyframes ai-fab-pulse{0%{opacity:.6;transform:scale(1)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}} .ai-panel{position:fixed;right:26px;bottom:92px;z-index:8900;width:380px;height:560px;max-height:calc(100vh - 120px); display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(10,20,40,.98),rgba(7,14,30,.98)); border:1px solid rgba(34,211,238,.35);border-radius:16px;overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.08),inset 0 0 30px rgba(34,211,238,.05); transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:all .25s ease} .ai-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .ai-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(34,211,238,.02));border-bottom:1px solid rgba(34,211,238,.22)} .ai-head-l{display:flex;align-items:center;gap:10px} .ai-head-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#cdfaff;background:linear-gradient(135deg,#22D3EE,#3B82F6);box-shadow:0 0 14px rgba(34,211,238,.5)} .ai-head-name{font-size:14px;font-weight:800;color:#EAF2FF} .ai-head-sub{font-size:11px;color:#7f97b0} .ai-head-r{display:flex;gap:6px} .ai-ic-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(34,211,238,.25);background:rgba(13,28,52,.6);color:#a9c0d6;cursor:pointer;font-size:13px;transition:all .15s ease} .ai-ic-btn:hover{color:#22D3EE;border-color:#22D3EE;box-shadow:0 0 10px rgba(34,211,238,.35)} .ai-msgs{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin} .ai-msgs::-webkit-scrollbar{width:6px} .ai-msgs::-webkit-scrollbar-thumb{background:rgba(34,211,238,.3);border-radius:3px} .ai-msg{display:flex;gap:9px;align-items:flex-start;max-width:92%} .ai-user{float:right;flex-direction:row-reverse;margin-left:auto} .ai-ai{margin-right:auto} .ai-avatar{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:15px} .ai-user .ai-avatar{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.5);color:#cfe2ff} .ai-ai .ai-avatar{background:linear-gradient(135deg,#22D3EE,#3B82F6);color:#04263a;box-shadow:0 0 12px rgba(34,211,238,.4)} .ai-bubble{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.75;color:#dbe7f3;word-break:break-word} .ai-user .ai-bubble{background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(59,130,246,.1));border:1px solid rgba(59,130,246,.35);border-top-right-radius:3px} .ai-ai .ai-bubble{background:rgba(17,32,58,.85);border:1px solid rgba(34,211,238,.22);border-top-left-radius:3px} .ai-bubble b{color:#7fe7ff;font-weight:700} .ai-li{font-size:13px;line-height:1.7;color:#cdd9e6;padding-left:2px} .ai-table{margin:6px 0;overflow-x:auto;border:1px solid rgba(34,211,238,.2);border-radius:8px} .ai-table table{border-collapse:collapse;width:100%;font-size:12px} .ai-table td{padding:5px 8px;border:1px solid rgba(34,211,238,.14);color:#cdd9e6;white-space:nowrap} .ai-table tr:nth-child(1) td{background:rgba(34,211,238,.1);color:#9fe9ff;font-weight:700} .ai-welcome{text-align:center;padding:20px 10px;color:#9fb4c8} .ai-welcome-ic{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#cdfaff;background:linear-gradient(135deg,#22D3EE,#3B82F6);box-shadow:0 0 22px rgba(34,211,238,.5);animation:ai-fab-in .5s ease} .ai-welcome-t{font-size:13px;line-height:1.8;color:#aebfcf} .ai-think{display:inline-flex;align-items:center;gap:5px;color:#7f97b0;font-size:13px} .ai-think i{width:6px;height:6px;border-radius:50%;background:#22D3EE;display:inline-block;animation:ai-think 1.1s infinite ease-in-out} .ai-think i:nth-child(2){animation-delay:.18s} .ai-think i:nth-child(3){animation-delay:.36s} @keyframes ai-think{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}} .ai-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px} .ai-quick-item{font-size:11.5px;padding:5px 9px;border-radius:20px;cursor:pointer;color:#a9c6dc;background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.22);transition:all .15s ease;white-space:nowrap} .ai-quick-item:hover{color:#04263a;background:#22D3EE;box-shadow:0 0 12px rgba(34,211,238,.4)} .ai-input-bar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(34,211,238,.18);background:rgba(7,14,30,.6)} .ai-input-bar input{flex:1 1 auto;height:38px;border-radius:10px;border:1px solid rgba(34,211,238,.25);background:rgba(13,28,52,.7);color:#EAF2FF;padding:0 12px;font-size:13px;outline:none} .ai-input-bar input:focus{border-color:#22D3EE;box-shadow:0 0 10px rgba(34,211,238,.3)} .ai-input-bar input::placeholder{color:#5f768c} .ai-send{height:38px;padding:0 18px;border-radius:10px;border:none;cursor:pointer;font-size:13px;font-weight:700;color:#04263a;background:linear-gradient(135deg,#22D3EE,#3B82F6);box-shadow:0 0 14px rgba(34,211,238,.4);transition:all .15s ease} .ai-send:hover{filter:brightness(1.1);box-shadow:0 0 20px rgba(34,211,238,.6)} .ai-send:active{transform:scale(.96)} /* ===== P1 模块5.2/5.3 绿电消纳 + 模块6供应链 + 模块8预警与对标 ===== */ .alert-card{border:1px solid var(--card-border);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:8px;min-width:0} .alert-card.crit{border-color:rgba(244,67,54,.5);box-shadow:0 0 12px rgba(244,67,54,.18)} .alert-card.warn{border-color:rgba(255,183,77,.5);box-shadow:0 0 12px rgba(255,183,77,.16)} .alert-card.safe{border-color:rgba(102,187,106,.5);box-shadow:0 0 12px rgba(102,187,106,.16)} .alert-card .ac-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .alert-card .ac-cnt{font-size:26px;font-weight:800;line-height:1;color:var(--t1);white-space:nowrap;min-width:0} .alert-card.crit .ac-cnt{color:var(--n-red)}.alert-card.warn .ac-cnt{color:var(--n-orange)}.alert-card.safe .ac-cnt{color:var(--n-green)} .alert-card .ac-desc{font-size:12.5px;color:var(--t2);line-height:1.6;word-break:break-word} .alert-card .ac-items{margin-top:4px;display:flex;flex-direction:column;gap:4px;min-width:0} .alert-card .ac-item{font-size:11.5px;color:var(--t3);line-height:1.4;word-break:break-all;overflow-wrap:anywhere} /* 预警迷你卡（模块页内联） */ .am-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .am-card{border:1px solid var(--card-border);border-radius:10px;padding:12px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:8px;min-height:78px;min-width:0;cursor:pointer;transition:.15s var(--tr)} .am-card:hover{border-color:var(--n-cyan);box-shadow:0 0 0 1px rgba(34,211,238,.3) inset,0 6px 18px rgba(0,0,0,.25);transform:translateY(-2px)} .am-card.crit{border-color:rgba(244,67,54,.45)}.am-card.warn{border-color:rgba(255,183,77,.45)}.am-card.safe{border-color:rgba(102,187,106,.45)} .am-card .am-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .am-card .am-cnt{font-size:24px;font-weight:800;line-height:1;color:var(--t1);white-space:nowrap} .am-card.crit .am-cnt{color:var(--n-red)}.am-card.warn .am-cnt{color:var(--n-orange)}.am-card.safe .am-cnt{color:var(--n-green)} .am-card .am-title{font-size:13px;color:var(--t2);font-weight:600;line-height:1.3;word-break:break-word} /* 首页预警模块卡片（与弹窗复用 .alert-card，可点击开弹窗） */ .am-grid > .alert-card{cursor:pointer;transition:.15s var(--tr)} .am-grid > .alert-card:hover{border-color:var(--n-cyan);box-shadow:0 0 0 1px rgba(34,211,238,.3) inset,0 6px 18px rgba(0,0,0,.25);transform:translateY(-2px)} /* ===== P2 模块9 园区能碳联动 · 链路可视化 ===== */ .link-flow{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap;margin-top:14px;padding:14px;background:rgba(255,255,255,.02);border:1px solid var(--card-border);border-radius:12px} .lf-node{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px;padding:12px 10px;border-radius:10px;background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(59,130,246,.06));border:1px solid rgba(34,211,238,.25)} .lf-ic{font-size:22px;line-height:1} .lf-t{font-size:12px;color:var(--t2);font-weight:600} .lf-v{font-size:16px;font-weight:800;color:var(--t1)} .lf-arrow{font-size:20px;color:var(--n-cyan);opacity:.85}