.room-directory-summary { display:flex; gap:20px; align-items:center; margin:0 0 22px; color:var(--muted,#a2afa8); font-size:14px; }
.room-directory-summary strong { color:#edf4ef; }
.room-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:24px; }
.room-directory-card { min-width:0; display:flex; flex-direction:column; border:1px solid #303a34; border-radius:8px; overflow:hidden; background:#111713; transition:border-color .18s,transform .18s; }
.room-directory-card:hover { border-color:#79bc95; transform:translateY(-2px); }
.room-card-art { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#1c2620; }
.room-card-art>img { width:100%; height:100%; object-fit:cover; }
.room-card-art::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.8)); pointer-events:none; }
.room-card-state { position:absolute; top:14px; left:14px; background:#111b17eb; color:#edf4ef; font-size:11px; font-weight:800; padding:6px 9px; border:1px solid #ffffff30; border-radius:4px; }
.room-card-state.is-live { background:#b62d41; color:white; }
.room-card-host { position:absolute; bottom:14px; left:16px; right:16px; display:flex; align-items:center; gap:9px; color:white; z-index:1; font-size:13px; font-weight:700; }
.room-card-host .avatar { width:28px; height:28px; flex:none; }
.room-card-host span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-card-body { padding:20px; display:flex; flex:1; flex-direction:column; }
.room-card-body h2 { font-size:22px; line-height:1.25; margin:0 0 8px; overflow-wrap:anywhere; }
.room-card-body h2 a { color:#f3f6f4; text-decoration:none; }
.room-card-body p { color:#a5b1aa; font-size:14px; line-height:1.5; height:42px; margin:0 0 20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.room-card-meta { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-top:auto; font-size:12px; color:#b5c3b9; border-top:1px solid #2b352f; padding:14px 0; }
.room-card-meta span:last-child { color:#79d6a0; }
.room-card-actions { display:flex; gap:10px; }
.room-card-actions .btn { flex:1; min-width:0; padding:11px 8px; font-size:14px; }
.room-banner-form { margin:24px 0; padding:20px 0; border-block:1px solid #303a34; display:grid; gap:12px; }
.room-generated-cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; max-height:340px; }
@media(max-width:600px) { .room-card-grid { gap:18px; } .room-card-body { padding:16px; } }