/* Shared only by the two /new preview designs; remains active while switching. */
.template-design-control { display: flex !important; flex-shrink: 0; }
[data-design-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text); cursor: pointer; }
[data-design-toggle]:hover { background: var(--color-bg-hover); }
[data-design-toggle]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
html[data-preview-design="modern"] .design-icon-old,
html[data-preview-design="old"] .design-icon-modern { display: none; }
html[data-preview-design="old"] :is(.template-scene, .template-app, .template-button-halo, .template-button-orbit, .template-surface-highlight) { display: none; }
html[data-preview-design="old"] .template-button-glow { display: inline-flex; flex-shrink: 0; }
html[data-preview-design="old"] .template-button-glow > button { width: 100%; }
body > nav:has([data-design-toggle]) > div:first-child { max-width: 1296px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  body > nav[data-dense] .hdr-nav { margin-inline-start: 8px; }
  body > nav[data-dense] .hdr-nav > li > :is(button, a) { padding-inline: 4px; }
  body > nav[data-dense] .hdr-right { gap: 4px; }
  body > nav[data-dense] .hdr-right .hdr-cta { padding-inline: .75rem; }
  body > nav[data-dense] .hdr-right > li > a:not(.hdr-cta) { padding-inline: .5rem; }
}
@media (max-width: 1023px) {
  [data-design-toggle] { width: 44px; height: 44px; }
}

html[data-preview-design="old"] .template-menu-tools { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
html[data-preview-design="old"] .template-menu-tools > ul { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; list-style: none; }

body > nav .hdr-nav > li > :is(button, a) { white-space: nowrap; }
