
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.sv-login{min-height:100vh;overflow:hidden;background:#06142a;color:#fff}
.sv-bg{
  position:fixed;inset:0;
  background:url("login-background.jpg") center/cover no-repeat;
  filter:saturate(1.12) contrast(1.05) brightness(.98);
  transform:scale(1.012)
}
.sv-overlay{
  position:fixed;inset:0;
  background:
    linear-gradient(90deg,rgba(6,15,30,.08),rgba(6,15,30,.04) 44%,rgba(6,15,30,.13)),
    linear-gradient(180deg,rgba(4,10,20,.05),rgba(4,10,20,.12))
}
.sv-top{
  position:fixed;z-index:20;left:0;right:0;top:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:24px 38px
}
.sv-back{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:12px;
  color:#fff;text-decoration:none;font-size:14px;font-weight:700;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,rgba(75,16,26,.5),rgba(24,12,18,.32));
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.16)
}
.sv-top-right{text-align:right}
.sv-status{font-size:12px;color:rgba(255,255,255,.88);margin-bottom:3px}
.sv-status i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#37e28b;margin-right:7px;box-shadow:0 0 10px rgba(55,226,139,.9)}
.sv-wordmark{font-size:27px;font-weight:900;letter-spacing:-.03em}.sv-wordmark span{color:#ef263e}.sv-wordmark b{display:inline-block;width:8px;height:8px;background:#3681ff;border-radius:50%;vertical-align:top;margin:2px 0 0 3px}
.sv-tagline{font-size:12px;color:rgba(255,255,255,.9)}
.sv-main{position:relative;z-index:10;min-height:100vh;display:grid;place-items:center;padding:90px 20px 70px}
.sv-card{
  width:min(535px,calc(100vw - 36px));
  border-radius:30px;
  background:linear-gradient(180deg,rgba(16,63,137,.88) 0 18%,rgba(235,242,252,.96) 18% 100%);
  border:1px solid rgba(169,211,255,.42);
  box-shadow:0 34px 95px rgba(0,0,0,.32),0 0 0 10px rgba(100,169,255,.12);
  backdrop-filter:blur(18px);
  overflow:hidden
}
.sv-card-top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:124px;padding:28px 38px;
  background:
    radial-gradient(circle at 78% 30%,rgba(62,111,255,.58),transparent 35%),
    linear-gradient(135deg,rgba(8,43,101,.96),rgba(8,76,173,.9))
}
.sv-card-wordmark{font-size:28px;font-weight:900;letter-spacing:-.04em}.sv-card-wordmark span{color:#ff273e}.sv-card-brand small{font-size:13px;color:#e9f1ff}
.sv-card-values{border-left:2px solid #ff263f;padding-left:18px;display:grid;gap:2px;font-size:13px;font-weight:650;letter-spacing:.03em}
.sv-card-body{color:#12213a;padding:28px 38px 24px;background:linear-gradient(180deg,rgba(248,251,255,.98),rgba(235,242,252,.98))}
.sv-card h1{margin:0;text-align:center;font-size:30px;letter-spacing:-.04em}
.sv-sub{text-align:center;color:#53617a;margin:7px 0 28px;font-size:13px}
.sv-form{display:grid;gap:10px}.sv-form label,.sv-password-head label{font-size:12px;font-weight:750;color:#31435f}
.sv-password-head{display:flex;align-items:center;justify-content:space-between;margin-top:2px}.sv-password-head a{font-size:12px;color:#ff263f;text-decoration:none;font-weight:700}
.sv-input-wrap{position:relative}.sv-input-wrap input{
  width:100%;height:54px;border-radius:12px;border:1px solid #cfd9e9;background:#fff;color:#11223e;font-size:14px;padding:0 48px;
  outline:none;box-shadow:0 6px 18px rgba(34,65,118,.04)
}.sv-input-wrap input:focus{border-color:#4d77f8;box-shadow:0 0 0 3px rgba(77,119,248,.12)}
.sv-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:19px;color:#31527f}.sv-eye{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#2f548b}
.sv-remember{display:flex!important;align-items:center;gap:9px;margin:2px 0 4px}.sv-remember input{width:18px;height:18px;accent-color:#1769ff}
.sv-submit{
  height:55px;border:0;border-radius:14px;background:linear-gradient(90deg,#fb202f,#ff2939);
  color:#fff;font-size:16px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;
  box-shadow:0 14px 26px rgba(235,28,51,.24)
}.sv-submit:hover{transform:translateY(-1px);filter:brightness(1.03)}
.sv-soft-divider{height:1px;background:#dce4ef;margin:23px 0 15px}.sv-access-copy{text-align:center;font-size:12px;color:#55647b;margin:0 0 18px}.sv-access-copy a{color:#374b68;text-decoration:none}
.sv-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dce4ef}
.sv-shortcuts a{padding:14px 8px 2px;text-align:center;text-decoration:none;color:#0e2e61;border-right:1px solid #dce4ef}.sv-shortcuts a:last-child{border-right:0}
.sv-shortcut-icon{display:block;font-size:27px;color:#1168ff;margin-bottom:5px}.sv-shortcuts strong{font-size:11px;line-height:1.2}
.sv-footer{
  position:fixed;z-index:20;left:0;right:0;bottom:0;min-height:54px;padding:0 38px;
  display:flex;align-items:center;justify-content:space-between;
  color:rgba(255,255,255,.9);font-size:11px;
  background:linear-gradient(90deg,rgba(4,19,43,.92),rgba(53,4,12,.9));
  border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)
}.sv-footer nav{display:flex;gap:24px}.sv-footer a{color:#fff;text-decoration:none}
@media(max-width:760px){
  body.sv-login{overflow:auto}.sv-top{position:absolute;padding:16px}.sv-status,.sv-tagline{display:none}.sv-wordmark{font-size:20px}
  .sv-main{padding:95px 14px 86px;place-items:start center}.sv-card{width:100%;border-radius:22px}.sv-card-top{padding:24px;min-height:112px}
  .sv-card-body{padding:24px 20px}.sv-card-values{font-size:11px}.sv-footer{position:relative;min-height:auto;padding:16px;display:block;text-align:center}.sv-footer nav{justify-content:center;flex-wrap:wrap;margin-top:10px;gap:14px}
}

/* R4.1 final visual cleanup:
   The top overlay was duplicated visually by the background composition.
   Hide the HTML top overlay and preserve the approved central login composition. */
.sv-top{
  display:none !important;
}
.sv-main{
  padding-top:54px;
}

/* R4.2 final finish:
   neutralizes the two baked-in top labels from the approved background
   without altering the central card or footer. */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:46px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(15,18,36,.96) 0%,
      rgba(44,12,24,.94) 22%,
      rgba(17,19,34,.90) 50%,
      rgba(42,12,23,.94) 78%,
      rgba(14,17,31,.96) 100%);
}
.sv-main,
.login-shell,
.login-card,
main{
  position:relative;
  z-index:2;
}
