/* ============================================================

   环境风险 科技风 2D 可视化驾驶舱

   HUD 边框 · 霓虹面板 · 扫描线 · KPI 发光

   ============================================================ */



.viz-3d-page,

.viz-tech-page {

  overflow-x: hidden;

}



.viz-stage {

  position: relative;

  min-height: calc(100vh - var(--nav-h, 64px));

  padding-bottom: 12px;

}



.viz-stage-bg {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    radial-gradient(ellipse 70% 50% at 15% 8%, rgba(34, 211, 238, 0.16), transparent 55%),

    radial-gradient(ellipse 50% 40% at 88% 85%, rgba(99, 102, 241, 0.14), transparent 50%),

    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(52, 211, 153, 0.06), transparent 60%),

    linear-gradient(180deg, rgba(7, 11, 22, 0.2), rgba(7, 11, 22, 0.55));

  animation: vizBgPulse 12s ease-in-out infinite alternate;

}



.viz-stage-bg::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(34, 211, 238, 0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(34, 211, 238, 0.04) 1px, transparent 1px);

  background-size: 56px 56px;

  mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 15%, transparent 80%);

  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 15%, transparent 80%);

  opacity: 0.7;

}



.viz-stage-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(7, 11, 22, 0.55), transparent 12%, transparent 88%, rgba(7, 11, 22, 0.55)),

    linear-gradient(180deg, rgba(7, 11, 22, 0.35), transparent 18%, transparent 88%, rgba(7, 11, 22, 0.55));

  pointer-events: none;

}



@keyframes vizBgPulse {

  from { opacity: 0.75; filter: hue-rotate(0deg); }

  to { opacity: 1; filter: hue-rotate(10deg); }

}



.viz-scanline {

  position: fixed;

  left: 0;

  right: 0;

  height: 120px;

  top: -120px;

  z-index: 0;

  pointer-events: none;

  background: linear-gradient(

    180deg,

    transparent,

    rgba(34, 211, 238, 0.03) 40%,

    rgba(34, 211, 238, 0.08) 50%,

    rgba(34, 211, 238, 0.03) 60%,

    transparent

  );

  animation: vizScan 8s linear infinite;

  mix-blend-mode: screen;

}



@keyframes vizScan {

  0% { top: -120px; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { top: 110%; opacity: 0; }

}



.viz-hud-frame {

  position: fixed;

  inset: calc(var(--nav-h, 64px) + 8px) 10px 10px 10px;

  pointer-events: none;

  z-index: 0;

}



.viz-corner {

  position: absolute;

  width: 28px;

  height: 28px;

  border: 2px solid rgba(34, 211, 238, 0.55);

  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);

}



.viz-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }

.viz-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }

.viz-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }

.viz-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }



.viz-3d-container {

  position: relative;

  z-index: 1;

  padding-top: 8px;

}



.viz-hud-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 16px;

  flex-wrap: wrap;

  margin-bottom: 18px;

  padding: 16px 18px;

  border-radius: 16px;

  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(8, 14, 28, 0.55));

  border: 1px solid rgba(34, 211, 238, 0.22);

  box-shadow:

    0 8px 32px rgba(0, 0, 0, 0.35),

    inset 0 1px 0 rgba(255, 255, 255, 0.05),

    0 0 40px rgba(34, 211, 238, 0.06);

  position: relative;

  overflow: hidden;

}



.viz-hud-top::before {

  content: '';

  position: absolute;

  left: 0; right: 0; top: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #22d3ee, #34d399, #818cf8, transparent);

  opacity: 0.9;

}



.viz-hud-top::after {

  content: '';

  position: absolute;

  width: 180px;

  height: 180px;

  right: -40px;

  top: -80px;

  background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 70%);

  pointer-events: none;

}



.viz-hud-right {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 10px;

}



.viz-title {

  margin: 0 0 6px;

  font-size: clamp(22px, 3vw, 30px);

  font-weight: 750;

  letter-spacing: 0.02em;

  background: linear-gradient(90deg, #f8fafc 0%, #67e8f9 45%, #a5b4fc 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.25));

}



.viz-subtitle {

  margin: 0;

  color: #94a3b8 !important;

  font-size: 13px;

}



.viz-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.14em;

  color: #042f2e;

  background: linear-gradient(135deg, #22d3ee, #34d399);

  padding: 5px 12px;

  border-radius: 999px;

  margin-bottom: 10px;

  box-shadow: 0 0 20px rgba(34, 211, 238, 0.5);

}



.viz-badge::before {

  content: '';

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #042f2e;

  box-shadow: 0 0 8px #042f2e;

  animation: vizDot 1.2s ease-in-out infinite;

}



@keyframes vizDot {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.35; transform: scale(0.7); }

}



