*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #090909;--bg-2: #111111;--bg-3: #1a1a1a;--bg-4: #222222;--accent: #1DB954;--accent-dim: #158a3e;--accent-glow: rgba(29, 185, 84, .12);--accent-glow2: rgba(29, 185, 84, .06);--text: #f0f0f0;--text-dim: #888888;--text-dimmer: #484848;--border: #222222;--border-light: #333333;--font-ui: "Outfit", sans-serif;--font-mono: "Space Mono", monospace;--r: 8px;--r-lg: 14px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#090909eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100}.nav-logo{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.06em}.btn-logout{font-family:var(--font-ui);font-size:12px;color:var(--text-dim);background:none;border:1px solid var(--border-light);padding:5px 12px;border-radius:var(--r);cursor:pointer;transition:all .15s}.btn-logout:hover{color:var(--text);border-color:#555}.landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:48px 24px;background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(29,185,84,.07) 0%,transparent 70%)}.landing-inner{display:flex;flex-direction:column;align-items:center;gap:36px;max-width:380px;width:100%}.landing-logo{text-align:center}.landing-logo h1{font-family:var(--font-mono);font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:14px}.landing-logo h1 span{color:var(--accent)}.landing-logo p{font-size:15px;color:var(--text-dim);font-weight:300;letter-spacing:.01em}.btn-spotify{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#000;font-family:var(--font-ui);font-size:14px;font-weight:600;padding:14px 28px;border-radius:50px;border:none;cursor:pointer;transition:all .2s;letter-spacing:.01em}.btn-spotify:hover{background:#21d45e;transform:translateY(-1px);box-shadow:0 10px 30px #1db95447}.landing-divider{font-size:11px;color:var(--text-dimmer);text-transform:uppercase;letter-spacing:.1em;text-align:center}.landing-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.pill{font-size:12px;color:var(--text-dim);background:var(--bg-2);border:1px solid var(--border-light);padding:6px 14px;border-radius:50px}.playlists-view{flex:1;padding:32px;max-width:1200px;margin:0 auto;width:100%}.playlists-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}.playlists-top h2{font-size:20px;font-weight:600;white-space:nowrap}.paste-row{display:flex;gap:8px;flex:1;max-width:460px}.paste-input{flex:1;background:var(--bg-2);border:1px solid var(--border-light);color:var(--text);font-family:var(--font-ui);font-size:13px;padding:9px 14px;border-radius:var(--r);outline:none;transition:border-color .15s}.paste-input:focus{border-color:var(--accent)}.paste-input::placeholder{color:var(--text-dimmer)}.btn-load{background:var(--accent);color:#000;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--r);border:none;cursor:pointer;transition:all .15s;white-space:nowrap}.btn-load:hover:not(:disabled){background:#21d45e}.btn-load:disabled{opacity:.35;cursor:default}.loading-state{text-align:center;color:var(--text-dimmer);padding:80px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}.playlist-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .18s}.playlist-card:hover{border-color:var(--accent-dim);transform:translateY(-3px);box-shadow:0 12px 32px #00000080}.playlist-art{width:100%;aspect-ratio:1;background:var(--bg-3);display:flex;align-items:center;justify-content:center;overflow:hidden}.playlist-art img{width:100%;height:100%;object-fit:cover;display:block}.playlist-art-placeholder{font-size:36px;color:var(--text-dimmer)}.playlist-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}.playlist-name{font-size:12px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.playlist-track-count{font-size:11px;color:var(--text-dimmer)}.timeline-view{flex:1;padding:28px 32px 64px;max-width:1080px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:24px}.tl-header{display:flex;align-items:center;gap:20px}.btn-back{background:none;border:1px solid var(--border-light);color:var(--text-dim);font-family:var(--font-ui);font-size:12px;padding:7px 14px;border-radius:var(--r);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}.btn-back:hover{color:var(--text);border-color:#555}.tl-playlist-meta{display:flex;align-items:center;gap:14px}.tl-art{width:52px;height:52px;border-radius:6px;object-fit:cover;flex-shrink:0}.tl-playlist-name{font-size:18px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}.tl-playlist-sub{font-size:12px;color:var(--text-dim)}.tl-controls{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:18px 20px;background:var(--bg-2);border:1px solid var(--border-light);border-radius:var(--r-lg)}.ctrl-group{display:flex;flex-direction:column;gap:7px}.ctrl-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dimmer)}.time-input{background:var(--bg-3);border:1px solid var(--border-light);color:var(--text);font-family:var(--font-mono);font-size:22px;padding:8px 14px;border-radius:var(--r);outline:none;transition:border-color .15s;cursor:pointer}.time-input:focus{border-color:var(--accent)}.time-input.is-accent{border-color:var(--accent);color:var(--accent)}.time-input:disabled{opacity:.5;cursor:default}.btn-reverse{background:var(--bg-3);border:1px solid var(--border-light);color:var(--text-dim);font-family:var(--font-ui);font-size:13px;padding:9px 16px;border-radius:var(--r);cursor:pointer;transition:all .15s;white-space:nowrap}.btn-reverse:hover{color:var(--text);border-color:#555}.btn-reverse.active{background:var(--accent-glow);border-color:var(--accent-dim);color:var(--accent)}.reverse-hint{font-size:11px;color:var(--accent);font-style:italic;margin-top:2px}.ctrl-spacer{flex:1}.scrubber-wrap{display:flex;flex-direction:column;gap:8px}.scrubber{position:relative;display:flex;height:56px;border-radius:var(--r);overflow:visible;gap:1px;background:var(--bg-3);border:1px solid var(--border-light)}.scrubber-block{height:100%;position:relative;transition:filter .12s;flex-shrink:0;min-width:2px;cursor:default}.scrubber-block:nth-child(odd){background:#172319}.scrubber-block:nth-child(2n){background:#131d15}.scrubber-block.is-hoverable{cursor:pointer}.scrubber-block.is-hovered{filter:brightness(2.2);z-index:5}.scrubber-block.is-targeted{background:var(--accent)!important}.scrubber-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#161616;border:1px solid var(--border-light);border-radius:var(--r);padding:10px 14px;display:flex;flex-direction:column;gap:3px;white-space:nowrap;z-index:50;box-shadow:0 12px 32px #000000b3;pointer-events:none;min-width:160px}.tt-clock{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--accent)}.tt-name{font-size:13px;font-weight:500}.tt-artist{font-size:11px;color:var(--text-dim)}.tt-dur{font-family:var(--font-mono);font-size:10px;color:var(--text-dimmer);margin-top:2px}.now-line{position:absolute;top:-6px;bottom:-6px;width:2px;background:#e53e3e;border-radius:2px;transform:translate(-50%);z-index:20}.now-line:before{content:"NOW";position:absolute;top:-18px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:8px;color:#e53e3e;letter-spacing:.08em}.scrubber-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-dimmer)}.track-list{display:flex;flex-direction:column;gap:1px}.track-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--r);border:1px solid transparent;transition:all .1s;cursor:default}.track-row:hover{background:var(--bg-2);border-color:var(--border)}.track-row.is-hoverable{cursor:pointer}.track-row.is-targeted{background:var(--accent-glow);border-color:var(--accent-dim)}.tr-num{font-family:var(--font-mono);font-size:10px;color:var(--text-dimmer);min-width:22px;text-align:right;flex-shrink:0}.tr-info{flex:1;min-width:0}.tr-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.tr-artist{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-times{display:flex;align-items:center;gap:20px;flex-shrink:0}.tr-clock{font-family:var(--font-mono);font-size:14px;color:var(--accent);min-width:80px;text-align:right}.tr-elapsed{font-family:var(--font-mono);font-size:10px;color:var(--text-dimmer);min-width:56px;text-align:right}.tr-dur{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:38px;text-align:right}.tr-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.06em;background:var(--accent);color:#000;padding:2px 7px;border-radius:4px;flex-shrink:0}@media (max-width: 640px){.timeline-view{padding:16px 12px 48px;gap:16px}.playlists-view{padding:16px}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.tl-header{flex-wrap:wrap;gap:12px}.tl-playlist-name{font-size:15px;max-width:200px}.tl-controls{flex-direction:column;align-items:stretch;gap:14px}.ctrl-spacer{display:none}.btn-reverse{width:100%;text-align:center}.time-input{font-size:18px;width:100%}.scrubber-tooltip{left:auto;right:0;transform:none;min-width:140px}.scrubber-block:first-child .scrubber-tooltip,.scrubber-block:nth-child(2) .scrubber-tooltip{left:0;right:auto}.track-row{flex-wrap:wrap;gap:4px;padding:10px 8px}.tr-info{width:100%;min-width:0}.tr-times{width:100%;justify-content:flex-end}.tr-elapsed{display:none}.tr-num{min-width:18px}.playlists-top{flex-direction:column;align-items:stretch}.paste-row{max-width:100%}}