// 全局样式 - 匹配 index-v2.html

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: $bg-deep;
  font-family: $font-main;
  color: $text;
}

// 滚动条
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: $border; border-radius: 5px; }

// ========== 面板系统 ==========
.panel {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: $bg-panel;
  border: 1px solid $border;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.05) 0%, transparent 50%, rgba(0, 216, 255, 0.03) 100%);
  }
}

// 角标装饰
.pc {
  position: absolute;
  width: 35px;
  height: 35px;
  z-index: 3;
  pointer-events: none;

  &.tl { top: 0; left: 0; }
  &.tr { top: 0; right: 0; transform: scaleX(-1); }
  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
  &.br { bottom: 0; right: 0; transform: scale(-1); }

  svg { width: 100%; height: 100%; }
}

// 光束边框动画
.border-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 2;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
    animation: beamTop 5s linear infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 40%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
    animation: beamBottom 5s linear infinite 2.5s;
  }
}

@keyframes beamTop { from { left: -40%; } to { left: 100%; } }
@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }

// 面板头部
.panel-header {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 20px 30px 18px;
  border-bottom: 1px solid $border;
  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
  flex-shrink: 0;
}

.panel-header-icon {
  width: 65px;
  height: 65px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
  border: 1px solid rgba(30, 144, 255, 0.35);
  animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
  50% { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
}

.panel-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 2px;
  color: $cyan;
}

// 扫描线效果
.scan-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    top: -200px;
    background: linear-gradient(180deg, transparent, rgba(30, 144, 255, 0.025), transparent);
    animation: scanFull 9s linear infinite;
  }
}

@keyframes scanFull { from { top: -200px; } to { top: 100%; } }

// 状态圆点
.status-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  animation: dotPulse 2s ease-in-out infinite;

  &.green { background: $green; box-shadow: 0 0 15px $green; }
  &.red { background: $red; box-shadow: 0 0 15px $red; animation: blinkRed 0.8s ease-in-out infinite; }
  &.orange { background: #f59e0b; box-shadow: 0 0 15px #f59e0b; }
}

@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
@keyframes blinkRed { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