.viz-status-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: #67e8f9;

  padding: 6px 12px;

  border-radius: 999px;

  background: rgba(34, 211, 238, 0.08);

  border: 1px solid rgba(34, 211, 238, 0.28);

  box-shadow: inset 0 0 12px rgba(34, 211, 238, 0.08);

  font-variant-numeric: tabular-nums;

}



.viz-live-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #34d399;

  box-shadow: 0 0 10px #34d399;

  animation: vizDot 1s ease-in-out infinite;

}



.viz-status-sep { opacity: 0.4; }



.btn-tech {

  background: rgba(15, 23, 42, 0.7) !important;

  border: 1px solid rgba(34, 211, 238, 0.35) !important;

  color: #67e8f9 !important;

  transition: all 0.2s ease !important;

}



.btn-tech:hover {

  background: rgba(34, 211, 238, 0.12) !important;

  border-color: rgba(34, 211, 238, 0.65) !important;

  color: #a5f3fc !important;

  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25) !important;

  transform: translateY(-1px);

}



.viz-section-head {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 8px 0 12px;

}



.viz-sec-mark {

  width: 8px;

  height: 8px;

  border-radius: 2px;

  background: linear-gradient(135deg, #22d3ee, #818cf8);

  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);

  transform: rotate(45deg);

  flex-shrink: 0;

}



.viz-sec-title {

  font-size: 13px;

  font-weight: 750;

  letter-spacing: 0.12em;

  color: #e2e8f0;

  text-transform: uppercase;

  white-space: nowrap;

}



.viz-sec-line {

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, rgba(34, 211, 238, 0.45), rgba(99, 102, 241, 0.15), transparent);

}



.viz-hint {

  font-size: 11px;

  font-weight: 500;

  color: var(--text-3);

  letter-spacing: 0.02em;

  padding: 2px 8px;

  border-radius: 999px;

  border: 1px solid rgba(34, 211, 238, 0.15);

  background: rgba(34, 211, 238, 0.05);

}



.viz-panel-title {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-weight: 700;

}



.viz-title-bar {

  display: inline-block;

  width: 3px;

  height: 14px;

  border-radius: 2px;

  background: linear-gradient(180deg, #22d3ee, #818cf8);

  box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);

}



.viz-card-3d {

  position: relative;

  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;

  overflow: hidden;

  background: linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(8, 14, 28, 0.78)) !important;

  border: 1px solid rgba(34, 211, 238, 0.2) !important;

  box-shadow:

    0 10px 32px rgba(0, 0, 0, 0.4),

    inset 0 1px 0 rgba(255, 255, 255, 0.04),

    0 0 0 1px rgba(34, 211, 238, 0.04) !important;

}



.viz-card-3d:hover {

  border-color: rgba(34, 211, 238, 0.45) !important;

  box-shadow:

    0 16px 40px rgba(0, 0, 0, 0.5),

    0 0 36px rgba(34, 211, 238, 0.14),

    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

}



.viz-panel-deco {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.viz-panel-deco::before,

.viz-panel-deco::after {

  content: '';

  position: absolute;

  width: 14px;

  height: 14px;

  border: 1.5px solid rgba(34, 211, 238, 0.55);

}



.viz-panel-deco::before {

  top: 8px;

  left: 8px;

  border-right: 0;

  border-bottom: 0;

}



.viz-panel-deco::after {

  top: 8px;

  right: 8px;

  border-left: 0;

  border-bottom: 0;

}



.viz-card-3d::after {

  content: '';

  position: absolute;

  left: 8px;

  right: 8px;

  bottom: 8px;

  height: 14px;

  pointer-events: none;

  background:

    linear-gradient(90deg, rgba(34, 211, 238, 0.45), transparent 18%),

    linear-gradient(270deg, rgba(34, 211, 238, 0.45), transparent 18%);

  background-size: 14px 1.5px, 14px 1.5px;

  background-position: left bottom, right bottom;

  background-repeat: no-repeat;

  opacity: 0.7;

  z-index: 0;

}



.viz-card-3d::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    125deg,

    rgba(34, 211, 238, 0.08) 0%,

    transparent 38%,

    transparent 62%,

    rgba(99, 102, 241, 0.08) 100%

  );

  opacity: 0;

  transition: opacity 0.3s ease;

  pointer-events: none;

  z-index: 0;

}



.viz-card-3d:hover::before { opacity: 1; }



.viz-card-3d .card-title,

.viz-card-3d .chart-wrap,

.viz-card-3d .insight-list {

  position: relative;

  z-index: 1;

}



.viz-card-3d .card-title {

  border-bottom: 1px solid rgba(34, 211, 238, 0.1);

  padding-bottom: 10px;

  margin-bottom: 8px;

}



.chart-wrap-3d {

  position: relative;

  width: 100%;

  height: 320px;

}



.chart-wrap-3d-lg {

  position: relative;

  width: 100%;

  height: 420px;

}



