.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}

.live-card{background:rgba(255,255,255,.03);border:1px solid rgba(61,169,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.live-card:hover{transform:translateY(-6px);border-color:rgba(61,169,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.4);}

.live-card__thumb{position:relative;aspect-ratio:16/9;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:42px;}
.live-card__thumb iframe,.live-card__thumb img{width:100%;height:100%;object-fit:cover;border:none;}

.live-badge{position:absolute;top:10px;left:10px;background:var(--status-red);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:99px;display:flex;align-items:center;gap:5px;}
.live-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0;animation:pulseLive 1.4s ease-in-out infinite;}
@keyframes pulseLive{0%,100%{opacity:1;}50%{opacity:.3;}}

.live-platform-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:99px;}

.live-card__body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column;}
.live-card__user{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:4px;}
.live-card__title{font-size:13px;color:var(--text-dim);line-height:1.5;margin-bottom:14px;flex:1;}
.live-card__actions{display:flex;gap:8px;}
.live-card__actions .btn{flex:1;justify-content:center;font-size:13px;}

.live-loading{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--text-faint);display:flex;flex-direction:column;align-items:center;gap:14px;}
.live-spinner{width:32px;height:32px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.live-empty{text-align:center;padding:80px 24px;color:var(--text-faint);}
.live-empty h3{font-family:var(--font-display);font-size:22px;margin-bottom:10px;color:var(--text);}
.live-empty p{font-size:14.5px;line-height:1.6;max-width:440px;margin:0 auto;}

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