:root{
  --bg: #070910;
  --bg2: #0b0e16;
  --text: #edf1fb;
  --muted: rgba(237,241,251,.68);
  --line: rgba(255,255,255,.10);
  --card: #10141d;
  --card2: #0d1118;
  --shadow: 0 26px 80px rgba(0,0,0,.46);
  --accent: #9fb1ff;
  --error: #ff8686;
  --success: #8de0a8;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(520px 320px at 15% 0%, rgba(159,177,255,.08), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.loginWrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:20px;
}

.loginCard{
  width:min(560px, 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow);
}

.eyebrow{
  margin:0 0 8px 0;
  color: rgba(237,241,251,.56);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

h1{
  margin:0;
  font-size: clamp(32px, 5vw, 48px);
  line-height:1.02;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.intro{
  margin: 12px 0 0 0;
  color: var(--muted);
  line-height:1.7;
}

.loginForm{
  margin-top: 20px;
  display:grid;
  gap: 10px;
}

label{
  color: rgba(237,241,251,.84);
  font-size: 14px;
}

input{
  width:100%;
  min-height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 0 14px;
  font-size: 15px;
  outline:none;
}

input:focus{
  border-color: rgba(159,177,255,.55);
}

button{
  min-height:50px;
  border:none;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(159,177,255,.28), rgba(159,177,255,.18));
  color: var(--text);
  cursor:pointer;
  font-size:15px;
  font-weight:600;
}

button:hover{
  filter: brightness(1.05);
}

.status{
  min-height: 24px;
  margin: 14px 0 0 0;
  color: var(--muted);
  line-height:1.5;
}

.status.error{
  color: var(--error);
}

.status.success{
  color: var(--success);
}

.links{
  margin-top: 14px;
}

.links a{
  color: rgba(237,241,251,.82);
  text-decoration:none;
}

.links a:hover{
  text-decoration:underline;
}