:root {
  --hp-teal: #006f78;
  --hp-teal-2: #0091a0;
  --hp-mint: #5ac3be;
  --hp-ink: #10262a;
  --hp-bg: #edf8f7;
  --hp-line: rgba(16,38,42,.10);
}

html.hp-auth-ready, html.hp-auth-ready body {
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(rgba(0,145,160,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,145,160,.055) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(90,195,190,.34), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(0,145,160,.15), transparent 38%),
    #eef8f7 !important;
  background-size: 34px 34px, 34px 34px, auto, auto, auto !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--hp-ink) !important;
}

.hp-auth-shell {
  min-height: 100vh;
  padding: 26px clamp(18px, 4vw, 56px) 34px;
  box-sizing: border-box;
}

.hp-auth-topbar {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.hp-auth-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--hp-ink);
}

.hp-auth-wordmark img {
  width: 178px;
  height: auto;
  object-fit: contain;
  display: block;
}

.hp-auth-wordmark strong,
.hp-auth-wordmark small { display: none; }

.hp-auth-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,111,120,.12);
  box-shadow: 0 16px 40px rgba(16,38,42,.10);
  backdrop-filter: blur(12px);
}

.hp-auth-tabs span,
.hp-auth-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  color: rgba(16,38,42,.68);
}

.hp-auth-tabs .active {
  color: #fff;
  background: linear-gradient(135deg, #005f67, #008c98);
  box-shadow: 0 10px 24px rgba(0,111,120,.25);
}

.hp-auth-canvas {
  min-height: calc(100vh - 140px);
  display: grid;
  grid-template-columns: minmax(360px, .98fr) minmax(440px, 1.02fr);
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 34px 90px rgba(16,38,42,.18);
  background: rgba(255,255,255,.62);
}

.hp-auth-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(42px, 6vw, 78px);
  color: white;
  background:
    radial-gradient(circle at 18% 18%, rgba(90,195,190,.34), transparent 31%),
    linear-gradient(135deg, #004d55 0%, #00747d 55%, #0091a0 100%);
}

.hp-auth-brand-content {
  position: relative;
  z-index: 2;
  max-width: 460px;
}

.hp-auth-brand-content img {
  display: block;
  width: min(390px, 74%);
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 28px;
}

.hp-auth-brand-content p {
  margin: 0;
  max-width: 390px;
  font-size: clamp(21px, 2.1vw, 31px);
  line-height: 1.22;
  font-weight: 750;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.92);
}

.hp-auth-orb {
  position: absolute;
  right: -92px;
  bottom: -92px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.105);
  color: rgba(255,255,255,.10);
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -.08em;
}

.hp-auth-form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 5vw, 72px);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(247,252,251,.86));
}

.hp-auth-form-host {
  width: min(100%, 460px);
}

.hp-auth-form-host #root { width: 100%; }

.hp-auth-form-host #root > .MuiBox-root { width: 100%; }

.hp-auth-form-host header {
  position: fixed !important;
  right: clamp(172px, 14vw, 250px) !important;
  top: 34px !important;
  z-index: 20 !important;
  min-height: 40px !important;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hp-auth-form-host header .MuiToolbar-root {
  min-height: 40px !important;
  padding: 0 !important;
}

.hp-auth-form-host #first-factor-stage,
.hp-auth-form-host .hp-login-stage {
  min-height: auto !important;
  display: block !important;
  text-align: left !important;
}

.hp-auth-form-host #first-factor-stage > .MuiContainer-root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 42px 40px 38px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(16,38,42,.10) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 24px 70px rgba(16,38,42,.14) !important;
  box-sizing: border-box !important;
}

.hp-auth-form-host .hp-small-logo-row,
.hp-auth-form-host img[alt="Logo"] { display: none !important; }

.hp-auth-form-host h1,
.hp-auth-form-host h2,
.hp-auth-form-host h3,
.hp-auth-form-host h4,
.hp-auth-form-host h5,
.hp-auth-form-host h6 {
  color: var(--hp-ink) !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  margin-bottom: 26px !important;
}

.hp-auth-form-host label,
.hp-auth-form-host .MuiFormLabel-root {
  color: rgba(16,38,42,.72) !important;
  font-weight: 760 !important;
}

