:root {
  --bg-primary: #050a12;
  --bg-secondary: #091322;
  --bg-card: rgba(12, 24, 42, 0.72);
  --bg-card-hover: rgba(18, 35, 60, 0.85);
  --border-card: rgba(0, 240, 255, 0.15);
  --border-glow: rgba(0, 240, 255, 0.45);

  --cyan-primary: #00f2fe;
  --cyan-bright: #00f0ff;
  --cyan-soft: #38bdf8;
  --cyan-dark: #0284c7;
  --cyan-glow: rgba(0, 242, 254, 0.35);

  --accent-mint: #00ffc2;
  --accent-purple: #a855f7;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  --text-main: #f0f7ff;
  --text-muted: #849bbb;
  --text-dim: #455d80;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --transition-smooth: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none;
}

button:focus,
button:active,
button:focus-visible,
a:focus,
a:active,
a:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

body {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(56, 189, 248, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(0, 255, 194, 0.06) 0%, transparent 50%),
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  color: var(--text-main);
  font-family: var(--font-sans);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* Ambient Top Laser Line */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-primary), var(--accent-mint), var(--cyan-primary), transparent);
  z-index: 1000;
  box-shadow: 0 0 16px var(--cyan-bright);
}

.app-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 24px 20px;
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  margin-bottom: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.brand:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.brand:hover .brand-icon {
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.20);
  border-color: rgba(0, 240, 255, 0.6);
}

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(0, 255, 194, 0.08));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-bright);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand-title {
  position: relative;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
}

.brand-title span:not(.brand-badge) {
  background: linear-gradient(135deg, var(--cyan-bright), var(--accent-mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.brand-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1.5px 5px;
  border-radius: 4px;
  background: rgba(0, 242, 254, 0.12);
  color: var(--cyan-bright);
  border: 1px solid rgba(0, 240, 255, 0.35);
  font-weight: 700;
  letter-spacing: 0.6px;
  -webkit-text-fill-color: var(--cyan-bright);
  line-height: 1.1;
  position: relative;
  top: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-selector-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.node-selector-pill:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.node-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 8px var(--accent-mint);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.node-pill-label {
  font-size: 12px;
  color: var(--text-muted);
}

.node-pill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan-primary);
  font-family: var(--font-mono);
}

.btn-secondary {
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan-bright);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

/* ========================================================
   FLOW STAGES (PRE-TEST -> TESTING -> REPORT)
   ======================================================== */
.speed-flow-container {
  position: relative;
  width: 100%;
}

.stage-view {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.stage-view.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Glass Cyber Card */
.cyber-card {
  background: var(--bg-card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  transition: var(--transition-smooth);
}

.cyber-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid var(--cyan-bright);
  border-left: 2px solid var(--cyan-bright);
  opacity: 0.4;
  pointer-events: none;
}

.cyber-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid var(--accent-mint);
  border-right: 2px solid var(--accent-mint);
  opacity: 0.4;
  pointer-events: none;
}

/* ========================================================
   FRAMELESS CONTAINERS (全站统一极简无界赛博质感)
   ======================================================== */
.report-card {
  border: 1px solid rgba(0, 240, 255, 0.055) !important;
  background: rgba(8, 16, 28, 0.78) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* GO 测速容器与测试过程容器：底色与黑纸块彻底隐藏，消除边界感，直接悬浮在科技背景画布上 */
.pretest-card,
.testing-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pretest-card::before,
.pretest-card::after,
.testing-card::before,
.testing-card::after,
.report-card::before,
.report-card::after {
  display: none !important;
}

/* 体检卡片内部板块同步隐藏边框，保持整体纯粹无界质感 */
.speed-metric-box,
.report-globe-section,
.ip-audit-card {
  border: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

/* ========================================================
   STAGE 1: PRE-TEST (SHARP FLAT GO + SLIM LEVER + PING WAVE)
   ======================================================== */
.pretest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 20px 24px;
  text-align: center;
  position: relative;
  min-height: 400px;
}

.pretest-top-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pretest-top-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 6px var(--accent-mint);
}

/* Same pill, warning tone: reused for the edge-throttle notice so we do not
   need a second banner in the pre-test card. */
.pretest-top-badge.is-warning {
  color: var(--accent-rose, #f43f5e);
  /* A CJK sentence, not a telemetry readout: the mono stack has no Chinese
     glyphs and falls back to a bitmap-ish face at 11px. */
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

.pretest-top-badge.is-warning .dot {
  background: var(--accent-rose, #f43f5e);
  box-shadow: 0 0 8px var(--accent-rose, #f43f5e);
  animation: pretestBadgePulse 1.6s ease-in-out infinite;
}

@keyframes pretestBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Center Stage Area: Holds GO Button with Thread Switcher Directly Below */
.pretest-center-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  width: 100%;
}

/* Flat-Cyber GO Button Wrapper */
.go-flat-wrapper {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}

/* Outer Rotating Laser Reticle */
.go-outer-laser-ring {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.25);
  pointer-events: none;
  animation: rotateClockwise 36s infinite linear;
}

@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* The Flat-Cyber GO Button with Liquid Fill Effect (慢慢灌水并满上) */
.btn-go-flat {
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 50% !important;
  background: rgba(8, 18, 32, 0.88);
  border: 1.5px solid rgba(0, 240, 255, 0.65);
  box-shadow: 
    0 0 20px rgba(0, 240, 255, 0.2),
    inset 0 0 16px rgba(0, 240, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  z-index: 5;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  overflow: hidden; /* Clips water ripples inside circle */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.btn-go-flat:focus,
.btn-go-flat:focus-visible,
.btn-go-flat:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.btn-go-flat * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}

.go-flat-text,
.go-flat-sub {
  pointer-events: none !important;
}

/* Water Tank & Liquid Layer */
.go-water-tank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.water-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 24%; /* 静止时不超底部 1/3 (约 24%) */
  overflow: hidden; /* 严格物理遮罩边界：旋转刀锋未移入前绝不冒头超底部 1/3 */
  transition: height 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* On Hover: Liquid slowly rises and fills the ball to 100% (慢慢灌水并满上，展开完整大转轮) */
.btn-go-flat:hover .water-body {
  height: 100%;
}

/* Wavy Liquid Surface */
.water-waves-wrap {
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 18px;
  overflow: visible;
  z-index: 3;
}

.water-wave-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

.water-wave-svg.wave-back {
  fill: var(--liquid-wave-back, rgba(0, 255, 194, 0.35));
  animation: waveSlide 4s linear infinite;
}

.water-wave-svg.wave-front {
  fill: var(--liquid-wave-front, rgba(0, 240, 255, 0.5));
  animation: waveSlide 2.5s linear infinite reverse;
}

@keyframes waveSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Big Rotating Wheel (赛博流体大转轮：动态非线性涡流，打破呆板风扇感) */
.water-rotator-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  animation: dynamicVortexSpin var(--rotator-speed, 6.2s) cubic-bezier(0.42, 0.08, 0.58, 0.92) infinite;
}

@keyframes dynamicVortexSpin {
  0% {
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
  22% {
    transform: translateX(-50%) rotate(105deg) scale(1.02);
  }
  48% {
    transform: translateX(-50%) rotate(165deg) scale(0.97);
  }
  74% {
    transform: translateX(-50%) rotate(275deg) scale(1.03);
  }
  88% {
    transform: translateX(-50%) rotate(320deg) scale(0.98);
  }
  100% {
    transform: translateX(-50%) rotate(360deg) scale(1);
  }
}

.rotator-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 176px;
  margin-left: -24px;
  margin-top: -88px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--liquid-blade, rgba(0, 240, 255, 0.45)) 0%, rgba(0, 180, 216, 0.12) 100%);
  filter: drop-shadow(0 0 10px var(--liquid-glow, rgba(0, 240, 255, 0.4)));
  transform-origin: 50% 50%;
}

/* Blade 1: 动态有机摆动与张合 */
.rotator-blade.blade-1 {
  animation: bladeWave1 var(--blade1-speed, 3.8s) ease-in-out infinite alternate;
}

@keyframes bladeWave1 {
  0% {
    transform: rotate(-16deg) scaleY(0.96) skewX(-2deg);
    opacity: 0.85;
  }
  50% {
    transform: rotate(-38deg) scaleY(1.03) skewX(3deg);
    opacity: 0.65;
  }
  100% {
    transform: rotate(-22deg) scaleY(0.98) skewX(-1deg);
    opacity: 0.9;
  }
}

/* Blade 2: 动态反相张合与浮动 */
.rotator-blade.blade-2 {
  animation: bladeWave2 var(--blade2-speed, 4.6s) ease-in-out infinite alternate;
}

@keyframes bladeWave2 {
  0% {
    transform: rotate(48deg) scaleY(1.03) skewX(3deg);
    opacity: 0.7;
  }
  50% {
    transform: rotate(22deg) scaleY(0.96) skewX(-2deg);
    opacity: 0.95;
  }
  100% {
    transform: rotate(42deg) scaleY(1.01) skewX(1deg);
    opacity: 0.75;
  }
}

.water-liquid-fill {
  position: absolute;
  inset: 0;
  background: var(--liquid-grad, linear-gradient(180deg, rgba(0, 240, 255, 0.5) 0%, rgba(0, 140, 255, 0.72) 40%, rgba(0, 70, 180, 0.92) 100%));
  z-index: 1;
}

/* Water Ambient Glow */
.water-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 28px var(--liquid-glow, rgba(0, 240, 255, 0.55));
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 4;
}

.btn-go-flat:hover .water-glow {
  opacity: 1;
}

