:root{
  /* RDFZ Blog palette authority: apps/web/public/app.css. Contrast is verified in test-frontend-theme.mjs. */
  --blog-mango:#fadc5e;
  --blog-mango-deep:#e8c53f;
  --blog-mango-wash:#fdf3cf;
  --blog-iris:#a67eb7;
  --blog-iris-deep:#6e4a80;
  --blog-iris-dark:#3a2a45;
  --blog-iris-wash:#f2ebf6;
  --blog-ink:#1b1720;
  --blog-paper:#fffdf6;
  --bg:#1b1720;
  --bg2:#3a2a45;
  --panel:rgba(58,42,69,.58);
  --panel-strong:rgba(58,42,69,.78);
  --glass:rgba(242,235,246,.09);
  --line:rgba(242,235,246,.25);
  --line-soft:rgba(242,235,246,.13);
  --ink:#fffdf6;
  --muted:#ded5e1;
  --faint:#b7a9bd;
  --cyan:#fadc5e;
  --blue:#e8c53f;
  --violet:#a67eb7;
  --warn:#fadc5e;
  --danger:#ff8c85;
  --ok:#79c6a0;
  --radius:10px;
  --shadow:0 30px 90px rgba(0,0,0,.55);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(250,220,94,.2), transparent 68%),
    radial-gradient(900px 420px at 92% 18%, rgba(166,126,183,.2), transparent 65%),
    radial-gradient(740px 460px at 10% 8%, rgba(232,197,63,.12), transparent 66%),
    linear-gradient(180deg,#1b1720 0%,#241c2a 52%,#120f16 100%);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(rgba(242,235,246,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,235,246,.035) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.98),rgba(0,0,0,.55) 58%,transparent);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30;
  opacity:.32;
  background:
    linear-gradient(transparent 50%,rgba(255,255,255,.025) 50%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.34));
  background-size:100% 4px, auto;
  mix-blend-mode:screen;
}
button,input,select{font:inherit}
button{cursor:pointer}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.loading-line{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:100%;
  z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
  box-shadow:0 0 22px rgba(250,220,94,.82);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
  will-change:transform;
}
.ambient-grid{
  position:fixed;
  inset:-20vh -10vw;
  z-index:-1;
  pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% 50%, transparent, rgba(250,220,94,.05), transparent 22%, rgba(166,126,183,.05), transparent 44%),
    repeating-linear-gradient(120deg, transparent 0 44px, rgba(250,220,94,.03) 44px 45px);
  filter:blur(.2px);
  animation:fieldDrift 28s linear infinite;
}
@keyframes fieldDrift{to{transform:translate3d(-36px,24px,0) rotate(.001deg)}}

.topbar{
  width:min(1540px,calc(100vw - 36px));
  margin:0 auto;
  padding:16px 0 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,253,246,.48);
  background:
    radial-gradient(circle at 50% 50%, rgba(250,220,94,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(250,220,94,.17), transparent 58%);
  box-shadow:0 0 28px rgba(250,220,94,.28), inset 0 0 18px rgba(255,253,246,.08);
  position:relative;
  flex:none;
}
.brand-mark::after{
  content:"";
  position:absolute;inset:7px;border-radius:50%;
  border:1px solid rgba(166,126,183,.44);
  border-left-color:transparent;
  animation:spin 4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-name{
  font-size:25px;
  font-weight:900;
  letter-spacing:.34em;
  line-height:1;
  color:#fffdf6;
  text-shadow:0 0 24px rgba(250,220,94,.3);
}
.brand-sub{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.18em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.command-trigger,.live-chip,.clock,.sync-stamp,.health-pill{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(58,42,69,.56);
  backdrop-filter:blur(18px);
  color:var(--muted);
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.09em;
  white-space:nowrap;
}
.theme-toggle{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(58,42,69,.56);
  color:var(--muted);
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.09em;
}
.theme-toggle:hover,.theme-toggle[aria-pressed="true"]{color:var(--ink);border-color:rgba(255,253,246,.72)}
.health-pill{justify-content:center;min-width:118px}
.command-trigger{color:var(--ink)}
.command-trigger:hover{border-color:rgba(250,220,94,.7);box-shadow:0 0 20px rgba(250,220,94,.18)}
.live-chip{color:#fff;font-weight:800}
.live-chip i{
  width:7px;height:7px;border-radius:50%;
  margin-right:7px;
  background:var(--ok);
  box-shadow:0 0 16px var(--ok);
  animation:pulseLight 1.6s steps(2,end) infinite;
}
@keyframes pulseLight{50%{opacity:.32}}
.health-pill.ok{color:var(--ok);border-color:rgba(121,198,160,.45)}
.health-pill.watch{color:var(--warn);border-color:rgba(250,220,94,.45)}
.health-pill.warn{color:var(--danger);border-color:rgba(255,140,133,.45)}
.health-pill.critical{
  color:#fff;
  border-color:rgba(255,140,133,.78);
  background:linear-gradient(90deg,rgba(255,140,133,.22),rgba(58,42,69,.64));
  box-shadow:0 0 22px rgba(255,140,133,.28),inset 0 0 18px rgba(255,140,133,.1);
  animation:currentErrorPulse 1.35s ease-in-out infinite;
}
.health-pill.history{color:var(--blue);border-color:rgba(232,197,63,.34)}
@keyframes currentErrorPulse{50%{box-shadow:0 0 34px rgba(255,140,133,.48),inset 0 0 22px rgba(255,140,133,.16)}}

.observatory-shell{
  width:min(1540px,calc(100vw - 36px));
  margin:0 auto;
  padding:0 0 72px;
}
.hero-system{
  min-height:650px;
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 340px;
  gap:16px;
  align-items:stretch;
  position:relative;
}
.scene-layer{
  grid-column:1 / -1;
  position:relative;
  min-height:650px;
  border:1px solid rgba(242,235,246,.24);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(250,220,94,.11), transparent 38%),
    radial-gradient(circle at 50% 70%, rgba(166,126,183,.11), transparent 48%),
    linear-gradient(180deg,rgba(58,42,69,.82),rgba(27,23,32,.74));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,253,246,.12);
}
.scene-layer::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(242,235,246,.12);
  border-radius:12px;
  pointer-events:none;
  transform:perspective(900px) rotateX(58deg) translateY(90px) scale(.92);
  background:
    linear-gradient(rgba(250,220,94,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,220,94,.09) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 82%);
}
.scene-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 52%,transparent 0 30%,rgba(27,23,32,.45) 72%,rgba(27,23,32,.86));
}
.scene-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}
.scene-icon-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
/* 站点标记：清亮的发光天体节点。类目以光色 + 符号字形区分，
   不再用挤字母的多边形徽章。错误/交互状态类全部保留。 */
