:root{
  --brand-bg1:#ff4d6d;
  --brand-bg2:#d450b1;
  --brand-bg3:#7e3af2;
  --accent:#E94F88;       /* pink used in the dealer/lock dashboards */
  --accent-dark:#d1457a;
  --btn:#000;             /* live login button is black, not the CSS blue */
  --btn-hover:#333;
  --text:#333;
  --muted:#666;
  --error:#e74b3b;
  --field-border:#d9d9de;
}

*{box-sizing:border-box;}

html,body{height:100%;margin:0;padding:0;}

.pv-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(135deg,var(--brand-bg1) 0%,var(--brand-bg2) 50%,var(--brand-bg3) 100%);
  background:
    url('https://dealer.mypayvantage.com/img/Dealer_Portal_Login_Back.png') no-repeat center center fixed,
    linear-gradient(135deg,var(--brand-bg1) 0%,var(--brand-bg2) 50%,var(--brand-bg3) 100%);
  background-size:cover;
}

.pv-wrap{width:100%;max-width:440px;}

.pv-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  padding:40px 36px 32px;
  width:100%;
}

.pv-logo{text-align:center;margin-bottom:22px;}
.pv-logo img{height:46px;width:auto;}

.pv-header{margin:0 0 18px;text-align:center;}
.pv-title{font-size:1.35rem;font-weight:700;margin:0;color:var(--text);}

.pv-form{display:flex;flex-direction:column;gap:16px;}

.pv-field{display:flex;flex-direction:column;gap:6px;}
.pv-field label{font-size:.82rem;font-weight:600;color:var(--muted);}

.pv-field input[type=text],
.pv-field input[type=password]{
  width:100%;
  padding:12px 14px;
  font-size:.95rem;
  border:1px solid var(--field-border);
  border-radius:10px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.pv-field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(233,79,136,.15);
}
.pv-field input[aria-invalid=true]{border-color:var(--error);}

.pv-password{position:relative;display:flex;align-items:center;}
.pv-password input{padding-right:64px;flex:1;}
.pv-toggle{
  position:absolute;right:8px;
  background:none;border:none;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--accent);
  padding:6px 8px;
}
.pv-toggle:hover{color:var(--accent-dark);}

.pv-hint{font-size:.75rem;color:var(--muted);}
.pv-field-error{font-size:.8rem;color:var(--error);}

.pv-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:.85rem;min-height:20px;
}
.pv-check{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;font-weight:500;}

.pv-link{color:var(--accent);text-decoration:none;font-weight:600;}
.pv-link:hover{color:var(--accent-dark);text-decoration:underline;}
.pv-back{display:inline-block;margin-top:4px;text-align:center;}

.pv-btn{
  width:100%;
  padding:13px 16px;
  margin-top:4px;
  font-size:.95rem;font-weight:600;
  color:#fff;background:var(--btn);
  border:none;border-radius:10px;cursor:pointer;
  transition:background .15s;
}
.pv-btn:hover{background:var(--btn-hover);}
.pv-btn:disabled{opacity:.6;cursor:default;}
.pv-btn-ghost{background:#f2f2f4;color:var(--text);}
.pv-btn-ghost:hover{background:#e6e6ea;}

.pv-alert{
  border-radius:10px;padding:11px 14px;margin-bottom:16px;
  font-size:.85rem;line-height:1.4;
}
.pv-alert-error{background:#fdecea;color:#a1281c;border:1px solid #f5c6c0;}
.pv-alert-success{background:#eaf7ee;color:#1e6b38;border:1px solid #bfe3ca;}
.pv-alert-warning{background:#fff6e6;color:#8a5b00;border:1px solid #f2dca6;}
.pv-alert-info{background:#eaf1fd;color:#1c4ba1;border:1px solid #c0d4f5;}

.pv-info,.pv-register{margin-top:20px;text-align:center;font-size:.88rem;color:var(--muted);}
.pv-muted{margin-top:14px;text-align:center;font-size:.85rem;color:var(--muted);}

.pv-footer{margin-top:18px;text-align:center;font-size:.78rem;color:rgba(255,255,255,.85);}

@media (max-width:480px){
  .pv-card{padding:32px 22px 26px;border-radius:14px;}
}