/* ============================================================
   邕安系统 · 基础样式（复位、排版、通用组件、声明条、预警语义类）
   三端共用。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* —— 顶部声明条（所有页面固定）—— */
.decl-bar {
  display: flex; align-items: center; gap: 10px;
  height: 26px; padding: 0 14px;
  background: repeating-linear-gradient(
    45deg, rgba(255, 152, 56, 0.14) 0 12px, rgba(255, 152, 56, 0.06) 12px 24px);
  border-bottom: 1px solid var(--lv-orange-line);
  font-size: 12px; color: var(--lv-yellow);
  letter-spacing: 0.3px; white-space: nowrap; overflow: hidden;
}
.decl-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lv-orange);
  box-shadow: 0 0 8px var(--lv-orange); flex: none; }
.decl-bar b { color: #ffe9b8; }
.decl-bar .spacer { flex: 1; }
.decl-bar .meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* —— 预警语义类（背景/边框/文字）—— */
.lv-blue   { --c: var(--lv-blue);   --cbg: var(--lv-blue-bg);   --cl: var(--lv-blue-line); }
.lv-yellow { --c: var(--lv-yellow); --cbg: var(--lv-yellow-bg); --cl: var(--lv-yellow-line); }
.lv-orange { --c: var(--lv-orange); --cbg: var(--lv-orange-bg); --cl: var(--lv-orange-line); }
.lv-red    { --c: var(--lv-red);    --cbg: var(--lv-red-bg);    --cl: var(--lv-red-line); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--c); background: var(--cbg); border: 1px solid var(--cl);
  white-space: nowrap;
}
.badge .glyph { font-size: 11px; }
.badge.solid { color: var(--ink-invert); background: var(--c); border-color: var(--c); }

/* —— synthetic 模拟要素视觉标识 —— */
.synthetic { position: relative; border-style: dashed !important; border-color: var(--synthetic-line) !important; }
.syn-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: var(--synthetic);
  background: rgba(155, 140, 255, 0.16); border: 1px dashed var(--synthetic-line);
  vertical-align: middle;
}

/* —— 通用面板 —— */
.panel {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0;
}
.panel-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.panel-hd .title { font-size: 14px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.panel-hd .title::before {
  content: ""; display: inline-block; width: 3px; height: 13px; margin-right: 8px;
  background: var(--accent); border-radius: 2px; vertical-align: -2px;
}
.panel-hd .sub { font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.panel-hd .spacer { flex: 1; }
.panel-bd { flex: 1; min-height: 0; padding: 10px 12px; overflow: auto; }
.panel-bd.tight { padding: 6px 8px; }

/* —— 小组件 —— */
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .lbl { font-size: 11px; color: var(--ink-3); }

.trend-up::after   { content: "▲"; color: var(--trend-up); font-size: 10px; margin-left: 3px; }
.trend-down::after { content: "▼"; color: var(--trend-down); font-size: 10px; margin-left: 3px; }
.trend-flat::after { content: "–"; color: var(--trend-flat); font-size: 10px; margin-left: 3px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
table.grid th { color: var(--ink-3); font-weight: 500; font-size: 12px; position: sticky; top: 0; background: var(--bg-panel); z-index: 1; }
table.grid td { color: var(--ink-1); font-variant-numeric: tabular-nums; }
table.grid tr:hover td { background: var(--bg-hover); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--ink-1);
  border: 1px solid var(--line-strong); font-size: 13px;
}
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent); color: var(--ink-invert); border-color: var(--accent); font-weight: 600; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.icon { padding: 5px 8px; }

.chip {
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer;
}
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty { color: var(--ink-3); text-align: center; padding: 20px; font-size: 13px; }

/* —— 加载态 —— */
.loading { position: relative; }
.loading::after {
  content: "加载中…"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-3); font-size: 13px; background: var(--bg-scrim);
}

/* —— 滚动跑马 —— */
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* —— 脉冲（红色告警）—— */
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(255,85,102,0.5); } 50% { box-shadow: 0 0 0 6px rgba(255,85,102,0); } }
.pulse { animation: pulse-red 1.8s infinite; }