*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e5e7eb;overflow:hidden}.app{width:100vw;height:100vh}.panel{position:fixed;width:270px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:#12121ae0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;box-shadow:0 8px 32px #00000080}.controls{top:16px;right:16px}.left-column{position:fixed;top:16px;left:16px;display:flex;flex-direction:column;gap:12px;width:270px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}.left-column .panel{position:relative;width:100%}.left-column .panel form{margin:0}.left-column .panel label:last-child{margin-bottom:0}.panel-title{margin:0 0 14px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#c4b5fd}.details .panel-title{color:#f3f4f6;padding-right:24px}label{display:block;font-size:12px;color:#9ca3af;margin-bottom:12px}input[type=text],select{display:block;width:100%;margin-top:5px;padding:8px 10px;font-size:13px;color:#e5e7eb;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;outline:none}input[type=text]:focus,select:focus{border-color:#a78bfa}select option{background:#16161f}input[type=range]{display:block;width:100%;margin-top:8px;accent-color:#a78bfa}button[type=submit]{width:100%;padding:9px;font-size:13px;font-weight:600;color:#0a0a0f;background:#a78bfa;border:none;border-radius:8px;cursor:pointer;transition:background .15s}button[type=submit]:hover:not(:disabled){background:#c4b5fd}button[type=submit]:disabled{opacity:.45;cursor:default}.warning{font-size:12px;line-height:1.45;color:#fbbf24;background:#fbbf2414;border:1px solid rgba(251,191,36,.25);border-radius:8px;padding:8px 10px;margin:0 0 12px}.toggle-btn{width:100%;padding:8px;margin-bottom:10px;font-size:12px;font-weight:600;color:#c4b5fd;background:transparent;border:1px solid rgba(167,139,250,.4);border-radius:8px;cursor:pointer;transition:background .15s,color .15s}.toggle-btn:hover{background:#a78bfa1f}.toggle-btn.active{background:#a78bfa;color:#0a0a0f}.divider{height:1px;background:#ffffff14;margin:14px 0}.current-user{font-size:12px;color:#9ca3af;margin:0 0 12px}.close{position:absolute;top:10px;right:12px;background:none;border:none;color:#9ca3af;font-size:20px;cursor:pointer;line-height:1}.close:hover{color:#fff}.genre-chip{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;color:var(--chip-color);border:1px solid var(--chip-color);margin-bottom:14px;text-transform:capitalize}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.stats dt{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}.stats dd{margin:2px 0 0;font-size:15px;font-weight:600;color:#f3f4f6}.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#ffffff12;color:#d1d5db}.lastfm-link{font-size:13px;color:#a78bfa;text-decoration:none}.lastfm-link:hover{text-decoration:underline}.legend{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 14px;max-width:420px;padding:10px 14px;background:#12121acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:12px;color:#d1d5db}.legend-item{display:inline-flex;align-items:center;gap:6px;text-transform:capitalize}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-count{color:#6b7280}.bottom-bar{position:fixed;left:50%;transform:translate(-50%);bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px}.ui-toggle{padding:7px 14px;font-size:12px;font-weight:600;color:#9ca3af;background:#12121acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s}.ui-toggle:hover{color:#e5e7eb;border-color:#a78bfa80}.share-wrap{position:relative}.share-menu{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:200px;padding:6px;background:#12121af2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px #00000080}.share-menu button{display:block;width:100%;padding:8px 10px;font-size:13px;text-align:left;color:#e5e7eb;background:none;border:none;border-radius:8px;cursor:pointer}.share-menu button:hover{background:#a78bfa26;color:#fff}.share-menu button:disabled{opacity:.45;cursor:default}.share-sep{height:1px;background:#ffffff14;margin:5px 8px}.share-note{margin:5px 8px 6px;font-size:11px;line-height:1.4;color:#6b7280}.share-status{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;padding:7px 14px;font-size:12px;color:#0a0a0f;font-weight:600;background:#a78bfa;border-radius:999px;box-shadow:0 4px 20px #0006;pointer-events:none}.start-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.start-title{font-size:42px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;background:linear-gradient(90deg,#a78bfa,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}.start-tagline{color:#6b7280;font-size:14px;max-width:340px;margin:0 0 28px}.start-card{position:relative;width:320px;text-align:left}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a0fb3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay p{margin:14px 0 0;font-size:14px;color:#d1d5db}.overlay-note{font-size:12px!important;color:#6b7280!important}.progress-track{width:300px;height:8px;background:#ffffff1a;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#a78bfa,#ec4899);border-radius:999px;transition:width .2s ease}.spinner{width:36px;height:36px;border:3px solid rgba(167,139,250,.2);border-top-color:#a78bfa;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:calc(64px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:10px 18px;background:#dc2626eb;color:#fff;font-size:13px;border-radius:10px;cursor:pointer;box-shadow:0 4px 20px #0006}.toast.warn{background:#b46408eb}@media(max-width:640px){input[type=text],select{font-size:16px}.panel,.ui-toggle,.share-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0e0e14f5}.panel{padding:14px}.controls{top:12px;left:12px;right:12px;width:auto;max-height:46vh;max-height:46dvh}.left-column{top:auto;left:12px;right:12px;bottom:calc(60px + env(safe-area-inset-bottom));width:auto;max-height:34vh;max-height:34dvh;overflow-y:auto}.legend{display:none}button[type=submit]{padding:11px}.toggle-btn{padding:10px}.ui-toggle{padding:10px 16px}.start-title{font-size:34px}.start-card{width:min(320px,calc(100vw - 32px))}.toast{max-width:calc(100vw - 24px)}}