/* Auth modal styles - tosca & white theme */
/* Modal backdrop */
.auth-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99998;
}
.auth-modal-backdrop.show{display:flex}

  :root{
    /* Map legacy auth-specific tosca vars to global palette */
    --tosca: var(--primary-color);
    --tosca-dark: var(--primary-dark);
    --white: #ffffff;
    --muted: #f4f6f7;
    --text: #263238;
  }
.auth-modal{
  width:900px;
  max-width:95%;
  background:var(--white);
  border-radius:12px;
  display:flex;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.2);
  font-family: 'Montserrat', sans-serif;
}
.auth-left{
  width:48%;
  padding:36px 32px;
  background:linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}
.auth-right{
  width:52%;
  background:linear-gradient(180deg, rgba(19,195,201,0.06), rgba(19,195,201,0.02));
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.auth-brand{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.auth-brand .logo-square{
  width:40px;height:40px;border-radius:8px;background:var(--tosca);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;
}
.auth-title{font-size:26px;margin:12px 0 4px;color:var(--text);font-weight:700}
.auth-sub{color:#6b7885;font-size:13px;margin-bottom:18px}

.social-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;background:#f6f9f9;border:1px solid #eef3f3;color:#333;cursor:pointer;margin-bottom:10px}
.social-btn .icon{width:28px;height:28;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}

.or-sep{display:flex;align-items:center;gap:12px;margin:18px 0;color:#9aa7b0;font-size:13px}
.or-sep::before,.or-sep::after{content:'';flex:1;height:1px;background:#eceff1}

.input-group{margin-bottom:12px}
.input-group input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #e7eef0;background:var(--muted);outline:none}
.input-group input:focus{border-color:var(--tosca-dark);box-shadow:0 4px 12px rgba(19,195,201,0.08)}

.auth-action{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.btn-auth-primary{background:var(--tosca);color:#fff;padding:12px 18px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.btn-auth-outline{background:#fff;border:1px solid #e8f2f1;color:var(--text);padding:10px 14px;border-radius:8px;cursor:pointer}

.small-link{font-size:13px;color:#6b7885;text-decoration:underline;cursor:pointer}
.switch-mode{margin-top:12px;text-align:center;color:#6b7885}
.switch-mode a{color:var(--tosca);font-weight:600;cursor:pointer;text-decoration:none}

/* Right illustration area */
.auth-illustration{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
 
.auth-illustration img{max-width:320px;opacity:0.98}

/* Responsive */
@media (max-width:880px){
  .auth-modal{flex-direction:column}
  .auth-left,.auth-right{width:100%}
  .auth-right{padding:30px}
}

/* Small tweaks for buttons inside modal */
.auth-modal .close-auth{position:absolute;right:18px;top:12px;background:transparent;border:none;font-size:22px;color:#666;cursor:pointer}

/* Accessibility */
.auth-modal [aria-hidden="true"]{display:none}

/* tiny helper for errors */
.input-error{border-color:#ff6b6b !important}
.error-text{color:#ff6b6b;font-size:13px;margin-top:6px}