/* ✦ 星鉴 · 指挥中心主题 v2 */
* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #090c16; --bg2: #0c1020;
  --panel: rgba(18, 24, 44, .62); --panel-solid: #121a2e;
  --raise: rgba(30, 40, 72, .5);
  --line: rgba(96, 120, 190, .16); --line-hi: rgba(150, 175, 245, .32);
  --text: #dce4f7; --dim: #75819f; --faint: #4a5470;
  --gold: #d4a24e; --gold-soft: rgba(212, 162, 78, .14);
  --info: #7da2e8;
  --ok: #57c690; --ok-soft: rgba(87, 198, 144, .12);
  --warn: #d9a851; --warn-soft: rgba(217, 168, 81, .12);
  --bad: #d96a6a; --bad-soft: rgba(217, 106, 106, .12);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 12px 40px rgba(3, 6, 18, .55);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.75 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100dvh; overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
/* 深空底：极光 + 星尘噪点 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1000px 520px at 78% -12%, rgba(63, 82, 160, .34), transparent 62%),
    radial-gradient(820px 480px at 6% -8%, rgba(150, 106, 38, .16), transparent 58%),
    radial-gradient(640px 900px at 96% 82%, rgba(38, 56, 116, .18), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 42%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
::selection { background: rgba(212, 162, 78, .3); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(96, 120, 190, .22); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 顶栏 ── */
header {
  display: flex; align-items: center; gap: 28px; padding: 0 30px; height: 58px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
  background: rgba(9, 12, 22, .78); backdrop-filter: blur(14px) saturate(1.3);
}
.logo { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.logo .mark { color: var(--gold); font-size: 17px; transform: translateY(-1px); display: inline-block; }
.logo .zh { font-size: 19px; font-weight: 700; letter-spacing: 3px; color: #edf1fb; }
.logo .en { color: var(--faint); font-size: 11px; font-family: var(--mono); letter-spacing: 1.6px; text-transform: uppercase; }
nav { display: flex; gap: 2px; flex: 1; }
nav button {
  background: none; border: none; color: var(--dim); padding: 6px 15px;
  border-radius: 7px; cursor: pointer; font: inherit; font-size: 13.5px;
  position: relative; transition: color .2s, background .2s;
}
nav button:hover { color: var(--text); background: rgba(96, 120, 190, .08); }
nav button.active { color: #f2ecdd; }
nav button.active::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tagline { color: var(--faint); font-size: 11.5px; letter-spacing: 1px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right select {
  background: rgba(7, 10, 20, .65); border: 1px solid var(--line); color: var(--gold);
  border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; max-width: 200px;
}
.who { color: var(--dim); font-size: 12.5px; white-space: nowrap; }

main { max-width: 1180px; margin: 30px auto 80px; padding: 0 26px; }
.view { display: none; }
.view.active { display: block; animation: viewIn .45s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

/* ── 统计区：不对称首卡 + 紧凑组 ── */
.cards { display: grid; grid-template-columns: 1.6fr repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px 13px; position: relative; overflow: hidden;
  backdrop-filter: blur(8px); transition: border-color .25s, transform .25s var(--ease);
  animation: viewIn .5s var(--ease) backwards;
}
.card:nth-child(n) { animation-delay: calc(var(--i, 0) * 55ms); }
.card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 175, 245, .28), transparent);
}
.card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.card .num { font-size: 28px; font-weight: 650; font-family: var(--mono); letter-spacing: -.5px; color: #e8edfa; line-height: 1.25; }
.card .lbl { color: var(--dim); font-size: 11.5px; letter-spacing: .5px; margin-top: 2px; }
.card:first-child .num { font-size: 40px; color: var(--gold); }
.card:first-child { background: linear-gradient(145deg, rgba(212, 162, 78, .09), var(--panel) 55%); }
.card.gold .num { color: var(--gold); }

/* ── 面板 ── */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 18px; backdrop-filter: blur(8px);
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgba(150, 175, 245, .25), transparent 92%);
}
.panel h3 { font-size: 16px; font-weight: 650; letter-spacing: .3px; margin-bottom: 4px; }
.panel h4 { font-size: 12px; color: var(--gold); letter-spacing: 1.5px; font-weight: 600; margin-top: 14px; }
.hint { color: var(--dim); font-size: 12.5px; margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; margin: 10px 0 2px; flex-wrap: wrap; }

/* ── 表单 ── */
input, textarea {
  background: rgba(7, 10, 20, .65); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 13px; flex: 1; font: inherit; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus {
  outline: none; border-color: rgba(212, 162, 78, .45);
  box-shadow: 0 0 0 3px rgba(212, 162, 78, .1);
}
textarea { margin: 10px 0 2px; resize: vertical; }
label { color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 7px; }
input[type=checkbox] { width: auto; flex: none; accent-color: var(--gold); }

/* ── 按钮 ── */
button.primary {
  background: linear-gradient(160deg, #e0b264, #c08d38); color: #1a1206;
  border: none; border-radius: 9px; padding: 9px 20px; cursor: pointer;
  font: inherit; font-weight: 650; white-space: nowrap; letter-spacing: .3px;
  box-shadow: 0 2px 14px rgba(212, 162, 78, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
}
button.primary:hover { filter: brightness(1.08); box-shadow: 0 4px 20px rgba(212, 162, 78, .32), inset 0 1px 0 rgba(255,255,255,.25); }
button.primary:active { transform: scale(.97); }
button.primary:disabled { opacity: .45; cursor: wait; filter: grayscale(.4); }
button.ghost {
  background: rgba(96, 120, 190, .07); border: 1px solid var(--line); color: var(--dim);
  border-radius: 7px; padding: 4px 13px; cursor: pointer; font: inherit; font-size: 12.5px;
  transition: all .2s;
}
button.ghost:hover { color: var(--text); border-color: var(--line-hi); background: rgba(96, 120, 190, .13); }
button.ghost:active { transform: scale(.97); }
button:focus-visible, input:focus-visible { outline: 2px solid rgba(212, 162, 78, .55); outline-offset: 1px; }

/* ── 表格 ── */
table { width: 100%; border-collapse: collapse; margin-top: 6px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(96, 120, 190, .09); }
th { color: var(--faint); font-weight: 550; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-family: var(--mono); }
td { font-size: 13.5px; }
tr:last-child td { border-bottom: none; }
tbody tr, table tr { transition: background .15s; }
tr.clickable { cursor: pointer; }
tr.clickable:hover, table tr:has(td):hover { background: rgba(96, 120, 190, .06); }

/* ── 徽标 ── */
.chip {
  display: inline-block; padding: 1px 10px; border-radius: 5px; font-size: 11.5px;
  letter-spacing: .4px; border: 1px solid; font-weight: 550;
}
.chip.ok { color: var(--ok); border-color: rgba(87, 198, 144, .35); background: var(--ok-soft); }
.chip.warn { color: var(--warn); border-color: rgba(217, 168, 81, .35); background: var(--warn-soft); }
.chip.bad { color: var(--bad); border-color: rgba(217, 106, 106, .35); background: var(--bad-soft); }
.chip.dim { color: var(--dim); border-color: var(--line); background: rgba(96, 120, 190, .05); }

/* ── 图谱 ── */
.graph-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
#graph-canvas {
  height: 640px; background: radial-gradient(700px 420px at 50% 0%, rgba(38, 54, 108, .25), transparent 65%), var(--panel);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
#graph-side {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; height: 640px; overflow: auto; backdrop-filter: blur(8px);
}

/* ── 弹窗 ── */
.modal {
  position: fixed; inset: 0; background: rgba(4, 6, 14, .72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal.hidden { display: none; }
.modal-box {
  background: linear-gradient(180deg, #161f38, #101728); border: 1px solid var(--line-hi);
  border-radius: 18px; max-width: 780px; width: 90%; max-height: 80vh; overflow: auto;
  padding: 28px 30px; position: relative; box-shadow: var(--shadow);
  animation: popIn .3s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
#modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  color: var(--faint); font-size: 22px; cursor: pointer; transition: color .2s;
}
#modal-close:hover { color: var(--text); }

/* ── 证据/引用 ── */
.quote {
  border-left: 2px solid var(--gold); padding: 8px 14px; margin: 8px 0;
  color: #b9c3dd; background: rgba(212, 162, 78, .05);
  border-radius: 0 8px 8px 0; font-size: 13px;
}
.doc-ref { color: var(--info); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; transition: color .2s; }
.doc-ref:hover { color: #a8c2f2; }
.answer {
  white-space: pre-wrap; background: rgba(7, 10, 20, .55); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; margin-top: 12px; font-size: 13.5px;
}

/* ── 雷达扫描加载 ── */
.spinner { display: flex; align-items: center; gap: 12px; color: var(--gold); padding: 14px 2px; font-size: 13px; }
.spinner::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1px solid rgba(212, 162, 78, .3);
  background: conic-gradient(from 0deg, rgba(212, 162, 78, .75), transparent 70deg);
  animation: radar 1.1s linear infinite;
}
@keyframes radar { to { transform: rotate(360deg); } }

/* ── 研判卡片 ── */
.finding { margin-bottom: 16px; animation: viewIn .5s var(--ease) backwards; }
.finding .claim { font-size: 15.5px; font-weight: 650; margin: 8px 0 4px; line-height: 1.6; text-wrap: pretty; }
.finding .meta { color: var(--faint); font-size: 12px; margin-bottom: 8px; font-family: var(--mono); }
.redteam {
  background: rgba(7, 10, 20, .5); border: 1px solid rgba(96, 120, 190, .08);
  border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 13px; color: #aeb8d2;
}
.redteam .lens { color: var(--gold); font-weight: 600; }

/* ── 时间线 ── */
.tl { position: relative; padding: 6px 0 2px; }
.tl-item { display: grid; grid-template-columns: 150px 22px 1fr; gap: 10px; padding: 11px 0; }
.tl-time { color: var(--gold); font-size: 12.5px; font-family: var(--mono); text-align: right; padding-top: 3px; letter-spacing: -.3px; }
.tl-dot { position: relative; }
.tl-dot::before {
  content: ''; position: absolute; left: 6px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 162, 78, .15), 0 0 10px rgba(212, 162, 78, .4);
}
.tl-item:not(:last-child) .tl-dot::after {
  content: ''; position: absolute; left: 9.5px; top: 20px; bottom: -24px; width: 1px;
  background: linear-gradient(180deg, rgba(212, 162, 78, .35), rgba(96, 120, 190, .12));
}
.tl-body { padding-bottom: 4px; }
.tl-body b { font-size: 14px; font-weight: 650; }
.tl-body .hint { margin: 3px 0 4px; }

/* ── Toast 通知（替代 alert）── */
#toasts { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast {
  background: linear-gradient(180deg, #1a2440, #131b30); border: 1px solid var(--line-hi);
  border-left: 3px solid var(--gold); border-radius: 12px; padding: 12px 16px;
  font-size: 13px; box-shadow: var(--shadow); animation: toastIn .35s var(--ease);
  white-space: pre-wrap;
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } }

/* ── 空态 ── */
.empty { text-align: center; padding: 46px 20px; color: var(--dim); }
.empty .glyph { font-size: 30px; color: var(--faint); display: block; margin-bottom: 10px; }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card:first-child { grid-column: 1 / -1; }
  .graph-wrap { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 92px 22px 1fr; }
  nav { overflow-x: auto; }
}

.map-dot { cursor: pointer; }
.map-dot:hover circle { fill: #f0c476; }
#map-slider input[type=range] { accent-color: var(--gold); }