.v31-community{
    width:min(1180px,calc(100% - 32px));
    margin:30px auto 150px;
}

.v31-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
    gap:14px;
}

.v31-card{
    background:#fff;
    border:1px solid rgba(20,18,16,.08);
    border-radius:30px;
    padding:23px;
    box-shadow:0 14px 45px rgba(30,25,21,.05);
}

.v31-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.v31-label{
    color:#8c867e;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.v31-title{
    margin:7px 0 0;
    font-size:28px;
    letter-spacing:-.045em;
}

.v31-presence-count{
    min-width:47px;
    height:35px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#eeebe5;
    font-size:11px;
    font-weight:900;
}

.v31-people{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:18px;
}

.v31-person{
    display:flex;
    align-items:center;
    gap:7px;
    padding:6px 10px 6px 6px;
    border-radius:999px;
    background:#f4f1eb;
    font-size:10px;
}

.v31-avatar{
    width:29px;
    height:29px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#23201d;
    color:#fff;
    font-weight:900;
}

.v31-creator{
    margin-top:21px;
    border-radius:24px;
    padding:18px;
    background:#191715;
    color:white;
}

.v31-creator-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.v31-creator-avatar{
    width:54px;
    height:54px;
    border-radius:19px;
    display:grid;
    place-items:center;
    background:#d75b49;
    font-size:21px;
    font-weight:900;
}

.v31-creator strong,
.v31-creator span{
    display:block;
}

.v31-creator span{
    margin-top:3px;
    color:#aaa39e;
    font-size:10px;
}

.v31-follow-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:16px;
}

.v31-follow-row button{
    min-height:45px;
    border:0;
    border-radius:16px;
    cursor:pointer;
    font-weight:800;
}

.v31-follow{
    background:white;
    color:#1b1816;
}

.v31-follow.active{
    background:#d75b49;
    color:white;
}

.v31-notify{
    background:rgba(255,255,255,.09);
    color:white;
}

.v31-notify.active{
    background:#d9a53c;
    color:#191715;
}

.v31-room{
    display:flex;
    flex-direction:column;
    min-height:470px;
}

.v31-messages{
    flex:1;
    overflow:auto;
    max-height:380px;
    padding:12px 0;
}

.v31-message{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    margin-bottom:13px;
}

.v31-message-avatar{
    width:34px;
    height:34px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#eeeae4;
    font-size:10px;
    font-weight:900;
}

.v31-message strong{
    display:block;
    font-size:11px;
}

.v31-message p{
    margin:3px 0 0;
    color:#716d67;
    line-height:1.45;
    font-size:11px;
}

.v31-message time{
    display:block;
    margin-top:4px;
    color:#aaa49d;
    font-size:8px;
}

.v31-send{
    display:flex;
    gap:7px;
    margin-top:12px;
}

.v31-send input{
    min-width:0;
    flex:1;
    height:47px;
    border:1px solid rgba(20,18,16,.08);
    border-radius:16px;
    padding:0 13px;
    outline:0;
}

.v31-send button{
    width:49px;
    border:0;
    border-radius:16px;
    background:#171614;
    color:white;
    cursor:pointer;
}

.v31-live-presence{
    margin-top:12px;
    padding:13px;
    border-radius:18px;
    background:#f4f1eb;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:11px;
}

.v31-live-presence.live{
    background:#f5d7d0;
}

.v31-live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#85807a;
    display:inline-block;
    margin-right:6px;
}

.v31-live-presence.live .v31-live-dot{
    background:#df4f3d;
    animation:v31Pulse 1.3s ease-in-out infinite;
}

@keyframes v31Pulse{
    50%{opacity:.35}
}

@media(max-width:850px){
    .v31-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .v31-follow-row{
        grid-template-columns:1fr;
    }
}