/* Corner Reticle Notches */
.btn-go-flat::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--cyan-bright);
  border-left: 2px solid var(--cyan-bright);
  top: 14px;
  left: 14px;
  opacity: 0.6;
  z-index: 6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.btn-go-flat::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--accent-mint);
  border-right: 2px solid var(--accent-mint);
  bottom: 14px;
  right: 14px;
  opacity: 0.6;
  z-index: 6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.btn-go-flat:hover {
  border-color: var(--accent-mint);
  box-shadow: 
    0 0 32px rgba(0, 240, 255, 0.5),
    0 0 50px rgba(0, 255, 194, 0.25),
    inset 0 0 20px rgba(0, 255, 194, 0.2);
}

.btn-go-flat:hover::before,
.btn-go-flat:hover::after {
  opacity: 1;
  border-color: var(--accent-mint);
}

.btn-go-flat:active {
  background: rgba(7, 16, 28, 0.98);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.go-flat-text {
  font-size: 50px;
  font-family: var(--font-mono);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffffff 15%, var(--cyan-bright) 70%, var(--accent-mint) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
  position: relative;
  z-index: 5;
  transition: filter 0.2s ease;
}

.btn-go-flat:hover .go-flat-text {
  filter: drop-shadow(0 0 16px rgba(0, 255, 194, 0.9));
}

.go-flat-sub {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 1.5px;
  color: var(--cyan-soft);
  margin-top: 5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 5;
}

.go-flat-sub .sub-arrow {
  display: inline-block;
  font-size: 8px;
  color: var(--accent-mint);
  animation: pulseArrow 1.5s infinite ease-in-out;
}

@keyframes pulseArrow {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* ========================================================
   VISITOR TELEMETRY PILL (位于 GO 与 线程选择器 之间)
   ======================================================== */
.go-visitor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 18, 32, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.14);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  color: #94a3b8;
  user-select: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  max-width: 90%;
  margin-top: 2px;
  margin-bottom: -4px;
  z-index: 10;
}

.go-visitor-pill:hover {
  background: rgba(12, 24, 44, 0.92);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.15);
}

.vpill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 6px var(--accent-mint);
  flex-shrink: 0;
  animation: pulseGlow 2s infinite;
}

.vpill-ip {
  color: var(--cyan-bright);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.vpill-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  flex-shrink: 0;
}

.vpill-carrier {
  color: #cbd5e1;
  font-size: 12px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.vpill-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.vpill-flag .country-flag-wrap {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
}

.vpill-flag .country-flag-img {
  width: 17px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.vpill-flag .flag-emoji {
  font-size: 13px;
  line-height: 1;
}

/* ========================================================
   CYBER THREAD SWITCHER (位于 GO 正下方，纯净无气泡)
   ======================================================== */
.cyber-thread-dock-center {
  position: static;
  width: 210px;
  margin-top: 0;
  user-select: none;
  z-index: 10;
}

/* Button Group */
.thread-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.btn-thread-opt {
  background: rgba(5, 14, 25, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 6px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.btn-thread-opt:hover {
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.08);
}

.btn-thread-opt.active {
  border-color: var(--cyan-bright);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.opt-tag {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan-soft);
  transition: color 0.2s ease, background 0.2s ease;
}

.btn-thread-opt.active .opt-tag {
  background: var(--cyan-bright);
  color: #030a14;
}

.opt-name {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.btn-thread-opt.active .opt-name {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.opt-name {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.btn-thread-opt.active .opt-name {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* ========================================================
   WAVEFORMS: PRE-TEST PING WAVE & SPARKLINE TELEMETRY
   ======================================================== */
.pretest-wave-wrapper {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 20px auto;
}

.sparkline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.sparkline-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.sparkline-stats {
  color: var(--cyan-soft);
  font-weight: 600;
}

.sparkline-container {
  width: 100%;
  height: 54px;
  background: rgba(6, 12, 22, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  position: relative;
  overflow: hidden;
}

.sparkline-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Visitor IP Quick Info Bar (with Country Flag) */
.pretest-ip-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: rgba(0, 240, 255, 0.04);
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.1);
}

.pretest-ip-bar strong {
  color: #fff;
}

/* Country Flag Badge */
.country-flag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

.country-flag-img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.flag-emoji {
  font-size: 14px;
  line-height: 1;
}

/* ========================================================
   STAGE 2: TESTING (CANVAS HUD SPEEDOMETER + LIVE SPARKLINE)
   ======================================================== */
.testing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 20px 0;
  text-align: center;
}

.stage-top-hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.12);
  margin-bottom: 8px;
}

.hud-tag {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 6px var(--accent-mint);
}

/* Shown for ~0.7s on the gauge screen before bouncing back to the GO page. */
.hud-tag.is-throttled {
  color: var(--accent-rose, #f43f5e);
}

.hud-tag.is-throttled .hud-dot {
  background: var(--accent-rose, #f43f5e);
  box-shadow: 0 0 8px var(--accent-rose, #f43f5e);
  animation: pretestBadgePulse 1.6s ease-in-out infinite;
}

/* High-tech Sci-Fi Canvas HUD Gauge */
.gauge-wrapper {
  position: relative;
  width: 380px;
  height: 320px;
  margin: 6px auto 14px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gauge-wrapper::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

#gaugeCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.gauge-center-hud {
  position: absolute;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.gauge-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-bright);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.gauge-status-pill .status-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 8px var(--cyan-bright);
  animation: pulseDot 1.5s infinite ease-in-out;
}

.gauge-status-pill.download {
  border-color: var(--accent-mint);
  color: var(--accent-mint);
}
.gauge-status-pill.download .status-pulse {
  background: var(--accent-mint);
  box-shadow: 0 0 8px var(--accent-mint);
}

.gauge-status-pill.upload {
  border-color: #38bdf8;
  color: #38bdf8;
}

.gauge-digital-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.gauge-value {
  font-size: 58px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-style: italic;
  transform: skewX(-4deg);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -2px;
  text-shadow: 0 0 24px rgba(0, 240, 255, 0.65), 0 0 48px rgba(0, 240, 255, 0.3);
}

.gauge-unit {
  font-size: 15px;
  font-family: var(--font-mono);
  color: var(--cyan-soft);
  font-weight: 700;
  letter-spacing: 1px;
}

.gauge-sub-telemetry {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.testing-wave-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 6px 0 18px 0;
}

/* Metric Display Cards Grid */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 14px;
}

.metric-card {
  background: rgba(10, 20, 36, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.metric-card.active {
  border-color: var(--cyan-bright);
  background: rgba(0, 240, 255, 0.06);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.metric-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-icon {
  color: var(--cyan-bright);
}

.metric-value-box {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 4px;
}

.metric-number {
  font-size: 26px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}

.metric-unit {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--cyan-soft);
}

.metric-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  display: flex;
  justify-content: space-between;
}

.btn-abort-test {
  display: none !important;
  padding: 10px 28px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fb7185;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  margin-top: 18px;
  transition: var(--transition-smooth);
}

.btn-abort-test:hover {
  background: rgba(244, 63, 94, 0.25);
  border-color: #f43f5e;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.35);
}

/* ========================================================
   STAGE 3: COMPLETED (综合体检卡片 + 全程波形 + 站点PING雷达)
   ======================================================== */
.report-card {
  padding: 30px 28px;
  position: relative;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  margin-bottom: 22px;
}

.report-title-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-badge-prefix {
  display: inline;
}
.report-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  color: var(--accent-mint);
  text-transform: uppercase;
}

.report-badge .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 8px var(--accent-mint);
}

.report-verdict {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.report-stamp {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0, 255, 194, 0.1);
  border: 1px solid var(--accent-mint);
  color: var(--accent-mint);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 255, 194, 0.2);
}

/* 1. Speed Showcase Grid inside Report */
.report-speed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.speed-metric-box {
  background: rgba(8, 16, 28, 0.55);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.speed-metric-box.highlight-down {
  border-color: rgba(0, 240, 255, 0.35);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(8, 16, 28, 0.7));
}

.speed-metric-box.highlight-up {
  border-color: rgba(0, 255, 194, 0.35);
  background: linear-gradient(135deg, rgba(0, 255, 194, 0.08), rgba(8, 16, 28, 0.7));
}

.speed-box-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.speed-box-num {
  font-size: 34px;
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 4px;
}

.speed-metric-box.highlight-down .speed-box-num {
  color: var(--cyan-bright);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.speed-metric-box.highlight-up .speed-box-num {
  color: var(--accent-mint);
  text-shadow: 0 0 20px rgba(0, 255, 194, 0.5);
}

.speed-box-unit {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--cyan-soft);
  font-weight: 600;
}

.speed-box-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 4px;
}

/* 2. Full Completed Throughput Curve Wave in Report */
.report-wave-wrapper {
  margin-bottom: 22px;
}

/* ========================================================
   3. 3D GLOBAL REGIONAL LATENCY RADAR (全球区域 3D 地球雷达)
   ======================================================== */
.report-globe-section {
  background: rgba(4, 11, 20, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.globe-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.globe-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

.globe-header-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.globe-telemetry-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  align-items: center;
}

.globe-stage-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.globe-canvas-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, rgba(6, 20, 36, 0.4) 0%, rgba(2, 6, 12, 0) 70%);
}

#globeCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.globe-overlay-hud {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  pointer-events: none;
  contain: layout style;
}

.globe-tip {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

/* Regional Nodes Dashboard */
.globe-nodes-dashboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nodes-dash-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.15);
}

.probing-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.probing-tag.probing {
  color: var(--accent-amber);
}

.probing-tag.ready {
  color: var(--accent-mint);
}

.probing-tag.live {
  background: rgba(0, 255, 194, 0.08);
  border: 1px solid rgba(0, 255, 194, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  text-shadow: 0 0 8px rgba(0, 255, 194, 0.4);
}

.radar-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffc2;
  box-shadow: 0 0 8px #00ffc2;
  margin-right: 6px;
  animation: radarDotBlink 1.2s infinite ease-in-out;
}