.site-node-icon{
  --site-color:var(--cyan);
  --mark-a:var(--cyan);
  --mark-b:#3a2a45;
  --mark-edge:var(--cyan);
  position:absolute;
  left:0;
  top:0;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--mark-edge),transparent 38%);
  background:
    radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--mark-a),transparent 42%),transparent 60%),
    radial-gradient(circle at 50% 118%,color-mix(in srgb,var(--mark-edge),transparent 52%),transparent 72%),
    radial-gradient(circle at 50% 48%,rgba(58,42,69,.92),rgba(27,23,32,.96));
  box-shadow:
    0 0 17px color-mix(in srgb,var(--mark-edge),transparent 60%),
    0 2px 10px rgba(27,23,32,.5),
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 0 11px color-mix(in srgb,var(--mark-a),transparent 82%);
  transform-origin:center;
  transition:opacity .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease;
  isolation:isolate;
}
/* 顶部高光，营造球体质感 */
.site-node-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:13%;
  width:56%;
  height:38%;
  transform:translateX(-50%);
  z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.42),rgba(255,255,255,.06) 58%,transparent 74%);
  opacity:.72;
  pointer-events:none;
}
.site-mini-icon::before,.command-icon::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.22),transparent 52%);
  pointer-events:none;
}
/* 旧版的网格纹理与挤压字母不再展示（结构保留，避免改动 JS） */
.mark-grid{display:none}
.mark-code{display:none}
.mark-glyph{
  position:relative;
  right:auto;
  top:auto;
  z-index:3;
  display:grid;
  place-items:center;
  line-height:1;
  color:color-mix(in srgb,var(--mark-a),#ffffff 60%);
  text-shadow:0 0 8px color-mix(in srgb,var(--mark-edge),transparent 32%),0 1px 2px rgba(0,0,0,.72);
}
.site-node-icon .mark-glyph{font-size:15px}
.site-node-icon.current{
  width:38px;
  height:38px;
  border-color:rgba(255,140,133,.95);
  box-shadow:
    0 0 0 1px rgba(255,140,133,.5),
    0 0 22px rgba(255,140,133,.7),
    0 0 48px rgba(255,140,133,.32),
    inset 0 0 14px rgba(255,140,133,.22);
  animation:currentIconPulse 1.05s ease-in-out infinite;
}
.site-node-icon.current .mark-glyph{
  color:#fff;
  font-size:18px;
  text-shadow:0 0 11px rgba(255,140,133,.85),0 1px 2px rgba(0,0,0,.7);
}
.site-node-icon.recent{
  border-color:rgba(232,197,63,.78);
  box-shadow:0 0 19px rgba(232,197,63,.42),inset 0 0 11px rgba(232,197,63,.16);
}
.site-node-icon.recent .mark-glyph{color:#ffd9b8}
.site-node-icon.history{
  border-color:rgba(232,197,63,.4);
  opacity:.72;
  filter:saturate(.7);
}
.site-node-icon.dim{opacity:.18}
.site-node-icon.active,.site-node-icon.cat-active{filter:brightness(1.2) saturate(1.08);z-index:2}
.site-node-icon.active{
  box-shadow:
    0 0 24px color-mix(in srgb,var(--mark-edge),transparent 34%),
    inset 0 1px 1px rgba(255,255,255,.24),
    inset 0 0 12px color-mix(in srgb,var(--mark-a),transparent 74%);
}
@keyframes currentIconPulse{50%{box-shadow:0 0 0 1px rgba(255,140,133,.66),0 0 30px rgba(255,140,133,.86),0 0 62px rgba(255,140,133,.4),inset 0 0 18px rgba(255,140,133,.28)}}
.scene-fallback{
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(circle at 50% 42%,rgba(250,220,94,.1),transparent 32%);
}

/* hp / xt 同源的資料站星圖。Canvas 負責節點、關係線、景深與動效；
   HUD 保持資料產品層級，不再以大型 3D 行星遮住站點關係。 */
.scene-layer.atlas-mode .scene-fallback{display:none}
.scene-layer.atlas-mode .scene-reticle{opacity:.16}
.scene-layer.atlas-mode::before{opacity:.28}
.scene-layer.atlas-mode::after{opacity:.22}
.atlas-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
  z-index:2;
}
.atlas-canvas.dragging{cursor:grabbing}
.atlas-canvas.pointing{cursor:pointer}
.atlas-tooltip{
  position:absolute;
  z-index:14;
  top:0;
  left:0;
  width:min(260px,calc(100% - 20px));
  padding:10px 12px;
  border:1px solid rgba(125,211,252,.24);
  border-radius:9px;
  background:rgba(27,23,32,.9);
  box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  color:#fffdf6;
  pointer-events:none;
  backdrop-filter:blur(12px);
}
.atlas-tooltip[hidden]{display:none}
.atlas-tooltip b,.atlas-tooltip span{display:block}
.atlas-tooltip b{font-size:12px;letter-spacing:.02em}
.atlas-tooltip span{margin-top:4px;color:#b7a9bd;font:9px/1.45 var(--mono)}
.scene-reticle{
  position:absolute;
  left:50%;
  top:50%;
  width:min(48vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  border:1px solid rgba(250,220,94,.18);
  box-shadow:0 0 90px rgba(250,220,94,.08), inset 0 0 80px rgba(166,126,183,.05);
}
.scene-reticle::before,.scene-reticle::after{
  content:"";
  position:absolute;inset:14%;
  border-radius:50%;
  border:1px dashed rgba(242,235,246,.18);
}
.scene-reticle::after{inset:31%;border-style:solid}
.scene-tooltip{
  position:absolute;
  z-index:8;
  min-width:210px;
  max-width:280px;
  opacity:0;
  pointer-events:none;
  transform:translateZ(0);
  border:1px solid rgba(250,220,94,.36);
  border-radius:10px;
  background:rgba(27,23,32,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 26px rgba(250,220,94,.16);
  padding:11px 12px;
}
.scene-tooltip b{display:block;color:#fffdf6;font-size:13px}
.scene-tooltip span,.scene-tooltip em{display:block;color:var(--muted);font-size:11px;font-style:normal;margin-top:4px}

.hud-panel{
  position:absolute;
  top:24px;
  z-index:5;
  width:320px;
  border:1px solid rgba(242,235,246,.24);
  border-radius:14px;
  padding:18px;
  background:linear-gradient(180deg,rgba(58,42,69,.76),rgba(58,42,69,.42));
  backdrop-filter:blur(20px);
  box-shadow:0 20px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,253,246,.1);
}
.hud-left{left:24px}
.hud-right{right:24px}
.eyebrow{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero-total{
  margin-top:8px;
  font-size:clamp(42px,5.6vw,76px);
  line-height:.96;
  font-weight:900;
  color:#fffdf6;
  letter-spacing:0;
  text-shadow:0 0 30px rgba(250,220,94,.22);
}
.metric-trend{
  margin-top:14px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.metric-trend:empty{min-height:31px}
.trend{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 9px;
  border:1px solid var(--line);
  background:rgba(58,42,69,.65);
  color:var(--ink);
  font-weight:800;
}
.trend.up{color:var(--cyan);border-color:rgba(250,220,94,.35)}
.trend.down{color:var(--warn);border-color:rgba(250,220,94,.35)}
.trend.neutral{color:var(--muted)}
.hero-kpis{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.hero-kpis:empty{min-height:116px}
.hero-kpis:empty::before{
  content:"";
  grid-column:1/-1;
  min-height:116px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:linear-gradient(110deg,rgba(58,42,69,.42),rgba(250,220,94,.08),rgba(58,42,69,.42));
  opacity:.42;
}
.kpi{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:rgba(27,23,32,.46);
  padding:10px;
}
.kpi span{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em}
.kpi b{display:block;margin-top:5px;font-size:19px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi em{display:block;margin-top:2px;color:var(--faint);font-style:normal;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.warn{border-color:rgba(250,220,94,.32)}
.kpi.current-error{
  border-color:rgba(255,140,133,.62);
  background:linear-gradient(135deg,rgba(255,140,133,.16),rgba(27,23,32,.46));
  box-shadow:inset 0 0 18px rgba(255,140,133,.08);
}
.kpi.current-error b{color:#fff;text-shadow:0 0 14px rgba(255,140,133,.42)}
.kpi.history-error{border-color:rgba(232,197,63,.25)}

.pulse-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:8px 10px;
  margin-bottom:10px;
}
.pulse-now{
  font-size:34px;
  font-weight:900;
  color:#fffdf6;
  text-shadow:0 0 28px rgba(250,220,94,.28);
}
.pulse-head span:last-child{
  min-width:0;
  font-size:12px;
  line-height:1.28;
  color:var(--muted);
  letter-spacing:.08em;
  overflow-wrap:anywhere;
}
.heartbeat{
  width:100%;
  height:110px;
  display:block;
}
.operator-brief{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.operator-brief:empty{min-height:92px}
.operator-brief:empty::before{
  content:"";
  display:block;
  min-height:92px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(242,235,246,.06),transparent);
  opacity:.45;
}
.operator-brief div{
  border-top:1px solid var(--line-soft);
  padding-top:8px;
}
.operator-brief b{display:block;font-size:11px;letter-spacing:.11em;color:#f2ebf6}
.operator-brief span{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}

.control-deck{
  margin-top:16px;
  min-height:60px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(58,42,69,.72),rgba(58,42,69,.44));
  backdrop-filter:blur(18px);
}
.presets{display:flex;gap:7px;flex-wrap:wrap}
.chip,.sort-tabs button{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(58,42,69,.58);
  color:var(--muted);
  padding:7px 12px;
  font-size:12px;
  transition:border-color .16s, color .16s, background .16s, box-shadow .16s;
}
.chip:hover,.chip.active,.sort-tabs button:hover,.sort-tabs button.active{
  color:#fdf3cf;
  border-color:rgba(250,220,94,.62);
  background:rgba(250,220,94,.12);
  box-shadow:0 0 22px rgba(250,220,94,.12);
}
select,input[type=date],#applyRange{
  height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--ink);
  background:rgba(27,23,32,.58);
  padding:0 10px;
  font-size:12px;
}
input[type=date]{color-scheme:dark}
.custom-range{display:flex;align-items:center;gap:6px;color:var(--muted);flex-wrap:wrap}
#applyRange{
  background:linear-gradient(90deg,rgba(250,220,94,.18),rgba(166,126,183,.18));
}
#applyRange:hover{border-color:rgba(250,220,94,.66)}
.infra-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px;
  user-select:none;
}
.infra-toggle input{accent-color:var(--cyan)}
.range-label{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.module-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.module{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(58,42,69,.72),rgba(58,42,69,.38));
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,253,246,.08);
}
.module::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(242,235,246,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,235,246,.035) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.8;
}
.module-head,.module-body,.terrain-wrap,.leaderboard,.category-wrap,.footer{position:relative;z-index:1}
.module-head{
  min-height:56px;
  padding:15px 16px 9px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line-soft);
}
.module-head h2{
  margin:0;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.08em;
  font-weight:850;
}
.module-head span,.module-head > div:not(.sort-tabs){
  color:var(--faint);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.module-body{padding:14px 16px 16px}

.radar-wrap{display:flex;justify-content:center;margin-top:-4px}
.radar-svg{width:min(224px,100%);height:auto;overflow:visible}
.radar-svg .rings circle,.radar-svg .spokes line{fill:none;stroke:rgba(242,235,246,.22)}
.radar-svg text{font-size:10px;fill:var(--muted);font-family:var(--mono)}
.radar-sweep{
  stroke:var(--cyan);
  stroke-width:2;
  transform-origin:120px 120px;
  animation:sweep 3.6s linear infinite;
  filter:drop-shadow(0 0 8px rgba(250,220,94,.9));
}
@keyframes sweep{to{transform:rotate(360deg)}}
.coverage-readout{text-align:center;margin-top:-6px}
.coverage-readout b{font-size:31px;color:#fff;text-shadow:0 0 18px rgba(250,220,94,.22)}
.coverage-readout span{display:block;color:var(--muted);font-size:11px}
.micro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.micro-grid span{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:rgba(27,23,32,.42);
  color:var(--muted);
  padding:8px;
  font-size:11px;
  line-height:1.3;
}
.micro-grid b{display:block;color:#fdf3cf;font-size:16px}

.score-plane{
  min-height:96px;
  display:grid;
  place-items:center;
  border:1px solid rgba(250,220,94,.2);
  border-radius:11px;
  background:
    radial-gradient(circle at 50% 50%,rgba(250,220,94,.16),transparent 62%),
    linear-gradient(135deg,rgba(232,197,63,.08),rgba(166,126,183,.08));
}
.score-plane b{font-size:42px;color:#fff;text-shadow:0 0 24px rgba(250,220,94,.24)}
.score-plane span{color:var(--muted);font-size:11px;letter-spacing:.1em;margin-top:-18px}
.dimension-stack{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.dimension-stack div{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 54px;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}
.dimension-stack i{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(242,235,246,.13);
}
.dimension-stack em{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
  box-shadow:0 0 16px rgba(250,220,94,.26);
}
.dimension-stack b{color:var(--ink);text-align:right}
.module-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}

.cost-core{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  align-items:center;
  gap:12px;
}
.cost-core span,.cost-core em{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  line-height:1.5;
}
.cost-core b{
  display:block;
  color:#fff;
  font-size:24px;
  line-height:1.12;
  margin:5px 0;
}
.budget-orbit{
  width:88px;height:88px;border-radius:50%;
  position:relative;
  border:1px solid rgba(250,220,94,.24);
  background:radial-gradient(circle,rgba(250,220,94,.2),transparent 62%);
  box-shadow:0 0 34px rgba(250,220,94,.24);
}
.budget-orbit i{
  position:absolute;
  inset:14px;
  border:1px solid rgba(166,126,183,.3);
  border-radius:50%;
  animation:spin 5s linear infinite;
}
.budget-orbit i:nth-child(2){inset:24px;border-color:rgba(250,220,94,.42);animation-duration:3.8s;animation-direction:reverse}
.budget-orbit i:nth-child(3){inset:36px;background:rgba(255,253,246,.78);box-shadow:0 0 18px rgba(255,253,246,.45)}
.heat-strip{
  margin-top:13px;
  height:9px;
  border-radius:999px;
  background:rgba(242,235,246,.12);
  overflow:hidden;
}
.heat-strip span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet),var(--warn));
  box-shadow:0 0 18px rgba(250,220,94,.25);
}

.source-matrix{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.source-node{
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:rgba(27,23,32,.42);
  padding:9px;
}
.source-node i{
  width:10px;height:10px;border-radius:50%;
  background:var(--muted);
  box-shadow:0 0 14px rgba(242,235,246,.5);
}
.source-node.ok i{background:var(--ok);box-shadow:0 0 16px rgba(121,198,160,.72)}
.source-node.idle i{background:var(--cyan);box-shadow:0 0 16px rgba(250,220,94,.62)}
.source-node.warn i{background:var(--warn);box-shadow:0 0 16px rgba(250,220,94,.7)}
.source-node b{
  color:var(--ink);
  font-size:11px;
  line-height:1.25;
  min-height:28px;
}
.source-node span{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wide-module{margin-top:16px}
.terrain-wrap{
  height:365px;
  padding:12px 14px 16px;
}
#timeline{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.terrain-grid .grid-line{stroke:rgba(242,235,246,.13)}
.terrain-area{opacity:.9}
.terrain-ridge{
  fill:none;
  stroke:var(--cyan);
  stroke-width:3;
}
.site-line{
  fill:none;
  stroke-width:1.4;
  opacity:.44;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:drawLine 1.3s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--delay);
}
@keyframes drawLine{to{stroke-dashoffset:0}}
.x-labels text{fill:var(--faint);font:11px var(--mono)}
.legend{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}
.legend-item i{
  width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 10px currentColor;
}
.tooltip{
  position:absolute;
  opacity:0;
  pointer-events:none;
  z-index:4;
  transform:translate(-50%,-100%);
  min-width:230px;
  border:1px solid rgba(250,220,94,.32);
  border-radius:10px;
  background:rgba(27,23,32,.92);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 70px rgba(0,0,0,.52);
  padding:10px 12px;
  font-size:12px;
}
.tt-date{color:var(--cyan);font-family:var(--mono);margin-bottom:7px}
.tt-row,.tt-total{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  margin:5px 0;
}
.tt-row .l{display:flex;align-items:center;gap:7px;color:var(--ink);min-width:0}
.tt-row i{width:8px;height:8px;border-radius:50%;flex:none}
.tt-total{border-top:1px solid var(--line-soft);padding-top:7px;color:var(--ink)}
.tt-note{border-top:1px solid var(--line-soft);padding-top:7px;margin-top:7px;color:var(--muted);line-height:1.45}

.lower-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  gap:16px;
  margin-top:16px;
}
.sort-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.sort-tabs button{font-size:11px;padding:5px 9px}
.leaderboard{
  padding:10px 10px 14px;
  display:flex;
  flex-direction:column;
  gap:5px;
  max-height:650px;
  overflow:auto;
}
.lb-row{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) minmax(88px,.32fr) 88px;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:8px;
  transition:background .16s,border-color .16s,transform .16s;
}
.lb-row:hover,.lb-row:focus-visible,.lb-row.active{
  background:rgba(250,220,94,.08);
  border-color:rgba(250,220,94,.28);
  outline:none;
  transform:translateX(2px);
}
.lb-row.err-current{
  border-color:rgba(255,140,133,.62);
  background:linear-gradient(90deg,rgba(255,140,133,.13),rgba(27,23,32,.08));
  box-shadow:0 0 20px rgba(255,140,133,.16),inset 3px 0 0 rgba(255,140,133,.88);
}
.lb-row.err-recent{
  border-color:rgba(232,197,63,.34);
  box-shadow:inset 3px 0 0 rgba(232,197,63,.64);
}
.lb-row.err-history{
  border-color:rgba(232,197,63,.13);
  box-shadow:inset 2px 0 0 rgba(232,197,63,.35);
}
.lb-row.err-exception{
  border-color:rgba(250,220,94,.18);
  border-style:dashed;
}
.lb-rank{
  color:var(--faint);
  font:700 12px var(--mono);
  text-align:center;
}
.lb-rank.top{color:#fff;text-shadow:0 0 14px rgba(250,220,94,.35)}
.lb-id{min-width:0}
.lb-name{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:760;
}
.site-mini-icon,.command-icon{
  --mark-a:var(--cyan);
  --mark-b:#3a2a45;
  --mark-edge:var(--cyan);
  position:relative;
  flex:none;
  display:inline-grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--mark-edge),transparent 46%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--mark-a),transparent 46%),transparent 64%),
    radial-gradient(circle at 50% 50%,rgba(58,42,69,.9),rgba(27,23,32,.94));
  box-shadow:0 0 10px color-mix(in srgb,var(--mark-edge),transparent 66%),inset 0 1px 1px rgba(255,255,255,.16);
  isolation:isolate;
}
.site-mini-icon{width:22px;height:22px}
.command-icon{width:26px;height:26px;grid-row:1/3}
.site-mini-icon .mark-glyph{font-size:11px}
.command-icon .mark-glyph{font-size:13px}
.lb-name i{
  width:9px;height:9px;border-radius:50%;
  flex:none;
  box-shadow:0 0 14px currentColor;
}
.lb-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb-name em{
  flex:none;
  margin-left:2px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:1px 6px;
  color:var(--muted);
  font-style:normal;
  font-size:10px;
  font-weight:650;
}
.lb-name em.ok{color:var(--ok)}
.lb-name em.idle{color:var(--cyan)}
.lb-name em.warn{color:var(--warn)}
.lb-error-state{
  flex:none;
  margin-left:0!important;
  letter-spacing:0;
}
.lb-error-state.current{
  color:#fff!important;
  border-color:rgba(255,140,133,.68)!important;
  background:rgba(255,140,133,.16);
  box-shadow:0 0 14px rgba(255,140,133,.22);
}
.lb-error-state.recent{
  color:#fed7aa!important;
  border-color:rgba(232,197,63,.52)!important;
  background:rgba(232,197,63,.1);
}
.lb-error-state.history{
  color:#facc15!important;
  border-color:rgba(232,197,63,.28)!important;
  background:rgba(232,197,63,.06);
}
.lb-error-state.exception{
  color:var(--cyan)!important;
  border-color:rgba(250,220,94,.34)!important;
  background:rgba(250,220,94,.08);
}
.lb-host,.lb-id small{
  display:block;
  max-width:100%;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:11px;
  text-decoration:none;
}
.lb-host:hover{color:var(--cyan)}
.lb-track{
  height:8px;
  border-radius:999px;
  background:rgba(242,235,246,.13);
  overflow:hidden;
}
.lb-track i{
  display:block;
  height:100%;
  border-radius:999px;
  min-width:2px;
  box-shadow:0 0 16px rgba(250,220,94,.22);
}
.lb-val{text-align:right;color:#fff;font-weight:850}
.lb-val small{
  display:block;
  color:var(--muted);
  font-weight:500;
  font-size:10px;
  margin-top:2px;
}
.category-wrap{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:8px 12px 16px;
}
#rose{
  width:100%;
  height:auto;
  overflow:visible;
}
.donut-seg{
  transition:opacity .16s,stroke-width .16s;
  cursor:pointer;
}
.donut-seg.dim{opacity:.12}
.donut-inner{fill:rgba(27,23,32,.72);stroke:rgba(242,235,246,.18)}
.donut-total{
  fill:#fff;
  font:900 31px var(--mono);
  text-anchor:middle;
}
.donut-sub{
  fill:var(--muted);
  font:12px var(--sans);
  text-anchor:middle;
}
.rose-legend{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.rose-legend button{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  padding:6px;
}
.rose-legend button:hover{border-color:var(--line-soft);background:rgba(250,220,94,.06)}
.rose-legend i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 12px currentColor}
.rose-legend span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--ink)}
.rose-legend b{font-size:11px;color:var(--muted);font-weight:600}

