* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.container {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

/* Desktop: wider canvas, cards spread out */
@media (min-width: 720px) {
  .container { max-width: 880px; padding: 40px 24px 80px; }
}

.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.brandbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.brandbar .brand .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); object-fit: cover; }
.brandbar .brand .sub { font-weight: 500; font-size: 12px; color: var(--ink-mute); }
.brandbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--line); }

.page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
@media (min-width: 720px) { .page-title { font-size: 28px; } }

.hidden { display: none !important; }