/* HH Livestreams — Liste + Stage (dunkel) */

.hh-live-hint { color: var(--hh-faint,#9a9aa5); font-size: 13px; margin-bottom: 16px; }
.hh-live-empty { color: var(--hh-faint,#9a9aa5); }

/* Liste */
.hh-live-card { background:#1a1a1e; border-radius:12px; overflow:hidden; cursor:pointer; margin-bottom:14px;
    border:1px solid rgba(255,255,255,.06); transition:transform .12s ease, border-color .12s ease; }
.hh-live-card:hover { transform:translateY(-3px); border-color:#e4002b; }
.hh-live-thumb { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#232329,#121214);
    display:flex; align-items:center; justify-content:center; color:#4a4a52; font-size:44px; }
.hh-live-badge { position:absolute; top:8px; left:8px; background:#e4002b; color:#fff; font-size:11px; font-weight:800;
    letter-spacing:.5px; padding:2px 8px; border-radius:4px; }
.hh-live-paid { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#f5c542; font-size:12px; font-weight:700;
    padding:2px 8px; border-radius:12px; }
.hh-live-vc { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; font-size:12px;
    padding:2px 8px; border-radius:12px; }
.hh-live-meta { padding:10px 12px; }
.hh-live-t { color:#fff; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-live-u { color:#9a9aa5; font-size:12px; margin-top:2px; }

/* Stage (Vollbild) */
.hh-live-stage { position:fixed; inset:0; z-index:100000; background:#0b0b0d; display:flex; }
.hh-live-videowrap { position:relative; flex:1; min-width:0; background:#000; display:flex; align-items:center; justify-content:center; }
.hh-live-videowrap video { width:100%; height:100%; object-fit:contain; background:#000; }
.hh-live-top { position:absolute; top:0; left:0; right:0; padding:12px 14px; display:flex; align-items:center; gap:12px;
    background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent); color:#fff; }
.hh-live-live { display:inline-flex; align-items:center; gap:6px; background:#e4002b; padding:3px 10px; border-radius:5px;
    font-weight:800; font-size:12px; letter-spacing:.5px; }
.hh-live-live .dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:hh-live-blink 1.2s infinite; }
@keyframes hh-live-blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.hh-live-count { background:rgba(0,0,0,.5); padding:3px 10px; border-radius:12px; font-size:13px; }
.hh-live-headtitle { flex:1; font-size:14px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-live-x { margin-left:auto; border:0; background:rgba(228,0,43,.9); color:#fff; width:38px; height:38px; border-radius:50%;
    cursor:pointer; font-size:18px; }
.hh-live-x:hover { background:#e4002b; }

/* Chat-Seite */
.hh-live-side { width:320px; max-width:34vw; background:#141417; display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,.06); }
.hh-live-chat { flex:1; overflow-y:auto; padding:14px; }
.hh-live-chatline { color:#dcdce2; font-size:14px; margin-bottom:8px; line-height:1.35; word-wrap:break-word; }
.hh-live-chatline b { color:#fff; }
.hh-live-chatline.me b { color:#ff6b6b; }
.hh-live-chatline.tip { color:#f5c542; }
.hh-live-chatline.sys { color:#7a7a84; font-style:italic; font-size:13px; }
.hh-live-chatbar { display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.06); }
.hh-live-chatbar input { flex:1; min-width:0; background:#0e0e10 !important; border:1px solid rgba(255,255,255,.1) !important;
    color:#fff !important; border-radius:20px !important; padding:9px 14px !important; width:auto !important; display:inline-block !important; }
.hh-live-send, .hh-live-tip { border:0; cursor:pointer; width:40px; height:40px; border-radius:50%; color:#fff; font-size:16px; flex:0 0 40px; }
.hh-live-send { background:#e4002b; }
.hh-live-tip { background:#f5b301; color:#1a1a1e; }
.hh-live-report { border:0; cursor:pointer; width:40px; height:40px; border-radius:50%; background:#2a2a30; color:#ff6b6b; font-size:15px; flex:0 0 40px; }
.hh-live-report:hover { background:#3a2020; }

@media (max-width:768px) {
    .hh-live-stage { flex-direction:column; }
    .hh-live-side { width:100%; max-width:100%; height:40%; border-left:0; border-top:1px solid rgba(255,255,255,.06); }
    .hh-live-videowrap { height:60%; }
}