/* --- Aero glass material, shared everywhere --- */
.glass {
  background:
    linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 43%),
    linear-gradient(180deg, rgba(120,190,235,.82), rgba(76,155,214,.68));
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 20px rgba(11,63,115,.4);
  color: var(--deep-water);
  text-shadow: 0 0 5px #fff;
}
.gel {
  font: 600 13px var(--font-ui); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  border: 1px solid #2c7a29; border-radius: 4px; padding: 6px 16px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0 50%, rgba(0,0,0,0) 50%), linear-gradient(#5fd15a, var(--gel-green));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.3);
}
.gel:active { background: linear-gradient(180deg, rgba(0,0,0,.1) 0 50%, rgba(255,255,255,.15) 50%), linear-gradient(#3fae3a, #5fd15a); }
:focus-visible { outline: 2px solid var(--deep-water); outline-offset: 2px; }

.logomark { filter: drop-shadow(0 0 5px rgba(47,196,216,.6)); vertical-align: middle; flex: none; }

.badge-online { background: var(--grass); color: #fff; border-radius: 9px; padding: 0 8px; font-size: 11px; text-shadow: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- centered pages: login, brochure --- */
body.brochure, body.login {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(var(--sky), var(--mist) 60%, #cfeaa8);
}
.login-box, .brochure-box {
  max-width: 420px; padding: 28px 32px; text-align: center;
}
.login-box h1 { font-size: 16px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.brochure-box h1 { margin: 12px 0 2px; }
.brochure-box .tagline { margin: 0 0 14px; font-style: italic; opacity: .85; }
.login-box label { display: block; text-align: left; margin: 0 0 10px; font-size: 12px; }
.login-box input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; background: rgba(255,255,255,.7); font: 13px var(--font-ui); margin-top: 3px; }
.login-box .status { font-size: 11px; opacity: .8; margin: 10px 0; }
.err { color: var(--alert-red); font-weight: 600; font-size: 12px; }