*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep:#0f0c08;--bg-main:#1a1410;--bg-card:#231c14;--bg-hover:#2e2418;--gold:#c9a84c;--gold-dim:#8a7233;--gold-bright:#e4c96a;--ivory:#f5f0e1;--ivory-dim:#b0a890;--warm-grey:#6b5f50;--red-soft:#a04040;--font-display:"Playfair Display", "Georgia", serif;--font-body:"Inter", "Helvetica Neue", sans-serif;--radius:12px;--radius-sm:6px}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--ivory);min-height:100vh;overflow-x:hidden}.radio-app{flex-direction:column;min-height:100vh;padding-bottom:180px;display:flex}.radio-header{text-align:center;background:linear-gradient(180deg, var(--bg-main) 0%, var(--bg-deep) 100%);border-bottom:1px solid var(--gold-dim);padding:3rem 1.5rem 2rem;position:relative}.radio-header:before,.radio-header:after{content:"❧";color:var(--gold-dim);opacity:.5;font-size:1.5rem;position:absolute;top:50%;transform:translateY(-50%)}.radio-header:before{left:1.5rem}.radio-header:after{right:1.5rem}.header-ornament{color:var(--gold);letter-spacing:.5em;opacity:.6;margin-bottom:.5rem;font-size:1.2rem}.header-title{font-family:var(--font-display);color:var(--gold);text-shadow:0 2px 12px #c9a84c4d;letter-spacing:.02em;font-size:2.5rem;font-weight:700}.header-subtitle{font-family:var(--font-display);color:var(--ivory-dim);margin-top:.4rem;font-size:1rem;font-style:italic}.radio-main{flex:1;width:100%;max-width:800px;margin:0 auto;padding:2rem 1.5rem}.empty-state{text-align:center;color:var(--ivory-dim);padding:4rem 2rem}.empty-icon{color:var(--gold-dim);opacity:.4;margin-bottom:1rem;font-size:4rem}.empty-text{font-family:var(--font-display);color:var(--ivory);margin-bottom:.8rem;font-size:1.3rem}.empty-hint{color:var(--warm-grey);font-size:.85rem;line-height:1.6}.empty-hint code{background:var(--bg-card);border-radius:var(--radius-sm);color:var(--gold);border:1px solid var(--gold-dim);padding:.2em .6em;font-size:.85rem}.track-list{flex-direction:column;gap:2px;display:flex}.track-item{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;align-items:center;gap:1rem;padding:.85rem 1rem;transition:background .2s,transform .1s;display:flex}.track-item:hover{background:var(--bg-hover);border-color:var(--gold-dim)}.track-item:active{transform:scale(.995)}.track-item.active{background:var(--bg-card);border-color:var(--gold);box-shadow:0 0 20px #c9a84c1a}.track-item.active .track-icon{color:var(--gold-bright)}.track-item.active .track-name{color:var(--gold)}.track-number{font-family:var(--font-body);color:var(--warm-grey);text-align:right;min-width:1.8rem;font-size:.75rem;font-weight:500}.track-icon{color:var(--gold-dim);font-size:1.1rem;transition:color .2s}.track-meta{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.track-name{font-family:var(--font-display);color:var(--ivory);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;transition:color .2s;overflow:hidden}.track-meta .track-artist{color:var(--warm-grey);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.track-item.active .track-meta .track-artist{color:var(--gold-dim)}.track-format,.track-ext{text-transform:uppercase;color:var(--warm-grey);background:var(--bg-main);letter-spacing:.05em;border-radius:3px;flex-shrink:0;padding:.15em .5em;font-size:.65rem;font-weight:500}.track-size{color:var(--warm-grey);text-align:right;min-width:4rem;font-size:.75rem}.player-bar{background:linear-gradient(0deg, var(--bg-deep) 0%, #0f0c08fa 100%);border-top:1px solid var(--gold-dim);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;justify-content:center;align-items:center;gap:.8rem;height:180px;padding:1rem 2rem;display:flex;position:fixed;bottom:0;left:0;right:0}.now-playing{align-items:center;gap:1rem;display:flex}.vinyl-disc{border:2px solid var(--gold-dim);background:radial-gradient(circle,#1a1a1a 0%,#2a2a2a 20%,#1a1a1a 21%,#2a2a2a 40%,#1a1a1a 41%,#2a2a2a 60%,#1a1a1a 61%,#333 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:border-color .3s;display:flex}.vinyl-disc.spinning{border-color:var(--gold);animation:3s linear infinite spin}.disc-inner{background:var(--gold);border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #c9a84c80}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.track-info{min-width:0}.track-info .track-title{font-family:var(--font-display);color:var(--ivory);white-space:nowrap;text-overflow:ellipsis;max-width:250px;font-size:1rem;font-weight:600;overflow:hidden}.track-info .track-artist{color:var(--warm-grey);font-size:.75rem}.player-controls{align-items:center;gap:1rem;display:flex}.control-btn{border:1px solid var(--warm-grey);color:var(--ivory);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:all .2s;display:flex}.control-btn:hover{border-color:var(--gold);color:var(--gold);background:#c9a84c1a}.btn-play{border-color:var(--gold);width:44px;height:44px;color:var(--gold);font-size:1.2rem}.btn-play:hover{background:var(--gold);color:var(--bg-deep)}.btn-shuffle{opacity:.5;font-size:.9rem;transition:all .2s}.btn-shuffle.active{opacity:1;border-color:var(--gold);color:var(--gold);background:#c9a84c26;box-shadow:0 0 8px #c9a84c33}.btn-shuffle:hover{opacity:.8}.progress-container{align-items:center;gap:.6rem;width:100%;max-width:500px;display:flex}.time-current,.time-total{font-size:.7rem;font-family:var(--font-body);color:var(--warm-grey);font-variant-numeric:tabular-nums;min-width:2.5rem}.time-total{text-align:right}.progress-bar{background:var(--bg-card);cursor:pointer;border:1px solid var(--warm-grey);border-radius:2px;flex:1;height:4px;position:relative;overflow:hidden}.progress-bar:hover{border-color:var(--gold-dim);height:6px}.progress-fill{background:linear-gradient(90deg, var(--gold-dim), var(--gold));border-radius:2px;width:0%;height:100%;transition:width .1s linear}.volume-container{align-items:center;gap:.5rem;display:flex}.volume-icon{text-align:center;width:1.5rem;font-size:1rem}.volume-slider{appearance:none;background:var(--bg-card);border:1px solid var(--warm-grey);border-radius:2px;outline:none;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--gold);cursor:pointer;border:1px solid var(--gold-bright);border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #c9a84c66}.volume-slider::-moz-range-thumb{background:var(--gold);cursor:pointer;border:1px solid var(--gold-bright);border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #c9a84c66}.track-list:before{content:"— ✦ —";text-align:center;color:var(--gold-dim);letter-spacing:.5em;opacity:.5;padding:.5rem 0;font-size:.8rem;display:block}@media (width<=600px){.header-title{font-size:1.8rem}.radio-header:before,.radio-header:after{display:none}.player-bar{height:160px;padding:.8rem 1rem}.track-info .track-title{max-width:150px}.progress-container{max-width:100%}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--warm-grey);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}::selection{background:var(--gold);color:var(--bg-deep)}