:root{--navy:#082957;--blue:#4e8fda;--ice:#eaf4fd;--line:rgba(170,199,224,.78)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--navy);background:#dce8f2}
body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.test-login-shell{position:fixed;inset:0;min-width:320px;min-height:560px;display:grid;place-items:center;overflow:hidden;background:#dce8f2}
.test-login-shell::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(8,41,87,.02))}
.test-login-content{position:relative;z-index:2;width:min(780px,calc(100vw - 64px));display:flex;flex-direction:column;align-items:center;text-align:center}
.test-brand{display:flex;flex-direction:column;align-items:center;text-shadow:0 1px 18px rgba(255,255,255,.76)}
.test-logo{width:90px;height:94px;object-fit:contain;display:block;filter:drop-shadow(0 8px 24px rgba(7,41,86,.18))}
.test-wordmark strong{display:block;margin-top:3px;font-size:40px;line-height:1;font-weight:760;letter-spacing:.30em;text-indent:.30em;text-transform:uppercase}
.test-wordmark span{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;font-size:11px;line-height:1;font-weight:800;letter-spacing:.38em;text-indent:.38em;text-transform:uppercase}
.test-wordmark i{width:68px;height:1px;background:rgba(8,41,87,.42)}
.test-brand p{margin:18px 0 0;font-size:13px;font-weight:600;color:#31567e}
.test-glass-card{width:100%;margin-top:26px;padding:20px 22px 16px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(250,253,255,.50);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:0 22px 65px rgba(10,49,86,.22),inset 0 1px 0 rgba(255,255,255,.88),0 0 0 1px rgba(103,151,193,.12)}
.test-error{margin:0 0 14px;padding:11px 13px;border:1px solid rgba(201,91,108,.35);border-radius:10px;background:rgba(255,241,244,.72);color:#913b49;font-size:13px;text-align:left}
.test-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.test-field{position:relative;display:block}
.test-field input{width:100%;height:54px;padding:0 48px;border:1px solid rgba(147,184,215,.72);border-radius:11px;outline:none;background:#fff;color:#173c69;font:inherit;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.86);transition:border-color .16s,background .16s,box-shadow .16s}
.test-field input::placeholder{color:#6985a1}
.test-field input:-webkit-autofill,
.test-field input:-webkit-autofill:hover,
.test-field input:-webkit-autofill:focus,
.test-field input:-webkit-autofill:active{
  -webkit-text-fill-color:#173c69!important;
  caret-color:#173c69!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
  background:#fff!important;
  transition:background-color 9999s ease-out 0s;
}

.test-field input:focus{border-color:#6f9fc9;background:#fff;box-shadow:0 0 0 4px rgba(78,143,218,.10),inset 0 1px 0 rgba(255,255,255,.92)}
.test-field-icon,.test-eye{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:#4d7197;pointer-events:none}
.test-field-icon{left:15px;width:22px;height:22px}.test-eye{right:15px;width:20px;height:20px}
.test-field-icon svg,.test-eye svg,.test-security svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.test-actions{display:grid;grid-template-columns:1fr 44%;gap:16px;align-items:center;margin-top:14px}
.test-remember{display:flex;align-items:center;gap:10px;color:#365274;font-size:13px;font-weight:600;text-align:left}
.test-remember input{position:absolute;opacity:0;pointer-events:none}
.test-check{position:relative;width:20px;height:20px;border-radius:5px;border:1px solid rgba(123,164,199,.78);background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.test-remember input:checked+.test-check{background:#e7f1fa;border-color:#6d9dcc}
.test-remember input:checked+.test-check::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:10px;border:solid #245f97;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
.test-signin{height:54px;border:0;border-radius:11px;background:linear-gradient(180deg,#0b356a,#082957);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 12px 26px rgba(8,41,87,.20);position:relative;transition:transform .15s,box-shadow .15s,filter .15s}
.test-signin:hover{filter:brightness(1.06);box-shadow:0 15px 32px rgba(8,41,87,.25)}
.test-signin b{position:absolute;right:18px;top:50%;transform:translateY(-53%);font-size:21px;font-weight:400}
.test-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(149,181,207,.35);color:#52708e;font-size:12px}
.test-security svg{width:16px;height:16px}
.test-footer{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 14px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(6,35,62,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f8fbff;text-shadow:0 1px 3px rgba(0,24,45,.72);font-size:10px;white-space:nowrap}
.test-footer i{font-style:normal;opacity:.72}
@media(max-width:760px){.test-login-content{width:calc(100vw - 28px)}.test-fields,.test-actions{grid-template-columns:1fr}.test-glass-card{padding:18px 16px}.test-wordmark strong{font-size:31px}.test-wordmark i{width:42px}.test-footer{white-space:normal;flex-wrap:wrap;width:calc(100vw - 28px);bottom:14px}.test-login-shell{position:relative;min-height:100dvh;padding:50px 0 90px}}




/* v3: background is a real image element so CSP cannot suppress it. */
.test-bg-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:none;transform:none}
.test-login-shell::after{z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(8,41,87,.02))}
.test-login-content,.test-footer{z-index:2}
.test-glass-card{background:rgba(250,253,255,.50)!important;backdrop-filter:blur(18px) saturate(140%)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important}


/* v4 · lighter true-glass card + unified bottom metadata row */
.test-glass-card{
  background:rgba(244,250,255,.26)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  backdrop-filter:blur(9px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(118%)!important;
  box-shadow:0 20px 54px rgba(9,43,74,.18),inset 0 1px 0 rgba(255,255,255,.54)!important;
}
.test-field input{
  background:rgba(255,255,255,.42)!important;
  border-color:rgba(194,216,233,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52)!important;
}
.test-field input:focus{background:rgba(255,255,255,.58)!important}
.test-meta-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(158,187,211,.32);
}
.test-security{
  justify-content:flex-start!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  text-align:left!important;
  white-space:nowrap;
}
.test-footer{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  color:#4f6e8c!important;
  text-shadow:none!important;
  font-size:10px!important;
  white-space:nowrap!important;
}
.test-footer i{opacity:.55!important}
@media(max-width:760px){
  .test-meta-row{grid-template-columns:1fr;gap:8px}
  .test-security,.test-footer{justify-content:center!important;text-align:center!important;white-space:normal!important}
}


/* v0.5.9 · lighter glass experiment */
.test-glass-card{
  background:rgba(242,249,254,.16)!important;
  border-color:rgba(255,255,255,.46)!important;
  backdrop-filter:blur(5px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(112%)!important;
  box-shadow:0 18px 46px rgba(8,38,66,.15),inset 0 1px 0 rgba(255,255,255,.38)!important;
}
.test-field input{
  background:rgba(255,255,255,.30)!important;
  border-color:rgba(215,231,243,.76)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40)!important;
}
.test-field input:focus{background:rgba(255,255,255,.42)!important}
.test-check{background:rgba(255,255,255,.30)!important}
.test-meta-row{border-top-color:rgba(182,207,226,.28)!important}


/* v6 · main login promotion */
.test-eye-button{border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto!important}
.test-eye-button:hover{color:#174f84}

/* v0.6.3 · premium login micro-interactions + lighter sign-in */
/* Keep credential fields crisp white, including autofill and focus states. */
.test-field input,
.test-field input:hover,
.test-field input:focus{
  background:#fff!important;
}
.test-field input:hover{
  border-color:rgba(112,162,203,.92)!important;
  box-shadow:0 5px 16px rgba(24,85,135,.08),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.test-field input:focus{
  border-color:#6d9fca!important;
  box-shadow:0 0 0 4px rgba(78,143,218,.12),0 7px 20px rgba(24,85,135,.09),inset 0 1px 0 #fff!important;
}
.test-field input:-webkit-autofill,
.test-field input:-webkit-autofill:hover,
.test-field input:-webkit-autofill:focus,
.test-field input:-webkit-autofill:active{
  -webkit-text-fill-color:#173c69!important;
  caret-color:#173c69!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
  background:#fff!important;
}

/* Match the sign-in button width to the password field exactly. */
.test-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
}

/* Lighter Tumlare blue, subtle lift, moving highlight, and arrow response. */
.test-signin{
  width:100%!important;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,#2d88bd 0%,#246fa9 56%,#1d609d 100%)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 10px 24px rgba(19,82,133,.18),inset 0 1px 0 rgba(255,255,255,.24)!important;
  font-weight:720!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease!important;
}
.test-signin::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-45%;
  left:-28%;
  width:26%;
  height:190%;
  transform:skewX(-22deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.test-signin:hover{
  transform:translateY(-1px);
  filter:brightness(1.04) saturate(1.03)!important;
  box-shadow:0 15px 32px rgba(19,82,133,.23),0 0 0 3px rgba(92,166,216,.08),inset 0 1px 0 rgba(255,255,255,.3)!important;
}
.test-signin:hover::before{transform:skewX(-22deg) translateX(570%)}
.test-signin:active{
  transform:translateY(0) scale(.995);
  box-shadow:0 7px 16px rgba(19,82,133,.18),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
.test-signin b{transition:transform .18s ease!important}
.test-signin:hover b{transform:translate(3px,-53%)!important}
.test-signin:focus-visible{outline:3px solid rgba(94,169,219,.28);outline-offset:3px}

/* Remember-me remains bold, just less blocky, with a small hover response. */
.test-remember{font-weight:600!important;transition:color .16s ease!important}
.test-remember:hover{color:#214f7b!important}
.test-check{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease!important}
.test-remember:hover .test-check{border-color:#75a5cd!important;box-shadow:0 0 0 3px rgba(86,150,205,.08)!important}
.test-remember:active .test-check{transform:scale(.96)}

/* Gentle first-load motion. No constant bouncing or distracting loops. */
.test-brand{animation:tumlareLoginRise .58s cubic-bezier(.2,.72,.2,1) both}
.test-glass-card{animation:tumlareLoginRise .7s .08s cubic-bezier(.2,.72,.2,1) both}
@keyframes tumlareLoginRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Slow ambient light behind the login, kept deliberately faint. */
.test-login-shell::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-12%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 51% 55%,rgba(232,249,255,.18) 0%,rgba(143,208,238,.055) 27%,transparent 54%),
    radial-gradient(ellipse at 73% 31%,rgba(255,244,214,.09) 0%,transparent 38%);
  opacity:.72;
  transform:scale(1);
  animation:tumlareAmbient 11s ease-in-out infinite alternate;
}
@keyframes tumlareAmbient{
  from{opacity:.55;transform:scale(1)}
  to{opacity:.82;transform:scale(1.018)}
}

@media(prefers-reduced-motion:reduce){
  .test-brand,.test-glass-card,.test-login-shell::before{animation:none!important}
  .test-signin,.test-signin::before,.test-signin b,.test-check{transition:none!important}
}

/* v0.6.7 · second-factor login state */
.test-twofa-card{padding-top:17px!important}
.test-twofa-intro{display:flex;align-items:center;gap:11px;width:614px;max-width:100%;margin:0 auto 13px;padding:10px 12px;border:1px solid rgba(173,204,225,.72);border-radius:10px;background:rgba(244,250,254,.78);color:#466782}
.test-twofa-orb{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#eaf6fc,#dcecf7);color:#2b709f;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.test-twofa-orb svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.test-twofa-intro strong{display:block;color:#264f73;font-size:11px;letter-spacing:.02em}.test-twofa-intro span:not(.test-twofa-orb){display:block;margin-top:2px;color:#6c859a;font-size:9px;line-height:1.45}
.test-twofa-fields{grid-template-columns:614px!important}.test-twofa-fields .test-field input{text-align:center;letter-spacing:.07em;font-variant-numeric:tabular-nums}
.test-twofa-actions{grid-template-columns:300px 300px!important}.test-twofa-back{display:flex;align-items:center;color:#416680;font-size:10px;font-weight:600;text-decoration:none}.test-twofa-back:hover{color:#1e5d8d;text-decoration:underline}
@media(max-width:760px){.test-twofa-intro{width:100%}.test-twofa-fields,.test-twofa-actions{grid-template-columns:1fr!important}.test-twofa-back{min-height:36px;justify-content:center;order:2}}


/* v0.6.8 · aligned second-factor layout with inline verification */
.test-twofa-shell{width:614px;max-width:100%;margin:0 auto}
.test-twofa-intro{width:100%!important;margin:0 0 13px!important}
.test-twofa-verify-row{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:12px;align-items:center;width:100%;margin:0 auto}
.test-twofa-code-field input{text-align:center;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.test-twofa-submit{width:100%;height:54px}
.test-twofa-utility-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.test-twofa-switch{padding:0;border:0;background:transparent;color:#416680;font:inherit;font-size:10px;font-weight:700;cursor:pointer;text-decoration:none}
.test-twofa-switch:hover{color:#1e5d8d;text-decoration:underline}
.test-twofa-mode-note{margin:6px 0 0;color:#6f8598;font-size:9px;line-height:1.45;text-align:right}
@media(max-width:760px){.test-twofa-shell{width:100%}.test-twofa-verify-row{grid-template-columns:1fr}.test-twofa-utility-row{flex-direction:column;align-items:center}.test-twofa-mode-note{text-align:center}}

/* v0.6.9 · Keep the TOTP field focused without the blue outer halo. */
.test-twofa-code-field input:focus{
  outline:none!important;
  border-color:rgba(102,151,190,.88)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96)!important;
}