/* Freekeek Social Experience v1 — Pacote 3 (Feed + Perfis).
   Opt-in fx-* layer using UI Foundation tokens. Existing post, compose,
   profile, story, privacy, moderation and media JavaScript contracts unchanged.
*/
.fx{--fx-edge:color-mix(in srgb,var(--fk-border) 84%,transparent);--fx-tint:color-mix(in srgb,var(--fk-brand) 7%,var(--fk-surface));display:flex;flex-direction:column;gap:16px;min-width:0;color:var(--fk-text)}
.fx *{box-sizing:border-box}
.fx [hidden]{display:none!important}
.fx :is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--fk-brand);outline-offset:2px}
.fx a{text-decoration:none}
.fx h1,.fx h2,.fx h3,.fx p{margin-top:0}
.fx .btn{font-weight:700}
.fx .btn svg{width:16px;height:16px}
.fx .fk-empty{min-height:190px}
@media(min-width:1081px){
 body:has(.fx) .shell.shell-wide-main{max-width:1720px;grid-template-columns:var(--rail) minmax(0,1fr);gap:16px}
 body:has(.fx) .shell.shell-wide-main>.main{min-width:0}
}
.fx-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:850;color:var(--fk-brand)}
.fx-eyebrow svg{width:16px;height:16px}
.fx-hero{position:relative;isolation:isolate;min-height:160px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;padding:26px 29px;background:radial-gradient(ellipse at 87% 20%,color-mix(in srgb,var(--fk-brand) 15%,transparent),transparent 46%),linear-gradient(115deg,var(--fk-surface),color-mix(in srgb,var(--fk-brand-tint) 58%,var(--fk-surface)));border:1px solid var(--fx-edge);border-radius:19px}
.fx-hero:after{content:"";position:absolute;z-index:-1;right:-70px;top:-160px;width:380px;height:380px;border:1px solid color-mix(in srgb,var(--fk-brand) 18%,transparent);border-radius:50%;box-shadow:0 0 0 48px color-mix(in srgb,var(--fk-brand) 3%,transparent),0 0 0 93px color-mix(in srgb,var(--fk-brand) 3%,transparent)}
.fx-hero h1{font-family:var(--display);font-size:clamp(28px,3vw,42px);font-weight:810;letter-spacing:-.044em;line-height:1.12;color:var(--fk-text);margin:8px 0 10px}
.fx-hero p{max-width:62ch;font-size:13px;line-height:1.65;color:var(--fk-text-secondary);margin:0}
.fx-hero-content{min-width:0;max-width:730px}
.fx-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fx-hero-actions .fk-btn{box-shadow:var(--shadow-sm)}
.fx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fx-kpi{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--fx-edge);border-radius:14px;background:var(--fk-surface);min-width:0}
.fx-kpi-icon{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:11px;color:var(--fk-brand);background:var(--fk-brand-tint)}
.fx-kpi-icon svg{width:19px;height:19px}
.fx-kpi-icon.green{color:var(--green);background:var(--green-tint)}
.fx-kpi-icon.amber{color:#b98024;background:color-mix(in srgb,#f0ab50 13%,var(--fk-surface))}
.fx-kpi-icon.violet{color:#895cce;background:color-mix(in srgb,#9664da 13%,var(--fk-surface))}
.fx-kpi-copy{display:grid;gap:2px;min-width:0}
.fx-kpi-copy small,.fx-kpi-copy em{font-size:10px;font-style:normal;color:var(--fk-text-muted);line-height:1.35}
.fx-kpi-copy strong{font-size:22px;color:var(--fk-text);line-height:1.15;font-weight:820;letter-spacing:-.03em}
.fx-columns{display:grid;grid-template-columns:minmax(170px,.72fr) minmax(0,2.15fr) minmax(210px,.85fr);gap:13px;align-items:start;min-width:0}
.fx-side,.fx-main,.fx-insights{display:flex;flex-direction:column;gap:13px;min-width:0}
.fx-box{padding:16px;min-width:0;background:var(--fk-surface);border:1px solid var(--fx-edge);border-radius:14px}
.fx-box h2,.fx-box h3{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:13px;font-weight:810}
.fx-box h2 svg,.fx-box h3 svg{width:17px;height:17px;color:var(--fk-brand)}
.fx-box p{font-size:11.5px;line-height:1.6;color:var(--fk-text-muted);margin:0 0 9px}
.fx-box p:last-child{margin:0}
.fx-links{display:grid;gap:3px}
.fx-links a{display:flex;align-items:center;gap:8px;min-width:0;border-radius:9px;padding:9px;color:var(--fk-text-secondary);font-size:12px;font-weight:740}
.fx-links a:hover,.fx-links a.is-active{background:var(--fk-brand-tint);color:var(--fk-brand-strong)}
.fx-links a svg{width:17px;height:17px;flex:none}
.fx-note{padding:15px;border-radius:13px;border:1px solid color-mix(in srgb,var(--fk-brand) 20%,var(--fk-border));background:var(--fx-tint)}
.fx-note strong{font-size:12px}
.fx-note p{color:var(--fk-text-secondary);font-size:11px;line-height:1.6;margin:7px 0 0}
.fx-note .fk-btn{margin-top:12px}
.fx-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.fx-section-head h2{margin:0 0 3px;font-size:18px;font-weight:820;letter-spacing:-.025em}
.fx-section-head p{margin:0;font-size:11px;color:var(--fk-text-muted)}
.fx-section-head a{font-size:12px;font-weight:800;color:var(--fk-brand-strong)}
/* Feed — original story-picker, composer, post settings and place pagination remain mounted. */
.fx-feed .stories-bar{display:flex;gap:12px;max-width:100%;margin:0;padding:12px 10px;scrollbar-width:thin;border:1px solid var(--fx-edge);border-radius:14px;background:var(--fk-surface);box-shadow:var(--fk-shadow-card)}
.fx-feed .story-cell{width:67px;min-width:67px}
.fx-feed .story-name{font-weight:690;color:var(--fk-text-secondary)}
.fx-feed .story-ring{transition:transform .16s}
.fx-feed .story-cell:hover .story-ring{transform:translateY(-1px)}
.fx-feed #compose{border:1px solid var(--fx-edge);border-radius:15px;background:var(--fk-surface);box-shadow:var(--fk-shadow-card);margin:0!important;padding:17px}
.fx-feed .cx-card{min-width:0}
.fx-feed .cx-text{border-radius:12px;font-size:14px;line-height:1.6}
.fx-feed .cx-postbtn{border-radius:10px;min-height:37px}
.fx-feed .placepick-panel{z-index:55}
.fx-post-stream{display:flex;flex-direction:column;gap:12px;min-width:0}
.fx-post-stream>.card{border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:visible}
.fx-post-stream .post{min-width:0;margin:0;padding:18px 19px;border:1px solid var(--fx-edge)!important;border-radius:15px;background:var(--fk-surface);box-shadow:var(--fk-shadow-card)}
.fx-post-stream .post+.post{border-top:1px solid var(--fx-edge)}
.fx-post-stream .post-head{gap:10px;min-width:0}
.fx-post-stream .post-who{min-width:0;flex:1}
.fx-post-stream .post-who .name{font-size:13px;font-weight:820}
.fx-post-stream .post-who .meta{font-size:11px;line-height:1.55;overflow-wrap:anywhere}
.fx-post-stream .post-body{font-size:14px;line-height:1.65;color:var(--fk-text);overflow-wrap:anywhere}
.fx-post-stream .post-actions{border-top:1px solid var(--fx-edge);margin-top:14px;padding-top:12px;display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.fx-post-stream .post-actions .iconbtn{border-radius:10px}
.fx-post-stream .post-linkcard{border-radius:12px;overflow:hidden}
.fx-post-stream .post-moderation-pending{border-radius:12px}
.fx-feed .feed-followed-card{background:var(--fk-surface);border:1px solid var(--fx-edge);border-radius:14px;box-shadow:var(--fk-shadow-card);padding:14px;margin:0}
.fx-feed .feed-followed-card .section-title{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:11px}
.fx-feed .feed-followed-row{padding:9px 0}
.fx-feed .feed-followed-name{font-size:11px}
.fx-feed .feed-followed-copy small{font-size:10px}
.fx-feed .feed-followed-actions{display:flex;flex-wrap:wrap;gap:7px}
.fx-feed .feed-followed-actions a{flex:1 1 auto;justify-content:center}
.fx-feed .feed-followed-card-mobile{display:none}
.fx-feed .fx-insights .feed-followed-card-desktop{display:block}
.fx-story-heading{display:flex;align-items:center;gap:8px;color:var(--fk-text);font-size:12px;font-weight:810;margin:0}
.fx-story-heading svg{width:17px;height:17px;color:var(--fk-brand)}
/* Profile — cover, avatar, story, accessible tabs, album and permissions. */
.fx-profile{max-width:1340px;margin:0 auto;gap:14px}
.fx-breadcrumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--fk-text-muted)}
.fx-breadcrumbs a{font-weight:760;color:var(--fk-brand-strong)}
.fx-breadcrumbs svg{width:13px;height:13px}
.fx-profile .profile-card{border-radius:18px;border:1px solid var(--fx-edge);box-shadow:var(--fk-shadow-card);overflow:hidden;margin:0!important}
.fx-profile .profile-card>.cover{height:clamp(195px,22vw,295px);background-position:center}
.fx-profile .pe-float{padding:20px 24px}
.fx-profile .pe-name-block{min-width:0}
.fx-profile .pe-title-row h1{font-family:var(--display);font-size:clamp(25px,2.75vw,38px);letter-spacing:-.04em;line-height:1.2;overflow-wrap:anywhere}
.fx-profile .pe-badges-row{gap:6px}
.fx-profile .pe-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:5px;padding:5px;margin-top:15px;border:1px solid var(--fx-edge);background:var(--fk-canvas);border-radius:12px}
.fx-profile .pe-seg-btn{flex:0 0 auto;border-radius:9px;padding:9px 12px;font-size:11px;font-weight:750}
.fx-profile .pe-seg-btn.on{background:var(--fk-surface);color:var(--fk-brand-strong);box-shadow:var(--fk-shadow-card)}
.fx-profile .pe-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.fx-profile .pe-chips .pe-chip{min-width:86px;border:1px solid var(--fx-edge);border-radius:11px;padding:10px 12px}
.fx-profile .prof-details{display:flex;flex-wrap:wrap;gap:7px}
.fx-profile .prof-details .pd{border:1px solid var(--fx-edge);border-radius:9px;padding:6px 9px}
.fx-profile .ptabs{display:flex;align-items:center;gap:5px;max-width:100%;overflow-x:auto;padding:8px;border-top:1px solid var(--fx-edge);scrollbar-width:thin}
.fx-profile .ptab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:37px;padding:9px 11px;font-size:11px;font-weight:750;border:0;border-radius:9px;white-space:nowrap}
.fx-profile .ptab.on{background:var(--fk-brand-tint);color:var(--fk-brand-strong)}
.fx-profile .ptab svg{width:17px;height:17px}
.fx-profile .ptab .fx-tab-label{display:inline}
.fx-profile .ptab-n{font-size:10px}
.fx-profile>.section-title,.fx-profile>.fx-section-head{margin-bottom:0}
.fx-profile .profile-places-head{padding:13px;border:1px solid var(--fx-edge);border-radius:14px;background:var(--fk-surface)}
.fx-profile .profile-places-head .section-title{font-size:15px}
.fx-profile .profile-places-search{min-width:0;flex-wrap:wrap}
.fx-profile .profile-places-search label{min-width:0;flex:1 1 195px}
.fx-profile .place-grid{gap:12px}
.fx-profile .place-card{border:1px solid var(--fx-edge);border-radius:14px;transition:border-color .16s}
.fx-profile .place-card:hover{border-color:color-mix(in srgb,var(--fk-brand) 32%,var(--fk-border))}
.fx-profile .people-grid{gap:12px}
.fx-profile .person-card{border:1px solid var(--fx-edge);border-radius:13px}
.fx-profile .album-grid{gap:11px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.fx-profile .album-cell{border-radius:13px;border:1px solid var(--fx-edge);overflow:hidden}
.fx-profile .album-add{border-radius:14px}
.fx-profile .about-cards,.fx-profile .profile-settings-grid{gap:10px}
.fx-profile .profile-setting-card,.fx-profile .about-card{border-radius:12px}
.fx-profile .pe-actions-row{flex-wrap:wrap;gap:8px}
.fx-profile .pe-actions-row form{max-width:100%}
.fx-profile .fx-post-stream .post{padding:18px}
.fx-profile .fx-section-head{margin-top:1px}
.fx-profile .fx-profile-stories{display:flex;gap:10px;align-items:center}
.fx-profile .fx-profile-stories #stories-bar{display:inline-flex}
.fx-profile .fx-profile-stories .story-cell-mini{cursor:pointer}
/* Single-post detail & edit — forms and routes unchanged. */
.fx-detail,.fx-edit{max-width:850px;margin-inline:auto;width:100%}
.fx-detail .back-link,.fx-edit .back-link{display:inline-flex;align-items:center;gap:7px;width:max-content;color:var(--fk-brand-strong);font-size:12px;font-weight:800}
.fx-detail .fx-post-stream>.post{border:1px solid var(--fx-edge);border-radius:15px;background:var(--fk-surface);padding:18px 20px;box-shadow:var(--fk-shadow-card)}
.fx-detail #comments,.fx-edit .fx-editor{margin:0!important;padding:20px;border-radius:15px;border:1px solid var(--fx-edge);box-shadow:var(--fk-shadow-card)}
.fx-detail .comment-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fx-detail .comment-form input{min-width:150px;flex:1 1 230px;border-radius:10px}
.fx-detail .comment-list{gap:15px}
.fx-detail .comment{padding-bottom:14px;border-bottom:1px solid var(--fx-edge)}
.fx-detail .comment:last-child{border-bottom:0}
.fx-detail .comment-body{min-width:0}
.fx-detail .comment-text{overflow-wrap:anywhere}
.fx-edit .fx-editor h1{font-size:22px;font-weight:810;letter-spacing:-.03em}
.fx-edit .fx-editor textarea,.fx-edit .fx-editor select{width:100%;max-width:100%;min-width:0;border-radius:10px}
.fx-edit .fx-editor textarea{resize:vertical}
.fx-edit .fx-editor .fx-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media(max-width:1400px){.fx-columns{grid-template-columns:minmax(155px,.68fr) minmax(0,2fr)}.fx-insights{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.fx-insights>.feed-followed-card-desktop{grid-column:1}}
@media(max-width:1080px){.fx-columns{grid-template-columns:minmax(0,1fr)}.fx-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.fx-insights{display:none}.fx-feed .feed-followed-card-mobile{display:block!important;margin:0}.fx-feed .feed-followed-card-mobile .feed-followed-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,70vw);gap:9px;overflow-x:auto;max-width:100%;scroll-snap-type:x proximity}.fx-profile .profile-card>.cover{height:220px}}
@media(max-width:768px){.fx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-hero{padding:22px}.fx-profile .album-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media(max-width:720px){.fx{gap:13px}.fx-hero{min-height:0;flex-direction:column;align-items:stretch;padding:19px 17px;border-radius:15px;gap:14px}.fx-hero h1{font-size:29px}.fx-hero p{font-size:12px}.fx-hero:after{right:-220px;opacity:.45}.fx-hero-actions .fk-btn{flex:1 1 auto}.fx-side{grid-template-columns:minmax(0,1fr)}.fx-kpi{padding:10px;gap:8px}.fx-kpi-icon{width:33px;height:33px;flex-basis:33px}.fx-kpi-icon svg{width:17px;height:17px}.fx-kpi-copy strong{font-size:19px}.fx-kpi-copy small,.fx-kpi-copy em{font-size:9px}.fx-feed .stories-bar{padding:10px 8px}.fx-feed #compose{padding:13px}.fx-post-stream .post{padding:14px}.fx-profile .pe-float{padding:15px}.fx-profile .profile-card{border-radius:15px}.fx-profile .profile-card>.cover{height:190px}.fx-profile .ptab{font-size:11px}.fx-profile .profile-places-head{flex-direction:column;align-items:stretch}.fx-profile .profile-places-search{width:100%}.fx-detail #comments,.fx-edit .fx-editor{padding:15px}.fx-detail .comment-form>.btn{margin-left:auto}}
@media(max-width:390px){.fx-kpi-copy em{display:none}.fx-profile .pe-top{flex-wrap:wrap}.fx-profile .pe-name-block{min-width:0;flex:1 1 170px}.fx-post-stream .post-actions{gap:4px}}
@media(prefers-reduced-motion:reduce){.fx-feed .story-ring,.fx-profile .place-card{transition:none}.fx-feed .story-cell:hover .story-ring{transform:none}}
