/* =========================================================================
 * 化工脱硫设备数字孪生可视化监控管理系统 V1.0
 * 共享主题设计令牌（橙/黄 科技风）
 * 大屏端与后台端共同复用本文件
 * ========================================================================= */

:root {
  /* —— 主题色（琥珀橙 / 暖黄）—— */
  --c-primary:        #ff9416;   /* 主橙 */
  --c-primary-soft:   #ffb24d;   /* 亮橙 */
  --c-primary-deep:   #e6760a;   /* 深橙 */
  --c-accent:         #ffd34e;   /* 暖黄强调 */
  --c-accent-soft:    #ffe9a8;   /* 浅黄 */

  /* —— 背景（暖调深色）—— */
  --bg-0:   #07090e;             /* 最底层 */
  --bg-1:   #0b0f17;             /* 主背景 */
  --bg-2:   #11161f;             /* 面板背景 */
  --bg-3:   #161d29;             /* 卡片/悬浮 */
  --bg-glass: rgba(18, 24, 34, .62);

  /* —— 文本 —— */
  --t-strong: #ffeccb;           /* 强文本（暖白）*/
  --t-base:   #d6dde8;           /* 正文 */
  --t-muted:  #8b97a8;           /* 次要 */
  --t-dim:    #5d6779;           /* 极弱 */

  /* —— 状态色 —— */
  --ok:    #3fd69a;              /* 正常/在线 */
  --warn:  #ffcf3f;             /* 预警 */
  --alarm: #ff5b5b;             /* 告警/离线 */
  --info:  #4ab8ff;             /* 信息 */

  /* —— 描边 / 分割 —— */
  --line:        rgba(255, 168, 60, .18);
  --line-strong: rgba(255, 168, 60, .42);
  --line-cool:   rgba(120, 150, 190, .14);

  /* —— 发光 —— */
  --glow-primary: 0 0 12px rgba(255, 148, 22, .55);
  --glow-soft:    0 0 22px rgba(255, 148, 22, .28);

  /* —— 渐变 —— */
  --grad-primary: linear-gradient(90deg, #ff7a00, #ffc24b);
  --grad-panel:   linear-gradient(160deg, rgba(255,148,22,.10), rgba(255,148,22,.02) 60%);
  --grad-title:   linear-gradient(180deg, #fff4dd, #ffc24b 70%, #ff9416);

  /* —— 字号 / 圆角 —— */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --ff-num: 'Orbitron', 'DIN', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
  --ff-base: 'Microsoft YaHei', 'PingFang SC', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-base);
  color: var(--t-base);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* 数字字体（本地无则降级到 Bahnschrift/系统）*/
.num { font-family: var(--ff-num); font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* 内联 SVG 图标基样式（随文字颜色，替代 emoji）*/
.ic { width: 16px; height: 16px; flex: none; vertical-align: -0.18em; }

/* 通用滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,148,22,.35); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* —— 科技风面板（带切角发光边框）—— */
.tech-panel {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
  background-image: var(--grad-panel);
}
.tech-panel::before,
.tech-panel::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--c-primary);
  filter: drop-shadow(var(--glow-primary));
}
.tech-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tech-panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* —— 面板标题 —— */
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--t-strong);
  padding: 10px 12px;
  letter-spacing: 1px;
}
.panel-title::before {
  content: '';
  width: 4px; height: 14px;
  background: var(--grad-primary);
  border-radius: 2px;
  box-shadow: var(--glow-primary);
}

/* —— 状态点 —— */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.ok    { background: var(--ok);    box-shadow: 0 0 8px var(--ok); }
.dot.warn  { background: var(--warn);  box-shadow: 0 0 8px var(--warn); }
.dot.alarm { background: var(--alarm); box-shadow: 0 0 8px var(--alarm); animation: blink 1s steps(2) infinite; }

@keyframes blink { 50% { opacity: .25; } }

/* —— 通用按钮 —— */
.btn {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--t-strong);
  background: rgba(255,148,22,.10);
  border: 1px solid var(--line-strong);
  transition: all .18s ease;
}
.btn:hover { background: rgba(255,148,22,.22); box-shadow: var(--glow-soft); }
.btn.primary { background: var(--grad-primary); color: #2a1500; font-weight: 700; border: 0; }
.btn.primary:hover { filter: brightness(1.08); }