/* ---------- live animated backgrounds ---------- */
.bg-fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-fx span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;will-change:transform}
.bg-fx .b1{width:420px;height:420px;background:radial-gradient(circle,#2575d8,transparent 70%);top:-120px;left:-100px;animation:drift1 26s ease-in-out infinite}
.bg-fx .b2{width:380px;height:380px;background:radial-gradient(circle,#18a678,transparent 70%);bottom:-140px;right:-80px;animation:drift2 32s ease-in-out infinite}
.bg-fx .b3{width:320px;height:320px;background:radial-gradient(circle,#8b5cf6,transparent 70%);top:35%;right:15%;animation:drift3 22s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,80px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-50px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,50px) scale(1.08)}66%{transform:translate(50px,-30px) scale(.95)}}
.app-shell{position:relative;z-index:1;background:transparent}
body{position:relative}

.login-overlay{position:fixed;overflow:hidden}
.login-overlay .bg-fx span{opacity:.85;filter:blur(55px);mix-blend-mode:screen}
.login-overlay .bg-fx .b1{background:radial-gradient(circle,#5aa5ff,transparent 68%)}
.login-overlay .bg-fx .b2{background:radial-gradient(circle,#2be3b8,transparent 68%)}
.login-overlay .bg-fx .b3{background:radial-gradient(circle,#c19bff,transparent 68%)}
.login-overlay::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,transparent 0%,rgba(6,20,33,.35) 75%);pointer-events:none}
.login-card{position:relative;z-index:1;animation:cardIn .55s cubic-bezier(.16,1,.3,1)}
.brand-mark{position:relative}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- page transitions ---------- */
.page-section{display:none}
.page-section.active{display:block;animation:pageIn .42s cubic-bezier(.16,1,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- card & list entrance ---------- */
.stats-grid .stat-card{animation:riseIn .5s cubic-bezier(.16,1,.3,1) backwards}
.stats-grid .stat-card:nth-child(1){animation-delay:.03s}
.stats-grid .stat-card:nth-child(2){animation-delay:.09s}
.stats-grid .stat-card:nth-child(3){animation-delay:.15s}
.stats-grid .stat-card:nth-child(4){animation-delay:.21s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.report-row,.plan-row,.table-row{transition:background .18s}
.report-row:hover,.plan-row:hover,.table-row:hover{background:#f7fafc}
.action-link{transition:padding-left .18s,color .18s}
.action-link:hover{padding-left:6px;color:var(--blue,#2575d8)}
.action-link:hover em{transform:translateX(3px)}
.action-link em{display:inline-block;transition:transform .18s}

/* ---------- interactive polish ---------- */
.choice-chip{transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s}
.choice-chip:active{transform:scale(.94)}
.choice-chip.selected{animation:chipPop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes chipPop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.nav-item{transition:transform .15s,background .18s,color .18s}
.nav-item:active{transform:scale(.92)}
.nav-item span{display:inline-block;transition:transform .18s}
.nav-item.active span{transform:translateY(-2px)}
.icon-button,.outline-button,.primary-button{transition:transform .16s,box-shadow .16s,background .16s}
.icon-button:active,.outline-button:active,.primary-button:active{transform:scale(.96)}

/* live sync indicator */
.sync-pill i{position:relative}
.sync-pill i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);opacity:.6;animation:pulseRing 1.8s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* ---------- loading skeleton ---------- */
p.muted.skeleton{position:relative;color:transparent!important;background:linear-gradient(90deg,#eef2f5 25%,#f8fafb 50%,#eef2f5 75%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* toast */
.toast.show{animation:toastIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

@media (prefers-reduced-motion: reduce){
  .bg-fx span,.page-section.active,.stats-grid .stat-card,.login-card,.choice-chip.selected,.sync-pill i::after,.toast.show{animation:none}
}