/* COE: authenticated workspace and public login are mutually exclusive */
.app:not(.logged-in) #coe-home,
.app:not(.logged-in) #members-panel,
.app:not(.logged-in) #coe-view-placeholder,
.app:not(.logged-in) #coe-demo-panel,
.app:not(.logged-in) .coe-bottom-nav,
.app:not(.logged-in) #game-id-card {display:none!important;visibility:hidden!important}
.app.logged-in .landing,
.app.logged-in .landing-footer {display:none!important}
.app.logged-in,.app.logged-in #main-content{background:#f7f8f7!important;background-image:none!important}
.app.logged-in #main-content{min-height:calc(100dvh - 82px)!important}
.app.logged-in #coe-home{background:transparent!important}
.app.logged-in .coe-home-banner{background:linear-gradient(90deg,#10263bdc 0%,#112d47b5 55%,#10263b68 100%),url('/assets/coe-city.svg') center 52%/cover no-repeat!important}
.app.logged-in .coe-module-grid{background:transparent!important}
.app.logged-in .coe-kpis{background:transparent!important}
.app:not(.logged-in){background:#12263b!important}
.app:not(.logged-in) #main-content{
 min-height:100dvh!important;
 background:radial-gradient(ellipse at 84% 18%,#ffc070b0 0%,transparent 37%),linear-gradient(135deg,#0d2034 0%,#263b4a 38%,#b7774d 70%,#263444 100%)!important;
 background-attachment:fixed!important;
}
.app:not(.logged-in) .landing{
 width:min(1180px,100%)!important;
 max-width:1180px!important;
 min-height:100dvh!important;
 margin:0 auto!important;
 padding:20px clamp(20px,4vw,56px) 24px!important;
 display:grid!important;
 grid-template-columns:minmax(0,.85fr) minmax(460px,1.15fr)!important;
 grid-template-rows:auto 1fr!important;
 grid-template-areas:"mark mark" "hero access"!important;
 gap:12px clamp(28px,4vw,60px)!important;
 align-items:center!important;
 align-content:center!important;
 position:relative;
}
.app:not(.logged-in) .coe-login-mark{
 grid-area:mark!important;
 margin:0 auto!important;
 align-self:center!important;
 gap:3px!important;
}
.app:not(.logged-in) .coe-login-mark img{height:74px!important;width:74px!important}
.app:not(.logged-in) .coe-login-mark strong{font-size:44px!important}
.app:not(.logged-in) .coe-login-mark small{font-size:10px!important;letter-spacing:.13em!important}
.app:not(.logged-in) .landing .hero{
 grid-area:hero!important;
 align-self:center!important;
 min-height:0!important;
 padding:0!important;
 margin:0!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:center!important;
}
.app:not(.logged-in) .hero h1{font-size:clamp(34px,3.6vw,55px)!important;max-width:390px!important}
.app:not(.logged-in) .hero h1:before{margin-bottom:18px!important}
.app:not(.logged-in) .coe-hero-values{font-size:clamp(16px,1.7vw,22px)!important;margin-top:22px!important}
.app:not(.logged-in) .access-card{
 grid-area:access!important;
 align-self:center!important;
 width:100%!important;
 max-width:630px!important;
 margin:0!important;
 padding:24px clamp(20px,3vw,34px) 18px!important;
 border-radius:26px!important;
}
.app:not(.logged-in) #access-title{font-size:clamp(24px,2.7vw,34px)!important}
.app:not(.logged-in) #login-card>.muted{font-size:14px!important;margin:0 auto 14px!important;line-height:1.4!important}
.app:not(.logged-in) #google{min-height:66px!important;font-size:clamp(16px,2vw,22px)!important}
.app:not(.logged-in) #login-card .access-divider{margin:20px 0!important}
.app:not(.logged-in) .coe-prereg-entry{min-height:83px!important;padding:12px 15px!important}
.app:not(.logged-in) .coe-prereg-entry .coe-prereg-icon{width:48px!important;height:48px!important;flex-basis:48px!important;font-size:24px!important}
.app:not(.logged-in) .coe-prereg-entry strong{font-size:17px!important}
.app:not(.logged-in) .coe-prereg-entry small{font-size:12px!important}
.app:not(.logged-in) .coe-access-perks{margin:17px 0!important}
.app:not(.logged-in) .coe-access-perks span{width:46px!important;height:46px!important;font-size:21px!important;margin-bottom:3px!important}
.app:not(.logged-in) .coe-access-perks b{font-size:12px!important}
.app:not(.logged-in) .coe-access-perks small{font-size:10px!important}
.app:not(.logged-in) .coe-security-note{padding:11px 12px!important;font-size:11px!important;line-height:1.35!important}
.app:not(.logged-in) .coe-login-language{top:12px!important;right:clamp(18px,4vw,56px)!important}
.app:not(.logged-in) #status{font-size:12px!important}
.app:not(.logged-in) #status:not(:empty){margin:5px 0!important}
.app:not(.logged-in) .landing-footer{display:none!important}
@media(max-width:820px){
 .app:not(.logged-in) .landing{
  min-height:100dvh!important;
  max-width:650px!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  grid-template-areas:"mark" "hero" "access"!important;
  gap:16px!important;
  padding:48px 15px 25px!important;
  align-content:start!important;
 }
 .app:not(.logged-in) .coe-login-mark{margin:0 auto!important}
 .app:not(.logged-in) .landing .hero{min-height:215px!important;padding:5px 14px!important;align-self:stretch!important}
 .app:not(.logged-in) .hero h1{font-size:clamp(31px,7vw,44px)!important;max-width:280px!important}
 .app:not(.logged-in) .coe-hero-values{font-size:16px!important;margin-top:15px!important}
 .app:not(.logged-in) .access-card{padding:23px 16px 16px!important;border-radius:23px!important}
 .app:not(.logged-in) .coe-login-language{top:9px!important;right:12px!important}
}
@media(max-width:450px){
 .app:not(.logged-in) .landing{padding-top:45px!important;gap:9px!important}
 .app:not(.logged-in) .coe-login-mark img{width:67px!important;height:67px!important}
 .app:not(.logged-in) .coe-login-mark strong{font-size:40px!important}
 .app:not(.logged-in) .landing .hero{min-height:180px!important}
 .app:not(.logged-in) .hero h1{font-size:32px!important}
 .app:not(.logged-in) .coe-hero-values{font-size:14px!important}
 .app:not(.logged-in) .access-card{padding:18px 13px!important}
 .app:not(.logged-in) #google{min-height:60px!important}
 .app:not(.logged-in) .coe-access-perks div{font-size:10px!important}
 .app:not(.logged-in) .coe-access-perks b{font-size:10px!important}
}
@media(min-width:821px) and (max-height:720px){
 .app:not(.logged-in) .landing{padding-top:12px!important;padding-bottom:12px!important}
 .app:not(.logged-in) .coe-login-mark img{width:56px!important;height:56px!important}
 .app:not(.logged-in) .coe-login-mark strong{font-size:36px!important}
 .app:not(.logged-in) .access-card{padding-top:15px!important;padding-bottom:13px!important}
 .app:not(.logged-in) .coe-access-perks{margin:10px 0!important}
}