:root{--sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));--saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));--sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));--breakpoint-mobile: 640px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px;--breakpoint-wide: 1280px;--color-primary: #7c3aed;--color-secondary: #3b82f6;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #06b6d4;--color-text-primary: #e2e8f0;--color-text-secondary: #94a3b8;--color-text-tertiary: #64748b;--color-text-muted: #475569;--color-bg-primary: #1e1e2e;--color-bg-secondary: #2a2a3e;--color-bg-tertiary: #1a1a2e;--color-bg-glass: rgba(42, 42, 62, .95);--color-bg-glass-hover: rgba(52, 52, 72, .95);--color-bg-glass-subtle: rgba(30, 30, 46, .9);--color-bg-glass-strong: rgba(42, 42, 62, .98);--color-border-primary: rgba(255, 255, 255, .2);--color-border-secondary: rgba(255, 255, 255, .1);--color-border-tertiary: rgba(255, 255, 255, .05);--color-border-accent: var(--color-primary);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 30px;--spacing-4xl: 40px;--spacing-5xl: 48px;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 50%;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);--shadow-md: 0 8px 32px rgba(0, 0, 0, .3);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 64px rgba(0, 0, 0, .5);--shadow-glow: 0 4px 15px rgba(124, 58, 237, .3);--shadow-glow-hover: 0 6px 20px rgba(124, 58, 237, .4);--shadow-glow-focus: 0 0 0 3px rgba(124, 58, 237, .1);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--transition-bounce: .3s cubic-bezier(.68, -.55, .265, 1.55);--blur-xs: blur(4px);--blur-sm: blur(8px);--blur-md: blur(16px);--blur-lg: blur(24px);--blur-xl: blur(32px);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}ul[class],ol[class]{list-style:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 50%,var(--color-bg-tertiary) 100%);color:var(--color-text-primary);overflow-x:hidden;overflow-y:auto;min-height:100vh;line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}button{background:none;border:none;font:inherit;cursor:pointer}input,textarea,select{font:inherit;color:inherit}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}a:not([class]){text-decoration-skip-ink:auto;color:var(--color-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-glass-subtle);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--color-bg-glass);border-radius:var(--radius-sm);border:1px solid var(--color-border-tertiary)}::-webkit-scrollbar-thumb:hover{background:var(--color-bg-glass-hover)}*{scrollbar-width:thin;scrollbar-color:var(--color-bg-glass) var(--color-bg-glass-subtle)}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);line-height:var(--line-height-tight);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-base)}h6{font-size:var(--font-size-sm)}p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-md)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-info{color:var(--color-info)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.gradient-text{background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:var(--font-weight-bold)}.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-clamp-1{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.text-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.text-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}body{padding-left:var(--sail);padding-right:var(--sair);padding-top:var(--sait);padding-bottom:var(--saib);box-sizing:border-box}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-xl);min-height:100vh;padding-left:max(var(--spacing-xl),var(--sail));padding-right:max(var(--spacing-xl),var(--sair));padding-top:max(var(--spacing-xl),var(--sait));padding-bottom:max(var(--spacing-xl),var(--saib));box-sizing:border-box}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.gap-2xl{gap:var(--spacing-2xl)}.gap-3xl{gap:var(--spacing-3xl)}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);margin-bottom:var(--spacing-3xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.hidden{display:none!important}.h-full{height:100%}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.logo-emoji{font-size:2rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-3xl);padding:var(--spacing-xl) 0;border-bottom:1px solid var(--color-border-secondary)}.logo{display:flex;align-items:center;gap:var(--spacing-md)}.logo h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:var(--font-weight-bold);margin-bottom:0}.discord-user{display:flex;align-items:center;gap:var(--spacing-md);background:#2a2a3ef2;padding:10px var(--spacing-lg);border-radius:25px;border:1px solid var(--color-border-primary);transition:all var(--transition-normal)}.discord-user:hover{background:#343448f2;transform:translateY(-1px)}.discord-avatar{width:clamp(32px,5vw,48px);height:clamp(32px,5vw,48px);border-radius:var(--radius-full);border:2px solid var(--color-primary);object-fit:cover;transition:all var(--transition-normal)}.discord-avatar:hover{border-color:var(--color-secondary);transform:scale(1.05)}.discord-name{font-weight:var(--font-weight-semibold);font-size:clamp(.875rem,2.5vw,1rem);color:var(--color-text-primary)}.header-right{display:flex;align-items:center;gap:var(--spacing-xl)}.session-users{display:flex;align-items:center;gap:var(--spacing-md);background:#2a2a3ef2;padding:10px var(--spacing-lg);border-radius:25px;border:1px solid var(--color-border-primary);transition:all var(--transition-normal);position:relative;min-width:80px}.session-users:hover{background:#343448f2;transform:translateY(-1px)}.session-users-header{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.users-icon{font-size:1.25rem}.users-count{font-weight:var(--font-weight-semibold);font-size:.875rem;color:var(--color-text-primary);background:var(--color-primary);color:#fff;padding:4px 8px;border-radius:var(--radius-full);min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;line-height:1}.users-list{position:absolute;top:100%;right:0;left:0;min-width:240px;background:#2a2a3efa;border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-top:var(--spacing-sm);max-height:300px;overflow-y:auto;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-normal)}.users-list::-webkit-scrollbar{width:6px}.users-list::-webkit-scrollbar-track{background:var(--color-bg-glass-subtle);border-radius:var(--radius-sm)}.users-list::-webkit-scrollbar-thumb{background:var(--color-bg-glass);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.users-list::-webkit-scrollbar-thumb:hover{background:var(--color-bg-glass-hover)}.session-users:hover .users-list,.users-list:hover{opacity:1;visibility:visible;transform:translateY(0)}.user-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);min-height:56px;transition:background-color var(--transition-fast);border-bottom:1px solid var(--color-border-secondary);cursor:default}.user-item:last-child{border-bottom:none}.user-item:hover{background:var(--color-bg-glass)}.user-item:hover .user-avatar{border-color:var(--color-primary);transform:scale(1.05)}.user-item.current-user{background:var(--color-bg-glass);border-left:3px solid var(--color-primary);font-weight:var(--font-weight-semibold)}.user-item.current-user .user-status{background:var(--color-primary);color:#fff}.user-avatar{width:36px;height:36px;border-radius:var(--radius-full);border:2px solid var(--color-border-primary);object-fit:cover;flex-shrink:0;transition:all var(--transition-fast)}.user-name{font-size:.95rem;color:var(--color-text-primary);font-weight:var(--font-weight-medium);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-height-normal)}.user-status{font-size:.8rem;color:var(--color-text-secondary);padding:3px 8px;border-radius:var(--radius-sm);background:var(--color-bg-glass);flex-shrink:0;font-weight:var(--font-weight-medium);line-height:1}.session-users.user-joined{animation:userJoined .6s ease-out}.session-users.user-left{animation:userLeft .6s ease-out}@keyframes userJoined{0%{transform:scale(1);background:var(--color-bg-glass)}50%{transform:scale(1.05);background:var(--color-success-bg)}to{transform:scale(1);background:var(--color-bg-glass)}}@keyframes userLeft{0%{transform:scale(1);background:var(--color-bg-glass)}50%{transform:scale(.95);background:var(--color-warning-bg)}to{transform:scale(1);background:var(--color-bg-glass)}}@media (max-width: 768px){.header-right{gap:var(--spacing-md)}.session-users,.discord-user{padding:8px var(--spacing-md)}.users-count{font-size:.75rem;padding:1px 6px}.user-item{padding:var(--spacing-md);min-height:48px}.user-avatar{width:28px;height:28px}.user-name{font-size:.85rem}.user-status{font-size:.75rem;padding:2px 6px}.users-list{min-width:220px}}@media (max-width: 480px){.header{flex-direction:column;gap:var(--spacing-md);text-align:center}.header-right{justify-content:center}.users-list{right:auto;left:50%;transform:translate(-50%) translateY(-10px);width:200px;min-width:200px}.users-list:hover,.session-users:hover .users-list{transform:translate(-50%) translateY(0)}.user-item{padding:var(--spacing-sm) var(--spacing-md);min-height:44px}.user-avatar{width:24px;height:24px}.user-name{font-size:.8rem}.user-status{font-size:.7rem;padding:1px 4px}}.connection-status{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-glass-subtle);border-radius:var(--radius-md);border:1px solid var(--color-border-secondary);transition:all var(--transition-normal)}.connection-status:hover{background:var(--color-bg-glass)}.status-indicator{width:var(--spacing-md);height:var(--spacing-md);border-radius:var(--radius-full);background:var(--color-success);position:relative}.status-indicator:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background:inherit;opacity:.6}.status-indicator.connecting{background:var(--color-warning);animation:pulse 2s infinite}.status-indicator.connecting:after{animation:ping 2s infinite}.status-indicator.disconnected{background:var(--color-error);animation:none}.status-indicator.disconnected:after{animation:none}#connectionText{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.music-player{background:#2a2a3ef2;border-radius:var(--radius-xl);padding:var(--spacing-3xl);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-md);transition:transform var(--transition-normal),box-shadow var(--transition-normal);display:flex;flex-direction:column;gap:var(--spacing-xl)}.music-player>.now-playing{order:1}.music-player>.progress-container{order:2}.music-player>.controls{order:3}.music-player:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.now-playing{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:0;text-align:left}.track-thumbnail{position:relative;width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;background:#2a2a3ef2;border:1px solid var(--color-border-primary);flex-shrink:0;box-shadow:0 8px 32px #0000004d}.thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:24px;color:var(--color-text-secondary);background:var(--color-bg-tertiary)}.track-thumbnail img{width:100%;height:100%;object-fit:cover}.track-info{flex:1;min-width:0}.track-info h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm);color:var(--color-text-primary);font-weight:var(--font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info p{color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-container{width:100%;margin:0;order:2}.progress-bar{width:100%;height:6px;background:var(--color-border-primary);border-radius:3px;overflow:hidden;cursor:pointer;position:relative;transition:height .2s ease-out,transform .2s ease-out;margin-bottom:var(--spacing-sm);will-change:height,transform;-webkit-user-select:none;user-select:none}.progress-bar:hover{height:8px;transform:scaleY(1.15)}.progress-bar:active{transform:scaleY(1.2)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));width:0%;position:relative;transition:none;will-change:width;box-shadow:0 0 8px rgba(var(--color-primary-rgb, 64, 224, 208),.3);transform:translateZ(0);border-radius:inherit}.progress-fill.seeking{transition:width .25s cubic-bezier(.25,.1,.25,1)}.progress-fill:after{content:"";position:absolute;top:-2px;right:-6px;width:12px;height:calc(100% + 4px);background:#fffffff2;border-radius:50%;opacity:0;transition:opacity .15s ease-out,transform .15s ease-out;box-shadow:0 2px 6px #0000004d;transform:translateZ(0) scale(.8)}.progress-bar:hover .progress-fill:after{opacity:1;transform:translateZ(0) scale(1)}.progress-bar:hover .progress-fill{box-shadow:0 0 12px rgba(var(--color-primary-rgb, 64, 224, 208),.5)}@keyframes progressPulse{0%{box-shadow:0 0 8px rgba(var(--color-primary-rgb, 64, 224, 208),.3)}50%{box-shadow:0 0 12px rgba(var(--color-primary-rgb, 64, 224, 208),.4)}to{box-shadow:0 0 8px rgba(var(--color-primary-rgb, 64, 224, 208),.3)}}.progress-fill.playing{animation:progressPulse 2s ease-in-out infinite}.progress-time{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);position:relative}.progress-time span:first-child{text-align:left}.progress-time span:last-child{text-align:right}.controls{display:flex;justify-content:center;align-items:center;gap:var(--spacing-lg);margin-top:0;order:3;width:100%}.volume-control{position:relative;display:flex;align-items:center}.volume-slider{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#2a2a3efa;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--spacing-lg) var(--spacing-md);margin-bottom:var(--spacing-sm);opacity:0;visibility:hidden;transition:all var(--transition-normal);pointer-events:none;z-index:10;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);min-width:140px}.volume-range{width:100px;height:4px;background:var(--color-border-secondary);border-radius:var(--radius-sm);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:relative;transition:background var(--transition-fast);margin-bottom:var(--spacing-md)}.volume-range{background:linear-gradient(to right,var(--color-primary) 0%,var(--color-primary) var(--volume-percentage, 50%),var(--color-border-secondary) var(--volume-percentage, 50%),var(--color-border-secondary) 100%)}.volume-controls-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-md);margin-top:var(--spacing-xs)}.volume-percentage-input{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);min-width:40px;width:50px;text-align:center;background:var(--color-background-tertiary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-sm);padding:2px 4px;transition:all var(--transition-fast);font-family:inherit}.volume-percentage-input:focus{outline:none;border-color:var(--color-primary);background:var(--color-background-secondary);color:var(--color-text-primary)}.volume-percentage-input:hover{border-color:var(--color-primary-muted)}.volume-percentage-input::-webkit-outer-spin-button,.volume-percentage-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.volume-percentage-input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.volume-input-group{display:flex;align-items:center;gap:2px}.volume-step-buttons{display:flex;flex-direction:column;gap:1px}.volume-step-btn{background:var(--color-background-tertiary);border:1px solid var(--color-border-secondary);color:var(--color-text-secondary);cursor:pointer;padding:1px 3px;border-radius:2px;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:16px;height:12px;font-size:10px;line-height:1}.volume-step-btn:hover{background:var(--color-background-secondary);border-color:var(--color-primary-muted);color:var(--color-text-primary)}.volume-step-btn:active{background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-text-primary);transform:scale(.95)}.volume-step-btn svg{width:10px;height:10px;fill:currentColor}.volume-reset-btn{background:var(--color-background-tertiary);border:1px solid var(--color-border-secondary);color:var(--color-text-secondary);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.volume-reset-btn:hover{background:var(--color-background-secondary);border-color:var(--color-primary-muted);color:var(--color-text-primary);transform:scale(1.05)}.volume-reset-btn:active{background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-text-primary);transform:scale(.95)}.volume-reset-btn svg{width:14px;height:14px;fill:currentColor}.volume-control:hover .volume-slider,.volume-slider:hover,.volume-control.show-slider .volume-slider{opacity:1;visibility:visible;pointer-events:all;transform:translate(-50%) translateY(-5px)}.volume-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 0 0 2px #7c3aed4d}.volume-range::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px #7c3aed66}.volume-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:all var(--transition-fast)}.volume-range::-moz-range-track{height:4px;background:var(--color-border-secondary);border-radius:var(--radius-sm);border:none}@media (max-width: 640px){.music-player{padding:var(--spacing-lg);gap:var(--spacing-md)}.now-playing{flex-direction:column;text-align:center;gap:var(--spacing-md)}.track-info h3{font-size:var(--font-size-lg);white-space:normal;text-align:center}.track-info p{white-space:normal;text-align:center}.track-thumbnail{flex-shrink:0}}@media (max-width: 480px){.music-player{padding:var(--spacing-md);margin:0 calc(-1 * var(--spacing-md));border-radius:var(--radius-md)}.now-playing{gap:var(--spacing-sm)}.track-info h3{font-size:var(--font-size-base);line-height:var(--line-height-tight)}.track-info p{font-size:var(--font-size-xs)}}@media (orientation: landscape) and (max-height: 500px){.music-player{padding:var(--spacing-md)}.now-playing{flex-direction:row;text-align:left;gap:var(--spacing-sm)}.track-info h3{font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}.track-info p{margin-bottom:var(--spacing-xs)}}.add-track-section{background:#2a2a3ef2;border-radius:var(--radius-xl);padding:var(--spacing-3xl);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-md);transition:all var(--transition-normal);margin-top:var(--spacing-3xl)}.add-track-section:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.add-track-section h2{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin-bottom:var(--spacing-xl);font-weight:var(--font-weight-bold);text-align:center}.add-track-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.add-track-header h2{margin-bottom:0;text-align:left}.supported-platforms{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}.platforms-label{font-weight:var(--font-weight-medium);color:var(--color-text-tertiary)}.platform-icons{display:flex;gap:var(--spacing-xs);align-items:center}.platform-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:help;position:relative;border:1px solid transparent}.platform-icon svg{width:16px;height:16px;transition:transform var(--transition-fast)}.platform-icon:hover{transform:scale(1.1);box-shadow:0 2px 8px #00000026}.platform-icon:hover svg{transform:scale(1.1)}.platform-icon.youtube{background:#ff00001a;color:red}.platform-icon.youtube:hover{background:#ff000026;border-color:#ff00004d}.platform-icon.spotify{background:#1ed7601a;color:#1ed760}.platform-icon.spotify:hover{background:#1ed76026;border-color:#1ed7604d}.platform-icon.soundcloud{background:#ff55001a;color:#f50}.platform-icon.soundcloud:hover{background:#ff550026;border-color:#ff55004d}.platform-icon.search{background:#3b82f61a;color:#3b82f6}.platform-icon.search:hover{background:#3b82f626;border-color:#3b82f64d}.platform-logos{display:flex;gap:var(--spacing-md);align-items:center}.platform-logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast);cursor:help}.platform-logo.supported{background:var(--color-bg-tertiary);border-color:var(--color-primary)}.platform-logo.supported svg{opacity:1}.platform-logo.unsupported{background:var(--color-bg-secondary);border-color:var(--color-border-secondary);color:var(--color-text-disabled)}.platform-logo.unsupported svg{opacity:.4;filter:grayscale(100%)}.platform-logo:hover{transform:scale(1.05);box-shadow:var(--shadow-sm)}.platform-logo.supported:hover{border-color:var(--color-primary);box-shadow:0 0 0 2px #7c3aed33}.platform-logo.unsupported:hover{background:var(--color-bg-tertiary)}.add-track-form{display:flex;gap:var(--spacing-lg);align-items:stretch}.url-input{flex:1;background:#1e1e2ee6;border:1px solid var(--color-border-secondary);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);transition:all var(--transition-normal);outline:none}.url-input::placeholder{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.url-input:focus{background:#2a2a3ef2;border-color:var(--color-primary);box-shadow:var(--shadow-glow-focus);transform:translateY(-1px)}.url-input:hover{background:#2a2a3ee6;border-color:var(--color-border-primary)}.control-btn{background:var(--color-bg-glass);border:1px solid var(--color-border-primary);color:#fff;width:50px;height:50px;min-width:50px;min-height:50px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all var(--transition-normal);position:relative;overflow:hidden;flex-shrink:0}.control-btn:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));opacity:0;transition:opacity var(--transition-normal);border-radius:inherit}.control-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-glow)}.control-btn:hover:before{opacity:.1}.control-btn:active{transform:scale(.95)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.control-btn:disabled:hover:before{opacity:0}.control-btn.play-pause{width:60px;height:60px;min-width:60px;min-height:60px;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));font-size:1.5rem;box-shadow:var(--shadow-glow);border:none}.control-btn.play-pause:before{display:none}.control-btn.play-pause:hover{box-shadow:var(--shadow-glow-hover);transform:scale(1.05)}.control-btn.active{background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:var(--shadow-glow)}.control-btn.active:before{display:none}.control-btn svg{width:20px;height:20px;fill:currentColor;position:relative;z-index:1;transition:transform var(--transition-fast)}.control-btn.play-pause svg{width:24px;height:24px}.control-btn:hover svg{transform:scale(1.1)}.add-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;box-shadow:var(--shadow-glow);position:relative;overflow:hidden}.add-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-slow)}.add-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-hover)}.add-btn:hover:before{left:100%}.add-btn:active{transform:translateY(0);box-shadow:0 2px 10px #7c3aed4d}.add-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.add-btn svg{width:20px;height:20px;fill:currentColor;position:relative;z-index:1}.remove-btn{width:var(--spacing-2xl);height:var(--spacing-2xl);background:#ef444433;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-full);color:var(--color-error);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:all var(--transition-fast);opacity:0;margin-left:var(--spacing-sm);position:relative}.remove-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ef44441a;border-radius:var(--radius-full);transition:all var(--transition-fast);transform:translate(-50%,-50%)}.queue-item:hover .remove-btn{opacity:1}.remove-btn:hover{background:#ef444466;transform:scale(1.1)}.remove-btn:hover:before{width:150%;height:150%}@media (max-width: 640px){.add-track-section{padding:var(--spacing-lg);margin-top:var(--spacing-xl)}.add-track-header{flex-direction:column;gap:var(--spacing-md);text-align:center}.add-track-header h2{text-align:center;font-size:var(--font-size-xl)}.platform-logos{justify-content:center}.platform-logo{width:28px;height:28px}.add-track-form{flex-direction:column;gap:var(--spacing-md)}.url-input{font-size:16px}.add-btn{width:100%;justify-content:center;padding:var(--spacing-md) var(--spacing-lg)}.add-btn span{display:inline}.controls{gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.control-btn{width:44px;height:44px;min-width:44px;min-height:44px;font-size:1rem}.control-btn.play-pause{width:56px;height:56px;min-width:56px;min-height:56px;font-size:1.4rem}.progress-container{order:-1;width:100%;margin-bottom:var(--spacing-md)}.progress-time{font-size:var(--font-size-xs)}}@media (max-width: 480px){.add-track-section{padding:var(--spacing-md);margin:var(--spacing-lg) calc(-1 * var(--spacing-md)) 0;border-radius:var(--radius-md)}.add-track-header h2{font-size:var(--font-size-lg)}.platform-logo{width:24px;height:24px}.platform-logos,.add-track-form{gap:var(--spacing-sm)}.url-input{padding:var(--spacing-md)}.add-btn{padding:var(--spacing-md);font-size:var(--font-size-sm)}.control-btn{width:40px;height:40px;min-width:40px;min-height:40px;font-size:.875rem}.control-btn.play-pause{width:50px;height:50px;min-width:50px;min-height:50px;font-size:1.25rem}.volume-control{display:none}}@media (orientation: landscape) and (max-height: 500px){.add-track-section{padding:var(--spacing-md);margin-top:var(--spacing-md)}.add-track-header{flex-direction:row;margin-bottom:var(--spacing-md)}.add-track-header h2{font-size:var(--font-size-base);text-align:left}.add-track-form{flex-direction:row;gap:var(--spacing-sm)}.url-input{flex:1}.add-btn{width:auto;white-space:nowrap}.controls{gap:var(--spacing-xs)}.control-btn{width:36px;height:36px;min-width:36px;min-height:36px;font-size:.75rem}.control-btn.play-pause{width:44px;height:44px;min-width:44px;min-height:44px;font-size:1.1rem}}@media (min-width: 641px) and (max-width: 1024px){.control-btn{width:48px;height:48px;min-width:48px;min-height:48px}.control-btn.play-pause{width:64px;height:64px;min-width:64px;min-height:64px}}.queue-section{background:#2a2a3ef2;border-radius:var(--radius-xl);padding:var(--spacing-3xl);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.queue-section:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border-tertiary)}.queue-header h2{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin-bottom:0;font-weight:var(--font-weight-bold)}.queue-count{background:#7c3aed4d;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:#c4b5fd;font-weight:var(--font-weight-medium);border:1px solid rgba(124,58,237,.4)}.queue-list{max-height:400px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;padding-right:var(--spacing-xs)}.queue-item{display:flex;align-items:center;padding:var(--spacing-md);margin-bottom:var(--spacing-sm);background:var(--color-bg-glass-subtle);border-radius:var(--radius-md);border:1px solid var(--color-border-secondary);transition:all var(--transition-normal);cursor:pointer;position:relative;overflow:hidden}.queue-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(124,58,237,.1),transparent);transition:left var(--transition-slow)}.queue-item:hover{background:var(--color-bg-glass);transform:translate(3px);border-color:var(--color-border-primary)}.queue-item:hover:before{left:100%}.queue-item.current,.queue-item.playing{background:#7c3aed33;border-color:var(--color-primary);box-shadow:0 0 0 1px #7c3aed4d}.queue-item.current:after,.queue-item.playing:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--color-primary),var(--color-secondary));border-radius:0 var(--radius-sm) var(--radius-sm) 0}.queue-item-progress{position:absolute;bottom:0;left:0;right:0;background:var(--color-bg-glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;border-top:1px solid var(--color-border-tertiary)}.queue-item-progress .download-progress{background:transparent;border:none;border-radius:0;margin-bottom:0;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs)}.queue-item-progress .download-progress:before{display:none}.queue-item-progress .download-progress-header{margin-bottom:var(--spacing-xs);gap:var(--spacing-sm)}.queue-item-progress .download-progress-title{font-size:var(--font-size-xs);opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.queue-item-progress .download-progress-status{font-size:var(--font-size-xs);opacity:.9}.queue-item-progress .download-progress-bar-container{height:4px;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.queue-item-progress .download-progress-bar{height:4px;border-radius:var(--radius-xs);background:var(--color-border-secondary)}.queue-item-progress .download-progress-fill{height:4px;border-radius:var(--radius-xs)}.queue-item-progress .download-progress-percentage{font-size:var(--font-size-xs);min-width:35px}.queue-item-progress .download-progress-details{font-size:var(--font-size-xs);gap:var(--spacing-sm);margin-top:0;opacity:.8}.queue-item-progress .download-progress-bar{height:6px;border-radius:3px}.queue-item-progress .download-progress-details{font-size:.7em;margin-top:2px}.queue-thumbnail{width:50px;height:50px;border-radius:var(--radius-sm);object-fit:cover;margin-right:var(--spacing-md);transition:all var(--transition-normal);position:relative}.queue-thumbnail:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0003;border-radius:inherit;opacity:0;transition:opacity var(--transition-normal)}.queue-item:hover .queue-thumbnail:after{opacity:1}.queue-item.playing .queue-thumbnail:after{background:#7c3aed4d;opacity:1}.queue-info{flex:1;min-width:0;position:relative;z-index:1}.queue-info h4{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-info p{color:var(--color-text-secondary);font-size:var(--font-size-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;font-weight:var(--font-weight-medium)}.queue-info .duration{color:var(--color-text-tertiary);font-size:var(--font-size-xs);font-weight:var(--font-weight-normal)}.queue-user{display:flex;align-items:center;margin-left:var(--spacing-sm);margin-right:var(--spacing-sm)}.user-avatar{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.2);transition:all var(--transition-normal);cursor:pointer}.user-avatar:hover{border-color:var(--color-primary);transform:scale(1.1);box-shadow:0 0 8px #7c3aed4d}.queue-item:hover .user-avatar{border-color:#fff6}.remove-btn{background:none;border:none;color:#ffffff80;font-size:var(--font-size-lg);font-weight:700;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:var(--spacing-xs)}.remove-btn:hover{background:#ef4444cc;color:#fff;transform:scale(1.1)}.remove-btn:active{transform:scale(.95)}.empty-queue{text-align:center;padding:var(--spacing-xl) var(--spacing-xl);color:var(--color-text-secondary)}.empty-queue-icon{font-size:2rem;margin-bottom:var(--spacing-md);opacity:.7;animation:float 3s ease-in-out infinite}.empty-queue h3{color:var(--color-text-primary);margin-bottom:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.empty-queue p{margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}@media (max-width: 640px){.queue-section{padding:var(--spacing-lg)}.queue-header{flex-direction:column;text-align:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.queue-header h2{font-size:var(--font-size-xl)}.queue-count{align-self:center}.queue-list{max-height:250px}.queue-item{padding:var(--spacing-md);gap:var(--spacing-sm)}.queue-item-info h4{font-size:var(--font-size-sm);line-height:var(--line-height-tight)}.queue-item-info p{font-size:var(--font-size-xs)}.queue-item-actions{gap:var(--spacing-xs)}.queue-item-actions .control-btn{width:32px;height:32px;font-size:.75rem}.queue-item-thumbnail{width:40px;height:40px;min-width:40px;min-height:40px}.queue-item-duration{font-size:var(--font-size-xs)}}@media (max-width: 480px){.queue-section{padding:var(--spacing-md);margin:var(--spacing-lg) calc(-1 * var(--spacing-md)) 0;border-radius:var(--radius-md)}.queue-header h2{font-size:var(--font-size-lg)}.queue-list{max-height:200px}.queue-item{padding:var(--spacing-sm);border-radius:var(--radius-sm)}.queue-item-info h4{font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}.queue-item-info p{font-size:.6875rem}.queue-item-thumbnail{width:36px;height:36px;min-width:36px;min-height:36px}.queue-item-actions .control-btn{width:28px;height:28px;font-size:.625rem}.queue-item-duration{display:none}}@media (orientation: landscape) and (max-height: 500px){.queue-section{padding:var(--spacing-md)}.queue-header{flex-direction:row;text-align:left;margin-bottom:var(--spacing-md)}.queue-header h2{font-size:var(--font-size-base)}.queue-list{max-height:150px}.queue-item{padding:var(--spacing-xs) var(--spacing-sm)}.queue-item-info h4{font-size:var(--font-size-xs);line-height:1.2}.queue-item-info p{font-size:.625rem}.queue-item-thumbnail{width:32px;height:32px;min-width:32px;min-height:32px}}@media (min-width: 641px) and (max-width: 1024px){.queue-section{padding:var(--spacing-2xl)}.queue-list{max-height:350px}.queue-item-actions .control-btn{width:36px;height:36px;font-size:.875rem}}.queue-status{display:flex;align-items:center;gap:var(--spacing-xs);margin-left:auto;margin-right:var(--spacing-sm)}.track-status{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:var(--font-weight-medium);transition:all var(--transition-normal)}.track-status.processing{background:#f9731633;border:1px solid rgba(249,115,22,.4);animation:pulse 2s infinite}.track-status.downloading{background:#3b82f633;border:1px solid rgba(59,130,246,.4);animation:bounce 1s infinite}.track-status.ready{background:#22c55e33;border:1px solid rgba(34,197,94,.4)}.track-status.failed{background:#ef444433;border:1px solid rgba(239,68,68,.4)}.queue-item.track-not-ready{opacity:.6;cursor:not-allowed;background:#3741514d}.queue-item.track-not-ready:hover{transform:none;background:#37415166}.queue-item.track-processing{border-left:3px solid rgba(249,115,22,.6)}.queue-item.track-downloading{border-left:3px solid rgba(59,130,246,.6)}.queue-item.track-ready{border-left:3px solid rgba(34,197,94,.6)}.queue-item.track-failed{border-left:3px solid rgba(239,68,68,.6)}.queue-item.click-prevented{animation:shake .5s ease-in-out;border-color:#ef444499}.original-track-info{display:flex;align-items:center}.platform-badge{font-size:14px;opacity:.7}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-1px)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@media (max-width: 640px){.track-status{width:20px;height:20px;font-size:10px}.queue-status{gap:var(--spacing-xs)}.platform-badge{font-size:12px}}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0ff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.loading-overlay.visible{opacity:1;visibility:visible}.loading-content{text-align:center;color:var(--text-primary);max-width:400px;padding:2rem}.loading-spinner{margin-bottom:2rem}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.loading-text h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:600;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading-text p{margin:0;color:var(--text-secondary);font-size:1rem;opacity:.9}.btn-loading{position:relative;color:transparent!important;pointer-events:none}.btn-loading:before{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top:2px solid var(--text-primary);border-radius:50%;animation:spin .8s linear infinite}button:disabled,input:disabled{opacity:.5!important;cursor:not-allowed!important;pointer-events:none}button:disabled:hover,input:disabled:hover{transform:none!important;box-shadow:none!important}.download-progress{background:var(--color-bg-glass-subtle);border:1px solid var(--color-border-secondary);border-radius:var(--radius-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);transition:all var(--transition-normal);position:relative;overflow:hidden}.download-progress:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);animation:shimmer 2s infinite;opacity:.6}.download-progress--starting{border-color:var(--color-info);background:#06b6d40d}.download-progress--downloading{border-color:var(--color-success);background:#22c55e0d}.download-progress--converting{border-color:var(--color-warning);background:#f59e0b0d}.download-progress--completed{border-color:var(--color-success);background:#22c55e1a}.download-progress--failed{border-color:var(--color-error);background:#ef44440d}.download-progress-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm);gap:var(--spacing-md)}.download-progress-title{font-weight:var(--font-weight-medium);color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--font-size-sm)}.download-progress-status{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);white-space:nowrap;text-transform:capitalize;opacity:.9}.download-progress--starting .download-progress-status{color:var(--color-info)}.download-progress--downloading .download-progress-status{color:var(--color-success)}.download-progress--converting .download-progress-status{color:var(--color-warning)}.download-progress--completed .download-progress-status{color:var(--color-success)}.download-progress--failed .download-progress-status{color:var(--color-error)}.download-progress-bar-container{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xs)}.download-progress-bar{flex:1;height:6px;background:var(--color-border-secondary);border-radius:var(--radius-xs);overflow:hidden;position:relative}.download-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-xs);transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.download-progress--starting .download-progress-fill{background:linear-gradient(90deg,var(--color-info),#38bdf8)}.download-progress--downloading .download-progress-fill{background:linear-gradient(90deg,var(--color-success),#4ade80)}.download-progress--converting .download-progress-fill{background:linear-gradient(90deg,var(--color-warning),#fbbf24)}.download-progress--completed .download-progress-fill{background:linear-gradient(90deg,var(--color-success),#10b981)}.download-progress--failed .download-progress-fill{background:linear-gradient(90deg,var(--color-error),#f87171)}.download-progress-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progress-shimmer 2s infinite}.download-progress-percentage{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);min-width:40px;text-align:right;opacity:.9}.download-progress-details{font-size:var(--font-size-xs);color:var(--color-text-tertiary);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-xs);opacity:.8}.download-speed{color:var(--color-success);font-weight:var(--font-weight-medium)}.download-eta{color:var(--color-warning);font-weight:var(--font-weight-medium)}.download-error{color:var(--color-error);font-weight:var(--font-weight-medium)}@keyframes shimmer{0%{left:-100%;opacity:0}50%{opacity:1}to{left:100%;opacity:0}}@keyframes progress-shimmer{0%{left:-100%}to{left:100%}}@media (max-width: 768px){.download-progress{padding:var(--spacing-sm);font-size:var(--font-size-xs)}.download-progress-header{flex-direction:column;gap:var(--spacing-xs);align-items:flex-start}.download-progress-title{font-size:var(--font-size-xs)}.download-progress-status{font-size:var(--font-size-xs);align-self:flex-end}.download-progress-bar-container{gap:var(--spacing-sm)}.download-progress-percentage{min-width:30px;font-size:var(--font-size-xs)}.download-progress-details{font-size:var(--font-size-xs);justify-content:center}.queue-item-progress .download-progress{padding:var(--spacing-xs) var(--spacing-sm)}.queue-item-progress .download-progress-title{max-width:150px}.queue-item-progress .download-progress-details{justify-content:flex-start;overflow:hidden}}@media (max-width: 480px){.download-progress-details{flex-direction:column;gap:var(--spacing-xs)}.queue-item-progress .download-progress-details{display:none}.queue-item-progress .download-progress-title{max-width:120px}}.download-progress:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}.download-progress--downloading .download-progress-fill,.download-progress--converting .download-progress-fill{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.download-progress--completed .download-progress-fill{animation:success-glow .6s ease-out}@keyframes success-glow{0%{box-shadow:0 0 0 0 var(--color-success)}70%{box-shadow:0 0 0 4px #22c55e4d}to{box-shadow:0 0 #22c55e00}}.download-progress--failed{animation:error-shake .5s ease-in-out}@keyframes error-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fadeIn{animation:fadeIn var(--transition-normal) ease-out}.animate-spin{animation:spin 1s linear infinite}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.animate-slideIn{animation:slideIn var(--transition-normal) ease-out}.animate-slideOut{animation:slideOut var(--transition-normal) ease-in}.transition-all{transition:all var(--transition-normal)}.transition-colors{transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast)}.transition-transform{transition:transform var(--transition-fast)}.transition-opacity{transition:opacity var(--transition-fast)}.safe-area-inset{padding-left:var(--sail);padding-right:var(--sair);padding-top:var(--sait);padding-bottom:var(--saib)}.safe-area-inset-x{padding-left:var(--sail);padding-right:var(--sair)}.safe-area-inset-y{padding-top:var(--sait);padding-bottom:var(--saib)}@media (max-width: 480px){.container{padding:var(--spacing-md);padding-left:max(var(--spacing-md),var(--sail));padding-right:max(var(--spacing-md),var(--sair))}.header{flex-direction:column;gap:var(--spacing-md);text-align:center}.logo h1{font-size:var(--font-size-xl)}.session-users{order:-1}.music-player,.queue-section,.add-track-section{padding:var(--spacing-md)}.add-track-form{flex-direction:column;gap:var(--spacing-sm)}.url-input{width:100%;font-size:16px}.add-btn{width:100%;justify-content:center;padding:var(--spacing-md) var(--spacing-lg)}.controls{gap:var(--spacing-sm);justify-content:center}.control-btn{width:40px;height:40px;font-size:.875rem}.control-btn.play-pause{width:50px;height:50px;font-size:1.25rem}.hide-xs{display:none!important}.show-xs{display:block!important}}@media (min-width: 481px) and (max-width: 640px){.container{padding:var(--spacing-lg)}.main-content{gap:var(--spacing-lg)}.controls{gap:var(--spacing-md)}.control-btn{width:42px;height:42px}.control-btn.play-pause{width:52px;height:52px}}@media (min-width: 641px) and (max-width: 768px){.main-content{grid-template-columns:1fr;gap:var(--spacing-xl)}.header{flex-direction:row;justify-content:space-between;align-items:center}.hide-tablet{display:none!important}.show-tablet{display:block!important}}@media (min-width: 769px) and (max-width: 1024px){.main-content{grid-template-columns:1fr 1fr;gap:var(--spacing-2xl)}.hide-tablet-up{display:none!important}.show-tablet-up{display:block!important}}@media (min-width: 1025px){.main-content{grid-template-columns:1fr 1fr;gap:var(--spacing-3xl)}.hide-desktop{display:none!important}.show-desktop{display:block!important}}@media (min-width: 1280px){.container{max-width:1400px}.main-content{grid-template-columns:2fr 1fr;gap:var(--spacing-4xl)}}@media (orientation: portrait) and (max-width: 768px){.controls{flex-wrap:wrap;justify-content:center}.progress-container{order:-1;width:100%;margin-bottom:var(--spacing-md)}}@media (orientation: landscape) and (max-height: 500px){.container{padding:var(--spacing-sm)}.header{padding:var(--spacing-sm) 0}.music-player,.queue-section,.add-track-section{padding:var(--spacing-md)}.logo h1{font-size:var(--font-size-lg)}.compact-landscape{display:flex!important}.hide-landscape{display:none!important}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.music-player,.queue-section,.add-track-section{border-width:.5px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinning{animation:none!important}}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.w-full{width:100%}.w-auto{width:auto}@media (max-width: 640px){.hide-mobile{display:none!important}.show-mobile{display:block!important}.text-center-mobile{text-align:center}.flex-col-mobile{flex-direction:column}.w-full-mobile{width:100%}.gap-sm-mobile{gap:var(--spacing-sm)}.p-sm-mobile{padding:var(--spacing-sm)}}@media (min-width: 641px) and (max-width: 1024px){.hide-tablet{display:none!important}.show-tablet{display:block!important}.text-center-tablet{text-align:center}.flex-col-tablet{flex-direction:column}}@media (min-width: 1025px){.hide-desktop{display:none!important}.show-desktop{display:block!important}}