.sidebar{background:linear-gradient(#181818 0% 100%);border-right:1px solid #ffffff1a;flex-direction:column;width:280px;min-width:280px;height:100%;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid #ffffff0d;padding:24px 20px}.logo{align-items:center;gap:14px;display:flex}.logo-icon{border-radius:50%;width:48px;height:48px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.logo-img,.mobile-menu-img{object-fit:cover;object-position:center 20%;width:100%;height:100%}.logo-text h1{color:#fff;letter-spacing:-.3px;margin:0;font-size:16px;font-weight:700}.logo-text p{color:#a7a7a7;margin:2px 0 0;font-size:12px}.sidebar-nav{flex:1;padding:16px 12px}.nav-section{flex-direction:column;gap:4px;display:flex}.nav-section-title{text-transform:uppercase;letter-spacing:1.5px;color:#a7a7a7;margin-bottom:4px;padding:8px 12px;font-size:11px;font-weight:700}.nav-item{color:#b3b3b3;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:8px;outline:none;align-items:center;gap:14px;width:100%;padding:12px 14px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{color:#fff;background:#ffffff1a}.nav-item.active{color:#1db954;background:#1db95426}.nav-item.active svg{color:#1db954}.sidebar-footer{border-top:1px solid #ffffff0d;padding:16px}.recently-played{border-top:1px solid #ffffff0d;padding:12px 16px}.recently-played-title{text-transform:uppercase;letter-spacing:1.5px;color:#a7a7a7;align-items:center;gap:6px;padding:0 0 8px;font-size:11px;font-weight:700;display:flex}.recently-played-list{flex-direction:column;gap:2px;display:flex}.recently-played-item{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;width:100%;padding:8px;transition:background .2s;display:flex}.recently-played-item:hover{background:#ffffff1a}.recently-played-item.active{background:#1db9541f}.rp-cover-img{object-fit:cover;object-position:center 20%;border-radius:4px;flex-shrink:0;width:32px;height:32px}.rp-cover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:700;display:flex}.rp-cover[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.rp-cover[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.rp-cover[data-type=ai-\&-healthcare]{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}.rp-cover[data-type=infrastructure]{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}.rp-cover[data-type=frontend-development]{background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%)}.rp-info{flex-direction:column;gap:1px;min-width:0;display:flex}.rp-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.rp-artist{color:#a7a7a7;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.contact-divider{background:#ffffff1a;height:1px;margin:8px 0}.now-playing-card{background:linear-gradient(135deg,#1e3a5f 0%,#2d1f4e 50%,#1a1a2e 100%);border-radius:12px;margin-bottom:16px;padding:16px;position:relative;overflow:hidden}.now-playing-pulse{background:#1db954;border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse;position:absolute;top:16px;right:16px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.now-playing-content{flex-direction:column;gap:4px;display:flex}.now-playing-label{text-transform:uppercase;letter-spacing:1px;color:#1db954;font-size:10px;font-weight:700}.now-playing-text{color:#e0e0e0;font-size:13px;font-weight:500}.contact-links{flex-direction:column;gap:4px;display:flex}.contact-link{color:#a7a7a7;border-radius:6px;align-items:center;gap:12px;padding:10px 12px;font-size:13px;text-decoration:none;transition:all .2s;display:flex}.contact-link:hover{color:#fff;background:#ffffff1a}.contact-link svg{flex-shrink:0}.contact-link.resume-link,.contact-link.message-link{text-align:left;cursor:pointer;background:0 0;border:none;width:100%;font-family:inherit;font-size:13px}.contact-link.message-link:hover{color:#1db954}.message-modal-overlay{z-index:1001;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.message-modal{background:#282828;border-radius:8px;width:100%;max-width:450px;margin:16px;padding:24px;animation:.2s slideUp;box-shadow:0 16px 48px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message-modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.message-modal-header h3{color:#fff;margin:0;font-size:20px;font-weight:700}.message-form{flex-direction:column;gap:16px;display:flex}.message-form .form-group{flex-direction:column;gap:8px;display:flex}.message-form label{color:#fff;font-size:14px;font-weight:600}.message-form input,.message-form textarea{color:#fff;background:#3e3e3e;border:1px solid #0000;border-radius:4px;padding:12px;font-family:inherit;font-size:14px;transition:border-color .2s}.message-form input:focus,.message-form textarea:focus{border-color:#1db954;outline:none}.message-form input::placeholder,.message-form textarea::placeholder{color:#a7a7a7}.message-form textarea{resize:vertical;min-height:100px}.message-form .error-message{color:#f15e6c;margin:0;font-size:14px}.message-form .send-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:9999px;margin-top:8px;padding:14px 32px;font-size:14px;font-weight:700;transition:all .2s}.message-form .send-btn:hover:not(:disabled){background:#1ed760;transform:scale(1.02)}.message-form .send-btn:disabled{opacity:.7;cursor:not-allowed}.message-success{text-align:center;padding:24px 0}.message-success .success-icon{color:#000;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:32px;display:flex}.message-success h4{color:#fff;margin:0 0 8px;font-size:20px;font-weight:700}.message-success p{color:#a7a7a7;margin:0 0 24px;font-size:14px}.message-success .close-success-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:9999px;padding:12px 32px;font-size:14px;font-weight:600;transition:background .2s}.message-success .close-success-btn:hover{background:#fff3}.resume-modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.resume-modal{background:#282828;border-radius:8px;flex-direction:column;width:90%;max-width:900px;height:85vh;animation:.2s slideUp;display:flex;box-shadow:0 16px 48px #00000080}.resume-modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.resume-modal-header h3{color:#fff;margin:0;font-size:20px;font-weight:700}.resume-modal-actions{align-items:center;gap:12px;display:flex}.resume-download-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:9999px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.resume-download-btn:hover{background:#1ed760;transform:scale(1.02)}.resume-modal-content{flex:1;padding:0;overflow:hidden}.resume-iframe{background:#fff;border:none;width:100%;height:100%}.resume-image{width:100%;height:auto;display:block}.mobile-menu-btn{z-index:1000;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#181818e6;border:2px solid #fff3;border-radius:50%;outline:none;width:44px;height:44px;padding:0;transition:all .2s;display:none;position:fixed;top:16px;left:16px;overflow:hidden;box-shadow:0 4px 12px #0006}.mobile-menu-btn:hover{background:#1ed760;transform:scale(1.05)}.mobile-menu-btn.hidden{opacity:0;pointer-events:none}.sidebar-backdrop{z-index:998;opacity:0;visibility:hidden;background:#0009;transition:opacity .3s,visibility .3s;display:none;position:fixed;inset:0}.sidebar-backdrop.open{opacity:1;visibility:visible}.sidebar-close-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;padding:4px;transition:color .2s;display:none}.sidebar-close-btn:hover{color:#fff}@media (max-width:768px){.mobile-menu-btn{display:flex}.sidebar-backdrop{display:block}.sidebar{z-index:999;background:linear-gradient(#181818 0% 100%);border-right:1px solid #ffffff1a;flex-direction:column;width:75%;max-width:320px;height:100dvh;transition:transform .3s;display:flex;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-header{justify-content:space-between;align-items:center;display:flex}.sidebar-close-btn{justify-content:center;align-items:center;display:flex}}
.hero{padding:80px 32px 0;position:relative;overflow:visible}.hero-background{z-index:0;position:absolute;inset:0}.hero-gradient{background:linear-gradient(135deg,#1e3264 0%,#5c1e3e 50%,#181818 100%);position:absolute;inset:0}.hero-gradient:after{content:"";background:linear-gradient(#0000 40%,#181818 100%);position:absolute;inset:0}.hero-content{z-index:1;align-items:flex-end;gap:24px;max-width:1400px;margin-bottom:40px;display:flex;position:relative}.hero-info{flex:1;padding-bottom:8px}.verified-badge{color:#fff;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;font-weight:500;display:inline-flex}.verified-icon{justify-content:center;align-items:center;display:flex}.verified-icon svg{display:block}.hero-name{letter-spacing:-4px;color:#fff;margin:0 0 8px;font-size:clamp(60px,10vw,96px);font-weight:900;line-height:1}.hero-stats{margin-bottom:0}.monthly-listeners{color:#fff;font-size:14px}.monthly-listeners-skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%) 0 0/200% 100%;border-radius:4px;width:180px;height:14px;animation:1.5s ease-in-out infinite shimmer;display:inline-block}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero-image{flex-shrink:0}.profile-photo{border-radius:50%;width:192px;height:192px;overflow:hidden;box-shadow:0 4px 60px #00000080}.profile-img{object-fit:cover;object-position:center 20%;width:100%;height:100%}.hero-action-bar{z-index:2;background:linear-gradient(#3b82f659 0%,#3b82f640 50%,#3b82f626 80%,#181818e6 100%);flex-direction:column;gap:24px;margin:0 -40px;padding:24px 40px 20px;display:flex;position:relative}.action-bar-controls{align-items:center;gap:24px;display:flex}.section-titles{grid-template-columns:minmax(0,900px) 240px;gap:40px;padding-top:8px;display:grid}.section-title{color:#fff;margin:0;font-size:22px;font-weight:700}.play-btn-large{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#1db954;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:56px;height:56px;transition:all .1s;display:flex;box-shadow:0 8px 16px #0000004d}.play-btn-large:focus{outline:none}.play-btn-large:active{outline:none;transform:scale(.96)}.play-btn-large:hover{background:#1ed760;transform:scale(1.04)}.play-btn-large svg{margin-left:3px}.shuffle-btn{color:#a7a7a7;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex;position:relative}.shuffle-btn:hover{color:#fff;transform:scale(1.04)}.shuffle-btn.active{color:#1db954}.shuffle-btn.active:after{content:"";background:#1db954;border-radius:50%;width:4px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.follow-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff4d;border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s}.follow-btn:hover{border-color:#fff;transform:scale(1.02)}.more-menu{position:relative}.more-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:8px;transition:color .2s;display:flex}.more-btn:hover{color:#fff}.dropdown-menu{z-index:100;background:#282828;border-radius:4px;min-width:200px;margin-top:8px;padding:4px;animation:.15s dropdownIn;position:absolute;top:100%;left:0;box-shadow:0 16px 24px #00000080}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{color:#b3b3b3;border-radius:2px;align-items:center;gap:12px;padding:12px 16px;font-size:14px;text-decoration:none;transition:all .15s;display:flex}.dropdown-item:hover{color:#fff;background:#ffffff1a}.dropdown-item svg{flex-shrink:0}.dropdown-divider{background:#ffffff1a;height:1px;margin:4px 0}.resume-modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.resume-modal{background:#282828;border-radius:8px;flex-direction:column;width:90%;max-width:900px;height:85vh;animation:.2s slideUp;display:flex;box-shadow:0 16px 48px #00000080}.resume-modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.resume-modal-header h3{color:#fff;margin:0;font-size:20px;font-weight:700}.resume-modal-actions{align-items:center;gap:12px;display:flex}.resume-download-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:9999px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.resume-download-btn:hover{background:#1ed760;transform:scale(1.02)}.resume-modal-content{flex:1;padding:0;overflow:hidden}.resume-iframe{background:#fff;border:none;width:100%;height:100%}.resume-image{width:100%;height:auto;display:block}@media (max-width:900px){.hero{padding:32px 24px 24px}.hero-content{text-align:center;flex-direction:column-reverse;align-items:center}.hero-image{margin-bottom:24px;margin-left:0}.profile-photo{width:180px;height:180px;font-size:70px}.hero-name{letter-spacing:-2px;font-size:48px}.hero-action-bar{flex-wrap:wrap;justify-content:center;gap:16px;margin:0 -24px;padding-left:24px;padding-right:24px}}@media (max-width:640px){.hero{padding:24px 16px 16px}.hero-content{gap:16px}.section-titles{display:none}.hero-image{margin-bottom:16px}.profile-photo{letter-spacing:-2px;width:140px;height:140px;font-size:56px}.hero-name{letter-spacing:-1px;font-size:36px}.verified-badge{gap:6px;font-size:12px}.monthly-listeners{font-size:13px}.hero-action-bar{gap:12px;margin:0 -16px;padding:16px}.action-bar-controls{justify-content:flex-start;gap:12px;width:100%}.follow-btn{order:1}.more-menu{order:2}.shuffle-btn{order:3;margin-left:auto}.play-btn-large{order:4;width:48px;height:48px}.follow-btn{padding:6px 12px;font-size:12px}.resume-modal{border-radius:4px;width:95%;height:90vh}.resume-modal-header{padding:12px 16px}.resume-download-btn{padding:8px 16px;font-size:12px}.message-modal{width:95%;max-width:none;margin:16px;padding:16px}}.message-modal-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.message-modal{background:#282828;border-radius:8px;width:100%;max-width:450px;padding:24px;animation:.2s slideUp;box-shadow:0 16px 48px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message-modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.message-modal-header h3{color:#fff;margin:0;font-size:24px;font-weight:700}.modal-close-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.modal-close-btn:hover{color:#fff}.message-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:#fff;font-size:14px;font-weight:600}.form-group input,.form-group textarea{color:#fff;background:#3e3e3e;border:1px solid #0000;border-radius:4px;padding:12px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:#1db954;outline:none}.form-group input::placeholder,.form-group textarea::placeholder{color:#a7a7a7}.form-group textarea{resize:vertical;min-height:100px}.send-message-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:9999px;justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:14px 24px;font-size:16px;font-weight:700;transition:all .2s;display:flex}.send-message-btn:hover:not(:disabled){background:#1ed760;transform:scale(1.02)}.send-message-btn:disabled{opacity:.7;cursor:not-allowed}.error-message{color:#f15e5e;margin:0;font-size:14px}.message-success{flex-direction:column;align-items:center;gap:16px;padding:24px 0;display:flex}.success-icon{color:#000;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:32px;font-weight:700;display:flex}.message-success p{color:#fff;margin:0;font-size:18px}.modal-done-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff4d;border-radius:9999px;padding:10px 32px;font-size:14px;font-weight:700;transition:all .2s}.modal-done-btn:hover{border-color:#fff;transform:scale(1.02)}.dropdown-item{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:2px;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;text-decoration:none;transition:all .15s;display:flex}
.project-list{margin-top:0;padding:0 40px}.project-list-container{grid-template-columns:minmax(0,900px) 240px;gap:40px;display:grid}.mobile-liked-header{margin-bottom:16px;padding:12px 0 20px;display:none}.popular-title{color:#fff;margin:0 0 16px;font-size:22px;font-weight:700;display:none}.column-title{color:#fff;margin:0;font-size:22px;font-weight:700}.popular-column{min-width:0}.projects-table{flex-direction:column;gap:4px;display:flex}.project-row{cursor:pointer;border-radius:4px;grid-template-columns:40px 1fr 150px 110px;align-items:center;gap:16px;padding:8px;transition:background .2s;display:grid}.project-row:hover{background:#ffffff1a}.project-row.active{background:#ffffff26}.col-number{color:#a7a7a7;justify-content:center;align-items:center;font-size:16px;font-weight:400;display:flex}.col-number svg{color:#fff;cursor:pointer;transition:transform .1s}.col-number svg:hover{transform:scale(1.1)}.col-number svg.playing{color:#1db954}.col-number .play-btn{pointer-events:auto}.music-bars{cursor:pointer;justify-content:center;align-items:flex-end;gap:2px;height:14px;display:flex;position:relative}.music-bars .bar{background:#1db954;border-radius:1px;width:3px;animation:.5s ease-in-out infinite alternate musicBars}.music-bars .bar:first-child{height:4px;animation-delay:0s}.music-bars .bar:nth-child(2){height:8px;animation-delay:.1s}.music-bars .bar:nth-child(3){height:12px;animation-delay:.2s}.music-bars .bar:nth-child(4){height:6px;animation-delay:.3s}@keyframes musicBars{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.music-bars .pause-overlay{opacity:0;color:#fff;transition:opacity .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.music-bars:hover .bar{opacity:.3}.music-bars:hover .pause-overlay{opacity:1}.col-title{align-items:center;gap:12px;min-width:0;display:flex}.project-cover{flex-shrink:0;position:relative}.cover-play-btn{cursor:pointer;opacity:0;background:#00000080;border:none;border-radius:4px;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.cover-play-btn.visible,.project-row:hover .cover-play-btn{opacity:1}.cover-play-btn:hover{background:#000000a6}.cover-logo{object-fit:cover;object-position:center 20%;border-radius:4px;width:40px;height:40px}.cover-gradient{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:700;display:flex}.cover-gradient[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.cover-gradient[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.cover-gradient[data-type=ai-\&-healthcare]{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}.cover-gradient[data-type=infrastructure]{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}.cover-gradient[data-type=frontend-development]{background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%)}.cover-gradient[data-type=web-development]{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.project-info{flex-direction:column;gap:2px;min-width:0;display:flex}.project-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:400;overflow:hidden}.project-name.highlight{color:#1db954}.project-artist{color:#a7a7a7;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.project-artist:hover{color:#fff;text-decoration:underline}.col-plays{align-items:center;display:flex}.plays-count{color:#a7a7a7;font-size:14px}.col-duration{justify-content:flex-end;align-items:center;gap:16px;display:flex}.more-options{opacity:0;color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:opacity .2s,color .2s;display:flex}.more-options:hover{color:#fff}.project-row:hover .more-options{opacity:1}.more-options-container{position:relative}.dropdown-backdrop{display:none}.dropdown-menu{z-index:1000;background:#282828;border-radius:4px;min-width:200px;padding:4px;animation:.1s dropdownFade;position:absolute;top:100%;right:0;box-shadow:0 16px 24px #0000004d,0 6px 8px #0003}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{color:#fff;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:2px;align-items:center;gap:12px;width:100%;padding:12px;font-size:14px;text-decoration:none;transition:background .2s;display:flex}.dropdown-item:hover{background:#ffffff1a}.dropdown-item svg{color:#a7a7a7;flex-shrink:0}.dropdown-item:hover svg{color:#fff}.dropdown-item.disabled{color:#535353;cursor:default;pointer-events:none}.dropdown-item.disabled svg{color:#535353}.check-badge{background:#1db954;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.check-badge svg{color:#000}.duration-text{color:#a7a7a7;text-align:right;min-width:40px;font-size:14px}.see-more-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;margin-top:16px;padding:8px 0;font-size:14px;font-weight:700;transition:color .2s}.see-more-btn:hover{color:#fff}.liked-column{align-self:start;min-width:0}.liked-songs-card{cursor:pointer;background:0 0;align-items:center;gap:16px;padding:0;display:flex}.liked-songs-card:hover .liked-profile-image{transform:scale(1.02)}.liked-profile-container{flex-shrink:0;position:relative}.liked-profile-image{border-radius:50%;width:64px;height:64px;overflow:hidden}.liked-profile-img{object-fit:cover;object-position:center 20%;width:100%;height:100%}.liked-heart-badge{color:#1db954;justify-content:center;align-items:center;display:flex;position:absolute;bottom:0;right:0}.liked-songs-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.liked-title{color:#fff;font-size:15px;font-weight:700}.liked-subtitle,.liked-artist{color:#a7a7a7;font-size:13px}@media (max-width:1024px){.project-list{padding:0 24px 32px}.project-list-container{grid-template-columns:1fr}.project-row{grid-template-columns:40px 1fr 60px}.col-plays{display:none}}@media (max-width:640px){.project-list{padding:0 16px 32px}.project-list-container{grid-template-columns:1fr;gap:0}.mobile-liked-header{display:block}.mobile-liked-header .liked-songs-card{align-items:center;gap:16px;display:flex}.popular-title,.liked-column{display:none}.project-row{grid-template-columns:1fr auto;gap:12px;padding:12px 8px}.col-number{display:none}.col-duration{gap:8px}.check-badge,.duration-text{display:none}.more-options{opacity:1}.dropdown-backdrop{z-index:999;background:#00000080;display:block;position:fixed;inset:0}.dropdown-menu{border-radius:8px;width:calc(100% - 32px);min-width:auto;max-height:60vh;position:fixed;inset:auto 16px 80px;overflow-y:auto}.dropdown-item{padding:16px;font-size:16px}.cover-logo,.cover-gradient{width:48px;height:48px}.project-name{font-size:16px}.project-artist{font-size:14px}.see-more-btn{text-align:center;width:100%;display:block}}
.project-detail-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2500;background:#000000d9;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.project-detail-modal{background:linear-gradient(#282828 0%,#181818 100%);border-radius:16px;width:100%;max-width:600px;max-height:90vh;animation:.3s slideUp;position:relative;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.close-button{color:#fff;cursor:pointer;z-index:10;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.close-button:hover{background:#000000b3;transform:scale(1.1)}.modal-header{background:linear-gradient(#ffffff1a 0%,#0000 100%);gap:24px;padding:32px;display:flex}.modal-cover-img{object-fit:cover;object-position:center top;background:#282828;border-radius:8px;flex-shrink:0;width:140px;height:140px;box-shadow:0 8px 24px #0006}.modal-cover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:140px;height:140px;font-size:56px;font-weight:800;display:flex;box-shadow:0 8px 24px #0006}.modal-cover[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.modal-cover[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.modal-cover[data-type=ai-\&-healthcare]{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}.modal-cover[data-type=infrastructure]{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}.modal-info{flex-direction:column;justify-content:center;gap:6px;display:flex}.modal-type{text-transform:uppercase;letter-spacing:1.5px;color:#1db954;font-size:11px;font-weight:700}.modal-title{color:#fff;margin:0;font-size:28px;font-weight:800;line-height:1.2}.modal-artist{color:#b3b3b3;font-size:16px;font-weight:500}.modal-duration{color:#a7a7a7;font-size:14px}.modal-body{padding:24px 32px}.modal-section{margin-bottom:28px}.modal-section:last-child{margin-bottom:0}.modal-section h3{text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0 0 12px;font-size:14px;font-weight:700}.modal-section p{color:#b3b3b3;margin:0;font-size:15px;line-height:1.6}.impact-highlight{display:inline-block}.impact-value{color:#1db954;background:#1db95426;border-radius:8px;padding:12px 20px;font-size:20px;font-weight:700;display:inline-block}.tech-tags{flex-wrap:wrap;gap:8px;display:flex}.tech-tag{color:#fff;background:#ffffff1a;border-radius:20px;padding:8px 14px;font-size:13px;font-weight:500;transition:all .2s}.tech-tag:hover{background:#fff3}.modal-actions{gap:12px;padding:24px 32px 32px;display:flex}.action-btn{cursor:pointer;border-radius:500px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:14px;font-weight:700;transition:all .2s;display:flex}.action-btn.primary{color:#000;background:#1db954;border:none}.action-btn.primary:hover{background:#1ed760;transform:scale(1.02)}.action-btn.secondary{color:#fff;background:0 0;border:1px solid #ffffff4d}.action-btn.secondary:hover{background:#ffffff1a;border-color:#fff}@media (max-width:640px){.modal-header{text-align:center;flex-direction:column;align-items:center;padding:24px}.modal-cover{width:120px;height:120px;font-size:48px}.modal-title{font-size:24px}.modal-body,.modal-actions{padding-left:24px;padding-right:24px}.modal-actions{flex-direction:column}}
.skills-section{padding:40px}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;display:grid}.skill-card{background:linear-gradient(135deg,#ffffff0d 0%,#ffffff05 100%);border:1px solid #ffffff14;border-radius:12px;padding:24px;transition:all .3s}.skill-card:hover{background:linear-gradient(135deg,#ffffff1a 0%,#ffffff0d 100%);border-color:#1db9544d;transform:translateY(-2px)}.skill-card-header{align-items:center;gap:12px;margin-bottom:18px;display:flex}.skill-icon{font-size:24px}.skill-category{color:#1db954;margin:0;font-size:16px;font-weight:700}.skill-tags{flex-wrap:wrap;gap:8px;display:flex}.skill-tag{color:#e0e0e0;background:#ffffff14;border-radius:16px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s}.skill-tag:hover{color:#1db954;background:#1db95433}@media (max-width:768px){.skills-section{padding:32px 24px}.skills-grid{grid-template-columns:1fr}}@media (max-width:640px){.skills-section{padding:24px 16px}.skill-card{padding:20px}.skill-card-header{margin-bottom:14px}.skill-icon{font-size:20px}.skill-category{font-size:15px}.skill-tags{gap:6px}.skill-tag{padding:5px 12px;font-size:12px}}
.experience-section{padding:40px}.experience-list{flex-direction:column;gap:12px;display:flex}.experience-card{background:#ffffff08;border-radius:8px;gap:16px;padding:20px;transition:background .2s;display:flex}.experience-card:hover{background:#ffffff14}.experience-logo{color:#fff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex}.experience-logo-img{object-fit:cover;border-radius:4px;flex-shrink:0;width:48px;height:48px}.experience-content{flex:1;min-width:0}.experience-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.experience-title-section{min-width:0}.experience-role{color:#fff;margin:0 0 2px;font-size:16px;font-weight:700}.experience-company{color:#a7a7a7;font-size:14px;font-weight:400}.experience-meta{text-align:right;flex-direction:column;flex-shrink:0;gap:4px;display:flex}.meta-item{color:#a7a7a7;justify-content:flex-end;align-items:center;gap:6px;font-size:13px;display:flex}.meta-item svg{color:#6b6b6b}.experience-highlights{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.experience-highlights li{color:#b3b3b3;padding-left:16px;font-size:14px;line-height:1.5;position:relative}.experience-highlights li:before{content:"•";color:#535353;position:absolute;left:0}@media (max-width:768px){.experience-section{padding:32px 24px}.experience-card{flex-direction:column;gap:12px}.experience-logo{width:40px;height:40px;font-size:16px}.experience-header{flex-direction:column;gap:8px}.experience-meta{text-align:left;flex-direction:row;gap:16px}.meta-item{justify-content:flex-start}}
.education-section{padding:40px}.education-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;display:grid}.education-card{background:linear-gradient(135deg,#ffffff0d 0%,#ffffff05 100%);border:1px solid #ffffff14;border-radius:12px;gap:20px;padding:28px;transition:all .3s;display:flex}.education-card:hover{background:linear-gradient(135deg,#ffffff1a 0%,#ffffff0d 100%);border-color:#1db9544d;transform:translateY(-4px)}.education-icon{color:#1db954;background:linear-gradient(135deg,#1db95433 0%,#1db9541a 100%);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.education-logo{background:#fff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex;overflow:hidden}.education-logo img{object-fit:contain;width:100%;height:100%;padding:8px}.education-content{flex-direction:column;gap:6px;display:flex}.education-school{color:#fff;margin:0;font-size:18px;font-weight:700;line-height:1.3}.education-degree{color:#b3b3b3;margin:0;font-size:15px}.education-status{color:#a7a7a7;margin-top:4px;font-size:13px;font-weight:600}.education-status.admitted{color:#1db954}@media (max-width:768px){.education-section{padding:32px 24px}.education-grid{grid-template-columns:1fr}.education-card{text-align:center;flex-direction:column}.education-icon{margin:0 auto}}@media (max-width:640px){.education-section{padding:24px 16px}.education-card{padding:20px}.education-icon,.education-logo{width:56px;height:56px}.education-school{font-size:16px}.education-degree{font-size:14px}.education-status{font-size:12px}}
.about-section{padding:24px 40px 40px}.about-content{max-width:900px}.about-text{color:#b3b3b3;white-space:pre-line;margin:0 0 24px;font-size:16px;line-height:1.7}.about-highlights{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.highlight-card{background:#ffffff08;border-radius:8px;gap:14px;padding:16px;transition:background .2s;display:flex}.highlight-card:hover{background:#ffffff14}.highlight-icon{color:#1db954;background:#1db9541a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.highlight-content{flex-direction:column;gap:2px;display:flex}.highlight-label{text-transform:uppercase;letter-spacing:.5px;color:#6b6b6b;font-size:11px;font-weight:600}.highlight-value{color:#fff;font-size:14px;font-weight:700}.highlight-sub{color:#a7a7a7;font-size:13px;font-weight:400}@media (max-width:768px){.about-section{padding:32px 24px}.about-text{font-size:15px}.about-highlights{grid-template-columns:1fr}}
.full-player-overlay{z-index:2000;pointer-events:none;background:linear-gradient(#1e3264 0%,#121212 40%);transition:transform .3s;position:fixed;inset:0;transform:translateY(100%)}.full-player-overlay.open{pointer-events:auto;transform:translateY(0)}.full-player{height:100%;padding:16px 24px 40px;padding-bottom:calc(40px + constant(safe-area-inset-bottom));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;flex-direction:column;display:flex;position:relative;overflow-y:auto}.full-player-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.full-player-close{color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.full-player-close:hover{color:#fff;transform:scale(1.1)}.full-player-header-name{color:#fff;font-size:14px;font-weight:600}.full-player-menu{position:relative}.full-player-menu-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.full-player-menu-btn:hover{color:#fff;transform:scale(1.1)}.full-player-dropdown{z-index:100;background:#282828;border-radius:8px;min-width:180px;padding:8px 0;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #00000080}.full-player-dropdown .dropdown-item{color:#fff;text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;display:flex}.full-player-dropdown .dropdown-item:hover{background:#ffffff1a}.full-player-track-row{justify-content:space-between;align-items:center;padding:16px 8px;display:flex}.full-player-track-left{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.full-player-track-img{object-fit:cover;object-position:center 20%;border-radius:4px;width:48px;height:48px}.full-player-track-cover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex}.full-player-track-cover[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.full-player-track-cover[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.full-player-track-info{flex-direction:column;gap:2px;min-width:0;display:flex}.full-player-track-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.full-player-track-artist{color:#b3b3b3;font-size:12px}.full-player-check{color:#0000;cursor:pointer;background:0 0;border:2px solid #b3b3b3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex}.full-player-check.active{color:#000;background:#1db954;border-color:#1db954}.full-player-drag-handle{background:#ffffff4d;border-radius:2px;width:40px;height:4px;margin:0 auto 16px}.full-player-cover-container{flex:1;justify-content:center;align-items:center;padding:0 16px;display:flex}.full-player-cover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;justify-content:center;align-items:center;width:280px;height:280px;font-size:100px;font-weight:800;display:flex;box-shadow:0 8px 40px #00000080}.full-player-cover[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.full-player-cover[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.full-player-cover[data-type=ai-\&-healthcare]{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}.full-player-cover[data-type=infrastructure]{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}.full-player-cover-logo{object-fit:cover;object-position:center 20%;border-radius:8px;width:280px;height:280px;box-shadow:0 8px 40px #00000080}.full-player-progress{padding:0 8px}.full-player-progress .progress-bar{height:4px;margin-bottom:8px}.full-player-progress .progress-handle,.full-player-handle{opacity:1;width:16px;height:16px;right:-8px}.full-player-times{color:#b3b3b3;justify-content:space-between;font-size:12px;display:flex}.full-player-controls{justify-content:space-between;align-items:center;padding:24px 16px 80px;display:flex}.full-player-controls .control-btn{color:#fff;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;padding:8px;display:flex!important}.full-player-controls .control-btn.shuffle,.full-player-controls .control-btn.repeat{display:flex!important}.full-player-controls .control-btn.shuffle.active,.full-player-controls .control-btn.repeat.active{color:#1db954}.full-player-play-btn{color:#000;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#fff;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .1s;display:flex}.full-player-play-btn:hover{transform:scale(1.04)}.lyrics-preview-panel{padding:0 24px;position:absolute;bottom:0;left:0;right:0}.lyrics-preview-panel.expanded{margin-top:24px;position:relative}.lyrics-preview-box{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:8px 8px 0 0;padding:12px 16px 40px}.lyrics-preview-panel.expanded .lyrics-preview-box{cursor:default;border-radius:8px;padding-bottom:16px}.lyrics-header-row{justify-content:space-between;align-items:center;display:flex}.lyrics-preview-panel.expanded .lyrics-header-row{margin-bottom:16px}.lyrics-label{color:#fff;font-size:13px;font-weight:700}.lyrics-expand-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s,transform .3s;display:flex}.lyrics-expand-btn:active{color:#fff}.lyrics-preview-panel.expanded .lyrics-expand-btn{transform:rotate(180deg)}.lyrics-content{display:none}.lyrics-preview-panel.expanded .lyrics-content{display:block}.lyrics-section{margin-bottom:20px}.lyrics-section:last-child{margin-bottom:0}.lyrics-section h4{color:#fff9;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px;font-weight:700}.lyrics-section p{color:#fff;margin:0;font-size:14px;line-height:1.6}.lyrics-impact{color:#000;text-align:center;background:linear-gradient(135deg,#1db954 0%,#1ed760 100%);border-radius:8px;padding:12px 16px;font-size:14px;font-weight:600}.lyrics-tech-tags{flex-wrap:wrap;gap:8px;display:flex}.lyrics-tech-tag{color:#fff;background:#ffffff26;border-radius:16px;padding:6px 12px;font-size:12px;font-weight:500}@media (min-width:641px){.lyrics-preview-panel{display:none}.full-player-overlay{display:none!important}}.now-playing-bar{background:#181818;border-top:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:16px;height:90px;padding:0 16px;display:flex}.now-playing-left{flex:1;align-items:center;gap:14px;min-width:180px;max-width:300px;display:flex}.now-playing-cover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:22px;font-weight:700;display:flex}.now-playing-cover-img{object-fit:cover;object-position:center 20%;border-radius:4px;flex-shrink:0;width:56px;height:56px}.now-playing-cover[data-type=full-stack-development]{background:linear-gradient(135deg,#1db954 0%,#169c46 100%)}.now-playing-cover[data-type=ai-integration]{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%)}.now-playing-cover[data-type=ai-\&-healthcare]{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}.now-playing-cover[data-type=infrastructure]{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}.now-playing-info{flex-direction:column;gap:4px;min-width:0;display:flex}.now-playing-title-row{align-items:center;gap:6px;min-width:0;display:flex}.equalizer-bars{flex-shrink:0;align-items:flex-end;gap:2px;height:12px;display:flex}.equalizer-bars .eq-bar{background:#1db954;border-radius:1px;width:3px;animation:.45s ease-in-out infinite alternate eqBounce}.equalizer-bars .eq-bar:first-child{height:4px;animation-delay:0s}.equalizer-bars .eq-bar:nth-child(2){height:10px;animation-delay:.15s}.equalizer-bars .eq-bar:nth-child(3){height:6px;animation-delay:.3s}@keyframes eqBounce{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.now-playing-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.now-playing-title:hover{cursor:pointer;text-decoration:underline}.now-playing-artist{color:#a7a7a7;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.now-playing-artist:hover{cursor:pointer;color:#fff;text-decoration:underline}.like-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.like-btn:hover{color:#fff;transform:scale(1.1)}.like-btn.liked{color:#1db954}.mobile-play-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:none}.now-playing-center{flex-direction:column;flex:1;align-items:center;gap:8px;max-width:700px;display:flex}.player-controls{align-items:center;gap:16px;display:flex}.control-btn{color:#a7a7a7;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex;position:relative}.control-btn:hover{color:#fff;transform:scale(1.1)}.control-btn.shuffle,.control-btn.repeat{opacity:.7}.control-btn.shuffle.active,.control-btn.repeat.active{opacity:1;color:#1db954}.control-btn.shuffle.active:after,.control-btn.repeat.active:after{content:"";background:#1db954;border-radius:50%;width:4px;height:4px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.play-pause-btn{color:#000;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#fff;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.play-pause-btn:hover{background:#fff;transform:scale(1.06)}.play-icon{margin-left:2px}.progress-bar-container{align-items:center;gap:10px;width:100%;display:flex}.time-label{color:#a7a7a7;text-align:center;font-variant-numeric:tabular-nums;min-width:40px;font-size:11px}.progress-bar{cursor:pointer;background:#4d4d4d;border-radius:2px;flex:1;height:4px;position:relative}.progress-bar:hover .progress-fill{background:#1db954}.progress-bar:hover .progress-handle{opacity:1}.progress-fill{background:#fff;border-radius:2px;height:100%;transition:background .2s;position:relative}.progress-handle{opacity:0;background:#fff;border-radius:50%;width:12px;height:12px;transition:opacity .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%);box-shadow:0 2px 4px #00000080}.now-playing-right{flex:1;justify-content:flex-end;align-items:center;gap:8px;max-width:200px;display:flex}.volume-btn{color:#a7a7a7;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.volume-btn:hover{color:#fff}.volume-bar{cursor:pointer;background:#4d4d4d;border-radius:2px;width:100px;height:4px;position:relative}.volume-bar:hover .volume-fill{background:#1db954}.volume-bar:hover .volume-handle{opacity:1}.volume-fill{background:#fff;border-radius:2px;height:100%;transition:background .2s;position:relative}.volume-handle{opacity:0;background:#fff;border-radius:50%;width:12px;height:12px;transition:opacity .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%);box-shadow:0 2px 4px #00000080}@media (max-width:768px){.now-playing-bar{height:70px;padding:0 12px}.now-playing-left{max-width:200px}.now-playing-cover{width:44px;height:44px;font-size:18px}.now-playing-right,.control-btn.shuffle,.control-btn.repeat,.time-label{display:none}}@media (max-width:640px){.full-player-overlay{display:block}.now-playing-bar{height:auto;padding:8px 12px;padding-bottom:calc(8px + constant(safe-area-inset-bottom));padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:#181818;border-top:none;flex-direction:column;gap:8px}.now-playing-left{cursor:pointer;flex:none;gap:10px;width:100%;min-width:0;max-width:100%}.now-playing-cover{width:40px;height:40px;font-size:16px}.now-playing-info{flex:1;min-width:0}.now-playing-title{white-space:normal;text-overflow:unset;pointer-events:none;font-size:14px;overflow:visible}.now-playing-title:hover{cursor:default;text-decoration:none}.now-playing-artist{font-size:12px}.like-btn{display:none}.mobile-play-btn{display:flex}.now-playing-center{flex:none;gap:4px;width:100%;max-width:none}.player-controls{display:none}.progress-bar-container{width:100%;display:flex}.progress-bar{flex:1}.now-playing-left:after{content:none}.mobile-play-btn{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex}}