/* MODERA approved navy + white, applying on first paint. */
:root{--bg:#f7f9fc!important;--surface:#fff!important;--ink:#10233c!important;--navy:#0b2948!important;--navy2:#153c64!important}
html,body,#mainApp,.app{background:#f8fafc!important;color:#10233c}
#mainApp .top{background:linear-gradient(130deg,#08192c,#123252 80%,#0a2037)!important;color:#fff!important}
#mainApp #home .grid>a.tile,#mainApp #home .grid>a.tile:nth-child(n),#mainApp #home .grid>a.tile.modera3d-tile,#mainApp #home .grid>a.tile.community-wide-tile{
 color:#fff!important;background:linear-gradient(145deg,#193d63 0%,#0e2c4d 50%,#071d34 100%)!important;
 border:1px solid rgba(144,176,210,.42)!important;border-radius:15px!important;
 box-shadow:0 8px 19px rgba(13,41,70,.16),inset 0 1px 0 rgba(255,255,255,.17)!important;
 text-shadow:0 1px 1px rgba(0,0,0,.28)!important;font-weight:850!important;
}
#mainApp #home .grid>a.tile:before{background:linear-gradient(90deg,transparent,rgba(216,234,255,.38),transparent)!important}
#mainApp #home .grid>a.tile:focus-visible,.btn:focus-visible,.back:focus-visible,.studioItem button:focus-visible{outline:3px solid #80b1ec!important;outline-offset:2px}
#mainApp #home .grid>a.tile small,#mainApp #home .grid>a.tile.community-wide-tile span,#mainApp #home .grid>a.tile.community-wide-tile small{color:#fff!important}
#mainApp #home .grid>a.tile:hover{filter:brightness(1.08)}
#mainApp #home .grid>a.tile:active{transform:translateY(1px)!important}
#mainApp button.btn,#mainApp .actions .btn,#mainApp .back,#mainApp .moduleQuickNav a,#moduleStudio .studioItemActions button,#mainApp .cutChoice,#mainApp .productionToolbar button,
#mainApp button.primary,#mainApp button.gold,#mainApp button.secondary,#mainApp .btn.gold,#mainApp .btn.secondary{
 background:linear-gradient(145deg,#14395d,#092340)!important;color:#fff!important;border:1px solid #2d547d!important;
 box-shadow:0 3px 8px rgba(18,44,70,.14)!important;text-shadow:none!important
}
#mainApp button.btn:disabled{opacity:.45!important;cursor:not-allowed}
#mainApp button.btn:hover,#mainApp .moduleQuickNav a:hover{filter:brightness(1.13)}
#mainApp .card,#mainApp .visualizerCard,#mainApp .cutAdvanced{background:#fff;border-color:#dce5f0}
#mainApp input,#mainApp select,#mainApp textarea{color:#142941;background:#fff}
#mainApp .cutChoice.selected{outline:2px solid #5481af;outline-offset:2px}
#mainApp .studioHomeTile{font-size:clamp(10px,2.3vw,14px)!important}
#mainApp #home .grid>a.tile.community-wide-tile{grid-column:1/-1!important}
#mainApp #home.screen.active{height:auto!important;min-height:0!important;overflow:visible!important;display:block!important}
#mainApp #home.screen.active>.grid{height:auto!important;grid-template-rows:none!important;grid-auto-rows:minmax(84px,auto)!important;overflow:visible!important}
#mainApp #home.screen.active>.grid>a.tile{min-height:84px!important;min-width:0!important;}
#mainApp .badge{background:#eaf2fa;color:#1f4670}
@media(max-width:699px){#mainApp #home.screen.active>.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}#mainApp #home.screen.active>.grid>a.tile{min-height:84px!important;font-size:clamp(10px,2.7vw,12px)!important}}
@media(min-width:700px){#mainApp #home.screen.active>.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}#mainApp #home.screen.active>.grid>a.tile{min-height:108px!important}}

/* Override legacy late-loaded color sheets without a delayed palette flash. */
#mainApp #community .premiumCommunityNav button,#mainApp #community .premiumCommunityNav button.active,
#mainApp #community .socialTabs button,#mainApp #marketplace button.btn,
#mainApp .profile,#mainApp .right button{
 background:linear-gradient(145deg,#14395d,#092340)!important;color:#fff!important;
 border-color:#315778!important
}
#mainApp #home.screen.active>.grid>a.tile.community-wide-tile{grid-column:1/-1!important}