.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: rgba(10,10,13,0.72);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--accent), #7a0f18);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 1rem; color: #fff;
}

.nav-desktop { display: none; gap: .25rem; }
.nav-desktop a, .nav-desktop button {
  background: none; border: none; color: var(--text-secondary);
  padding: .5rem .85rem; border-radius: var(--radius-sm); font-size: .92rem;
  cursor: pointer; transition: color .18s ease, background .18s ease;
}
.nav-desktop a.active, .nav-desktop button.active { color: var(--text-primary); background: var(--surface-glass); }
.nav-desktop a:hover, .nav-desktop button:hover { color: var(--text-primary); }

.topbar-actions { display: flex; align-items: center; gap: .5rem; }

main.page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 6rem;
}

@media (min-width: 860px) {
  .nav-desktop { display: flex; }
  main.page { padding: 2rem 2rem 4rem; }
}

.section { margin: 2.5rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(10,10,13,0.85);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-top: 1px solid var(--border);
}
@media (min-width: 860px) { .bottom-nav { display: none; } }

.bottom-nav button {
  background: none; border: none; color: var(--text-secondary);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .68rem; padding: .3rem .6rem; border-radius: var(--radius-sm);
  min-width: 56px; cursor: pointer;
}
.bottom-nav button.active { color: var(--accent); }

.content-narrow { max-width: 760px; }

.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.25rem 5rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: .85rem;
}
@media (min-width: 860px) { .footer { padding-bottom: 2.5rem; } }