.radar-done-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  margin-right: 6px;
}

.probing-tag.complete {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

@keyframes radarDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.regional-nodes-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.regional-nodes-grid::-webkit-scrollbar {
  width: 4px;
}
.regional-nodes-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.2);
  border-radius: 2px;
}

.continent-divider-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cyan-soft);
  opacity: 0.85;
  padding: 8px 4px 2px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.continent-divider-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.35), transparent);
}

.regional-node-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(6, 17, 30, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.regional-node-card:hover,
.regional-node-card.active-focus {
  border-color: var(--cyan-bright);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
  transform: translateX(2px);
}

.node-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-flag {
  font-size: 16px;
}

.node-names {
  display: flex;
  flex-direction: column;
}

.node-main-name {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}

.node-sub-code {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.node-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-ms-val {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--accent-mint);
  display: inline-block;
  transition: color 0.25s ease;
}

.node-ms-val.ping-updated {
  animation: msPingFlash 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes msPingFlash {
  0% {
    text-shadow: 0 0 10px #00f0ff, 0 0 18px #00ffc2;
    color: #fff;
    transform: scale(1.08);
  }
  100% {
    text-shadow: none;
    transform: scale(1);
  }
}

.node-ms-val.final-lock {
  animation: msFinalLock 0.75s ease-out;
}

@keyframes msFinalLock {
  0% {
    transform: scale(1.15);
    text-shadow: 0 0 16px #00f0ff, 0 0 24px #00ffc2;
    color: #fff;
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

.node-status-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.node-status-pill.grade-super {
  background: rgba(0, 255, 194, 0.15);
  color: #00ffc2;
  border: 1px solid rgba(0, 255, 194, 0.35);
}

.node-status-pill.grade-good {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.node-status-pill.grade-normal {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.node-status-pill.grade-slow {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

/* ========================================================
   VERTICAL MINIMALIST TELEMETRY DECK (竖向长方形极简卡组)
   ======================================================== */
.vert-deck-dock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 880px;
  margin: 22px auto 0 auto;
}

.vert-deck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(8, 16, 28, 0.72);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.deck-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deck-icon {
  font-size: 17px;
  color: #00f0ff;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.deck-title-texts {
  display: flex;
  flex-direction: column;
}

.deck-title-main {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.deck-title-sub {
  font-size: 10px;
  font-family: var(--font-mono);
  color: #64748b;
  letter-spacing: 0.8px;
}

.deck-actions-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-vert-action {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--cyan-bright);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-vert-action:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.btn-vert-action.primary {
  background: rgba(0, 255, 194, 0.12);
  border-color: rgba(0, 255, 194, 0.35);
  color: #00ffc2;
}

.btn-vert-action.primary:hover {
  background: rgba(0, 255, 194, 0.25);
  border-color: #00ffc2;
  box-shadow: 0 0 12px rgba(0, 255, 194, 0.4);
}

/* 6 Vertical Cards Grid (1 行 6 列 竖向长方形) */
.vert-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.vert-card {
  min-width: 0;
  overflow: hidden;
}

.vert-card {
  background: rgba(6, 13, 24, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  min-height: 275px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
}

.vert-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 240, 255, 0.08);
}

.vert-card-head {
  width: 100%;
  margin-bottom: 8px;
}

.vert-card-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.4px;
  display: block;
  text-align: center;
}

.vert-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 8px 0;
}

.vert-card-val {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.35;
  text-align: center;
}

/* Card 1 IP */
.vert-card-val.ip-val {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  margin-bottom: 8px;
}

.vert-card-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan-soft);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

/* Card Type Badge - Exact GRADE-PILL UI Styling, Retaining Category Color */
.vert-type-badge {
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  display: inline-block;
  line-height: 1.35;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.vert-type-badge.green,
.vert-type-badge.emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1.5px solid #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.vert-type-badge.yellow,
.vert-type-badge.amber {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1.5px solid #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.vert-type-badge.purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1.5px solid #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.vert-type-badge.cyan {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1.5px solid #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.vert-type-badge.blue {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* Card 3 Carrier */
.vert-card-val.carrier-val {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Card 2 ISP / IDC Dynamic Brand Logo Ambient Backdrop & Watermark */
.vert-card.card-carrier {
  position: relative;
  overflow: hidden;
}

/* Layer 1: Ambient Blurred Brand Radiant Glow */
.vert-card.card-carrier::before {
  content: '';
  position: absolute;
  inset: -10px;
  background-image: var(--isp-bg-url, none);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center 40%;
  filter: blur(24px) saturate(2) brightness(0.65);
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.12);
}

.vert-card.card-carrier.has-isp-bg::before {
  opacity: 0.25;
}

.vert-card.card-carrier.has-isp-bg:hover::before {
  opacity: 0.42;
  transform: scale(1.2);
}

/* Layer 2: Subtle Semi-Transparent Brand Logo / Watermark Centered Behind Text */
.vert-card.card-carrier::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 95px;
  background-image: var(--isp-bg-url, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  filter: contrast(1.15) brightness(0.95);
  mask-image: radial-gradient(ellipse 110% 85% at 50% 50%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.2) 65%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 110% 85% at 50% 50%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.2) 65%, transparent 95%);
  transition: opacity 0.55s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.vert-card.card-carrier.has-isp-bg::after {
  opacity: 0.35;
}

.vert-card.card-carrier.has-isp-bg:hover::after {
  opacity: 0.58;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Dynamic Border & Ambient Glow based on Brand Theme */
.vert-card.card-carrier.has-isp-bg {
  border-color: var(--isp-theme-border, rgba(0, 240, 255, 0.28));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px var(--isp-theme-glow, rgba(0, 240, 255, 0.12));
}

.vert-card.card-carrier.has-isp-bg:hover {
  border-color: var(--isp-theme-accent, #00f0ff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px var(--isp-theme-glow, rgba(0, 240, 255, 0.28));
}

/* Ensure text & elements stay crisbly on top */
.vert-card.card-carrier .vert-card-head,
.vert-card.card-carrier .vert-card-body,
.vert-card.card-carrier .vert-card-foot {
  position: relative;
  z-index: 2;
}

.vert-card.card-carrier .carrier-val {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.8);
}

.vert-card.card-carrier .vert-card-title,
.vert-card.card-carrier .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Direct Brand Logo Foreground Display (When brand has specific logo backdrop) */
.vert-card.card-carrier .carrier-brand-logo-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 82px;
}

.vert-card.card-carrier.has-isp-logo .carrier-brand-logo-wrap {
  display: flex;
}

.vert-card.card-carrier.has-isp-logo .carrier-val {
  display: none;
}

/* Pure brand-glow backdrop on has-isp-logo cards avoids SVG text ghosting in WebP export */
.vert-card.card-carrier.has-isp-logo::before {
  inset: 0;
  background-image:
    radial-gradient(ellipse 92% 70% at 50% 38%, var(--isp-theme-glow, rgba(0, 240, 255, 0.25)) 0%, transparent 74%),
    radial-gradient(circle at 50% 42%, var(--isp-theme-glow, rgba(0, 240, 255, 0.25)) 0%, transparent 58%);
  background-size: 100% 100%;
  background-position: center;
  filter: none;
  opacity: 0.9;
  transform: none;
}

.vert-card.card-carrier.has-isp-logo:hover::before {
  opacity: 1;
  transform: scale(1.06);
}

.vert-card.card-carrier.has-isp-logo::after {
  display: none !important;
  background-image: none !important;
}

.carrier-brand-logo {
  max-width: 130px;
  max-height: 80px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.vert-card.card-carrier:hover .carrier-brand-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px var(--isp-theme-glow, rgba(0, 240, 255, 0.4)));
}

/* Card 4 Geo with Dynamic Scenic Landmark or Country Flag Ambient Backdrop */
.vert-card.card-geo {
  position: relative;
  overflow: hidden;
}

/* Layer 1: Ambient Blurred Radiant Glow */
.vert-card.card-geo::before {
  content: '';
  position: absolute;
  inset: -10px;
  background-image: var(--geo-bg-url, var(--geo-flag-url, none));
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(2) brightness(0.65);
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.12);
}

.vert-card.card-geo.has-flag-bg::before {
  opacity: 0.22;
}

.vert-card.card-geo.has-flag-bg:hover::before {
  opacity: 0.36;
  transform: scale(1.22);
}

.vert-card.card-geo.has-landmark-bg::before {
  opacity: 0.28;
  filter: blur(20px) saturate(1.8) brightness(0.7);
}

.vert-card.card-geo.has-landmark-bg:hover::before {
  opacity: 0.44;
  transform: scale(1.18);
}

/* Layer 2 (Scenic Landmark): High-Aesthetic Local Scenic Landmark for Common Countries */
.vert-card.card-geo.has-landmark-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background-image: var(--geo-bg-url, none);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  filter: contrast(1.15) brightness(0.85);
  border-radius: inherit;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.35) 75%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.35) 75%, transparent 100%);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.vert-card.card-geo.has-landmark-bg:hover::after {
  opacity: 0.55;
  transform: scale(1.05);
}

