:root {
  color-scheme: dark;
  --cyan: #18d9f4;
  --cyan-soft: #65e7f8;
  --ink: #03111f;
  --panel: rgba(4, 20, 35, 0.88);
  --line: rgba(117, 203, 225, 0.17);
  --text: #f2f7fa;
  --muted: #91a0ad;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }

.page-shell {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 5rem 1.5rem 6rem;
  background:
    radial-gradient(circle at 74% 35%, rgba(16, 117, 160, .10), transparent 27%),
    #03111f;
}

.background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/uptime-login-background.png");
  background-size: cover;
  background-position: center;
  filter: saturate(.98) contrast(1.02);
}

/* The generated artwork already contains the card on wide screens. This live
   card precisely covers it, making the fields accessible and editable. */
.login-card {
  width: min(420px, calc(100vw - 3rem));
  padding: 3.9rem 2.6rem 2.5rem;
  border: 1px solid rgba(110, 180, 205, .14);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(6, 26, 43, .95), rgba(3, 17, 31, .94));
  box-shadow: 0 24px 75px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
}
.brand-mark {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 9px rgba(24, 217, 244, .22));
}
h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  font-weight: 300;
  letter-spacing: -.035em;
  white-space: nowrap;
}
h1 strong { color: var(--cyan); font-weight: 300; }
.tagline {
  margin: 1rem 0 2.7rem;
  text-align: center;
  color: #aab3bc;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .68rem;
}
.login-form { display: grid; gap: .85rem; }
.field {
  min-height: 47px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: 0 .9rem;
  border: 1px solid rgba(105, 171, 194, .22);
  border-radius: 5px;
  background: rgba(2, 14, 26, .42);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field:focus-within {
  border-color: rgba(24, 217, 244, .65);
  background: rgba(4, 25, 41, .75);
  box-shadow: 0 0 0 3px rgba(24, 217, 244, .08);
}
.field > svg, .eye svg, .secure-note svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #8295a3;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.field input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: .8rem 0;
  color: #eaf3f7;
  background: transparent;
}
.field input::placeholder { color: #71818e; opacity: 1; }
.eye {
  display: grid;
  place-items: center;
  padding: .25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.eye:hover svg { stroke: var(--cyan-soft); }
.sign-in {
  min-height: 48px;
  margin-top: .25rem;
  border: 1px solid rgba(42, 223, 248, .35);
  border-radius: 5px;
  background: linear-gradient(180deg, #1aa7cc, #08759e);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(0, 120, 165, .20);
  cursor: pointer;
  transition: transform .2s, filter .2s;
}
.sign-in:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sign-in:active { transform: translateY(0); }
.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: .65rem 1.8rem .1rem;
  color: #7f8f9b;
  font-size: .75rem;
  text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); }
.sso {
  justify-self: center;
  border: 0;
  padding: .35rem .8rem;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
}
.sso:hover { color: #8cf0fc; }
.secure-note {
  position: absolute;
  left: 50%;
  bottom: max(3.6rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  color: #9caab5;
  font-size: .9rem;
  white-space: nowrap;
}
.secure-note svg { width: 17px; height: 17px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 900px) {
  .login-card { transform: translateY(18px); }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .page-shell { padding: 4rem 1rem 6rem; }
  .background {
    background-position: 72% center;
  }
  .background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,12,22,.3), rgba(2,12,22,.72));
  }
  .login-card {
    margin-top: 9vh;
    padding: 2.5rem 1.35rem 2rem;
    background: linear-gradient(180deg, rgba(6, 26, 43, .93), rgba(3, 17, 31, .96));
  }
  .tagline { letter-spacing: .23em; margin-bottom: 2rem; }
  .secure-note { bottom: 1.6rem; font-size: .78rem; }
}

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