.tty-playback-page{margin:0 auto;max-width:1400px;padding:2rem}@media(max-width:768px){.tty-playback-page{padding:1rem}}.tty-overview{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.15);border-radius:1rem;margin-bottom:2rem;padding:2.5rem}@media(max-width:768px){.tty-overview{padding:1.5rem}}.tty-overview .overview-content{margin:0 auto;max-width:1000px}.tty-overview .overview-header{margin-bottom:2.5rem}.tty-overview .overview-header .overview-text{text-align:center}.tty-overview .overview-header .overview-text h2{background:linear-gradient(135deg,var(--accent-primary,#4a9eff),var(--accent-secondary,#6366f1));-webkit-background-clip:text;color:var(--text-primary,#fff);font-size:2.2rem;font-weight:700;margin:0 0 1rem;-webkit-text-fill-color:transparent;background-clip:text}@supports not (-webkit-background-clip:text){.tty-overview .overview-header .overview-text h2{background:none;color:var(--accent-primary,#4a9eff)}}@media(max-width:768px){.tty-overview .overview-header .overview-text h2{font-size:1.8rem}}.tty-overview .overview-header .overview-text p{color:hsla(0,0%,100%,.8);font-size:1.1rem;line-height:1.6;margin:0 auto;max-width:800px;opacity:.9}@media(max-width:768px){.tty-overview .overview-header .overview-text p{font-size:1rem}}.stats-summary{display:flex;gap:3rem;justify-content:center}@media(max-width:768px){.stats-summary{gap:2rem}}@media(max-width:480px){.stats-summary{flex-direction:column;gap:1.5rem}}.stats-summary .stat-item{align-items:center;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:.75rem;display:flex;gap:1rem;padding:1.5rem 2rem;transition:all .3s ease}@media(max-width:768px){.stats-summary .stat-item{gap:.75rem;padding:1.25rem 1.5rem}}.stats-summary .stat-item:hover{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.2);transform:translateY(-2px)}.stats-summary .stat-item .stat-icon{font-size:1.5rem;opacity:.8}@media(max-width:768px){.stats-summary .stat-item .stat-icon{font-size:1.25rem}}.stats-summary .stat-item .stat-content{text-align:left}@media(max-width:480px){.stats-summary .stat-item .stat-content{text-align:center}}.stats-summary .stat-item .stat-content .stat-value{color:var(--accent-primary);display:block;font-size:1.8rem;font-weight:700;line-height:1;margin-bottom:.25rem}@media(max-width:768px){.stats-summary .stat-item .stat-content .stat-value{font-size:1.5rem}}.stats-summary .stat-item .stat-content .stat-label{color:hsla(0,0%,100%,.7);font-size:.85rem;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.video-controls{align-items:center;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:.75rem;display:flex;gap:2rem;margin-bottom:2rem;padding:1.5rem}@media(max-width:768px){.video-controls{flex-direction:column;gap:1rem;text-align:center}}.video-controls .control-group{align-items:center;display:flex;gap:.75rem}.video-controls .control-group label{color:hsla(0,0%,100%,.9);font-weight:500;white-space:nowrap}.video-controls .control-group select{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.3);border-radius:.5rem;color:var(--text-primary);cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .3s ease}.video-controls .control-group select:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.4)}.video-controls .control-group select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(var(--accent-primary-rgb),.2);outline:none}.video-controls .control-group select option{background:var(--bg-primary);color:var(--text-primary)}.video-controls .refresh-btn{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.3);border-radius:.5rem;color:var(--text-primary);cursor:pointer;font-size:.9rem;margin-left:auto;padding:.5rem 1rem;transition:all .3s ease}@media(max-width:768px){.video-controls .refresh-btn{margin-left:0}}.video-controls .refresh-btn:hover{background:hsla(0,0%,100%,.2);transform:translateY(-1px)}.video-controls .refresh-btn.loading{opacity:.6;pointer-events:none}.video-grid-container{min-height:400px}.video-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}@media(max-width:768px){.video-grid{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media(max-width:480px){.video-grid{grid-template-columns:1fr}}.video-card{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.15);border-radius:.75rem;cursor:pointer;overflow:hidden;transition:all .3s ease}.video-card:hover{border-color:hsla(0,0%,100%,.25);box-shadow:0 10px 30px rgba(0,0,0,.3);transform:translateY(-4px)}.video-card .video-thumbnail{align-items:center;display:flex;height:180px;justify-content:center;overflow:hidden;position:relative}.video-card .video-thumbnail.no-thumbnail{background:linear-gradient(135deg,#1a1a1a,#2a2a2a)}.video-card .video-thumbnail.has-thumbnail{background:#000}.video-card .video-thumbnail .thumbnail-image{height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease;width:100%}.video-card .video-thumbnail .play-button{align-items:center;background:rgba(0,0,0,.7);border-radius:50%;color:#fff;display:flex;font-size:3rem;height:60px;justify-content:center;left:50%;opacity:.9;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:60px;z-index:2}.no-thumbnail .video-card .video-thumbnail .play-button{background:none;border-radius:0;color:var(--accent-primary);font-size:3rem;height:auto;opacity:.8;width:auto}.video-card .video-thumbnail .duration-badge{background:rgba(0,0,0,.8);border-radius:.25rem;bottom:.5rem;color:#fff;font-size:.8rem;font-weight:500;padding:.25rem .5rem;position:absolute;right:.5rem;z-index:2}.video-card .video-thumbnail:hover .play-button{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.no-thumbnail .video-card .video-thumbnail:hover .play-button{transform:scale(1.1)}.video-card .video-thumbnail:hover .thumbnail-image{transform:scale(1.05)}.video-card .video-info{padding:1rem}.video-card .video-info .video-title{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0 0 .5rem}.video-card .video-info .video-meta{display:flex;gap:1rem}.video-card .video-info .video-meta .meta-item{color:hsla(0,0%,100%,.7);font-size:.8rem}.loading-placeholder{color:hsla(0,0%,100%,.7);grid-column:1/-1;padding:3rem;text-align:center}.loading-placeholder p{font-size:1.1rem;margin-bottom:1rem}.loading-spinner{animation:spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.2);border-radius:50%;border-top:3px solid var(--accent-primary);height:40px;margin:0 auto;width:40px}.error-message{background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.3);border-radius:.75rem;color:#f44;grid-column:1/-1;padding:3rem;text-align:center}.error-message button{background:rgba(255,68,68,.2);border:1px solid rgba(255,68,68,.4);border-radius:.5rem;color:#f44;cursor:pointer;margin-top:1rem;padding:.5rem 1rem;transition:all .3s ease}.error-message button:hover{background:rgba(255,68,68,.3)}.no-videos{color:hsla(0,0%,100%,.6);font-style:italic;grid-column:1/-1;padding:3rem;text-align:center}.video-modal{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.video-modal.hidden{display:none}.video-modal .modal-overlay{backdrop-filter:blur(5px);background:rgba(0,0,0,.8);height:100%;left:0;position:absolute;top:0;width:100%}.video-modal .modal-content{background:rgba(20,20,30,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:90vh;max-width:90vw;overflow:hidden;position:relative}@media(max-width:768px){.video-modal .modal-content{max-height:95vh;max-width:95vw}}.video-modal .modal-header{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;padding:1.5rem}.video-modal .modal-header h3{color:var(--text-primary);font-size:1.2rem;margin:0}.video-modal .modal-header .modal-close{align-items:center;background:none;border:none;border-radius:50%;color:hsla(0,0%,100%,.7);cursor:pointer;display:flex;font-size:1.5rem;height:2rem;justify-content:center;transition:all .3s ease;width:2rem}.video-modal .modal-header .modal-close:hover{background:hsla(0,0%,100%,.1);color:var(--text-primary)}.video-modal .modal-body{padding:1.5rem}.video-modal .modal-body video{background:#000;border-radius:.5rem;height:auto;margin-bottom:1rem;max-height:60vh;width:100%}.video-modal .modal-body .video-info{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.video-modal .modal-body .video-info .info-item{color:hsla(0,0%,100%,.8);font-size:.9rem}.video-modal .modal-body .video-info .info-item strong{color:var(--text-primary)}.pagination-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2rem;padding:1.5rem}@media(max-width:768px){.pagination-controls{gap:.25rem;padding:1rem}}.pagination-controls .pagination-btn{align-items:center;background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.15);border-radius:.375rem;color:hsla(0,0%,100%,.8);cursor:pointer;display:flex;font-size:.9rem;justify-content:center;min-width:2.5rem;padding:.5rem .75rem;transition:all .3s ease}@media(max-width:768px){.pagination-controls .pagination-btn{font-size:.8rem;min-width:2rem;padding:.4rem .6rem}}.pagination-controls .pagination-btn:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.25);color:var(--text-primary);transform:translateY(-1px)}.pagination-controls .pagination-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;font-weight:600}.pagination-controls .pagination-btn.active:hover{background:var(--accent-primary);transform:none}.pagination-controls .pagination-btn:disabled{cursor:not-allowed;opacity:.5}.pagination-controls .pagination-btn:disabled:hover{background:hsla(0,0%,100%,.08);transform:none}.pagination-controls .pagination-ellipsis{color:hsla(0,0%,100%,.5);font-size:.9rem;padding:.5rem .25rem}.pagination-controls .pagination-info{color:hsla(0,0%,100%,.7);font-size:.85rem;margin-left:1rem;white-space:nowrap}@media(max-width:768px){.pagination-controls .pagination-info{font-size:.8rem;margin-left:0;margin-top:.5rem;text-align:center;width:100%}}