:root {
  --void:    #02080f;
  --deep:    #050f1c;
  --panel:   #081524;
  --surface: #0c1d30;

  --mh1:     #72fcbc;
  --mh2:     #d9ffe4;
  --mh-rim:  rgba(114,252,188,0.18);
  --mh-rim2: rgba(114,252,188,0.07);

  --white:   #eef3f8;
  --dim:     rgba(238,243,248,0.45);
  --faint:   rgba(238,243,248,0.18);

  --err:     #ff5c72;
  --err-rim: rgba(255,92,114,0.22);
  --err-rim2:rgba(255,92,114,0.08);

  --pulse:   #72fcbc;
  --pulse-rim: rgba(114,252,188,0.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(114,252,188,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(217,255,228,0.05), transparent 60%),
    var(--void);
  font-family:'Outfit',sans-serif;font-weight:300;color:var(--white);
  letter-spacing:.01em;position:relative;overflow:hidden;padding:24px;
}

body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
}

.pulse-ring{
  position:fixed;left:50%;top:50%;border-radius:50%;
  border:1px solid var(--mh-rim);
  transform:translate(-50%,-50%);
  animation:ringPulse 4s ease-out infinite;
  pointer-events:none;z-index:0;
}
.pulse-ring:nth-child(1){width:420px;height:420px;animation-delay:0s}
.pulse-ring:nth-child(2){width:680px;height:680px;animation-delay:1.3s}
.pulse-ring:nth-child(3){width:940px;height:940px;animation-delay:2.6s}
@keyframes ringPulse{
  0%{transform:translate(-50%,-50%) scale(.7);opacity:.7;border-color:rgba(114,252,188,.22)}
  100%{transform:translate(-50%,-50%) scale(1.08);opacity:0;border-color:rgba(114,252,188,0)}
}

.form-container{
  position:relative;z-index:1;width:420px;max-width:100%;
  background:rgba(8,21,36,0.55);
  backdrop-filter:blur(28px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter:blur(28px) saturate(1.6) brightness(1.05);
  border:1px solid var(--mh-rim);
  border-radius:20px;
  padding:0 40px 40px;
  box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
  opacity:0;animation:cardIn .7s .1s ease forwards;
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.ecg-band{
  width:calc(100% + 80px);margin:0 -40px 8px;height:56px;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(114,252,188,0.08), transparent);
  border-bottom:1px solid var(--mh-rim);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
.ecg-band svg{position:absolute;top:0;left:0;height:100%;width:200%}
.ecg-trace {
  fill: none;
  stroke: #ff0000;
  stroke-width: 1.5;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  animation: ecgMove 4s linear infinite;
}
@keyframes ecgMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.ecg-dot {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
  animation: dotBeat 1.5s ease-in-out infinite;
}
@keyframes dotBeat {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.8); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.4); }
}

.brand-row{display:flex;flex-direction:column;align-items:center;margin-bottom:1.6rem}
.logo-link{display:inline-block;margin-bottom:14px;border-radius:50%;position:relative}
.logo-link::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle, rgba(114,252,188,.35), transparent 70%);
  filter:blur(6px);z-index:-1;
}
.logo{width:64px;height:auto;display:block}

.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mh2);padding:6px 14px;border-radius:100px;
  border:1px solid var(--mh-rim);background:var(--mh-rim2);margin-bottom:14px;
}
.status-dot {
  width: 6px;
  height: 6px;
  background-color: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 4px #ff0000, 0 0 8px #ff0000;
  animation: blink 1s infinite;
  display: inline-block;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.brand-row h1{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.1rem;
  letter-spacing:-.01em;color:var(--white);
}
.brand-row h1 em{font-style:italic;color:var(--mh2)}

.maker-mark{
  display:inline-flex;align-items:center;gap:6px;margin-top:.5rem;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;
}
.maker-mark::before{content:'';width:12px;height:1px;background:var(--mh-rim)}
.maker-mark::after{content:'';width:12px;height:1px;background:var(--mh-rim)}
.maker-mark span{
  background:linear-gradient(90deg,var(--dim) 0%,var(--mh2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  transition:filter .25s;
}
.maker-mark:hover span{filter:brightness(1.3)}

form{margin-top:1.8rem}
.form-group{margin-bottom:1.3rem}
.form-group label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;
}

.field-wrap{position:relative;display:flex;align-items:center}
.field-wrap input{
  width:100%;
  background:var(--surface) !important;
  border:1px solid var(--mh-rim);
  border-radius:10px;
  color:var(--white);
  font-family:'Outfit',sans-serif;font-weight:300;font-size:.9rem;
  padding:13px 16px;
  transition:border-color .25s, box-shadow .25s;
  -webkit-text-fill-color:var(--white);
  caret-color:var(--mh2);
}
.field-wrap input:-webkit-autofill,
.field-wrap input:-webkit-autofill:hover,
.field-wrap input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color:var(--white) !important;
  transition:background-color 9999s ease-in-out 0s;
}
.field-wrap input::placeholder{color:var(--faint)}
.field-wrap input:focus{
  outline:none;
  border-color:rgba(217,255,228,.55);
  box-shadow:0 0 0 3px var(--mh-rim2), 0 0 20px rgba(114,252,188,.15);
}
.field-wrap input.field-error{
  border-color:rgba(255,92,114,.6);
  box-shadow:0 0 0 3px var(--err-rim2);
}

#togglePassword{
  position:absolute;right:14px;cursor:pointer;color:var(--dim);
  display:flex;align-items:center;transition:color .2s;
}
#togglePassword:hover{color:var(--mh2)}
#togglePassword svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}