.footer{
  margin:24px auto 0;
  max-width:980px;
  color:var(--faint);
  text-align:center;
  font-size:12px;
  line-height:1.7;
}
.footer b{color:var(--muted)}

.command-palette{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.command-palette.open{display:block}
.command-backdrop{
  position:absolute;
  inset:0;
  background:rgba(27,23,32,.66);
  backdrop-filter:blur(8px);
}
.command-box{
  position:relative;
  width:min(680px,calc(100vw - 28px));
  margin:11vh auto 0;
  border:1px solid rgba(250,220,94,.34);
  border-radius:16px;
  background:rgba(58,42,69,.92);
  box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 50px rgba(250,220,94,.1);
  overflow:hidden;
}
.command-input-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  border-bottom:1px solid var(--line-soft);
}
.command-input-row span{
  text-align:center;
  color:var(--cyan);
  font:800 13px var(--mono);
}
.command-input-row input{
  height:54px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:14px;
}
.command-results{
  max-height:440px;
  overflow:auto;
  padding:8px;
}
.command-results button{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:10px 12px;
}
.command-results button:not(:has(.command-icon)){grid-template-columns:minmax(0,1fr) auto}
.command-results button:hover,.command-results button:focus-visible{
  outline:none;
  border-color:rgba(250,220,94,.3);
  background:rgba(250,220,94,.08);
}
.command-results b{min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-results span{
  color:var(--muted);
  font-size:11px;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

@media (max-width:1180px){
  .hero-system{min-height:760px}
  .scene-layer{min-height:760px}
  .hud-panel{width:calc(50% - 32px)}
  .hud-left{left:18px}
  .hud-right{right:18px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lower-grid{grid-template-columns:1fr}
  .category-wrap{grid-template-columns:300px minmax(0,1fr)}
}
@media (max-width:760px){
  body::after{opacity:.22}
  .topbar,.observatory-shell{width:calc(100vw - 20px)}
  .topbar{align-items:flex-start;padding-top:12px}
  .brand-name{font-size:19px;letter-spacing:.22em}
  .brand-sub{display:none}
  .brand-mark{width:28px;height:28px}
  .topbar-right{gap:6px}
  .clock,.sync-stamp{display:none}
  .command-trigger,.live-chip,.health-pill{min-height:28px;padding:5px 8px;font-size:10px}
  .hero-system{min-height:840px;display:block}
  .scene-layer{min-height:370px}
  .scene-reticle{width:86vw}
  .hud-panel{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    margin-top:10px;
    padding:14px;
  }
  .hero-total{font-size:48px}
  .hero-kpis{grid-template-columns:1fr 1fr}
  .control-deck{gap:8px;padding:10px}
  .presets{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .chip{text-align:center;padding:7px 6px}
  #aySelect,#metricFilter{width:calc(50% - 4px);min-width:0}
  .custom-range{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:6px;
  }
  .custom-range input{min-width:0;width:100%}
  .custom-range button{grid-column:1/-1;width:100%}
  .range-label{margin-left:0;width:100%;line-height:1.45}
  .module-grid{grid-template-columns:1fr;gap:10px}
  .module-head{min-height:auto;padding:13px 13px 8px}
  .module-body{padding:12px}
  .terrain-wrap{height:285px;padding:8px 8px 12px}
  .legend{justify-content:flex-start}
  .lb-row{grid-template-columns:28px minmax(0,1fr) 72px;gap:7px;min-height:68px}
  .lb-track{display:none}
  .lb-val{font-size:13px}
  .sort-tabs{width:100%;justify-content:flex-start;margin-top:8px}
  .category-wrap{grid-template-columns:1fr;padding:8px 12px 14px}
  #rose{max-width:260px;margin:0 auto}
  .source-matrix{grid-template-columns:1fr 1fr}
  .source-node{min-height:72px}
  .micro-grid{grid-template-columns:1fr 1fr}
  .cost-core{grid-template-columns:1fr 82px}
  .budget-orbit{width:76px;height:76px}
  .command-box{margin-top:8vh}
  .command-results span{display:none}
}
@media (max-width:430px){
  .hero-kpis,.micro-grid,.source-matrix{grid-template-columns:1fr}
  #aySelect,#metricFilter{width:100%}
  .pulse-now{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

/* 2026-06-25 product refinement layer */
.observatory-shell,.topbar{width:min(1580px,calc(100vw - 36px))}
.module{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.module-head{
  min-height:50px;
  padding:13px 16px 9px;
  align-items:center;
}
.module-head h2{font-size:14px;white-space:nowrap}
.module-body{flex:1;min-height:0}
.module-grid .module{min-height:420px}
.module-grid{align-items:stretch}
.scene-tooltip,#tlTooltip{display:none!important}
.tooltip-layer{
  position:fixed;
  left:0;
  top:0;
  z-index:120;
  max-width:min(330px,calc(100vw - 32px));
  min-width:220px;
  opacity:0;
  pointer-events:none;
  transform:translateZ(0);
  border:1px solid rgba(250,220,94,.34);
  border-radius:10px;
  background:rgba(27,23,32,.9);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 32px rgba(250,220,94,.12);
  padding:10px 12px;
  color:var(--ink);
}
.tooltip-layer.show{opacity:1}
.tooltip-layer b{display:block;font-size:13px;line-height:1.35;color:#fffdf6}
.tooltip-layer span,.tooltip-layer em,.tooltip-layer small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.45;font-style:normal}
.tooltip-layer .tt-alert.current{color:#fecaca}
.tooltip-layer .tt-alert.recent{color:#fed7aa}
.tooltip-layer .tt-alert.history{color:#fde68a}
.tooltip-layer .tt-alert.exception{color:var(--cyan)}
.tooltip-layer .tt-row,.tooltip-layer .tt-total{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tooltip-layer.compact{max-width:280px}
.num,.hero-total,.pulse-now,.lb-val,.lb-metrics b,.flow-lane b,.signal-cell b{
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.hero-total{
  font-size:clamp(42px,4.8vw,72px);
  overflow-wrap:anywhere;
}
.pulse-now{font-size:clamp(28px,3vw,34px);overflow-wrap:anywhere}
.coverage-nodes{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.coverage-nodes span{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:rgba(27,23,32,.42);
  padding:8px 7px;
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  column-gap:6px;
  align-items:center;
}
.coverage-nodes i{width:7px;height:7px;border-radius:50%;grid-row:1/3;box-shadow:0 0 12px currentColor}
.coverage-nodes i.ok{background:var(--ok);color:var(--ok)}
.coverage-nodes i.uc{background:var(--violet);color:var(--violet)}
.coverage-nodes i.idle{background:var(--cyan);color:var(--cyan)}
.coverage-nodes i.warn{background:var(--warn);color:var(--warn)}
.coverage-nodes b{font:800 15px var(--mono);color:#fdf3cf;min-width:0;overflow:hidden;text-overflow:ellipsis}
.coverage-nodes em{font-style:normal;color:var(--muted);font-size:10px;white-space:nowrap}
.radar-svg{width:min(250px,100%)}
.radar-site-dot{fill:rgba(242,235,246,.28)}
.radar-site-dot.active{fill:rgba(250,220,94,.74);filter:drop-shadow(0 0 4px rgba(250,220,94,.7))}
.radar-point{filter:drop-shadow(0 0 6px rgba(250,220,94,.75))}
.coverage-readout{margin-top:-2px}
.coverage-readout span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.signal-head{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.signal-head .score-plane{min-height:98px}
.signal-head .score-plane b{font-size:38px}
.confidence-strip{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:11px;
  background:rgba(27,23,32,.42);
  padding:12px;
  display:grid;
  align-content:center;
  gap:7px;
}
.confidence-strip span{color:var(--muted);font-size:11px;letter-spacing:.12em}
.confidence-strip b{font:850 24px var(--mono);color:#fff}
.confidence-strip i,.signal-cell i,.flow-lane i{
  display:block;
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(242,235,246,.13);
}
.confidence-strip em,.signal-cell i em,.flow-lane i em{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
}
.signal-matrix{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.signal-cell{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:8px;
  background:rgba(27,23,32,.38);
}
.signal-cell span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#f2ebf6;
  font-size:11px;
  line-height:1.25;
}
.signal-cell span em{font-style:normal;color:var(--faint);font-size:9.5px;white-space:nowrap}
.signal-cell b{display:block;margin:6px 0;font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.signal-cell small{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:5px}
.signal-cell.warn{border-color:rgba(250,220,94,.32)}
.signal-cell.warn i em{background:linear-gradient(90deg,var(--warn),var(--danger))}
.growth-readout{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--line-soft);
  display:grid;
  gap:6px;
}
.growth-readout.unavailable{opacity:.68}
.growth-readout-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#f2ebf6;
  font-size:10.5px;
  letter-spacing:.08em;
}
.growth-readout-head b{font:750 10px var(--mono);color:var(--muted)}
.growth-line{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(94px,1fr) minmax(60px,.72fr) 42px;
  gap:7px;
  align-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--ink);
  padding:4px 3px;
  text-align:left;
}
.growth-line:hover,.growth-line:focus-visible{background:rgba(250,220,94,.06);outline:1px solid rgba(250,220,94,.2)}
.growth-line > span{min-width:0;font-size:10px;color:#f2ebf6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.growth-line > span em{display:block;font-style:normal;color:var(--faint);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.growth-line > i{height:5px;border-radius:999px;overflow:hidden;background:rgba(242,235,246,.13)}
.growth-line > i em{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet))}
.growth-line > b{text-align:right;font:800 11px var(--mono);color:#fdf3cf}

.cost-system{display:grid;gap:12px}
.cost-core{grid-template-columns:minmax(0,1fr) 78px}
.cost-core b{font-size:clamp(20px,2vw,24px);overflow-wrap:anywhere}
.budget-orbit{width:76px;height:76px}
.pressure-line{
  position:relative;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(232,197,63,.28),rgba(250,220,94,.34),rgba(166,126,183,.32),rgba(250,220,94,.42));
  border:1px solid var(--line-soft);
}
.pressure-line span{
  position:absolute;
  top:-5px;
  width:2px;
  height:28px;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.65);
}
.flow-lanes{display:grid;gap:7px}
.flow-lane{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 68px;
  gap:8px;
  align-items:center;
  min-width:0;
}
.flow-lane span{color:var(--muted);font-size:11px;line-height:1.2}
.flow-lane span em{display:block;font-style:normal;color:var(--faint);font-size:9px;margin-top:2px}
.flow-lane b{font-size:13px;color:#fdf3cf;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.flow-lane.warn i em{background:linear-gradient(90deg,var(--cyan),var(--warn))}
.cost-flags{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.cost-flags span{
  min-width:0;
  border:1px solid var(--line-soft);
  border-radius:9px;
  padding:7px;
  color:var(--muted);
  background:rgba(27,23,32,.35);
  font-size:10px;
}
.cost-flags b{display:block;color:#fdf3cf;font-size:13px;overflow:hidden;text-overflow:ellipsis}

.source-health,.source-group{display:grid;gap:6px}
.source-row{
  width:100%;
  min-height:48px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:rgba(27,23,32,.38);
  color:var(--ink);
  display:grid;
  grid-template-columns:10px minmax(88px,1.3fr) repeat(4,minmax(36px,.25fr));
  gap:6px;
  align-items:center;
  padding:6px 7px;
  text-align:left;
}
.source-row:hover{border-color:rgba(250,220,94,.45);background:rgba(250,220,94,.08)}
.source-row:focus-visible,.source-details summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.source-row i{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 12px currentColor}
.source-row.ok i{background:var(--ok);color:var(--ok)}
.source-row.idle i{background:var(--cyan);color:var(--cyan)}
.source-row.warn i{background:var(--warn);color:var(--warn)}
.source-name{min-width:0}
.source-name b{
  display:block;
  color:#fffdf6;
  font-size:10.8px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.source-name em,.source-metric em{display:block;color:var(--faint);font-size:8.5px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-metric{min-width:0;text-align:right}
.source-metric b{
  display:block;
  color:var(--muted);
  font:750 9.5px/1.1 var(--mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
}
.source-details{
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:rgba(27,23,32,.35);
  overflow:hidden;
}
.source-details summary{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 11px;
  color:var(--muted);
  cursor:pointer;
  list-style:none;
  font-size:10.5px;
  letter-spacing:.08em;
}
.source-details summary::-webkit-details-marker{display:none}
.source-details summary::before{
  content:"+";
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--cyan);
  font:800 13px/1 var(--mono);
}
.source-details summary span{margin-right:auto}
.source-details summary b{color:var(--ink);font:800 10px var(--mono)}
.source-details[open] summary{border-bottom:1px solid var(--line-soft);background:rgba(166,126,183,.1)}
.source-details[open] summary::before{content:"−"}
.source-details-list{
  max-height:320px;
  display:grid;
  gap:6px;
  padding:6px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-color:var(--violet) transparent;
}

.terrain-wrap{height:360px}
.terrain-ridge,.terrain-area{display:none}
.tide-layer{opacity:.9;transition:opacity .16s,filter .16s}
.tide-layer.dim{opacity:.16}
.tide-layer.selected{filter:drop-shadow(0 0 12px rgba(250,220,94,.42))}
.tide-area{opacity:.18}
.tide-ridge{fill:none;stroke-width:2.1;filter:url(#terrainGlow);stroke-linecap:round}
.tide-label{fill:rgba(255,253,246,.72);font:10px var(--sans);letter-spacing:.08em}
.time-cursor{stroke:#fdf3cf;stroke-width:1.3;stroke-dasharray:4 5;filter:drop-shadow(0 0 8px rgba(253,243,207,.5))}
.legend button.legend-item{
  border:0;
  background:transparent;
  padding:0;
}
.legend button.legend-item.active{color:#fff;text-shadow:0 0 12px rgba(250,220,94,.45)}

.lower-grid{grid-template-columns:minmax(0,1.65fr) minmax(390px,.72fr);align-items:stretch}
.leaderboard{gap:4px;max-height:650px}
.lb-row{
  position:relative;
  overflow:hidden;
  min-height:72px;
  grid-template-columns:32px minmax(150px,1.05fr) minmax(260px,.95fr) 94px 82px;
  gap:9px;
  padding:8px 9px;
}
.lb-bar-bg{
  position:absolute;
  inset:5px 7px;
  border-radius:9px;
  overflow:hidden;
  background:rgba(242,235,246,.045);
  z-index:0;
}
.lb-bar-bg i{
  display:block;
  height:100%;
  opacity:.12;
  min-width:2px;
}
.lb-row>*:not(.lb-bar-bg){position:relative;z-index:1}
.lb-row.cat-dim{opacity:.38}
.lb-row.cat-match{border-color:rgba(250,220,94,.34);background:rgba(250,220,94,.07)}
.lb-name{font-size:12.5px}
.lb-id{
  display:grid;
  gap:3px;
  align-content:center;
  min-width:0;
}
.lb-id small,.lb-host{
  font-size:10.5px;
  line-height:1.18;
  margin-top:0;
}
.lb-metrics{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}
.lb-metrics em{
  min-width:0;
  border:1px solid rgba(242,235,246,.12);
  border-radius:7px;
  padding:4px 5px;
  background:rgba(27,23,32,.25);
  font-style:normal;
}
.lb-metrics em.focus{border-color:rgba(250,220,94,.42);background:rgba(250,220,94,.09)}
.lb-metrics small{display:block;color:var(--faint);font-size:8.5px;line-height:1}
.lb-metrics b{display:block;margin-top:2px;color:#f2ebf6;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-spark{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:3px}
.spark{width:100%;height:24px;display:block}
.spark path{fill:none;stroke-width:2;stroke-linecap:round}
.spark line{stroke:rgba(242,235,246,.22)}
.spark small{font:800 12px var(--mono);color:var(--muted)}
.spark small.up{color:var(--ok)}
.spark small.down{color:var(--warn)}
.lb-val{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}

.category-wrap{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(390px,1fr) auto;
  gap:8px;
  align-items:stretch;
  padding:8px 12px 14px;
}
#categoryTopology{
  width:100%;
  height:100%;
  min-height:390px;
  overflow:visible;
}
.topology-link{
  fill:none;
  stroke:rgba(242,235,246,.16);
  stroke-width:var(--w);
}
.topology-link.dim{opacity:.16}
.topology-node{cursor:pointer;transition:opacity .16s,filter .16s}
.topology-node.dim{opacity:.22}
.topology-node.selected{filter:drop-shadow(0 0 16px rgba(250,220,94,.38))}
.topology-hit{fill:transparent;pointer-events:all}
.topology-shadow{fill:var(--node);opacity:.14}
.topology-blob{
  fill:color-mix(in srgb, var(--node), transparent 78%);
  stroke:var(--edge);
  stroke-width:1.4;
  opacity:.92;
}
.topology-node:hover .topology-blob{stroke-width:2.2}
.topology-site-dot{fill:#fdf3cf;opacity:.7}
.topology-label{fill:#fffdf6;font:800 12px var(--sans);paint-order:stroke;stroke:rgba(27,23,32,.82);stroke-width:3px}
.topology-value{fill:#fff;font:850 14px var(--mono);paint-order:stroke;stroke:rgba(27,23,32,.82);stroke-width:3px}
.topology-share{fill:var(--muted);font:10px var(--mono)}
.category-legend{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  max-height:174px;
  overflow:auto;
}
.category-legend button{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  border:1px solid transparent;
  border-radius:8px;
  background:rgba(27,23,32,.22);
  color:var(--muted);
  padding:5px 6px;
  text-align:left;
}
.category-legend button:hover,.category-legend button.active{border-color:rgba(250,220,94,.3);background:rgba(250,220,94,.07)}
.category-legend i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 11px currentColor}
.category-legend span{min-width:0;color:var(--ink);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-legend b{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.donut-seg,.donut-inner,.donut-total,.donut-sub,.rose-legend{display:none!important}

@media (max-width:1320px){
  .module-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .module-grid .module{min-height:400px}
  .source-row{grid-template-columns:9px minmax(78px,1fr) repeat(4,minmax(32px,.25fr));gap:5px;padding:6px}
  .source-metric b{font-size:9px}
  .source-metric em{font-size:8px}
  .control-deck .range-label{width:100%;margin-left:0;text-align:right}
  .lb-row{grid-template-columns:30px minmax(150px,1fr) minmax(220px,.9fr) 82px 74px}
  .category-wrap{grid-template-rows:minmax(360px,1fr) auto}
  #categoryTopology{min-height:360px}
}
@media (max-width:900px){
  .topbar,.observatory-shell{width:calc(100vw - 20px)}
  .topbar{gap:10px}
  .brand{gap:9px}
  .brand-name{letter-spacing:.2em}
  .hero-system{min-height:800px;display:block}
  .scene-layer{min-height:420px}
  .hud-panel{
    position:relative;
    inset:auto;
    width:100%;
    margin-top:10px;
    padding:14px;
  }
  .hud-left,.hud-right{left:auto;right:auto}
  .control-deck{min-height:112px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .module-grid .module{min-height:390px}
  .lower-grid{grid-template-columns:1fr}
  .category-wrap{grid-template-rows:minmax(360px,1fr) auto}
  .leaderboard{max-height:620px}
  .lb-row{grid-template-columns:30px minmax(0,1fr) 90px 72px;min-height:72px}
  .lb-metrics{display:none}
  .lb-spark{grid-template-columns:minmax(0,1fr)}
  .lb-spark small{display:none}
}
@media (max-width:620px){
  .topbar{min-height:84px}
  .brand{gap:8px}
  .brand-mark{width:24px;height:24px}
  .brand-name{font-size:17px;letter-spacing:.16em}
  .topbar-right{gap:5px;max-width:calc(100vw - 140px)}
  .health-pill{min-width:108px}
  .module-grid{grid-template-columns:1fr}
  .module-grid .module{min-height:0}
  .hero-system{min-height:1118px}
  .scene-layer{min-height:340px}
  .hud-left{min-height:458px}
  .hud-right{min-height:300px}
  .hero-kpis:empty{min-height:348px}
  .hero-kpis:empty::before{min-height:348px}
  .operator-brief:empty{min-height:148px}
  .operator-brief:empty::before{min-height:148px}
  .control-deck{min-height:314px}
  .hero-total{font-size:clamp(39px,13vw,52px)}
  .coverage-nodes,.signal-matrix,.cost-flags{grid-template-columns:1fr 1fr}
  .signal-head{grid-template-columns:96px minmax(0,1fr)}
  .source-row{grid-template-columns:9px minmax(0,1fr) 46px 46px}
  .source-row .source-metric:nth-of-type(n+4){display:none}
  .source-name b{font-size:10.5px}
  .source-details-list{max-height:260px}
  .growth-line{grid-template-columns:minmax(86px,1fr) minmax(50px,.65fr) 40px}
  .terrain-wrap{height:290px}
  .lb-row{grid-template-columns:28px minmax(0,1fr) 76px;min-height:72px}
  .site-node-icon{width:26px;height:26px}
  .site-node-icon .mark-glyph{font-size:13px}
  .site-node-icon.current{width:32px;height:32px}
  .site-node-icon.current .mark-glyph{font-size:15px}
  .site-mini-icon{width:20px;height:20px}
  .site-mini-icon .mark-glyph{font-size:10px}
  .lb-name{gap:6px}
  .lb-name i{width:7px;height:7px}
  .lb-error-state{display:none}
  .lb-spark{display:none}
  .lb-val{font-size:13px}
  .category-wrap{grid-template-rows:minmax(310px,1fr) auto}
  #categoryTopology{min-height:310px}
  .category-legend{max-height:150px}
  .tooltip-layer{
    left:12px!important;
    right:12px;
    top:auto!important;
    bottom:12px;
    max-width:none;
    width:auto;
  }
}
@media (max-width:430px){
  .control-deck{min-height:314px}
}

/* 可持久化黑白观测模式：保留明度、错误层级和结构，不更改数据语义。 */
html[data-theme="mono"]{
  --bg:#030303;
  --bg2:#0a0a0a;
  --panel:rgba(12,12,12,.64);
  --panel-strong:rgba(18,18,18,.82);
  --glass:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.25);
  --line-soft:rgba(255,255,255,.13);
  --ink:#f7f7f7;
  --muted:#b8b8b8;
  --faint:#7d7d7d;
  --cyan:#f5f5f5;
  --blue:#d4d4d4;
  --violet:#a3a3a3;
  --warn:#c8c8c8;
  --danger:#ffffff;
  --ok:#e5e5e5;
}
html[data-theme="mono"] body{
  background:
    radial-gradient(1100px 560px at 50% -8%,rgba(255,255,255,.13),transparent 68%),
    linear-gradient(180deg,#020202 0%,#090909 54%,#010101 100%);
}
html[data-theme="mono"] body > *{filter:grayscale(1) contrast(1.05)}