.app-frame { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: var(--navy);
  color: #e7eef6;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-4);
  z-index: 30;
}
.brand {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-1) var(--space-2) var(--space-4);
}
.brand strong, .brand span { display: block; line-height: 1.3; }
.brand strong { font-size: 0.9375rem; letter-spacing: 0.01em; }
.brand span { color: #b7c5d6; font-size: 0.8125rem; }
.brand-mark-host { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.brand-mark { width: 32px; height: 32px; color: #d5e4f5; flex: none; }
.brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: none;
  border-radius: 6px;
  background: #f4f7fb;
}
.nav-links { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #e7eef6;
  text-decoration: none;
  min-height: var(--control);
  padding: 0 var(--space-3);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.nav-link:hover, .nav-link.is-active { background: var(--navy-2); }
.nav-link.is-active { border-left-color: #8eb4de; }
.icon { width: 18px; height: 18px; flex: none; display: block; }
.version-tag {
  margin-top: auto;
  color: #9aabbe;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: var(--space-4) var(--space-2) 0;
}
.topbar, .backdrop { display: none; }
.content {
  margin-left: var(--sidebar);
  padding: var(--space-6) var(--space-6) var(--space-10);
  max-width: 1120px;
}
.content:has(.quote-layout) { max-width: 1280px; }
.page-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.page-header h1 { margin: 0 0 var(--space-2); }
.lede { color: var(--muted); max-width: 40rem; margin: 0; }
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
  align-items: start;
}
.quote-summary { position: sticky; top: var(--space-4); }
.quote-form.stack { gap: var(--space-4); }
.help-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.two-col, .three-col, .metrics, .filters {
  display: grid;
  gap: var(--space-4);
}
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-5);
}
.filters {
  grid-template-columns: 1.4fr 0.8fr 1fr 0.7fr 0.7fr;
  align-items: end;
  margin-bottom: var(--space-5);
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack > .card,
.stack > .line-card,
.stack > .empty,
.stack > .reminder { margin-bottom: 0; }
.row-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-105%); transition: transform 160ms ease; }
  .sidebar.is-open { transform: translateX(0); }
  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--navy);
    color: white;
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
  }
  .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 32, 51, 0.45);
    border: 0;
    z-index: 20;
  }
  .backdrop[hidden] { display: none; }
  .content { margin-left: 0; padding: var(--space-4) var(--space-4) var(--space-8); }
  .quote-layout, .help-layout, .two-col, .three-col { grid-template-columns: 1fr; }
  .quote-summary { position: static; }
  .page-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .filters { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}