/* ===== Login page ===== */
.lg{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 10% -10%,#3b8bff 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#173f9b 0%,transparent 60%),linear-gradient(135deg,#1f5fd6,#0f2f78)}
.lg::before,.lg::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.lg::before{width:420px;height:420px;left:-140px;bottom:-140px;border:60px solid rgba(255,255,255,.06)}
.lg::after{width:300px;height:300px;right:-90px;top:-90px;background:rgba(255,255,255,.07)}
.lg-wrap{position:relative;z-index:1;width:100%;max-width:400px}
.lg-card{background:#fff;border-radius:20px;padding:84px 28px 26px;position:relative;margin-top:46px;box-shadow:0 24px 60px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.1);animation:lgIn .5s ease both}
.lg-logo{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.22);border:4px solid #fff;overflow:hidden}
.lg-logo img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
.lg-logo svg{width:42px;height:42px;color:var(--brand)}
.lg-card h1{text-align:center;margin:0 0 4px;font-size:22px;letter-spacing:.01em}
.lg-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 22px}
.lg-f{position:relative;margin-bottom:14px}
.lg-f label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.lg-in{position:relative}
.lg-in>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#8a93a6;pointer-events:none}
.lg-in input{padding:12px 44px 12px 40px;min-height:46px;border-radius:10px;background:#f7f9fb;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s,background .15s}
.lg-in input:focus{outline:0;background:#fff;border-color:var(--brand2);box-shadow:0 0 0 4px rgba(31,95,214,.18)}
.lg-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:#8a93a6;padding:0}
.lg-eye:hover{background:#eef1f6;color:var(--ink)}
.lg-eye svg{width:19px;height:19px}
.lg-btn{width:100%;margin-top:6px;border:0;border-radius:10px;min-height:48px;font:inherit;font-weight:700;font-size:16px;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 8px 18px rgba(31,95,214,.32);transition:transform .12s,box-shadow .12s,filter .12s}
.lg-btn:hover{filter:brightness(1.06);box-shadow:0 10px 22px rgba(31,95,214,.4)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn[disabled]{opacity:.7;cursor:wait}
.lg-err{display:flex;gap:8px;align-items:center;background:var(--badbg);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:16px;animation:lgShake .4s ease}
.lg-err svg{width:18px;height:18px;flex:none}
.lg-foot{text-align:center;color:rgba(255,255,255,.75);font-size:12.5px;margin-top:18px}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lgShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:420px){.lg-card{padding:80px 20px 22px}.lg-in input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.lg-card,.lg-err{animation:none}}

/* ===== extra: notices & links ===== */
.lg-ok{display:flex;gap:8px;align-items:center;background:var(--okbg);color:#085c3a;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:16px}
.lg-ok svg{width:18px;height:18px;flex:none}
.lg-links{text-align:center;margin-top:16px;font-size:14px}
.lg-links a{color:var(--brand);text-decoration:none;font-weight:600}
.lg-links a:hover{text-decoration:underline}
.lg-text{font-size:14px;color:var(--muted);margin:0 0 16px;text-align:center}