:root{--bg-color: #121212;--surface-color: #1e1e1e;--primary-color: #1db954;--primary-hover: #1ed760;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border-color: #333333;--font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif}body{margin:0;padding:0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#121212;color:#fff;-webkit-font-smoothing:antialiased;min-height:100vh}@media(max-width:1024px){body{background-color:#000}}h1{font-size:3rem;font-weight:700;margin:0;color:#1db954;letter-spacing:-.05em;line-height:1.1}.subtitle{color:#b3b3b3;font-size:1.2rem;margin-top:.5rem;margin-bottom:2rem}@media(max-width:768px){h1{font-size:2rem}.subtitle{font-size:1rem}}.muted{color:#b3b3b3;font-size:.8em}.app-container{max-width:1200px;margin:0 auto;padding:1rem;padding-bottom:0;min-height:calc(100dvh - 2rem);display:flex;flex-direction:column;justify-content:center}.app-container.has-data{justify-content:flex-start}@media(max-width:1024px){.app-container{padding:.7rem;padding-bottom:0}}@media(max-width:430px){.app-container{padding:1rem 0;padding-bottom:0}}.app-header{margin-bottom:1rem;margin-top:3rem;display:flex;align-items:stretch;gap:6rem}@media(max-width:1024px){.app-header{flex-direction:column;gap:1rem}}@media(max-width:430px){.app-header{margin-top:0;padding:1rem}}.data-section{opacity:0;transform:translateY(50px);animation:flyin .5s cubic-bezier(.7,0,.15,1) forwards;animation-delay:.5s}@keyframes flyin{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.sections{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}@media(max-width:1024px){.sections{gap:.7rem}.sections .table-container{grid-column:span 12!important}}.sections .general-stats,.sections .platform-stats,.sections .date-range-filter{grid-column:span 12}.sections .top-tracks,.sections .top-tracks-year,.sections .top-artists,.sections .skipped-tracks,.sections .reason-start-tracks-clickrow,.sections .reason-start-tracks-backbtn,.sections .one-hit-wonders,.sections .companion-tracks{grid-column:span 6}.table-container{background-color:#1e1e1e;border-radius:1rem;corner-shape:squircle;overflow:hidden;box-shadow:0 4px 20px #0000004d}@media(max-width:768px){.table-container{border-radius:.7rem;overflow-x:auto}}.header-row{display:flex;justify-content:space-between;align-items:center;margin-right:1.2rem}@media(max-width:1024px){.header-row{margin-right:.8rem}}.title{padding:1.2rem}@media(max-width:1024px){.title{padding:.8rem}}.title h3,.title p{margin:0}.title p{font-size:.9rem}.actions{margin-top:4rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:1.2rem}@media(max-width:1024px){.actions{margin-top:.8rem}}@media(max-width:430px){.actions{padding:0 .8rem}}.actions h1{font-size:1.5rem}@media(max-width:1024px){.actions h1{font-size:1rem}}.reset-btn,.filter-btn{background:#ffffff08;border:1px solid #333333;color:#b3b3b3;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease;display:flex;gap:.3em;align-items:center;white-space:nowrap}.reset-btn:hover,.filter-btn:hover{color:#fff;background:#ffffff12;border-color:#fff3}.filter-buttons{display:flex;gap:.5rem}.lang-btn{background:#ffffff08;border:1px solid #333333;color:#b3b3b3;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease;font-size:.9rem;display:flex;align-items:center;gap:.5rem}.lang-btn:hover{color:#fff;background:#ffffff12;border-color:#fff3}.lang-btn.active{background-color:#fff3;border-color:#fff6;color:#fff}.toggle-btn{color:#fff;font-size:.9rem;cursor:pointer;background:none;border:none;padding:0;text-decoration:underline}.toggle-btn.active{text-decoration:none;cursor:default}.sample button{border:none;background:transparent;color:#1db954;cursor:pointer;font-size:1rem;text-decoration:underline;padding:0}.sample button:disabled{cursor:not-allowed}.popup-actions{display:flex;gap:1rem}@media(max-width:768px){.popup-actions{flex-direction:column;margin-bottom:.5rem}}.popup-actions button{flex:1}.primary-btn,.secondary-btn{font-size:1rem;text-align:center;justify-content:center}.primary-btn.disabled,.secondary-btn.disabled{cursor:not-allowed;opacity:.5}.primary-btn{background-color:#1db954;border-color:#1db954;color:#000;font-weight:700;transition:all .2s}.primary-btn:hover{border-color:#1ed760;color:#000}.primary-btn.disabled:hover{background-color:#1db954}.primary-btn:hover:not(.disabled){background-color:#1ed760}.file-upload-container{padding:1rem}.file-upload-container h2{margin-bottom:0;margin-top:.5rem;font-size:1.4rem}.file-upload-container p{margin-top:.5rem}.file-upload-container.disabled{opacity:.6;cursor:not-allowed}.upload-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 4rem;border:2px dashed #333333;border-radius:1rem;corner-shape:squircle;background-color:#1e1e1e;transition:border-color .3s ease}.upload-section:hover{border-color:#1db954}@media(max-width:1024px){.upload-section{padding:.5rem 1rem}}.file-upload-input{display:none}.file-upload-label{background-color:#1db954;color:#000;padding:1rem 2rem;margin:1rem 0;border-radius:2rem;font-weight:600;cursor:pointer;transition:transform .2s ease,background-color .2s ease;font-size:1.1rem;text-align:center;display:flex;gap:.5rem;justify-content:center}.file-upload-label:hover{background-color:#1ed760}.file-upload-label svg{width:20px}@media(max-width:500px){.file-upload-label{justify-content:center;text-align:left;padding:1rem;gap:.2rem}}.hint{color:#b3b3b3;text-align:center;margin-top:1rem;font-size:.9rem}.error-message{color:#ff5252;margin-top:1rem}.warning-message{color:#ffca28;text-align:center;margin-top:1rem;font-size:.9rem;font-weight:500}.tutorial-section{text-align:left;max-width:600px}.tutorial-section h3{margin-bottom:.5rem;color:#fff}.tutorial-section ol{margin-top:0;color:#b3b3b3;line-height:1.6;padding-left:1.5rem}@media(max-width:430px){.tutorial-section ol{line-height:1.5}.tutorial-section ol li{text-indent:-.3em}}.tutorial-section a{color:#1db954}.features{margin-top:6rem}.features h2{text-align:center;margin-bottom:.5rem;color:var(--text-primary)}.features .features-subtitle{text-align:center;color:var(--text-secondary);font-size:.9rem;margin:0 0 1.5rem}.features .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.features .features-grid--extras{margin-top:2rem}.features .feature-card{border:1px solid var(--border-color);border-radius:8px;padding:1rem;background:var(--surface-color)}.features .feature-card h4{margin:0 0 .35rem;font-size:.9rem;font-weight:500;color:var(--text-secondary)}.features .feature-card p{margin:0;font-size:.82rem;color:var(--text-secondary);opacity:.7;line-height:1.5}table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left}th,td{padding:.8rem 1.2rem;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(max-width:1024px){th,td{padding:.5rem .6rem;font-size:.85rem;max-width:6rem}}th:first-child,td:first-child{padding-right:.5rem;font-size:.7rem;text-align:center;color:#b3b3b3;width:1.5ch;white-space:nowrap}th:nth-child(2),td:nth-child(2){padding-left:.5rem}.table-scroll-wrapper td:first-child,.table-scroll-wrapper th:first-child{width:4ch;text-align:left}th{background-color:#252525;color:#b3b3b3;font-weight:600;transition:color .2s ease}tr{border-bottom:1px solid #333333;transition:background-color .2s ease}tr:nth-child(2n){background-color:#0000001a}tr:last-child{border-bottom:none}tr:hover{background-color:#2a2a2a}td{color:#fff}td em{color:#b3b3b3;font-style:normal}.monospace{font-family:monospace;font-size:1rem;text-align:right}@media(max-width:1024px){.monospace{font-size:.85rem}}.table-scroll-wrapper{overflow-y:auto;position:relative}.table-scroll-wrapper thead th{position:sticky;top:0;z-index:1}.table-scroll-wrapper:after{content:"";position:sticky;display:block;bottom:0;width:100%;height:5rem;pointer-events:none;background-image:linear-gradient(to bottom,transparent 50%,#1e1e1e 100%)}input[type=search]{background-color:#1e1e1e;border:1px solid #333333;color:#fff;padding:.5rem 1rem;border-radius:.5rem;outline:none;font-size:inherit;margin-right:3rem}@media(max-width:1024px){input[type=search]{padding:.3rem .6rem;font-size:.85rem;font-size:16px;max-width:8rem}}.app-footer{margin-top:auto;padding:3rem 0 2rem}.app-footer a{text-decoration:underline;cursor:pointer}hr{margin-bottom:2rem;border:none;border-top:1px solid #333333}.footer-grid{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media(max-width:640px){.footer-grid{flex-direction:column;align-items:center;gap:1.5rem}.footer-grid h3,.footer-grid p{text-align:center}}.footer-brand{display:flex;flex-direction:column;gap:.4rem}.footer-brand-title{margin:0;font-size:1rem;font-weight:600;color:#fff}.footer-not-affiliated{margin:0;font-size:.8rem;color:#b3b3b3}.footer-not-affiliated a{color:inherit}.footer-not-affiliated a:hover{color:#fff}.footer-links{display:flex;gap:.6rem;margin-top:.6rem}@media(max-width:640px){.footer-links{justify-content:center}}.footer-links a{font-size:.85rem;color:#b3b3b3;transition:color .15s ease}.footer-links a:hover{color:#fff}.language-selector{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.date-range-filter{z-index:9;background-color:#1e1e1e;position:sticky;top:0;corner-shape:squircle;padding:1.2rem;border-radius:.7rem;transition:background-color 1s ease-in-out,box-shadow .2s ease-in-out,border-radius .2s ease-in-out}@media(max-width:1024px){.date-range-filter{padding:.8rem}}.date-range-filter.is-stuck{border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 20px #000000b3;background-color:#2a2a2a}.date-range-filter.is-stuck .range-handle{border-color:#2a2a2a}.date-range-filter .title{padding:0}.date-range-filter .date-range-filter-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;transition:all .2s ease}.date-range-filter .range-slider-container{display:flex;gap:1rem;align-items:center;padding:0rem 1rem 0;margin-top:-1rem}.date-range-filter .plays-sparkline{margin-top:1rem;padding:0 1rem}.date-range-filter .range-slider{position:relative;flex:1;height:30px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.date-range-filter .range-track{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:2px;background-color:#333;border-radius:3px}.date-range-filter .range-track-active{position:absolute;top:50%;transform:translateY(-50%);height:2px;background-color:#1db954;border-radius:3px;transition:left .1s ease,width .1s ease}.date-range-filter .range-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:7px;height:20px;background-color:#1db954;border:3px solid #1e1e1e;border-radius:5px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;z-index:2}.date-range-filter .range-handle:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 8px #1db95433;z-index:99}.date-range-filter .range-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.date-range-filter .range-label{position:absolute;top:-35px;background-color:#121212;color:#fff;padding:.25rem .75rem;border-radius:.5rem;font-size:.85rem;font-weight:600;white-space:nowrap;border:1px solid #333333;pointer-events:none}.date-range-filter .range-handle-start .range-label{left:0%;transform:translate(-10px)}.date-range-filter .range-handle-end .range-label{right:0;transform:translate(10px)}.general-stats{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}@media(max-width:1024px){.general-stats{gap:.7rem}}@media(max-width:1024px){.general-stats{grid-template-columns:repeat(2,1fr)}}.general-stats .stat-card{background-color:#1e1e1e;border-radius:1rem;corner-shape:squircle;padding:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 4px 20px #0000004d;transition:transform .2s ease}@media(max-width:430px){.general-stats .stat-card{border-radius:.7rem}}@media(max-width:1024px){.general-stats .stat-card{padding:.8rem}}.general-stats .stat-card .stat-label{color:#b3b3b3;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}@media(max-width:1024px){.general-stats .stat-card .stat-label{margin-bottom:.2rem;font-size:.6rem}}.general-stats .stat-card .stat-value{font-size:1.8rem;font-weight:700;color:#1db954}@media(max-width:1024px){.general-stats .stat-card .stat-value{font-size:1.2rem}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:flex-start;z-index:1000;padding:3rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@media(max-width:768px){.modal-overlay{padding:0}}.modal-content{background-color:#1e1e1e;border-radius:1rem;corner-shape:squircle;width:100%;max-width:800px;height:100%;display:flex;flex-direction:column;box-shadow:0 10px 25px #00000080;animation:modal-in .3s ease-out;position:relative}@media(max-width:768px){.modal-content{max-height:100dvh;border-radius:0}}.modal-content .modal-close-btn{position:absolute;right:.5rem;top:.7rem;background-color:#1e1e1e;border-radius:.5rem;border:none;color:#b3b3b3;font-size:2rem;line-height:.5;cursor:pointer;transition:color .2s;padding:1rem 1rem 1.3rem;z-index:9}@media(max-width:1024px){.modal-content .modal-close-btn{top:.45rem}}.modal-content .modal-close-btn:hover{color:#fff}.modal-content .modal-body{overflow-y:auto;flex:1}.modal-content .modal-body .table-container{margin:0;padding:0;background:none;border:none;box-shadow:none}@keyframes modal-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.faq-container{margin-top:6rem;text-align:left}.faq-container h2{text-align:center;margin-bottom:1.5rem;color:var(--text-primary)}.faq-container .accordion{display:flex;flex-direction:column;gap:1rem}.faq-container .item{border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--surface-color)}.faq-container .question{width:100%;padding:.8rem 1rem 1rem;display:flex;justify-content:flex-start;gap:1rem;align-items:center;background:none;border:none;cursor:pointer;color:var(--text-secondary);font-weight:500;font-size:.9rem;transition:background-color .2s;text-align:left}.faq-container .question:hover{background-color:#ffffff0d}.faq-container .question.active{background-color:#ffffff1a}.faq-container .question .question-text{transform:translateY(2px)}.faq-container .question .icon{font-size:1.25rem;line-height:1;font-weight:700;color:var(--text-secondary)}.faq-container .answer{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out;background-color:#0003}.faq-container .answer.open{max-height:500px}.faq-container .answer-content{padding:1rem;line-height:1.5;color:var(--text-secondary)}.preview-drawer{position:sticky;bottom:0;margin:0 auto;background-color:#2a2a2a;border-radius:1rem 1rem 0 0;box-shadow:0 -4px 24px #000000b3;z-index:1001;display:flex;padding:1.2rem;flex-direction:column;justify-content:center;align-items:center;gap:1rem;animation:drawer-slide-in .5s cubic-bezier(.11,.88,.26,1);box-sizing:border-box;width:100%}@media(max-width:1024px){.preview-drawer{padding:.8rem}}.preview-drawer .iframe-wrapper{border-radius:.7rem;overflow:hidden;width:100%;background-color:#ffffff1a;min-height:152px;display:flex;align-items:center;justify-content:center}.preview-drawer .iframe-wrapper iframe{border:none;display:block}.preview-drawer .title-bar{display:flex;justify-content:space-between;width:100%}@media(max-width:1024px){.preview-drawer .title-bar{margin-bottom:-.3rem}}.preview-drawer .trackname{line-height:1.1}.preview-drawer .title-bar-controls{display:flex}.preview-drawer .preview-drawer-link{font-size:.75rem;color:#b3b3b3;text-decoration:none;white-space:nowrap;transition:color .2s;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.25rem}.preview-drawer .preview-drawer-link:hover{color:#1db954}.preview-drawer button.preview-drawer-link svg{width:25px}.preview-drawer a.preview-drawer-link svg{width:15px}.preview-drawer .consent-gate{display:flex;justify-content:center;align-items:center;gap:2rem;padding:1rem}.preview-drawer .consent-gate p{max-width:60ch}@keyframes drawer-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}.track-insights{display:flex;flex-direction:column;gap:.5rem;width:100%}.insight-panel{background-color:#1e1e1e;border-radius:.6rem;overflow:hidden}.insight-panel-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.6rem .9rem;background:none;border:none;color:#b3b3b3;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:color .15s}.insight-panel-header:hover{color:#fff}.insight-panel-header .chevron{font-size:1.1rem;transform:rotate(90deg);transition:transform .2s;display:inline-block}.insight-panel-header .chevron.open{transform:rotate(-90deg)}.insight-panel-body{padding:0 .9rem;display:flex;flex-direction:column;gap:.75rem}.kpi-cards{display:flex;flex-wrap:wrap;gap:.5rem}.kpi-card{background-color:#2a2a2a;border-radius:.5rem;padding:.5rem .75rem;min-width:80px;flex:1 1 80px}@media(max-width:430px){.kpi-card{padding:.4rem 0rem}}.kpi-card .kpi-value{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;text-align:center}.kpi-card .kpi-label{font-size:.65rem;color:#b3b3b3;margin-top:.15rem;white-space:nowrap;text-align:center}.chart-block .chart-label{font-size:.7rem;color:#b3b3b3;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}.chart-row{display:flex;gap:1rem;flex-wrap:wrap}.chart-row .flex-1{flex:1 1 140px;min-width:0}@media(max-width:600px){.kpi-card{flex:1 1 60px}.kpi-card .kpi-value{font-size:.85rem}.chart-row{flex-direction:column}}.platform-stats{background-color:#1e1e1e;border-radius:1rem;corner-shape:squircle;padding:1.2rem;box-shadow:0 4px 20px #0000004d}@media(max-width:1024px){.platform-stats{padding:.8rem;border-radius:.7rem}}.platform-stats h3{margin:0;margin-bottom:.8rem}.platform-stats .platform-bar{display:flex;width:100%;border-radius:.5rem;overflow:hidden;gap:2px;cursor:pointer}.platform-stats .platform-bar .platform-bar-segment{box-sizing:border-box;height:100%;min-width:2px;transition:opacity .2s ease;font-size:14px;font-weight:700;color:#fff;text-shadow:0 0 10px rgb(0,50,0);padding:.3em .3em .3em .6em;overflow:hidden;white-space:nowrap;display:flex;align-items:center}.platform-stats .platform-bar .platform-bar-segment span:nth-child(2){opacity:.8;font-weight:400}.platform-stats .platform-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:.8rem}.platform-stats .platform-legend .platform-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.platform-stats .platform-legend .platform-legend-dot{width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0}.platform-stats .platform-legend .platform-legend-label{color:#fff}.platform-stats .platform-legend .platform-legend-pct{color:#b3b3b3}.platform-stats .platform-legend-dot:nth-child(1),.platform-stats .platform-bar-segment:nth-child(1){background-color:#1db954e6}.platform-stats .platform-legend-dot:nth-child(2),.platform-stats .platform-bar-segment:nth-child(2){background-color:#1db954b3}.platform-stats .platform-legend-dot:nth-child(3),.platform-stats .platform-bar-segment:nth-child(3){background-color:#1db95480}.platform-stats .platform-legend-dot:nth-child(4),.platform-stats .platform-bar-segment:nth-child(4){background-color:#1db9544d}.platform-stats .platform-legend-dot,.platform-stats .platform-bar-segment{background-color:#1db9541a}