/* Palette changes are scoped to the fictional browser, never the host page or photographs. */
.demo-palette-picker{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:12px;font:600 12px/1.4 Inter,sans-serif;flex:none}
.demo-palette-picker select{max-width:130px;padding:7px 8px;border:1px solid #7893aa;border-radius:6px;background:#203e58;color:#fff;font:600 13px/1.4 Inter,sans-serif;cursor:pointer}
.demo-palette-picker select:focus-visible{outline:2px solid #b5df70;outline-offset:2px}
.browser-toolbar .demo-palette-picker+.demo-maximize{margin-left:0}
.demo-maximized .browser-toolbar>span:nth-child(2){max-width:calc(50% - 140px)}
@media(max-width:800px){
 .demo-palette-picker>span{display:none}
 .demo-palette-picker{margin-right:8px}
 .demo-palette-picker select{width:105px;font-size:12px;padding:7px 4px}
 .demo-maximized .demo-plan-picker{position:relative;left:auto;top:auto;transform:none;width:130px;margin-left:auto;margin-right:8px}
 .demo-maximized .demo-palette-picker{margin-left:0}
 .demo-maximized .browser-toolbar>span:nth-child(2){display:none}
 .demo-maximized .browser-toolbar .window-dots{display:none}
 .demo-maximized .demo-plan-trigger{padding:7px 8px;font-size:12px;gap:8px}
}
.browser-frame[data-palette="ocean"]{--pal-bg:#f1f7fc;--pal-surface:#fff;--pal-soft:#dfecf7;--pal-ink:#18364d;--pal-accent:#235d89;--pal-line:#aabfd1;--pal-light:#8dc5f0;--pal-night:#132b3d}
.browser-frame[data-palette="forest"]{--pal-bg:#f3f7f0;--pal-surface:#fff;--pal-soft:#e1ebd9;--pal-ink:#273e2c;--pal-accent:#396341;--pal-line:#b4c7ae;--pal-light:#b1d49a;--pal-night:#1b3022}
.browser-frame[data-palette="terracotta"]{--pal-bg:#fcf5ef;--pal-surface:#fffcf9;--pal-soft:#f3e1d4;--pal-ink:#533323;--pal-accent:#955037;--pal-line:#d5b7a3;--pal-light:#efb391;--pal-night:#39271f}
.browser-frame[data-palette="plum"]{--pal-bg:#f8f3fa;--pal-surface:#fff;--pal-soft:#ecdff0;--pal-ink:#493052;--pal-accent:#794489;--pal-line:#c8b3ce;--pal-light:#dab1e5;--pal-night:#302137}
.browser-frame[data-palette="slate"]{--pal-bg:#f3f5f7;--pal-surface:#fff;--pal-soft:#e1e7ed;--pal-ink:#293b4c;--pal-accent:#465f78;--pal-line:#b1becb;--pal-light:#bbcddd;--pal-night:#202b36}
.browser-frame[data-palette]{--pal-button:#fff;--pal-muted:var(--pal-ink)}
.browser-frame[data-palette]:has(.n-dark,.sv-dark){--pal-bg:var(--pal-night);--pal-surface:var(--pal-night);--pal-soft:color-mix(in srgb,var(--pal-night),white 9%);--pal-ink:#f2f5f7;--pal-accent:var(--pal-light);--pal-button:var(--pal-night);--pal-line:color-mix(in srgb,var(--pal-light),var(--pal-night) 55%)}
.browser-frame[data-palette] .demo-v2{--dx-bg:var(--pal-bg);--dx-ink:var(--pal-ink);--dx-accent:var(--pal-accent);--dx-line:var(--pal-line);--dx-footer:var(--pal-soft);--dx-button-text:var(--pal-button);--dm-menu-bg:var(--pal-surface);--dm-menu-ink:var(--pal-ink);background-color:var(--pal-bg)!important;color:var(--pal-ink)!important}
.browser-frame[data-palette] :is(.b-nav,.c-nav,.n-nav,.sv-nav,.d-nav,.sv-panel-header,.dm-menu-panel,.c-product,.sv-product,.dl-style-card,.sv-service-story,.nx-patient-fields,.nx-booking-review,.nx-client-promo,.sv-promo,.nx-marketing-card,.nx-promotions-panel,.nx-coupons-panel,.sv-panel-content,.d-appointments,.c-drawer,.sv-drawer,.nx-editor-dialog,.nx-faq-visual,.sv-faq-visual,.c-faq-visual){background-color:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] :is(.dx-section,.b-services,.c-catalog,.sv-shop,.sv-booking,.n-booking,.n-services,.sv-service-intro,.sv-public-promotions,.nx-public-promotions,.d-body,.sv-panel,.sv-panel-welcome,.sv-metrics,.n-client,.n-panel){background-color:var(--pal-bg)!important;color:var(--pal-ink)!important}
.browser-frame[data-palette] :is(.b-hero,.c-banner,.n-hero,.sv-hero,.n-view-tabs,.sv-view-tabs,.dx-footer,.sv-footnote,.sv-panel-caption,.d-day,.nx-booking-steps li,.c-strip){background-color:var(--pal-soft)!important;color:var(--pal-ink)!important}
.browser-frame[data-palette] .demo-v2 :is(h4,h5,h6,p,small,label,summary,li,time,.dx-lead,.c-heading,.sv-section-heading,.n-nav-actions,.d-welcome,.sv-panel-caption){color:inherit!important}
.browser-frame[data-palette] .demo-v2 :is(.dx-section,.b-hero,.c-banner,.n-hero,.sv-hero,.b-nav,.c-nav,.n-nav,.sv-nav,.dx-footer) :is(b,strong,span){color:inherit}
.browser-frame[data-palette] .demo-v2 :where(button:not(.c-cart-scrim):not(.sv-cart-scrim)){background-color:var(--pal-accent)!important;color:var(--pal-button)!important;border-color:var(--pal-accent)!important}
.browser-frame[data-palette] .demo-v2 button :is(span,b,small){color:inherit!important}
.browser-frame[data-palette] .demo-v2 :is(.dx-nav button,.dx-nube-nav,.n-theme-toggle,.nx-panel-theme,.dm-menu-toggle,.sv-cart-toggle,.c-cart,.c-cart-close,.sv-close,.n-view-tabs button,.sv-view-tabs button,.sv-panel-tabs button,.d-subnav button,[data-nube-slot],.nx-client-days button){background-color:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .demo-v2 :is(button.active,button.selected,button[aria-selected="true"],button[aria-pressed="true"]){background-color:var(--pal-accent)!important;color:var(--pal-button)!important;border-color:var(--pal-accent)!important}
.browser-frame[data-palette] .demo-v2 :is(input,select,textarea){background-color:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .demo-v2 :is(input,textarea)::placeholder{color:var(--pal-ink);opacity:.65}
.browser-frame[data-palette] .demo-v2 :is(.c-cart b,.sv-cart-count,.d-cross,.d-avatar){background-color:var(--pal-soft)!important;color:var(--pal-ink)!important}
.browser-frame[data-palette] .demo-v2 :is(.dx-cards article,.dx-faq details,.nx-patient-fields,.sv-appointment){border-color:var(--pal-line)!important}
.browser-frame[data-palette] .demo-v2 button:disabled{opacity:.5}

/* Keep inherited form spacing out of the browser chrome. */
.browser-toolbar .demo-palette-picker{margin-top:0;margin-bottom:0;align-self:center}
.browser-toolbar .demo-palette-picker select{margin:0;min-height:0;height:34px;line-height:1.2}
.browser-toolbar .demo-palette-picker>span{color:#fff}
.browser-frame[data-palette] .b-hero{color:#fff!important}
.browser-frame[data-palette] .demo-v2 :is(.b-hero,.c-banner) :is(h4,p,small,span){color:#fff!important}
.browser-frame[data-palette] .b-services em{color:var(--pal-ink)!important}
.browser-frame[data-palette] .sv-hero{color:#273b30!important}
.browser-frame[data-palette] .demo-v2 .dx-nav button{background:transparent!important;color:var(--pal-ink)!important;border-color:transparent!important}
.browser-frame[data-palette] .demo-v2 button.nx-nav-book{background-color:var(--pal-accent)!important;color:var(--pal-button)!important}

.browser-frame[data-palette] .demo-v2 .sv-hero :is(h4,p,small,span){color:#293b30!important}

.browser-frame[data-palette] .demo-v2 :is(.d-stats>div,.sv-metrics>div,.d-week,.nx-editor-preview){background:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .demo-v2 :is(.d-stats,.sv-metrics,.d-day) :is(span,b,small){color:var(--pal-ink)!important}
.browser-frame[data-palette] .demo-v2 .d-week button:not([aria-pressed="true"]){background:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .nx-editor-dialog :is(input,textarea,select){background:var(--pal-surface)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .nx-editor-dialog :is(label,p,h4,h5,small){color:var(--pal-ink)!important}
.browser-frame[data-palette] .nx-editor-dialog button{background:var(--pal-accent)!important;color:var(--pal-button)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .nx-editor-dialog :is(form,.nx-editor-head,.nx-editor-preview){background:var(--pal-surface)!important;color:var(--pal-ink)!important}

.browser-frame[data-palette] .demo-v2 .local-demo-status{background:var(--pal-bg)!important;color:var(--pal-ink)!important}

/* Panel navigation retains the original underline-only selection. */
.browser-frame[data-palette] .demo-v2 .d-subnav button{background:transparent!important;color:var(--pal-ink)!important;border-color:transparent!important}
.browser-frame[data-palette] .demo-v2 .d-subnav button.selected{background:transparent!important;color:var(--pal-accent)!important;border-bottom-color:var(--pal-accent)!important}

/* Footer links and social controls retain the original visual hierarchy. */
.browser-frame[data-palette] .demo-v2 :is(.dx-footer-explore,.dx-footer-bottom) button{background:transparent!important;color:var(--pal-ink)!important;border-color:transparent!important}
.browser-frame[data-palette] .demo-v2 .dx-footer-socials button{background:transparent!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] .demo-v2 .dx-footer-socials button:hover{background:var(--pal-accent)!important;color:var(--pal-button)!important}

/* Comfortable touch targets and readable native select on small screens. */
@media(max-width:800px){
 .browser-frame .browser-toolbar{height:52px;min-height:52px}
 .browser-frame.demo-maximized .browser-toolbar{flex-basis:52px}
 .browser-toolbar .demo-palette-picker select{height:44px;font-size:16px;width:114px}
 .browser-toolbar .demo-maximize{min-width:44px;min-height:44px}
 .demo-maximized .demo-plan-picker{width:120px;min-width:0;flex-shrink:1}
 .demo-maximized .demo-plan-trigger{min-height:44px}
}

/* One signature palette tailored to each fictional business. */
.browser-frame[data-palette="copper"]{--pal-bg:#24211f;--pal-surface:#302b27;--pal-soft:#3b3029;--pal-ink:#fff3e3;--pal-accent:#edb48d;--pal-button:#302018;--pal-line:#806653;--pal-light:#edb48d;--pal-night:#24211f}
.browser-frame[data-palette="lavender"]{--pal-bg:#faf7fc;--pal-surface:#fffdf9;--pal-soft:#ebe2f3;--pal-ink:#42304f;--pal-accent:#705082;--pal-line:#c7b4d4;--pal-light:#d5bce7;--pal-night:#2c2435}
.browser-frame[data-palette="cherry"]{--pal-bg:#fcf5e9;--pal-surface:#fffaf2;--pal-soft:#f2dfd6;--pal-ink:#452a25;--pal-accent:#972f46;--pal-line:#d2afa3;--pal-light:#f2b6c1;--pal-night:#382128}
.browser-frame[data-palette="botanical"]{--pal-bg:#f7f3e9;--pal-surface:#fffdf7;--pal-soft:#edddd5;--pal-ink:#37402b;--pal-accent:#536337;--pal-line:#bfc3a8;--pal-light:#c7d8a2;--pal-night:#293020}
.browser-frame[data-palette="copper"] .demo-v2 .dl-style-card{background:var(--pal-surface)!important;color:var(--pal-ink)!important}

/* Distrito 28 carries each palette into its navigation bar. */
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav{background:var(--pal-accent)!important;color:var(--pal-button)!important}
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav .dx-nav button,
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav .dm-menu-toggle{background:transparent!important;color:var(--pal-button)!important;border-color:currentColor!important}
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav .dx-nav button{border-color:transparent!important}
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav .b-nav-contact{background:var(--pal-button)!important;color:var(--pal-accent)!important;border-color:var(--pal-button)!important}
.browser-frame[data-palette]:not([data-palette="copper"]) .demo-v2 .b-nav .dm-menu-panel .dx-nav button{color:var(--pal-ink)!important}

/* The photographic veil follows the chosen palette in both themes. */
.browser-frame[data-palette] .n-hero::after{background:linear-gradient(90deg,color-mix(in srgb,var(--pal-bg) 98%,transparent) 0%,color-mix(in srgb,var(--pal-bg) 94%,transparent) 37%,color-mix(in srgb,var(--pal-bg) 78%,transparent) 49%,color-mix(in srgb,var(--pal-bg) 15%,transparent) 70%,transparent 88%)}
@media(max-width:620px){.browser-frame[data-palette] .n-hero::after{background:linear-gradient(90deg,color-mix(in srgb,var(--pal-bg) 98%,transparent) 0%,color-mix(in srgb,var(--pal-bg) 94%,transparent) 43%,color-mix(in srgb,var(--pal-bg) 78%,transparent) 57%,color-mix(in srgb,var(--pal-bg) 15%,transparent) 80%,transparent 100%)}}

/* Nube's supporting labels and benefit strip belong to the selected palette. */
.browser-frame[data-palette] #demo-content .nx-hero-trust span{background:var(--pal-soft)!important;color:var(--pal-ink)!important;border-color:var(--pal-line)!important}
.browser-frame[data-palette] #demo-content .nx-benefits-grid{background:var(--pal-surface)!important;border-color:var(--pal-line)!important;box-shadow:0 12px 30px color-mix(in srgb,var(--pal-night) 10%,transparent)}
.browser-frame[data-palette] #demo-content .nx-benefits article+article{border-color:var(--pal-line)!important}
.browser-frame[data-palette] #demo-content .nx-benefit-icon{background:var(--pal-soft)!important;color:var(--pal-accent)!important}
.browser-frame[data-palette] #demo-content .nx-benefits :is(h5,p){color:var(--pal-ink)!important}