@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-main:#fff;--bg-secondary:#fafafa;--bg-card:#fffc;--bg-card-solid:#fff;--border-color:#00000014;--border-hover:#00000026;--text-primary:#000;--text-secondary:#555;--accent-primary:#000;--accent-secondary:#333;--accent-gradient:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);--btn-secondary-bg:#00000008;--btn-secondary-bg-hover:#00000014;--badge-bg:#0000000a;--scrollbar-thumb:#0003;--scrollbar-thumb-hover:#0006;--modal-overlay:#fff6;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--bg-main:#0c0c0e;--bg-secondary:#141416;--bg-card:#14141699;--bg-card-solid:#141416;--border-color:#ffffff14;--border-hover:#ffffff26;--text-primary:#f4f4f7;--text-secondary:#8a8a93;--accent-primary:#fff;--accent-secondary:#a1a1aa;--accent-gradient:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);--btn-secondary-bg:#ffffff0d;--btn-secondary-bg-hover:#ffffff1a;--badge-bg:#ffffff0f;--scrollbar-thumb:#fff3;--scrollbar-thumb-hover:#fff6;--modal-overlay:#0009}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-main);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100vh;line-height:1.6;transition:background-color .3s,color .3s,border-color .3s;display:flex}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600;line-height:1.2}a{color:inherit;text-decoration:none;transition:color .2s}a:hover{color:var(--text-primary)}button{cursor:pointer;font-family:var(--font-family);border:none;outline:none}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 2rem}.text-gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 4px 20px #00000008}.btn{border-radius:9999px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;transition:all .3s;display:inline-flex}.btn-primary{background:var(--text-primary);color:var(--bg-main);box-shadow:0 4px 15px #0000001a}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.btn-secondary{background:var(--btn-secondary-bg);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--btn-secondary-bg-hover);border-color:var(--border-hover)}.action-btn:not(.volume-btn){color:var(--text-secondary)!important;cursor:pointer!important;height:34px!important;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:9999px!important;justify-content:center!important;align-items:center!important;gap:.45rem!important;padding:.4rem .5rem!important;font-size:.85rem!important;font-weight:600!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;display:inline-flex!important}.action-btn:not(.volume-btn):hover{transform:scale(1.08);color:var(--text-primary)!important;background:0 0!important;border-color:#0000!important}.action-btn:not(.volume-btn):active{transform:scale(.95)}.action-btn:not(.volume-btn).liked{color:var(--text-secondary)!important;background:0 0!important;border-color:#0000!important}.action-btn:not(.volume-btn).liked:hover{color:var(--text-primary)!important;background:0 0!important;border-color:#0000!important}.action-btn:not(.volume-btn).download-btn,.action-btn:not(.volume-btn).delete-btn{width:34px!important;padding:0!important}.volume-control-wrapper{background:0 0;border:none;border-radius:9999px;align-items:center;gap:0;padding:.4rem;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.volume-control-wrapper:hover{background:0 0;border-color:#0000;gap:.5rem;padding:.4rem}.volume-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex;padding:0!important}.volume-btn:hover{color:var(--text-primary)}.volume-slider{opacity:0;-webkit-appearance:none;cursor:pointer;pointer-events:none;background:0 0;border-radius:2px;outline:none;width:0;height:4px;transition:width .25s cubic-bezier(.4,0,.2,1),opacity .2s}.volume-control-wrapper:hover .volume-slider{opacity:1;pointer-events:auto;width:70px}.volume-slider::-webkit-slider-runnable-track{cursor:pointer;background:var(--border-color);border-radius:2px;width:100%;height:4px}.volume-slider::-webkit-slider-thumb{background:var(--text-primary);cursor:pointer;-webkit-appearance:none;border-radius:50%;width:10px;height:10px;margin-top:-3px;transition:transform .1s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-track{cursor:pointer;background:var(--border-color);border-radius:2px;width:100%;height:4px}.volume-slider::-moz-range-thumb{background:var(--text-primary);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px;transition:transform .1s}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}#root{flex-direction:column;min-height:100vh;display:flex}main{flex:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.6s forwards fadeIn}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.page-loading-bar{z-index:99999;background:linear-gradient(90deg,#1a73e8,#00d2ff,#00ff87);height:3px;animation:.4s cubic-bezier(.1,.8,.3,1) forwards loadingBarRun;position:fixed;top:0;left:0}@keyframes loadingBarRun{0%{opacity:1;width:0%}85%{opacity:1;width:90%}to{opacity:0;width:100%}}.page-transition-wrapper{opacity:0;width:100%;animation:.55s cubic-bezier(.23,1,.32,1) forwards pageTransitionEnter;transform:translateY(10px)}@keyframes pageTransitionEnter{to{opacity:1;transform:translateY(0)}}.waveform-loading-spinner-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.waveform-spinner{border:2px solid var(--border-color);border-top-color:var(--text-primary);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.waveform-wrapper{align-items:center;width:100%;margin-top:.25rem;display:flex;position:relative}.waveform-time{z-index:25;font-variant-numeric:tabular-nums;opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;background:#000;border:1px solid #ffffff26;border-radius:3px;padding:1px 4.5px;font-size:.62rem;font-weight:600;line-height:normal;position:absolute;bottom:0;color:#fff!important}.waveform-time:first-of-type{left:0}.waveform-time:last-of-type{right:0}.waveform-wrapper .waveform-container{height:48px;position:relative;flex:1!important;width:auto!important;margin:0!important}.waveform-container canvas,.waveform-container shadow-root,.waveform-container div{display:block!important}.item-title{cursor:pointer;transition:color .2s}.item-title:hover{color:var(--text-primary);text-decoration:underline}.card-author-meta-clickable{cursor:pointer;align-items:center;gap:.6rem;display:inline-flex}.card-author-meta-clickable:hover .card-author-name{transition:color .2s;color:#9ca3af!important}.card-author-header-group{align-items:center;gap:.8rem;display:flex}.card-author-note-outside{color:var(--text-secondary);opacity:.85;font-size:.85rem;font-style:italic;font-weight:500}.track-note-text{color:var(--text-secondary);opacity:.85;font-size:1rem;font-style:italic;font-weight:500}.card-top-row{justify-content:space-between;align-items:center;width:100%;display:flex}.card-upload-time{color:var(--text-secondary);opacity:.8;-webkit-user-select:none;user-select:none;font-size:.75rem;font-weight:500}.global-player-bar{-webkit-backdrop-filter:blur(12px);z-index:9999;opacity:0;pointer-events:none;background:#18181bd9;border:none;border-top:1px solid #ffffff14;border-radius:0;justify-content:flex-start;align-items:center;gap:1.5rem;width:100%;max-width:none;height:60px;padding:0 1.5rem;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;display:flex;position:fixed;bottom:0;left:0;transform:translateY(100px);box-shadow:0 -10px 30px #0000004d}.global-player-bar.show{opacity:1;pointer-events:auto;transform:translateY(0)}[data-theme=light] .global-player-bar{background:#ffffffd9;border-top:1px solid #00000014;box-shadow:0 -10px 30px #0000000d}.global-player-left{flex-shrink:0;align-items:center;gap:1rem;width:25%;min-width:240px;display:flex}.global-player-avatar-wrapper{border:2px solid var(--accent-color);background:linear-gradient(135deg,#c084fc,#8b5cf6);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.global-player-avatar{object-fit:cover;width:100%;height:100%}.global-player-info{flex-direction:column;min-width:0;display:flex}.global-player-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.global-player-meta{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-top:.15rem;font-size:.75rem;overflow:hidden}.global-player-center{flex:1;align-items:center;gap:1rem;padding:0;display:flex}.global-player-time{color:var(--text-secondary);text-align:center;min-width:50px;font-family:monospace;font-size:.75rem}.global-player-slider-container{flex:1;align-items:center;display:flex;position:relative}.global-player-waveform-container{flex:1;justify-content:center;align-items:center;min-width:100px;display:flex;position:relative}.global-player-waveform{cursor:pointer;width:100%}.global-player-waveform ::-webkit-scrollbar{display:none}.global-player-waveform-loading{color:var(--text-secondary);pointer-events:none;justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}.global-player-right-volume{flex-shrink:0;justify-content:flex-end;align-items:center;display:flex}.global-player-controls{flex-shrink:0;align-items:center;gap:1rem;display:flex}.global-player-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.global-player-btn:hover{color:var(--text-primary);transform:scale(1.08)}.global-player-btn.active{color:var(--accent-color)}.global-player-btn-play{background:var(--text-primary);width:32px;height:32px;box-shadow:none;border-radius:50%;transition:background-color .2s;color:var(--bg-main)!important}.global-player-btn-play:hover{background:var(--text-primary);box-shadow:none;transform:none;color:var(--bg-main)!important}.global-player-volume-wrapper{align-items:center;gap:.5rem;display:flex;position:relative}.global-player-volume-popover{-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;z-index:10000;background:#18181bf2;border:1px solid #ffffff14;border-radius:8px;justify-content:center;align-items:center;width:32px;height:120px;margin-bottom:.75rem;padding:.75rem .5rem;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(10px);box-shadow:0 10px 25px #0006}.global-player-volume-popover:after{content:"";background:0 0;width:100%;height:24px;position:absolute;top:100%;left:0}[data-theme=light] .global-player-volume-popover{background:#fffffff2;border:1px solid #00000014;box-shadow:0 10px 25px #0000001a}.global-player-volume-wrapper:hover .global-player-volume-popover{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.global-player-volume-slider-vertical{appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;outline:none;width:80px;height:4px;margin:0;padding:0;transform:rotate(270deg)}[data-theme=light] .global-player-volume-slider-vertical{background:#0000001a}.global-player-volume-slider-vertical::-webkit-slider-runnable-track{cursor:pointer;width:100%;height:4px}.global-player-volume-slider-vertical::-webkit-slider-thumb{appearance:none;background:var(--text-primary);cursor:pointer;width:10px;height:10px;box-shadow:none;border-radius:50%;margin-top:-3px}.global-player-title:hover{opacity:.8}.global-player-avatar-wrapper{transition:transform .2s,border-color .2s}.global-player-avatar-wrapper:hover{transform:scale(1.05);border-color:var(--text-primary)!important}.global-player-like-icon-btn{cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;transition:all .2s;display:flex}.global-player-like-icon-btn:hover{transform:scale(1.15)}@media (width<=768px){.global-player-bar{border-top:1px solid #ffffff14;border-radius:0;flex-direction:column;gap:.5rem;width:100%;height:auto;padding:.75rem 1rem;bottom:0}.global-player-left,.global-player-center,.global-player-controls,.global-player-right-volume{justify-content:center;width:100%;min-width:0}.global-player-center{padding:0}.global-player-controls{gap:1.5rem}}.navbar{z-index:100;max-width:calc(100% - 2rem);margin:1rem auto;padding:.75rem 0;position:sticky;top:1rem}.navbar-container{justify-content:space-between;align-items:center;gap:2rem;display:flex}.navbar-logo{flex-shrink:0}.logo-text{letter-spacing:-.05em;font-size:1.5rem;font-weight:700}.navbar-search{flex:1;max-width:400px}.search-bar{background:var(--btn-secondary-bg);border:1px solid var(--border-color);border-radius:9999px;align-items:center;padding:.5rem 1rem;transition:all .3s;display:flex}.search-bar:focus-within{background:var(--btn-secondary-bg-hover);border-color:var(--border-hover);box-shadow:0 0 0 2px var(--border-color)}.search-icon{color:var(--text-secondary);margin-right:.5rem}.search-bar input{color:var(--text-primary);font-family:var(--font-family);background:0 0;border:none;outline:none;width:100%;font-size:.9rem}.search-bar input::placeholder{color:var(--text-secondary)}.navbar-actions{align-items:center;gap:1.5rem;display:flex}.navbar-links{gap:1.5rem;display:flex}.user-profile{background:0 0;border:none;border-radius:0;align-items:center;gap:.5rem;padding:0;display:flex}.user-avatar{object-fit:cover;background:#fff;border-radius:50%;width:32px;height:32px}.user-name{font-size:.9rem;font-weight:500}.logout-btn{color:var(--text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:.4rem;transition:all .2s;display:flex}.user-profile.clickable{cursor:pointer}.user-profile.clickable:hover{background:0 0}.profile-container{position:relative}.profile-dropdown{background:var(--bg-card-solid);border:1px solid var(--border-color);z-index:200;border-radius:16px;width:260px;padding:1.2rem;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 10px 30px #00000026}.dropdown-header{border-bottom:1px solid var(--border-color);align-items:center;gap:1rem;margin-bottom:1.2rem;padding-bottom:1.2rem;display:flex}.dropdown-avatar{object-fit:cover;background:var(--bg-secondary);border-radius:50%;width:48px;height:48px}.dropdown-user-info{flex-direction:column;display:flex}.dropdown-name{color:var(--text-primary);font-size:1rem;font-weight:600}.dropdown-id{color:var(--text-secondary);font-size:.8rem}.dropdown-stats{flex-direction:column;gap:.8rem;margin-bottom:1.2rem;display:flex}.stat-row{justify-content:space-between;align-items:center;font-size:.9rem;display:flex}.stat-label{color:var(--text-secondary);align-items:center;gap:.5rem;display:flex}.stat-number{color:var(--text-primary);background:var(--badge-bg);border-radius:999px;padding:.1rem .5rem;font-size:.85rem;font-weight:600}.dropdown-footer{border-top:1px solid var(--border-color);flex-direction:column;gap:.5rem;padding-top:1rem;display:flex}.dropdown-action-btn{background:var(--text-primary);width:100%;color:var(--bg-main);border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem;font-weight:500;transition:opacity .2s;display:flex}.dropdown-action-btn:hover{opacity:.9}.dropdown-logout-btn{color:#e53e3e;background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.6rem;font-weight:500;transition:background .2s;display:flex}.dropdown-logout-btn:hover{background:#e53e3e1a}.nav-link{color:var(--text-secondary);font-size:.9rem;font-weight:500}.nav-link:hover,.nav-link.active{color:var(--text-primary)}.mobile-menu-btn{color:var(--text-primary);background:0 0;display:none}@media (width<=768px){.navbar-search,.navbar-links,.login-btn,.register-btn{display:none}.mobile-menu-btn{display:block}}.theme-toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.theme-toggle-btn:hover{color:var(--text-primary);background:0 0;transform:rotate(15deg)}.nav-share-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;font-size:.9rem;font-weight:500;transition:all .2s;display:inline-flex}.nav-share-btn:hover{color:var(--text-primary)}.notification-container{position:relative}.notification-bell-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:color .2s;display:flex;position:relative}.notification-bell-btn:hover,.notification-bell-btn.active{color:var(--text-primary);background:0 0}.notification-badge{color:#fff;background:#f36;border-radius:9999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:1px 5px;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:-8px;right:-8px;box-shadow:0 0 8px #f366}.notification-dropdown{background:var(--bg-card-solid);border:1px solid var(--border-color);z-index:200;border-radius:16px;width:360px;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 10px 30px #00000040}.notification-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem 1.2rem;display:flex}.notification-header h3{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:600}.mark-all-read-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;outline:none;align-items:center;gap:.3rem;padding:.25rem .5rem;font-size:.8rem;transition:all .2s;display:flex}.mark-all-read-btn:hover{color:var(--text-primary);background:#ffffff0d}.notification-list-container{max-height:400px;overflow-y:auto}.notification-empty{text-align:center;color:var(--text-secondary);padding:2.5rem 1.5rem;font-size:.9rem}.notification-list{flex-direction:column;display:flex}.notification-item{border-bottom:1px solid var(--border-color);cursor:pointer;align-items:flex-start;gap:.8rem;padding:.9rem 1.2rem;transition:background .2s;display:flex;position:relative}.notification-item:hover{background:#ffffff05}.notification-item.unread{background:#ffffff08}.notification-avatar{object-fit:cover;background:var(--bg-secondary);border-radius:50%;flex-shrink:0;width:36px;height:36px}.notification-content{flex-direction:column;flex:1;gap:.2rem;display:flex}.notification-text{color:var(--text-secondary);text-align:left;margin:0;font-size:.82rem;line-height:1.35}.notification-item.unread .notification-text{color:var(--text-primary)}.notification-text strong{color:var(--text-primary);font-weight:600}.notification-time{color:var(--text-secondary);text-align:left;font-size:.72rem}.mark-read-item-btn{cursor:pointer;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-self:center;align-items:center;padding:.4rem;display:flex}.mark-read-item-btn .dot{background:#f36;border-radius:50%;width:7px;height:7px;display:block}.load-more-notifications-btn{border:none;border-top:1px solid var(--border-color);width:100%;color:var(--text-secondary);cursor:pointer;background:0 0;outline:none;padding:.85rem;font-size:.8rem;font-weight:500;transition:all .2s}.load-more-notifications-btn:hover:not(:disabled){color:var(--text-primary);background:#ffffff05}.load-more-notifications-btn:disabled{opacity:.5;cursor:not-allowed}.notification-list-container::-webkit-scrollbar{width:6px}.notification-list-container::-webkit-scrollbar-track{background:0 0}.notification-list-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}.notification-list-container::-webkit-scrollbar-thumb:hover{background:#fff3}.profile-chevron{color:var(--text-secondary);margin-right:.1rem;transition:transform .2s,color .2s}.user-profile:hover .profile-chevron{color:var(--text-primary)}.dropdown-menu-list{flex-direction:column;gap:.3rem;margin-bottom:1rem;display:flex}.dropdown-menu-item{color:var(--text-secondary);cursor:pointer;text-align:left;width:100%;font-size:.9rem;font-family:var(--font-family);background:0 0;border:none;border-radius:8px;outline:none;align-items:center;gap:.8rem;padding:.6rem .8rem;transition:all .2s;display:flex}.dropdown-menu-item:hover{color:var(--text-primary);background:#ffffff0d}.dropdown-menu-item svg{color:var(--text-secondary);flex-shrink:0;transition:color .2s}.dropdown-menu-item:hover svg{color:var(--text-primary)}.hero{text-align:center;justify-content:center;align-items:center;min-height:50vh;padding:2.5rem 0 1.5rem;display:flex;position:relative;overflow:hidden}.hero-content{z-index:10;pointer-events:none;flex-direction:column;align-items:center;max-width:800px;margin:0 auto;display:flex;position:relative}.hero-title,.hero-subtitle,.hero-buttons{pointer-events:auto}.badge{color:var(--accent-primary);background:#7c3aed1a;border:1px solid #7c3aed33;border-radius:9999px;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:inline-block;box-shadow:0 0 20px #7c3aed1a}.hero-title{margin-bottom:.75rem;font-size:4.5rem;line-height:1.1}.hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto 1.5rem;font-size:1.2rem}.hero-buttons{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.btn-lg{padding:.8rem 2rem;font-size:1.05rem}.hero-stats{border-top:1px solid var(--border-color);justify-content:center;gap:4rem;padding-top:2rem;display:flex}.stat-item{flex-direction:column;gap:.5rem;display:flex}.stat-value{font-size:2rem;font-weight:700}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}.glow-effect{filter:blur(100px);z-index:1;opacity:.4;pointer-events:none;border-radius:50%;position:absolute}.glow-1{opacity:.03;background:#000;width:500px;height:500px;top:-10%;left:10%}.glow-2{opacity:.02;background:#000;width:600px;height:600px;bottom:-10%;right:10%}@media (width<=768px){.hero-title{font-size:3rem}.hero-buttons{flex-direction:column;width:100%;padding:0 1rem}.btn-lg{width:100%}.hero-stats{flex-direction:column;gap:2rem}}.hero-marquee-container{z-index:1;pointer-events:auto;width:100vw;padding:2rem 0;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000);mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000)}.hero-marquee-track{gap:1.5rem;width:max-content;animation:60s linear infinite scroll-left;display:flex}.hero-marquee-track:hover{animation-play-state:paused}.hero-marquee-card{cursor:pointer;border:1px solid var(--border-color);background:var(--bg-card);border-radius:12px;flex-shrink:0;width:180px;height:240px;transition:transform .3s cubic-bezier(.25,.8,.25,1),border-color .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000040}.hero-marquee-card:hover{border-color:var(--text-primary);transform:translateY(-8px)scale(1.04);box-shadow:0 12px 30px #00000073}.hero-marquee-img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.25,.8,.25,1)}.hero-marquee-card:hover .hero-marquee-img{transform:scale(1.08)}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.hero-marquee-card-overlay{z-index:1;pointer-events:none;background:linear-gradient(#0000 30%,#0003 60%,#000000bf 100%);position:absolute;inset:0}.hero-marquee-card-name{color:#fff;text-transform:uppercase;letter-spacing:-.01em;z-index:2;pointer-events:none;font-size:1.4rem;font-weight:800;font-family:var(--font-family);text-shadow:0 2px 4px #0000004d;position:absolute;bottom:1.25rem;left:1.25rem}.feed-section{padding:2rem 0 6rem}.feed-container{width:100%;max-width:1200px;margin:0 auto}.feed-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.section-title{font-size:2rem}.feed-filters{gap:.5rem;display:flex}.filter-btn{background:var(--btn-secondary-bg);color:var(--text-secondary);border-radius:9999px;padding:.5rem 1.2rem;font-size:.9rem;transition:all .2s}.filter-btn:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary)}.filter-btn.active{background:var(--text-primary);color:var(--bg-main)}.feed-layout{grid-template-columns:1fr 340px;align-items:start;gap:2.5rem;width:100%;display:grid}.feed-main-content{width:100%}.audio-list{flex-direction:column;gap:1rem;display:flex}.horizontal-card{background:var(--bg-card-solid);border-radius:16px;flex-direction:column;align-items:stretch;gap:.6rem;padding:.75rem 1rem;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s;display:flex;position:relative;overflow:hidden;border:1px solid var(--border-color)!important}[data-theme=dark] .horizontal-card{border:none!important}.horizontal-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0000001a}.horizontal-card.is-active{box-shadow:0 4px 20px #0000000f}.card-author-header{-webkit-backdrop-filter:blur(8px);background:#0f0f12cc;border:1px solid #ffffff1a;border-radius:9999px;align-self:flex-start;align-items:center;gap:.4rem;padding:.25rem .6rem;display:inline-flex;box-shadow:0 2px 10px #00000026}.card-author-avatar{object-fit:cover;border:1.5px solid #fff;border-radius:50%;width:20px;height:20px}.card-author-name{font-size:.75rem;font-weight:600;color:#fff!important}.card-type-badge{color:#fff;background:#ffffff26;border:1px solid #ffffff0d;border-radius:999px;padding:.1rem .4rem;font-size:.65rem;font-weight:500}.card-main-row{align-items:center;gap:1.2rem;width:100%;display:flex}.play-circle-btn.standard{background:var(--text-primary);width:36px;height:36px;color:var(--bg-main);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,opacity .2s,background-color .2s;display:flex;box-shadow:0 4px 12px #00000026}.play-circle-btn.standard:hover{transform:scale(1.05)}.card-waveform-section{flex-direction:column;flex:1;min-width:0;display:flex}.card-waveform-section .item-title{white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);margin:0 0 .2rem;font-size:.95rem;font-weight:600;overflow:hidden}.card-left{flex-shrink:0}.play-circle-btn.large{background:var(--text-primary);width:56px;height:56px;color:var(--bg-main);border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,opacity .2s;display:flex;box-shadow:0 4px 15px #00000026}.play-circle-btn.large:hover{transform:scale(1.05)}.card-middle{flex-direction:column;flex:1;min-width:0;display:flex}.card-header-info{justify-content:space-between;align-items:center;margin-bottom:.2rem;display:flex}.item-title{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.95rem;font-weight:600;overflow:hidden}.item-author{color:var(--text-secondary);margin:0;font-size:.75rem}.waveform-container{width:100%;height:36px;margin:.1rem 0 0;position:relative}.waveform-loading{width:100%;height:100%;color:var(--text-secondary);align-items:center;font-size:.85rem;display:flex;position:absolute;top:0;left:0}.card-footer-info{justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5rem;display:flex;border-top:none!important}.card-meta{gap:.5rem;display:flex}.badge-small{background:var(--badge-bg);color:var(--text-secondary);border-radius:4px;padding:.2rem .6rem;font-size:.75rem;font-weight:500}.card-actions{align-items:center;gap:1rem;display:flex}.feed-sidebar{flex-direction:column;gap:2rem;display:flex}@media (width>=1025px){.feed-sidebar{margin-top:4.8rem}}.history-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;line-height:1.2;overflow:hidden}@media (width<=1024px){.feed-layout{grid-template-columns:1fr}}@media (width<=768px){.feed-header{flex-direction:column;align-items:flex-start}.feed-filters{width:100%;padding-bottom:.5rem;overflow-x:auto}.horizontal-card{flex-direction:column}}@keyframes pulse{0%{opacity:.6}50%{opacity:.3}to{opacity:.6}}.filters-popover-panel{z-index:10000;border:1px solid var(--border-color);border-radius:16px;width:380px;padding:1.25rem;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 30px #0006;background:var(--bg-card-solid)!important;overflow:visible!important}.filters-section-title{color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.75rem;font-size:.72rem;font-weight:700}.filters-row-bpm-key{grid-template-columns:1fr 1fr 1.5fr;align-items:flex-end;gap:.75rem;margin-bottom:1.25rem;display:grid}.filter-input-group{flex-direction:column;gap:.35rem;display:flex}.filter-input-group label{color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase;font-size:.65rem;font-weight:700}.filter-input-group input{background:var(--btn-secondary-bg);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;outline:none;width:100%;padding:.5rem .75rem;font-size:.9rem;transition:all .2s}.filter-input-group input:focus{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--border-color)}.key-select-field{background:var(--btn-secondary-bg);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:space-between;align-items:center;height:38px;padding:.5rem .75rem;font-size:.9rem;transition:all .2s;display:flex}.key-select-field:hover{background:var(--btn-secondary-bg-hover);border-color:var(--border-hover)}.key-select-field.has-value{color:var(--text-primary);font-weight:600}.key-sub-popover-panel{z-index:10100;border:1px solid var(--border-color);border-radius:12px;width:290px;padding:1rem;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 10px 40px #0009;background:var(--bg-card-solid)!important;-webkit-backdrop-filter:none!important}.filters-tags-section{margin-top:.5rem}.filters-tags-grid{flex-wrap:wrap;gap:.4rem;margin-top:.5rem;display:flex}.filter-tag-chip{background:var(--btn-secondary-bg);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:9999px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:all .2s}.filter-tag-chip:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary);border-color:#fff3}[data-theme=light] .filter-tag-chip:hover{border-color:#0003}.filter-tag-chip.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-main)!important}.key-row{justify-content:center;gap:.4rem;margin-bottom:.6rem;display:flex}.key-filter-trigger-btn{border:1px solid var(--border-color)!important;background:var(--bg-card)!important;color:var(--text-secondary)!important;border-radius:8px!important;padding:.5rem 1rem!important;font-weight:600!important}.key-filter-trigger-btn:hover{background:var(--btn-secondary-bg-hover)!important;color:var(--text-primary)!important}.key-filter-trigger-btn.active{background:var(--text-primary)!important;color:var(--bg-main)!important;border-color:var(--text-primary)!important}.key-btn{border:1px solid var(--border-color);background:var(--btn-secondary-bg);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.key-btn:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary);border-color:#fff3}[data-theme=light] .key-btn:hover{border-color:#0003}.key-btn.selected{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-main)!important}.mode-btn{border:1px solid var(--border-color);background:var(--btn-secondary-bg);color:var(--text-secondary);cursor:pointer;text-align:center;border-radius:9999px;flex:1;padding:.5rem;font-size:.8rem;font-weight:600;transition:all .2s}.mode-btn:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary);border-color:#fff3}[data-theme=light] .mode-btn:hover{border-color:#0003}.mode-btn.selected{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-main)!important}.key-popover-footer{border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-top:1.25rem;padding-top:.75rem;display:flex}.key-popover-footer .clear-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px;font-size:.8rem;transition:color .2s}.key-popover-footer .clear-btn:hover{color:var(--text-primary);text-decoration:underline}.key-popover-footer .close-btn{background:var(--text-primary);cursor:pointer;border:none;border-radius:9999px;padding:.5rem 1.25rem;font-size:.8rem;font-weight:700;transition:opacity .2s;color:var(--bg-main)!important}.key-popover-footer .close-btn:hover{opacity:.9}.modal-overlay{background:var(--modal-overlay);-webkit-backdrop-filter:blur(12px);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--bg-card-solid);border:1px solid var(--border-color);text-align:center;border-radius:24px;width:90%;max-width:400px;padding:2.5rem;transition:background-color .2s,border-color .2s;position:relative;box-shadow:0 20px 40px #0003}.modal-close{color:var(--text-secondary);background:0 0;justify-content:center;align-items:center;transition:color .2s;display:flex;position:absolute;top:1.5rem;right:1.5rem}.modal-close:hover{color:var(--text-primary)}.modal-header{margin-bottom:2rem}.modal-title{margin-bottom:.5rem;font-size:1.8rem}.modal-subtitle{color:var(--text-secondary);font-size:.95rem}.modal-body{margin-bottom:2rem}.discord-btn{background:var(--text-primary);width:100%;color:var(--bg-main);box-shadow:0 4px 15px var(--border-color);border-radius:12px;justify-content:center;align-items:center;gap:.8rem;padding:.9rem;font-size:1rem;font-weight:500;transition:transform .2s,box-shadow .2s,background-color .2s,color .2s;display:flex}.discord-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000040}.discord-icon{width:24px;height:24px}.modal-footer{color:var(--text-secondary);font-size:.8rem}.modal-footer a{color:var(--text-primary);text-decoration:underline;-webkit-text-decoration-color:var(--border-color);text-decoration-color:var(--border-color);font-weight:500}.modal-footer a:hover{-webkit-text-decoration-color:var(--text-primary);text-decoration-color:var(--text-primary)}.auth-form{text-align:left;flex-direction:column;gap:1rem;display:flex}.auth-input-group{flex-direction:column;gap:.35rem;display:flex}.auth-input-group label{color:var(--text-secondary);font-size:.8rem;font-weight:500}.auth-input{border:1px solid var(--border-color);background:var(--bg-secondary);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:.75rem .9rem;font-size:.9rem;transition:border-color .2s,background-color .2s}.auth-input:focus{border-color:var(--text-primary);background:var(--bg-card-solid)}.auth-submit-btn{background:var(--text-primary);width:100%;color:var(--bg-main);cursor:pointer;border:none;border-radius:10px;margin-top:.5rem;padding:.85rem;font-size:.95rem;font-weight:600;transition:transform .2s,opacity .2s}.auth-submit-btn:hover{transform:translateY(-1px)}.auth-submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.auth-error-box{color:#ef4444;text-align:left;background:#ef444414;border:1px solid #ef444426;border-radius:8px;margin-bottom:1rem;padding:.7rem .9rem;font-size:.8rem;font-weight:500}.auth-toggle-text{color:var(--text-secondary);margin-top:1.2rem;font-size:.85rem}.auth-toggle-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;margin-left:.3rem;padding:0;font-weight:600;text-decoration:underline}.auth-divider{text-align:center;color:var(--text-secondary);align-items:center;margin:1.2rem 0;font-size:.8rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";border-bottom:1px solid var(--border-color);flex:1}.auth-divider:not(:empty):before{margin-right:.75em}.auth-divider:not(:empty):after{margin-left:.75em}.upload-page-container{max-width:800px;margin:1.5rem auto 4rem;padding:0 1.5rem}.upload-page-header{margin-bottom:1.5rem}.back-btn{color:var(--text-secondary);border:1px solid var(--border-color);background:0 0;border-radius:20px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s;display:inline-flex}.back-btn:hover{color:var(--text-primary);background:var(--btn-secondary-bg);border-color:var(--border-hover);transform:translate(-2px)}.page-title{letter-spacing:-.02em;margin-bottom:.6rem;font-size:2rem;font-weight:700}.page-subtitle{color:var(--text-secondary);font-size:1.05rem;font-weight:400}.auth-fallback{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;margin-top:2rem;padding:4rem 3rem;display:flex}.fallback-icon{color:#e53e3e}.auth-loading-card{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:300px;margin-top:2rem;padding:4rem 3rem;display:flex}.upload-drop-zone{border:2px dashed var(--border-color);text-align:center;cursor:pointer;background:linear-gradient(135deg, var(--bg-secondary) 0%, #1414161a 100%);border-radius:16px;flex-direction:column;align-items:center;gap:1.25rem;padding:2.5rem 2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.upload-drop-zone:before{content:"";opacity:0;pointer-events:none;z-index:1;background:radial-gradient(circle,#ffffff05 0%,#0000 70%);transition:opacity .3s;position:absolute;inset:0}[data-theme=light] .upload-drop-zone:before{background:radial-gradient(circle,#00000003 0%,#0000 70%)}.upload-drop-zone:hover:before{opacity:1}.upload-drop-zone:hover,.upload-drop-zone.dragging{border-color:var(--text-primary);background:linear-gradient(135deg, var(--btn-secondary-bg-hover) 0%, #ffffff03 100%);box-shadow:0 10px 40px #0000001a}[data-theme=dark] .upload-drop-zone:hover,[data-theme=dark] .upload-drop-zone.dragging{box-shadow:0 10px 40px #0000004d}.drop-zone-label{cursor:pointer;z-index:2;flex-direction:column;align-items:center;gap:1.2rem;width:100%;display:flex}.upload-icon-wrapper{background:var(--bg-card-solid);border:1px solid var(--border-color);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 8px 30px #0000001f}.upload-drop-zone:hover .upload-icon-wrapper{border-color:var(--text-primary);transform:translateY(-8px)scale(1.05);box-shadow:0 12px 35px #ffffff0d}[data-theme=light] .upload-drop-zone:hover .upload-icon-wrapper{box-shadow:0 12px 35px #0000001a}.drop-icon{color:var(--text-secondary);transition:all .3s}.upload-drop-zone:hover .drop-icon{color:var(--text-primary);transform:translateY(-2px)}.upload-drop-zone h3{letter-spacing:-.01em;color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.upload-drop-zone p{color:var(--text-secondary);margin:0;font-size:.95rem}.drop-error-msg{color:#e53e3e;z-index:2;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.9rem;display:flex}.selected-file-info{background:var(--btn-secondary-bg);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;display:flex}.music-file-icon{color:var(--text-primary);flex-shrink:0}.file-detail{flex-direction:column;flex:1;min-width:0;display:flex}.file-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:1.1rem;font-weight:600;overflow:hidden}.file-size{color:var(--text-secondary);font-size:.9rem}.btn-remove-file{color:var(--text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.btn-remove-file:hover{color:#e53e3e;background:#e53e3e1a}.upload-card{border-radius:16px;padding:1.75rem 2rem}.slide-down-form{flex-direction:column;gap:1.75rem;display:flex}.form-section{border-bottom:1px solid var(--border-color);flex-direction:column;gap:1rem;padding-bottom:1.5rem;display:flex}.form-section:last-of-type{border-bottom:none;padding-bottom:0}.section-title-form{color:var(--text-primary);border-left:4px solid var(--text-primary);letter-spacing:-.01em;margin:0;padding-left:.75rem;font-size:1.15rem;font-weight:600}.form-group{flex-direction:column;gap:.6rem;display:flex}.standard-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}.form-group input[type=text],.form-group input[type=number]{border:1px solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-family);color:var(--text-primary);border-radius:12px;outline:none;width:100%;padding:.7rem 1rem;font-size:1rem;transition:all .2s}.form-group input:focus{border-color:var(--text-primary);background:var(--bg-main);box-shadow:0 0 0 2px var(--border-color)}.form-row-two{grid-template-columns:1.2fr 2fr;align-items:flex-end;gap:1.5rem;display:grid}.form-row-three{grid-template-columns:1.2fr 1fr 1fr;align-items:flex-end;gap:1.5rem;display:grid}.form-group-border-label{width:100%;position:relative}.form-group-border-label label{background:var(--bg-card-solid);color:var(--text-secondary);letter-spacing:.05em;pointer-events:none;z-index:2;text-transform:uppercase;padding:0 6px;font-size:.72rem;font-weight:700;transition:color .2s;position:absolute;top:0;left:12px;transform:translateY(-50%)}.form-group-border-label input{border:1px solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-family);color:var(--text-primary);border-radius:12px;outline:none;width:100%;min-height:40px;padding:.7rem 1rem;font-size:1rem;transition:all .2s}.form-group-border-label input:focus{border-color:var(--text-primary);background:var(--bg-main);box-shadow:0 0 0 2px var(--border-color)}.form-group-border-label:focus-within label{color:var(--text-primary)}.custom-select-container{flex-direction:column;width:100%;display:flex;position:relative}.custom-select-label{background:var(--bg-card-solid);color:var(--text-secondary);letter-spacing:.05em;pointer-events:none;z-index:2;padding:0 6px;font-size:.72rem;font-weight:700;transition:color .2s;position:absolute;top:0;left:12px;transform:translateY(-50%)}.custom-select-box{border:1px solid var(--border-color);background:var(--bg-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:space-between;align-items:center;min-height:40px;padding:.7rem 1rem;transition:all .2s;display:flex;position:relative}.custom-select-box:hover{border-color:var(--border-hover);background:var(--btn-secondary-bg-hover)}.custom-select-container.is-open .custom-select-box{border-color:var(--text-primary);background:var(--bg-main);box-shadow:0 0 0 2px var(--border-color)}.custom-select-container.is-open .custom-select-label{color:var(--text-primary)}.custom-select-value{color:var(--text-primary);font-size:1rem;font-weight:500}.custom-select-arrow{color:var(--text-secondary);transition:transform .25s}.custom-select-container.is-open .custom-select-arrow{color:var(--text-primary);transform:rotate(180deg)}.custom-select-dropdown{background:var(--bg-card-solid);border:1px solid var(--border-color);z-index:100;border-radius:12px;width:100%;max-height:250px;margin:0;padding:.5rem 0;list-style:none;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto;box-shadow:0 10px 30px #00000014}[data-theme=dark] .custom-select-dropdown{box-shadow:0 10px 30px #0006}.custom-select-option{color:var(--text-primary);cursor:pointer;padding:.8rem 1.2rem;font-size:.95rem;transition:all .2s}.custom-select-option:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary)}[data-theme=light] .custom-select-option:hover{color:#1a73e8;background:#f0f7ff}.custom-select-option.is-selected{background:var(--text-primary);color:var(--bg-main);font-weight:600}.default-tags-grid{flex-wrap:wrap;gap:.8rem;margin-bottom:.5rem;display:flex}.tag-select-chip{background:var(--btn-secondary-bg);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;padding:.65rem 1.3rem;font-size:.95rem;font-weight:500;transition:all .2s;display:flex}.tag-select-chip:hover{background:var(--btn-secondary-bg-hover);color:var(--text-primary);border-color:var(--border-hover);transform:translateY(-2px)}.tag-select-chip.active{background:var(--text-primary);color:var(--bg-main);border-color:var(--text-primary);box-shadow:0 4px 15px #00000014}.checkbox-selection-row{gap:2.5rem;margin:.5rem 0 1rem;display:flex}.custom-checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem .8rem;transition:background-color .2s;display:inline-flex;position:relative}.custom-checkbox-container:hover{background-color:var(--btn-secondary-bg-hover)}.custom-checkbox-container input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkmark-box{border:2px solid var(--border-color);background:var(--bg-secondary);color:#0000;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;transition:all .2s;display:flex}.custom-checkbox-container:hover .checkmark-box{border-color:var(--border-hover)}.custom-checkbox-container.checked .checkmark-box{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-main)}.checkmark-icon{transition:transform .2s cubic-bezier(.175,.885,.32,1.275);transform:scale(0)}.custom-checkbox-container.checked .checkmark-icon{transform:scale(1)}.checkbox-label{color:var(--text-secondary);font-size:1rem;font-weight:500;transition:color .2s}.custom-checkbox-container.checked .checkbox-label{color:var(--text-primary);font-weight:600}.tag-input-container{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px;flex-direction:column;gap:1rem;padding:1rem;transition:border-color .2s;display:flex}.tag-input-container:focus-within{border-color:var(--text-primary);background:var(--bg-main);box-shadow:0 0 0 2px var(--border-color)}.tag-badges-list{flex-wrap:wrap;gap:.6rem;display:flex}.tag-badge{background:var(--badge-bg);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;align-items:center;gap:.5rem;padding:.4rem .9rem;font-size:.9rem;font-weight:500;display:inline-flex}.tag-badge button{color:var(--text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:.15rem;transition:all .2s;display:flex}.tag-badge button:hover{color:var(--text-primary);background:#0000000d}[data-theme=dark] .tag-badge button:hover{background:#ffffff1a}.tag-input-container input{width:100%;color:var(--text-primary);font-family:var(--font-family);font-size:1rem;box-shadow:none!important;background:0 0!important;border:none!important;outline:none!important;padding:.5rem .2rem!important}.upload-progress-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;width:100%;margin-top:1.5rem;padding:1.5rem}.progress-header{color:var(--text-primary);justify-content:space-between;margin-bottom:1rem;font-size:1rem;font-weight:600;display:flex}.progress-bar-bg{background:var(--btn-secondary-bg-hover);border-radius:999px;width:100%;height:10px;overflow:hidden}.progress-bar-fill{background:var(--text-primary);border-radius:999px;height:100%;transition:width .2s ease-out}.form-actions{margin-top:1.5rem}.submit-share-btn{border-radius:14px;width:100%;padding:1.2rem;font-size:1.1rem;font-weight:600}.success-card{text-align:center;flex-direction:column;align-items:center;gap:1.8rem;margin-top:1rem;padding:5rem 3rem;display:flex}.success-icon-wrapper{color:#fff;background:#10b981;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;animation:.5s cubic-bezier(.175,.885,.32,1.275) scaleIn;display:flex;box-shadow:0 4px 20px #10b98140}.success-card h2{margin:0;font-size:2rem}.success-msg{color:var(--text-secondary);max-width:520px;margin:0;font-size:1.1rem;line-height:1.6}.success-actions{gap:1.2rem;margin-top:1.5rem;display:flex}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-down{animation:.5s cubic-bezier(.4,0,.2,1) forwards slideDown}@media (width<=768px){.upload-card{padding:2rem 1.5rem}.form-row-three{grid-template-columns:1fr;gap:1.5rem}.success-actions{flex-direction:column;width:100%}.success-actions button{width:100%}.category-selection-grid{grid-template-columns:1fr}}.loops-page-container{padding:3rem 2rem 6rem}.loops-page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;margin-bottom:3rem;display:flex}.header-text-section{flex:1}.page-title{margin-bottom:.5rem;font-size:3rem;font-weight:700}.page-subtitle{color:var(--text-secondary);font-size:1.1rem}.search-wrapper{flex-shrink:0;width:320px}.loops-page-layout{grid-template-columns:1fr 340px;align-items:start;gap:2.5rem;display:grid}.loops-main-content{box-shadow:none;background:0 0;border:none;border-radius:0;padding:0;overflow:visible}.loops-list{flex-direction:column;gap:1.2rem;width:100%;display:flex}.loop-card{width:100%;transition:transform .2s,box-shadow .2s,border-color .25s,background-color .25s}.loop-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0000001a}.loop-card.is-active{border-color:var(--border-hover);box-shadow:0 4px 20px #0000000f}.waveform-placeholder-static{align-items:center;width:100%;height:48px;display:flex;position:relative}.static-wave-line{background:var(--border-color);border-radius:2px;width:100%;height:2px;transition:background-color .25s}.loop-card:hover .static-wave-line{background:var(--border-hover)}.card-waveform-real{width:100%;height:48px;position:relative}.loops-loader{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;padding:6rem 0;display:flex}.loops-empty-state{text-align:center;color:var(--text-secondary);width:100%;padding:6rem 0}.loops-empty-state h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.4rem}.loops-sidebar{flex-direction:column;gap:2rem;display:flex}.history-box{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;box-shadow:0 4px 30px #0000000d}.box-header{border-bottom:1px solid var(--border-color);align-items:center;gap:.8rem;margin-bottom:1.5rem;padding-bottom:.8rem;display:flex}.box-icon{color:var(--text-secondary)}.history-box h3{color:var(--text-primary);letter-spacing:-.01em;font-size:1.15rem;font-weight:600}.history-auth-fallback{text-align:center;color:var(--text-secondary);padding:2rem 0}.lock-icon{opacity:.4;margin-bottom:1rem}.history-auth-fallback p{font-size:.85rem;line-height:1.4}.sidebar-loader{color:var(--text-secondary);text-align:center;padding:2rem 0;font-size:.85rem}.history-empty{color:var(--text-secondary);text-align:center;padding:2.5rem 0;font-size:.85rem;font-style:italic}.history-list{flex-direction:column;gap:.6rem;list-style:none;display:flex}.history-item{cursor:pointer;background:#00000005;border:1px solid #0000;border-radius:8px;align-items:center;gap:.8rem;padding:.6rem .8rem;transition:all .2s;display:flex}[data-theme=dark] .history-item{background:#ffffff03}.history-item:hover{background:var(--btn-secondary-bg-hover);border-color:var(--border-hover);transform:translate(2px)}.history-item.active{background:var(--btn-secondary-bg);border-color:var(--text-primary)}.history-play-icon{background:var(--btn-secondary-bg);width:24px;height:24px;color:var(--text-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .2s;display:flex}.history-item:hover .history-play-icon{background:var(--text-primary);color:var(--bg-main)}.history-details{flex-direction:column;min-width:0;display:flex}.history-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.history-meta{color:var(--text-secondary);margin-top:.1rem;font-size:.75rem}@media (width<=1024px){.loops-page-layout{grid-template-columns:1fr}}@media (width<=768px){.loops-page-container{padding:2rem 1rem 4rem}.loops-page-header{flex-direction:column;align-items:flex-start;gap:1.5rem}.search-wrapper{width:100%}}.search-section{padding:3rem 2rem 6rem}.search-page-header{margin-bottom:3rem}.search-layout{grid-template-columns:1fr 340px;align-items:start;gap:2.5rem;display:grid}.search-main-content{box-shadow:none;background:0 0;border:none;padding:0}.search-loader{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:6rem 0;display:flex}.loading-spinner{border:3px solid var(--border-color);border-top-color:var(--text-primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.search-empty-state{text-align:center;color:var(--text-secondary);padding:6rem 0}.empty-icon{opacity:.5;margin-bottom:1.5rem}.search-empty-state h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.4rem}.search-sidebar{flex-direction:column;gap:2rem;display:flex}@media (width<=1024px){.search-layout{grid-template-columns:1fr}}@media (width<=768px){.search-section{padding:2rem 1rem 4rem}}.profile-section{padding:1rem 2rem 6rem}.profile-container-main{flex-direction:column;gap:0;max-width:1000px;margin:0 auto;display:flex}.profile-loading-container{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:8rem 0;display:flex}.profile-error-container{text-align:center;max-width:600px;color:var(--text-secondary);margin:4rem auto;padding:6rem 0}.error-icon{color:#ef4444;opacity:.8;margin-bottom:1.5rem}.profile-error-container h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.4rem}.profile-banner{background:var(--bg-glass);align-items:flex-end;height:280px;display:flex;position:relative;overflow:hidden;box-shadow:none!important;border:none!important;border-radius:0!important}.profile-banner-bg{z-index:1;background:radial-gradient(circle at 10% 20%,#a855f740,#0000 45%),radial-gradient(circle at 90% 80%,#6366f140,#0000 45%),linear-gradient(#0c0c0e33 0%,#0c0c0ed9 100%);width:100%;height:100%;position:absolute;top:0;left:0}[data-theme=light] .profile-banner-bg{background:radial-gradient(circle at 10% 20%,#a855f726,#0000 45%),radial-gradient(circle at 90% 80%,#6366f126,#0000 45%),linear-gradient(#ffffff1a 0%,#ffffffd9 100%)}.profile-banner-content{z-index:2;justify-content:space-between;align-items:flex-end;width:100%;padding:2.5rem;display:flex;position:relative}.profile-banner-left{align-items:center;gap:2rem;display:flex}.profile-avatar-container{background:#ffffff0d;border-radius:50%;flex-shrink:0;width:130px;height:130px;overflow:hidden;box-shadow:none!important;border:none!important}.profile-banner-avatar{object-fit:cover;width:100%;height:100%}.profile-user-details{flex-direction:column;gap:.35rem;display:flex}.profile-username-row{align-items:center;gap:1rem;display:flex}.profile-username{margin:0;font-size:2.2rem;font-weight:700}.profile-joined-date{color:var(--text-secondary);align-items:center;gap:.35rem;margin:0;font-size:.95rem;display:flex}.profile-user-id{color:var(--text-secondary);opacity:.7;margin:0;font-size:.85rem}.profile-banner-right{align-self:flex-end;gap:1.5rem;margin-bottom:.5rem;display:flex}.profile-banner-stat{-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-color);background:#ffffff08;border-radius:12px;flex-direction:column;align-items:center;min-width:105px;padding:.75rem 1.25rem;display:flex}.stat-value{color:var(--text-primary);font-size:1.5rem;font-weight:700}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem;font-size:.7rem}.profile-tabs-row{background:0 0;border-bottom:1px solid #ffffff1a;border-radius:0;align-items:center;gap:2rem;height:2.5rem;margin-bottom:2rem;padding:0 .5rem;display:flex}[data-theme=light] .profile-tabs-row{border-bottom:1px solid #0000001a}.profile-tab-btn{height:100%;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;align-items:center;padding:0;font-size:1rem;font-weight:600;transition:all .2s ease-in-out;display:flex}.profile-tab-btn:hover{color:var(--text-primary);background:0 0}.profile-tab-btn.active{color:#fff;box-shadow:none;background:0 0;border-bottom:2px solid #a855f7}[data-theme=light] .profile-tab-btn.active{color:#000}.profile-empty-state{text-align:center;color:var(--text-secondary);background:var(--bg-glass);border-radius:16px;padding:6rem 0}.profile-empty-state h3{color:var(--text-primary);margin-top:1rem;margin-bottom:.5rem;font-size:1.3rem}.profile-track-card{border:1px solid var(--border-color)!important}[data-theme=dark] .profile-track-card{border:none!important}.profile-track-card .card-footer-info{border-top:none!important}@media (width<=768px){.profile-section{padding:.75rem 1rem 4rem}.profile-banner{align-items:flex-start;height:auto;min-height:380px}.profile-banner-content{text-align:center;flex-direction:column;align-items:center;gap:2rem;padding:2rem 1.5rem}.profile-banner-left{flex-direction:column;gap:1.25rem}.profile-avatar-container{width:100px;height:100px}.profile-username-row{justify-content:center}.profile-username{font-size:1.75rem}.profile-joined-date{justify-content:center}.profile-banner-right{justify-content:center;gap:.75rem;width:100%;margin-bottom:0}.profile-banner-stat{min-width:unset;flex:1;padding:.5rem .25rem}.stat-value{font-size:1.25rem}.stat-label{font-size:.6rem}.profile-tabs-row{flex-flow:wrap;gap:1.5rem}}.profile-avatar-container.editable{cursor:pointer;position:relative}.avatar-edit-overlay{-webkit-backdrop-filter:blur(8px);color:#fff;opacity:0;z-index:3;background:#00000059;border:1px solid #ffffff26;border-radius:6px;justify-content:center;align-items:center;width:auto;height:auto;padding:.35rem .75rem;font-size:.75rem;font-weight:600;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:none!important}.profile-avatar-container.editable:hover .avatar-edit-overlay{opacity:1}.banner-edit-container{z-index:10;width:auto;height:auto;position:absolute;top:1.5rem;right:1.5rem}.banner-edit-overlay{opacity:0;cursor:pointer;background:0 0;justify-content:center;align-items:center;transition:opacity .2s;display:flex}.profile-banner.editable:hover .banner-edit-overlay{opacity:1}.profile-banner.editable .banner-edit-container:has(.banner-dropdown) .banner-edit-overlay{opacity:1!important}.profile-banner:has(.profile-avatar-container:hover) .banner-edit-overlay{opacity:0!important}.banner-edit-overlay-inner{-webkit-backdrop-filter:blur(8px);color:#fff;background:#0c0c0ebf;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:.5rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;display:flex;transition:none!important}.banner-edit-overlay:hover .banner-edit-overlay-inner{background:#0c0c0ee6;color:#b3b3b3!important;transform:none!important}.avatar-options-dropdown.banner-dropdown{position:absolute;inset:calc(100% + 8px) 0 auto auto;transform:none}.profile-upload-modal-overlay{background:var(--modal-overlay);-webkit-backdrop-filter:blur(12px);z-index:9999;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.profile-upload-modal{background:var(--bg-card-solid);border:1px solid var(--border-color);border-radius:24px;flex-direction:column;width:90%;max-width:500px;transition:background-color .2s,border-color .2s;display:flex;overflow:hidden;box-shadow:0 20px 40px #0003}.profile-upload-modal .modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem 2rem 1rem;display:flex}.profile-upload-modal .modal-header h3{color:var(--text-primary);margin:0;font-size:1.4rem;font-weight:700}.modal-close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.modal-close-btn:hover{color:var(--text-primary)}.modal-tabs{border-bottom:1px solid var(--border-color);gap:1.5rem;padding:.5rem 2rem 0;display:flex}.modal-tabs .modal-tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.5rem;padding:.75rem .25rem;font-size:.95rem;font-weight:600;transition:color .2s;display:flex;position:relative}.modal-tabs .modal-tab-btn:hover,.modal-tabs .modal-tab-btn.active{color:var(--text-primary)}.modal-tabs .modal-tab-btn.active:after{content:"";background:var(--text-primary);width:100%;height:2px;position:absolute;bottom:0;left:0}.profile-upload-modal .modal-body{flex-direction:column;justify-content:center;min-height:220px;padding:2rem;display:flex}.drag-drop-zone{border:1px dashed var(--border-color);text-align:center;cursor:pointer;background:var(--bg-secondary);border-radius:12px;justify-content:center;align-items:center;min-height:180px;padding:1.5rem;transition:border-color .2s,background-color .2s;display:flex}.drag-drop-zone:hover,.drag-drop-zone.drag-active{border-color:var(--text-primary)}.drag-drop-placeholder{flex-direction:column;align-items:center;gap:.75rem;display:flex}.drag-drop-placeholder p{color:var(--text-secondary);margin:0;font-size:.9rem}.drag-drop-placeholder p span{color:var(--text-primary);font-weight:600}.drag-drop-placeholder .file-hint{color:var(--text-secondary);opacity:.6;font-size:.75rem}.upload-icon-pulse{color:var(--text-secondary)}.preview-container{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.preview-container .image-preview{object-fit:contain;border:1px solid var(--border-color);border-radius:8px;max-width:100%;max-height:150px}.remove-file-btn{color:#ef4444;cursor:pointer;background:#ef444414;border:1px solid #ef444426;border-radius:8px;align-items:center;gap:.35rem;padding:.45rem 1rem;font-size:.85rem;font-weight:600;transition:background-color .2s;display:flex}.remove-file-btn:hover{background:#ef444426}.url-input-container{flex-direction:column;gap:.75rem;display:flex}.url-input-container .input-wrapper{align-items:center;display:flex;position:relative}.url-input-container .input-icon{color:var(--text-secondary);pointer-events:none;position:absolute;left:1rem}.url-input-container input{background:var(--bg-secondary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:.75rem 1rem .75rem 2.5rem;font-size:.9rem;transition:border-color .2s,background-color .2s}.url-input-container input:focus{border-color:var(--text-primary);background:var(--bg-card-solid)}.url-hint{color:var(--text-secondary);opacity:.7;margin-top:-.25rem;font-size:.75rem}.url-preview-wrapper{margin-top:1rem}.url-preview-wrapper .preview-title{color:var(--text-secondary);margin:0 0 .5rem;font-size:.8rem;font-weight:600}.url-preview-box{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;justify-content:center;padding:.5rem;display:flex}.url-preview-box .image-preview{object-fit:contain;border-radius:4px;max-width:100%;max-height:100px}.upload-error-msg{color:#ef4444;background:#ef444414;border:1px solid #ef444426;border-radius:8px;align-items:center;margin-top:1rem;padding:.7rem .9rem;font-size:.8rem;font-weight:500;display:flex}.profile-upload-modal .modal-footer{border-top:1px solid var(--border-color);justify-content:flex-end;gap:.75rem;padding:1.25rem 2rem 1.5rem;display:flex}.profile-upload-modal .cancel-btn{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:0 0;border-radius:10px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;transition:background-color .2s}.profile-upload-modal .cancel-btn:hover{background:#ffffff0d}.profile-upload-modal .submit-btn{background:var(--text-primary);color:var(--bg-main);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;min-width:90px;height:42px;padding:.75rem 1.75rem;font-size:.95rem;font-weight:600;transition:transform .2s,opacity .2s;display:flex}.profile-upload-modal .submit-btn:hover:not(:disabled){transform:translateY(-1px)}.profile-upload-modal .submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.loading-spinner-small{border:2px solid #ffffff4d;border-top-color:var(--bg-main);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}.preview-container .image-preview.circular-preview,.url-preview-box .image-preview.circular-preview{object-fit:cover;border-radius:50%;width:120px;max-width:120px;height:120px;max-height:120px;margin:0 auto;display:block}.preview-container .image-preview.banner-preview,.url-preview-box .image-preview.banner-preview{object-fit:cover;border-radius:8px;width:100%;max-width:100%;height:120px;max-height:120px}.position-slider-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;gap:.75rem;margin-top:1.5rem;padding:1rem;display:flex}.slider-label-row{justify-content:space-between;align-items:center;display:flex}.slider-label{color:var(--text-secondary);font-size:.85rem;font-weight:600}.slider-value{color:var(--text-primary);font-size:.85rem;font-weight:700}.position-range-input{background:var(--border-color);-webkit-appearance:none;cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.position-range-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-primary);cursor:pointer;border:2px solid var(--bg-card-solid);border-radius:50%;width:18px;height:18px;transition:transform .1s}.position-range-input::-webkit-slider-thumb:hover{transform:scale(1.15)}.delete-btn{color:var(--text-secondary);transition:all .2s}.delete-btn:hover{color:#ef4444!important;background:#ef444414!important;border-color:#ef444426!important}.profile-upload-modal.delete-confirm-modal{max-width:440px}.profile-upload-modal .delete-confirm-btn{color:#fff;background:#ef4444;border:none}.profile-upload-modal .delete-confirm-btn:hover:not(:disabled){background:#dc2626;transform:translateY(-1px)}.delete-confirm-text{color:var(--text-primary);text-align:center;margin-bottom:.5rem;font-size:1rem;line-height:1.5}.delete-confirm-text strong{color:#ef4444}.delete-confirm-subtext{color:var(--text-secondary);text-align:center;margin:0;font-size:.95rem;font-weight:500}.profile-content-layout{grid-template-columns:1fr 280px;gap:2rem;margin-top:.5rem;display:grid}.profile-main-content{margin-top:2.5rem}.profile-sidebar{flex-direction:column;gap:0;margin-top:2.5rem;display:flex}.profile-sidebar .info-card{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:1.5rem}.profile-sidebar .card-heading{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin-bottom:1.25rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.visitors-list{flex-direction:column;gap:1rem;display:flex}.visitor-item{cursor:pointer;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem;transition:all .2s ease-in-out;display:flex}.visitor-item:hover{background:var(--btn-secondary-bg-hover);transform:translate(2px)}.visitor-avatar{background:var(--badge-bg);border-radius:50%;flex-shrink:0;width:40px;height:40px}.visitor-info{flex-direction:column;min-width:0;display:flex}.visitor-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.visitor-time{color:var(--text-secondary);opacity:.8;margin-top:.15rem;font-size:.75rem}.no-visitors{color:var(--text-secondary);opacity:.7;text-align:center;padding:1rem 0;font-size:.85rem}@media (width<=768px){.profile-content-layout{flex-direction:column;gap:1.5rem;display:flex}.profile-sidebar{display:contents}.sidebar-follow-btn-row{order:1;justify-content:center!important;height:auto!important;margin:1rem 0 0!important}.sidebar-follow-stats-row{order:2;justify-content:center!important;height:auto!important;margin-bottom:.5rem!important}.sidebar-social-links-wrapper{order:3;margin-bottom:1rem!important}.profile-main-content{order:4;margin-top:0!important}.visitors-card{order:5}}.profile-banner-wrapper{width:100%;position:relative}.profile-action-stats-container{flex-wrap:nowrap;align-items:center;gap:2rem;display:flex}.sidebar-follow-btn-row{border-bottom:none;justify-content:flex-end;align-items:center;gap:.75rem;height:2.5rem;margin-bottom:0;display:flex}.profile-share-btn-action{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:.45rem;padding:.5rem 1.2rem;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.profile-share-btn-action:hover{background:var(--btn-secondary-bg-hover);transform:translateY(-1px)}.profile-share-btn-action.copied{color:#10b981;background:#10b9811a;border-color:#10b981}.sidebar-follow-stats-row{z-index:1;justify-content:center;align-items:center;gap:1.25rem;height:2.5rem;margin-top:0;display:flex;position:relative}.follow-stat-item{cursor:pointer;flex-shrink:0;transition:opacity .2s;background:0 0!important;border:none!important;border-radius:0!important;flex-direction:row!important;align-items:center!important;gap:.35rem!important;height:auto!important;padding:0!important;display:flex!important}.follow-stat-item:hover{opacity:.8}.follow-stat-item.no-click{cursor:default}.follow-stat-item.no-click:hover{opacity:1}.follow-stat-label{color:var(--text-secondary);order:2;align-items:center;display:flex;height:auto!important;font-size:.8rem!important}.follow-stat-value{order:1;font-weight:700;color:var(--text-primary)!important;font-size:.85rem!important;position:static!important;transform:none!important}.follow-btn-action{background:var(--text-primary);color:var(--bg-main);border:1px solid var(--text-primary);cursor:pointer;border-radius:8px;flex-shrink:0;padding:.5rem 1.4rem;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.follow-btn-action:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.follow-btn-action.following{color:var(--text-primary);border:1px solid var(--border-color);background:0 0}.follow-btn-action.following:hover:not(:disabled){color:#ef4444;background:#ef44441a;border-color:#ef4444}.follow-btn-action.own-profile{color:var(--text-secondary);opacity:.5;cursor:not-allowed;background:#ffffff0d;border:1px solid #ffffff1a}[data-theme=light] .follow-btn-action.own-profile{background:#0000000d;border-color:#0000001a}.follow-stat-item:hover{background:#ffffff0a;border-color:#ffffff0f}[data-theme=light] .follow-stat-item:hover{background:#00000008;border-color:#0000000d}.follow-view-header{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;align-items:center;gap:1.5rem;padding:1.5rem 2rem;display:flex;position:relative}.follow-view-back-btn{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.follow-view-back-btn:hover{background:var(--btn-secondary-bg-hover);transform:translate(-2px)}[data-theme=light] .follow-view-back-btn{background:#00000008}.follow-view-user-info{align-items:center;gap:1rem;display:flex}.follow-view-avatar{object-fit:cover;border:2px solid var(--text-primary);border-radius:50%;width:55px;height:55px}.follow-view-title{margin:0;font-size:1.6rem;font-weight:700}.follow-users-grid{grid-template-columns:repeat(5,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.follow-user-card{text-align:center;background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;padding:1.5rem 1rem;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.follow-user-card:hover{background:var(--btn-secondary-bg-hover);transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.follow-user-avatar-wrapper{border:2px solid #ffffff0d;border-radius:50%;width:80px;height:80px;margin-bottom:1rem;overflow:hidden}[data-theme=light] .follow-user-avatar-wrapper{border-color:#0000000d}.follow-user-avatar{object-fit:cover;width:100%;height:100%}.follow-user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;width:100%;margin:0 0 .5rem;font-size:1rem;font-weight:600;overflow:hidden}.follow-user-meta{color:var(--text-secondary);align-items:center;gap:.35rem;font-size:.8rem;display:flex}.follow-user-meta-icon{opacity:.7}.follow-list-loading{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:5rem 0;display:flex}.follow-list-empty{text-align:center;color:var(--text-secondary);background:var(--bg-glass);border-radius:16px;padding:5rem 0}.follow-list-empty h3{color:var(--text-primary);margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}@media (width<=1024px){.follow-users-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=640px){.follow-users-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.follow-view-title{font-size:1.2rem}.follow-user-avatar-wrapper{width:60px;height:60px}}.profile-edit-btn-action{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:.45rem;padding:.5rem 1.2rem;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.profile-edit-btn-action:hover{background:var(--btn-secondary-bg-hover);transform:translateY(-1px)}.sidebar-social-links-wrapper{flex-direction:column;align-items:flex-start;gap:.65rem;margin-bottom:1rem;padding:0 .5rem;display:flex}.sidebar-social-link{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.65rem;width:fit-content;padding:.35rem 0;font-size:.9rem;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.sidebar-social-link:hover{color:var(--text-primary)}.social-svg-icon{flex-shrink:0}.profile-upload-modal.edit-profile-modal-width{max-width:650px}.profile-upload-modal .modal-body.edit-profile-body{flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:2.5rem;min-height:auto;display:flex;padding:2.5rem 2rem!important}.edit-profile-avatar-column{flex-direction:column;flex-shrink:0;align-items:center;display:flex}.edit-profile-avatar-wrapper{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:50%;width:180px;height:180px;position:relative;overflow:hidden}.edit-profile-avatar-wrapper img{object-fit:cover;width:100%;height:100%}.edit-profile-avatar-overlay-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#000000b3;border:1px solid #ffffff40;border-radius:20px;justify-content:center;align-items:center;height:32px;padding:0 16px;font-size:.8rem;font-weight:600;display:flex;position:absolute;bottom:15px;left:50%;transform:translate(-50%)}.edit-profile-avatar-overlay-btn:hover{color:#b3b3b3;background:#000000d9;border-color:#fff6}.edit-profile-inputs-column{flex-direction:column;flex-grow:1;gap:1.25rem;width:100%;display:flex}@media (width<=576px){.profile-upload-modal .modal-body.edit-profile-body{flex-direction:column;align-items:center;gap:1.5rem}}.social-input-group{flex-direction:column;gap:.5rem;display:flex}.social-input-label{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;display:flex}.social-input-wrapper{flex:1;position:relative}.social-input-wrapper input{background:var(--bg-secondary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:.75rem 1rem;font-size:.9rem;transition:border-color .2s,background-color .2s}.social-input-wrapper input:focus{border-color:var(--text-primary);background:var(--bg-card-solid)}.social-input-wrapper-row{flex-direction:row;align-items:stretch;gap:.75rem;width:100%;display:flex}.social-input-clear-btn{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;padding:0;display:flex}.social-input-clear-btn:hover{background:var(--bg-card-solid);color:var(--text-primary);border-color:#ffffff4d}.social-input-clear-btn svg{width:18px;height:18px}.profile-avatar-relative-container{display:inline-block;position:relative}.avatar-options-dropdown{z-index:9999;background:#181818;border:1px solid #ffffff26;border-radius:6px;flex-direction:column;min-width:140px;padding:4px 0;display:flex;position:absolute;top:auto;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 10px 25px #0009;transition:none!important}.avatar-options-dropdown .dropdown-item{color:#fff;text-align:center;cursor:pointer;background:0 0;border:none;width:100%;padding:10px 16px;font-size:.85rem;font-weight:600;display:block;transition:none!important}.avatar-options-dropdown .dropdown-item:hover{background:#ffffff0d;color:#b3b3b3!important}.avatar-edit-overlay{transition:none!important}.avatar-edit-overlay:hover{color:#b3b3b3!important}.edit-profile-avatar-wrapper:hover .avatar-edit-overlay{opacity:1}.edit-profile-avatar-column{position:relative}.avatar-modal-header-content{flex-direction:column;gap:.25rem;display:flex}.avatar-modal-username{color:var(--text-primary);margin:0;font-size:1.4rem;font-weight:700}.avatar-modal-subtitle{color:var(--text-secondary);margin:0;font-size:.85rem}.avatar-edit-body{flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:2.5rem;display:flex}.circular-preview-container{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:300px;height:300px;display:flex;overflow:hidden}.circular-preview-container img{object-fit:cover;width:100%;height:100%}.range-slider-row{align-items:center;gap:1rem;width:100%;max-width:360px;margin-top:.5rem;padding:0;display:flex}.slider-adjust-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;display:flex;transition:none!important}.slider-adjust-btn:hover{background:#fff3;color:#b3b3b3!important}.range-slider-row .position-range-input{appearance:none;background:#fff3;border-radius:2px;outline:none;flex:1;height:4px;transition:none!important}.range-slider-row .position-range-input::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;transition:none!important}.range-slider-row .position-range-input::-webkit-slider-thumb:hover{background:#b3b3b3!important}.profile-upload-modal.avatar-modal{background:#121214!important;border:1px solid #ffffff1a!important;border-radius:8px!important;max-width:540px!important;box-shadow:0 20px 40px #000c!important}.profile-upload-modal.avatar-modal .modal-header{border-bottom:none!important;padding:2rem 2.5rem .5rem!important}.profile-upload-modal.avatar-modal .modal-footer{justify-content:flex-end;gap:.75rem;border-top:none!important;padding:0 2.5rem 2.5rem!important}.profile-upload-modal.avatar-modal .cancel-btn{color:#fff!important;cursor:pointer!important;background:#2a2a2a!important;border:none!important;border-radius:4px!important;height:auto!important;padding:8px 16px!important;font-size:.85rem!important;font-weight:600!important;transition:none!important}.profile-upload-modal.avatar-modal .cancel-btn:hover{color:#b3b3b3!important;background:#333!important}.profile-upload-modal.avatar-modal .submit-btn{color:#000!important;cursor:pointer!important;background:#fff!important;border:none!important;border-radius:4px!important;min-width:auto!important;height:auto!important;padding:8px 16px!important;font-size:.85rem!important;font-weight:600!important;transition:none!important}.profile-upload-modal.avatar-modal .submit-btn:hover:not(:disabled){color:#888!important;background:#fff!important;transform:none!important}.profile-upload-modal.avatar-modal .submit-btn:disabled{opacity:.5!important;cursor:not-allowed!important}.likes-sidebar-card{margin-top:0}.likes-sidebar-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.likes-sidebar-title{color:var(--text-secondary);align-items:center;gap:.35rem;font-size:.95rem;font-weight:600;display:flex}.likes-sidebar-view-all{color:var(--text-secondary);cursor:pointer;font-size:.8rem;text-decoration:none;transition:color .2s}.likes-sidebar-view-all:hover{color:var(--accent-color)}.likes-sidebar-play-box{border:1px solid var(--border-color);width:40px;min-width:40px;height:40px;min-height:40px;color:var(--text-primary);cursor:pointer;background:#ffffff08;border-radius:6px;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}[data-theme=light] .likes-sidebar-play-box{background:#00000005}.likes-sidebar-play-box:hover{background:var(--btn-secondary-bg-hover);color:var(--accent-color);border-color:var(--accent-color);transform:scale(1.05)}.likes-sidebar-play-box.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.likes-sidebar-artist:hover{text-decoration:underline;color:var(--text-primary)!important}.likes-sidebar-title-text:hover{color:var(--accent-color)!important}.sidebar-play-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite sidebar-spin}[data-theme=light] .sidebar-play-spinner{border-color:#0003;border-top-color:var(--accent-color)}@keyframes sidebar-spin{to{transform:rotate(360deg)}}.track-detail-section{padding:2rem 2rem 6rem}.track-detail-container{flex-direction:column;gap:1.5rem;max-width:1000px;margin:0 auto;display:flex}.breadcrumb-row{color:var(--text-secondary);align-items:center;gap:.75rem;height:auto;margin-bottom:.5rem;font-size:.9rem;line-height:normal;display:flex}.breadcrumb-row .back-btn{color:var(--text-secondary);cursor:pointer;height:auto;font-weight:500;line-height:normal;font-size:inherit;background:0 0;border:none;align-items:center;gap:.5rem;margin:0;padding:0;font-family:inherit;transition:color .2s;display:inline-flex}.breadcrumb-row .back-btn svg{flex-shrink:0;margin:0;display:block}.breadcrumb-row .back-btn span{line-height:normal;display:inline-block}.breadcrumb-row .back-btn:hover{color:var(--text-primary)}.breadcrumb-row .breadcrumb-separator{opacity:.4;height:auto;margin:0;line-height:normal;display:inline-block}.breadcrumb-row .breadcrumb-active{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:300px;height:auto;font-weight:600;line-height:normal;display:inline-block;overflow:hidden}.track-hero-card{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:1.5rem}.hero-main-row{align-items:center;gap:1.75rem;display:flex}.hero-play-btn{background:var(--text-primary);width:56px;height:56px;color:var(--bg-main);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,opacity .2s;display:flex}.hero-play-btn:hover:not(:disabled){transform:scale(1.05)}.hero-play-btn:disabled{opacity:.5;cursor:not-allowed}.hero-waveform-section{flex-direction:column;flex:1;gap:.75rem;min-width:0;display:flex}.title-row{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.75rem;display:flex}.track-badge{text-transform:uppercase;letter-spacing:.05em;background:var(--badge-bg);color:var(--text-secondary);border-radius:4px;padding:.2rem .6rem;font-size:.7rem;font-weight:700}.track-title-text{color:var(--text-primary);margin:0;font-size:1.75rem;font-weight:700;line-height:1.2}.track-layout-grid{grid-template-columns:1fr;gap:2rem;display:grid}.track-main-info,.track-sidebar{flex-direction:column;gap:2rem;display:flex}.info-card{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:2rem}.card-heading{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.25rem;font-weight:600}.specs-grid{grid-template-columns:repeat(5,1fr);gap:1.5rem;display:grid}.spec-item{flex-direction:column;gap:.25rem;display:flex}.spec-label{color:var(--text-secondary);white-space:nowrap;font-size:.72rem;font-weight:500}.spec-value{color:var(--text-primary);white-space:nowrap;font-size:.92rem;font-weight:600}.track-tags-section{border-top:1px solid var(--border-color);margin-top:2rem;padding-top:1.5rem}.sub-heading{color:var(--text-primary);margin-bottom:.75rem;font-size:.95rem;font-weight:600}.tags-container{flex-wrap:wrap;gap:.5rem;display:flex}.tag-pill{color:var(--text-secondary);background:var(--badge-bg);border-radius:6px;padding:.3rem .75rem;font-size:.8rem;font-weight:500;transition:color .2s,background .2s}.tag-pill:hover{color:var(--text-primary);background:var(--border-hover)}.track-description{color:var(--text-secondary);white-space:pre-wrap;margin:0;font-size:1rem;line-height:1.6}.hero-play-volume-wrapper{flex-direction:column;flex-shrink:0;align-items:center;gap:.5rem;width:90px;display:flex}.hero-volume-control{align-items:center;gap:.4rem;width:100%;display:flex}.hero-volume-control .volume-mute-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;padding:0;transition:color .2s;display:flex}.hero-volume-control .volume-mute-btn:hover{color:var(--text-primary)}.hero-volume-control .volume-slider-bar{appearance:none;background:var(--border-color);cursor:pointer;border-radius:2px;outline:none;flex:1;width:100%;height:4px}.hero-volume-control .volume-slider-bar::-webkit-slider-thumb{appearance:none;background:var(--text-secondary);border-radius:50%;width:10px;height:10px;transition:background .2s,transform .1s}.hero-volume-control .volume-slider-bar::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.2)}.hero-actions-row{justify-content:flex-start;align-items:center;gap:1.5rem;margin-top:.25rem;display:flex}.hero-action-icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;padding:.25rem 0;font-size:.85rem;font-weight:500;transition:color .2s,transform .1s;display:flex}.hero-action-icon-btn svg{flex-shrink:0;display:block}.hero-action-icon-btn:hover{color:var(--text-primary)}.hero-action-icon-btn.like-btn.active{color:#ef4444}.hero-action-icon-btn.copy-btn.copied{color:#22c55e}.volume-slider-bar::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.15)}.creator-details-clickable{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:1rem;margin:-.75rem;padding:.75rem;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.creator-details-clickable:hover{background:var(--btn-secondary-bg-hover);border-color:var(--border-color);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.creator-avatar{background:var(--badge-bg);border-radius:50%;flex-shrink:0;width:48px;height:48px}.creator-info{flex-direction:column;display:flex}.creator-username{color:var(--text-primary);margin:0;font-size:1.05rem;font-weight:600}.creator-role{color:var(--text-secondary);font-size:.8rem}.track-error-page{flex-direction:column;gap:2rem;padding:3rem 2rem;display:flex}.track-error-page .back-btn{color:var(--text-secondary);cursor:pointer;height:auto;font-weight:500;line-height:normal;font-size:inherit;background:0 0;border:none;align-items:center;gap:.5rem;margin:0;padding:0;font-family:inherit;transition:color .2s;display:inline-flex}.track-error-page .back-btn svg{flex-shrink:0;margin:0;display:block}.track-error-page .back-btn span{line-height:normal;display:inline-block}.track-error-page .back-btn:hover{color:var(--text-primary)}.error-card{flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;max-width:600px;margin:0 auto;padding:6rem 2rem;display:flex}.text-center{text-align:center}.track-page-skeleton{flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.skeleton-back-btn{background:var(--border-color);border-radius:4px;width:100px;height:20px;animation:1.5s infinite pulse}.skeleton-hero{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;align-items:center;gap:1.75rem;padding:1.5rem;display:flex}.skeleton-play-btn{background:var(--border-color);border-radius:50%;width:56px;height:56px;animation:1.5s infinite pulse}.skeleton-waveform-wrapper{flex-direction:column;flex:1;gap:1.25rem;display:flex}.skeleton-title{background:var(--border-color);border-radius:6px;width:300px;height:28px;animation:1.5s infinite pulse}.skeleton-wave{background:var(--border-color);border-radius:8px;width:100%;height:50px;animation:1.5s infinite pulse}.skeleton-grid{grid-template-columns:1fr 300px;gap:2rem;display:grid}.skeleton-main-info{flex-direction:column;display:flex}.skeleton-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;animation:1.5s infinite pulse}.track-hero-row-grid{grid-template-columns:1fr 300px;align-items:flex-start;gap:2rem;margin-bottom:2rem;display:grid}@media (width<=768px){.track-detail-section{padding:1.5rem 1rem 4rem}.track-hero-card{padding:1.5rem}.hero-main-row{text-align:center;flex-direction:column;align-items:center;gap:1.5rem}.hero-play-btn{width:60px;height:60px}.hero-play-volume-wrapper{width:100%;max-width:120px}.hero-actions-row{justify-content:center;margin-top:.75rem}.title-row{justify-content:center}.track-title-text{font-size:1.4rem}.track-hero-row-grid{grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem}.track-layout-grid,.skeleton-grid{grid-template-columns:1fr;gap:1.5rem}.specs-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}.track-hero-card .waveform-wrapper .waveform-container{height:56px!important}.comments-section-card{margin-top:1rem}.comment-form{align-items:flex-start;gap:1rem;margin-bottom:2rem;display:flex}.comment-user-avatar{object-fit:cover;background:var(--badge-bg);border:1px solid var(--border-color);border-radius:50%;flex-shrink:0;width:40px;height:40px}.comment-input-wrapper{flex-direction:column;flex:1;gap:.75rem;display:flex}.comment-textarea{border:1px solid var(--border-color);width:100%;color:var(--text-primary);resize:vertical;background:#ffffff08;border-radius:10px;outline:none;min-height:70px;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;transition:border-color .2s,background-color .2s}.comment-textarea:focus{border-color:var(--text-secondary);background:#ffffff0d}.comment-textarea:disabled{opacity:.6;cursor:not-allowed}.comment-form-footer{justify-content:space-between;align-items:center;display:flex}.comment-char-counter{color:var(--text-secondary);opacity:.7;font-size:.8rem}.comment-submit-btn{background:var(--text-primary);color:var(--bg-main);cursor:pointer;border:none;border-radius:8px;padding:.5rem 1.25rem;font-size:.85rem;font-weight:600;transition:transform .2s,opacity .2s}.comment-submit-btn:hover:not(:disabled){transform:translateY(-1px)}.comment-submit-btn:disabled{opacity:.5;cursor:not-allowed}.comment-login-promo{border:1px dashed var(--border-color);text-align:center;background:#ffffff05;border-radius:10px;margin-bottom:2rem;padding:1.5rem}.comment-login-promo p{color:var(--text-secondary);margin:0;font-size:.95rem}.comments-list{flex-direction:column;gap:1.5rem;display:flex}.comment-item{border-bottom:1px solid #ffffff0a;align-items:flex-start;gap:1rem;padding-bottom:1.5rem;transition:opacity .2s;display:flex;position:relative}.comment-item:last-child{border-bottom:none;padding-bottom:0}.comment-item-avatar{object-fit:cover;background:var(--badge-bg);border:1px solid var(--border-color);border-radius:50%;flex-shrink:0;width:38px;height:38px}.comment-item-body{flex-direction:column;flex:1;gap:.4rem;min-width:0;display:flex}.comment-item-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.comment-user-meta{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.comment-username{color:var(--text-primary);font-size:.95rem;font-weight:600}.comment-role-badge{text-transform:uppercase;border-radius:4px;padding:.1rem .4rem;font-size:.65rem;font-weight:700}.comment-role-badge.admin{color:#f87171;background:#ef444426;border:1px solid #ef444440}.comment-role-badge.creator{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f640}.comment-date{color:var(--text-secondary);opacity:.6;font-size:.8rem}.comment-content-text{color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;margin:0;font-size:.95rem;line-height:1.5}.comment-delete-btn{color:var(--text-secondary);opacity:.3;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:.4rem;transition:all .2s;display:flex}.comment-delete-btn:hover{opacity:1;color:#ef4444;background:#ef444414;transform:scale(1.05)}.comments-load-more-wrapper{justify-content:center;margin-top:1rem;display:flex}.comments-load-more-btn{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background:#ffffff0d;border-radius:10px;padding:.6rem 2rem;font-size:.85rem;font-weight:600;transition:all .2s}.comments-load-more-btn:hover:not(:disabled){border-color:var(--text-secondary);background:#ffffff14}.comments-load-more-btn:disabled{opacity:.5;cursor:not-allowed}.comments-empty-state{text-align:center;color:var(--text-secondary);opacity:.7;padding:3rem 1.5rem}.comments-empty-state p{margin:0;font-size:.95rem}.comments-error-msg{color:#f87171;background:#ef44441a;border:1px solid #ef444433;border-radius:8px;margin-bottom:1.5rem;padding:.75rem 1rem;font-size:.9rem}.comments-loading-spinner-wrapper{justify-content:center;padding:2rem 0;display:flex}.comments-spinner{border:2px solid #ffffff1a;border-top-color:var(--text-primary);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite comments-spin}@keyframes comments-spin{to{transform:rotate(360deg)}}.track-hero-card-new{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);border-radius:16px;width:100%;height:200px;margin-bottom:1.5rem;display:flex;position:relative;overflow:hidden}.hero-left-content{flex-direction:column;flex:1;justify-content:space-between;min-width:0;padding:1.5rem 2rem;display:flex}.hero-right-image-wrapper{border-left:1px solid var(--border-color);flex-shrink:0;width:200px;height:200px}.hero-creator-cover-image{object-fit:cover;width:100%;height:100%}.hero-top-row{align-items:center;gap:1.25rem;width:100%;display:flex}.hero-play-btn-new{color:#fff;cursor:pointer;background:#000;border:1px solid #ffffff26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:transform .2s,background .2s;display:flex}.hero-play-btn-new:hover{background:#111;transform:scale(1.05)}.hero-title-meta{flex-direction:column;flex:1;gap:.25rem;min-width:0;display:flex}.track-title-text-new{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.35rem;font-weight:700;line-height:1.2;overflow:hidden}.hero-author-time-row{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.8rem;display:flex}.hero-creator-name-badge{color:var(--text-primary);cursor:pointer;background:#ffffff1a;border-radius:4px;padding:.15rem .5rem;font-weight:600;transition:background .2s}.hero-creator-name-badge:hover{background:#fff3}.hero-relative-time{color:var(--text-secondary);opacity:.8;margin-left:auto;font-size:.8rem}.track-badge-new{text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);font-size:.65rem;font-weight:700}.track-note-text-new{opacity:.8;font-style:italic}.hero-waveform-section-new{width:100%}.waveform-wrapper-new{align-items:center;width:100%;display:flex;position:relative}.waveform-container-new{height:52px;position:relative;flex:1!important;width:auto!important;margin:0!important}.waveform-container-new canvas,.waveform-container-new shadow-root,.waveform-container-new div{display:block!important}.waveform-time-new{display:none}.comments-timeline-overlay{pointer-events:none;z-index:15;height:20px;position:absolute;bottom:-4px;left:0;right:0}.timeline-comment-avatar-wrapper{pointer-events:auto;cursor:pointer;position:absolute;bottom:0;transform:translate(-50%)}.timeline-comment-avatar{border:1px solid var(--border-color);background:var(--bg-main);object-fit:cover;border-radius:50%;width:16px;height:16px;transition:transform .2s}.timeline-comment-avatar:hover{z-index:20;transform:scale(1.3)}.timeline-comment-tooltip{border:1px solid var(--border-color);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:100;background:#000000f2;border-radius:6px;padding:6px 10px;font-size:.72rem;transition:opacity .2s,transform .2s;position:absolute;bottom:24px;left:50%;transform:translate(-50%)scale(.95);box-shadow:0 4px 12px #00000080}.timeline-comment-avatar-wrapper:hover .timeline-comment-tooltip{opacity:1;transform:translate(-50%)scale(1)}.hero-actions-row-new{align-items:center;gap:1.5rem;display:flex}.hero-volume-control-new{align-items:center;gap:.4rem;width:100px;margin-right:.5rem;display:flex}.hero-volume-control-new .volume-mute-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;padding:0;transition:color .2s;display:flex}.hero-volume-control-new .volume-mute-btn:hover{color:var(--text-primary)}.hero-volume-control-new .volume-slider-bar{appearance:none;background:var(--border-color);cursor:pointer;border-radius:2px;outline:none;flex:1;width:100%;height:4px}.hero-volume-control-new .volume-slider-bar::-webkit-slider-thumb{appearance:none;background:var(--text-secondary);border-radius:50%;width:10px;height:10px;transition:background .2s,transform .2s}.hero-volume-control-new .volume-slider-bar::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.2)}.skeleton-hero-new{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;width:100%;height:200px;margin-bottom:1.5rem;animation:1.5s infinite pulse;display:flex;position:relative;overflow:hidden}.skeleton-play-btn-new{background:var(--border-color);border-radius:50%;width:48px;height:48px}.skeleton-title-new{background:var(--border-color);border-radius:4px;width:250px;height:20px}.skeleton-meta-new{background:var(--border-color);border-radius:4px;width:150px;height:14px;margin-top:.5rem}.skeleton-wave-new{background:var(--border-color);border-radius:4px;width:100%;height:52px}.skeleton-actions-new{background:var(--border-color);border-radius:4px;width:200px;height:18px}.skeleton-image-new{background:var(--border-color);border-left:1px solid var(--border-color);flex-shrink:0;width:200px;height:200px}@media (width<=768px){.track-hero-card-new,.skeleton-hero-new{flex-direction:column-reverse;height:auto}.hero-right-image-wrapper,.skeleton-image-new{border-left:none;border-bottom:1px solid var(--border-color);width:100%;height:200px}.hero-left-content{gap:1.25rem;padding:1.25rem}.hero-top-row{flex-direction:row}.track-title-text-new{font-size:1.2rem}.hero-relative-time{margin-left:initial;width:100%;margin-top:.25rem}}.details-likers-row{grid-template-columns:2.5fr 1fr;align-items:start;gap:1.5rem;display:grid}.likers-card{flex-direction:column;display:flex}.likers-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.likers-header .card-heading{letter-spacing:.05em;text-transform:uppercase;color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.likers-header .view-all-link{color:var(--text-secondary);cursor:pointer;font-size:.8rem;transition:color .2s}.likers-header .view-all-link:hover{color:var(--text-primary)}.likers-avatar-list{flex-wrap:nowrap;align-items:center;gap:0;margin-top:.5rem;padding-left:6px;display:flex;overflow:visible}.liker-avatar-wrapper{cursor:pointer;z-index:1;border-radius:50%;width:38px;height:38px;margin-left:-14px;transition:transform .2s,z-index .2s;position:relative}.liker-avatar-wrapper:first-child{margin-left:0}.liker-avatar-img{object-fit:cover;border:2px solid var(--bg-card-solid);background:var(--bg-secondary);border-radius:50%;width:100%;height:100%;transition:border-color .2s;box-shadow:0 2px 8px #0003}.liker-avatar-wrapper:hover{z-index:10;transform:translateY(-4px)scale(1.1)}.liker-avatar-wrapper:hover .liker-avatar-img{border-color:var(--text-secondary)}.liker-more-avatar{width:100%;height:100%;color:var(--text-primary);border:2px solid var(--bg-card-solid);background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;font-size:.72rem;font-weight:700;transition:background .2s,border-color .2s;display:flex;box-shadow:0 2px 8px #0003}.liker-avatar-wrapper:hover .liker-more-avatar{border-color:var(--text-secondary);background:#ffffff1f}.likers-empty{color:var(--text-secondary);opacity:.7;text-align:center;padding:1.5rem 0;font-size:.9rem}@media (width<=768px){.details-likers-row{grid-template-columns:1fr;gap:1.5rem}}.settings-page-container{max-width:800px;margin:1.5rem auto 4rem;padding:0 1.5rem}.settings-page-header{margin-bottom:1.5rem}.settings-card{border:1px solid var(--border-color);background:var(--bg-card);border-radius:16px;padding:2rem;box-shadow:0 4px 30px #0000000d}