/* Layer 2 (Fallback Flag Watermark): Subtle Semi-Transparent Flag Centered Behind Text for Uncommon Countries */
.vert-card.card-geo.has-flag-bg:not(.has-landmark-bg)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 95px;
  background-image: var(--geo-flag-url, none);
  background-size: cover;
  background-position: center;
  opacity: 0.48;
  filter: contrast(1.1) brightness(0.95);
  border-radius: 8px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.42) 20%, rgba(0, 0, 0, 0.12) 65%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.42) 20%, rgba(0, 0, 0, 0.12) 65%, transparent 92%);
  transition: opacity 0.55s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.vert-card.card-geo.has-flag-bg:not(.has-landmark-bg):hover::after {
  opacity: 0.70;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Dynamic Border & Ambient Glow based on Country Flag / Landmark */
.vert-card.card-geo.has-flag-bg {
  border-color: var(--geo-theme-border, rgba(0, 240, 255, 0.28));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px var(--geo-theme-glow, rgba(0, 240, 255, 0.12));
}

.vert-card.card-geo.has-flag-bg:hover {
  border-color: var(--geo-theme-accent, #00f0ff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px var(--geo-theme-glow, rgba(0, 240, 255, 0.28));
}

/* Ensure text & elements stay crisply on top */
.vert-card.card-geo .vert-card-head,
.vert-card.card-geo .vert-card-body,
.vert-card.card-geo .vert-card-foot {
  position: relative;
  z-index: 2;
}

.vert-card.card-geo .vert-card-title {
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.vert-card-val.geo-val {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
}

.vert-card-val.geo-val .country-flag-img {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.vert-card.card-geo .vert-card-foot {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vert-card.card-geo .vert-foot-sub {
  color: #94a3b8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   Combo B (深海极光流 - 无黑边纯色饱满版):
   - Q-2 皇家科技蓝 (纯蓝满幅无黑边)
   - B-2 极客深空青 (纯青满幅无黑边)
   - CF 官方橙 (纯橙满幅无黑边，1.5px 金橙清晰发光外框)
   - 顶部标题与底部文案全系统一采用 ISP 卡片同款 UI (#94a3b8)
   ========================================================================== */

/* Card 3: IP 综合质量总分 (Q-2 皇家科技蓝 - 全幅纯蓝零黑边) */
.vert-card.card-quality {
  position: relative;
  overflow: hidden;
  background: #050d1e !important;
  border: 1px solid rgba(59, 130, 246, 0.40) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(37, 99, 235, 0.16) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.vert-card.card-quality:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.70) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.30) !important;
}

.vert-card.card-quality::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/card-quality-blue.jpg?v=9.0');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s ease;
}

.vert-card.card-quality:hover::after {
  transform: scale(1.03);
}

.vert-card.card-quality > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-quality .vert-card-main-zone {
  display: none !important;
}

.vert-card.card-quality .vert-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card 4: BOT 倾向度数 (B-2 极客深空青 - 全幅纯青零黑边) */
.vert-card.card-bot {
  position: relative;
  overflow: hidden;
  background: #0e5363 !important;
  border: 1px solid rgba(14, 116, 144, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(6, 182, 212, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.vert-card.card-bot:hover {
  transform: translateY(-4px);
  border-color: #06b6d4 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 25px rgba(6, 182, 212, 0.40) !important;
}

.vert-card.card-bot::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/card-bot-cyan.jpg?v=9.0');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s ease;
}

.vert-card.card-bot:hover::after {
  transform: scale(1.03);
}

.vert-card.card-bot > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-bot .vert-card-main-zone {
  display: none !important;
}

.vert-card.card-bot .vert-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card 5: Cloudflare 验证码指数 (CF 官方落日暖橙 - 高辨识度全幅纯橙，1.5px 金橙清晰轮廓) */
.vert-card.card-turnstile {
  position: relative;
  overflow: hidden;
  background: #180c05 !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(234, 88, 12, 0.18) !important;
  border-radius: 12px !important;
  padding: 16px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 275px;
  box-sizing: border-box !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.vert-card.card-turnstile:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(249, 115, 22, 0.32) !important;
}

.vert-card.card-turnstile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/card-turnstile-bg.jpg?v=12.0') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.vert-card.card-turnstile:hover::after {
  transform: scale(1.03);
}

.vert-card.card-turnstile > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-turnstile .vert-card-head {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

/* Titles: ISP 同款规范 (#94a3b8) across Cards 3, 4, 5 - 无阴影纯净风格 */
/* Titles: ISP 同款规范 (#94a3b8) across Cards 3, 4, 5 - 无阴影 */
.vert-card.card-quality .vert-card-title,
.vert-card.card-bot .vert-card-title,
.vert-card.card-turnstile .vert-card-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.4px !important;
  display: block !important;
  text-align: center !important;
  text-shadow: none !important;
}

.turnstile-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Unified Telemetry Evidence Tags across Cards 3, 4, 5 - 保持网页精致圆润胶囊风格 */
.vert-card.card-quality .grade-pill,
.vert-card.card-bot .vert-bot-status-tag,
.vert-card.card-turnstile .turnstile-evidence-tag {
  font-size: 10.5px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  display: inline-block !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.3s ease !important;
}

/* Green Tone: L0 / Grade A High */
.turnstile-evidence-tag.tag-green,
.turnstile-evidence-tag.tag-l0 {
  color: #34d399 !important;
  background: rgba(10, 32, 18, 0.88) !important;
  border: 1px solid rgba(48, 158, 81, 0.65) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-size: 10.5px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.vert-card.card-quality.tone-green .grade-pill,
.vert-card.card-quality .grade-pill.high,
.vert-card.card-bot.tone-green .vert-bot-status-tag {
  color: #34d399 !important;
  background: rgba(6, 24, 18, 0.88) !important;
  border: 1px solid rgba(16, 185, 129, 0.55) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Blue / Cyan Tone: Safe / Intermediate */
.vert-card.card-quality .grade-pill,
.vert-card.card-quality .grade-pill.mid,
.vert-card.card-bot .vert-bot-status-tag {
  color: #38bdf8 !important;
  background: rgba(3, 20, 36, 0.88) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Yellow Tone: L1 / Caution */
.turnstile-evidence-tag.tag-yellow,
.turnstile-evidence-tag.tag-l1,
.vert-card.card-quality.tone-yellow .grade-pill,
.vert-card.card-bot.tone-yellow .vert-bot-status-tag {
  color: #fbbf24 !important;
  background: rgba(30, 20, 5, 0.88) !important;
  border: 1px solid rgba(245, 158, 11, 0.55) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Red Tone: L2 / High Risk Block */
.turnstile-evidence-tag.tag-red,
.turnstile-evidence-tag.tag-l2 {
  color: #f87171 !important;
  background: rgba(40, 10, 15, 0.88) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Loading Tag */
.turnstile-evidence-tag.tag-loading {
  color: #38bdf8 !important;
  background: rgba(6, 18, 28, 0.88) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Neutral Info / Error Tag */
.turnstile-evidence-tag.tag-blue {
  color: #60a5fa !important;
  background: rgba(10, 20, 38, 0.88) !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Synchronized Footer Text: ISP 同款规范 (#94a3b8) across Cards 3, 4, 5 - 统一11px/500无阴影纯净风格 */
/* Synchronized Footer Text: ISP 同款规范 (#94a3b8) across Cards 3, 4, 5 - 统一11px/500无阴影 */
.vert-card.card-quality .vert-foot-sub,
.vert-card.card-bot .vert-foot-sub,
.vert-card.card-turnstile .vert-foot-sub {
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.2px !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

/* Embedded Turnstile hidden iframe slot */
.cf-turnstile-embed-slot {
  position: absolute;
  width: 130px;
  height: 65px;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Card 6: VPN / Proxy Detection Card (Full-Cover Background Artwork similar to ISP Card) */
.vert-card.card-vpn {
  position: relative;
  overflow: hidden;
  background: rgba(6, 13, 24, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  min-height: 275px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(239, 68, 68, 0.25);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-vpn:hover {
  transform: translateY(-4px);
  border-color: #ef4444;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(239, 68, 68, 0.35);
}

@keyframes vpnCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Original artwork with simple -5% brightness dimming */
.vert-card.card-vpn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 70%,
      rgba(6, 13, 24, 0.45) 100%
    ),
    url('../images/vpn-caught.jpg');
  background-size: cover;
  background-position: center 25%;
  opacity: 1;
  filter: brightness(0.95);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vert-card.card-vpn:hover::after {
  transform: scale(1.03);
}

/* Ensure all text & controls inside card-vpn sit on top of the background */
.vert-card.card-vpn > * {
  position: relative;
  z-index: 2;
}

/* Hide top title on VPN card to showcase illustration artwork freely */
.vert-card.card-vpn .vert-card-head,
.vert-card.card-trapped .vert-card-head {
  display: none !important;
}

/* Foot text styling matches the rest of the cards (standard var(--text-muted)) */
.vert-card.card-vpn .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.vpn-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Harmonious Crimson / Ruby Badge */
.vpn-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fecdd3;
  background: rgba(46, 12, 22, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 63, 94, 0.55);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Card: Low Latency Pepe Card (UI modeled after VPN Card, with Refined Cyan Border) */

/* ==========================================================================
   Card: Trapped Mummy Card (寸步难行 - UI modeled after VPN Card, with Crimson Alert Border)
   ========================================================================== */
.vert-card.card-trapped {
  position: relative;
  overflow: hidden;
  background: #14080a;
  border: 1px solid rgba(225, 29, 72, 0.45);
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(225, 29, 72, 0.18);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-trapped:hover {
  transform: translateY(-4px);
  border-color: #f43f5e;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(244, 63, 94, 0.30);
}

.vert-card.card-trapped::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/card-trapped-mummy.jpg?v=4.0');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vert-card.card-trapped:hover::after {
  transform: scale(1.03);
}

.vert-card.card-trapped > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-trapped .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
  color: #fda4af !important;
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

.trapped-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

.trapped-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #ffe4e6;
  background: rgba(76, 15, 28, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 63, 94, 0.55);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   Card: Master of Secrets / Lord of Mysteries (隐秘之主)
   ========================================================================== */
.vert-card.card-mysteries {
  position: relative;
  overflow: hidden;
  background: #0d0a17;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(168, 85, 247, 0.22);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-mysteries:hover {
  transform: translateY(-4px);
  border-color: #c084fc;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 24px rgba(192, 132, 252, 0.35);
}

.vert-card.card-mysteries::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/card-mysteries.jpg?v=1.0');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vert-card.card-mysteries:hover::after {
  transform: scale(1.03);
}

.vert-card.card-mysteries > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-mysteries .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
  color: #e9d5ff !important;
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

.mysteries-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

.mysteries-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #f3e8ff;
  background: rgba(45, 20, 68, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(192, 132, 252, 0.6);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   Card: Upload Club (上传俱乐部 - 超级马里奥跃向绿色水管)
   ========================================================================== */
.vert-card.card-upload {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(0, 240, 255, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 240, 255, 0.22);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-upload:hover {
  transform: translateY(-4px);
  border-color: #00f0ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 240, 255, 0.38);
}

.vert-card.card-upload::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 65%,
      rgba(6, 13, 24, 0.65) 88%,
      rgba(6, 13, 24, 0.88) 100%
    ),
    url('../images/card-upload-pepe-v3.jpg?v=3.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vert-card.card-upload:hover::after {
  transform: scale(1.03);
}

.vert-card.card-upload > * {
  position: relative;
  z-index: 2;
}

/* Foot text styling identical to lowlatency/nativeip card (standard var(--text-muted) with text-shadow) */
.vert-card.card-upload .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.upload-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

.upload-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #38bdf8;
  background: rgba(4, 20, 36, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.3px;
}

.vert-card.card-lowlatency {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(0, 240, 255, 0.48); /* Refined 1px crisp blue border matching VPN card */
  border-radius: 12px;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  min-height: 275px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 240, 255, 0.16);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-lowlatency:hover {
  transform: translateY(-4px);
  border-color: #00f0ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 240, 255, 0.38);
}

.vert-card.card-lowlatency::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 65%,
      rgba(6, 13, 24, 0.65) 88%,
      rgba(6, 13, 24, 0.88) 100%
    ),
    url('../images/lowlatency-pepe-v12.jpg?v=12.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-lowlatency:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.vert-card.card-lowlatency > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-lowlatency .vert-card-head {
  display: none !important;
}

/* Foot text styling identical to VPN card (standard var(--text-muted) with text-shadow) */
.vert-card.card-lowlatency .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.lowlatency-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Optimal Low Latency Emerald Green Badge */
.lowlatency-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #34d399;
  background: rgba(6, 24, 18, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Card 8: Native IP Popeye Card (UI & tone styled after Low Latency Card) */
.vert-card.card-nativeip {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(0, 240, 255, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  min-height: 180px;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-nativeip:hover {
  transform: translateY(-4px);
  border-color: #00ffc2;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 255, 194, 0.38);
}

.vert-card.card-nativeip::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 60%,
      rgba(6, 13, 24, 0.65) 85%,
      rgba(6, 13, 24, 0.90) 100%
    ),
    url('../images/native-ip-popeye.jpg?v=1.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-nativeip:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.vert-card.card-nativeip > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-nativeip .vert-card-head {
  display: none !important;
}

.vert-card.card-nativeip .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.nativeip-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Green Native IP Badge (与低延迟标签对齐无发光) */
.nativeip-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #34d399;
  background: rgba(6, 24, 18, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}


/* Card 9: Gigabit Club Card (千兆俱乐部 - 超级赛亚人爆气) */
.vert-card.card-gigabit {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(245, 158, 11, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  min-height: 180px;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-gigabit:hover {
  transform: translateY(-4px);
  border-color: #f59e0b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(245, 158, 11, 0.38);
}

.vert-card.card-gigabit::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 60%,
      rgba(6, 13, 24, 0.65) 85%,
      rgba(6, 13, 24, 0.90) 100%
    ),
    url('../images/gigabit-saiyan.jpg?v=1.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-gigabit:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.vert-card.card-gigabit > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-gigabit .vert-card-head {
  display: none !important;
}

.vert-card.card-gigabit .vert-foot-sub {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.gigabit-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Gold / Amber Gigabit Badge */
.gigabit-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fbbf24;
  background: rgba(30, 20, 5, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Card 10: Zero Jitter Card (零抖动 - 电竞狙击特工) */
.vert-card.card-zerojitter {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(168, 85, 247, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  min-height: 180px;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-zerojitter:hover {
  transform: translateY(-4px);
  border-color: #a855f7;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(168, 85, 247, 0.38);
}

.vert-card.card-zerojitter::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 60%,
      rgba(6, 13, 24, 0.65) 85%,
      rgba(6, 13, 24, 0.90) 100%
    ),
    url('../images/zerojitter-sniper.jpg?v=1.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-zerojitter:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.vert-card.card-zerojitter > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-zerojitter .vert-card-head {
  display: none !important;
}

.vert-card.card-zerojitter .vert-foot-sub {
  font-size: 10px;
  letter-spacing: 0px;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.zerojitter-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Electric Violet / Purple Esports Badge */
.zerojitter-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #c084fc;
  background: rgba(25, 12, 35, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Card: 靓号 IP (Lucky / Vanity IP) - Cyber Amber Gold Theme */
.card-luckyip {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(245, 158, 11, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  min-height: 180px;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card-luckyip:hover {
  transform: translateY(-4px);
  border-color: #f59e0b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(245, 158, 11, 0.45);
}

.card-luckyip::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 55%,
      rgba(6, 13, 24, 0.68) 85%,
      rgba(6, 13, 24, 0.92) 100%
    ),
    url('../images/luckyip-pepe.jpg?v=1.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.card-luckyip:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.card-luckyip > * {
  position: relative;
  z-index: 2;
}

.card-luckyip .vert-card-head {
  display: none !important;
}

.card-luckyip .vert-foot-sub {
  color: #fbbf24;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0px;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.luckyip-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

.luckyip-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #fef08a;
  background: rgba(32, 22, 6, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.65);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.25);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}



/* Card 12: Single Thread Club Card (单线程俱乐部 - 闪电极速独行侠) */
.vert-card.card-singlethread {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(0, 240, 255, 0.48);
  border-radius: 12px;
  padding: 16px 12px 10px;
  min-height: 180px;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-singlethread:hover {
  transform: translateY(-4px);
  border-color: #00f0ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 240, 255, 0.38);
}

.vert-card.card-singlethread::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 58%,
      rgba(6, 13, 24, 0.65) 82%,
      rgba(6, 13, 24, 0.92) 100%
    ),
    url('../images/singlethread-speedster.jpg?v=8.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.91) saturate(0.95);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-singlethread:hover::after {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.vert-card.card-singlethread > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-singlethread .vert-card-head {
  display: none !important;
}

.vert-card.card-singlethread .vert-foot-sub {
  color: var(--text-muted);
  font-size: 10.5px;
  letter-spacing: 0px;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.singlethread-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Electric Cyan / Violet Single Thread Badge */
.singlethread-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #00f0ff;
  background: rgba(4, 20, 36, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Card 13: Hexagon Warrior Card (六边形战士 - 六维全能) */
.vert-card.card-hexagon,
.vert-card.card-pentagon {
  position: relative;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  animation: vpnCardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vert-card.card-hexagon:hover,
.vert-card.card-pentagon:hover {
  transform: translateY(-4px);
  border-color: #00f0ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 240, 255, 0.35);
}

.vert-card.card-hexagon::after,
.vert-card.card-pentagon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 58%,
      rgba(6, 13, 24, 0.65) 82%,
      rgba(6, 13, 24, 0.92) 100%
    ),
    url('../images/hexagon-warrior.jpg?v=1.0');
  background-size: cover;
  background-position: center top;
  opacity: 1;
  filter: brightness(0.92) saturate(0.96);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.vert-card.card-hexagon:hover::after,
.vert-card.card-pentagon:hover::after {
  transform: scale(1.03);
  filter: brightness(0.98) saturate(0.98);
}

.vert-card.card-hexagon > *,
.vert-card.card-pentagon > * {
  position: relative;
  z-index: 2;
}

.vert-card.card-hexagon .vert-card-head,
.vert-card.card-pentagon .vert-card-head {
  display: none !important;
}

.vert-card.card-hexagon .vert-foot-sub,
.vert-card.card-pentagon .vert-foot-sub {
  color: var(--text-muted);
  font-size: 10.5px;
  letter-spacing: 0px;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9);
}

.hexagon-card-body,
.pentagon-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px 0;
}

/* Hexagon Warrior Badge (Flat, No Glow) */
.hexagon-evidence-tag,
.pentagon-evidence-tag {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #00f0ff;
  background: rgba(4, 20, 36, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 6px;
  padding: 3px 9px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



@media (max-width: 1020px) {
  .vert-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 620px) {
  .vert-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ========================================================
   4. VISITOR EXCLUSIVE ROUTE AUDIT & CHINA MAINLAND BENCHMARK
   ======================================================== */
.report-route-section {
  background: rgba(4, 11, 20, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 22px;
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.route-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

.route-bgp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Visitor Dedicated Route Card */
.visitor-route-exclusive-card {
  background: linear-gradient(135deg, rgba(6, 17, 30, 0.95) 0%, rgba(10, 26, 48, 0.88) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 0 16px rgba(0, 240, 255, 0.05);
}

.vroute-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vroute-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 5px 16px;
  border-radius: 999px;
  border: 1.5px solid #00ffc2;
  background: rgba(0, 255, 194, 0.12);
  color: #00ffc2;
  box-shadow: 0 0 12px rgba(0, 255, 194, 0.25);
  letter-spacing: 0.5px;
}

.vroute-badge-pill.gold {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.14);
  color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

.vroute-badge-pill.cyan {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.14);
  color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}

.vroute-meta-tags {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #94a3b8;
}

.vroute-tag strong {
  color: #ffffff;
}

.vroute-line-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.vroute-summary-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 16px;
}

.vroute-hops-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}

.hop-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #e2f4ff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hop-chip.vps-chip {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
}

.hop-chip.core-chip {
  border-color: rgba(0, 255, 194, 0.4);
  background: rgba(0, 255, 194, 0.12);
  color: #00ffc2;
  font-weight: 700;
}

.hop-chip.client-chip {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  font-weight: 700;
}

.hop-arrow {
  color: var(--cyan-soft);
  font-size: 11px;
}

.carrier-bench-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.route-carriers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.route-carrier-card {
  background: rgba(6, 17, 30, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.route-carrier-card:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
  transform: translateY(-2px);
}

.route-carrier-card.tier-premium {
  border-color: rgba(0, 255, 194, 0.45);
  background: linear-gradient(180deg, rgba(0, 255, 194, 0.08) 0%, rgba(6, 17, 30, 0.8) 100%);
  box-shadow: 0 0 14px rgba(0, 255, 194, 0.15);
}

.carrier-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrier-name-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carrier-flag {
  font-size: 14px;
}

.carrier-name {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}

.carrier-tier-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.carrier-tier-badge.tier-premium {
  background: rgba(0, 255, 194, 0.2);
  color: #00ffc2;
  border: 1px solid rgba(0, 255, 194, 0.45);
}

.carrier-tier-badge.tier-good {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.carrier-tier-badge.tier-standard {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.carrier-line-name {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.4;
  min-height: 34px;
  display: flex;
  align-items: center;
}

.carrier-telemetry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.carrier-ms-box {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.carrier-ms-num {
  font-size: 20px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--accent-mint);
}

.carrier-ms-unit {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.carrier-transit-tag {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.carrier-transit-tag strong {
  color: var(--cyan-soft);
}

.carrier-hops-trail {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 2px;
}

.route-loading-state, .route-err-state {
  grid-column: span 3;
  text-align: center;
  padding: 18px 0;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* 5. IP & Intelligence Audit Section inside Report */
.report-ip-audit-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.ip-audit-card {
  background: rgba(8, 16, 28, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 12px;
  padding: 18px 20px;
}

.audit-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.audit-fields-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.audit-field-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.audit-field-label {
  font-size: 11px;
  color: var(--text-muted);
}

.audit-field-val {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: #fff;
  word-break: break-all;
}

/* IP Type Badge */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.type-badge.cyan {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan-bright);
  border: 1px solid rgba(0, 240, 255, 0.3);
}
.type-badge.purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.type-badge.emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.type-badge.blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Quality & BOT Score Box inside Report */
.audit-scores-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.score-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: center;
}

.score-box-mini {
  background: rgba(10, 22, 38, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-mini-title {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.score-mini-num {
  font-size: 32px;
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.score-mini-num.high-grade {
  color: var(--accent-mint);
  text-shadow: 0 0 16px rgba(0, 255, 194, 0.5);
}
.score-mini-num.mid-grade {
  color: var(--accent-amber);
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}
.score-mini-num.low-grade {
  color: var(--accent-rose);
  text-shadow: 0 0 16px rgba(244, 63, 94, 0.5);
}

.score-mini-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
}

.bot-bar-mini-wrapper {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 6px 0 4px 0;
  overflow: hidden;
}

.bot-bar-mini {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.audit-footer-tag {
  background: rgba(0, 240, 255, 0.05);
  border-left: 3px solid var(--cyan-bright);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Report Action Toolbar */
.report-actions-toolbar {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.btn-report-action {
  height: 44px;
  padding: 0 32px;
  border-radius: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-smooth);
  box-sizing: border-box;
}

.btn-report-action.primary {
  background: linear-gradient(135deg, #00e2f8, #00dab8);
  color: #030810;
  border: none;
  box-shadow: 0 0 20px rgba(0, 226, 248, 0.35);
}

.btn-report-action.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 226, 248, 0.55);
}

.btn-report-action.secondary {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan-bright);
}

.btn-report-action.secondary:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 7, 14, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: none;
  transition: var(--transition-smooth);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glow);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(0, 240, 255, 0.2);
  border-radius: 16px;
  width: 90%;
  max-width: 620px;
  padding: 28px;
  transform: translateY(20px);
  transition: var(--transition-smooth);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.modal-close:hover {
  color: #fff;
}

.nodes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.node-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(15, 30, 50, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 10px;
  transition: var(--transition-smooth);
}

.node-item:hover {
  border-color: var(--cyan-bright);
}

.node-item.selected {
  border-color: var(--cyan-bright);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
}

.node-info-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.node-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
}

.node-name-row .brand-badge {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
  align-self: flex-start !important;
  line-height: 1.1 !important;
}

.node-addr-row {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.node-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-ping-val {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--accent-mint);
  font-weight: 600;
}

.btn-select-node {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid var(--cyan-bright);
  color: var(--cyan-bright);
  font-size: 12px;
  cursor: pointer;
}

.btn-select-node:hover {
  background: var(--cyan-bright);
  color: #050d18;
}

.form-group-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.form-label {
  font-size: 11px;
  color: var(--text-muted);
}

.form-input {
  background: rgba(10, 20, 36, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-input:focus {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.btn-primary {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan-soft));
  border: none;
  border-radius: 8px;
  color: #050d18;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.5);
}

/* Toast */
.cyber-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: rgba(10, 25, 45, 0.95);
  border: 1px solid var(--cyan-bright);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.4);
  color: #fff;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 13px;
  font-family: var(--font-mono);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cyber-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Footer */
.app-footer {
  margin-top: 80px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #475569;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px 18px;
  letter-spacing: 0.5px;
}

.footer-sources,
.footer-copy {
  color: #475569;
  font-size: 11px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.5px;
  max-width: 900px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* Responsive */
/* Responsive: Tablet & Mid-Size Screens (<= 900px) */
@media (max-width: 900px) {
  .report-speed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .report-ip-audit-grid {
    grid-template-columns: 1fr;
  }
  .live-audit-dock {
    grid-template-columns: 1fr;
  }
  .route-carriers-grid {
    grid-template-columns: 1fr;
  }
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .globe-telemetry-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .globe-stage-wrapper {
    width: 100%;
  }
  .globe-canvas-box {
    max-width: 100%;
    height: 280px;
  }
  #globeCanvas {
    max-width: 100%;
    height: 280px;
  }
  .globe-nodes-dashboard {
    width: 100%;
  }
  .regional-nodes-grid {
    max-height: 280px;
  }
}

/* Responsive: Mobile Screens (<= 620px) */

/* ========================================================
   ROAD RASH DUAL COCKPIT INSTRUMENT CLUSTER (双机车联排仪表台)
   ======================================================== */
.dual-cockpit-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 840px;
  margin: 0 auto 22px auto;
  position: relative;
  transform: scale(1.075);
  transform-origin: center top;
}

.gauge-pod {
  position: relative;
  width: 340px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gauge-pod canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

.pod-center-hud {
  position: absolute;
  top: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.pod-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.pod-pill.down {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

.pod-pill.up {
  background: rgba(217, 70, 239, 0.1);
  border: 1px solid rgba(217, 70, 239, 0.4);
  color: #d946ef;
}

.pulse-down {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  animation: pulseDot 1.5s infinite ease-in-out;
}

.pulse-up {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d946ef;
  box-shadow: 0 0 8px #d946ef;
  animation: pulseDot 1.5s infinite ease-in-out;
}

.pod-digital-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 1px;
}

.pod-value {
  font-size: 46px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-style: italic;
  transform: skewX(-4deg);
  line-height: 1;
  letter-spacing: -2px;
}

.pod-value.down {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.65), 0 0 40px rgba(0, 240, 255, 0.3);
}

.pod-value.up {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(217, 70, 239, 0.65), 0 0 40px rgba(217, 70, 239, 0.3);
}

.pod-unit {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan-soft);
}

.pod-peak {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Road Rash Center Console Bridge */
.cockpit-center-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(10, 20, 36, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
  min-width: 84px;
  z-index: 5;
}

.bridge-nitro-bar {
  display: flex;
  gap: 2px;
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.bridge-nitro-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f0ff, #00ffc2, #ff9100, #ff1744);
  width: 0%;
  box-shadow: 0 0 8px #00ffc2;
  transition: width 0.2s ease-out;
}

.bridge-gear-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 6px;
  width: 52px;
  padding: 4px 0;
}

.bridge-gear-title {
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.5px;
}

.bridge-gear-num {
  font-size: 20px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-style: italic;
  color: #00f0ff;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
}

.bridge-status-tag {
  font-size: 7.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #00ffc2;
  letter-spacing: 0.5px;
  text-align: center;
}

.bridge-ping-tag {
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}


/* ========================================================
   TELEMETRY SECTION DIVIDER (REAL-TIME TELEMETRY + 分割线)
   ======================================================== */
.telemetry-divider-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 6px auto 10px auto !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

.telemetry-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: color 0.25s ease !important;
}

.telemetry-tag:hover {
  color: #00f0ff !important;
}

.telemetry-line {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.05) 35%, rgba(0, 240, 255, 0.22) 95%, transparent 100%) !important;
  box-shadow: none !important;
}

.report-wave-wrapper {
  margin-bottom: 8px !important;
}

.report-vert-deck {
  margin-top: 4px !important;
  gap: 12px !important;
}

/* ========================================================
   OPTIMAL MID-CENTERED TELEMETRY CARD HARMONY (DESKTOP)
   ======================================================== */
.vert-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
}

.vert-card {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  padding: 16px 12px 10px !important;
  display: flex;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure hidden cards stay completely hidden regardless of state */
.vert-card[style*="display: none"],
.vert-card[style*="display:none"],
.vert-card.hidden,
.vert-card.is-hidden {
  display: none !important;
}

.vert-card-head {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 2px !important;
  width: 100% !important;
}

.vert-card-title {
  font-size: 11.5px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.4px !important;
  display: block !important;
  text-align: center !important;
}

.vert-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Upper Zone: Main readout / logo / illustration centered vertically */
.vert-card-main-zone {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 125px !important;
}

/* Card 3 Geo: Two-line Formatting */
.geo-name-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  text-align: center !important;
}

.geo-city {
  display: block !important;
  font-size: 15.5px !important;
  font-family: 'Inter', var(--font-sans) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

.geo-country {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-family: 'Inter', var(--font-sans) !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  letter-spacing: -0.1px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  gap: 6px !important;
}

/* Lower Zone: Synchronized pill baseline across all cards */
.vert-pill-zone {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Pill / Badge styling */
.vert-card-pill {
  font-size: 10px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 700 !important;
  color: var(--cyan-soft) !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
  letter-spacing: 0.3px !important;
}

.vert-card .grade-pill {
  font-size: 11px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 800 !important;
  padding: 3px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.vert-card .grade-pill.mid {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1.5px solid #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}

/* 归属地卡片（.card-geo）里的网段类型标签：.mid（机房）一直有样式，
   .high（住宅 / 蜂窝）却漏了配色，只剩字。补一条与站点绿色调一致的兜底。 */
.vert-card .grade-pill.high {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.22) !important;
}

.vert-card .sub-box-main-num {
  font-size: 50px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 4px 0 10px 0 !important;
}

/* Footer: Synchronized 38px height with clean top border */
.vert-card-foot {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

.vert-foot-sub {
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.2px !important;
  white-space: normal !important;
  display: block !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Illustrated Meme Cards (Row 2 & Row 3) */
.vert-card.card-vpn,
.vert-card.card-trapped,
.vert-card.card-mysteries,
.vert-card.card-upload,
.vert-card.card-lowlatency,
.vert-card.card-nativeip,
.vert-card.card-gigabit,
.vert-card.card-zerojitter,
.vert-card.card-luckyip,
.vert-card.card-singlethread,
.vert-card.card-hexagon,
.vert-card.card-pentagon {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  position: relative !important;
  overflow: hidden !important;
}

.vert-card.card-vpn .vert-card-body,
.vert-card.card-trapped .vert-card-body,
.vert-card.card-mysteries .vert-card-body,
.vert-card.card-upload .vert-card-body,
.vert-card.card-lowlatency .vert-card-body,
.vert-card.card-nativeip .vert-card-body,
.vert-card.card-gigabit .vert-card-body,
.vert-card.card-zerojitter .vert-card-body,
.vert-card.card-luckyip .vert-card-body,
.vert-card.card-singlethread .vert-card-body,
.vert-card.card-hexagon .vert-card-body,
.vert-card.card-pentagon .vert-card-body {
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vert-card.card-vpn .vert-pill-zone,
.vert-card.card-trapped .vert-pill-zone,
.vert-card.card-mysteries .vert-pill-zone,
.vert-card.card-upload .vert-pill-zone,
.vert-card.card-lowlatency .vert-pill-zone,
.vert-card.card-nativeip .vert-pill-zone,
.vert-card.card-gigabit .vert-pill-zone,
.vert-card.card-zerojitter .vert-pill-zone,
.vert-card.card-luckyip .vert-pill-zone,
.vert-card.card-singlethread .vert-pill-zone,
.vert-card.card-hexagon .vert-pill-zone,
.vert-card.card-pentagon .vert-pill-zone {
  margin-top: auto !important;
  margin-bottom: 8px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}


@media (max-width: 620px) {
  /* Smooth Touch Scrolling & Hardware Acceleration */
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }
  .app-container,
  .report-card,
  .vert-cards-grid {
    transform: translateZ(0);
  }
  .vert-card {
    contain: content;
  }

  .app-container {
    padding: 12px 10px 20px 10px;
  }

  /* 1. Header: Hide Node Selector Pill on Mobile cleanly, reduce spacing */
  .app-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
  }
  .pretest-card {
    padding-top: 6px !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
  }
  .pretest-top-badge {
    font-size: 9px !important;
    letter-spacing: 1.2px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .pretest-top-badge.is-warning {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }
  .pretest-top-badge .dot {
    width: 4.5px !important;
    height: 4.5px !important;
  }
  .header-actions,
  .node-selector-pill {
    display: none !important;
  }

  /* Visitor Pill on Mobile */
  .go-visitor-pill {
    max-width: 96%;
    font-size: 11px;
    padding: 4px 10px;
    gap: 6px;
  }
  .vpill-ip {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* GO Button on Mobile */
  .cyber-thread-dock-center {
    width: 100%;
    max-width: 230px;
  }
  .go-flat-wrapper {
    width: 165px;
    height: 165px;
    border-radius: 50% !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none !important;
  }
  .btn-go-flat {
    width: 150px;
    height: 150px;
    border-radius: 50% !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none !important;
  }
  .btn-go-flat:focus,
  .btn-go-flat:focus-visible,
  .btn-go-flat:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  }
  .go-flat-text {
    font-size: 42px;
  }

  /* 2. Stage 2 Testing Card: Dedicated Single Cyber Gauge UI */
  .testing-card {
    padding: 12px 10px 14px 10px !important;
  }
  .stage-top-hud {
    font-size: 9px !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .stage-top-hud .hud-buffer-tag {
    display: none !important;
  }
  .stage-top-hud .hud-gear-tag {
    display: inline-flex !important;
    background: rgba(0, 240, 255, 0.12) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    color: #e2e8f0 !important;
  }

  .dual-cockpit-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 6px auto !important;
    padding: 0 !important;
  }
  /* Hide desktop center console bridge on mobile */
  .cockpit-center-bridge {
    display: none !important;
  }

  /* Gauge Pod: Mathematically & Visually Centered */
  .gauge-pod {
    position: relative !important;
    width: 310px !important;
    max-width: 100% !important;
    height: 255px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: none !important;
  }
  .gauge-pod canvas {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 310px !important;
    height: 255px !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Pod Center HUD: Pure Flex Centering, Zero Asymmetry */
  .pod-center-hud {
    position: absolute !important;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 3 !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .pod-pill {
    font-size: 10.5px !important;
    padding: 3px 12px !important;
    margin-bottom: 6px !important;
  }
  .pod-digital-row .pod-value {
    font-size: 38px !important;
    line-height: 1 !important;
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
  }
  .pod-digital-row .pod-unit {
    font-size: 13px !important;
    margin-left: 4px !important;
  }
  .pod-peak {
    font-size: 10px !important;
    margin-top: 4px !important;
    opacity: 0.8 !important;
  }

  /* Dynamic Single Pod Switching: Download active by default, Upload active in phase-up */
  .gauge-pod-down {
    display: flex !important;
  }
  .gauge-pod-up {
    display: none !important;
  }
  .dual-cockpit-container.phase-up .gauge-pod-down {
    display: none !important;
  }
  .dual-cockpit-container.phase-up .gauge-pod-up {
    display: flex !important;
  }

  /* Realtime Sparkline Bandwidth Wave on Mobile */
  .testing-wave-wrapper {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
  }
  .sparkline-header {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .sparkline-container {
    height: 60px !important;
  }
  #sparklineCanvas {
    height: 60px !important;
  }
  .btn-abort-test {
    font-size: 11px !important;
    padding: 6px 16px !important;
    margin-top: 8px !important;
  }

  /* Stage 2 Live Metrics: Compact 2x2 Grid (NOT 1 column) */
  .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric-card {
    padding: 10px 10px !important;
    min-height: 70px;
  }
  .metric-value-row .val-num,
  .metric-value-box .metric-number {
    font-size: 22px !important;
  }
  .metric-value-row .val-unit,
  .metric-header .metric-unit {
    font-size: 11px !important;
  }
  .metric-title {
    font-size: 10.5px !important;
  }
  .metric-sub {
    font-size: 9.5px !important;
  }

  /* Stage 3 Report Speed Metrics: Compact 2x2 Grid (NOT 1 column) */
  .report-speed-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* 这些选择器曾写成 .metric-value/.metric-unit（旧类名，早已不存在），
     导致手机上字号一直沿用桌面端 34px，"13.3 Mbps" 在窄屏被挤成两行。 */
  .speed-metric-box {
    padding: 11px 10px !important;
    min-width: 0 !important;
  }
  .speed-metric-box .speed-box-num {
    white-space: nowrap;
    font-size: clamp(22px, 7.4vw, 32px) !important;
  }
  .speed-metric-box .speed-box-unit {
    font-size: 11px !important;
  }
  .speed-metric-box .speed-box-sub {
    font-size: 9.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .speed-metric-box .speed-box-label {
    font-size: 10.5px !important;
  }

  /* Stage 3 Report Container & Header */
  .report-card {
    padding: 16px 12px !important;
    border-radius: 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .report-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "badge stamp"
      "verdict verdict" !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
  }
  .report-title-box {
    display: contents !important;
  }
  .report-badge {
    grid-area: badge !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    align-self: center !important;
  }
  .report-badge-prefix {
    display: none !important;
  }
  .report-stamp {
    grid-area: stamp !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    padding: 2.5px 7px !important;
    border-radius: 5px !important;
    line-height: 1.2 !important;
  }
  /* Report Verdict Title: 轻微调小更加精致优雅 */
  .report-verdict,
  #reportVerdictTitle {
    grid-area: verdict !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  /* 3. 3D Earth Globe on Mobile: Hide Regional Nodes List, Center Earth */
  .globe-section-header, .globe-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* 标题在 360~390px 会被挤成两行：整体收一档、禁止折行，英文副标再小一号。 */
  .globe-section-title {
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  .globe-section-title svg {
    width: 13px !important;
    height: 13px !important;
    flex: none !important;
  }
  .globe-title-en {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    opacity: 0.72;
  }
  .globe-header-tags {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .globe-telemetry-container {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .globe-stage-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
  }
  .globe-canvas-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 290px !important;
    margin: 0 auto !important;
  }
  #globeCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 290px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* 3D Earth Overlay HUD: 紧凑靠顶，不遮挡地球主球体 */
  .globe-overlay-hud {
    font-size: 9px !important;
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
    pointer-events: none !important;
  }
  /* 隐藏地区列表，仅显示3D地球 */
  .globe-nodes-dashboard {
    display: none !important;
  }
  .regional-nodes-grid {
    display: none !important;
  }
  .globe-tip {
    font-size: 10px !important;
    margin-top: 4px !important;
    text-align: center !important;
  }

  /* 4. Visitor Route Audit on Mobile */
  .report-route-section {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
  }
  .vroute-top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .vroute-line-name {
    font-size: 14px !important;
  }
  .vroute-summary-text {
    font-size: 11.5px !important;
    margin-bottom: 12px !important;
  }
  .vroute-hops-flow {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .hop-chip {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
  .route-carriers-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .route-carrier-card {
    padding: 10px !important;
  }

  /* Vertical Cards Grid (2 columns on Mobile, Slender & Elegant Aspect Ratio) */
  .vert-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Card Height increased from 255/260px to 290px -> 消除太胖，回归电脑端修长比例 (1.6 : 1) */
  /* Card Height strictly synchronized for ALL cards on Mobile (Regular & Meme/Achievement Cards) */
  .vert-card,
  .vert-card.card-ip,
  .vert-card.card-carrier,
  .vert-card.card-geo,
  .vert-card.card-quality,
  .vert-card.card-score,
  .vert-card.card-bot,
  .vert-card.card-vpn,
  .vert-card.card-trapped,
  .vert-card.card-mysteries,
  .vert-card.card-upload,
  .vert-card.card-lowlatency,
  .vert-card.card-nativeip,
  .vert-card.card-gigabit,
  .vert-card.card-zerojitter,
  .vert-card.card-luckyip,
  .vert-card.card-singlethread,
  .vert-card.card-hexagon,
  .vert-card.card-pentagon {
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;
    padding: 14px 10px 8px !important;
    box-sizing: border-box !important;
  }
  .vert-card .vert-card-title {
    font-size: 11px !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
  }
  .vert-card .vert-card-val {
    font-size: 13px !important;
  }
  .vert-card .sub-box-main-num {
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin: 8px 0 14px 0 !important;
  }
  .vert-card-foot {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .vert-card .vert-foot-sub {
    font-size: 10px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
    padding: 0 4px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .vert-pill-zone {
    margin-bottom: 14px !important;
  }
  .geo-name-wrap {
    gap: 4px !important;
  }
  .geo-city {
    font-size: 14.5px !important;
    font-family: 'Inter', var(--font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
  }
  .geo-country {
    font-size: 12.5px !important;
    font-family: 'Inter', var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
  }

  /* Illustrated Meme Cards on Mobile: Disable heavy backdrop-filters for 60fps scrolling */
  .vert-card.card-vpn .vert-foot-sub,
  .vert-card.card-trapped .vert-foot-sub,
  .vert-card.card-mysteries .vert-foot-sub,
  .vert-card.card-upload .vert-foot-sub,
  .vert-card.card-lowlatency .vert-foot-sub,
  .vert-card.card-nativeip .vert-foot-sub,
  .vert-card.card-gigabit .vert-foot-sub,
  .vert-card.card-zerojitter .vert-foot-sub,
  .vert-card.card-luckyip .vert-foot-sub,
  .vert-card.card-singlethread .vert-foot-sub,
  .vert-card.card-hexagon .vert-foot-sub,
  .vert-card.card-pentagon .vert-foot-sub {
    font-family: var(--font-sans) !important;
    letter-spacing: 0px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .vpn-evidence-tag, .trapped-evidence-tag, .lowlatency-evidence-tag, .nativeip-evidence-tag,
  .gigabit-evidence-tag, .zerojitter-evidence-tag, .luckyip-evidence-tag,
  .singlethread-evidence-tag, .hexagon-evidence-tag, .pentagon-evidence-tag {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Report Actions Toolbar */
  .report-actions-toolbar {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .report-actions-toolbar .btn-report-action {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    justify-content: center !important;
    font-size: 12px !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
}

.vert-card.card-geo .vert-card-foot {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding-top: 5px !important;
  box-sizing: border-box !important;
}

.vert-card.card-geo .vert-foot-sub {
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  color: #94a3b8 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.2px !important;
  white-space: normal !important;
  display: block !important;
  line-height: 1.3 !important;
  text-align: center !important;
  margin-top: 2px !important;
}



@media (max-width: 620px) {
  .vert-card.card-geo .vert-card-foot {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 2px !important;
  }
  .vert-card.card-geo .vert-foot-sub {
    font-size: 9.5px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
    padding: 0 4px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}


.vert-card.card-upload[style*="display: none"],
.vert-card.card-upload[style*="display:none"],
.vert-card.card-mysteries[style*="display: none"],
.vert-card.card-mysteries[style*="display:none"],
.vert-card.card-trapped[style*="display: none"],
.vert-card.card-trapped[style*="display:none"] {
  display: none !important;
  animation: none !important;
}


/* ========================================================
   UNIFIED DESKTOP REPORT EXPORT SNAPSHOT MODE
   Guarantees pixel-identical 5-col desktop output on both desktop & mobile,
   opaque inside card (#070e1b), subtle webpage hairline border + cyan outer glow,
   and pure alpha=0 transparent corners around the card.
   ======================================================== */
#stageReport.export-desktop-mode {
  display: block !important;
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 876px !important;
  min-width: 876px !important;
  max-width: 876px !important;
  padding: 12px 18px 26px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#stageReport.export-desktop-mode .report-wave-wrapper,
#stageReport.export-desktop-mode .report-globe-section,
#stageReport.export-desktop-mode .report-actions-toolbar {
  display: none !important;
}

#stageReport.export-desktop-mode .report-card {
  width: 840px !important;
  min-width: 840px !important;
  max-width: 840px !important;
  padding: 30px 28px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: #070e1b !important;
  background-color: #070e1b !important;
  border: 1px solid #2b4258 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(0, 240, 255, 0.10), 0 12px 24px -8px rgba(15, 23, 42, 0.28), 0 4px 10px -4px rgba(15, 23, 42, 0.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
  transform: none !important;
}

#stageReport.export-desktop-mode .report-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15) !important;
}

#stageReport.export-desktop-mode .report-title-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#stageReport.export-desktop-mode .report-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  /* 手机端给这颗徽章加了 align-self: center（在移动端 grid 里用于垂直居中）。
     导出模式把父级改回 flex column 后，这条会变成【水平居中】，标题整体右移。
     必须显式压回 flex-start。 */
  align-self: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
}

#stageReport.export-desktop-mode .report-badge-prefix {
  display: inline !important;
}

#stageReport.export-desktop-mode .report-verdict,
#stageReport.export-desktop-mode #reportVerdictTitle {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  width: auto !important;
  margin: 0 !important;
}

#stageReport.export-desktop-mode .report-stamp {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#stageReport.export-desktop-mode .report-speed-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 6px !important;
}

#stageReport.export-desktop-mode .speed-metric-box {
  padding: 16px 14px !important;
}

#stageReport.export-desktop-mode .report-vert-deck {
  margin-top: 0px !important;
  gap: 0px !important;
}

#stageReport.export-desktop-mode .telemetry-divider-bar {
  margin: 2px auto 8px auto !important;
}

#stageReport.export-desktop-mode .vert-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  transform: none !important;
}

#stageReport.export-desktop-mode .vert-card {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  padding: 16px 12px 10px !important;
  contain: none !important;
}

#stageReport.export-desktop-mode .vert-card[style*="display: none"],
#stageReport.export-desktop-mode .vert-card[style*="display:none"],
#stageReport.export-desktop-mode .vert-card.hidden,
#stageReport.export-desktop-mode .vert-card.is-hidden {
  display: none !important;
}

#stageReport.export-desktop-mode .vert-card .vert-card-title {
  font-size: 11.5px !important;
  letter-spacing: 0.4px !important;
}

#stageReport.export-desktop-mode .vert-card .sub-box-main-num {
  font-size: 50px !important;
  line-height: 1 !important;
  margin: 4px 0 10px 0 !important;
}

#stageReport.export-desktop-mode .vert-card .vert-pill-zone {
  margin-bottom: 8px !important;
}

#stageReport.export-desktop-mode .vert-card .vert-card-foot,
#stageReport.export-desktop-mode .vert-card.card-geo .vert-card-foot {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding-top: 5px !important;
}

#stageReport.export-desktop-mode .vert-card .vert-foot-sub,
#stageReport.export-desktop-mode .vert-card.card-geo .vert-foot-sub {
  font-size: 11px !important;
  letter-spacing: 0.2px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

#stageReport.export-desktop-mode .geo-name-wrap {
  gap: 3px !important;
}

#stageReport.export-desktop-mode .geo-city {
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

#stageReport.export-desktop-mode .geo-country {
  font-size: 13px !important;
  font-weight: 600 !important;
}

#stageReport.export-desktop-mode .vpn-evidence-tag,
#stageReport.export-desktop-mode .trapped-evidence-tag,
#stageReport.export-desktop-mode .lowlatency-evidence-tag,
#stageReport.export-desktop-mode .nativeip-evidence-tag,
#stageReport.export-desktop-mode .gigabit-evidence-tag,
#stageReport.export-desktop-mode .zerojitter-evidence-tag,
#stageReport.export-desktop-mode .luckyip-evidence-tag,
#stageReport.export-desktop-mode .singlethread-evidence-tag,
#stageReport.export-desktop-mode .hexagon-evidence-tag,
#stageReport.export-desktop-mode .pentagon-evidence-tag {
  font-size: 10px !important;
  padding: 3px 9px !important;
}