@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";.layout{min-height:100vh}.header{border-bottom:1px solid var(--border);padding:14px 32px;display:flex;align-items:center;gap:24px;background:#ffffff05}.header-brand{display:flex;align-items:center;gap:12px;cursor:pointer}.brand-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em;flex-shrink:0}.brand-name{font-size:16px;font-weight:700;color:var(--text-bright);line-height:1.2}.brand-sub{font-size:11px;color:var(--text-muted)}.header-search{flex:1;max-width:400px}.header-search input{width:100%;padding:9px 16px;background:#ffffff0f;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none;transition:border-color .15s}.header-search input:focus{border-color:var(--border-hover)}.header-search input::placeholder{color:var(--text-muted)}.header-actions{margin-left:auto}.main-content{padding:24px 32px 40px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;cursor:pointer;transition:all .2s}.card:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-2px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.page-title{font-size:22px;font-weight:700;color:var(--text-bright)}.page-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px}.btn{background:#ffffff0f;border:1px solid var(--border);color:var(--text-dim);padding:8px 16px;border-radius:8px;font-size:13px;transition:all .15s}.btn:hover{background:var(--surface-hover);border-color:var(--border-hover)}.status-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:4px}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.status-dot.online{background:var(--green);box-shadow:0 0 8px #22c55e80}.status-dot.offline{background:var(--red)}.progress-bar{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden;width:100%}.progress-fill{height:100%;border-radius:2px;transition:width .5s linear}.empty-state{text-align:center;color:var(--text-muted);padding:40px}.player-page{display:flex;flex-direction:column;gap:20px}.player-header{display:flex;align-items:center;justify-content:space-between}.online-badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;padding:6px 14px;border-radius:20px}.online-badge.online{color:var(--green);background:var(--green-bg)}.online-badge.offline{color:var(--red);background:var(--red-bg)}.online-badge-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.player-detail-grid{display:flex;flex-direction:column;gap:16px}.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 28px}.detail-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:16px}.now-playing-track{font-size:20px;font-weight:600;color:var(--text-bright);margin-bottom:14px}.time-label{font-size:13px;color:var(--text-dim);min-width:42px}.controls-row{display:flex;gap:8px;justify-content:center}.control-btn{background:#ffffff0f;border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;transition:all .15s}.control-btn:hover{filter:brightness(1.3)}.control-btn.btn-play{background:#22c55e26;border-color:#22c55e4d;color:var(--green)}.control-btn.btn-pause{background:#f59e0b26;border-color:#f59e0b4d;color:var(--amber)}.control-btn.btn-stop{background:#ef444426;border-color:#ef44444d;color:var(--red)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.info-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px}.info-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}.info-value{font-size:14px;color:var(--text)}.info-value.mono{font-family:monospace;font-size:11px;word-break:break-all}@media(max-width:640px){.info-grid{grid-template-columns:1fr}.controls-row{flex-wrap:wrap}}.header-badges{display:flex;align-items:center;gap:8px;margin-left:auto}.ws-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#38bdf8;background:#38bdf81a;padding:5px 12px;border-radius:20px}.ws-badge-dot{width:6px;height:6px;border-radius:50%;background:#38bdf8;animation:pulse-blue 2s ease-in-out infinite}@keyframes pulse-blue{0%,to{opacity:1;box-shadow:0 0 #38bdf866}50%{opacity:.8;box-shadow:0 0 8px 2px #38bdf84d}}.volume-row{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.volume-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);cursor:pointer}.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);border:none;cursor:pointer}:root{--bg: #0f1117;--surface: rgba(255,255,255,.04);--surface-hover: rgba(255,255,255,.07);--border: rgba(255,255,255,.08);--border-hover: rgba(255,255,255,.15);--text: #e5e7eb;--text-bright: #f3f4f6;--text-dim: #9ca3af;--text-muted: #6b7280;--green: #22c55e;--green-bg: rgba(34,197,94,.12);--amber: #f59e0b;--amber-bg: rgba(245,158,11,.12);--red: #ef4444;--red-bg: rgba(239,68,68,.12)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}input{font-family:inherit}