*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#fff;overflow:hidden;
  background:radial-gradient(1200px 700px at 20% 10%,#5b3df5 0,transparent 60%),radial-gradient(900px 700px at 90% 90%,#0aa7d6 0,transparent 55%),#0b1030}
main{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(0)}
#lock{align-items:flex-start;justify-content:flex-end;padding:8vh 6vw;cursor:pointer}
.clock #time{font-size:clamp(64px,12vw,140px);font-weight:300;line-height:1}
.clock #date{font-size:clamp(18px,2.5vw,28px);margin-top:6px;opacity:.9}
.hint{position:absolute;bottom:6vh;left:0;right:0;text-align:center;opacity:.7;font-size:14px}
#login{background:rgba(10,14,40,.45);backdrop-filter:blur(24px)}
#login[hidden],#lock[hidden]{display:none}
.logo{height:120px;width:auto;filter:drop-shadow(0 8px 20px #0008);margin-bottom:14px}
h1{font-size:22px;font-weight:600;text-align:center;margin:0 0 22px;line-height:1.3}
form{width:min(320px,86vw);display:flex;flex-direction:column;gap:10px}
input{height:40px;border-radius:6px;border:1px solid #ffffff55;background:#ffffff22;color:#fff;padding:0 12px;font-size:15px;outline:none}
input::placeholder{color:#fffa}
input:focus{border-color:#fff;background:#ffffff33}
button{height:40px;border:0;border-radius:6px;background:#fff;color:#1a1f4d;font-weight:600;font-size:15px;cursor:pointer}
button:hover{background:#e8ecff}
button:disabled{opacity:.6;cursor:wait}
#err{min-height:20px;color:#ffb4b4;font-size:13.5px;text-align:center}
small{position:absolute;bottom:4vh;opacity:.6}