/* =========================================================
   XenoLive 2.0 — Multi-page IPTV app · CSS
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06070d;
  --bg-2:#0c0e18;
  --panel:linear-gradient(180deg,#0c1018,#080b12);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --text:#eef1f8;
  --muted:#8b93a7;
  --muted-2:#6b7388;
  --brand:#00e5a8;
  --brand-2:#00b386;
  --red:#ff2d55;
  --orange:#ff6a3d;
  --gold:#ffc83d;
  --blue:#00b3ff;
  --violet:#7a5cff;
  --grad-brand:linear-gradient(135deg,#00e5a8,#00b386);
  --grad-red:linear-gradient(135deg,#ff2d55,#ff6a3d);
  --radius:14px;
  --top-h:60px;
  --bot-h:64px;
}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(0,229,168,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(122,92,255,.08), transparent 60%),
    var(--bg);
  overflow-x:hidden;
  padding-top:calc(var(--top-h) + env(safe-area-inset-top));
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit;background:none;border:0;outline:none}
::selection{background:var(--brand);color:#04221a}

/* ============ TOP BAR (FIXED) ============ */
.xl-topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:calc(var(--top-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  background:rgba(8,11,18,.88);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.xl-topbar-inner{
  height:100%;max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:auto auto 1fr auto auto;gap:14px;align-items:center;
  padding:0 18px;
}
.xl-icon-btn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);color:#fff;cursor:pointer;transition:.15s;flex-shrink:0;
}
.xl-icon-btn:hover{background:var(--surface-2)}
.xl-burger{display:none}
.xl-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:.5px;flex-shrink:0}
.xl-logo .bolt{
  width:30px;height:30px;border-radius:9px;background:var(--grad-brand);
  position:relative;box-shadow:0 6px 20px -6px rgba(0,229,168,.6);flex-shrink:0;
}
.xl-logo .bolt::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);
  border-radius:9px;
}
.xl-logo .t{color:#fff}
.xl-logo .t b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Main desktop nav */
.xl-mainnav{display:flex;gap:4px;justify-self:start;margin-left:8px;min-width:0;overflow:hidden}
.xl-nav{
  padding:8px 14px;border-radius:10px;font-size:13px;font-weight:700;
  color:#cfd5e3;transition:.15s;white-space:nowrap;
}
.xl-nav:hover{background:var(--surface);color:#fff}
.xl-nav.on{background:linear-gradient(135deg,rgba(0,229,168,.18),rgba(0,229,168,.05));color:#9ff5d4;border:1px solid rgba(0,229,168,.35)}

.xl-topsearch{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:11px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--muted);max-width:340px;width:100%;justify-self:end;
}
.xl-topsearch input{flex:1;background:none;border:0;color:#fff;font-size:13.5px;min-width:0}
.xl-topsearch input::placeholder{color:#6b7388}

.xl-status{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}
.xl-status .d{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(0,229,168,.18);animation:xlPulse 1.6s infinite}
@keyframes xlPulse{50%{box-shadow:0 0 0 9px rgba(0,229,168,0)}}

.xl-mobnav-back{display:none}

/* ============ MAIN ============ */
.xl-main{
  max-width:1500px;margin:0 auto;
  padding:22px 22px calc(var(--bot-h) + 80px);
}
.xl-sec{margin-bottom:34px}
.xl-sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.xl-sec-head h2{font-size:18px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;min-width:0}
.xl-sec-head h2 .lvd{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,45,85,.18);animation:xlPulse 1.5s infinite}
.xl-sec-head .meta{font-size:11.5px;color:var(--muted);font-weight:600}
.xl-sec-head .more{font-size:12.5px;font-weight:700;color:var(--brand);padding:4px 10px;border-radius:8px;background:rgba(0,229,168,.08)}
.xl-sec-head .more:hover{background:rgba(0,229,168,.16)}

/* ============ HERO (home) ============ */
.xl-hero{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--border);margin-bottom:30px;
  background:linear-gradient(180deg,#0c1320,#070a11);
}
.xl-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 380px at 10% 20%, rgba(0,229,168,.22), transparent 60%),
    radial-gradient(600px 320px at 90% 80%, rgba(255,45,85,.18), transparent 60%);
}
.xl-hero-inner{position:relative;padding:46px 36px}
.xl-hero-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--brand);background:rgba(0,229,168,.1);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.xl-hero-tag .d{width:6px;height:6px;border-radius:50%;background:var(--red);animation:xlPulse 1.4s infinite}
.xl-hero h1{font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-1px;color:#fff;margin-bottom:14px}
.xl-hero h1 span{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.xl-hero p{font-size:14.5px;color:#b8bdcc;max-width:600px;line-height:1.55;margin-bottom:22px}
.xl-hero p b{color:#fff}
.xl-hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.xl-hero-cta .b{padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:800;transition:.15s}
.xl-hero-cta .b.primary{background:var(--grad-brand);color:#04221a;box-shadow:0 10px 24px -10px rgba(0,229,168,.55)}
.xl-hero-cta .b.primary:hover{transform:translateY(-2px)}
.xl-hero-cta .b.ghost{background:var(--surface);border:1px solid var(--border);color:#fff}
.xl-hero-cta .b.ghost:hover{background:var(--surface-2)}

/* ============ PAGE HERO (category pages) ============ */
.xl-page-hero{margin-bottom:22px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,#0d1320,#080b12)}
.xl-page-hero-inner{display:flex;align-items:center;gap:18px;padding:24px 26px}
.xl-page-hero .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:rgba(0,229,168,.12);color:var(--brand);flex-shrink:0}
.xl-page-hero h1{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px}
.xl-page-hero p{font-size:13px;color:var(--muted);margin-top:3px}
.xl-page-hero p b{color:#fff}

/* ============ SEARCH BAR ============ */
.xl-search-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:13px;color:var(--muted);margin-bottom:14px;
}
.xl-search-bar:focus-within{border-color:rgba(0,229,168,.4);background:rgba(0,229,168,.06)}
.xl-search-bar input{flex:1;background:none;color:#fff;font-size:13.5px;min-width:0}
.xl-search-bar .x{padding:0 6px;color:var(--muted)}
.xl-search-bar .go{padding:7px 14px;border-radius:9px;background:var(--grad-brand);color:#04221a;font-weight:800;font-size:12.5px;cursor:pointer;flex-shrink:0}

.xl-ctabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.xl-ctabs::-webkit-scrollbar{display:none}
.xl-ctab{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  color:#cfd5e3;font-size:12px;font-weight:700;letter-spacing:.4px;
}
.xl-ctab img{width:16px;height:11px;object-fit:cover;border-radius:2px}
.xl-ctab.on{background:var(--grad-brand);color:#04221a;border-color:transparent}

/* ============ CHANNEL GRID ============ */
.xl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.xl-card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:12px;
  transition:.18s;position:relative;overflow:hidden;
}
.xl-card:hover{transform:translateY(-3px);border-color:rgba(0,229,168,.35);box-shadow:0 14px 30px -14px rgba(0,229,168,.25)}
.xl-card .lg{position:relative;aspect-ratio:16/10;border-radius:10px;background:#10141d;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border)}
.xl-card .lg img{max-width:70%;max-height:70%;object-fit:contain}
.xl-card .lg .ph{font-size:22px;font-weight:900;color:#3d4358;letter-spacing:1px}
.xl-card .lg .live{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:5px;letter-spacing:.5px}
.xl-card .lg .live .d{width:5px;height:5px;border-radius:50%;background:#fff;animation:xlPulse 1.3s infinite}
.xl-card .lg .offline{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:#3a3f4f;color:#cfd5e3;font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:5px;letter-spacing:.5px}
.xl-card .lg .live[hidden],.xl-card .lg .offline[hidden]{display:none}
.xl-card.is-offline{opacity:.55;pointer-events:none;cursor:not-allowed}
.xl-card.is-offline .lg{filter:grayscale(.7)}
.xl-card.is-checking .lg .live{opacity:.55}
.xl-card .bd{min-width:0}
.xl-card .nm{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.xl-card .sb{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:600}
.xl-card .sb .fl{width:14px;height:10px;object-fit:cover;border-radius:2px;flex-shrink:0}
.xl-card .sb .sep{opacity:.4}

.xl-empty{padding:60px 30px;text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:18px}
.xl-empty .i{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--surface);font-size:24px;color:var(--muted-2);margin-bottom:14px}
.xl-empty h4{color:#fff;font-size:16px;font-weight:800;margin-bottom:6px}
.xl-empty p{font-size:13px;margin-bottom:14px}
.xl-btn.brand{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--grad-brand);color:#04221a;font-weight:800;font-size:13px}
.xl-more{padding:20px;color:var(--muted);font-size:12px;text-align:center;font-style:italic}

/* ============ SCORES RAIL ============ */
.xl-score-wrap{position:relative}
.xl-score-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 12px;scrollbar-width:none}
.xl-score-rail::-webkit-scrollbar{display:none}
.xl-score-rail > .xl-score-card{flex:0 0 300px;scroll-snap-align:start}
.xl-score-rail{cursor:grab;user-select:none}
.xl-score-rail.is-drag{cursor:grabbing;scroll-behavior:auto}
.xl-score-nav{display:none}


.xl-score-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;transition:.2s}
.xl-score-card:hover{transform:translateY(-2px);border-color:rgba(0,229,168,.3)}
.xl-score-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.xl-score-card .top .lg{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xl-score-card .top .lg img{width:18px;height:18px;object-fit:contain;border-radius:3px;flex-shrink:0}
.xl-score-card .top .st{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);flex-shrink:0}
.xl-score-card .top .st.live{background:var(--red);color:#fff;animation:xlPulse 1.4s infinite}
.xl-score-card .teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.xl-score-card .team{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.xl-score-card .team .nm{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.xl-score-card .vs{font-size:11px;font-weight:800;color:var(--muted)}
.xl-score-card .score{font-size:22px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.xl-score-card .score.live{color:var(--brand)}
.xl-score-card .bot{margin-top:10px;font-size:11px;color:var(--muted);text-align:center;border-top:1px dashed var(--border);padding-top:8px}
.xl-score-skel{height:128px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:xlSkel 1.4s linear infinite}
@keyframes xlSkel{to{background-position:-200% 0}}

/* ============ EXPLORE GRID ============ */
.xl-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.xl-tile{
  position:relative;padding:18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in oklab,var(--g1) 18%,transparent),color-mix(in oklab,var(--g2) 8%,transparent)),var(--panel);
  border:1px solid var(--border);
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;transition:.2s;
}
.xl-tile:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--g1) 60%,transparent)}
.xl-tile .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;
  box-shadow:0 8px 20px -8px var(--g1);
}
.xl-tile h4{font-size:14.5px;font-weight:800;color:#fff;margin-bottom:2px}
.xl-tile p{font-size:11.5px;color:var(--muted)}
.xl-tile .arr{color:#fff;font-size:18px;opacity:.6;transition:.2s}
.xl-tile:hover .arr{opacity:1;transform:translateX(4px)}

/* ============ WATCH PAGE ============ */
.xl-watch{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.xl-pl-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.xl-pl-frame video{width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer;display:block;transform:none!important;-webkit-transform:none!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.xl-pl-top{position:absolute;left:0;right:0;top:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(180deg,rgba(0,0,0,.78),transparent);pointer-events:none;z-index:2}
.xl-pl-top .badges{display:flex;gap:8px;flex-wrap:wrap}
.b-live{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:6px;letter-spacing:.6px}
.b-live .d{width:6px;height:6px;border-radius:50%;background:#fff;animation:xlPulse 1.4s infinite}
.b-cat{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.xl-pl-top .watch{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:6px}
.xl-pl-top .watch b{color:var(--brand)}
/* legacy center button styles overridden in PLAYER 2.0 section below */

/* legacy loader styles removed — see PLAYER 2.0 LOADER below */

@keyframes xlSpin{to{transform:rotate(360deg)}}
.xl-pl-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 14px 12px;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent);z-index:2;opacity:0;transition:.2s}
.xl-pl-frame:hover .xl-pl-bottom,.xl-pl-frame:focus-within .xl-pl-bottom{opacity:1}
.xl-pl-bottom .bar{height:3px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;margin-bottom:8px}
.xl-pl-bottom .bar .fill{height:100%;width:42%;background:var(--grad-red)}
.xl-pl-bottom .ctrls{display:flex;justify-content:space-between;align-items:center;gap:8px}
.xl-pl-bottom .lf,.xl-pl-bottom .rt{display:flex;align-items:center;gap:4px}
.xl-pl-bottom .ic{background:rgba(255,255,255,.06);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:#fff}
.xl-pl-bottom .ic:hover{background:rgba(255,255,255,.18)}
.xl-pl-bottom .qbtn{width:auto;padding:0 10px;gap:6px;display:inline-flex;font-size:11px;font-weight:800}
.xl-pl-bottom .lt{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:11px;font-weight:800;color:#fff}
.xl-pl-bottom .lt .d{width:6px;height:6px;border-radius:50%;background:var(--red);animation:xlPulse 1.3s infinite}
.xl-pl-bottom .qa{position:relative}
.xl-pl-bottom .qmenu{position:absolute;right:0;bottom:calc(100% + 6px);background:#121622;border:1px solid var(--border);border-radius:10px;padding:4px;min-width:96px;display:none;flex-direction:column}
.xl-pl-bottom .qmenu.open{display:flex}
.xl-pl-bottom .qmenu button{background:none;color:#cfd5e3;text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px}
.xl-pl-bottom .qmenu button:hover{background:rgba(255,255,255,.06);color:#fff}
.xl-pl-bottom .qmenu button.active{background:rgba(0,229,168,.12);color:#9ff5d4}

.xl-pl-meta{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.xl-pl-meta .lg2{width:60px;height:60px;border-radius:12px;background:#161b27;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border)}
.xl-pl-meta .lg2 img{max-width:78%;max-height:78%;object-fit:contain}
.xl-pl-meta .info{min-width:0}
.xl-pl-meta h1{font-size:20px;font-weight:800;color:#fff;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-pl-meta .sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;font-weight:500}
.xl-pl-meta .sub .lv{display:inline-flex;align-items:center;gap:5px;color:#9ff5d4;font-weight:700}
.xl-pl-meta .sub .lv .d{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:xlPulse 1.5s infinite}
.xl-pl-meta .sub .sep{opacity:.4}
.xl-pl-meta .sub img{width:16px;height:11px;object-fit:cover;border-radius:2px}
.xl-pl-meta .acts{display:flex;gap:8px}
.xl-pl-meta .acts .b{padding:8px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:#fff;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.xl-pl-meta .acts .b:hover{background:var(--surface-2)}
.xl-pl-meta .acts .b .i{color:var(--gold)}

/* ============ BOTTOM NAV (FIXED, ALL VIEWS) ============ */
.xl-bnav{
  position:fixed;left:0;right:0;bottom:0;height:var(--bot-h);z-index:80;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:rgba(8,11,18,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom);
}
.xl-bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:600;padding:8px 0;height:100%}
.xl-bnav a.on{color:var(--brand)}
.xl-bnav .xl-bnav-fab{
  width:54px;height:54px;border-radius:50%;background:var(--grad-brand);color:#04221a;
  display:grid;place-items:center;margin:-20px auto 0;
  box-shadow:0 12px 30px -8px rgba(0,229,168,.55);
}
.xl-bnav .xl-bnav-fab span{display:none}

/* ============ FOOTER ============ */
.xl-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(8,11,18,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.xl-foot-inner{max-width:1500px;margin:0 auto;padding:10px 22px;color:var(--muted);font-size:11.5px;text-align:center}
.xl-foot-inner b{color:#fff;font-weight:800}
/* When bottom nav is visible (mobile), hide credit footer to avoid stacking */
@media (max-width:980px){
  .xl-foot{display:none}
}
/* On desktop, hide mobile bottom nav, show footer */
@media (min-width:981px){
  .xl-bnav{display:none}
  body{padding-bottom:0}
}
body{padding-bottom:calc(var(--bot-h) + 20px)}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .xl-mainnav .xl-nav{padding:7px 10px;font-size:12.5px}
  .xl-topsearch{max-width:240px}
}

@media (max-width:980px){
  :root{--top-h:56px}
  .xl-topbar-inner{grid-template-columns:auto 1fr auto;padding:0 12px;gap:8px}
  .xl-burger{display:grid}
  .xl-status{display:none}
  .xl-topsearch{display:none}

  /* Slide-down mobile nav */
  .xl-mainnav{
    position:fixed;left:0;right:0;top:calc(var(--top-h) + env(safe-area-inset-top));
    background:rgba(8,11,18,.97);backdrop-filter:blur(14px);
    flex-direction:column;gap:2px;padding:12px;
    border-bottom:1px solid var(--border);
    transform:translateY(-110%);transition:transform .25s;
    z-index:79;overflow-y:auto;max-height:calc(100vh - var(--top-h) - env(safe-area-inset-top));
    align-items:stretch;justify-self:auto;margin:0;
  }
  .xl-mainnav.open{transform:translateY(0)}
  .xl-mainnav .xl-nav{padding:12px 14px;font-size:14px;border-radius:10px}
  .xl-mobnav-back{display:block;position:fixed;inset:calc(var(--top-h) + env(safe-area-inset-top)) 0 0 0;background:rgba(0,0,0,.55);z-index:78;opacity:0;pointer-events:none;transition:.2s}
  .xl-mobnav-back.on{opacity:1;pointer-events:auto}

  .xl-logo{font-size:15px;justify-self:start}
  .xl-logo .bolt{width:26px;height:26px}

  .xl-main{padding:16px 14px calc(var(--bot-h) + 30px)}
  .xl-sec{margin-bottom:26px}

  .xl-hero-inner{padding:32px 22px}
  .xl-hero h1{font-size:26px}
  .xl-hero p{font-size:13.5px}

  .xl-page-hero-inner{padding:18px}
  .xl-page-hero .ic{width:48px;height:48px;font-size:22px;border-radius:12px}
  .xl-page-hero h1{font-size:19px}
  .xl-page-hero p{font-size:12px}

  .xl-sec-head h2{font-size:15.5px}

  .xl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .xl-card{padding:10px;gap:9px}
  .xl-card .nm{font-size:12.5px}
  .xl-card .sb{font-size:10.5px}

  .xl-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .xl-tile{padding:14px;gap:10px}
  .xl-tile h4{font-size:13px}
  .xl-tile p{font-size:11px}
  .xl-tile .ic{width:38px;height:38px;font-size:18px}

  .xl-score-rail > .xl-score-card{flex:0 0 86%}

  .xl-pl-meta{grid-template-columns:48px 1fr;gap:10px;padding:12px}
  .xl-pl-meta .lg2{width:48px;height:48px}
  .xl-pl-meta h1{font-size:16px}
  .xl-pl-meta .acts{grid-column:1 / -1;margin-top:6px;flex-wrap:wrap}
  .xl-pl-center{width:48px;height:48px}
  .xl-pl-bottom{opacity:1}

  .xl-search-bar{padding:8px 12px}
  .xl-search-bar .go{padding:7px 12px;font-size:11.5px}
}

@media (max-width:420px){
  .xl-hero h1{font-size:22px}
  .xl-hero-cta .b{padding:10px 14px;font-size:12.5px}
  .xl-cat-grid{grid-template-columns:1fr}
  .xl-tile{grid-template-columns:auto 1fr auto}
}

/* =========================================================
   PLAYER 2.0 — FloHockey-style overlay
   ========================================================= */
.xl-pl-frame{cursor:pointer}
.xl-pl-frame.show-ui .xl-pl-topbar,
.xl-pl-frame.show-ui .xl-pl-ctrls{opacity:1;transform:none;pointer-events:auto}
.xl-pl-frame.paused .xl-pl-topbar,
.xl-pl-frame.paused .xl-pl-ctrls{opacity:1;transform:none;pointer-events:auto}

/* hide legacy elements when present */
.xl-pl-top,.xl-pl-bottom{display:none !important}

/* TOP BAR — standalone card above the player */
.xl-pl-topbar{
  position:relative;left:auto;right:auto;top:auto;z-index:auto;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;
  background:#0c1220;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow:0 14px 40px -20px rgba(0,0,0,.7);
  opacity:1;transform:none;pointer-events:auto;
}
.xl-pl-topbar .ch{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.xl-pl-topbar .ch .lg{
  width:40px;height:40px;border-radius:10px;background:#161d2c;
  display:grid;place-items:center;overflow:hidden;flex-shrink:0;
  border:1px solid rgba(255,255,255,.06);
}
.xl-pl-topbar .ch .lg img{max-width:80%;max-height:80%;object-fit:contain}
.xl-pl-topbar .ch .lg .ph{font-size:13px;font-weight:800;color:#7c8499}
.xl-pl-topbar .ch .meta{min-width:0}
.xl-pl-topbar .ch .meta h2{font-size:15px;font-weight:800;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-pl-topbar .ch .meta p{font-size:10.5px;color:#8b93a7;font-weight:700;letter-spacing:.8px;margin-top:4px;text-transform:uppercase}
.xl-pl-topbar .acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.xl-pl-topbar .ic{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#161d2c;color:#cfd5e3;cursor:pointer;transition:.15s;
  border:1px solid rgba(255,255,255,.05);
}
.xl-pl-topbar .ic:hover{background:#1d2638;color:#fff}
.xl-pl-topbar .ic.diag{background:rgba(0,229,168,.12);color:#00e5a8;border-color:rgba(0,229,168,.25)}
.xl-pl-topbar .ic.diag:hover{background:rgba(0,229,168,.2)}
.xl-pl-topbar .ic.diag.on{background:rgba(0,229,168,.22);color:#00e5a8}
.xl-pl-topbar .ic.close{background:rgba(255,45,85,.18);color:#ff6680;border-color:rgba(255,45,85,.35)}
.xl-pl-topbar .ic.close:hover{background:#ff2d55;color:#fff}


/* DIAGNOSTICS panel */
.xl-pl-diag-panel{
  position:absolute;top:64px;right:14px;z-index:6;width:280px;max-width:calc(100% - 28px);
  background:rgba(8,11,18,.95);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:12px 14px;color:#cfd5e3;font-size:12px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7);
}
.xl-pl-diag-panel[hidden]{display:none}
.xl-pl-diag-panel .hd{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.4px;font-weight:800;color:var(--brand);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.xl-pl-diag-panel ul{list-style:none}
.xl-pl-diag-panel li{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-weight:600}
.xl-pl-diag-panel li b{color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}

/* CENTER play (only when paused / first load) */
/* CENTER play (only when paused / first load) — small, theme-matched */
.xl-pl-center{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(8,12,20,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(0,229,168,.45);
  color:#00e5a8;display:grid;place-items:center;cursor:pointer;z-index:4;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.55);
  transition:transform .15s ease, background .15s, color .15s;
}
.xl-pl-center svg{width:22px;height:22px}
.xl-pl-center:hover{transform:scale(1.08);background:rgba(0,229,168,.18);color:#fff}

.xl-pl-center:hover{transform:scale(1.08)}

/* LOADER — center stack: icon + LOADING STREAM + Connecting to {channel} */
.xl-pl-loader{position:absolute;inset:0;display:grid;place-items:center;z-index:3;background:rgba(0,0,0,.55);pointer-events:none}
.xl-pl-loader[hidden]{display:none !important}
body[data-page="watch"] .xl-pl-loader{display:none !important;visibility:hidden !important;opacity:0 !important}
.xl-pl-loader .ldr{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.xl-pl-loader .spin{color:#00e5a8;animation:xlSpin 1.1s linear infinite;filter:drop-shadow(0 0 12px rgba(0,229,168,.45))}
.xl-pl-loader .t1{font-size:13px;font-weight:800;letter-spacing:2.4px;color:#fff}
.xl-pl-loader .t2{font-size:11.5px;font-weight:600;color:#8b93a7;letter-spacing:.4px}
.xl-pl-loader .t3{margin-top:6px;font-size:11px;font-weight:700;color:#00e5a8;letter-spacing:1.2px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.xl-pl-loader .t3 b{color:#fff;font-weight:800}
.xl-pl-loader.is-failed .spin{color:#ff5577;animation:none}
.xl-pl-loader.is-failed .t1{color:#ff5577}
.xl-pl-loader.is-failed .t3{color:#ff5577}


/* QUALITY popup */
.xl-pl-qmenu{
  position:absolute;right:14px;bottom:72px;z-index:6;
  width:170px;max-width:calc(100% - 28px);
  background:rgba(8,11,18,.96);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:6px;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);
}
.xl-pl-qmenu[hidden]{display:none}
.xl-pl-qmenu .hd{font-size:10.5px;letter-spacing:1.4px;font-weight:800;color:#9aa3b8;text-align:center;padding:8px 0 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px}
.xl-pl-qmenu .opts{display:flex;flex-direction:column}
.xl-pl-qmenu button{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-radius:7px;color:#cfd5e3;font-size:13px;font-weight:600;cursor:pointer;
}
.xl-pl-qmenu button:hover{background:rgba(255,255,255,.05);color:#fff}
.xl-pl-qmenu button.active{color:var(--brand)}
.xl-pl-qmenu button i{width:8px;height:8px;border-radius:50%;background:transparent;display:block}
.xl-pl-qmenu button.active i{background:var(--brand);box-shadow:0 0 0 3px rgba(0,229,168,.18)}

/* BOTTOM control bar */
.xl-pl-ctrls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none;
}
.xl-pl-ctrls .ic{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:transparent;color:#fff;cursor:pointer;transition:.15s;flex-shrink:0;
}
.xl-pl-ctrls .ic:hover{background:rgba(255,255,255,.12)}
.xl-pl-ctrls .sp{flex:1}
.xl-pl-ctrls .vol{
  -webkit-appearance:none;appearance:none;
  width:90px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);cursor:pointer;
  flex-shrink:0;
}
.xl-pl-ctrls .vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(0,229,168,.15);cursor:pointer}
.xl-pl-ctrls .vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--brand);cursor:pointer}
.xl-pl-ctrls .livepill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:6px;background:var(--brand);color:#04221a;
  font-size:11px;font-weight:800;letter-spacing:.6px;flex-shrink:0;cursor:default;
}
.xl-pl-ctrls .livepill .d{width:6px;height:6px;border-radius:50%;background:#04221a}
.xl-pl-ctrls .livepill.off{background:rgba(255,255,255,.12);color:#cfd5e3}
.xl-pl-ctrls .livepill.off .d{background:#9aa3b8}
.xl-pl-ctrls .qpill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.08);color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;transition:.15s;flex-shrink:0;
}
.xl-pl-ctrls .qpill:hover{background:rgba(255,255,255,.16)}

@media (max-width:600px){
  .xl-pl-topbar{padding:10px 12px}
  .xl-pl-topbar .ch .lg{width:36px;height:36px}
  .xl-pl-topbar .ch .meta h2{font-size:13.5px}
  .xl-pl-topbar .ic,.xl-pl-ctrls .ic{width:32px;height:32px}
  .xl-pl-ctrls{padding:10px 10px;gap:5px}
  .xl-pl-ctrls .vol{width:60px}
  .xl-pl-ctrls .livepill{padding:4px 8px;font-size:10px}
  .xl-pl-ctrls .qpill{padding:5px 8px;font-size:11px}
  .xl-pl-qmenu{right:8px;bottom:64px;width:150px}
  .xl-pl-diag-panel{top:58px;right:8px;width:240px;font-size:11.5px}
}

/* =========================================================
   COUNTRY / CATEGORY PICKER
   ========================================================= */
.xl-pick{padding:8px 0}
.xl-pick-h{font-size:15px;font-weight:800;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.xl-pick-lead{font-size:13px;color:var(--muted);margin-bottom:16px}
.xl-pick-sep{border:0;border-top:1px solid var(--border);margin:24px 0 18px}
.xl-pick-clear{margin-top:12px;font-size:12.5px}
.xl-pick-clear a{color:var(--brand);font-weight:700}

.xl-country-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}
.xl-cflag{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);
  transition:.15s;min-width:0;
}
.xl-cflag:hover{background:var(--surface-2);border-color:rgba(0,229,168,.35);transform:translateY(-2px)}
.xl-cflag img{width:24px;height:18px;object-fit:cover;border-radius:3px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.xl-cflag .nm{flex:1;color:#fff;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xl-cflag .ct{font-size:11px;color:var(--muted);background:var(--surface);padding:2px 8px;border-radius:999px;font-weight:700;flex-shrink:0}
.xl-cflag:hover .ct{background:rgba(0,229,168,.18);color:#9ff5d4}

/* Active filter chips — premium category pills */
.xl-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.xl-active-filters .chip{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  color:#cfd5e3;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.xl-active-filters .chip:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.18);color:#fff;
}
.xl-active-filters .chip img{width:16px;height:11px;object-fit:cover;border-radius:2px}
.xl-active-filters .chip .cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;padding:0 6px;border-radius:999px;
  background:rgba(255,255,255,.08);color:#aab2c2;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  margin-left:2px;
}
/* Active state (PHP marks the selected one with .reset — keep semantics, restyle as active) */
.xl-active-filters .chip.reset{
  background:linear-gradient(135deg,#10b981,#059669);
  border-color:transparent;color:#04221a;
  box-shadow:0 8px 24px -10px rgba(16,185,129,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.xl-active-filters .chip.reset:hover{background:linear-gradient(135deg,#13c995,#0a8a64);color:#04221a}
.xl-active-filters .chip.reset .cnt{background:rgba(4,34,26,.22);color:#04221a}


/* ---- Country search input on browse pickers ---- */
.xl-csearch{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;margin:8px 0 14px;
}
.xl-csearch svg{color:#8b93a7;flex:0 0 auto}
.xl-csearch input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:var(--text);font-size:14px;
}
.xl-csearch .x{
  background:#1d2433;border:1px solid var(--border);color:var(--text);
  border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:12px;
}
.xl-pick-empty{
  text-align:center;color:#8b93a7;padding:24px;font-size:14px;
}

/* ============ WATCH HUB ============ */
.xl-watch-hero{
  position:relative;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(900px 380px at 15% -20%,rgba(0,229,168,.28),transparent 60%),
    radial-gradient(700px 340px at 95% 110%,rgba(122,92,255,.30),transparent 60%),
    linear-gradient(135deg,#0d1322,#0a0f1c);
  border:1px solid var(--border);padding:0;margin-bottom:22px;
}
.xl-wh-inner{padding:46px 32px 42px;max-width:780px}
.xl-wh-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;
  color:#00e5a8;background:rgba(0,229,168,.10);border:1px solid rgba(0,229,168,.30);
  padding:6px 12px;border-radius:999px;text-transform:uppercase;
}
.xl-wh-eyebrow .d{width:7px;height:7px;border-radius:50%;background:#00e5a8;box-shadow:0 0 12px #00e5a8;animation:xlpulse 1.6s infinite}
.xl-watch-hero h1{font-size:clamp(26px,4.2vw,42px);font-weight:900;line-height:1.1;margin:14px 0 10px;letter-spacing:-.02em}
.xl-watch-hero p{color:#c0c7d6;font-size:15px;margin:0 0 22px;max-width:560px}
.xl-wh-cta{display:flex;gap:10px;flex-wrap:wrap}

.xl-watch-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
}
.xl-wt{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 16px 16px;border-radius:16px;text-decoration:none;color:#fff;
  background:var(--g,linear-gradient(135deg,#1c2236,#0f1525));
  border:1px solid rgba(255,255,255,.08);
  min-height:118px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.xl-wt::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.45));pointer-events:none;
}
.xl-wt:hover{transform:translateY(-3px);box-shadow:0 18px 38px -18px rgba(0,0,0,.6)}
.xl-wt .ico{font-size:26px;line-height:1;position:relative;z-index:1}
.xl-wt .lbl{font-weight:800;font-size:16px;letter-spacing:-.01em;position:relative;z-index:1;margin-top:auto}
.xl-wt .ds{font-size:11.5px;opacity:.85;position:relative;z-index:1}
@media (max-width:560px){
  .xl-watch-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .xl-wt{min-height:104px;padding:14px 12px 12px}
  .xl-wt .ico{font-size:22px}
  .xl-wt .lbl{font-size:14px}
  .xl-wh-inner{padding:34px 22px 30px}
}

/* ===== Sports promo banner ===== */
.xl-promo{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,#0f1421 0%,#161b2e 100%);padding:18px 20px;display:flex;align-items:center;gap:16px;min-height:96px}
.xl-promo-bg{position:absolute;inset:0;background:radial-gradient(600px 200px at 10% 50%,rgba(255,45,85,.18),transparent 60%),radial-gradient(600px 200px at 95% 50%,rgba(0,229,168,.18),transparent 60%);pointer-events:none}
.xl-promo-content{position:relative;flex:1;min-width:0}
.xl-promo-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#ff8aa1;background:rgba(255,45,85,.12);padding:4px 10px;border-radius:999px;margin-bottom:8px}
.xl-promo-tag .d{width:7px;height:7px;border-radius:50%;background:#ff2d55;animation:xlPulse 1.4s infinite}
.xl-promo-content h2{font-size:18px;font-weight:800;color:#fff;margin:0 0 4px;line-height:1.25}
.xl-promo-content p{font-size:13px;color:#8b93a7;margin:0}
.xl-promo-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff2d55,#ff6a3d);color:#fff;font-weight:800;font-size:14px;padding:12px 18px;border-radius:12px;text-decoration:none;white-space:nowrap;box-shadow:0 8px 24px -8px rgba(255,45,85,.6);transition:.2s;flex-shrink:0}
.xl-promo-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(255,45,85,.7)}
.xl-promo-cta .ic{font-size:12px}
@media(max-width:640px){
  .xl-promo{flex-direction:column;align-items:flex-start;padding:16px}
  .xl-promo-content h2{font-size:16px}
  .xl-promo-cta{width:100%;justify-content:center}
}

/* ===== Sport tabs ===== */
.xl-sp-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.xl-sp-tabs::-webkit-scrollbar{display:none}
.xl-sp-tab{flex-shrink:0;cursor:pointer;background:var(--panel);border:1px solid var(--border);color:#cfd5e3;font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:.18s;font-family:inherit}
.xl-sp-tab:hover{border-color:rgba(0,229,168,.4);color:#fff}
.xl-sp-tab.on{background:linear-gradient(135deg,#00e5a8,#00b3ff);border-color:transparent;color:#06070d}
.xl-sp-tabs-sm .xl-sp-tab{font-size:12px;padding:7px 13px}

/* ===== Match list (sports page) ===== */
.xl-sp-skel{height:130px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:xlSkel 1.4s linear infinite;margin-bottom:10px}
.xl-mm-h{font-size:14px;font-weight:800;color:#fff;margin:18px 0 10px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.6px}
.xl-mm-h .lvd{width:8px;height:8px;border-radius:50%;background:#ff2d55;animation:xlPulse 1.4s infinite}
.xl-mm-h .ct{margin-left:auto;font-size:11px;color:#8b93a7;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:6px}
.xl-mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.xl-mm{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;transition:.2s}
.xl-mm:hover{border-color:rgba(0,229,168,.3);transform:translateY(-2px)}
.xl-mm.live{border-color:rgba(255,45,85,.35)}
.xl-mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8b93a7;gap:8px}
.xl-mm-top .lg{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xl-mm-top .lg img{width:18px;height:18px;object-fit:contain;flex-shrink:0;border-radius:3px}
.xl-mm-top .st{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);flex-shrink:0}
.xl-mm-top .st.live{background:#ff2d55;color:#fff;animation:xlPulse 1.4s infinite}
.xl-mm-body{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.xl-mm-body .tm{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.xl-mm-body .lg-wrap{width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.04);border-radius:50%;overflow:hidden}
.xl-mm-body .lg-wrap img{width:100%;height:100%;object-fit:contain}
.xl-mm-body .tm .nm{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.xl-mm-body .sc{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.xl-mm-body .sc span{color:#8b93a7;font-weight:700}
.xl-mm-body .sc .vs{font-size:13px;color:#8b93a7;font-weight:800}
.xl-mm.live .sc b{color:#00e5a8}
.xl-mm-foot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);font-size:11px;color:#8b93a7;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.xl-mm-empty{padding:36px 20px;text-align:center;color:#8b93a7;background:var(--panel);border:1px solid var(--border);border-radius:14px}
@media(max-width:640px){
  .xl-mm-grid{grid-template-columns:1fr}
  .xl-mm-body .lg-wrap{width:32px;height:32px}
  .xl-mm-body .sc{font-size:18px}
}

/* ===== Watch hub: action banner ===== */
.xl-action-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(255,45,85,.12),rgba(0,229,168,.08));border:1px solid rgba(255,45,85,.25);border-radius:14px;padding:14px 18px}
.xl-action-banner .ico{font-size:22px;flex-shrink:0}
.xl-action-banner .bd{flex:1;min-width:0}
.xl-action-banner .ttl{font-size:14px;font-weight:800;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-action-banner .sb{font-size:12px;color:#cfd5e3;margin-top:3px;line-height:1.4}
.xl-action-banner .pulse{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:#ff2d55;padding:5px 10px;border-radius:999px;flex-shrink:0}
.xl-action-banner .pulse .d{width:7px;height:7px;border-radius:50%;background:#fff;animation:xlPulse 1.4s infinite}

/* ===== Cricket event card ===== */
.xl-ev{margin-bottom:24px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px}
.xl-ev-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.xl-ev-head h3{font-size:15px;font-weight:800;color:#fff;margin:0;flex:1;min-width:0}
.xl-ev-head .st{font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);color:#cfd5e3;flex-shrink:0}
.xl-ev-head .st.live{background:#ff2d55;color:#fff;animation:xlPulse 1.4s infinite}
.xl-ev-head .ct{font-size:11px;color:#8b93a7;margin-left:auto}

/* DRM tag on card */
.xl-card .lg .drm{position:absolute;top:8px;left:8px;background:rgba(139,92,246,.85);color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:4px}

/* Card skeleton */
.xl-card-skel{height:160px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:xlSkel 1.4s linear infinite}

/* Tab count em */
.xl-sp-tab em{font-style:normal;font-size:11px;opacity:.7;font-weight:600;margin-left:2px}

/* ===== Player page ===== */
.xl-player-wrap{max-width:1100px;margin:0 auto}
.xl-player-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.xl-player-back{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--border);color:#fff;text-decoration:none;font-size:18px;font-weight:800;flex-shrink:0}
.xl-player-back:hover{border-color:rgba(0,229,168,.4)}
.xl-player-logo{width:42px;height:42px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.04);padding:4px;flex-shrink:0}
.xl-player-meta{min-width:0;flex:1}
.xl-player-meta .nm{font-size:16px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-player-meta .sb{font-size:11px;font-weight:700;color:#ff2d55;display:inline-flex;align-items:center;gap:5px;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.xl-player-meta .sb .d{width:7px;height:7px;border-radius:50%;background:#ff2d55;animation:xlPulse 1.4s infinite}
.xl-player-box{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--border)}
.xl-player-box video{width:100%;height:100%;display:block;background:#000}
.xl-player-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(6,7,13,.85);color:#cfd5e3;font-size:13px;font-weight:600}
.xl-player-loader .sp{width:42px;height:42px;border:3px solid rgba(255,255,255,.1);border-top-color:#00e5a8;border-radius:50%;animation:xlSpin 1s linear infinite}
@keyframes xlSpin{to{transform:rotate(360deg)}}
.xl-player-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:#8b93a7;gap:8px;flex-wrap:wrap}

/* ============ WATCH — NEXOTV-STYLE PLAYER + SIDE LIST ============ */
.xl-watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
@media(max-width:1100px){.xl-watch-layout{grid-template-columns:1fr}}

.xl-watch-main{min-width:0}
.xl-watch-main .xl-player-box{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--border);position:relative}
.xl-watch-main .xl-player-box video{width:100%;height:100%;display:block;background:#000}

/* Now-playing bar under player */
.xl-now-bar{margin-top:12px;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.xl-now-bar .lg{width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,.04);display:grid;place-items:center;overflow:hidden;flex-shrink:0;border:1px solid var(--border)}
.xl-now-bar .lg img{width:100%;height:100%;object-fit:contain}
.xl-now-bar .lg .ph{font-weight:800;color:#cfd5e3;font-size:14px}
.xl-now-bar .md{flex:1;min-width:0}
.xl-now-bar .nm{font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-now-bar .sb{font-size:11px;color:#8b93a7;display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.xl-now-bar .sb .pulse{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:#ff2d55;padding:3px 8px;border-radius:999px}
.xl-now-bar .sb .pulse .d{width:6px;height:6px;border-radius:50%;background:#fff;animation:xlPulse 1.4s infinite}
.xl-now-bar .sb .sep{color:#444}
.xl-now-bar .ax{display:flex;gap:6px;flex-shrink:0}
.xl-now-bar .ax .xl-btn{padding:8px 12px;font-size:16px;line-height:1}

/* Sidebar */
.xl-watch-side{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;max-height:calc(100vh - 120px);position:sticky;top:80px}
@media(max-width:1100px){.xl-watch-side{position:static;max-height:none}}
.xl-side-head{flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.xl-side-head h3{font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px}
.xl-side-head h3 em{font-style:normal;font-size:11px;color:#8b93a7;font-weight:600}
.xl-side-head .xl-csearch{margin:0;padding:8px 12px}
.xl-side-head .xl-sp-tabs{margin:0}

.xl-ch-list{flex:1;overflow-y:auto;margin-top:10px;padding-right:4px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.xl-ch-list::-webkit-scrollbar{width:6px}
.xl-ch-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
@media(max-width:1100px){.xl-ch-list{max-height:520px}}

.xl-chli{width:100%;text-align:left;display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.02);border:1px solid transparent;border-radius:10px;cursor:pointer;color:#fff;font-family:inherit;transition:.15s}
.xl-chli:hover{background:rgba(0,229,168,.08);border-color:rgba(0,229,168,.25)}
.xl-chli.on{background:linear-gradient(135deg,rgba(0,229,168,.18),rgba(0,179,255,.12));border-color:rgba(0,229,168,.45)}
.xl-chli .lg{position:relative;width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.04);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.xl-chli .lg img{width:100%;height:100%;object-fit:contain}
.xl-chli .lg .ph{font-weight:800;color:#cfd5e3;font-size:12px}
.xl-chli .lg .drm{position:absolute;top:2px;left:2px;background:rgba(139,92,246,.9);color:#fff;font-size:8px;font-weight:800;padding:1px 4px;border-radius:3px;letter-spacing:.3px}
.xl-chli .bd{flex:1;min-width:0}
.xl-chli .nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.xl-chli .sb{font-size:10.5px;color:#8b93a7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-chli .sb .lv{color:#ff2d55;font-weight:800}
.xl-chli .pl{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(0,229,168,.15);color:#00e5a8;display:grid;place-items:center;font-size:11px;opacity:0;transition:.15s}
.xl-chli:hover .pl,.xl-chli.on .pl{opacity:1}
.xl-chli.on .pl{background:#00e5a8;color:#06070d}

.xl-chli-skel{height:60px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:xlSkel 1.4s linear infinite}

/* User request: hide center play overlay on both player surfaces */
.xl-pl-center{display:none !important}



/* ===== Match Detail page ===== */
body[data-page="match"]{background:#05070d}
.xl-mp-wrap{max-width:720px;margin:0 auto;padding:0 14px 60px;color:#e8ecf3}
.xl-mp{position:relative}
.xl-mp-loading{padding:80px 20px;text-align:center;color:#9aa3b2}
.xl-mp-glow{position:absolute;inset:-40px -40px auto -40px;height:340px;background:radial-gradient(60% 80% at 50% 0%,rgba(225,29,72,.18),rgba(5,7,13,0) 70%);pointer-events:none;z-index:0}
.xl-mp-mxa{position:relative;z-index:1}

/* Top bar */
.xl-mp-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:8px}
.xl-mp-back,.xl-mp-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.xl-mp-back:hover,.xl-mp-iconbtn:hover{background:rgba(255,255,255,.06)}
.xl-mp-league{flex:1;text-align:center;font-weight:600;font-size:16px;color:#e8ecf3}
.xl-mp-actions{display:flex;gap:4px}

/* Hero */
.xl-mp-hero{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:10px 0 6px}
.xl-mp-team{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;position:relative}
.xl-mp-team.left .xl-mp-star{position:absolute;left:0;top:18px}
.xl-mp-team.right .xl-mp-star{position:absolute;right:0;top:18px}
.xl-mp-star{background:transparent;border:none;color:#fff;opacity:.85;cursor:pointer;padding:6px}
.xl-mp-logo{width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.xl-mp-logo img{max-width:100%;max-height:100%;object-fit:contain}
.xl-mp-rank{font-size:14px;color:#7d8597;font-weight:600;margin-top:-4px}
.xl-mp-tname{font-size:16px;font-weight:600;line-height:1.2;max-width:160px}
.xl-mp-center{text-align:center;padding:0 6px}
.xl-mp-minute{color:#ef4444;font-weight:700;font-size:15px;letter-spacing:.02em;margin-bottom:4px}
.xl-mp-score{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:800;font-size:54px;line-height:1;letter-spacing:-.02em;font-family:'Inter',sans-serif}
.xl-mp-score b{font-weight:800}
.xl-mp-score span{color:#fff;font-weight:300;opacity:.7}
.xl-mp-ht{margin-top:6px;color:#9aa3b2;font-size:13px;letter-spacing:.05em}

/* CTA buttons */
.xl-mp-cta{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;margin:18px 0 22px}
.xl-mp-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(20,26,42,.7);color:#fff;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.xl-mp-cta-btn:hover{background:rgba(30,36,52,.9)}
.xl-cta-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1d4ed8;color:#fff;font-size:11px}
.xl-cta-ic.green{background:#16a34a}

/* Tabs */
.xl-mp-tabs{position:relative;z-index:2;display:flex;gap:18px;overflow-x:auto;border-bottom:1px solid #1c2740;padding:0 2px;scrollbar-width:none}
.xl-mp-tabs::-webkit-scrollbar{display:none}
.xl-mp-tab{flex:0 0 auto;background:transparent;border:none;color:#7d8597;font-weight:600;font-size:15px;padding:14px 4px;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:6px}
.xl-mp-tab.on{color:#3b82f6}
.xl-mp-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#3b82f6;border-radius:2px}
.xl-tab-badge{display:inline-block;background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:8px;margin-left:2px}

/* Body */
.xl-mp-body{padding-top:14px}
.xl-empty{padding:40px 20px;text-align:center;color:#7d8597}

/* Team bars */
.xl-team-bars{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;color:#e8ecf3;margin-bottom:10px;padding:0 2px}
.xl-tb{display:inline-flex;align-items:center;gap:8px}
.xl-tb.h i{width:4px;height:18px;background:#3b82f6;border-radius:2px;display:inline-block}
.xl-tb.a i{width:4px;height:18px;background:#22c55e;border-radius:2px;display:inline-block}

/* Attack chart */
.xl-chart-card{background:transparent;border-radius:14px;padding:10px 4px 6px;margin-bottom:10px;border:0}
.xl-chart-svg{width:100%;height:200px;display:block;border-radius:10px}
.xl-chart-axis{display:flex;justify-content:space-between;padding:8px 30px 0;color:#9aa3b2;font-size:13px;font-weight:600}

/* Stats card */
.xl-live-pulse{position:absolute;top:12px;right:14px;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:xlPulse 2s infinite}
@keyframes xlPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.xl-stats-card{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(180deg,#0e1626 0%,#0a1020 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:22px 18px;
  margin-bottom:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Dials */
.xl-dials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;position:relative}
.xl-dials::before,.xl-dials::after{content:"";position:absolute;top:30%;bottom:18%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent)}
.xl-dials::before{left:33.333%}
.xl-dials::after{left:66.666%}
.xl-dials-possession-only{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto}
.xl-dials-possession-only::before,.xl-dials-possession-only::after{display:none}
.xl-dial{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.xl-dial-label{font-size:12px;color:#8b94a8;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.xl-dial-row{display:flex;align-items:center;justify-content:center;gap:10px}
.xl-dial-num{font-size:24px;font-weight:800;min-width:34px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xl-dial-num.h{text-align:right;color:#e8ecf3;background:linear-gradient(180deg,#ffffff,#bcd2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.xl-dial-num.a{text-align:left;color:#e8ecf3;background:linear-gradient(180deg,#ffffff,#bcf1cc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.xl-dial-ring{position:relative;width:74px;height:74px;filter:drop-shadow(0 4px 10px rgba(59,130,246,.18)) drop-shadow(0 4px 10px rgba(34,197,94,.14))}
.xl-dial-ring svg{width:100%;height:100%;display:block}
.xl-dial-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cbd5ff}

/* Shot bars */
.xl-shots{display:flex;flex-direction:column;gap:18px;border-top:1px solid rgba(255,255,255,.06);padding-top:18px;position:relative}
.xl-shot+.xl-shot{padding-top:14px;border-top:1px dashed rgba(255,255,255,.05)}
.xl-shot-label{text-align:center;color:#cdd3df;font-size:12px;font-weight:600;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
.xl-shot-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.xl-shot-side{display:flex;align-items:center;gap:7px}
.xl-shot-side.a{justify-content:flex-end}
.xl-shot-n{font-weight:800;color:#e8ecf3;font-size:16px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.xl-shot-side .ic{display:inline-flex;align-items:center;justify-content:center;width:14px;height:18px;font-size:13px}
.xl-shot-side .ic.card{width:11px;height:15px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.xl-shot-side .ic.card.y{background:linear-gradient(180deg,#fde047,#eab308)}
.xl-shot-side .ic.card.r{background:linear-gradient(180deg,#f87171,#dc2626)}
.xl-shot-side .ic.flag{font-size:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.xl-shot-side .ic.n{font-size:12px;color:#8b94a8;width:auto;font-weight:700;font-variant-numeric:tabular-nums}
.xl-shot-bar{position:relative;display:flex;height:6px;background:rgba(255,255,255,.04);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.xl-shot-bar .h{background:linear-gradient(90deg,#1e40af,#3b82f6,#60a5fa);box-shadow:0 0 10px rgba(59,130,246,.5)}
.xl-shot-bar .a{background:linear-gradient(90deg,#86efac,#22c55e,#15803d);box-shadow:0 0 10px rgba(34,197,94,.5)}
.xl-shot-bar-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0a1020,0 0 8px rgba(255,255,255,.6)}

/* Events */
.xl-events-card{background:#0d1424;border:1px solid #141b2d;border-radius:14px;padding:16px;margin-bottom:14px}
.xl-events-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.xl-events-head h3{margin:0;font-size:18px;font-weight:700;color:#e8ecf3}
.xl-goals-tag{color:#9aa3b2;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.xl-events-list{display:flex;flex-direction:column;gap:14px}
.xl-ev2{display:flex;align-items:center;gap:14px;color:#e8ecf3;font-size:14px}
.xl-ev2-min{color:#cdd3df;font-weight:700;font-size:15px;min-width:32px}
.xl-ev2-ic{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;color:#fff}
.xl-ev2-ic.ball{font-size:18px}
.xl-ev-card{display:inline-block;width:12px;height:16px;border-radius:2px}
.xl-ev-card.y{background:#facc15}
.xl-ev-card.r{background:#ef4444}
.xl-ev2-score{display:inline-flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-weight:800;font-size:15px;padding:6px 14px;border-radius:6px;font-family:'Inter',sans-serif;letter-spacing:.02em}
.xl-ev2-txt{color:#9aa3b2;font-size:13px;flex:1;min-width:0}
.xl-ev2-right{flex-direction:row-reverse;text-align:right}
.xl-ev2-right .xl-ev2-txt{text-align:right}

@media (max-width:520px){
  .xl-mp-logo{width:64px;height:64px}
  .xl-mp-score{font-size:42px;gap:10px}
  .xl-mp-tname{font-size:14px;max-width:120px}
  .xl-mp-team.left .xl-mp-star,.xl-mp-team.right .xl-mp-star{display:none}
  .xl-dial-num{font-size:20px}
  .xl-dial-ring{width:62px;height:62px}
  .xl-mp-tabs{gap:14px}
  .xl-mp-tab{font-size:14px}
}

/* ===== H2H tab ===== */
.xl-h2h-card{position:relative;background:radial-gradient(120% 80% at 50% -20%, rgba(59,130,246,.10), transparent 60%),radial-gradient(120% 80% at 50% 120%, rgba(34,197,94,.08), transparent 60%),linear-gradient(180deg,#0e1626 0%,#0a1020 100%);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:22px 18px;margin-top:8px;box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04)}
.xl-h2h-summary{padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:16px}
.xl-h2h-sum-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.xl-h2h-sum-team{display:flex;align-items:center;gap:8px;color:#e8ecf3;font-weight:700;font-size:13px;flex:1;min-width:0;letter-spacing:.01em}
.xl-h2h-sum-team.a{justify-content:flex-end}
.xl-h2h-sum-team img{width:24px;height:24px;object-fit:contain}
.xl-h2h-sum-count{text-align:center;color:#fff;font-weight:800;font-size:22px;line-height:1;font-family:'Inter',sans-serif;letter-spacing:-.02em}
.xl-h2h-sum-count span{display:block;font-size:10px;color:#8b94a8;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.xl-h2h-sum-bar{display:flex;height:20px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.xl-h2h-sum-bar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;min-width:0;transition:width .4s ease}
.xl-h2h-sum-bar .h{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.xl-h2h-sum-bar .d{background:#475569}
.xl-h2h-sum-bar .a{background:linear-gradient(90deg,#16a34a,#4ade80)}
.xl-h2h-sum-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#8b94a8;font-weight:600;letter-spacing:.04em}
.xl-h2h-sum-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.xl-h2h-sum-legend i.h{background:#3b82f6}
.xl-h2h-sum-legend i.d{background:#64748b}
.xl-h2h-sum-legend i.a{background:#22c55e}
.xl-h2h-list{display:flex;flex-direction:column;gap:10px}
.xl-h2h-row{display:flex;flex-direction:column;gap:8px;padding:14px 14px;background:radial-gradient(120% 80% at 50% -20%, rgba(59,130,246,.06), transparent 60%),linear-gradient(180deg,#0e1626 0%,#0a1020 100%);border:1px solid rgba(255,255,255,.06);border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .2s, transform .2s}
.xl-h2h-row:hover{border-color:rgba(59,130,246,.25);transform:translateY(-1px)}
.xl-h2h-meta{display:flex;justify-content:space-between;font-size:11px;color:#8b94a8;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.xl-h2h-comp{color:#8b94a8;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-h2h-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.xl-h2h-team{display:flex;align-items:center;gap:8px;color:#e8ecf3;font-size:13px;font-weight:700;min-width:0}
.xl-h2h-team.h{justify-content:flex-end;text-align:right}
.xl-h2h-team.a{justify-content:flex-start;text-align:left}
.xl-h2h-team .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-h2h-team img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.xl-h2h-score{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:14px;padding:6px 12px;border-radius:8px;font-family:'Inter',sans-serif;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
.xl-h2h-score span{color:#475569;margin:0 3px;font-weight:700}

/* Empty state with animation */
.xl-h2h-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;text-align:center;background:linear-gradient(180deg,#0f1528 0%,#0a1020 100%);border:1px solid #1c2740;border-radius:14px;margin-top:8px}
.xl-h2h-empty-anim{position:relative;width:120px;height:120px;margin-bottom:20px}
.xl-h2h-ball{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0%,#fff 30%,#1e293b 60%,#0f172a 100%);box-shadow:0 4px 20px rgba(59,130,246,.4),inset 0 -3px 8px rgba(0,0,0,.5);animation:xlBallBounce 2s ease-in-out infinite;z-index:3}
.xl-h2h-ring{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:2px solid #3b82f6;border-radius:50%;opacity:0;animation:xlRingPulse 2.4s ease-out infinite}
.xl-h2h-ring.d2{animation-delay:.8s;border-color:#22c55e}
.xl-h2h-ring.d3{animation-delay:1.6s;border-color:#f59e0b}
.xl-h2h-empty-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:.02em}
.xl-h2h-empty-sub{font-size:13px;color:#7c8aa6;max-width:300px;line-height:1.5}
@keyframes xlBallBounce{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(180deg)}}
@keyframes xlRingPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}

@media (max-width:520px){
  .xl-h2h-team{font-size:12px;gap:5px}
  .xl-h2h-team img{width:18px;height:18px}
  .xl-h2h-score{font-size:13px;padding:5px 9px}
  .xl-h2h-sum-count{font-size:18px}
}

/* ===== Admin Dashboard ===== */
.xl-admin-wrap{max-width:980px;margin:0 auto;padding:28px 18px 60px}
.xl-admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.xl-admin-head h1{margin:0;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.01em}
.xl-admin-sub{margin:4px 0 0;color:#7c8aa6;font-size:13px}
.xl-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.xl-admin-card{background:linear-gradient(180deg,#0f1528 0%,#0a1020 100%);border:1px solid #1c2740;border-radius:14px;padding:20px;box-shadow:0 14px 40px -24px rgba(59,130,246,.4)}
.xl-admin-card h2{margin:0 0 4px;font-size:16px;font-weight:800;color:#dbe3ff;letter-spacing:.01em}
.xl-admin-notice{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#bbf7d0;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;font-weight:600}
.xl-admin-err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fecaca;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:12px;font-weight:600}
.xl-admin-field{display:block;margin:14px 0}
.xl-admin-field span{display:block;font-size:12px;font-weight:700;color:#9aa3b2;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.xl-admin-field input{width:100%;padding:11px 13px;background:#0b1124;border:1px solid #1c2740;border-radius:9px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.xl-admin-field input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.xl-admin-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:9px;border:1px solid transparent;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit;margin-top:6px}
.xl-admin-btn.primary{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;box-shadow:0 6px 20px -8px rgba(59,130,246,.6)}
.xl-admin-btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(59,130,246,.7)}
.xl-admin-btn.ghost{background:transparent;border-color:#1c2740;color:#dbe3ff}
.xl-admin-btn.ghost:hover{border-color:#3b82f6;color:#fff}
.xl-admin-toggle{display:flex;align-items:flex-start;gap:14px;padding:14px;background:#0b1124;border:1px solid #161f36;border-radius:10px;cursor:pointer;margin:14px 0}
.xl-admin-toggle input{position:absolute;opacity:0;pointer-events:none}
.xl-tg-track{position:relative;flex-shrink:0;width:44px;height:24px;background:#1c2740;border-radius:999px;transition:background .2s;margin-top:2px}
.xl-tg-dot{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.xl-admin-toggle input:checked + .xl-tg-track{background:linear-gradient(135deg,#2563eb,#60a5fa)}
.xl-admin-toggle input:checked + .xl-tg-track .xl-tg-dot{transform:translateX(20px)}
.xl-tg-text{flex:1;color:#dbe3ff;font-size:14px;line-height:1.4}
.xl-tg-text strong{display:block;font-weight:800;margin-bottom:3px}
.xl-tg-text small{display:block;font-size:12px;color:#7c8aa6;font-weight:500}
.xl-admin-list{list-style:none;padding:0;margin:8px 0 0}
.xl-admin-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #161f36;font-size:13px;color:#9aa3b2}
.xl-admin-list li:last-child{border-bottom:0}
.xl-admin-list b{font-weight:800;font-size:11px;letter-spacing:.1em;padding:4px 8px;border-radius:5px}
.xl-admin-list b.on{background:rgba(34,197,94,.15);color:#86efac}
.xl-admin-list b.off{background:rgba(239,68,68,.15);color:#fca5a5}
.xl-admin-list code{font-size:11px;background:#0b1124;border:1px solid #1c2740;padding:3px 7px;border-radius:5px;color:#cbd5ff}
.xl-admin-hint{margin:12px 0 0;font-size:12px;color:#7c8aa6}
.xl-admin-hint code{background:#0b1124;border:1px solid #1c2740;padding:2px 6px;border-radius:4px;color:#cbd5ff}
.xl-admin-login{max-width:420px;margin:40px auto}
.xl-admin-login h1{margin:0 0 4px;font-size:20px;color:#fff;font-weight:800}
.xl-admin-logo{display:flex;align-items:center;gap:10px;color:#60a5fa;font-weight:800;letter-spacing:.04em;margin-bottom:18px;font-size:13px;text-transform:uppercase}
.xl-admin-logo .bolt{width:8px;height:8px;border-radius:50%;background:#3b82f6;box-shadow:0 0 14px #3b82f6}

/* ===== Live 2D Match ===== */
.xl-2d-wrap{max-width:980px;margin:0 auto;padding:14px 12px 40px}
.xl-2d{display:flex;flex-direction:column;gap:12px}
.xl-2d-loading{padding:60px 20px;text-align:center;color:#7c8aa6}

.xl-2d-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px}
.xl-2d-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#0b1124;border:1px solid #1c2740;color:#dbe3ff;text-decoration:none;transition:all .15s}
.xl-2d-back:hover{border-color:#3b82f6;color:#fff}
.xl-2d-title{font-weight:800;color:#dbe3ff;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.xl-2d-live{display:inline-flex;align-items:center;gap:6px;background:rgba(239,68,68,.16);color:#fca5a5;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em;border:1px solid rgba(239,68,68,.3)}
.xl-2d-live .dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:xlPulse 1.2s ease-in-out infinite}
@keyframes xlPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(239,68,68,0)}}

.xl-2d-stadium{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#0a1a2e 0%,#0a0f1c 100%);border:1px solid #1c2740;box-shadow:0 20px 50px -25px rgba(59,130,246,.35)}
.xl-2d-crowd{position:absolute;left:0;right:0;top:0;height:18%;background:
  radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.08) 0%,transparent 60%),
  repeating-linear-gradient(90deg,#1a2542 0 4px,#0f1830 4px 8px,#22304f 8px 12px,#0a1224 12px 16px);
  filter:brightness(.85)}
.xl-2d-crowd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.xl-2d-lights{position:absolute;top:6px;left:0;right:0;display:flex;justify-content:space-around;z-index:2;pointer-events:none}
.xl-2d-lights i{width:10px;height:10px;border-radius:50%;background:#fffbe6;box-shadow:0 0 16px 6px rgba(255,251,200,.4),0 0 30px 14px rgba(255,251,200,.18)}

.xl-2d-pitch{position:relative;height:300px;margin:14% 14px 0;background:
  linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.18)),
  repeating-linear-gradient(90deg,#3aa64e 0 8%,#359249 8% 16%);
  border-radius:6px;box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.4);perspective:600px}
.xl-2d-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.xl-2d-wm{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.18);font-weight:800;font-size:11px;letter-spacing:.3em;pointer-events:none}
.xl-2d-wm.c{top:50%;transform:translate(-50%,-50%);font-size:22px;color:rgba(255,255,255,.07);letter-spacing:.5em}
.xl-2d-wm.r{top:auto;bottom:8px}
.xl-2d-flag{position:absolute;width:8px;height:14px;background:#ef4444;border-left:1px solid #fff}
.xl-2d-flag.tl{top:4px;left:4px}
.xl-2d-flag.tr{top:4px;right:4px;transform:scaleX(-1)}
.xl-2d-flag.bl{bottom:4px;left:4px}
.xl-2d-flag.br{bottom:4px;right:4px;transform:scaleX(-1)}

.xl-2d-zone{position:absolute;top:10%;bottom:10%;width:35%;border-radius:50%;filter:blur(28px);opacity:0;transition:opacity .4s,left .5s,right .5s}
.xl-2d-zone.side-h{right:-5%;background:radial-gradient(circle,rgba(59,130,246,.55),transparent 70%);opacity:.55}
.xl-2d-zone.side-a{left:-5%;background:radial-gradient(circle,rgba(34,197,94,.55),transparent 70%);opacity:.55}
.xl-2d-zone.dz-mid{opacity:.4}
.xl-2d-zone.dz-lo{opacity:.18}
.xl-2d-zone.dz-hi{animation:xl2dGlow 1.4s ease-in-out infinite}
@keyframes xl2dGlow{0%,100%{opacity:.55}50%{opacity:.9}}

.xl-2d-ball{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0%,#fff 35%,#1f2937 60%,#000 100%);box-shadow:0 3px 8px rgba(0,0,0,.55),0 0 12px rgba(255,255,255,.5);transition:left .4s ease,top .4s ease;z-index:4}
.xl-2d-shadow{position:absolute;width:14px;height:5px;margin:0 0 0 -7px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(3px);transition:left .4s ease,top .4s ease;z-index:3}
.xl-2d-player{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0,#cbd5ff 40%,#3b82f6 100%);box-shadow:0 3px 6px rgba(0,0,0,.55);transition:left .4s ease,top .4s ease;z-index:3;display:flex;align-items:center;justify-content:center;color:#0a1020;font-size:10px;font-weight:900}
.xl-2d-player::before{content:'';position:absolute;width:4px;height:6px;background:#0a1020;border-radius:50% 50% 30% 30%;top:-3px;left:50%;transform:translateX(-50%)}
.xl-2d-player.side-a{background:radial-gradient(circle at 30% 30%,#fff 0,#fde68a 40%,#f59e0b 100%)}
.xl-2d-player.side-h{background:radial-gradient(circle at 30% 30%,#fff 0,#fecaca 40%,#ef4444 100%)}

.xl-2d-action{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.xl-2d-act-text{font-size:24px;font-weight:900;color:#fff;letter-spacing:.02em;line-height:1.1;font-family:'Inter',sans-serif}
.xl-2d-act-team{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:#e5e7eb;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.xl-2d-act-ic{width:14px;height:14px;border-radius:50%;background:#fff;display:inline-block}
.xl-2d-act-team.side-h .xl-2d-act-ic{background:#ef4444}
.xl-2d-act-team.side-a .xl-2d-act-ic{background:#f59e0b}
.xl-2d-action.flash .xl-2d-act-text{animation:xl2dFlash .9s ease-out}
@keyframes xl2dFlash{0%{transform:scale(.6);opacity:0;filter:blur(6px)}40%{transform:scale(1.1);opacity:1;filter:blur(0)}100%{transform:scale(1);opacity:1}}

.xl-2d-scorebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:linear-gradient(180deg,#0b1124,#070b16);border-top:1px solid #1c2740;margin-top:14px}
.xl-2d-team{display:flex;align-items:center;gap:8px;color:#dbe3ff;font-weight:700;font-size:13px;flex:1;min-width:0}
.xl-2d-team.a{justify-content:flex-end;text-align:right}
.xl-2d-team img{width:22px;height:22px;object-fit:contain}
.xl-2d-team .ph{width:18px;height:18px;border-radius:50%;background:#1c2740;display:inline-block}
.xl-2d-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-2d-mid{display:flex;flex-direction:column;align-items:center;min-width:110px}
.xl-2d-clock{font-size:11px;color:#9aa3b2;font-weight:700;letter-spacing:.08em;margin-bottom:2px}
.xl-2d-sc{display:flex;align-items:center;gap:6px;color:#fff;font-weight:900;font-size:18px;font-family:'Inter',sans-serif}
.xl-2d-sc span{color:#475569}
.xl-2d-tag{width:6px;height:14px;border-radius:2px;display:inline-block}
.xl-2d-tag.h{background:#ef4444}
.xl-2d-tag.a{background:#f59e0b}

.xl-2d-feed{background:linear-gradient(180deg,#0f1528 0%,#0a1020 100%);border:1px solid #1c2740;border-radius:12px;padding:14px}
.xl-2d-feed h3{margin:0 0 10px;font-size:13px;color:#dbe3ff;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.xl-2d-feed-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.xl-2d-feed-row{display:flex;gap:10px;padding:8px 10px;background:#0b1124;border:1px solid #161f36;border-radius:8px;font-size:12px;color:#9aa3b2}
.xl-2d-feed-row .m{font-weight:800;color:#fff;min-width:36px}
.xl-2d-feed-row .t{flex:1;line-height:1.4}
.xl-2d-feed-row.h{border-left:3px solid #ef4444}
.xl-2d-feed-row.a{border-left:3px solid #f59e0b}
.xl-2d-empty{padding:14px;text-align:center;color:#7c8aa6;font-size:12px}

@media (max-width:520px){
  .xl-2d-pitch{height:210px}
  .xl-2d-act-text{font-size:18px}
  .xl-2d-sc{font-size:16px}
}

/* ===== Admin: Live Streams ===== */
.xl-admin-input{width:100%;padding:10px 12px;background:#0b1224;border:1px solid #1f2a44;border-radius:10px;color:#e6ecff;font:inherit}
.xl-as-customrow{display:flex;gap:8px;margin-top:10px}
.xl-as-customrow input{flex:1}
.xl-as-live{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.xl-as-skel{height:64px;border-radius:10px;background:linear-gradient(90deg,#0b1224,#121b34,#0b1224);background-size:200% 100%;animation:xlSkel 1.2s linear infinite}
@keyframes xlSkel{0%{background-position:0 0}100%{background-position:-200% 0}}
.xl-as-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#0b1224;border:1px solid #1c2740;border-radius:12px}
.xl-as-row-l{min-width:0}
.xl-as-pill{display:inline-block;font-size:11px;font-weight:700;color:#9fb4ff;background:#172447;padding:2px 8px;border-radius:999px;margin-bottom:4px}
.xl-as-row-title{font-weight:700;color:#eaf0ff}
.xl-as-row-title b{color:#fff;margin:0 6px}
.xl-as-row-sub{font-size:12px;color:#7c8aae;margin-top:2px}
.xl-as-row-r{display:flex;align-items:center;gap:10px}
.xl-as-count{font-size:12px;font-weight:700;color:#7c8aae;padding:4px 10px;border-radius:999px;background:#101a32}
.xl-as-count.on{color:#22c55e;background:#0f2418}
.xl-as-saved{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.xl-as-savedrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#0b1224;border:1px solid #1c2740;border-radius:10px}
.xl-as-savedttl{font-weight:700;color:#eaf0ff}
.xl-as-savedsub{font-size:12px;color:#7c8aae}

.xl-as-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.xl-as-modal[hidden]{display:none}
.xl-as-modal-bg{position:absolute;inset:0;background:rgba(2,5,15,.78);backdrop-filter:blur(6px)}
.xl-as-modal-card{position:relative;width:min(720px,100%);max-height:90vh;overflow:auto;background:#0a0f1f;border:1px solid #1c2740;border-radius:16px;padding:18px}
.xl-as-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.xl-as-modal-head h2{margin:0;font-size:18px}
.xl-as-modal-body{display:flex;flex-direction:column;gap:18px}
.xl-as-existing h3,.xl-as-form h3{font-size:14px;margin:0 0 8px;color:#cdd6ff;text-transform:uppercase;letter-spacing:.06em}
.xl-as-list{display:flex;flex-direction:column;gap:6px}
.xl-as-stream{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#0b1224;border:1px solid #1c2740;border-radius:10px}
.xl-as-stream-ttl{font-weight:700;color:#eaf0ff;display:flex;align-items:center;gap:8px}
.xl-as-type{font-size:10px;font-weight:800;letter-spacing:.08em;color:#9fb4ff;background:#172447;padding:2px 8px;border-radius:999px;text-transform:uppercase}
.xl-as-stream-url{font-size:12px;color:#7c8aae;word-break:break-all}
.xl-as-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xl-as-form .xl-admin-field{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.xl-as-form .xl-admin-field input,.xl-as-form .xl-admin-field select{padding:10px 12px;background:#0b1224;border:1px solid #1f2a44;border-radius:10px;color:#e6ecff;font:inherit}
.xl-as-form button{margin-top:12px;width:100%}
@media(max-width:520px){.xl-as-grid{grid-template-columns:1fr}}

/* ===== Match page: in-hero stream player ===== */
.xl-mp-srvs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 10px}
.xl-mp-srv{padding:8px 14px;border-radius:999px;border:1px solid #1f2a44;background:#0b1224;color:#cdd6ff;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:all .15s}
.xl-mp-srv:hover{border-color:#2a3a66;color:#fff}
.xl-mp-srv.on{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.35)}
.xl-mp-srv.close{background:#2a1320;border-color:#5a1f33;color:#ffb0b8}
.xl-mp-player{margin:10px 14px 0;border-radius:14px;overflow:hidden;background:#000;border:1px solid #1c2740;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.xl-mp-pf{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.xl-mp-pf video,.xl-mp-pf iframe{position:absolute;inset:0;width:100%;height:100%;background:#000;border:0}
.xl-mp-pf video{display:block;transform:none!important;-webkit-transform:none!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.xl-mp-ploading{position:absolute;inset:0;display:grid;place-items:center;color:#cdd6ff;font:600 13px Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,#06070d,#0b1224);z-index:2}
.xl-mp-ploading::before{content:"";display:block;width:34px;height:34px;border:3px solid #1c2740;border-top-color:#3b82f6;border-radius:50%;animation:xlSpin .9s linear infinite;margin:0 auto 10px}
@keyframes xlSpin{to{transform:rotate(360deg)}}
.xl-mp-hero.with-player .xl-mp-logo{transform:scale(.82)}

/* ===== Match page playing mode: video replaces hero ===== */
.xl-mp.playing .xl-mp-hero,
.xl-mp.playing .xl-mp-herox,
.xl-mp.playing .xl-mp-glow,
.xl-mp.playing .xl-mp-cta{display:none !important}
.xl-mp.playing .xl-mp-ctapair{display:none !important}
.xl-mp.playing .xl-mp-topbar{display:none !important}
.xl-mp.playing .xl-mp-player{margin:0;border-radius:0;border:0;border-bottom:1px solid #0c1325;box-shadow:none}
.xl-mp.playing .xl-mp-player .xl-mp-pf{aspect-ratio:16/9;width:100%}
.xl-mp.playing .xl-mp-tabs{margin-top:14px}

/* ===== Player overlay (LIVE HD badges + custom controls) ===== */
.xl-mp-ov{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;gap:8px;padding:12px 14px;pointer-events:none;transition:opacity .25s}
.xl-mp-ov-top{top:0;background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,0))}
.xl-mp-ov-bottom{bottom:0;flex-direction:column;align-items:stretch;gap:8px;padding:14px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.xl-mp-ov *{pointer-events:auto}
.xl-mp-flex{flex:1;pointer-events:none}
.xl-mp-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font:800 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:#fff;backdrop-filter:blur(6px)}
.xl-mp-pill.live{background:linear-gradient(135deg,#ff4757,#e0264a);box-shadow:0 4px 14px rgba(224,38,74,.45)}
.xl-mp-pill.live i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:xlPulse 1.4s infinite}
.xl-mp-pill.dark{background:rgba(15,17,28,.85);border:1px solid rgba(255,255,255,.08)}
@keyframes xlPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.xl-mp-watch{display:inline-flex;align-items:center;gap:6px;color:#fff;font:600 12px Inter,system-ui,sans-serif;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}
.xl-mp-watch b{font-weight:800}
.xl-mp-watch span{opacity:.75;font-weight:500}
.xl-mp-prog{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.xl-mp-prog-fill{position:absolute;left:0;top:0;bottom:0;background:var(--xl-bar,#ffffff);border-radius:2px;box-shadow:0 0 8px color-mix(in oklab,var(--xl-bar,#ffffff) 60%,transparent)}
.xl-mp-prog-fill::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--xl-bar,#ffffff);box-shadow:0 0 10px color-mix(in oklab,var(--xl-bar,#ffffff) 70%,transparent)}
.xl-mp-cbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xl-mp-cleft,.xl-mp-cright{display:flex;align-items:center;gap:6px}
.xl-mp-cb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#fff;cursor:pointer;transition:background .15s}
.xl-mp-cb:hover{background:rgba(255,255,255,.14)}
.xl-mp-livev{display:inline-flex;align-items:center;gap:6px;color:#fff;font:800 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;margin-left:6px}
.xl-mp-livev i{width:8px;height:8px;border-radius:50%;background:#ff4757;animation:xlPulse 1.4s infinite}
.xl-mp-qual{display:inline-flex;align-items:center;gap:5px;color:#fff;font:700 12px Inter,system-ui,sans-serif;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.10);cursor:pointer}
.xl-mp-qual:hover{background:rgba(255,255,255,.18)}
/* hide native iframe-overlapped controls cleanly; overlays auto-hide after inactivity (only when JS adds .show-ov sometimes — we keep visible by default) */
.xl-mp-pf .xl-mp-ploading{z-index:3}

/* Server menu popover */
.xl-mp-srvwrap{position:relative}
.xl-mp-srvbtn{display:inline-flex;align-items:center;gap:6px}
.xl-mp-srvmenu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:200px;max-width:280px;max-height:240px;overflow-y:auto;background:rgba(15,17,28,.97);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.55);backdrop-filter:blur(10px);z-index:20}
.xl-mp-srvitem{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:7px;border:0;background:transparent;color:#fff;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;text-align:left;transition:background .12s}
.xl-mp-srvitem:hover{background:rgba(255,255,255,.08)}
.xl-mp-srvitem.on{background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(29,78,216,.18));color:#fff}
.xl-mp-srvitem .dot{width:7px;height:7px;border-radius:50%;background:#3b82f6;flex:0 0 auto}
.xl-mp-srvitem.on .dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.7)}
.xl-mp-srvitem small{margin-left:auto;font-size:10px;font-weight:700;opacity:.55;letter-spacing:.05em}
.xl-mp-srvempty{padding:14px 10px;color:#cdd6ff;font:600 12px Inter,system-ui,sans-serif;text-align:center;opacity:.7}

/* Player close button */
.xl-mp-closebtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(224,38,74,.85);color:#fff;cursor:pointer;margin-left:6px;transition:all .15s;backdrop-filter:blur(6px)}
.xl-mp-closebtn:hover{background:#ff4757;transform:scale(1.05)}

/* ===== Mobile player overlay polish ===== */
@media (max-width:640px){
  .xl-mp-ov{padding:8px 8px;gap:6px}
  .xl-mp-ov-top{gap:6px;flex-wrap:nowrap}
  .xl-mp-pill{padding:4px 8px;font-size:10px;border-radius:6px;letter-spacing:.04em;white-space:nowrap}
  .xl-mp-pill.live{box-shadow:0 2px 8px rgba(224,38,74,.45)}
  .xl-mp-watch{padding:4px 7px;font-size:10px;border-radius:6px;gap:4px}
  .xl-mp-watch svg{width:11px;height:11px}
  .xl-mp-watch span{display:none}
  .xl-mp-closebtn{width:26px;height:26px;border-radius:6px;margin-left:2px;flex-shrink:0}
  .xl-mp-closebtn svg{width:13px;height:13px}
  .xl-mp-ov-bottom{padding:8px 8px 8px;gap:6px}
  .xl-mp-cbar{gap:6px}
  .xl-mp-cleft,.xl-mp-cright{display:flex;align-items:center;gap:2px;min-width:0}
  .xl-mp-cright{gap:4px;flex-shrink:0}
  .xl-mp-cb{width:28px;height:28px;border-radius:6px}
  .xl-mp-cb svg{width:15px;height:15px}
  .xl-mp-livev{font-size:10px;margin-left:2px;letter-spacing:.06em}
  .xl-mp-qual{padding:4px 7px;font-size:10px;border-radius:6px;gap:3px}
  .xl-mp-srvbtn span,.xl-mp-srvbtn{gap:3px}
  .xl-mp-prog{height:3px}
}
@media (max-width:380px){
  .xl-mp-pill.dark{display:none}
  .xl-mp-watch b{font-size:10px}
  .xl-mp-cb[data-act="back"],.xl-mp-cb[data-act="fwd"]{display:none}
}

/* ============================================================
   Premium Mobile Polish — Match Page (and global mobile nits)
   ============================================================ */
@media (max-width:760px){
  /* Page container: tighter, edge-to-edge feel */
  .xl-main{padding:10px 12px calc(var(--bot-h) + 24px)}

  /* Site header: make burger feel like an icon button, not a raw box */
  .xl-burger{
    width:38px;height:38px;border-radius:11px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    display:grid;place-items:center;color:#e8ecf3;
  }
  .xl-burger:hover{background:rgba(255,255,255,.08)}

  /* === Match Page === */
  .xl-mp{position:relative}
  .xl-mp-glow{height:240px;background:radial-gradient(70% 80% at 50% 0%,rgba(225,29,72,.22),rgba(5,7,13,0) 70%)}

  /* Topbar — compact, balanced */
  .xl-mp-topbar{padding:8px 0 6px;gap:4px}
  .xl-mp-back,.xl-mp-iconbtn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
  .xl-mp-back:hover,.xl-mp-iconbtn:hover{background:rgba(255,255,255,.09)}
  .xl-mp-back svg{width:18px;height:18px}
  .xl-mp-iconbtn svg{width:17px;height:17px}
  .xl-mp-league{font-size:14px;font-weight:700;letter-spacing:.01em;color:#f0f3f9;padding:0 4px}
  .xl-mp-actions{gap:6px;display:flex}

  /* Hero — tighter, premium */
  .xl-mp-hero{gap:8px;padding:14px 0 8px;grid-template-columns:1fr auto 1fr}
  .xl-mp-team{gap:8px}
  .xl-mp-logo{
    width:64px;height:64px;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
    padding:8px;box-shadow:0 8px 28px -12px rgba(0,0,0,.6);
  }
  .xl-mp-tname{font-size:13px;font-weight:700;max-width:120px;color:#e8ecf3;letter-spacing:.01em}
  .xl-mp-rank{font-size:12px;color:#7d8597;font-weight:600;margin-top:-2px}
  .xl-mp-center{padding:0 4px;min-width:96px}
  .xl-mp-minute{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:800;letter-spacing:.08em;
    color:#ff6b7a;background:rgba(239,68,68,.12);
    padding:4px 10px;border-radius:999px;
    border:1px solid rgba(239,68,68,.25);margin-bottom:8px;
  }
  .xl-mp-minute::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff4757;box-shadow:0 0 0 0 rgba(255,71,87,.6);animation:xlPulse 1.4s infinite}
  .xl-mp-score{font-size:44px;gap:10px;font-weight:800;letter-spacing:-.03em}
  .xl-mp-score span{font-weight:200;opacity:.4;font-size:36px}
  .xl-mp-ht{margin-top:6px;font-size:11px;color:#7d8597;letter-spacing:.06em;font-weight:600;text-transform:uppercase}

  /* CTA — premium pill */
  .xl-mp-cta{margin:14px 0 16px;gap:8px;flex-wrap:wrap}
  .xl-mp-cta-btn{
    padding:11px 18px;border-radius:999px;font-size:13px;font-weight:700;
    background:linear-gradient(135deg,#00e5a8 0%,#00b386 100%);
    color:#04221a;border:0;box-shadow:0 10px 24px -10px rgba(0,229,168,.6);
  }
  .xl-mp-cta-btn:hover{filter:brightness(1.05)}

  /* Player surface — rounded card */
  .xl-mp-player{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 40px -16px rgba(0,0,0,.7)}
  .xl-mp.playing .xl-mp-player{margin-top:4px}

  /* Tabs — sticky, premium underline */
  .xl-mp-tabs{
    position:sticky;top:var(--top-h,56px);z-index:5;
    background:linear-gradient(180deg,#05070d 75%,rgba(5,7,13,.85));
    backdrop-filter:blur(10px);
    gap:0;padding:0;margin-top:6px;
    border-bottom:1px solid rgba(255,255,255,.06);
    justify-content:flex-start;
  }
  .xl-mp-tab{
    flex:1;text-align:center;justify-content:center;
    font-size:13.5px;font-weight:700;padding:14px 8px;color:#8a93a7;
  }
  .xl-mp-tab.on{color:#3b82f6}
  .xl-mp-tab.on::after{height:2.5px;border-radius:3px 3px 0 0;left:20%;right:20%;background:linear-gradient(90deg,#3b82f6,#60a5fa)}

  .xl-mp-body{padding-top:14px}

  /* Cards inside body — softer surfaces */
  .xl-mp-body .xl-h2h-card,
  .xl-mp-body > div{border-radius:14px}
}

@media (max-width:380px){
  .xl-mp-logo{width:56px;height:56px;border-radius:16px;padding:6px}
  .xl-mp-tname{font-size:12px;max-width:100px}
  .xl-mp-score{font-size:38px;gap:8px}
  .xl-mp-score span{font-size:30px}
  .xl-mp-league{font-size:13px}
  .xl-mp-cta-btn{padding:10px 14px;font-size:12.5px}
}

/* === Hard mobile polish v2 — match player chrome === */
@media (max-width:640px){
  /* LIVE HD must stay on one line, smaller pill */
  .xl-mp-pill.live{
    padding:5px 9px;font-size:10px;letter-spacing:.06em;
    white-space:nowrap;border-radius:6px;line-height:1;
  }
  .xl-mp-pill.live i{width:5px;height:5px;margin-right:2px}

  /* Top overlay: don't wrap; let watching badge shrink */
  .xl-mp-ov-top{flex-wrap:nowrap;gap:5px;padding:8px 8px}
  .xl-mp-flex{flex:1;min-width:0}
  .xl-mp-watch{padding:5px 8px;font-size:10px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .xl-mp-watch b{font-size:11px}
  .xl-mp-watch svg{width:11px;height:11px}
  .xl-mp-pill.dark{padding:5px 8px;font-size:9.5px;border-radius:6px;letter-spacing:.04em}

  /* Cleaner loading: hide bottom controls bar while loading */
  .xl-mp-pf:has(.xl-mp-ploading) .xl-mp-ov-bottom{display:none}
  .xl-mp-pf:has(.xl-mp-ploading) .xl-mp-ov-top{background:transparent}
  .xl-mp-ploading{font-size:11px;letter-spacing:.12em;color:#9aa8d1}
  .xl-mp-ploading::before{width:30px;height:30px;border-width:2.5px}
}

/* On very small screens, drop the FOOTBALL category pill entirely */
@media (max-width:400px){
  .xl-mp-pill.dark{display:none}
  .xl-mp-watch b{font-size:10.5px}
  .xl-mp-pill.live{font-size:9.5px;padding:4px 7px}
}

/* ============================================================
   Stadium Hero — AiScore-inspired premium match header
   ============================================================ */
/* ===========================================================
   AiScore-style match hero
   =========================================================== */
.xl-mp-hero, .xl-mp-stage { display:none !important; }

.xl-mp-hero2{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items:start;
  column-gap:8px; row-gap:6px;
  padding: 22px 6px 18px;
}
.xl-mp-team{
  display:flex; align-items:center; gap:10px;
  grid-row:1;
}
.xl-mp-team.home{ justify-self:start; padding-left:4px; }
.xl-mp-team.away{ justify-self:end; flex-direction:row-reverse; padding-right:4px; }

.xl-mp-fav{
  background:transparent; border:0; padding:4px; cursor:pointer;
  color:#cbd5e1; line-height:0; opacity:.9;
}
.xl-mp-fav:hover{ color:#fbbf24; }

.xl-mp-tlogo{
  width:70px; height:70px; border-radius:50%;
  background:#fff; display:grid; place-items:center; padding:8px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  flex-shrink:0;
}
.xl-mp-tlogo img{ max-width:100%; max-height:100%; object-fit:contain; }
.xl-mp-tlogo .ph{ font:900 26px Inter,system-ui,sans-serif; color:#0a1424; }

.xl-mp-rank{
  font:600 13px Inter,system-ui,sans-serif;
  color:#64748b; letter-spacing:.02em;
}

.xl-mp-center{
  grid-row:1; grid-column:2;
  text-align:center; padding:0 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-width:130px;
}
.xl-mp-min{
  font:700 14px Inter,system-ui,sans-serif;
  color:#ef4444; line-height:1; margin-bottom:6px;
}
.xl-mp-bigscore{
  display:inline-flex; align-items:center; gap:10px;
  font:300 44px/1 "Helvetica Neue",Inter,system-ui,sans-serif;
  color:#e8ecf3; letter-spacing:.02em;
}
.xl-mp-bigscore b{ font-weight:300; min-width:34px; text-align:center; }
.xl-mp-bigscore span{ color:#94a3b8; font-weight:300; }
.xl-mp-ht{
  margin-top:6px;
  font:600 12px Inter,system-ui,sans-serif;
  color:#94a3b8; letter-spacing:.04em;
}

.xl-mp-tname{
  grid-row:2;
  font:600 13.5px/1.25 Inter,system-ui,sans-serif;
  color:#e8ecf3;
  max-width:120px;
  text-align:center;
}
.xl-mp-tname.home{ grid-column:1; justify-self:center; }
.xl-mp-tname.away{ grid-column:3; justify-self:center; }

/* Topbar — clean, centered league title */
.xl-mp-topbar{ padding:10px 4px !important; }
.xl-mp-league{
  font:600 15px Inter,system-ui,sans-serif !important;
  color:#e8ecf3 !important; letter-spacing:.01em;
}
.xl-mp-back, .xl-mp-iconbtn{
  background:transparent !important; border:0 !important; color:#cbd5e1 !important;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
}
.xl-mp-back:hover, .xl-mp-iconbtn:hover{ background:rgba(255,255,255,.06) !important; }
.xl-mp-actions{ display:flex; gap:2px; }

/* CTA pills — Live Stream + Match Live */
.xl-mp-cta{
  display:flex; justify-content:center; gap:12px;
  padding:4px 0 14px;
}
.xl-mp-cta-btn{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:9px 18px !important; border-radius:24px !important;
  background:rgba(30,41,59,.85) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#e8ecf3 !important; font:600 13.5px Inter,system-ui,sans-serif !important;
  cursor:pointer;
}
.xl-mp-cta-btn:hover{ background:rgba(40,52,72,.95) !important; }
.xl-cta-ic{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; }
.xl-cta-ic.play{ background:#3b82f6; }
.xl-cta-ic.stad{ background:#22c55e; }

/* Playing mode hides hero */
.xl-mp.playing .xl-mp-hero2{ display:none !important; }

/* Mobile tighter */
@media (max-width:480px){
  .xl-mp-hero2{ padding:18px 2px 14px; column-gap:4px; }
  .xl-mp-tlogo{ width:58px; height:58px; padding:6px; }
  .xl-mp-bigscore{ font-size:38px; gap:8px; }
  .xl-mp-bigscore b{ min-width:28px; }
  .xl-mp-tname{ font-size:12.5px; max-width:100px; }
  .xl-mp-fav svg{ width:18px; height:18px; }
  .xl-mp-rank{ font-size:12px; }
  .xl-mp-league{ font-size:13.5px !important; }
  .xl-mp-cta-btn{ padding:8px 14px !important; font-size:12.5px !important; }
}

/* Tablet+ */
@media (min-width:761px){
  .xl-mp-tlogo{ width:80px; height:80px; }
  .xl-mp-bigscore{ font-size:52px; }
  .xl-mp-tname{ font-size:15px; max-width:160px; }
}

/* ============================================================
   Match page premium rewrite v60 — flatter, arranged app screen
   ============================================================ */
body[data-page="match"]{
  --mp-bg:#07090f;
  --mp-bg-deep:#04060b;
  --mp-line:rgba(148,163,184,.12);
  --mp-line-soft:rgba(148,163,184,.075);
  --mp-text:#e7ebf3;
  --mp-muted:#8d96a8;
  --mp-blue:#3b82f6;
  --mp-blue-2:#60a5fa;
  --mp-green:#20d77a;
  background:var(--mp-bg-deep) !important;
  padding-top:0 !important;
}
body[data-page="match"] .xl-topbar{display:none !important}
body[data-page="match"] .xl-main{
  max-width:none;
  min-height:100svh;
  padding:0 !important;
}
body[data-page="match"] .xl-mp-wrap{
  width:min(100%,446px);
  max-width:446px;
  min-height:100svh;
  margin:0 auto;
  padding:0 26px calc(var(--bot-h) + 26px);
  color:var(--mp-text);
  background:linear-gradient(180deg,#080a12 0%,#05070d 48%,#06080f 100%);

  border-left:1px solid rgba(148,163,184,.09);
  border-right:1px solid rgba(148,163,184,.09);
}
body[data-page="match"] .xl-mp-glow{display:none !important}
body[data-page="match"] .xl-mp{min-height:100svh}

body[data-page="match"] .xl-mp-topbar{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 76px;
  align-items:center;
  gap:0;
  padding:20px 0 14px !important;
  background:transparent !important;
  border:0 !important;
}
body[data-page="match"] .xl-mp-league{
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:700 14.5px/1.1 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif !important;
  letter-spacing:-.015em;
  color:#edf1f8 !important;
}
body[data-page="match"] .xl-mp-actions{justify-self:end;gap:4px}
body[data-page="match"] .xl-mp-back,
body[data-page="match"] .xl-mp-iconbtn{
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:0 !important;
  color:#cbd3df !important;
  opacity:.98;
}
body[data-page="match"] .xl-mp-back:hover,
body[data-page="match"] .xl-mp-iconbtn:hover{background:rgba(255,255,255,.055) !important}

body[data-page="match"] .xl-mp-hero2{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);
  grid-template-rows:112px auto;
  align-items:start;
  column-gap:8px;
  row-gap:8px;
  padding:8px 0 18px !important;
}
body[data-page="match"] .xl-mp-team{
  grid-row:1;
  position:relative;
  display:block !important;
  width:100%;
  min-width:0;
  height:112px;
  padding:0 !important;
}
body[data-page="match"] .xl-mp-team.home{grid-column:1;justify-self:stretch}
body[data-page="match"] .xl-mp-team.away{grid-column:3;justify-self:stretch}
body[data-page="match"] .xl-mp-fav{
  position:absolute;
  top:0;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  color:#c6cfdd;
  opacity:.92;
}
body[data-page="match"] .xl-mp-team.home .xl-mp-fav{left:18px}
body[data-page="match"] .xl-mp-team.away .xl-mp-fav{right:18px}
body[data-page="match"] .xl-mp-fav:hover{color:#d9e1ee;background:transparent}
body[data-page="match"] .xl-mp-tlogo{
  position:absolute;
  top:36px;
  width:58px !important;
  height:58px !important;
  border-radius:50%;
  padding:7px !important;
  background:#f8fafc;
  border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.95),0 10px 22px -16px rgba(0,0,0,.8) !important;
}
body[data-page="match"] .xl-mp-team.home .xl-mp-tlogo{left:4px}
body[data-page="match"] .xl-mp-team.away .xl-mp-tlogo{right:4px}
body[data-page="match"] .xl-mp-tlogo img{max-width:100%;max-height:100%;object-fit:contain}
body[data-page="match"] .xl-mp-tlogo .ph{color:#111827;font:900 24px/1 Inter,sans-serif}
body[data-page="match"] .xl-mp-rank{display:none}
body[data-page="match"] .xl-mp-center{
  grid-row:1;
  grid-column:2;
  min-width:128px;
  padding:0 !important;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
body[data-page="match"] .xl-mp-min{
  margin:0 0 8px;
  font:800 14px/1 Inter,sans-serif;
  color:#ff405e;
  letter-spacing:.01em;
}
body[data-page="match"] .xl-mp-bigscore{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  font:400 39px/1 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  letter-spacing:-.035em;
  color:#e9edf5;
}
body[data-page="match"] .xl-mp-bigscore b{min-width:32px;text-align:center;font-weight:400}
body[data-page="match"] .xl-mp-bigscore span{color:#8b95a8;font-weight:500;transform:translateY(-1px)}
body[data-page="match"] .xl-mp-ht{
  margin-top:8px;
  max-width:168px;
  font:800 12px/1.15 Inter,sans-serif;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#98a4b7;
}
body[data-page="match"] .xl-mp-tname{
  grid-row:2;
  align-self:start;
  justify-self:center;
  max-width:118px;
  font:800 13px/1.25 Inter,sans-serif;
  color:#eef2f8;
  text-align:center;
  white-space:normal;
}
body[data-page="match"] .xl-mp-tname.home{grid-column:1}
body[data-page="match"] .xl-mp-tname.away{grid-column:3}

body[data-page="match"] .xl-mp-cta{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
  margin:0 !important;
  padding:14px 0 28px !important;
}
body[data-page="match"] .xl-mp-cta-btn{
  min-width:128px;
  height:36px;
  justify-content:center;
  padding:0 15px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(38,48,68,.94),rgba(27,36,55,.96)) !important;
  border:1px solid rgba(167,185,214,.12) !important;
  box-shadow:0 14px 32px -24px rgba(16,185,129,.85), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:#f1f5f9 !important;
  font:800 12.5px/1 Inter,sans-serif !important;
}
body[data-page="match"] .xl-cta-ic{width:20px;height:20px;border-radius:6px;flex:0 0 auto}
body[data-page="match"] .xl-cta-ic.play{background:#2f80ed}
body[data-page="match"] .xl-cta-ic.stad,
body[data-page="match"] .xl-cta-ic.green{background:#10b981}

body[data-page="match"] .xl-mp-tabs{
  position:relative !important;
  top:auto !important;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border-bottom:1px solid var(--mp-line-soft) !important;
}
body[data-page="match"] .xl-mp-tab{
  justify-content:center;
  padding:15px 4px 14px;
  color:#8b94a7;
  font:800 13px/1 Inter,sans-serif;
}
body[data-page="match"] .xl-mp-tab.on{color:#3b82f6}
body[data-page="match"] .xl-mp-tab.on::after{
  left:20%;
  right:20%;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:#3b82f6;
}
body[data-page="match"] .xl-mp-body{padding-top:14px}
body[data-page="match"] .xl-team-bars{
  margin:0 2px 12px;
  padding:0;
  font:800 16px/1.1 Inter,sans-serif;
  letter-spacing:-.02em;
  color:#edf2fa;
}
body[data-page="match"] .xl-tb{gap:8px;min-width:0;max-width:46%}
body[data-page="match"] .xl-tb.h{justify-content:flex-start}
body[data-page="match"] .xl-tb.a{justify-content:flex-end;text-align:right}
body[data-page="match"] .xl-tb i{width:4px !important;height:18px !important;border-radius:999px !important}
body[data-page="match"] .xl-tb.h i{background:#3b82f6 !important}
body[data-page="match"] .xl-tb.a i{background:#10d97c !important}

body[data-page="match"] .xl-chart-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 0 6px !important;
  margin:0 0 12px !important;
}
body[data-page="match"] .xl-chart-svg{height:200px;border-radius:0;overflow:visible}
body[data-page="match"] .xl-chart-axis{
  padding:7px 34px 0;
  color:#8d96a8;
  font:800 13px/1 Inter,sans-serif;
}

body[data-page="match"] .xl-stats-card,
body[data-page="match"] .xl-events-card,
body[data-page="match"] .xl-h2h-card,
body[data-page="match"] .xl-h2h-empty{
  background:linear-gradient(180deg,#11192a 0%,#0b1322 100%) !important;
  border:1px solid rgba(134,151,180,.14) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 36px -30px rgba(0,0,0,.85) !important;
}
body[data-page="match"] .xl-stats-card{padding:22px 18px 20px;margin:0 0 14px}
body[data-page="match"] .xl-live-pulse{
  top:10px;
  right:12px;
  width:8px;
  height:8px;
  background:#68d391;
  box-shadow:0 0 0 3px rgba(104,211,145,.18),0 0 0 1px rgba(255,255,255,.22) inset;
  animation:none;
}
body[data-page="match"] .xl-dials{margin:0;gap:0}
body[data-page="match"] .xl-dials-possession-only{max-width:258px}
body[data-page="match"] .xl-dial{gap:10px}
body[data-page="match"] .xl-dial-label{color:#8f98aa;font:900 11.5px/1 Inter,sans-serif;letter-spacing:.14em}
body[data-page="match"] .xl-dial-row{gap:11px}
body[data-page="match"] .xl-dial-num{
  min-width:44px;
  font:900 21px/1 Inter,sans-serif;
  letter-spacing:-.03em;
  color:#e8edf6 !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}
body[data-page="match"] .xl-dial-num.a{color:#c8f5d6 !important}
body[data-page="match"] .xl-dial-ring{width:64px;height:64px;filter:none !important}
body[data-page="match"] .xl-dial-ic{color:#dbe5f7}
body[data-page="match"] .xl-dial-symbol{font:900 14px/1 Inter,sans-serif;color:#dbe5f7;letter-spacing:.02em}
body[data-page="match"] .xl-shots{margin-top:20px;padding-top:18px;border-top:1px solid rgba(148,163,184,.08)}
body[data-page="match"] .xl-shot-label{color:#9aa4b7;font:900 11px/1 Inter,sans-serif;letter-spacing:.12em}
body[data-page="match"] .xl-shot-bar{height:5px;background:rgba(148,163,184,.10);box-shadow:none}
body[data-page="match"] .xl-shot-bar .h{background:#3b82f6;box-shadow:none}
body[data-page="match"] .xl-shot-bar .a{background:#20d77a;box-shadow:none}
body[data-page="match"] .xl-shot-bar-dot{width:8px;height:8px;box-shadow:0 0 0 2px #0d1525}
body[data-page="match"] .xl-events-card{padding:16px;margin:0 0 16px}
body[data-page="match"] .xl-events-head h3{font-size:16px;font-weight:900;color:#eef2fa}
body[data-page="match"] .xl-goals-tag{color:#8f98aa;font-size:12px;font-weight:700}

body[data-page="match"] .xl-bnav{
  width:min(100%,446px);
  left:50%;
  right:auto;
  transform:translateX(-50%);
  height:64px;
  background:rgba(6,9,16,.96);
  border-top:1px solid rgba(148,163,184,.10);
  box-shadow:0 -14px 30px -24px rgba(0,0,0,.9);
}
body[data-page="match"] .xl-bnav a{color:#8e98ad;font-size:0;padding:0}
body[data-page="match"] .xl-bnav a svg{width:20px;height:20px}
body[data-page="match"] .xl-bnav a.on{color:#d7dee9}
body[data-page="match"] .xl-bnav .xl-bnav-fab{
  width:54px;
  height:54px;
  margin:-22px auto 0;
  color:#05231b;
  background:#15d8a6;
  box-shadow:0 14px 30px -14px rgba(21,216,166,.78);
}
body[data-page="match"] .xl-foot{display:none !important}

@media (min-width:981px){
  body[data-page="match"] .xl-bnav{display:none !important}
  body[data-page="match"]{padding-bottom:0 !important}
}
@media (max-width:480px){
  body[data-page="match"] .xl-mp-wrap{padding-left:26px;padding-right:26px;border-left:0;border-right:0}
  body[data-page="match"] .xl-mp-hero2{grid-template-columns:minmax(0,1fr) 126px minmax(0,1fr);column-gap:6px;padding-top:6px !important}
  body[data-page="match"] .xl-mp-tlogo{width:58px !important;height:58px !important}
  body[data-page="match"] .xl-mp-bigscore{font-size:38px;gap:11px}
  body[data-page="match"] .xl-mp-cta-btn{min-width:128px;font-size:12.5px !important}
}
@media (max-width:390px){
  body[data-page="match"] .xl-mp-wrap{padding-left:20px;padding-right:20px}
  body[data-page="match"] .xl-mp-hero2{grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr)}
  body[data-page="match"] .xl-mp-cta{gap:8px}
  body[data-page="match"] .xl-mp-cta-btn{min-width:118px;padding:0 12px !important}
  body[data-page="match"] .xl-mp-tname{font-size:12.5px;max-width:104px}
}


/* ============================================================
   v61 — Premium stats polish + Lineups card (right of Stats)
   ============================================================ */
body[data-page="match"] .xl-mp-wrap{
  width:min(100%, 980px);
  max-width:980px;
}
.xl-mp-stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (min-width:860px){
  .xl-mp-stats-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
  .xl-mp-stats-grid-full{ grid-template-columns:1fr; }
}

/* Premium stats card refinements */
.xl-stats-card{
  margin-bottom:0 !important;
  background:
    radial-gradient(140% 90% at 10% -10%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(140% 90% at 100% 110%, rgba(34,197,94,.10), transparent 55%),
    linear-gradient(180deg,#0f1727 0%,#0a1120 100%) !important;
  border:1px solid rgba(148,163,184,.10) !important;
  border-radius:20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 60px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(59,130,246,.04) !important;
}
.xl-stats-card .xl-dial-num{font-family:'Inter',system-ui,sans-serif;font-weight:800}
.xl-stats-card .xl-dial-num.h{background:linear-gradient(180deg,#eaf1ff,#7aa6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.xl-stats-card .xl-dial-num.a{background:linear-gradient(180deg,#eafff1,#7ce0a4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.xl-stats-card .xl-dial-ring{filter:drop-shadow(0 6px 14px rgba(59,130,246,.22)) drop-shadow(0 6px 14px rgba(34,197,94,.18))}

/* Lineups card */
.xl-lineups-card{
  position:relative;
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(120% 80% at 0% 110%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg,#0f1727 0%,#0a1120 100%);
  border:1px solid rgba(148,163,184,.10);
  border-radius:20px;
  padding:18px 16px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 60px -28px rgba(0,0,0,.7);
}
.xl-lu-card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 4px 14px;margin-bottom:12px;
  border-bottom:1px solid rgba(148,163,184,.10);
}
.xl-lu-card-title{font-weight:700;font-size:15px;color:#eaf1ff;letter-spacing:.01em}
.xl-lu-card-sub{font-size:11.5px;color:#8b94a8;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.xl-lu-card-sub em{font-style:normal;opacity:.55;padding:0 4px}
.xl-lu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xl-lu-col{min-width:0}
.xl-lu-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 4px}
.xl-lu-col-away .xl-lu-head{flex-direction:row-reverse;text-align:right}
.xl-lu-badge{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.xl-lu-badge img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.xl-lu-badge .xl-lu-ph{font:800 12px/1 Inter,sans-serif;color:#cbd5e1}
.xl-lu-team{font-size:13px;font-weight:700;color:#e8ecf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xl-lu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.xl-lu-row{
  display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;
  padding:7px 8px;border-radius:8px;
  font-size:13px;color:#dfe5f1;
  transition:background .15s ease;
}
.xl-lu-row:hover{background:rgba(148,163,184,.05)}
.xl-lu-col-away .xl-lu-row{grid-template-columns:auto 1fr 24px;text-align:right}
.xl-lu-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  font:800 11px/1 Inter,sans-serif;
  font-variant-numeric:tabular-nums;
  background:rgba(59,130,246,.14);color:#9dc0ff;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.25);
}
.xl-lu-col-away .xl-lu-num{order:3;background:rgba(34,197,94,.14);color:#8ee2ad;box-shadow:inset 0 0 0 1px rgba(34,197,94,.28)}
.xl-lu-num-empty{background:rgba(148,163,184,.08);box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)}
.xl-lu-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#e8ecf3}
.xl-lu-col-away .xl-lu-name{order:2}
.xl-lu-pos{
  font:700 10px/1 Inter,sans-serif;color:#7c8aa6;
  padding:4px 6px;border-radius:5px;background:rgba(148,163,184,.06);letter-spacing:.05em
}
.xl-lu-col-away .xl-lu-pos{order:1}
.xl-lu-sub-label{
  margin:14px 4px 6px;font:700 10.5px/1 Inter,sans-serif;
  color:#7c8aa6;letter-spacing:.12em;text-transform:uppercase
}
.xl-lu-list-sub .xl-lu-row{font-size:12.5px;color:#bfc7d6}
.xl-lu-list-sub .xl-lu-num{background:rgba(148,163,184,.08);color:#bfc7d6;box-shadow:inset 0 0 0 1px rgba(148,163,184,.16)}
.xl-lu-empty,.xl-lu-empty-big{
  text-align:center;color:#8b94a8;font-size:13px;
  padding:18px 10px;border:1px dashed rgba(148,163,184,.14);border-radius:12px;
}
.xl-lu-empty-big{margin-top:6px;padding:34px 16px}

@media (max-width:640px){
  .xl-lu-grid{grid-template-columns:1fr;gap:18px}
  .xl-lu-col-away .xl-lu-head{flex-direction:row;text-align:left}
  .xl-lu-col-away .xl-lu-row{grid-template-columns:24px 1fr auto;text-align:left}
  .xl-lu-col-away .xl-lu-num{order:0}
  .xl-lu-col-away .xl-lu-name{order:0}
  .xl-lu-col-away .xl-lu-pos{order:0}
}

/* v62 — tabs: 4 evenly spaced, never wrap */
body[data-page="match"] .xl-mp-tabs{ flex-wrap:nowrap !important; }
body[data-page="match"] .xl-mp-tab{ white-space:nowrap; min-width:0; padding-left:2px; padding-right:2px; font-size:12.5px; }
@media (max-width:380px){
  body[data-page="match"] .xl-mp-tab{ font-size:11.5px; }
}

/* ============================================================
   v63 — Pitch lineup view (AiScore-style)
   ============================================================ */
.xl-lineups-pitch-wrap{padding:0;overflow:hidden;border-radius:18px;background:transparent;border:0;box-shadow:none}
.xl-pitch-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  font:700 13px/1 Inter,sans-serif;color:#eaf1ff;
  background:linear-gradient(180deg,#0e1626,#0a1120);
  border:1px solid rgba(148,163,184,.10);
}
.xl-pitch-bar-home{border-radius:14px 14px 0 0;border-bottom:0}
.xl-pitch-bar-away{border-radius:0 0 14px 14px;border-top:0}
.xl-pb-team{display:inline-flex;align-items:center;gap:8px;min-width:0}
.xl-pb-team img{width:20px;height:20px;object-fit:contain}
.xl-pb-team b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-pb-form{
  font:800 12px/1 Inter,sans-serif;
  letter-spacing:.06em;color:#cbd5e1;
  background:rgba(148,163,184,.10);padding:6px 9px;border-radius:6px;
}

.xl-pitch{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 28px, transparent 28px 56px),
    linear-gradient(180deg,#0e6b3a 0%, #0a5a30 50%, #0e6b3a 100%);
  padding:14px 8px;
  display:grid;grid-template-rows:1fr 1fr;gap:6px;
  border-left:1px solid rgba(148,163,184,.10);
  border-right:1px solid rgba(148,163,184,.10);
  min-height:520px;
  overflow:hidden;
}
.xl-pitch-lines{position:absolute;inset:8px;pointer-events:none;color:rgba(255,255,255,.28)}
.xl-pl-mid{position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.6}
.xl-pl-circle{position:absolute;left:50%;top:50%;width:84px;height:84px;border:1px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);opacity:.55}
.xl-pl-box{position:absolute;left:50%;width:62%;height:80px;border:1px solid currentColor;transform:translateX(-50%);opacity:.5}
.xl-pl-box.top{top:0;border-top:0}
.xl-pl-box.bot{bottom:0;border-bottom:0}
.xl-pl-six{position:absolute;left:50%;width:34%;height:34px;border:1px solid currentColor;transform:translateX(-50%);opacity:.5}
.xl-pl-six.top{top:0;border-top:0}
.xl-pl-six.bot{bottom:0;border-bottom:0}

.xl-pitch-half{position:relative;display:flex;flex-direction:column;justify-content:space-around;gap:6px;z-index:1}
.xl-pitch-row{display:grid;justify-items:center;align-items:center;gap:6px}

.xl-pp{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:90px}
.xl-pp-num{
  position:absolute;top:-2px;left:50%;transform:translate(-130%,0);
  font:800 10px/1 Inter,sans-serif;color:rgba(255,255,255,.65);
  letter-spacing:.02em;
}
.xl-pp-av{
  position:relative;
  width:42px;height:42px;border-radius:50%;
  background:#cbd5e1;
  box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.9);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.xl-pp-av img{width:100%;height:100%;object-fit:cover;display:block;background:#1f2937}
.xl-pp-av.noimg{background:linear-gradient(180deg,#475569,#1f2937)}
.xl-pp-init{font:800 16px/1 Inter,sans-serif;color:#111827}
.xl-pp-cap{
  position:absolute;left:-2px;bottom:-2px;
  width:14px;height:14px;border-radius:50%;
  background:#2563eb;color:#fff;
  font:800 9px/14px Inter,sans-serif;text-align:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
}
.xl-pp-nm{
  font:700 10.5px/1.15 Inter,sans-serif;color:#fff;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  max-width:90px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Subs lists below the pitch */
.xl-subs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px;
  background:linear-gradient(180deg,#0a1120,#080d19);
  border:1px solid rgba(148,163,184,.10);
  border-top:0;border-radius:0 0 14px 14px;
}
.xl-subs-head{
  display:flex;align-items:center;gap:6px;
  font:700 10.5px/1 Inter,sans-serif;color:#8b94a8;
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px;
}
.xl-subs-dot{width:6px;height:6px;border-radius:50%;background:#22c55e}
.xl-subs-away .xl-subs-dot{background:#3b82f6}
.xl-subs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.xl-subs-list li{
  display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;
  font-size:12px;color:#cdd3df;padding:5px 6px;border-radius:6px;
}
.xl-subs-list li:hover{background:rgba(148,163,184,.05)}
.xl-subs-num{
  text-align:center;font:800 10.5px/1 Inter,sans-serif;
  color:#9dc0ff;background:rgba(59,130,246,.12);
  padding:4px 0;border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.22);
}
.xl-subs-away .xl-subs-num{color:#8ee2ad;background:rgba(34,197,94,.12);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
.xl-subs-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.xl-subs-pos{font:700 9.5px/1 Inter,sans-serif;color:#7c8aa6;background:rgba(148,163,184,.08);padding:3px 5px;border-radius:4px;letter-spacing:.05em}

@media (max-width:520px){
  .xl-pitch{min-height:460px;padding:10px 4px}
  .xl-pp-av{width:36px;height:36px}
  .xl-pp-nm{font-size:10px;max-width:72px}
  .xl-subs-grid{grid-template-columns:1fr}
}

/* v64 — lineup avatar fallback polish */
.xl-pp-av{background:linear-gradient(180deg,#475569,#1f2937)}
.xl-pp-init{font:800 14px/1 Inter,sans-serif;color:#fff;letter-spacing:-.02em}
.xl-pp-pos{
  position:absolute;top:-4px;right:-6px;
  font:800 9px/1 Inter,sans-serif;letter-spacing:.04em;
  color:#0f1a2a;background:#fff;padding:3px 4px;border-radius:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ============== v65 — premium match redesign ============== */
.xl-mp-topbar-2{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;
  padding:14px 10px 10px;color:#e6ecf5;
}
.xl-mp-topbar-2 .xl-mp-back{
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  color:#cdd6e3;text-decoration:none;
}
.xl-mp-topbar-2 .xl-mp-back:hover{background:rgba(255,255,255,.06)}
.xl-mp-title-wrap{text-align:center;line-height:1.15;min-width:0}
.xl-mp-title{font:800 17px/1.1 Inter,sans-serif;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-mp-subtitle{font:600 12px/1.2 Inter,sans-serif;color:#8a96ac;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-mp-actions{display:flex;gap:6px}
.xl-mp-iconbtn{
  width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#cdd6e3;
  display:grid;place-items:center;cursor:pointer;
}
.xl-mp-iconbtn:hover{background:rgba(255,255,255,.06)}

/* Hero */
.xl-mp-herox{
  position:relative;margin:6px 12px 0;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#0e1828 0%,#0a1322 100%);
  border:1px solid rgba(148,163,184,.12);
  box-shadow:0 18px 50px -25px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  padding:46px 16px 14px;
}
.xl-mp-herox-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(20,30,55,.7), transparent 70%),
    linear-gradient(180deg,#0d1a2e,#0a1322);
  opacity:.95;z-index:0;
}
.xl-mp-herox-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px, 34px 34px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
  opacity:.5;
}
.xl-mp-herox > *{position:relative;z-index:1}
.xl-mp-livepill{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(239,68,68,.14);color:#fca5a5;
  font:800 11.5px/1 Inter,sans-serif;letter-spacing:.08em;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(239,68,68,.35);
  box-shadow:0 4px 14px -4px rgba(239,68,68,.45);
  z-index:2;
}
.xl-mp-livepill.sched{background:rgba(148,163,184,.12);color:#cbd5e1;border-color:rgba(148,163,184,.3);box-shadow:none}
.xl-mp-livepill i{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.25);animation:xlPulse 1.4s infinite}
@keyframes xlPulse{0%,100%{opacity:1}50%{opacity:.4}}

.xl-mp-herox-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:6px}
.xl-mp-herox-team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.xl-mp-herox-logo{
  width:74px;height:74px;border-radius:14px;background:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;
}
.xl-mp-herox-logo img{width:88%;height:88%;object-fit:contain}
.xl-mp-herox-logo .ph{font:900 26px/1 Inter,sans-serif;color:#0f172a}
.xl-mp-herox-name{font:900 15px/1.1 Inter,sans-serif;color:#fff;letter-spacing:.04em;text-align:center;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.xl-mp-herox-code{font:700 11px/1 Inter,sans-serif;color:#94a3b8;letter-spacing:.1em}
.xl-mp-herox-center{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px}
.xl-mp-herox-score{display:flex;align-items:center;gap:14px;font:300 52px/1 'Inter',sans-serif;color:#fff;letter-spacing:-.02em}
.xl-mp-herox-score b{font-weight:300;min-width:34px;text-align:center}
.xl-mp-herox-score span{color:#475569;font-weight:300}
.xl-mp-herox-ht{font:600 11.5px/1 Inter,sans-serif;color:#7d8aa3;letter-spacing:.04em;margin-top:2px;min-height:12px}

.xl-mp-meta{
  display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:14px;font:600 11.5px/1 Inter,sans-serif;color:#94a3b8;
}
.xl-mp-meta span{display:inline-flex;align-items:center;gap:5px}
.xl-mp-meta span.dot{color:#475569;padding:0 2px}
.xl-mp-meta svg{color:#64748b}

.xl-mp-ctapair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.xl-mp-ctapair:empty{display:none}
.xl-mp-ctapair:has(.xl-cta-btn:only-child){grid-template-columns:1fr;justify-items:center}
.xl-mp-ctapair:has(.xl-cta-btn:only-child) .xl-cta-btn{width:auto;max-width:140px;min-width:110px;padding:0 12px;height:26px;border-radius:999px;margin:0 auto;font-size:11px;gap:5px;background:linear-gradient(180deg,#2a2f3a,#1a1f2a)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.06)!important;color:#e5e7eb}
.xl-mp-ctapair:has(.xl-cta-btn:only-child) .xl-cta-btn svg{width:8px;height:8px;background:#3b82f6;border-radius:50%;padding:2px;box-sizing:content-box;color:#fff}
@media (max-width:480px){
  .xl-mp-ctapair:has(.xl-cta-btn:only-child) .xl-cta-btn{max-width:130px;min-width:105px;height:24px;font-size:10.5px;padding:0 10px}
}
.xl-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:12px;border:0;cursor:pointer;
  font:700 14px/1 Inter,sans-serif;letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.xl-cta-btn.primary{
  background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;
  box-shadow:0 8px 22px -8px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.xl-cta-btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(59,130,246,.7)}
.xl-cta-btn.ghost{
  background:transparent;color:#34d399;border:1.5px solid rgba(52,211,153,.55);
}
.xl-cta-btn.ghost:hover{background:rgba(52,211,153,.08)}

.xl-mp-secrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.xl-mp-secbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);color:#cdd6e3;
  font:600 12.5px/1 Inter,sans-serif;cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.xl-mp-secbtn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.xl-mp-secbtn.on{color:#60a5fa;border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.08)}
.xl-mp-secbtn.done{color:#34d399;border-color:rgba(52,211,153,.4)}

/* Tabs 5-col */
.xl-mp-tabs.xl-mp-tabs-5{grid-template-columns:repeat(5,1fr) !important;margin:14px 12px 6px;padding:0;background:transparent;border:0;border-bottom:1px solid rgba(148,163,184,.12);border-radius:0;gap:0}
.xl-mp-tabs-5 .xl-mp-tab{
  background:transparent;border:0;color:#7e8ba3;
  font:700 13px/1 Inter,sans-serif;padding:12px 4px;border-radius:0;
  position:relative;
}
.xl-mp-tabs-5 .xl-mp-tab.on{color:#60a5fa;background:transparent}
.xl-mp-tabs-5 .xl-mp-tab.on::after{
  content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;
  background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px 3px 0 0;
}

/* Chart card */
.xl-chart-card{margin:10px 12px}
.xl-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:0 4px}
.xl-chart-title{font:800 11px/1 Inter,sans-serif;color:#cbd5e1;letter-spacing:.12em}
.xl-chart-legend{display:flex;gap:14px;font:600 11px/1 Inter,sans-serif;color:#94a3b8}
.xl-chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.xl-chart-legend .h i{background:#60a5fa}
.xl-chart-legend .a i{background:#4ade80}

/* Mini stat cards row */
.xl-ms-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 12px 0}
.xl-ms-card{
  background:linear-gradient(180deg,rgba(20,30,48,.7),rgba(13,20,36,.7));
  border:1px solid rgba(148,163,184,.1);border-radius:14px;padding:12px 10px;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.5);
}
.xl-ms-title{font:800 10.5px/1 Inter,sans-serif;color:#94a3b8;letter-spacing:.12em;text-align:center;margin-bottom:8px}
.xl-ms-pos{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:4px}
.xl-ms-pos-num{font:800 15px/1 Inter,sans-serif;color:#60a5fa;text-align:center}
.xl-ms-pos-num.a{color:#4ade80}
.xl-ms-pos-num small{font-weight:700;color:#7e8ba3;margin-left:1px}
.xl-ms-pos .xl-dial{margin:0}
.xl-ms-pos .xl-dial-label{display:none}
.xl-ms-pos .xl-dial-num{display:none}
.xl-ms-pos .xl-dial-ring{width:56px;height:56px}

.xl-ms-pair{display:flex;flex-direction:column;gap:6px}
.xl-ms-pair-row{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px}
.xl-ms-pair-row b{font:800 18px/1 Inter,sans-serif;color:#60a5fa}
.xl-ms-pair-row b.a{color:#4ade80}

.xl-wbar.xl-wbar-inline{display:block;padding:0}
.xl-wbar.xl-wbar-inline .xl-wbar-num{display:none}
.xl-wbar.xl-wbar-inline .xl-wbar-mid{padding:0}
.xl-wbar.xl-wbar-inline .xl-wbar-label{display:none}
.xl-wbar.xl-wbar-inline .xl-wbar-track{height:5px;margin:0}

/* Wide bars card */
.xl-wbars-card{
  margin:10px 12px;padding:14px 14px 8px;
  background:linear-gradient(180deg,rgba(20,30,48,.7),rgba(13,20,36,.7));
  border:1px solid rgba(148,163,184,.1);border-radius:14px;
  display:flex;flex-direction:column;gap:12px;
}
.xl-wbar{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:10px}
.xl-wbar-num{font:800 14px/1 Inter,sans-serif;color:#e6ecf5;text-align:center}
.xl-wbar-num.h{color:#cbd5e1}
.xl-wbar-num.a{color:#cbd5e1}
.xl-wbar-mid{display:flex;flex-direction:column;gap:4px;min-width:0}
.xl-wbar-label{font:600 11.5px/1 Inter,sans-serif;color:#94a3b8;text-align:center}
.xl-wbar-track{display:flex;height:6px;border-radius:6px;background:rgba(148,163,184,.08);overflow:hidden}
.xl-wbar-track .h{background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:6px 0 0 6px}
.xl-wbar-track .a{background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:0 6px 6px 0;margin-left:auto}

/* Mini pitch strip (overview) */
.xl-lup-mini{
  margin:10px 12px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,30,48,.7),rgba(13,20,36,.7));
  border:1px solid rgba(148,163,184,.1);
}
.xl-lup-mini-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:10px 14px;font:700 12.5px/1 Inter,sans-serif;color:#e6ecf5;
  background:rgba(15,23,42,.5);
}
.xl-lup-mini-side{display:flex;align-items:center;gap:8px}
.xl-lup-mini-side.a{justify-content:flex-end}
.xl-lup-mini-side img{width:18px;height:18px;object-fit:contain}
.xl-lup-mini-vs{color:#64748b;font-weight:700;font-size:11.5px;letter-spacing:.1em}
.xl-lup-mini-pitch{
  position:relative;height:120px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 28%, transparent 30%),
    linear-gradient(180deg,#1e7a3f 0%,#1a6a37 50%,#1e7a3f 100%);
  display:grid;grid-template-rows:1fr 1fr;
}
.xl-lup-mini-lines{position:absolute;inset:0;pointer-events:none}
.xl-lup-mini-lines .m{position:absolute;left:8px;right:8px;top:50%;height:1px;background:rgba(255,255,255,.35)}
.xl-lup-mini-lines .c{position:absolute;left:50%;top:50%;width:36px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:50%;transform:translate(-50%,-50%)}
.xl-lup-mini-half{display:flex;justify-content:space-around;align-items:center;padding:6px 10px}
.xl-mini-dot{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.xl-mini-dot.h{background:#3b82f6;border:1.5px solid #fff}
.xl-mini-dot.a{background:#22c55e;border:1.5px solid #fff}
.xl-mini-dot.cap{background:#f59e0b}
.xl-lup-mini-view{
  position:absolute;right:10px;bottom:10px;
  background:rgba(15,23,42,.65);border:1px solid rgba(96,165,250,.4);
  color:#93c5fd;font:700 11.5px/1 Inter,sans-serif;
  padding:7px 10px;border-radius:8px;cursor:pointer;
  backdrop-filter:blur(4px);
}
.xl-lup-mini-view:hover{background:rgba(59,130,246,.18)}

/* H2H strip (overview) */
.xl-h2h-strip{
  margin:10px 12px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(20,30,48,.7),rgba(13,20,36,.7));
  border:1px solid rgba(148,163,184,.1);border-radius:14px;cursor:pointer;
}
.xl-h2h-strip-title{font:800 10.5px/1 Inter,sans-serif;color:#94a3b8;letter-spacing:.12em;margin-bottom:10px}
.xl-h2h-strip-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xl-h2h-strip-chips{display:flex;gap:10px}
.xl-h2h-chip{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:800 12.5px/1 Inter,sans-serif;color:#fff;
}
.xl-h2h-chip.w{background:#16a34a;box-shadow:0 4px 10px -3px rgba(22,163,74,.5)}
.xl-h2h-chip.l{background:#ef4444;box-shadow:0 4px 10px -3px rgba(239,68,68,.5)}
.xl-h2h-chip.d{background:#475569;color:#cbd5e1}
.xl-h2h-strip-arrow{color:#64748b;font-size:22px;line-height:1}

.xl-standings-soon{padding:40px 16px;text-align:center}
.xl-standings-soon .xl-empty-ic{font-size:42px;margin-bottom:8px}
.xl-standings-soon .xl-empty-title{font:800 16px/1 Inter,sans-serif;color:#cbd5e1;margin-bottom:6px}
.xl-standings-soon .xl-empty-sub{font:600 12.5px/1.4 Inter,sans-serif;color:#7e8ba3}

@media (max-width:480px){
  .xl-mp-herox{margin:6px 8px 0;padding:42px 12px 12px}
  .xl-mp-herox-logo{width:60px;height:60px;border-radius:12px}
  .xl-mp-herox-score{font-size:42px;gap:10px}
  .xl-mp-herox-name{font-size:13px;max-width:90px}
  .xl-ms-row{gap:6px;margin:8px 8px 0}
  .xl-ms-card{padding:10px 8px}
  .xl-ms-pair-row b{font-size:15px}
  .xl-wbars-card{margin:10px 8px;padding:12px 12px 6px}
  .xl-lup-mini, .xl-h2h-strip{margin-left:8px;margin-right:8px}
  .xl-mp-tabs.xl-mp-tabs-5{margin-left:8px;margin-right:8px}
  .xl-mp-tabs-5 .xl-mp-tab{font-size:12px;padding:11px 2px}
}

/* ============== v66 — pixel-tight match to reference ============== */

/* Stadium photo backdrop on hero */
.xl-mp-herox{padding:48px 18px 16px}
.xl-mp-herox-bg{
  background:
    linear-gradient(180deg, rgba(8,14,28,.55) 0%, rgba(8,14,28,.85) 75%, rgba(8,14,28,.95) 100%),
    radial-gradient(60% 80% at 50% 30%, rgba(120,160,210,.18), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23223a55'/><stop offset='1' stop-color='%23070d1c'/></linearGradient></defs><rect width='600' height='320' fill='url(%23g)'/><g fill='%23000' opacity='.55'><polygon points='0,210 90,160 180,205 270,150 360,200 450,155 540,200 600,170 600,320 0,320'/></g><g stroke='%23ffd57a' stroke-opacity='.06' stroke-width='1'><line x1='0' y1='60' x2='600' y2='60'/><line x1='0' y1='90' x2='600' y2='90'/><line x1='0' y1='120' x2='600' y2='120'/></g><g fill='%23ffd57a' opacity='.10'><circle cx='80' cy='40' r='2'/><circle cx='160' cy='25' r='2'/><circle cx='240' cy='38' r='2'/><circle cx='320' cy='20' r='2'/><circle cx='400' cy='38' r='2'/><circle cx='480' cy='28' r='2'/><circle cx='540' cy='40' r='2'/></g></svg>") center/cover no-repeat;
}
.xl-mp-herox-bg::after{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px, 42px 42px;
  opacity:.35;
}

/* Bigger square flag logos in hero */
.xl-mp-herox-logo{
  width:84px;height:84px;border-radius:13px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12);
}
.xl-mp-herox-logo img{width:100%;height:100%;object-fit:cover}
.xl-mp-herox-row{grid-template-columns:1fr auto 1fr;gap:6px;margin-top:8px;align-items:start}
.xl-mp-herox-team{gap:10px}
.xl-mp-herox-center{min-width:150px;padding-top:12px}
.xl-mp-herox-score{font-size:58px;gap:18px}
.xl-mp-herox-score b{min-width:38px;font-weight:200}
.xl-mp-herox-score span{font-size:42px;color:#5c6b85}
.xl-mp-herox-ht{margin-top:6px;font-size:12px;color:#8a96ac;letter-spacing:.06em}
.xl-mp-herox-name{font-size:16px;letter-spacing:.05em;max-width:140px}
.xl-mp-herox-code{font-size:11.5px;letter-spacing:.14em;margin-top:-2px}

/* LIVE pill — rounded, slightly bigger */
.xl-mp-livepill{
  top:14px;padding:8px 14px;font-size:12px;letter-spacing:.1em;
  background:rgba(15,23,42,.55);color:#fda4a4;
  border:1px solid rgba(239,68,68,.45);backdrop-filter:blur(6px);
}
.xl-mp-livepill i{box-shadow:0 0 0 5px rgba(239,68,68,.25)}

/* Meta row tighter */
.xl-mp-meta{margin-top:16px;gap:8px;font-size:12px;color:#a3aec3}
.xl-mp-meta span.dot{color:#475569;padding:0 1px;font-weight:700}

/* CTA pair sized like reference */
.xl-mp-ctapair{margin-top:16px;gap:12px}
.xl-cta-btn{height:48px;border-radius:14px;font-size:14.5px;letter-spacing:.01em}
.xl-cta-btn.primary svg{margin-right:1px}
.xl-cta-btn.ghost{border-width:1.5px}

/* Secondary row buttons */
.xl-mp-secrow{margin-top:12px;gap:10px}
.xl-mp-secbtn{height:42px;border-radius:12px;font-size:12.5px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.06)}
.xl-mp-secbtn svg{color:#94a3b8}

/* Tabs underline color/feel */
.xl-mp-tabs.xl-mp-tabs-5{margin-top:18px;border-bottom-color:rgba(148,163,184,.14)}
.xl-mp-tabs-5 .xl-mp-tab.on{color:#3b82f6}
.xl-mp-tabs-5 .xl-mp-tab.on::after{background:#3b82f6;height:3px;left:25%;right:25%;border-radius:2px 2px 0 0}

/* Chart card — softer & label alignment */
.xl-chart-card{
  background:linear-gradient(180deg,rgba(20,30,48,.7),rgba(13,20,36,.7));
  border:1px solid rgba(148,163,184,.1);border-radius:14px;
  padding:14px 12px 10px;
}
.xl-chart-head{margin-bottom:4px;padding:0 2px}
.xl-chart-title{font-size:10.5px;letter-spacing:.14em;color:#cbd5e1}
.xl-chart-legend{gap:12px}

/* Event tooltip bubble on chart */
.xl-chart-tip{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:#fff;color:#0f172a;
  font:700 11.5px/1 Inter,sans-serif;letter-spacing:.01em;
  padding:8px 12px;border-radius:10px;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
  white-space:nowrap;pointer-events:none;z-index:3;
}
.xl-chart-tip::after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:#fff;border-radius:2px;
}
.xl-chart-wrap{position:relative}

/* Mini stat cards — match reference */
.xl-ms-row{gap:10px;margin-top:10px}
.xl-ms-card{padding:14px 12px;border-radius:14px}
.xl-ms-title{font-size:10.5px;letter-spacing:.14em;margin-bottom:10px}
.xl-ms-pos{grid-template-columns:1fr 64px 1fr;gap:0}
.xl-ms-pos-num{font-size:16px}
.xl-ms-pos-num small{font-size:11px;font-weight:700}
.xl-ms-pos .xl-dial-ring{width:60px;height:60px}
.xl-ms-pair-row b{font-size:20px;font-weight:300;color:#fff}
.xl-ms-pair-row b.a{color:#fff}

/* Wide bars card spacing */
.xl-wbars-card{margin-top:12px;padding:16px 16px 10px;gap:14px}
.xl-wbar{grid-template-columns:38px 1fr 38px;gap:12px}
.xl-wbar-num{font-size:15px;font-weight:600;color:#cbd5e1}
.xl-wbar-label{font-size:12px;color:#9aa6bc}
.xl-wbar-track{height:5px}

/* Mini pitch lineup — closer match */
.xl-lup-mini{margin-top:12px}
.xl-lup-mini-pitch{height:140px}
.xl-mini-dot{width:13px;height:13px}
.xl-lup-mini-view{font-size:12px;color:#60a5fa;background:transparent;border:0;right:14px;bottom:10px;padding:4px 0}
.xl-lup-mini-view:hover{background:transparent;color:#93c5fd}

/* H2H strip chips bigger */
.xl-h2h-chip{width:34px;height:34px;font-size:13.5px}
.xl-h2h-strip{margin-top:12px;padding:14px 16px}
.xl-h2h-strip-title{font-size:10.5px;letter-spacing:.14em;margin-bottom:12px}
.xl-h2h-strip-chips{gap:12px}
.xl-h2h-strip-arrow{font-size:24px;color:#475569}

@media (max-width:480px){
  .xl-mp-herox-logo{width:68px;height:68px}
  .xl-mp-herox-score{font-size:48px;gap:12px}
  .xl-mp-herox-score b{min-width:30px}
  .xl-mp-herox-name{font-size:13.5px;max-width:100px}
  .xl-mp-herox-center{min-width:108px}
  .xl-cta-btn{height:44px;font-size:13.5px}
  .xl-mp-secbtn{height:38px;font-size:11.5px}
}

/* ============== v67 — integrated cohesive page (no overlay feel) ============== */

/* Match-page ambient: one continuous deep-navy page with soft blue glow at top */
.xl-mp-wrap{
  position:relative;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(59,130,246,.18), transparent 65%),
    radial-gradient(700px 400px at 50% 100%, rgba(15,30,60,.6), transparent 70%),
    linear-gradient(180deg, #0a1124 0%, #070c1b 100%);
  min-height:100vh;
  padding-bottom:40px;
}

/* Hero — clean dark scene, no SVG stadium illustration */
.xl-mp-herox{
  margin:8px 14px 0;
  border-radius:18px;
  padding:46px 16px 18px;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  overflow:hidden;
  position:relative;
}
.xl-mp-herox-bg{
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(59,130,246,.14), transparent 65%),
    linear-gradient(180deg, #0d1830 0%, #0a1224 100%);
}
.xl-mp-herox-bg::after{display:none}

/* Soften the LIVE pill */
.xl-mp-livepill{
  background:rgba(11,18,36,.7);color:#fda4a4;
  border:1px solid rgba(239,68,68,.4);
  padding:7px 13px;font-size:11.5px;
}

/* Hero numbers — slightly tighter */
.xl-mp-herox-score{font-size:54px;gap:14px}
.xl-mp-herox-score b{min-width:34px}
.xl-mp-herox-score span{font-size:38px}
.xl-mp-herox-logo{width:78px;height:78px;border-radius:12px}

/* Meta row — subtle, no card around */
.xl-mp-meta{margin-top:18px;color:#94a3b8;font-size:12px}

/* Tabs — flush with page, no offset */
.xl-mp-tabs.xl-mp-tabs-5{
  margin:18px 14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* ─── Unified section surface (no floating cards) ─── */
.xl-chart-card,
.xl-ms-card,
.xl-wbars-card,
.xl-lup-mini,
.xl-h2h-strip,
.xl-events-card{
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:none !important;
  border-radius:14px !important;
}

/* Tighter, equal section margins */
.xl-chart-card,
.xl-wbars-card,
.xl-lup-mini,
.xl-h2h-strip,
.xl-events-card{
  margin:12px 14px 0 !important;
}
.xl-ms-row{margin:12px 14px 0 !important;gap:8px}
.xl-ms-card{padding:14px 10px}

/* Section labels — soft uppercase, no heavy chrome */
.xl-chart-title,
.xl-ms-title,
.xl-h2h-strip-title{
  color:#7e8ba3;font-weight:700;letter-spacing:.16em;font-size:10.5px;
}

/* Chart container softening */
.xl-chart-card{padding:14px 12px 8px}
.xl-chart-tip{
  background:#ffffff;color:#0f172a;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  font-size:11.5px;
}

/* Mini pitch — keep the green field but lose the dark frame */
.xl-lup-mini{overflow:hidden;padding:0}
.xl-lup-mini-bar{background:transparent;border-bottom:1px solid rgba(255,255,255,.05)}

/* H2H strip — flatter */
.xl-h2h-chip{box-shadow:none}
.xl-h2h-strip-arrow{color:#475569}

/* Wide bars — looser breathing room */
.xl-wbars-card{padding:16px 18px 12px;gap:14px}
.xl-wbar-num{color:#cbd5e1;font-weight:600}
.xl-wbar-label{color:#8a96ac;font-weight:600}

/* Possession donut tightening */
.xl-ms-pos-num{font-weight:700;font-size:15px;color:#fff}
.xl-ms-pos-num.h{color:#60a5fa}
.xl-ms-pos-num.a{color:#4ade80}

/* Mini-stat numbers feel like one set */
.xl-ms-pair-row b{color:#fff;font-weight:600;font-size:18px}

/* Topbar tighter, sits naturally above hero */
.xl-mp-topbar-2{padding:14px 12px 6px}
.xl-mp-title{font-size:16px}
.xl-mp-subtitle{font-size:11.5px;color:#7e8ba3}

@media (max-width:480px){
  .xl-mp-herox{margin:8px 10px 0;padding:42px 14px 14px}
  .xl-chart-card,.xl-wbars-card,.xl-lup-mini,.xl-h2h-strip,.xl-events-card{margin-left:10px !important;margin-right:10px !important}
  .xl-ms-row{margin-left:10px !important;margin-right:10px !important}
  .xl-mp-tabs.xl-mp-tabs-5{margin-left:10px;margin-right:10px}
}

/* ============== v68 — real live-football score page ============== */
body[data-page="match"]{
  --fb-bg:#10181b;
  --fb-panel:#11181b;
  --fb-panel-2:#171f22;
  --fb-text:#f3f4f4;
  --fb-muted:#9ba0a3;
  --fb-blue:#0753f2;
  --fb-green:#12bd55;
  --fb-red:#ff3048;
  background:#0d1417 !important;
  padding-bottom:0 !important;
}
body[data-page="match"] .xl-main{background:#0d1417 !important}
body[data-page="match"] .xl-mp-wrap{
  width:min(100%,883px) !important;
  max-width:883px !important;
  margin:0 auto !important;
  padding:0 !important;
  min-height:100svh;
  color:var(--fb-text);
  background:
    radial-gradient(520px 430px at 10% 4%, rgba(25,63,39,.38), transparent 64%),
    radial-gradient(520px 430px at 92% 6%, rgba(82,18,25,.48), transparent 66%),
    linear-gradient(180deg,#10181b 0,#10181b 100%) !important;
  border:0 !important;
}
body[data-page="match"] .xl-bnav,
body[data-page="match"] .xl-foot{display:none !important}

/* App-like top header */
body[data-page="match"] .xl-mp-topbar-2{
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) 96px !important;
  align-items:center;
  padding:48px 36px 16px !important;
  background:transparent !important;
  border:0 !important;
}
body[data-page="match"] .xl-mp-topbar-2 .xl-mp-back,
body[data-page="match"] .xl-mp-topbar-2 .xl-mp-iconbtn{
  width:42px !important;height:42px !important;border-radius:50% !important;
  color:#fff !important;background:transparent !important;border:0 !important;opacity:.98;
}
body[data-page="match"] .xl-mp-topbar-2 .xl-mp-back svg{width:31px;height:31px;stroke-width:2.2}
body[data-page="match"] .xl-mp-title-wrap{text-align:center;min-width:0}
body[data-page="match"] .xl-mp-title{
  font:600 25px/1.15 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif !important;
  color:#f6f6f6 !important;letter-spacing:-.02em;
}
body[data-page="match"] .xl-mp-subtitle{display:none !important}
body[data-page="match"] .xl-mp-actions{justify-content:flex-end;gap:8px}
body[data-page="match"] .xl-mp-actions .xl-mp-iconbtn:first-child svg{width:34px;height:34px;stroke-width:1.9}
body[data-page="match"] .xl-mp-actions .xl-mp-iconbtn:last-child svg{width:25px;height:25px}

/* Scoreboard header: no fake card/overlay, just live-score content on the page */
body[data-page="match"] .xl-mp-herox{
  margin:0 !important;
  padding:18px 40px 6px !important;
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;overflow:visible !important;
}
body[data-page="match"] .xl-mp-herox-bg{display:none !important}
body[data-page="match"] .xl-mp-livepill{
  position:static !important;transform:none !important;margin:0 auto 16px !important;
  display:flex !important;width:max-content;background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--fb-red) !important;font:700 22px/1 Inter,sans-serif !important;letter-spacing:0 !important;padding:0 !important;
}
body[data-page="match"] .xl-mp-livepill i{display:none !important}
body[data-page="match"] .xl-mp-livepill.sched{color:#c8ccce !important;font-size:17px !important}
body[data-page="match"] .xl-mp-herox-row{
  display:grid !important;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr) !important;
  align-items:center !important;gap:14px !important;margin:0 !important;
}
body[data-page="match"] .xl-mp-herox-team{position:relative;display:flex !important;flex-direction:column;align-items:center;gap:12px;min-width:0;padding-top:0;justify-content:center}
body[data-page="match"] .xl-mp-herox-team::before{
  content:"☆";position:absolute;top:50%;transform:translateY(-50%);font:400 40px/1 Inter,sans-serif;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);
}
body[data-page="match"] .xl-mp-herox-team:first-child::before{left:0}
body[data-page="match"] .xl-mp-herox-team:last-child::before{right:0}
body[data-page="match"] .xl-mp-herox-logo{
  width:76px !important;height:76px !important;border-radius:5px !important;
  background:#fff !important;border:0 !important;padding:0 !important;overflow:hidden !important;
  box-shadow:0 1px 2px rgba(0,0,0,.28) !important;
}
body[data-page="match"] .xl-mp-herox-logo img{width:100% !important;height:100% !important;object-fit:contain !important;padding:5px}
body[data-page="match"] .xl-mp-herox-logo .ph{font:900 31px/1 Inter,sans-serif;color:#111}
body[data-page="match"] .xl-mp-herox-name{
  max-width:220px !important;white-space:normal !important;text-align:center !important;
  font:500 21px/1.15 Inter,sans-serif !important;color:#d8d9da !important;letter-spacing:-.025em !important;text-transform:none !important;
}
body[data-page="match"] .xl-mp-herox-code{
  position:absolute;top:50%;transform:translateY(-50%);color:#8d8e91 !important;font:600 15px/1 Inter,sans-serif !important;letter-spacing:0 !important;text-transform:none !important;
}
body[data-page="match"] .xl-mp-herox-team:first-child .xl-mp-herox-code{right:14px}
body[data-page="match"] .xl-mp-herox-team:last-child .xl-mp-herox-code{left:14px}
body[data-page="match"] .xl-mp-herox-code:not(:empty)::before{content:"["}
body[data-page="match"] .xl-mp-herox-code:not(:empty)::after{content:"]"}
body[data-page="match"] .xl-mp-herox-center{min-width:200px !important;gap:10px !important;padding-top:0 !important;justify-content:center !important}
body[data-page="match"] .xl-mp-herox-score{
  font:800 54px/1 Inter,sans-serif !important;letter-spacing:-.05em !important;color:#d7d8da !important;gap:11px !important;
}
body[data-page="match"] .xl-mp-herox-score b{font-weight:800 !important;min-width:42px !important;text-align:center;font-variant-numeric:tabular-nums}
body[data-page="match"] .xl-mp-herox-score span{font-size:48px !important;font-weight:700 !important;color:#d7d8da !important;transform:none !important}
body[data-page="match"] .xl-mp-herox-ht{font:600 17px/1 Inter,sans-serif !important;color:#8c8d90 !important;letter-spacing:-.02em !important;margin-top:0 !important;min-height:18px}
body[data-page="match"] .xl-mp-meta{display:none !important}

/* CTA exactly like sports-score apps */
body[data-page="match"] .xl-mp-ctapair{
  width:340px;max-width:100%;margin:-4px auto 0 !important;display:grid !important;grid-template-columns:1fr 1fr;gap:3px !important;
  background:#353535;border-radius:24px;overflow:hidden;
}
body[data-page="match"] .xl-mp-ctapair:empty{display:none !important;margin:0 !important}
body[data-page="match"] .xl-mp-ctapair:not(:has(.xl-cta-btn)):not(:has(.xl-mp-srvs)){display:none !important;margin:0 !important;background:transparent !important}
body[data-page="match"] .xl-mp-ctapair:has(.xl-cta-btn:only-child){grid-template-columns:1fr;width:auto;max-width:160px;background:transparent !important;border-radius:999px;overflow:visible;margin:18px auto 14px !important}
body[data-page="match"] .xl-mp-ctapair:has(.xl-cta-btn:only-child) .xl-cta-btn{
  width:auto !important;height:30px !important;padding:0 14px !important;border-radius:999px !important;
  background:#2a2a2a !important;color:#e5e7eb !important;border:1px solid rgba(255,255,255,.06) !important;
  font:600 12px/1 Inter,sans-serif !important;letter-spacing:0 !important;gap:6px !important;
  justify-self:center;justify-content:center;
}
body[data-page="match"] .xl-mp-ctapair:has(.xl-cta-btn:only-child) .xl-cta-btn.primary svg{
  background:#1469ff;color:#fff;border-radius:50%;padding:2px;width:12px !important;height:12px !important;box-sizing:content-box;
}
body[data-page="match"] .xl-mp-ctapair .xl-cta-btn{width:100%;justify-self:stretch}
body[data-page="match"] .xl-cta-btn{
  height:46px !important;border-radius:0 !important;border:0 !important;background:#373737 !important;color:#dfdfdf !important;
  box-shadow:none !important;font:500 17px/1 Inter,sans-serif !important;letter-spacing:-.015em !important;gap:8px !important;
}
body[data-page="match"] .xl-cta-btn.primary svg{background:#1469ff;color:#fff;border-radius:5px;padding:3px;width:22px;height:17px}
body[data-page="match"] .xl-cta-btn.ghost{color:#dfdfdf !important;border-left:1px solid #1c1c1c !important}
body[data-page="match"] .xl-cta-btn.ghost svg{background:#22c55e;color:#fff;border-radius:5px;padding:3px;width:22px;height:19px}

/* Tabs */
body[data-page="match"] .xl-mp-tabs.xl-mp-tabs-5{
  display:grid !important;grid-template-columns:repeat(6,1fr) !important;
  margin:48px 0 0 !important;padding:0 0 0 0 !important;height:56px !important;
  background:#151c1f !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
@media (max-width:560px){
  body[data-page="match"] .xl-mp-tabs.xl-mp-tabs-5{margin-top:38px !important}
}
body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{
  padding:0 !important;display:flex;align-items:center;justify-content:center;
  color:#a3a4a6 !important;background:transparent !important;border:0 !important;
  font:500 19px/1 Inter,sans-serif !important;letter-spacing:-.03em !important;position:relative;
}
body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab.on{color:#075cff !important}
body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab.on::after{
  content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;background:#075cff;border-radius:0 !important;
}
body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab:nth-child(2)::after{
  content:"12314";position:absolute;top:10px;right:2px;background:#ff4359;color:#fff;border-radius:14px;
  height:auto;left:auto;bottom:auto;padding:2px 8px;font:500 11px/1 Inter,sans-serif;
}
body[data-page="match"] .xl-mp-body{padding:18px 16px 24px !important;background:#20292d}
body[data-page="match"] .xl-mp::after{
  content:"";
  display:block;
  height:118px;
  background:linear-gradient(180deg,#20292d 0,#20292d 34px,#0d1417 34px,#0d1417 100%);
}

/* Team names above momentum */
body[data-page="match"] .xl-fb-team-bars{
  display:flex !important;align-items:center;justify-content:space-between;margin:0 0 24px !important;padding:0 16px !important;
  font:500 17px/1.2 Inter,sans-serif !important;color:#f1f2f2 !important;letter-spacing:-.02em;
}
body[data-page="match"] .xl-fb-team-bars .xl-tb{display:flex;align-items:center;gap:10px;max-width:48%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="match"] .xl-fb-team-bars .xl-tb.a{justify-content:flex-end;text-align:right}
body[data-page="match"] .xl-fb-team-bars .xl-tb i{display:inline-block;width:5px !important;height:24px !important;border-radius:0 !important;flex:0 0 auto}

body[data-page="match"] .xl-fb-team-bars .xl-tb.h i{background:var(--fb-blue) !important}
body[data-page="match"] .xl-fb-team-bars .xl-tb.a i{background:var(--fb-green) !important}

/* Momentum chart block */
body[data-page="match"] .xl-chart-card{
  margin:0 !important;padding:22px 25px 24px !important;border:0 !important;border-radius:28px !important;
  background:#11181b !important;box-shadow:none !important;overflow:hidden;
}
body[data-page="match"] .xl-chart-head{display:none !important}
body[data-page="match"] .xl-chart-wrap{position:relative;background:#121b22;border-radius:0;padding-top:0;overflow:visible}
body[data-page="match"] .xl-chart-svg{display:block;width:100%;height:250px !important;overflow:visible !important}
body[data-page="match"] .xl-chart-axis{
  display:flex;justify-content:space-between;align-items:center;padding:12px 0 0 !important;
  color:#ececec !important;font:500 25px/1 Inter,sans-serif !important;letter-spacing:-.03em;
  border-top:4px dotted rgba(255,255,255,.22);margin-top:2px;
}
body[data-page="match"] .xl-chart-tip{display:none !important}

/* Three circular live football stat dials */
body[data-page="match"] .xl-fb-stats-card{
  margin:19px 0 0 !important;padding:25px 24px 24px !important;border:0 !important;border-radius:28px !important;background:#11181b !important;
  box-shadow:none !important;
}
body[data-page="match"] .xl-fb-dials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
body[data-page="match"] .xl-fb-dials .xl-dial{gap:18px;text-align:center;min-width:0}
body[data-page="match"] .xl-fb-dials .xl-dial-label{font:500 24px/1.1 Inter,sans-serif !important;color:#ececec !important;letter-spacing:-.03em;text-transform:none !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="match"] .xl-fb-dials .xl-dial-row{gap:12px}
body[data-page="match"] .xl-fb-dials .xl-dial-num{font:800 27px/1 Inter,sans-serif !important;min-width:38px;color:#f2f2f2 !important;background:none !important;-webkit-text-fill-color:currentColor !important}
body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:76px !important;height:76px !important;filter:none !important}
body[data-page="match"] .xl-fb-dials .xl-dial-ring svg circle[stroke^="rgba"]{stroke:rgba(255,255,255,.08) !important;stroke-width:7 !important}
body[data-page="match"] .xl-fb-dials .xl-dial-ring svg circle:not(:first-of-type){stroke-width:7 !important}
body[data-page="match"] .xl-dial-ic{font:700 39px/1 Inter,sans-serif;color:#9a9a9a !important}
body[data-page="match"] .xl-dial-symbol{font:800 28px/1 Inter,sans-serif;color:#9a9a9a !important}
body[data-page="match"] .xl-dial-chev{display:block;transform:translateY(-3px);font-size:52px;color:#979797}
body[data-page="match"] .xl-dial-chev.dbl{font-size:36px;letter-spacing:-.18em;padding-right:8px}

body[data-page="match"] .xl-fb-extra-row{
  margin:28px 0 12px;display:grid;grid-template-columns:auto auto auto 1fr auto auto auto;gap:26px;align-items:center;
}
body[data-page="match"] .xl-fb-extra-row span{display:inline-flex;align-items:center;gap:15px;color:#f2f2f2;font:700 24px/1 Inter,sans-serif;white-space:nowrap}
body[data-page="match"] .xl-fb-extra-row em{display:block;height:1px}
body[data-page="match"] .xl-fb-ico{display:inline-block;vertical-align:middle}
body[data-page="match"] .xl-fb-ico.ball{font-size:25px;line-height:1;filter:grayscale(1) brightness(1.6)}
body[data-page="match"] .xl-fb-ico.card{width:17px;height:25px;border-radius:3px;transform:rotate(8deg)}
body[data-page="match"] .xl-fb-ico.card.yellow{background:#ffd735}
body[data-page="match"] .xl-fb-ico.card.red{background:#ff3b4d}
body[data-page="match"] .xl-fb-ico.corner{position:relative;width:22px;height:26px;border-left:3px solid #111;border-bottom:3px solid #111;margin-left:4px}
body[data-page="match"] .xl-fb-ico.corner::before{content:"";position:absolute;left:0;top:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:18px solid #ff3b4d}
body[data-page="match"] .xl-fb-ico.corner::after{content:"";position:absolute;left:2px;bottom:-5px;width:18px;height:3px;background:#111;transform:rotate(22deg);transform-origin:left center}

body[data-page="match"] .xl-fb-shots{display:flex;flex-direction:column;gap:19px}
body[data-page="match"] .xl-fb-shot-row{display:grid;grid-template-columns:1fr;gap:9px}
body[data-page="match"] .xl-fb-shot-label{text-align:center;color:#eeeeee;font:500 24px/1 Inter,sans-serif;letter-spacing:-.03em}
body[data-page="match"] .xl-fb-shot-line{display:grid;grid-template-columns:42px 1fr 42px;gap:18px;align-items:center}
body[data-page="match"] .xl-fb-shot-line b{font:700 24px/1 Inter,sans-serif;color:#f3f3f3;text-align:center}
body[data-page="match"] .xl-fb-track{height:8px;display:flex;background:transparent;overflow:hidden}
body[data-page="match"] .xl-fb-track i.h{display:block;background:var(--fb-blue)}
body[data-page="match"] .xl-fb-track i.a{display:block;background:var(--fb-green);margin-left:0}

/* Event list */
body[data-page="match"] .xl-events-card{
  margin:19px 0 0 !important;padding:36px 34px 60px !important;background:#11181b !important;border:0 !important;border-radius:28px !important;box-shadow:none !important;min-height:430px;
}
body[data-page="match"] .xl-events-head{margin:0 0 48px !important;display:flex;align-items:center;justify-content:space-between}
body[data-page="match"] .xl-events-head h3{font:800 31px/1 Inter,sans-serif !important;color:#f7f7f7 !important;letter-spacing:-.04em;margin:0 !important}
body[data-page="match"] .xl-goals-tag{font:500 24px/1 Inter,sans-serif !important;color:#96999b !important;gap:12px !important}
body[data-page="match"] .xl-goals-tag::first-letter{color:#fff}
body[data-page="match"] .xl-events-list{gap:46px !important}
body[data-page="match"] .xl-ev2{display:flex !important;align-items:center;gap:24px;color:#f5f5f5;font:600 22px/1 Inter,sans-serif}
body[data-page="match"] .xl-ev2-min{min-width:50px;color:#f4f4f4;font:800 28px/1 Inter,sans-serif !important;letter-spacing:-.03em}
body[data-page="match"] .xl-ev2-ic.ball{font-size:32px;filter:grayscale(1) brightness(2)}
body[data-page="match"] .xl-ev2-score{background:var(--fb-blue) !important;color:#fff !important;font:800 33px/1 Inter,sans-serif !important;border-radius:7px !important;padding:8px 14px !important;letter-spacing:-.05em;min-width:75px;text-align:center}
body[data-page="match"] .xl-ev2-txt{color:#a7abad !important;font:500 17px/1.25 Inter,sans-serif !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body[data-page="match"] .xl-ev-card{width:17px !important;height:25px !important;border-radius:3px !important}
body[data-page="match"] .xl-empty{background:transparent !important;border:0 !important;color:#8f9699 !important;padding:24px !important}

@media (max-width:620px){
  body[data-page="match"] .xl-mp-topbar-2{grid-template-columns:48px minmax(0,1fr) 68px !important;padding:26px 20px 12px !important}
  body[data-page="match"] .xl-mp-title{font-size:18px !important}
  body[data-page="match"] .xl-mp-herox{padding:22px 22px 4px !important}
  body[data-page="match"] .xl-mp-livepill{font-size:16px !important;margin-bottom:16px !important}
  body[data-page="match"] .xl-mp-herox-row{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr) !important;gap:8px !important}
  body[data-page="match"] .xl-mp-herox-logo{width:54px !important;height:54px !important}
  body[data-page="match"] .xl-mp-herox-name{font-size:18px !important;max-width:125px !important}
  body[data-page="match"] .xl-mp-herox-team::before{font-size:33px;top:22px}
  body[data-page="match"] .xl-mp-herox-code{font-size:14px !important;top:28px}
  body[data-page="match"] .xl-mp-herox-team:first-child .xl-mp-herox-code{right:2px}
  body[data-page="match"] .xl-mp-herox-team:last-child .xl-mp-herox-code{left:2px}
  body[data-page="match"] .xl-mp-herox-score{font-size:46px !important;gap:8px !important}
  body[data-page="match"] .xl-mp-herox-score b{min-width:34px !important}
  body[data-page="match"] .xl-mp-herox-score span{font-size:42px !important}
  body[data-page="match"] .xl-mp-herox-ht{font-size:15px !important;min-height:17px}
  body[data-page="match"] .xl-mp-ctapair{width:366px;margin-top:-6px !important}
  body[data-page="match"] .xl-cta-btn{height:48px !important;font-size:18px !important}
  body[data-page="match"] .xl-mp-tabs.xl-mp-tabs-5{height:62px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{font-size:20px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab.on::after{left:16px;right:16px;height:4px}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab:nth-child(2)::after{top:12px;right:0;font-size:11px;padding:3px 8px}
  body[data-page="match"] .xl-mp-body{padding:15px 10px 20px !important}
  body[data-page="match"] .xl-mp::after{height:118px;background:linear-gradient(180deg,#20292d 0,#20292d 34px,#0d1417 34px,#0d1417 100%)}
  body[data-page="match"] .xl-fb-team-bars{font-size:17px !important;margin-bottom:20px !important;padding:0 8px !important}
  body[data-page="match"] .xl-fb-team-bars .xl-tb i{height:27px !important;width:5px !important}
  body[data-page="match"] .xl-chart-card{border-radius:22px !important;padding:16px 14px 19px !important}
  body[data-page="match"] .xl-chart-svg{height:176px !important}
  body[data-page="match"] .xl-chart-axis{font-size:18px !important;border-top-width:3px}
  body[data-page="match"] .xl-fb-stats-card{border-radius:22px !important;padding:20px 14px 18px !important}
  body[data-page="match"] .xl-fb-dials{gap:8px}
  body[data-page="match"] .xl-fb-dials .xl-dial-label{font-size:17px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-num{font-size:20px !important;min-width:28px}
  body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:58px !important;height:58px !important}
  body[data-page="match"] .xl-dial-ic{font-size:29px}
  body[data-page="match"] .xl-dial-symbol{font-size:22px !important}
  body[data-page="match"] .xl-dial-chev{font-size:38px}
  body[data-page="match"] .xl-fb-extra-row{gap:12px;margin-top:22px}
  body[data-page="match"] .xl-fb-extra-row span{font-size:18px;gap:9px}
  body[data-page="match"] .xl-fb-ico.card{width:13px;height:20px}
  body[data-page="match"] .xl-fb-shot-label{font-size:18px}
  body[data-page="match"] .xl-fb-shot-line{grid-template-columns:28px 1fr 28px;gap:11px}
  body[data-page="match"] .xl-fb-shot-line b{font-size:18px}
  body[data-page="match"] .xl-events-card{border-radius:22px !important;padding:28px 22px 44px !important;min-height:350px}
  body[data-page="match"] .xl-events-head{margin-bottom:38px !important}
  body[data-page="match"] .xl-events-head h3{font-size:25px !important}
  body[data-page="match"] .xl-goals-tag{font-size:18px !important}
  body[data-page="match"] .xl-events-list{gap:36px !important}
  body[data-page="match"] .xl-ev2{gap:18px}
  body[data-page="match"] .xl-ev2-min{font-size:24px !important;min-width:42px}
  body[data-page="match"] .xl-ev2-ic.ball{font-size:28px}
  body[data-page="match"] .xl-ev2-score{font-size:27px !important;min-width:62px;padding:7px 11px !important}
}

/* Narrow phone fix: keep the desktop/reference look, but prevent text/score/stat collisions */
@media (max-width:420px){
  body[data-page="match"] .xl-mp-topbar-2{padding:26px 18px 12px !important}
  body[data-page="match"] .xl-mp-herox{padding:22px 20px 4px !important}
  body[data-page="match"] .xl-mp-herox-row{grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr) !important;gap:8px !important}
  body[data-page="match"] .xl-mp-herox-logo{width:50px !important;height:50px !important}
  body[data-page="match"] .xl-mp-herox-name{font-size:16px !important;max-width:112px !important;line-height:1.05 !important}
  body[data-page="match"] .xl-mp-herox-team::before{font-size:29px;top:22px}
  body[data-page="match"] .xl-mp-herox-code{font-size:12px !important;top:29px}
  body[data-page="match"] .xl-mp-herox-team:first-child .xl-mp-herox-code{right:-3px}
  body[data-page="match"] .xl-mp-herox-team:last-child .xl-mp-herox-code{left:-3px}
  body[data-page="match"] .xl-mp-herox-score{font-size:41px !important;gap:6px !important}
  body[data-page="match"] .xl-mp-herox-score b{min-width:28px !important}
  body[data-page="match"] .xl-mp-herox-score span{font-size:35px !important}
  body[data-page="match"] .xl-mp-herox-ht{font-size:14px !important}
  body[data-page="match"] .xl-mp-ctapair{width:calc(100% - 44px);margin-top:-6px !important}

  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{font-size:17px !important;letter-spacing:-.045em !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab.on::after{left:12px;right:12px}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab:nth-child(2)::after{top:12px;right:-1px;font-size:10px;padding:2px 7px}

  body[data-page="match"] .xl-fb-dials{gap:4px}
  body[data-page="match"] .xl-fb-dials .xl-dial{gap:14px}
  body[data-page="match"] .xl-fb-dials .xl-dial-label{font-size:15px !important;letter-spacing:-.05em}
  body[data-page="match"] .xl-fb-dials .xl-dial-row{gap:7px}
  body[data-page="match"] .xl-fb-dials .xl-dial-num{font-size:18px !important;min-width:22px}
  body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:54px !important;height:54px !important}
  body[data-page="match"] .xl-dial-ic{font-size:27px}
  body[data-page="match"] .xl-dial-symbol{font-size:20px !important}
  body[data-page="match"] .xl-dial-chev{font-size:36px}
  body[data-page="match"] .xl-dial-chev.dbl{font-size:27px;padding-right:6px}
}

@media (max-width:380px){
  body[data-page="match"] .xl-mp-topbar-2{padding-left:16px !important;padding-right:16px !important}
  body[data-page="match"] .xl-mp-herox{padding-left:18px !important;padding-right:18px !important}
  body[data-page="match"] .xl-mp-herox-row{grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr) !important;gap:7px !important}
  body[data-page="match"] .xl-mp-herox-logo{width:48px !important;height:48px !important}
  body[data-page="match"] .xl-mp-herox-score{font-size:39px !important;gap:5px !important}
  body[data-page="match"] .xl-mp-herox-score b{min-width:26px !important}
  body[data-page="match"] .xl-mp-herox-score span{font-size:32px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{font-size:16px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-label{font-size:14px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:52px !important;height:52px !important}
  body[data-page="match"] .xl-fb-extra-row{gap:9px}
}

/* v72 — real phone polish: remove overlaps on Lovable/mobile browser widths up to 480px */
@media (max-width:480px){
  body[data-page="match"] .xl-mp-topbar-2{
    grid-template-columns:46px minmax(0,1fr) 72px !important;
    padding:24px 18px 12px !important;
  }
  body[data-page="match"] .xl-mp-topbar-2 .xl-mp-back,
  body[data-page="match"] .xl-mp-topbar-2 .xl-mp-iconbtn{width:36px !important;height:36px !important}
  body[data-page="match"] .xl-mp-topbar-2 .xl-mp-back svg{width:27px !important;height:27px !important}
  body[data-page="match"] .xl-mp-actions{gap:0 !important}

  body[data-page="match"] .xl-mp-herox{padding:20px 18px 4px !important}
  body[data-page="match"] .xl-mp-livepill{margin-bottom:14px !important}
  body[data-page="match"] .xl-mp-herox-row{
    grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) !important;
    gap:7px !important;
    align-items:start !important;
  }
  body[data-page="match"] .xl-mp-herox-team{gap:8px !important;min-width:0 !important}
  body[data-page="match"] .xl-mp-herox-team::before{font-size:27px !important;top:24px !important}
  body[data-page="match"] .xl-mp-herox-team:first-child::before{left:-1px !important}
  body[data-page="match"] .xl-mp-herox-team:last-child::before{right:-1px !important}
  body[data-page="match"] .xl-mp-herox-logo{width:48px !important;height:48px !important}
  body[data-page="match"] .xl-mp-herox-name{
    max-width:92px !important;
    min-height:33px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:15px !important;
    line-height:1.08 !important;
  }
  body[data-page="match"] .xl-mp-herox-code{
    position:static !important;
    order:3 !important;
    margin-top:-5px !important;
    font-size:10.5px !important;
    line-height:1 !important;
  }
  body[data-page="match"] .xl-mp-herox-center{min-width:0 !important;padding-top:14px !important;gap:5px !important}
  body[data-page="match"] .xl-mp-herox-score{font-size:38px !important;gap:4px !important;letter-spacing:-.05em !important}
  body[data-page="match"] .xl-mp-herox-score b{min-width:25px !important}
  body[data-page="match"] .xl-mp-herox-score span{font-size:30px !important}
  body[data-page="match"] .xl-mp-herox-ht{font-size:13px !important;min-height:15px !important;white-space:nowrap !important}
  body[data-page="match"] .xl-mp-ctapair{width:260px !important;max-width:calc(100% - 40px) !important;margin-left:auto !important;margin-right:auto !important}
  body[data-page="match"] .xl-cta-btn{height:42px !important;font-size:14px !important}

  body[data-page="match"] .xl-mp-tabs.xl-mp-tabs-5{height:58px !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;padding:0 4px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{font-size:15px !important;letter-spacing:-.055em !important;min-width:0 !important;overflow:visible !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab.on::after{left:10px !important;right:10px !important;height:3px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab:nth-child(2)::after{top:10px !important;right:-2px !important;font-size:9px !important;padding:2px 6px !important}

  body[data-page="match"] .xl-chart-card{padding:15px 13px 18px !important}
  body[data-page="match"] .xl-chart-svg{height:168px !important}

  body[data-page="match"] .xl-fb-stats-card{padding:18px 11px 17px !important}
  body[data-page="match"] .xl-fb-dials{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:2px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial{gap:10px !important;min-width:0 !important;overflow:visible !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-label{
    height:30px !important;
    max-width:100% !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:13px !important;
    line-height:1.08 !important;
    letter-spacing:-.04em !important;
  }
  body[data-page="match"] .xl-fb-dials .xl-dial-row{gap:4px !important;width:100% !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-num{font-size:17px !important;min-width:18px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:46px !important;height:46px !important}
  body[data-page="match"] .xl-dial-ic{font-size:23px !important}
  body[data-page="match"] .xl-dial-symbol{font-size:18px !important}
  body[data-page="match"] .xl-dial-chev{font-size:31px !important}
  body[data-page="match"] .xl-dial-chev.dbl{font-size:23px !important;padding-right:5px !important}

  body[data-page="match"] .xl-fb-extra-row{
    grid-template-columns:auto auto auto minmax(0,1fr) auto auto auto !important;
    gap:7px !important;
    margin:18px 0 12px !important;
  }
  body[data-page="match"] .xl-fb-extra-row span{font-size:16px !important;gap:5px !important}
  body[data-page="match"] .xl-fb-ico.ball{font-size:18px !important}
  body[data-page="match"] .xl-fb-ico.card{width:11px !important;height:17px !important}
  body[data-page="match"] .xl-fb-ico.corner{width:17px !important;height:21px !important;margin-left:0 !important}
  body[data-page="match"] .xl-fb-ico.corner::before{border-top-width:6px !important;border-bottom-width:6px !important;border-left-width:14px !important}
  body[data-page="match"] .xl-fb-ico.corner::after{width:14px !important}

  body[data-page="match"] .xl-fb-shot-label{font-size:17px !important;line-height:1.15 !important}
  body[data-page="match"] .xl-fb-shot-line{grid-template-columns:24px 1fr 24px !important;gap:8px !important}
  body[data-page="match"] .xl-fb-shot-line b{font-size:17px !important}

  body[data-page="match"] .xl-events-card{padding:26px 22px 42px !important}
  body[data-page="match"] .xl-events-head h3{font-size:24px !important}
  body[data-page="match"] .xl-goals-tag{font-size:17px !important}
}

@media (max-width:370px){
  body[data-page="match"] .xl-mp-herox{padding-left:16px !important;padding-right:16px !important}
  body[data-page="match"] .xl-mp-herox-row{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) !important;gap:6px !important}
  body[data-page="match"] .xl-mp-herox-code{display:none !important}
  body[data-page="match"] .xl-mp-herox-name{font-size:14px !important;max-width:84px !important;min-height:31px !important}
  body[data-page="match"] .xl-mp-herox-score{font-size:36px !important}
  body[data-page="match"] .xl-mp-herox-score span{font-size:28px !important}
  body[data-page="match"] .xl-mp-tabs-5 .xl-mp-tab{font-size:14px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-label{font-size:12px !important;height:29px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-num{font-size:16px !important;min-width:16px !important}
  body[data-page="match"] .xl-fb-dials .xl-dial-ring{width:42px !important;height:42px !important}
  body[data-page="match"] .xl-fb-extra-row{gap:5px !important}
  body[data-page="match"] .xl-fb-extra-row span{font-size:15px !important;gap:4px !important}
}

/* Custom player keeps its UI when fullscreened (so user controls + quality menu remain visible) */
.xl-pl-frame:fullscreen,.xl-pl-frame:-webkit-full-screen{width:100vw;height:100vh;background:#000}
.xl-pl-frame:fullscreen video,.xl-pl-frame:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}
.xl-mp-pf:fullscreen,.xl-mp-pf:-webkit-full-screen{width:100vw;height:100vh;background:#000}
.xl-mp-pf:fullscreen video,.xl-mp-pf:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}