/* ============ Equity Periscope · Design Tokens ============ */
:root {
  /* 深海军蓝 */
  --navy-950: #071527;
  --navy-900: #0b1f33;
  --navy-850: #0e2540;
  --navy-800: #12304e;
  --navy-700: #1a3d5f;
  --navy-600: #24507a;
  /* 声呐青绿 */
  --sonar-500: #2fbfc4;
  --sonar-400: #4fd6da;
  --sonar-300: #8ae6e8;
  --sonar-dim: rgba(47, 191, 196, 0.16);
  /* 琥珀回波（异动信号，非红色警报） */
  --amber-500: #d9a441;
  --amber-400: #e8bb62;
  --amber-dim: rgba(217, 164, 65, 0.14);
  /* 海图纸冷灰白 */
  --chart-paper: #eef1f4;
  --chart-paper-2: #e6eaef;
  --chart-line: #d4dbe3;
  --chart-ink: #24384d;
  --chart-ink-2: #5b7086;
  --chart-ink-3: #93a4b5;
  /* 语义色 */
  --ok-500: #3fae7a;
  --ok-dim: rgba(63, 174, 122, 0.15);
  --blue-500: #3d7dd8;
  --blue-400: #6aa0e8;
  /* 文字（暗面板上） */
  --text-hi: #e8eef5;
  --text-mid: #a9bacb;
  --text-low: #6b8098;
  /* 边框 */
  --line-dark: rgba(138, 230, 232, 0.1);
  --line-dark-2: rgba(169, 186, 203, 0.12);
  /* 便签纸（作战包） */
  --paper: #f4eddc;
  --paper-2: #ece2ca;
  --paper-ink: #4a3f28;
  --paper-ink-2: #7d7053;

  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-panel: 0 2px 12px rgba(3, 10, 20, 0.35);
  --shadow-node: 0 1px 4px rgba(36, 56, 77, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-hi);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============ 通用工具类 ============ */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-flex { display: flex; align-items: center; }
.u-gap-sm { gap: 6px; }
.u-gap-md { gap: 10px; }
.u-grow { flex: 1; min-width: 0; }
.u-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 徽章 */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 9px; font-size: 11px; line-height: 17px; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--ok-500); background: var(--ok-dim); }
.badge--amber { color: var(--amber-400); background: var(--amber-dim); }
.badge--sonar { color: var(--sonar-400); background: var(--sonar-dim); }
.badge--mute { color: var(--text-low); background: rgba(107, 128, 152, 0.15); }
.badge--plain::before { display: none; }

/* 面板标题 */
.panel-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
.panel-title .icon { width: 18px; height: 18px; flex: none; color: var(--sonar-400); }
.panel-title .more { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-low); }
.panel-title .more:hover { color: var(--sonar-400); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(169, 186, 203, 0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(169, 186, 203, 0.3); }
::-webkit-scrollbar-track { background: transparent; }

/* 声呐扫描动画 */
@keyframes sonar-ping {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes sonar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fade-up 0.4s ease both; }