.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:34px 30px;box-shadow:0 5px 16px #0f507508;backdrop-filter:blur(12px)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.login-brand img{width:52px;height:49px}
.login-brand span{font-size:15px;color:var(--sub);font-weight:500}
.login-card h1{font-size:21px;margin-bottom:9px}
.login-card .lede{font-size:12px;color:var(--sub);line-height:1.75;margin-bottom:24px}
.login-card label{display:block;font-size:10px;font-weight:550;margin-bottom:8px}
.login-card .cf-input{margin-bottom:16px}
.login-card button[type=submit]{width:100%;justify-content:center}
.code-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}
.code-box{text-align:center;font-size:21px;font-variant-numeric:tabular-nums;padding:10px 0;min-height:48px;margin:0}
.code-box:focus{outline:2px solid var(--green);outline-offset:1px}
.code-boxes.shake{animation:code-shake .3s}
@keyframes code-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hint{font-size:10px;color:var(--sub);line-height:1.7;margin:0 0 14px}
.msg{font-size:11px;line-height:1.7;margin:14px 0 0;min-height:16px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--green)}
.login-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:10px;color:var(--sub);line-height:1.8}
.linkish{background:none;border:0;color:var(--green);font-size:10px;padding:6px 0;
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}