.groups-page { padding:4px 0 28px; color:var(--text-color); }
.groups-page [hidden] { display:none !important; }
.groups-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:18px; border:1px solid var(--border-color); border-radius:16px; background:var(--card-bg); box-shadow:var(--shadow); }
.groups-kicker { color:var(--link-color); font-size:.65rem; font-weight:800; letter-spacing:.1em; }
.groups-heading h2 { margin:4px 0; font-size:1.35rem; }
.groups-heading p { margin:0; color:var(--text-secondary); font-size:.8rem; }
.groups-search { display:flex; align-items:center; gap:8px; max-width:540px; height:42px; margin:0 0 14px; padding:0 13px; border:1px solid var(--border-color); border-radius:13px; background:var(--card-bg); color:var(--muted-text); }
.groups-search>span { font-size:1.2rem; }
.groups-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text-color); font:inherit; font-size:.8rem; }
.groups-create-button,.community-join-button,.group-composer-footer button,.groups-empty button { min-height:38px; padding:8px 15px; border:0; border-radius:11px; background:var(--link-color); color:#fff; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; }
#page-groups .group-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.community-card { min-width:0; padding:14px; border:1px solid var(--border-color); border-radius:15px; background:var(--card-bg); box-shadow:var(--shadow); }
.community-card-main { display:flex; align-items:flex-start; width:100%; gap:11px; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.community-card-icon,.group-detail-icon { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:13px; background:color-mix(in srgb,var(--link-color) 12%,var(--card-bg)); font-size:1.25rem; }
.community-card-copy { display:grid; min-width:0; gap:4px; }
.community-card-copy strong { overflow:hidden; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.community-card-copy>span { display:-webkit-box; overflow:hidden; color:var(--text-secondary); font-size:.75rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.community-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; padding-top:10px; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:.7rem; }
.community-member-label { color:var(--link-color); font-weight:700; }
.community-card-footer .community-join-button { min-height:30px; padding:5px 11px; font-size:.7rem; }
.groups-empty,.group-feed-empty { display:grid; justify-items:center; gap:7px; padding:30px 15px; border:1px dashed var(--border-color); border-radius:14px; color:var(--text-secondary); text-align:center; }
.groups-empty>span { font-size:1.7rem; }
.groups-empty strong { color:var(--text-color); }
.groups-empty p { margin:0 0 5px; font-size:.78rem; }
.group-back-button { margin:0 0 12px; padding:7px 11px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); color:var(--text-color); font:inherit; font-size:.75rem; cursor:pointer; }
.group-profile { overflow:hidden; border:1px solid var(--border-color); border-radius:16px; background:var(--card-bg); box-shadow:var(--shadow); }
.group-profile-cover { position:relative; display:flex; align-items:flex-start; height:105px; overflow:hidden; padding:13px 16px; background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--link-color) 35%,transparent),transparent 28%),linear-gradient(125deg,color-mix(in srgb,var(--link-color) 22%,var(--card-bg)),var(--card-bg) 65%); }
.group-profile-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.group-profile-cover.has-cover:after { position:absolute; inset:0; background:linear-gradient(90deg,#0006,transparent 75%); content:""; }
.group-profile-cover span { position:relative; z-index:1; padding:5px 8px; border:1px solid #ffffff66; border-radius:999px; background:#0003; color:#fff; font-size:.57rem; font-weight:850; letter-spacing:.1em; }
.group-profile-main { display:flex; align-items:center; gap:12px; padding:0 17px; }
.group-profile-avatar { position:relative; display:grid; place-items:center; width:68px; height:68px; flex:0 0 68px; margin-top:-34px; overflow:hidden; border:4px solid var(--card-bg); border-radius:21px; background:linear-gradient(145deg,var(--link-color),color-mix(in srgb,var(--link-color) 40%,#8b5cf6)); color:#fff; font-size:1.5rem; font-weight:850; box-shadow:0 5px 16px #0002; }
.group-profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.group-profile-identity { min-width:0; flex:1; padding:9px 0 3px; }
.group-profile-identity h2 { overflow-wrap:anywhere; margin:0 0 4px; font-size:1.12rem; }
.group-profile-identity span { color:var(--muted-text); font-size:.67rem; }
.group-settings-button { flex:0 0 auto; padding:7px 10px; border:1px solid var(--border-color); border-radius:10px; background:var(--input-bg); color:var(--text-color); font:inherit; font-size:.7rem; cursor:pointer; }
.group-profile-description { margin:10px 17px 15px 97px; color:var(--text-secondary); font-size:.79rem; line-height:1.5; overflow-wrap:anywhere; }
.group-membership { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; padding:10px 12px; border-radius:12px; background:var(--card-bg); color:var(--text-secondary); font-size:.75rem; }
.group-membership>span { font-size:.7rem; }
.group-membership .community-join-button,.group-leave-button { min-height:31px; padding:6px 12px; border:0; border-radius:9px; background:var(--link-color); color:#fff; font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; }
.group-leave-button { border:1px solid var(--border-color); background:var(--input-bg); color:var(--text-secondary); }
.group-profile-tabs { display:flex; gap:5px; margin:12px 0 8px; border-bottom:1px solid var(--border-color); }
.group-profile-tabs button { padding:9px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-secondary); font:inherit; font-size:.78rem; cursor:pointer; }
.group-profile-tabs button.active { border-bottom-color:var(--link-color); color:var(--link-color); font-weight:750; }
.group-about-panel { padding:15px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); }
.group-about-panel h3 { margin:0 0 7px; font-size:.9rem; }
.group-about-panel p { margin:0; color:var(--text-secondary); font-size:.8rem; line-height:1.5; }
.group-about-panel dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; margin:15px 0 0; }
.group-about-panel dl>div { padding:9px 10px; border-radius:10px; background:var(--input-bg); }
.group-about-panel dt { color:var(--muted-text); font-size:.65rem; }
.group-about-panel dd { margin:3px 0 0; color:var(--text-color); font-size:.77rem; font-weight:650; }
.group-post-composer { margin:10px 0; padding:12px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); }
.group-post-composer textarea { display:block; width:100%; min-height:80px; padding:10px 12px; border:1px solid var(--border-color); border-radius:10px; outline:none; background:var(--input-bg); color:var(--text-color); font:inherit; font-size:.82rem; resize:vertical; }
.group-post-composer textarea:focus { border-color:var(--link-color); }
.group-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.group-composer-footer span { color:var(--text-secondary); font-size:.7rem; }
.group-composer-footer button { min-height:32px; padding:6px 12px; font-size:.72rem; }
.group-composer-footer button:disabled,.groups-create-button:disabled { opacity:.6; cursor:wait; }
.group-feed { display:grid; gap:9px; margin-top:12px; }
.group-post { padding:13px 15px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); box-shadow:var(--shadow); }
.group-post-author { display:block; padding:0; border:0; background:none; color:var(--link-color); font:inherit; font-size:.8rem; font-weight:750; cursor:pointer; }
.group-post-date { display:block; margin-top:2px; color:var(--muted-text); font-size:.65rem; }
.group-post-text { margin-top:10px; color:var(--text-color); font-size:.85rem; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap; }
.group-create-modal textarea { min-height:90px; resize:vertical; }
.group-create-modal label { display:block; margin:10px 0 5px; color:var(--text-secondary); font-size:.78rem; }
.group-create-modal label span { color:var(--muted-text); }
.group-create-error { min-height:18px; margin:5px 0; color:var(--danger); font-size:.75rem; }
.group-create-modal #createGroupButton { width:100%; }
.group-cover-editor-preview { position:relative; display:grid; place-items:center; width:100%; height:120px; margin:7px 0 9px; overflow:hidden; border:1px dashed var(--border-color); border-radius:12px; background:linear-gradient(125deg,color-mix(in srgb,var(--link-color) 20%,var(--card-bg)),var(--input-bg)); color:var(--muted-text); font-size:.76rem; }
.group-cover-editor-preview img { width:100%; height:100%; object-fit:cover; }
.group-avatar-editor-preview { position:relative; display:grid; place-items:center; width:82px; height:82px; margin:7px 0 9px; overflow:hidden; border:1px dashed var(--border-color); border-radius:22px; background:linear-gradient(145deg,color-mix(in srgb,var(--link-color) 20%,var(--card-bg)),var(--input-bg)); color:var(--muted-text); font-size:.65rem; text-align:center; }
.group-avatar-editor-preview img { width:100%; height:100%; object-fit:cover; }
.group-create-modal .group-cover-picker { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border:1px solid var(--border-color); border-radius:9px; background:var(--input-bg); color:var(--text-color); cursor:pointer; }
.group-create-modal #editGroupCoverUrl { width:100%; box-sizing:border-box; }
.group-create-modal #editGroupAvatarUrl { width:100%; box-sizing:border-box; }
.group-cover-remove { display:block; margin:8px 0 2px; padding:6px 0; border:0; background:transparent; color:var(--danger); font:inherit; font-size:.72rem; cursor:pointer; }
.group-cover-help { display:block; margin:2px 0 8px; color:var(--muted-text); font-size:.68rem; }
@media(max-width:600px) {
    .groups-heading { align-items:flex-start; flex-direction:column; padding:14px; }
    .groups-create-button { width:100%; }
    #page-groups .group-list { grid-template-columns:1fr !important; gap:10px !important; }
    .group-membership { align-items:flex-start; flex-wrap:wrap; }
    .group-profile-cover { height:82px; }
    .group-profile-main { align-items:flex-start; gap:9px; padding:0 12px; }
    .group-profile-avatar { width:58px; height:58px; flex-basis:58px; margin-top:-28px; border-radius:18px; }
    .group-profile-identity h2 { font-size:.96rem; }
    .group-settings-button { padding:6px 8px; font-size:.64rem; }
    .group-profile-description { margin:9px 13px 13px 79px; }
}