.app{max-width:900px;margin:0 auto;padding:24px 16px}header{margin-bottom:24px}h1{font-size:1.8rem;margin-bottom:16px;color:#1db954}.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.sort-tabs{display:flex;gap:4px;background:#282828;border-radius:8px;padding:4px}.tab{padding:8px 20px;border:none;border-radius:6px;background:transparent;color:#b3b3b3;font-size:.9rem;cursor:pointer;transition:.15s}.tab.active{background:#1db954;color:#000;font-weight:600}.date-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.date-filters label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#b3b3b3}.date-filters input,.date-filters select{background:#282828;border:1px solid #404040;border-radius:6px;padding:6px 10px;color:#e0e0e0;font-size:.85rem}.select{cursor:pointer}.btn{padding:8px 20px;border:none;border-radius:8px;background:#282828;color:#e0e0e0;font-size:.9rem;cursor:pointer;transition:.15s}.btn:hover{background:#404040}.fetch-btn{background:#1db954;color:#000;font-weight:600}.fetch-btn:hover{background:#1ed760}.create-btn{background:#1db954;color:#000;font-weight:600}.create-btn:disabled{opacity:.5;cursor:not-allowed}.import-btn{cursor:pointer;border:1px dashed #404040}.import-btn:hover{border-color:#1db954;color:#1db954}.import-btn input{display:none}.hint{margin-top:12px;font-size:.8rem;color:#666}.hint a{color:#1db954}.hint code{color:#b3b3b3}.center{text-align:center;color:#888;padding:48px 0}.error{color:#e74c3c}.success{color:#1db954}.success code{display:block;margin:8px 0;padding:8px 12px;background:#282828;border-radius:6px;color:#e0e0e0;font-size:.8rem;word-break:break-all}.login-btn{display:inline-block;margin-top:16px;background:#1db954;color:#000;font-weight:600;text-decoration:none}.login-btn:hover{background:#1ed760}.rankings{width:100%;border-collapse:collapse}.rankings th{text-align:left;padding:12px 8px;border-bottom:1px solid #282828;color:#888;font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.rankings td{padding:10px 8px;border-bottom:1px solid #1e1e1e}.rank{width:40px;color:#888;font-weight:600}.song{font-weight:500}.artist{color:#b3b3b3}.stat{font-weight:600;color:#1db954}.timeline-day{margin-bottom:24px}.timeline-date{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.05em;padding:8px 0;border-bottom:1px solid #282828;margin-bottom:8px}.timeline-entry{display:flex;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a;font-size:.9rem}.timeline-time{color:#666;min-width:70px;font-variant-numeric:tabular-nums}.timeline-song{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-artist{color:#b3b3b3;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-duration{color:#1db954;font-weight:600;min-width:50px;text-align:right;font-variant-numeric:tabular-nums}.settings{max-width:500px;margin:0 auto}.settings-section{background:#1a1a1a;border:1px solid #282828;border-radius:8px;padding:24px;margin-bottom:16px}.settings-section h2{font-size:1.1rem;margin-bottom:8px;color:#e0e0e0}.settings-section p{font-size:.9rem;color:#888;margin-bottom:16px;line-height:1.5}.settings-section a{color:#1db954}.settings-section code{color:#b3b3b3;font-size:.85rem}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.auth-btn{background:#282828;color:#e0e0e0;text-decoration:none;display:inline-block}.auth-btn:hover{background:#404040}@media(max-width:768px){.app{padding:16px 12px}h1{font-size:1.4rem}.controls{gap:8px}.sort-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.sort-tabs::-webkit-scrollbar{display:none}.tab{padding:6px 12px;font-size:.8rem;white-space:nowrap}.date-filters{width:100%;gap:8px}.date-filters label{font-size:.78rem}.date-filters input,.date-filters select{max-width:140px;font-size:.8rem}.rankings{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.rankings th,.rankings td{padding:8px 6px;font-size:.82rem}.rank{width:28px}.timeline-entry{flex-wrap:wrap;gap:4px 8px;padding:5px 0;font-size:.82rem}.timeline-time{min-width:55px;font-size:.78rem}.timeline-song{flex:1 1 100%;order:3}.timeline-artist{flex:1 1 auto;order:2;font-size:.78rem}.timeline-duration{min-width:40px;font-size:.78rem}.settings{max-width:100%}.settings-section{padding:16px}.settings-actions{flex-direction:column}.btn{padding:6px 14px;font-size:.82rem}.center{padding:32px 8px}.success code{font-size:.72rem;word-break:break-all}}@media(max-width:480px){.app{padding:12px 8px}h1{font-size:1.2rem;margin-bottom:10px}.tab{padding:5px 10px;font-size:.75rem}.date-filters{flex-direction:column;align-items:stretch}.date-filters label{justify-content:space-between}.date-filters input,.date-filters select{max-width:none;width:auto;flex:1}.rankings th,.rankings td{padding:6px 4px;font-size:.75rem}.rank{width:22px}.timeline-date{font-size:.78rem}.timeline-entry{font-size:.75rem}.timeline-time{min-width:48px;font-size:.72rem}.timeline-artist{font-size:.72rem}.timeline-duration{min-width:35px;font-size:.72rem}}