:root{--spotify-green: #1DB954;--spotify-black: #121212;--spotify-dark: #181818;--spotify-tile-bg: #222222;--spotify-gray: #282828;--spotify-light-gray: #B3B3B3;--spotify-warning: #FFB347;--spotify-accent-blue: #66a6f5;--spotify-row-bg: #1f1f1f;--text-primary: #FFFFFF;--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--spotify-black);color:var(--text-primary);min-height:100dvh;min-height:100vh;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);overflow-x:hidden}#app{min-height:100dvh;display:flex;flex-direction:column}button,a,input,.clickable{min-height:44px;min-width:44px}button{cursor:pointer;border:none;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input{font-family:inherit;font-size:16px}.page{flex:1;padding:16px;padding-bottom:max(16px,var(--safe-bottom))}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80dvh;padding:24px}.login-page h1{font-size:1.75rem;margin:0 0 8px}.login-page .subtitle{color:var(--spotify-light-gray);font-size:.95rem;text-align:center;margin-bottom:40px;line-height:1.4}.login-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:280px;padding:14px 24px;background:var(--spotify-green);color:#000;font-weight:600;font-size:1rem;border-radius:500px;transition:transform .1s}.login-btn:active{transform:scale(.98)}.login-btn:disabled{opacity:.7;cursor:not-allowed}.error-msg{color:#ff6b6b;font-size:.875rem;margin-top:16px;text-align:center}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--spotify-black);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10}.header-logo{display:block;height:38px;width:auto;max-width:min(200px,50vw);object-fit:contain;object-position:left center;margin:0;padding:0;flex-shrink:0;vertical-align:middle}.header-actions{display:flex;gap:8px}.icon-btn{min-width:44px;height:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--spotify-light-gray);border-radius:8px;font-size:1rem}.icon-btn:active{background:var(--spotify-gray)}.input-section{padding:24px 0}.input-section .icon{font-size:3rem;color:var(--spotify-green);margin-bottom:16px;display:block;text-align:center}.input-section h2{font-size:1.1rem;font-weight:500;margin:0 0 20px;text-align:center;color:var(--text-primary);line-height:1.4}.input-row{display:flex;gap:12px;align-items:stretch}.input-row input{flex:1;padding:14px 16px;background:var(--spotify-gray);border:none;border-radius:8px;color:var(--text-primary)}.input-row input::placeholder{color:var(--spotify-light-gray)}.input-row input:focus{outline:2px solid var(--spotify-green);outline-offset:2px}.check-btn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--spotify-green);color:#000;border-radius:8px;font-size:1.25rem}.check-btn:active{opacity:.9}.check-btn:disabled{opacity:.5;cursor:not-allowed}.tiles-container{display:flex;flex-direction:column;gap:20px}.tile{background:var(--spotify-tile-bg);border-radius:12px;padding:20px;width:100%;box-sizing:border-box}.tile-title{font-size:1.1rem;font-weight:600;margin:0 0 16px;color:var(--text-primary)}.tile-song-check .error-msg{margin-top:12px;margin-bottom:0}.tile-compare .input-row,.tile-compare .compare-row{margin-bottom:12px}.compare-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.compare-label{font-size:.875rem;font-weight:500;color:var(--spotify-light-gray)}.compare-row input{width:100%;padding:12px 14px;background:var(--spotify-gray);border:none;border-radius:8px;color:var(--text-primary);box-sizing:border-box}.compare-row input::placeholder{color:var(--spotify-light-gray)}.compare-row input:focus{outline:2px solid var(--spotify-green);outline-offset:2px}.compare-row select{width:100%;padding:12px 14px;background:var(--spotify-gray);border:none;border-radius:8px;color:var(--text-primary);font-size:.95rem;cursor:pointer}.tile-compare .error-msg{margin-top:8px;margin-bottom:12px}.compare-btn{width:100%;padding:12px 20px;margin-top:8px;background:var(--spotify-green);color:#000;font-weight:600;font-size:1rem;border:none;border-radius:8px;cursor:pointer}.compare-btn:active{opacity:.9}.compare-btn:disabled{opacity:.6;cursor:not-allowed}.compare-results{padding:0 0 24px}.compare-results h2{font-size:1.25rem;margin:0 0 8px;color:var(--text-primary)}.compare-count{font-size:.9rem;color:var(--spotify-light-gray);margin:0 0 16px}.compare-empty{color:var(--spotify-light-gray);font-size:.95rem;margin:16px 0 24px;line-height:1.5;text-align:center}.compare-track-list{margin-bottom:24px;border-radius:12px;overflow:hidden}.compare-track-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--spotify-row-bg);border-bottom:1px solid rgba(255,255,255,.06)}.compare-track-row:last-child{border-bottom:none}.compare-track-row img{width:48px;height:48px;border-radius:6px;object-fit:cover}.compare-track-row .placeholder-img{width:48px;height:48px;border-radius:6px;background:var(--spotify-gray);display:flex;align-items:center;justify-content:center;color:var(--spotify-light-gray);font-size:1.25rem}.compare-track-row .info{flex:1;min-width:0}.compare-track-row .info .name{font-size:.9rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-track-row .info .artist{font-size:.8rem;color:var(--spotify-light-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-track-row .info .compare-added-by{font-size:.8rem;color:var(--spotify-accent-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:20px}.spinner{width:40px;height:40px;border:3px solid var(--spotify-gray);border-top-color:var(--spotify-green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{margin:0;color:var(--spotify-light-gray);font-size:.95rem}.track-header{text-align:center;padding:20px 0;margin-bottom:16px}.track-header img{width:120px;height:120px;border-radius:8px;object-fit:cover;box-shadow:0 4px 12px #00000080}.track-header .placeholder-art{width:120px;height:120px;margin:0 auto;border-radius:8px;background:var(--spotify-gray);display:flex;align-items:center;justify-content:center;color:var(--spotify-light-gray);font-size:2rem}.track-header h3{font-size:1.15rem;margin:12px 0 4px}.track-header .artist,.track-header .album{color:var(--spotify-light-gray);font-size:.9rem}.faux-pas-banner{padding:16px;margin-bottom:16px;border-radius:12px;background:#ffb3471f;border:1px solid rgba(255,179,71,.3)}.faux-pas-banner.success{background:#1db9541f;border-color:#1db9544d}.faux-pas-banner p{margin:0;font-size:.95rem;line-height:1.4}.section-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--spotify-light-gray);margin:20px 0 8px;padding:0 4px}.playlist-row{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:6px;background:#28282899;border-radius:8px}.playlist-row img{width:44px;height:44px;border-radius:4px;object-fit:cover}.playlist-row .placeholder-img{width:44px;height:44px;border-radius:4px;background:var(--spotify-gray);display:flex;align-items:center;justify-content:center;color:var(--spotify-light-gray);font-size:1rem}.playlist-row .info{flex:1;min-width:0}.playlist-row .name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-row .added-by{font-size:.8rem;margin-top:2px}.playlist-row .added-by.self{color:var(--spotify-green)}.playlist-row .added-by.other{color:var(--spotify-warning)}.playlist-row .icon{font-size:1.25rem;flex-shrink:0}.playlist-row .icon.check{color:var(--spotify-green)}.playlist-row .icon.warning{color:var(--spotify-warning)}.playlist-row .add-now-btn{flex-shrink:0;padding:6px 12px;font-size:.75rem;font-weight:600;color:#000;background:var(--spotify-green);border:none;border-radius:500px;cursor:pointer}.playlist-row .add-now-btn:hover{filter:brightness(1.1)}.playlist-row .add-now-btn:disabled{opacity:.8;cursor:not-allowed}.check-another{display:block;width:100%;max-width:280px;margin:24px auto 0;padding:14px;background:var(--spotify-green);color:#000;font-weight:600;font-size:1rem;border-radius:500px;text-align:center;text-decoration:none}.check-another:active{opacity:.9}.settings-actions{display:flex;gap:16px;margin-bottom:20px}.settings-actions button{color:var(--spotify-green);font-size:.9rem;font-weight:500;background:transparent;padding:8px 0}.settings-list{list-style:none;padding:0;margin:0}.settings-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.settings-item img{width:40px;height:40px;border-radius:4px;object-fit:cover}.settings-item .placeholder-img{width:40px;height:40px;border-radius:4px;background:var(--spotify-gray)}.settings-item .info{flex:1;min-width:0}.settings-item .name{font-weight:500}.settings-item .owner{font-size:.8rem;color:var(--spotify-light-gray)}.toggle{position:relative;width:51px;height:31px;background:var(--spotify-gray);border-radius:31px;cursor:pointer;transition:background .2s}.toggle.on{background:var(--spotify-green)}.toggle:after{content:"";position:absolute;width:27px;height:27px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s}.toggle.on:after{transform:translate(20px)}.clipboard-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:16px;background:#1db95426;border-radius:8px;color:var(--spotify-green);font-size:.9rem}.clipboard-banner button{background:transparent;color:inherit;padding:4px;margin-left:auto}.clipboard-banner .use-btn{flex:1;text-align:left}