.media-stage { display: grid; place-items: center; }
.video-frame, .upload-video-frame { position: relative; overflow: hidden; background: #050408; }
.media-stage .video-frame video, .upload-video-frame video { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; }
.video-toolbar { position: absolute; z-index: 4; top: 94px; left: clamp(18px, 4vw, 64px); display: flex; align-items: center; gap: 7px; max-width: calc(100% - 110px); padding: 7px 10px; border: 1px solid #cbb0ed38; border-radius: 14px; color: #f5edff; background: #100b18e8; }
.video-toolbar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 3px; border: 0; color: inherit; background: transparent; }
.video-volume-control { display:flex; align-items:center; min-width:0; }
.video-hover-volume { display:flex; align-items:center; gap:8px; max-width:0; padding-left:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-width .16s ease,opacity .14s ease,padding-left .16s ease; }
.video-volume-control:hover .video-hover-volume, .video-volume-control:has(:focus-visible) .video-hover-volume { max-width:180px; padding-left:7px; opacity:1; visibility:visible; }
.video-hover-volume input[type=range] { flex:0 0 110px; width:110px; min-height:28px; margin:0; accent-color:#b67be4; cursor:pointer; }
.video-hover-volume-value { flex:0 0 35px; min-width:35px; color:#e1d0f2; font-size:11px; font-variant-numeric:tabular-nums; }
.video-hover-volume input:focus-visible, .video-volume-control button:focus-visible { outline:2px solid #d7b9ff; outline-offset:2px; }
.video-toolbar svg, .video-center-toggle svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-video-volume { display:flex; align-items:center; gap:12px; flex:0 1 240px; min-width:0; max-width:100%; }
.settings-video-volume input[type=range] { width:180px; max-width:calc(100% - 48px); min-width:70px; min-height:44px; margin:0; accent-color:#b67be4; cursor:pointer; }
.settings-video-volume output { width:36px; flex:0 0 36px; color:#e1d0f2; font-size:13px; font-variant-numeric:tabular-nums; }
@media(max-width:600px) { .settings-video-volume { flex:0 0 150px; flex-wrap:nowrap; width:150px; } .settings-video-volume input[type=range] { width:102px; } }
.video-player-status { position: absolute; top: calc(100% + 7px); left: 0; width: min(310px, 75vw); font-size: 11px; color: #ede1f9; text-shadow: 0 1px 6px #000; pointer-events: none; }
.video-center-toggle { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 70px; height: 70px; padding: 0; transform: translate(-50%, -50%) scale(.9); border: 1px solid #e3ccff55; border-radius: 50%; color: #fff; background: #0b0712a8; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.video-center-toggle svg { width: 34px; height: 34px; }
.video-center-toggle.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.video-timeline { position: absolute; z-index: 4; left: max(18px, env(safe-area-inset-left, 0px)); right: 104px; bottom: 7px; display: flex; align-items: center; gap: 8px; }
.video-timeline input { flex: 1; min-width: 0; height: 12px; margin: 0; accent-color: #b67be4; }
.video-timeline span { color: #e5d8f3; font-size: 10px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #000; }
.youtube-stage { padding-top: 70px; }
.youtube-stage iframe { display: block; width: 100%; height: 100%; min-height: 200px; }
.video-presentation-fields { margin: 8px 0; padding: 14px; border: 1px solid #b99aff40; border-radius: 14px; }
.video-presentation-fields legend { padding: 0 7px; color: #e1caff; font-size: 13px; }
.video-presentation-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.video-presentation-options label { min-width: 0; }
.video-presentation-options select { width: 100%; padding: 9px 6px; }
.upload-video-stage { display: grid; place-items: center; width: 100%; height: min(340px, 48vh); margin-top: 12px; overflow: hidden; border: 1px solid #ffffff20; border-radius: 12px; background: #060409; }
.upload-video-frame video { object-fit: contain; }
.video-source-info { margin: 10px 0 0; color: #cbb6e0; font-size: 12px; line-height: 1.6; }
.feed-refresh-indicator { position: fixed; z-index: 60; left: 50%; top: 88px; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border: 1px solid #b67be450; border-radius: 99px; color: #ecddff; background: #0b0713f5; opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity .18s, transform .18s; }
.profile-refresh-indicator { top: 80px; }
.profile-refresh-button { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;margin-left:auto;padding:8px;border:1px solid #9b78ff65;border-radius:11px;background:#100b18;color:#eee8ff; }
.profile-refresh-button img { display:block;width:24px;height:24px; }
.profile-refresh-button:disabled { opacity:.55; }
.profile-refresh-button:focus-visible { outline:2px solid #d7b9ff;outline-offset:2px; }
.feed-refresh-indicator img { width: 42px; height: 42px; transform: rotate(calc(var(--pull-progress, 1) * 170deg)); }
.feed-refresh-indicator span { font-size: 12px; }
.feed-refresh-indicator.is-visible { opacity: 1; transform: translate(-50%, 0); }
.feed-refresh-indicator.is-ready { border-color: #c9a1f5; }
.feed-refresh-indicator.is-refreshing img { animation: warpin-refresh-spin .85s linear infinite; }
.wordmark.is-refreshing .wordmark-icon { opacity: .65; }
@keyframes warpin-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .video-toolbar { top: calc(var(--mobile-header-height, 65px) + 12px); left: max(10px, env(safe-area-inset-left, 0px)); width: 0; height: 0; max-width: none; padding: 0; border: 0; background: transparent; pointer-events: none; }
  .video-volume-control { display: none; }
  .video-timeline { right: 88px; bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
  .video-timeline span { font-size: 9px; }
  #feed-refresh-indicator { top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-header-height) + 42px + 8px); }
  .profile-refresh-indicator { top: calc(var(--mobile-viewport-top, 0px) + env(safe-area-inset-top, 0px) + 68px); }
  .profile-refresh-button { flex-basis:39px;width:39px;height:39px; }
  .video-presentation-options { grid-template-columns: 1fr; gap: 3px; }
  .video-center-toggle { width: 62px; height: 62px; padding: 0; }
  .youtube-stage { padding-top: 57px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-center-toggle, .feed-refresh-indicator { transition: none; }
  .feed-refresh-indicator.is-refreshing img { animation-duration: 2.2s; }
}