*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#111;padding:24px;font-family:system-ui,sans-serif;line-height:1.5}h1{margin-bottom:4px;font-size:1.2rem;font-weight:600}p.sub{color:#888;margin-bottom:20px;font-size:.8rem}.player-layout{grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}@media (width<=900px){.player-layout{grid-template-columns:1fr}}.player-left,.player-right{flex-direction:column;gap:16px;min-width:0;display:flex}section{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:16px}section h2{text-transform:uppercase;letter-spacing:.08em;color:#666;margin-bottom:12px;font-size:.75rem}.track-title{font-size:1rem;font-weight:600}.track-time{color:#888;margin-top:2px;font-size:.8rem}.progress-wrap{cursor:pointer;margin:12px 0}.progress-bg{background:#333;border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:#3b82f6;border-radius:2px;width:0%;height:100%;transition:width .1s linear}.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}button{color:#eee;cursor:pointer;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;padding:6px 14px;font-size:.85rem}button:hover{background:#333}button.primary{background:#3b82f6;border-color:#3b82f6}button.primary:hover{background:#2563eb}label{color:#aaa;font-size:.8rem}input[type=range]{cursor:pointer;width:120px}.playlist{list-style:none}.playlist li{cursor:pointer;border-radius:6px;align-items:center;gap:10px;padding:7px 10px;font-size:.85rem;display:flex}.playlist li:hover{background:#222}.playlist li.active{background:#1e3a5f}.playlist li .idx{text-align:right;color:#555;width:20px;font-size:.75rem}.playlist li .title{flex:1}.playlist li .dur{color:#666;font-size:.75rem}.playlist li .badge{color:#888;background:#2a2a2a;border-radius:4px;padding:1px 5px;font-size:.65rem}.playlist li .badge.web{color:#4ade80;background:#14532d}.playlist li .badge.h5{color:#93c5fd;background:#1e3a5f}.playlist li .badge.load{color:#fbbf24;background:#3b2a05}.status{color:#6b7280;flex-wrap:wrap;gap:16px;font-family:monospace;font-size:.75rem;display:flex}.status span b{color:#d1d5db}.log{color:#4ade80;background:#0a0a0a;border-radius:6px;height:160px;padding:10px;font-family:monospace;font-size:.72rem;overflow-y:auto}.log div{margin-bottom:2px}.log div.warn{color:#fbbf24}.log div.err{color:#f87171}.tip{color:#6b7280;margin-top:8px;font-size:.78rem}.tip b{color:#fbbf24}.preset-selector{gap:8px;margin-bottom:16px;display:flex}.debug-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (width<=600px){.debug-grid{grid-template-columns:1fr}}.debug-label{text-transform:uppercase;letter-spacing:.06em;color:#555;margin:8px 0 2px;font-size:.65rem}.debug-label:first-child{margin-top:0}.debug-pre{color:#4ade80;white-space:pre-wrap;word-break:break-all;background:#0a0a0a;border-radius:4px;max-height:140px;margin:0;padding:6px 8px;font-family:monospace;font-size:.7rem;overflow:auto}.debug-log{color:#fbbf24;max-height:120px}