/* ============================================================
   glass.css · 玻璃拟态工具类（依赖 tokens.css）
   用法：<div class="glass glass-md">…</div>
   规则：一律用 token，禁止在业务 css 里再写死 rgba
   ============================================================ */

/* ---------- 基础玻璃 ---------- */
.glass {
  position: relative;
  background: var(--color-bg-card);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
}

/* 尺寸 / 强度变体 */
.glass-sm {
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-sm);
}
.glass-lg {
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-glass-lg);
}
.glass-xl { border-radius: var(--radius-xl); }

/* 内凹槽：列表行 / 输入框 / 事件条目 */
.glass-inset {
  background: var(--color-bg-inset);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 抬起层：hover / 选中卡片 */
.glass-elevated {
  background: var(--color-bg-elevated);
  border-color: var(--border-glass-strong);
  box-shadow: var(--shadow-lg);
}

/* 浮层 / Modal / mini-map 容器 */
.glass-overlay {
  background: var(--color-bg-overlay);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass-lg);
}

/* 渐变玻璃：卡片主体推荐（上亮下暗，制造景深） */
.glass-gradient {
  background: var(--gradient-card);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
}

/* ---------- 顶部高光条（1px 渐变，玻璃"厚度"的关键） ---------- */
.glass-hairline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- 顶部品牌流光条（数据流入感） ---------- */
.glass-flowtop {
  overflow: hidden;
}
.glass-flowtop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 2px;
  background: var(--gradient-flow);
  animation: flow var(--duration-flow) var(--easing-default) infinite;
  pointer-events: none;
}
.glass-flowtop.is-cyan::after { background: var(--gradient-flow-cyan); }

/* ---------- 语义左边框（状态卡片） ---------- */
.glass-edge-brand   { border-left: 2px solid var(--brand-500); }
.glass-edge-info    { border-left: 2px solid var(--color-info); }
.glass-edge-success { border-left: 2px solid var(--color-success); }
.glass-edge-warning { border-left: 2px solid var(--color-warning); }
.glass-edge-danger  { border-left: 2px solid var(--color-danger); }

/* ---------- 全息网格底纹（大板块背景） ---------- */
.holo-grid {
  background-image: var(--gradient-grid);
  background-color: transparent;
}
.holo-scan {
  position: relative;
}
.holo-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-scanline);
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- 数据 pill（状态标签） ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-glass);
  background: var(--color-bg-inset);
  color: var(--text-tertiary);
  font: 500 var(--fs-xs) / 1 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
}
.pill-brand   { color: var(--brand-300);      border-color: var(--border-brand);          background: var(--brand-alpha-08); }
.pill-info    { color: var(--color-info);     border-color: rgba(56, 189, 248, 0.32);     background: var(--info-alpha-12); }
.pill-success { color: var(--color-success);  border-color: rgba(94,234,212, 0.30);      background: var(--success-alpha-12); }
.pill-warning { color: var(--color-warning);  border-color: rgba(251, 191, 36, 0.32);     background: var(--warning-alpha-12); }
.pill-danger  { color: var(--color-danger);   border-color: rgba(255, 51, 102, 0.34);     background: var(--danger-alpha-12); }
.pill-ai      { color: var(--color-accent-violet); border-color: rgba(193,63,224, 0.32); background: var(--violet-alpha-12); }

/* ---------- 状态指示点 ---------- */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-500);
  flex: none;
}
.dot-success { background: var(--color-success); box-shadow: var(--glow-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger);  box-shadow: var(--glow-danger); }
.dot-brand   { background: var(--brand-500);     box-shadow: var(--glow-brand); }
.dot-live    { animation: pulse var(--duration-pulse) var(--easing-default) infinite; }

/* 未读小红点（M4 情报列表） */
.dot-unread {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: var(--glow-danger);
}

/* ---------- 数字（等宽 + 表格对齐，防跳动） ---------- */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono);
  color: var(--text-primary);
}
.num-xl { font-size: var(--fs-xl); font-weight: 700; }
.num-2xl { font-size: var(--fs-2xl); font-weight: 700; }
.num-unit { font-size: var(--fs-xs); color: var(--text-muted); margin-left: 2px; }

/* ---------- 滚动区淡出遮罩（列表底部虚化，暗示"还有更多"） ---------- */
.fade-bottom {
  position: relative;
}
.fade-bottom::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28px;
  background: var(--gradient-fade-bottom);
  pointer-events: none;
}

/* ---------- 细滚动条（暗色） ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--gray-700) transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--gray-700);
  border-radius: var(--radius-pill);
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ---------- 交互反馈 ---------- */
.glass-hover {
  transition: transform var(--duration-normal) var(--easing-default),
              border-color var(--duration-normal) var(--easing-default),
              box-shadow var(--duration-normal) var(--easing-default);
}
.glass-hover:hover {
  transform: translateY(-2px);
  border-color: var(--border-brand);
  box-shadow: var(--shadow-lg), var(--glow-brand);
}
.glass-hover:active { transform: translateY(0); }

/* 焦点可见（键盘无障碍） */
.glass:focus-visible,
.glass-hover:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}