/* ═══════════════════════════════════════════════════════
   Live Playback Sidebar - Premium Glassmorphism
   ═══════════════════════════════════════════════════════ */

.live-view-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 10;
}

/* Premium Indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

.status-dot-active {
  background-color: var(--accent);
  color: rgba(52, 211, 153, 0.4);
}

.status-dot-offline {
  background-color: var(--danger);
  color: rgba(248, 113, 113, 0.4);
}

/* Premium Cards */
.live-side-card {
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.live-side-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.live-side-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
  border-color: var(--border-accent);
}

.live-side-card:hover::before {
  opacity: 1;
}

/* Premium Glass Card */
.glass-card {
  position: relative;
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  transition: all var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-2xl);
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.05), transparent 40%, transparent 60%, rgba(34, 211, 238, 0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-xl), var(--shadow-glow-secondary);
  transform: translateY(-2px);
}

/* Premium Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* PANEL RIGHT: Jika ingin revert, cukup hapus referensi /live-playback-sidebar.css dan kelas .live-view-layout */