:root {
    --color-bg-main: #232428;
    --color-bg-box: #2B2D31;
    --color-bg-header: #313338;
    --color-bg-hover: #383A40;
    --color-border: #1E1F22;
    --color-text-main: #F2F3F5;
    --color-text-muted: #B5BAC1;
    --color-text-disabled: #80848E;
    --color-accent: #5865F2;
    --color-accent-hover: #4752C4;
    --rgb-accent: 88, 101, 242;
}
.groups-page{width:100%;max-width:1450px;margin:0 auto;color:var(--color-text-main)}
.groups-hero{background:linear-gradient(135deg,var(--color-bg-header),var(--color-bg-box));border:1px solid var(--color-border);border-radius:8px;padding:22px;margin-bottom:16px;position:relative;overflow:hidden}
.groups-hero:after{content:"";position:absolute;right:-65px;top:-65px;width:170px;height:170px;background:rgba(var(--rgb-accent),.18);border-radius:50%}
.groups-hero-title{position:relative;z-index:2;color:var(--color-text-main);font-size:26px;font-weight:550;margin-bottom:6px}
.groups-hero-desc{position:relative;z-index:2;color:var(--color-text-muted);font-size:13px;line-height:1.6;font-weight:550}
.groups-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.groups-stat{background:var(--color-bg-box);border:1px solid var(--color-border);border-radius:6px;padding:13px;text-align:center}
.groups-stat strong{display:block;color:var(--color-text-main);font-size:18px;font-weight:550;margin-bottom:3px}
.groups-stat span{color:var(--color-text-disabled);font-size:11px;font-weight:550;text-transform:uppercase}
.groups-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.group-card{background:var(--color-bg-box);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;transition:.25s ease}
.group-card:hover{background:var(--color-bg-hover);transform:translateY(-3px);border-color:rgba(var(--rgb-accent),.55)}
.group-banner{background:var(--color-bg-header);border-bottom:1px solid var(--color-border);padding:16px;text-align:center;min-height:42px}
.group-banner img{width:136px;height:42px;max-width:100%;object-fit:contain;border-radius:6px}
.xgroups-fallback-image{display:inline-flex;align-items:center;justify-content:center;min-width:136px;min-height:42px;padding:0 10px;border-radius:6px;background:rgba(var(--rgb-accent),.16);color:var(--color-text-main);font-size:13px;font-weight:800}
.group-body{padding:14px}
.group-name{text-align:center;font-size:20px;font-weight:550;margin-bottom:14px}
.group-info-box{background:var(--color-bg-main);border:1px solid var(--color-border);border-radius:6px;padding:10px;margin-bottom:9px}
.group-info-label{color:var(--color-text-disabled);font-size:10px;font-weight:550;text-transform:uppercase;margin-bottom:6px}
.group-info-value{display:flex;align-items:center;gap:9px;color:var(--color-text-muted);font-size:12px;font-weight:550;line-height:1.5}
.group-info-value i{width:25px;height:25px;min-width:25px;background:rgba(var(--rgb-accent),.16);border-radius:6px;color:var(--color-accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.group-info-value a{color:var(--color-text-main)!important;text-decoration:none;font-weight:550}
.group-info-value a:hover{color:var(--color-accent)!important}
.group-view-btn{display:block;background:var(--color-accent);color:#fff!important;border-radius:50px;padding:9px 12px;text-align:center;text-decoration:none;font-size:12px;font-weight:550;margin-top:12px}
.group-view-btn:hover{background:var(--color-accent-hover);color:#fff!important}
.group-empty{grid-column:1/-1;background:var(--color-bg-box);border:1px solid var(--color-border);border-radius:8px;padding:18px;color:var(--color-text-muted);text-align:center}
.groups-members-actions{margin-bottom:16px}.group-back-btn{display:inline-block;width:auto;margin-top:0}
.groups-members-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.group-member-card{display:flex;align-items:center;gap:12px;background:var(--color-bg-box);border:1px solid var(--color-border);border-radius:8px;padding:12px}
.group-member-avatar{width:44px;height:44px;min-width:44px;display:block;overflow:hidden;border-radius:8px;background:var(--color-bg-header)}
.group-member-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.group-member-main{min-width:0}.group-member-name{font-size:14px;font-weight:800;margin-bottom:4px}.group-member-name a{text-decoration:none}
.group-member-meta{color:var(--color-text-muted);font-size:11px;font-weight:600}.pagination{margin:12px 0}
@media(max-width:1200px){.groups-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.groups-grid,.groups-members-grid{grid-template-columns:repeat(2,1fr)}.groups-stats{grid-template-columns:1fr}}
@media(max-width:550px){.groups-grid,.groups-members-grid{grid-template-columns:1fr}}