:root{--color-bg:#121212;--color-bg-elevated:#1f1f21;--color-card:#212124;--color-card-hover:#2c2c30;--color-card-active:#333338;--color-border:#ffffff14;--color-green:#39b54a;--color-green-light:#4dc95a;--color-green-dark:#2d8f39;--color-green-glow:#39b54a73;--color-text:#f5f5f5;--color-text-secondary:#a8a8ad;--color-text-muted:#6f6f75;--color-danger:#e5484d;--color-warning:#e0a72e;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--shadow-elevated:0 8px 30px #00000073;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--mini-player-height:88px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(circle at top, #191a1c 0%, var(--color-bg) 55%);color:var(--color-text);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;min-height:100vh;font-family:Segoe UI,Inter,system-ui,Tahoma,Geneva,Verdana,sans-serif}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}input,select{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:#ffffff26}.app-shell{min-height:100vh;padding-top:calc(var(--safe-top) + 12px);padding-bottom:calc(var(--mini-player-height) + var(--safe-bottom) + 16px)}.app-main{max-width:1100px;margin:0 auto;padding:0 20px 24px}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1100px;margin:0 auto 24px;padding:0 20px;display:flex}.app-header__brand{align-items:center;gap:12px;min-width:0;display:flex}.app-logo{width:44px;height:44px;box-shadow:0 0 18px var(--color-green-glow);border-radius:50%;flex-shrink:0;overflow:hidden}.app-logo img{object-fit:cover;width:100%;height:100%;display:block}.app-title{background:linear-gradient(135deg, var(--color-green-light), var(--color-green-dark));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:800}.app-header__actions{align-items:center;gap:10px;display:flex}.icon-btn{width:40px;height:40px;color:var(--color-text-secondary);border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s,color .2s,transform .15s;display:flex}.icon-btn:hover{background:var(--color-card-hover);color:var(--color-text);transform:translateY(-1px)}.icon-btn:active{transform:scale(.94)}.icon-btn--sm{background:#1212128c;width:36px;height:36px}.profile-switcher{background:var(--color-card);border-radius:var(--radius-pill);border:1px solid var(--color-border);gap:4px;padding:4px;display:inline-flex}.profile-switcher__option{border-radius:var(--radius-pill);color:var(--color-text-secondary);padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .25s;position:relative}.profile-switcher__option.is-active{background:linear-gradient(135deg, var(--color-green), var(--color-green-dark));color:#08210c;box-shadow:0 4px 14px var(--color-green-glow)}.section-title{color:var(--color-text);justify-content:space-between;align-items:center;margin:28px 0 14px;font-size:1.15rem;font-weight:700;display:flex}.btn{border-radius:var(--radius-pill);justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-size:.95rem;font-weight:600;transition:transform .15s,box-shadow .2s,background-color .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-green), var(--color-green-dark));color:#08210c}.btn-primary:hover{box-shadow:0 0 22px var(--color-green-glow);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-card-hover);color:var(--color-text)}.btn-secondary:hover{background:var(--color-card-active)}.btn-danger{color:var(--color-danger);background:#e5484d26}.btn-danger:hover{background:#e5484d47}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.btn-block{width:100%}.field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.field label{color:var(--color-text-secondary);font-size:.85rem;font-weight:600}.field input,.field select{border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-text);border:1px solid var(--color-border);padding:12px 14px;font-size:.95rem;transition:border-color .2s,background-color .2s}.field input:focus,.field select:focus{border-color:var(--color-green);background:var(--color-card-hover);outline:none}.field-hint{color:var(--color-text-muted);font-size:.78rem}.field-error{color:var(--color-danger);font-size:.8rem}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;display:grid}.playlist-card{background:var(--color-card);border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;padding:14px;transition:background-color .25s,transform .2s,box-shadow .25s;position:relative}.playlist-card:hover{background:var(--color-card-hover);box-shadow:var(--shadow-elevated);transform:translateY(-4px)}.playlist-card__thumb{aspect-ratio:1;border-radius:var(--radius-sm);background:linear-gradient(135deg,#2a2a2d,#1a1a1c);width:100%;margin-bottom:12px;position:relative;overflow:hidden}.playlist-card__thumb img{object-fit:cover;width:100%;height:100%}.playlist-card__play{background:var(--color-green);color:#08210c;width:42px;height:42px;box-shadow:0 6px 18px var(--color-green-glow);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:8px;right:8px}@media (hover:hover){.playlist-card__play{opacity:0;transition:opacity .2s,transform .2s;transform:translateY(8px)}.playlist-card:hover .playlist-card__play{opacity:1;transform:translateY(0)}}.playlist-card__title{text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;font-size:.92rem;font-weight:600;overflow:hidden}.playlist-card__subtitle{color:var(--color-text-muted);font-size:.78rem}.playlist-card__menu{position:absolute;top:10px;right:10px}@media (hover:hover){.playlist-card__menu{opacity:0;transition:opacity .2s}.playlist-card:hover .playlist-card__menu{opacity:1}}.playlist-card__dropdown{background:var(--color-card-active);min-width:140px;box-shadow:var(--shadow-elevated);border:1px solid var(--color-border);z-index:5;border-radius:10px;position:absolute;top:110%;right:0;overflow:hidden}.playlist-card__dropdown button{text-align:left;width:100%;padding:10px 14px;font-size:.85rem;transition:background-color .15s;display:block}.playlist-card__dropdown button:hover{background:var(--color-card-hover)}.playlist-card__dropdown button.is-danger{color:var(--color-danger)}.add-playlist-card{border:2px dashed var(--color-border);border-radius:var(--radius-md);min-height:190px;color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:8px;transition:all .25s;display:flex}.add-playlist-card:hover{border-color:var(--color-green);color:var(--color-green-light);background:#39b54a0f}.song-list{flex-direction:column;gap:6px;display:flex}.song-row{border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:14px;padding:10px 12px;transition:background-color .2s;display:flex;position:relative}.song-row:hover{background:var(--color-card-hover)}.song-row.is-active{background:#39b54a1f}.song-row.is-unavailable{opacity:.45;cursor:not-allowed}.song-row.has-open-menu{z-index:10}.song-row__index{text-align:center;width:24px;color:var(--color-text-muted);flex-shrink:0;font-size:.85rem}.song-row.is-active .song-row__index{color:var(--color-green-light)}.song-row__thumb{object-fit:cover;background:var(--color-card-active);border-radius:6px;flex-shrink:0;width:52px;height:39px}.song-row__info{flex:1;min-width:0}.song-row__title{white-space:nowrap;text-overflow:ellipsis;font-size:.92rem;font-weight:600;overflow:hidden}.song-row__artist{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.song-row__badge{border-radius:var(--radius-pill);color:var(--color-danger);background:#e5484d26;flex-shrink:0;padding:3px 8px;font-size:.7rem}.song-row__menu{flex-shrink:0;position:relative}.song-row__dropdown{background:var(--color-card-active);min-width:190px;box-shadow:var(--shadow-elevated);border:1px solid var(--color-border);z-index:5;border-radius:10px;position:absolute;top:110%;right:0;overflow:hidden}.song-row__dropdown button{text-align:left;align-items:center;gap:8px;width:100%;padding:10px 14px;font-size:.85rem;transition:background-color .15s;display:flex}.song-row__dropdown button:hover{background:var(--color-card-hover)}.song-row__dropdown button.is-danger{color:var(--color-danger)}.mode-toggle{background:var(--color-card);border-radius:var(--radius-pill);border:1px solid var(--color-border);gap:4px;padding:4px;display:inline-flex}.mode-toggle__option{border-radius:var(--radius-pill);color:var(--color-text-secondary);align-items:center;gap:6px;padding:8px 14px;font-size:.82rem;font-weight:600;transition:all .2s;display:flex}.mode-toggle__option.is-active{background:var(--color-card-active);color:var(--color-green-light)}.mode-toggle input{display:none}.mini-player{height:calc(var(--mini-player-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--color-border);z-index:40;background:#18181aeb;flex-direction:column;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.mini-player__progress-track{cursor:pointer;background:#ffffff14;height:3px;position:absolute;top:0;left:0;right:0}.mini-player__progress-fill{background:linear-gradient(90deg, var(--color-green), var(--color-green-light));height:100%}.mini-player__row{align-items:center;gap:14px;width:100%;max-width:1100px;margin:0 auto;padding:10px 16px 0;display:flex}.mini-player__thumb{object-fit:cover;background:var(--color-card-active);border-radius:8px;flex-shrink:0;width:52px;height:52px}.mini-player__info{cursor:pointer;flex:1;min-width:0}.mini-player__title{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.mini-player__artist{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.mini-player__controls{flex-shrink:0;align-items:center;gap:6px;display:flex}.player-control-btn{width:38px;height:38px;color:var(--color-text-secondary);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.player-control-btn:hover{color:var(--color-text);background:var(--color-card-hover)}.player-control-btn.is-primary{background:var(--color-text);color:#0c0c0d;width:44px;height:44px}.player-control-btn.is-primary:hover{box-shadow:0 0 16px var(--color-green-glow);transform:scale(1.06)}.mini-player__time{max-width:1100px;color:var(--color-text-muted);justify-content:space-between;margin:2px auto 0;padding:0 16px;font-size:.7rem;display:flex}.video-player-host{overflow:hidden}.toast-stack{bottom:calc(var(--mini-player-height) + var(--safe-bottom) + 16px);z-index:60;flex-direction:column;gap:8px;width:min(92vw,380px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-sm);text-align:center;box-shadow:var(--shadow-elevated);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:12px 16px;font-size:.85rem;font-weight:500}.toast--info{color:var(--color-text);background:#28282cf2}.toast--warning{color:var(--color-warning);background:#e0a72e26;border:1px solid #e0a72e4d}.toast--error{color:var(--color-danger);background:#e5484d26;border:1px solid #e5484d4d}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}@media (width>=640px){.modal-backdrop{align-items:center}}.modal-card{background:var(--color-bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid var(--color-border);width:100%;max-width:560px;max-height:85vh;padding:24px;padding-bottom:calc(24px + var(--safe-bottom));overflow-y:auto}@media (width>=640px){.modal-card{border-radius:var(--radius-lg);max-height:80vh}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.modal-header h2{font-size:1.2rem;font-weight:700}.search-result{border-radius:var(--radius-sm);align-items:center;gap:12px;padding:10px;transition:background-color .2s;display:flex}.search-result:hover{background:var(--color-card-hover)}.search-result__thumb-btn{border-radius:6px;flex-shrink:0;width:64px;height:48px;position:relative;overflow:hidden}.search-result__thumb-btn img{object-fit:cover;width:100%;height:100%}.search-result__thumb-btn:after{content:"";background:#00000059;display:flex;position:absolute;inset:0}.search-result__play-icon{color:#fff;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.search-result__info{flex:1;min-width:0}.search-result__title{white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:600;overflow:hidden}.search-result__channel{color:var(--color-text-muted);font-size:.76rem}.empty-state{text-align:center;color:var(--color-text-secondary);padding:60px 20px}.empty-state__icon{color:var(--color-text-muted);margin-bottom:12px}.spinner{border:3px solid var(--color-card-active);border-top-color:var(--color-green);border-radius:50%;width:28px;height:28px;margin:40px auto;animation:.8s linear infinite spin}.connect-banner{border-radius:var(--radius-md);background:#39b54a14;border:1px solid #39b54a40;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.settings-block{background:var(--color-card);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:16px;padding:20px}.settings-block h3{margin-bottom:12px;font-size:1rem}.settings-block p{color:var(--color-text-secondary);margin-bottom:12px;font-size:.88rem}@media (width<=640px){.app-main{padding:0 14px 20px}.app-title{font-size:1.25rem}.mini-player__row{gap:8px;padding:8px 12px 0}.song-row{gap:10px;padding:8px}.song-row__thumb{width:44px;height:33px}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}}@media (width<=480px){.app-header{margin-bottom:16px;padding:0 14px}.app-header__brand{flex:100%}.app-header__actions{flex:100%;justify-content:space-between}.profile-switcher{flex:1}.profile-switcher__option{text-align:center;flex:1;padding:8px 10px}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes pulse-dot{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.4;transform:scaleY(.5)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skeleton{background:linear-gradient(90deg, var(--color-card) 25%, var(--color-card-hover) 37%, var(--color-card) 63%);border-radius:var(--radius-sm);background-size:400px 100%;animation:1.4s ease-in-out infinite shimmer}.fade-in-up{animation:.35s both fade-in-up}.now-playing-dots{align-items:flex-end;gap:2px;height:12px;display:inline-flex}.now-playing-dots span{background:var(--color-green-light);border-radius:2px;width:3px;height:100%;animation:.9s ease-in-out infinite pulse-dot}.now-playing-dots span:nth-child(2){animation-delay:.15s}.now-playing-dots span:nth-child(3){animation-delay:.3s}