:root{
  --mc-primary:#2d50d7;
  --mc-primary-600:#2545ba;
  --mc-primary-700:#1e3a99;
  --mc-bg:#0f172a;
  --mc-bg-2:#0b1229;
  --mc-card:#0f1426;
  --mc-text:#e5e7eb;
  --mc-muted:#94a3b8;
  --mc-border:#23304d;
  --radius:16px;
  --radius-sm:12px;
  --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(--mc-text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(45,80,215,.35), transparent 60%),
              radial-gradient(1000px 700px at 120% 20%, rgba(30,58,153,.25), transparent 40%),
              linear-gradient(180deg, #0b1229 0%, #0f172a 60%, #0b1229 100%);
}

/* Layout */
.auth-layout{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  min-height:100vh;
}
.brand-panel{
  position:relative;
  background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
}
.brand-overlay{
  inset:0;
  position:absolute;
  background: linear-gradient(120deg, rgba(11,18,41,.9) 0%, rgba(13,20,46,.7) 50%, rgba(45,80,215,.45) 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px;
}
.brand-header{
  display:flex; align-items:center; gap:16px;
}
.brand-logo{height:40px; width:auto}
.brand-header h1{margin:0; font-size:28px; letter-spacing:.3px}
.brand-copy h2{font-size:32px; margin:0 0 8px 0}
.brand-copy p{margin:0; color:var(--mc-muted)}
.brand-footer .whatsapp{
  display:inline-block; padding:12px 16px; border-radius:999px; background: #25D366; color:#0b1229; text-decoration:none; font-weight:600;
  box-shadow: var(--shadow);
}

/* Right panel / Card */
.auth-panel{
  display:grid; place-items:center; padding:32px;
}
.auth-card{
  width:100%; max-width:520px; background:var(--mc-card); border:1px solid var(--mc-border);
  border-radius:var(--radius); padding:28px; box-shadow: var(--shadow);
}
.auth-header{display:flex; gap:16px; align-items:center; margin-bottom:16px}
.auth-logo{height:36px}
.auth-header h2{margin:0; font-size:24px}
.auth-header p{margin:4px 0 0 0; color:var(--mc-muted)}

.form-group{margin-top:16px}
label{display:block; margin-bottom:8px; font-weight:600}
input[type="email"], input[type="password"]{
  width:100%; padding:14px 14px; background:#0c1224; border:1px solid var(--mc-border); color:var(--mc-text);
  border-radius:var(--radius-sm); outline:none; transition:border-color .2s, box-shadow .2s;
}
input::placeholder{color:#6b7280}
input:focus{border-color:var(--mc-primary); box-shadow:0 0 0 4px rgba(45,80,215,.2)}

.password-field{position:relative}
.icon-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; border-radius:10px; background:transparent; cursor:pointer;
}
.icon-btn::before{
  content:"👁️"; font-size:16px; opacity:.7;
}
.icon-btn.active::before{content:"🙈"}

.error{display:block; height:18px; color:#fca5a5; font-size:12px; margin-top:6px}

.form-row{margin-top:12px; display:flex; align-items:center; justify-content:space-between}
.checkbox{display:flex; align-items:center; gap:8px; user-select:none; cursor:pointer}
.checkbox input{width:16px; height:16px}
.link{color:var(--mc-text); text-decoration:underline; text-underline-offset:3px}
.link:hover{color:#fff}

.recaptcha-placeholder{
  margin:16px 0; height:78px; border:1px dashed var(--mc-border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--mc-muted);
}

.btn-primary{
  width:100%; padding:14px 16px; border:none; border-radius:12px; background:var(--mc-primary);
  color:white; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.btn-primary:hover{background:var(--mc-primary-600)}
.btn-primary:active{background:var(--mc-primary-700)}
.btn-spinner{
  width:18px; height:18px; border-radius:999px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin 1s linear infinite; display:none;
}
.btn-loading .btn-spinner{display:inline-block}
.btn-loading .btn-label{opacity:.7}

@keyframes spin{to{transform:rotate(360deg)}}

.divider{
  margin:16px 0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}

.social-row{display:flex; gap:12px}
.btn-ghost{
  flex:1; padding:12px 14px; border:1px solid var(--mc-border); background:#0c1224; color:var(--mc-text);
  border-radius:12px; cursor:pointer; font-weight:600;
}
.btn-ghost:hover{border-color:#2a3a5f}

.auth-footer{margin-top:16px; text-align:center}
.auth-footer p{margin:0 0 8px 0}
.legal{display:flex; gap:8px; justify-content:center; color:var(--mc-muted)}

@media (max-width: 980px){
  .auth-layout{grid-template-columns: 1fr;}
  .brand-panel{display:none}
  .auth-panel{padding:24px}
  .auth-card{padding:22px}
}