@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";#root{min-height:100vh;display:flex;flex-direction:column}:root{--bg-primary: #050810;--bg-surface: #0d1117;--bg-elevated: #161b22;--bg-card: rgba(13, 17, 23, .85);--bg-card-hover: rgba(22, 27, 34, .95);--bg-overlay: rgba(5, 8, 16, .85);--border-color: rgba(255, 255, 255, .08);--border-accent: rgba(139, 92, 246, .3);--border-focus: rgba(6, 182, 212, .5);--primary-purple: #8b5cf6;--primary-cyan: #06b6d4;--primary-pink: #ec4899;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--gradient-main: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);--gradient-hover: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);--gradient-pink: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);--gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);--text-main: #f3f4f6;--text-muted: #9ca3af;--text-dim: #6b7280;--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--fs-hero: clamp(1.8rem, 5vw, 3rem);--fs-h1: clamp(1.4rem, 3vw, 2rem);--fs-h2: clamp(1.1rem, 2.5vw, 1.5rem);--fs-h3: clamp(.95rem, 2vw, 1.2rem);--fs-body: clamp(.85rem, 1.8vw, 1rem);--fs-caption: clamp(.7rem, 1.5vw, .85rem);--fs-micro: clamp(.65rem, 1.2vw, .75rem);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 50%;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow-purple: 0 0 20px rgba(139, 92, 246, .2);--shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, .2);--header-height: 64px;--bottom-nav-height: 64px;--mini-player-height: 56px;--safe-area-bottom: env(safe-area-inset-bottom, 0px);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(ellipse at 10% 20%,rgba(139,92,246,.1) 0px,transparent 50%),radial-gradient(ellipse at 90% 80%,rgba(6,182,212,.08) 0px,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(236,72,153,.04) 0px,transparent 60%);background-attachment:fixed}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}input,select,textarea{font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-main)}img{max-width:100%;display:block}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#8b5cf666}.glass-panel{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.glass-panel-glow{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-accent);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow-purple)}.glass-surface{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg)}.gradient-text{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-text-pink{background:var(--gradient-pink);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 767px){.desktop-only,.flex-desktop-only{display:none!important}}@media (min-width: 768px){.mobile-only,.flex-mobile-only{display:none!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes spinVinyl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #8b5cf666}50%{box-shadow:0 0 30px #06b6d499}}@keyframes pulseRing{0%{box-shadow:0 0 #ef444480}70%{box-shadow:0 0 0 8px #ef444400}to{box-shadow:0 0 #ef444400}}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn var(--duration-normal) var(--ease-out) both}.animate-fade-in-up{animation:fadeInUp var(--duration-slow) var(--ease-out) both}.animate-scale-in{animation:scaleIn var(--duration-normal) var(--ease-spring) both}.animate-slide-up{animation:slideUp var(--duration-slow) var(--ease-out) both}.pulse-glow{animation:pulseGlow 3s infinite ease-in-out}.pulse-ring{animation:pulseRing 2s infinite}.live-pulse{animation:livePulse 1.5s infinite ease-in-out}.btn-press{transition:transform var(--duration-fast) var(--ease-out),opacity var(--duration-fast)}.btn-press:active{transform:scale(.96)}.btn-press:disabled{opacity:.5;cursor:not-allowed;transform:none}input[type=range].timeline-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer;position:relative}input[type=range].timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gradient-main);border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #8b5cf666;cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring)}input[type=range].timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range].timeline-slider::-webkit-slider-thumb:active{transform:scale(1.3)}input[type=range].timeline-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gradient-main);border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #8b5cf666;cursor:pointer}@media (max-width: 767px){input[type=range].timeline-slider{height:8px}input[type=range].timeline-slider::-webkit-slider-thumb{width:24px;height:24px}input[type=range].timeline-slider::-moz-range-thumb{width:24px;height:24px}}.input-field{width:100%;padding:12px 14px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-main);font-size:var(--fs-body);outline:none;transition:border-color var(--duration-fast),box-shadow var(--duration-fast);min-height:44px}.input-field:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #06b6d426}.input-field::placeholder{color:var(--text-dim)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;margin:12px 12px 0;height:var(--header-height);position:relative;z-index:100}@media (min-width: 768px){.app-header{padding:12px 24px;margin:16px 24px 0}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-nav-height) + var(--safe-area-bottom));padding-bottom:var(--safe-area-bottom);background:#050810f2;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;align-items:center;z-index:1000}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;color:var(--text-dim);font-size:var(--fs-micro);font-weight:600;transition:color var(--duration-fast);position:relative;min-width:56px}.bottom-nav-item.active{color:var(--primary-cyan)}.bottom-nav-item.active:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--gradient-main);border-radius:0 0 4px 4px}@media (min-width: 768px){.bottom-nav{display:none}}.mini-player{position:fixed;bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom));left:8px;right:8px;height:var(--mini-player-height);background:var(--bg-elevated);border:1px solid var(--border-accent);border-radius:var(--radius-md);display:flex;align-items:center;padding:0 12px;gap:12px;z-index:999;box-shadow:0 -4px 20px #00000080;cursor:pointer;transition:transform var(--duration-normal) var(--ease-out)}.mini-player-thumb{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.mini-player-info{flex:1;overflow:hidden}.mini-player-title{font-size:var(--fs-caption);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player-status{font-size:var(--fs-micro);color:var(--text-dim)}.mini-player-controls{display:flex;align-items:center;gap:8px}.mini-player-btn{width:36px;height:36px;border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;background:#ffffff14;color:var(--text-main);transition:background var(--duration-fast)}.mini-player-btn.play{background:var(--gradient-main);color:#fff}@media (min-width: 768px){.mini-player{display:none}}.room-layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.room-content{flex:1;padding:12px;padding-bottom:calc(var(--mini-player-height) + var(--bottom-nav-height) + var(--safe-area-bottom) + 16px)}@media (min-width: 1024px){.room-content{max-width:1800px;width:calc(100% - 32px);margin:0 auto;padding:0 0 40px;display:grid;grid-template-columns:1fr 420px;gap:24px}}@media (min-width: 1400px){.room-content{grid-template-columns:1fr 460px;gap:28px}}.share-banner{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;margin:0 12px 8px;border-radius:var(--radius-md);font-size:var(--fs-caption);flex-wrap:wrap;gap:8px}@media (min-width: 768px){.share-banner{max-width:1800px;margin:12px auto 16px;width:calc(100% - 32px);padding:12px 20px;font-size:var(--fs-body)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:flex-end;z-index:9999;padding:0}.modal-content{width:100%;max-height:90vh;max-height:90dvh;overflow-y:auto;padding:24px 20px calc(20px + var(--safe-area-bottom));border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;background:var(--bg-surface);border:1px solid var(--border-accent);border-bottom:none;box-shadow:0 -20px 60px #000000b3;animation:slideUp var(--duration-slow) var(--ease-out) both}@media (min-width: 768px){.modal-overlay{align-items:center;padding:20px}.modal-content{max-width:500px;max-height:85vh;border-radius:var(--radius-2xl);border-bottom:1px solid var(--border-accent);padding:28px;animation:scaleIn var(--duration-normal) var(--ease-spring) both}}.modal-handle{width:40px;height:4px;background:#fff3;border-radius:2px;margin:0 auto 16px}@media (min-width: 768px){.modal-handle{display:none}}.player-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;gap:20px}@media (min-width: 768px){.player-card{flex-direction:row;text-align:left;padding:32px;gap:28px}}.player-album-art{width:clamp(140px,40vw,200px);height:clamp(140px,40vw,200px);border-radius:var(--radius-full);overflow:hidden;box-shadow:var(--shadow-lg);flex-shrink:0;border:4px solid rgba(255,255,255,.1);position:relative}.player-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px}@media (max-width: 767px){.player-controls{flex-wrap:wrap;justify-content:center}.player-controls .song-info-bar{width:100%;text-align:center;margin-bottom:8px}}.control-btn{width:48px;height:48px;border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-spring)}.control-btn:active{transform:scale(.92)}.step-btn{padding:8px 14px;border-radius:20px;background:#ffffff0f;border:1px solid var(--border-color);color:var(--text-main);font-size:var(--fs-caption);font-weight:600;display:flex;align-items:center;gap:4px;min-height:44px;transition:background var(--duration-fast)}.step-btn:active{background:#ffffff1f}.panel-container{padding:var(--space-md);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-md)}.panel-header{display:flex;justify-content:space-between;align-items:center}.panel-list{display:flex;flex-direction:column;gap:var(--space-sm);overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width: 767px){.chat-panel-mobile{height:calc(100dvh - var(--header-height) - var(--mini-player-height) - var(--bottom-nav-height) - var(--safe-area-bottom) - 40px);min-height:300px}}.queue-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#ffffff08;border-radius:var(--radius-md);border:1px solid var(--border-color);min-height:60px}.queue-item-thumb{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}@media (max-width: 767px){.queue-item-thumb{width:52px;height:52px}}.vote-btn{padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-color);color:#fff;font-size:var(--fs-caption);font-weight:600;display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;transition:background var(--duration-fast)}.playlist-actions{display:flex;align-items:center;gap:6px}@media (max-width: 767px){.playlist-actions{flex-wrap:wrap;gap:4px}.playlist-actions button{font-size:var(--fs-micro);padding:4px 6px}}.auth-container{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:20px}.auth-card{width:100%;max-width:440px;padding:clamp(24px,5vw,40px);border-radius:var(--radius-2xl)}.landing-hero{text-align:center;margin:clamp(20px,5vh,40px) 0 clamp(24px,5vh,48px) 0}.landing-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.15;margin-bottom:var(--space-md)}.landing-hero p{font-size:var(--fs-body);color:var(--text-muted);max-width:650px;margin:0 auto;line-height:1.6}.landing-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-2xl)}@media (min-width: 640px){.landing-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}}.landing-card{padding:clamp(20px,4vw,32px);border-radius:var(--radius-xl)}.recent-groups-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md)}@media (min-width: 480px){.recent-groups-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}.profile-card{padding:clamp(20px,4vw,36px);border-radius:var(--radius-2xl)}.picker-grid{display:flex;flex-wrap:wrap;gap:10px}.emoji-picker-btn{width:44px;height:44px;border-radius:var(--radius-md);background:#ffffff0d;font-size:1.2rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background var(--duration-fast)}.emoji-picker-btn:active{background:#ffffff1f}.color-picker-btn{width:44px;height:44px;border-radius:var(--radius-full);cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring)}.color-picker-btn:active{transform:scale(.9)}.safe-bottom{padding-bottom:var(--safe-area-bottom)}.page-padding{padding:0 12px}@media (min-width: 768px){.page-padding{padding:0 24px}}@media (max-width: 767px){.has-bottom-nav{padding-bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom))}.has-mini-player{padding-bottom:calc(var(--mini-player-height) + var(--bottom-nav-height) + var(--safe-area-bottom) + 8px)}}