/* COE login: faithful functional layout based on approved mobile mockup. Original logo asset is untouched. */
.app:not(.logged-in){width:100%;max-width:none!important;background:#172438!important;box-shadow:none!important}
.app:not(.logged-in) #main-content{background:linear-gradient(180deg,rgba(9,24,42,.05) 0%,rgba(11,23,35,.02) 48%,rgba(15,23,33,.75) 77%,#eee2d2 100%),url('/assets/coe-city.svg') center 17%/cover no-repeat!important;min-height:100dvh}
.app:not(.logged-in) .landing{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0!important;max-width:948px!important;margin:0 auto!important;padding:26px 24px 44px!important}
.app:not(.logged-in) .coe-login-mark{display:flex!important;flex-direction:column!important;align-items:center;gap:5px!important;margin:18px auto 38px!important;text-align:center;color:white!important;z-index:1}
.app:not(.logged-in) .coe-login-mark img{height:120px!important;width:120px!important;object-fit:contain!important;filter:drop-shadow(0 8px 17px #0b1b2899)}
.app:not(.logged-in) .coe-login-mark strong{font-size:66px!important;line-height:.95!important;letter-spacing:.005em!important;color:#f5bd58!important;font-weight:950!important;text-shadow:0 2px 14px #0a182588}
.app:not(.logged-in) .coe-login-mark small{font-size:14px!important;line-height:1.35!important;letter-spacing:.18em!important;max-width:180px;margin:5px auto 0!important;color:white!important}
.app:not(.logged-in) .landing .hero{align-self:stretch!important;min-height:340px!important;padding:0!important;justify-content:center!important;align-items:flex-start!important;z-index:1}
.app:not(.logged-in) .hero h1{font-size:clamp(40px,5vw,58px)!important;font-weight:900!important;max-width:370px!important;letter-spacing:-.05em!important;line-height:1.05!important;text-shadow:0 3px 17px #09182dbb!important;margin:0!important}
.app:not(.logged-in) .hero h1 em{color:white!important}
.app:not(.logged-in) .hero h1:before{content:"";display:block;background:#efb747;width:50px;height:3px;margin:0 0 25px}
.app:not(.logged-in) .hero .lead{display:none!important}
.coe-hero-values{color:#fff;font-size:23px;line-height:1.48;text-shadow:0 2px 10px #081a2de0;margin-top:28px;letter-spacing:.005em}
.coe-hero-values:before{content:"";display:block;background:#efb747;width:45px;height:3px;margin:0 0 20px}
.app:not(.logged-in) .access-card{position:relative!important;z-index:2;max-width:840px!important;width:100%!important;border-radius:34px!important;background:linear-gradient(180deg,#fffefc 0%,#fdfbf7 100%)!important;box-shadow:0 20px 55px #0c192b45!important;padding:34px clamp(24px,5vw,58px) 24px!important;margin:0!important;text-align:center!important}
.app:not(.logged-in) #access-title{font-size:clamp(26px,4.2vw,38px)!important;font-weight:850!important;line-height:1.15!important;letter-spacing:-.04em!important;color:#101e38!important;margin:0 0 13px!important}
.app:not(.logged-in) #login-card>.muted{color:#637287!important;font-size:clamp(14px,2.4vw,18px)!important;line-height:1.55!important;margin:0 auto 25px!important;max-width:550px!important}
.app:not(.logged-in) #google{display:flex!important;align-items:center;gap:18px!important;text-align:center!important;justify-content:space-between!important;min-height:82px!important;padding:10px 22px!important;border-radius:17px!important;background:linear-gradient(105deg,#eab64e,#ffd27b)!important;color:#0c182d!important;font-size:clamp(18px,3vw,27px)!important;font-weight:850!important;box-shadow:0 8px 20px #bf8a2425!important}
.coe-google-icon{width:58px;height:58px;display:grid;place-items:center;background:white;border-radius:50%;flex:0 0 58px}
.coe-google-icon svg{width:36px;height:36px}.coe-google-label{flex:1}.coe-google-arrow{font-size:34px;line-height:1;font-weight:400}
.app:not(.logged-in) #login-card .access-divider{position:relative!important;height:1px!important;background:#dadde1!important;margin:30px 0 29px!important}
.app:not(.logged-in) #login-card .access-divider:after{content:"ou";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffdfa;color:#7a8593;padding:0 20px;font-size:17px}
.app:not(.logged-in) .coe-prereg-entry{min-height:104px!important;border-radius:17px!important;padding:18px 22px!important;border:1px solid #dce0e5!important;box-shadow:0 5px 17px #14243a0a!important;gap:17px!important}
.app:not(.logged-in) .coe-prereg-entry .coe-prereg-icon{width:64px;height:64px;flex:0 0 64px;display:grid;place-items:center;border-radius:50%!important;background:#fff1df!important;font-size:32px!important;color:#c48918}
.app:not(.logged-in) .coe-prereg-entry strong{font-size:clamp(17px,2.7vw,22px)!important;color:#111f39!important}
.app:not(.logged-in) .coe-prereg-entry small{font-size:clamp(12px,2vw,17px)!important;line-height:1.4!important}
.app:not(.logged-in) .coe-prereg-entry .coe-arrow{font-size:34px!important;color:#15263b!important}
.app:not(.logged-in) .coe-access-perks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;margin:32px 0 28px!important}
.app:not(.logged-in) .coe-access-perks div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:13px!important;line-height:1.35;color:#738095}
.app:not(.logged-in) .coe-access-perks span{display:grid;place-items:center;background:#fff1dc;width:62px;height:62px;border-radius:50%;font-size:26px!important;color:#c58a1d;margin-bottom:8px!important}
.app:not(.logged-in) .coe-access-perks b{font-size:15px!important;color:#111e33!important;margin:0!important}
.coe-security-note{display:flex;align-items:center;justify-content:center;gap:17px;background:#f7f3ec;border-radius:17px;padding:18px 24px;margin:0 -6px;color:#526174;font-size:13px;line-height:1.5;text-align:left}
.coe-security-note svg{width:24px;height:24px;flex:0 0 24px}
.app:not(.logged-in) #gate-note{display:none!important}
.app:not(.logged-in) #status{background:transparent!important;border:0!important;padding:0!important;margin:10px 0!important;min-height:0!important}
.app:not(.logged-in) #status:empty{display:none}
.app:not(.logged-in) .landing-footer{display:none!important}
.coe-login-language{position:absolute;top:14px;right:24px;z-index:4;background:#fffef4ec;border:1px solid #e7c993;border-radius:10px;padding:6px 8px;box-shadow:0 4px 12px #13273a2b}
.coe-login-language select{border:0;background:transparent;font:inherit;color:#19314a;font-size:12px;font-weight:750;cursor:pointer}
@media(min-width:960px){
.app:not(.logged-in) #main-content{background-size:cover!important;background-position:center 22%!important}
.app:not(.logged-in) .landing{padding-top:34px!important}
.app:not(.logged-in) .landing .hero{min-height:345px!important}
}
@media(max-width:680px){
.app:not(.logged-in) .landing{padding:12px 13px 20px!important}
.app:not(.logged-in) .coe-login-mark{margin:12px auto 18px!important}
.app:not(.logged-in) .coe-login-mark img{width:88px!important;height:88px!important}
.app:not(.logged-in) .coe-login-mark strong{font-size:49px!important}
.app:not(.logged-in) .coe-login-mark small{font-size:10px!important}
.app:not(.logged-in) .landing .hero{min-height:255px!important;padding:0 10px!important;justify-content:center!important}
.app:not(.logged-in) .hero h1{font-size:clamp(29px,8.4vw,44px)!important;max-width:240px!important}
.app:not(.logged-in) .hero h1:before{margin-bottom:14px!important;width:36px}
.coe-hero-values{font-size:16px!important;margin-top:15px!important}
.coe-hero-values:before{width:36px;margin-bottom:10px}
.app:not(.logged-in) .access-card{padding:24px 17px 18px!important;border-radius:25px!important}
.app:not(.logged-in) #access-title{font-size:clamp(23px,6vw,30px)!important}
.app:not(.logged-in) #login-card>.muted{font-size:13px!important;margin-bottom:18px!important}
.app:not(.logged-in) #google{min-height:61px!important;padding:7px 11px!important;font-size:17px!important;gap:8px!important;border-radius:13px!important}
.coe-google-icon{width:43px;height:43px;flex-basis:43px}.coe-google-icon svg{width:29px;height:29px}.coe-google-arrow{font-size:26px}
.app:not(.logged-in) #login-card .access-divider{margin:24px 0 23px!important}
.app:not(.logged-in) .coe-prereg-entry{min-height:80px!important;padding:11px 12px!important;gap:10px!important}
.app:not(.logged-in) .coe-prereg-entry .coe-prereg-icon{width:48px;height:48px;flex-basis:48px;font-size:23px!important}
.app:not(.logged-in) .coe-prereg-entry strong{font-size:16px!important}
.app:not(.logged-in) .coe-prereg-entry small{font-size:11px!important}
.app:not(.logged-in) .coe-access-perks{gap:5px!important;margin:24px 0 18px!important}
.app:not(.logged-in) .coe-access-perks div{font-size:10px!important}
.app:not(.logged-in) .coe-access-perks b{font-size:11px!important}
.app:not(.logged-in) .coe-access-perks span{width:46px;height:46px;font-size:20px!important;margin-bottom:5px!important}
.coe-security-note{gap:10px;padding:12px 10px;font-size:10px}
.coe-login-language{top:9px;right:11px;padding:3px 5px}
.coe-login-language select{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#google,.coe-prereg-entry{transition:none!important}}

/* Auth-state correction: never mix login, verification and account actions */
.app:not(.logged-in) #login-card [hidden]{display:none!important}
.app:not(.logged-in) #google[hidden]{display:none!important}
.app:not(.logged-in) #logout[hidden]{display:none!important}
.app:not(.logged-in) #claim[hidden]{display:none!important}

.app:not(.logged-in) #login-card[data-coe-auth-state="checking"],
.app:not(.logged-in) #login-card[data-coe-auth-state="blocked"]{
  max-width:560px!important;
  padding:32px 36px 28px!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] #google,
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] .coe-prereg-entry,
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] .access-divider,
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] .coe-access-perks,
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] .coe-security-note,
.app:not(.logged-in) #login-card[data-coe-auth-state="blocked"] #google{
  display:none!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] #logout,
.app:not(.logged-in) #login-card[data-coe-auth-state="blocked"] #logout{
  display:flex!important;
  width:100%!important;
  justify-content:center!important;
  min-height:50px!important;
  margin-top:16px!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] #status,
.app:not(.logged-in) #login-card[data-coe-auth-state="blocked"] #status{
  display:block!important;
  margin:18px auto 0!important;
  color:#526174!important;
  font-size:14px!important;
  line-height:1.45!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="checking"] #status::before{
  content:"";
  display:inline-block;
  width:14px;height:14px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid #d8dee6;
  border-top-color:#c98221;
  border-radius:50%;
  animation:coe-auth-spin .8s linear infinite;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="claim"] #google,
.app:not(.logged-in) #login-card[data-coe-auth-state="claim"] .coe-prereg-entry,
.app:not(.logged-in) #login-card[data-coe-auth-state="claim"] .coe-access-perks{
  display:none!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="claim"] #claim{
  display:grid!important;
  gap:10px!important;
  margin-top:18px!important;
  text-align:left!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #logout,
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #status{
  display:none!important;
}
@keyframes coe-auth-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
 .app:not(.logged-in) #login-card[data-coe-auth-state="checking"],
 .app:not(.logged-in) #login-card[data-coe-auth-state="blocked"]{
   max-width:100%!important;padding:24px 18px 20px!important
 }
}