*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;min-height:100vh;display:grid;place-items:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background-color:#05100a;color:#d8e4f0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.001 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to top left,rgba(0,0,0,0.80),rgba(0,0,0,0.97)),
    linear-gradient(45deg,#30c060 0%,#3060e0 100%);
  background-attachment:fixed;
}
.wrap{width:100%;max-width:400px;padding:20px}
.card{
  position:relative;width:100%;padding:36px 32px;border-radius:14px;
  background:rgba(10,20,35,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(120,160,220,0.18);
  box-shadow:0 24px 60px rgba(0,0,0,0.55),inset 0 0 0 1px rgba(255,255,255,0.02);
  display:flex;flex-direction:column;gap:14px;
}
.brand{text-align:center;margin-bottom:4px}
.logo{
  width:44px;height:44px;margin:0 auto 12px;border-radius:12px;
  display:grid;place-items:center;font-weight:700;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#2a5fd6,#1a3a8a);
  box-shadow:0 8px 24px rgba(42,95,214,0.35);
}
h1{margin:0;font-size:19px;font-weight:600;letter-spacing:0.4px;color:#cfe0f0}
.sub{margin:6px 0 0;font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:#6a8ab0}
.field{display:block;margin:0 0 14px 0}
input{
  width:100%;padding:13px 15px;border-radius:8px;border:1px solid transparent;
  background:#ffffff;color:#0a1420;font-size:14px;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
input::placeholder{color:#8b98a8}
input:focus{border-color:#4a8fff;box-shadow:0 0 0 3px rgba(74,143,255,0.22)}
input.error{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,0.2)}
.btn-primary{
  margin:4px auto 0 auto;display:block;padding:13px 15px;border:none;border-radius:8px;
  background:linear-gradient(135deg,#2a5fd6,#1a3a8a);color:#fff;
  font-size:14px;font-weight:600;font-family:inherit;letter-spacing:0.3px;cursor:pointer;
  transition:transform .15s,box-shadow .2s,filter .2s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(42,95,214,0.35);filter:brightness(1.08)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-secondary{
  margin-top:4px;padding:13px 15px;border:1px solid rgba(120,160,220,0.3);border-radius:8px;
  background:transparent;color:#a8c0dc;font-size:14px;font-weight:600;font-family:inherit;letter-spacing:0.3px;
  cursor:pointer;transition:transform .15s,background .2s;
}
.btn-secondary:hover{background:rgba(120,160,220,0.1)}
.btn-secondary:active{transform:translateY(0)}
.links{text-align:center;margin-top:2px}
.links a{color:#7a96b4;font-size:12.5px;text-decoration:none}
.links a:hover{color:#a8c0dc;text-decoration:underline}
.msg{margin:0;padding:9px 12px;border-radius:7px;font-size:12.5px;line-height:1.4;display:none}
.msg.visible{display:block}
.msg-notfound{color:#ffb4b4;background:rgba(255,80,80,0.09);border:1px solid rgba(255,80,80,0.22)}
.msg-disabled{color:#ffd28a;background:rgba(255,180,60,0.09);border:1px solid rgba(255,180,60,0.22)}
.msg-success{color:#9ee5b8;background:rgba(60,200,120,0.09);border:1px solid rgba(60,200,120,0.22)}
#formFields.hidden{display:none}
.spinner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 0}
.spinner[hidden]{display:none}
.ring{width:38px;height:38px;border-radius:50%;border:3px solid rgba(120,160,220,0.18);border-top-color:#4a8fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-text{font-size:12.5px;letter-spacing:0.4px;color:#8fa8c4}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,5,12,0.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10;padding:20px}
.modal.open{display:grid}
.modal-card{
  width:100%;max-width:340px;padding:30px 26px;border-radius:14px;
  background:rgba(10,20,35,0.94);border:1px solid rgba(120,160,220,0.22);
  box-shadow:0 24px 60px rgba(0,0,0,0.65);display:flex;flex-direction:column;gap:14px;
}
.modal-card h2{margin:0;font-size:17px;font-weight:600;text-align:center;color:#cfe0f0}
.modal-card p{margin:0;font-size:12.5px;text-align:center;color:#8fa8c4;line-height:1.45}