/* groups.css */
#groups-view { overflow: hidden; flex-direction: column; }
.gv-top { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.gv-title { font-size: 22px; font-weight: 900; }
.gv-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.create-btn { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 6px; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: background 0.15s; }
.create-btn:hover { background: var(--accent2); }
.gv-filters { padding: 12px 22px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.groups-grid { flex: 1; overflow-y: auto; padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-content: start; }
.groups-grid::-webkit-scrollbar { width: 4px; }
.group-card { background: var(--bg2); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: all 0.15s; }
.group-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.group-card.joined { border-color: var(--accent2); box-shadow: 0 0 0 1px rgba(123,94,167,0.15); }
.gc-banner { height: 58px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.gc-body { padding: 11px 13px; }
.gc-name { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.gc-desc { font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 9px; }
.gc-foot { display: flex; align-items: center; justify-content: space-between; }
.gc-m { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.gc-btn { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 4px; border: none; cursor: pointer; transition: all 0.15s; }
.gc-btn.join { background: var(--accent); color: #fff; }
.gc-btn.join:hover { background: var(--accent2); }
.gc-btn.leave { background: var(--bg3); color: var(--text2); }
.gc-btn.leave:hover { background: rgba(239,68,68,0.15); color: var(--red); }
.gc-creator { font-size: 10px; color: var(--text3); margin-top: 6px; font-family: var(--font-mono); }