*{margin:0;padding:0;box-sizing:border-box}body{font-family:Times New Roman,Times,serif;background:#f8f8f6;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1a1a1a}.container{text-align:center;max-width:800px;padding:2rem;width:100%}h1{font-family:Times New Roman,Times,serif;font-size:3rem;margin-bottom:1rem;color:#000;text-shadow:none;font-weight:700;letter-spacing:-.02em;transform:scaleX(.7);transform-origin:center}.subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.player-container{background:#f8f8f6;border:3px solid #000;border-radius:0;padding:2rem;margin:2rem 0;position:relative}.auth-container,.upload-container{background:#0000000d;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:10px;padding:2rem;margin:2rem 0;border:1px solid rgba(0,0,0,.1)}.track-info{margin-bottom:1.5rem}.radio-table{width:100%;display:table;border-collapse:collapse}.radio-row{display:table-row}.radio-cell{display:table-cell;padding:.5rem;border:1px solid #000;vertical-align:middle;font-family:Times New Roman,Times,serif}.current-track-cell{width:70%;text-align:left;font-size:1.2rem;font-weight:700}.controls-cell{width:30%;text-align:center}.play-button{background:#000;color:#f8f8f6;border:2px solid #000;padding:.8rem 1.2rem;font-size:1.5rem;cursor:pointer;font-family:Times New Roman,Times,serif;border-radius:0}.play-button:hover:not(:disabled){background:#333}.play-button:disabled{opacity:.5;cursor:not-allowed}.spectrogram-cell{width:100%;padding:0}.spectrogram-container{width:100%;height:120px;background:transparent;border:none;margin:0;position:relative;overflow:hidden}.spectrogram-container canvas{width:100%!important;height:100%!important;display:block;background:transparent!important}.controls-row{text-align:center;padding:1rem}.control-button{background:transparent;color:#000;border:1px solid #000;padding:.5rem 1rem;margin:0 .5rem;cursor:pointer;font-family:Times New Roman,Times,serif;border-radius:0}.control-button:hover:not(:disabled){background:#000;color:#f8f8f6}.control-button:disabled{opacity:.5;cursor:not-allowed}.next-up-cell{text-align:left;padding:1rem}.next-up-title{font-weight:700;font-size:.9rem;margin-bottom:.5rem;color:#000;font-family:Times New Roman,Times,serif}.next-up-track{font-size:1rem;color:#333;margin-bottom:0;font-family:Times New Roman,Times,serif}.ad-cell{text-align:center;padding:1rem;background:#00000005}.ad-space{font-size:.8rem;color:#666;font-style:italic;font-family:Times New Roman,Times,serif;border:1px dashed rgba(0,0,0,.2);padding:.5rem}.status-cell{text-align:center;padding:.5rem;font-size:.9rem;color:#666;font-family:Times New Roman,Times,serif}.current-track{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.next-track{font-size:1rem;opacity:.8}.controls{display:flex;gap:1rem;justify-content:center;align-items:center;margin:2rem 0;flex-wrap:wrap}button{background:#fff3;border:2px solid rgba(255,255,255,.3);color:#fff;padding:.8rem 1.5rem;border-radius:25px;cursor:pointer;font-size:1rem;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}button:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.crossfade-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);border-color:#ff6b6b}.crossfade-button:hover:not(:disabled){background:linear-gradient(45deg,#ff5252,#d63031)}.upload-buttons{display:flex;gap:1rem;margin-top:1rem;align-items:center;flex-wrap:wrap}.upload-button{background:linear-gradient(45deg,#4caf50,#45a049);border-color:#4caf50;flex:1;min-width:200px}.upload-button:hover:not(:disabled){background:linear-gradient(45deg,#45a049,#3d8b40)}.cancel-button{background:linear-gradient(45deg,#f44336,#d32f2f);border:1px solid #f44336;color:#fff;padding:1rem 2rem;border-radius:25px;font-size:1rem;cursor:pointer;transition:all .2s ease}.cancel-button:hover{background:linear-gradient(45deg,#d32f2f,#c62828);transform:translateY(-2px)}.test-convert-button{background:linear-gradient(45deg,#ff9800,#f57c00);border:1px solid #ff9800;color:#fff;padding:1rem 2rem;border-radius:25px;font-size:1rem;cursor:pointer;transition:all .2s ease}.test-convert-button:hover:not(:disabled){background:linear-gradient(45deg,#f57c00,#ef6c00);transform:translateY(-2px)}.test-convert-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.logout-button{background:linear-gradient(45deg,#9e9e9e,#757575);border:1px solid #9e9e9e;color:#fff;padding:.5rem 1rem;border-radius:15px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:linear-gradient(45deg,#757575,#616161);transform:translateY(-1px)}.status{margin-top:1rem;font-size:.9rem;opacity:.8}.upload-link,.back-link{position:fixed;top:20px;right:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:15px;text-decoration:none;font-size:.9rem;transition:all .3s ease;z-index:1000}.back-link{right:auto;left:20px}.upload-link:hover,.back-link:hover{background:#fff3;transform:translateY(-1px)}.loading{display:flex;flex-direction:column;align-items:center;gap:1rem}.spinner{border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{color:#ff6b6b;margin-top:1rem;padding:1rem;background:#ff6b6b1a;border-radius:10px;border:1px solid rgba(255,107,107,.3)}.success{color:#4caf50;margin-top:1rem;padding:1rem;background:#4caf501a;border-radius:10px;border:1px solid rgba(76,175,80,.3)}.form-group{margin-bottom:1.5rem;text-align:left}label{display:block;margin-bottom:.5rem;font-weight:700}input[type=password],input[type=text],input[type=file]{width:100%;padding:.8rem;border:2px solid rgba(255,255,255,.3);border-radius:10px;background:#ffffff1a;color:#fff;font-size:1rem}input[type=file]{padding:.5rem;cursor:pointer}input::placeholder{color:#ffffffb3}.file-list{margin-top:1rem;text-align:left}.file-item{background:#ffffff1a;padding:1rem;margin:.5rem 0;border-radius:10px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.file-item--pending{border-color:#ffffff4d}.file-item--converting{border-color:#ff9800;background:#ff98001a}.file-item--uploading{border-color:#2196f3;background:#2196f31a}.file-item--completed{border-color:#4caf50;background:#4caf501a}.file-item--error{border-color:#f44336;background:#f443361a}.file-name{font-weight:700;margin-bottom:.5rem}.file-title{width:100%;padding:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:#ffffff1a;color:#fff;margin-top:.5rem}.conversion-badge{display:inline-block;background:linear-gradient(45deg,#ff9800,#f57c00);color:#fff;padding:.2rem .5rem;border-radius:12px;font-size:.75rem;margin-left:.5rem;font-weight:700}.conversion-progress{margin:.5rem 0}.conversion-status{font-size:.8rem;color:#ff9800;margin-top:.25rem}.file-info{display:flex;gap:1rem;margin-top:.5rem;font-size:.8rem;opacity:.8}.file-info span{background:#ffffff1a;padding:.2rem .5rem;border-radius:8px}.file-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:700;margin-left:.5rem}.status-badge--pending{background:#fff3;color:#fffc}.status-badge--converting{background:#ff9800;color:#fff}.status-badge--uploading{background:#2196f3;color:#fff}.status-badge--completed{background:#4caf50;color:#fff}.status-badge--error{background:#f44336;color:#fff}.file-error{background:#f4433633;border:1px solid #f44336;color:#ffcdd2;padding:.5rem;border-radius:5px;margin:.5rem 0;font-size:.9rem}.file-title:disabled{opacity:.6;cursor:not-allowed}.tracks-section{margin:2rem 0}.tracks-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.tracks-section h2{font-size:1.5rem;margin:0;color:#fff}.title-buttons{display:flex;gap:.5rem;align-items:center}.regenerate-titles-button,.ensure-unique-button{color:#fff;padding:.5rem 1rem;border-radius:15px;font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;border:1px solid}.regenerate-titles-button{background:linear-gradient(45deg,#9c27b0,#673ab7);border-color:#9c27b0}.regenerate-titles-button:hover:not(:disabled){background:linear-gradient(45deg,#7b1fa2,#512da8);transform:translateY(-1px)}.ensure-unique-button{background:linear-gradient(45deg,#ff5722,#e64a19);border-color:#ff5722}.ensure-unique-button:hover:not(:disabled){background:linear-gradient(45deg,#e64a19,#d84315);transform:translateY(-1px)}.regenerate-titles-button:disabled,.ensure-unique-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.tracks-table{background:#ffffff1a;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.tracks-header{display:grid;grid-template-columns:2fr 1fr 1fr 120px;gap:1rem;padding:1rem;background:#fff3;font-weight:700;border-bottom:1px solid rgba(255,255,255,.2)}.track-row{display:grid;grid-template-columns:2fr 1fr 1fr 120px;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);transition:background-color .2s ease}.track-row:hover{background:#ffffff0d}.track-row:last-child{border-bottom:none}.track-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{opacity:.8}.track-date{opacity:.7;font-size:.9rem}.track-actions{display:flex;justify-content:flex-end}.delete-button{background:linear-gradient(45deg,#f44336,#d32f2f);border:1px solid #f44336;color:#fff;padding:.5rem 1rem;border-radius:15px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.delete-button:hover:not(:disabled){background:linear-gradient(45deg,#d32f2f,#c62828);transform:translateY(-1px)}.delete-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.no-tracks{text-align:center;padding:2rem;opacity:.7;font-style:italic}@media (max-width: 768px){.tracks-header,.track-row{grid-template-columns:1fr;gap:.5rem}.track-actions{justify-content:flex-start}.tracks-header .track-artist,.tracks-header .track-date,.track-row .track-artist,.track-row .track-date{display:none}}.progress-container{margin-top:1rem}.progress-bar{width:100%;height:20px;background:#fff3;border-radius:10px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(45deg,#4caf50,#45a049);width:0%;transition:width .3s ease}@media (max-width: 768px){.container{padding:1rem}h1{font-size:2rem}.controls{flex-direction:column;gap:.5rem}button{width:100%}.upload-link,.back-link{position:relative;top:auto;right:auto;left:auto;display:inline-block;margin-bottom:1rem}}