.error-message{
  display:none;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.03em;
  color:var(--err);margin-top:8px;
  padding:7px 10px;border-radius:6px;
  background:var(--err-rim2);border:1px solid var(--err-rim);
  animation:shakeIn .3s ease;
}
.error-message.show{display:flex}
.error-message .code{color:rgba(255,92,114,.65)}
@keyframes shakeIn{
  0%{opacity:0;transform:translateX(-4px)}
  30%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  100%{opacity:1;transform:translateX(0)}
}

.form-banner{
  display:flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.03em;
  color:var(--err);padding:11px 14px;border-radius:8px;
  background:var(--err-rim2);border:1px solid var(--err-rim);
  margin-bottom:1.4rem;
}

.btn-ed{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Outfit',sans-serif;font-weight:500;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:0;height:50px;border:none;cursor:pointer;
  position:relative;overflow:visible;margin-top:.4rem;
  background:linear-gradient(180deg,rgba(114,252,188,0.22) 0%,rgba(114,252,188,0.08) 100%);
  color:#fff;
  clip-path:polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition:all .28s ease;
}
.btn-ed::before{
  content:'';position:absolute;top:0;left:12px;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(217,255,228,0.4) 20%,rgba(217,255,228,0.9) 50%,rgba(217,255,228,0.4) 80%,transparent 100%);
  box-shadow:0 0 10px rgba(217,255,228,0.6),0 0 20px rgba(217,255,228,0.3);
  transition:all .3s ease;
}
.btn-ed::after{
  content:'';position:absolute;bottom:0;left:0;right:12px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(217,255,228,0.4) 20%,rgba(217,255,228,0.9) 50%,rgba(217,255,228,0.4) 80%,transparent 100%);
  box-shadow:0 0 10px rgba(217,255,228,0.6),0 0 20px rgba(217,255,228,0.3);
  transition:all .3s ease;
}
.btn-ed:hover{
  background:linear-gradient(180deg,rgba(114,252,188,0.32) 0%,rgba(114,252,188,0.12) 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(114,252,188,0.3),inset 0 0 30px rgba(114,252,188,0.08);
}
.btn-ed:hover::before,.btn-ed:hover::after{
  box-shadow:0 0 15px rgba(217,255,228,0.9),0 0 35px rgba(217,255,228,0.5);
}
.btn-ed:active{transform:translateY(1px)}
.btn-ed:disabled{opacity:.55;cursor:not-allowed;transform:none}

.foot-link{
  display:block;text-align:center;margin-top:1.6rem;
  font-size:.82rem;color:var(--dim);
}
.foot-link a{color:var(--mh2);text-decoration:none;border-bottom:1px solid rgba(217,255,228,.3);transition:color .2s,border-color .2s}
.foot-link a:hover{color:var(--white);border-color:var(--white)}

@media(max-width:480px){
  .form-container{padding:0 24px 32px;border-radius:16px}
  .ecg-band{width:calc(100% + 48px);margin:0 -24px 8px}
}
@media (prefers-reduced-motion: reduce){
  .pulse-ring,.ecg-trace,.status-dot,.ecg-dot,.form-container{animation:none}
}

.brand-row {
  padding-top: 40px;
}