@layer components {
  .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
  .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); }

  .stack { display: flex; flex-direction: column; }
  .stack-2 { gap: var(--space-2); }
  .stack-3 { gap: var(--space-3); }
  .stack-4 { gap: var(--space-4); }
  .stack-5 { gap: var(--space-5); }
  .stack-6 { gap: var(--space-6); }
  .stack-7 { gap: var(--space-7); }

  .row-flex { display: flex; align-items: center; }
  .row-between { display: flex; align-items: center; justify-content: space-between; }
  .row-baseline { display: flex; align-items: baseline; justify-content: space-between; }
  .row-gap-2 { gap: var(--space-2); }
  .row-gap-3 { gap: var(--space-3); }
  .row-gap-4 { gap: var(--space-4); }
  .row-gap-5 { gap: var(--space-5); }

  .detail-page { padding: var(--space-8) 0; }
  .detail-page .container { max-width: 720px; }
}