/* Admin sign-in: a full white page, the liquid orb in the middle, and one minimal line along the bottom:
   User name | Password | → . White surfaces and grey text only. Solid colours only. */
*{box-sizing:border-box}
html,body{margin:0;background:#fff}
body{color:#64748b;font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;overflow-x:hidden}
.lg{position:relative;min-height:100vh;display:flex;flex-direction:column}
.lg-top{position:absolute;left:36px;right:36px;top:28px;display:flex;align-items:center;z-index:2;animation:lgRise .9s .2s cubic-bezier(.2,.8,.2,1) both}
.lg-brand img{display:block;height:55px;width:auto}
.lg-stage{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:72px 24px 120px}
.lg-orb{width:min(760px,92vw,calc(100vh - 210px));aspect-ratio:1/1;animation:lgBloom 1.6s cubic-bezier(.2,.8,.2,1) both}
.lg-orb canvas{width:100%;height:100%;display:block}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the bottom line */
.lg-form{position:absolute;left:0;right:0;bottom:36px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 20px;animation:lgRise .9s .7s cubic-bezier(.2,.8,.2,1) both}
.lg-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;background:#fff}
.lg-field{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:500;color:#64748b;cursor:text}
.lg-field span{white-space:nowrap}
.lg-line{width:150px;height:44px;border:0;background:#fff;font:inherit;font-size:15px;font-weight:400;color:#64748b;caret-color:#64748b;padding:0 2px;border-radius:0}
.lg-line:focus{outline:none}
/* Browser autofill paints fields blue: keep them white with grey text. */
.lg-line:-webkit-autofill,.lg-line:-webkit-autofill:hover,.lg-line:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#64748b;transition:background-color 9999s}
.lg-line:autofill{background:#fff;color:#64748b}
.lg-line::placeholder{color:#94a3b8}
.lg-line.otp{width:170px;font-family:"Cascadia Mono",Consolas,monospace;font-size:17px;letter-spacing:.2em}
.lg-sep{width:1px;height:20px;background:#cbd5e1;font-size:0;color:transparent;user-select:none}
.go{width:44px;height:44px;flex:none;border:1px solid #e2e8f0;border-radius:50%;background:#fff;color:#64748b;cursor:pointer;display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s}
.go:hover{border-color:#94a3b8;color:#475569;transform:translateX(3px)}
.go:active{transform:scale(.95)}
.go:focus-visible{outline:2px solid #cbd5e1;outline-offset:2px}
.go canvas{width:20px;height:20px}
.lg-err{margin:0;font-size:13px;font-weight:600;color:#64748b}
.lg-again{font-size:13px;color:#64748b;text-decoration:none;white-space:nowrap}
.lg-again:hover{text-decoration:underline}
@keyframes lgBloom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes lgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .lg-stage{flex:none;min-height:auto;padding:80px 24px 24px}
  .lg-orb{width:92vw}
  .lg-form{position:static;margin:0 0 32px}
  .lg-bar{flex-direction:column;align-items:stretch;gap:4px}
  .lg-sep{display:none}
  .lg-field{justify-content:space-between}
  .lg-line{flex:1}
  .go{align-self:center;margin-top:8px}
}