.viz-kpi { margin-bottom: 18px; }



.viz-kpi .stat-card {

  position: relative;

  overflow: hidden;

  background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(10, 16, 32, 0.8)) !important;

  border: 1px solid rgba(34, 211, 238, 0.2) !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.viz-kpi .stat-card::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

  background: linear-gradient(180deg, #22d3ee, #818cf8);

  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);

}



.viz-kpi .stat-card:hover {

  transform: translateY(-5px);

  border-color: rgba(34, 211, 238, 0.5) !important;

  box-shadow:

    0 16px 36px rgba(0, 0, 0, 0.4),

    0 0 28px rgba(34, 211, 238, 0.18);

}



.viz-kpi .stat-card.danger::before {

  background: linear-gradient(180deg, #f87171, #fb923c);

  box-shadow: 0 0 12px rgba(248, 113, 113, 0.55);

}



.viz-kpi .stat-card.warning::before {

  background: linear-gradient(180deg, #fbbf24, #fb923c);

  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);

}



.viz-kpi .stat-card.success::before {

  background: linear-gradient(180deg, #34d399, #22d3ee);

  box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);

}



.viz-kpi .stat-label {

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #94a3b8 !important;

}



.viz-kpi .stat-value {

  font-variant-numeric: tabular-nums;

  font-weight: 800;

  background: linear-gradient(180deg, #f8fafc, #67e8f9);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.25));

}



.viz-kpi .stat-sub {

  color: #64748b !important;

  font-size: 11px;

}



.viz-kpi-tag {

  position: absolute;

  top: 10px;

  right: 10px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.1em;

  color: rgba(34, 211, 238, 0.7);

  border: 1px solid rgba(34, 211, 238, 0.2);

  padding: 1px 6px;

  border-radius: 4px;

  background: rgba(34, 211, 238, 0.06);

}



.viz-loading {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  color: #67e8f9;

  font-size: 12px;

  letter-spacing: 0.08em;

  background: rgba(7, 11, 22, 0.55);

  backdrop-filter: blur(4px);

  z-index: 2;

}



.viz-loading-ring {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  border: 2px solid rgba(34, 211, 238, 0.15);

  border-top-color: #22d3ee;

  border-right-color: #818cf8;

  animation: vizSpin 0.75s linear infinite;

  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);

}



@keyframes vizSpin {

  to { transform: rotate(360deg); }

}



.viz-insight-card .insight-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.viz-tech-page .insight-item {

  position: relative;

  padding: 12px 14px 12px 16px;

  border-radius: 10px;

  background: rgba(15, 23, 42, 0.55);

  border: 1px solid rgba(148, 163, 184, 0.12);

  border-left: 3px solid rgba(34, 211, 238, 0.55);

  transition: all 0.2s ease;

}



.viz-tech-page .insight-item:hover {

  border-color: rgba(34, 211, 238, 0.35);

  background: rgba(34, 211, 238, 0.06);

  transform: translateX(3px);

}



.viz-tech-page .insight-item.insight-danger {

  border-left-color: #f87171;

  box-shadow: inset 0 0 20px rgba(248, 113, 113, 0.05);

}



.viz-tech-page .insight-item.insight-warning { border-left-color: #fbbf24; }

.viz-tech-page .insight-item.insight-success { border-left-color: #34d399; }

.viz-tech-page .insight-item.insight-info { border-left-color: #38bdf8; }



.viz-tech-page .insight-dot {

  box-shadow: 0 0 8px currentColor;

}



.viz-float-tip {

  position: fixed;

  z-index: 9998;

  pointer-events: none;

  padding: 8px 12px;

  border-radius: 10px;

  font-size: 12px;

  color: #e2e8f0;

  background: rgba(15, 23, 42, 0.94);

  border: 1px solid rgba(34, 211, 238, 0.35);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(34, 211, 238, 0.12);

  backdrop-filter: blur(10px);

  max-width: 240px;

  transform: translate(-50%, -120%);

}



.viz-footer-tip {

  text-align: center;

  color: var(--text-3);

  font-size: 12px;

  margin: 8px 0 28px;

  opacity: 0.9;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

}



.viz-footer-tag {

  display: inline-flex;

  align-items: center;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;

  color: #042f2e;

  background: linear-gradient(135deg, #22d3ee, #67e8f9);

  padding: 2px 8px;

  border-radius: 4px;

}



.viz-main-row .chart-wrap-3d {

  height: 360px;

}



@media (max-width: 900px) {

  .viz-hud-frame { display: none; }

  .chart-wrap-3d { height: 280px; }

  .chart-wrap-3d-lg { height: 320px; }

  .viz-main-row .chart-wrap-3d { height: 300px; }

  .viz-hud-right { align-items: flex-start; width: 100%; }

  .viz-actions { width: 100%; }

}



@media (max-width: 560px) {

  .chart-wrap-3d { height: 250px; }

  .chart-wrap-3d-lg { height: 280px; }

  .viz-hint { display: none; }

  .viz-scanline { display: none; }

  .viz-sec-title { letter-spacing: 0.04em; }

}



@media (prefers-reduced-motion: reduce) {

  .viz-stage-bg,

  .viz-scanline,

  .viz-badge::before,

  .viz-live-dot,

  .viz-loading-ring {

    animation: none !important;

  }

  .viz-card-3d,

  .viz-kpi .stat-card {

    transition: none !important;

    transform: none !important;

  }

}





/* 2D 科技图表高度 */

.chart-wrap-2d {

  position: relative;

  width: 100%;

  height: 300px;

}



.chart-wrap-2d-lg {

  position: relative;

  width: 100%;

  height: 380px;

}



.viz-main-row .chart-wrap-2d {

  height: 320px;

}



.viz-2d-page .chart-wrap-3d,

.viz-2d-page .chart-wrap-3d-lg {

  /* fallback if old classes remain */

}



@media (max-width: 900px) {

  .chart-wrap-2d { height: 260px; }

  .chart-wrap-2d-lg { height: 300px; }

  .viz-main-row .chart-wrap-2d { height: 280px; }

}



@media (max-width: 560px) {

  .chart-wrap-2d { height: 240px; }

  .chart-wrap-2d-lg { height: 280px; }

}





/* 数据下探交互 */
.viz-kpi-clickable {
  cursor: pointer;
  user-select: none;
}
.viz-kpi-clickable:hover .viz-drill-hint,
.viz-kpi-clickable:focus .viz-drill-hint {
  opacity: 1;
  color: #67e8f9;
}
.viz-kpi-clickable:focus {
  outline: 1px solid rgba(34, 211, 238, 0.45);
  outline-offset: 2px;
}
.viz-drill-hint {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(103, 232, 249, 0.55);
  opacity: 0.75;
  transition: all 0.2s ease;
}
.viz-card-title-drill {
  cursor: pointer;
}
.viz-card-title-drill:hover .viz-panel-title {
  color: #67e8f9;
}
.viz-card-drillable:hover {
  border-color: rgba(34, 211, 238, 0.55) !important;
}
.insight-clickable {
  cursor: pointer;
}
.insight-clickable:hover {
  border-color: rgba(34, 211, 238, 0.45) !important;
}
.insight-drill-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #042f2e;
  background: linear-gradient(135deg, #22d3ee, #67e8f9);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.viz-tech-page .insight-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 数据下探弹窗（宽屏 + 可滚动明细表） */
.viz-drill-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.viz-drill-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.18);
  color: #e2e8f0;
  font-size: 13px;
}
.viz-drill-table-wrap {
  max-height: min(58vh, 520px);
  overflow: auto;
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.viz-drill-table {
  width: 100%;
  min-width: 640px;
}
.viz-drill-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 14, 28, 0.98) !important;
}
.modal-dialog-wide {
  width: min(980px, 94vw) !important;
  max-width: min(980px, 94vw) !important;
}
.viz-drill-dialog {
  width: min(980px, 94vw) !important;
  max-width: min(980px, 94vw) !important;
  max-height: 92vh !important;
}
.viz-drill-dialog .modal-body {
  max-height: min(72vh, 680px);
  overflow: auto;
  min-height: 120px;
  flex: 1 1 auto;
}
.viz-drill-dialog .modal-header,
.viz-drill-dialog .modal-footer {
  flex-shrink: 0;
}

/* ===== chart optimize 2d ===== */
.chart-wrap-2d {
  position: relative;
  width: 100%;
  height: 320px;
}
.chart-wrap-2d-lg {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 380px;
}
.viz-main-row .chart-wrap-2d {
  height: 340px;
}
#chart-trend.chart-wrap-2d-lg,
#chart-trend {
  height: 420px;
  min-height: 400px;
}
.viz-kpi .stat-value.viz-kpi-pop {
  animation: vizKpiPop 0.32s ease;
}
@keyframes vizKpiPop {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.06); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}
.btn-tech.is-refreshing {
  opacity: 0.75;
  pointer-events: none;
}
@media (max-width: 900px) {
  .chart-wrap-2d { height: 280px; }
  .chart-wrap-2d-lg { height: 340px; }
  .viz-main-row .chart-wrap-2d { height: 300px; }
  #chart-trend.chart-wrap-2d-lg,
  #chart-trend { height: 360px; min-height: 320px; }
}
@media (max-width: 560px) {
  .chart-wrap-2d { height: 250px; }
  .chart-wrap-2d-lg { height: 300px; }
  #chart-trend.chart-wrap-2d-lg,
  #chart-trend { height: 320px; min-height: 280px; }
}