.demo-shell { background: var(--msm-color-bg); color: var(--msm-color-text); }
.demo-brand { font-size: 22px; }
.demo-shell .msm-sidebar-logo { gap: 12px; }
.demo-section { margin-bottom: 28px; }
.demo-section > h2 { margin: 0 0 14px; font-size: 16px; }
p { overflow-wrap: anywhere; }
.demo-gallery, .demo-form-grid, .demo-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.demo-gallery > .msm-card { margin: 0; }
.demo-gallery-link { display: flex; align-items: center; justify-content: space-between; color: var(--msm-color-text); font-weight: 600; }
.demo-form-grid .msm-form-group { margin-bottom: 0; }
.demo-options { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.demo-theme-control { display: flex; align-items: center; gap: 8px; }
.demo-theme-field { width: 90px; margin-bottom: 0; }
.demo-theme-sample { background: var(--msm-color-bg); color: var(--msm-color-text); padding: 20px; min-width: 0; }
.demo-theme-sample > * { margin-bottom: 16px; }
.demo-swatches { display: flex; gap: 10px; }
.demo-swatches span { width: 28px; height: 28px; border-radius: 4px; }
.demo-narrow { max-width: 440px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: 16px; background: #fef3c7; color: #111827; z-index: 2000; }
@media (max-width: 640px) {
    .demo-gallery, .demo-form-grid, .demo-theme-grid { grid-template-columns: minmax(0, 1fr); }
    .demo-theme-control > span { display: none; }
}