:root{
  --bg-1: #f3fbf6;
  --bg-2: #e9fbef;
  --card-white: #f3fbf6;
  --card-radius: 16px;
  --accent: #0f7a4a;
  --accent-2: #10b981;
  --muted: #6b7280;
  --shadow-sm: 0 8px 20px rgba(19,38,63,0.08);
  --shadow-lg: 0 20px 60px rgba(14,35,58,0.12);
  --glass: rgba(255,255,255,0.85);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Page */
html, body, #root { height:100%; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 28px;
}

.auth-card{
  width:100%;
  max-width:980px;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:32px;
  align-items:stretch;
}

.auth-left{
  background: linear-gradient(180deg,#0f6b45,#0aa36f);
  color: #fff;
  border-radius: var(--card-radius);
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  box-shadow: 0 20px 60px rgba(6,130,86,0.14);
  text-align:center;
}
.auth-left h1{ margin:0; font-size:34px; letter-spacing:0.4px }
.auth-left p{ margin:0; opacity:0.92 }
.auth-left .brand{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center }
.illustration{ width:100%; display:flex; justify-content:center; align-items:center }
.illustration svg{ max-width:320px; width:70%; height:auto; opacity:0.95; filter: drop-shadow(0 8px 24px rgba(6,130,86,0.12)); }

.auth-right{
  background: linear-gradient(180deg,#f6fdf6,#e9fbef) !important;
  border-radius: var(--card-radius);
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 10px 30px rgba(8,80,48,0.06);
  align-items: center;
  border: 1px solid rgba(10,120,70,0.04);
}

.auth-header h2{ margin:0; font-size:18px; color:var(--accent); text-transform:uppercase; letter-spacing:1.6px }
.auth-header p{ margin:0; color:var(--muted); font-size:13px }

.form{ display:flex; flex-direction:column; gap:20px; margin-top:6px; align-items:center; width:100%; }

.input-row{ display:block; position:relative; width:100%; max-width:420px; box-sizing:border-box }
.input-row input,
.input-row select{
  min-height:48px;
  box-sizing:border-box;
}
.input-row select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #375a7f 50%), linear-gradient(135deg, #375a7f 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.input-row .field-label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; text-align:left }
.input-row input,
.input-row select{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.06);
  background: #fbfdff;
  font-size:14px;
  color:#10243a;
  outline:none;
  transition: box-shadow .16s ease, transform .12s ease, border-color .12s ease;
}
.input-row input::placeholder{ color:#9aa6b1 }
.input-row input:focus, .input-row select:focus{
  box-shadow: 0 10px 30px rgba(16,36,64,0.06);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.password-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#94a3b8; cursor:pointer }

.form-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; gap:12px }
.remember{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px }
.form-meta .link{ color:var(--accent-2); text-decoration:none; font-weight:600; margin-left:12px }

.form-error{ background: #fff6f6; color:#9b2c2c; padding:10px; border-radius:8px; border:1px solid #ffd6d6 }
.form-success{ background:#ecfdf5; color:#065f46; padding:10px; border-radius:8px; border:1px solid #a7f3d0; width:100%; box-sizing:border-box; }
.password-reset-card .auth-header{ width:100%; max-width:420px; }
.password-reset-card .auth-header p{ margin-top:8px; line-height:1.5; }
.reset-lock{ width:120px; height:120px; display:grid; place-items:center; border:4px solid rgba(255,255,255,.9); border-radius:50%; font-size:92px; line-height:1; font-weight:300; transform:rotate(90deg); }

.btn-primary{
  margin-top:8px;
  background: linear-gradient(180deg,#1b6aa8,#165a8f);
  color:#fff; border:none; padding:14px 16px; border-radius:10px; font-weight:700; cursor:pointer;
  box-shadow: 0 14px 40px rgba(20,70,120,0.12);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, opacity .12s ease;
  width:100%;
  max-width:420px;
}
.btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 26px 60px rgba(12,52,98,0.14) }
.btn-primary:active{ transform: translateY(-1px) }
.btn-primary:disabled{ opacity:.65; cursor:not-allowed }

.signup{ font-size:13px; color:var(--muted); text-align:center; margin-top:6px; width:100%; max-width:420px }
.signup a{ color:var(--accent); font-weight:600 }

.btn-primary{ position:relative; overflow:hidden }
.ripple{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,0.22); animation:ripple .6s linear; pointer-events:none }
@keyframes ripple{ to{ transform:scale(4); opacity:0 } }

.success-badge{ position:relative; display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; background: linear-gradient(90deg,#10b981,#059669); color:#fff }
.toast{ position:fixed; right:20px; top:20px; background:#053e2b; color:#d1fae5; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow-lg); z-index:9999 }

.auth-card.shake{ animation: shake .42s cubic-bezier(.36,.07,.19,.97) both }
@keyframes shake{ 10%,90%{ transform:translateX(-1px) } 20%,80%{ transform:translateX(2px) } 30%,50%,70%{ transform:translateX(-4px) } 40%,60%{ transform:translateX(4px) } }

@media (max-width:920px){
  .auth-card{ grid-template-columns: 1fr; max-width:760px; gap:18px }
  .auth-left{ order:-1; padding:26px }
  .auth-right{ padding:22px }
}
@media (max-width:480px){
  .auth-page{ padding:16px }
  .auth-left{ padding:18px }
  .auth-left h1{ font-size:20px }
  .auth-right{ padding:18px }
}

.forgot-password{ color:var(--accent-2); font-weight:600; text-decoration:none }
.forgot-password:hover{ text-decoration:underline }

.form .field-note{ font-size:12px; color:var(--muted); margin-top:6px }

.btn-primary{
  background: linear-gradient(90deg,#10b981,#047857) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 18px 50px rgba(4,120,87,0.14) !important;
}

.btn-primary:hover{
  background: linear-gradient(90deg,#0fb273,#065f46) !important;
}

.live-illustration svg{ display:block }
.avatar-circle{ transform-origin:110px 70px; animation: avatarPulse 2.2s ease-in-out infinite; }
.avatar-arc{ stroke-dasharray: 220; stroke-dashoffset: 220; animation: arcDraw 2.2s ease-in-out infinite; opacity:0.95 }

@keyframes avatarPulse{
  0%{ transform:translateY(0) scale(1); opacity:0.95 }
  50%{ transform:translateY(-4px) scale(1.04); opacity:1 }
  100%{ transform:translateY(0) scale(1); opacity:0.95 }
}

@keyframes arcDraw{
  0%{ stroke-dashoffset:220; opacity:0 }
  20%{ stroke-dashoffset:120; opacity:0.9 }
  50%{ stroke-dashoffset:20; opacity:1 }
  100%{ stroke-dashoffset:220; opacity:0.6 }
}