/* Semantic containers for page layouts. */
.qn-page { width: min(100% - 32px, var(--qn-container-content)); margin: 0 auto; }
.qn-page-wide { width: min(100% - 32px, var(--qn-container-wide)); }
.qn-page-workspace { width: min(100% - 32px, var(--qn-container-workspace)); }
.qn-page-reading { width: min(100% - 32px, var(--qn-container-reading)); }
.qn-page-form { width: min(100% - 32px, var(--qn-container-form)); }
.qn-page-auth { width: min(100% - 32px, var(--qn-container-auth)); }
.qn-page-modal { width: min(100% - 32px, var(--qn-container-modal)); }
.qn-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 28px 0 20px; }
.qn-page-header h1, .qn-page-header h2 { margin: 0; color: var(--qn-color-text-strong); line-height: 1.25; }
.qn-page-header p { margin: 6px 0 0; color: var(--qn-color-text-muted); }
.qn-page-header-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.qn-stack { display: grid; gap: 16px; }
.qn-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qn-surface { padding: 20px; background: var(--qn-color-surface); border: 1px solid var(--qn-color-border); border-radius: var(--qn-radius-md); box-shadow: var(--qn-shadow-sm); }