/* =========================================================
   Forms & Auth
   ========================================================= */

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-group label{font-weight:600;font-size:13px;color:var(--text)}
.field-group input,.field-group select,.field-group textarea{
  padding:13px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);
  font-size:14px;outline:none;transition:.2s;
}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{
  border-color:var(--primary-2);box-shadow:0 0 0 4px rgba(30,136,229,.12);
}
.field-group textarea{resize:vertical;min-height:110px}
.field-icon{position:relative}
.field-icon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.field-icon input{padding-left:42px}
.pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--text-muted)}
.pw-strength{height:5px;background:var(--bg-2);border-radius:3px;margin-top:6px;overflow:hidden}
.pw-strength div{height:100%;width:0;transition:.3s;background:var(--danger)}
.check-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted);cursor:pointer}
.upload-box{
  border:2px dashed var(--border);border-radius:14px;padding:22px;text-align:center;
  transition:.2s;cursor:pointer;background:var(--surface);
}
.upload-box:hover{border-color:var(--primary-2);background:rgba(30,136,229,.03)}
.upload-box i{font-size:28px;color:var(--primary-2);margin-bottom:8px}
.upload-box small{display:block;color:var(--text-muted);font-size:12px;margin-top:4px}

.auth-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;max-width:1100px;margin:calc(var(--header-h) + 20px) auto 60px;padding:0 20px}
.auth-visual{
  background:var(--grad-primary);border-radius:24px;padding:40px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;min-height:520px;
}
.auth-visual::before{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.10)}
.auth-visual::after{content:"";position:absolute;bottom:-80px;left:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.auth-visual h2{color:#fff;font-size:32px;position:relative;z-index:1}
.auth-visual p{opacity:.9;position:relative;z-index:1;margin-top:10px}
.auth-visual ul{list-style:none;position:relative;z-index:1;margin-top:20px}
.auth-visual ul li{display:flex;gap:12px;align-items:center;margin-bottom:12px;font-size:14px}
.auth-visual ul li i{width:28px;height:28px;background:rgba(255,255,255,.18);border-radius:8px;display:grid;place-items:center;font-size:12px}
.auth-form{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px}
.social-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.social-btn{
  padding:11px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:500;cursor:pointer;transition:.2s;
}
.social-btn:hover{border-color:var(--primary-2);color:var(--primary)}
.social-btn.g i{color:#EA4335}
.social-btn.fb i{color:#1877F2}
.divider-x{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-muted);font-size:12px}
.divider-x::before,.divider-x::after{content:"";flex:1;height:1px;background:var(--border)}

@media(max-width:820px){
  .auth-form{padding:28px}
  .auth-visual{padding:30px;min-height:360px}
}