:root{--bg: #0f1220;--card: #0b0d14;--muted: #9aa0c7;--accent: #cfe0ff;--btn-bg: #141826}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#e8eaf6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.center{min-height:100%;display:grid;place-items:center;padding:18px 18px 84px;box-sizing:border-box}.player{width:100%;max-width:720px;padding:12px}img.cover{width:300px;height:300px;object-fit:cover;display:block;margin:0 auto 12px;border-radius:6px;background:var(--card)}h1{margin:0 0 6px;font-size:clamp(1.5rem,4vw,2rem);font-weight:500;text-align:center}.artist{margin-top:6px;color:var(--muted);font-size:.95rem;text-align:center}.viz-wrap{position:relative;width:100%;margin-bottom:6px}canvas#visualizer{width:100%;height:84px;display:block;margin:12px auto 8px;border-radius:6px;background:#ffffff05}.viz-overlay{position:absolute;top:8px;padding:6px 10px;border-radius:6px;background:#0000001f;color:#e8eaf6;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}.viz-top-left{left:8px}.viz-top-right{right:8px}audio#radio-audio{display:none}.controls-row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:12px;width:100%;box-sizing:border-box;padding:0 6px}.control-group{display:flex;gap:10px;align-items:center}.control-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.btn{background:var(--btn-bg);color:#e8eaf6;border:1px solid rgba(255,255,255,.04);padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}.btn:active{transform:translateY(1px)}input[type=range]{appearance:none;width:120px;height:6px;background:#ffffff0f;border-radius:6px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#e8eaf6;border:2px solid var(--bg);cursor:pointer}.small-muted{color:var(--muted);font-size:.9rem}.latency-display{color:var(--accent);font-weight:700;font-size:.9rem;display:inline-block;min-width:84px;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace}.status-space{min-width:100px;text-align:right;color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:520px){.controls-row{flex-direction:column;align-items:stretch;gap:8px;margin-top:10px}.control-group{flex-direction:column;align-items:center;gap:8px}.status-space{text-align:center;min-width:0}}footer.fixed-footer{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(to top,#06080ccc,#06080c1a);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-sizing:border-box;padding:10px 14px;z-index:60}.route-code{display:inline-block;background:#ffffff08;padding:6px 10px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9rem;color:var(--accent);border:1px solid rgba(255,255,255,.03);margin:0 6px}.status-space{min-width:90px;text-align:center;color:var(--muted);font-weight:600;font-size:.9rem}canvas#visualizer{image-rendering:-webkit-optimize-contrast}.history.card{margin:18px auto 90px;max-width:720px;width:100%;background:var(--card);border-radius:8px;padding:12px;box-shadow:0 6px 18px #02061799;color:#e8eaf6;border:1px solid rgba(255,255,255,.03);box-sizing:border-box}.history.card h3{margin:0 0 8px;font-size:1.05rem;color:var(--accent);font-weight:700}.history-empty{padding:10px;color:var(--muted);font-size:.95rem}.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:6px;background:#ffffff03;border:1px solid rgba(255,255,255,.02);box-sizing:border-box;gap:12px}.history-link{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-decoration:none;color:inherit;flex:1 1 auto;min-width:0}.history-link:hover .history-title{text-decoration:underline;color:var(--accent);transform:translateY(-1px)}.video-badge{display:inline-block;margin-left:8px;padding:4px 8px;border-radius:999px;background:#ffffff0a;color:var(--accent);font-weight:700;font-size:.75rem;border:1px solid rgba(255,255,255,.03);transition:transform .12s ease,box-shadow .12s ease;text-decoration:none}.video-badge:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 18px #00000080}.video-badge.placeholder{color:var(--muted);background:#ffffff03;border-style:dashed}.history-title-row{display:flex;align-items:center;gap:8px;min-width:0}.history-thumb-wrap{width:120px;height:68px;flex:0 0 auto;display:block}.history-thumb{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;border:1px solid rgba(255,255,255,.03);background:#0000000f}.history-thumb.placeholder{width:100%;height:100%;border-radius:6px;background:linear-gradient(180deg,#ffffff03,#fff0);border:1px dashed rgba(255,255,255,.02)}.player-thumb-wrap{width:100%;max-width:320px;margin:0 auto 10px;display:block;text-align:center}.player-thumb{width:100%;max-width:320px;height:180px;object-fit:cover;border-radius:8px;display:inline-block;border:1px solid rgba(255,255,255,.04);background:#0000000f;transition:transform .16s ease,box-shadow .16s ease}.player-thumb:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px #0000008c}.player-thumb.placeholder{width:100%;max-width:320px;height:120px;border-radius:8px;display:inline-block;background:linear-gradient(180deg,#ffffff03,#fff0);border:1px dashed rgba(255,255,255,.02)}.history-title{font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.history-meta{color:var(--muted);font-size:.9rem;display:flex;gap:10px;align-items:center;white-space:nowrap;flex:0 0 auto;margin-left:8px}.history-time{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.85rem}@media(max-width:520px){.history.card{margin:12px;padding:10px}.history-item{flex-direction:column;align-items:flex-start;gap:6px}.history-title{max-width:100%;white-space:normal}.history-meta{width:100%;justify-content:space-between}}