:root {
  --ox-navy: #081018;
  --ox-brand-cyan: #00A9C4;
  --ox-accent: #00C2A8;
  --ox-login-bg: #0B1520;
  --ox-login-bg-mid: #12202C;
  --ox-login-bg-deep: #07101A;
  --ox-login-card: rgba(13, 25, 37, .82);
  --ox-login-card-border: rgba(0, 194, 168, .22);
  --ox-login-input: #101C28;
  --ox-login-input-border: #223342;
  --ox-login-text: #FFFFFF;
  --ox-login-muted: #98A7B6;
  --ox-login-label: #F1F5F9;
  --ox-login-placeholder: #7E8D9C;
  --ox-font: Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ox-login-bg-deep);
  color: var(--ox-login-label);
  font-family: var(--ox-font);
}

.portal-fallback {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: #07101a;
  color: #fff;
  text-align: center;
  padding: 32px;
}

.portal-fallback.is-visible,
noscript .portal-fallback { display: flex; }

.portal-fallback a,
.portal-fallback button {
  color: #04221d;
  background: var(--ox-accent);
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.login-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.login-brand {
  position: relative;
  flex: 1.1;
  overflow: hidden;
  background: #07101a;
}

.login-brand-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

.login-brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 18, .28) 0%, rgba(3, 10, 18, .12) 46%, rgba(3, 10, 18, .42) 100%);
  pointer-events: none;
}

.brand-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 64px 56px 40px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 36px;
}

.brand-lockup img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand-mark {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  line-height: 1.1;
}

.brand-mark small {
  display: block;
  color: var(--ox-brand-cyan);
  font-size: .78rem;
  letter-spacing: .22em;
  font-weight: 700;
}

.login-hero-headline {
  margin: 0 0 14px;
  font-size: clamp(34px, 3vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
}

.login-hero-headline span { color: var(--ox-brand-cyan); }

.login-hero-sub {
  margin: 0 0 20px;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}

.login-hero-rule {
  display: block;
  width: 42px;
  height: 2px;
  background: var(--ox-brand-cyan);
}

.brand-pills {
  display: flex;
  gap: 28px;
  margin-top: auto;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}

.brand-pills strong {
  display: block;
  color: var(--ox-accent);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-pills span { color: rgba(255, 255, 255, .55); font-size: 12px; }

.login-main {
  flex: 0 0 min(520px, 46vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px 28px;
  background: radial-gradient(circle at 50% 30%, #12202C 0%, #0B1520 52%, #07101A 100%);
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 36px 36px 28px;
  background: var(--ox-login-card);
  border: 1px solid var(--ox-login-card-border);
  border-radius: 18px;
  backdrop-filter: blur(16px);
}

.login-card-header { text-align: center; margin-bottom: 22px; }

.card-kicker {
  margin: 0 0 8px;
  color: var(--ox-accent);
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
}

.login-card h1 {
  margin: 0 0 8px;
  font-size: 1.7rem;
  font-weight: 700;
}

.login-card h1 em {
  font-style: normal;
  color: var(--ox-brand-cyan);
}

.subtitle {
  margin: 0;
  color: var(--ox-login-muted);
  font-size: .95rem;
  line-height: 1.45;
}

.sso-caption {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: #7E8D9C;
}

.field { margin: 0 0 14px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ox-login-label);
}

.field input {
  width: 100%;
  border: 1px solid var(--ox-login-input-border);
  background: var(--ox-login-input);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}

.field input::placeholder { color: var(--ox-login-placeholder); }

.login-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #04221d;
  background: linear-gradient(180deg, #12d0b8 0%, #00a9c4 100%);
  cursor: pointer;
}

.login-btn:disabled,
.login-ms-btn:disabled { opacity: .55; cursor: wait; }

#methodBlock {
  margin-top: 8px;
}

.org-title {
  margin: 4px 0 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}
.local-caption {
  margin: 0 0 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}
#methodBlock[hidden],
#twofaForm[hidden],
#microsoftBlock[hidden],
#discoverForm[hidden] { display: none; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #7E8D9C;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #2A3A48;
}

.login-ms-btn {
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--ox-accent);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

.login-ms-btn:hover { background: rgba(0, 194, 168, .08); }
.login-ms-btn svg { width: 18px; height: 18px; }
.login-ms-btn[hidden],
.local-block[hidden],
.org-choice[hidden] { display: none; }

.ms-hint {
  margin: 8px 0 0;
  text-align: center;
  color: var(--ox-login-muted);
  font-size: 12px;
}

.ms-other {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  color: var(--ox-login-muted);
  font-size: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.message {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .875rem;
}

.message.error {
  display: block;
  background: rgba(229, 72, 77, .10);
  color: #FFB4B7;
  border: 1px solid rgba(229, 72, 77, .30);
}

.login-powered {
  margin-top: 22px;
  text-align: center;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(158, 170, 184, .55);
}

.login-powered strong {
  display: block;
  margin-top: 6px;
  font-size: .95rem;
  letter-spacing: .04em;
  color: rgba(241, 245, 249, .7);
}

.login-powered strong em {
  font-style: normal;
  color: var(--ox-brand-cyan);
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  color: #7E8D9C;
  font-size: 12px;
}

.env-list { display: flex; flex-direction: column; gap: 12px; }

.env-btn {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #223342;
  background: #101C28;
  color: #fff;
  cursor: pointer;
}

.env-btn:hover { border-color: #00A9C4; }
.env-btn small { display: block; margin-top: 4px; color: #98A7B6; }
.env-btn .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: #64748b;
}
.env-btn .dot.online { background: #22c55e; }
.env-btn.is-offline { opacity: .7; }

.org-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}

.org-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #223342;
  background: #101C28;
  color: #fff;
  cursor: pointer;
}

.splash-card { text-align: center; }
.splash-loader {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 28px auto 22px;
}
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 194, 168, .16);
  border-top-color: var(--ox-accent);
  animation: portal-spin .85s linear infinite;
}
.splash-ms {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, #f25022 50%, #7fba00 50%) 0 0 / 100% 50% no-repeat,
    linear-gradient(90deg, #00a4ef 50%, #ffb900 50%) 0 100% / 100% 50% no-repeat;
}
.step-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  text-align: left;
}
.step-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  color: var(--ox-login-muted);
}
.step-list li.is-done { color: #fff; }
.step-list li.is-active { color: var(--ox-accent); }
.step-mark {
  width: 18px;
  text-align: center;
  font-weight: 700;
}
.offline-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.btn-quiet {
  width: 100%;
  border: 1px solid #2A3A48;
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
}

@keyframes portal-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .login-main { flex-basis: 58%; }
}

@media (max-width: 900px) {
  .login-page { flex-direction: column; }
  .login-brand { min-height: 210px; flex: none; }
  .brand-inner { padding: 28px 24px 20px; }
  .login-hero-copy, .brand-pills { display: none; }
  .login-main {
    flex: 1;
    width: 100%;
    padding: 28px 18px 24px;
    background:
      linear-gradient(180deg, rgba(7, 16, 26, .88), #07101a 42%),
      url("/portal/oxleon-login-earth.png") center 30% / cover no-repeat;
  }
  .login-card { padding: 28px 22px; max-width: 100%; }
}

@media (max-width: 600px) {
  .brand-mark { font-size: 1.1rem; }
  .login-card h1 { font-size: 1.4rem; }
  .card-foot { flex-direction: column; gap: 6px; }
}