:root{--bg:#0f1115;--surface:#191c23;--surface-hi:#232733;--text:#f3f5f8;--muted:#9aa3b2;--accent:#1db954;--danger:#ff6b6b;--radius:14px;--tap:52px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer;min-height:var(--tap);border-radius:var(--radius);background:0 0;border:none}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.app{flex-direction:column;height:100%;display:flex}.scroll{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.content{padding:16px 16px 8px}.nav{background:var(--surface);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #000;justify-content:space-around;display:flex}.nav a{min-height:var(--tap);color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;padding:8px 0;font-size:12px;display:flex}.nav a.active{color:var(--accent)}.nav .icon{display:block}h1{margin:4px 0 16px;font-size:24px}h2{margin:24px 0 12px;font-size:18px}.muted{color:var(--muted)}.empty{text-align:center;color:var(--muted);padding:48px 24px}.empty .big{color:var(--muted);justify-content:center;margin-bottom:12px;display:flex}.empty .big.brand{color:var(--accent)}.error{border:1px solid var(--danger);color:#ffd9d9;border-radius:var(--radius);background:#2a1c1c;margin-bottom:16px;padding:12px 14px}.btn{background:var(--accent);color:#04140a;min-height:var(--tap);padding:0 24px;font-weight:700}.btn.secondary{background:var(--surface-hi);color:var(--text)}.btn.with-icon{justify-content:center;align-items:center;gap:8px;display:inline-flex}.placeholder{color:var(--muted);justify-content:center;align-items:center;display:flex}.placeholder svg{width:42%;height:42%}.eq{align-items:flex-end;gap:3px;height:16px;display:flex}.eq i{background:var(--accent);transform-origin:bottom;border-radius:2px;width:3px;height:100%;animation:.9s ease-in-out infinite alternate eq-bounce}.eq i:first-child{animation-duration:.75s}.eq i:nth-child(2){animation-duration:1.05s;animation-delay:-.35s}.eq i:nth-child(3){animation-duration:.6s;animation-delay:-.15s}@keyframes eq-bounce{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.eq i{animation:none;transform:scaleY(.7)}}.spinner{text-align:center;color:var(--muted);padding:40px}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;display:grid}.tile{text-align:left;width:100%;padding:0;display:block}.tile img,.tile .placeholder{aspect-ratio:1;border-radius:var(--radius);object-fit:cover;background:var(--surface-hi);width:100%}.tile .title{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin-top:8px;font-size:15px;font-weight:600;display:-webkit-box;overflow:hidden}.tile .sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.rows{flex-direction:column;display:flex}.row{text-align:left;border-radius:var(--radius);align-items:center;gap:12px;width:100%;padding:8px;display:flex}.row:active{background:var(--surface-hi)}.row img,.row .placeholder{object-fit:cover;background:var(--surface-hi);border-radius:8px;flex:none;width:52px;height:52px}.row .placeholder.index{color:var(--muted);font-size:15px}.row .body{flex:1;min-width:0}.row .name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.row .meta{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.row.playing .name{color:var(--accent)}.badge{border:1px solid var(--muted);color:var(--muted);vertical-align:middle;border-radius:3px;margin-left:6px;padding:0 3px;font-size:10px}.detail-head{gap:16px;margin-bottom:16px;display:flex}.detail-head img,.detail-head .placeholder{border-radius:var(--radius);object-fit:cover;background:var(--surface-hi);flex:none;width:132px;height:132px}.detail-head h1{margin:0 0 6px;font-size:20px}.search-bar{gap:8px;margin-bottom:16px;display:flex}.search-bar input{min-height:var(--tap);font:inherit;color:var(--text);background:var(--surface);border:2px solid var(--surface-hi);border-radius:var(--radius);flex:1;padding:0 16px}.search-bar input:focus{border-color:var(--accent);outline:none}.chips{gap:8px;margin-bottom:16px;padding-bottom:4px;display:flex;overflow-x:auto}.chip{background:var(--surface);min-height:40px;color:var(--muted);white-space:nowrap;flex:none;padding:0 16px}.chip.on{background:var(--accent);color:#04140a;font-weight:700}.nowplaying{background:var(--surface);border-top:1px solid #000;padding:10px 12px}.np-main{align-items:center;gap:12px;display:flex}.np-main img,.np-main .placeholder{object-fit:cover;background:var(--surface-hi);border-radius:8px;flex:none;width:48px;height:48px}.np-text{flex:1;min-width:0}.np-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.np-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.np-buttons{align-items:center;gap:4px;display:flex}.np-buttons button{min-width:var(--tap);justify-content:center;align-items:center;display:flex}.np-buttons button:disabled{opacity:.3}.np-play{background:var(--accent);color:#04140a;width:var(--tap);height:var(--tap);border-radius:50%}.np-progress{color:var(--muted);align-items:center;gap:8px;margin-top:6px;font-size:11px;display:flex}.np-progress input{accent-color:var(--accent);flex:1;height:24px}.np-device{width:100%;color:var(--accent);justify-content:space-between;align-items:center;min-height:34px;padding:6px 4px 0;font-size:13px;display:flex}.np-device.warn{color:#ffcf6b}.np-device-label{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;min-width:0;display:flex;overflow:hidden}.np-device .icon{flex:none}.status{background:var(--surface);border-radius:var(--radius);margin-bottom:24px;padding:16px}.status h2{margin:0 0 12px;font-size:16px}.status-row{border-bottom:1px solid var(--surface-hi);align-items:center;gap:10px;padding:8px 0;display:flex}.status-icon{flex:none;display:flex}.status-icon.ok{color:var(--accent)}.status-icon.bad{color:var(--danger)}.status-label{flex:1;font-weight:600}.status-value{color:var(--muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;max-width:55%;overflow:hidden}.status-value.bad{color:#ffcf6b}.status .btn{width:100%;margin-top:14px}.topics{flex-direction:column;gap:10px;display:flex}.topic{background:var(--surface);border-radius:var(--radius);overflow:hidden}.topic-head{text-align:left;border-radius:0;align-items:center;gap:12px;width:100%;padding:14px;display:flex}.topic-icon{color:var(--accent);flex:none;display:flex}.topic-title{flex:1;font-weight:600}.topic-chevron{color:var(--muted);flex:none;display:flex}.topic-body{padding:0 16px 16px}.topic-body p{margin:0 0 10px}.topic-body .muted{font-size:14px}.topic-body ol{margin:0;padding-left:22px}.topic-body li{margin-bottom:10px;line-height:1.5}.ask-parent{background:var(--surface-hi);border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-weight:600;display:flex;margin-top:12px!important}.ask-parent .icon{color:var(--accent);flex:none}.sheet-backdrop{z-index:20;background:#0009;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:100%;max-height:80%;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;overflow-y:auto}.sheet h2{margin:0 0 4px}.device{text-align:left;align-items:center;gap:12px;width:100%;padding:12px 8px;display:flex}.device.on{color:var(--accent)}.device .icon{flex:none}.volume{align-items:center;gap:10px;padding:8px;display:flex}.volume input{accent-color:var(--accent);flex:1;height:32px}.volume .icon{color:var(--muted);flex:none}