/* Decorative backgrounds never receive pointer input or company data. */
html{background:#0d2430}body{isolation:isolate}html,body{overflow-x:clip}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(#18374c33,#0b25384d),url('/cloud-flight.png') center/cover no-repeat;opacity:0;transform:scale(1);transition:opacity .4s ease}
html[data-background="clouds"] body{background:transparent!important}
html[data-background="clouds"] body::before{opacity:1;animation:proshub-cloud-flight 50s ease-in-out infinite alternate}
html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) #robotBackground{display:none!important}
html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) .platform-atmosphere{opacity:0!important}
html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) #gate,html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) #gate .welcome-world{background:transparent!important}
html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) #gate .welcome-atmosphere{opacity:0}
html:is([data-background="clouds"],[data-background="cloud-video"],[data-background="custom"]) #gate .welcome-world::after{background:linear-gradient(115deg,#09233355,#102d4933)!important}
#personalBackground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none;background:#102c3d}
#personalBackground::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#0a23334d,#0e203540)}
#personalBackground img,#personalBackground video{width:100%;height:100%;object-fit:cover;display:block}
html[data-background="custom"] #personalBackground{display:block}
html[data-background="custom"] body{background:transparent!important}
#app,#gate{position:relative}.workspace-page-body{min-width:0;overflow-x:auto}
html[data-robot-motion="paused"] body::before{animation-play-state:paused}
@keyframes proshub-cloud-flight{from{transform:scale(1);background-position:48% 45%}to{transform:scale(1.16);background-position:54% 60%}}
@media(prefers-reduced-motion:reduce){body::before{animation:none!important;transition:none}}

