:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07100d;
  color: #eef8f3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 15%, rgba(35, 209, 139, .16), transparent 34rem),
    linear-gradient(145deg, #07100d 0%, #0a1813 55%, #07100d 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-card {
  width: min(100%, 28rem);
  padding: 2.5rem;
  border: 1px solid rgba(142, 239, 196, .16);
  border-radius: 1.25rem;
  background: rgba(11, 27, 21, .88);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .38);
  backdrop-filter: blur(1rem);
}

.brand {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.brand span { color: #31dc91; }
.brand .brand-mark { margin-right: .5rem; font-size: 1.45rem; }
.eyebrow { margin: 2.4rem 0 .65rem; color: #69e4aa; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.045em; }
.intro { margin: .9rem 0 2rem; color: #9db4aa; line-height: 1.6; }
label { display: block; margin: 1.1rem 0 .45rem; color: #c8d9d1; font-size: .86rem; font-weight: 700; }
input {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid #29483b;
  border-radius: .7rem;
  background: #08150f;
  color: #f4fff9;
  font: inherit;
  outline: none;
}
input:focus { border-color: #31dc91; box-shadow: 0 0 0 3px rgba(49, 220, 145, .14); }
button {
  width: 100%;
  margin-top: 1.5rem;
  padding: .95rem 1rem;
  border: 0;
  border-radius: .7rem;
  background: #31dc91;
  color: #04100a;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
button:hover { background: #52e6a5; }
.error { padding: .75rem .9rem; border: 1px solid #a84e58; border-radius: .65rem; background: rgba(168, 78, 88, .12); color: #ffbbc2; }
.privacy { margin: 1.4rem 0 0; color: #748a80; font-size: .78rem; text-align: center; }