.stream-link[data-live-status]{box-sizing:border-box;width:169px;display:inline-flex;flex-direction:column;align-items:stretch;gap:4px;padding:7px 10px;background:#17151c;border:1px solid #ffffff24;border-radius:8px}
.stream-link[data-live-status] .stream-logo-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stream-link[data-live-status] .stream-logo-row img{width:125px;height:30px;object-fit:contain}
.stream-link[data-live-status] .stream-arrow{display:block;width:16px;height:16px;flex:none;color:#b9b9c4}
.stream-link[data-live-status] .stream-status{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:1px;color:#b5b2be}
.stream-link[data-live-status] [data-live-label]{font-size:inherit;color:inherit;white-space:nowrap}
.stream-link[data-live-status] .stream-status-dot{box-sizing:border-box;width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.stream-link[data-live-state=online] .stream-status{color:#64e39d}
.stream-link[data-live-state=online] .stream-status-dot{background:currentColor}
.stream-link[data-live-state=offline] img,.stream-link[data-live-state=unknown] img{filter:grayscale(1) brightness(1.8);opacity:.8}
@media(max-width:600px){.stream-link[data-live-status]{width:124px;padding:5px 7px}.stream-link[data-live-status] .stream-logo-row img{width:90px;height:28px}}

/* Shared header: brand left, live link immediately before logout on the right. */
.topbar.topbar:has(.stream-link){display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px 12px;align-items:center}
.topbar.topbar:has(.stream-link):has(.search-wrap){grid-template-columns:auto minmax(180px,1fr) minmax(180px,320px) auto auto}
.topbar.topbar:has(.stream-link) .header-actions{display:contents}
.topbar.topbar:has(.stream-link) .original-brand{grid-column:1;grid-row:1}
.topbar.topbar:has(.stream-link) > nav{grid-column:2;grid-row:1;width:auto;min-width:0;order:initial}
.topbar.topbar:has(.stream-link) > .search-wrap{grid-column:3;grid-row:1}
.topbar.topbar:has(.stream-link) .stream-link{grid-column:-3;grid-row:1;margin:0;order:initial;justify-self:end}
.topbar.topbar:has(.stream-link) .header-actions form{grid-column:-2;grid-row:1;justify-self:end;margin:0}
.topbar.topbar:has(.stream-link){--live-action-height:65px}
.topbar.topbar:has(.stream-link) .stream-link{height:var(--live-action-height);justify-content:center}
.topbar.topbar:has(.stream-link) .header-actions button{height:var(--live-action-height);min-height:var(--live-action-height);padding:7px 14px;background:#17151c;border:1px solid #ffffff24;border-radius:8px;color:#b9b9c4;white-space:nowrap}
.topbar.topbar:has(.stream-link) .header-actions button:hover{background:#28222e;color:#fff;border-color:#ffffff50}
@media(max-width:1550px) and (min-width:1101px){
 .topbar.topbar:has(.stream-link):has(.search-wrap){grid-template-columns:auto minmax(220px,1fr) auto auto}
 .topbar.topbar:has(.stream-link):has(.search-wrap) > nav{grid-column:1/-1;grid-row:2;width:100%}
 .topbar.topbar:has(.stream-link):has(.search-wrap) > .search-wrap{grid-column:2;grid-row:1}
}
@media(max-width:1100px){
 .topbar.topbar:has(.stream-link),.topbar.topbar:has(.stream-link):has(.search-wrap){grid-template-columns:minmax(0,1fr) auto auto}
 .topbar.topbar:has(.stream-link) > nav{grid-column:1/-1;grid-row:2;width:100%}
 .topbar.topbar:has(.stream-link) > .search-wrap{grid-column:1/-1;grid-row:3}
}
@media(max-width:600px){
 .topbar.topbar:has(.stream-link),.topbar.topbar:has(.stream-link):has(.search-wrap){grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
 .topbar.topbar:has(.stream-link){--live-action-height:40px}
 .topbar.topbar:has(.stream-link) .original-brand{width:100%;max-width:200px}
 .topbar.topbar:has(.stream-link) .original-brand .original-logo{width:100%;height:auto;max-width:160px;object-fit:contain;object-position:left center}
 .topbar.topbar:has(.stream-link) .stream-link{width:107px;min-height:0;padding:3px 5px;gap:2px}
 .topbar.topbar:has(.stream-link) .stream-logo-row{gap:4px}
 .topbar.topbar:has(.stream-link) .stream-logo-row img{width:72px;height:16px;object-fit:contain}
 .topbar.topbar:has(.stream-link) .stream-arrow{width:12px;height:12px}
 .topbar.topbar:has(.stream-link) .stream-status{font-size:9px;gap:4px;letter-spacing:.5px}
 .topbar.topbar:has(.stream-link) .stream-status-dot{width:5px;height:5px;border-width:1px}
 .topbar.topbar:has(.stream-link) .header-actions button{white-space:nowrap;padding:3px 9px}
}
.stream-link[data-live-status]:is(:hover,:focus-visible){background:#28222e;border-color:#ffffff50;color:#fff}
.stream-link[data-live-status]:is(:hover,:focus-visible) .stream-arrow{color:#fff}
.stream-link[data-live-status]:is(:hover,:focus-visible) img{opacity:1}
.stream-link[data-live-status]:focus-visible{outline:2px solid #fff;outline-offset:3px}