:root {
  --ink: #1d3140;
  --teal: #1f5c63;
  --orange: #e07a4a;
  --paper: #fffaf2;
  --muted: #6a7c88;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  background: #0f2a30;
  overflow: hidden;
  display: grid;
  place-items: center;
}

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  z-index: 1;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
.orb-a {
  width: 42vw; height: 42vw; max-width: 520px; max-height: 520px;
  left: -8%; top: -10%;
  background: radial-gradient(circle, #f0a35a, transparent 70%);
}
.orb-b {
  width: 38vw; height: 38vw; max-width: 460px; max-height: 460px;
  right: -6%; bottom: -12%;
  background: radial-gradient(circle, #2a9d8f, transparent 70%);
  animation-delay: -4s;
}
.orb-c {
  width: 28vw; height: 28vw; max-width: 320px; max-height: 320px;
  left: 40%; top: 55%;
  background: radial-gradient(circle, #ffe1b8, transparent 70%);
  animation-delay: -8s;
}

.login-wrap {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100vw - 32px));
  padding: 24px 0;
  animation: rise .7s ease both;
}

.login-card {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid #ffffff55;
  border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 60px #04131666;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}
.mark {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #ffd18a, #f0a35a);
  color: #7a3d12; font-size: 1.5rem;
  box-shadow: inset 0 0 0 2px #fff6, 0 8px 18px #e07a4a44;
  animation: glow 4s ease-in-out infinite;
}
.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--teal);
}
.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .85rem;
}

h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
}
.lead {
  margin: 0 0 18px;
  color: var(--muted);
}

form { display: grid; gap: 12px; }
label {
  display: grid; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--muted);
}
input {
  border: 1px solid #e2d6c6;
  border-radius: 12px;
  padding: 13px 14px;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 3px #2a9d8f22;
}

button {
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--orange), #c96138);
  color: #fff;
  font: 700 1rem var(--font-body);
  cursor: pointer;
  box-shadow: 0 10px 22px #e07a4a44;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 14px 26px #e07a4a55; }
button:disabled { opacity: .7; cursor: wait; transform: none; }

.error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid #f0c2bb;
  color: #7a2e24;
  font-size: .9rem;
}
.hidden { display: none !important; }

.footnote {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -22px) scale(1.06); }
}
@keyframes glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

@media (max-width: 520px) {
  body { overflow: auto; }
  .login-card { padding: 22px 18px 18px; }
}