.hp-auth-form-host .MuiOutlinedInput-root,
.hp-auth-form-host input {
  border-radius: 16px !important;
}

.hp-auth-form-host .MuiOutlinedInput-root {
  background: #f6fbfb !important;
}

.hp-auth-form-host .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0,111,120,.16) !important;
}

.hp-auth-form-host .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.hp-auth-form-host .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0,145,160,.58) !important;
  border-width: 1px !important;
}

.hp-auth-form-host .MuiCheckbox-root.Mui-checked { color: var(--hp-teal-2) !important; }

.hp-auth-form-host a { color: var(--hp-teal) !important; font-weight: 800 !important; }

.hp-auth-form-host .hp-primary-button,
.hp-auth-form-host button[type="submit"] {
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #005f67, #0091a0) !important;
  color: #fff !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 16px 32px rgba(0,111,120,.25) !important;
}

.hp-auth-form-host p:has(+ .MuiGrid-root),
.hp-auth-form-host p:last-child {
  text-align: center !important;
}

@media (max-width: 900px) {
  html.hp-auth-ready,
  html.hp-auth-ready body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hp-auth-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .hp-auth-topbar {
    display: none !important;
  }

  .hp-auth-tabs { display: none; }

  .hp-auth-canvas {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    display: block !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow-x: hidden !important;
  }

  .hp-auth-brand-panel {
    min-height: 86px;
    padding: 16px 18px;
    box-sizing: border-box;
  }

  .hp-auth-brand-content img { width: 176px; margin-bottom: 6px; }
  .hp-auth-brand-content p { display: none; }
  .hp-auth-orb { display: none; }

  .hp-auth-form-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 14px 12px 28px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .hp-auth-form-host,
  .hp-auth-form-host #root,
  .hp-auth-form-host #root > .MuiBox-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .hp-auth-form-host header {
    position: static !important;
    width: 100% !important;
    min-height: 34px !important;
    margin-bottom: 8px !important;
  }

  .hp-auth-form-host header .MuiToolbar-root {
    justify-content: flex-end !important;
    min-height: 34px !important;
  }

  .hp-auth-form-host #first-factor-stage,
  .hp-auth-form-host #second-factor-stage,
  .hp-auth-form-host .hp-login-stage {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    display: block !important;
    text-align: left !important;
    overflow-x: hidden !important;
  }

  .hp-auth-form-host #first-factor-stage > .MuiContainer-root,
  .hp-auth-form-host #second-factor-stage > .MuiContainer-root,
  .hp-auth-form-host .MuiContainer-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .hp-auth-form-host .MuiGrid-root,
  .hp-auth-form-host .MuiBox-root,
  .hp-auth-form-host form {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hp-auth-form-host h1,
  .hp-auth-form-host h2,
  .hp-auth-form-host h3,
  .hp-auth-form-host h4,
  .hp-auth-form-host h5,
  .hp-auth-form-host h6 {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  .hp-auth-form-host button,
  .hp-auth-form-host a {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    white-space: normal !important;
  }

  /* Authelia 2FA action row: LOGOUT | SWITCH USER | METHODS */
  .hp-auth-form-host #second-factor-stage button,
  .hp-auth-form-host #second-factor-stage a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    letter-spacing: .02em !important;
  }

  /* OTP component: keep six boxes inside the phone viewport. */
  .hp-auth-form-host #second-factor-stage input,
  .hp-auth-form-host #second-factor-stage .MuiInputBase-input {
    max-width: 44px !important;
    width: 44px !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 !important;
    font-size: 26px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .hp-auth-form-host #second-factor-stage [class*="Otp"],
  .hp-auth-form-host #second-factor-stage [class*="otp"],
  .hp-auth-form-host #second-factor-stage [class*="OTP"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 420px) {
  .hp-auth-form-panel { padding: 10px 8px 24px !important; }
  .hp-auth-form-host #first-factor-stage > .MuiContainer-root,
  .hp-auth-form-host #second-factor-stage > .MuiContainer-root,
  .hp-auth-form-host .MuiContainer-root { padding: 20px 12px !important; }
  .hp-auth-form-host #second-factor-stage input,
  .hp-auth-form-host #second-factor-stage .MuiInputBase-input {
    width: 38px !important;
    max-width: 38px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
}