.login-surface{--radius:10px;--radius-card:28px;--accent-fg:#fff;--outer:#eef2f9;--right-grad-a:#fff;--right-grad-b:#fafbfe;--right-radial-1:#2e6eff14;--right-radial-2:#2e6eff0d;--dot:#2e6eff0f;--card:#ffffffc7;--card-shadow:0 15px 45px #14285014, 0 5px 15px #1428500a;--card-glow:#2e6eff1f;--fg:#0f1729;--muted:#64748b;--accent:#2f6ef0;--accent-2:#3b7bf7;--shield:#2f6ef0;--card-ring:radial-gradient(150% 150% at 100% 0%, #4678ff8c 0%, #4678ff38 20%, #4678ff0f 42%, #4678ff00 68%);--card-edge-glow:#2e6eff33;min-height:100dvh;color:var(--fg);background:radial-gradient(circle at top right, var(--right-radial-1), transparent 35%), radial-gradient(circle at bottom left, var(--right-radial-2), transparent 40%), linear-gradient(180deg, var(--right-grad-a), var(--right-grad-b));justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:hidden}.dark .login-surface{--outer:#0a0e18;--right-grad-a:#0c111e;--right-grad-b:#0a0e1a;--right-radial-1:#4f7cff1f;--right-radial-2:#4f7cff0f;--dot:#4f7cff12;--card:#131a2c9e;--card-shadow:0 20px 50px #00000080;--card-glow:#4f7cff33;--fg:#eef2f9;--muted:#8a93a7;--accent:#3b6ef5;--accent-2:#4f86ff;--shield:#4f7cff;--card-ring:radial-gradient(150% 150% at 100% 0%, #96b4ffd9 0%, #6e96ff59 20%, #7896ff1a 42%, #7896ff00 68%);--card-edge-glow:#4f7cff6b}.login-surface:before{content:"";z-index:0;pointer-events:none;background-image:radial-gradient(var(--dot) 1px, transparent 1.6px);background-size:26px 26px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 35%,#0000 80%);mask-image:radial-gradient(#000 35%,#0000 80%)}.login-surface__glow{z-index:0;pointer-events:none;background:radial-gradient(circle, var(--card-glow), transparent 70%);filter:blur(40px);width:520px;height:520px;position:absolute;top:-80px;right:-120px}.login-surface__card{z-index:1;text-align:center;border-radius:var(--radius-card);background:var(--card);width:100%;max-width:400px;box-shadow:var(--card-shadow), 24px -20px 70px -18px var(--card-edge-glow);-webkit-backdrop-filter:blur(24px);border:1px solid #0000;padding:38px;animation:6s ease-in-out infinite loginSurfaceGlow;position:relative}.login-surface__card:before{content:"";border-radius:inherit;background:var(--card-ring);-webkit-mask-composite:xor;pointer-events:none;padding:1px;animation:6s ease-in-out infinite loginSurfaceRing;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes loginSurfaceGlow{0%,to{box-shadow:var(--card-shadow), 20px -16px 58px -22px var(--card-edge-glow)}50%{box-shadow:var(--card-shadow), 28px -22px 92px -12px var(--card-edge-glow)}}@keyframes loginSurfaceRing{0%,to{opacity:.7;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.15)}}@media (prefers-reduced-motion:reduce){.login-surface__card,.login-surface__card:before{animation:none}}.login-surface__shield{width:56px;height:56px;stroke:var(--shield);fill:color-mix(in srgb, var(--shield) 16%, transparent);filter:drop-shadow(0 8px 20px color-mix(in srgb, var(--shield) 35%, transparent));margin:0 auto 20px;display:block}.login-surface__title{letter-spacing:-.3px;color:var(--fg);margin:0;font-size:24px;font-weight:700}.login-surface__subtitle{color:var(--muted);margin:10px 0 28px;font-size:14px;line-height:1.55}.login-surface__button{border-radius:var(--radius);background:linear-gradient(180deg, var(--accent-2), var(--accent));width:100%;height:50px;color:var(--accent-fg);cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);border:none;font-family:inherit;font-size:15px;font-weight:600;transition:filter .18s,box-shadow .18s,transform 50ms}.login-surface__button:hover{filter:brightness(1.06)}.login-surface__button:active{transform:translateY(1px)}