/* 支付大脑 · 网站全景沉浸页 */
.pano-page { background:#05070d; color:#e5e7eb; min-height:100vh; }
.pano-header { border-bottom-color:rgba(255,255,255,0.08); background:rgba(5,7,13,0.92); }

.pano-wrap { padding:22px 22px 30px; }
.pano-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.pano-title h1 { font-size:28px; font-weight:900; letter-spacing:3px; color:#fff; }
.pano-title p { font-size:12px; color:#86909c; margin-top:6px; letter-spacing:1px; }
.pano-stats { display:flex; gap:10px; flex-wrap:wrap; }
.pano-stat { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:9px 14px; min-width:92px; }
.pano-stat .n { font-size:20px; font-weight:800; color:#fff; font-family:var(--mono); }
.pano-stat .n.gold { color:#f7ba1e; }
.pano-stat .n.green { color:#00b42a; }
.pano-stat .n.blue { color:#165dff; }
.pano-stat .l { font-size:11px; color:#86909c; margin-top:2px; }

.pano-stage { position:relative; width:100%; height:calc(100vh - 170px); min-height:560px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:#05070d; overflow:hidden; }

.pano-grid { position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none; }

.pano-svg { width:100%; height:100%; display:block; cursor:grab; }
.pano-svg:active { cursor:grabbing; }
.pano-path { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:1; }
.pano-path.dash { stroke-dasharray:6 6; }

/* 粒子气泡：形状/圆角/描边由 JS 按样式变体设置 */
.particle-bubble { pointer-events:none; }
.particle-bubble text { fill:#fff; font-size:11px; font-weight:700; text-anchor:middle; }

/* 缩放提示 */
.pano-zoom-hint { position:absolute; right:14px; bottom:14px; font-size:11px; color:#86909c; z-index:40; }

.pnode { cursor:pointer; }
.pnode-planet { fill:rgba(255,255,255,0.03); stroke-width:2; transition:all .2s; }
.pnode-core { fill:rgba(255,255,255,0.04); stroke:#165dff; stroke-width:3; }
.pnode-value { fill:rgba(255,255,255,0.04); stroke:#f7ba1e; stroke-width:3; }
.pnode-source { fill:#fff; stroke:#165dff; stroke-width:2; }
.pnode-sat { fill:#05070d; stroke-width:1.2; transition:all .15s; }
.pnode-ring { fill:none; stroke-width:1; opacity:0.25; }

.pnode:hover .pnode-planet { fill:rgba(255,255,255,0.08); stroke-width:3; }
.pnode:hover .pnode-sat { opacity:1; fill:rgba(255,255,255,0.1); }

.pano-label { fill:#e5e7eb; font-size:13px; font-weight:800; letter-spacing:0.8px; text-anchor:middle; pointer-events:none; }
.pano-label-sub { fill:#86909c; font-size:10px; font-weight:500; letter-spacing:0.3px; text-anchor:middle; pointer-events:none; }
.pano-sat-label { fill:#9ca3af; font-size:8px; font-weight:600; text-anchor:middle; pointer-events:none; opacity:0.16; transition:opacity .2s; }
.pnode:hover .pano-sat-label { opacity:1; }
.world-hub-label { fill:rgba(16,185,129,0.72); font-size:10px; font-weight:700; text-anchor:middle; pointer-events:none; }
.hide-sats .pano-sat-label { opacity:0; }
.hide-sats .pnode-sat { opacity:0.15; }

.particle { fill:#fff; pointer-events:none; }

/* 节点呼吸动效（无阴影，纯描边透明度） */
@keyframes nodePulse {
  0%,100%{ stroke-opacity:1; }
  50%{ stroke-opacity:0.45; }
}
.pulse { animation:nodePulse 2.4s ease-in-out infinite; }
@keyframes ringSpin {
  from { stroke-dashoffset:120; }
  to { stroke-dashoffset:0; }
}
.orbit { stroke-dasharray:8 6; animation:ringSpin 8s linear infinite; }

/* 全球地图样式 */
.world-map { fill:rgba(16,185,129,0.18); stroke:rgba(16,185,129,0.45); stroke-width:1; }
.world-hub { fill:#10b981; stroke:#fff; stroke-width:0.6; }
.world-route { fill:none; stroke:rgba(16,185,129,0.35); stroke-width:1; stroke-dasharray:6 5; }

/* 悬浮提示 */
.pano-tip { position:fixed; z-index:80; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .15s, transform .15s; }
.pano-tip.show { opacity:1; transform:translateY(0); }
.pano-tip-in { background:rgba(8,12,22,0.98); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:12px 14px; min-width:180px; }
.pano-tip-in h4 { font-size:14px; font-weight:800; color:#fff; letter-spacing:0.5px; }
.pano-tip-in p { font-size:12px; color:#c9cdd4; margin-top:4px; line-height:1.6; }
.pano-tip-in .meta { display:flex; gap:10px; margin-top:8px; font-size:11px; color:#86909c; }

/* 右侧抽屉 */
.pano-drawer { position:absolute; top:14px; right:14px; bottom:14px; width:320px; background:rgba(8,12,22,0.98); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:18px; transform:translateX(110%); transition:transform .25s ease; z-index:60; overflow:auto; }
.pano-drawer.open { transform:translateX(0); }
.pano-drawer h3 { font-size:16px; font-weight:800; color:#fff; letter-spacing:0.8px; margin-bottom:4px; }
.pano-drawer .sub { font-size:11px; color:#86909c; margin-bottom:14px; }
.pano-drawer .close { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:#86909c; cursor:pointer; font-size:16px; line-height:1; }
.pano-sysrow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.pano-sysrow:last-child { border-bottom:none; }
.pano-sysrow a { color:#e5e7eb; font-size:13px; font-weight:700; flex:1; }
.pano-sysrow a:hover { color:#165dff; }
.pano-sysrow .tag { font-size:10px; padding:1px 7px; border-radius:999px; }

/* 控制条 */
.pano-ctrl { position:absolute; left:14px; bottom:14px; display:flex; gap:8px; z-index:50; }
.pano-ctrl button { background:rgba(8,12,22,0.9); border:1px solid rgba(255,255,255,0.12); color:#e5e7eb; border-radius:8px; padding:8px 14px; font-size:12px; cursor:pointer; transition:all .15s; }
.pano-ctrl button:hover { border-color:#165dff; color:#165dff; }
.pano-ctrl button.primary { background:#165dff; border-color:#165dff; color:#fff; }
.pano-ctrl button.primary:hover { background:#2563ff; }

@media (max-width:960px){
  .pano-stage { height:680px; }
  .pano-drawer { width:260px; }
}