/* JoyFit Vivo · Circle of Evolution — UI page for real, opted-in account data.
   This stylesheet owns ranking only and the shared brand masthead. */
.jf-brand-icon{display:block;flex:none;object-fit:contain;vertical-align:middle}
.jf-nt-logo{display:grid;place-items:center;background:transparent!important;padding:0!important;width:32px;height:32px;min-height:32px}
.jf-nt-logo img{width:32px;height:32px;object-fit:contain}
.ob-brand{display:inline-flex;align-items:center;gap:9px;letter-spacing:-.065em!important}
.ob-brand span{color:var(--a)!important}
#login #lg0{display:grid;place-items:center}
#nav .jf-nav-brand{display:none}
@media(min-width:960px){
 #nav:before{content:none!important;display:none!important}
 #nav .jf-nav-brand{display:flex;gap:11px;align-items:center;padding:3px 12px 35px;margin-bottom:3px;color:#dc6737}
 #nav .jf-nav-brand strong{font:850 28px/1 "Outfit",var(--fd);letter-spacing:-.075em}
 #nav .jf-nav-brand .jf-brand-icon{width:42px;height:42px;border-radius:12px}
 #nav button{flex:none}
}
/* Brand identity is the only persistent chrome change. */
.jf-ranking{max-width:1340px}
.jf-rank-shell{display:grid;gap:19px}
.jf-rank-hero{position:relative;display:flex;align-items:center;min-height:282px;border-radius:27px;overflow:hidden;padding:34px 43px;background:linear-gradient(114deg,#ffeadb 0%,#fff1df 54%,#ffd7b3 100%);border:1px solid #f5dcc6;isolation:isolate}
.jf-rank-hero:before{position:absolute;content:"";width:380px;height:380px;right:6%;top:-173px;border-radius:50%;background:#fffcf363;z-index:-1}
.jf-rank-hero:after{position:absolute;content:"";width:180px;height:180px;right:24%;bottom:-115px;border-radius:50%;border:30px solid #ffe5ce;z-index:-1}
.jf-rank-hero-copy{position:relative;z-index:2;max-width:min(62%,570px)}
.jf-rank-eyebrow{color:#b75c37;font-size:11px;font-weight:850;letter-spacing:.09em}
.jf-rank-hero h2{max-width:530px;margin:12px 0 10px;font:820 clamp(29px,3.2vw,44px)/1.08 "Outfit",var(--fd);letter-spacing:-.048em;color:#493025}
.jf-rank-hero p{color:#835c4a;max-width:490px;font-size:14px;line-height:1.6;margin:0 0 20px}
.jf-rank-pill{display:inline-flex;padding:9px 13px;background:#fffaf3de;border:1px solid #f4cdad;border-radius:99px;color:#a75d3e;font-size:11px;font-weight:780;line-height:1.3}
.jf-rank-hero-art{position:absolute;width:43%;max-width:430px;min-width:240px;right:0;bottom:-12px;object-fit:contain;z-index:1;pointer-events:none}
.jf-rank-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.jf-rank-stat{border:1px solid #f0e5df;background:#fff;border-radius:21px;min-height:135px;padding:23px 26px}
.jf-rank-stat:nth-child(1){background:#fff1e6;border-color:#f3d5c3}
.jf-rank-stat:nth-child(2){background:#fff9e8;border-color:#f4e6ce}
.jf-rank-stat:nth-child(3){background:#f5f1fe;border-color:#ece3fa}
.jf-rank-stat>span{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:850;letter-spacing:.09em;color:#966e5a}
.jf-rank-stat svg{width:17px;height:17px;color:#eb793f}
.jf-rank-stat strong{font:850 38px/1.1 "Outfit",var(--fd);color:#302c2a;display:block;letter-spacing:-.06em;margin:12px 0 2px}
.jf-rank-stat strong small{font-size:13px;letter-spacing:0;margin-left:5px;font-weight:650;color:#926f5b}
.jf-rank-stat p{font-size:11px;color:#8a7b75;margin:0}
.jf-rank-content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.9fr);gap:17px;align-items:start}
.jf-rank-content-grid .jf-panel{padding:26px;border:1px solid #f0e3db;border-radius:23px;background:#fff}
.jf-rank-leaderboard{min-width:0;overflow:hidden}
.jf-rank-headline{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:15px}
.jf-rank-headline h2{font:800 25px/1.2 "Outfit",var(--fd);color:var(--t);letter-spacing:-.04em;margin:8px 0 6px}
.jf-rank-headline p{font-size:12px;color:var(--t2);line-height:1.5;margin:0;max-width:440px}
.jf-rank-period{border:1px solid #f2e3d9;border-radius:14px;padding:4px;background:#fff8f3;display:flex;gap:3px;flex:none}
.jf-rank-period button{border:0!important;background:transparent!important;color:#8c756d!important;box-shadow:none!important;padding:9px 13px;min-height:36px;font-size:12px;white-space:nowrap;border-radius:10px}
.jf-rank-period button.on{background:#f97840!important;color:#fff!important}
.jf-rank-podium{background:linear-gradient(180deg,#fffbf7 0%,#fff0e2 100%);border-radius:22px;padding:28px 16px 0;display:flex;justify-content:center;align-items:end;gap:11px;min-height:250px;margin:22px 0 22px;overflow:hidden;border:1px solid #f8e9d8}
.jf-rank-podium-person{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;width:min(31%,146px);min-width:0;text-align:center}
.jf-rank-podium-person.first{order:2}
.jf-rank-podium-person.second{order:1}
.jf-rank-podium-person.third{order:3}
.jf-rank-podium-person .jf-rank-avatar{width:61px;height:61px;border:3px solid #e4b1a0;box-shadow:0 4px 15px #a66b5422}
.jf-rank-podium-person.first .jf-rank-avatar{width:83px;height:83px;border-color:#f8b43d;box-shadow:0 0 0 5px #ffeaca,0 7px 20px #b572391f}
.jf-rank-medal{font-size:22px;line-height:1.1;margin-top:-6px;filter:drop-shadow(0 3px 3px #a16c4333)}
.jf-rank-podium-person strong{font-size:12px;color:#47362e;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jf-rank-podium-person strong small{font-size:10px;color:#9a6e55;font-weight:600}
.jf-rank-podium-pct{font-size:11px;color:#996f50;font-weight:800}
.jf-rank-podium-column{height:67px;background:#f4d3b7;width:100%;border-radius:13px 13px 0 0;display:flex;align-items:center;justify-content:center;border:1px solid #efc5a2;border-bottom:0}
.jf-rank-podium-person.first .jf-rank-podium-column{height:100px;background:linear-gradient(#ffad70,#ff8d50);border-color:#ffaf77}
.jf-rank-podium-person.third .jf-rank-podium-column{height:53px;background:#efc9aa}
.jf-rank-podium-column span{font-size:11px;font-weight:850;color:#a76f4b}
.jf-rank-podium-person.first .jf-rank-podium-column span{color:#fff}
.jf-rank-avatar{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;background:#fae0d1;border:2px solid #f1c5ac;border-radius:50%;color:#b96339;font:800 20px "Outfit",var(--fd);overflow:hidden}
.jf-rank-avatar.is-you{border-color:#fd914e;background:#fff0e5}
.jf-rank-avatar img{width:100%;height:100%;object-fit:cover}
.jf-rank-table-head{display:grid;grid-template-columns:minmax(0,1fr) 138px 106px;gap:10px;padding:0 14px 10px;color:#aa9a91;font-size:9px;font-weight:800;letter-spacing:.075em}
.jf-rank-table-head span:last-child{text-align:right}
.jf-rank-people{display:grid;gap:8px}
.jf-rank-person{display:flex;align-items:center;gap:13px;border:1px solid #f2e9e2;background:#fffefa;border-radius:17px;padding:12px 14px;min-width:0}
.jf-rank-person.is-you{background:#fff1e5;border-color:#fbd2b9}
.jf-rank-place{flex:none;width:28px;text-align:center;font:800 21px "Outfit",var(--fd);color:#ab8470;letter-spacing:-.04em}
.jf-rank-place small{font-size:11px;font-weight:700}
.jf-rank-person:first-child .jf-rank-place{color:#e87937}
.jf-rank-person-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.jf-rank-person-main>strong{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;word-break:break-word}
.jf-rank-you{background:#ffe0cb;color:#a75332;border-radius:99px;padding:3px 7px;font-size:8px;font-weight:800;letter-spacing:.07em}
.jf-rank-caption{font-size:11px;color:#928078}
.jf-rank-person-score{width:103px;flex:none;text-align:right}
.jf-rank-person-score>strong{font:800 23px "Outfit",var(--fd);color:#3c342f;letter-spacing:-.045em}
.jf-rank-person-score>strong small{font-size:12px}
.jf-rank-meter{width:100%;height:6px;background:#f0e3db;border-radius:99px;overflow:hidden;margin-top:4px}
.jf-rank-meter i{display:block;height:100%;background:#f47f45;border-radius:99px}
.jf-rank-activity{display:flex;align-items:center;gap:5px;margin-top:3px}
.jf-rank-activity>span{width:10px;height:10px;border-radius:3px;background:#eee6e2}
.jf-rank-activity>span.is-active{background:#f19c5f}
.jf-rank-disclaimer{border-top:1px solid #f0e8e1;font-size:11px;line-height:1.65;color:#85776e;padding-top:14px;margin:20px 0 0}
.jf-rank-side{display:grid;gap:16px}
.jf-rank-invite-head{display:flex;align-items:center;gap:12px}
.jf-rank-invite-icon{width:46px;height:46px;background:#ffecda;color:#e27a42;display:grid;place-items:center;border-radius:15px;flex:none}
.jf-rank-invite-icon svg{width:24px;height:24px}
.jf-rank-invite h2,.jf-rank-privacy h2{font:780 19px/1.18 "Outfit",var(--fd);margin:6px 0 0;letter-spacing:-.035em}
.jf-rank-invite>p,.jf-rank-privacy p{font-size:12px;color:var(--t2);line-height:1.65;margin:16px 0 20px}
.jf-rank-invite .jf-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:45px}
.jf-rank-invite .jf-primary svg{width:18px;height:18px}
.jf-rank-join{border-top:1px solid #f1e8e0;padding-top:18px;margin-top:20px}
.jf-rank-join>label{display:block;font-size:12px;font-weight:760;color:#61524d;margin:0 0 9px}
.jf-rank-join>div,.jf-rank-code>div{display:flex;gap:6px;min-width:0}
.jf-rank-join input,.jf-rank-code input{width:100%;min-width:0;flex:1;background:#fffdfa;color:#453c38;border:1px solid #e9dcd3;font-size:12px;padding:10px 11px}
.jf-rank-join button,.jf-rank-code>div button{flex:none;min-height:42px;background:#ffebdb!important;color:#b55a30!important;padding:10px 13px;font-size:11px;border:1px solid #f4d3bd;border-radius:11px}
.jf-rank-code{margin-top:17px;background:#fff5eb;border:1px solid #f5d5bd;border-radius:16px;padding:15px}
.jf-rank-code>span{display:block;font-size:11px;color:#976845;line-height:1.5;margin-bottom:11px}
.jf-rank-code input{font-weight:850;letter-spacing:.085em;font-size:14px}
.jf-rank-share{width:100%;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:5px;background:transparent!important;color:#b45c34!important;box-shadow:none!important;font-size:12px}
.jf-rank-share svg{width:16px;height:16px}
.jf-rank-management{border-top:1px solid #f1e7e0;margin-top:18px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap}
.jf-rank-management .jf-outline{display:flex;align-items:center;gap:5px;font-size:11px;min-height:39px;padding:9px 12px}
.jf-rank-management .jf-outline svg{width:14px;height:14px}
.jf-rank-leave{background:transparent!important;color:#ac6b59!important;box-shadow:none!important;font-size:11px;text-decoration:underline;padding:9px 2px;min-height:39px}
.jf-rank-privacy{background:#fffaf5!important}
.jf-rank-privacy-icon{display:grid;place-items:center;background:#edf6e9;color:#769f6d;border-radius:14px;width:42px;height:42px}
.jf-rank-privacy p{margin:13px 0 14px}
.jf-rank-safe{font-size:11px;color:#6f8d5e;font-weight:750;display:flex;align-items:center;gap:6px}
.jf-rank-safe svg{width:16px;height:16px}
.jf-rank-solo{display:flex;gap:12px;align-items:center;background:#fff4e7;border:1px dashed #f1c7a2;border-radius:17px;padding:18px;margin:19px 0}
.jf-rank-solo>svg{color:#e99540;flex:none;width:38px;height:38px}
.jf-rank-solo strong{font-size:13px;color:#744b31}.jf-rank-solo p{font-size:12px;color:#967b67;margin:4px 0 0}
.jf-rank-empty-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);align-items:start;gap:17px}
.jf-rank-empty-grid .jf-panel{padding:30px;border:1px solid #f0e2d8;border-radius:23px;background:#fff}
.jf-rank-welcome>h2{font:800 31px/1.1 "Outfit",var(--fd);letter-spacing:-.05em;margin:13px 0;color:var(--t)}
.jf-rank-welcome>p{font-size:14px;line-height:1.7;color:var(--t2);max-width:520px}
.jf-rank-feature{border-top:1px solid #f1e7df;display:flex;align-items:start;gap:14px;padding:18px 0}
.jf-rank-feature>span{font:800 18px "Outfit",var(--fd);color:#ed874e;letter-spacing:-.06em}
.jf-rank-feature strong{font-size:14px}.jf-rank-feature p{font-size:12px;line-height:1.5;color:var(--t2);margin:5px 0 0}
.jf-rank-loading{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px}
.jf-rank-loading h2{font-size:22px;margin:16px 0 3px}.jf-rank-loading p{font-size:13px;color:var(--t2);max-width:370px;line-height:1.6}
.jf-rank-spinner{height:40px;width:40px;border:4px solid #ffe8d5;border-top-color:#f07840;border-radius:50%;animation:jfRankSpin .9s linear infinite}
@keyframes jfRankSpin{to{transform:rotate(360deg)}}
.jf-workout-rank-cta{display:flex;align-items:center;justify-content:space-between;gap:17px;background:linear-gradient(115deg,#ffeddd,#fff9f1);border-color:#f5dfcb}
.jf-workout-rank-cta h2{font:800 20px "Outfit",var(--fd);margin:7px 0 5px;letter-spacing:-.04em}
.jf-workout-rank-cta p{font-size:12px;color:#92715c;margin:0;line-height:1.4}
.jf-workout-rank-cta .jf-outline{white-space:nowrap;display:flex;align-items:center;gap:6px;background:#fffaf4!important;color:#aa5732!important;min-height:44px}
.jf-workout-rank-cta .jf-outline svg{width:17px;height:17px}
/* The original footer profile button remains reachable through the header avatar. */
@media(max-width:959px){
 #nav .jf-nav-brand{display:none!important}
 #nav button:nth-child(6){display:flex!important}
 #nav button:last-child{display:none!important}
 #nav{gap:1px}
 #nav button{min-width:0;font-size:9px!important;padding:6px 1px 4px!important;letter-spacing:-.03em}
 #nav button b svg{height:20px!important;width:20px!important}
 .jf-ranking .jf-page-header{margin-bottom:20px}
 .jf-rank-hero{padding:24px 21px 145px;min-height:325px;border-radius:22px;align-items:flex-start}
 .jf-rank-hero-copy{max-width:100%}
 .jf-rank-hero h2{font-size:30px;max-width:320px;margin:10px 0}
 .jf-rank-hero p{font-size:12px;max-width:310px;line-height:1.5;margin:0 0 14px}
 .jf-rank-eyebrow{font-size:9px}
 .jf-rank-hero-art{width:250px;min-width:0;right:-12px;bottom:-38px}
 .jf-rank-hero:after{right:12%}
 .jf-rank-pill{font-size:10px;padding:7px 11px}
 .jf-rank-stats{gap:8px}
 .jf-rank-stat{min-height:114px;padding:15px 12px;border-radius:16px}
 .jf-rank-stat>span{font-size:9px;letter-spacing:0;line-height:1.25}
 .jf-rank-stat svg{width:15px;height:15px;flex:none}
 .jf-rank-stat strong{font-size:29px;margin:11px 0 4px}
 .jf-rank-stat strong small{display:block;font-size:10px;margin:1px 0 0}
 .jf-rank-stat p{font-size:10px;line-height:1.25}
 .jf-rank-content-grid,.jf-rank-empty-grid{grid-template-columns:1fr;gap:13px}
 .jf-rank-content-grid .jf-panel,.jf-rank-empty-grid .jf-panel{padding:18px}
 .jf-rank-headline{flex-wrap:wrap}
 .jf-rank-headline h2{font-size:20px}
 .jf-rank-period{width:100%}.jf-rank-period button{flex:1}
 .jf-rank-podium{padding:20px 8px 0;min-height:215px;gap:6px}
 .jf-rank-podium-person .jf-rank-avatar{width:49px;height:49px}
 .jf-rank-podium-person.first .jf-rank-avatar{width:65px;height:65px}
 .jf-rank-podium-column{height:56px}.jf-rank-podium-person.first .jf-rank-podium-column{height:78px}.jf-rank-podium-person.third .jf-rank-podium-column{height:42px}
 .jf-rank-podium-person strong{font-size:11px}
 .jf-rank-person{gap:7px;padding:10px 9px}
 .jf-rank-person .jf-rank-avatar{width:38px;height:38px;font-size:17px}
 .jf-rank-place{width:20px;font-size:18px}
 .jf-rank-caption{font-size:10px}
 .jf-rank-person-main>strong{font-size:12px}
 .jf-rank-person-score{width:63px}
 .jf-rank-person-score>strong{font-size:20px}
 .jf-rank-table-head{grid-template-columns:1fr 80px 70px;font-size:8px;padding-left:5px}
 .jf-rank-table-head span:nth-child(2){display:none}
 .jf-workout-rank-cta{flex-direction:column;align-items:stretch}
 .jf-workout-rank-cta .jf-outline{justify-content:center}
}
@media(max-width:360px){
 .jf-rank-stat{padding:12px 9px}
 .jf-rank-stat>span{font-size:8px}
 .jf-rank-hero{padding-bottom:140px}
 .jf-rank-hero-art{width:225px}
 .jf-rank-person-score{width:56px}
 #nav button{font-size:8.5px!important}
}
:root[data-theme=dark] .jf-rank-hero,:root[data-theme=dark] .jf-workout-rank-cta{color:#463024}
:root[data-theme=dark] .jf-rank-hero p,:root[data-theme=dark] .jf-workout-rank-cta p{color:#825745}
:root[data-theme=dark] .jf-rank-headline h2,:root[data-theme=dark] .jf-rank-stat strong,:root[data-theme=dark] .jf-rank-person-score strong{color:var(--t)}
:root[data-theme=dark] .jf-rank-stat,:root[data-theme=dark] .jf-rank-content-grid .jf-panel,:root[data-theme=dark] .jf-rank-empty-grid .jf-panel{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .jf-rank-person{background:#342c29;border-color:#493831}
:root[data-theme=dark] .jf-rank-person.is-you{background:#583b30;border-color:#8f624b}
:root[data-theme=dark] .jf-rank-person-main strong,:root[data-theme=dark] .jf-rank-welcome>h2{color:var(--t)}
:root[data-theme=dark] .jf-rank-privacy{background:#322926!important}
:root[data-theme=dark] .jf-rank-period{background:#3c2c26;border-color:#59443a}
:root[data-theme=dark] .jf-rank-podium{background:linear-gradient(180deg,#40322b,#5e3d2d);border-color:#70513b}
:root[data-theme=dark] .jf-rank-podium-person strong{color:#fff1e6}
@media(prefers-reduced-motion:reduce){.jf-rank-spinner{animation:none}}

.jf-rank-api-warning{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff2e8;border:1px solid #f4d0b6;color:#95472f;padding:12px 16px;border-radius:14px;margin-bottom:15px;font-size:12px;line-height:1.5}
.jf-rank-api-warning button{flex:none;background:#fff9f3!important;color:#a65535!important;border:1px solid #efc7ae;min-height:36px;padding:8px 10px;font-size:11px}
@media(max-width:560px){.jf-rank-api-warning{align-items:flex-start;flex-direction:column}}