.login-page{min-height:100dvh;overflow-x:hidden;background:radial-gradient(1200px 700px at 15% 10%,#eef3ec 0,transparent 60%),radial-gradient(900px 600px at 90% 90%,#e9efe9 0,transparent 55%),#f5f7f3}
.backdrop{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#d9e2da 1px,transparent 1.2px);background-size:25px 25px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.orb.a{width:380px;height:380px;background:#cfe0d5;left:8%;top:12%}
.orb.b{width:300px;height:300px;background:#efe3cc;right:10%;top:20%;animation-delay:-7s}
.orb.c{width:340px;height:340px;background:#d9e3ee;left:35%;bottom:-6%;animation-delay:-13s}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.08)}}
.login-shell{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:18px}
.card{width:min(420px,100%);background:#ffffffd9;backdrop-filter:blur(18px) saturate(1.2);border:1px solid #ffffff;box-shadow:0 1px 0 #fff inset,0 30px 80px #1f362c1f,0 6px 20px #1f362c0d;border-radius:24px;padding:34px 34px 28px;animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.logo{width:150px;height:42px;object-fit:contain;display:block}
.steps{display:flex;gap:6px;margin:22px 0 4px}
.step{height:3px;width:28px;border-radius:3px;background:#e1e8e3;transition:background .3s,width .3s}
.step.on{background:var(--accent);width:40px}
.pane{display:flex;flex-direction:column;gap:14px;animation:fade .3s ease-out}
@keyframes fade{from{opacity:0;transform:translateX(8px)}}
.pane .eyebrow{margin:14px 0 0}
.pane h1{font:500 28px/1.15 Georgia,serif;letter-spacing:-.6px;margin:0}
.lead{font-size:13px;line-height:1.6;color:#6a7f74;margin:0 0 4px}
.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:#5c7266}
.field input{border:1px solid #d9e2db;background:#fbfcfa;border-radius:12px;padding:12px 13px;font-size:14px;font-weight:400;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.field input:focus{outline:0;border-color:#8eb5a8;background:white;box-shadow:0 0 0 4px #8eb5a833}
.password-wrap{position:relative;display:block}
.password-wrap input{width:100%;padding-right:62px}
.reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#eef3ee;color:#5c7266;border-radius:8px;padding:5px 9px;font-size:11px}
.code{font:600 30px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.42em;text-align:center;padding:14px 0 14px .42em;border:1px solid #d9e2db;border-radius:14px;background:#fbfcfa;color:var(--ink);width:100%}
.code:focus{outline:0;border-color:#8eb5a8;background:white;box-shadow:0 0 0 4px #8eb5a833}
.wide{width:100%;padding:13px;font-size:14px;border-radius:12px;margin-top:4px;transition:transform .1s,background .15s}
.wide:active{transform:scale(.99)}
.wide[aria-busy="true"]{opacity:.7;pointer-events:none}
.error{min-height:0;margin:0;font-size:12px;color:var(--danger)}
.error:empty{display:none}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.link{border:0;background:none;color:#5c7266;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:2px;align-self:center}
.qr-wrap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:#f4f7f2;border-radius:16px;padding:14px}
.qr{width:148px;height:148px;background:white;border-radius:12px;padding:4px;box-shadow:0 2px 10px #1f362c14}
.qr svg{width:100%;height:100%;display:block}
.secret{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#6a7f74;min-width:0}
.secret code{font:600 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);word-break:break-all;background:white;border-radius:8px;padding:6px 8px;user-select:all}
.secret .link{align-self:flex-start}
.secret-actions{display:flex;gap:14px;flex-wrap:wrap}
#passwordChangeForm .secret{font-size:12px;margin:4px 0 14px}
#passwordChangeForm .secret code{font-size:16px;letter-spacing:.04em;padding:10px 12px;border:1px solid #dfe7e2}
.foot{font-size:11px;color:#8a9a91;margin:0}
@media(max-width:440px){.card{padding:26px 20px 22px;border-radius:20px}.qr-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}.secret .link{align-self:center}}