/* Trust OPM — sign-in page.
 *
 * The Sales Pulse 365 sign-in styling, carried across so the two platforms
 * present the same front door: the teal gradient field with its drifting orbs
 * and particles, the brand panel beside a frosted credential card, and the
 * teal-to-gold action button.
 */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:#1a1a1a;overflow:hidden;
}

/* ------------------------------------------------------------- the field -- */
.sp-login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f766e 0%,#0d9488 25%,#14b8a6 50%,#a7f3d0 75%,#f0fdf4 100%);
  position:relative;overflow:hidden;
}
.sp-login-wrap::before{
  content:'';position:absolute;width:600px;height:600px;
  background:radial-gradient(circle,rgba(240,199,94,.15) 0%,transparent 70%);
  top:-150px;right:-150px;border-radius:50%;animation:sp-float 8s ease-in-out infinite;
}
.sp-login-wrap::after{
  content:'';position:absolute;width:500px;height:500px;
  background:radial-gradient(circle,rgba(13,148,136,.12) 0%,transparent 70%);
  bottom:-100px;left:-100px;border-radius:50%;animation:sp-float 10s ease-in-out infinite reverse;
}
@keyframes sp-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-30px) scale(1.05)}
}

.sp-particle{position:absolute;border-radius:50%;opacity:.3;animation:sp-drift linear infinite}
.sp-particle:nth-child(1){width:6px;height:6px;background:#f0c75e;top:20%;left:15%;animation-duration:12s}
.sp-particle:nth-child(2){width:4px;height:4px;background:#fff;top:60%;left:80%;animation-duration:15s;animation-delay:-3s}
.sp-particle:nth-child(3){width:8px;height:8px;background:#14b8a6;top:80%;left:25%;animation-duration:18s;animation-delay:-6s}
.sp-particle:nth-child(4){width:5px;height:5px;background:#f0c75e;top:10%;left:70%;animation-duration:14s;animation-delay:-2s}
.sp-particle:nth-child(5){width:3px;height:3px;background:#fff;top:45%;left:50%;animation-duration:16s;animation-delay:-8s}
.sp-particle:nth-child(6){width:7px;height:7px;background:#0d9488;top:70%;left:60%;animation-duration:20s;animation-delay:-4s}
@keyframes sp-drift{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:.4}
  90%{opacity:.4}
  100%{transform:translateY(-100vh) rotate(720deg);opacity:0}
}

.sp-grid{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ---------------------------------------------------------- the card ------ */
.sp-login-container{
  display:flex;width:920px;max-width:95vw;min-height:540px;position:relative;z-index:2;
  box-shadow:0 25px 60px rgba(0,0,0,.15);border-radius:20px;
}

.sp-login-left{
  flex:1;background:linear-gradient(160deg,#0f766e 0%,#0d9488 40%,#115e59 100%);
  border-radius:20px 0 0 20px;padding:50px 40px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;position:relative;overflow:hidden;
}
.sp-login-left::before{
  content:'';position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(240,199,94,.12) 0%,transparent 70%);
  top:-50px;right:-50px;border-radius:50%;
}
.sp-login-left::after{
  content:'';position:absolute;width:200px;height:200px;
  background:radial-gradient(circle,rgba(20,184,166,.15) 0%,transparent 70%);
  bottom:-30px;left:-30px;border-radius:50%;
}
.sp-left-content{position:relative;z-index:2;text-align:center;color:#fff}
.sp-main-logo{
  max-width:320px;width:85%;height:auto;margin-bottom:24px;
  filter:drop-shadow(0 4px 15px rgba(0,0,0,.2));
}
.sp-app-title{
  font-size:26px;font-weight:800;letter-spacing:1.5px;color:#fff;margin:0 0 18px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.sp-app-desc{font-size:12.5px;opacity:.6;line-height:1.6;max-width:260px;margin:0 auto}
.sp-app-sop{margin-top:22px;font-size:10.5px;letter-spacing:1.4px;opacity:.45;text-transform:uppercase}

.sp-pulse-dots{display:flex;gap:6px;margin-top:28px;justify-content:center}
.sp-pulse-dots span{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);
  animation:sp-dot-pulse 2s ease-in-out infinite;
}
.sp-pulse-dots span:nth-child(1){animation-delay:0s;background:#f0c75e}
.sp-pulse-dots span:nth-child(2){animation-delay:.3s}
.sp-pulse-dots span:nth-child(3){animation-delay:.6s}
.sp-pulse-dots span:nth-child(4){animation-delay:.9s}
@keyframes sp-dot-pulse{
  0%,100%{transform:scale(1);opacity:.4}
  50%{transform:scale(1.5);opacity:1}
}

/* ------------------------------------------------------------ the form ---- */
.sp-login-right{
  flex:1;background:rgba(255,255,255,.88);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border-radius:0 20px 20px 0;padding:48px 42px;
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid rgba(255,255,255,.5);border-left:none;position:relative;
}
.sp-login-right::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0d9488,#14b8a6,#f0c75e,#fbbf24);
  border-radius:0 20px 0 0;
}
.sp-secure-badge{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#0d9488;
  font-size:11px;font-weight:700;letter-spacing:1px;padding:5px 14px;
  border-radius:20px;border:1px solid #a7f3d0;margin-bottom:22px;
}
.sp-secure-badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}

.sp-form-title{font-size:28px;font-weight:800;color:#1a1a1a;margin-bottom:4px}
.sp-form-title span{color:#0d9488}
.sp-form-subtitle{font-size:13px;color:#6b7280;margin-bottom:28px}

.sp-input-group{margin-bottom:18px}
.sp-input-label{
  display:block;font-size:12px;font-weight:600;color:#374151;
  margin-bottom:6px;letter-spacing:.5px;
}
.sp-input-wrap{position:relative;display:flex;align-items:center}
.sp-input-wrap .sp-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#9ca3af;z-index:2;pointer-events:none;transition:color .2s;display:grid;place-items:center;
}
.sp-input-wrap .sp-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-input-wrap input{
  width:100%;padding:12px 42px 12px 40px;border:2px solid #e5e7eb;border-radius:12px;
  font:14px/1.4 inherit;color:#1f2937;background:rgba(255,255,255,.8);
  transition:all .3s ease;outline:none;
}
.sp-input-wrap input:focus{border-color:#0d9488;box-shadow:0 0 0 4px rgba(13,148,136,.1);background:#fff}
.sp-input-wrap input:focus~.sp-icon{color:#0d9488}
.sp-eye-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;padding:4px;cursor:pointer;color:#9ca3af;
  z-index:2;transition:color .2s;display:grid;place-items:center;
}
.sp-eye-toggle:hover{color:#0d9488}
.sp-eye-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.sp-error{
  display:flex;gap:8px;align-items:flex-start;margin-bottom:18px;padding:10px 12px;
  border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12.5px;
}
.sp-error svg{width:15px;height:15px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2}

.sp-btn-row{display:flex;gap:10px;margin-top:6px;margin-bottom:16px}
.sp-btn-signin{
  flex:2;padding:13px 0;border:none;border-radius:12px;
  background:linear-gradient(135deg,#0d9488 0%,#14b8a6 50%,#f0c75e 100%);
  background-size:200% 100%;color:#fff;font:700 15px/1 inherit;letter-spacing:.5px;
  cursor:pointer;transition:all .4s ease;
}
.sp-btn-signin:hover{background-position:right center;box-shadow:0 8px 25px rgba(13,148,136,.3);transform:translateY(-1px)}
.sp-btn-signin:active{transform:translateY(0)}
.sp-btn-clear{
  flex:1;padding:13px 0;border:2px solid #e5e7eb;border-radius:12px;background:transparent;
  color:#6b7280;font:600 14px/1 inherit;cursor:pointer;transition:all .3s ease;
}
.sp-btn-clear:hover{border-color:#d1d5db;background:#f9fafb;color:#374151}

.sp-forgot-link{text-align:center}
.sp-forgot-link a{color:#0d9488;font-size:13px;font-weight:600;text-decoration:none}
.sp-forgot-link a:hover{color:#f0c75e}

.sp-footer-text{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:22px;text-align:center;font-size:11px;color:#9ca3af;
}
.sp-footer-text svg{width:11px;height:11px;color:#0d9488;stroke:currentColor;fill:none;stroke-width:2}

@media (max-width:768px){
  body{overflow:auto}
  .sp-login-container{flex-direction:column;width:92vw;min-height:auto}
  .sp-login-left{border-radius:20px 20px 0 0;padding:35px 25px}
  .sp-login-right{border-radius:0 0 20px 20px;padding:30px 25px;border-left:1px solid rgba(255,255,255,.5)}
  .sp-login-right::before{border-radius:0}
}