: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}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}.muted{color:#b3b3b3;font-size:.8em}.app-container{max-width:1200px;margin:0 auto;padding:1rem;min-height:calc(100dvh - 2rem);display:flex;flex-direction:column;justify-content:center}.app-header{margin-bottom:1rem;margin-top:3rem;display:flex;align-items:center;gap:6rem}@media(max-width:1024px){.app-header{flex-direction:column;gap:1rem}}.sections{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.sections .table-container{grid-column:span 12}.sections .table-container:nth-child(1){grid-column:span 6}.sections .table-container:nth-child(2){grid-column:span 6}.sections .table-container:nth-child(3){grid-column:span 6}.sections .table-container:nth-child(4){grid-column:span 5}.sections .table-container:nth-child(5){grid-column:span 7}.sections .table-container:nth-child(6){grid-column:span 6}.sections .table-container:nth-child(7){grid-column:span 6}@media(max-width:1024px){.sections .table-container{grid-column:span 12!important}}.table-container{background-color:#1e1e1e;border-radius:1rem;overflow:hidden;box-shadow:0 4px 20px #0000004d}@media(max-width:1024px){.table-container{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}}@media(max-width:1024px){.app-container{padding:.5rem}}.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;padding:0 1.2rem;gap:1.2rem}@media(max-width:1024px){.actions{margin-top:0}}.actions h1{font-size:1.5rem}@media(max-width:1024px){.actions h1{font-size:1rem}}.reset-btn{background:transparent;border:1px solid #333333;color:#b3b3b3;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease}.reset-btn:hover{border-color:#fff;color:#fff}.lang-btn{background:transparent;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{border-color:#1db954;color:#fff}.lang-btn.active{background-color:#1db954;border-color:#1db954;color:#000;font-weight:600}.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;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;display:block;text-align:center}.file-upload-label:hover{background-color:#1ed760}.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:1rem;color:#fff}.tutorial-section ol{color:#b3b3b3;line-height:1.8;padding-left:1.5rem}.tutorial-section a{color:#1db954}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:.8rem 1.2rem;vertical-align:middle}@media(max-width:1024px){th,td{padding:.5rem .6rem;font-size:.85rem}}th:first-child,td:first-child{padding-right:0;text-align:center;font-size:.7rem;color:#b3b3b3}th:nth-child(2),td:nth-child(2){padding-left:.5rem}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: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}}.app-footer{margin-top:auto;padding:1rem 0}hr{margin-bottom:2rem;border:none;border-top:1px solid #333333}.footer-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.footer-content p,.footer-content a,.footer-content span{margin:0;color:#fff;font-size:.9rem;text-align:center}.language-selector{display:flex;align-items:center;gap:.75rem}.language-label{color:#b3b3b3;font-size:.9rem;font-weight:500}.date-range-filter{background-color:#1e1e1e;position:sticky;top:0;border-radius:1rem;padding:1.2rem;margin-bottom:1rem;transition:all .2s ease}@media(max-width:1024px){.date-range-filter{padding:.8rem}}.date-range-filter.is-stuck{padding-top:.8rem;padding-bottom:.8rem;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 20px #00000080}.date-range-filter.is-stuck .date-range-filter-top-bar{margin-bottom:.5rem}.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:2rem 1rem 0}.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:6px;background-color:#333;border-radius:3px}.date-range-filter .range-track-active{position:absolute;top:50%;transform:translateY(-50%);height:6px;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:20px;height:20px;background-color:#1db954;border:3px solid #1e1e1e;border-radius:50%;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(3,1fr);gap:1rem}@media(max-width:768px){.general-stats{grid-template-columns:1fr}}.general-stats .stat-card{background-color:#1e1e1e;border-radius:1rem;padding:1.5rem;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:768px){.general-stats .stat-card{padding:1rem}}.general-stats .stat-card .stat-label{color:#b3b3b3;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.general-stats .stat-card .stat-value{font-size:1.8rem;font-weight:700;color:#1db954}.general-stats .stat-card .stat-value.time-value{font-family:monospace;font-size:1.6rem}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem;-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;width:100%;max-width:800px;max-height:90dvh;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;background:none;border:none;color:#b3b3b3;font-size:2rem;line-height:1;cursor:pointer;transition:color .2s;padding:1rem}.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(--primary-color)}.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)}.popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.popup-content{background-color:#1e1e1e;padding:2rem;border-radius:12px;border:1px solid #333;max-width:400px;width:100%;margin:1rem;text-align:center;box-shadow:0 10px 25px #00000080}.popup-content h2{margin-top:0;margin-bottom:1rem;color:#1ed760}.popup-content p{margin-bottom:2rem;color:#b3b3b3;line-height:1.5}.popup-actions{display:flex;flex-direction:column;gap:1rem}.primary-btn{background-color:#1db954;color:#000;font-weight:700;padding:12px 24px;border:none;border-radius:500px;cursor:pointer;font-size:1rem;transition:transform .2s,background-color .2s}.primary-btn:hover{background-color:#1ed760}.secondary-btn{background-color:transparent;color:#b3b3b3;border:1px solid #535353;padding:12px 24px;border-radius:500px;cursor:pointer;font-size:.9rem;transition:all .2s}.secondary-btn:hover{border-color:#fff;color:#fff}
