/* Base cream gradient. The SPA paints an opaque surface on top of this, so the
   .km-canvas rule below is what actually lets it show through. */
html, body {
  background: linear-gradient(160deg, #F7ECE1 0%, #EBD6C2 100%) !important;
  background-attachment: fixed !important;
}

/* --- login screen only -------------------------------------------------
   km-brand.js adds body.km-login while a password input is on screen and
   removes it afterwards, so none of this leaks into the desktop session. */

/* The full-viewport white surface that was hiding the gradient. #root itself
   also carries an opaque layout background, so clear both. */
body.km-login #root,
body.km-login .km-canvas,
body.km-login .km-canvas > div { background: transparent !important; }

/* Cloudscape positions the card with an inline
   `top:33%; width:25%` — recentre it and give it a sane width. */
body.km-login .km-cardwrap {
  top: 50% !important;
  left: 50% !important;
  width: min(92vw, 390px) !important;
  transform: translate(-50%, -50%) !important;
}

body.km-login .km-card {
  box-sizing: border-box;
  background: #FFFDF9;
  border: 1px solid #E7D2BC;
  border-radius: 18px;
  padding: 30px 28px 24px;
  box-shadow: 0 18px 44px rgba(90, 54, 32, .18);
  font-family: ui-rounded, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Belt-and-braces: the DCV wordmark is removed by JS, but if a re-render beats
   the observer it must never be visible. */
body.km-login svg[viewBox="0 0 113 32"] { display: none !important; }

/* "Sign in with your credentials" heading. */
body.km-login .km-card h2,
body.km-login .km-card h2 span {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #6E4A31 !important;
}
body.km-login .km-card h2 { margin: 0 0 2px; }
body.km-login .km-card label { color: #6E4A31 !important; font-weight: 600; }

body.km-login .km-card input {
  border-radius: 9px !important;
  border-color: #DCC3AA !important;
  background: #FFFFFF !important;
}
body.km-login .km-card input:focus {
  border-color: #C1562F !important;
  box-shadow: 0 0 0 2px rgba(193, 86, 47, .25) !important;
  outline: none !important;
}

/* Terracotta primary button. Cloudscape hashes the class but keeps the
   readable `variant-primary` stem, so a substring match holds. */
[class*="variant-primary"], button[type="submit"] {
  background: #C1562F !important;
  border-color: #C1562F !important;
  color: #FFF4E6 !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}
[class*="variant-primary"]:hover, button[type="submit"]:hover {
  background: #A6461F !important;
  border-color: #A6461F !important;
}

/* --- the injected banner ------------------------------------------------ */
#km-banner {
  text-align: center;
  padding: 2px 0 20px 0;
  font-family: ui-rounded, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
#km-banner .km-mark {
  width: 66px; height: 66px; margin: 0 auto 12px auto;
  filter: drop-shadow(0 5px 12px rgba(193, 86, 47, .34));
}
#km-banner .km-mark svg { display: block; width: 100%; height: 100%; }
#km-banner .km-name {
  font-size: 25px; font-weight: 700; color: #5A3620;
  letter-spacing: .4px; line-height: 1.15;
}
#km-banner .km-tag {
  font-size: 12px; color: #9A7B63; margin-top: 5px;
  text-transform: uppercase; letter-spacing: 1.6px;
}
#km-banner .km-rule {
  width: 46px; height: 3px; border-radius: 2px;
  background: #C1562F; margin: 14px auto 0 auto; opacity: .85;
}