.header { 
    text-align: center; background: var(--card-bg); padding: 30px; 
    border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    margin-bottom: 20px; margin-top: 40px; transition: background 0.3s;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--primary-color); object-fit: cover; }
.header-btn { margin: 5px; }

.streams-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.stream-card { 
    background: var(--card-bg); flex: 1; min-width: 300px; padding: 20px; border-radius: 12px; 
    text-align: center; border-top: 5px solid var(--brand-color, #ccc);
    display: flex; flex-direction: column; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stream-card h3 { margin-top: 0; font-size: 1.2em; color: var(--text-color); }
.stream-card .btn { background: var(--brand-color); margin-top: 15px; width: 80%; align-self: center; }

.bilibili-theme { --brand-color: #fb7299; }
.youtube-theme  { --brand-color: #ff0000; }
.twitch-theme   { --brand-color: #9146ff; }

.iframe-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000; }
.responsive-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: none; }

.offline-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 5; transition: opacity 0.8s ease-in-out;
}
.iframe-wrapper.is-live .offline-img { opacity: 0; pointer-events: none; }