/* ============================================================
   AUSNER 欧适能 · 数字孪生大屏「明亮主题」统一优化层
   ------------------------------------------------------------
   适用页面：digital-twin-beijing / tianjin / jinan / junan
   作用：在四页既有样式之后加载，将冷灰蓝科技风统一收敛到
        全站设计 Token（design-system/tokens.css）的暖白明亮
        审美。只覆盖视觉变量与组件修饰，不改变布局与功能。
   依赖：design-system/tokens.css（--osh-* 变量）
   版本：v1.0.0（2026-07-22）
   ============================================================ */

/* ── 1. 变量重映射：旧变量名 → 全站暖色 Token ─────────────── */
:root {
  /* 背景 / 卡片 */
  --bg:        var(--osh-paper, #fafbfd);
  --bg2:       var(--osh-ink-100, #f2fafb);
  --card:      rgba(255, 255, 255, .98);
  --card-alt:  var(--osh-ink-50, #FAF6F6);

  /* 边框（暖调，带极轻品牌红倾向） */
  --border:    rgba(8,145,178, .12);
  --border2:   rgba(11,43,69, .07);
  --border3:   rgba(11,43,69, .05);

  /* 文字（暖灰墨色系） */
  --t1: var(--osh-ink-900, #0b2b45);
  --t2: var(--osh-ink-700, #3d5a73);
  --t3: var(--osh-ink-600, #3d5a73);
  --t4: var(--osh-ink-400, #7a93a8);

  /* 品牌红阶 */
  --accent:  var(--osh-brand-500, #0891b2);
  --accent2: var(--osh-brand-400, #00c2d1);
  --crimson: var(--osh-brand-700, #0e7490);
  --red:     var(--osh-brand-600, #0891b2);
  --red2:    var(--osh-brand-500, #0891b2);
  --warm:    var(--osh-brand-500, #0891b2);   /* junan 页别名 */
  --ember:   var(--osh-brand-400, #00c2d1);   /* junan 页别名 */
  --glow:    rgba(8,145,178, .10);

  /* 供回水语义色：供水亮红 / 回水深红 */
  --supply: var(--osh-brand-500, #0891b2);
  --return: var(--osh-brand-700, #0e7490);

  /* 语义色 */
  --green: var(--osh-success, #0fb981);
  --amber: var(--osh-warning, #f59e0b);
  --gold:  #B45309;

  /* 字体：全站系统栈 + 数字用 DIN 系（硬规则：禁 Google Fonts） */
  --font:      var(--osh-font-sans, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
  --font-cn:   var(--osh-font-sans, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
  --font-tech: var(--osh-font-num, 'DIN Alternate', 'Bahnschrift', 'DM Sans', 'SF Mono', Consolas, monospace);
  --font-data: var(--osh-font-num, 'DIN Alternate', 'Bahnschrift', 'DM Sans', 'SF Mono', Consolas, monospace);
  --font-mono: var(--osh-font-num, 'DIN Alternate', 'Bahnschrift', 'DM Sans', 'SF Mono', Consolas, monospace);

  /* 阴影：全站卡片阴影 */
  --shadow: var(--osh-shadow-card, 0 1px 2px rgba(11,43,69,.05), 0 4px 16px rgba(11,43,69,.04));
}

/* ── 2. 页面基底：暖白纸感 + 极轻氛围渐变 ─────────────────── */
html, body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(8,145,178, .045), transparent 60%),
    radial-gradient(900px 420px at 8% 108%, rgba(8,145,178, .03), transparent 60%),
    var(--osh-paper, #fafbfd);
  color: var(--t1);
}
::selection { background: rgba(8,145,178, .16); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: rgba(8,145,178, .22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(8,145,178, .38); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 3. 全站统一顶栏（含莒南页深色顶栏的明亮化）───────────── */
.unified-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(237, 229, 229, .6);
  box-shadow: 0 1px 0 rgba(11,43,69, .03);
}
.unified-header .logo { color: var(--osh-ink-900, #0b2b45); font-weight: 600; }
.unified-header .logo-icon {
  background: var(--osh-brand-500, #0891b2);
  box-shadow: 0 2px 8px rgba(8,145,178, .28);
}
.unified-header .logo span { color: var(--osh-brand-500, #0891b2); }
.unified-header nav a,
.unified-header .nav a { color: var(--osh-ink-600, #3d5a73); }
.unified-header nav a:hover,
.unified-header .nav a:hover { color: var(--osh-brand-500, #0891b2); background: rgba(8,145,178, .06); }
.unified-header nav a.active,
.unified-header .nav a.active { color: var(--osh-brand-500, #0891b2); background: rgba(8,145,178, .08); font-weight: 500; }

/* ── 4. 大屏页头：白色玻璃 + 品牌红点缀 ───────────────────── */
#app > header {
  background: linear-gradient(135deg, #FFFFFF, var(--osh-ink-50, #FAF6F6));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#app > header::after {
  background: linear-gradient(90deg, transparent 5%, var(--osh-brand-500, #0891b2) 50%, transparent 95%);
  opacity: .45;
}
.h-logo {
  border-color: rgba(8,145,178, .28);
  background: linear-gradient(135deg, rgba(8,145,178, .10), rgba(8,145,178, .16));
  color: var(--osh-brand-500, #0891b2);
  box-shadow: 0 2px 8px rgba(8,145,178, .10);
}
.h-center .main-title {
  background: linear-gradient(90deg, var(--osh-brand-700, #0e7490), var(--osh-brand-500, #0891b2) 55%, var(--osh-brand-300, #7fe9f2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(8,145,178, .18));
}
.h-center .sub-title { color: var(--t4); }
.h-right .sys-tag {
  color: var(--osh-brand-600, #0891b2);
  border-color: rgba(8,145,178, .30);
  background: rgba(8,145,178, .06);
}
.h-right .clock { color: var(--osh-brand-500, #0891b2); }
.btn-icon {
  border-color: var(--border2);
  background: rgba(255, 255, 255, .85);
  color: var(--t2);
}
.btn-icon:hover {
  background: rgba(8,145,178, .10);
  color: var(--osh-brand-500, #0891b2);
  border-color: rgba(8,145,178, .30);
  box-shadow: 0 2px 10px rgba(8,145,178, .14);
}

/* ── 5. 页内 Tab 导航条 ───────────────────────────────────── */
#app > nav,
nav#mainNav {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border2);
}
.nav-item { color: var(--t3); border-radius: 4px; }
.nav-item:hover { color: var(--t2); background: rgba(8,145,178, .07); }
.nav-item.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--osh-brand-500, #0891b2), var(--osh-brand-600, #0891b2));
  box-shadow: 0 2px 10px rgba(8,145,178, .30);
}
.nav-sep { background: var(--border2); }
.sub-nav { background: rgba(250, 246, 246, .97); border-bottom: 1px solid var(--border2); }
.sub-nav-item.active {
  color: var(--osh-brand-500, #0891b2);
  border-color: rgba(8,145,178, .22);
  background: rgba(8,145,178, .07);
}

/* ── 6. 卡片体系：暖白 + 轻阴影 + 品牌顶线 ────────────────── */
.card, .trend-card, .pump-card, .proj-card, .kpi {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.card::before, .trend-card::before {
  background: linear-gradient(90deg, transparent, rgba(8,145,178, .28), transparent);
}
.card-header, .trend-card-header {
  background: linear-gradient(135deg, #FFFFFF, var(--osh-ink-50, #FAF6F6));
  border-bottom-color: var(--border2);
  color: var(--t2);
}
.card-header .ind, .card-header .indicator {
  background: linear-gradient(180deg, var(--osh-brand-500, #0891b2), var(--osh-brand-400, #00c2d1));
  box-shadow: 0 0 6px rgba(8,145,178, .35);
}
.tch-dot { background: var(--osh-brand-500, #0891b2); box-shadow: 0 0 6px rgba(8,145,178, .40); }

/* ── 7. KPI 大数字卡 ──────────────────────────────────────── */
.kpi::before { background: linear-gradient(90deg, transparent, rgba(8,145,178, .22), transparent); }
.kpi:hover { box-shadow: var(--osh-shadow-card-hover, 0 4px 12px rgba(11,43,69,.08), 0 16px 40px rgba(11,43,69,.08)); transform: translateY(-1px); }
.kpi .kv, .kpi .kpi-value { color: var(--osh-brand-500, #0891b2); text-shadow: none; }
.kpi.green .kv, .kpi.green .kpi-value { color: var(--osh-success, #0fb981); text-shadow: none; }
.kpi.gold .kv, .kpi.gold .kpi-value { color: var(--gold); text-shadow: none; }
.kpi.warn { border-color: rgba(245,158,11, .30); }

/* ── 8. 热泵机组卡 / 项目卡 hover 提亮 ────────────────────── */
.pump-card::before, .pump-card-enhanced::before, .proj-card::before {
  background: linear-gradient(90deg, var(--osh-brand-600, #0891b2), var(--osh-brand-400, #00c2d1));
}
.pump-card:hover, .pump-card-enhanced:hover {
  border-color: rgba(8,145,178, .40);
  box-shadow: 0 8px 24px rgba(8,145,178, .12);
  transform: translateY(-2px);
}
.proj-card:hover {
  border-color: rgba(8,145,178, .35);
  box-shadow: 0 12px 32px rgba(8,145,178, .12);
  transform: translateY(-2px);
}
.pump-card .pc-cop, .pump-card .pc-name, .proj-card .pc-name { color: var(--osh-brand-500, #0891b2); text-shadow: none; }

/* ── 9. 3D 场景容器：亮场暖底 ─────────────────────────────── */
.scene-wrap {
  background: linear-gradient(180deg, #FBF5F3, #F3E9E6);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.scene-title .st1 { color: var(--osh-brand-500, #0891b2); text-shadow: 0 1px 4px rgba(8,145,178, .18); }
.scene-title .st2 { color: var(--t4); }
.scene-badge .badge {
  border-color: var(--border);
  background: rgba(255, 255, 255, .88);
  color: var(--t2);
}
.scene-controls button {
  border-color: var(--border2);
  background: rgba(255, 255, 255, .88);
  color: var(--t2);
}
.scene-controls button:hover { background: rgba(8,145,178, .12); color: var(--osh-brand-500, #0891b2); }
.scan-line { background: linear-gradient(90deg, transparent, rgba(8,145,178, .20), transparent); }

/* ── 10. 数据行 / 小格 / 高亮格 ───────────────────────────── */
.dr, .data-row, .pump-bar, .fin-summary-row { border-bottom-color: var(--border3); }
.ov-item, .hl-item, .hp-card, .fan-item, .ms, .modal-stat {
  border-color: var(--border3);
  background: rgba(8,145,178, .03);
}
.hl-item .hl-v { color: var(--osh-brand-500, #0891b2); }
.tag-list .tag {
  color: var(--osh-brand-600, #0891b2);
  border-color: rgba(8,145,178, .22);
  background: rgba(8,145,178, .05);
  border-radius: 999px;
}
.cost-bar, .payback-progress { background: rgba(8,145,178, .08); }

/* ── 11. COP 环 / COP Boost ───────────────────────────────── */
.cop-ring { border-color: var(--border); }
.cop-ring::after { border-top-color: var(--osh-brand-500, #0891b2); }
.cop-ring .cv { color: var(--osh-brand-500, #0891b2); }
.cop-boost {
  background: var(--osh-success-bg, #E6F6F0);
  border-color: rgba(15,185,129, .20);
  color: var(--osh-success, #0fb981);
}
.alert-box {
  background: var(--osh-warning-bg, #f2fafb);
  border-color: rgba(245,158,11, .28);
  color: var(--osh-warning, #f59e0b);
}

/* ── 12. 水流管道动画（供回水）────────────────────────────── */
.wshp-flow-section {
  background: linear-gradient(135deg, rgba(255,255,255,.92), var(--osh-ink-50, #FAF6F6));
  border-color: var(--border);
}
.wshp-pipe.supply-pipe {
  background: linear-gradient(90deg, rgba(8,145,178,.05), rgba(8,145,178,.16), rgba(8,145,178,.05));
  border-color: rgba(8,145,178, .22);
}
.wshp-pipe.return-pipe {
  background: linear-gradient(90deg, rgba(14,116,144,.14), rgba(14,116,144,.03), rgba(14,116,144,.14));
  border-color: rgba(14,116,144, .20);
}
.wshp-pipe.supply-pipe .pipe-particles {
  background: repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(8,145,178,.28) 14px, rgba(8,145,178,.48) 20px, rgba(8,145,178,.28) 22px, transparent 22px, transparent 28px);
}
.wshp-pipe.return-pipe .pipe-particles {
  background: repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(14,116,144,.26) 14px, rgba(14,116,144,.44) 20px, rgba(14,116,144,.26) 22px, transparent 22px, transparent 28px);
}

/* ── 13. 弹窗：暖白玻璃 ───────────────────────────────────── */
.modal-overlay { background: rgba(11,43,69, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-panel {
  background: linear-gradient(165deg, rgba(255,255,255,.99), rgba(250,246,246,.99));
  border-color: rgba(8,145,178, .18);
  box-shadow: 0 12px 48px rgba(11,43,69, .16), 0 0 0 1px rgba(8,145,178, .05);
}
.modal-top { border-bottom-color: rgba(8,145,178, .12); background: rgba(8,145,178, .05); }
.modal-top h3 { color: var(--osh-brand-500, #0891b2); }
.modal-close:hover { color: var(--osh-brand-500, #0891b2); background: rgba(8,145,178, .10); }

/* ── 14. 暗色 3D 详查层：冷蓝夜 → 品牌暖夜（Token 暗色场景）─ */
.hp-detail-overlay { background: var(--osh-night-900, #0B0607); }
.es-scene {
  background: var(--osh-night-800, #0b2b45);
  border-color: rgba(8,145,178, .28);
  box-shadow: 0 4px 20px rgba(11,43,69, .18);
}
.hp-detail-close {
  border-color: rgba(8,145,178, .30);
  background: rgba(11, 6, 7, .88);
  color: var(--osh-brand-300, #7fe9f2);
}
.hp-detail-close:hover { background: rgba(8,145,178, .16); border-color: rgba(8,145,178, .50); }
.hp-detail-top { color: var(--osh-dark-text, #fafbfd); text-shadow: 0 0 10px rgba(8,145,178, .30); }
.hp-float-panel {
  background: rgba(11, 6, 7, .90);
  border-color: rgba(8,145,178, .20);
}
.hp-float-panel .fp-title { color: var(--osh-brand-200, #7fe9f2); border-bottom-color: rgba(8,145,178, .14); }
.hp-float-panel .fp-label { color: rgba(250, 248, 248, .45); }
.hp-principle-bar {
  background: rgba(11, 6, 7, .90);
  border-color: rgba(8,145,178, .18);
}
.hp-principle-bar .ca { color: rgba(250, 248, 248, .40); }
.pump-internal-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,.97), var(--osh-ink-50, #FAF6F6));
  border-color: rgba(8,145,178, .12);
}

/* ── 15. 能源站选择器 / 楼层卡 / 风机格 ───────────────────── */
.es-proj-btn {
  border-color: var(--border2);
  background: #FFFFFF;
  color: var(--t3);
}
.es-proj-btn:hover { color: var(--osh-brand-500, #0891b2); background: rgba(8,145,178, .06); }
.es-proj-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--osh-brand-500, #0891b2), var(--osh-brand-600, #0891b2));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(8,145,178, .28);
}
.floor-card:hover { border-color: rgba(8,145,178, .45); box-shadow: 0 4px 14px rgba(8,145,178, .12); }
.floor-card .fc-name { color: var(--osh-brand-500, #0891b2); }
.hp-card.running { border-left-color: var(--osh-success, #0fb981); }
.fan-item .fan-rpm { color: var(--osh-success, #0fb981); }
.fan-icon { border-color: rgba(8,145,178, .28); background: rgba(8,145,178, .07); }

/* ── 16. 数据溯源 / 报表细节 ──────────────────────────────── */
.proj-card .pc-foot { background: rgba(8,145,178, .04); border-top-color: var(--border2); }
.proj-card .pc-foot .go-btn { color: var(--osh-brand-500, #0891b2); }
.conclusion-item::before { background: var(--osh-success, #0fb981); }
.profit-tag.positive { background: var(--osh-success-bg, #E6F6F0); color: var(--osh-success, #0fb981); border-color: rgba(15,185,129,.28); }
.profit-tag.negative { background: var(--osh-danger-bg, #f2fafb); color: var(--osh-danger, #0e7490); border-color: rgba(180,35,24,.22); }
.fin-big .fb-val { color: var(--osh-brand-500, #0891b2); text-shadow: none; }
.fin-big .fb-val.green { color: var(--osh-success, #0fb981); text-shadow: none; }
.dot.green, .dot-live.green { background: var(--osh-success, #0fb981); box-shadow: 0 0 6px rgba(15,185,129, .45); }

/* ── 17. 动效偏好：全站硬规则 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scan-line, .cop-ring::after, .dot, .dot-live, .fan-icon,
  .wshp-pipe .pipe-particles, .flow-dot, .boost-arrow,
  .pump-internal-wrap .scan-h, .flow-line-anim { animation: none !important; }
}