body.youtube-modal-open { overflow: hidden; }
.youtube-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(3,2,5,.9); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.youtube-modal.open { opacity: 1; visibility: visible; }
.youtube-modal-panel { position: relative; width: min(1050px,94vw); padding: 12px 12px 20px; border: 1px solid rgba(199,94,255,.46); background: #0a070d; box-shadow: 0 30px 100px rgba(0,0,0,.7),0 0 55px rgba(166,57,255,.18); transform: scale(.96) translateY(12px); transition: transform .22s ease; }
.youtube-modal.open .youtube-modal-panel { transform: none; }
.youtube-modal-player { width: 100%; aspect-ratio: 16/9; background: #000; }
.youtube-modal-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-modal-title { display: block; padding: 16px 8px 0; color: #fff; font-size: clamp(14px,1.5vw,20px); line-height: 1.35; }
.youtube-modal-close { position: absolute; top: -18px; right: -18px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #b13dff; color: #fff; font: 300 28px/1 Inter,sans-serif; cursor: pointer; box-shadow: 0 0 24px rgba(177,61,255,.5); }
.youtube-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media(max-width:600px){.youtube-modal{padding:12px}.youtube-modal-panel{width:100%;padding:8px 8px 15px}.youtube-modal-close{top:-12px;right:-8px;width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.youtube-modal,.youtube-modal-panel{transition:none}}