:root{
  --bg-1: #071a2a;
  --bg-2: #0a2b43;
  --bg-3: #0f3a55;
  --accent: #4fbbe6;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--bg-3), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #0b2740, transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  min-height:100vh;
}

/* Center layout */
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 32px 16px;
}

/* White card — SQUARE corners */
.login-card{
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0;
  padding: 44px 38px 30px;
  text-align:center;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.28),
    0 5px 18px rgba(0,0,0,0.18);
}

/* Icon wrapper */
.brand-mark{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 14px;
}

/* Profile icon */
.brand-icon{
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: #eef6ff;
  border: 1px solid rgba(0,0,0,0.06);
  transition: 0.18s ease;
}

.brand-icon svg{
  width: 42px;
  height: 42px;
  color: #0f3a55;
  transition: 0.18s ease;
}

/* Glow when focusing inputs */
.login-card:focus-within .brand-icon{
  background: #e3f4ff;
  border-color: rgba(79,187,230,0.7);
  box-shadow:
    0 0 0 6px rgba(79,187,230,0.18),
    0 10px 28px rgba(15,58,85,0.25);
  transform: translateY(-2px) scale(1.04);
}

.login-card:focus-within .brand-icon svg{
  color: #0a2b43;
  transform: scale(1.06);
}

/* Headings */
.title{
  margin: 6px 0 6px;
  font-size: 28px;
  color: #0f2638;
  font-weight:700;
}

.subtitle{
  margin: 0 0 24px;
  font-size: 14.5px;
  color: #516274;
}

/* Error box */
.error-box{
  background: #fff2f2;
  border: 1px solid #f1bcbc;
  color: #8a1f1f;
  padding: 10px 12px;
  margin-bottom: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size: 14px;
}
.error-box svg{
  width:16px;
  height:16px;
}

/* Form */
.form{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Inputs — SQUARE corners */
.field-input{
  display:flex;
  align-items:center;
  gap: 10px;
  background: #f4f8fc;
  border: 1px solid #d0d9e3;
  border-radius: 0;
  padding: 14px 14px;
  min-height: 54px;
  transition:0.18s ease;
  position: relative;
}

.field-input svg{
  width: 18px;
  height: 18px;
  color: #0f3a55;
}

.field-input input{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  color:#0f2638;
  font-size:16.5px;
}

.field-input input::placeholder{
  color:#7b8a99;
  font-size:16px;
}

.field-input:focus-within{
  border-color: var(--accent);
  background:#eafdff;
  box-shadow:0 0 0 3px rgba(79,187,230,0.18);
}

/* Password eye */
.toggle-pass{
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.toggle-pass svg{
  width: 20px;
  height: 20px;
  color: #0f3a55;
}

/* Button — SQUARE corners */
.btn{
  margin-top: 6px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px;
  border-radius: 0;
  border:none;
  background:#0f3a55;
  color:#fff;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:0.18s ease;
}

/* Animated arrow */
.btn-arrow{
  animation: arrow-wiggle 1.2s ease-in-out infinite;
}

@keyframes arrow-wiggle{
  0%   { transform: translateX(0); opacity:0.9; }
  50%  { transform: translateX(6px); opacity:1; }
  100% { transform: translateX(0); opacity:0.9; }
}

.btn:hover{
  background:#0c2b40;
  transform:translateY(-1px);
}

/* Footer */
.footer-note{
  margin-top: 22px;
  font-size:13px;
  color:#5e6d7b;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.footer-note svg{
  width:16px;
  height:16px;
  color:#0f3a55;
}

/* Back link */
.back-link{
  display:flex;
  margin-top:16px;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-size:14px;
  text-decoration:none;
  color:#0f3a55;
  font-weight:600;
  transition:0.18s ease;
}
.back-link svg{
  width:16px;
  height:16px;
}
.back-link:hover{
  opacity:0.8;
  transform:translateX(-2px);
}