:root { --ink:#11114e; --muted:#7f8bc2; --purple:#7946ff; --canvas:#fdfcfa; }
.club-page svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.club-page [hidden] { display:none !important; }
.club-page .app { background:radial-gradient(ellipse at 50% 15%,#fff 15%,#ffffff66 65%),var(--canvas); }
.club-header { padding:2rem 2rem 0; min-height:9.6rem; gap:1rem; }
.club-header h1 { font-size:3.5rem; line-height:4rem; }
.club-header p { color:#727eb6; font-size:1.65rem; line-height:2.2rem; letter-spacing:-.035rem; }
.club-header .header-actions { gap:1.7rem; padding-top:.3rem; }
.club-tool { display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:50%; background:#f8f7fb; color:#454f94; }
.club-tool svg { width:2.4rem; height:2.4rem; }
.club-tool[aria-expanded=true] { background:#eee7ff; color:var(--purple); }
.club-main { padding:0 1.1rem 2rem; }
.club-tabs { display:flex; margin:0 .7rem 1.3rem; padding:.2rem; border-radius:1.8rem; background:#f6f5fa; }
.club-tabs button { width:50%; display:flex; align-items:center; justify-content:center; gap:1.1rem; height:4.8rem; background:transparent; border:1px solid transparent; border-radius:1.5rem; color:#6674aa; font-size:1.65rem; font-weight: 700; }
.club-tabs button[aria-selected=true] { color:var(--purple); border-color:#cdb9ff; background:#ffffffd9; box-shadow:0 .1rem .5rem #b8a2ff24; }
.club-tabs svg { width:2.5rem; height:2.5rem; }
.tab-calendar { position:relative; display:flex; }
.tab-calendar i { position:absolute; right:-8.4rem; top:-.2rem; width:.7rem; height:.7rem; border-radius:50%; background:#ff6594; }
[aria-selected=true] .tab-calendar i { display:none; }
.club-section + .club-section { margin-top:1.6rem; }
.club-section-heading { display:flex; align-items:center; gap:.9rem; min-height:3.8rem; margin:0 .8rem .5rem; }
.section-icon { width:3.3rem; height:3.3rem; display:grid; place-items:center; flex:none; border-radius:50%; background:#f6f1ff; color:var(--purple); }
.section-icon svg { width:2.4rem; height:2.4rem; }
.club-section-heading h2 { color:var(--purple); font-size:1.65rem; line-height:2rem; letter-spacing:-.035rem; font-weight: 700; }
.club-section-heading p { color:#7784c0; font-size:1.3rem; line-height:1.6rem; margin-top:.25rem; letter-spacing:-.025rem; }
.chat-list { border:1px solid #f7f5f8; border-radius:1.6rem; background:#ffffffb5; box-shadow:0 .3rem 1.7rem #79695604; overflow:hidden; }
.chat-row { display:flex; align-items:center; gap:1.4rem; width:100%; min-height:8.8rem; padding:1rem 1rem 1rem 1.1rem; text-decoration:none; color:var(--ink); background:transparent; }
.chat-row + .chat-row { border-top:1px solid #f2f2f8; }
.chat-avatar { flex:none; width:6.4rem; height:6.4rem; border-radius:50%; background-image:url('assets/club-reference.webp'); background-size:166.5rem 147.2rem; background-repeat:no-repeat; }
.pregnancy-avatar { background-position:-31rem -49.4rem; }
.motherhood-avatar { background-position:-31rem -57.8rem; }
.expert-avatar { background-position:-31rem -71.7rem; }
.heart-avatar { background-position:-31rem -79.8rem; }
.group-avatar { background-position:-31rem -88rem; }
.chat-copy { min-width:0; flex:1; }
.chat-copy strong { display:block; font-size:1.6rem; line-height:1.95rem; letter-spacing:-.05rem; font-weight: 700; }
[data-access=paid] .chat-copy strong { font-size:1.48rem; letter-spacing:-.055rem; }
.chat-copy > span { display:block; margin-top:.45rem; color:var(--muted); font-size:1.42rem; line-height:1.65rem; letter-spacing:-.035rem; }
.inline-lock { display:inline-block; width:1.3rem; height:1.8rem; margin-left:.3rem; vertical-align:-.2rem; color:var(--purple); }
.chat-meta { display:flex; flex-direction:column; align-items:flex-end; align-self:flex-start; gap:.65rem; padding-top:.5rem; color:var(--muted); font-size:1.35rem; line-height:1.5rem; }
.unread { display:grid; place-items:center; min-width:2.4rem; height:2.4rem; border-radius:50%; padding:0 .4rem; color:white; background:linear-gradient(120deg,#956bff,#6833ff); font-size:1.25rem; }
.row-arrow { flex:none; width:1.2rem; height:2rem; color:#5364a4; }
.chat-row .row-arrow { margin-left:-.6rem; }
.event-list { display:grid; gap:.65rem; }
.event-card { display:flex; align-items:center; position:relative; min-height:13.4rem; width:100%; gap:1.6rem; border:1px solid #f0eff7; border-radius:1.3rem; background:#ffffffbd; overflow:hidden; color:var(--ink); text-decoration:none; }
.event-photo { position:relative; display:block; align-self:stretch; flex:none; width:13.4rem; min-height:13.4rem; border-radius:1.1rem; background-image:url('assets/club-reference.webp'); background-size:174.3rem 154.1rem; background-repeat:no-repeat; }
.breathing-photo { background-position:-95.78rem -50.77rem; }
.sleep-photo { background-position:-95.78rem -64.49rem; }
.birth-photo { background-position:-95.78rem -85.21rem; }
.feeding-photo { background-position:-95.78rem -100.08rem; }
.event-copy { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:.7rem 0; }
.event-badge { display:inline-block; border-radius:1.1rem; padding:.4rem .9rem; color:#794dff; background:#f1ebff; font-size:1.1rem; line-height:1.3rem; white-space:nowrap; margin-bottom:.65rem; }
.event-card { text-align:left; }
.event-copy { padding-right:1rem; }
.free-badge { background:#dff9f1; color:#10aa8d; }
.event-copy strong { font-size:1.45rem; line-height:1.65rem; letter-spacing:-.035rem; font-weight: 700; }
.event-date { margin-top:.65rem; font-size:1.3rem; line-height:1.5rem; color:#7482bc; }
.event-expert { margin-top:.45rem; font-size:1.15rem; line-height:1.25rem; color:#7482bc; letter-spacing:-.015rem; }
.event-card > .row-arrow { margin-right:1.1rem; }
#events-panel .club-section-heading { margin:0 0 1rem; align-items:flex-start; }
#events-panel .section-icon { width:4rem; height:4rem; }
#events-panel .club-section-heading > div { padding-top:.5rem; }
#events-panel .club-section + .club-section { margin-top:1.7rem; }
.photo-lock { position:absolute; left:1rem; top:.8rem; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:#fffc; color:#7987b9; }
.photo-lock svg { width:1.4rem; height:1.8rem; }
.paid-event { gap:1.5rem; }
.paid-event .event-copy { padding-right:1rem; }
.paid-event .event-copy strong { padding-right:11.5rem; }
.access-button { position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); padding:1.1rem 1.4rem; border-radius:1.5rem; background:linear-gradient(115deg,#8d5bff,#6b32ff); color:white; font-size:1.2rem; line-height:1.4rem; white-space:nowrap; }
.paid-event:last-child .event-copy strong { padding-right:0; }
.paid-event:last-child .access-button { top:65%; }
.club-search, .club-filters { margin:1rem .7rem 1.5rem; padding:1.2rem; border:1px solid #e7ddff; border-radius:1.3rem; background:white; color:var(--muted); font-size:1.4rem; }
.club-search label { display:block; margin-bottom:.7rem; }
.club-search input { width:100%; border:1px solid #ded6f4; border-radius:.8rem; padding:1rem; font:inherit; font-size:1.6rem; color:var(--ink); background:white; }
.club-filters label { margin-right:1.4rem; white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; }
.club-filters input { accent-color:var(--purple); }
.club-empty { margin:3rem 2rem; font-size:1.6rem; line-height:2.3rem; text-align:center; color:var(--muted); }
.club-notice { position:fixed; z-index:10; bottom:calc(8.5rem + env(safe-area-inset-bottom,0px)); left:1.5rem; right:1.5rem; display:flex; align-items:center; gap:1rem; padding:1.5rem; border-radius:1.5rem; box-shadow:0 .5rem 3rem #33215e20; border:1px solid #e8dcff; background:#fff; font-size:1.5rem; line-height:2rem; }
.club-notice p { flex:1; }
.club-notice button { background:#f4efff; border-radius:50%; min-width:3.5rem; height:3.5rem; text-align:center; font-size:2.4rem; color:var(--purple); }
/* Community overview follows the approved reference; shared navigation stays in styles.css. */
.club-page { --ink:#171333; --muted:#838099; --purple:#794aff; --canvas:#fff; }
.club-page .app { background:#fff; }
.club-header { padding:2rem 2rem 1.2rem; min-height:8rem; align-items:center; }
.club-header p { color:var(--muted); font-size:1.5rem; }
.club-header .header-actions { gap:.8rem; }
.club-main { padding:0 1.8rem 2rem; }
.lara-welcome { display:flex; position:relative; align-items:center; min-height:10.6rem; border-radius:2rem; overflow:hidden; background:#f6f0fc; padding:.8rem 2rem; }
.lara-welcome > div { position:relative; z-index:1; width:65%; }
.lara-welcome h2 { font-size:1.65rem; line-height:1.15; margin-bottom:.4rem; }
.lara-welcome p { font-size:1.3rem; line-height:1.2; color:#51446f; }
.lara-welcome div > span { display:block; text-align:right; margin-top:.3rem; font:italic 500 1.5rem "Intro",sans-serif; color:#8271ae; }
.lara-welcome img { position:absolute; right:-1.3rem; bottom:0; width:14rem; height:100%; object-fit:cover; object-position:center 35%; mix-blend-mode:multiply; mask-image:linear-gradient(90deg,transparent,#000 18%); }
.community-tabs { display:flex; gap:.6rem; margin:1.3rem 0 1rem; }
.community-tabs button { flex:1; min-height:44px; padding:.7rem .5rem; text-align:center; border-radius:3rem; background:#f7f5fa; font-size:1.5rem; }
.community-tabs [aria-selected=true] { background:linear-gradient(120deg,#a06eff,#7137ff); color:white; }
.community-tabs [data-tab=motherhood][aria-selected=true] { background:linear-gradient(120deg,#f6e8f0,#eed8e9); color:#51446f; }
.community-tabs [data-tab=events][aria-selected=true] { background:linear-gradient(105deg,#e4f3c8,#cfe7ad); color:#35482a; }
.community-section { margin:1.1rem 0 1.5rem; }
.community-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.7rem; }
.community-heading h2 { font-size:1.6rem; line-height:1.3; }
.community-heading button { background:none; color:#938ba6; font-size:1.15rem; min-height:32px; white-space:nowrap; }
.community-row { width:100%; display:flex; gap:1.2rem; align-items:center; padding:1rem; margin-bottom:.65rem; border:1px solid #f1edf5; border-radius:1.6rem; background:#fff; text-decoration:none; color:var(--ink); min-height:7.8rem; }
.community-icon { flex:none; display:grid; place-items:center; width:5.5rem; height:5.5rem; border-radius:1.5rem; background:#faf0fe; color:#b564d9; }
.community-icon svg { width:3.4rem; height:3.4rem; }
.community-icon.baby { background:#fff0f7; color:#e88cb2; }
.community-icon.video { background:#f3eaff; color:#8e5df6; }
.community-copy { flex:1; min-width:0; }
.community-copy strong { display:block; font-size:1.45rem; line-height:1.35; margin-bottom:.4rem; }
.community-copy > span { display:block; color:var(--muted); font-size:1.25rem; line-height:1.4; }
.community-meta { align-self:flex-start; text-align:right; color:var(--muted); font-size:1.15rem; line-height:1.7; white-space:nowrap; }
.community-meta b { display:inline-grid; place-items:center; width:2.7rem; height:2.7rem; margin-top:.5rem; border-radius:50%; background:linear-gradient(130deg,#a275ff,#793fff); color:white; font-size:1.3rem; font-weight: 700; }
.club-demo { font-size:1.2rem; color:#91869f; margin:1.5rem 0 .5rem; text-align:center; }
.community-chat { overflow:hidden; }
.community-chat .app { height:100dvh; min-height:0; }
.discussion-header { display:flex; align-items:center; gap:1.2rem; padding:1.6rem 1.8rem 1rem; flex:none; }
.discussion-header a,.discussion-header button { display:grid; place-items:center; min-width:32px; height:40px; background:none; text-decoration:none; color:#55427b; font-size:2.8rem; }
.discussion-header div { flex:1; min-width:0; }
.discussion-header h1 { font-size:1.6rem; line-height:1.25; letter-spacing:0; }
.discussion-header p { color:var(--muted); font-size:1.2rem; margin-top:.4rem; }
.pinned-message { display:flex; align-items:center; gap:1rem; margin:0 1.8rem 1rem; padding:1.1rem 1.3rem; border-radius:1.4rem; background:#f8f3ff; flex:none; }
.pinned-message > span:first-child { color:#9253ed; font-size:2.8rem; }
.pinned-message > span:nth-child(2) { flex:1; font-size:1.3rem; line-height:1.5; }
.pinned-message strong { display:block; color:#9863dc; font-size:1.25rem; }
.pinned-message b { font-size:2rem; color:#9166b9; }
.discussion-messages { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.5rem 1.8rem 1rem; }
.discussion-message { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; }
.member-avatar { display:grid; place-items:center; flex:none; width:3.8rem; height:3.8rem; border-radius:50%; background:#f1ddec; color:#9c6290; font-size:1.7rem; }
.member-1 { background:#f7e5d4; color:#aa7f59; }.member-2 { background:#f0dcdf; color:#a65e6a; }.member-4 { background:#e2ebd8; color:#78925c; }
.discussion-bubble { width:min(82%,560px); padding:1rem 1.2rem .7rem; border-radius:1.5rem; background:#f8f4fc; }
.discussion-bubble h2 { font-size:1.3rem; color:#9762da; margin-bottom:.4rem; }
.discussion-bubble p { font-size:1.45rem; line-height:1.4; }
.discussion-bubble footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem; }
.discussion-bubble time { color:#a49ab7; font-size:1rem; }
.reaction { background:#f1eafb; color:#715a88; padding:.25rem .6rem; border-radius:1rem; font-size:1.2rem; min-height:25px; }
.reaction[aria-pressed=true] { background:#e3d1ff; outline:1px solid #b392e9; }
.own-message { justify-content:flex-end; }
.own-message .discussion-bubble { background:#f0e6ff; }
.discussion-controls { flex:none; padding:.5rem 1.8rem 1rem; }
.chat-demo { color:#9b8caf; font-size:1.1rem; margin-bottom:.7rem; }
.discussion-composer { display:flex; align-items:center; gap:.7rem; }
.discussion-composer button { display:grid; place-items:center; width:40px; height:40px; background:none; color:#9a83b5; font-size:2.5rem; flex:none; }
.composer-field { display:flex; align-items:center; flex:1; min-width:0; border:1px solid #ede5f5; border-radius:3rem; background:#fdfbff; }
.composer-field input { min-width:0; width:100%; border:0; outline:0; background:transparent; padding:1rem 1.2rem; font:inherit; font-size:16px; }
.composer-field:focus-within { outline:2px solid #bb9beb; }
.discussion-composer .discussion-send { color:#fff; background:linear-gradient(140deg,#b071ff,#7934ff); border-radius:50%; font-size:2rem; }
.discussion-composer .discussion-send svg { width:40px; height:40px; display:block; fill:currentColor; stroke:none; }
.community-chat .bottom-navigation { position:relative; margin-top:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.discussion-header svg,.discussion-composer svg,.pinned-message svg { width:22px; height:22px; }
.member-avatar { width:4rem; height:4rem; background-image:url('assets/community-reference.jpg'); background-size:137.4rem 103.7rem; background-position:-73.7rem -24rem; }
.member-1 { background-position:-73.7rem -36.3rem; }.member-2 { background-position:-73.7rem -47.7rem; }.member-4 { background-position:-73.7rem -68rem; }.member-5 { background-position:-73.7rem -78.3rem; }
.discussion-bubble p { font-size:14px; }
.community-copy strong { font-size:1.6rem; }
.community-copy > span { font-size:1.35rem; }

.community-copy .inline-lock { display:inline-block; width:1.1rem; height:1.4rem; margin-left:.4rem; vertical-align:baseline; color:#a491bb; }