*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input{font:inherit}
a{color:var(--accent);text-decoration:none}
::selection{background:var(--accent-soft)}

/* Boot splash (before JS mounts) */
.boot{min-height:100dvh;display:grid;place-items:center}
.boot-logo img{border-radius:18px;box-shadow:0 12px 40px var(--accent-soft);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}

/* App shell: fixed top bar, scrollable view, optional mini-player docked bottom */
.app-shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--space-sm);
  padding:0 var(--space-md);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text)}
.topbar .brand .c{color:var(--accent)}
.topbar .spacer{flex:1}
.topbar .iconbtn{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;color:var(--text-2)}
.topbar .iconbtn:hover{background:var(--surface);color:var(--text)}

.view{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--space-md) var(--space-md) calc(var(--miniplayer-h) + 32px)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-md)}

h1.page{font-size:26px;letter-spacing:-.02em;margin:var(--space-sm) 0 var(--space-md)}
h2.section{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin:var(--space-lg) 0 var(--space-sm)}
.muted{color:var(--text-2)}
.center{text-align:center}

/* Empty / loading states */
.state{padding:64px var(--space-md);text-align:center;color:var(--text-2)}
.state .big{font-size:34px;margin-bottom:var(--space-sm)}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
  .view{padding-left:var(--space-md);padding-right:var(--space-md)}
  h1.page{font-size:22px}
}