html,body[data-page=player]{margin:0;width:100%;height:100%;background:#06080b}body[data-page=player]{overflow:hidden}.viewer{height:100%;min-height:150px;display:flex;flex-direction:column;background:#06080b;color:#f4f6f9;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative;isolation:isolate}body[data-page=player]>.viewer{height:100dvh}.viewer *{box-sizing:border-box}.viewer [hidden]{display:none!important}.video-canvas{position:relative;min-height:0;flex:1}.media-mount{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.media-mount>video,.media-mount>iframe{width:100%;height:100%;object-fit:contain;border:0;background:#000}.viewer[data-source*="instagram"] .media-mount>iframe{max-width:540px}.player-notice{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(6,8,11,.84);padding:24px;pointer-events:none}.player-notice>div{max-width:540px}.player-mark{font-size:28px;color:#82d1b0;display:inline-block;margin-bottom:8px}.player-notice p{color:#acb7c6;white-space:pre-line;font-size:14px}.player-notice button{pointer-events:auto}.viewer button,.viewer a,.viewer select{font:inherit;color:inherit}.viewer button,.viewer select{border:1px solid #424954;background:#212731;border-radius:6px;padding:7px 15px;cursor:pointer}.viewer button:focus-visible,.viewer a:focus-visible,.viewer select:focus-visible{outline:2px solid #82d1b0;outline-offset:4px}.viewer button:disabled{opacity:.65;cursor:default}.adbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#11161e;border-bottom:1px solid #303642;padding:10px 18px;min-height:46px;font-size:12px}.adbar>div{display:flex;align-items:center;gap:12px}.ad-dot{width:6px;height:6px;background:#edc77f;border-radius:50%}.ad-clock{font-variant-numeric:tabular-nums;color:#b7c4d4}.adbar a{font-weight:600;text-decoration:none}.adbar button{font-size:12px;padding:4px 10px}.viewer:fullscreen{height:100vh;width:100vw}

/* Controls container & layout */
.player-controls{position:absolute;bottom:12px;left:12px;right:12px;z-index:10;opacity:1;display:flex;flex-direction:column;gap:6px;background:rgba(10,15,22,0.88)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);padding:6px 12px;border-radius:10px;box-sizing:border-box;transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.controls-row{width:100%;display:flex;align-items:center;justify-content:space-between}
.controls-left,.controls-right{display:flex;align-items:center;gap:8px}

/* DVR Seekbar & Status */
.dvr-bar{width:100%;display:flex;align-items:center;gap:10px;padding:2px 0}
.dvr-slider{flex:1;accent-color:#ef4444;height:4px;cursor:pointer;-webkit-appearance:none;background:rgba(255,255,255,0.2);border-radius:2px}
.dvr-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px #ef4444;cursor:pointer}
.dvr-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px #ef4444;cursor:pointer;border:none}
.dvr-time{font-size:11px;font-weight:700;color:#cbd5e1;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.btn-golive{background:rgba(239,68,68,0.25)!important;border-color:rgba(239,68,68,0.6)!important;color:#fca5a5!important;font-size:11px!important;padding:2px 7px!important;border-radius:4px!important;cursor:pointer}
.btn-golive:hover{background:rgba(239,68,68,0.45)!important}

.player-controls button,.player-controls select{padding:5px 12px;font-size:13px;font-weight:600;background:rgba(33,39,49,0.85);border:1px solid rgba(255,255,255,0.15);border-radius:6px;color:#f1f5f9;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.player-controls button:hover,.player-controls select:hover{background:rgba(48,56,70,0.95);border-color:rgba(255,255,255,0.3)}
.player-controls select option{background:#151a22;color:#f1f5f9}
.player-controls .volume-slider{accent-color:#82d1b0;width:75px;cursor:pointer}
.btn-playpause{min-width:36px;font-size:14px}
.btn-mute{min-width:54px}
.btn-rewind{min-width:46px;font-size:12px}
.btn-fullscreen{min-width:36px;font-size:15px}
.video-canvas:hover .player-controls,.player-controls:focus-within,.viewer:not(.controls-hidden) .player-controls{opacity:1;pointer-events:auto}

@media(hover:none){
  .viewer:not(.controls-hidden) .player-controls{opacity:1;pointer-events:auto}
  .player-controls .volume-slider{display:none!important}
}

@media(max-width:600px){
  .player-controls{bottom:8px;left:8px;right:8px;padding:6px 8px;gap:5px}
  .controls-left,.controls-right{gap:5px}
  .player-controls .volume-slider{display:none!important}
  .player-controls .btn-pip{display:none!important}
  .player-controls button{min-width:34px;height:34px;padding:0 6px;font-size:12px}
  .player-controls select{max-width:105px;font-size:11px;padding:4px 5px;text-overflow:ellipsis}
  .btn-mute{min-width:38px;font-size:11px}
  .btn-rewind{min-width:42px;font-size:11px}
  .live-badge{top:10px;left:10px;padding:4px 10px;font-size:11px}
}

@media(max-width:480px){.adbar{padding:8px;gap:6px}.adbar>div{flex-wrap:wrap;gap:6px}.adbar button{padding:6px 8px}.adbar a{max-width:140px;overflow-wrap:anywhere}}

[hidden],.ext-banner[hidden],.ext-banner.is-hidden{display:none!important}
.ext-banner{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,#0c1929 0%,#162033 100%);border-top:1px solid #1e3a5f;color:#c8d6e5;font:13px/1.5 system-ui,sans-serif;box-shadow:0 -4px 24px rgba(0,0,0,.5);animation:extSlideUp .3s ease-out}
.ext-dismiss:hover{color:#94a3b8}@keyframes extSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Live stream status & viewership badge */
.live-badge{position:absolute;top:14px;left:14px;z-index:5;display:inline-flex;align-items:center;gap:7px;background:rgba(10,15,22,0.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(239,68,68,0.45);padding:5px 12px;border-radius:9999px;font-size:12px;font-weight:700;letter-spacing:0.04em;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);user-select:none;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,border-color .2s ease,background .2s ease}
.live-badge.behind-live{border-color:rgba(251,191,36,0.6);background:rgba(20,24,33,0.92)}
.live-badge.behind-live .live-dot{background:#f59e0b;box-shadow:0 0 8px #f59e0b;animation:none}
.live-badge.behind-live .live-label{color:#fde68a}
.live-dot{width:7px;height:7px;background:#ef4444;border-radius:50%;box-shadow:0 0 8px #ef4444;animation:livePulse 1.8s infinite ease-in-out;flex-shrink:0}
.live-label{font-weight:700;letter-spacing:0.06em}
.live-sep{color:rgba(255,255,255,0.35);font-size:12px;line-height:1}
.live-viewers{display:inline-flex;align-items:center;gap:4px;color:#e2e8f0;font-variant-numeric:tabular-nums;font-weight:600}
.viewer-eye{font-size:12px;opacity:0.85}
@keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}

/* Buffering spinner */
.player-spinner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;transition:opacity .2s ease}
.spinner-ring{width:46px;height:46px;border:3.5px solid rgba(255,255,255,0.15);border-top-color:#82d1b0;border-radius:50%;animation:spinnerRotate .85s linear infinite}
@keyframes spinnerRotate{to{transform:rotate(360deg)}}

/* Auto-hide controls & cursor on idle */
.viewer.controls-hidden{cursor:none}
.viewer.controls-hidden .player-controls{opacity:0!important;pointer-events:none}
.viewer.controls-hidden .live-badge{opacity:0.45}