:root {
  --kpl-bg: #f3f7fb;
  --kpl-line: #d7e4f3;
  --kpl-text: #17324d;
  --kpl-muted: #5e738b;
  --kpl-primary: #0f766e;
  --kpl-primary-2: #14b8a6;
}

body.kp-login-page {
  min-height: 100vh;
  background: radial-gradient(circle at 12% -15%, rgba(20,184,166,.11), transparent 42%),
              radial-gradient(circle at 100% 0%, rgba(29,78,216,.09), transparent 40%),
              var(--kpl-bg);
  color: var(--kpl-text);
}

body.kp-login-page #topNav {
  height: auto;
  background: transparent;
  margin: 14px auto 0;
}

body.kp-login-page #topNav .fixed {
  width: min(1180px, 94vw);
  margin: 0 auto;
  border: 1px solid var(--kpl-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

body.kp-login-page .backTo a,
body.kp-login-page .userNav ul li,
body.kp-login-page .userNav ul li:first-child {
  border: 0 !important;
  background: transparent !important;
}

body.kp-login-page .backTo a,
body.kp-login-page .userNav ul li a {
  color: #1f3d5d;
}

body.kp-login-page .backTo a:hover,
body.kp-login-page .userNav ul li:hover,
body.kp-login-page .selected {
  background: #edf5ff !important;
  border-radius: 10px;
}

body.kp-login-page .loginWrapper {
  position: relative;
  top: auto;
  left: auto;
  margin: 56px auto 0;
  width: min(460px, 92vw);
}

body.kp-login-page .loginLogo {
  text-align: center;
  margin-bottom: 14px;
}

body.kp-login-page .loginLogo img {
  max-width: 260px;
}

body.kp-login-page .loginPanel {
  width: 100%;
  border: 1px solid var(--kpl-line);
  border-top: 1px solid var(--kpl-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

body.kp-login-page .loginPanel .head {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border-bottom: 1px solid var(--kpl-line);
  border-top: 0;
}

body.kp-login-page .loginPanel h5 {
  float: none;
  font-weight: 700;
  color: #143553;
  padding: 11px 14px 11px 34px;
}

body.kp-login-page .loginRow {
  padding: 14px 14px;
  border-top: 1px solid #e8f0f8;
}

body.kp-login-page .loginPanel label {
  width: 120px;
  color: #2f4a66;
  font-weight: 600;
  padding-top: 8px;
}

body.kp-login-page .loginInput {
  width: calc(100% - 130px);
}

body.kp-login-page .loginInput input {
  width: 100%;
  border: 1px solid #bfd5ee !important;
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 15px;
  box-sizing: border-box;
}

body.kp-login-page .loginInput input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
  outline: none;
}

body.kp-login-page .loginRow .submitForm {
  float: none !important;
  margin: 0 !important;
  min-width: 170px;
}

body.kp-login-page .greyishBtn {
  background: linear-gradient(135deg, var(--kpl-primary), var(--kpl-primary-2)) !important;
  border: 1px solid #0f766e !important;
  color: #fff !important;
  border-radius: 10px;
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
}

body.kp-login-page .loginWrapper > a[href*='passwort'] {
  display: inline-block;
  margin-top: 12px;
  color: #255179;
  font-weight: 600;
}

body.kp-login-page #footer {
  position: static;
  width: min(1180px, 94vw);
  margin: 24px auto 16px;
  border: 1px solid var(--kpl-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

body.kp-login-page #footer .wrapper {
  width: auto;
  padding: 0 10px;
}

body.kp-login-page #footer span,
body.kp-login-page #footer span a {
  color: #43607b;
}

@media (max-width: 680px) {
  body.kp-login-page .loginPanel label,
  body.kp-login-page .loginInput {
    width: 100%;
    float: none;
  }

  body.kp-login-page .loginPanel label {
    padding: 0 0 6px;
  }
}


/* ===== Failsafe: Keep top/logo always visible ===== */
body.kp-login-page #topNav,
body.kp-login-page #topNav .fixed,
body.kp-login-page .loginWrapper,
body.kp-login-page .loginLogo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.kp-login-page .loginWrapper {
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kp-login-page .loginLogo {
  width: 100% !important;
  height: auto !important;
  left: auto !important;
  margin: 0 auto 16px !important;
  text-align: center;
}

body.kp-login-page .loginLogo img {
  display: inline-block !important;
  max-width: 260px !important;
  width: auto !important;
  height: auto !important;
}

/* ===== Final Axis + Brand Fix ===== */
:root {
  --kpl-shell-width: min(1180px, 94vw);
}

body.kp-login-page #topNav .fixed {
  position: static !important;
  width: var(--kpl-shell-width) !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

body.kp-login-page #topNav .wrapper,
body.kp-login-page #footer .wrapper {
  margin: 0 !important;
  clear: none !important;
}

body.kp-login-page #footer {
  width: var(--kpl-shell-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

body.kp-login-page .kp-login-brand {
  width: var(--kpl-shell-width);
  margin: 18px auto 12px;
  text-align: center;
}

body.kp-login-page .kp-login-brand img {
  width: auto;
  max-width: 280px;
  height: auto;
  display: inline-block;
}

/* Avoid duplicate logo inside form block */
body.kp-login-page .loginWrapper .loginLogo {
  display: none !important;
}