@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&family=JetBrains+Mono:wght@400;700;800&display=swap');

body {
  background-color: #05070a;
  color: #e6edf3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}

.armor-inner-layer {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px;
}

.btn-vip-gold {
  background: linear-gradient(to right, #facc15, #ca8a04);
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 0 10px rgba(202, 138, 4, 0.3);
  border: 1px solid #fef08a;
}

@keyframes paparazzi-flash {
  0%, 95%, 100% { opacity: 0; }
  2%, 10%, 18% { opacity: 0.6; }
  5%, 14% { opacity: 0.2; }
}

.light-paparazzi {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: white;
  mix-blend-mode: overlay;
  animation: paparazzi-flash 2.5s ease-out infinite;
}

@keyframes police-pulse {
  0%, 100% { background: radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 70%); }
  50% { background: radial-gradient(circle at 70% 50%, rgba(239, 68, 68, 0.2) 0%, transparent 70%); }
}

.light-police {
  position: fixed;
  inset: 0;
  z-index: 9991;
  pointer-events: none;
  animation: police-pulse 1s step-end infinite;
  mix-blend-mode: screen;
}

@keyframes cyberpunk-glow {
  0%, 100% { border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.3) inset; }
  50% { border-color: #22c55e; box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) inset; }
}

.light-cyberpunk {
  position: fixed;
  inset: 0;
  z-index: 9992;
  pointer-events: none;
  border: 3px solid #a855f7;
  animation: cyberpunk-glow 2s linear infinite;
}

.tv-active-blink {
  animation: master-blink 1s infinite !important;
}

@keyframes master-blink {
  0%, 100% {
    border-color: #fff;
    box-shadow: 0 0 5px #fff;
    transform: scale(1);
  }
  50% {
    border-color: #e5b80b;
    box-shadow: 0 0 20px rgba(229, 184, 11, 0.5);
    transform: scale(1.02);
  }
}

@keyframes scan-line {
  0% { transform: translateY(-50vh); }
  100% { transform: translateY(50vh); }
}

.scan-overlay .scan-beam {
  width: 100%;
  height: 2px;
  background: #22d3ee;
  position: absolute;
  animation: scan-line 1.5s linear infinite;
  box-shadow: 0 0 15px #22d3ee;
}

.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #0d1117; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; }

.nav-btn.active-live-watch { border-bottom: 2px solid #22c55e; background: rgba(20, 83, 45, 0.2); color: #4ade80; }
.mirror-live { transform: scaleX(-1); }

/* Live feed — TikTok dọc / YouTube ngang */
.live-stage-tiktok #live-feed-mount {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.live-tiktok-phone {
  width: min(100%, 340px);
  height: 100%;
  max-height: 100%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #222;
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.15);
}
.live-stage-youtube #live-feed-mount {
  background: #0f0f0f;
}
.sat-preview-video, .sat-preview-iframe { z-index: 1; opacity: 0.92; }
.sat-poster { opacity: 1; }
.satellite-tile:has(.sat-preview-video:not([style*="display: none"])) .sat-poster,
.satellite-tile:has(.sat-preview-iframe) .sat-poster { opacity: 0.25; }
.nav-btn.active-live-broadcast { border-bottom: 2px solid #ef4444; background: rgba(69, 10, 10, 0.2); color: #f87171; }
.nav-btn.active-vip-rooms { border-bottom: 2px solid #eab308; background: rgba(66, 32, 6, 0.2); color: #facc15; }
.nav-btn.active-meeting { border-bottom: 2px solid #0ea5e9; background: rgba(12, 74, 110, 0.2); color: #38bdf8; }
.nav-btn.active-audio-tactical { border-bottom: 2px solid #06b6d4; background: rgba(22, 78, 99, 0.2); color: #22d3ee; }
.nav-btn.active-intelligence { border-bottom: 2px solid #a855f7; background: rgba(59, 7, 100, 0.2); color: #c084fc; }
.nav-btn.active-news { border-bottom: 2px solid #10b981; background: rgba(6, 78, 59, 0.2); color: #34d399; }

.panel-fade-in { animation: panelIn 0.2s ease-out; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }

.toast-enter { animation: toastIn 0.25s ease-out; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}