html, body { height: 100%; }
#library { max-width: 1040px; margin: 0 auto; padding: 32px 20px 40px; }
.hero { margin-bottom: 24px; }
.hero .brand { font-size: 28px; }
.hero .brand img { width: 48px; height: 48px; border-radius: 12px; }
.tagline { color: var(--muted); margin: 8px 0 0 58px; }
.foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 28px; }
.foot code { background: var(--panel); border: 1px solid var(--border); padding: 1px 5px; border-radius: 5px; }
body.playing { overflow: hidden; }
body.playing #library { display: none; }
#player { display: none; }
body.playing #player { display: flex; flex-direction: column; height: 100%; }
.topbar {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
background: var(--panel);
}
.topbar .brand.small { font-size: 15px; }
.topbar .brand.small img { width: 22px; height: 22px; border-radius: 6px; }
.topbar .spacer { flex: 1; }
.topbar .btn { padding: 6px 10px; }
#stage { flex: 1; min-height: 0; background: #000; position: relative; }
#stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
#stage .missing { padding: 40px; color: var(--muted); }