:root {
  --ink:#112638;
  --muted:#687985;
  --line:#dce4e6;
  --orange:#e85f38;
  --green:#1f8f64;
  --panel:rgba(255,255,255,.78);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing:border-box; }

body {
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(120deg, rgba(232,95,56,.08), transparent 30%),
    linear-gradient(220deg, rgba(31,143,100,.10), transparent 35%),
    #f4f7f7;
  color:var(--ink);
}

.login-shell {
  width:min(460px, calc(100vw - 34px));
  display:block;
  margin:auto;
  overflow:hidden;
  border:1px solid rgba(194,207,211,.9);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  box-shadow:0 28px 80px rgba(17,38,56,.16);
  backdrop-filter:blur(24px) saturate(1.16);
}

.login-panel {
  padding:42px;
  background:var(--panel);
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:58px;
}

.brand-mark {
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border:1px solid #d4dcde;
  border-bottom:3px solid var(--orange);
  background:#fff;
  color:#132537;
  font-size:24px;
  font-weight:900;
}

.brand b,
.brand small,
.login-copy small {
  display:block;
}

.brand b {
  letter-spacing:.18em;
  font-size:13px;
}

.brand small,
.login-copy p {
  color:var(--muted);
}

.login-copy small {
  color:var(--orange);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}

h1 {
  margin:8px 0 0;
  font-size:42px;
  line-height:1;
  letter-spacing:0;
}

.login-copy p {
  max-width:330px;
  margin:13px 0 0;
  font-size:15px;
  line-height:1.55;
}

form {
  display:grid;
  gap:15px;
  margin-top:34px;
}

label {
  color:#455c67;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

input {
  width:100%;
  height:48px;
  margin-top:7px;
  padding:0 14px;
  border:1px solid #cbd7da;
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  font:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

input:focus {
  border-color:#95aab2;
  box-shadow:0 0 0 4px rgba(22,63,84,.08);
  transform:translateY(-1px);
}

button {
  height:50px;
  margin-top:5px;
  border:0;
  border-radius:10px;
  background:#132537;
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button:hover {
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(17,38,56,.18);
}

button:disabled { opacity:.65; cursor:wait; }

.login-status {
  min-height:20px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}

.login-status.error { color:#b94336; }
.login-status.success { color:var(--green); }

@media(max-width:520px) {
  body { place-items:center; padding:16px; }
  .login-shell {
    width:100%;
  }
  .login-panel { padding:30px 22px; }
  .brand { margin-bottom:44px; }
  h1 { font-size:36px; }
}