* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #ec4899 100%);
  display: flex; flex-direction: column; align-items: center; overflow-y: auto;
}
.clock { margin-top: 9vh; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
#time { font-size: clamp(64px, 12vw, 104px); font-weight: 600; letter-spacing: -2px; line-height: 1; }
#date { font-size: 20px; font-weight: 500; opacity: .9; margin-top: 8px; text-transform: capitalize; }
.card { margin: 7vh 16px 40px; width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  font-size: 38px; font-weight: 600; background: rgba(255,255,255,.25);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
form { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
input {
  width: 100%; padding: 10px 14px; border-radius: 10px; font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); outline: none;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
input::placeholder { color: rgba(255,255,255,.7); }
input:focus { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.28); }
.pw { position: relative; }
.pw input { padding-right: 44px; }
.pw button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border-radius: 50%; border: 0; cursor: pointer; font-size: 16px; color: #333; background: rgba(255,255,255,.85);
}
.pw button:disabled { opacity: .5; cursor: default; }
h2 { margin: 4px 0 0; font-size: 18px; text-align: center; }
.hint { margin: 4px 0 0; font-size: 13px; opacity: .9; }
#qr { width: 200px; height: 200px; align-self: center; border-radius: 12px; background: #fff; padding: 6px; }
.secret { margin: 0; font-size: 12px; text-align: center; opacity: .85; word-break: break-all; }
.secret code { font-size: 13px; user-select: all; }
#error { min-height: 20px; margin: 0; font-size: 14px; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }