:root {
            --bg-dark: #0a0f1e; 
            --bg-card: #1a2332; 
            --bg-card-hover: #232f42; 
            --bg-detail: #141c2b;
            --text-main: #f8fafc; 
            --text-muted: #8b9bb4; 
            --accent: #22c55e; 
            --live-red: #ef4444;
            --border: #2a3650;
            --yellow: #f59e0b;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-main); line-height: 1.5; min-height: 100vh; }
        .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

        header { background: linear-gradient(90deg, #0a0f1e 0%, #1a2332 100%); border-bottom: 1px solid var(--border); padding: 1rem 0; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
        .header-content { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
        h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; line-height: 1.1; color: #dcfce7; text-shadow: 0 0 6px #22c55e, 0 0 16px #22c55e, 0 0 34px #22c55e; animation: neon-flicker 3s infinite; }
        @keyframes neon-flicker { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .5; } 96% { opacity: 1; } 98% { opacity: .6; } }
        @media (max-width: 600px) { h1 { font-size: 1.6rem; } }
        @media (prefers-reduced-motion: reduce) { h1 { animation: none; } }
        .highlight { color: var(--accent); }
        
        .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .status-badge { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--live-red); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; background: rgba(239, 68, 68, 0.1); padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(239, 68, 68, 0.2); }
        .pulse { width: 8px; height: 8px; background-color: var(--live-red); border-radius: 50%; animation: pulse-animation 1.5s infinite; }
        @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

        .btn-action { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: inherit; display: flex; align-items: center; gap: 6px; }
        .btn-action:hover { background: var(--bg-card-hover); border-color: var(--accent); }
        .btn-accent { background: var(--accent); color: #000; border-color: var(--accent); }
        .btn-accent:hover { background: #16a34a; border-color: #16a34a; transform: translateY(-1px); }

        .stats-bar { display: flex; gap: 18px; padding: .75rem 1rem; background: var(--bg-card); border-radius: 10px; margin: 1rem 0; font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; border: 1px solid var(--border); }
        .stats-bar strong { color: var(--accent); }

        .control-group { margin: 1.2rem 0; display: flex; flex-direction: column; gap: 10px; }
        .filters { display: flex; gap: 8px; flex-wrap: wrap; }
        .filters button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .2s; font-weight: 600; font-size: .8rem; font-family: inherit; }
        .filters button.active, .filters button:hover { background: var(--accent); color: #000; border-color: var(--accent); }

        .region-select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-family: inherit; outline: none; cursor: pointer; }

        .search-box { margin-top: 5px; }
        .search-box input { width: 100%; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-main); font-family: inherit; font-size: .9rem; outline: none; transition: border-color .2s; }
        .search-box input:focus { border-color: var(--accent); }

        .toast { position: fixed; bottom: 20px; right: 20px; background: rgba(34, 197, 94, 0.95); color: #000; padding: 12px 18px; border-radius: 10px; font-weight: 800; font-size: 0.9rem; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; gap: 8px; transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .toast.show { transform: translateY(0); opacity: 1; }

        .competition-group { margin-bottom: 1.5rem; animation: fadeIn .4s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .competition-header { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: .5rem 0; border-bottom: 1px solid var(--border); margin-bottom: .75rem; display: flex; align-items: center; gap: 8px; font-weight: 700; }
        .competition-header .flag { font-size: 1rem; }
        .competition-header .count { margin-left: auto; background: var(--bg-card); padding: 2px 8px; border-radius: 10px; font-size: .7rem; text-transform: none; border: 1px solid var(--border); }

        .match-card { background: var(--bg-card); border-radius: 10px; margin-bottom: 8px; border: 1px solid transparent; transition: all .2s; overflow: hidden; }
        .match-card:hover { border-color: var(--border); background: var(--bg-card-hover); }
        .match-card.live { border-left: 4px solid var(--live-red); }
        .match-main { padding: .85rem 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; cursor: pointer; }
        .team { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
        .team.away { justify-content: flex-end; text-align: right; }
        .team-logo { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #334155, #475569); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; color: #fff; }
        
        .score-box { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
        .score { font-size: 1.15rem; font-weight: 800; background: rgba(255,255,255,.05); padding: 3px 14px; border-radius: 6px; letter-spacing: 1.5px; min-width: 75px; text-align: center; }
        .live .score { color: var(--accent); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); }
        .match-time { font-size: .7rem; color: var(--text-muted); margin-top: 4px; font-weight: 600; }
        .live .match-time { color: var(--live-red); }
        
        .progress { width: 100%; height: 4px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 5px; overflow: hidden; }
        .progress > div { height: 100%; background: var(--live-red); transition: width .5s ease-in-out; }
        .minute-badge { color: var(--live-red); font-weight: 800; }

        .match-details { display: none; background: var(--bg-detail); padding: 1rem; border-top: 1px solid var(--border); font-size: .8rem; }
        .match-card.expanded .match-details { display: block; }
        
        .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: .75rem; }
        .detail-item { display: flex; gap: 8px; color: var(--text-muted); }
        .detail-item strong { color: var(--text-main); font-weight: 600; }

        .section-title { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: .9rem 0 .5rem; font-weight: 700; }
        
        .events-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
        .event-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; }
        .event-min { font-weight: 700; color: var(--accent); min-width: 26px; }
        .event-icon { font-size: 0.85rem; }

        .bar-row { margin: 7px 0; font-size: .75rem; }
        .bar-row .vals { display: flex; justify-content: space-between; font-weight: 700; }
        .bar-row .lbl { color: var(--text-muted); font-weight: 500; }
        .bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--border); margin-top: 3px; }
        .bar .h { background: var(--accent); transition: width 0.4s; }
        .bar .a { background: #3b82f6; transition: width 0.4s; }

        .empty { text-align: center; color: var(--text-muted); padding: 3rem 0; background: var(--bg-card); border-radius: 10px; border: 1px dashed var(--border); margin-top: 1rem; }
        footer { border-top: 1px solid var(--border); padding: 1.5rem 0; text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: 3rem; }

        .standings-btn, .follow-btn { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); padding: 3px 11px; border-radius: 12px; font-size: .7rem; font-weight: 700; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; }
        .standings-btn:hover, .follow-btn:hover { border-color: var(--accent); color: var(--text-main); }
        .standings { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: .5rem; margin-bottom: .75rem; overflow-x: auto; }
        .standings table { width: 100%; border-collapse: collapse; font-size: .75rem; margin-bottom: .5rem; min-width: 440px; }
        .standings caption { text-align: left; color: var(--text-muted); font-weight: 700; padding: 4px 6px; text-transform: uppercase; font-size: .65rem; letter-spacing: 1px; }
        .standings th { color: var(--text-muted); font-weight: 600; text-align: center; padding: 4px 6px; border-bottom: 1px solid var(--border); }
        .standings td { text-align: center; padding: 5px 6px; border-bottom: 1px solid rgba(128,128,128,.12); }
        .standings th:nth-child(2), .standings td:nth-child(2) { text-align: left; }
        .standings td.pts { font-weight: 800; }
        .standings tr.playing td { background: rgba(34,197,94,.1); }
        .form span { display: inline-block; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; font-size: .6rem; font-weight: 800; color: #000; margin-right: 2px; }
        .form .V { background: var(--accent); } .form .N { background: var(--yellow); } .form .D { background: var(--live-red); color: #fff; }
        .team-logo.has-img { background: #fff; padding: 2px; }
        .team-logo img { width: 100%; height: 100%; object-fit: contain; }
        .ticker { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-top: .75rem; display: flex; align-items: stretch; overflow: hidden; width: 100%; }
        .ticker-label { flex: 0 0 auto; background: var(--live-red); color: #fff; font-weight: 800; font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; display: flex; align-items: center; gap: 6px; z-index: 1; }
        .ticker-label .pulse { background-color: #fff; }
        .ticker-viewport { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
        .ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker-scroll var(--ticker-duration, 60s) linear infinite; }
        .ticker:hover .ticker-track { animation-play-state: paused; }
        .ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 18px; font-size: .8rem; font-weight: 600; color: var(--text-main); border-right: 1px solid var(--border); }
        .ticker-item .t-logo { width: 16px; height: 16px; object-fit: contain; background: #fff; border-radius: 50%; padding: 1px; vertical-align: middle; margin-right: 4px; }
        .ticker-item .t-comp { color: var(--text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
        .ticker-item .t-score { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: var(--accent); border-radius: 6px; padding: 0 8px; font-weight: 800; }
        .ticker-item .t-live { color: var(--live-red); font-weight: 800; font-size: .7rem; }
        .ticker-item .t-info { color: var(--yellow); font-weight: 700; }
        @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker-viewport { overflow-x: auto; } }
        .video-wrap { position: relative; padding-top: 56.25%; margin-bottom: 8px; }
        .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
        .goal-video { margin-left: auto; background: var(--accent); color: #000; font-weight: 700; font-size: .68rem; padding: 2px 9px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
        .goal-video:hover { background: #16a34a; }
        .detail-item.lineup { flex-direction: column; gap: 2px; line-height: 1.5; }


        @media (max-width: 600px) {
            .team { font-size: .85rem; }
            .score { font-size: 1rem; }
            .details-grid { grid-template-columns: 1fr; }
            .match-main { padding: .75rem; }
        }
    
        .sec-title { font-size: 1rem; font-weight: 800; margin: 1.4rem 0 .6rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .sec-title small { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
        .m-row { display: grid; grid-template-columns: 78px 1fr auto 1fr; align-items: center; gap: 8px; background: var(--bg-card); border-radius: 10px; margin-bottom: 6px; padding: .6rem .75rem; border: 1px solid transparent; font-size: .85rem; }
        .m-row:hover { border-color: var(--border); background: var(--bg-card-hover); }
        .m-row.live { border-left: 4px solid var(--live-red); }
        .m-date { font-size: .7rem; color: var(--text-muted); font-weight: 600; line-height: 1.3; }
        .m-home { text-align: right; font-weight: 600; } .m-away { text-align: left; font-weight: 600; }
        .m-score { min-width: 64px; text-align: center; font-weight: 800; border-radius: 6px; padding: 2px 8px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: var(--accent); }
        .m-score.next { background: transparent; border-color: var(--border); color: var(--text-muted); font-weight: 700; }
        .m-live { color: var(--live-red); font-weight: 800; font-size: .7rem; display: block; }
        .m-logo { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin: 0 4px; background: #fff; border-radius: 50%; padding: 1px; }
        .note { font-size: .75rem; color: var(--text-muted); margin: .4rem 0; }
        @media (max-width: 600px) { .m-row { grid-template-columns: 1fr auto 1fr; } .m-date { grid-column: 1 / -1; } }

        .m-wrap { margin-bottom: 6px; }
        .m-wrap .m-row { margin-bottom: 0; cursor: pointer; }
        .m-wrap.open .m-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--accent); }
        .m-date .chev { display: inline-block; transition: transform .2s; color: var(--accent); margin-left: 4px; }
        .m-wrap.open .chev { transform: rotate(90deg); }
        .m-detail { display: none; background: var(--bg-detail); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; padding: 1rem; font-size: .8rem; }
        .m-wrap.open .m-detail { display: block; }
        .d-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 20px; margin-bottom: .6rem; }
        .d-info div { color: var(--text-muted); } .d-info b { color: var(--text-main); font-weight: 600; }
        .d-ev { display: grid; grid-template-columns: 44px 24px 1fr; gap: 6px; align-items: center; background: rgba(255,255,255,.03); border-radius: 6px; padding: 4px 8px; margin-bottom: 3px; font-size: .75rem; }
        .d-ev .min { color: var(--accent); font-weight: 700; } .d-ev .tm { color: var(--text-muted); }
        .d-stats .bar-row { margin: 9px 0; }
        .d-stats .vals span:nth-child(2) { color: var(--text-muted); font-weight: 500; }
        .d-head { display: flex; justify-content: space-between; font-weight: 700; margin: .5rem 0; font-size: .8rem; }
        .d-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
        .d-lineups h4 { font-size: .75rem; margin-bottom: 4px; }
        .d-player { display: flex; gap: 6px; padding: 2px 0; border-bottom: 1px solid rgba(128,128,128,.1); font-size: .75rem; }
        .d-player .n { color: var(--text-muted); min-width: 22px; text-align: right; } .d-player .pos { color: var(--text-muted); margin-left: auto; font-size: .65rem; }
        .d-sub { color: var(--text-muted); font-size: .7rem; margin: 6px 0 2px; text-transform: uppercase; letter-spacing: 1px; }
        .d-comm { max-height: 260px; overflow-y: auto; margin-top: 6px; }
        .d-comm div { padding: 3px 0; border-bottom: 1px solid rgba(128,128,128,.1); font-size: .75rem; }
        .d-comm b { color: var(--accent); margin-right: 6px; }
        .m-detail details summary { cursor: pointer; color: var(--text-muted); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; margin-top: .9rem; }
        @media (max-width: 600px) { .d-lineups { grid-template-columns: 1fr; } .m-wrap .m-row { grid-template-columns: 1fr auto 1fr; } }
        .d-ev .goal-video { margin-left: 8px; }
        .d-vid { margin: 4px 0 8px; } .d-vid video { width: 100%; max-height: 360px; border-radius: 8px; background: #000; }
        .vid-list details { background: rgba(255,255,255,.03); border-radius: 6px; padding: 5px 9px; margin-bottom: 4px; }
        .vid-list summary { cursor: pointer; font-size: .75rem; font-weight: 600; color: var(--text-main); text-transform: none; letter-spacing: 0; margin: 0; }
        .vid-list video { width: 100%; max-height: 360px; margin-top: 6px; border-radius: 8px; background: #000; }
        .vid-list a { color: var(--accent); }
        .filters button .ic { display: inline-block; transform-origin: 50% 60%; }
        .ic-today { animation: ic-flash 1.6s ease-in-out infinite; }
        .ic-goal { animation: ic-shake 2.2s ease-in-out infinite; }
        .ic-ball { animation: ic-roll 2.4s linear infinite; }
        @keyframes ic-flash { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.25); filter: drop-shadow(0 0 4px #f59e0b); } }
        @keyframes ic-shake { 0%,60%,100% { transform: translateX(0) scale(1); } 65% { transform: translateX(-2px) scale(1.15); } 70% { transform: translateX(2px) scale(1.15); } 75% { transform: translateX(-2px) scale(1.15); } 80% { transform: translateX(2px) scale(1.15); } 85% { transform: translateX(0) scale(1); } }
        @keyframes ic-roll { 0% { transform: translateX(-2px) rotate(0); } 50% { transform: translateX(2px) rotate(180deg); } 100% { transform: translateX(-2px) rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .filters button .ic { animation: none; } }
        .filters button.btn-live { background: rgba(239,68,68,.12); border-color: var(--live-red); color: #fecaca; display: inline-flex; align-items: center; gap: 6px; }
        .filters button.btn-live:hover, .filters button.btn-live.active { background: var(--live-red); border-color: var(--live-red); color: #fff; }
        .ic-live { width: 10px; height: 10px; border-radius: 50%; background: var(--live-red); animation: pulse-animation 1.5s infinite, ic-blink 1s ease-in-out infinite; }
        .btn-live:hover .ic-live, .btn-live.active .ic-live { background: #fff; }
        @keyframes ic-blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.3); } }
        .live-count { background: rgba(0,0,0,.3); border-radius: 10px; padding: 0 7px; font-size: .7rem; font-weight: 800; }
        @media (prefers-reduced-motion: reduce) { .ic-live { animation: none; } }
        #goal-toasts { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
        .goal-toast { pointer-events: auto; cursor: pointer; display: flex; align-items: stretch; width: 100%; background: linear-gradient(90deg, #0b1b3a 0%, #12305f 100%); color: #fff; border-bottom: 3px solid var(--accent); box-shadow: 0 8px 28px rgba(0,0,0,.6); overflow: hidden; animation: tv-in .5s cubic-bezier(.2,.9,.3,1.1); }
        .goal-toast.out { animation: tv-out .4s ease forwards; }
        .goal-toast .tv-tag { flex: 0 0 auto; background: var(--accent); color: #04210f; font-weight: 900; font-size: 1.2rem; letter-spacing: 3px; padding: 10px 18px; display: flex; align-items: center; gap: 8px; animation: tv-tag-pulse .5s ease-in-out 6 alternate; }
        .goal-toast .tv-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 14px; flex-wrap: wrap; }
        .goal-toast .tv-team { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; opacity: .75; }
        .goal-toast .tv-team.sc { opacity: 1; color: var(--accent); }
        .goal-toast .tv-score { font-size: 1.5rem; font-weight: 900; background: #fff; color: #0b1b3a; border-radius: 6px; padding: 0 14px; letter-spacing: 2px; }
        .goal-toast .tv-min { flex: 0 0 auto; background: rgba(255,255,255,.12); font-weight: 800; font-size: .85rem; padding: 0 16px; display: flex; align-items: center; }
        .goal-toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: #fff; animation: tv-bar 8s linear forwards; }
        .goal-toast { position: relative; }
        @keyframes tv-in { from { transform: translateY(-110%); } to { transform: translateY(0); } }
        @keyframes tv-out { to { transform: translateY(-110%); } }
        @keyframes tv-tag-pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
        @keyframes tv-bar { from { width: 100%; } to { width: 0; } }
        @media (max-width: 600px) { .goal-toast .tv-tag { font-size: .9rem; padding: 8px 10px; letter-spacing: 1px; } .goal-toast .tv-team { font-size: .8rem; } .goal-toast .tv-score { font-size: 1.2rem; } }
        .m-row.goal-now { animation: goal-flash 1s ease-in-out 6; border-color: var(--accent); }
        @keyframes goal-flash { 0%,100% { background: var(--bg-card); } 50% { background: rgba(34,197,94,.28); } }
        .goal-badge { display: inline-block; background: var(--accent); color: #000; font-weight: 800; font-size: .65rem; border-radius: 10px; padding: 1px 8px; margin-bottom: 2px; animation: goal-pop .6s ease-in-out infinite alternate; }
        @keyframes goal-pop { from { transform: scale(1); } to { transform: scale(1.18); } }
        .goal-now .m-score { animation: goal-pop .6s ease-in-out infinite alternate; }
        @media (prefers-reduced-motion: reduce) { .goal-toast, .goal-toast::after, .goal-toast .tv-tag, .m-row.goal-now, .goal-badge, .goal-now .m-score { animation: none; } }
        .g-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: .6rem; }
        .g-links a { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); padding: 5px 13px; border-radius: 20px; font-size: .75rem; font-weight: 700; text-decoration: none; }
        .g-links a:hover { border-color: var(--accent); }
        .std-box { margin-bottom: .75rem; }
        .standings td.tn { text-align: left; white-space: nowrap; }
        .standings td.tn img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-right: 6px; background: #fff; border-radius: 50%; padding: 1px; }
        .standings tr.playing td { background: rgba(34,197,94,.16); font-weight: 700; }
        .competition-header .standings-btn { margin-left: 6px; }
        .d-formrow { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .75rem; margin: 4px 0; }
        .d-lead { font-size: .75rem; padding: 3px 0; border-bottom: 1px solid rgba(128,128,128,.1); } .d-lead .tm { color: var(--text-muted); }
        .d-h2h { font-size: .75rem; padding: 3px 0; border-bottom: 1px solid rgba(128,128,128,.1); }
        .radio-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .radio-btn { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); padding: 6px 13px; border-radius: 20px; font-size: .75rem; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; }
        .radio-btn:hover, .radio-btn.on { border-color: var(--accent); background: rgba(34,197,94,.15); }
        .radio-player { flex: 1 0 100%; } .radio-player audio { width: 100%; margin-top: 4px; }
        .pitch-box { margin: 6px 0 10px; }
        .pitch-teams { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 700; max-width: 640px; margin: 0 auto 4px; color: var(--text-muted); }
        .pitch-teams .ph { color: #f87171; } .pitch-teams .pa { color: #60a5fa; }
        .pl { transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
        .pl circle { stroke: #fff; stroke-width: .3; } .pl.home circle { fill: #dc2626; } .pl.away circle { fill: #1d4ed8; }
        .pl.gk circle { stroke: #fde047; stroke-width: .5; }
        .pl text { font-size: 1.7px; fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
        .pl.hl circle { stroke: #fde047; stroke-width: .9; animation: plhl .6s ease-in-out 3; }
        @keyframes plhl { 50% { r: 3.2; } }
        @media (prefers-reduced-motion: reduce) { .pl { transition: none; } .pl.hl circle { animation: none; } }
        .pitch-svg { width: 100%; max-width: 640px; display: block; margin: 0 auto; border-radius: 8px; background: #15803d; }
        .pitch-svg .ln { stroke: rgba(255,255,255,.75); stroke-width: .35; fill: none; }
        .pitch-svg .stripe { fill: rgba(255,255,255,.04); }
        .pitch-ball { transition: transform .9s cubic-bezier(.4,0,.2,1); }
        .pitch-ring { fill: none; stroke: #fff; stroke-width: .4; animation: pring 1.2s ease-out infinite; }
        @keyframes pring { 0% { r: 1.5; opacity: .9; } 100% { r: 5.5; opacity: 0; } }
        .pitch-goal-txt { font-size: 9px; font-weight: 800; fill: #fff; stroke: #000; stroke-width: .5; paint-order: stroke; text-anchor: middle; transform-box: fill-box; transform-origin: center; animation: pgoal 2.6s ease-out forwards; }
        @keyframes pgoal { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1.25); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
        .pitch-cap { text-align: center; font-size: .78rem; margin-top: 6px; min-height: 2.6em; max-width: 640px; margin-left: auto; margin-right: auto; }
        .pitch-cap .pm { color: var(--accent); font-weight: 800; margin-right: 6px; }
        .pitch-cap .pk { display: inline-block; background: rgba(255,255,255,.08); border-radius: 10px; padding: 0 8px; margin-right: 6px; font-size: .68rem; font-weight: 700; }
        .pitch-replay { display: block; margin: 6px auto 0; }
        [hidden] { display: none !important; }
        .goal-sonar { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; margin: 14px 0 0 14px; width: fit-content; max-width: calc(100vw - 28px); animation: sn-in .35s ease; }
        .goal-sonar.out { animation: sn-out .4s ease forwards; }
        .sn-ball { position: relative; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
        .sn-ball i { position: absolute; inset: 0; border: 3px solid var(--accent); border-radius: 50%; animation: sn-ring 1.4s ease-out infinite; }
        .sn-ball i:nth-child(2) { animation-delay: .7s; }
        .sn-text { background: var(--bg-card); border: 1px solid var(--accent); border-radius: 30px; padding: 8px 16px; font-weight: 800; font-size: .85rem; box-shadow: 0 8px 22px rgba(0,0,0,.5); min-width: 0; }
        .sn-text small { display: block; color: var(--text-muted); font-weight: 600; font-size: .7rem; }
        @keyframes sn-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
        @keyframes sn-in { from { transform: translateX(-120%); opacity: 0; } }
        @keyframes sn-out { to { transform: translateX(-120%); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { .sn-ball i, .goal-sonar { animation: none; } }
        .rB .pb-link { padding: 7px 12px; border: 1px solid var(--accent); border-radius: 20px; color: var(--accent); font-weight: 700; font-size: .75rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
        .rB .pb-link:hover { background: rgba(34,197,94,.15); }
        .competition-header .flag { display: inline-flex; align-items: center; }
        .lg-logo { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; flex-shrink: 0; }
        #radio-groups { padding-bottom: 90px; }
        .rgt { display: flex; align-items: center; gap: 8px; margin: 1.4rem 0 .2rem; font-weight: 800; font-size: .95rem; }
        .rgs { color: var(--text-muted); font-size: .72rem; margin-bottom: .6rem; }
        .rlist { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
        .rB { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); transition: background .15s; }
        .rB:last-child { border-bottom: 0; }
        .rB:hover { background: var(--bg-card-hover); }
        .rB .n { color: var(--text-muted); width: 16px; text-align: center; font-size: .8rem; }
        .rav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .75rem; color: #fff; flex-shrink: 0; position: relative; }
        .rav .fl { position: absolute; right: -4px; bottom: -4px; font-size: .85rem; background: var(--bg-dark); border-radius: 50%; line-height: 1; padding: 1px; }
        .rB .in { flex: 1; min-width: 0; }
        .rB .in b { display: block; font-size: .9rem; }
        .rB .in small { color: var(--text-muted); font-size: .72rem; }
        .rlive { background: var(--live-red); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: 1px; padding: 1px 6px; border-radius: 8px; }
        .rB .site { color: var(--text-muted); text-decoration: none; font-size: .9rem; padding: 4px 8px; }
        .rB .site:hover { color: var(--accent); }
        .rB .eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
        .rB .eq i { width: 3px; background: var(--accent); border-radius: 1px; animation: rq-eq 1s ease-in-out infinite; }
        .rB .eq i:nth-child(2) { animation-delay: .2s; } .rB .eq i:nth-child(3) { animation-delay: .4s; }
        @keyframes rq-eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
        .rB.playing { background: rgba(34,197,94,.1); }
        .rB.playing .in b { color: var(--accent); }
        .rB.playing .eq { display: flex; }
        .rB .pb.radio-btn, .rB .pb.radio-btn.on { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--accent); color: #000; border-color: var(--accent); font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .rB .pb::before { content: "▶"; }
        .rB.playing .pb::before { content: "■"; }
        .rB .pb.radio-btn:hover { transform: scale(1.08); background: #16a34a; }
        #radio-mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(20,28,43,.97); border-top: 2px solid var(--accent); padding: 10px 16px; display: none; align-items: center; gap: 12px; backdrop-filter: blur(10px); }
        #radio-mini.on { display: flex; }
        #radio-mini .in { flex: 1; min-width: 0; }
        #radio-mini b { font-size: .85rem; }
        #radio-mini small { display: block; color: var(--text-muted); font-size: .7rem; }
        @media (prefers-reduced-motion: reduce) { .rB .eq i { animation: none; } }
        @media (prefers-reduced-motion: reduce) { .pitch-ball { transition: none; } .pitch-ring, .pitch-goal-txt { animation: none; } }
    .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
        .faq h3{font-size:.9rem;font-weight:600;color:var(--text-main);margin:.9rem 0 .2rem}
    

:root{--bg-dark:#070b16;--bg-card:#111a2b;--bg-card-hover:#17223a;--bg-detail:#0d1524;--border:#1f2c47;--accent:#2ee59d;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
html{-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(900px 420px at 50% -120px,rgba(46,229,157,.13),transparent),var(--bg-dark);padding-bottom:0;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
header{background:rgba(7,11,22,.86);padding:calc(.7rem + var(--sat)) 0 .6rem;border-bottom:1px solid var(--border)}
h1{font-size:1.45rem;letter-spacing:-.4px;color:#fff;text-shadow:none;animation:none}
h1 .brand-mark{width:34px;height:34px;display:block;flex-shrink:0}
h1 .brand-mark svg{width:100%;height:100%;display:block}
h1 b{font-weight:800}h1 b span{color:var(--accent)}
.header-actions .btn-action{padding:6px 12px}
.status-badge{font-size:.68rem}
.ticker{border-radius:12px;background:#0d1524}
.ticker-label{border-radius:0}
.stats-bar,.search-box input,.region-select{background:var(--bg-card)}
.search-box input{border-radius:14px;padding:12px 16px}
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{white-space:nowrap;padding:8px 16px;font-size:.82rem}
.filters button.active{background:linear-gradient(135deg,#2ee59d,#10b981);box-shadow:0 4px 14px rgba(46,229,157,.3)}
.sec-title{font-size:1.05rem;letter-spacing:-.2px}
.competition-header{background:linear-gradient(90deg,rgba(46,229,157,.07),transparent);border:1px solid var(--border);border-radius:12px;padding:.6rem .8rem;margin-bottom:.6rem}
.match-card{border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.match-card.live{border-left:1px solid var(--border);box-shadow:inset 3px 0 0 var(--live-red),0 6px 18px rgba(0,0,0,.25)}
.score{font-size:1.25rem;border-radius:10px;padding:4px 14px}
.team-logo{width:30px;height:30px}
.m-row,.rlist,.standings{border-radius:14px}
.rB{padding:12px 14px}
.toast{bottom:calc(20px + var(--sab))}
footer{margin-top:1.5rem;padding-bottom:1rem}
#radio-mini{bottom:var(--sab);border-radius:16px 16px 0 0;border:1px solid var(--accent);border-bottom:0;background:rgba(13,21,36,.97)}
#radio-groups{padding-bottom:90px}
.lg-flag{width:22px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18);flex-shrink:0}
.lg-flag-e{font-size:1.1rem;line-height:1;flex-shrink:0}
.lg-logo{width:28px;height:28px}
/* Menu du site (en haut, sous le logo) */
#tabbar{border-top:1px solid var(--border);background:rgba(7,11,22,.6)}
#tabbar .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0}
#tabbar .container::-webkit-scrollbar{display:none}
#tabbar a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:11px 16px;color:var(--text-muted);font-weight:700;font-size:.88rem;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
#tabbar a span{font-size:1.05rem;line-height:1}
#tabbar a:hover{color:var(--text-main);background:rgba(255,255,255,.04)}
#tabbar a.on{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:600px){#tabbar a{padding:10px 13px;font-size:.82rem}}
/* Écran de démarrage */
#splash{position:fixed;inset:0;z-index:5000;background:radial-gradient(600px 400px at 50% 40%,rgba(46,229,157,.2),transparent),#070b16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s,visibility .5s}
#splash.hide{opacity:0;visibility:hidden}
#splash .lg{width:116px;height:116px;filter:drop-shadow(0 12px 30px rgba(46,229,157,.45));animation:sp-pop .7s cubic-bezier(.2,1.4,.4,1)}
#splash .lg svg{width:100%;height:100%}
#splash .nm{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.5px}
#splash .nm span{color:var(--accent)}
#splash .tg{color:var(--text-muted);font-size:.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-top:-10px}
#splash .ld{width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
#splash .ld i{display:block;height:100%;width:40%;background:var(--accent);border-radius:3px;animation:sp-ld 1.1s ease-in-out infinite}
@keyframes sp-pop{from{transform:scale(.4);opacity:0}}
@keyframes sp-ld{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}


/* ===== Footlive Pro v3 : thème clair/sombre, décor, composants ===== */
:root{--glass:rgba(13,21,36,.72);--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
body{font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased}

/* Décor : halos lumineux animés */
body::before,body::after{content:"";position:fixed;z-index:-1;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.2;pointer-events:none;animation:fl-orb 24s ease-in-out infinite alternate}
body::before{background:var(--accent);top:-20vmax;left:-16vmax}
body::after{background:#3b82f6;bottom:-22vmax;right:-18vmax;animation-delay:-9s}
@keyframes fl-orb{to{transform:translate(6vmax,5vmax) scale(1.12)}}

/* En-tête */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-main);font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;transition:all .2s;flex-shrink:0}
.icon-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.icon-btn.spin{animation:fl-spin .8s linear infinite}
@keyframes fl-spin{to{transform:rotate(360deg)}}
.status-badge.bad{color:var(--yellow);background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.status-badge.bad .pulse{background:var(--yellow)}

/* Titres de section */
.sec-title{position:relative;padding-left:12px}
.sec-title::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:var(--accent)}

/* Cartes de match */
.m-row{border-radius:14px;padding:.7rem .8rem;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.m-row:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.m-wrap.open .m-row{box-shadow:0 0 0 1px var(--accent),0 8px 24px rgba(46,229,157,.12)}
.m-score{font-size:1rem;padding:3px 10px;border-radius:8px}
.m-row.live .m-score{box-shadow:0 0 0 1px rgba(46,229,157,.25),0 0 14px rgba(46,229,157,.2)}
.m-detail{border-radius:0 0 14px 14px}
.competition-header{backdrop-filter:blur(6px)}

/* Étoile favori */
.fav-star{background:none;border:0;color:var(--text-muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:2px 5px;margin:0 2px;border-radius:8px;vertical-align:middle;font-family:inherit;transition:transform .15s,color .15s}
.fav-star:hover{transform:scale(1.25);color:var(--yellow)}
.fav-star.on{color:var(--yellow);text-shadow:0 0 10px rgba(245,158,11,.6)}
.fav-hint{line-height:1.8}

/* Carte À la une */
.hero-card{position:relative;overflow:hidden;border-radius:22px;padding:14px 16px 18px;margin:1rem 0 .2rem;cursor:pointer;border:1px solid var(--border);background:linear-gradient(135deg,rgba(46,229,157,.15),rgba(59,130,246,.1) 55%,transparent),var(--bg-card);box-shadow:var(--shadow);animation:fadeIn .5s ease;transition:transform .2s}
.hero-card:hover{transform:translateY(-2px)}
.hero-card::before{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 68'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.6'%3E%3Crect x='1' y='1' width='103' height='66'/%3E%3Cline x1='52.5' y1='1' x2='52.5' y2='67'/%3E%3Ccircle cx='52.5' cy='34' r='9.15'/%3E%3Crect x='1' y='14' width='16.5' height='40'/%3E%3Crect x='87.5' y='14' width='16.5' height='40'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.hl-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:1px;flex-wrap:wrap}
.hl-live{display:inline-flex;align-items:center;gap:6px;color:var(--live-red)}
.hl-live i{width:8px;height:8px;border-radius:50%;background:var(--live-red);animation:pulse-animation 1.5s infinite}
.hl-next{color:var(--yellow)}.hl-end{color:var(--text-muted)}
.hl-lg{color:var(--text-muted);font-weight:700;letter-spacing:0;text-transform:none;font-size:.72rem}
.hl-main{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:12px}
.hl-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.hl-team img,.hl-ph{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:50%;padding:5px;box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.hl-team b{font-size:.92rem;line-height:1.2;overflow-wrap:anywhere}
.hl-mid{text-align:center;min-width:96px}
.hl-score{font-size:2.3rem;font-weight:900;letter-spacing:2px;line-height:1}
.hl-score i{font-style:normal;color:var(--text-muted);margin:0 2px}
.hl-min{margin-top:6px;font-size:.78rem;font-weight:800;color:var(--live-red)}
.hero-card[data-k="post"] .hl-min{color:var(--text-muted)}
.hl-vs{font-weight:800;color:var(--text-muted);letter-spacing:2px}
.hl-cd{margin-top:6px;font-size:1.05rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

/* Sélecteur de jour */
.daystrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.daystrip::-webkit-scrollbar{display:none}
.daystrip button{flex:1 0 54px;display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);padding:7px 0;border-radius:14px;cursor:pointer;font-family:inherit;transition:all .2s}
.daystrip button small{font-size:.6rem;font-weight:700;letter-spacing:.5px}
.daystrip button b{font-size:1.05rem;color:var(--text-main)}
.daystrip button:hover{border-color:var(--accent)}
.daystrip button.on{background:linear-gradient(135deg,var(--accent),#10b981);border-color:transparent;box-shadow:0 4px 14px rgba(46,229,157,.3)}
.daystrip button.on small,.daystrip button.on b{color:#04210f}

/* Barres d'outils des pages */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:.6rem 0}
.toolbar select{flex:1;min-width:180px;padding:10px 14px;border-radius:14px}
.toolbar .btn-action{border-radius:14px}
.standings#tb-box{padding:.8rem}

/* Actualités */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding-bottom:20px}
.news-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s,border-color .2s;animation:fadeIn .4s ease}
.news-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.news-img{aspect-ratio:16/9;background:linear-gradient(135deg,#1f2c47,#0d1524) center/cover no-repeat;position:relative}
.news-img span{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;font-weight:800;padding:2px 9px;border-radius:10px;backdrop-filter:blur(4px)}
.news-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.news-body b{font-size:.95rem;line-height:1.3}
.news-body p{font-size:.78rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-body small{margin-top:auto;font-size:.68rem;color:var(--accent);font-weight:700}
@media(min-width:700px){.news-card.first{grid-column:span 2}.news-card.first b{font-size:1.15rem}}

/* Squelettes de chargement */
.sk{height:58px;border-radius:14px;margin-bottom:8px;background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:fl-sk 1.3s infinite}
.sk.tall{height:190px}
@keyframes fl-sk{to{background-position:-200% 0}}

/* Recherche de radios */
.rf{display:flex;flex-direction:column;gap:8px;margin:.8rem 0}
.rf-row{display:flex;gap:8px}
.rf input[type=text]{flex:1;min-width:0;padding:11px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;color:var(--text-main);font-family:inherit;font-size:.88rem;outline:none}
.rf input[type=text]:focus{border-color:var(--accent)}
.rf .chk{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-muted);cursor:pointer}
.rf .chk input{accent-color:var(--accent);width:16px;height:16px}
.rav img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}

/* Réglages */

/* Divers */
#offline-bar{position:fixed;top:0;left:0;right:0;z-index:2000;background:var(--yellow);color:#000;text-align:center;font-weight:800;font-size:.75rem;padding:calc(4px + var(--sat)) 8px 4px}
#fab-top{position:fixed;right:16px;bottom:calc(88px + var(--sab));z-index:940;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--glass);backdrop-filter:blur(10px);color:var(--text-main);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(10px)}
#fab-top.show{opacity:1;pointer-events:auto;transform:none}

@media(max-width:600px){.hl-score{font-size:1.9rem}.hl-team img,.hl-ph{width:48px;height:48px}.hl-mid{min-width:80px}.header-actions .status-badge{display:none}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.sk,.icon-btn.spin{animation:none}.hero-card,.news-card,.m-row{transition:none}}


/* Titre FootLive Pro inchangé ; autres titres réduits */
h1{font-size:1.8rem}
h1 .brand-mark{width:44px;height:44px}
.sec-title{font-size:1rem}
.sec-title small{font-size:.68rem}
.competition-header{font-size:.78rem}
.rgt{font-size:.92rem}
.section-title{font-size:.66rem}
.news-body b{font-size:.88rem}
@media(min-width:700px){.news-card.first b{font-size:1.05rem}}
@media(max-width:600px){h1{font-size:1.65rem}}
/* Vidéos YouTube intégrées */
.yt-frame{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;background:#000}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-card{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.03);border-radius:8px;padding:6px;margin-bottom:6px;cursor:pointer;border:1px solid transparent}
.yt-card:hover{border-color:var(--accent)}
.yt-card img{width:116px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#000;flex-shrink:0}
.yt-card b{font-size:.78rem;line-height:1.3;display:block}.yt-card small{color:var(--text-muted);font-size:.68rem}
.yt-close,.yt-retry{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);border-radius:16px;padding:4px 12px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:.7rem}
.legal-links a{color:var(--text-muted);text-decoration:none;font-weight:600;font-size:.8rem}
.legal-links a:hover{color:var(--accent)}


/* Boutons des 10 meilleures compétitions (sous l'en-tête) */
#compbar{border-bottom:1px solid var(--border);background:rgba(7,11,22,.45)}
#compbar .container{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
#compbar .container::-webkit-scrollbar{display:none}
#compbar a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
#compbar a span{font-size:1rem;line-height:1}
#compbar a:hover{color:var(--text-main);border-color:var(--accent)}
#compbar a.on{background:var(--accent);border-color:var(--accent);color:#04210f}

/* ===== Pages compétitions ===== */
.logo-h1{font-size:1.45rem;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;line-height:1.1;color:#fff;text-decoration:none}
.logo-h1 .brand-mark{width:34px;height:34px;display:block;flex-shrink:0}
.logo-h1 .brand-mark svg{width:100%;height:100%;display:block}
.logo-h1 b{font-weight:800}.logo-h1 b span{color:var(--accent)}
@media(min-width:700px){.logo-h1{font-size:1.8rem}.logo-h1 .brand-mark{width:44px;height:44px}}
h1.cp-title{font-size:1.15rem;letter-spacing:-.2px;color:var(--text-main);text-shadow:none;animation:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:1.2rem 0 .8rem}
h1.cp-title .lg-flag{width:28px;height:20px}
h1.cp-title .ic{font-size:1.3rem;line-height:1}
.cp-tabs{display:flex;gap:8px;margin:.2rem 0 .9rem;flex-wrap:wrap}
.cp-tabs button{background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border);padding:7px 14px;border-radius:999px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit}
.cp-tabs button.on{background:var(--accent);border-color:var(--accent);color:#04210f}
.cp-sub{font-size:.8rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin:1rem 0 .5rem;display:flex;align-items:center;gap:8px}
.cp-sub .count{margin-left:auto;background:var(--bg-card);padding:2px 8px;border-radius:10px;font-size:.7rem}
.cp-sub .live-dot{width:8px;height:8px;border-radius:50%;background:var(--live-red);animation:pulse-animation 1.5s infinite}
.m-row{margin-bottom:6px}
.cp-intro{margin:2rem auto 1rem;padding:1rem 16px;color:var(--text-muted);font-size:.85rem;line-height:1.7;border-top:1px solid var(--border)}
.cp-intro h2{font-size:1rem;font-weight:700;color:var(--text-main);margin-bottom:.5rem}
.cp-intro p{margin-bottom:.6rem}
.cp-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.6rem}
.cp-links a{color:var(--accent);text-decoration:none;font-weight:600}