@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Outfit:wght@400;700&display=swap";:root{--background:#0a0e27;--surface:#141832;--surface-hover:#1e2248;--primary:#6366f1;--primary-hover:#818cf8;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--nav-height:80px;--player-height:72px;--sidebar-width:280px;--header-height:64px;--nav-bg:#0f1333;--sidebar-bg:#080b1e;--miniplayer-bg:#1e2248;--card-bg:#141832;--card-hover:#1e2248;--spotify-green:#6366f1;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-primary);background-color:var(--background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Outfit,Noto Sans JP,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);min-width:320px;min-height:100vh;margin:0;display:flex;overflow-x:hidden}#root{width:100%}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700}button{background-color:var(--surface);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:all .2s}button:hover{background-color:var(--surface-hover)}button:focus,button:focus-visible{outline:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--surface-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.gradient-text{background:linear-gradient(135deg, var(--primary), var(--primary-hover));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-layout{flex-direction:column;width:100%;height:100vh;display:flex}.main-view{background-color:var(--background);flex:1;min-width:0;position:relative;overflow-y:auto}.nav-toolbar{height:var(--header-height);background-color:var(--background);z-index:100;border-bottom:none;justify-content:center;align-items:center;width:100%;padding:0 40px;display:flex;position:relative}.nav-logo{z-index:10;position:absolute;left:40px}.nav-toolbar-center{z-index:5;align-items:center;gap:12px;width:auto;display:flex}.search-bar-wrapper{width:400px;position:relative}.nav-circle-btn{cursor:pointer;color:#f1f5f9;background-color:#1e2248;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:all .2s;display:flex!important}.nav-circle-btn svg{display:block;stroke:#f1f5f9!important;stroke-width:2px!important;width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important}.nav-circle-btn:hover{background-color:#272c5c}.nav-circle-btn.active{background-color:var(--primary)}@media (width<=768px){.nav-toolbar{justify-content:space-between;padding:0 16px}.nav-logo{position:static}.nav-toolbar-center{flex:1;justify-content:flex-end;gap:8px;margin-left:12px}.search-bar-wrapper{flex:1;width:auto;min-width:100px}}.search-bar-container{width:100%;position:relative}.search-bar-input{color:#fff;background:#1e2248;border:none;border-radius:24px;outline:none;width:100%;padding:12px 16px 12px 48px;font-size:14px;transition:all .2s}.search-bar-input:focus{background:#272c5c;box-shadow:0 0 0 2px #6366f14d}.search-icon-inside{color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.song-card{background:var(--surface)!important;flex-direction:column!important;width:210px!important;padding:16px!important;transition:all .3s cubic-bezier(.16,1,.3,1)!important;display:flex!important}.song-card-image-container{aspect-ratio:4/3!important;background:var(--surface-hover)!important;border-radius:8px!important;width:100%!important;margin-bottom:12px!important;position:relative!important;overflow:hidden!important}.song-card-image-container img{object-fit:cover!important;width:100%!important;height:100%!important;display:block!important}.song-card:hover{transform:translateY(-4px);background:var(--card-hover)!important}.play-button-overlay{background:var(--primary)!important;color:#000!important;opacity:0!important;pointer-events:none!important;border-radius:50%!important;justify-content:center!important;align-items:center!important;width:48px!important;height:48px!important;transition:all .3s cubic-bezier(.16,1,.3,1)!important;display:flex!important;position:absolute!important;bottom:12px!important;right:12px!important;transform:translateY(8px)scale(.9)!important;box-shadow:0 8px 16px #00000080!important}.song-card:hover .play-button-overlay{opacity:1!important;transform:translateY(0)scale(1)!important}.song-card-title-link:hover{color:var(--primary)!important;text-decoration:underline!important}.youtube-container-global{z-index:1001;pointer-events:none;border-radius:12px;transition:all .4s cubic-bezier(.16,1,.3,1);position:fixed;overflow:hidden;box-shadow:0 20px 50px #00000080}.youtube-container-global.hidden{opacity:0;width:1px;height:1px;position:fixed;top:-100px;left:-100px}.youtube-container-global.visible.video-hidden{opacity:0;pointer-events:none}.youtube-container-global.visible{aspect-ratio:16/9;opacity:1;pointer-events:auto;background:#000;border-radius:12px;width:calc(100vw - 48px);max-width:560px;top:200px;left:50%;transform:translate(-50%);box-shadow:0 20px 80px #000,0 0 30px #6366f166}@media (width<=600px){.youtube-container-global.visible{width:calc(100vw - 32px);top:160px}}.app-container{min-height:100vh;padding-bottom:calc(var(--nav-height) + var(--player-height) + 20px);flex-direction:column;display:flex}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:20px;animation:.5s ease-out fadeIn}.bottom-nav{justify-content:space-around;align-items:center;padding-top:8px;padding-bottom:24px;display:flex;box-shadow:0 -4px 20px #0006}.nav-button:active{transform:scale(.9)}.glass{-webkit-backdrop-filter:blur(20px);background:#121212bf}.fullscreen-player{animation:.4s cubic-bezier(.4,0,.2,1) slideUp}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}