body.login { display: grid; place-items: center; min-height: 100dvh; overflow: hidden; background: var(--grad); }
.sky { position: fixed; inset: 0; overflow: hidden; }
.sky .w { position: absolute; left: -50%; width: 200%; height: 60vh; border-radius: 45%; background: rgba(255,255,255,.07); animation: drift 14s linear infinite; }
.sky .w1 { top: 55%; } .sky .w2 { top: 62%; animation-duration: 19s; animation-direction: reverse; background: rgba(255,255,255,.05); } .sky .w3 { top: 70%; animation-duration: 24s; }
@keyframes drift { to { transform: rotate(360deg); } }
.trail { position: absolute; inset: 10% 0 auto; width: 100%; height: 60%; }
.trail path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; animation: ants 1.4s linear infinite; }
.pinf { position: absolute; top: 12%; right: 14%; font-size: 34px; animation: float 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.lcard { position: relative; width: min(360px, 88vw); padding: 30px 24px 24px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 40px 80px -30px rgba(4,22,51,.8);
  animation: msgIn .8s var(--spring) both .1s; }
.llogo { width: 84px; height: 84px; margin: -72px auto 8px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.llogo svg { width: 54px; height: 54px; }
.llogo .needle { transform-origin: 32px 32px; animation: spin 3s var(--ease) infinite; }
.lcard h1 { margin: 6px 0 2px; color: var(--b900); font-size: 26px; }
.lcard > p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.lcard label { display: block; text-align: start; margin-bottom: 14px; }
.lcard label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.lcard input { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--b50); outline: none; font-size: 17px; transition: all .2s; }
.lcard input:focus { border-color: var(--b400); background: #fff; box-shadow: 0 0 0 4px rgba(42,127,240,.14); }
.lcard .btn { width: 100%; height: 52px; font-size: 16px; }
.lcard .spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spinIc .8s linear infinite; }
.lcard .btn.load span { display: none; } .lcard .btn.load .spin { display: block; }
.setup { margin: -6px 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--b100); color: var(--b800); font-size: 13.5px; line-height: 1.6; }
.lerr { min-height: 22px; margin-top: 10px; color: #c92a2a; font-size: 13px; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }