/* Personal cabinet: bigger copy and the same motion language as the landing page */

/* cards: lift + soft shadow, like the "how it works" cards on the landing */
.account main :is(.panel,.stat-card,.balance-card,.reward-card,.route-card,.activity-card,.career-card,.plan-item,.application,.notification,.review-card,.calendar-card,.guide-card){transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .5s var(--ease,cubic-bezier(.22,1,.36,1)),border-color .3s,background-color .3s}
@media(hover:hover){
.account main :is(.stat-card,.balance-card,.reward-card,.route-card,.activity-card,.career-card,.plan-item,.application,.notification,.review-card,.guide-card):hover{transform:translateY(-6px);box-shadow:0 26px 44px #2a4a6a1a}
.account main .panel:hover{box-shadow:0 18px 40px -22px #2a4a6a33}
}
/* arrow circles: blue fill slides in, arrow turns white (same as the site's flow buttons) */
.account main :is(.circle,.round){position:relative;overflow:hidden;isolation:isolate}
.account main :is(.circle,.round)::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:50%;background:var(--blue,#4261ee);translate:-101% 0;transition:translate .55s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
.account main :is(.circle,.round):hover::before,.account main :is(.clk,.stat-card,.plan-item,.mini-event,.reward-card,.route-card,.activity-card,.career-card,.notification,.application):hover :is(.circle,.round)::before{translate:0 0}
.account main :is(.circle,.round):hover,.account main :is(.clk,.stat-card,.plan-item,.mini-event,.reward-card,.route-card,.activity-card,.career-card,.notification,.application):hover :is(.circle,.round){color:#fff;border-color:var(--blue,#4261ee)}
}
/* icons in stat cards turn on hover */
.account main .stat-card svg,.account main .badge-symbol,.account main .channel-icon{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.account main .stat-card:hover svg{transform:rotate(12deg) scale(1.15)}.account main .channel-row:hover .channel-icon,.account main .prize-row:hover .badge-symbol{transform:rotate(-10deg) scale(1.1)}}
/* sidebar */
.sidebar nav a{transition:background-color .3s,color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.sidebar nav a svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.sidebar nav a:hover{transform:translateX(4px)}.sidebar nav a:hover svg{transform:scale(1.18) rotate(-6deg)}}
.sidebar nav a.active{box-shadow:0 14px 26px -12px #4261ee88}
body:not(.nav-seen) .sidebar nav a{animation:navIn .6s cubic-bezier(.22,1,.36,1) both}
body:not(.nav-seen) .sidebar nav a:nth-child(1){animation-delay:.05s}body:not(.nav-seen) .sidebar nav a:nth-child(2){animation-delay:.1s}body:not(.nav-seen) .sidebar nav a:nth-child(3){animation-delay:.15s}body:not(.nav-seen) .sidebar nav a:nth-child(4){animation-delay:.2s}body:not(.nav-seen) .sidebar nav a:nth-child(5){animation-delay:.25s}body:not(.nav-seen) .sidebar nav a:nth-child(6){animation-delay:.3s}body:not(.nav-seen) .sidebar nav a:nth-child(7){animation-delay:.35s}body:not(.nav-seen) .sidebar nav a:nth-child(8){animation-delay:.4s}body:not(.nav-seen) .sidebar nav a:nth-child(9){animation-delay:.45s}
@keyframes navIn{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
.side-photo img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.side-photo:hover img{transform:scale(1.08)}
.side-user .avatar{transition:box-shadow .4s,transform .4s}
.side-user:hover .avatar{box-shadow:0 0 0 5px #4261ee22;transform:scale(1.06)}
/* page titles come in with the same blur-slide as on the landing */
.account main .page-head h1{animation:titleIn .9s cubic-bezier(.22,1,.36,1) both}
@keyframes titleIn{from{opacity:0;translate:0 24px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
/* bars and rings fill up */
.account main .progress>*{transform-origin:left center;animation:barGrow 1.3s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* decorative filler for roomy panels */
.fx-deco{position:relative;overflow:hidden}
.fx-deco::after{content:'';position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border:2px dashed #cdd6ff;border-radius:50%;opacity:.6;pointer-events:none;animation:fxSpin 40s linear infinite}
@keyframes fxSpin{to{rotate:360deg}}
.fx-star{position:absolute;color:#b6c5ff;pointer-events:none;animation:fxFloat 6s ease-in-out infinite}
@keyframes fxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:6px -10px;rotate:18deg}}
/* overview: progress panel and quick links */
.fx-progress{margin-top:22px}
.fx-progress .fx-row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line,#e1e6eb)}
.fx-progress .fx-row:last-child{border:0}
.fx-progress .fx-row b{font-size:15px;font-weight:500}
.fx-progress .fx-num{font-size:26px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fx-progress .fx-bar{grid-column:1/-1;height:8px;border-radius:8px;background:#eef1fb;overflow:hidden}
.fx-progress .fx-bar i{display:block;height:100%;width:var(--v,0%);border-radius:8px;background:linear-gradient(90deg,#4261ee,#7d93ff);transform-origin:left;animation:barGrow 1.4s cubic-bezier(.22,1,.36,1) .3s both}
.fx-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fx-links a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid #d6defa;border-radius:40px;background:#fff;font-size:12.5px;color:var(--ink,#182b34);text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.fx-links a:hover{background:var(--blue,#4261ee);border-color:var(--blue,#4261ee);color:#fff;transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.sidebar nav a,.account main .page-head h1,.fx-bar i,.account main .progress>*{animation:none!important}.fx-deco::after,.fx-star{animation:none}}

/* tabs stay put: the section tabs always sit on top, the page title varies below them */
.account main:has(>.subnav){display:flex;flex-direction:column}
.account main:has(>.subnav)>.subnav{order:-1;margin:0 0 26px}
.account main:has(>.subnav)>.page-head{order:0;margin-top:0}
/* 404 inside the cabinet */
.nf{position:relative;overflow:hidden;background:linear-gradient(120deg,#e9edff,#eef1ff);border-radius:28px;padding:48px 44px 44px;min-height:420px}
.nf-route{position:absolute;inset:auto 0 0 0;width:100%;height:60%;pointer-events:none}
.nf .eyebrow{position:relative}
.nf-num{position:relative;font-size:clamp(110px,14vw,200px);letter-spacing:-.08em;line-height:.95;margin:22px 0 14px;color:#142d39}
.nf-num span{color:var(--blue,#4261ee);display:inline-block;animation:fxSpin 18s linear infinite}
.nf h1{position:relative;font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:-.04em;margin:0 0 10px}
.nf p{position:relative;margin:0 0 22px;color:#58748c}
.nf .btn-row{position:relative}

.nf-frame-wrap{margin:0}
.nf-frame{display:block;width:100%;height:max(560px,calc(100vh - 200px));border:0;background:transparent}
/* tabs a bit lower; wheel button and the note under it lower */
.account main:has(>.subnav)>.subnav{margin-top:30px}
.account main .wheel-stage>.button,.account main .wheel-stage>button.button{margin-top:30px}
.account main .wheel-stage>.tiny{margin-top:26px}