footer{margin-top:0}
/* poster wall */
.wall{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000}
.wall .cols{position:absolute;left:50%;top:50%;width:160vw;height:190vh;display:flex;gap:16px;transform:translate(-50%,-50%) rotate(-12deg)}
.wall .col{flex:1;display:flex;flex-direction:column;gap:16px;animation:up 90s linear infinite}
.wall .col:nth-child(even){animation-name:down;animation-duration:110s}
.wall .col img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;opacity:0;transition:opacity 1.2s var(--ease)}
.wall .col img.ld{opacity:.55}
@keyframes up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.88) 60%,#000 100%)}

.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 20px 60px}
.card{width:100%;max-width:440px;padding:40px 36px 34px;border-radius:28px;background:rgba(28,28,30,.72);backdrop-filter:saturate(180%) blur(40px);-webkit-backdrop-filter:saturate(180%) blur(40px);border:.5px solid rgba(255,255,255,.12);box-shadow:0 40px 120px -20px rgba(0,0,0,.8);text-align:center}
.logo{display:block;width:76px;height:76px;margin:0 auto 22px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.card .seg{display:flex;margin:0 auto 26px;width:100%}
.card .seg button{flex:1}
.card h1{font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.12}
.card .lead{color:var(--tx3);font-size:15px;margin:8px auto 26px;max-width:320px}
form{text-align:left}
.fields{background:rgba(28,28,30,.9)}
.msg{font-size:13.5px;margin-top:12px;color:#ff6961;min-height:0}
.msg:empty{display:none}
.msg.ok{color:var(--green)}
.hint{font-size:12.5px;color:var(--tx3);margin-top:10px;display:flex;align-items:center;gap:10px}
.meter{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.meter i{height:4px;border-radius:99px;background:var(--t4);transition:background .3s}
.meter[data-s="1"] i:nth-child(-n+1){background:#ff453a}
.meter[data-s="2"] i:nth-child(-n+2){background:#ff9f0a}
.meter[data-s="3"] i:nth-child(-n+3){background:#ffd60a}
.meter[data-s="4"] i{background:#30d158}
.chk{margin-top:18px}
.chk a{color:var(--blue)}
.submit{width:100%;margin-top:22px;position:relative}
.submit .spin{width:18px;height:18px;border-width:2px;margin:0;border-color:rgba(0,0,0,.2);border-top-color:#000}
.alt{margin-top:22px;font-size:14px;color:var(--tx3);text-align:center}
.alt button,.alt a{color:var(--blue);font-weight:500}
.alt button:hover,.alt a:hover{text-decoration:underline}
.forgot{display:block;text-align:center;margin-top:14px;font-size:13.5px;color:var(--blue);width:100%;background:none;border:0;cursor:pointer}
.perks{display:flex;justify-content:center;gap:16px 26px;flex-wrap:wrap;margin-top:28px;color:var(--tx2);font-size:13.5px;padding:0 8px}
.perks span{display:inline-flex;align-items:center;gap:8px}
.perks svg{color:var(--tx);flex-shrink:0}
.done .avatar{margin:0 auto 18px}
.done .cta{justify-content:center}
.fade{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (max-width:520px){
  .auth{padding:80px 14px 36px}
  .card{padding:28px 18px 22px;border-radius:22px}
  .card h1{font-size:24px}
  .logo{width:64px;height:64px;margin-bottom:16px}
  .perks{font-size:12.5px;gap:10px 16px}
}
/* @light:auto (cli/light-theme.py) */
:root[data-theme=light] .wall:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#f5f5f7}
:root[data-theme=light] .wall:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *)::after{background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(245,245,247,0.55) 0%,rgba(245,245,247,0.88) 60%,#f5f5f7 100%)}
:root[data-theme=light] .card:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:rgba(255,255,255,0.8);border:.5px solid rgba(0,0,0,0.066);box-shadow:0 40px 120px -20px rgba(0,0,0,0.224)}
:root[data-theme=light] .card .lead:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .fields:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:rgba(255,255,255,0.9)}
:root[data-theme=light] .msg:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:#ff6961}
:root[data-theme=light] .msg.ok:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--green)}
:root[data-theme=light] .hint:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .meter i:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--t4)}
:root[data-theme=light] .meter[data-s="1"] i:nth-child(-n+1):where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#ff453a}
:root[data-theme=light] .meter[data-s="2"] i:nth-child(-n+2):where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#ff9f0a}
:root[data-theme=light] .meter[data-s="3"] i:nth-child(-n+3):where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#ffd60a}
:root[data-theme=light] .meter[data-s="4"] i:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#30d158}
:root[data-theme=light] .chk a:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--blue)}
:root[data-theme=light] .submit .spin:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border-color:rgba(0,0,0,0.1);border-top-color:#f5f5f7}
:root[data-theme=light] .alt:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .alt button:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *),:root[data-theme=light] .alt a:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--blue)}
:root[data-theme=light] .forgot:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--blue)}
:root[data-theme=light] .perks:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx2)}
:root[data-theme=light] .perks svg:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx)}
/* @light:end */