:root{--bg-dark:#0f172a;--bg-card:#1e293b;--primary:#3b82f6;--primary-hover:#2563eb;--text-main:#f8fafc;--text-muted:#94a3b8;--danger:#ef4444}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);direction:rtl;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-container{flex-direction:column;min-height:100vh;display:flex}.header{background-color:var(--bg-card);border-bottom:1px solid #ffffff1a;padding:1rem 2rem;box-shadow:0 4px 6px -1px #0000001a}.logo{align-items:center;gap:1rem;display:flex}.logo-img{object-fit:contain;width:auto;height:36px}.logo h1{background:linear-gradient(270deg,#60a5fa,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.player-section{flex-direction:column;align-items:center;gap:1rem;display:flex}.player-container{aspect-ratio:16/9;background:#000;border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:1000px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px #00000080}.video-wrapper{width:100%;height:100%}.hidden-video{opacity:0;pointer-events:none;position:absolute}.video-player{object-fit:contain;width:100%;height:100%}.offline-overlay{width:100%;height:100%;color:var(--text-main);text-align:center;z-index:5;background-color:#0f172ae6;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;top:0;left:0}.offline-overlay h2{margin-bottom:.5rem;font-size:1.5rem}.offline-overlay p{color:var(--text-muted);font-size:1.1rem}.icon-offline{color:var(--text-muted)}.quality-selector-wrapper{z-index:20;position:absolute;bottom:20px;right:20px}.quality-btn{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background .3s;display:flex}.quality-btn:hover{background:#3b82f6cc}.quality-menu{background:#0f172af2;border-radius:8px;flex-direction:column;min-width:120px;margin-bottom:10px;padding:8px 0;display:flex;position:absolute;bottom:100%;right:0;box-shadow:0 4px 6px #0000004d}.quality-menu h4{color:var(--text-muted);border-bottom:1px solid #ffffff1a;margin-bottom:4px;padding:4px 12px;font-size:.8rem}.quality-menu button{color:#fff;text-align:right;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-family:inherit;transition:background .2s}.quality-menu button:hover{background:#ffffff1a}.quality-menu button.active{color:var(--primary);background:#3b82f61a;font-weight:700}.footer{background-color:var(--bg-card);text-align:center;color:var(--text-muted);border-top:1px solid #ffffff0d;flex-direction:column;gap:.5rem;margin-top:auto;padding:1.5rem;font-size:.95rem;display:flex}.footer a{color:var(--primary);font-weight:600;text-decoration:none;transition:color .2s}.footer a:hover{color:var(--primary-hover);text-decoration:underline}.icon-offline-large{color:var(--text-muted);opacity:.5}.spinner{border:4px solid #ffffff1a;border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.live-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;border-radius:9999px;align-items:center;gap:.5rem;padding:.25rem .75rem;font-size:.875rem;font-weight:700;transition:all .3s;display:flex;position:absolute;top:1rem;left:1rem}.live-badge.live{color:var(--danger);background-color:#000000b3}.live-badge.offline{color:var(--text-muted);background-color:#000000b3}.live-badge.loading{color:var(--primary);background-color:#000000b3}.dot{border-radius:50%;width:8px;height:8px}.live-badge.live .dot{background-color:var(--danger);animation:1.5s cubic-bezier(.4,0,.6,1) infinite pulse}.live-badge.offline .dot{background-color:var(--text-muted)}.live-badge.loading .dot{background-color:var(--primary);animation:1s ease-in-out infinite alternate pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}video::-webkit-media-controls-timeline{display:none!important}video::-webkit-media-controls-current-time-display{display:none!important}video::-webkit-media-controls-time-remaining-display{display:none!important}@media (width<=768px){.header{padding:1rem}.logo h1{font-size:1.25rem}.main-content{padding:1rem}.footer{padding:1rem;font-size:.85rem}.quality-selector-wrapper{bottom:10px;right:10px}.quality-btn{padding:6px}.live-badge{padding:.2rem .5rem;font-size:.75rem;top:.5rem;left:.5rem}}