/* Account-specific cosmetic controls; semantic alerts retain their own colors. */
.cosmetic-settings{padding:24px;margin-top:28px}.button-hue-controls{border:0;border-top:1px solid #8ab5bd44;margin:22px 0 12px;padding:18px 0 0;min-width:0}.button-hue-controls legend{font-weight:650;padding-right:10px}.button-hue-controls label{display:grid;gap:10px;max-width:420px}.button-hue-controls input[type=range]{appearance:none;width:100%;height:16px;border-radius:20px;padding:0;background:linear-gradient(90deg,#e84343,#e8d843,#43dc62,#43dce8,#4a43e8,#e843ce,#e84343);box-shadow:none;cursor:pointer}.button-hue-controls input::-webkit-slider-thumb{appearance:none;width:25px;height:25px;border-radius:50%;background:#fff;border:3px solid #213b49;box-shadow:0 1px 5px #0008}.button-hue-controls input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #213b49}.button-hue-presets{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.button-hue-presets button::before{content:'';display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--swatch);margin-right:7px}.button-hue-presets [aria-pressed=true]{outline:2px solid var(--swatch);outline-offset:2px}.team-cosmetics{max-width:1120px;margin:auto;padding:0 24px 40px}
html[data-button-hue]{--material-accent:hsl(var(--personal-hue) 65% 70%)}
html[data-button-hue] :is(#view button,.secbtn,.topbar button,.friendly-mobile-menu):not(.stop):not(.danger){--material-control:color-mix(in srgb,hsl(var(--personal-hue) 65% 45%) 15%,var(--material-fill,#14303e66));border-color:color-mix(in srgb,hsl(var(--personal-hue) 65% 65%) 50%,transparent)}
html[data-button-hue] :is(#view button.on,.friendly-primary,#gate .welcome-primary,#cardGateModal .payment-primary,#panel button.on){background:radial-gradient(ellipse at var(--glass-x,28%) var(--glass-y,0%),#ffffff45,transparent 65%),linear-gradient(180deg,hsl(var(--personal-hue) 62% 28% / .95),hsl(var(--personal-hue) 62% 19% / .95))!important;border-color:hsl(var(--personal-hue) 60% 70% / .55)!important;color:#fff!important}
button.language-toggle,#view button.language-toggle,.topbar button.language-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;padding:7px 12px;font-size:12px}.language-toggle-track{display:inline-flex;align-items:center;width:36px;height:22px;background:#264953;border:1px solid #9bc7cc77;border-radius:99px;padding:2px;flex-shrink:0}.language-toggle-track i{width:16px;height:16px;border-radius:50%;background:#e5f8f4;transform:translateX(0);transition:transform .2s ease}.language-toggle[aria-checked=true] .language-toggle-track i{transform:translateX(14px)}.language-toggle[aria-checked=false]>span:first-child,.language-toggle[aria-checked=true]>span:last-child{font-weight:800;color:var(--material-accent,#a1f3df)}.language-toggle:focus-visible{outline:3px solid #8edcce;outline-offset:3px}@media(prefers-reduced-motion:reduce){.language-toggle-track i{transition:none}}

html[data-button-hue] :is(#teamApp,.team-cosmetics) button:not(.stop):not(.danger){background:linear-gradient(160deg,hsl(var(--personal-hue) 40% 24% / .8),hsl(var(--personal-hue) 40% 15% / .9));border-color:hsl(var(--personal-hue) 50% 65% / .55);color:#fff}
/* Keep the wider bilingual switch clear of the centered brand. */
@media(min-width:1101px){.welcome-nav-right{max-width:calc(50vw - 220px);justify-content:flex-end;flex-wrap:wrap}}
@media(min-width:651px) and (max-width:1100px){.welcome-nav{display:grid;justify-content:center;justify-items:center;gap:12px}.welcome-nav .welcome-brand{position:relative;left:auto;top:auto;transform:none;width:220px}.welcome-nav-right{max-width:100%;justify-content:center;flex-wrap:wrap}}
html:not(.dark)[data-button-hue]{--material-accent:hsl(var(--personal-hue) 65% 26%)}

/* Silent generated video is loaded only when chosen; still clouds remain behind it. */
html[data-background="cloud-video"] body{background:transparent!important}
html[data-background="cloud-video"] body::before{opacity:1;animation:none}
#cinematicCloudBackground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:url('/cloud-flight-cinematic-poster.jpg') center/cover no-repeat}
#cinematicCloudBackground video{display:block;width:100%;height:100%;object-fit:cover}
#cinematicCloudBackground::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#0a233333,#0e203540)}
/* Neutral materials keep contrast independent of the hue wheel. */
html[data-button-tone=black]{--neutral-top:#151820;--neutral-bottom:#030507;--neutral-ink:#fff;--neutral-edge:#79838e;--material-accent:#e8edf4}
html[data-button-tone=charcoal]{--neutral-top:#4a5059;--neutral-bottom:#252a31;--neutral-ink:#fff;--neutral-edge:#aeb8c4;--material-accent:#e0e7ef}
html[data-button-tone=white]{--neutral-top:#fff;--neutral-bottom:#dce4ee;--neutral-ink:#162332;--neutral-edge:#aebdcb;--material-accent:#60788b}
html[data-button-tone] :is(#view button,.secbtn,.navlink,.topbar button,#teamApp button,.team-cosmetics button,#panel button,#gate .welcome-primary):not(.danger):not(.stop){background:radial-gradient(ellipse at 25% 0%,#ffffff35,transparent 60%),linear-gradient(170deg,var(--neutral-top),var(--neutral-bottom))!important;color:var(--neutral-ink)!important;border-color:var(--neutral-edge)!important;text-shadow:none!important}

/* Personal reading preferences. Geometry, data, consent and billing stay unchanged. */
html[data-ui-text-size]{--reader-text:16px;--reader-small:14px;--reader-title:32px;--reader-subtitle:23px;--reader-space:22px;--reader-radius:16px;--reader-panel:#f7faf9f0;--reader-ink:#172d37;--reader-muted:#425d68;--reader-field:#ffffff;--reader-border:#8ba5b2}
html.dark[data-ui-text-size]{--reader-panel:#102833f0;--reader-ink:#f2f7fb;--reader-muted:#bed2dd;--reader-field:#0b202b;--reader-border:#668a9c}
html[data-ui-text-size=large]{--reader-text:18px;--reader-small:16px;--reader-title:36px;--reader-subtitle:26px}
html[data-ui-text-size=largest]{--reader-text:20px;--reader-small:18px;--reader-title:40px;--reader-subtitle:29px}
html[data-ui-density=compact]{--reader-space:15px}
html[data-ui-corners=square]{--reader-radius:7px}
html[data-ui-surfaces=glass]{--reader-panel:#f7faf9c4}html.dark[data-ui-surfaces=glass]{--reader-panel:#102833c4}
html[data-ui-surfaces=solid]{--reader-panel:#f7faf9}html.dark[data-ui-surfaces=solid]{--reader-panel:#102833}
html[data-ui-contrast=strong]{--reader-ink:#071a25;--reader-muted:#223e4b;--reader-panel:#fff;--reader-border:#527082;--ink:#071a25;--muted:#223e4b;--faint:#385462}
html.dark[data-ui-contrast=strong]{--reader-ink:#fff;--reader-muted:#edf5fc;--reader-panel:#071b29;--reader-border:#91b4c7;--ink:#fff;--muted:#edf5fc;--faint:#c2d5e2}
html[data-ui-text-size] :is(#view,#panel,#teamApp,.team-cosmetics){font-size:var(--reader-text);line-height:1.65;--ink:var(--reader-ink);--muted:var(--reader-muted);--faint:var(--reader-muted)}
html[data-ui-text-size] :is(#view,#panel,#teamApp,.team-cosmetics) :is(p,label,legend,input:not([type=checkbox]):not([type=radio]),textarea,select,td,th){font-size:var(--reader-text)!important;line-height:1.6}
html[data-ui-text-size] :is(#view,#panel,#teamApp,.team-cosmetics) button{font-size:var(--reader-small);min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
html[data-ui-text-size] :is(#view,#teamApp,.team-cosmetics) h1{font-size:var(--reader-title)!important;line-height:1.2;overflow-wrap:anywhere}
html[data-ui-text-size] :is(#view,#teamApp,.team-cosmetics) h2{font-size:var(--reader-subtitle)!important;line-height:1.3;overflow-wrap:anywhere}
html[data-ui-text-size] :is(#view,#panel,#teamApp,.team-cosmetics) :is(small,.meta,.eyebrow,.label,.help,.activation-timing-detail,.activation-estimate){font-size:var(--reader-small)!important;line-height:1.6}
html[data-ui-surfaces] :is(#view .card,#view .tile,#view .comm-step,#view .activation-card,#view .activation-summary,#view .friendly-resource,#view .friendly-editor,.workspace-guide,#panel,#rail,.topbar,#teamApp .card,.team-cosmetics .card){background:var(--reader-panel)!important;color:var(--reader-ink);border-color:var(--reader-border);border-radius:var(--reader-radius)}
html[data-ui-text-size] :is(#view .card,#view .tile,#view .activation-card,#view .activation-summary,#teamApp .card,.cosmetic-settings){padding:var(--reader-space)}
html[data-ui-text-size] :is(#view,#panel,#teamApp,.team-cosmetics) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%;box-sizing:border-box;background:var(--reader-field);color:var(--reader-ink);border-color:var(--reader-border);min-height:44px}
html[data-ui-corners] :is(#view,#panel,#teamApp,.team-cosmetics) button{border-radius:var(--reader-radius)}
html[data-ui-text-size] :is(button,input,select,textarea,a):focus-visible{outline:3px solid #e7bd57;outline-offset:3px}
html[data-ui-text-size] #rail .nav-copy strong,html[data-ui-text-size] #rail .navlink .nl{font-size:var(--reader-text);line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
html[data-ui-text-size] #rail .nav-copy small{font-size:13px;line-height:1.5}html[data-ui-menu-hints=hide] #rail .nav-copy small{display:none}
html[data-ui-density=compact] #rail .secbtn{min-height:56px;padding-block:8px}html[data-ui-density=compact] #view :is(td,th){padding-block:8px}
html[data-ui-shade=dim] :is(#cinematicCloudBackground,#personalBackground,#robotBackground){filter:brightness(.62)}
html[data-ui-shade=dim] body::before{filter:brightness(.62)}html[data-ui-shade=bright] :is(#cinematicCloudBackground,#personalBackground,#robotBackground){filter:brightness(1.15)}
html[data-ui-motion=reduced],html[data-ui-motion=reduced] *{scroll-behavior:auto!important}html[data-ui-motion=reduced] *,html[data-ui-motion=reduced] *::before,html[data-ui-motion=reduced] *::after{animation:none!important;transition:none!important}
.reading-settings{border-top:1px solid var(--reader-border,#607c89);margin-top:24px;padding-top:18px}.reading-settings h3{margin-bottom:8px}.reading-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.reading-controls label{display:grid;gap:8px;align-content:start;font-weight:600}.reading-controls select{width:100%;padding:10px;font-weight:400}.reading-presets{display:flex;gap:10px;flex-wrap:wrap}.reading-presets button{padding:10px 16px}.reading-help{color:var(--reader-muted,#bdd4df)}
@media(max-width:600px){.reading-controls{grid-template-columns:1fr}html[data-ui-text-size] :is(#view,#teamApp) h1{font-size:min(var(--reader-title),34px)!important}html[data-ui-text-size] #rail .navlink{min-height:44px}}
html[data-ui-text-size] #rail .nav-copy small{font-size:var(--reader-small)}
html[data-ui-text-size] :is(#view,#teamApp) h3{font-size:calc(var(--reader-text) * 1.15);line-height:1.4}
html[data-ui-text-size] #gate .welcome-card :is(label,input,select,textarea){font-size:var(--reader-text);line-height:1.6}html[data-ui-text-size] #gate .welcome-card :is(input:not([type=checkbox]):not([type=radio]),select,button){min-height:44px}

/* Window colors use independent surfaces and contrast, never button fills. */
.window-color-controls{border:0;border-top:1px solid var(--reader-border,#8ab5bd44);margin:22px 0 12px;padding:18px 0 0;min-width:0}.window-color-controls legend{font-weight:650}.window-color-controls label{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.window-color-controls input[type=color]{width:72px;min-height:48px;padding:4px;cursor:pointer}
html[data-window-color] :is(#view .card,#view .tile,#view .comm-step,#view .activation-card,#view .activation-summary,#view .friendly-resource,#view .friendly-editor,.workspace-guide,#panel,#rail,.topbar,#teamApp .card,.team-cosmetics .card,.cosmetic-settings,.background-options,[role=dialog]>.tile,#approvalsModal>.tile,[data-workspace-notification-panel]){background:var(--reader-panel)!important;color:var(--reader-ink)!important;border-color:var(--reader-border)}
html[data-window-color] :is(#rail,.topbar,.workspace-guide,#panel,[role=dialog]>.tile,#approvalsModal>.tile,[data-workspace-notification-panel]){--fg:var(--reader-ink);--ink:var(--reader-ink);--muted:var(--reader-muted);--faint:var(--reader-muted)}