.material-symbols {
            font-family: 'Material Symbols Rounded';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            vertical-align: middle;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .material-symbols.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #0f0f0f;
            --surface: #1a1a1a;
            --surface2: #222;
            --border: rgba(255,255,255,0.07);
            --accent: #3b82f6;
            --accent-hover: #2563eb;
            --live: #ef4444;
            --text: #f1f1f1;
            --muted: #888;
            --card-w: 220px;
            --card-h: 130px;
        }

        body {
            font-family: 'Sen', 'Inter', system-ui, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Main content grows so the footer always sits at the bottom */
        #mainContent, #matchDetailContent { flex: 1; width: 100%; }

        /* ── SPORTS LOADER ── */
        #sportsLoader {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #sportsLoader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-logo {
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: var(--text);
        }

        .loader-logo span { color: var(--accent); }

        .loader-icons {
            display: flex;
            gap: 18px;
            align-items: flex-end;
            height: 60px;
        }

        .loader-icon {
            font-size: 2rem;
            animation: iconBounce 1s ease-in-out infinite;
            display: block;
            color: var(--accent);
        }

        .loader-icon:nth-child(1) { animation-delay: 0s; }
        .loader-icon:nth-child(2) { animation-delay: 0.12s; }
        .loader-icon:nth-child(3) { animation-delay: 0.24s; }
        .loader-icon:nth-child(4) { animation-delay: 0.36s; }
        .loader-icon:nth-child(5) { animation-delay: 0.48s; }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
            45%       { transform: translateY(-22px) scale(1.15); opacity: 1; }
            60%       { transform: translateY(-18px) scale(1.05); opacity: 1; }
        }

        .loader-text {
            font-size: 0.78rem;
            color: var(--muted);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 600;
            animation: loaderPulse 1.4s ease-in-out infinite;
        }

        @keyframes loaderPulse {
            0%, 100% { opacity: 0.5; }
            50%       { opacity: 1; }
        }

        /* ── ANTI-ADBLOCK MODAL ── */
        #adblockOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        #adblockOverlay.visible {
            display: flex;
            animation: fadeIn 0.3s ease;
        }

        .adblock-modal {
            background: #161616;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            max-width: 420px;
            width: 100%;
            padding: 36px 32px;
            text-align: center;
            box-shadow: 0 32px 80px rgba(0,0,0,0.7);
            position: relative;
        }

        .adblock-icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 18px;
            color: var(--live);
            animation: adblockShake 2.5s ease-in-out infinite;
        }
        .adblock-icon.material-symbols { font-size: 48px; }

        @keyframes adblockShake {
            0%, 80%, 100% { transform: rotate(0deg); }
            85%  { transform: rotate(-8deg); }
            90%  { transform: rotate(8deg); }
            95%  { transform: rotate(-4deg); }
        }

        .adblock-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 10px;
        }

        .adblock-sub {
            font-size: 0.87rem;
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 26px;
        }

        .adblock-sub strong { color: #ccc; }

        .adblock-steps {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 18px;
            margin-bottom: 26px;
            text-align: left;
        }

        .adblock-steps li {
            font-size: 0.82rem;
            color: #aaa;
            line-height: 1.7;
            list-style: none;
            padding-left: 0;
        }

        .adblock-steps li::before {
            content: attr(data-n) ". ";
            color: var(--accent);
            font-weight: 700;
        }

        .adblock-btn {
            width: 100%;
            padding: 13px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 0.92rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .adblock-btn .material-symbols { font-size: 19px; }

        .adblock-btn:hover { background: var(--accent-hover); }
        .adblock-btn:active { transform: scale(0.98); }

        .adblock-note {
            font-size: 0.73rem;
            color: #444;
            margin-top: 14px;
        }

        /* ── TOP NAV ── */
        :root { --notif-h: 0px; }

        /* ── NOTIFICATION BELL + PANEL ── */
        .notif-wrap { position: relative; }

        .notif-bell {
            position: relative;
            width: 36px; height: 36px;
            border-radius: 8px;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }
        .notif-bell:hover { background: #2a2a2a; color: var(--text); }
        .notif-bell .material-symbols { font-size: 19px; }

        .notif-badge {
            position: absolute;
            top: -5px; right: -5px;
            min-width: 17px; height: 17px;
            padding: 0 4px;
            border-radius: 10px;
            background: var(--live);
            color: #fff;
            font-size: 0.62rem;
            font-weight: 800;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid var(--bg);
        }

        .notif-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 380px;
            max-width: calc(100vw - 24px);
            background: #11141b;
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 14px;
            box-shadow: 0 24px 64px rgba(0,0,0,0.7);
            z-index: 1000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            animation: dropdownIn 0.15s ease;
            font-family: 'Inter', 'Sen', sans-serif;
        }
        .notif-panel.open { display: flex; }

        .notif-panel-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .notif-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--text); }
        .notif-panel-title .material-symbols { font-size: 18px; }
        .notif-mark-read {
            background: none; border: none; cursor: pointer;
            color: #9ca3af; font-size: 0.75rem; font-weight: 600;
            padding: 4px 6px; border-radius: 6px; transition: color 0.15s;
        }
        .notif-mark-read:hover { color: #fff; }

        .notif-panel-list { max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
        .notif-panel-list::-webkit-scrollbar { width: 4px; }
        .notif-panel-list::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 2px; }

        .notif-item {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            cursor: pointer;
            position: relative;
            transition: background 0.15s;
        }
        .notif-item:hover { background: rgba(255,255,255,0.04); }
        .notif-item.read { opacity: 0.55; }
        .notif-item::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--accent);
            display: none;
        }
        .notif-item.unread::before { display: block; }

        .notif-item-icon {
            width: 38px; height: 38px;
            border-radius: 10px;
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .notif-item-icon .material-symbols { font-size: 20px; }
        .notif-item.cat-announcement .notif-item-icon { background: rgba(59,130,246,0.14); color: #60a5fa; }
        .notif-item.cat-warning      .notif-item-icon { background: rgba(239,68,68,0.14);  color: #f87171; }
        .notif-item.cat-promotion    .notif-item-icon { background: rgba(168,85,247,0.14); color: #c084fc; }
        .notif-item.cat-update       .notif-item-icon { background: rgba(14,116,144,0.16); color: #22d3ee; }
        .notif-item.cat-maintenance  .notif-item-icon { background: rgba(245,158,11,0.14); color: #fbbf24; }

        .notif-item-body { flex: 1; min-width: 0; }
        .notif-item-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
        .notif-cat-label { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
        .notif-item.cat-announcement .notif-cat-label { color: #60a5fa; }
        .notif-item.cat-warning      .notif-cat-label { color: #f87171; }
        .notif-item.cat-promotion    .notif-cat-label { color: #c084fc; }
        .notif-item.cat-update       .notif-cat-label { color: #22d3ee; }
        .notif-item.cat-maintenance  .notif-cat-label { color: #fbbf24; }
        .notif-item-date { color: #6b7280; font-size: 0.7rem; }
        .notif-item-title { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 3px; }
        .notif-item-msg { color: #9ca3af; font-size: 0.8rem; line-height: 1.5; }
        .notif-item-link {
            display: inline-flex; align-items: center; gap: 3px;
            color: #60a5fa; font-size: 0.78rem; font-weight: 600;
            margin-top: 6px; text-decoration: none;
        }
        .notif-item-link:hover { text-decoration: underline; }
        .notif-item-link .material-symbols { font-size: 14px; }

        .notif-panel-foot {
            padding: 12px 16px;
            text-align: center;
            color: #6b7280;
            font-size: 0.75rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .notif-empty { padding: 32px 16px; text-align: center; color: #6b7280; font-size: 0.82rem; }

        /* On small screens, make the panel span the viewport below the nav */
        @media (max-width: 480px) {
            .notif-panel { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; max-width: none; }
        }

        .topnav {
            position: sticky;
            top: var(--notif-h, 0px);
            z-index: 500;
            display: flex;
            align-items: center;
            gap: 32px;
            padding: 0 32px;
            height: 60px;
            background: rgba(15,15,15,0.94);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border);
        }

        .topnav-logo {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--text);
            white-space: nowrap;
            letter-spacing: -0.3px;
        }

        .topnav-logo span { color: var(--accent); }

        .topnav-links {
            display: flex;
            gap: 24px;
        }

        .topnav-links a {
            color: var(--muted);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.2s;
            cursor: pointer;
        }

        .topnav-links a:hover { color: var(--text); }

        .mbinav a {
            color: var(--muted);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.2s;
            cursor: pointer;
        }

        .mbinav a:hover { color: var(--text); }

        .topnav-right {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-left: auto;
        }

        .topnav-refresh {
            background: var(--accent);
            border: none;
            color: white;
            padding: 7px 16px;
            border-radius: 6px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .topnav-refresh .material-symbols { font-size: 17px; }

        .topnav-refresh:hover { background: var(--accent-hover); }

        /* ── HAMBURGER BUTTON (mobile only) ── */
        .hamburger-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 36px;
            height: 36px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 8px;
            transition: background 0.2s;
            flex-shrink: 0;
        }

        .hamburger-btn:hover { background: var(--surface2); }

        .hamburger-btn span {
            display: block;
            width: 100%;
            height: 2px;
            background: var(--text);
            border-radius: 2px;
            transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
            transform-origin: center;
        }

        /* Animate to X when open */
        .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .hamburger-btn.open span:nth-child(2) { opacity: 0; width: 0; }
        .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ── DRAWER OVERLAY ── */
        .drawer-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 610;
            backdrop-filter: blur(2px);
        }

        .drawer-overlay.open { display: block; animation: fadeIn 0.2s ease; }

        /* ── DRAWER PANEL ── */
        .drawer {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 270px;
            max-width: 80vw;
            background: #141414;
            border-right: 1px solid var(--border);
            z-index: 620;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 4px 0 32px rgba(0,0,0,0.5);
        }

        .drawer.open { transform: translateX(0); }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            height: 60px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .drawer-logo {
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -0.3px;
        }

        .drawer-logo span { color: var(--accent); }

        .drawer-close {
            width: 30px; height: 30px;
            background: var(--surface2);
            border: none;
            border-radius: 50%;
            color: var(--muted);
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
        }

        .drawer-close .material-symbols { font-size: 18px; }

        .drawer-close:hover { background: #333; color: var(--text); }

        .drawer-nav {
            flex: 1;
            padding: 12px 0;
            overflow-y: auto;
        }

        .drawer-nav-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 24px;
            color: var(--muted);
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            border-left: 3px solid transparent;
        }

        .drawer-nav-item:hover {
            background: rgba(255,255,255,0.04);
            color: var(--text);
        }

        .drawer-nav-item.active {
            color: var(--accent);
            background: rgba(59,130,246,0.06);
            border-left-color: var(--accent);
        }

        .drawer-nav-icon { font-size: 1.1rem; width: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
        .drawer-nav-icon.material-symbols { font-size: 20px; }

        .drawer-divider {
            height: 1px;
            background: var(--border);
            margin: 8px 20px;
        }

        .drawer-footer {
            padding: 16px 20px;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .drawer-footer-user {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }

        .drawer-avatar {
            width: 38px; height: 38px;
            border-radius: 50%;
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: white;
            flex-shrink: 0;
        }

        .drawer-user-info { min-width: 0; }
        .drawer-user-name { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .drawer-user-plan { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

        .drawer-signout {
            width: 100%;
            padding: 10px;
            background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2);
            border-radius: 8px;
            color: #f87171;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .drawer-signout:hover { background: rgba(239,68,68,0.15); }

        @media (max-width: 768px) {
            .hamburger-btn { display: flex; }
        }

        /* ── ADS ── */
        .ad-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .ad-slot-label {
            font-size: 0.62rem;
            color: #4a4a4a;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-align: center;
            margin-bottom: 6px;
        }

        /* The old sized Adsterra slots (topnav 320x50, in-feed native,
           stream-modal 160x300) are gone: Monetag's in-page push positions
           itself, so those boxes have nothing to fill them and were showing
           as empty "Advertisement" rectangles. */
        .stream-body {
            flex: 1;
            display: flex;
            min-height: 0;
            background: #000;
        }

        /* ── SEARCH ── */
        .search-wrap {
            position: relative;
        }

        .search-trigger {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            font-size: 1rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }

        .search-trigger:hover { background: #2a2a2a; color: var(--text); }
        .search-trigger .material-symbols { font-size: 19px; }

        /* ── SEARCH BAR ──
           One field holding everything the search needs to say: the query, how
           many matches it found, and a way to wipe it - plus Cancel as a quiet
           companion on the right. No entrance animation: a fixed bar that
           depends on an animation's first frame can sit off-screen. */
        .search-bar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 64px;
            background: #121212;
            border-bottom: 1px solid var(--border);
            z-index: 700;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            gap: 10px;
        }

        .search-bar.open { display: flex; }

        /* The field */
        .search-field {
            display: flex;
            align-items: center;
            gap: 9px;
            /* basis 0 + min-width 0: the field takes the leftover space and
               can actually shrink. With basis auto its content width won the
               fight on a 390px phone, pushing Cancel off-screen. */
            flex: 1 1 0;
            min-width: 0;
            max-width: 720px;
            height: 42px;
            padding: 0 10px 0 13px;
            background: #1b1b1b;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            transition: border-color 0.16s, box-shadow 0.16s;
        }

        .search-field:focus-within {
            border-color: rgba(59,130,246,0.75);
            box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
        }

        .search-bar-icon {
            font-size: 1.1rem;
            color: #6b6b6b;
            flex-shrink: 0;
            line-height: 1;
            transition: color 0.16s;
        }

        .search-bar-icon.material-symbols { font-size: 19px; }
        .search-field.has-query .search-bar-icon { color: var(--accent); }

        .search-input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            color: var(--text);
            font-family: 'Inter', 'Sen', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: -0.01em;
            padding: 0;
            outline: none;
        }

        .search-input::placeholder { color: #565656; font-weight: 400; }

        /* Live result count, inside the field */
        .search-count {
            flex-shrink: 0;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: #cbd9f7;
            background: rgba(59,130,246,0.16);
            border-radius: 999px;
            padding: 3px 9px;
            white-space: nowrap;
        }

        .search-clear {
            flex-shrink: 0;
            width: 24px; height: 24px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            color: #8a8a8a;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, color 0.15s;
        }

        .search-clear:hover { background: rgba(255,255,255,0.13); color: var(--text); }
        .search-clear .material-symbols { font-size: 15px; }

        /* Only visible while picking matches for Multiview */
        .search-mode {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            font-size: 0.72rem;
            font-weight: 700;
            color: #a8c6ff;
            background: rgba(59,130,246,0.14);
            border: 1px solid rgba(59,130,246,0.35);
            border-radius: 999px;
            padding: 7px 12px;
            white-space: nowrap;
        }

        .search-mode .material-symbols { font-size: 15px; }

        .search-close-btn {
            flex-shrink: 0;
            background: transparent;
            border: 1px solid transparent;
            color: #9a9a9a;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            padding: 9px 13px;
            border-radius: 10px;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }

        .search-close-btn:hover { background: #1f1f1f; color: var(--text); }

        /* ── SEARCH RESULTS PANEL ── */
        .search-results-drop {
            position: fixed;
            top: 64px; left: 0; right: 0;
            background: #121212;
            border-bottom: 1px solid var(--border);
            z-index: 699;
            display: none;
            flex-direction: column;
            max-height: calc(100dvh - 64px);
            overflow-y: auto;
        }

        .search-results-drop.open { display: flex; }

        .search-results-drop::-webkit-scrollbar { width: 6px; }
        .search-results-drop::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 3px; }

        .search-drop-inner {
            padding: 18px 20px 40px;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
        }

        .search-status {
            font-size: 0.8rem;
            color: #9a9a9a;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 9px;
            font-weight: 500;
        }

        .search-hint {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 22px 0 0;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            font-size: 0.74rem;
            color: #6f6f6f;
        }

        .search-hint .material-symbols { font-size: 15px; }

        .search-hint kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.68rem;
            color: #cfcfcf;
            background: #1f1f1f;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 5px;
            padding: 1px 5px;
        }

        .search-spinner {
            width: 13px; height: 13px;
            border: 2px solid #333;
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.5s linear infinite;
            flex-shrink: 0;
            display: none;
        }

        .search-results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
            gap: 14px;
        }

        .search-results-grid .post-card {
            width: 100%;
        }

        .search-dim {
            position: fixed;
            inset: 64px 0 0 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(2px);
            z-index: 698;
            display: none;
        }

        .search-dim.open { display: block; }

        .search-empty {
            text-align: center;
            padding: 52px 20px;
            color: var(--muted);
        }

        .search-empty-icon  { font-size: 2.4rem; margin-bottom: 12px; color: var(--muted); }
        .search-empty-icon.material-symbols { font-size: 40px; }
        .search-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
        .search-empty-sub   { font-size: 0.82rem; line-height: 1.5; }

        @media (max-width: 768px) {
            .search-hint { display: none !important; }
            .search-bar { height: 60px; padding: 0 10px; gap: 8px; }
            .search-field { height: 40px; }
            .search-input { font-size: 0.9rem; }
            .search-results-drop { top: 60px; max-height: calc(100dvh - 60px); }
            .search-dim { inset: 60px 0 0 0; }
            body.mv-open .search-bar { z-index: 10020; }
        }

        @media (max-width: 560px) {
            .search-mode { max-width: 116px; padding: 6px 10px; }
            .search-mode span:last-child { overflow: hidden; text-overflow: ellipsis; }
            .search-count { padding: 3px 7px; font-size: 0.64rem; }
            .search-close-btn { padding: 8px 10px; font-size: 0.78rem; }
            .search-field { padding: 0 8px 0 11px; gap: 7px; }
        }


        /* ── PROFILE ── */
        .profile-wrap { position: relative; }

        .profile-btn {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid rgba(59,130,246,0.35);
            color: white;
            font-weight: 700;
            font-size: 0.88rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: border-color 0.2s;
            user-select: none;
        }

        .profile-btn:hover { border-color: rgba(59,130,246,0.8); }

        .profile-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: #18182a;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            min-width: 230px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.7);
            z-index: 1000;
            display: none;
            overflow: hidden;
            animation: dropdownIn 0.15s ease;
        }

        .profile-dropdown.open { display: block; }

        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .profile-dropdown-top {
            padding: 16px;
            background: #22223a;
            display: flex; align-items: center; gap: 12px;
        }

        .profile-dropdown-avatar {
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; color: white; font-size: 0.88rem; flex-shrink: 0;
        }

        .profile-dropdown-name { color: white; font-weight: 600; font-size: 0.88rem; }
        .profile-dropdown-email { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

        .profile-dropdown-plan {
            padding: 10px 16px;
            display: flex; align-items: center; gap: 10px;
            border-bottom: 1px solid var(--border);
        }

        .plan-pill {
            padding: 3px 10px; border-radius: 20px;
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
        }
        .plan-pill.bronze { background: linear-gradient(135deg,#cd7f32,#b8860b); color:#fff; }
        .plan-pill.silver { background: linear-gradient(135deg,#c0c0c0,#999); color:#222; }
        .plan-pill.gold   { background: linear-gradient(135deg,#ffd700,#ffaa00); color:#222; }
        .plan-pill.inactive { background: #444; color:#aaa; }

        .plan-expires { color: var(--muted); font-size: 0.74rem; }

        .profile-dropdown-divider { height: 1px; background: var(--border); }

        .profile-dropdown-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px;
            color: #ccc; font-size: 0.86rem;
            cursor: pointer; transition: background 0.15s;
            text-decoration: none;
        }

        .profile-dropdown-item:hover { background: rgba(255,255,255,0.05); color: white; }
        .profile-dropdown-item.danger { color: #f87171; }
        .profile-dropdown-item.danger:hover { background: rgba(239,68,68,0.08); }
        .item-icon { width: 18px; text-align: center; }

        /* ── PAGE BODY ── */
        .page-body {
            max-width: 1500px;
            margin: 0 auto;
            padding: 28px 32px 80px;
        }

        /* ── SPORTS FILTER ROW ── */
        .sports-section { margin-bottom: 36px; }

        .row-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .row-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
        }

        .row-nav { display: flex; gap: 8px; }

        .nav-btn {
            width: 30px; height: 30px;
            border-radius: 50%;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            font-size: 0.9rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }

        .nav-btn .material-symbols { font-size: 18px; }

        .nav-btn:hover { background: #2e2e2e; }
        .nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }

        .sports-scroll {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            padding: 4px 2px;
        }

        .sports-scroll::-webkit-scrollbar { display: none; }

        .sport-card {
            min-width: 120px;
            height: 110px;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            padding: 14px;
            text-align: center;
            flex-shrink: 0;
        }

        .sport-card:hover {
            background: #282828;
            border-color: rgba(59,130,246,0.3);
            transform: translateY(-3px);
        }

        .sport-card.active {
            background: rgba(59,130,246,0.1);
            border-color: var(--accent);
        }

        .sport-icon { font-size: 2rem; margin-bottom: 7px; color: var(--muted); }
        .sport-icon.material-symbols { font-size: 32px; }
        .sport-card.active .sport-icon { color: var(--accent); }

        .sport-name {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--muted);
        }

        .sport-card.active .sport-name { color: var(--accent); }

        /* ── SECTIONS (horizontal scroll rows) ── */
        .section { margin-bottom: 40px; }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            cursor: pointer;
            padding: 4px 0;
        }

        .section-header-left { display: flex; align-items: center; gap: 10px; }

        .section-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
        }

        .section-icon { font-size: 18px; color: var(--accent); display: inline-flex; }
        .section-icon.live { color: var(--live); }

        .section-count {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 0.74rem;
            font-weight: 600;
        }

        .live-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--live);
            animation: livePulse 1.5s infinite;
            flex-shrink: 0;
        }

        @keyframes livePulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
            50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
        }

        .toggle-icon { color: var(--muted); font-size: 0.78rem; transition: transform 0.25s; display: inline-flex; }
        .toggle-icon.material-symbols { font-size: 20px; }
        .toggle-icon.collapsed { transform: rotate(-90deg); }

        /* Horizontal scroll row */
        .posts-grid {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            padding: 4px 2px 12px;
        }

        .posts-grid::-webkit-scrollbar { display: none; }

        .posts-grid.collapsed {
            display: none;
        }

        /* ── MATCH CARD (tile style like reference) ── */
        .post-card {
            flex-shrink: 0;
            width: var(--card-w);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .post-card:hover { transform: translateY(-5px); }
        .post-card:hover .card-thumb { border-color: rgba(59,130,246,0.5); }

        .card-thumb {
            width: 100%;
            height: var(--card-h);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background: var(--surface2);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s;
        }

        .card-thumb.cat-football    { background: linear-gradient(135deg,#0d2818 0%,#071408 100%); }
        .card-thumb.cat-basketball  { background: linear-gradient(135deg,#2a1500 0%,#140a00 100%); }
        .card-thumb.cat-hockey      { background: linear-gradient(135deg,#001428 0%,#000a14 100%); }
        .card-thumb.cat-baseball    { background: linear-gradient(135deg,#180018 0%,#0c000c 100%); }
        .card-thumb.cat-motorsport  { background: linear-gradient(135deg,#1e1e00 0%,#0f0f00 100%); }
        .card-thumb.cat-fight       { background: linear-gradient(135deg,#280a0a 0%,#140505 100%); }
        .card-thumb.cat-tennis      { background: linear-gradient(135deg,#002a12 0%,#001409 100%); }
        .card-thumb.cat-default     { background: linear-gradient(135deg,#12122a 0%,#09091a 100%); }

        .card-teams {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            padding: 12px;
        }

        .card-badge {
            width: 48px; height: 48px;
            object-fit: contain;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
            flex-shrink: 0;
        }

        .card-vs {
            font-size: 0.65rem;
            font-weight: 800;
            color: rgba(255,255,255,0.3);
            letter-spacing: 1px;
        }

        .card-badge-placeholder {
            width: 48px; height: 48px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
            border: 2px solid rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            color: var(--muted);
        }
        .card-badge-placeholder .material-symbols { font-size: 22px; }

        /* Time badge */
        .card-time {
            position: absolute;
            top: 8px; left: 8px;
            background: rgba(0,0,0,0.8);
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 5px;
            backdrop-filter: blur(4px);
        }

        /* LIVE badge */
        .card-live-badge {
            position: absolute;
            top: 8px; left: 8px;
            background: var(--live);
            color: white;
            font-size: 0.68rem;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 5px;
            letter-spacing: 0.5px;
            animation: liveBlink 1.5s infinite;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        @keyframes liveBlink {
            0%,100% { opacity: 1; }
            50%      { opacity: 0.7; }
        }

        .card-live-border { border-color: var(--live) !important; }

        /* Card text below thumb */
        .card-info { padding: 8px 2px 0; }

        .card-title {
            font-size: 0.83rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-meta {
            margin-top: 4px;
            font-size: 0.72rem;
            color: var(--muted);
        }

        /* ── LOADING / ERROR ── */
        .loading {
            text-align: center;
            color: var(--muted);
            padding: 80px 20px;
        }

        .loading-spinner {
            width: 30px; height: 30px;
            border: 3px solid var(--surface2);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.65s linear infinite;
            margin: 0 auto 14px;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .empty-state { color: var(--muted); font-size: 0.875rem; padding: 16px 0; }

        .error {
            background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.25);
            color: #fca5a5;
            padding: 14px 18px;
            border-radius: 8px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .error .material-symbols { font-size: 20px; flex-shrink: 0; }

        /* ── MATCH DETAIL ── */
        .match-detail-container {
            max-width: 960px;
            margin: 0 auto;
            padding: 28px 32px 80px;
        }

        .back-button {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--surface2); border: 1px solid var(--border);
            color: var(--text); padding: 9px 18px; border-radius: 8px;
            text-decoration: none; font-weight: 600; font-size: 0.875rem;
            margin-bottom: 28px; transition: all 0.2s;
        }

        .back-button:hover { background: #2a2a2a; transform: translateX(-3px); }

        .match-info-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 28px;
            margin-bottom: 20px;
        }

        .match-title {
            font-size: 1.5rem; font-weight: 700; color: var(--text);
            margin-bottom: 22px; text-align: center;
        }

        .teams-display {
            display: flex; justify-content: space-around; align-items: center;
            margin: 22px 0; gap: 12px;
        }

        .team-info { text-align: center; flex: 1; min-width: 80px; max-width: 200px; display: flex; flex-direction: column; align-items: center; }

        .team-badge-large {
            width: 86px; height: 86px; object-fit: contain; margin-bottom: 12px;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
        }

        /* Placeholder shown when team has no badge or badge fails to load */
        .team-badge-placeholder {
            width: 86px; height: 86px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 12px;
        }
        .team-badge-placeholder .material-symbols { font-size: 38px; color: var(--muted); }

        .team-name-large { font-size: 1rem; font-weight: 700; color: var(--text); }
        .vs-divider { font-size: 1.6rem; font-weight: 800; color: var(--accent); flex-shrink: 0; }

        .match-meta-info {
            display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
            gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
        }

        .meta-item { text-align: center; }
        .meta-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
        .meta-value { font-size: 0.95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 4px; }
        .meta-value .material-symbols { font-size: 16px; color: #ffd700; }

        .streams-section {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 26px;
        }

        .streams-title {
            font-size: 1.1rem; font-weight: 700; color: var(--text);
            margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
        }

        .stream-card {
            background: var(--surface2); border: 1px solid var(--border);
            color: var(--text); padding: 14px 18px; border-radius: 8px;
            margin-bottom: 10px; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: space-between;
        }

        .stream-card:hover { border-color: var(--accent); background: rgba(59,130,246,0.06); }
        .stream-name { font-size: 0.9rem; font-weight: 600; }
        .stream-quality { font-size: 0.77rem; color: var(--muted); margin-top: 2px; }

        .stream-play-icon {
            width: 34px; height: 34px; border-radius: 50%;
            background: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.85rem; flex-shrink: 0;
        }

        .stream-play-icon .material-symbols { font-size: 18px; color: white; }

        .no-streams { text-align: center; padding: 40px; color: var(--muted); }

        /* ── STREAM MODAL ── */
        .stream-modal {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.95); z-index: 9999;
        }

        .stream-modal.active {
            display: flex; align-items: center; justify-content: center;
            animation: fadeIn 0.2s ease;
        }

        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

        .stream-modal-content {
            width: 95%; height: 90%; max-width: 1400px;
            background: #0d0d0d; border-radius: 12px; overflow: hidden;
            display: flex; flex-direction: column;
            border: 1px solid var(--border);
        }

        .stream-modal-header {
            background: var(--surface); border-bottom: 1px solid var(--border);
            padding: 14px 22px; display: flex; justify-content: space-between; align-items: center;
        }

        .stream-modal-title {
            font-size: 0.95rem; font-weight: 700;
            display: flex; align-items: center; gap: 10px; color: var(--text);
        }

        .stream-close-btn {
            background: var(--surface2); border: 1px solid var(--border);
            color: var(--text); width: 34px; height: 34px; border-radius: 50%;
            font-size: 1rem; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center;
        }

        .stream-close-btn:hover { background: #333; transform: rotate(90deg); }
        .stream-close-btn .material-symbols { font-size: 18px; }

        .stream-iframe-container { flex: 1; position: relative; background: #000; }
        .stream-iframe { width: 100%; height: 100%; border: none; }

        .stream-loading {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%,-50%); color: var(--muted); text-align: center;
        }

        .stream-loading::after { content: '...'; animation: dots 1.5s steps(4,end) infinite; }

        @keyframes dots {
            0%,20% { content:'.'; } 40% { content:'..'; } 60%,100% { content:'...'; }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .page-body { padding: 16px 12px 60px; }
            .topnav { padding: 0 12px; gap: 10px; }
            .topnav-links { display: none; }
            :root { --card-w: 160px; --card-h: 100px; }
            .match-detail-container { padding: 12px 10px 40px; }
            .match-info-card { padding: 16px 14px; }
            .match-title { font-size: 1.05rem; margin-bottom: 14px; }
            .teams-display { gap: 10px; margin: 14px 0; }
            .team-info { min-width: 80px; }
            .team-badge-large { width: 60px; height: 60px; }
            .team-badge-placeholder { width: 60px; height: 60px; margin-bottom: 8px; }
            .team-badge-placeholder .material-symbols { font-size: 26px; }
            .team-name-large { font-size: 0.82rem; }
            .vs-divider { font-size: 1.2rem; }
            .match-meta-info { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; padding-top: 16px; }
            .meta-label { font-size: 0.68rem; }
            .meta-value { font-size: 0.85rem; }
            .streams-section { padding: 16px 14px; }
            .streams-title { font-size: 0.95rem; margin-bottom: 12px; }
            .stream-card { padding: 12px 14px; }
            .stream-name { font-size: 0.85rem; }
            .back-button { padding: 7px 14px; font-size: 0.82rem; margin-bottom: 16px; }
            /* Search */
            .search-bar { padding: 0 10px; gap: 8px; }
            .search-input { font-size: 0.9rem; }
            .search-drop-inner { padding: 12px 12px 24px; }
            .search-results-grid { gap: 10px; }
        }

        @media (max-width: 480px) {
            .topnav-logo { font-size: 1rem; }
            .topnav-refresh { display: none; }
            .search-results-grid { grid-template-columns: repeat(2, 1fr); }
            .search-close-btn { font-size: 0.75rem; padding: 6px 6px; }
            .match-title { font-size: 0.95rem; }
            .team-badge-large { width: 50px; height: 50px; }
            .team-badge-placeholder { width: 50px; height: 50px; }
            .team-badge-placeholder .material-symbols { font-size: 22px; }
            .team-name-large { font-size: 0.76rem; }
        }

        /* Collapsed section bodies (including the empty-state placeholder) */
        .empty-state.collapsed { display: none; }

        /* ── SITE FOOTER ── */
        .site-footer {
            margin-top: 40px;
            border-top: 1px solid var(--border);
            background: var(--surface);
        }

        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 32px 32px;
            display: grid;
            grid-template-columns: 1.7fr 1fr 1.1fr 1fr;
            gap: 36px;
        }

        .footer-brand .footer-logo { margin-bottom: 14px; }
        .footer-brand .footer-logo img { height: 34px; width: auto; }

        .footer-tagline {
            color: var(--muted);
            font-size: 0.85rem;
            line-height: 1.65;
            max-width: 300px;
        }

        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .footer-social a {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            text-decoration: none;
            transition: color 0.2s, background 0.2s, transform 0.2s, border-color 0.2s;
        }

        .footer-social a:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            transform: translateY(-2px);
        }

        .footer-col h4 {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--muted);
            margin-bottom: 16px;
            font-weight: 700;
        }

        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 10px; }

        .footer-col a,
        .footer-link {
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: #a3a3a3;
            text-decoration: none;
            font-size: 0.85rem;
            cursor: pointer;
            transition: color 0.2s;
        }

        .footer-col a:hover,
        .footer-link:hover { color: var(--accent); }

        .footer-disclaimer {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 32px;
            border-top: 1px solid var(--border);
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.7;
            text-align: center;
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px 32px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 0.75rem;
            color: var(--muted);
        }

        .footer-built a {
            color: #a3a3a3;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
        }

        .footer-built a:hover { color: var(--accent); }

        @media (max-width: 900px) {
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
        }

        @media (max-width: 560px) {
            .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 32px 24px 24px; }
            .footer-disclaimer { padding: 18px 24px; }
            .footer-bottom { flex-direction: column; text-align: center; padding: 16px 24px 24px; }
        }

/* ══════════════════════════════════════════════════════════════════
   MULTIVIEW

   Tile streams are third-party embeds: heavy, ad-laden and impossible to
   inspect. So tiles are created once, never re-ordered, and layout
   changes are pure CSS class swaps - moving an iframe in the DOM would
   reload the stream.

   NOTE the [hidden] rule just below. Several Multiview panels are hidden
   with the hidden attribute, and any class rule that sets display:flex
   (specificity 0,1,0) beats the UA's [hidden] { display:none }, so those
   panels would stay on screen. This makes hidden mean hidden everywhere.
   ══════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

/* ── Topnav button + queued badge ── */
/* Matches .notif-bell / .search-trigger exactly - same 36px box, 8px radius,
   muted icon at 19px. It used to be a 34px circle with a near-white icon,
   which made a solid glyph look like a bright block next to two outline ones. */
.topnav-mv {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.topnav-mv:hover { background: #2a2a2a; color: var(--text); }
.topnav-mv .material-symbols { font-size: 19px; }

/* Something is queued: the icon carries the accent so the state reads at a
   glance instead of only through the little badge. */
.topnav-mv.has-queued { color: var(--accent); border-color: rgba(59,130,246,0.35); }
.topnav-mv.has-queued:hover { color: var(--accent-hover); }

.mv-nav-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

/* ── Queued-match tray (sits above the footer while browsing) ── */
.mv-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(20,20,20,0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
    /* Deliberately NOT animated in: a fixed bar whose position depends on an
       animation's first keyframe stays off-screen anywhere frames aren't
       rendered (background tab, prerender, screenshot). It must always be
       clickable. */
}

.mv-tray-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mv-tray-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mv-tray-head .material-symbols { font-size: 18px; color: var(--accent); }

.mv-tray-count {
    background: var(--surface2);
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 0.7rem;
    color: var(--muted);
}

.mv-tray-items {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.mv-tray-items::-webkit-scrollbar { height: 4px; }
.mv-tray-items::-webkit-scrollbar-track { background: transparent; }
.mv-tray-items::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* Room for the fixed tray, so it never covers the last row or the footer */
body.mv-tray-open { padding-bottom: 122px; }

@media (max-width: 560px) {
    body.mv-tray-open { padding-bottom: 132px; }
}

@media (min-width: 769px) {
    body.mv-tray-open { padding-bottom: 78px; }
}

@media (max-width: 560px) {
    /* Two rows instead of a jammed flex-wrap: title + actions up top, the
       queued matches on their own scrollable row underneath. Declared AFTER
       the flex rule above, so grid actually wins inside this query. */
    .mv-tray-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "head actions"
            "items items";
        gap: 9px 10px;
        align-items: center;
        padding: 10px 12px;
    }
    .mv-tray-head { grid-area: head; }
    .mv-tray-actions { grid-area: actions; }
    .mv-tray-items { grid-area: items; }
    .mv-tray-launch { padding: 9px 16px; }
}

.mv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 5px 6px 5px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mv-chip-title { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.mv-chip-x {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 50%;
}

.mv-chip-x:hover { color: var(--live); }
.mv-chip-x .material-symbols { font-size: 15px; }

.mv-tray-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mv-tray-clear {
    background: none;
    border: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 8px 4px;
}

.mv-tray-clear:hover { color: var(--text); }

.mv-tray-launch {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    border: none;
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.mv-tray-launch:hover:not(:disabled) { background: var(--accent-hover); }
.mv-tray-launch:disabled { opacity: 0.5; cursor: not-allowed; }
.mv-tray-launch .material-symbols { font-size: 18px; }

/* ── Overlay ── */
.mv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Fully opaque: at 96% the topnav logo and tray chips ghosted through
       behind the grid. */
    background: #0b0b0b;
    z-index: 10000;
}

/* No entrance animation: if the fade's first keyframe gets stuck (frames not
   rendering yet) an animated overlay would be invisible. Instant is safer. */
.mv-overlay.active { display: flex; }

/* "Add match" opens the normal search UI, which normally lives at z-index
   700/699 - far below this overlay, so it would open invisibly underneath.
   While Multiview is open, lift the search layers above it. */
body.mv-open .search-bar { z-index: 10020; }
body.mv-open .search-results-drop { z-index: 10019; }
body.mv-open .search-dim { z-index: 10018; }
/* While picking matches, the search bar IS the UI: hide the overlay's own
   header and hint bar so nothing sits half-covered underneath it. */
body.mv-picking .mv-header,
body.mv-picking .mv-add-bar { display: none; }

.mv-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
}

.mv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 2px 4px;
}

.mv-head-left, .mv-head-right { display: flex; align-items: center; gap: 10px; }
.mv-head-left .material-symbols { font-size: 20px; color: var(--accent); }
.mv-title { font-weight: 800; font-size: 0.95rem; }

.mv-count {
    background: var(--surface2);
    border-radius: 9px;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: var(--muted);
}

.mv-layout-switch {
    display: flex;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
}

/* 1 / 2 / 4 - the count of panes is the label, so no icon can fail to load */
.mv-layout-btn {
    background: none;
    border: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 34px;
    padding: 7px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.mv-layout-btn:hover { color: var(--text); }
.mv-layout-btn.active { background: var(--accent); color: #fff; }

.mv-popup-note {
    font-size: 0.7rem;
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 9px;
    padding: 3px 8px;
    white-space: nowrap;
}

.mv-add-match {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.mv-add-match:hover { border-color: var(--accent); }
.mv-add-match .material-symbols { font-size: 17px; }

.mv-close-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mv-close-btn:hover { background: #333; transform: rotate(90deg); }
.mv-close-btn .material-symbols { font-size: 18px; }

.mv-add-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(59,130,246,0.13);
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.mv-add-bar .material-symbols { font-size: 18px; color: var(--accent); }
.mv-add-bar span:nth-child(2) { flex: 1; }

.mv-add-done {
    background: var(--accent);
    border: none;
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 14px;
    cursor: pointer;
}

/* ── Stage / grid ── */
.mv-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.7;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.mv-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 8px;
    /* grid-auto-rows keeps 1/2/4 all filling the stage height */
    grid-auto-rows: minmax(0, 1fr);
}

.mv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }

/* layout 1 (solo): only the focused tile is visible. Hiding a tile with
   CSS keeps its stream playing - it does not unmount the iframe. */
.mv-grid--1 { grid-template-columns: minmax(0, 1fr); }
.mv-grid--1 .mv-tile { display: none; }
.mv-grid--1 .mv-tile--focus { display: flex; }

/* ── Tile ── */
.mv-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 0;
}

.mv-tile--focus { border-color: var(--accent); }

.mv-tile-frame { position: relative; flex: 1; min-height: 0; }

.mv-tile-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.mv-tile--asleep .mv-tile-iframe { visibility: hidden; }

.mv-tile-msg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 16px;
    color: var(--muted);
    font-size: 0.82rem;
    background: rgba(0,0,0,0.82);
}

.mv-tile-msg.visible { display: flex; }

.mv-tile-retry {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    border: none;
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 16px;
    cursor: pointer;
}

.mv-tile-retry .material-symbols { font-size: 16px; }

.mv-tile-msg-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Per-tile escape hatch when pop-up blocking stops a player from starting */
.mv-tile-unblock {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 16px;
    cursor: pointer;
}

.mv-tile-unblock:hover { border-color: var(--accent); }
.mv-tile-unblock .material-symbols { font-size: 16px; }

/* Best effort: while Multiview is open, hide any ad frame a Monetag script
   has injected into the page. The scripts are deliberately not loaded on a
   multiview load; this covers opening Multiview after they were loaded. */
body.mv-open > iframe,
body.mv-open iframe[src*="n6wxm.com"],
body.mv-open iframe[src*="nap5k.com"],
body.mv-open iframe[src*="5gvci.com"] { display: none !important; }

/* Pop-up blocking switch */
.mv-popup-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.mv-popup-toggle .material-symbols { font-size: 16px; }
.mv-popup-toggle:hover { border-color: rgba(59,130,246,0.6); color: var(--text); }

.mv-popup-toggle.on {
    color: #a8c6ff;
    background: rgba(59,130,246,0.14);
    border-color: rgba(59,130,246,0.35);
}

.mv-tile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mv-tile-bar-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mv-tile-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.mv-tool {
    background: none;
    border: none;
    color: var(--muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.mv-tool:hover { background: var(--surface2); color: var(--text); }
.mv-tool .material-symbols { font-size: 17px; }
.mv-tool[data-mv-act="remove"]:hover { color: var(--live); }

.mv-tile-menu {
    display: none;
    position: absolute;
    right: 8px;
    bottom: 44px;
    z-index: 5;
    min-width: 180px;
    max-width: calc(100% - 16px);
    background: #111;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
    overflow: hidden;
    flex-direction: column;
}

.mv-tile-menu.open { display: flex; }

.mv-menu-item {
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    padding: 10px 13px;
    cursor: pointer;
}

.mv-menu-item:hover { background: var(--surface2); }
.mv-menu-item.active { color: var(--accent); font-weight: 700; }

/* Solo switch strip */
.mv-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    padding-bottom: 2px;
}

.mv-strip:empty { display: none; }

.mv-strip-item {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    padding: 7px 13px;
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.mv-strip-item.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* Banner below the grid: never between or over a tile */
.ad-slot-mv { display: none; flex-shrink: 0; padding: 2px 0; }
.ad-slot-mv.armed { display: flex; }
.ad-slot-mv .ad-slot-inner { width: 320px; max-width: 100%; min-height: 50px; }

/* Hint + toast */
.mv-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(20,20,20,0.96);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 0.78rem;
    color: var(--text);
    z-index: 20;
    max-width: min(520px, 92%);
    text-align: center;
}

.mv-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    z-index: 100001;
    background: rgba(24,24,24,0.97);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 10px 18px;
    font-size: 0.8rem;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    max-width: 92vw;
    text-align: center;
}

.mv-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* In-flow + affordance on match cards (render.js) */
.post-card { position: relative; }

.mv-add-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 3;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.62);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s, transform 0.18s;
}

.post-card:hover .mv-add-btn,
.post-card:focus-within .mv-add-btn,
.mv-add-btn:focus-visible { opacity: 1; }

.mv-add-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.mv-add-btn.queued { opacity: 1; background: var(--accent); border-color: var(--accent); }
.mv-add-btn .material-symbols { font-size: 16px; }

@media (hover: none) {
    /* No hover on touch: always visible, or nobody finds it */
    .mv-add-btn { opacity: 1; }
}

@media (max-width: 768px) {
    .mv-shell { padding: 8px; gap: 6px; }
    .mv-add-match { padding: 7px 10px; font-size: 0.75rem; }
    .mv-tray-inner { padding: 8px 10px; gap: 10px; }
    .mv-chip-title { max-width: 96px; }
    .mv-chip { padding: 5px 6px 5px 10px; }
    .mv-tile-bar { padding: 5px 6px 5px 10px; }
    .mv-tile-bar-title { font-size: 0.72rem; max-width: 110px; }
    .mv-tool { width: 26px; height: 26px; }
}

@media (max-width: 768px) {
    .mv-popup-toggle .mv-popup-label { display: none; }
    .mv-popup-toggle { padding: 8px 10px; }
}

@media (max-width: 560px) {
    /* Tiles are ~180px wide in a 2-up mobile grid: titles would be ellipsised
       to two letters, so drop them and spread the tools instead. */
    .mv-tile-bar { padding: 4px 6px; }
    .mv-tile-bar-title { display: none; }
    .mv-tile-tools { width: 100%; justify-content: space-evenly; }
    .mv-tool { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
    .mv-layout-btn[data-mv-layout="4"] { display: none; }
    .mv-popup-note { display: none; }
    .mv-add-match { padding: 8px 11px; }
    .mv-add-label { display: none; }
    .mv-count { display: none; }
}