/* Keep the approved menu geometry. Extend only the frame below it. */
html body #mainApp #home .mr-tools{height:auto!important;grid-template-rows:repeat(5,auto)!important}
html body #mainApp #home .mr-tools>.mr-tool{height:auto!important;aspect-ratio:1.87!important}
#moderaThemePicker{box-sizing:border-box;min-height:92px;height:var(--modera-theme-footer-height,100px);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px 10px 8px;color:var(--mr-ink);text-align:center}
.modera-theme-caption{display:flex;justify-content:center;gap:8px;align-items:center;font:650 11px/1.4 system-ui;opacity:.85}
#moderaThemeStatus{font-weight:800}
.modera-theme-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:410px;width:100%;margin:0 auto}
#moderaThemePicker button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:54px;padding:5px 2px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
#moderaThemePicker button>span{width:30px;height:30px;border-radius:50%;background:var(--swatch);border:1px solid #ffffffb0;box-shadow:inset 0 2px 3px #ffffff45,inset 0 -2px 3px #0004,0 2px 4px #0003;position:relative}
#moderaThemePicker button[aria-pressed=true]{border-color:currentColor;background:#ffffff16}
#moderaThemePicker button[aria-pressed=true]>span:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 17px system-ui;text-shadow:0 1px 3px #000}
#moderaThemePicker button[data-color-theme=cream]>span:after{color:#43250e;text-shadow:none}
#moderaThemePicker small{font:700 10px/1.25 system-ui;white-space:nowrap}
#moderaThemePicker button:focus-visible{outline:3px solid currentColor;outline-offset:2px}
html[data-modera-color=navy]{--theme-frame:#103f70;--theme-tile:#23659c;--theme-ink:#fff7e8;--theme-line:#829ab0;--theme-paper:#f2f5f8;--theme-accent:#185f99;--theme-dark:#0a2d55}
html[data-modera-color=green]{--theme-frame:#125b42;--theme-tile:#23805b;--theme-ink:#fff7e8;--theme-line:#85a38f;--theme-paper:#f2f6f1;--theme-accent:#0c724d;--theme-dark:#083d2a}
html[data-modera-color=oak]{--theme-frame:#bd8241;--theme-tile:#e1ad68;--theme-ink:#2c190a;--theme-line:#805729;--theme-paper:#faf3e8;--theme-accent:#855525;--theme-dark:#5b3516}
html[data-modera-color=anthracite]{--theme-frame:#333b45;--theme-tile:#5b6876;--theme-ink:#fff8eb;--theme-line:#92979d;--theme-paper:#f2f3f4;--theme-accent:#454c54;--theme-dark:#252b31}
html[data-modera-color]:not([data-modera-color=cream]){--mr-ink:var(--theme-ink);--mr-base:var(--theme-frame);--v9-accent:var(--theme-accent);--v9-paper:var(--theme-paper);--v9-tile:var(--theme-paper);--v9-line:var(--theme-line);--navy:var(--theme-dark);--navy2:var(--theme-accent)}
html[data-modera-color]:not([data-modera-color=cream]) body{background:var(--modera-browser-color)!important}
html[data-modera-color]:not([data-modera-color=cream]) body #mainApp{background-color:var(--theme-frame)!important;background-blend-mode:normal,soft-light!important;border-color:var(--theme-line)!important;box-shadow:inset 0 0 0 2px #ffffff70,inset 0 0 0 5px var(--theme-line),0 2px 3px #0003!important}
html[data-modera-color]:not([data-modera-color=cream]) body #mainApp>header.top{background-color:var(--theme-frame)!important;background-blend-mode:normal,soft-light!important}
html[data-modera-color]:not([data-modera-color=cream]) body #mainApp>header.top .brand,html[data-modera-color]:not([data-modera-color=cream]) body #mainApp>header.top .sub{color:var(--theme-ink)!important;text-shadow:none!important}
html[data-modera-color]:not([data-modera-color=cream]) body #mainApp #home .mr-tool,html[data-modera-color]:not([data-modera-color=cream]) body #mainApp>header.top .moderaHeaderIcon{background-color:var(--theme-tile)!important;background-blend-mode:normal,soft-light!important;border-color:var(--theme-line)!important;color:var(--theme-ink)!important;box-shadow:inset 1px 2px 1px #ffffff70,inset -1px -2px 3px #0004,0 2px 1px var(--theme-dark),0 4px 5px #0005!important}
html[data-modera-color]:not([data-modera-color=cream]) #home .mr-tool-label,html[data-modera-color]:not([data-modera-color=cream]) #home .mr-tool-sub{color:var(--theme-ink)!important;text-shadow:none!important}
html[data-modera-color]:not([data-modera-color=cream]) #home .mr-tool-icon:after{background:var(--theme-ink)!important;opacity:.5!important}
html[data-modera-color=navy] #home .mr-approved-icon,html[data-modera-color=green] #home .mr-approved-icon,html[data-modera-color=anthracite] #home .mr-approved-icon{filter:brightness(0) invert(1)!important;opacity:.93}
html[data-modera-color]:not([data-modera-color=cream]) body #mainApp>.screen.active:not(#home){background:var(--theme-paper)!important}
html[data-modera-color]:not([data-modera-color=cream]) #mainApp .screen:not(#home) .btn.primary,html[data-modera-color]:not([data-modera-color=cream]) #mainApp .screen:not(#home) button.btn.primary,html[data-modera-color]:not([data-modera-color=cream]) #designWorkspace .dw-primary,html[data-modera-color]:not([data-modera-color=cream]) #designWorkspace .dw-green{background:linear-gradient(155deg,var(--theme-accent),var(--theme-dark))!important;color:#fff!important;border-color:var(--theme-line)!important}
html[data-modera-color]:not([data-modera-color=cream]) #community .communityHero{background:linear-gradient(125deg,var(--theme-dark),var(--theme-accent))!important}
@media(min-width:701px){#moderaThemePicker{height:100px;justify-content:center}}

@media(max-height:740px) and (max-width:700px){#moderaThemePicker{min-height:80px;padding:5px 4px;gap:3px}.modera-theme-caption{font-size:10px}#moderaThemePicker button{min-height:50px;padding:2px}#moderaThemePicker button>span{width:27px;height:27px}}
html[data-modera-color]:not([data-modera-color=cream]) #mainApp .moduleQuickNav a,
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #community .communityNav button,
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #community .feedFilters button.active,
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #designer3d .dw-mode-tabs button[aria-pressed=true],
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #designWorkspace .dw-steps button[aria-pressed=true],
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #designWorkspace .dw-tabs button[aria-pressed=true],
html[data-modera-color]:not([data-modera-color=cream]) #mainApp #marketplace .marketTabs button.active{background:linear-gradient(155deg,var(--theme-accent),var(--theme-dark))!important;color:#fff!important;border-color:var(--theme-line)!important}

/* Polished surfaces: a broad upper reflection, a crisp bevel and a deep lower rim. */
html[data-modera-color] body #mainApp #home .mr-tool:before{background:linear-gradient(135deg,#ffffff55 0%,#ffffff18 32%,transparent 63%,#00000012 100%)!important;border-top-color:#ffffffbb!important;border-bottom-color:#ffffff35!important}
html[data-modera-color] body #mainApp>header.top .moderaHeaderIcon{background-image:linear-gradient(150deg,#ffffff77,transparent 44%,#00000018),var(--mr-wood-img)!important;background-blend-mode:normal,soft-light!important;background-color:var(--theme-tile,#eedaba)!important;box-shadow:inset 1px 2px 1px #ffffffc0,inset -1px -2px 3px #0005,0 2px 1px #0004,0 4px 7px #0004!important}
html[data-modera-color] body #mainApp>header.top{padding-bottom:9px!important}
html[data-modera-color] body #mainApp>header.top #moderaGlobalAdHost{padding-bottom:0!important}

/* Theme-native metal monogram: crisp vectors and fixed high-contrast relief. */
html[data-modera-color=navy]{--logo-plate-light:#487ba4;--logo-plate:#164976;--logo-plate-dark:#092c4d;--logo-metal-light:#fffdfa;--logo-metal:#e2eaf0;--logo-metal-dark:#9daeba;--logo-edge:#c5d6e3}
html[data-modera-color=green]{--logo-plate-light:#469879;--logo-plate:#155c43;--logo-plate-dark:#073d2a;--logo-metal-light:#fffdf4;--logo-metal:#e4ecdf;--logo-metal-dark:#a0b6a8;--logo-edge:#c3dccd}
html[data-modera-color=oak]{--logo-plate-light:#f2d2a0;--logo-plate:#c99554;--logo-plate-dark:#8b5427;--logo-metal-light:#fff4dd;--logo-metal:#71451f;--logo-metal-dark:#3e230e;--logo-edge:#f9e5c0}
html[data-modera-color=anthracite]{--logo-plate-light:#7d8a96;--logo-plate:#424c57;--logo-plate-dark:#202832;--logo-metal-light:#ffffff;--logo-metal:#e0e6ec;--logo-metal-dark:#9aa8b5;--logo-edge:#c4cdd5}
html[data-modera-color] body #mainApp>header.top .mr-logo-mark{filter:drop-shadow(0 2px 2px #0004)!important;overflow:visible}

/* Safari canvas, safe-area and browser chrome follow the same selection atomically. */
html[data-modera-color]{background:var(--modera-browser-color,#e9d5b3)!important}


/* The entire Safari canvas belongs to the selected finish, including overscroll. */
html[data-modera-color] body{background:var(--modera-browser-color,#e9d5b3)!important}
.cnc-photo-detail{display:block;width:100%;height:min(58vh,640px);object-fit:contain;background:#f5f2eb;border-radius:14px}
[data-cnc-view][aria-pressed=true]{background:var(--navy,#123c32);color:white}


/* Keep Safari's document in normal flow; never fix or clip the page body. */
html[data-modera-home=true] body{position:static!important}

/* Preserve the selected MODERA finish when Android requests automatic darkening. */
:root,html,body,#mainApp,#authGate{color-scheme:only light!important}
#authMsg:empty{display:none}
#authMsg:not(:empty){padding:12px 14px;border-radius:10px;font-size:15px;line-height:1.5;font-weight:650}

/* Lock only the fitted home; forms and design tools retain their own scrolling. */
html[data-modera-home-locked],html[data-modera-home-locked] body{height:var(--modera-home-height)!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important}
html[data-modera-home-locked] #mainApp{touch-action:none!important}

/* One reserved banner rectangle, before and after campaign images arrive. */
html[data-modera-color] body #mainApp>header.top #moderaGlobalAdHost{position:relative!important;width:100%!important;aspect-ratio:928/298!important;height:auto!important}
html[data-modera-color] body #mainApp>header.top #moderaGlobalAdHost>#adSlider:not([hidden]),html[data-modera-color] body #mainApp>header.top #moderaGlobalAdHost>#moderaAdStandby{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important}

/* viewport-fit=cover includes the clock/notch area. Reserve it before fitting,
   and give Safari an unfiltered, viewport-attached surface to tint from. */
#moderaViewportTop{display:none}
@media(max-width:700px){
 html[data-modera-color] body{padding-top:env(safe-area-inset-top,0px)!important;padding-right:env(safe-area-inset-right,0px)!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;padding-left:env(safe-area-inset-left,0px)!important;box-sizing:border-box!important}
 html[data-modera-color] #moderaViewportTop{display:block;position:fixed;z-index:9000;top:0;left:0;right:0;height:max(1px,env(safe-area-inset-top,0px));pointer-events:none;background-color:var(--modera-browser-color,#e9d5b3);opacity:1;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}