/* === TYPOGRAFIE DETAILS === */
h3::before, h3::after, h4::before, h4::after {
    content: ''; display: block; width: 100%; height: 1px; border-top: 1px dashed #999; opacity: 1; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
h3, h4 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: var(--font-weight-default); font-size: clamp(1.2rem, 4vw, 1.2rem); margin: 0 0 30px; gap: 20px; }
.cat-header { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; margin: 0 0 25px 0; padding: 15px 0; }
@media (max-width: 768px) {
    .cat-header:has(.dash-tab) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; justify-content: stretch !important; }
}
@media (min-width: 769px) {
    .cat-header:has(.dash-tab) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
}
.cat-header::before { position: absolute; top: 0; left: 0; }
.cat-header::after { position: absolute; bottom: 0; left: 0; }
.cat-header h3 { margin: 0; padding: 0; border: none; gap: 0; flex-grow: 1; }
.cat-header h3::before, .cat-header h3::after { display: none !important; }
h3 a, .dash-tab, .dash-tab:visited, .dash-tab:link { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; background: #ffffff; font-size: 1rem; transition: all 0.2s ease; padding: 12px 20px; border: 1px solid transparent; cursor: pointer; }
h3 a::after, h4 a::after { content: '+'; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--nav-accent); background: var(--nav-accent); font-size: 1.4rem; font-weight: 500; line-height: 1.4rem; margin-left: 12px; transition: all 0.2s ease; color: #fff; padding: 0 0 5px; }
h3 a:hover, .dash-tab:hover { border: 1px solid var(--nav-accent) !important; color: var(--nav-accent) !important; box-shadow: 0 4px 10px rgba(207, 74, 0, 0.1); background: #fff; }
h3 a:hover::after { background-color: var(--nav-accent); color: white; }
.dash-tab.active, .dash-tab.active:visited, body.dark-mode .dash-tab.active, body.dark-mode .dash-tab.active:visited { background: var(--nav-accent) !important; border-color: var(--nav-accent) !important; color: #ffffff !important; font-weight: 600; box-shadow: 0 4px 15px rgba(207, 74, 0, 0.3); }
body.dark-mode h3 a, body.dark-mode .dash-tab, body.dark-mode .dash-tab:visited { background: #1e1e1e; border-color: #333 !important; color: #aaa !important; }
body.dark-mode h3 a:hover, body.dark-mode .dash-tab:hover { border-color: var(--nav-accent) !important; color: var(--nav-accent) !important; }
body.dark-mode .dash-tab.active, body.dark-mode .dash-tab.active:visited { background-color: var(--nav-accent) !important; border-color: var(--nav-accent) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(207, 74, 0, 0.4); }

/* === ICONS (SVG MASKS) === */
.icon { display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; }
.icon-heart, .icon-heart-big, .icon-heart-small { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E"); }
.icon-close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); }
.icon-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.icon-arrow-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: transform 0.3s; }
.stream-accordion-item.open .icon-arrow-down { transform: rotate(180deg); }
.cat-icon { width: 28px; height: 28px; margin-right: 5px; background-color: var(--nav-accent); }
.icon-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='12' x2='12' y2='6'/%3E%3Cline x1='12' y1='12' x2='16' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='12' x2='12' y2='6'/%3E%3Cline x1='12' y1='12' x2='16' y2='14'/%3E%3C/svg%3E"); }
.icon-gamepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z'/%3E%3C/svg%3E"); }
.icon-tv { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z'/%3E%3C/svg%3E"); }
.icon-film { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M19.8 4l-1.8 1.8L16.2 4H14l1.8 1.8L14 7.6V20h8V7.6l-1.8-1.8L22 4h-2.2zM8 7.6L6.2 5.8 8 4H5.8L4 5.8 2.2 4H0v16h8V7.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M19.8 4l-1.8 1.8L16.2 4H14l1.8 1.8L14 7.6V20h8V7.6l-1.8-1.8L22 4h-2.2zM8 7.6L6.2 5.8 8 4H5.8L4 5.8 2.2 4H0v16h8V7.6z'/%3E%3C/svg%3E"); }
.icon-device-pc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z'/%3E%3C/svg%3E"); width: 14px; height: 14px; opacity: 0.6; background-color: #333; }
.icon-device-mobile { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); width: 14px; height: 14px; opacity: 0.6; background-color: #333; }
body.dark-mode .icon-device-pc, body.dark-mode .icon-device-mobile { background-color: #ccc; }

/* === SUBMENUS === */
.submenu-toggle { display: block; position: absolute; right: 0; top: 0; height: var(--item-height); width: 70px; background: none; border: none; color: var(--nav-text); font-size: 1.2rem; cursor: pointer; z-index: 2; }
.submenu-toggle::after { content: '▼'; display: inline-block; transition: transform 0.25s ease; }
.nav-item.submenu-open > .submenu-toggle::after { transform: rotate(180deg); color: #cf4a00; }
.sub-menu { list-style: none; padding-left: 0; margin: 0; background-color: #111; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.nav-item.submenu-open > .sub-menu { max-height: none; }
.sub-menu .nav-item a { padding-left: 35px; }
@media (min-width: 1200px) {
    .sub-menu .nav-item.has-submenu > a::after { content: ' ▶'; top: 0; }
    .sub-menu { position: absolute; top: var(--nav-height); left: 0; width: 100%; background-color: var(--nav-bg); opacity: 1; visibility: hidden; max-height: none; overflow: visible; pointer-events: none; transition: none; z-index: 1500; }
    .nav-item.has-submenu:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; }
    .sub-menu.scroll { max-height: 540px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-accent) var(--nav-hover); }
    .sub-menu .nav-item { width: 100%; flex: none; height: auto; }
    .sub-menu .nav-item a { justify-content: flex-start; padding: 0 20px; height: var(--item-height); }
    .sub-menu .nav-item.has-submenu > .sub-menu { top: 0; left: 100%; width: auto; min-width: 220px; }
}

/* === DASHBOARD PANEL === */
.dashboard-panel { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background-color: var(--bg-body); z-index: 2000; overflow-y: auto; padding: 40px 20px 80px 20px; animation: fadeIn 0.3s ease-out; scrollbar-width: thin; scrollbar-color: var(--nav-accent) transparent; }
@supports (scrollbar-gutter: stable) { .dashboard-panel { scrollbar-gutter: stable; } }
.dashboard-panel::-webkit-scrollbar { width: 14px; }
.dashboard-panel::-webkit-scrollbar-track { background: transparent; }
.dashboard-panel::-webkit-scrollbar-thumb { background-color: var(--nav-accent); border-radius: 10px; border: 4px solid transparent; background-clip: content-box; }
body.dark-mode .dashboard-panel { background-color: #121212; }
.dashboard-panel.active { display: block; }
body:has(.dashboard-panel.active) { overflow: hidden; }
.dashboard-close { position: fixed; top: calc(var(--nav-height) + 20px); right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 2010; }
.dashboard-close:hover { transform: rotate(90deg) scale(1.1); background: var(--nav-accent); color: white; border-color: var(--nav-accent); }
.dashed-header, .dashboard-tabs, .dash-content, .pwa-dash-area { max-width: var(--container-width); margin-left: auto; margin-right: auto; width: 100%; }
.dashed-header { text-align: center; font-size: 1.8rem; margin-bottom: 30px; color: var(--text-main); font-weight: 800; letter-spacing: -0.5px; }
.dashboard-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
.dash-content { display: none; animation: slideUpFade 0.4s ease; }
.dash-content.active { display: block; }
.favorites-streams-list { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; }
@media (max-width: 768px) {
    .dashboard-panel { padding: 80px 15px 80px 15px; padding-top: 20px !important; padding-left: 15px !important; padding-right: 15px !important; }
    .dashed-header { margin-top: 10px; margin-bottom: 20px; font-size: 1.4rem; text-align: left; }
    .dashboard-close { position: absolute !important; top: 36px !important; right: 10px !important; width: 38px !important; height: 38px !important; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; color: var(--text-main) !important; display: flex !important; align-items: center; justify-content: center; transform: none !important; z-index: 50; }
    .dashboard-close .icon { width: 20px; height: 20px; }
    .dashboard-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px; }
}

/* === GAME CARDS === */
.games-grid.sidebar-mode { grid-template-columns: repeat(2, 1fr) !important; }
.game-card-wrapper { position: relative; border-radius: 15px; box-shadow: var(--shadow-orig); background: linear-gradient(145deg, var(--bg-card), var(--bg-body)); padding: 15px; display: flex; flex-direction: column; gap: 10px; }
body.dark-mode .game-card-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); }
.game-card-image-link { display: block; border-radius: 8px; overflow: hidden; transform-style: preserve-3d; cursor: pointer; }
.game-card-image-link img { width: 100%; height: auto; display: block; border-radius: 8px; }
.index_headline { display: block; font-size: 1rem; margin: 5px 0; background: var(--bg-body); border-radius: 8px; padding: 8px; text-align: center; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05); font-weight: var(--font-weight-default); }
body.dark-mode .index_headline { background: #2a2a2a; }
.game-card-cockpit { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 5px; }
.card-heart-action { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--bg-body); box-shadow: 3px 3px 6px rgba(0,0,0,0.1), -3px -3px 6px rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s; }
body.dark-mode .card-heart-action { background: #2a2a2a; box-shadow: none; border: 1px solid #444; }
.card-heart-action:active { transform: scale(0.9); }
.card-heart-action .icon { display: block !important; width: 20px; height: 20px; margin: 0 auto; flex-shrink: 0; }
.card-heart .icon, .card-heart-big .icon, .card-heart-action .icon { background-color: #666; transition: background-color 0.2s, transform 0.2s; } 
body.dark-mode .card-heart .icon, body.dark-mode .card-heart-big .icon, body.dark-mode .card-heart-action .icon { background-color: #aaa; }
.card-heart.liked .icon, .card-heart-big.liked .icon, .card-heart-action.liked .icon, body.dark-mode .card-heart.liked .icon, body.dark-mode .card-heart-big.liked .icon, body.dark-mode .card-heart-action.liked .icon { background-color: #ff3b30 !important; transform: scale(1.0); }
@media (hover: hover) {
    .card-heart:hover .icon, .card-heart-big:hover .icon, .card-heart-action:hover .icon { background-color: var(--nav-accent); }
    .card-heart.liked:hover .icon, .card-heart-big.liked:hover .icon, .card-heart-action.liked:hover .icon { background-color: #444 !important; transform: scale(0.8); }
    body.dark-mode .card-heart.liked:hover .icon, body.dark-mode .card-heart-big.liked:hover .icon, body.dark-mode .card-heart-action.liked:hover .icon { background-color: #fff !important; }
}
.device-icons-center { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; opacity: 0.5; }
.play-btn-action { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: var(--nav-accent); border-radius: 50%; transition: background-color 0.2s, transform 0.1s; }
.play-btn-action:hover { background-color: var(--nav-accent-hover); transform: scale(1.05); }
.play-btn-action:active { transform: scale(0.95); }
.play-btn-action .icon { display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; -webkit-mask-image: none; mask-image: none; margin: 0; margin-left: 2px; }
.play-btn-action .icon::before, .play-btn-action .icon::after { content: none; display: none; }

/* === SIDEBAR WIDGETS === */
.sidebar-list { display: flex; flex-direction: column; gap: 15px; margin: 0 0 40px; }
.sidebar-card { display: flex; align-items: center; background: var(--bg-card); padding: 10px; border-radius: 12px; box-shadow: var(--shadow-orig); text-decoration: none; transition: transform 0.2s ease; border: 1px solid transparent; position: relative; overflow: hidden; max-width: 100%; }
body.dark-mode .sidebar-card { border-color: var(--border-color); }
.sidebar-card:hover { transform: translateX(5px); }
.sidebar-card-img { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0; margin-right: 15px; }
.sidebar-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-card-info { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }
.sidebar-card-title { color: var(--text-main); font-size: 0.95rem; }
.sidebar-play-btn { font-size: 0.75rem; background: var(--nav-accent); color: white; padding: 4px 12px; border-radius: 10px; align-self: flex-start; box-shadow: 0 2px 4px rgba(207, 74, 0, 0.2); }
.sidebar-list.expanded .hidden-row { display: flex; animation: slideInFade 0.3s ease; }
.hidden-row { display: none; }
.more-btn { width: 100%; padding: 15px; background: var(--bg-card); border: none; border-radius: 12px; color: var(--text-muted); cursor: pointer; font-size: large; margin: 0 0 50px; }
.ad-placeholder { width: 100%; height: 250px; background: #e0e0e0; border: 1px dashed #999; display: flex; align-items: center; justify-content: center; color: #666; margin-bottom: 20px; border-radius: 8px; }
.sidebar-billboard { margin-bottom: 40px; }
.sidebar-tower { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
#vx-container { position: relative; min-height: 262px; margin: 0 0 50px; padding-top: 15px; text-align: center; }
#vx-container::before { content: "WERBUNG"; position: absolute; top: -25px; font-size: 11px; padding: 6px 16px 8px; border-radius: 13px; background: var(--bg-card); text-align: center; width: 100px; right: 0; }
#vx-container img { width: 100%; height: auto; display: block; }

/* === RETENTION SCROLLER === */
#retention-bar-anchor:empty { display: none; }
.retention-list-wrapper { margin: 0 0 20px; max-width: calc(100vw - 40px); position: relative; }
.retention-list-scroller-original-doppelt { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 15px; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 10px 0; scroll-padding-left: 0; justify-content: flex-start; align-items: stretch; scrollbar-width: none; -ms-overflow-style: none; width: 100%; box-sizing: border-box; }
.retention-list-scroller { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 25px; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 10px 0 30px; -ms-overflow-style: none; }
.retention-list-scroller::-webkit-scrollbar { display: none; }
.retention-list-scroller .game-card-wrapper { min-width: 65vw; width: 65vw; flex-shrink: 0; scroll-snap-align: start; margin: 0; min-width: calc(100vw - 50px); width: calc(100vw - 50px); }
@media (min-width: 768px) { .retention-list-scroller .game-card-wrapper { min-width: 240px; width: 240px; } }
#retention-bar-anchor .cat-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.history-controls { margin-left: auto; display: flex; gap: 10px; }
.hist-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--bg-panel); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; color: var(--nav-accent) }
.hist-btn:hover { border-color: var(--nav-accent); color: var(--nav-accent); transform: scale(1.1); }
.hist-btn.active { opacity: 1; color: var(--nav-accent); }
.hist-btn:hover { background: var(--nav-accent); color: white; border-color: var(--nav-accent); }
.hist-arrow { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; display: block; transform: rotate(-45deg); margin-left: -3px; }
.hist-prev .hist-arrow { transform: rotate(135deg); margin-left: 3px; }

/* === STREAM ACCORDIONS === */
.stream-list-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.stream-accordion-item { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-orig); overflow: visible; border: 1px solid transparent; position: relative; margin: 0 0 20px; transition: box-shadow 0.2s ease, border-color 0.2s; }
body.dark-mode .stream-accordion-item { border-color: var(--border-color); }
.stream-accordion-item:hover { box-shadow: var(--shadow-float); border-color: rgba(0,0,0,0.1); }
body.dark-mode .stream-accordion-item:hover { border-color: #555; }
.stream-header { display: flex; align-items: center; padding: 15px 20px; background: var(--bg-card); border-radius: 12px; position: relative; z-index: 1; gap: 20px; min-height: 80px; }
.stream-accordion-item.open .stream-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.stream-left-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.stream-rank-box { width: 42px; height: 42px; background: #e9ecef; color: #495057; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; }
body.dark-mode .stream-rank-box { background: #333; color: #ccc; }
.stream-rating-box { width: 48px; height: 42px; background: var(--nav-accent); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; position: relative; overflow: hidden; }
.rating-play-icon { display: none; position: absolute; inset: 0; background: var(--nav-accent-hover); align-items: center; justify-content: center; }
.rating-play-icon .icon-play { background-color: white !important; width: 16px; height: 16px; }
.header-main-link { flex-grow: 1; display: flex; align-items: center; text-decoration: none; gap: 15px; min-width: 0; color: inherit; }
.header-main-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
@media (hover: hover) { 
    .header-main-link:hover .rating-play-icon { display: flex; }
    .header-main-link:hover .stream-title { color: var(--nav-accent); }
}
.stream-info-group { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.stream-title { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-actors { font-size: 0.85rem; color: var(--nav-accent); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; position: relative; z-index: 5; }
.btn-action-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: var(--bg-body); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.btn-action-icon:hover { background: #e2e2e2; color: #000; }
body.dark-mode .btn-action-icon { background: #2a2a2a; border-color: #333; }
body.dark-mode .btn-action-icon:hover { background: #444; color: #fff; }
.safety-tabs { position: absolute; top: -22px; right: 20px; display: flex; gap: 5px; z-index: 1; pointer-events: none; }
.safety-tab { background: #f1f3f5; color: #868e96; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px 6px; border-radius: 6px 6px 0 0; }
body.dark-mode .safety-tab { background: #2a2a2a; color: #888; }
.mobile-safety-row { display: none; }
.stream-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; background: var(--bg-card); border-radius: 0 0 12px 12px; }
.stream-accordion-item.open .stream-body { opacity: 1; }
.stream-body-inner { display: block; padding: 0 20px 20px 20px; text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.stream-body-inner:hover .stream-desc-text { background-color: var(--bg-body); border: 1px solid var(--nav-accent); color: var(--text-main); }
.stream-desc-text { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); background: var(--bg-body); border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s; font-weight: 500; }
body.dark-mode .stream-desc-text { background: #1a1a1a; }
.stream-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.stream-pill { background: #fff; border: 1px solid var(--border-color); color: #666; font-weight: 600; font-size: 0.8rem; border-radius: 20px; padding: 6px 16px; flex: auto; text-align: center; }
body.dark-mode .stream-pill { background: #222; color: #aaa; }
@media (max-width: 767px) {
    .safety-tabs { display: none; }
    .mobile-safety-row { display: flex; gap: 5px; margin-bottom: 6px; }
    .safety-pill { font-size: 0.75rem; background: #f0f0f0; padding: 2px 8px; border-radius: 4px; color: #666; text-transform: uppercase; }
    body.dark-mode .safety-pill { background: #333; color: #999; }
    .stream-header { display: flex; flex-wrap: wrap; padding: 15px; gap: 12px; align-items: flex-end; height: auto; }
    .header-main-link { display: contents; }
    .stream-info-group { order: 1; width: 100%; margin-bottom: 5px; }
    .stream-title { font-size: 1.05rem; white-space: normal; margin-bottom: 3px; }
    .stream-actors { white-space: normal; font-size: 0.8rem; }
    .stream-left-group { order: 2; margin-right: auto; }
    .stream-rank-box { width: 38px; height: 38px; font-size: 1rem; }
    .stream-rating-box { width: 44px; height: 38px; font-size: 1rem; }
    .stream-actions { order: 3; margin-left: 0; gap: 8px; }
    .btn-action-icon { width: 38px; height: 38px; background: #f4f4f4; }
    body.dark-mode .btn-action-icon { background: #333; }
}

/* === DEX LIST === */
.dex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.dex-list li { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-orig); overflow: hidden; border: 1px solid transparent; transition: border-color 0.2s; }
.dex-list li:hover { border-color: var(--nav-accent); }
.dex-list a { display: flex; align-items: center; width: 100%; padding: 15px 20px 15px 85px; text-decoration: none; color: var(--text-main); font-weight: 600; position: relative; }
.dex-list a::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 54px; height: 32px; background-color: #e9ecef; border-radius: 6px; transition: background-color 0.3s; }
.dex-list a::after { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 54px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='6' y='2' width='12' height='20' rx='6' ry='6'/%3E%3Cline x1='12' y1='6' x2='12' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-size: 16px 16px, 12px 12px; background-position: 8px center, 32px center; transition: filter 0.3s; opacity: 0.7; }
body.dark-mode .dex-header, body.dark-mode .dex-list li { background: var(--bg-card); border-color: var(--border-color); }
body.dark-mode .dex-list a::before { background-color: #333; }
body.dark-mode .dex-list a::after { filter: invert(1); opacity: 0.5; }
.dex-list a:hover::before { background-color: var(--nav-accent); }
.dex-list a:hover::after { filter: invert(1) brightness(2); opacity: 1; }
.dex-list a:hover { color: var(--nav-accent); }

/* === PWA & COOKIE === */
.cookieconsent-optout-marketing { display: none; text-align: center; background: var(--bg-card); border: 1px solid var(--border-color); padding: 15px; margin-bottom: 30px; border-radius: 8px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.cookieconsent-optout-marketing a { color: var(--nav-accent); text-decoration: none; border-bottom: 1px dotted var(--nav-accent); transition: all 0.2s; font-size: larger; }
.cookieconsent-optout-marketing a:hover { color: var(--text-main); border-bottom-style: solid; }
.cookieconsent-optout-marketing:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.pwa-dash-area { display: none; margin-bottom: 20px; text-align: center; }
.pwa-dash-btn { width: 100%; padding: 12px; background: #333; color: #fff; border: 1px dashed #555; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; font-size: 0.95rem; font-weight: 500; }
.pwa-dash-btn:hover { background: #444; border-color: #777; }
.pwa-popup-wrapper { display: none; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; align-items: center; gap: 15px; }
.pwa-close-btn { width: 50px; height: 50px; background: #333; color: #ffffff; border: none; border-radius: 50%; cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: transform 0.2s; }
.pwa-close-btn:hover { transform: scale(1.25); background-color: #000; }
.pwa-install-btn { height: 50px; padding: 0 30px; background: var(--nav-accent); color: #fff; border: none; border-radius: 50px; cursor: pointer; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); white-space: nowrap; transition: transform 0.1s; }
.pwa-install-btn:hover { transform: scale(1.05); background: var(--nav-accent-hover); }
.pwa-ios-hint { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 400px; text-align: left; border: 1px solid var(--border-color); padding: 15px; border-radius: 12px; background: var(--bg-card); box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: var(--text-main); }
.pwa-ios-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pwa-ios-summary { cursor: pointer; font-weight: 700; outline: none; list-style: none; }
.pwa-ios-close { background: var(--bg-body); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); }
.pwa-ios-content { font-size: 14px; line-height: 1.6; }
.pwa-ios-content ol { padding-left: 20px; margin: 0; }
.pwa-ios-content li { margin-bottom: 5px; }

/* === FOOTER === */
.main-footer { background-color: var(--nav-bg); color: #fff; padding-bottom: 0; margin-top: 60px; border-top: 4px solid var(--nav-accent); display: flex; flex-direction: column; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-bottom: 20px; padding: 0 20px; }
.main-footer a { color: #ccc; font-size: 0.95rem; transition: color 0.3s; }
.main-footer a:hover { color: var(--nav-accent); }
.footer-copy { text-align: center; color: #a3a3a3; font-size: 0.85rem; margin: 0 0 40px 0; }
.v8-trust-bar { width: 100%; background-color: #111; border-top: 1px solid rgba(255,255,255,0.1); padding: 15px 0; font-size: 0.85rem; color: #888; margin-top: auto; }
.v8-trust-inner { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 25px; }
.trust-label { text-transform: uppercase; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: #a3a3a3; margin-right: 5px; }
.trust-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.trust-item strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.trust-icon { font-size: 1rem; opacity: 0.7; filter: grayscale(100%); transition: filter 0.3s, opacity 0.3s; }
.trust-item:hover .trust-icon { filter: grayscale(0%); opacity: 1; }
@media (max-width: 768px) {
    .v8-trust-inner { gap: 15px; justify-content: space-between; }
    .trust-label { width: 100%; text-align: center; margin-bottom: 5px; }
    .trust-item { font-size: 0.8rem; }
}

/* === TRENDS & SIDEBAR CARDS === */
.sidebar-card.trend-card { position: relative; overflow: visible !important; margin-top: 25px !important; padding: 0 !important; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid transparent; border-radius: 12px; box-shadow: var(--shadow-orig); transform: none !important; transition: border-color 0.2s, box-shadow 0.2s; }
body.dark-mode .sidebar-card.trend-card { border-color: var(--border-color); }
.sidebar-card.trend-card:hover { border-color: var(--nav-accent); box-shadow: var(--shadow-float); }
.safety-tabs.sidebar-mode { position: absolute; top: -22px; right: 10px; display: flex; gap: 2px; z-index: 5; }
.safety-tabs.sidebar-mode .safety-tab { font-size: 0.6rem; padding: 3px 8px; border-radius: 0 0 0 6px; background: #f0f0f0; color: #4f4f4f; text-transform: uppercase; font-weight: 700; }
.safety-tabs.sidebar-mode .safety-tab:first-child { border-radius: 0; }
.safety-tabs.sidebar-mode .safety-tab:last-child { border-radius: 0 0 0 6px; }
body.dark-mode .safety-tabs.sidebar-mode .safety-tab { background: #2a2a2a; color: #999; }
.trend-row { display: flex; align-items: center; width: 100%; }
.trend-link { display: flex; align-items: center; flex-grow: 1; text-decoration: none; color: inherit; min-width: 0; cursor: pointer; padding: 12px; width: 100%; }
.stream-rank-box.sidebar-rank { position: relative; width: 40px; height: 40px; min-width: 40px; margin-right: 15px; background: #e9ecef; color: #495057; border-radius: 8px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, color 0.3s ease; }
body.dark-mode .stream-rank-box.sidebar-rank { background: #333; color: #ccc; }
.sidebar-card.trend-card:hover .stream-rank-box.sidebar-rank { background-color: var(--nav-accent); color: white; }
.rank-num, .rank-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rank-num { opacity: 1; transform: scale(1); }
.rank-icon { opacity: 0; transform: scale(0.5); }
.rank-icon .icon-play { width: 16px; height: 16px; background-color: white !important; }
.sidebar-card.trend-card:hover .rank-num { opacity: 0; transform: scale(0.5); }
.sidebar-card.trend-card:hover .rank-icon { opacity: 1; transform: scale(1); }
.trend-score { font-size: 0.75rem; color: var(--nav-accent); font-weight: 600; }
.trend-row .card-heart-action { margin-right: 12px; z-index: 2; }
.history-hidden { display: none !important; }
.stream-list-container.expanded .history-hidden { display: block !important; animation: slideDownFade 0.5s forwards; }

/* === VIDEO PLAYER & CINEMA STAGE === */
.cinema-stage { width: 100%; margin-bottom: 20px; display: block; position: relative; }
.video-responsive-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto; padding-bottom: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); background: #000; }
.video-responsive-wrapper iframe, .video-responsive-wrapper object, .video-responsive-wrapper embed { width: 100%; height: 100%; border: none; display: block; }
.series-stage iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; display: block; border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); background: #000; margin-bottom: 20px; }
.season-block { position: relative; width: 100%; margin-bottom: 60px; padding-bottom: 20px; }
.season-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 20; }
.season-video iframe { width: 100%; height: 100%; border: none; display: block; }
.season-list-scroll { position: relative; z-index: 1; padding-top: 15px; background: var(--bg-body); }
@media (max-width: 767px) {
    .season-video { position: -webkit-sticky; position: sticky; top: 70px; }
    .cinema-stage { position: sticky; position: -webkit-sticky; top: var(--nav-height); z-index: 900; background-color: var(--bg-body); padding: 10px 0 5px 0; box-shadow: none !important; border-radius: 0; margin-bottom: 0px; }
    .video-responsive-wrapper { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .season-block { position: relative; width: 100%; padding-bottom: 40px; overflow: visible; }
    .season-video { position: -webkit-sticky; position: sticky; top: 70px; z-index: 100; width: 100%; aspect-ratio: 16/9; background: #000; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
    .season-block:last-child { min-height: 80vh; }
    .season-list-scroll { background: var(--bg-body); position: relative; z-index: 10; padding-top: 10px; }
}

/* === V8 TREND LIST === */
.v8-trend-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.trend-row { display: grid; grid-template-columns: 50px 40px 1fr auto 50px; align-items: center; background: var(--bg-card); border-radius: 8px; padding: 10px 15px; border: 1px solid transparent; transition: all 0.2s; text-decoration: none; color: inherit; }
body.dark-mode .trend-row { border-color: var(--border-color); }
.trend-row:hover { border-color: var(--nav-accent); transform: translateX(5px); box-shadow: var(--shadow-float); }
.t-rank { font-size: 1.5rem; font-weight: 800; color: #ccc; text-align: center; line-height: 1; }
.trend-row[data-rank="1"] .t-rank { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
.trend-row[data-rank="2"] .t-rank { color: #C0C0C0; }
.trend-row[data-rank="3"] .t-rank { color: #CD7F32; }
.t-icon { display: flex; align-items: center; justify-content: center; opacity: 0.5; }
.t-icon .icon { width: 20px; height: 20px; }
.t-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.t-title { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-meta { font-size: 0.8rem; color: var(--text-muted); }
.t-heat { font-weight: 800; font-size: 0.9rem; color: var(--nav-accent); text-align: right; margin-right: 15px; display: flex; flex-direction: column; align-items: flex-end; }
.t-heat small { font-size: 0.65rem; opacity: 0.7; font-weight: 400; color: var(--text-main); }
.t-action { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
    .trend-row { grid-template-columns: 35px 1fr auto; padding: 10px; gap: 10px; }
    .t-icon, .t-heat { display: none; }
    .t-rank { font-size: 1.2rem; text-align: left; }
}
.trend-row-clean { display: flex; align-items: center; width: 100%; }
.trend-row-clean .trend-link { flex-grow: 1; display: flex; align-items: center; text-decoration: none; color: inherit; min-width: 0; padding: 12px; }

/* === ROUNDED LISTS === */
.rounded-list, .rounded-list-tv { list-style: none; counter-reset: season-counter; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.rounded-list li, .rounded-list-tv li { margin: 0 0 15px; padding: 0; }
.rounded-list a, .rounded-list-tv a { position: relative; display: flex; align-items: center; padding: 12px 15px; text-decoration: none; color: var(--text-main); font-size: 1rem; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border-color); border-radius: 12px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.rounded-list a::before, .rounded-list-tv a::before { counter-increment: season-counter; content: counter(season-counter); width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 15px; background-color: var(--nav-accent); color: #fff; border-radius: 50%; font-size: 0.95rem; font-weight: 700; transition: background-color 0.2s; }
.rounded-list a:hover, .rounded-list-tv a:hover { background: #fff; border-color: var(--nav-accent); color: var(--nav-accent); }
.rounded-list a:hover::before, .rounded-list-tv a:hover::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px; }
.rounded-list-tv a::after { content: "Live"; width: 70px; padding: 3px 0 5px; text-align: center; background: #333; color: #fff; border-radius: 50px; right: 20px; position: absolute; }
.rounded-list a:visited::before { content: ""; background-color: #ddd !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px; box-shadow: none; }
body.dark-mode .rounded-list a, body.dark-mode .rounded-list-tv a { background: rgba(30, 30, 30, 0.6); border-color: #333; color: #e0e0e0; }
body.dark-mode .rounded-list a:hover, body.dark-mode .rounded-list-tv a:hover { background: #2a2a2a; border-color: var(--nav-accent); color: #fff; }
body.dark-mode .rounded-list a:visited::before { background-color: #222 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }

/* === UTILITIES & ANIMATIONS === */
.hidden { display: none; }
.v8-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; cursor: wait; }
.stream-list-container.v8-loading::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--nav-accent), transparent); animation: loadingScan 1s infinite linear; z-index: 10; }
@keyframes loadingScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes slideInFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes slideOutUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes rotate360 { 0% { transform: rotateY(0deg) } 100% { transform: rotateY(360deg) } }
.rotate-infinite { animation: rotate360 2s linear infinite }
.rotate-once { animation: rotate360 2s linear 1 forwards }
.ghost-in { animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ghost-out { animation: slideOutUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.search-ghost-text { position: absolute; left: 25px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 1.1rem; color: var(--text-muted); pointer-events: none; white-space: nowrap; overflow: hidden; z-index: 5; opacity: 0; }
.main-search-form.user-active .search-ghost-text { display: none !important; }