/* Global styles extracted from viewer.php */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #13131a;
  --bg-card: #1a1a24;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: rgba(0, 0, 0, 0.5);
}
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh; overflow-x: hidden; font-weight: 300; letter-spacing: 0.01em;
  display: flex; flex-direction: column;
}
.page-wrapper { flex: 1; display: flex; flex-direction: column; }
.content-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
/* Generic containers */
.header { padding: 0px; text-align: center; background: linear-gradient(180deg, var(--bg-primary) 0%, transparent 100%); }
.header p { color: var(--text-secondary); font-weight: 300; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 40px 80px; }
/* Streams grid */
.streams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 32px; margin-top: 40px; }
/* Stream card */
.stream-card { position: relative; background: var(--bg-card); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all .2s cubic-bezier(.16,1,.3,1); border: 1px solid var(--border); box-shadow: 0 0 20px rgba(212,175,55,.15), 0 0 40px rgba(212,175,55,.08); isolation:isolate; }
.stream-card::before { content:''; position:absolute; inset:0; border-radius:16px; padding:1px; background: linear-gradient(135deg, var(--accent), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity:0; transition: opacity .4s; pointer-events:none; }
.stream-card:hover::before { opacity: 1; }
.stream-card:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(212,175,55,.3), 0 0 60px rgba(212,175,55,.15), 0 12px 32px rgba(0,0,0,.3); border-color: rgba(212,175,55,.4); }
/* Thumbnail */
.stream-thumbnail { position: relative; aspect-ratio: 16/9; background:#000; overflow: hidden; }
.stream-thumbnail .placeholder { font-size:64px; opacity:.4; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.stream-thumbnail video, .stream-thumbnail .thumbnail-video { width:100%; height:100%; object-fit: cover; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.stream-card:hover .stream-thumbnail video, .stream-card:hover .stream-thumbnail .thumbnail-video { transform: scale(1.02); }
.thumbnail-video { pointer-events:none; display:block; position:relative; }
.thumbnail-video img { display:block; width:100%; height:100%; }
/* Stream preview */
.stream-preview-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:none; pointer-events:none; }
.stream-preview-video.active { display:block; }
.stream-preview-video.active + .placeholder { display:none; }
/* Live badge (used by viewer/watch) */
.live-badge, .status-badge { background: rgba(220,38,38,.4); color:#fff; padding:8px 16px; border-radius:100px; font-size:.7rem; font-weight:600; display:flex; align-items:center; gap:8px; backdrop-filter: blur(20px); border:1px solid rgba(220,38,38,.3); z-index:10; letter-spacing:.1em; text-transform: uppercase; }
.live-badge { position:absolute; top:12px; left:12px; pointer-events:none; }
/* Broadcaster page styles */
.broadcaster-container { max-width:1200px; margin:0 auto; padding:20px 40px 80px; }
.broadcaster-card { background:var(--bg-card); border-radius:24px; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5); border:1px solid var(--border); }
.broadcaster-video-container { position:relative; background:#000; aspect-ratio:16/9; }
.broadcaster-video-container video { width:100%; height:100%; object-fit:cover; }
.broadcaster-video-overlay { position:absolute; top:20px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:statusBlink 1.2s infinite; }
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.stats-badge { background:rgba(15,23,42,.8); backdrop-filter:blur(10px); padding:12px 16px; border-radius:16px; font-size:13px; border:1px solid var(--border); }
.broadcaster-controls { padding:32px; }
.broadcaster-controls-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-bottom:24px; }
.broadcaster-form-group { display:flex; flex-direction:column; gap:8px; }
.broadcaster-form-group label { font-size:14px; font-weight:500; color:var(--text-primary); }
.broadcaster-form-group select, .broadcaster-form-group input { background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-primary); padding:12px 16px; border-radius:12px; font-size:14px; font-family:inherit; }
.broadcaster-button-group { display:flex; gap:12px; flex-wrap:wrap; }
.broadcaster-btn { flex:1; min-width:140px; padding:14px 24px; border:1px solid; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .3s cubic-bezier(.4,0,.2,1); font-family:inherit; }
.broadcaster-btn:disabled { opacity:0.5; cursor:not-allowed; }
.broadcaster-btn-primary { background:rgba(212, 175, 55, 0.1); color:var(--accent-gold); border-color:rgba(212, 175, 55, 0.3); }
.broadcaster-btn-primary:hover:not(:disabled) { background:rgba(212, 175, 55, 0.2); border-color:var(--accent-gold); transform:translateY(-2px); box-shadow:0 8px 16px rgba(212, 175, 55, 0.2); }
.broadcaster-btn-success { background:rgba(16, 185, 129, 0.1); color:#10b981; border-color:rgba(16, 185, 129, 0.3); }
.broadcaster-btn-success:hover:not(:disabled) { background:rgba(16, 185, 129, 0.2); border-color:#10b981; transform:translateY(-2px); box-shadow:0 8px 16px rgba(16, 185, 129, 0.2); }
.broadcaster-btn-danger { background:rgba(239, 68, 68, 0.1); color:#ef4444; border-color:rgba(239, 68, 68, 0.3); }
.broadcaster-btn-danger:hover:not(:disabled) { background:rgba(239, 68, 68, 0.2); border-color:#ef4444; transform:translateY(-2px); box-shadow:0 8px 16px rgba(239, 68, 68, 0.2); }
.broadcaster-connection-indicator { display:flex; align-items:center; gap:12px; padding:16px; background:var(--bg-secondary); border-radius:12px; margin-bottom:24px; border:1px solid var(--border); }
.broadcaster-connection-dot { width:10px; height:10px; border-radius:50%; background:var(--text-secondary); }
.broadcaster-connection-dot.connected { background:#10b981; animation:statusBlink 2s infinite; }
.broadcaster-room-info { background:linear-gradient(135deg,#6366f1,#8b5cf6); padding:24px; border-radius:16px; margin-top:24px; text-align:center; }
.broadcaster-room-id { font-size:28px; font-weight:700; font-family:'Courier New',monospace; margin:12px 0; letter-spacing:2px; background:rgba(255,255,255,.2); padding:16px; border-radius:12px; backdrop-filter:blur(10px); }
.live-dot, .status-dot { width:10px; height:10px; background:#ef4444; border-radius:50%; box-shadow: 0 0 6px rgba(239,68,68,.6), 0 0 12px rgba(239,68,68,.35); animation: livePulse 5.2s linear infinite; }
@keyframes livePulse { 0%{ transform:scale(1); opacity:.85; box-shadow:0 0 4px rgba(239,68,68,.5), 0 0 8px rgba(239,68,68,.25);} 50%{ transform:scale(1.2); opacity:1; box-shadow:0 0 8px rgba(239,68,68,.7), 0 0 14px rgba(239,68,68,.4);} 100%{ transform:scale(1); opacity:.85; box-shadow:0 0 4px rgba(239,68,68,.5), 0 0 8px rgba(239,68,68,.25);} }
/* Card info */
.stream-info { padding:24px; }
.stream-title { font-family:'IBM Plex Sans', sans-serif; font-size:1rem; font-weight:400; margin-bottom:8px; letter-spacing:.01em; color:var(--text-primary); }
.stream-meta { display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:var(--text-secondary); font-weight:300; letter-spacing:.02em; }
.stream-location,.stream-duration,.stream-viewers { display:flex; align-items:center; gap:6px; }
/* Reserved overlay */
.reserved-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:10; }
.reserved-overlay span { font-size:2rem; font-weight:600; color:#fff; letter-spacing:.1em; text-transform: uppercase; }
/* Popover (viewer) */
.popover-overlay { position:fixed; inset:0; background: rgba(0,0,0,.85); backdrop-filter: blur(20px); display:none; align-items:center; justify-content:center; z-index:1000; animation: fadeIn .3s ease; }
.popover-overlay.active { display:flex; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.popover { background: var(--bg-card); border-radius:24px; padding:40px; max-width:500px; width:90%; border:1px solid var(--border); animation: slideUp .4s cubic-bezier(.4,0,.2,1); box-shadow:0 40px 80px -20px rgba(0,0,0,.8); }
@keyframes slideUp { from{opacity:0; transform: translateY(30px) scale(.95);} to{opacity:1; transform: translateY(0) scale(1);} }
.popover h2 { font-size:28px; font-weight:700; margin-bottom:12px; }
.popover-subtitle { color: var(--text-secondary); margin-bottom:32px; font-size:15px; }
.popover-room { background: var(--bg-secondary); padding:20px; border-radius:16px; text-align:center; margin-bottom:32px; border:1px solid var(--border); }
.popover-room-id { font-family:'Courier New', monospace; font-size:24px; font-weight:600; letter-spacing:1px; }
.popover-buttons { display:flex; gap:12px; }
.btn { flex:1; padding:16px 28px; border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; transition: all .3s cubic-bezier(.4,0,.2,1); font-family:inherit; }
.btn-primary { background: var(--accent); color:#fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(99,102,241,.6); }
.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-primary); border-color: var(--accent); }
/* Stream view (viewer) */
.stream-view { display:none; position:fixed; inset:0; background: var(--bg-primary); z-index:999; animation: fadeIn .3s; }
.stream-view.active { display:flex; flex-direction:column; }
.stream-header { padding:20px 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); background: var(--bg-secondary); }
.stream-room-id { font-family:'Courier New', monospace; font-size:20px; font-weight:600; }
.btn-back { background: var(--bg-card); color: var(--text-primary); border:1px solid var(--border); padding:12px 24px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; transition:.2s; }
.btn-back:hover { background: var(--bg-primary); border-color: var(--accent); }
.stream-player { flex:1; display:flex; align-items:center; justify-content:center; background:#000; position:relative; }
.stream-player video { width:100%; height:100%; object-fit: contain; }
.player-overlay { position:absolute; top:20px; left:20px; right:20px; display:flex; justify-content:space-between; pointer-events:none; }
.player-badge { background: rgba(26,26,36,.9); backdrop-filter: blur(10px); padding:12px 20px; border-radius:12px; font-size:14px; font-weight:600; border:1px solid var(--border); }
.player-badge.live { background: rgba(16,185,129,.9); border-color:#10b981; }
/* Empty state */
.empty-state { text-align:center; padding:120px 20px; color: var(--text-secondary); }
.empty-icon { font-size:80px; margin-bottom:24px; opacity:.3; }
.empty-state h3 { font-size:24px; font-weight:600; margin-bottom:12px; color: var(--text-primary); }
.empty-state p { font-size:16px; }
/* Responsive */
@media (max-width: 768px) {
  .container { padding: 0 20px 60px; }
  .streams-grid { grid-template-columns: 1fr; gap: 24px; }
  .popover { padding: 32px 24px; }
  .popover-buttons { flex-direction: column; }
  .stream-header { padding: 16px 20px; }
}