:root{--bg-color:#0d0f17;--panel-bg:#191c2999;--glass-border:#ffffff14;--text-main:#fff;--text-muted:#a0a5b8;--accent-color:#6366f1;--accent-glow:#6366f180;--accent-gradient:linear-gradient(135deg, #6366f1, #a855f7, #ec4899);--font-family:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-family);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#6366f126,#0000 40%),radial-gradient(circle at 85% 30%,#ec489926,#0000 40%);flex-direction:column;min-height:100vh;display:flex}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}.text-gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:inline-block}.app-container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}.header{justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.5rem 2rem;display:flex}.header h1{letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.main-content{grid-template-columns:1fr 350px;align-items:start;gap:2rem;display:grid}@media (width<=1024px){.main-content{grid-template-columns:1fr}}.player-container{aspect-ratio:16/9;border:1px solid var(--glass-border);background:#000;border-radius:16px;width:100%;position:relative;overflow:hidden;box-shadow:0 0 40px #00000080}video{object-fit:cover;width:100%;height:100%}.video-info{margin-top:1.5rem;padding:1.5rem}.video-title{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.playlist{flex-direction:column;gap:1rem;max-height:calc(100vh - 100px);padding:1.5rem;display:flex;overflow-y:auto}.playlist-header{border-bottom:1px solid var(--glass-border);margin-bottom:1rem;padding-bottom:1rem;font-size:1.25rem;font-weight:600}.playlist-item{cursor:pointer;background:#ffffff08;border:1px solid #0000;border-radius:12px;align-items:center;gap:1rem;padding:.75rem 1rem;transition:all .3s;display:flex}.playlist-item:hover{border-color:var(--glass-border);background:#ffffff14;transform:translateY(-2px)}.playlist-item.active{border-color:var(--accent-glow);background:#6366f126}.playlist-item-icon{background:var(--accent-gradient);width:40px;height:40px;box-shadow:0 4px 12px var(--accent-glow);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.playlist-item-text{flex-direction:column;display:flex;overflow:hidden}.playlist-item-title{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:500;overflow:hidden}.playlist-item-meta{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.spinner{border:4px solid #ffffff1a;border-top-color:var(--accent-color);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-container{height:60vh;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}