/* Shared product-preview tokens; the marketing site's identity is separate. */
:root{--ui-demo-bg:#f7f9fa;--ui-demo-surface:#fff;--ui-demo-raised:#f1f4f6;--ui-demo-text:#26313b;--ui-demo-muted:#667580;--ui-demo-line:#dce2e7;--ui-demo-icons:var(--live-demo-primary,#20b633);--ui-demo-radius:8px;--ui-demo-field-radius:8px;--ui-demo-tint:color-mix(in srgb,var(--live-demo-primary,#20b633) 10%,var(--ui-demo-surface))}
:root[data-demo-theme=dark],:root[data-theme=dark]:not([data-demo-theme=light]){--ui-demo-bg:#151a20;--ui-demo-surface:#20272f;--ui-demo-raised:#2a333e;--ui-demo-text:#edf1f5;--ui-demo-muted:#b0bcc8;--ui-demo-line:#44505d;--ui-demo-scheme:dark}
:root[data-demo-theme=light]{--ui-demo-scheme:light}
.demo-ui-root{color-scheme:var(--ui-demo-scheme,light)}
.ds-panel{width:min(550px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--odx-border,#dce2e7);border-radius:15px;background:var(--odx-surface,#fff);color:var(--odx-ink,#222);box-shadow:0 20px 70px #0004;font:14px/1.5 var(--ff-body,Arial,sans-serif)}
.ds-panel::backdrop{background:#0008}.ds-panel>header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:22px 24px;border-bottom:1px solid var(--odx-border,#ddd)}.ds-panel h2{font:650 20px/1.3 var(--ff-body,Arial,sans-serif);letter-spacing:-.02em;margin:0}.ds-panel header p{font-size:12px;color:var(--odx-muted,#666);margin:5px 0 0}.ds-panel button,.ds-panel select,.ds-panel input{font:inherit}.ds-panel button{cursor:pointer;color:inherit;border:1px solid var(--odx-border,#ddd);background:transparent;border-radius:6px;padding:8px 12px}.ds-panel header>button{font-size:22px;line-height:1;padding:5px 10px}.ds-content{padding:20px 24px}.ds-panel fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}.ds-panel legend{font-weight:650;font-size:13px;padding:0;margin:0 0 10px}.ds-panel label{display:block;font-size:12px;line-height:1.5}.ds-panel label+label{margin-top:12px}.ds-panel select{display:block;width:100%;margin-top:6px;border:1px solid var(--odx-border,#ddd);border-radius:6px;padding:9px;background:var(--odx-surface,#fff);color:inherit}.ds-segments{display:flex;gap:5px}.ds-segments>button{flex:1;font-size:12px}.ds-segments>[aria-pressed=true]{background:var(--odx-ink,#222);color:var(--odx-bg,#fff);border-color:var(--odx-ink,#222)}.ds-columns,.ds-uploads{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}.ds-columns>label+label,.ds-uploads>label+label{margin:0}.ds-colour{display:flex;align-items:center;gap:9px;width:100%;margin-top:6px;height:38px}.ds-colour span{width:20px;height:20px;background:var(--live-demo-primary);border:1px solid #8886;border-radius:4px}.ds-colour b{font-size:12px;font-weight:500}.ds-panel input[type=color]{display:block;width:100%;height:38px;margin-top:6px;padding:4px;background:transparent;border:1px solid var(--odx-border,#ddd);border-radius:6px;cursor:pointer}.ds-check{display:flex;gap:5px;align-items:center;margin-top:5px;font-size:11px}.ds-uploads{margin:15px 0 0}.ds-uploads input{display:block;max-width:100%;font-size:10px;margin:6px 0}.ds-uploads small,.ds-uploads span{display:block;font-size:10px;color:var(--odx-muted,#666)}.ds-panel input[type=range]{display:block;width:100%;margin-top:9px;accent-color:var(--live-demo-primary)}.ds-panel output{float:right;color:var(--odx-muted,#666)}.ds-sample{padding:20px;background:var(--ui-demo-bg);border:1px solid var(--ui-demo-line);border-radius:10px;color:var(--ui-demo-text)}.ds-sample-brand{margin-bottom:15px}.ds-sample-field{display:block;padding:10px;border:1px solid var(--ui-demo-line);border-radius:var(--ui-demo-field-radius);color:var(--ui-demo-muted);background:var(--ui-demo-surface);font-size:12px}.ds-sample-button{display:block;text-align:center;margin-top:10px;padding:10px;background:var(--live-demo-primary,#20b633);color:var(--live-demo-ink,#fff);border-radius:var(--ui-demo-radius);font-size:12px}.ds-status{font-size:11px!important;line-height:1.5!important;color:var(--odx-muted,#666);margin:14px 0 0!important}.ds-panel>footer{display:flex;justify-content:space-between;gap:12px;position:sticky;bottom:0;background:var(--odx-surface,#fff);padding:14px 24px;border-top:1px solid var(--odx-border,#ddd)}.ds-panel>footer>button:last-child{background:var(--odx-ink,#222);color:var(--odx-bg,#fff)}.ds-panel :focus-visible{outline:2px solid var(--odx-accent,#d6501e);outline-offset:3px}
/* Explicit shared hooks also cover previews rendered after load. */
html .demo-ui-root :is(button,.cu-btn,.cd-btn,.br-login-submit,.hmu-login__submit,.ds-sample-button){border-radius:var(--ui-demo-radius)!important}
html .demo-ui-root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,.br-login-field,.hmu-login__field){border-radius:var(--ui-demo-field-radius)!important}
html .demo-ui-root :is(i.fa-solid,i.fa-regular,.hmu__address>i,.hmu__note>i,.hmu__privacy>i){color:var(--ui-demo-icons)}
html .demo-ui-root :is(.rd-primary,.cu-btn.primary,.cu-btn.active,.ct-primary,.er-primary,.ep-primary,.lp-primary,.br-login-submit,.hmu-login__submit) i{color:inherit}
.ds-logo-image{display:block;object-fit:contain;max-width:100%;width:130px;height:34px}.ds-app-image{display:block;object-fit:contain;width:27px;height:27px}.ds-logo-applied{display:flex!important;align-items:center!important;gap:8px!important}.hmu__brand.ds-logo-applied>b{background:transparent;padding:0}.br-login-logo.ds-logo-image{width:100%;height:auto;max-height:80px}.ct-doc-logo .ds-logo-image{width:140px}.er-mini-brand .ds-logo-image{width:145px}.demo-ui-root .br-native-login{background:var(--ui-demo-bg);color:var(--ui-demo-text)}
@media(max-width:450px){.ds-panel>header,.ds-content{padding:16px}.ds-panel>footer{padding:12px 16px}.ds-columns,.ds-uploads{gap:12px}.ds-segments>button{padding:8px 6px}.ds-panel h2{font-size:18px}}

.ds-panel{margin:auto;inset:0}
/* Retain the uploaded logo's colours when no separate dark appearance asset is supplied. */
html[data-demo-logo-backing] .demo-ui-root :is(.ds-logo-image,.ds-compact-logo){background:#fff;padding:5px;border-radius:4px;box-sizing:border-box}
/* Keep navigation geometry while applying the selected control corners. */
html .demo-ui-root .rd-tabs>button{border-radius:0!important}
.demo-ui-root :is(button,label,.rd-file,.rd-business,.ep-stats,.ct-tools,.er-mini-brand) svg{color:var(--ui-demo-icons)}
.demo-ui-root :is(.rd-primary,.cu-btn.primary,.ct-primary,.er-primary,.ep-primary,.lp-primary) svg{color:inherit}
:is(:root[data-demo-theme=dark],:root[data-theme=dark]:not([data-demo-theme=light])) .demo-ui-root.bd-workspace{--demo-page:var(--ui-demo-bg);--demo-card:var(--ui-demo-surface);--demo-text:var(--ui-demo-text);--demo-border:var(--ui-demo-line);--demo-field-border:var(--ui-demo-line);--demo-sidebar:var(--ui-demo-bg);--demo-top:var(--ui-demo-surface)}
:root{--ui-demo-accent-text:color-mix(in srgb,var(--live-demo-primary,#20b633) 45%,var(--ui-demo-text))}
:root[data-demo-theme=dark],:root[data-theme=dark]:not([data-demo-theme=light]){--ui-demo-accent-text:color-mix(in srgb,var(--live-demo-primary,#20b633) 55%,white)}
html .demo-ui-root .rd-tabs>button[aria-selected=true],html .demo-ui-root .rd-mail-tag,html .demo-ui-root .hmu__price,html .demo-ui-root .hmu__meters strong{color:var(--ui-demo-accent-text)}
.ds-compact-logo{width:95px;height:27px;object-fit:contain}
.ds-columns,.ds-uploads{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-columns>label,.ds-uploads>label{min-width:0}.ds-uploads input[type=file]{width:100%;min-width:0;overflow:hidden}.ds-panel>footer>button:first-child{flex:1;min-width:0;font-size:12px}
@media(max-width:450px){.ds-uploads{grid-template-columns:minmax(0,1fr)}}
