@font-face{font-family:Inter;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyYAZ9hiJ-Ek-_EeA.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyXAZ9hiJ-Ek-_EeA.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyRAZ9hiJ-Ek-_EeA.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyMAZ9hiJ-Ek-_EeA.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfedw.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-secondary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700}body{font-family:var(--font-primary);font-weight:var(--font-weight-normal);font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-semibold)}.font-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.font-heading{font-family:var(--font-heading)}.font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.fonts-loading{font-display:swap}.fonts-loading *{transition:font-family .2s ease-in-out}.fonts-loaded{font-display:auto}.fonts-loading h1,.fonts-loading h2,.fonts-loading h3,.fonts-loading h4,.fonts-loading h5,.fonts-loading h6,.fonts-loading body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.fonts-loaded h1,.fonts-loaded h2,.fonts-loaded h3,.fonts-loaded h4,.fonts-loaded h5,.fonts-loaded h6{font-family:var(--font-heading)}.fonts-loaded body{font-family:var(--font-primary)}*{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.home__landing-page{width:100%;max-width:100vw;height:100vh;display:flex;background-size:cover;background-position:center;overflow-x:clip;box-sizing:border-box}.home__column{flex:1;padding:2rem;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-width:0}.home__column.left{color:#fff;font-family:sans-serif;text-align:left;border-radius:8px}.home__column.left h1{font-size:clamp(2rem,8vw,6rem);margin-bottom:1rem;word-wrap:break-word;overflow-wrap:break-word}.home__column.left h1 span{color:#1ed760}.home__column.left p{font-size:clamp(1rem,2.5vw,1.25rem);word-wrap:break-word;overflow-wrap:break-word}@media (max-width: 768px){.home__landing-page{flex-direction:column;height:auto;min-height:100vh}.home__column{padding:1rem}.home__column.left{text-align:center}}@media (max-width: 480px){.home__column{padding:.5rem}}.item__card-container{position:relative;width:100%;padding-top:100%;background-size:cover;background-position:center;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s}.item__card-container:hover{transform:scale(1.03)}.item__overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#000000b3,#0000);padding:1rem;display:flex;justify-content:space-between;align-items:flex-end;color:#fff}.item__title{font-size:1rem;font-weight:600}.item__icon{color:#1db954;font-size:1.2rem;transition:color .3s}.item__icon:hover{color:#1ed760}.main__page{padding:1rem 2rem 2rem;background-color:#121212;min-height:100vh;color:#fff;width:100%;max-width:100vw;overflow-x:clip;box-sizing:border-box}.main__page h1{font-size:clamp(2rem,8vw,5rem);text-align:center;margin:50px 0;word-wrap:break-word}.main__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1.5rem;width:100%;max-width:100%}@media (max-width: 768px){.main__page{padding:1rem}.main__page h1{margin:30px 0}.main__grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:1rem}}@media (max-width: 480px){.main__grid{grid-template-columns:1fr;gap:1rem}}.card{background-color:#181818;border-radius:8px;padding:1rem;transition:background-color .3s,transform .3s;cursor:pointer;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.card:hover{background-color:#282828;transform:scale(1.03)}.card h3{margin-top:.5rem;font-size:1.1rem;font-weight:600;word-wrap:break-word;overflow-wrap:break-word}.card p{font-size:.9rem;color:#b3b3b3;word-wrap:break-word;overflow-wrap:break-word}.header__container{width:100%;max-width:100vw;height:80px;background-color:#121212;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;box-sizing:border-box;overflow-x:clip}.header__logo h1{font-size:clamp(1.2rem,4vw,1.5rem);margin:0;color:#fff;word-wrap:break-word}.header__logo h1 span{color:#1ed760}.header__title{font-size:clamp(1.2rem,4vw,1.5rem);margin:0;color:#fff;word-wrap:break-word}.header__nav{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}.header__nav button{background:none;border:none;color:#b3b3b3;font-size:1rem;cursor:pointer;transition:color .3s;padding:0;font-family:inherit}.header__nav button:hover{color:#1ed760}.header__link{background:none;text-decoration:none;border:none;color:#b3b3b3;font-size:1rem;cursor:pointer;transition:color .3s;padding:0;font-family:inherit}.header__link:hover{color:#1ed760}.header__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-left:10px;cursor:pointer;border:2px solid #1db954;transition:transform .2s ease}.header__avatar:hover{transform:scale(1.1)}.header__user{display:flex;align-items:center;gap:.75rem}.header__logout-btn{background:#1db954;color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit}.header__logout-btn:hover{background:#1ed760;transform:translateY(-1px);box-shadow:0 4px 12px #1db9544d}.header__logout-btn:active{transform:translateY(0)}@media (max-width: 600px){.header__container{flex-direction:column;height:auto;padding:1rem}.header__nav{margin-top:.5rem;gap:1rem;justify-content:center}.header__logo h1{text-align:center}.header__user{flex-direction:column;gap:.5rem}.header__logout-btn{padding:.4rem .8rem;font-size:.8rem}}@media (max-width: 480px){.header__container{padding:.5rem}.header__nav{gap:.5rem}}.modal__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:999}.modal__content{background:#181818;color:#fff;padding:2rem;border-radius:8px;max-width:500px;width:90%;max-height:80%;overflow-y:auto;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:1rem}.modal__content img{width:100%;height:auto;max-width:100%;border-radius:4px;object-fit:cover}.modal__close{position:absolute;top:.5rem;right:.7rem;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}.app{width:100%;min-width:320px;max-width:100vw;overflow-x:clip;box-sizing:border-box}.modalFormInput__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:999}.modalFormInput__content{background:#181818;color:#fff;padding:2rem;border-radius:8px;max-width:400px;width:90%;position:relative;box-sizing:border-box}.modalFormInput__close{position:absolute;top:.5rem;right:.7rem;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.modalFormInput__header{text-align:center;margin-bottom:20px;margin-top:10px}.modalFormInput__header span{color:#1ed760}.login__form{display:flex;flex-direction:column;gap:1rem}.login__button{background-color:#1ed760;color:#000;padding:.7rem;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .3s}.login__button:hover{background-color:#1db954}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;display:flex;align-items:center;justify-content:space-between;padding:16px;min-height:60px;animation:slideIn .3s ease-out;border-left:4px solid;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toast--success{border-left-color:#10b981;background:linear-gradient(135deg,#10b9811a,#10b9810d)}.toast--error{border-left-color:#ef4444;background:linear-gradient(135deg,#ef44441a,#ef44440d)}.toast--warning{border-left-color:#f59e0b;background:linear-gradient(135deg,#f59e0b1a,#f59e0b0d)}.toast--info{border-left-color:#3b82f6;background:linear-gradient(135deg,#3b82f61a,#3b82f60d)}.toast__content{display:flex;align-items:center;gap:12px;flex:1}.toast__icon{font-size:20px;flex-shrink:0}.toast__message{color:#374151;font-size:14px;line-height:1.4;font-weight:500}.toast__close{background:none;border:none;color:#6b7280;cursor:pointer;font-size:20px;font-weight:700;padding:4px;border-radius:4px;transition:all .2s ease;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.toast__close:hover{background:#0000001a;color:#374151}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.toast.removing{animation:slideOut .3s ease-in}@media (max-width: 768px){.toast-container{left:20px;right:20px;max-width:none}.toast{padding:12px;min-height:50px}.toast__message{font-size:13px}.toast__icon{font-size:18px}}.signup__form{display:flex;flex-direction:column;gap:1rem}.form__group{display:flex;flex-direction:column}.form__group label{margin-bottom:.3rem;font-weight:700}.form__group input{padding:.5rem;border-radius:4px;border:1px solid #333;background:#121212;color:#fff}.form__group input:focus{outline:none;border-color:#1ed760}.error{color:#ff4d4f;font-size:.85rem;margin-top:.3rem}.signup__button{background-color:#1ed760;color:#000;padding:.7rem;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .3s}.signup__button:hover{background-color:#1db954}.profile__container{display:flex;min-height:100vh;background-color:#121212;overflow-x:clip;box-sizing:border-box;width:100%;min-width:320px;max-width:100vw;color:#fff}.profile__sidebar{flex:0 0 300px;background:linear-gradient(135deg,#1db954,#191414);border-right:1px solid #333;padding:20px;box-sizing:border-box;overflow-y:auto;overflow-x:clip;min-width:0}.profile__main{flex:1;background-color:#121212;padding:30px;box-sizing:border-box;overflow-y:auto;overflow-x:clip;min-width:0}.profile__user-card{text-align:center;margin-bottom:30px;padding:20px;background:#ffffff1a;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.profile__avatar-container{margin-bottom:15px}.profile__avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #1db954;box-shadow:0 4px 20px #0000004d}.profile__username{margin:10px 0 5px;font-size:1.5rem;font-weight:600;color:#fff}.profile__email{margin:0 0 20px;color:#b3b3b3;font-size:.9rem}.profile__edit-btn{background:transparent;border:2px solid #1db954;color:#1db954;padding:8px 20px;border-radius:25px;cursor:pointer;font-weight:500;transition:all .3s ease}.profile__edit-btn:hover{background:#1db954;color:#fff;transform:translateY(-2px)}.profile__stats{background:#ffffff0d;border-radius:10px;padding:20px}.profile__stats h3{margin:0 0 15px;color:#1db954;font-size:1.2rem}.profile__stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}.profile__stat-item:last-child{border-bottom:none}.profile__stat-label{color:#b3b3b3;font-size:.9rem}.profile__stat-value{color:#fff;font-weight:600;font-size:1.1rem}.profile__content h1{margin:0 0 30px;font-size:2.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#1db954,#1ed760);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.profile__content h2{margin:30px 0 20px;font-size:1.5rem;color:#fff;font-weight:600}.profile__recent-activity{margin-bottom:40px}.profile__activity-list{display:flex;flex-direction:column;gap:15px}.profile__activity-item{display:flex;align-items:center;padding:15px;background:#1a1a1a;border-radius:10px;border-left:4px solid #1db954;transition:transform .2s ease}.profile__activity-item:hover{transform:translate(5px);background:#222}.profile__activity-icon{font-size:1.5rem;margin-right:15px;width:40px;text-align:center}.profile__activity-details{flex:1}.profile__activity-title{margin:0 0 5px;color:#fff;font-weight:500}.profile__activity-time{margin:0;color:#b3b3b3;font-size:.85rem}.profile__favorite-genres{margin-bottom:40px}.profile__genre-tags{display:flex;flex-wrap:wrap;gap:10px}.profile__genre-tag{background:linear-gradient(135deg,#1db954,#1ed760);color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .2s ease}.profile__genre-tag:hover{transform:scale(1.05)}.profile__action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.profile__action-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;background:#1a1a1a;border:2px solid #333;border-radius:10px;color:#fff;cursor:pointer;transition:all .3s ease;font-weight:500}.profile__action-btn:hover{border-color:#1db954;background:#1db9541a;transform:translateY(-2px)}.profile__action-btn span{font-size:1.2rem}.profile__edit-section{max-width:600px}.profile__edit-section h1{margin:0 0 30px;font-size:2rem;color:#fff}.profile__edit-form{background:#1a1a1a;padding:30px;border-radius:15px;border:1px solid #333}.profile__form-group{margin-bottom:20px}.profile__form-group label{display:block;margin-bottom:8px;color:#1db954;font-weight:500}.profile__form-group input{width:100%;padding:12px 15px;background:#121212;border:2px solid #333;border-radius:8px;color:#fff;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}.profile__form-group input:focus{outline:none;border-color:#1db954}.profile__form-group input::placeholder{color:#666}.profile__form-actions{display:flex;gap:15px;margin-top:30px}.profile__save-btn{background:linear-gradient(135deg,#1db954,#1ed760);color:#fff;border:none;padding:12px 30px;border-radius:25px;cursor:pointer;font-weight:600;transition:transform .2s ease}.profile__save-btn:hover{transform:translateY(-2px)}.profile__cancel-btn{background:transparent;border:2px solid #666;color:#666;padding:10px 30px;border-radius:25px;cursor:pointer;font-weight:500;transition:all .3s ease}.profile__cancel-btn:hover{border-color:#999;color:#999}.profile__error{color:#ff6b6b;font-size:.875rem;margin-top:4px;display:block}.profile__save-btn:disabled,.profile__cancel-btn:disabled{opacity:.6;cursor:not-allowed}.profile__save-btn:disabled:hover{background-color:#1db954}@media (max-width: 768px){.profile__container{flex-direction:column;min-height:auto}.profile__sidebar{flex:none;width:100%;border-right:none;border-bottom:1px solid #333;padding:15px}.profile__main{padding:20px 15px}.profile__content h1{font-size:2rem}.profile__action-buttons{grid-template-columns:1fr}.profile__form-actions{flex-direction:column}.profile__genre-tags{justify-content:center}}.spotify-connect{background:linear-gradient(135deg,#1db954,#1ed760);border-radius:12px;padding:24px;color:#fff;margin:20px 0;box-shadow:0 4px 20px #1db9544d;transition:all .3s ease}.spotify-connect:hover{transform:translateY(-2px);box-shadow:0 6px 25px #1db95466}.spotify-connect.connected{background:linear-gradient(135deg,#1db954,#1ed760);display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:20px}.spotify-connect.disconnected{text-align:center}.spotify-user-info{display:flex;align-items:center;gap:16px}.spotify-avatar{width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.3);object-fit:cover}.spotify-user-details h3{margin:0;font-size:18px;font-weight:600}.spotify-user-details p{margin:4px 0;opacity:.9}.spotify-email{font-size:14px;opacity:.7}.spotify-connect-content{display:flex;flex-direction:column;align-items:center;gap:16px}.spotify-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%;margin-bottom:8px}.spotify-logo svg{width:24px;height:24px;color:#fff}.spotify-connect h3{margin:0;font-size:24px;font-weight:700}.spotify-connect p{margin:0;opacity:.9;text-align:center;max-width:300px;line-height:1.5}.spotify-connect-btn{background:#fff;color:#1db954;border:none;padding:12px 32px;border-radius:25px;font-weight:600;font-size:16px;cursor:pointer;transition:all .3s ease;margin-top:8px}.spotify-connect-btn:hover{background:#f0f0f0;transform:scale(1.05)}.spotify-connect-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spotify-disconnect-btn{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:8px 20px;border-radius:20px;font-weight:500;cursor:pointer;transition:all .3s ease}.spotify-disconnect-btn:hover{background:#ffffff1a;border-color:#ffffff80}.spotify-user-section{display:flex;align-items:center;justify-content:space-between}.spotify-music-data{background:#ffffff1a;border-radius:8px;padding:16px;margin-top:16px}.spotify-data-tabs{display:flex;gap:8px;margin-bottom:16px}.spotify-tab{background:#fff3;color:#fff;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .3s ease;font-weight:500}.spotify-tab:hover{background:#ffffff4d}.spotify-tab.active{background:#fff;color:#1db954}.spotify-music-list{list-style:none;padding:0;margin:0}.spotify-music-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.spotify-music-item:last-child{border-bottom:none}.spotify-rank{font-weight:700;font-size:18px;width:24px;text-align:center;color:#fffc}.spotify-track-image,.spotify-artist-image{width:40px;height:40px;border-radius:4px;object-fit:cover}.spotify-track-info,.spotify-artist-info{flex:1;min-width:0}.spotify-track-name,.spotify-artist-name{margin:0;font-weight:600;font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-track-artists,.spotify-artist-genres{margin:2px 0 0;font-size:12px;color:#ffffffb3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-popularity,.spotify-followers{font-size:12px;color:#fff9;font-weight:500;min-width:60px;text-align:right}.spotify-no-data{text-align:center;color:#ffffffb3;font-style:italic;padding:20px}.spotify-tracks-list h4,.spotify-artists-list h4{margin:0 0 12px;color:#fff;font-size:16px;font-weight:600}.spotify-error{margin-top:16px;padding:12px;background:#dc35451a;border:1px solid rgba(220,53,69,.3);border-radius:8px;color:#fff}.spotify-error p{margin:0 0 8px;font-size:14px}.spotify-troubleshoot{margin-top:8px}.spotify-troubleshoot summary{cursor:pointer;font-weight:600;padding:4px 0;color:#ffffffe6}.spotify-troubleshoot summary:hover{color:#fff}.spotify-help{margin-top:8px;padding:8px;background:#0003;border-radius:4px;font-size:12px;line-height:1.4}.spotify-help p{margin:0 0 8px;font-weight:600}.spotify-help ol{margin:8px 0;padding-left:16px}.spotify-help ul{margin:4px 0;padding-left:16px}.spotify-help li{margin:4px 0}.spotify-help code{background:#ffffff1a;padding:2px 4px;border-radius:3px;font-family:monospace;font-size:11px}.spotify-help a{color:#1db954;text-decoration:none}.spotify-help a:hover{text-decoration:underline}.spotify-uri-box{background:#1db95433;border:2px solid #1db954;border-radius:6px;padding:12px;margin:8px 0;text-align:center}.spotify-uri-box code{background:none;color:#1db954;font-weight:700;font-size:14px;padding:0}@media (max-width: 768px){.spotify-connect.connected{flex-direction:column;gap:16px;text-align:center}.spotify-user-info{flex-direction:column;text-align:center}}:root{--bg-primary: #121212;--bg-secondary: #181818;--bg-tertiary: #282828;--text-primary: #ffffff;--text-secondary: #b3b3b3;--accent-primary: #1db954;--accent-hover: #1ed760;--border-color: rgba(255, 255, 255, .1);--shadow-light: 0 2px 8px rgba(0, 0, 0, .3);--shadow-heavy: 0 8px 32px rgba(0, 0, 0, .4)}.playlist__main{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding:20px;font-family:Circular,-apple-system,BlinkMacSystemFont,sans-serif}.playlist__container{max-width:1200px;margin:0 auto}.playlist__header{text-align:center;margin-bottom:40px}.playlist__header h1{margin:0 0 10px;font-size:3rem;font-weight:700;background:linear-gradient(135deg,#1db954,#1ed760);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.playlist__subtitle{margin:0;color:#b3b3b3;font-size:1.1rem}.playlist__controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}.playlist__search-sort{display:flex;gap:15px;align-items:center;flex:1}.playlist__search{position:relative;flex:1;max-width:300px}.playlist__search-input{width:100%;padding:12px 40px 12px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:25px;color:var(--text-primary);font-size:14px;transition:all .3s ease}.playlist__search-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #1db95433}.playlist__search-input::placeholder{color:var(--text-secondary)}.playlist__search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.playlist__sort-select{padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;transition:all .3s ease}.playlist__sort-select:focus{outline:none;border-color:var(--accent-primary)}.playlist__create-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--accent-primary);color:#fff;border:none;border-radius:25px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-light)}.playlist__create-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-heavy)}.playlist__create-btn span{font-size:18px;font-weight:300}.playlist__stats{display:flex;gap:30px;margin-bottom:30px;padding:20px;background:var(--bg-secondary);border-radius:12px;justify-content:center}.playlist__stat{text-align:center}.playlist__stat-number{display:block;font-size:2rem;font-weight:700;color:var(--accent-primary);margin-bottom:5px}.playlist__stat-label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.playlist__error{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#ef4444;text-align:center;margin-bottom:2rem}.playlist__error{color:#ff6b6b;font-size:.875rem;margin-top:4px;display:block}.playlist__retry-btn{padding:.5rem 1rem;background:#ef4444;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease}.playlist__retry-btn:hover{background:#dc2626;transform:translateY(-1px)}.playlist__loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem;text-align:center;color:var(--text-secondary)}.playlist__spinner{width:40px;height:40px;border:3px solid rgba(29,185,84,.1);border-top:3px solid #1db954;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.playlist__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:40px}.playlist__card{background:var(--bg-secondary);border-radius:12px;overflow:hidden;transition:all .3s ease;border:1px solid transparent;position:relative}.playlist__card:hover{background:var(--bg-tertiary);border-color:var(--border-color);transform:translateY(-4px);box-shadow:var(--shadow-heavy)}.playlist__card-image{position:relative;aspect-ratio:1;overflow:hidden}.playlist__card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.playlist__card:hover .playlist__card-image img{transform:scale(1.05)}.playlist__card-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.playlist__card:hover .playlist__card-overlay{opacity:1}.playlist__play-btn{width:60px;height:60px;border-radius:50%;background:var(--accent-primary);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:scale(.8);transition:all .3s ease;box-shadow:var(--shadow-light)}.playlist__play-btn:hover{background:var(--accent-hover);transform:scale(1)}.playlist__card-content{padding:20px}.playlist__card-title{margin:0 0 8px;font-size:1.1rem;font-weight:600;color:var(--text-primary);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}.playlist__card-description{margin:0 0 12px;color:var(--text-secondary);font-size:.9rem;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.playlist__card-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:.85rem}.playlist__card-tracks{color:var(--text-secondary)}.playlist__card-visibility{padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:500}.playlist__card-visibility.public{background:#22c55e33;color:#22c55e}.playlist__card-visibility.private{background:#9ca3af33;color:#9ca3af}.playlist__card-actions{display:flex;gap:8px;flex-wrap:wrap}.playlist__action-btn{flex:1;padding:8px 12px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .3s ease;text-align:center;min-width:70px}.playlist__action-btn:hover{background:#ffffff1a;color:var(--text-primary);border-color:var(--accent-primary)}.playlist__action-btn.edit:hover{background:#3b82f633;color:#3b82f6}.playlist__action-btn.delete:hover{background:#ef444433;color:#ef4444}.playlist__action-btn.like{transition:all .3s ease}.playlist__action-btn.like:hover{background:#ec489933;color:#ec4899}.playlist__action-btn.like.liked{background:#ec48994d;color:#ec4899;border-color:#ec4899}.playlist__action-btn.like.liked:hover{background:#ef444433;color:#ef4444}.playlist__action-btn.share{transition:all .3s ease}.playlist__action-btn.share:hover{background:#a855f733;color:#a855f7;border-color:#a855f7}.playlist__action-btn.share:active{background:#a855f74d;transform:translateY(1px)}.playlist__action-btn.share:disabled{opacity:.6;cursor:not-allowed;background-color:#333}.playlist__action-btn.share:disabled:hover{background-color:#333;transform:none}.playlist__action-btn:disabled{opacity:.5;cursor:not-allowed;background:#ffffff0d;color:var(--text-secondary)}.playlist__action-btn:disabled:hover{background:#ffffff0d;color:var(--text-secondary);border-color:var(--border-color);transform:none}.playlist__edit-form{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.playlist__edit-input,.playlist__edit-textarea{padding:.5rem;background:var(--bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:var(--text-primary);font-family:inherit;resize:vertical}.playlist__edit-input:focus,.playlist__edit-textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #1db95433}.playlist__edit-textarea{min-height:60px;max-height:120px}.playlist__edit-buttons{display:flex;gap:.5rem;justify-content:flex-end}.playlist__save-btn,.playlist__cancel-btn{padding:.5rem 1rem;border:none;border-radius:4px;font-weight:500;cursor:pointer;transition:all .2s ease}.playlist__save-btn{background:var(--accent-primary);color:#fff}.playlist__save-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.playlist__cancel-btn{background:transparent;color:var(--text-secondary);border:1px solid rgba(255,255,255,.2)}.playlist__cancel-btn:hover{background:#ffffff0d;color:var(--text-primary)}.playlist__empty{grid-column:1 / -1;text-align:center;padding:60px 20px;color:var(--text-secondary)}.playlist__empty-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.playlist__empty h3{margin:0 0 10px;color:var(--text-primary);font-size:1.5rem}.playlist__empty p{margin:0 0 20px;font-size:1rem}.playlist__empty .playlist__create-btn{margin-top:1rem;padding:.75rem 1.5rem;background:var(--accent-primary);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.playlist__empty .playlist__create-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}.playlist__modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.playlist__modal{background:var(--bg-secondary);border-radius:12px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;border:1px solid var(--border-color);box-shadow:var(--shadow-heavy)}.playlist__modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;margin-bottom:20px}.playlist__modal-header h2{margin:0;color:var(--text-primary);font-size:1.5rem}.playlist__modal-close{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;padding:4px;border-radius:4px;transition:all .3s ease}.playlist__modal-close:hover{background:#ffffff1a;color:var(--text-primary)}.playlist__modal-content{padding:0 24px 24px}.playlist__form{display:flex;flex-direction:column;gap:20px}.playlist__form-group{display:flex;flex-direction:column;gap:8px}.playlist__form-label{color:var(--text-primary);font-weight:500;font-size:.9rem}.playlist__form-input,.playlist__form-textarea{padding:12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:14px;transition:all .3s ease}.playlist__form-input:focus,.playlist__form-textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #1db95433}.playlist__form-textarea{resize:vertical;min-height:80px}.playlist__form-checkbox-group{display:flex;align-items:center;gap:10px}.playlist__form-checkbox{width:18px;height:18px;accent-color:var(--accent-primary)}.playlist__form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:10px}.playlist__form-btn{padding:12px 24px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:14px}.playlist__form-btn.primary{background:var(--accent-primary);color:#fff}.playlist__form-btn.primary:hover{background:var(--accent-hover)}.playlist__form-btn.secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.playlist__form-btn.secondary:hover{background:#ffffff0d;color:var(--text-primary)}@media (max-width: 768px){.playlist__main{padding:15px}.playlist__header h1{font-size:2.5rem}.playlist__controls{flex-direction:column;align-items:stretch}.playlist__search-sort{flex-direction:column;gap:10px}.playlist__search{max-width:none}.playlist__stats{gap:20px;padding:15px;flex-wrap:wrap}.playlist__stat-number{font-size:1.5rem}.playlist__grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.playlist__card-content{padding:15px}.playlist__card-actions{flex-direction:column}.playlist__action-btn{min-width:auto}.playlist__modal{width:95%;margin:20px}.playlist__modal-header{padding:20px 20px 0}.playlist__modal-content{padding:0 20px 20px}.playlist__form-actions{flex-direction:column}.playlist__form-btn{width:100%}.playlist__edit-form{padding:.75rem}.playlist__edit-buttons{flex-direction:column}.playlist__save-btn,.playlist__cancel-btn{width:100%}.playlist__error{padding:1.5rem;margin-bottom:1rem}.playlist__loading{padding:2rem}}@media (max-width: 480px){.playlist__header h1{font-size:2rem}.playlist__grid{grid-template-columns:1fr}.playlist__stats{flex-direction:column;text-align:center}}