/* v221: animated tappable logo, seasonal logo colours, shake-fall, redesigned Login. Loaded last. */
.lgbtn{background:none!important;border:0!important;padding:0!important;margin:0;min-height:0!important;width:auto!important;box-shadow:none!important;cursor:pointer;display:inline-block;line-height:0;border-radius:12px;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation;color:inherit}
.lgbtn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.lgbtn svg{display:block;overflow:visible}.lgd{display:none!important}.lgb{display:block}
html[data-mode="light"] .lgbtn:not(.lgdark) .lgd{display:block!important}html[data-mode="light"] .lgbtn:not(.lgdark) .lgb{display:none!important}
header .lgbtn svg{height:34px;width:auto}@media(max-width:640px){header .lgbtn svg{height:32px}}
.lgbig{display:block;margin:0 auto}.lgbig svg{width:100%;max-width:290px;height:auto;margin:0 auto}
html[data-theme="premium"] header .lgbtn{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--acc) 45%,transparent))}
.lgbtn svg{animation:lgGlow 5.5s ease-in-out infinite}
.lgbtn .cd{transform-box:fill-box;transform-origin:50% 100%;animation:lgBreath 6s ease-in-out infinite}.lgbtn .c2{animation-delay:.25s}.lgbtn .c3{animation-delay:.5s}.lgbtn .c4{animation-delay:.75s}
.lgbtn .orn{transform-box:fill-box;transform-origin:50% 100%;animation:lgOrn 3.6s ease-in-out infinite}.oe{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
@keyframes lgGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px rgba(61,242,180,.4))}}
@keyframes lgBreath{0%,82%,100%{transform:scaleY(1)}91%{transform:scaleY(1.12)}}
@keyframes lgOrn{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}
.lgbtn.go{z-index:60}.lgbtn.go svg{transform-origin:0 50%;animation:lgPop 1s cubic-bezier(.3,1.6,.5,1)}
.lgbtn.go .cd{animation:lgGrow .9s both}.lgbtn.go .c2{animation-delay:.1s}.lgbtn.go .c3{animation-delay:.2s}.lgbtn.go .c4{animation-delay:.3s}
.lgbtn.go .lgl{animation:lgLet .9s ease}.lgbtn.go .lgx{animation:lgFlash 1s ease .35s}.lgbtn.go .lgt{animation:lgTag .9s ease}
.lgbtn.lgshake svg{animation:lgWig .8s ease}
@keyframes lgPop{0%{transform:scale(1)}30%{transform:scale(1.55) rotate(-2deg)}60%{transform:scale(1.4) rotate(1.5deg)}100%{transform:none}}@keyframes lgBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes lgGrow{0%{transform:scaleY(.04);opacity:.2}60%{transform:scaleY(1.2);opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes lgLet{0%,100%{filter:none}40%{filter:brightness(1.45) drop-shadow(0 0 9px rgba(255,255,255,.55))}}
@keyframes lgFlash{0%,100%{filter:none}40%{filter:brightness(1.6) drop-shadow(0 0 10px #ffe08a)}}
@keyframes lgTag{0%,100%{opacity:1}30%{opacity:.35}}
@keyframes lgWig{0%,100%{transform:none}15%{transform:rotate(-4deg) scale(1.04)}35%{transform:rotate(4deg) scale(1.05)}55%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.lgbtn svg,.lgbtn .cd,.lgbtn .orn,.lgbtn.go *,.lgbtn.lgshake svg{animation:none!important}}
/* seasonal logo colours (letters, tagline) */
html[data-season="christmas"]{--lg0:#d7ffe6;--lg1:#3fe08a;--lg2:#12a05c;--lgt:#ffb3b3}html[data-season="halloween"]{--lg0:#ffe2b8;--lg1:#ff9d2e;--lg2:#c2570a;--lgt:#d8c2ff}
html[data-season="valentine"]{--lg0:#ffd9e6;--lg1:#ff6b9a;--lg2:#c2285f;--lgt:#ffc2d4}html[data-season="newyear"]{--lg0:#fff3c2;--lg1:#f0c23a;--lg2:#b88a0a;--lgt:#fff0b0}
html[data-season="easter"]{--lg0:#efe3ff;--lg1:#b79af5;--lg2:#7a55d6;--lgt:#f7e27a}html[data-season="ramadan"]{--lg0:#fff0c2;--lg1:#d9b44a;--lg2:#9a7a1f;--lgt:#8fd8cc}
html[data-season="blackfriday"]{--lg0:#fff7d1;--lg1:#f2c94c;--lg2:#b8901f;--lgt:#ddd}html[data-season="winter"]{--lg0:#e8f6ff;--lg1:#7cc4f5;--lg2:#3a86c4;--lgt:#c8e6fb}
html[data-season="spring"]{--lg0:#ffe3ef;--lg1:#f58ab4;--lg2:#c5527f;--lgt:#bfeac3}html[data-season="summer"]{--lg0:#fff0c8;--lg1:#f5b84a;--lg2:#e0831c;--lgt:#9ad9f5}html[data-season="autumn"]{--lg0:#ffe6c8;--lg1:#e08a3c;--lg2:#a8481f;--lgt:#f3b27a}
html[data-season]{--lgd0:color-mix(in srgb,var(--lg1) 80%,#000);--lgd1:color-mix(in srgb,var(--lg1) 55%,#000);--lgd2:color-mix(in srgb,var(--lg1) 38%,#000);--lgtd:color-mix(in srgb,var(--lg1) 60%,#000)}
/* ---- Login redesign ---- */
#af.lgn{padding:20px 18px 18px;position:relative;overflow:hidden}
#af.lgn::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;background:radial-gradient(60% 60% at 50% 0,color-mix(in srgb,var(--zh) 38%,transparent),transparent 70%);pointer-events:none}
#af.lgn>*{position:relative}
.lgn-hero{text-align:center;margin:0 0 14px}.lgn-tag{margin:8px auto 0;max-width:300px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.82)}
.lgn-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 14px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.2)}
#af .lgn-seg button{border:0;border-radius:999px;padding:10px 8px;min-height:44px;font:inherit;font-weight:800;font-size:15px;background:transparent;color:rgba(255,255,255,.85);text-decoration:none;cursor:pointer}
#af .lgn-seg button.on{background:#fff;color:#10131a;box-shadow:0 2px 10px rgba(0,0,0,.3);pointer-events:none}
#af .lgn-seg button:not(.on):active{background:rgba(255,255,255,.16)}
#af.lgn h2{font-size:22px;margin:0 0 2px!important}.lgn-sub{margin:0 0 12px;font-size:14px;color:rgba(255,255,255,.78)}
#af.lgn input{padding-left:44px;background-repeat:no-repeat;background-position:14px 50%;background-size:20px 20px}
#af.lgn #em{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
#af.lgn #pw,#af.lgn #pw2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
#af.lgn #un{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.pwm{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0 2px}.pwm i{height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.pwm[data-s="0"] i:nth-child(1){background:#ff8f88}.pwm[data-s="1"] i:nth-child(-n+2){background:#ffcf6b}.pwm[data-s="2"] i:nth-child(-n+3){background:#b5e07a}.pwm[data-s="3"] i,.pwm[data-s="4"] i{background:#5fe0a0}
.pwml{font-size:12.5px;min-height:16px;color:rgba(255,255,255,.8)}.caps{margin:6px 0 0;font-size:13px;font-weight:700;color:#ffd27a}
.lgn-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.lgn-perks li{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26)}
.lgn-who{margin:10px 0 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.7)}
#af.lgn #asub{min-height:50px;font-size:17px;border-radius:999px}
/* shake-fall */
@media(max-width:380px){.lgn-seg button{font-size:14px}}
header .lgbtn{margin-left:6px}

/* v223: more motion; header logo sways and grows now and then, stronger in a season; tap enlarges it */
.lghead svg{transform-origin:0 50%;animation:lgGlow 4s ease-in-out infinite,lgSway 7s ease-in-out infinite}
html[data-season] .lgbtn svg{animation:lgGlowS 3.2s ease-in-out infinite,lgSway 5s ease-in-out infinite}
.lgbig svg{animation:lgGlow 4s ease-in-out infinite,lgFloat 4.5s ease-in-out infinite}
html[data-season] .lgbig svg{animation:lgGlowS 3.2s ease-in-out infinite,lgFloat 4.5s ease-in-out infinite}
html[data-season] .lgbtn .orn{animation-duration:2.2s}
.lgbtn .cd{animation-duration:3.4s}
@keyframes lgSway{0%,55%,100%{transform:none}65%{transform:scale(1.16) rotate(-1.5deg)}75%{transform:scale(1.04) rotate(1deg)}85%{transform:scale(1.1) rotate(-.5deg)}}
@keyframes lgFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.8deg)}}
@keyframes lgGlowS{0%,100%{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--lg1,#3df2b4) 40%,transparent))}50%{filter:drop-shadow(0 0 11px color-mix(in srgb,var(--lg1,#3df2b4) 80%,transparent))}}
.lgbtn .orn{animation-name:lgOrn2}@keyframes lgOrn2{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-6px) rotate(5deg) scale(1.12)}}
.lgi-hero{display:flex;justify-content:center;margin:0 0 10px;animation:lgZin .8s cubic-bezier(.3,1.5,.5,1) both}.lgi-hero .lgbig svg{max-width:250px}
@keyframes lgZin{from{transform:scale(.35);opacity:0}to{transform:none;opacity:1}}
.lgi-tip{margin:0 0 10px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--sc);background:linear-gradient(145deg,color-mix(in srgb,var(--sc) 26%,transparent),color-mix(in srgb,var(--sc) 6%,transparent));box-shadow:0 0 16px color-mix(in srgb,var(--sc) 30%,transparent)}.lgi-th{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px;color:var(--sc)}
/* season strip under the header on every screen */
.ssn-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 10px;padding:9px 14px;border-radius:14px;font:inherit;font-size:14px;color:var(--tx);cursor:pointer;text-align:center;border:1.5px solid color-mix(in srgb,var(--sc) 70%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--sc) 30%,transparent),color-mix(in srgb,var(--sc) 8%,transparent),color-mix(in srgb,var(--sc) 30%,transparent)) 0 0/200% 100%,color-mix(in srgb,var(--card) 70%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--sc) 28%,transparent);animation:ssnShim 6s linear infinite;min-height:44px}
.ssn-e{font-size:22px;display:inline-block;animation:ssnBob 1.8s ease-in-out infinite}.ssn-e:last-child{animation-delay:.5s}
@keyframes ssnShim{to{background-position:200% 0,0 0}}@keyframes ssnBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(8deg) scale(1.15)}}
body:has(#af) #ssn-strip{display:none}
@media(prefers-reduced-motion:reduce){.ssn-strip,.ssn-e,.lgi-hero,.lghead svg,.lgbig svg{animation:none!important}}

/* v224: the info card pops in and out; the season banner and tip card are held up by season items at the corners */
.ov.lgov{animation:lgOvIn .25s ease both}.ov.lgov .dlg{animation:lgDlgIn .55s cubic-bezier(.2,1.5,.4,1) both;transform-origin:50% 30%}
.ov.lgov.lgout{animation:lgOvOut .5s ease-in both;pointer-events:none}.ov.lgov.lgout .dlg{animation:lgDlgOut .5s cubic-bezier(.5,-.4,.6,1) both;transform-origin:50% 40%}.ov.lgov.lgout .dlg>*{animation:lgItemOut .32s ease-in both}.ov.lgov.lgout .dlg>.acts{animation-duration:.24s}.ov.lgov.lgout .lgi-tip,.ov.lgov.lgout .lgi-tip.lgtip2{animation:lgTipOut .45s cubic-bezier(.5,-.5,.7,1) both}.ov.lgov.lgout .lgi-hero{animation:lgHeroOut .45s ease-in both}
.lgov .dlg>h3,.lgov .dlg>p,.lgov .dlg .acts{animation:lgRise .5s ease both}.lgov .dlg>h3{animation-delay:.2s}.lgov .dlg>p:nth-of-type(1){animation-delay:.26s}.lgov .dlg>p:nth-of-type(2){animation-delay:.32s}
.lgov .lgi-tip{animation:lgTipIn .7s cubic-bezier(.2,1.6,.4,1) .35s both}.lgov .lgi-tip.lgtip2{animation:lgTipIn .55s cubic-bezier(.2,1.6,.4,1) both}
.lgov .acts .btn{animation:lgBtn .45s cubic-bezier(.2,1.8,.4,1) both}.lgov .acts .btn:nth-child(2){animation-delay:.08s}.lgov .acts .btn:nth-child(3){animation-delay:.16s}
@keyframes lgOvIn{from{opacity:0}to{opacity:1}}@keyframes lgOvOut{0%,30%{opacity:1}to{opacity:0}}@keyframes lgItemOut{to{opacity:0;transform:translateY(16px)}}@keyframes lgTipOut{30%{transform:scale(1.04)}to{transform:rotate(7deg) translateY(46px) scale(.8);opacity:0}}@keyframes lgHeroOut{40%{transform:scale(1.08)}to{transform:scale(.4) translateY(-20px);opacity:0}}
@keyframes lgDlgIn{0%{transform:scale(.55) translateY(40px);opacity:0}100%{transform:none;opacity:1}}
@keyframes lgDlgOut{0%{transform:scale(1);opacity:1}25%{transform:scale(1.05) translateY(-8px);opacity:1}100%{transform:scale(.5) translateY(80px) rotate(-3deg);opacity:0}}
@keyframes lgRise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes lgTipIn{0%{transform:translateY(24px) scale(.8) rotate(-2deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes lgBtn{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.lgi-tip{position:relative;margin-top:16px}
.lgi-pin{position:absolute;top:-16px;font-size:28px;line-height:1;transform-origin:50% 0;animation:ssnSwing 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.lgi-pin.l{left:10px}.lgi-pin.r{right:10px;animation-delay:.6s}
@keyframes ssnSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.ssn-strip{position:relative;margin-top:14px;justify-content:center;padding:10px 46px}
.ssn-strip .ssn-e{position:absolute;top:-13px;font-size:30px;line-height:1;transform-origin:50% 0;animation:ssnSwing 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.ssn-strip .ssn-e:first-child{left:8px}.ssn-strip .ssn-e:last-child{right:8px;animation-delay:.5s}
@media(prefers-reduced-motion:reduce){.ov.lgov,.ov.lgov *,.lgi-pin,.ssn-strip .ssn-e{animation:none!important}}

/* v225: in-app loading splash: the logo draws itself over and over while the app starts */
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;gap:14px;text-align:center}.splash p{margin:0;color:var(--mut);font-size:14px;letter-spacing:.12em;text-transform:uppercase;animation:lgTag 1.6s ease-in-out infinite}
.lgsplash svg{max-width:260px;animation:lgGlowS 2.2s ease-in-out infinite,lgBeat 2.4s ease-in-out infinite}.lgsplash .cd{animation:lgGrow 1.8s ease-in-out infinite}.lgsplash .c2{animation-delay:.15s}.lgsplash .c3{animation-delay:.3s}.lgsplash .c4{animation-delay:.45s}.lgsplash .lgx{animation:lgFlash 1.8s ease .4s infinite}
@media(prefers-reduced-motion:reduce){.lgsplash svg,.lgsplash .cd,.lgsplash .lgx,.splash p{animation:none!important}}
/* v242: logo decorations are drawn SVG (same art as the falling ones): soft shadow, nothing else changes */
.lgbtn .orn .oa{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
/* v243: bigger header logo (was 34px and 32px high) */
header .lgbtn svg{height:46px}@media(max-width:640px){header .lgbtn svg{height:44px}}@media(max-width:380px){header .lgbtn svg{height:40px}}

/* v286: splash polish: soft halo behind the logo, a thin sliding line under Loading, gentle entry, and a crossfade into the app */
.splash{isolation:isolate;animation:lgIn .5s ease both}
.lgsplash{position:relative}
.lgsplash::before{content:"";position:absolute;inset:-18% -8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--lg1,#3df2b4) 26%,transparent),transparent 72%);z-index:-1;animation:lgHalo 2.6s ease-in-out infinite;pointer-events:none}
.splash-out{animation:none;transition:opacity .45s ease,transform .45s ease}
#v.vin{animation:vIn .5s ease both}
@keyframes lgIn{from{opacity:0}to{opacity:1}}
@keyframes vIn{from{opacity:0}to{opacity:1}}
@keyframes lgHalo{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes lgBar{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.splash,.lgsplash::before,.splash p::after,#v.vin{animation:none!important}.splash-out{transition:none}}

/* v287: rising candlesticks behind the logo and a real progress bar */
.splash{position:relative}
.spl-chart{position:absolute;left:50%;top:50%;width:min(300px,86vw);height:150px;transform:translate(-50%,-56%);display:flex;align-items:flex-end;justify-content:center;gap:7px;z-index:-1;pointer-events:none;opacity:.3}
.spl-chart span{position:relative;width:9px;border-radius:2px;transform-origin:50% 100%;animation:lgCandle 3.4s ease-in-out infinite both}
.spl-chart span::before{content:"";position:absolute;left:50%;bottom:-6px;top:-10px;width:2px;margin-left:-1px;background:inherit;border-radius:1px}
.spl-chart .up{background:var(--lg1,#3df2b4)}.spl-chart .dn{background:#ff6b6b}
.splbar{width:170px;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--mut,#999) 28%,transparent)}
.splbar i{display:block;height:100%;width:6%;border-radius:3px;background:linear-gradient(90deg,var(--lg1,#3df2b4),color-mix(in srgb,var(--lg1,#3df2b4) 55%,#fff));box-shadow:0 0 8px color-mix(in srgb,var(--lg1,#3df2b4) 70%,transparent);transition:width .45s ease}
@keyframes lgCandle{0%{transform:scaleY(.04);opacity:0}25%{opacity:1}60%{transform:scaleY(1);opacity:1}88%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.spl-chart{display:none}.splbar i{transition:none}}