.app-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

.main { padding: 26px; min-width: 0; }

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-width: 0;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.page-title { min-width: 0; flex: 1 1 auto; }
.page-title h2 { margin: 0 0 3px; font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-title p { margin: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.screen { display: none; animation: fade .2s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }