*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}:root{--bg:#06020f;--surface:#ffffff0d;--border:#ffffff1a;--purple:#7c3aed;--purple2:#a855f7;--cyan:#06b6d4;--text:#e2d9f3;--muted:#e2d9f380}.app-root{background:var(--bg);width:100vw;height:100vh;color:var(--text);justify-content:center;align-items:center;font-family:Inter,Segoe UI,sans-serif;display:flex;overflow:hidden}.track-input{flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:540px;padding:2rem;display:flex}.app-title{letter-spacing:.12em;font-size:clamp(2rem,5vw,3rem);font-weight:900}.title-accent{color:#1e3a8a}.title-slash{color:#fff}.title-bass{color:#5b21b6}.app-subtitle{color:var(--muted);margin-top:-.5rem;font-size:.95rem}.input-row{gap:.6rem;width:100%;display:flex}.spotify-input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:10px;outline:none;flex:1;padding:.75rem 1rem;font-size:.9rem;transition:border-color .2s}.spotify-input:focus{border-color:var(--purple)}.spotify-input::placeholder{color:var(--muted)}.btn-primary{background:linear-gradient(135deg, var(--purple), var(--purple2));color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;min-width:100px;padding:.75rem 1.25rem;font-size:.9rem;font-weight:700;transition:opacity .2s,transform .1s;display:flex}.btn-primary:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:#f87171;text-align:center;background:#f871711a;border:1px solid #f8717140;border-radius:8px;width:100%;padding:.6rem 1rem;font-size:.85rem}.divider{width:100%;color:var(--muted);align-items:center;gap:1rem;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.btn-upload{background:var(--surface);border:1.5px dashed var(--border);color:var(--muted);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:1.1rem 1.5rem;font-size:.9rem;transition:all .2s;display:flex}.btn-upload:hover{border-color:var(--purple);color:var(--purple2);background:#7c3aed14}.upload-main{font-size:.95rem;font-weight:600}.upload-sub{letter-spacing:.08em;opacity:.6;font-size:.72rem}.preview-note{color:var(--muted);text-align:center;opacity:.65;margin-top:-.25rem;font-size:.75rem;line-height:1.5}.dev-credit{align-items:center;gap:.6rem;display:flex;position:fixed;top:1.25rem;right:1.5rem}.dev-photo{object-fit:cover;object-position:center 20%;opacity:.45;border-radius:8px;width:42px;height:42px;transition:opacity .2s}.dev-photo:hover{opacity:.75}.dev-text{color:var(--muted);letter-spacing:.05em;opacity:.55;font-size:.72rem;font-weight:500}.track-input.dragging .btn-upload{border-color:var(--purple2);color:#fff;background:#7c3aed1f}.drop-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;pointer-events:none;background:#06020fd9;justify-content:center;align-items:center;animation:.15s drop-fade-in;display:flex;position:fixed;inset:0}.drop-overlay-inner{border:3px dashed var(--purple2);letter-spacing:.05em;color:#fff;background:#7c3aed1a;border-radius:20px;padding:3rem 4rem;font-size:1.6rem;font-weight:700}@keyframes drop-fade-in{0%{opacity:0}to{opacity:1}}.vis-page{width:100vw;height:100vh;position:relative}.vis-canvas{width:100%;height:100%;display:block}.vis-overlay{pointer-events:none;flex-direction:column;justify-content:space-between;padding:0 1.25rem 1.25rem;display:flex;position:absolute;inset:0}.vis-overlay>*{pointer-events:auto}.back-btn{color:#ffffffb3;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;border:1px solid #ffffff14;border-radius:10px;padding:7px 13px;font-size:.8rem;font-weight:500;transition:all .15s;position:absolute;top:16px;left:20px}.back-btn:hover{color:#fff;background:#ffffff1f;border-color:#ffffff29}.mode-bar{background:#000;border:1px solid #ffffff0d;border-top:none;border-radius:0 0 22px 22px;align-self:center;gap:2px;margin-top:0;padding:7px 14px 10px;display:flex;box-shadow:0 6px 18px #0009,inset 0 -1px #ffffff0a}.mode-btn{color:#ffffff8c;cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-radius:14px;padding:6px 14px;font-size:12px;font-weight:600;transition:all .18s}.mode-btn:hover{color:#fff;background:#ffffff0f}.mode-btn.active{color:#fff;background:#ffffff1f}.track-info{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);pointer-events:none;background:#06020f8c;border-radius:12px;align-self:flex-end;align-items:center;gap:.75rem;max-width:280px;padding:.6rem .9rem;display:flex}.album-art{object-fit:cover;border-radius:6px;flex-shrink:0;width:44px;height:44px}.track-name{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.track-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.transport{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);background:#06020fa6;border-radius:14px;align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex}.time{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:32px;font-size:.78rem}.seek-bar{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--purple2);cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px var(--purple);border-radius:50%}.play-btn{background:linear-gradient(135deg, var(--purple), var(--purple2));color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:1rem;transition:transform .1s,opacity .15s;display:flex}.play-btn:hover{transform:scale(1.08)}.settings-panel{-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);width:260px;color:var(--text);z-index:50;-webkit-user-select:none;user-select:none;background:#06020f99;border-radius:14px;padding:.6rem .75rem;position:absolute;top:1.25rem;right:1.25rem;box-shadow:0 8px 28px #00000073}.settings-header{cursor:pointer;align-items:center;gap:.6rem;display:flex}.settings-art{object-fit:cover;border-radius:6px;flex-shrink:0;width:36px;height:36px}.settings-track{flex:1;min-width:0}.settings-track-name{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:700;overflow:hidden}.settings-track-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;overflow:hidden}.settings-toggle{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:5px;transition:color .15s,background .15s,transform .3s;display:flex}.settings-toggle:hover{color:#fff;background:#ffffff14}.settings-toggle-active{color:var(--purple2);transform:rotate(60deg)}.settings-toggle-active:hover{color:#fff}.settings-icon{display:block}.settings-body{border-top:1px solid var(--border);margin-top:.7rem;padding-top:.6rem}.settings-row{grid-template-columns:52px 1fr 44px;align-items:center;gap:.55rem;margin-bottom:.6rem;display:grid}.settings-label{color:var(--text);font-size:.78rem;font-weight:600}.settings-range{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;width:100%;height:3px}.settings-range::-webkit-slider-thumb{appearance:none;background:var(--purple2);cursor:pointer;width:12px;height:12px;box-shadow:0 0 5px var(--purple);border:none;border-radius:50%}.settings-range::-moz-range-thumb{background:var(--purple2);cursor:pointer;width:12px;height:12px;box-shadow:0 0 5px var(--purple);border:none;border-radius:50%}.settings-value{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;font-size:.72rem;font-weight:600}.settings-eq{border-top:1px solid var(--border);margin-top:.55rem;padding-top:.7rem}.settings-subtitle{text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:.55rem;font-size:.68rem;font-weight:700}.eq-sliders{justify-content:space-between;gap:.35rem;padding:.2rem 0;display:flex}.eq-slider{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.eq-db{color:var(--muted);font-variant-numeric:tabular-nums;min-height:10px;font-size:.62rem;font-weight:600}.eq-freq{color:var(--text);letter-spacing:.02em;font-size:.65rem;font-weight:600}.eq-range{appearance:slider-vertical;writing-mode:vertical-lr;background:var(--border);cursor:pointer;direction:rtl;border-radius:3px;outline:none;width:6px;height:72px;padding:0}.eq-range::-webkit-slider-thumb{appearance:none;background:var(--purple2);cursor:pointer;width:12px;height:12px;box-shadow:0 0 5px var(--purple);border:none;border-radius:50%}.eq-range::-moz-range-thumb{background:var(--purple2);cursor:pointer;width:12px;height:12px;box-shadow:0 0 5px var(--purple);border:none;border-radius:50%}