@font-face { font-family: 'Albert Sans'; src: url('/login/fonts/albert-sans-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Albert Sans', -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; background: #F8F8FB; color: #1C1A19; }
[hidden] { display: none !important; }
.page { min-height: 100vh; display: flex; }
.brand { flex: 0 0 50%; position: relative; overflow: hidden; padding: 48px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0051CF 0%, #0063FF 40%, #093881 100%); }
.circle { position: absolute; border-radius: 50%; }
.c1 { top: -15%; right: -10%; width: 500px; height: 500px; background: rgba(255,255,255,.04); }
.c2 { bottom: -20%; left: -15%; width: 600px; height: 600px; background: rgba(255,255,255,.03); }
.c3 { top: 30%; left: 10%; width: 200px; height: 200px; background: rgba(255,255,255,.02); }
.grid { position: absolute; inset: 0; opacity: .03; background-size: 60px 60px;
  background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); }
.brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.logo { height: 52px; filter: brightness(0) invert(1); opacity: .95; }
.rule { width: 48px; height: 2px; background: rgba(255,255,255,.25); border-radius: 1px; }
.tag { font-size: 22px; font-weight: 300; color: rgba(255,255,255,.95); line-height: 1.5; letter-spacing: -.01em; max-width: 380px; margin: 0; }
.sub { font-size: 13px; color: rgba(255,255,255,.45); margin: 16px 0 0; letter-spacing: .02em; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.pills span { padding: 6px 16px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 500; letter-spacing: .03em; }
.copy { position: absolute; bottom: 28px; margin: 0; color: rgba(255,255,255,.25); font-size: 11px; }
.form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 32px; position: relative; }
.glow { position: absolute; top: 15%; right: 10%; width: 300px; height: 300px; border-radius: 50%; background: rgba(0,99,255,.03); filter: blur(80px); pointer-events: none; }
.card { position: relative; z-index: 1; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px; }
form { display: flex; flex-direction: column; gap: 20px; }
.head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.head p { font-size: 14px; color: #9DA2B3; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 11px; font-weight: 600; color: #9DA2B3; letter-spacing: .05em; text-transform: uppercase; }
input { width: 100%; height: 48px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #E0E3ED; background: #fff; font: 14px 'Albert Sans', sans-serif; color: #1C1A19; outline: none; transition: all .2s cubic-bezier(.4,0,.2,1); }
input:focus { border-color: #0063FF; box-shadow: 0 0 0 3px rgba(0,99,255,.15); }
.otp { letter-spacing: .5em; font-size: 20px; text-align: center; font-weight: 600; }
.pw { position: relative; } .pw input { padding-right: 48px; }
.eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px; cursor: pointer; color: #9DA2B3; display: flex; border-radius: 6px; }
.eye:hover { color: #575A66; }
.primary { width: 100%; height: 50px; border-radius: 10px; border: 0; color: #fff; font: 600 15px 'Albert Sans', sans-serif; cursor: pointer;
  background: linear-gradient(135deg, #0063FF 0%, #0051CF 100%); box-shadow: 0 4px 14px rgba(0,99,255,.25); transition: transform .15s, box-shadow .15s; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,99,255,.3); }
.primary:disabled { background: #9DA2B3; box-shadow: none; cursor: default; transform: none; }
.link { background: none; border: 0; color: #0063FF; font: 500 12px 'Albert Sans', sans-serif; cursor: pointer; padding: 0; align-self: center; }
.err { background: #FEF0EF; border: 1px solid rgba(229,57,53,.2); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.err i { width: 6px; height: 6px; border-radius: 50%; background: #E53935; flex: none; }
.err span { font-size: 13px; color: #E53935; font-weight: 500; }
.foot { font-size: 12px; color: #9DA2B3; margin: 0; text-align: center; }
.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@media (max-width: 900px) { .brand { display: none; } }
.ok { background: #E8F6EF; border: 1px solid rgba(0,135,90,.2); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.ok i { width: 6px; height: 6px; border-radius: 50%; background: #00875A; flex: none; }
.ok span { font-size: 13px; color: #00875A; font-weight: 500; }
.row-end { display: flex; justify-content: flex-end; margin-top: -8px; }
.row-split { display: flex; justify-content: space-between; align-items: center; }
.hint { font-size: 13px; color: #575A66; background: #F1F4FB; border: 1px solid #E0E3ED; border-radius: 10px; padding: 12px 16px; }
.qr { display: flex; justify-content: center; }
.qr #qr { background: #fff; padding: 12px; border: 1px solid #E0E3ED; border-radius: 12px; line-height: 0; }
.qr svg { width: 196px; height: 196px; }
.manual summary { font-size: 12px; color: #0063FF; cursor: pointer; }
.manual code { display: block; margin-top: 8px; padding: 10px 12px; background: #F1F4FB; border-radius: 8px; font: 13px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; word-break: break-all; user-select: all; }