#visualizer-open { flex-shrink: 0; padding: 7px 10px; border: 1px solid rgba(171, 238, 224, .45); border-radius: 20px; color: #daf8ef; font-size: 12px; }
#visualizer-open:hover { background: rgba(133, 229, 212, .15); }
#visualizer {
    position: fixed; inset: 0; z-index: 2000; overflow: hidden;
    background: #07131b;
    color: #f2fffb; font-family: "Microsoft YaHei", sans-serif;
}
#visualizer:fullscreen { width: 100%; height: 100%; }
#visualizer #backstretch { z-index: 0; }
#visualizer::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10, 28, 40, .62), rgba(4, 10, 20, .94)); }
#visualizer-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.visualizer-top { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: max(22px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left)); color: rgba(206, 241, 233, .72); font-size: 11px; letter-spacing: .2em; }
.visualizer-top span span { color: #7ee6cc; }
#visualizer-close { padding: 9px 16px; border: 1px solid rgba(200, 244, 234, .35); border-radius: 24px; font-size: 13px; letter-spacing: 0; }
#visualizer-close span { font-size: 20px; vertical-align: -1px; margin-left: 4px; }
.visualizer-center { position: absolute; z-index: 3; left: 50%; top: 43%; transform: translate(-50%, -50%); }
.visualizer-cover { width: clamp(96px, 15vmin, 180px); aspect-ratio: 1; padding: 5px; border: 1px solid rgba(203, 255, 242, .45); border-radius: 8px; background: rgba(5, 20, 29, .68); box-shadow: 0 0 36px rgba(85, 224, 194, .22); }
.visualizer-cover img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
#visualizer-cover-empty { display: grid; height: 100%; place-items: center; color: #a8e7d8; font-size: clamp(22px, 5vmin, 48px); letter-spacing: .1em; }
.visualizer-bottom { position: absolute; z-index: 3; left: 5%; right: 5%; bottom: max(24px, env(safe-area-inset-bottom)); text-align: center; text-shadow: 0 2px 12px #000; }
.visualizer-bottom h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(20px, 3vw, 32px); font-weight: 500; letter-spacing: .05em; }
#visualizer-artist { margin: 9px 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbd8d2; font-size: 13px; }
.visualizer-controls { display: flex; justify-content: center; gap: 12px; }
.visualizer-controls button { min-width: 86px; padding: 9px 18px; border: 1px solid rgba(190, 244, 231, .4); border-radius: 24px; background: rgba(8, 34, 38, .5); font-size: 13px; }
.visualizer-controls button:hover, #visualizer-close:hover { background: rgba(129, 221, 204, .2); }
#visualizer-status { min-height: 1.5em; margin: 10px 0 0; color: rgba(210, 234, 229, .7); font-size: 11px; }
@media (max-width: 700px) {
    #visualizer-open { padding: 6px 8px; }
    .visualizer-top { padding-left: 18px; padding-right: 18px; font-size: 9px; }
    .visualizer-center { top: 41%; }
    .visualizer-bottom { bottom: max(18px, env(safe-area-inset-bottom)); }
}