/* Visual translation of the approved Grove concept. Original SVG frames; no canvas runtime. */
.social-avatar { border:0!important; box-shadow:none!important; background-clip:padding-box; }
.social-avatar:after { content:''; position:absolute; inset:-13%; background:center / contain no-repeat; pointer-events:none; }
.social-avatar.frame-grove:after { background-image:url('/assets/frame-grove.svg'); }
.social-avatar.frame-moonlit:after { background-image:url('/assets/frame-moonlit.svg'); }
.social-avatar.frame-aurora:after { background-image:url('/assets/frame-aurora.svg'); }
.social-hub { position:relative; isolation:isolate; }
.social-hub:before { content:''; position:absolute; top:0; left:0; right:0; height:1060px; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#fbfdf544 0%,#eff5eac9 52%,var(--paper) 100%),url('/assets/hero.webp') center top / auto 980px no-repeat; }
html[data-theme=dark] .social-hub:before { background:linear-gradient(90deg,#03100dcc,#08130b42 60%,#06130d30),linear-gradient(180deg,#06130d00 0%,#06120bb0 55%,var(--paper) 100%),url('/assets/hero-night.webp') 54% top / auto 1060px no-repeat; }
.social-hub .site-header { min-height:56px; border-radius:21px; }
.social-hub .grove-main { padding-top:101px; max-width:1550px; }
.grove-topline { padding-inline:12px; }
.grove-topline .page-eyebrow { font-size:8px; letter-spacing:.27em; color:#56744d; }
html[data-theme=dark] .grove-topline .page-eyebrow { color:#c8d7c2; }
.grove-welcome { position:relative; padding:12px 12px 27px; min-height:96px; align-items:start; }
.grove-welcome h1 { font-size:clamp(29px,2.75vw,47px); font-weight:660; line-height:1.16; letter-spacing:-.055em; text-shadow:0 1px 10px var(--paper); }
.grove-welcome>div>p { font-size:14px; margin-top:7px; letter-spacing:.015em; color:#354d39; }
html[data-theme=dark] .grove-welcome>div>p { color:#d5dfd3; }
.grove-world-motto { align-self:end; font-size:8px; text-transform:uppercase; letter-spacing:.2em; line-height:1.8; text-align:right; color:var(--pine); }
.grove-layout { grid-template-columns:minmax(190px,.9fr) minmax(0,2.4fr) minmax(285px,1.22fr); gap:13px; border:0; padding:0; }
.grove-profile-card,.grove-circles,.grove-composer,.grove-post,.grove-navigation,.grove-groups,.grove-studio,.grove-growth,.grove-people { background:linear-gradient(125deg,#fffffff0,#f0f7ebed); border:1px solid #6a885552; box-shadow:inset 0 1px 0 #ffffffee,0 8px 20px #0e271810; border-radius:13px; }
html[data-theme=dark] :is(.grove-profile-card,.grove-circles,.grove-composer,.grove-post,.grove-navigation,.grove-groups,.grove-studio,.grove-growth,.grove-people) { background:linear-gradient(125deg,#19332bca,#081716eb 55%,#081514f2); border-color:#e0eddb3e; box-shadow:inset 0 1px 0 #d7f4db25,inset 0 -1px 0 #d7f4db08,0 8px 18px #0002; }
html[data-theme=dark] .social-hub { --social-panel:#0d1b19; --social-soft:#142820; --social-muted:#a4b6a9; }
.grove-profile-card { text-align:center; padding:35px 17px 16px; min-height:430px; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
.grove-profile-card:before { height:275px; opacity:.8; background:linear-gradient(0deg,#f1f7ed 0%,#f1f7ed00 100%),url('/assets/hero.webp') 67% 40% / auto 320px; }
html[data-theme=dark] .grove-profile-card:before { background:linear-gradient(0deg,#0d201b 0%,#0d201b20 80%),url('/assets/hero-night.webp') 68% 40% / auto 320px; }
.grove-profile-card .social-avatar { width:clamp(105px,9.5vw,156px); height:clamp(105px,9.5vw,156px); margin:8px auto 22px; }
.grove-profile-card h2 { font-size:23px; }
.grove-profile-card .social-title { border-radius:18px; padding:4px 13px; margin-top:12px; }
.grove-profile-bio { font-size:10px; line-height:1.7; max-width:190px; margin:12px auto 0; }
.grove-wallet-label { justify-content:center; font-size:9px; margin-top:12px; }
.grove-balance { text-align:left; font-size:10px; margin-top:13px; padding-top:12px; }
.grove-balance strong { font-size:13px; }
.grove-balance small { font-size:8px; }
.grove-passport-medals { border-top:1px solid var(--line); margin-top:17px; padding-top:14px; text-align:left; }
.grove-passport-medals>.page-eyebrow { font-size:7px; color:var(--social-muted); }
.grove-passport-medals>div { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; text-align:center; }
.grove-passport-medals a>span,.medal-token { width:43px; height:43px; display:grid; place-items:center; margin:auto; border:2px ridge #bdad6c; border-radius:50%; color:#8a733d; background:radial-gradient(circle at 35% 25%,#fff6c2,#e0d498 40%,#8c985d); box-shadow:inset 0 0 0 4px #fff9d03a,0 2px 4px #0002; }
html[data-theme=dark] .grove-passport-medals a>span,html[data-theme=dark] .medal-token { color:#ede0a5; background:radial-gradient(circle at 35% 25%,#697249,#293b27 45%,#0d2118); }
.grove-passport-medals a>small { display:block; font-size:8px; line-height:1.5; margin-top:8px; color:var(--social-muted); }
.grove-navigation { padding:8px; margin-block:12px; gap:4px; }
.grove-navigation>a,.grove-navigation>button { font-size:11px; border-radius:8px; min-height:40px; }
.grove-navigation button[aria-pressed=true] { background:linear-gradient(120deg,#c5ddae44,#a1ba9122); box-shadow:inset 0 0 0 1px #98b58988; }
.grove-groups { padding:18px 12px; }
.grove-groups>.page-eyebrow { font-size:7px; }
.grove-groups>a { display:flex; align-items:center; gap:11px; padding:18px 4px 4px; font-size:11px; font-weight:550; }
.grove-groups .social-avatar { width:30px; height:30px; }
.grove-groups small { display:block; font-size:8px; font-weight:400; color:var(--social-muted); margin-top:4px; }
.grove-circles { padding:15px; }
.grove-section-label h2 { font-size:14px; }
.grove-section-label>span { font-size:8px; }
.circle-list { gap:8px; margin-top:12px; }
.circle-chip { position:relative; padding:0; height:103px; display:block; overflow:hidden; border-radius:9px; text-align:left; background:#132d26; }
.circle-chip>img,.circle-all { position:absolute; inset:0; width:100%; height:100%; border-radius:0; object-fit:cover; }
.circle-all { background:url('/assets/hero.webp') 32% center / auto 160%; }
.circle-all>svg { display:none; }
html[data-theme=dark] .social-hub .circle-all { background:url('/assets/hero-night.webp') 32% center / auto 160%; }
.circle-chip:after { content:''; position:absolute; inset:25% 0 0; background:linear-gradient(transparent,#071d22ef); }
.circle-chip strong { position:absolute; left:10px; right:3px; bottom:13px; z-index:1; color:#fff; font-size:11px; text-shadow:0 1px 3px #000; }
.circle-chip:is(:hover,.is-active) { outline:1px solid #d2ecc0; outline-offset:2px; border-color:#c8e5b9; }
.grove-composer { margin-top:11px; padding:15px; }
.composer-input { gap:13px; }
.composer-input textarea { min-height:52px; padding-top:8px; font-size:12px; }
.composer-actions { padding-top:6px; gap:8px; }
.composer-note { font-size:8px; margin-top:8px; }
.stream-heading { margin:10px 6px 9px; border-bottom:1px solid #92a58760; }
.stream-tabs { gap:22px; }
.stream-tabs>button { font-size:10px; min-height:36px; }
.stream-heading>span { display:none; }
.grove-post { padding:17px; }
#grove-feed { gap:11px; }
.post-copy { font-size:12px; line-height:1.8; margin-top:12px; }
.post-author-meta .social-title { display:none; }
.post-author-meta strong { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.post-world { margin-top:10px; font-size:8px; padding:3px 6px; }
.post-feature { height:220px; margin-top:12px; border-radius:9px; }
.post-feature-copy>strong { font-size:23px; }
.post-feature-copy>small { font-size:7px; }
.post-actions { margin-top:9px; }
.grove-studio { padding:19px 15px 13px; }
.studio-head { display:flex; align-items:center; gap:12px; }
.studio-head .leaf-coin { width:45px; height:45px; margin:0; }
.studio-head h2 { font-size:23px; letter-spacing:-.045em; }
.studio-head p { font-size:12px; margin-top:4px; }
.studio-balance { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:14px; }
.studio-balance>span { font-size:8px; line-height:1.7; color:var(--social-muted); max-width:130px; }
.studio-balance strong { font-size:13px; font-weight:550; white-space:nowrap; text-align:right; }
.studio-balance small { display:block; font-size:8px; color:var(--social-muted); margin-top:4px; font-weight:400; }
.studio-frames { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:19px; }
.studio-frames>a { display:flex; flex-direction:column; align-items:center; border:1px solid var(--line); border-radius:10px; padding:17px 6px 10px; background:linear-gradient(130deg,#a5d48a08,transparent); min-width:0; }
.studio-frames .social-avatar { width:clamp(40px,4.2vw,76px); height:clamp(40px,4.2vw,76px); margin-block:0 14px; }
.studio-frames strong { font-size:10px; margin-bottom:10px; }
.frame-price { font-size:8px; border-radius:18px; border:1px solid #82928060; padding:5px 4px; width:100%; text-align:center; white-space:nowrap; }
.frame-price.equipped { background:linear-gradient(120deg,#d5f8b0,#abda7c); color:#1d3a20; border-color:#dafac6; }
.grove-studio>.button { display:flex; width:100%; margin-top:12px; min-height:36px; font-size:11px; border-radius:9px; background:linear-gradient(155deg,#9eba9940,transparent); }
.studio-footnote { display:flex; justify-content:space-between; gap:5px; color:var(--social-muted); font-size:7px; margin-top:10px; line-height:1.6; }
.grove-growth { margin-top:11px; padding:17px 15px; }
.grove-growth .grove-section-label>span { font-size:7px; }
.growth-milestone { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; margin-top:12px; padding:12px; }
.growth-milestone .medal-token { margin:0; flex-shrink:0; width:41px; height:41px; }
.growth-milestone>div { flex:1; min-width:0; }
.growth-milestone strong { display:block; font-size:11px; }
.growth-milestone div>span { display:block; font-size:10px; color:var(--social-muted); margin-top:6px; }
.growth-milestone>svg { width:13px; height:13px; color:var(--social-muted); }
.growth-milestone progress { display:block; width:100%; height:5px; appearance:none; border:0; border-radius:6px; overflow:hidden; margin-top:10px; }
.growth-milestone progress::-webkit-progress-bar { background:#92b18e26; border-radius:6px; }
.growth-milestone progress::-webkit-progress-value { background:linear-gradient(90deg,#79ba7c,#c5e8a1); border-radius:6px; }
.growth-milestone progress::-moz-progress-bar { background:#9ad185; }
.grove-right .grove-people { padding:17px 15px; margin-top:11px; }
.grove-person { margin-top:22px; }
.grove-person .social-avatar { width:36px; height:36px; }
.grove-right .grove-local-note { font-size:8px; margin:13px 4px; }
@media(min-width:1350px) { .grove-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:13px; padding-block:14px 10px; }.composer-input { align-items:center; }.composer-input textarea { min-height:40px; height:40px; padding-top:9px; resize:vertical; }.composer-input textarea:focus { min-height:75px; }.composer-actions { border:0; padding:0; }.composer-actions #compose-count { display:none; }.composer-actions .compose-attachment select { width:106px; }.composer-note,#composer-attachment { grid-column:1/-1; }.composer-note { margin-top:7px; margin-left:52px; } }
html.low-effects .social-hub:before { opacity:.65; }
html[data-theme=light] .grove-welcome>div>p { font-weight:500; text-shadow:0 1px 8px #fff,0 1px 3px #fff; }
@media(max-width:1250px) and (min-width:1001px) { .grove-layout { grid-template-columns:190px minmax(0,1fr) 265px; gap:12px; }.studio-head h2 { font-size:20px; }.grove-growth .grove-section-label>span { display:none; }.stream-tabs { gap:15px; }.circle-chip strong { font-size:9px; left:7px; }.grove-profile-card { padding-inline:13px; }.grove-studio { padding-inline:12px; }.studio-frames { gap:5px; }.studio-frames>a { padding-inline:5px; } }
@media(max-width:1100px) { .grove-right { display:block; grid-column:auto; border:0; padding:0; }.grove-world-motto { display:none; } }
@media(max-width:1000px) and (min-width:761px) { .grove-layout { grid-template-columns:180px minmax(0,1fr); gap:16px; }.grove-right { grid-column:2; display:grid; grid-template-columns:1fr; }.grove-right .grove-studio { margin-top:20px; }.studio-frames .social-avatar { width:74px; height:74px; }.grove-profile-card .social-avatar { width:105px; height:105px; }.grove-profile-card { padding-inline:13px; }.grove-profile-bio { font-size:9px; }.grove-passport-medals>div { gap:5px; }.grove-passport-medals a>span { width:36px; height:36px; }.grove-welcome h1 { font-size:32px; }.grove-welcome>div>p { font-size:12px; } }
@media(max-width:760px) { .social-hub .grove-main { padding-top:102px; }.grove-topline,.grove-welcome { padding-inline:0; }.grove-welcome { padding-block:12px 26px; }.grove-welcome h1 { font-size:37px; max-width:500px; }.grove-welcome h1 span { display:block; }.grove-welcome>div>p { max-width:310px; font-size:12px; line-height:1.7; }.grove-layout { display:flex; gap:0; }.grove-left { display:contents; }.grove-profile-card { display:none; }.grove-navigation { display:flex; margin:0 0 14px; width:100%; padding:5px; }.grove-navigation>a,.grove-navigation>button { font-size:9px; gap:4px; padding:8px 6px; flex:1; justify-content:center; min-height:38px; }.grove-navigation svg { display:none; }.grove-groups { order:3; width:100%; display:flex; align-items:center; gap:18px; padding:15px; margin-block:20px; }.grove-groups>.page-eyebrow { display:none; }.grove-groups>a { padding:0; flex:1; font-size:10px; gap:9px; }.grove-groups .social-avatar { width:30px; height:30px; }.grove-groups small { font-size:7px; }.grove-left>.grove-local-note { display:none; }.grove-stream { order:1; }.grove-right { order:2; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:5px; }.grove-right .grove-studio { grid-column:1/-1; }.grove-growth,.grove-right .grove-people { margin-top:0; }.grove-right>.grove-local-note { grid-column:1/-1; }.studio-frames .social-avatar { width:78px; height:78px; }.studio-head h2 { font-size:25px; }.studio-frames strong { font-size:12px; }.frame-price { max-width:90px; font-size:10px; }.studio-footnote { font-size:9px; }.grove-circles { padding:14px 12px; }.circle-chip { height:100px; }.circle-chip strong { font-size:10px; left:8px; }.grove-composer { padding:15px 12px; }.composer-input textarea { font-size:16px; min-height:64px; }.stream-tabs { width:100%; gap:10px; justify-content:space-between; }.stream-tabs>button { font-size:10px; min-height:42px; }.post-feature { height:245px; }.grove-post { padding:17px 14px; }.post-copy { font-size:13px; }.grove-end { padding-bottom:24px; }.grove-growth .grove-section-label>span { display:none; }.growth-milestone { padding:11px 9px; gap:9px; }.growth-milestone .medal-token { width:33px; height:33px; }.growth-milestone strong { font-size:10px; }.growth-milestone div>span { font-size:9px; }.growth-milestone>svg { display:none; } }
@media(max-width:480px) { .grove-navigation { gap:0; }.grove-navigation>a,.grove-navigation>button { font-size:8px; padding:8px 4px; }.grove-welcome h1 { font-size:35px; }.grove-right { display:block; }.grove-growth,.grove-right .grove-people { margin-top:12px; }.grove-groups { gap:12px; }.grove-groups>a { font-size:9px; }.grove-groups .social-avatar { width:26px; height:26px; }.grove-groups small { font-size:7px; }.studio-frames .social-avatar { width:65px; height:65px; }.grove-section-label>span { font-size:8px; }.circle-list { gap:6px; }.circle-chip strong { left:5px; font-size:8px; bottom:10px; }.circle-chip { height:85px; }.circle-chip:is(:hover,.is-active) { outline-offset:1px; }.post-author-meta .identity-role { font-size:7px; }.grove-post .post-feature { height:215px; }.grove-studio { padding:20px 15px; }.grove-growth .grove-section-label>span { display:block; }.growth-milestone .medal-token { width:40px; height:40px; }.growth-milestone strong { font-size:12px; } }
@media(max-width:350px) { .grove-welcome h1 { font-size:31px; }.grove-navigation>a,.grove-navigation>button { font-size:7px; }.stream-tabs>button { font-size:9px; }.studio-frames .social-avatar { width:56px; height:56px; }.circle-chip strong { font-size:7px; }.circle-chip { height:80px; } }
@media(max-width:760px) { .grove-navigation>a,.grove-navigation>button { min-height:44px; font-size:10px; }.post-actions>button { min-height:44px; }.grove-person>button { min-height:40px; }.circle-chip strong { font-size:10px; } }
@media(max-width:350px) { .grove-navigation>a,.grove-navigation>button { font-size:9px; }.circle-chip strong { font-size:9px; left:4px; } }