@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@media (width<=768px){.room-layout{grid-template-rows:1fr auto;grid-template-columns:1fr}.sidebar{display:none}.main-content{padding:var(--space-md);grid-column:1/-1!important}.mobile-room-bar{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border);font-size:var(--text-sm);display:flex}.mobile-room-bar .room-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}}.member-item{align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;font-size:var(--text-sm);display:flex}.member-badge-admin{margin-left:var(--space-sm);text-transform:uppercase;color:var(--accent);letter-spacing:.5px;align-items:center;font-size:9px;font-weight:600;line-height:1;display:inline-flex}.member-dot{background:var(--success);border-radius:50%;width:8px;height:8px}.no-members-text{font-size:var(--text-xs);color:var(--text-muted)}.my-rooms-container{width:100%}.empty-rooms-msg{color:var(--text-muted);text-align:center;padding:32px}.my-rooms-grid{gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.my-rooms-card{cursor:pointer;transition:all var(--transition);padding:16px}.my-rooms-card:hover{background:var(--bg-tertiary);border-color:var(--accent)}.my-rooms-card.current-room{cursor:not-allowed;opacity:.45}.my-rooms-card.current-room:hover{background:var(--bg-card);border-color:var(--border-light)}.my-rooms-card-header{justify-content:space-between;align-items:center;display:flex}.my-rooms-title{color:var(--text-primary);font-weight:600;font-size:var(--text-base)}.room-active-text{text-transform:uppercase;letter-spacing:.5px;color:var(--accent);font-size:11px;font-weight:600}.my-rooms-code-bar{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:1px;align-items:center;gap:8px;margin-top:6px;font-family:monospace;display:flex}@media (width<=1100px){.my-rooms-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.my-rooms-grid{grid-template-columns:1fr}}.room-modal{width:90%;max-width:400px;position:relative}.room-modal .close-modal-btn{position:absolute;top:16px;right:16px}.room-modal-body{flex-direction:column;gap:20px;display:flex}.room-modal-subtitle{font-size:var(--text-base);color:var(--text-primary);margin-bottom:10px}.room-name-hints{font-size:var(--text-xs);color:var(--text-muted);text-align:left;flex-direction:column;gap:4px;margin-top:8px;display:flex}.hint-item{align-items:center;gap:6px;display:flex}.hint-item .valid{color:var(--success)}.hint-item .invalid{color:var(--danger)}.hint-item .muted{color:var(--text-muted)}.room-modal-action{text-align:center;margin-top:10px}.room-modal-divider{align-items:center;gap:12px;display:flex}.room-modal-divider .divider-line{background:var(--border);flex:1;height:1px}.room-modal-divider .divider-text{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1px}.room-code-input{text-align:left;width:100%}@media (width<=768px){:root{--player-height:auto}.player-bar{padding:var(--space-sm) var(--space-md);gap:var(--space-sm);flex-direction:column;min-height:100px}.player-track-info{min-width:unset;max-width:unset;justify-content:center;width:100%}.player-track-info .track-info{text-align:center}.player-controls{gap:var(--space-xs);flex-direction:column;width:100%}.player-controls>div:first-child{gap:var(--space-md)!important;margin-bottom:0!important}.progress-container{max-width:100%}.player-extra{display:none}}@media (width<=480px){.player-bar{padding:var(--space-xs) var(--space-sm)}.player-track-info img{width:36px!important;height:36px!important}.player-controls .play-btn{width:36px;height:36px}}.search-container{margin-bottom:var(--space-lg)}.search-input-wrap{gap:var(--space-sm);width:100%;max-width:420px;margin:0 auto;display:flex}.search-results{margin-top:var(--space-lg);gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}@media (width<=768px){.search-results{grid-template-columns:1fr}.search-input-wrap{max-width:100%}}.search-track-card{border:none;border-bottom:1px solid var(--border-light);padding:var(--space-md) var(--space-sm);transition:all var(--transition);background:0 0;border-radius:0;min-width:0}@media (width>=769px){.search-track-card:nth-last-child(-n+3){border-bottom:none}}@media (width<=768px){.search-track-card:last-child{border-bottom:none}}.search-track-card:hover{background:var(--bg-hover)}.home-layout{grid-template-columns:1fr;grid-template-rows:1fr var(--player-height);gap:0;height:100dvh;display:grid}.home-top-bar{border-bottom:1px solid var(--border);margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.home-top-bar .tabs{border-bottom:none;margin-bottom:0}.user-dropdown-wrap{flex-shrink:0;padding-bottom:8px}@media (width<=768px){.home-top-bar{gap:var(--space-sm);padding-bottom:var(--space-sm);flex-wrap:wrap}.home-top-bar>.tabs{flex:1;min-width:0}.home-top-bar>div:last-child{padding-bottom:0!important}}:root{--bg-primary:#120d0f;--bg-secondary:#1a1215;--bg-tertiary:#251b1f;--bg-card:#1e1619;--bg-hover:#ffffff0d;--bg-input:#160e11;--text-primary:#f5f0f2;--text-secondary:#c5b8be;--text-muted:#8e7a83;--accent:#cfa87b;--accent-hover:#e0be96;--accent-soft:#cfa87b26;--danger:#d65a7f;--danger-hover:#e07797;--success:#5f8a70;--success-hover:#75a387;--warning:#cfa87b;--border:#cfa87b26;--border-light:#cfa87b14;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:#0006;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--transition:.15s ease;--player-height:80px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;line-height:1.5}a{color:var(--accent);text-decoration:none}button{font-family:var(--font);cursor:pointer;border:none;outline:none}input{font-family:var(--font);outline:none}.container{max-width:1200px;padding:0 var(--space-md);margin:0 auto}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition);white-space:nowrap;font-weight:500;display:inline-flex}.btn-primary{color:#120d0f;background:linear-gradient(135deg,#cfa87b 0%,#b38b5d 100%)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-danger{color:#fff;background:linear-gradient(135deg,#a65066 0%,#7d3345 100%)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--text-xs)}.btn-icon{border-radius:var(--radius-full);justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.input{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);transition:border-color var(--transition)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.input::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg)}.tabs{border-bottom:1px solid var(--border);margin-bottom:var(--space-lg);gap:0;display:flex}.tab{padding:var(--space-sm) var(--space-lg);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-bottom:2px solid #0000}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.track-item{align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:background var(--transition);cursor:pointer;display:flex}.track-item:hover{background:var(--bg-hover)}.track-thumb{border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-tertiary);flex-shrink:0;width:44px;height:44px}.track-info{flex:1;min-width:0}.track-title{font-size:var(--text-sm);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.track-artist{font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-duration{font-size:var(--text-xs);color:var(--text-primary);flex-shrink:0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.loading{padding:var(--space-2xl);color:var(--text-muted);justify-content:center;align-items:center;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:24px;height:24px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){:root{--player-height:auto}.tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{padding:var(--space-sm) var(--space-md);font-size:var(--text-xs);flex-shrink:0}.track-item{padding:var(--space-sm) var(--space-sm);gap:var(--space-sm)}.track-thumb{width:38px;height:38px}.track-title{font-size:var(--text-xs)}.track-artist{font-size:.65rem}.card{padding:var(--space-md)}.modal-content{max-width:calc(100vw - 32px);margin:var(--space-md);padding:var(--space-lg)}.container{padding:0 var(--space-sm)}}@media (width<=480px){.tab{padding:var(--space-xs) var(--space-sm)}}.auth-page{min-height:100dvh;padding:var(--space-lg);justify-content:center;align-items:center;display:flex}.auth-card{width:100%;max-width:400px}.auth-card h1{font-size:var(--text-2xl);margin-bottom:var(--space-lg);text-align:center;font-weight:700}.form-group{margin-bottom:var(--space-md)}.form-group label{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs);display:block}p.form-error,.form-error{color:#ff4d4d;font-size:var(--text-sm);margin-top:var(--space-sm);text-align:center}.auth-submit-wrapper{text-align:center;margin-top:var(--space-sm)}.auth-link-wrapper{text-align:center;margin-top:var(--space-lg);color:var(--text-secondary);font-size:var(--text-sm)}.auth-link-wrapper a{font-weight:700}.auth-help-text{color:var(--text-secondary);font-size:.75rem}.google-btn-wrapper{margin-bottom:var(--space-md);justify-content:center;display:flex}.auth-divider{text-align:center;margin:var(--space-md) 0;color:var(--text-secondary);font-size:var(--text-sm);position:relative}.auth-divider-line{border:none;border-top:1px solid var(--border);z-index:1;position:absolute;top:50%;left:0;right:0}.auth-divider-text{background:var(--bg-card);z-index:2;padding:0 10px;position:relative}.google-auth-loading{opacity:.7;pointer-events:none}.google-auth-btn{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-tertiary);width:100%;color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-family:inherit;font-weight:500;transition:all .2s;display:inline-flex}.google-auth-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-muted)}.google-auth-btn:disabled{opacity:.5;cursor:not-allowed}.playlist-select-loading{justify-content:center;padding:16px 0;display:flex}.playlist-select-spinner{width:20px;height:20px}.playlist-select-empty{font-size:var(--text-xs);color:var(--text-muted);text-align:center;margin:16px 0}.playlist-select-container{flex-direction:column;align-items:flex-start;gap:8px;max-height:160px;padding-right:4px;display:flex;overflow-y:auto}.playlist-select-item{text-align:left;width:max-content;max-width:100%;font-size:var(--text-sm);border:1px solid var(--border);background:#ffffff08;justify-content:flex-start;align-items:center;gap:8px;padding:6px 12px;display:flex}.playlist-select-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.create-playlist-form-container{flex-direction:column;gap:8px;display:flex}.create-playlist-form-label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.5px;font-weight:600}.create-playlist-form-row{gap:8px;display:flex}.create-playlist-form-input{flex:1}.create-playlist-form-btn{white-space:nowrap}.add-to-playlist-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999;background:#000000b3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.add-to-playlist-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-lg);color:var(--text);flex-direction:column;gap:16px;padding:24px;display:flex}.add-to-playlist-header{justify-content:space-between;align-items:center;display:flex}.add-to-playlist-title{font-size:var(--text-lg);margin:0;font-weight:600}.add-to-playlist-close{font-size:var(--text-md);min-width:auto;padding:4px}.add-to-playlist-meta{font-size:var(--text-sm);color:var(--text-muted);margin:0}.add-to-playlist-divider{border-top:1px solid var(--border);margin:4px 0}.player-bar{background:var(--bg-secondary);border-top:1px solid var(--border);padding:0 var(--space-lg);align-items:center;gap:var(--space-lg);grid-area:2/1/auto/-1;display:flex}.player-track-info{align-items:center;gap:var(--space-md);min-width:200px;max-width:300px;display:flex}.player-controls{align-items:center;gap:var(--space-md);flex:1;justify-content:center;display:flex}.player-controls .play-btn{color:#120d0f;width:40px;height:40px;transition:all var(--transition);background:#fff;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 2px 8px #0003}.player-controls .play-btn:hover{background:#ede0d4}.ctrl-btn{color:var(--text-secondary);font-size:var(--text-lg);transition:color var(--transition);cursor:pointer;background:0 0;border:none;outline:none}.ctrl-btn:hover{color:var(--text-primary)}.progress-container{align-items:center;gap:var(--space-sm);width:100%;max-width:500px;display:flex}.progress-bar{background:var(--bg-tertiary);cursor:pointer;border-radius:12px;flex:1;height:20px;position:relative}.progress-bar:hover{height:20px}.progress-fill{background:var(--accent);border-radius:inherit;height:100%;transition:width .1s linear;position:relative}.progress-time{font-size:var(--text-xs);color:var(--text-muted);text-align:center;min-width:40px}.player-extra{align-items:center;gap:var(--space-md);justify-content:flex-end;min-width:150px;display:flex}.volume-slider{width:80px;accent-color:var(--accent)}@media (width<=768px){:root{--player-height:auto}.player-bar{padding:var(--space-sm) var(--space-md);gap:var(--space-sm);flex-direction:column;min-height:100px}.player-track-info{min-width:unset;max-width:unset;justify-content:center;width:100%}.player-track-info .track-info{text-align:center}.player-controls{gap:var(--space-xs);flex-direction:column;width:100%}.player-controls>div:first-child{gap:var(--space-md)!important;margin-bottom:0!important}.progress-container{max-width:100%}.player-extra{display:none}}@media (width<=480px){.player-bar{padding:var(--space-xs) var(--space-sm)}.player-track-info img{width:36px!important;height:36px!important}.player-controls .play-btn{width:36px;height:36px}}.user-dropdown-container{display:inline-block;position:relative}.avatar-trigger{background:var(--bg-hover);border:1px solid var(--border);width:36px;height:36px;color:var(--accent);font-weight:600;font-size:var(--text-base);cursor:pointer;transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.avatar-trigger:hover{background:var(--accent-soft);border-color:var(--accent)}.dropdown-menu{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);width:200px;box-shadow:var(--shadow-lg);z-index:100;flex-direction:column;padding:8px 0;display:flex;position:absolute;top:calc(100% + 8px);right:0}.dropdown-header{flex-direction:column;gap:2px;padding:8px 16px;display:flex}.dropdown-header .user-name{font-size:var(--text-sm);color:var(--text-primary);font-weight:600}.dropdown-divider{background:var(--border-light);height:1px;margin:6px 0}.dropdown-item{text-align:left;width:100%;font-size:var(--text-sm);color:var(--text-secondary);transition:all var(--transition);background:0 0;border:none;padding:10px 16px}.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}.dropdown-item.text-danger{color:var(--danger)}.dropdown-item.text-danger:hover{color:var(--danger);background:#d450501a}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);width:100%;max-width:450px;box-shadow:var(--shadow-lg);padding:var(--space-xl);position:relative}.modal-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.modal-header h2{font-size:var(--text-xl);font-weight:600}.close-modal-btn{font-size:var(--text-lg);justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:flex}.settings-field label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs);display:block}.setting-value-static{padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary)}.my-playlists-header-row{justify-content:center;margin-bottom:20px;display:flex}.my-playlists-create-wrap{gap:8px;width:320px;display:flex}.my-playlists-create-input{font-size:var(--text-sm);flex:1;padding:6px 10px}.my-playlists-empty{color:var(--text-muted);text-align:center;padding:32px}.my-playlists-list{gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.my-playlists-card{transition:all var(--transition);padding:16px}.my-playlists-card.expanded{grid-column:1/-1}.my-playlists-card-header{justify-content:space-between;align-items:center;display:flex}.my-playlists-card-info{cursor:pointer;flex:1}.my-playlists-card-name{color:var(--text-primary);font-weight:600;font-size:var(--text-base)}.my-playlists-card-count{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}.my-playlists-card-actions{align-items:center;gap:8px;display:flex}.my-playlists-play-btn{color:var(--accent)}.my-playlists-delete-btn{color:var(--danger);font-size:var(--text-sm);padding:4px 8px;line-height:1}.my-playlists-tracks-grid{gap:var(--space-sm);border-top:1px solid var(--border-light);grid-template-columns:repeat(3,1fr);margin-top:12px;padding-top:12px;display:grid}.playlist-track-card{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);transition:all var(--transition);min-width:0}.playlist-track-card:hover{background:var(--bg-tertiary);border-color:var(--border)}.my-playlists-tracks-empty{font-size:var(--text-xs);color:var(--text-muted)}.my-playlists-remove-track-btn{color:var(--text-muted);flex-shrink:0;font-size:16px;line-height:1}@media (width<=1100px){.my-playlists-list,.my-playlists-tracks-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.my-playlists-list,.my-playlists-tracks-grid{grid-template-columns:1fr}}.room-layout{grid-template-columns:300px 1fr;grid-template-rows:1fr var(--player-height);gap:0;height:100dvh;display:grid}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border);flex-direction:column;grid-area:1/1;display:flex;overflow-y:auto}.main-content{padding:var(--space-lg);grid-area:1/2;overflow-y:auto}.sidebar-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;display:flex}.sidebar-header-info{flex-direction:column;gap:2px;display:flex}.sidebar-header-info h2{font-size:var(--text-lg);margin:0;font-weight:600;line-height:1.2}.room-code-badge{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:1px;align-items:center;gap:6px;font-family:monospace;display:inline-flex}.room-code-badge .badge-code{letter-spacing:2px}.sidebar-section{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-light)}.sidebar-section h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:var(--space-sm)}.mobile-room-bar{margin:calc(-1 * var(--space-md));margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border);font-size:var(--text-sm);align-items:center;gap:8px;display:flex}.mobile-room-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.mobile-room-code-wrap{align-items:center;gap:4px;display:flex}.mobile-room-code{font-size:var(--text-xs);color:var(--text-muted);font-family:monospace}@media (width<=768px){.room-layout{grid-template-rows:1fr auto;grid-template-columns:1fr}.sidebar{display:none}.main-content{padding:var(--space-md);grid-column:1/-1!important}.mobile-room-bar{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border);font-size:var(--text-sm);display:flex}.mobile-room-bar .room-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}}