.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}:root{color-scheme:dark;--bg: #121212;--bg-black: #000000;--bg-card: #181818;--bg-hover: #282828;--bg-elevated: #282828;--bg-alt: #181818;--panel: #181818;--panel-strong: #282828;--border: #282828;--border-subtle: #282828;--text: #ffffff;--text-secondary: #b3b3b3;--muted: #a7a7a7;--accent: #1DB954;--accent-light: #1ED760;--accent-dark: #1AA34A;--accent-strong: #1ED760;--warning: #f59e0b;--error: #e22134;--success: #1DB954;--header-offset: 0px;--spotify-green: #1DB954;--gray-600: #535353;--gray-700: #3e3e3e;font-family:Helvetica Neue,Helvetica,Arial,Noto Sans,sans-serif;background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;background:var(--bg);min-height:100vh}#root{min-height:100vh}.page{display:flex;flex-direction:column;gap:12px;padding-bottom:180px}@media (max-width: 720px){.page{gap:8px;padding-bottom:200px}}.hero{position:sticky;top:0;z-index:10;padding:20px clamp(16px,4vw,48px) 16px;background:var(--bg-black)}.hero-top{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.hero-right{display:flex;gap:10px;align-items:center}.header-separator{width:1px;height:24px;background:#ffffff1f;margin:0 2px}.user-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:none;background:var(--bg-elevated);font-size:12px;color:var(--text)}.user-badge .user-icon{width:16px;height:16px;fill:var(--accent)}.user-badge .user-email{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-badge button{border:none;background:transparent;color:var(--text);cursor:pointer;font-size:12px;padding:0}.user-badge button:hover{color:var(--accent)}.sign-in-button{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:500px;border:none;background:#fff;font-size:13px;font-weight:700;color:#000;cursor:pointer;transition:transform .2s ease,background .2s ease}.sign-in-button svg{width:16px;height:16px;fill:#000}.sign-in-button:hover{transform:scale(1.04);background:#f0f0f0}.hero h1{margin:0 0 4px;font-size:clamp(18px,2.5vw,26px);font-weight:600;letter-spacing:-.02em;color:#e0e0e0}.hero p{margin:0;max-width:460px;color:var(--text-secondary);font-size:12px}.hero-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.hero-stats div{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;background:var(--bg-card);border:none;min-width:130px}.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.stat-value{font-size:15px;font-weight:600;color:var(--text-secondary)}.list{display:flex;flex-direction:column;gap:10px;padding:0 clamp(16px,4vw,48px)}.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:8px 0 16px;color:var(--muted);font-size:12px;flex-wrap:wrap}@media (max-width: 480px){.pagination{gap:8px;font-size:11px}.pagination button{padding:6px 10px;font-size:11px}}.pagination button{border:none;background:var(--bg-elevated);color:var(--text);padding:6px 14px;border-radius:500px;cursor:pointer;transition:background .2s ease}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination button:hover:not(:disabled){background:var(--bg-hover)}.genre-table{width:100%;border-collapse:collapse;background:transparent;border-radius:8px;overflow:hidden;border:none}.genre-table thead{background:transparent}.genre-table th,.genre-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}.genre-table th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);position:sticky;top:var(--header-offset);background:var(--bg);z-index:2;padding:8px 12px;font-weight:400;border-bottom:1px solid rgba(255,255,255,.08)}.column-controls{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--muted)}.sort-toggle{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:inherit;text-transform:uppercase;letter-spacing:.12em;font-size:11px;cursor:pointer;padding:0;transition:color .2s ease}.sort-toggle:hover{color:var(--text)}.sort-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;opacity:0}.sort-arrow.asc{border-bottom:7px solid var(--accent);opacity:1}.sort-arrow.desc{border-top:7px solid var(--accent);opacity:1}.view-tabs{display:inline-flex;gap:4px;background:var(--bg-card);border:none;padding:4px;border-radius:500px}.view-tabs button{border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:8px 16px;border-radius:500px;cursor:pointer;transition:all .2s ease}.view-tabs button.active{background:var(--spotify-green);color:#000}.view-tabs button:not(.active):hover{color:var(--text);background:var(--bg-hover)}.history{display:flex;flex-direction:column;gap:16px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{background:var(--bg-card);border-radius:8px;padding:16px;display:flex;align-items:center;gap:12px}.stat-card.stat-primary{background:#1db9541a}.stat-icon{width:40px;height:40px;border-radius:12px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon svg{width:20px;height:20px;fill:var(--muted)}.stat-primary .stat-icon{background:#1db95433}.stat-primary .stat-icon svg{fill:var(--spotify-green)}.stat-content{display:flex;flex-direction:column}.stat-number{font-size:22px;font-weight:700}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.section-title{display:flex;align-items:center;font-size:16px;font-weight:700;margin:8px 0}.progress-panels{display:grid;gap:12px;grid-template-columns:auto 1fr}.progress-card{background:var(--bg-card);border:none;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;transition:background .2s ease}.progress-card:hover{background:var(--bg-hover)}.progress-card-wide{grid-column:1 / -1;flex-direction:column;align-items:stretch}.progress-header{display:flex;justify-content:space-between;align-items:center;width:100%}.progress-percent{font-size:12px;color:var(--muted)}.progress-card h3{margin:0;font-size:16px}.progress-card p{margin:0;color:var(--muted);font-size:12px}.progress-ring{width:72px;height:72px;position:relative;flex-shrink:0}.progress-ring svg{width:72px;height:72px;transform:rotate(-90deg)}.ring-base{fill:none;stroke:#ffffff14;stroke-width:10}.ring-fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dasharray .8s ease}.ring-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}.progress-bar{height:12px;border-radius:999px;background:#ffffff14;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .8s ease}.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.progress-timeline{display:flex;flex-direction:column;gap:8px;padding:8px 0}.timeline-track{position:relative;height:8px;background:var(--bg-elevated);border-radius:999px;overflow:visible}.timeline-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--spotify-green),var(--accent-light));border-radius:999px;transition:width .5s ease}.timeline-marker{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.marker-dot{width:12px;height:12px;border-radius:50%;background:var(--spotify-green);border:2px solid var(--bg-card);transition:transform .2s ease}.timeline-marker:hover .marker-dot{transform:scale(1.3)}.timeline-marker:hover{z-index:10}.marker-label{position:absolute;top:16px;left:50%;transform:translate(-50%);font-size:9px;color:var(--muted);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}.timeline-marker:hover .marker-label{opacity:1}.marker-label-detail{color:var(--spotify-green);font-size:8px}.timeline-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-top:20px}.timeline-empty{padding:16px;color:var(--muted);font-size:13px;text-align:center}.history-table{border:none;border-radius:8px;background:var(--bg-card);overflow:hidden}.history-header,.history-row{display:grid;grid-template-columns:180px 1fr 2fr;gap:12px;padding:12px 16px}.history-header{background:var(--bg-black);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted)}.history-row{border-top:1px solid rgba(255,255,255,.04);font-size:13px}.history-empty{padding:16px;color:var(--muted);font-size:13px}.history-action{font-style:normal;color:var(--accent);margin-left:6px;font-size:11px}.leaderboard-section{display:flex;flex-direction:column;gap:16px}.section-title{margin:8px 0 0;font-size:16px;color:var(--text)}.leaderboard-table{border:none;border-radius:8px;background:var(--bg-card);overflow:hidden}.leaderboard-header,.leaderboard-row{display:grid;grid-template-columns:50px 1fr 100px 1fr;gap:12px;padding:12px 16px}.leaderboard-header{background:var(--bg-black);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted)}.leaderboard-row{border-top:1px solid rgba(255,255,255,.04);font-size:13px;align-items:center}.leaderboard-row-you{background:var(--bg-elevated)}.leaderboard-rank{font-weight:600;text-align:center}.leaderboard-user{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-count{font-weight:600;color:var(--text)}.leaderboard-last{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-empty{padding:16px;color:var(--muted);font-size:13px}.genre-table tbody tr:hover{background:var(--bg-hover)}.row-listened{animation:heard-pop .35s ease}@keyframes heard-pop{0%{transform:scale(.995);background:#1db9541f}60%{transform:scale(1.01);background:#1db95433}to{transform:scale(1)}}.genre-name{font-size:16px;font-weight:400;color:var(--text)}.genre-table th:nth-child(1),.genre-table td:nth-child(1){width:50px}.genre-table th:nth-child(2),.genre-table td:nth-child(2){width:50px}.genre-table th:nth-child(4),.genre-table td:nth-child(4){width:50px}.genre-table th:nth-child(7),.genre-table td:nth-child(7){width:160px;min-width:160px}.sample-meta{font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;color:var(--muted);white-space:normal;overflow:visible}.genre-table th:nth-child(3),.genre-table td:nth-child(3){width:40px}.like-cell{text-align:center}.heart-btn{border:none;background:transparent;cursor:pointer;padding:4px;display:inline-flex;align-items:center;justify-content:center}.heart-btn svg{width:20px;height:20px;fill:var(--muted);transition:fill .2s ease,transform .3s cubic-bezier(.175,.885,.32,1.275)}.heart-btn:hover svg{fill:var(--spotify-green);transform:scale(1.15)}.heart-btn-active svg{fill:var(--spotify-green)}@keyframes heart-pop{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}to{transform:scale(1)}}.heart-btn-active svg{animation:heart-pop .4s ease}.genre-sample-sub,.row-overflow{display:none}.map-cell{text-align:center}.map-dot{width:10px;height:10px;border-radius:999px;display:inline-block;background:var(--accent);border:none}.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex-shrink:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:500px;border:none;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;transition:color .15s ease}.icon-button svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}.icon-button:hover:not(:disabled){color:var(--text)}.icon-button:active:not(:disabled){transform:scale(.95)}.icon-button:disabled{opacity:.4;cursor:not-allowed}.icon-button.spotify{background:var(--spotify-green);color:#000}.icon-button.spotify:hover{background:var(--accent-light);transform:scale(1.04)}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:4px;border:1px solid var(--gray-600);background:var(--bg-alt);display:grid;place-items:center;cursor:pointer}input[type=checkbox]:after{content:"";width:8px;height:8px;transform:scale(0);transition:transform .15s ease;clip-path:polygon(14% 44%,0 59%,38% 100%,100% 18%,85% 0,38% 63%);background:#04130c}input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:checked:after{transform:scale(1)}.settings-button{justify-self:end}.detail-view{display:grid;gap:12px}.detail-header{display:flex;align-items:center;gap:12px;padding:8px 0;background:transparent}.detail-header .ghost-button{display:flex;align-items:center;justify-content:center;flex-shrink:0}.detail-header .ghost-button svg{fill:var(--muted)}.detail-header .ghost-button:hover svg{fill:var(--text)}.detail-title{flex:1;min-width:0}.detail-title h2{margin:0;font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-subtitle{font-size:13px;color:var(--muted)}.detail-meta{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.detail-status{padding:12px 16px;border-radius:8px;border:none;background:var(--bg-card);color:var(--muted);font-size:13px}.detail-footer{margin-top:8px;border-radius:8px}.detail-footer audio{width:min(420px,100%)}.ghost-button{border:none;background:transparent;color:var(--muted);padding:4px;border-radius:500px;cursor:pointer;transition:color .2s ease}.ghost-button:hover{color:var(--text)}.track-table{width:100%;border-collapse:collapse;background:transparent;border-radius:8px;overflow:hidden;border:none}.track-table th,.track-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}.track-table th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);position:sticky;top:var(--header-offset);background:var(--bg);z-index:2;padding:8px 12px;font-weight:400;border-bottom:1px solid rgba(255,255,255,.08)}.track-table tbody tr:hover{background:var(--bg-hover)}.player-footer{position:fixed;bottom:0;left:0;right:0;z-index:12;display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;align-items:center;padding:12px clamp(16px,4vw,48px);background:var(--bg-black);border-top:1px solid rgba(255,255,255,.08)}.player-left{display:flex;align-items:center;gap:12px;min-width:0}.player-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.player-genre{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-sample{font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-center{display:flex;flex-direction:column;align-items:center;gap:8px}.player-buttons{display:flex;align-items:center;gap:8px}.player-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:500px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s ease}.player-btn svg{width:16px;height:16px;fill:currentColor}.player-btn:hover{color:var(--text)}.player-btn-main{width:40px;height:40px;background:var(--text);color:var(--bg-black)}.player-btn-main svg{width:20px;height:20px}.player-btn-main:hover{transform:scale(1.06);background:var(--text);color:var(--bg-black)}.player-btn-active{color:var(--spotify-green)}.player-btn-active:hover{color:var(--accent-light)}.player-scrubber{display:flex;align-items:center;gap:8px;width:100%;max-width:600px}.player-time{font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;color:var(--muted);min-width:40px;text-align:center}.player-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--gray-600);border-radius:2px;cursor:pointer}.player-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--spotify-green);cursor:pointer}.player-slider:hover::-webkit-slider-thumb{transform:scale(1.2)}.player-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--spotify-green);border:none;cursor:pointer}.player-slider:hover::-moz-range-thumb{transform:scale(1.2)}.player-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px}.player-slider::-moz-range-track{height:4px;border-radius:2px;background:var(--gray-600)}.player-slider.scrubber-slider,.player-slider.scrubber-slider:hover{--progress: 0%;background:linear-gradient(to right,var(--spotify-green) var(--progress),var(--gray-600) var(--progress))}.volume-slider{--progress: 70%;background:linear-gradient(to right,var(--spotify-green) var(--progress),var(--gray-600) var(--progress))!important}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}.player-volume{display:flex;align-items:center;gap:6px}.volume-slider{width:80px}@media (max-width: 900px){.player-footer{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px}.player-left{text-align:center}.player-meta{align-items:center}.player-center{display:flex;flex-direction:column;align-items:center;width:100%}.player-buttons{justify-content:center;gap:8px}.player-scrubber{width:100%}.player-right{display:flex;justify-content:center}.volume-slider{width:120px}}@media (max-width: 600px){.player-footer{gap:4px;padding:8px 12px}.player-meta{gap:0}.player-genre{font-size:13px;line-height:1.2}.player-sample{font-size:10px;line-height:1.2;opacity:.7}.player-time{font-size:10px;min-width:32px}.volume-slider{width:100px}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:20}.modal{width:min(420px,92vw);background:var(--bg-elevated);border:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;border-radius:8px;padding:16px}.modal-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.modal-header h2{margin:0 0 6px;font-size:18px}.modal-header p{margin:0;font-size:12px;color:var(--muted)}.modal-body{display:grid;gap:12px;margin-top:16px}.modal-body button,.modal-body .file-input{padding:10px 14px;border-radius:500px;border:none;background:var(--bg-hover);color:var(--text);font-weight:600;cursor:pointer;transition:background .2s ease}.modal-body .file-input{position:relative;overflow:hidden}.modal-body button:hover,.modal-body .file-input:hover{background:#ffffff26}.modal-body .file-input input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.text-input{width:100%;padding:10px 12px;border-radius:10px;border:none;background:var(--bg-hover);font-size:14px;color:var(--text)}.token-hint{font-size:12px;color:var(--muted)}.link-button{background:none;border:none;padding:0;font-size:12px;color:var(--accent);cursor:pointer;text-decoration:underline;align-self:center}.token-warning{padding:10px 12px;border-radius:10px;border:1px solid rgba(240,179,106,.5);background:#f0b36a1f;color:var(--warning);font-size:12px}.token-value{padding:10px 12px;border-radius:10px;border:none;background:var(--panel);font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;word-break:break-all}.toggle-switch{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:13px;font-weight:600}.toggle-switch input{position:absolute;opacity:0;pointer-events:none}.toggle-track{width:42px;height:24px;border-radius:999px;background:#ffffff14;border:none;display:inline-flex;align-items:center;padding:2px;transition:background .2s ease}.toggle-thumb{width:18px;height:18px;border-radius:50%;background:var(--muted);transform:translate(0);transition:transform .2s ease,background .2s ease}.toggle-switch input:checked+.toggle-track{background:var(--accent)}.toggle-switch input:checked+.toggle-track .toggle-thumb{transform:translate(18px);background:#000}.toggle-label{color:var(--muted)}.toast-stack{position:fixed;top:16px;right:16px;display:grid;gap:8px;z-index:30;pointer-events:none}.toast{background:var(--bg-elevated);border:none;color:var(--text);padding:10px 14px;border-radius:8px;font-size:12px;box-shadow:0 4px 24px #00000080;animation:toast-in .2s ease,toast-out .3s ease 1.9s forwards;pointer-events:none}@keyframes toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}.error{color:var(--warning);font-weight:600}@media (max-width: 720px){.hero{position:static;padding:8px 12px 6px}.hero-top{display:flex;flex-direction:column;gap:8px}.hero-left{text-align:center}.hero h1{margin-bottom:2px}.hero p{max-width:none}.hero-right{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}.hero-stats{display:none}.view-tabs{flex:1;min-width:140px}.view-tabs button{flex:1;padding:6px 10px;font-size:11px}.settings-button{flex-shrink:0}.user-badge{width:auto;padding:6px 10px;font-size:11px}.user-badge .user-email{max-width:120px}.sign-in-button{font-size:11px;padding:6px 12px}.global-search{margin-top:8px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{padding:12px;gap:8px}.stat-icon{width:32px;height:32px;border-radius:8px}.stat-icon svg{width:16px;height:16px}.stat-number{font-size:18px}.progress-panels{grid-template-columns:1fr}.progress-card{padding:10px 12px;gap:10px}.section-title{font-size:14px;margin:12px 0 8px}.leaderboard-header,.leaderboard-row{grid-template-columns:40px 1fr 70px;gap:8px;padding:10px 12px}.leaderboard-last{display:none}.genre-table{display:block;width:100%;border:none;background:transparent;border-radius:0}.genre-table thead{display:none}.genre-table tbody{display:block}.genre-table tr{display:flex;align-items:center;padding:8px 0;gap:12px;border:none}.genre-table tr:active{background:var(--bg-hover);border-radius:6px}.row-listened td:nth-child(2) .icon-button svg{fill:var(--spotify-green)}.genre-table td,.genre-table th{display:none;border:none;padding:0;width:auto!important;min-width:0!important;max-width:none!important}.genre-table td:nth-child(2){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px}.genre-table td:nth-child(5){display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow:hidden}.genre-name-cell{min-width:0;width:100%}.genre-name-cell .genre-name{font-weight:400!important;font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:var(--text);line-height:1.3}.genre-name-cell .genre-sample-sub{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.genre-table td:nth-child(6){display:none!important}.genre-table td:nth-child(3){display:flex;align-items:center;flex-shrink:0}.heart-btn svg{width:20px;height:20px}.genre-table td:nth-child(7){display:flex;align-items:center;flex-shrink:0}.row-actions{display:none!important}.row-overflow{display:flex!important;gap:0;align-items:center}.overflow-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color .15s ease}.overflow-btn:active{color:var(--text)}.overflow-btn svg{width:18px;height:18px;fill:currentColor}.overflow-btn:disabled{opacity:.3}.detail-header{gap:8px;padding:4px 0}.detail-title h2{font-size:18px}.detail-subtitle{font-size:12px}.track-table{display:block;border:none;background:transparent;border-radius:0}.track-table thead{display:none}.track-table tbody{display:block}.track-table tr{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;align-items:center;padding:8px 0;gap:0 12px;border-bottom:none}.track-table tr:active{background:var(--bg-hover);border-radius:6px}.track-table td{display:none;border:none;padding:0;min-width:0}.track-table td:nth-child(1){display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:1 / 3}.track-table td:nth-child(2){display:none!important}.track-table td:nth-child(3){display:block;grid-column:2;grid-row:1;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.track-table td:nth-child(4){display:block;grid-column:2;grid-row:2;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.track-table td:nth-child(5){display:flex;align-items:center;grid-column:3;grid-row:1 / 3}.track-table td:nth-child(5) .row-actions{display:flex!important;gap:2px}.track-table .icon-button{width:32px;height:32px}.track-table .icon-button svg{width:16px;height:16px}.detail-footer{position:sticky;bottom:0;background:var(--bg-black);padding:8px 12px;border-top:1px solid rgba(255,255,255,.08);z-index:10}.detail-footer audio{width:100%}.modal{width:min(380px,95vw);padding:14px}.modal-header h2{font-size:16px}.modal-header p{font-size:11px}}.global-search{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.global-search input{width:min(720px,100%);padding:10px 12px;border-radius:500px;border:none;background:var(--bg-hover);font-size:14px;color:var(--text)}.search-status{font-size:12px;color:var(--muted)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-600);border-radius:500px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.global-search input:focus,.text-input:focus{outline:none;border:none;box-shadow:none}.leaderboard-row{transition:background .15s ease}.leaderboard-row:hover{background:var(--bg-hover)}.history-row{transition:background .15s ease}.history-row:hover{background:var(--bg-hover)}audio{height:36px;border-radius:999px}audio::-webkit-media-controls-panel{background:var(--panel)}.settings-block{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.settings-block:last-child{border-bottom:none}.settings-block h3{margin:0 0 12px;font-size:11px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.account-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-actions span{font-size:13px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--text-secondary)}.account-actions button{padding:8px 14px;border-radius:500px;border:none;background:transparent;color:var(--text);font-size:13px;cursor:pointer;transition:color .2s ease}.account-actions button:hover{color:var(--error)}.playback-option{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.playback-option span{font-size:14px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--text)}.option-desc{font-size:12px!important;color:var(--text-secondary)!important;margin-top:2px}.shortcuts-list{display:grid;gap:8px}.shortcut-item{display:flex;align-items:center;gap:12px;font-size:14px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--text)}.shortcut-item kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:4px 8px;border-radius:6px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;color:var(--text-secondary);line-height:1}.icon-button.autoplay-active{color:var(--spotify-green)}.icon-button.autoplay-active:hover{color:var(--accent-light)}.settings-block .account-info{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;background:var(--bg-alt);border:none}.settings-block .account-info .email{font-weight:600;color:var(--text)}.settings-block .account-info .status{font-size:12px;color:var(--accent);display:flex;align-items:center;gap:6px}.toast-status{animation:toast-pulse 1s ease infinite}@keyframes toast-pulse{0%,to{opacity:1}50%{opacity:.7}}.modal{animation:modal-in .2s ease}@keyframes modal-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-backdrop{animation:backdrop-in .2s ease}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.driver-popover{background:#282828!important;color:#fff!important;border:1px solid #333!important;border-radius:12px!important;box-shadow:0 20px 60px #000000b3!important}.driver-popover .driver-popover-title{color:#fff!important;font-size:16px!important;font-weight:700!important;font-family:Helvetica Neue,Helvetica,Arial,sans-serif!important}.driver-popover .driver-popover-description{color:#b3b3b3!important;font-size:14px!important;font-family:Helvetica Neue,Helvetica,Arial,sans-serif!important}.driver-popover .driver-popover-progress-text{color:#6a6a6a!important}.driver-popover button{all:unset!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-family:Helvetica Neue,Helvetica,Arial,sans-serif!important;font-size:14px!important;font-weight:600!important;line-height:1!important;padding:8px 16px!important;border-radius:500px!important;-webkit-font-smoothing:antialiased!important}.driver-popover .driver-popover-prev-btn{background:transparent!important;color:#fff!important;border:1px solid #444!important}.driver-popover .driver-popover-next-btn,.driver-popover .driver-popover-close-btn-text{background:#1db954!important;color:#000!important;border:none!important}.driver-popover .driver-popover-close-btn{position:absolute!important;top:8px!important;right:8px!important;color:#6a6a6a!important;padding:4px!important;border:none!important;background:none!important}.driver-popover .driver-popover-close-btn:hover{color:#fff!important}.driver-popover .driver-popover-arrow-side-left,.driver-popover .driver-popover-arrow-side-right,.driver-popover .driver-popover-arrow-side-top,.driver-popover .driver-popover-arrow-side-bottom{border-color:#282828!important}