:root{font-family:system-ui,sans-serif;color-scheme:light dark;--accent:#5b4bdb;--panel:#f0eff8;--text:#17151f}*{box-sizing:border-box}body{margin:0;padding:0 0 9.5rem;background:#fafafa;color:var(--text)}header,main{max-width:70rem;margin:auto;padding:1rem}h1{font-size:1.4rem}.hidden{display:none!important}button,input{font:inherit;min-height:44px;border-radius:.6rem;border:1px solid #777;padding:.6rem}button{cursor:pointer;background:white}.home-grid{display:grid;gap:1rem}.card{background:var(--panel);padding:1rem;border-radius:1rem;min-height:8rem}.giant{width:100%;min-height:5rem;font-size:1.2rem;background:var(--accent);color:white}.secondary{background:white;color:var(--text)}.approval-action{background:#176b55;color:white;border-color:#0f4f3f}.connect-actions{display:grid;gap:1rem;margin:1.5rem 0}.human-code{display:block;font-size:2rem;letter-spacing:.18em;margin:1rem 0}.human-code+img,#approval-qr{display:block;max-width:min(100%,24rem);background:white;padding:.5rem}.device-row,.management-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.5rem;padding:.7rem;margin:.5rem 0;background:var(--panel);border-radius:.7rem}.management-row strong,.management-row small{display:block}.management-row small{margin-top:.25rem}.pending-row{width:100%;margin:.3rem 0}.track-list{display:grid;gap:.5rem}.track-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;align-items:center;background:white;padding:.65rem;border-radius:.7rem}.track-row div{min-width:0}.track-row strong,.track-row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-row span{font-size:.85rem;color:#555}.tabs{display:flex;gap:.4rem;overflow:auto;padding-bottom:.5rem}.tabs button{flex:0 0 auto}.primary-nav{position:fixed;bottom:6.5rem;left:0;right:0;display:flex;justify-content:center;gap:.25rem;background:#eee;padding:.4rem;z-index:3}.now-playing{position:fixed;bottom:0;left:0;right:0;min-height:6.5rem;background:#262331;color:white;display:grid;grid-template-columns:minmax(7rem,1fr) repeat(4,auto);gap:.35rem;align-items:center;padding:.5rem;z-index:4}.now-playing div span{display:block}.seek-label{grid-column:1/-1;display:flex;gap:.5rem;align-items:center}.seek-label input{width:100%}form{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.playlist-row,.facet-row button{width:100%;text-align:left;margin:.25rem 0}body[data-mode=connect],body[data-mode=devices],body[data-mode=confirm]{padding-bottom:1rem}body[data-mode=connect] #app>.screen:not(#connect),body[data-mode=devices] #app>.screen:not(#devices),body:not([data-mode=music])>.primary-nav,body:not([data-mode=music])>.now-playing{display:none!important}@media(max-width:35rem){.management-row{grid-template-columns:1fr 1fr}.management-row>div{grid-column:1/-1}}@media(min-width:45rem){.home-grid{grid-template-columns:1fr 1fr}.connect-actions{grid-template-columns:1fr 1fr}.primary-nav{bottom:5rem}.now-playing{min-height:5rem;grid-template-columns:minmax(12rem,1fr) repeat(4,auto) minmax(12rem,2fr)}.seek-label{grid-column:auto}body{padding-bottom:8rem}}@media(prefers-color-scheme:dark){:root{--panel:#302c3d;--text:#f7f5ff}body{background:#17151f}.track-row,button{background:#282532;color:#fff}.track-row span{color:#ccc}.primary-nav{background:#201d29}}