.play-icon,.video-overlay{opacity:0;pointer-events:none}body{font-family:Arial,sans-serif;background-color:#f4f4f4;color:#333;margin:0;padding:0;text-align:center;overflow-x:hidden}h1{color:#2c3e50;margin-top:50px}p{font-size:18px}.video-container{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:100%;margin:0;padding:0}.video-item{border:1px solid #ccc;border-radius:0;overflow:hidden;background-color:#f9f9f9;box-shadow:none;transition:transform .2s}.video-container video{width:100%;height:100%;display:block}@media (max-width:992px){.video-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.video-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:400px){.video-container{grid-template-columns:repeat(2,1fr)}}.thumbnail-wrapper{position:relative;width:100%;height:250px;overflow:hidden}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:#fff;transition:opacity .3s;text-shadow:0 0 8px rgba(0,0,0,.7)}.thumbnail-wrapper:hover .play-icon{opacity:1}.thumbnail-wrapper .video-thumbnail{transition:transform .3s ease-in-out}.thumbnail-wrapper:hover .video-thumbnail{transform:scale(1.02)}.video-thumbnail{width:100%;height:250px;object-fit:cover;object-position:top;display:block;border-radius:0!important}.modal{display:none;position:fixed;inset:0;background-color:rgba(0,0,0,.7);justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:16px;width:90%;max-width:720px;box-shadow:0 8px 20px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background-color:#f7f7f7;border-bottom:1px solid #ddd}.modal-title{font-size:1.25rem;font-weight:600;color:#333}.close-button{cursor:pointer;font-size:28px;font-weight:700;color:#888;user-select:none;transition:color .3s}.modal-body{flex:1;justify-content:center;align-items:center;padding:0;background:#000}#modalVideoWrapper video,#modalVideoWrapper video.video-js{width:100%!important;height:100%!important;max-height:100%;border-radius:0!important;display:block}.video-js{width:720px!important;height:360px!important}.vjs-volume-panel{display:none!important}.close-button:hover{color:#000}.video-modal-container{background-color:#010101!important;position:relative;width:100%;height:450px}.video-modal-container video{width:100%;height:100%;background:0 0;position:relative;z-index:1}.video-overlay{width:100%;position:absolute;background:#00000075;align-items:center;bottom:0;left:0;z-index:2;display:flex;gap:10px;transition:opacity .3s;backface-visibility:hidden;transform:translateZ(0);will-change:opacity,transform}.video-overlay button{background:0 0;border:none;color:#fff;padding:6px 10px;font-size:16px;border-radius:4px;cursor:pointer}.live-label{color:red;font-weight:700;font-size:14px;margin-right:20px;margin-left:auto}.video-overlay.show{opacity:1;pointer-events:auto}@media (prefers-color-scheme:dark){body{background-color:#121212;color:#eee}h1{color:#f1f1f1}p{color:#fff!important;}.video-item{border:1px solid #444;background-color:#121212}.modal-content{background:#121212;color:#eee}.modal-header{background-color:#121212;border-bottom:1px solid #444}.modal-title{color:#f5f5f5}.close-button{color:#aaa}.close-button:hover{color:#fff}.video-overlay{background:#00000090}}