/* ============================================================
   MORIS 设计 Token 与通用工具类（全站深色「工业指挥」视觉）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --m-bg: #060b16;
  --m-panel: #0b1424;
  --m-panel-2: #101c30;
  --m-line: #1c2c47;
  --m-line-strong: #2a4166;
  --m-cyan: #22d3ee;
  --m-blue: #3b82f6;
  --m-crrc: #1d6fd4;
  --m-text: #dbe7f6;
  --m-text-dim: #7d93b5;
  --m-red: #f43f5e;
  --m-amber: #f59e0b;
  --m-green: #34d399;
}

body { background: var(--m-bg); color: var(--m-text); }
/* 移动端防止横向拖移露白 */
html, body { max-width: 100%; }
@media (max-width: 767.98px) {
  body { overflow-x: hidden; }
  .m-kpi { font-size: 28px; }
}

/* 数字与代号字体 */
.num-font { font-family: 'Rajdhani', 'DIN Alternate', sans-serif; letter-spacing: 0.02em; }
.mono-font { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* 面板卡片 */
.m-card {
  background: linear-gradient(160deg, rgba(16,28,48,0.85), rgba(11,20,36,0.92));
  border: 1px solid var(--m-line);
  border-radius: 0.75rem;
  backdrop-filter: blur(6px);
}
.m-card-hover { transition: border-color .2s, box-shadow .2s, transform .2s; }
.m-card-hover:hover { border-color: var(--m-line-strong); box-shadow: 0 8px 30px -12px rgba(34,211,238,0.25); transform: translateY(-1px); }

/* 面板标题 */
.m-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--m-text-dim);
  display: flex; align-items: center; gap: 6px;
}
.m-panel-title::before { content: ''; width: 3px; height: 12px; background: var(--m-cyan); border-radius: 2px; }

/* 状态徽标 */
.m-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 10px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.m-chip-red   { color: #fda4af; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.4); }
.m-chip-amber { color: #fcd34d; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
.m-chip-green { color: #6ee7b7; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); }
.m-chip-cyan  { color: #67e8f9; background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.35); }
.m-chip-blue  { color: #93c5fd; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.4); }
.m-chip-gray  { color: #94a3b8; background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.3); }

/* 主/次按钮 */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; transition: all .2s; cursor: pointer; border: 1px solid transparent; }
.m-btn-primary { background: linear-gradient(120deg, #1d6fd4, #0ea5e9); color: #fff; box-shadow: 0 4px 20px -6px rgba(14,165,233,.5); }
.m-btn-primary:hover { filter: brightness(1.12); box-shadow: 0 6px 24px -6px rgba(14,165,233,.7); }
.m-btn-ghost { background: rgba(148,163,184,.06); color: var(--m-text); border-color: var(--m-line); }
.m-btn-ghost:hover { border-color: var(--m-line-strong); background: rgba(148,163,184,.12); }
.m-btn-danger { background: rgba(244,63,94,.15); color: #fda4af; border-color: rgba(244,63,94,.4); }
.m-btn-danger:hover { background: rgba(244,63,94,.25); }

/* 滚动条 */
.m-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.m-scroll::-webkit-scrollbar-track { background: transparent; }
.m-scroll::-webkit-scrollbar-thumb { background: #24385c; border-radius: 3px; }
.m-scroll::-webkit-scrollbar-thumb:hover { background: #33507f; }

/* 网格背景（大屏氛围） */
.m-grid-bg {
  background-image:
    linear-gradient(rgba(34,211,238,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.04) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* 发光文本 */
.m-glow-cyan { text-shadow: 0 0 18px rgba(34,211,238,.55); }
.m-glow-red  { text-shadow: 0 0 18px rgba(244,63,94,.6); }

/* 呼吸/脉冲 */
@keyframes m-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(244,63,94,.5);} 70% { box-shadow: 0 0 0 10px rgba(244,63,94,0);} 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0);} }
.m-pulse-red { animation: m-pulse-ring 1.8s infinite; }
@keyframes m-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.m-blink { animation: m-blink 1.2s infinite; }

/* 流光扫描线（卡片顶部） */
.m-scanline { position: relative; overflow: hidden; }
.m-scanline::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.8), transparent);
  animation: m-scan 3.6s linear infinite;
}
@keyframes m-scan { to { left: 110%; } }

/* 打字光标 */
.m-caret::after { content: '▍'; color: var(--m-cyan); animation: m-blink 1s infinite; font-size: .85em; }

/* 进入动画 */
@keyframes m-rise { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: none; } }
.m-rise { animation: m-rise .5s cubic-bezier(.22,1,.36,1) both; }
.m-rise-1 { animation-delay: .05s; } .m-rise-2 { animation-delay: .15s; }
.m-rise-3 { animation-delay: .25s; } .m-rise-4 { animation-delay: .35s; }
.m-rise-5 { animation-delay: .45s; } .m-rise-6 { animation-delay: .55s; }

/* KPI 大数字 */
.m-kpi { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: #fff; }

/* 表格 */
.m-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--m-text-dim); font-weight: 700; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--m-line); }
.m-table td { font-size: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(28,44,71,.5); }
.m-table tbody tr { transition: background .15s; cursor: pointer; }
.m-table tbody tr:hover { background: rgba(34,211,238,.05); }

/* 健康度条 */
.m-bar { height: 5px; border-radius: 3px; background: #16233c; overflow: hidden; }
.m-bar > div { height: 100%; border-radius: 3px; }

/* 证据链 Citation */
.m-cite { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 5px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #93c5fd; cursor: pointer; transition: all .15s; }
.m-cite:hover { background: rgba(59,130,246,.22); }