/* The sign-in page (Gal, 25.10): the Premium look with one calm, living moment, like an Apple wallpaper.
   A soft colour mesh drifts slowly, glass bubbles float up, and the form sits on frosted glass. Always light, whatever theme was picked before. */
.login{--cta-a:#3F7BFF;--cta-b:#1FBFA6;--cta:linear-gradient(135deg,var(--cta-a),var(--cta-b));--cta-glow:rgba(40,160,200,.32);
 background:#F5F6F8;overflow:hidden;isolation:isolate;color:#0B0D12;color-scheme:light}
body:has(#login:not([hidden])) .stars,body:has(#login:not([hidden])) .earthwrap,body:has(#login:not([hidden])) .veil{display:none}
/* the mesh: big soft colour fields, blurred together and drifting */
.lgx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lgx .mesh{position:absolute;inset:-30%;filter:blur(60px) saturate(1.25);
 background:radial-gradient(28% 34% at 78% 24%,rgba(79,123,255,.55),transparent 70%),radial-gradient(26% 32% at 20% 76%,rgba(52,211,153,.50),transparent 70%),
  radial-gradient(24% 30% at 64% 82%,rgba(139,92,246,.42),transparent 70%),radial-gradient(22% 26% at 34% 18%,rgba(34,211,238,.42),transparent 70%),radial-gradient(16% 20% at 90% 70%,rgba(255,181,71,.34),transparent 70%);
 animation:lgMesh 28s ease-in-out infinite alternate}
@keyframes lgMesh{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(4%,-3%,0) rotate(10deg) scale(1.08)}100%{transform:translate3d(-4%,3%,0) rotate(-8deg) scale(1.03)}}
/* fine grain so it reads as a material */
.lgx::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* glass bubbles: a white highlight, a thin rainbow rim, rising slowly with a gentle sway */
.lgx i{position:absolute;bottom:-260px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
 background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 14%,transparent 34%),radial-gradient(circle at 70% 78%,rgba(255,255,255,.35),transparent 40%),rgba(255,255,255,.10);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset -6px -10px 24px rgba(79,123,255,.18),inset 8px 6px 20px rgba(31,191,166,.16),0 10px 30px rgba(40,60,140,.10);
 backdrop-filter:blur(3px) saturate(1.4);-webkit-backdrop-filter:blur(3px) saturate(1.4);
 animation:lgRise var(--d) linear infinite,lgSway calc(var(--d) / 3) ease-in-out infinite alternate,lgWob 7s ease-in-out infinite;animation-delay:var(--w),var(--w),var(--w);opacity:.95;
 translate:calc(var(--px,0) * 1px) calc(var(--py,0) * 1px);transition:translate .9s cubic-bezier(.2,.8,.2,1),opacity .3s,scale .3s;}
/* liquid: the bubble breathes and slightly changes shape, like a real soap bubble */
@keyframes lgWob{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%;scale:1}25%{border-radius:53% 47% 51% 49%/47% 53% 48% 52%;scale:1.03 .98}50%{border-radius:48% 52% 47% 53%/52% 48% 53% 47%;scale:.98 1.03}75%{border-radius:51% 49% 53% 47%/49% 51% 47% 53%;scale:1.02 .99}}
.lgx i.pop{animation-play-state:paused;scale:1.5;opacity:0;transition:scale .28s ease-out,opacity .28s ease-out}
.lgx i::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;opacity:.55;
 background:conic-gradient(from 210deg,#5B8CFF,#22C3A6,#FFD66B,#FF9FC4,#8752F5,#5B8CFF);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lgShine 6s linear infinite}
@keyframes lgShine{to{filter:hue-rotate(360deg)}}
@keyframes lgRise{from{transform:translateY(0)}to{transform:translateY(calc(-100vh - 520px))}}
@keyframes lgSway{from{margin-left:-22px}to{margin-left:22px}}
.lgx i:nth-child(2){--x:6%;--s:120px;--d:24s;--w:-4s}
.lgx i:nth-child(3){--x:18%;--s:54px;--d:16s;--w:-14s}
.lgx i:nth-child(4){--x:29%;--s:190px;--d:22s;--w:-26s}
.lgx i:nth-child(5){--x:43%;--s:70px;--d:19s;--w:-3s}
.lgx i:nth-child(6){--x:58%;--s:140px;--d:26s;--w:-19s}
.lgx i:nth-child(7){--x:70%;--s:46px;--d:15s;--w:-9s}
.lgx i:nth-child(8){--x:80%;--s:230px;--d:32s;--w:-33s}
.lgx i:nth-child(9){--x:91%;--s:84px;--d:21s;--w:-17s}
.lgx i:nth-child(10){--x:50%;--s:36px;--d:13s;--w:-11s}
.lgx i:nth-child(11){--x:12%;--s:96px;--d:30s;--w:-22s}
/* the form: frosted glass */
html[data-theme] .login .card.lbox{position:relative;width:min(420px,92vw);padding:34px 32px 26px;border-radius:30px;
 background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
 box-shadow:0 1px 2px rgba(20,30,60,.04),0 40px 100px rgba(40,60,140,.20),inset 0 1px 0 #fff;color:#0B0D12;animation:lgIn .9s cubic-bezier(.2,1.2,.3,1) both}
@keyframes lgIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.login .brandlogo{content:url(brand/logo-light.svg);height:44px}
html[data-theme] .login .lbox h1{font-size:26px;font-weight:800;letter-spacing:-.015em;color:#0B0D12;margin:0 0 6px}
html[data-theme] .login .lbox .lb,html[data-theme] .login .sb{color:#5C6370}
html[data-theme] .login .lbox .f{height:48px;border-radius:14px;background:rgba(255,255,255,.85);border:1px solid rgba(11,13,18,.10);color:#0B0D12;font-size:15px;transition:border-color .2s,box-shadow .2s}
html[data-theme] .login .lbox .f:focus{outline:none;border-color:var(--cta-a);box-shadow:0 0 0 4px rgba(63,123,255,.14)}
html[data-theme] .login .lbox .btn.wide{height:50px;margin-top:14px;border:0;border-radius:999px;color:#fff;font-size:16px;font-weight:700;
 background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 45%,transparent 60%) 0 0/250% 100%,var(--cta);box-shadow:0 12px 28px var(--cta-glow);animation:lgSheen 4s ease-in-out infinite;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
html[data-theme] .login .lbox .btn.wide:hover{transform:translateY(-1px) scale(1.01)}
@keyframes lgSheen{0%,45%{background-position:120% 0,0 0}100%{background-position:-60% 0,0 0}}
html[data-theme] .login .swap a{color:#1F5FD0;font-weight:600}
html[data-theme] .login .demo code{background:rgba(255,255,255,.7);border:1px solid rgba(11,13,18,.06)}
@media (max-width:520px){html[data-theme] .login .card.lbox{padding:28px 22px 22px;border-radius:26px}.lgx i:nth-child(4),.lgx i:nth-child(8){--s:130px}}
@media (prefers-reduced-motion:reduce){.lgx .mesh,.lgx i,.lgx i::before,html[data-theme] .login .card.lbox,html[data-theme] .login .lbox .btn.wide{animation:none}.lgx i{display:none}}