:root{
  --bg: #0b0d10;
  --bg-2: #12161c;
  --card: #12161cdd;
  --text: #e6eaf0;
  --muted: #a7b0bf;
  --brand: #d71921;
  --ring: 0 0 0 2px rgba(215,25,33,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1000px 700px at 10% 10%, #1a202a 0%, #0b0d10 60%),
              radial-gradient(800px 600px at 90% 90%, #1d1420 0%, #0b0d10 50%);
  background-attachment: fixed;
}

.page{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.split{
  width: min(1100px, 100%);
  min-height: 640px;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.brand-side{
  position:relative;
  background: url('bg-login-page.png') center / cover no-repeat, #0b0d10;
}
.brand-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,13,16,.3), rgba(11,13,16,.8));
  backdrop-filter: blur(2px);
}
.brand-content{
  position:relative; z-index:1;
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding: 40px;
  text-align:center;
}
.brand-logo{width:160px; height:auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));}
.brand-content h1{margin:0; font-size: clamp(22px, 3vw, 36px); font-weight: 700;}
.brand-content p{margin:0; color:var(--muted)}

.form-side{
  background: var(--bg-2);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: 32px;
}

.card{
  width:min(480px, 100%);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.card-header h2{margin:0; font-size: 28px}
.card-header p{margin:6px 0 0; color:var(--muted)}

.alert{
  border-radius:12px; padding:12px 14px; margin:16px 0; font-size:14px;
}
.alert-error{background:#2a1214; border:1px solid #7a1a1e; color:#ffdadd}
.alert-success{background:#102515; border:1px solid #1f6d34; color:#d7ffe6}

.form{display:flex; flex-direction:column; gap:14px; margin-top:18px}

.field{display:flex; flex-direction:column; gap:8px}
.label-row{display:flex; align-items:center; justify-content:space-between}
label{font-weight:600}

input[type="email"], input[type="password"]{
  width:100%; padding:14px 14px;
  background: #0f1319;
  color: var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  outline: none;
  transition: border .2s, box-shadow .2s, transform .02s;
}
input:focus{
  border-color: rgba(215,25,33,.6);
  box-shadow: var(--ring);
}

.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.ghost{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  background:transparent; border:0; font-size:16px; cursor:pointer; color:var(--muted);
}
.ghost:focus{outline:none; box-shadow: var(--ring); border-radius:10px; padding:2px}

.checkbox{display:flex; align-items:center; gap:8px; user-select:none}
.checkbox input{accent-color: var(--brand)}

.options{display:flex; align-items:center; justify-content:space-between; margin:4px 0 6px}

.g-recaptcha{margin:6px 0 4px; transform:scale(1); transform-origin:left top}

.btn-primary{
  margin-top:6px;
  padding:14px 16px;
  width:100%;
  background: linear-gradient(180deg, #e02a31, #b2161c);
  border:1px solid #7a1a1e;
  color:white; font-weight:700; border-radius:14px;
  cursor:pointer; transition: filter .15s, transform .02s;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform: translateY(1px)}

.card-footer{margin-top:14px; display:flex; gap:8px; justify-content:center; color:var(--muted)}
.card-footer a{color:#ff868b; text-decoration: none}
.card-footer a:hover{text-decoration: underline}

.link-muted{color:var(--muted); text-decoration:none}
.link-muted:hover{text-decoration:underline}

.legal{margin-top:18px; display:flex; gap:10px; align-items:center; justify-content:center; color:var(--muted)}

@media (max-width: 960px){
  .split{grid-template-columns: 1fr}
  .brand-side{display:none}
  .form-side{padding:16px}
  .card{border-radius:16px}
}

/* Light theme (toggle via .light on body) */
body.light{
  --bg: #f4f6fa;
  --bg-2:#eef1f7;
  --card:#ffffffee;
  --text:#17202d;
  --muted:#556274;
  --shadow: 0 10px 30px rgba(13,24,42,.08);
}
body.light .brand-side{background-color:#eef1f7}
body.light .alert-error{background:#ffecec; border-color:#ffd0d2; color:#7f0e14}
body.light .alert-success{background:#e9ffee; border-color:#c9f3d3; color:#0d5525}