: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;
  overflow: hidden;
  background-image: url("assets/binary-lighthouse_home.png");
  background-size: cover;
  background-position: center;
  filter: saturate(.98) contrast(1.02);
}

/* Individual reflections brighten, fade, and drift slightly like light on
   moving water. */
.water-fleck {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: calc(var(--size) * .55);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(194, 248, 255, .9) 0%, rgba(73, 220, 251, .55) 35%, transparent 75%);
  box-shadow: 0 0 10px rgba(73, 220, 251, .5);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: water-fleck-twinkle var(--duration) ease-in-out var(--delay) infinite;
}
.water-fleck--small {
  opacity: .7;
  box-shadow: 0 0 7px rgba(73, 220, 251, .35);
}
@keyframes water-fleck-twinkle {
  0%, 100% { opacity: 0; transform: translate3d(-2px, 0, 0) scaleX(.45); }
  24% { opacity: .28; }
  50% { opacity: .9; transform: translate3d(7px, -1px, 0) scaleX(1.35); }
  76% { opacity: .16; }
}

/* A very quiet animated data stream follows the lighthouse beam. The image
   remains static; these hidden decorative layers provide the motion. */
.signal-stream {
  position: absolute;
  left: -18%;
  width: 136%;
  color: rgba(83, 223, 255, .13);
  font: 500 clamp(.42rem, .7vw, .7rem)/1 monospace;
  letter-spacing: .28em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(32, 196, 240, .35);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 82%, transparent 100%);
  pointer-events: none;
  animation: beam-signal-flow 30s ease-in-out infinite alternate;
}
.signal-stream--upper { top: 18.7%; }
.signal-stream--lower {
  top: 21.5%;
  color: rgba(83, 223, 255, .08);
  animation-delay: -11s;
  animation-duration: 36s;
}
@keyframes beam-signal-flow {
  from { transform: translate3d(-2%, 0, 0); }
  to { transform: translate3d(7%, 0, 0); }
}

/* The live card keeps the form accessible and editable over the decorative
   lighthouse artwork. */
.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 {
    animation: none !important;
    transition: none !important;
  }
}