﻿:root{
  --bg:#FAFBFD;--white:#FFF;--elevated:#F5F6FA;--inset:#EFF1F7;--hover:#F0F2F8;--active:#E8EAF3;
  --glass:rgba(255,255,255,0.88);
  --brand:#C0392B;--brand-l:#E74C3C;--brand-sub:rgba(192,57,43,0.06);--brand-glow:rgba(231,76,60,0.12);
  --green:#059669;--green-sub:rgba(5,150,105,0.06);
  --amber:#D97706;--amber-sub:rgba(217,119,6,0.06);
  --red:#DC2626;--red-l:#EF4444;--red-sub:rgba(220,38,38,0.06);--red-glow:rgba(239,68,68,0.15);
  --info:#0891B2;
  --t1:#0F1729;--t2:#475569;--t3:#94A3B8;--t4:#B0BEC9;
  --border:rgba(15,23,41,0.06);--border-s:rgba(15,23,41,0.10);
  --sh-xs:0 1px 2px rgba(15,23,41,0.04);--sh-sm:0 1px 3px rgba(15,23,41,0.06),0 1px 2px rgba(15,23,41,0.04);
  --r:8px;--rl:12px;--rxl:16px;--rfl:999px;
  --font:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--t1);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh;height:100dvh}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--border-s);border-radius:3px}
.shell{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}

/* HEADER */
.hdr{background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0;padding:10px 16px}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;width:100%}
.logo{display:flex;align-items:center;gap:10px}
.logo-i{width:32px;height:32px;background:linear-gradient(145deg,#E74C3C,#C0392B);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:12px;letter-spacing:-0.5px;box-shadow:0 2px 8px rgba(231,76,60,0.25);position:relative}
.logo-i::after{content:'';position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 50%)}
.logo-t{font-weight:800;font-size:17px;letter-spacing:-0.3px}
.logo-tag{font-size:9px;font-weight:600;color:var(--brand);background:var(--brand-sub);padding:2px 6px;border-radius:var(--rfl);letter-spacing:.5px;text-transform:uppercase}
.hdr-live{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--red);padding:4px 10px;background:var(--red-sub);border-radius:var(--rfl)}
.hdr-dot{width:7px;height:7px;background:var(--red-l);border-radius:50%;animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--red-glow)}50%{opacity:.6;box-shadow:0 0 0 5px transparent}}

/* CONTENT */
.content{flex:1;overflow-y:auto;overflow-x:hidden}
.page{display:none;min-height:100%}.page.on{display:block}
.pad{max-width:1200px;margin:0 auto;padding:0 16px 100px}

/* TABS */
.tabs{display:flex;background:var(--glass);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:6px 16px;padding-bottom:max(6px,env(safe-area-inset-bottom));flex-shrink:0;z-index:250;max-width:1200px;margin:0 auto;width:100%;position:relative}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;cursor:pointer;border:none;background:none;color:var(--t3);transition:all .15s;font-family:var(--font)}
.tab:hover{color:var(--t2)}.tab.on{color:var(--brand)}
.tab-ic{font-size:19px;opacity:.35;transition:opacity .15s}.tab.on .tab-ic{opacity:1}
.tab-lb{font-size:10px;font-weight:600}

/* SHARED */
.sh{padding:14px 4px 8px;display:flex;align-items:center;justify-content:space-between}
.sh-t{font-size:18px;font-weight:700;letter-spacing:-0.3px}
.sh-s{font-size:12px;color:var(--t3);font-weight:500}
.pills{display:flex;gap:6px;padding:4px 4px 12px;overflow-x:auto;scrollbar-width:none}.pills::-webkit-scrollbar{display:none}
.pill{padding:6px 14px;border-radius:var(--rfl);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--t2);transition:all .15s;flex-shrink:0;font-family:var(--font)}
.pill:hover{border-color:var(--border-s)}
.pill.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 12px var(--brand-glow)}
.dates{display:flex;gap:4px;padding:4px 4px 12px;overflow-x:auto;scrollbar-width:none}.dates::-webkit-scrollbar{display:none}
.dbtn{padding:6px 12px;border-radius:var(--r);font-size:12px;font-weight:500;cursor:pointer;background:var(--white);border:1px solid var(--border);color:var(--t2);transition:all .15s;flex-shrink:0;font-family:var(--font)}
.dbtn.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.dbtn-dot{width:4px;height:4px;border-radius:50%;background:var(--brand);display:block;margin:0 auto 2px}
.dbtn.on .dbtn-dot{background:#fff}

/* LEAGUE GROUP (calendar) */
/* LIVE */
.live-card{background:var(--white);border:1px solid rgba(239,68,68,.15);border-left:3px solid var(--red-l);border-radius:var(--rl);padding:12px;margin-bottom:8px;cursor:pointer;transition:all .12s}
.live-card:hover{transform:translateX(2px);border-color:var(--red-l)}
.live-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.live-badge{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--red-l)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red-l);animation:pulse 1.5s infinite}
.live-league{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:4px}
.live-teams{display:flex;flex-direction:column;gap:4px}
.live-team{display:flex;align-items:center;gap:6px}
.live-tlogo{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.live-tn{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-tn.bold{font-weight:700}
.live-goals{font-family:var(--mono);font-size:16px;font-weight:400;min-width:20px;text-align:center}
.live-goals.bold{font-weight:800}
.live-chips{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.live-chip{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--elevated);color:var(--t2)}

/* CALENDAR SORT TOGGLE */
.cal-sort-wrap{display:inline-flex;gap:2px;margin-left:auto;background:var(--elevated);border-radius:var(--r);padding:2px}
.cal-sort-btn{padding:4px 10px;font-size:10px;font-weight:600;border:none;background:none;border-radius:5px;cursor:pointer;color:var(--t3);font-family:var(--font);transition:all .12s;white-space:nowrap}
.cal-sort-btn.on{background:var(--white);color:var(--brand);box-shadow:var(--sh-xs)}
.cal-time-hdr{display:flex;align-items:center;gap:6px;padding:10px 4px 6px;font-size:12px;font-weight:700;color:var(--t2)}
.cal-time-cnt{font-size:10px;font-weight:600;color:var(--t3);font-family:var(--mono)}
.cal-section{margin-bottom:12px}
.cal-section-hdr{padding:10px 4px;font-size:12px;font-weight:700;color:var(--t2)}
.cal-section-hdr.live{color:var(--red-l)}
.cal-league{margin-bottom:2px}
.cal-league-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:background .12s;margin-bottom:2px}
.cal-league-hdr:hover{background:var(--hover)}
.cal-league-hdr.coll{border-radius:var(--r)}
.cal-league-hdr:not(.coll){border-radius:var(--r) var(--r) 0 0}
.cal-lg-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.cal-lg-flag{font-size:16px;flex-shrink:0}
.cal-lg-info{flex:1;min-width:0}
.cal-lg-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-lg-country{font-size:10px;color:var(--t3)}
.cal-lg-cnt{min-width:22px;height:22px;border-radius:11px;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t3);font-family:var(--mono)}
.lg-chev{font-size:14px;color:var(--t4);transition:transform .2s}.cal-league-hdr.coll .lg-chev{transform:rotate(-90deg)}
.cal-league-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);overflow:hidden}

/* MATCH ROW (calendar) */
.cal-match{display:flex;align-items:center;padding:8px 10px;background:var(--white);border-bottom:1px solid var(--border);cursor:pointer;transition:all .12s;gap:8px}
.cal-match:last-child{border-bottom:none}
.cal-match:hover{background:var(--hover)}
.cal-match.live{background:var(--red-sub);border-left:3px solid var(--red-l)}
.cal-time{width:42px;text-align:center;flex-shrink:0}
.cal-clock{font-size:11px;font-weight:600;color:var(--t3);font-family:var(--mono)}
.cal-live-badge{font-size:9px;font-weight:800;color:#fff;background:var(--red-l);padding:2px 6px;border-radius:4px;animation:pulse 1.5s infinite}
.cal-ft-badge{font-size:10px;font-weight:600;color:var(--t3)}
.cal-body{flex:1;min-width:0}
.cal-team-row{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.cal-team-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.cal-tn{font-size:12px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-tn.w{font-weight:700}
.cal-sc{font-family:var(--mono);font-size:13px;font-weight:700;min-width:14px;text-align:right}
.cal-sc.w{color:var(--brand);font-weight:800}
.cal-chips{display:flex;gap:4px;margin-top:3px}
.cal-chip{font-size:9px;font-weight:600;color:var(--t3);padding:1px 6px;background:var(--elevated);border-radius:4px;font-family:var(--mono)}
.cal-chip.green{color:var(--green);background:var(--green-sub)}
.cal-match-league{font-size:9px;color:var(--t3);margin-top:2px}
.cal-arr{font-size:14px;color:var(--t4);flex-shrink:0}

/* DETAIL OVERLAY */
.det{position:absolute;top:0;left:0;right:0;bottom:56px;z-index:200;background:var(--bg);transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
@supports(bottom:env(safe-area-inset-bottom)){.det{bottom:calc(56px + env(safe-area-inset-bottom))}}
.det.vis{transform:translateX(0)}
.det-h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);flex-shrink:0}
.det-back{width:34px;height:34px;border-radius:var(--r);border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.det-back:hover{background:var(--hover)}
.det-title{font-size:16px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det-body{flex:1;overflow-y:auto}
.det-inner{max-width:1200px;margin:0 auto;padding:16px 16px 24px}

/* SCOREBOARD */
.sb{background:var(--white);border:1px solid var(--border);border-radius:var(--rxl);padding:20px 12px 16px;text-align:center;margin-bottom:16px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.sb::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-l))}
.sb-league{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:14px}
.sb-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px}
.sb-team-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.sb-team-col.link{cursor:pointer;transition:opacity .12s}.sb-team-col.link:hover{opacity:.7}
.sb-logo{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px}
.sb-logo img{width:44px;height:44px;object-fit:contain}
.sb-tn{font-size:13px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.sb-evt-list{font-size:10px;color:var(--t3);line-height:1.4;min-height:14px}
.sb-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0}
.sb-goals{display:flex;align-items:center;gap:6px}
.sb-g{font-family:var(--mono);font-size:36px;font-weight:800;color:var(--t1);line-height:1}
.sb-g.w{color:var(--brand)}
.sb-sep{font-size:20px;color:var(--t4);font-weight:300}
.sb-time{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--t2)}
.sb-live{margin-top:4px;font-size:11px;font-weight:700;color:var(--red-l);display:flex;align-items:center;gap:4px;animation:pulse 1.5s infinite}
.sb-ft{margin-top:4px;font-size:11px;font-weight:600;color:var(--t3)}
.sb-halves{display:flex;gap:6px;margin-top:6px}
.sb-halves span{padding:2px 8px;border-radius:var(--rfl);background:var(--elevated);font-family:var(--mono);font-size:10px;font-weight:600;color:var(--t3)}

/* DETAIL TABS */
.dtabs{display:flex;gap:2px;background:var(--elevated);border-radius:var(--r);padding:3px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtab{flex:0 0 auto;padding:8px 10px;text-align:center;font-size:11px;font-weight:600;color:var(--t3);border-radius:6px;cursor:pointer;background:none;border:none;font-family:var(--font);transition:all .15s;white-space:nowrap}
.dtab.on{background:var(--white);color:var(--brand);box-shadow:var(--sh-xs)}

/* STAT BAR — Enhanced visuals */
.stat{
  display:grid;
  grid-template-columns:50px 1fr 50px;
  align-items:center;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  transition:background .2s;
}
.stat:last-child {
  border-bottom:none;
}
.stat:hover {
  background:var(--hover);
  border-radius:var(--r);
  padding:10px 8px;
}

/* Stat values — home/away */
.stv {
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--t2);
  line-height:1.2;
  transition:all .2s;
}
.stv.h {
  text-align:right;
}
.stv.a {
  text-align:left;
}
/* Winner highlighting */
.stv.win {
  color:var(--brand);
  font-weight:800;
  font-size:14px;
  text-shadow:0 0 12px var(--brand-glow);
}

/* Center label & bar */
.stc {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.stl {
  font-size:11px;
  color:var(--t2);
  text-align:center;
  font-weight:600;
  letter-spacing:.2px;
}

/* Comparison bar */
.stbar {
  display:flex;
  height:7px;
  border-radius:4px;
  overflow:hidden;
  gap:1px;
  background:var(--inset);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.stf {
  height:100%;
  border-radius:3px;
  background:linear-gradient(135deg, #E8EAF3, #EFF1F7);
  transition:width .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.stf.win {
  background:linear-gradient(135deg, var(--brand-l), var(--brand));
  box-shadow:0 2px 8px var(--brand-glow);
}

/* Stat group container */
.stat-group {
  margin-bottom:12px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--rl);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:all .2s;
}
.stat-group:hover {
  border-color:var(--border-s);
  box-shadow:0 2px 8px rgba(15,23,41,.08);
}

/* Group header with icon and title */
.stat-group-h {
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  color:var(--t2);
  text-transform:uppercase;
  letter-spacing:.5px;
  background:linear-gradient(135deg, var(--elevated), var(--white));
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
}
.stat-group-h::before {
  content:'';
  width:2px;
  height:16px;
  background:var(--brand);
  border-radius:2px;
}

/* Stats padding inside group */
.stat-group .stat {
  padding:10px 14px;
  border-bottom:1px solid rgba(15,23,41,.04);
}
.stat-group .stat:last-child {
  border-bottom:none;
}

/* Enhanced hover effects for desktop */
@media (hover: hover) {
  .stat {
    cursor:pointer;
  }
  .stat:hover {
    background:var(--hover) !important;
    border-radius:var(--r);
    margin:0 -8px;
    padding:10px 22px;
  }
  .stat:hover .stv {
    font-size:14px;
  }
  .stat:hover .stbar {
    height:8px;
  }
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .stat {
    grid-template-columns:40px 1fr 40px;
    gap:6px;
  }
  .stv {
    font-size:12px;
  }
  .stl {
    font-size:10px;
  }
  .stat-group .stat {
    padding:8px 12px;
  }
}

/* SCOREBOARD EVENT CHIPS — Enhanced */
.sb-evt {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  margin:2px 4px;
  line-height:1.2;
  padding:4px 8px;
  border-radius:4px;
  background:var(--elevated);
  transition:all .2s;
}
.sb-evt:hover {
  transform:translateY(-2px);
}
.sb-evt-goal {
  color:var(--brand);
  background:rgba(192, 57, 43, 0.08);
}
.sb-evt-card {
  color:var(--amber);
  background:rgba(217, 119, 6, 0.08);
}
.sb-evt-rc {
  color:var(--red);
  background:rgba(220, 38, 38, 0.08);
}

/* EVENTS - Side-by-side timeline — Enhanced */
.evts {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--rl);
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:var(--sh-sm);
  transition:all .2s;
}
.evts:hover {
  border-color:var(--border-s);
  box-shadow:0 2px 8px rgba(15,23,41,.08);
}

/* Events Header */
.evts-h {
  padding:14px 16px;
  font-size:13px;
  font-weight:700;
  color:var(--t2);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg, var(--elevated), var(--white));
}
.evts-h span {
  font-size:12px;
  color:var(--t2);
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.evts-h span:nth-child(2) {
  flex:1;
  text-align:center;
  color:var(--t3);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* MINI TABLE STYLES */
.mt{width:100%;border-collapse:collapse;font-size:12px;line-height:1.4}
.mt thead{background:var(--elevated);font-weight:600}
.mt th{padding:8px 6px;text-align:center;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border)}
.mt th.pos{width:40px}
.mt th.tl{text-align:left;width:40%}
.mt td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);color:var(--t2)}
.mt td.pos{font-weight:700;font-family:var(--mono)}
.mt td.pts{font-weight:800;color:var(--brand);font-family:var(--mono)}
.mt td.tl{text-align:left;cursor:pointer;font-weight:500;color:var(--t1)}
.mt td.tl:hover{color:var(--brand)}
.mt td.tn{font-size:11px}
.mt tr.hl{background:var(--brand-sub);font-weight:600}
.mt tr:hover:not(.hl){background:var(--hover)}

/* Individual event row */
.evt {
  display:grid;
  grid-template-columns:1fr 50px 1fr;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid rgba(15,23,41,.04);
  font-size:12px;
  min-height:40px;
  transition:all .2s;
  gap:8px;
}
.evt:last-child {
  border-bottom:none;
}
.evt:hover {
  background:var(--hover);
  padding:10px 14px;
}

/* Event sides (home/away) */
.evt-home {
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:0;
}
.evt-away {
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}

/* Event center (time + icon) */
.evt-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.evt-min {
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--t2);
  background:var(--elevated);
  padding:3px 8px;
  border-radius:4px;
  line-height:1;
}
.evt-ic {
  font-size:14px;
  line-height:1;
}

/* Event player and description */
.evt-player {
  font-size:12px;
  font-weight:700;
  color:var(--t1);
  line-height:1.3;
  word-break:break-word;
}
.evt-desc {
  font-size:10px;
  color:var(--t3);
  line-height:1.2;
  font-weight:500;
}

/* Event type specific colors */
.evt-goal .evt-player {
  color:var(--brand);
  font-weight:800;
}
.evt-goal .evt-ic {
  animation:pulse-goal .6s ease-out;
}
.evt-yc .evt-player {
  color:var(--amber);
}
.evt-rc .evt-player {
  color:var(--red);
}

/* Event animations */
@keyframes fadeInRight {
  from {
    opacity:0;
    transform:translateX(-12px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity:0;
    transform:translateX(12px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes pulse-goal {
  0%, 100% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.15);
  }
}

/* Event responsive design */
@media (max-width: 640px) {
  .evt {
    grid-template-columns:0.8fr 45px 0.8fr;
    padding:8px 10px;
    gap:6px;
  }
  .evt-player {
    font-size:11px;
  }
  .evt-desc {
    font-size:9px;
  }
  .evt-min {
    font-size:10px;
    padding:2px 6px;
  }
  .evt-ic {
    font-size:12px;
  }
  .evts-h {
    padding:10px 12px;
    font-size:12px;
  }
}

/* Desktop hover effects */
@media (hover: hover) {
  .sb-evt:hover {
    box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  .evt:hover {
    background:linear-gradient(135deg, var(--hover), var(--white)) !important;
  }
}

/* H2H DUEL */
.h2h-duel{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 16px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:12px;box-shadow:var(--sh-sm)}
.h2h-duel-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
.h2h-duel-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px}
.h2h-duel-logo img{width:48px;height:48px;object-fit:contain}
.h2h-duel-name{font-size:13px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.h2h-duel-vs{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.h2h-duel-badge{width:40px;height:40px;border-radius:50%;background:var(--brand-sub);color:var(--brand);font-family:var(--mono);font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center}
.h2h-duel-lbl{font-size:9px;color:var(--t3);font-weight:500}

/* H2H DOMINANCE BAR */
.h2h-dominance{margin-bottom:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px;overflow:hidden}
.h2h-dom-labels{display:flex;justify-content:space-between;margin-bottom:6px}
.h2h-dom-w{font-size:11px;font-weight:600;color:var(--t2)}.h2h-dom-d{font-size:11px;color:var(--t3)}
.h2h-dom-bar{display:flex;height:28px;border-radius:var(--r);overflow:hidden;gap:2px}
.h2h-dom-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;min-width:24px;transition:width .6s}
.h2h-dom-seg.home{background:var(--brand);border-radius:var(--r) 0 0 var(--r)}
.h2h-dom-seg.draw{background:var(--t3)}
.h2h-dom-seg.away{background:var(--red);border-radius:0 var(--r) var(--r) 0}

/* H2H COMPARE */
.h2h-compare{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:12px}
.h2h-cmp-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border)}.h2h-cmp-row:last-child{border:none}
.h2h-cmp-v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--t2)}.h2h-cmp-v:first-child{text-align:left}.h2h-cmp-v:last-child{text-align:right}
.h2h-cmp-v.win{color:var(--brand);font-weight:800}
.h2h-cmp-lbl{font-size:11px;color:var(--t3);text-align:center;font-weight:500}

/* H2H GOAL FLOW */
.h2h-flow{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:14px;margin-bottom:12px}
.h2h-flow-hdr{font-size:12px;font-weight:700;margin-bottom:10px}
.h2h-flow-chart{display:flex;justify-content:space-around;gap:4px;padding-bottom:6px}
.h2h-flow-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.h2h-flow-bars{display:flex;gap:3px;align-items:flex-end;height:44px}
.h2h-flow-bar{width:14px;border-radius:3px 3px 0 0;display:flex;align-items:flex-start;justify-content:center;font-size:8px;font-weight:700;color:#fff;min-height:3px;transition:height .4s}
.h2h-flow-bar.home{background:var(--brand)}
.h2h-flow-bar.away{background:var(--red-l)}
.h2h-flow-lbl{font-size:8px;color:var(--t3);font-family:var(--mono)}
.h2h-flow-legend{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:8px;font-size:10px;color:var(--t3)}
.h2h-flow-key{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px}
.h2h-flow-key.home{background:var(--brand)}.h2h-flow-key.away{background:var(--red-l)}

/* H2H MATCHES HEADER */
.h2h-matches-hdr{font-size:12px;font-weight:700;padding:10px 0 6px;color:var(--t2)}

/* FORM MATCH ROWS (shared) */
.fm-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}.fm-row:hover{background:var(--hover)}.fm-row:last-child{border:none}
.fm-res{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.fm-res.W{background:var(--green)}.fm-res.D{background:var(--t3)}.fm-res.L{background:var(--red)}
.fm-body{flex:1;min-width:0}
.fm-teams{display:flex;align-items:center;gap:4px;font-size:12px}
.fm-teams .bold{font-weight:700}
.fm-score{font-family:var(--mono);font-weight:700;font-size:12px;padding:0 6px;flex-shrink:0}
.fm-meta{font-size:10px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-date{font-family:var(--mono);font-size:10px;color:var(--t3);min-width:40px;text-align:center;flex-shrink:0}

/* LEAGUE TABLE */
.tbl-container{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.tbl-header{padding:10px 8px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);display:flex;align-items:center;justify-content:space-between}
.tbl-title{font-size:13px;font-weight:700;color:var(--t1)}
.tbl-meta{font-size:10px;color:var(--t3);font-weight:500}
.tbl-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:var(--rl);background:var(--white)}
.tbl-main{width:100%;border-collapse:collapse;font-size:11px}
.tbl-main thead{background:var(--elevated);sticky;top:0;z-index:2}
.tbl-head-row{display:grid;grid-template-columns:40px 1fr 35px 35px 35px 35px 50px 50px;gap:0}
.tbl-col{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.tbl-col[style*="left"]{text-align:left}
.tbl-row{display:grid;grid-template-columns:40px 1fr 35px 35px 35px 35px 50px 50px;gap:0;border-bottom:1px solid var(--border);transition:all .15s;cursor:pointer}
.tbl-row:hover{background:var(--hover)}
.tbl-row.tbl-hl{background:var(--brand-sub);font-weight:600}
.tbl-pos{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;color:var(--t3)}
.tbl-team{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;text-align:left;gap:8px}
.tbl-team-name{font-size:12px;font-weight:500;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-form{display:flex;gap:3px}
.tbl-form-item{width:6px;height:6px;border-radius:2px;flex-shrink:0}
.form-W{background:var(--green)}
.form-D{background:var(--t3)}
.form-L{background:var(--red)}
.tbl-num{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;color:var(--t2);font-size:11px}
.tbl-num-win{color:var(--green);font-weight:600}
.tbl-num-loss{color:var(--red)}
.tbl-gd{display:flex;align-items:center;justify-content:center}
.tbl-gd-value{font-family:var(--mono);font-weight:700;font-size:12px;padding:2px 4px;border-radius:4px}
.tbl-gd-positive{color:var(--green);background:rgba(5,150,105,0.08)}
.tbl-gd-neutral{color:var(--t3);background:var(--elevated)}
.tbl-gd-negative{color:var(--red);background:rgba(220,38,38,0.08)}
.tbl-pts{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:13px;color:var(--brand)}
.tbl-team-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;text-align:left;cursor:pointer}
.tbl-team-cell div{font-size:12px;font-weight:500;color:var(--t1)}
.tbl-team-cell:hover{background:rgba(0,0,0,0.02)}
.tbl-gf-ga{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--t2);font-weight:500}
@media(max-width:640px){.tbl-main{font-size:10px}.tbl-col{padding:6px 4px;font-size:8px}.tbl-team-name{font-size:11px}.tbl-num{font-size:10px}.tbl-form-item{width:5px;height:5px}}

/* SQUAD */
/* SQUAD */
.sq-group{margin-bottom:12px;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.sq-group-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;padding:8px 12px;background:var(--elevated)}
.sq-group-cnt{font-family:var(--mono);font-size:10px;background:var(--white);padding:2px 8px;border-radius:10px}
.sq-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--white);border-bottom:1px solid var(--border);transition:background .12s}.sq-row:last-child{border:none}.sq-row:hover{background:var(--hover)}
.sq-num{font-family:var(--mono);font-weight:800;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--t3);color:var(--t2);flex-shrink:0}
.sq-img{width:36px;height:36px;border-radius:50%;background:var(--elevated);object-fit:cover;flex-shrink:0}
.sq-img-fallback{width:36px;height:36px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.sq-info{flex:1;min-width:0}
.sq-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-detail{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:0;flex-wrap:wrap}
.sq-sep{margin:0 4px;color:var(--t4)}
.sq-flag{width:14px;height:10px;border-radius:1px;object-fit:cover;vertical-align:middle;margin-right:3px}

/* TOPSCORERS */
.ts-cat{margin-bottom:20px}
.ts-cat-h{font-size:13px;font-weight:700;padding:8px 0;display:flex;align-items:center;gap:6px}
.ts-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px}.ts-row:last-child{border:none}
.ts-pos{font-family:var(--mono);font-weight:800;font-size:13px;min-width:22px;text-align:center;color:var(--t3)}
.ts-pos.top3{color:var(--brand)}
.ts-avatar{width:32px;height:32px;border-radius:50%;background:var(--elevated);object-fit:cover;flex-shrink:0}
.ts-info{flex:1;min-width:0}
.ts-name{font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-meta{font-size:10px;color:var(--t3)}
.ts-total{font-family:var(--mono);font-weight:800;font-size:16px;color:var(--brand);min-width:30px;text-align:center}

/* ODDS */
.odds-strip{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 0 12px}
.odds-chip{padding:5px 12px;border-radius:var(--r);background:var(--elevated);border:1px solid var(--border);text-align:center;min-width:54px}
.odds-lbl{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.odds-val{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brand);margin-top:1px}
.odds-grid{display:flex;flex-wrap:wrap;gap:6px}
.odds-cell{padding:6px 10px;border-radius:var(--r);background:var(--elevated);text-align:center;min-width:54px;flex:1}

/* INFO CARDS */
.icard{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh-xs)}
.icard-h{padding:12px;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
.irow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}.irow:last-child{border:none}
.irow-ic{font-size:14px;width:20px;text-align:center;flex-shrink:0}
.irow-lbl{flex:1;color:var(--t2)}.irow-val{font-weight:600;text-align:right;max-width:55%}

/* FORMATION / PITCH */
.fmt{display:flex;border-radius:var(--rl);overflow:hidden;background:var(--white);border:1px solid var(--border);margin-bottom:12px}
.fmt-side{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 8px;gap:8px}
.fmt-div{width:1px;background:var(--border)}.fmt-name{font-size:11px;font-weight:600;color:var(--t3)}.fmt-val{font-size:22px;font-weight:800;letter-spacing:1px}

/* LEADERBOARDS */
.lb-tabs-wrap{display:flex;gap:4px;margin-bottom:8px}
.lb-tab{flex:1;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--white);font-size:12px;font-weight:600;text-align:center;cursor:pointer;font-family:var(--font);color:var(--t3);transition:all .12s}
.lb-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.lb-cats-wrap{display:flex;gap:4px;margin-bottom:12px}
.lb-cat{flex:1;padding:6px;border:2px solid var(--border);border-radius:var(--r);background:var(--white);font-size:11px;font-weight:600;text-align:center;cursor:pointer;font-family:var(--font);color:var(--t3);transition:all .12s}
.lb-cat.on{background:var(--white);font-weight:700}
.lb-list{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.lb-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .12s;position:relative}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:var(--hover)}
.lb-row.live{background:var(--red-sub)}
.lb-live-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red-l)}
.lb-rank{font-family:var(--mono);font-weight:800;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-rank.gold{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#92400E}
.lb-rank.silver{background:linear-gradient(135deg,#E5E7EB,#D1D5DB);color:#374151}
.lb-rank.bronze{background:linear-gradient(135deg,#FED7AA,#FDBA74);color:#9A3412}
.lb-rank.normal{background:var(--elevated);color:var(--t3)}
.lb-match-info{flex:1;min-width:0}
.lb-teams{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:500;flex-wrap:nowrap;overflow:hidden}
.lb-tlogo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.lb-dash{color:var(--t3);margin:0 1px}
.lb-league{font-size:9px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-live-badge{font-size:8px;font-weight:700;color:#fff;background:var(--red-l);padding:1px 4px;border-radius:3px}
.lb-score{font-family:var(--mono);font-size:12px;font-weight:700;min-width:30px;text-align:center;flex-shrink:0}
.lb-score.live{color:var(--red-l)}
.lb-value{text-align:center;min-width:52px;flex-shrink:0}
.lb-val-main{font-family:var(--mono);font-size:14px;font-weight:800}
.lb-val-sub{font-size:8px;color:var(--t3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SIGNALS v3 â€” Complete Visual Upgrade
   Replace ALL existing sig-* rules in styles.css
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

.sig-mode-toggle{display:inline-flex;gap:3px;background:var(--inset);border-radius:8px;padding:3px;margin-bottom:10px}
.sig-mode-btn{flex:none;padding:6px 12px;border:none;background:none;font-size:11px;font-weight:600;border-radius:6px;cursor:pointer;color:var(--t3);transition:all .15s;font-family:var(--font);white-space:nowrap}
.sig-mode-btn:hover{color:var(--t2);background:rgba(255,255,255,.5)}
.sig-mode-btn.on{background:var(--white);color:var(--brand);box-shadow:var(--sh-xs)}


/* â”€â”€ Hot Signals Banner â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-hot-banner{background:linear-gradient(135deg,rgba(239,68,68,.05),rgba(239,68,68,.02));border:1px solid rgba(239,68,68,.15);border-radius:var(--rl);padding:12px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.sig-hot-hdr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--red-l);margin-bottom:8px}
.sig-pulse{width:8px;height:8px;border-radius:50%;background:var(--red-l);animation:pulse 1.5s infinite}
.sig-hot-card{background:var(--white);border:1px solid rgba(239,68,68,.12);border-radius:var(--r);padding:10px 12px;margin-bottom:4px;cursor:pointer;transition:all .15s;box-shadow:var(--sh-xs)}
.sig-hot-card:hover{transform:translateY(-1px);box-shadow:var(--sh-sm);border-color:var(--red-l)}
.sig-hot-match{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sig-hot-label{font-size:13px;font-weight:700;color:var(--t1);margin-top:4px}
.sig-hot-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.sig-tm-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.sig-trigger{font-size:10px;color:var(--info);font-weight:600;padding:2px 8px;background:rgba(8,145,178,.06);border-radius:var(--rfl)}

/* â”€â”€ Match Card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-match{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-xs);transition:all .15s}
.sig-match:hover{box-shadow:var(--sh-sm)}

/* Match Header */
.sig-match-hdr{padding:14px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(250,251,253,.5),transparent)}
.sig-match-hdr:hover{background:var(--hover)}
.sig-match-teams{display:flex;align-items:center;gap:8px}
.sig-team-row{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.sig-tn{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig-vs{font-size:11px;color:var(--t4);flex-shrink:0;font-weight:600;padding:0 4px}

/* Live Score */
.sig-live-score{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;padding:0 10px}
.sig-score{font-family:var(--mono);font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.5px}
.sig-minute{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--rfl);letter-spacing:.3px}
.sig-minute.live{color:var(--red-l);background:var(--red-sub);animation:pulse 1.5s infinite}
.sig-minute.ht{color:var(--amber);background:var(--amber-sub)}

/* Match Meta */
.sig-match-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t3);margin-top:6px;font-weight:500}
.sig-country{color:var(--t4)}

/* â”€â”€ Count Row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-count-row{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--elevated);border-bottom:1px solid var(--border)}
.sig-count-badge{font-size:11px;font-weight:700;color:var(--brand)}
.sig-count-strong{font-size:10px;font-weight:700;color:var(--red-l)}
.sig-count-medium{font-size:10px;font-weight:700;color:var(--amber)}

/* â”€â”€ Signal Card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-card{padding:14px;border-bottom:1px solid var(--border);transition:background .12s}
.sig-card:last-child{border-bottom:none}
.sig-card.strong{background:linear-gradient(135deg,rgba(239,68,68,.03),rgba(239,68,68,.01));border-left:3px solid var(--red-l)}
.sig-card.medium{background:linear-gradient(135deg,rgba(217,119,6,.03),rgba(217,119,6,.01));border-left:3px solid var(--amber)}

/* Card Top */
.sig-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.sig-market-badge{font-size:9px;font-weight:700;padding:3px 10px;border-radius:6px;letter-spacing:.4px;display:inline-flex;align-items:center;gap:4px}
.sig-market-badge.goals{background:rgba(37,99,235,.08);color:#2563EB}
.sig-market-badge.btts{background:rgba(124,58,237,.08);color:#7C3AED}
.sig-market-badge.corners{background:rgba(5,150,105,.08);color:var(--green)}
.sig-market-badge.cards{background:rgba(217,119,6,.08);color:var(--amber)}
.sig-market-badge.result{background:rgba(8,145,178,.08);color:var(--info)}
.sig-market-badge.other{background:var(--elevated);color:var(--t3)}

.sig-strength-badge{font-size:9px;font-weight:700;padding:3px 10px;border-radius:6px;letter-spacing:.3px}
.sig-strength-badge.strong{background:rgba(239,68,68,.08);color:var(--red-l)}
.sig-strength-badge.medium{background:rgba(217,119,6,.08);color:var(--amber)}
.sig-strength-badge.watch{background:rgba(8,145,178,.06);color:var(--info)}

/* Card Content */
.sig-card-label{font-size:14px;font-weight:700;color:var(--t1);line-height:1.3;margin-bottom:4px}
.sig-card-trigger{font-size:11px;color:var(--info);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(8,145,178,.04);border-radius:6px;width:fit-content}
.sig-card-desc{font-size:12px;color:var(--t3);margin-bottom:10px;line-height:1.5}

/* Confidence Bar */
.sig-conf-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sig-conf-label{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;min-width:68px}
.sig-conf-bar{flex:1;height:6px;background:var(--elevated);border-radius:3px;overflow:hidden}
.sig-conf-fill{height:100%;border-radius:3px;transition:width .5s}
.sig-conf-val{font-family:var(--mono);font-size:12px;font-weight:800;min-width:36px;text-align:right}

/* Confidence Badge (hot banner) */
.sig-conf-badge{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.sig-conf-badge.strong{background:rgba(5,150,105,.1);color:var(--green)}

/* EV Badge */
.sig-ev-badge{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--green);padding:2px 8px;background:rgba(5,150,105,.08);border-radius:6px}

/* â”€â”€ Metrics Row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-odds-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.sig-odds-badge,.sig-ev-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--elevated);border-radius:8px;border:1px solid var(--border)}
.sig-odds-label{font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.sig-odds-val{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--t1);letter-spacing:-.3px}
.sig-ev-badge.ev-hot{border-color:var(--green);background:rgba(0,200,83,.08)}
.sig-ev-badge.ev-hot .sig-odds-val{color:var(--green)}
.sig-ev-badge.ev-pos .sig-odds-val{color:var(--amber)}
.sig-ev-badge.ev-neg{border-color:var(--red);background:rgba(255,60,60,.06)}
.sig-ev-badge.ev-neg .sig-odds-val{color:var(--red)}

/* â”€â”€ Prediction & Recommendation â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-prediction{font-size:12px;font-weight:600;color:var(--brand);padding:4px 0;margin-bottom:4px}
.sig-rec{display:inline-block;font-size:10px;font-weight:700;padding:4px 12px;border-radius:var(--rfl);margin-top:6px}
.sig-rec.strong-yes{background:rgba(5,150,105,.08);color:var(--green);border:1px solid rgba(5,150,105,.12)}
.sig-rec.lean-yes{background:rgba(192,57,43,.06);color:var(--brand);border:1px solid rgba(192,57,43,.1)}

/* â”€â”€ Factors â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-factors{margin-top:6px}
.sig-factors-toggle{font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:4px;list-style:none}
.sig-factors-toggle::-webkit-details-marker{display:none}
.sig-factors-toggle::after{content:'â–¸';font-size:10px;transition:transform .15s}
details[open] .sig-factors-toggle::after{transform:rotate(90deg)}
.sig-factors-list{padding:8px 0;display:flex;flex-direction:column;gap:4px}
.sig-factor{font-size:11px;color:var(--t2);padding:4px 10px;border-radius:var(--rfl);display:flex;align-items:center;gap:4px}
.sig-factor.sup{color:var(--green);background:var(--green-sub);border:1px solid rgba(5,150,105,.08)}
.sig-factor.opp{color:var(--amber);background:var(--amber-sub);border:1px solid rgba(217,119,6,.08)}
.sig-factor.risk{color:var(--red);background:var(--red-sub)}

/* â”€â”€ Friendly Toggle â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-friendly-toggle{margin-left:auto;font-size:11px!important;padding:5px 10px!important;opacity:.8}
.sig-friendly-toggle:hover{opacity:1}
.sig-friendly-toggle.on{background:var(--green);border-color:var(--green)}

/* BETTING TABLE */
.bet-th{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
.bet-th:hover{color:var(--brand)}
.sort-arrow{font-size:8px;color:var(--brand)}
.bet-hot{color:var(--green);font-weight:700}
.bet-warm{color:var(--amber);font-weight:600}
.bet-cold{color:var(--t3)}
.bet-cold-inv{color:var(--green);font-weight:600}
.bet-avg{font-size:10px;color:var(--t3);padding:8px 4px;text-align:center}
.bet-avg b{color:var(--t1);font-weight:700}
.bet-avg-t{font-weight:600;color:var(--t2)}

/* TEAM PROFILE */
.tp-hero{background:var(--white);border:1px solid var(--border);border-radius:var(--rxl);margin-bottom:12px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.tp-hero-bg{position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,var(--brand),var(--brand-l));opacity:.08}
.tp-hero-content{display:flex;align-items:center;gap:14px;padding:20px 16px 12px;position:relative}
.tp-logo{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.tp-logo-fallback{width:56px;height:56px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.tp-hero-info{flex:1;min-width:0}
.tp-hero-name{font-size:20px;font-weight:800;letter-spacing:-.4px}
.tp-hero-meta{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);margin-top:2px;flex-wrap:wrap}
.tp-league-badge{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 10px;border-radius:var(--rfl);background:var(--brand-sub);font-size:11px;font-weight:600;color:var(--brand)}
.tp-hero-form{display:flex;gap:4px;padding:0 16px 14px;position:relative}
.tp-form-dot{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff}
.tp-form-dot.w{background:var(--green)}.tp-form-dot.d{background:var(--t3)}.tp-form-dot.l{background:var(--red)}

/* STATS BAR */
.tp-stats-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.tp-sbar-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:8px 4px;text-align:center}
.tp-sbar-v{font-family:var(--mono);font-size:16px;font-weight:800;display:block;line-height:1.2}
.tp-sbar-v.tp-brand{color:var(--brand)}
.tp-sbar-l{font-size:8px;color:var(--t3);font-weight:500;text-transform:uppercase;letter-spacing:.3px}

/* W/D/L BAR */
.tp-wdl-bar{display:flex;height:24px;border-radius:var(--r);overflow:hidden;gap:2px;margin-bottom:6px}
.tp-wdl-seg{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;min-width:20px;transition:width .5s}
.tp-wdl-seg.w{background:var(--green)}.tp-wdl-seg.d{background:var(--t3)}.tp-wdl-seg.l{background:var(--red)}

/* GOALS STRIP */
.tp-goals-strip{display:flex;gap:12px;justify-content:center;padding:6px 0 12px;font-size:10px;color:var(--t3);font-weight:500}

/* VENUE CARD */
.tp-venue-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:12px}
.tp-venue-img{height:120px;overflow:hidden}.tp-venue-img img{width:100%;height:100%;object-fit:cover}
.tp-venue-info{padding:12px}
.tp-venue-name{font-size:14px;font-weight:700;margin-bottom:4px}
.tp-venue-meta{font-size:11px;color:var(--t3)}

/* COACH CARD */
.tp-coach-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:12px}
.tp-coach-img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tp-coach-img-fallback{width:44px;height:44px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.tp-coach-info{flex:1}.tp-coach-role{font-size:10px;color:var(--t3);font-weight:500;text-transform:uppercase;letter-spacing:.4px}.tp-coach-name{font-size:14px;font-weight:700}

/* INJURY ROW */
.tp-inj-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px}.tp-inj-row:last-child{border:none}
.tp-inj-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tp-inj-name{flex:1;font-weight:500}.tp-inj-type{font-size:10px;color:var(--red);font-weight:600}

/* UPCOMING MATCHES */
.tp-upcoming-hdr{font-size:12px;font-weight:700;padding:10px 0 6px}
.tp-upcoming-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;cursor:pointer;transition:all .12s}
.tp-upcoming-row:hover{background:var(--hover);transform:translateX(2px)}
.tp-up-date{font-size:10px;font-family:var(--mono);color:var(--t3);min-width:70px;flex-shrink:0}
.tp-up-body{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.tp-up-team{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-up-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.tp-up-vs{font-size:10px;color:var(--t3);flex-shrink:0}
.tp-up-league{font-size:9px;color:var(--t4);flex-shrink:0}

/* MATCHES SUMMARY */
.tp-matches-summary{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--elevated);border-radius:var(--r);margin-bottom:10px;font-size:11px;font-weight:600;color:var(--t2)}
.tp-ms-item strong{font-family:var(--mono);font-weight:800}

.form-strip{display:flex;gap:3px}
.form-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.form-dot.W{background:var(--green)}.form-dot.D{background:var(--t3)}.form-dot.L{background:var(--red)}

/* FORM ANALYSIS v3 */

/* Filter bar */
.f3-filter-bar{display:flex;gap:6px;padding:0 0 12px;justify-content:center}
.f3-filter-pill{padding:6px 16px;border-radius:var(--rfl);font-size:11px;font-weight:600;background:var(--white);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:all .15s}
.f3-filter-pill:hover{background:var(--hover)}
.f3-filter-pill.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(192,57,43,.2)}

/* Comparison */
.f3-comparison{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.f3-comp-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t3);margin-bottom:12px;text-align:center}
.f3-comp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.f3-comp-row:last-child{margin-bottom:0}
.f3-comp-val{font-family:var(--mono);font-size:13px;font-weight:800;width:36px;text-align:center;flex-shrink:0}
.f3-comp-mid{flex:1;min-width:0}
.f3-comp-label{font-size:10px;font-weight:600;color:var(--t3);text-align:center;margin-bottom:4px}
.f3-comp-track{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--elevated);gap:2px}
.f3-comp-bar{height:100%;border-radius:3px;transition:width .6s ease}
.f3-comp-bar.left{border-radius:3px 0 0 3px}
.f3-comp-bar.right{border-radius:0 3px 3px 0}

/* Cards layout */
.f3-cards{display:flex;flex-direction:column;gap:16px}

/* Team card */
.f3-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.f3-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,var(--white) 0%,var(--elevated) 100%);border-bottom:1px solid var(--border)}
.f3-card-name{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--t1)}
.f3-dots{display:flex;gap:4px}
.f3-dot{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;transition:transform .15s}
.f3-dot:hover{transform:scale(1.15)}
.f3-dot.W{background:var(--green)}.f3-dot.D{background:var(--t3)}.f3-dot.L{background:var(--red)}

/* Score row: arc + KPIs */
.f3-card-score-row{display:flex;align-items:center;gap:16px;padding:16px}
.f3-arc-wrap{position:relative;width:76px;height:76px;flex-shrink:0}
.f3-arc{width:76px;height:76px}
.f3-arc-fill{transition:stroke-dasharray .8s ease}
.f3-arc-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.f3-arc-val{font-family:var(--mono);font-size:22px;font-weight:800;line-height:1}
.f3-arc-lbl{font-size:8px;font-weight:600;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}

.f3-card-kpi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.f3-kpi{display:flex;flex-direction:column;align-items:center;min-width:28px}
.f3-kpi-v{font-family:var(--mono);font-size:18px;font-weight:800;line-height:1.2}
.f3-kpi-l{font-size:8px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-top:1px}
.f3-kpi-sep{width:1px;height:28px;background:var(--border);margin:0 2px}

/* Sparkline */
.f3-sparkline-wrap{display:flex;align-items:center;gap:8px;padding:0 16px 12px}
.f3-spark-label{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.f3-spark{flex:1;height:28px}

/* Insight pills */
.f3-pills{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 14px}
.f3-pill{padding:4px 10px;border-radius:var(--rfl);font-size:10px;font-weight:600;background:var(--elevated);color:var(--t2);line-height:1.3}
.f3-pill.green{background:var(--green-sub);color:var(--green)}
.f3-pill.red{background:var(--red-sub);color:var(--red)}
.f3-pill.amber{background:var(--amber-sub);color:var(--amber)}
.f3-pill.blue{background:rgba(59,130,246,.08);color:#3b82f6}
.f3-pill.grey{background:var(--elevated);color:var(--t3)}

/* Match list */
.f3-matches{padding:0 12px 8px}
.f3-match{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;cursor:pointer;transition:all .15s}
.f3-match:hover{background:var(--hover);transform:translateX(3px);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.f3-match-res{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.f3-match-res.W{background:var(--green)}.f3-match-res.D{background:var(--t3)}.f3-match-res.L{background:var(--red)}
.f3-match-body{flex:1;min-width:0}
.f3-match-top{display:flex;align-items:center;gap:6px}
.f3-match-logo{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.f3-match-opp{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}
.f3-match-venue{font-size:9px;color:var(--t3);font-weight:700;background:var(--elevated);padding:1px 5px;border-radius:4px;flex-shrink:0}
.f3-match-bottom{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.f3-match-score{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand)}
.f3-match-ht{font-size:10px;color:var(--t3)}
.f3-mchip{font-size:9px;color:var(--t3);background:var(--elevated);padding:1px 5px;border-radius:4px;font-weight:500}
.f3-match-league{font-size:10px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f3-match-date{font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0}

/* Hidden matches + expand */
.f3-matches-hidden{padding:0 12px}
.f3-expand-btn{display:block;width:calc(100% - 24px);margin:0 12px 12px;padding:8px;border:1px dashed var(--border-s);border-radius:var(--r);background:none;color:var(--t3);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.f3-expand-btn:hover{background:var(--elevated);color:var(--t1);border-style:solid}

/* Empty state */
.f3-empty-msg{padding:24px 16px;text-align:center;color:var(--t3);font-size:13px}

/* form-match shared (used by team-profile) */
.form-match{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;cursor:pointer;transition:all .12s}
.form-match:hover{background:var(--hover);transform:translateX(2px)}
.form-match-res{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.form-match-res.W{background:var(--green)}.form-match-res.D{background:var(--t3)}.form-match-res.L{background:var(--red)}
.form-match-body{flex:1;min-width:0}
.form-match-top{display:flex;align-items:center;gap:6px}
.form-match-logo{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.form-match-opp{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-match-venue{font-size:10px;color:var(--t3);font-weight:500;flex-shrink:0}
.form-match-bottom{display:flex;align-items:center;gap:8px;margin-top:2px}
.form-match-score{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand)}
.form-match-ht{font-size:10px;color:var(--t3)}
.form-match-league{font-size:10px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-match-date{font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0}

/* FORM MATCH (legacy - used elsewhere) */
.fm{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;cursor:pointer;transition:background .12s}
.fm:hover{background:var(--hover)}
.fm-res{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.fm-res.W{background:var(--green)}.fm-res.D{background:var(--t3)}.fm-res.L{background:var(--red)}
.fm-info{flex:1;min-width:0}
.fm-teams{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.fm-score{font-family:var(--mono);font-weight:800;padding:2px 8px;background:var(--elevated);border-radius:4px;flex-shrink:0}
.fm-sub{font-size:10px;color:var(--t3);margin-top:2px}

/* TABLE */
.tbl-wrap{overflow-x:auto;margin-bottom:16px}
table.lt{width:100%;border-collapse:collapse;font-size:12px}
.lt th{padding:8px 5px;text-align:center;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--border-s);background:var(--bg);position:sticky;top:0}
.lt th.tl{text-align:left;width:40%}
.lt td{padding:7px 5px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--t2);border-bottom:1px solid var(--border)}
.lt td.tn{text-align:left;font-family:var(--font);font-weight:600;color:var(--t1);cursor:pointer}.lt td.tn:hover{color:var(--brand)}
.lt td.pos{font-weight:700}.lt td.pts{font-weight:800;color:var(--t1)}
.lt tr.zcl td{border-left:3px solid var(--green)}.lt tr.zel td{border-left:3px solid var(--info)}.lt tr.zrel td{border-left:3px solid var(--red)}

/* SEARCH */
.sbox{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--border-s);border-radius:var(--rl);padding:10px 14px;margin:4px 4px 12px;transition:border-color .15s}
.sbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-sub)}
.sinp{flex:1;border:none;outline:none;font-family:var(--font);font-size:14px;color:var(--t1);background:none}.sinp::placeholder{color:var(--t4)}
.sr{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);cursor:pointer;transition:background .12s}.sr:hover{background:var(--hover)}
.sr-ic{font-size:18px;flex-shrink:0}.sr-info{flex:1}.sr-n{font-size:14px;font-weight:600}.sr-s{font-size:11px;color:var(--t3)}
.sr-tag{font-size:9px;font-weight:700;color:var(--t3);background:var(--elevated);padding:2px 8px;border-radius:var(--rfl);text-transform:uppercase;letter-spacing:.4px}

/* LEAGUE LIST */
.lg-section-hdr{padding:14px 4px 6px;font-size:12px;font-weight:700;color:var(--t2)}
.lg-popular{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.lg-pop-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s}
.lg-pop-card:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-sub);transform:translateY(-1px)}
.lg-pop-flag{font-size:24px;margin-bottom:4px}
.lg-pop-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-pop-meta{font-size:10px;color:var(--t3)}
.lg-country-hdr{display:flex;align-items:center;gap:8px;padding:10px 4px 4px}
.lg-country-flag{font-size:16px}
.lg-country-name{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;flex:1}
.lg-country-cnt{font-size:10px;color:var(--t4);font-family:var(--mono)}
.ll{display:flex;align-items:center;gap:12px;padding:12px;background:var(--white);border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.ll:hover{background:var(--hover)}
.ll-logo{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.ll-flag{font-size:20px;flex-shrink:0}.ll-info{flex:1;min-width:0}
.ll-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-meta{font-size:11px;color:var(--t3)}.ll-arr{font-size:16px;color:var(--t4)}

/* LEAGUE DETAIL HEADER */
.lg-det-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lg-det-logo{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.lg-det-name{font-size:20px;font-weight:800;letter-spacing:-.3px}
.lg-det-meta{font-size:12px;color:var(--t3)}

/* TABLE ENHANCEMENTS */
.tbl-team-logo{width:16px;height:16px;object-fit:contain;vertical-align:middle;margin-right:5px}
.tbl-form{display:flex;gap:2px;justify-content:center}
.tbl-form-dot{width:8px;height:8px;border-radius:2px}
.tbl-form-dot.w{background:var(--green)}.tbl-form-dot.l{background:var(--red)}.tbl-form-dot.d{background:var(--t3)}
.tbl-zones{display:flex;gap:14px;flex-wrap:wrap;padding:8px 0;font-size:10px;color:var(--t3)}
.tbl-zone{display:flex;align-items:center;gap:4px}
.tbl-zone-dot{width:8px;height:8px;border-radius:2px}

/* FIXTURE LIST */
.fx-date-hdr{padding:10px 0 4px;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.fx-row{display:flex;align-items:center;padding:8px 10px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:3px;cursor:pointer;transition:all .12s;gap:8px}
.fx-row:hover{background:var(--hover);transform:translateX(2px)}
.fx-teams{flex:1;min-width:0}
.fx-team{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.fx-team.w{font-weight:700}
.fx-score-col{text-align:center;flex-shrink:0;min-width:44px}
.fx-score{font-family:var(--mono);font-size:13px;font-weight:700}
.fx-score.live{color:var(--red-l);font-weight:800}
.fx-time{font-family:var(--mono);font-size:12px;color:var(--t3);font-weight:600}
.fx-ht{font-size:9px;color:var(--t3);margin-top:1px}

/* TOPSCORER PODIUM */
.ts-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:16px;padding:10px 4px 0}
.ts-pod-col{display:flex;flex-direction:column;align-items:center;flex:1;max-width:110px}
.ts-pod-col.first .ts-pod-avatar{width:52px;height:52px;border:2px solid var(--brand)}
.ts-pod-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:4px}
.ts-pod-avatar img{width:100%;height:100%;object-fit:cover}
.ts-pod-name{font-size:10px;font-weight:700;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-pod-team{font-size:9px;color:var(--t3);margin-bottom:6px;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-pod-bar{width:100%;border-radius:var(--r) var(--r) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ts-pod-col:nth-child(1) .ts-pod-bar{background:linear-gradient(180deg,#e5e7eb,#d1d5db)}
.ts-pod-col:nth-child(2) .ts-pod-bar{background:linear-gradient(180deg,var(--brand-sub),rgba(192,57,43,.12))}
.ts-pod-col:nth-child(3) .ts-pod-bar{background:linear-gradient(180deg,#fde68a,#fbbf24)}
.ts-pod-medal{font-size:16px}
.ts-pod-val{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--t1)}
.ts-list{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}

/* STATES */
.loading,.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-ic{font-size:36px;margin-bottom:10px;opacity:.4}
.empty-t{font-size:13px;color:var(--t3)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.fi{animation:fadeUp .25s ease both}
.stats-rendered .stat-group{animation:fadeInUp .4s ease-out both}/* === BETTING DNA === */
.dna-summary-card{background:linear-gradient(135deg,rgba(192,57,43,.08),rgba(192,57,43,.02));border:1px solid rgba(192,57,43,.15);border-radius:10px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.dna-summary-icon{font-size:24px}
.dna-summary-text{font-size:12.5px;color:var(--t1);line-height:1.5;font-weight:500}
.dna-summary-meta{font-size:10.5px;color:var(--t3)}

.dna-section-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:16px 0 8px;padding-left:2px}

.dna-rates{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.dna-rate-row{display:flex;align-items:center;gap:8px}
.dna-rate-lbl{width:80px;font-size:11px;color:var(--t2);flex-shrink:0}
.dna-rate-bar-wrap{flex:1;display:flex;align-items:center;gap:6px}
.dna-rate-bar{flex:1;height:18px;background:var(--bg2);border-radius:9px;overflow:visible;position:relative}
.dna-rate-fill{height:100%;border-radius:9px;transition:width .4s ease}
.dna-rate-fill.dna-hot{background:linear-gradient(90deg,#22c55e,#16a34a)}
.dna-rate-fill.dna-warm{background:linear-gradient(90deg,#f59e0b,#d97706)}
.dna-rate-fill.dna-cold{background:linear-gradient(90deg,#94a3b8,#64748b)}
.dna-rate-val{width:38px;font-size:11px;font-weight:700;text-align:right;flex-shrink:0}
.dna-rate-val.dna-hot{color:#16a34a}
.dna-rate-val.dna-warm{color:#d97706}
.dna-rate-val.dna-cold{color:#64748b}

/* League average marker on bar */
.dna-rate-marker{position:absolute;top:-2px;width:2px;height:22px;background:var(--brand);border-radius:1px;opacity:.7;z-index:2}
.dna-rate-marker::after{content:'';position:absolute;top:-3px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* Averages grid */
.dna-avg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.dna-avg-cell{background:var(--bg2);border-radius:8px;padding:10px 6px;text-align:center}
.dna-avg-v{font-size:16px;font-weight:800;color:var(--t1);font-family:var(--mono)}
.dna-avg-l{font-size:9px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* League context */
.dna-league-ctx{background:var(--bg2);border-radius:10px;padding:12px;margin-top:12px;border:1px solid var(--border)}
.dna-league-hdr{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:8px}
.dna-league-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dna-lg-item{text-align:center}
.dna-lg-v{font-size:14px;font-weight:800;color:var(--brand);display:block;font-family:var(--mono)}
.dna-lg-l{font-size:9px;color:var(--t3)}

/* === LEAGUE AVERAGE STRIP (enhanced) === */
.lg-avg-strip{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;margin:-4px 0 10px;background:linear-gradient(135deg,rgba(192,57,43,.05),rgba(192,57,43,.02));border:1px solid rgba(192,57,43,.1);border-radius:8px}
.lg-avg-strip-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);width:100%;margin-bottom:2px}
.lg-avg-item{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--t2)}
.lg-avg-item b{color:var(--brand);font-family:var(--mono)}
.lg-avg-sep{color:var(--t4)}


/* REFEREE v2 — Premium redesign */

/* Card wrapper */
.ref2-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--rxl);
  overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-sm);
  animation:ref2In .4s ease both
}
@keyframes ref2In{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Hero header with gradient */
.ref2-hero{
  position:relative;display:flex;align-items:center;gap:14px;padding:20px 18px;
  background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff;overflow:hidden
}
.ref2-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 90% 20%,rgba(192,57,43,.25),transparent 50%),
             radial-gradient(circle at 10% 80%,rgba(37,99,235,.15),transparent 50%);
  pointer-events:none
}
.ref2-hero>*{position:relative;z-index:1}
.ref2-avatar{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 12px rgba(0,0,0,.2)
}
.ref2-info{flex:1;min-width:0}
.ref2-name{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.ref2-role{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.ref2-role-badge{
  display:inline-block;padding:3px 10px;border-radius:var(--rfl);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(4px);color:rgba(255,255,255,.9)
}
.ref2-country{font-size:11px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:4px}
.ref2-flag{width:18px;height:13px;object-fit:cover;border-radius:2px;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* Stat rings grid */
.ref2-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:none;border-bottom:1px solid var(--border)
}
.ref2-stat{
  display:flex;flex-direction:column;align-items:center;padding:16px 8px 12px;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  transition:background .15s
}
.ref2-stat:nth-child(3n){border-right:none}
.ref2-stat:nth-last-child(-n+3){border-bottom:none}
.ref2-stat:hover{background:var(--hover)}
.ref2-stat-ring{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.ref-ring-svg{position:absolute;inset:0}
.ref2-stat-val{
  position:relative;z-index:1;font-family:var(--mono);font-size:15px;font-weight:800;line-height:1
}
.ref2-stat-lbl{font-size:9px;color:var(--t3);font-weight:600;margin-top:6px;text-transform:uppercase;letter-spacing:.3px}

/* Insight banner */
.ref2-insight{
  display:flex;align-items:center;gap:12px;margin:0 14px;padding:12px 14px;
  border-radius:var(--rl);margin-top:14px;
  animation:ref2Pulse .6s ease both .3s
}
@keyframes ref2Pulse{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.ref2-insight.hot{background:linear-gradient(135deg,rgba(220,38,38,.06),rgba(220,38,38,.02));border:1px solid rgba(220,38,38,.12)}
.ref2-insight.warm{background:linear-gradient(135deg,rgba(217,119,6,.06),rgba(217,119,6,.02));border:1px solid rgba(217,119,6,.12)}
.ref2-insight.cold{background:linear-gradient(135deg,rgba(5,150,105,.06),rgba(5,150,105,.02));border:1px solid rgba(5,150,105,.12)}
.ref2-insight-badge{font-size:24px;flex-shrink:0}
.ref2-insight-body{flex:1;min-width:0}
.ref2-insight-title{font-size:13px;font-weight:700;color:var(--t1)}
.ref2-insight-sub{font-size:11px;color:var(--t3);margin-top:2px}

/* Section header inside card */
.ref2-section-h{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);padding:12px 16px 8px;display:flex;align-items:center;gap:6px
}

/* Rate bars */
.ref2-rates{padding-bottom:14px}
.ref2-rate-row{
  display:flex;align-items:center;gap:8px;padding:6px 16px;
  transition:background .12s
}
.ref2-rate-row:hover{background:var(--hover)}
.ref2-rate-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center}
.ref2-rate-lbl{font-size:12px;font-weight:500;color:var(--t2);width:100px;flex-shrink:0}
.ref2-rate-track{
  flex:1;height:6px;background:var(--elevated);border-radius:3px;overflow:hidden;min-width:60px
}
.ref2-rate-fill{
  height:100%;border-radius:3px;transition:width .8s ease;min-width:2px
}
.ref2-rate-pct{
  font-family:var(--mono);font-size:12px;font-weight:700;min-width:36px;text-align:right
}
.ref2-rate-pct.hot{color:var(--red)}
.ref2-rate-pct.warm{color:var(--amber)}
.ref2-rate-pct.cold{color:var(--green)}

/* Others card */
.ref2-others{
  background:var(--white);border:1px solid var(--border);border-radius:var(--rxl);
  overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs);
  animation:ref2In .4s ease both .15s
}
.ref2-other-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);transition:background .12s
}
.ref2-other-row:last-child{border-bottom:none}
.ref2-other-row:hover{background:var(--hover)}
.ref2-other-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--elevated);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0
}
.ref2-other-info{flex:1;min-width:0}
.ref2-other-name{font-size:13px;font-weight:600;color:var(--t1)}
.ref2-other-country{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:4px;margin-top:2px}
.ref2-other-role{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
  color:var(--t3);background:var(--elevated);padding:4px 10px;border-radius:var(--rfl);flex-shrink:0
}


/*  PLAYER PROFILE v2  */

/*  Hero card  */
.pp-hero2{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rxl);padding:20px 16px;
  margin-bottom:14px;box-shadow:var(--sh-sm);overflow:hidden
}
.pp-hero2-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pp-hero2>*{position:relative;z-index:1}

.pp-avatar2{width:72px;height:72px;flex-shrink:0}
.pp-avatar2 img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:0 2px 10px rgba(0,0,0,.15)}
.pp-avatar2-fb{width:72px;height:72px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:30px}

.pp-hero2-info{flex:1;min-width:0}
.pp-name2{font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.pp-pos-badge{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:var(--rfl);font-size:10px;font-weight:700;letter-spacing:.3px}
.pp-meta2{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);margin-top:6px;flex-wrap:wrap}
.pp-meta2-dot{color:var(--border)}
.pp-flag2{width:16px;height:12px;object-fit:cover;border-radius:2px;vertical-align:middle;margin-right:2px}
.pp-team2{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 12px;border-radius:var(--rfl);background:var(--brand-sub);font-size:11px;font-weight:600;color:var(--brand);cursor:pointer;transition:all .15s}
.pp-team2:hover{opacity:.75;transform:translateY(-1px)}
.pp-team2-logo{width:16px;height:16px;object-fit:contain}
.pp-jersey2{font-family:var(--mono);font-weight:800;opacity:.7;margin-left:2px}

/*  Key stats  */
.pp-key-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:14px}
.pp-key-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:12px 6px;text-align:center;transition:transform .12s}
.pp-key-stat:hover{transform:translateY(-2px)}
.pp-key-ic{font-size:15px;margin-bottom:3px}
.pp-key-val{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--t1);line-height:1.2}
.pp-key-lbl{font-size:8px;color:var(--t3);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.2px}

/*  Rating card  */
.pp-rating-card{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.pp-rating-ring{position:relative;width:64px;height:64px;flex-shrink:0}
.pp-rating-ring svg{position:absolute;inset:0}
.pp-rating-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;font-weight:800;color:var(--t1)}
.pp-rating-info{flex:1;min-width:0}
.pp-rating-title{font-size:13px;font-weight:700;color:var(--t1)}
.pp-rating-sub{font-size:10px;color:var(--t3);margin-top:2px}
.pp-rating-bar-wrap{height:4px;background:var(--elevated);border-radius:2px;margin-top:8px;overflow:hidden}
.pp-rating-bar{height:100%;border-radius:2px;transition:width .8s}

/*  Trophy badge  */
.pp-trophy{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.03));border:1px solid rgba(245,158,11,.15);border-radius:var(--rl);padding:12px 16px;margin-bottom:14px}
.pp-trophy-medal{font-size:28px;flex-shrink:0}
.pp-trophy-info{flex:1;min-width:0}
.pp-trophy-title{font-size:13px;font-weight:700;color:var(--amber)}
.pp-trophy-sub{font-size:10px;color:var(--t3);margin-top:2px}

/*  Section title  */
.pp-section-title{font-size:13px;font-weight:700;color:var(--t1);padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}

/*  Bio card  */
.pp-bio-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs)}
.pp-bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pp-bio-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px}
.pp-bio-item:nth-last-child(-n+2){border-bottom:none}
.pp-bio-ic{font-size:14px;flex-shrink:0}
.pp-bio-lbl{color:var(--t3);font-weight:500;white-space:nowrap}
.pp-bio-val{font-weight:700;color:var(--t1);margin-left:auto;text-align:right}

/*  Season stats card  */
.pp-season-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs)}
.pp-stat-cat{border-bottom:1px solid var(--border)}
.pp-stat-cat:last-child{border-bottom:none}
.pp-stat-cat-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t3);padding:8px 14px;background:var(--elevated)}
.pp-stat-row{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-bottom:1px solid var(--border);font-size:12px}
.pp-stat-row:last-child{border-bottom:none}
.pp-stat-row-lbl{color:var(--t2);font-weight:500}
.pp-stat-row-val{font-family:var(--mono);font-weight:700;color:var(--t1)}

/*  Appearances card  */
.pp-apps-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs)}
.pp-apps-count{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--t3);background:var(--elevated);padding:1px 6px;border-radius:var(--rfl);margin-left:4px}

.pp-app2{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .12s;animation:ppAppIn .3s ease both}
.pp-app2:last-child{border-bottom:none}
.pp-app2:hover{background:var(--hover);transform:translateX(2px)}
@keyframes ppAppIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.pp-app2-date{font-family:var(--mono);font-size:10px;color:var(--t3);min-width:34px;flex-shrink:0;text-align:center}
.pp-app2-body{flex:1;min-width:0}
.pp-app2-match{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;overflow:hidden}
.pp-app2-team{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-app2-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.pp-app2-score{font-family:var(--mono);font-weight:800;padding:0 4px;flex-shrink:0;color:var(--t1)}
.pp-app2-league{font-size:9px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-app2-arrow{font-size:16px;color:var(--t3);flex-shrink:0;opacity:.5}

@media(max-width:400px){
  .pp-bio-grid{grid-template-columns:1fr}
  .pp-bio-item:nth-last-child(2){border-bottom:1px solid var(--border)}
}

/* ====== INFO TAB — Facelifted styles ====== */

/* Hero — kickoff time */
.info-hero{text-align:center;padding:20px 16px 16px;margin-bottom:12px}
.info-hero-time{font-size:36px;font-weight:800;color:var(--t1);letter-spacing:-1px;line-height:1}
.info-hero-date{font-size:13px;color:var(--t3);margin-top:6px;text-transform:capitalize}

/* Info card — arena, liga */
.info-card{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh-xs)}
.info-card-icon{width:40px;height:40px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.info-card-img{width:28px;height:28px;object-fit:contain}
.info-card-body{flex:1;min-width:0}
.info-card-title{font-size:14px;font-weight:700;color:var(--t1)}
.info-card-sub{font-size:12px;color:var(--t3);margin-top:2px;display:flex;align-items:center;gap:4px}
.info-flag{width:16px;height:12px;object-fit:cover;border-radius:2px}

/* Formations — side by side */
.info-formations{display:flex;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-xs)}
.info-fm-side{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 12px;gap:4px}
.info-fm-logo{width:24px;height:24px;object-fit:contain}
.info-fm-name{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:0.5px}
.info-fm-val{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:1px;font-family:var(--mono)}
.info-fm-vs{font-size:11px;color:var(--t4);font-weight:600;padding:0 4px}

/* Section headers */
.info-section{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-xs)}
.info-section-h{padding:12px 16px;font-size:13px;font-weight:700;color:var(--t1);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}

/* Coaches — card grid */
.info-coaches{display:flex}
.info-coach{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 12px;gap:6px;border-right:1px solid var(--border)}
.info-coach:last-child{border-right:none}
.info-coach-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.info-coach-avatar img{width:100%;height:100%;object-fit:cover}
.info-coach-name{font-size:13px;font-weight:700;color:var(--t1);text-align:center}
.info-coach-team{font-size:11px;color:var(--t3)}

/* Referee rows */
.info-ref-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border)}
.info-ref-row:last-child{border-bottom:none}
.info-ref-name{font-size:13px;font-weight:600;color:var(--t1)}
.info-ref-role{font-size:11px;color:var(--t3);text-transform:capitalize;background:var(--bg2);padding:2px 8px;border-radius:4px}

/* Weather — compact hero */
.info-weather{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#e8f4f8,#f0f7ff);border:1px solid #d4e8f0;border-radius:var(--rl);padding:16px;margin-bottom:10px}
.info-weather-main{display:flex;align-items:center;gap:12px}
.info-weather-temp{font-size:32px;font-weight:800;color:#2563eb}
.info-weather-desc{font-size:13px;color:#4b7a96;max-width:120px;text-transform:capitalize}
.info-weather-details{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#5a8ea8}


/* ====== FAVORITES & WATCHED — styles ====== */

/* Star button on league header */
.fav-star{background:none;border:none;font-size:18px;color:var(--t4);cursor:pointer;padding:2px 6px;line-height:1;transition:all .15s;flex-shrink:0}
.fav-star:hover{transform:scale(1.2)}
.fav-star.fav-on{color:#f59e0b;text-shadow:0 0 6px rgba(245,158,11,.3)}

//* Subtle warm background on the entire league group */
.cal-league.fav .cal-league-hdr{
  background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.02));
  border-color:rgba(245,158,11,.15);
}

/* Remove the old border-left line */
.cal-league.fav{border-left:none}

/* Favorite section header in time-sort mode */
.cal-section-hdr.fav{
  color:var(--amber);
  font-weight:700;
}
/* Separator between favorites and rest */
.cal-fav-sep{display:flex;align-items:center;gap:12px;padding:12px 16px 4px;font-size:11px;color:var(--t4);text-transform:uppercase;letter-spacing:0.5px}
.cal-fav-sep span{white-space:nowrap}
.cal-fav-sep::before,.cal-fav-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* Watch button on match row */
.watch-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 8px;opacity:.3;transition:all .15s;flex-shrink:0;filter:grayscale(1)}
.watch-btn:hover{opacity:.7;transform:scale(1.15)}
.watch-btn.watched-on{opacity:1;filter:none}

/* Watched match highlight */
.cal-match.watched{background:rgba(37,99,235,.03);border-left:3px solid var(--blue)}

/* Watched section header */
.cal-section-hdr.watched{background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(37,99,235,.02));color:var(--blue);border-left:3px solid var(--blue)}

/* Pill badge for watched count */
.pill-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;margin-left:4px;padding:0 4px}





/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MARKET FINDER v2 â€” Visual Upgrade
   Replace existing mf-* rules in styles.css
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Controls Container â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-controls{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:14px;margin-bottom:12px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.mf-controls::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#2563EB,#7C3AED,#059669,#D97706,#DC2626);opacity:.6}

/* â”€â”€ Category Tabs â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-cat-tabs{display:flex;gap:3px;margin-bottom:12px;background:var(--inset);border-radius:10px;padding:3px}
.mf-cat-tab{flex:1;padding:8px 6px;border:none;background:none;font-size:11px;font-weight:600;border-radius:8px;cursor:pointer;color:var(--t3);transition:all .2s cubic-bezier(.4,0,.2,1);text-align:center;white-space:nowrap;position:relative}
.mf-cat-tab:hover{color:var(--t2);background:rgba(255,255,255,.5)}
.mf-cat-tab.on{background:var(--white);color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06),0 0 0 1px rgba(192,57,43,.08)}
.mf-cat-cnt{font-size:8px;font-weight:700;font-family:var(--mono);background:var(--inset);color:var(--t3);padding:1px 5px;border-radius:var(--rfl);margin-left:2px;vertical-align:1px}
.mf-cat-tab.on .mf-cat-cnt{background:var(--brand-sub);color:var(--brand)}

/* â”€â”€ Market Buttons â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
@media(min-width:480px){.mf-market-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.mf-market-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:360px){.mf-market-grid{grid-template-columns:repeat(2,1fr)}}

.mf-market-btn{padding:9px 6px;border:1px solid var(--border);background:var(--white);border-radius:10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:center;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--font);color:var(--t2)}
.mf-market-btn:hover{border-color:var(--border-s);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.mf-market-btn.on{color:#fff;border-color:transparent;box-shadow:0 3px 12px rgba(0,0,0,.15);transform:translateY(-1px)}
.mf-market-btn.on.goals{background:linear-gradient(135deg,#2563EB,#1D4ED8)}
.mf-market-btn.on.btts{background:linear-gradient(135deg,#7C3AED,#6D28D9)}
.mf-market-btn.on.corners{background:linear-gradient(135deg,#059669,#047857)}
.mf-market-btn.on.cards{background:linear-gradient(135deg,#D97706,#B45309)}
.mf-market-btn.on.result{background:linear-gradient(135deg,#0891B2,#0E7490)}
.mf-market-btn.on.dc{background:linear-gradient(135deg,#6366F1,#4F46E5)}
.mf-market-btn.on.hot{background:linear-gradient(135deg,#DC2626,#B91C1C)}
.mf-market-btn.on.value{background:linear-gradient(135deg,#059669,#047857)}
.mf-market-btn.on.xg{background:linear-gradient(135deg,#8B5CF6,#7C3AED)}

.mf-btn-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;font-size:9px;font-weight:700;padding:0 4px;font-family:var(--mono)}
.mf-market-btn:not(.on) .mf-btn-cnt{background:var(--inset);color:var(--t3)}
.mf-market-btn.on .mf-btn-cnt{background:rgba(255,255,255,.25);color:#fff}

/* â”€â”€ Filter Row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-filter-row{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}
.mf-action-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.mf-slider-row{display:flex;align-items:center;gap:10px}
.mf-slider-label{font-size:11px;color:var(--t3);white-space:nowrap;min-width:90px}
.mf-slider{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--inset);outline:none}
.mf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:0 2px 6px rgba(192,57,43,.25)}
.mf-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand);cursor:pointer;border:none}
.mf-slider-val{font-size:12px;font-weight:700;color:var(--brand);min-width:36px;text-align:right;font-family:var(--mono)}

.mf-sort-row{display:flex;align-items:center;gap:6px}
.mf-sort-label{font-size:11px;color:var(--t3);margin-right:4px}
.mf-sort-btn{padding:4px 10px;border:1px solid var(--border);background:none;border-radius:6px;font-size:11px;cursor:pointer;transition:all .15s;font-family:var(--font);color:var(--t2)}
.mf-sort-btn:hover{border-color:var(--border-s)}
.mf-sort-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* â”€â”€ Toggle â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-odds-toggle{display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--border);background:var(--white);border-radius:var(--rfl);font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .2s;font-family:var(--font);white-space:nowrap}
.mf-odds-toggle:hover{border-color:var(--border-s)}
.mf-odds-toggle.on{background:var(--green-sub);border-color:rgba(5,150,105,.25);color:var(--green)}
.mf-toggle-track{width:28px;height:16px;border-radius:8px;background:var(--inset);border:1px solid var(--border);position:relative;transition:all .2s;flex-shrink:0}
.mf-odds-toggle.on .mf-toggle-track{background:var(--green);border-color:var(--green)}
.mf-toggle-dot{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--t4);transition:all .2s}
.mf-odds-toggle.on .mf-toggle-dot{left:14px;background:#fff}

/* â”€â”€ Result Count â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-result-count{padding:10px 0 4px;font-size:13px;color:var(--t2)}
.mf-odds-note{color:var(--t4);font-style:italic;font-size:12px}

/* â•â•â• MATCH CARD â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.mf-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:var(--sh-xs);animation:fadeUp .3s ease both}
.mf-card:hover{box-shadow:0 4px 16px rgba(15,23,41,.08);transform:translateY(-2px)}
.mf-card.strong{border-left:3px solid #DC2626;background:linear-gradient(135deg,var(--white),rgba(220,38,38,.01))}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Card Header */
.mf-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(250,251,253,.5),transparent)}
.mf-teams{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.mf-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.mf-tn{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-vs{font-size:10px;color:var(--t4);margin:0 3px;font-weight:500}
.mf-time{font-size:11px;color:var(--t3);font-family:var(--mono);flex-shrink:0;background:var(--elevated);padding:3px 8px;border-radius:var(--rfl);font-weight:600}

/* â”€â”€ Confidence Ring â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-signal-row{display:flex;align-items:center;gap:14px;padding:14px}
.mf-conf-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:transform .2s}
.mf-card:hover .mf-conf-ring{transform:scale(1.05)}
.mf-conf-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--white);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.mf-conf-ring span{position:relative;z-index:1;font-size:12px;font-weight:800;font-family:var(--mono);letter-spacing:-.5px}

/* Signal Info */
.mf-signal-info{flex:1;min-width:0}
.mf-signal-label{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3}
.mf-signal-desc{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mf-strength{font-size:18px;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}

/* â”€â”€ Metrics Bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-metrics{display:flex;align-items:center;gap:6px;padding:0 14px 12px;flex-wrap:wrap}
.mf-metric{display:flex;flex-direction:column;align-items:center;padding:6px 12px;background:var(--elevated);border-radius:8px;border:1px solid transparent;transition:border-color .15s}
.mf-metric:hover{border-color:var(--border-s)}
.mf-metric.ev-pos{background:rgba(5,150,105,.06);border:1px solid rgba(5,150,105,.1)}
.mf-metric.ev-neg{background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.08)}
.mf-m-l{font-size:8px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.mf-m-v{font-size:13px;font-weight:700;color:var(--t1);font-family:var(--mono);letter-spacing:-.3px}
.mf-metric.ev-pos .mf-m-v{color:#059669}
.mf-metric.ev-neg .mf-m-v{color:#DC2626}
.mf-league{font-size:10px;color:var(--t4);margin-left:auto;font-weight:500}

/* â”€â”€ Recommendation Banner â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-rec{padding:8px 14px;font-size:11px;font-weight:700;text-align:center;border-top:1px solid var(--border);letter-spacing:.3px}
.mf-rec.sy{background:linear-gradient(135deg,rgba(5,150,105,.06),rgba(5,150,105,.02));color:#059669}
.mf-rec.ly{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.02));color:#B45309}

/* â”€â”€ Factors â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-factors{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 12px}
.mf-factor{font-size:10px;padding:4px 10px;border-radius:var(--rfl);font-weight:500;line-height:1.2}
.mf-factor.sup{background:var(--green-sub);color:var(--green);border:1px solid rgba(5,150,105,.08)}
.mf-factor.opp{background:var(--red-sub);color:var(--red);border:1px solid rgba(220,38,38,.08)}

/* == Extra Signals == */
.mf-extra{padding:6px 14px 10px;font-size:11px;color:var(--info);font-weight:500;display:flex;align-items:center;gap:4px}
.mf-extra::before{content:'âž•';font-size:9px}

/* ====== STREAKS & BETTING DNA — styles ====== */

/* Streak chips */
.tp-streaks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tp-streak-chip{font-size:12px;font-weight:600;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.tp-streak-chip.hot{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.15)}
.tp-streak-chip.good{background:rgba(5,150,105,.08);color:#059669;border:1px solid rgba(5,150,105,.15)}
.tp-streak-chip.bad{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.15)}
.tp-streak-chip.warn{background:rgba(245,158,11,.08);color:#d97706;border:1px solid rgba(245,158,11,.15)}
.tp-streak-chip.cold{background:rgba(100,116,139,.08);color:#64748b;border:1px solid rgba(100,116,139,.15)}

/* Betting DNA card */
.tp-dna{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh-xs)}
.tp-dna-hdr{padding:12px 16px;font-size:14px;font-weight:700;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.tp-dna-sub{font-size:11px;font-weight:400;color:var(--t3)}

/* Ring grid */
.tp-dna-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:16px 12px}
@media(max-width:420px){.tp-dna-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
.tp-dna-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tp-dna-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.tp-dna-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--white)}
.tp-dna-val{position:relative;z-index:1;font-size:12px;font-weight:700;color:var(--t1);font-family:var(--mono)}
.tp-dna-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}

/* Scoring averages */
.tp-dna-avg{display:flex;justify-content:center;gap:20px;padding:8px 16px 12px;font-size:12px;color:var(--t2)}
.tp-dna-avg span{display:flex;align-items:center;gap:4px}

/* Trend arrows */
.tp-dna-trends{display:flex;justify-content:center;gap:12px;padding:0 16px 12px;font-size:11px;font-weight:600}
.tp-trend{padding:3px 8px;border-radius:4px}
.tp-trend.up{background:rgba(5,150,105,.08);color:#059669}
.tp-trend.down{background:rgba(239,68,68,.08);color:#dc2626}

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   SPLIT VIEW Ã¢â‚¬â€ Desktop: kalender venstre, detaljer hÃƒÂ¸yre
   Krav: #detO mÃƒÂ¥ ligge INNE i .content (ikke som sÃƒÂ¸sken)
   Append til slutten av styles.css
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */

@media(min-width:1024px){

  /* When split: content becomes horizontal flex */
  .shell.split .content{
    display:flex;
    flex-direction:row;
    overflow:hidden;
  }

  /* Active page becomes sidebar */
  .shell.split .page.on{
    width:400px;
    min-width:400px;
    max-width:400px;
    flex-shrink:0;
    overflow-y:auto;
    border-right:1px solid var(--border);
  }

  .shell.split .page.on .pad{
    max-width:100%;
    padding:0 10px 100px;
  }

  /* Compact sidebar elements */
  .shell.split .sh-t{font-size:15px}
  .shell.split .sh{padding:10px 4px 6px}
  .shell.split .dates{padding:2px 4px 8px;flex-wrap:nowrap}
  .shell.split .dbtn{padding:4px 8px;font-size:11px}
  .shell.split .pills{padding:2px 4px 8px}
  .shell.split .pill{padding:4px 10px;font-size:11px}
  .shell.split .cal-sort-btn{font-size:10px;padding:3px 8px}
  .shell.split .cal-match{padding:6px 8px}
  .shell.split .cal-tn{font-size:12px}
  .shell.split .cal-sc{font-size:13px}
  .shell.split .cal-time{min-width:36px}
  .shell.split .cal-clock{font-size:10px}
  .shell.split .cal-league-hdr{padding:8px 10px}
  .shell.split .cal-lg-name{font-size:12px}
  .shell.split .cal-lg-logo{width:18px;height:18px}
  .shell.split .cal-chips{display:none}
  .shell.split .cal-arr{display:none}

  /* Detail becomes inline flex child */
  .shell.split .det{
    position:relative;
    inset:auto;
    transform:none !important;
    flex:1;
    z-index:1;
    overflow-y:auto;
    display:none;
  }
  .shell.split .det.vis{
    display:flex;
    flex-direction:column;
  }

  /* Detail header sticky in split mode */
  .shell.split .det-h{
    position:sticky;
    top:0;
    z-index:10;
  }

  .shell.split .det-inner{
    max-width:900px;
    padding:16px 20px 24px;
  }

  /* Active match highlight in sidebar */
  .cal-match.active{
    background:var(--brand-sub) !important;
    border-left:3px solid var(--brand);
  }

  /* Tabs width matches sidebar on desktop */
  .shell.split .tabs{
    max-width:400px;
    margin:0;
  }
}

/* Extra wide screens */
@media(min-width:1440px){
  .shell.split .page.on{
    width:440px;
    min-width:440px;
    max-width:440px;
  }
  
  .shell.split .tabs{
    max-width:440px;
  }
}

/* Add this to styles.css */
.sig-friendly-toggle{margin-left:auto;font-size:11px!important;padding:5px 10px!important;opacity:.8}
.sig-friendly-toggle:hover{opacity:1}
.sig-friendly-toggle.on{background:var(--green);border-color:var(--green)}

/* 
   LINEUPS v3  Full-pitch unified view
    */

/*  Full pitch container  */
.fp-container{
  border-radius:var(--rl);overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--sh-sm);
  margin-bottom:12px
}

/*  Header with both teams  */
.fp-header{
  display:flex;align-items:center;
  padding:10px 14px;gap:8px;
  background:var(--white);border-bottom:1px solid var(--border)
}
.fp-team-badge{
  flex:1;display:flex;align-items:center;gap:6px;
  min-width:0
}
.fp-team-badge.away{justify-content:flex-start}
.fp-team-badge.home{justify-content:flex-end}
.fp-team-icon{font-size:14px;flex-shrink:0}
.fp-team-name{
  font-size:12px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.fp-fm{
  font-family:var(--mono);font-size:11px;font-weight:800;
  color:var(--brand);background:var(--brand-sub);
  padding:2px 8px;border-radius:var(--rfl);letter-spacing:.5px;
  flex-shrink:0
}
.fp-vs{
  font-size:10px;font-weight:800;color:var(--t3);
  letter-spacing:1px;flex-shrink:0
}

/*  The pitch field  */
.fp-field{
  background:
    repeating-linear-gradient(
      180deg,
      #1a6b30 0px, #1a6b30 22px,
      #1d7a36 22px, #1d7a36 44px
    );
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column
}

/*  SVG pitch markings overlay  */
.fp-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0
}

/*  Each half  */
.fp-half{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  gap:6px;padding:14px 8px
}
.fp-half.away{padding-top:18px;padding-bottom:10px}
.fp-half.home{padding-top:10px;padding-bottom:18px}

/*  Centre line mark  */
.fp-centre-mark{
  height:0;border-top:1px dashed rgba(255,255,255,.15);
  position:relative;z-index:1;margin:0 8px
}

/*  Formation lines  */
.fp-line{
  display:flex;justify-content:space-evenly;align-items:center;gap:2px;
  position:relative;z-index:1;
  animation:fpLineIn .4s ease both
}

@keyframes fpLineIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/*  Player node  */
.fp-player{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:0;flex:0 0 auto;
  cursor:pointer;transition:transform .12s
}
.fp-player:hover{transform:scale(1.1)}
.fp-player:active{transform:scale(.95)}

/*  Jersey wrap  */
.fp-jersey-wrap{position:relative;display:inline-flex}

.fp-jersey{
  width:30px;height:30px;border-radius:50%;
  font-family:var(--mono);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:box-shadow .12s
}
.fp-player:hover .fp-jersey{box-shadow:0 2px 14px rgba(0,0,0,.5)}

/* Home jersey: white */
.fp-jersey.home{background:rgba(255,255,255,.95);color:#1a1a2e}
.fp-jersey.gk.home{background:#ffd700;color:#1a1a2e}

/* Away jersey: light blue tint */
.fp-jersey.away{background:rgba(180,200,230,.92);color:#14375e}
.fp-jersey.gk.away{background:#ff8c00;color:#fff}

/*  Player name  */
.fp-pname{
  font-size:8px;font-weight:600;
  color:rgba(255,255,255,.9);
  text-align:center;max-width:56px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  line-height:1.2
}

/*  Rating badge  */
.fp-rating{
  position:absolute;top:-6px;right:-8px;
  font-family:var(--mono);font-size:7px;font-weight:800;
  background:var(--brand);color:#fff;
  padding:1px 4px;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);line-height:1.3
}

/*  Event badges (goals, cards, subs)  */
.pj-badges{
  position:absolute;bottom:-4px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:1px;pointer-events:none
}
.pj-badge{
  font-size:7px;line-height:1;
  background:rgba(0,0,0,.55);
  color:#fff;padding:1px 3px;
  border-radius:3px;white-space:nowrap
}
.pj-badge.goal{background:rgba(192,57,43,.85)}
.pj-badge.yc{background:rgba(217,119,6,.85)}
.pj-badge.rc{background:rgba(220,38,38,.85)}
.pj-badge.sub{background:rgba(100,100,120,.7);font-size:6px}

/*  Fallback list (no formation)  */
.lineup-row{cursor:pointer;transition:background .12s}
.lineup-row:hover{background:var(--hover)}
.lineup-jersey{font-family:var(--mono);font-size:11px;color:var(--brand);font-weight:700}
.lineup-pos{color:var(--t3);font-size:11px}
.captain-badge{color:var(--amber);font-weight:700}

/*  Bench grid (side by side)  */
.bench-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:8px
}
@media(max-width:480px){.bench-grid{grid-template-columns:1fr}}

/*  Bench card  */
.bench-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--rl);
  overflow:hidden;
  box-shadow:var(--sh-xs)
}
.bench-hdr{
  padding:8px 12px;font-size:11px;font-weight:700;
  color:var(--t2);background:var(--elevated);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px
}
.bench-count{
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--t3);background:var(--white);
  padding:1px 6px;border-radius:var(--rfl)
}
.bench-row{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s;
  font-size:11px
}
.bench-row:last-child{border-bottom:none}
.bench-row:hover{background:var(--hover)}
.bench-jersey{
  font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--t3);min-width:20px;text-align:center
}
.bench-name{flex:1;font-weight:600;color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bench-sub-in{
  font-size:9px;font-weight:700;color:var(--green);
  display:inline-flex;align-items:center;gap:2px
}
.bench-pos{font-size:9px;color:var(--t3);flex-shrink:0}



/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   LIVE CENTER v3.1 â€” Append to styles.css
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Controls â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-ctrl{margin-bottom:4px}
.live-sort-row{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;gap:8px}
.live-sort-grp{display:flex;align-items:center;gap:4px}
.live-sort-label{font-size:11px;color:var(--t3);font-weight:500;margin-right:2px}
.live-view-grp{display:flex;gap:2px}
.live-view-btn{width:30px;height:28px;border:1px solid var(--border);border-radius:var(--r);background:var(--white);color:var(--t3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--font)}
.live-view-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.live-friendly-toggle{opacity:.7;font-size:11px !important;padding:5px 10px !important}

/* â”€â”€ Summary Bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-summary{display:flex;gap:2px;padding:0 0 10px;overflow-x:auto;scrollbar-width:none}
.live-summary::-webkit-scrollbar{display:none}
.live-sum-item{flex:1;min-width:64px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:10px 6px;text-align:center}
.live-sum-val{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--t1);letter-spacing:-0.5px}
.live-sum-lbl{font-size:9px;color:var(--t3);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}

/* â”€â”€ Time Distribution â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-time-dist{padding:0 0 12px}
.live-time-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--inset)}
.live-time-seg{display:flex;align-items:center;justify-content:center;transition:width .3s}
.live-time-seg span{font-size:8px;font-weight:700;color:#fff;letter-spacing:.3px}
.seg-1st{background:var(--brand)}.seg-ht{background:var(--amber)}.seg-2nd{background:var(--green)}
.live-time-labels{display:flex;justify-content:space-between;margin-top:4px}
.live-time-labels span{font-size:9px;color:var(--t3);font-weight:500}

/* â”€â”€ Goal Alerts â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-alerts{background:linear-gradient(135deg,rgba(5,150,105,.04),rgba(5,150,105,.08));border:1px solid rgba(5,150,105,.15);border-radius:var(--rl);padding:10px;margin-bottom:10px}
.live-alerts-hdr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);margin-bottom:8px}
.live-alerts-pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse-green 1.5s ease infinite}
@keyframes pulse-green{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(5,150,105,.3)}50%{opacity:.6;box-shadow:0 0 0 5px transparent}}
.live-alerts-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.live-alerts-scroll::-webkit-scrollbar{display:none}
.live-alert-card{flex-shrink:0;background:var(--white);border:1px solid rgba(5,150,105,.12);border-radius:var(--r);padding:8px 10px;cursor:pointer;display:flex;gap:8px;align-items:center;min-width:180px;transition:all .12s}
.live-alert-card:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.live-alert-time{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--green);white-space:nowrap}
.live-alert-info{min-width:0}
.live-alert-scorer{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-alert-match{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* â”€â”€ Expanded Card (extends existing .live-card) â”€â”€ */
.live-card.highgoal{border-left-color:var(--green);background:linear-gradient(135deg,var(--white),rgba(5,150,105,.02))}
.live-card.watched{border-left-color:var(--brand)}
.live-dot-sm{width:5px;height:5px;border-radius:50%;background:var(--red-l);animation:pulse 1.5s infinite;display:inline-block}
.live-min{font-family:var(--mono);font-weight:700}
.live-ht-badge{font-size:10px;font-weight:800;color:var(--amber);background:var(--amber-sub);padding:2px 8px;border-radius:var(--rfl);letter-spacing:.5px}
.live-league span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-lg-logo{width:13px;height:13px;object-fit:contain;flex-shrink:0}
.live-country{color:var(--t4)}

/* Progress bar */
.live-progress{height:2px;background:var(--inset);border-radius:1px;margin-bottom:8px;overflow:hidden}
.live-progress-fill{height:100%;background:linear-gradient(90deg,var(--red-l),var(--brand));border-radius:1px;transition:width .5s}
.live-progress-fill.ht{background:var(--amber)}

/* â”€â”€ Inline Stats Row (the 5 mini-stat boxes) â”€â”€â”€â”€ */
.live-stats-row{display:flex;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.live-stats-row::-webkit-scrollbar{display:none}
.live-ministat{flex:1;min-width:50px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;background:var(--elevated);border-radius:var(--r)}
.ms-val{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--t1)}
.ms-lbl{font-size:10px;color:var(--t3);line-height:1}

/* â”€â”€ Events Row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-events-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.live-evt{display:flex;align-items:center;gap:2px;font-size:9px;padding:2px 5px;border-radius:4px;background:var(--elevated)}
.live-evt.home{border-left:2px solid var(--brand)}
.live-evt.away{border-right:2px solid var(--info)}
.live-evt-ic{font-size:10px}
.live-evt-min{font-family:var(--mono);font-weight:600;color:var(--t2);font-size:9px}

/* â”€â”€ Market Chips (extends .live-chips) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.live-chip.green{background:var(--green-sub);color:var(--green)}
.live-chip.amber{background:var(--amber-sub);color:var(--amber)}
.live-chip.info{background:rgba(8,145,178,.06);color:var(--info)}

/* â•â•â• COMPACT VIEW â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.lc-table{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:8px}
.lc-thead{display:flex;align-items:center;padding:6px 10px;font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;background:var(--elevated);border-bottom:1px solid var(--border)}
.lc-th-t{width:38px;text-align:center;flex-shrink:0}
.lc-th-home{flex:1;text-align:right;padding-right:4px}
.lc-th-sc{width:48px;text-align:center;flex-shrink:0}
.lc-th-away{flex:1;padding-left:4px}
.lc-th-i{width:48px;text-align:center;flex-shrink:0}
.lc-row-item{display:flex;align-items:center;padding:5px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.lc-row-item:last-child{border-bottom:none}
.lc-row-item:hover{background:var(--hover)}
.lc-row-item.hot{background:rgba(5,150,105,.03)}
.lc-row-item.ft{opacity:.7}
.lc-c-time{width:38px;text-align:center;flex-shrink:0}
.lc-min-num{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--red-l);display:flex;align-items:center;gap:3px;justify-content:center}
.lc-ht{font-size:8px;font-weight:800;color:var(--amber);background:var(--amber-sub);padding:1px 5px;border-radius:var(--rfl)}
.lc-ft-b{font-size:9px;font-weight:700;color:var(--t3)}
.lc-c-home{flex:1;text-align:right;padding-right:4px;min-width:0}
.lc-c-score{width:48px;display:flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0}
.lc-c-away{flex:1;padding-left:4px;min-width:0}
.lc-c-tags{width:48px;display:flex;flex-wrap:wrap;gap:2px;justify-content:center;flex-shrink:0}
.lc-n{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.lc-n.w{font-weight:700}
.lc-s{font-family:var(--mono);font-size:14px;font-weight:400}
.lc-s.w{font-weight:800}
.lc-s-dash{font-size:10px;color:var(--t4);margin:0 1px}
.lc-t{font-size:7px;font-weight:700;padding:1px 3px;border-radius:3px;background:var(--elevated);color:var(--t3)}
.lc-t.g{background:var(--green-sub);color:var(--green)}
.lc-t.a{background:var(--amber-sub);color:var(--amber)}
.lc-lg-divider{display:flex;align-items:center;gap:4px;padding:6px 10px;font-size:10px;font-weight:600;color:var(--t3);background:var(--elevated);border-bottom:1px solid var(--border)}
.lc-lg-ic{width:12px;height:12px;object-fit:contain}
.lc-lg-n{font-family:var(--mono);font-size:9px;margin-left:auto}

/* â•â•â• LEAGUE GROUPING â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.live-league-grp{margin-bottom:12px}
.live-league-hdr{display:flex;align-items:center;gap:6px;padding:8px 4px 6px;font-size:12px;font-weight:600;color:var(--t2)}
.live-lg-name{font-weight:700}
.live-lg-country{color:var(--t3);font-weight:400}
.live-lg-cnt{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--t3);background:var(--elevated);padding:2px 6px;border-radius:var(--rfl)}

/* â•â•â• SECTION HEADERS â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.live-section-hdr{display:flex;align-items:center;gap:6px;padding:14px 4px 8px;font-size:13px;font-weight:700;color:var(--t2);letter-spacing:-.2px}
.live-section-ic{font-size:14px}

/* â•â•â• RECENTLY FINISHED â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.live-finished{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;margin-bottom:4px;cursor:pointer;transition:all .12s;opacity:.85}
.live-finished:hover{opacity:1;background:var(--hover)}
.lf-time{width:32px;flex-shrink:0;text-align:center}
.lf-ft{font-size:9px;font-weight:800;color:var(--t3);background:var(--elevated);padding:2px 6px;border-radius:var(--rfl)}
.lf-body{flex:1;min-width:0}
.lf-row{display:flex;align-items:center;gap:4px}
.lf-tn{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2)}
.lf-tn.w{font-weight:700;color:var(--t1)}
.lf-sc{font-family:var(--mono);font-size:13px;font-weight:400;min-width:16px;text-align:center;color:var(--t2)}
.lf-sc.w{font-weight:800;color:var(--t1)}
.lf-chips{display:flex;gap:3px;margin-top:3px}
.lf-chip{font-size:8px;font-weight:600;padding:1px 5px;border-radius:3px;background:var(--elevated);color:var(--t3)}
.lf-league{font-size:9px;color:var(--t4);margin-top:2px}
.lf-logo{width:18px;height:18px;object-fit:contain;flex-shrink:0}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   CALENDAR v4 â€” Additional Styles
   Append to styles.css
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Live mini progress bar in time column â”€â”€â”€â”€â”€â”€ */
.cal-live-prog{width:100%;height:2px;background:var(--inset);border-radius:1px;margin-top:3px;overflow:hidden}
.cal-live-prog-fill{height:100%;background:var(--red-l);border-radius:1px;transition:width .5s}

/* â”€â”€ Countdown for upcoming â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-countdown{font-size:8px;font-weight:600;color:var(--t4);margin-top:1px;white-space:nowrap}

/* â”€â”€ Odds chip â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-chip-odds{color:var(--info) !important;background:rgba(8,145,178,.06) !important;font-family:var(--font) !important}

/* â”€â”€ Amber chip for live 0-0 â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-chip.amber{color:var(--amber);background:var(--amber-sub)}

/* â”€â”€ Date row inner (for swipe) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-dates-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cal-dates-inner::-webkit-scrollbar{display:none}

/* â”€â”€ Favorite separator â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-fav-sep{display:flex;align-items:center;padding:10px 0 4px;color:var(--t4);font-size:10px;font-weight:600;letter-spacing:.3px}
.cal-fav-sep span{background:var(--bg);padding:0 8px;position:relative;z-index:1}
.cal-fav-sep::before{content:'';flex:1;height:1px;background:var(--border)}
.cal-fav-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* â”€â”€ Watched match highlight â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-match.watched{background:rgba(192,57,43,0.02);border-left:2px solid var(--brand)}

/* â”€â”€ Watch button improvements â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.watch-btn{border:none;background:none;cursor:pointer;font-size:14px;padding:4px;opacity:.4;transition:opacity .15s;flex-shrink:0}
.watch-btn:hover{opacity:.7}
.watch-btn.watched-on{opacity:.9}

/* â”€â”€ Favorite star â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.fav-star{border:none;background:none;font-size:14px;cursor:pointer;color:var(--t4);padding:0;transition:color .15s;flex-shrink:0}
.fav-star.fav-on{color:var(--amber)}
.fav-star:hover{color:var(--amber)}

/* â”€â”€ Pill badge (watched count) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.pill-badge{font-family:var(--mono);font-size:9px;font-weight:700;background:var(--brand);color:#fff;padding:0 5px;border-radius:var(--rfl);margin-left:4px;min-width:14px;text-align:center;display:inline-block}

/* â”€â”€ Section headers â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-section-hdr.watched{color:var(--brand)}


/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SIGNALS v3 â€” Missing CSS (append to styles.css)
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Live Score in match header â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-live-score{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;padding:0 8px}
.sig-score{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-0.5px}
.sig-minute{font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--rfl)}
.sig-minute.live{color:var(--red-l);background:var(--red-sub);animation:pulse 1.5s infinite}
.sig-minute.ht{color:var(--amber);background:var(--amber-sub)}

/* â”€â”€ Trigger description â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-card-trigger{font-size:11px;color:var(--info);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:4px}

/* â”€â”€ Signal card medium â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-card.medium{border-left:3px solid var(--amber);background:rgba(217,119,6,.02)}

/* â”€â”€ Count badges â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-count-medium{font-size:10px;font-weight:700;color:var(--amber)}

/* â”€â”€ Trigger in hot banner â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-trigger{font-size:10px;color:var(--info);font-weight:500}

/* â”€â”€ Country text â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-country{color:var(--t4)}

/* â”€â”€ Strength badge watch â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sig-strength-badge.watch{background:rgba(8,145,178,.08);color:var(--info)}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MARKET FINDER â€” Missing CSS
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Category count badge â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.mf-cat-cnt{font-size:8px;font-weight:700;font-family:var(--mono);background:var(--inset);color:var(--t3);padding:1px 5px;border-radius:var(--rfl);margin-left:2px;vertical-align:1px}
.mf-cat-tab.on .mf-cat-cnt{background:var(--brand-sub);color:var(--brand)}



@media(max-width:480px){
  .dna-avg-grid{grid-template-columns:repeat(2,1fr)}
  .dna-league-grid{grid-template-columns:repeat(3,1fr)}
  .dna-rate-lbl{width:65px;font-size:10px}
}


/* calendar v6 new features CSS */

/* search bar */
.cal-search-wrap{display:flex;align-items:center;gap:6px;padding:0 0 8px;position:relative}
.cal-search{flex:1;padding:8px 32px 8px 12px;border:1px solid var(--border);border-radius:var(--rl);background:var(--white);font-size:13px;font-family:var(--font);color:var(--t1);outline:none;transition:border-color .15s,box-shadow .15s}
.cal-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,57,43,.08)}
.cal-search::placeholder{color:var(--t4)}
.cal-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:14px;cursor:pointer;color:var(--t3);padding:4px;line-height:1}
.cal-search-clear:hover{color:var(--t1)}

/* date picker button */
.cal-date-pick{border:none;background:var(--white);border-radius:var(--r);padding:4px 8px;font-size:16px;cursor:pointer;flex-shrink:0;border:1px solid var(--border);transition:background .12s}
.cal-date-pick:hover{background:var(--hover)}
.cal-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.dates{display:flex;align-items:center;gap:4px;padding-bottom:8px;position:relative}

/* goal toast */
.cal-toast{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;padding:10px 16px;border-radius:var(--rl);margin-bottom:10px;align-items:center;gap:10px;cursor:pointer;box-shadow:0 4px 20px rgba(39,174,96,.3);transform:translateY(-20px);opacity:0;transition:all .3s cubic-bezier(.32,.72,0,1)}
.cal-toast.cal-toast-in{transform:translateY(0);opacity:1}
.cal-toast-icon{font-size:20px;animation:bounce .6s ease infinite}
.cal-toast-text{font-size:13px;font-weight:600}
.cal-toast-text strong{font-weight:800;margin-right:4px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* goal flash on match row */
.cal-match.goal-flash{animation:goalFlash 2s ease}
@keyframes goalFlash{
  0%{background:rgba(39,174,96,.25);box-shadow:inset 0 0 0 2px #27ae60}
  30%{background:rgba(39,174,96,.15)}
  100%{background:var(--white);box-shadow:none}
}
.cal-match.live.goal-flash{animation:goalFlashLive 2s ease}
@keyframes goalFlashLive{
  0%{background:rgba(39,174,96,.25);box-shadow:inset 0 0 0 2px #27ae60}
  30%{background:rgba(39,174,96,.15)}
  100%{background:var(--red-sub)}
}

/* skeleton loading */
.cal-skel-league{margin-bottom:8px}
.cal-skel-hdr{display:flex;align-items:center;gap:10px;padding:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r)}
.cal-skel-match{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border-bottom:1px solid var(--border)}
.cal-skel-match:last-child{border-bottom:none;border-radius:0 0 var(--r) var(--r)}
.skel-circle{width:20px;height:20px;border-radius:50%;background:var(--elevated);animation:skelPulse 1.2s ease-in-out infinite}
.skel-bar{height:12px;border-radius:4px;background:var(--elevated);animation:skelPulse 1.2s ease-in-out infinite}
.skel-bar-sm{height:8px;width:36px;border-radius:3px;background:var(--elevated);animation:skelPulse 1.2s ease-in-out infinite}
.skel-body{flex:1;display:flex;flex-direction:column;gap:6px}
.w80{width:80%}.w70{width:70%}.w60{width:60%}.w30{width:30%}
@keyframes skelPulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* position badge */
.cal-pos{font-size:9px;font-weight:700;color:var(--t3);background:var(--elevated);padding:1px 4px;border-radius:3px;margin-left:4px;font-family:var(--mono);vertical-align:middle}

/* inline odds */
.cal-odds-row{display:flex;gap:4px;align-items:center}
.cal-odds-val{font-size:9px;font-weight:700;font-family:var(--mono);color:var(--t2);padding:2px 6px;background:var(--elevated);border-radius:4px;white-space:nowrap}
.cal-odds-fav{color:var(--brand);background:rgba(192,57,43,.06)}

/* form dots */
.cal-form-wrap{display:flex;gap:6px;align-items:center;margin-left:2px}
.cal-form-row{display:flex;gap:2px}
.cal-form-dot{width:14px;height:14px;border-radius:3px;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;line-height:1}
.form-w{background:#27ae60}
.form-d{background:#95a5a6}
.form-l{background:#e74c3c}

/* trend chips */
.cal-chip-trend{color:var(--info)!important;background:rgba(8,145,178,.06)!important}

/* ═══ daily summary v3 — premium design ═══ */
.cal-daily-sum{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:0;margin-bottom:14px;box-shadow:var(--sh-sm);overflow:hidden}
.cal-ds-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--t1);padding:12px 14px 8px;cursor:pointer;user-select:none}
.cal-ds-title-left{display:flex;align-items:center;gap:6px}
.cal-ds-icon{font-size:15px}
.cal-ds-toggle{font-size:14px;color:var(--t4);transition:transform .2s}
.cal-daily-sum.collapsed .cal-ds-toggle{transform:rotate(-90deg)}
.cal-ds-content{padding:0 14px 14px;transition:max-height .25s ease}
.cal-daily-sum.collapsed .cal-ds-content{display:none}

/* hero row */
.cal-ds-hero{display:flex;align-items:center;gap:0;margin-bottom:14px;background:linear-gradient(135deg,var(--brand-sub),rgba(192,57,43,.02));border-radius:var(--r);padding:14px 16px;border:1px solid rgba(192,57,43,.06)}
.cal-ds-hero-main{flex:0 0 auto;text-align:center;padding-right:18px;margin-right:18px;border-right:1px solid var(--border)}
.cal-ds-hero-num{display:block;font-family:var(--mono);font-size:36px;font-weight:800;color:var(--brand);line-height:1;letter-spacing:-2px}
.cal-ds-hero-lbl{display:block;font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.cal-ds-hero-sub{flex:1;text-align:center}
.cal-ds-hero-avg{display:block;font-family:var(--mono);font-size:20px;font-weight:700;color:var(--t1);line-height:1.1}

/* ring charts */
.cal-ds-rings{display:flex;justify-content:center;gap:20px;margin-bottom:14px}
.cal-ds-ring-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.cal-ds-ring-inner{position:absolute;top:0;left:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.cal-ds-ring-val{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--t1)}
.cal-ds-ring-lbl{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.cal-ds-ring{display:block}
.cal-ds-ring-fill{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}

/* outcome bar */
.cal-ds-outcomes{margin-bottom:12px}
.cal-ds-out-bar{display:flex;height:24px;border-radius:var(--rfl);overflow:hidden;gap:2px}
.cal-ds-out-seg{display:flex;align-items:center;justify-content:center;transition:width .5s ease}
.cal-ds-out-seg span{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff}
.cal-ds-out-seg.home{background:linear-gradient(135deg,var(--green),#10b981);border-radius:var(--rfl) 0 0 var(--rfl)}
.cal-ds-out-seg.draw{background:linear-gradient(135deg,var(--t3),var(--t4))}
.cal-ds-out-seg.away{background:linear-gradient(135deg,var(--info),#06b6d4);border-radius:0 var(--rfl) var(--rfl) 0}
.cal-ds-out-legend{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px}
.cal-ds-out-l{font-size:10px;font-weight:600;color:var(--t3)}
.cal-ds-out-l.home{color:var(--green)}
.cal-ds-out-l.draw{color:var(--t3)}
.cal-ds-out-l.away{color:var(--info)}

/* most common scoreline */
.cal-ds-scoreline{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;background:var(--elevated);border-radius:var(--r);margin-bottom:10px}
.cal-ds-scoreline-lbl{font-size:10px;font-weight:600;color:var(--t3)}
.cal-ds-scoreline-val{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--t1)}
.cal-ds-scoreline-cnt{font-size:10px;font-weight:600;color:var(--t3)}

/* biggest win */
.cal-ds-biggest{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:linear-gradient(135deg,rgba(192,57,43,.03),rgba(192,57,43,.07));border-radius:var(--r);border:1px solid rgba(192,57,43,.08)}
.cal-ds-biggest-badge{font-size:16px}
.cal-ds-biggest-logo{width:18px;height:18px;object-fit:contain}
.cal-ds-biggest-team{font-size:11px;font-weight:600;color:var(--t2);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ds-biggest-score{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--brand);letter-spacing:-0.5px}

/* pull to refresh */
.cal-pull-indicator{text-align:center;padding:12px;font-size:11px;font-weight:600;color:var(--t3);transition:opacity .2s,transform .2s}

/* keyboard focus */
.cal-match.cal-kb-focus{outline:2px solid var(--brand);outline-offset:-2px;background:rgba(192,57,43,.03)!important}

/* sticky league headers (overrides old) */
.cal-league-hdr{position:sticky;top:0;z-index:10}

/* responsive tweaks */
@media(max-width:400px){
  .cal-odds-row{flex-wrap:wrap}
  .cal-form-dot{width:12px;height:12px;font-size:6px}
  .cal-ds-hero{flex-wrap:wrap;gap:8px}
  .cal-ds-hero-main{border-right:none;padding-right:0;margin-right:0;flex:1 1 100%;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:4px}
  .cal-ds-hero-num{font-size:28px}
  .cal-ds-rings{gap:14px}
  .cal-ds-biggest-team{max-width:60px;font-size:10px}
}


/* ═══════════════════════════════════════════════════
   PREMIUM UI v5 — Smooth, Magical, User-friendly
   ═══════════════════════════════════════════════════ */

/* ── Live Dashboard — Premium Stats Grid ── */
.live-dash{
  background:var(--white);border:1px solid var(--border);border-radius:var(--rxl);
  padding:14px;margin-bottom:14px;box-shadow:var(--sh-sm);
  overflow:hidden;position:relative
}
.live-dash::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red-l),var(--brand),var(--green));
  opacity:.7
}
.live-dash-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px
}
.live-dash-item{
  text-align:center;padding:10px 4px 8px;border-radius:var(--rl);
  background:var(--elevated);position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s
}
.live-dash-item:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.live-dash-item.match{border-bottom:2px solid var(--brand)}
.live-dash-item.goal{border-bottom:2px solid var(--green)}
.live-dash-item.avg{border-bottom:2px solid var(--info)}
.live-dash-item.btts{border-bottom:2px solid #7C3AED}
.live-dash-item.over{border-bottom:2px solid var(--amber)}
.live-dash-num{
  font-family:var(--mono);font-size:22px;font-weight:800;
  color:var(--t1);line-height:1;letter-spacing:-1px
}
.live-dash-label{
  font-size:8px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.5px;margin-top:3px
}

/* ── Period distribution bar ── */
.live-period-bar{padding-top:4px}
.live-period-track{
  display:flex;height:8px;border-radius:var(--rfl);overflow:hidden;gap:2px
}
.live-period-seg{transition:width .6s cubic-bezier(.4,0,.2,1)}
.live-period-seg.seg-1st{background:linear-gradient(135deg,var(--brand),var(--brand-l));border-radius:var(--rfl) 0 0 var(--rfl)}
.live-period-seg.seg-ht{background:linear-gradient(135deg,var(--amber),#F59E0B)}
.live-period-seg.seg-2nd{background:linear-gradient(135deg,var(--green),#10B981);border-radius:0 var(--rfl) var(--rfl) 0}
.live-period-labels{
  display:flex;justify-content:space-between;margin-top:4px;
  font-size:9px;color:var(--t3);font-weight:500
}

/* ── Live Toolbar ── */
.live-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px 8px;gap:8px
}

/* ── Live Empty State ── */
.live-empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:60px 24px;text-align:center;
  position:relative
}
.live-empty-orb{
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,68,68,.08) 0%,transparent 70%);
  position:absolute;top:30px;animation:orbFloat 4s ease-in-out infinite
}
@keyframes orbFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.live-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5;position:relative;z-index:1}
.live-empty-title{font-size:15px;font-weight:700;color:var(--t2);margin-bottom:4px;position:relative;z-index:1}
.live-empty-sub{font-size:11px;color:var(--t3);position:relative;z-index:1}

/* ── Section headers ── */
.live-section-cnt{
  font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--elevated);color:var(--t3);
  padding:2px 8px;border-radius:var(--rfl);margin-left:6px
}


/* ═══════════════════════════════════════════════════
   LIVE EXPANDED CARD v4 — Clean & Scannable
   ═══════════════════════════════════════════════════ */

.lx-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);padding:12px 14px 10px;
  margin-bottom:6px;cursor:pointer;
  transition:all .18s ease;position:relative;overflow:hidden
}
.lx-card:hover{
  border-color:var(--border-s);
  box-shadow:0 2px 12px rgba(15,23,41,.06);
  transform:translateY(-1px)
}
.lx-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red-l);border-radius:3px 0 0 3px
}
.lx-card.highgoal::before{background:var(--green)}
.lx-card.highgoal{background:linear-gradient(135deg,var(--white) 90%,rgba(5,150,105,.025))}
.lx-card.fire::before{background:var(--amber)}
.lx-card.fire{background:linear-gradient(135deg,var(--white) 90%,rgba(245,158,11,.02))}
.lx-card.watched::before{background:var(--brand)}

/* ── Header ── */
.lx-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px
}
.lx-league-info{
  display:flex;align-items:center;gap:5px;
  flex:1;min-width:0;overflow:hidden
}
.lx-lg-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.lx-lg-name{
  font-size:11px;color:var(--t3);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lx-lg-dot{color:var(--t4);font-size:10px;margin:0 2px}
.lx-lg-country{font-size:10px;color:var(--t4);white-space:nowrap}

/* Live / HT badge */
.lx-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--rfl);
  font-family:var(--mono);font-size:11px;font-weight:800;
  flex-shrink:0;letter-spacing:-.2px
}
.lx-badge-live{
  background:var(--red-sub);color:var(--red-l)
}
.lx-badge-ht{
  background:var(--amber-sub);color:var(--amber);
  letter-spacing:.3px
}
.lx-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--red-l);animation:pulse 1.5s infinite;
  display:inline-block;margin-right:2px
}

/* ── Teams ── */
.lx-teams{margin-bottom:4px}
.lx-team-row{display:flex;align-items:center;gap:8px;padding:2px 0}
.lx-team-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.lx-tn{
  flex:1;font-size:14px;font-weight:500;color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lx-tn.w{font-weight:700;color:var(--t1)}
.lx-sc{
  font-family:var(--mono);font-size:20px;font-weight:400;
  color:var(--t3);min-width:20px;text-align:right;line-height:1
}
.lx-sc.w{font-weight:800;color:var(--t1)}

/* ── Progress bar — thin & subtle ── */
.lx-progress{
  height:2px;background:var(--inset);border-radius:1px;
  overflow:hidden;margin:6px 0 4px
}
.lx-progress-bar{
  height:100%;border-radius:1px;
  background:linear-gradient(90deg,var(--red-l),var(--brand));
  transition:width .8s cubic-bezier(.4,0,.2,1)
}
.lx-progress-bar.ht{background:var(--amber)}

/* ── HT label above score ── */
.lx-ht-label{
  font-size:10px;font-weight:600;color:var(--t3);
  font-family:var(--mono);margin-bottom:2px;
  letter-spacing:.3px
}

/* ── Stats row — labeled pills ── */
.lx-stats-row{
  display:flex;gap:4px;margin:4px 0 2px;
  overflow-x:auto;scrollbar-width:none
}
.lx-stats-row::-webkit-scrollbar{display:none}
.lx-stat-pill{
  display:flex;flex-direction:column;align-items:center;
  padding:4px 8px 3px;background:var(--elevated);
  border-radius:6px;min-width:0;flex:1
}
.lx-stat-v{
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--t1);line-height:1;white-space:nowrap
}
.lx-stat-l{
  font-size:8px;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.3px;
  margin-top:1px;line-height:1
}

/* ── Bottom row — scorers + chips ── */
.lx-bottom{
  display:flex;align-items:flex-start;gap:8px;margin-top:6px;
  padding-top:6px;border-top:1px solid var(--border)
}
.lx-scorers{
  display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0
}
.lx-scorer{
  display:inline-flex;align-items:center;gap:2px;
  font-size:10px;font-weight:500;color:var(--t2);line-height:1
}
.lx-scorer.away{color:var(--t3)}
.lx-scorer.red{color:var(--red)}
.lx-scorer small{
  font-family:var(--mono);font-size:9px;color:var(--t4);font-weight:600
}
.lx-chips{
  display:flex;gap:3px;flex-shrink:0;margin-left:auto
}
.lx-chip{
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:var(--rfl);
  letter-spacing:.2px;white-space:nowrap
}
.lx-chip.g{background:var(--green-sub);color:var(--green)}
.lx-chip.a{background:var(--amber-sub);color:var(--amber)}
.lx-chip.i{background:rgba(8,145,178,.06);color:var(--info)}

/* ── Hot Match Badge ── */
.lx-hot-badge{
  position:absolute;top:8px;right:8px;
  padding:4px 10px;border-radius:var(--rfl);
  font-size:10px;font-weight:700;
  background:linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3);
  z-index:2;animation:pulse-hot 2s ease infinite
}
.lx-hot-badge.hot{
  background:linear-gradient(135deg,#EF4444,#DC2626)
}
.lx-card.ultra-hot{
  border-color:rgba(239,68,68,.3);
  box-shadow:0 0 0 1px rgba(239,68,68,.1)
}
.lx-card.hot{
  border-color:rgba(245,158,11,.2)
}

@keyframes pulse-hot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.85;transform:scale(.98)}
}

/* ── Timeline ── */
.lx-timeline{
  position:relative;height:20px;margin:8px 0 6px;
  background:rgba(15,23,41,.03);border-radius:4px;
  overflow:visible
}
.lx-timeline-event{
  position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;
  transition:all .2s;z-index:1;
  margin-left:-9px
}
.lx-timeline-event.goal{
  background:var(--green);box-shadow:0 2px 6px rgba(5,150,105,.3)
}
.lx-timeline-event.card{
  background:var(--red-l);box-shadow:0 2px 6px rgba(220,38,38,.3)
}
.lx-timeline-event:hover{
  transform:translateY(-50%) scale(1.2);z-index:2
}

/* ── Advanced Stats (xG + Momentum) ── */
.lx-advanced-stats{
  margin:8px 0;padding:8px;
  background:linear-gradient(135deg,rgba(8,145,178,.02),rgba(5,150,105,.02));
  border-radius:var(--r);border:1px solid rgba(8,145,178,.08);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap
}

/* xG Display */
.lx-xg-box{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;flex-shrink:0
}
.lx-xg-label{
  color:var(--t3);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px
}
.lx-xg-value{
  font-family:var(--mono);color:var(--t2);font-size:13px
}
.lx-xg-sep{color:var(--t4);margin:0 2px}
.lx-xg-context{
  font-size:9px;font-weight:600;padding:2px 6px;
  border-radius:var(--rsm);margin-left:4px;
  text-transform:uppercase;letter-spacing:.3px
}
.lx-xg-context.over{
  background:var(--green-sub);color:var(--green)
}
.lx-xg-context.under{
  background:var(--amber-sub);color:var(--amber)
}

/* Momentum Bar */
.lx-momentum{
  flex:1;min-width:120px
}
.lx-momentum-label{
  font-size:9px;color:var(--t3);font-weight:600;
  margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px
}
.lx-momentum-bar{
  display:flex;height:6px;border-radius:3px;
  background:var(--bg-sub);overflow:hidden;margin-bottom:3px
}
.lx-momentum-home{
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  transition:width .3s ease
}
.lx-momentum-away{
  background:linear-gradient(90deg,var(--t4),var(--t3));
  transition:width .3s ease
}
.lx-momentum-values{
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--t3);font-weight:600;
  font-family:var(--mono)
}


/* ── Mobile ── */
@media(max-width:400px){
  .lx-tn{font-size:12px}
  .lx-sc{font-size:18px}
  .lx-lg-name{max-width:90px}
  .lx-info{font-size:10px}
}

/* ═══ PREMIUM SCOREBOARD ═══ */
.sb-hero{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rxl);padding:0 0 18px;text-align:center;
  margin-bottom:16px;box-shadow:var(--sh-sm);position:relative;overflow:hidden
}
.sb-hero-bg{
  position:absolute;top:0;left:0;right:0;height:80px;
  background:linear-gradient(135deg,rgba(192,57,43,.06),rgba(231,76,60,.02));
  pointer-events:none
}
.sb-hero-league{
  font-size:11px;color:var(--t3);font-weight:500;
  padding:14px 16px 10px;position:relative;
  display:flex;align-items:center;justify-content:center;gap:6px
}
.sb-hero-lg-logo{width:16px;height:16px;object-fit:contain}
.sb-hero-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:8px;padding:0 12px;position:relative
}

.sb-team{
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0
}
.sb-team.link{cursor:pointer;transition:all .2s}
.sb-team.link:hover{opacity:.7;transform:scale(.97)}
.sb-team-logo{
  width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;font-size:28px
}
.sb-team-logo img{width:52px;height:52px;object-fit:contain}
.sb-logo-ph{font-size:28px}
.sb-team-name{
  font-size:13px;font-weight:700;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px
}
.sb-evt-list{font-size:10px;color:var(--t3);line-height:1.4;min-height:14px}

/* Score center */
.sb-score-center{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:4px 0
}
.sb-score-wrap{display:flex;align-items:center;gap:8px}
.sb-score-num{
  font-family:var(--mono);font-size:40px;font-weight:800;
  color:var(--t1);line-height:1;transition:all .3s
}
.sb-score-num.winner{color:var(--brand);text-shadow:0 2px 12px var(--brand-glow)}
.sb-score-sep{font-size:22px;color:var(--t4);font-weight:300}
.sb-kickoff{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--t2)}

.sb-live-badge{
  display:flex;align-items:center;gap:5px;margin-top:6px;
  padding:3px 12px;border-radius:var(--rfl);
  background:var(--red-sub);font-size:12px;font-weight:700;color:var(--red-l)
}
.sb-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--red-l);animation:pulse 1.5s infinite
}
.sb-status-ft{
  margin-top:6px;font-size:11px;font-weight:600;color:var(--t3);
  padding:2px 12px;background:var(--elevated);border-radius:var(--rfl)
}
.sb-halves-row{display:flex;gap:6px;margin-top:8px}
.sb-half-badge{
  padding:3px 10px;border-radius:var(--rfl);
  background:var(--elevated);font-family:var(--mono);
  font-size:10px;font-weight:600;color:var(--t3)
}

/* ═══ PREMIUM TABS ═══ */
.dtabs-wrap{
  position:relative;margin-bottom:16px
}
.dtabs{
  display:flex;gap:0;background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);padding:3px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;box-shadow:var(--sh-xs)
}
.dtabs::-webkit-scrollbar{display:none}
.dtab{
  flex:0 0 auto;padding:8px 10px;text-align:center;
  font-size:11px;font-weight:600;color:var(--t3);border-radius:var(--r);
  cursor:pointer;background:none;border:none;font-family:var(--font);
  transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:2px
}
.dtab:hover{color:var(--t2);background:var(--hover)}
.dtab.on{
  background:var(--brand);color:#fff;
  box-shadow:0 2px 8px var(--brand-glow);
  transform:scale(1.02)
}
.dtab-icon{font-size:14px;line-height:1}
.dtab-label{font-size:10px}

/* Tab body transition */
.mtab-body{
  transition:opacity .15s ease,transform .15s ease;
  opacity:1;transform:translateY(0)
}

/* Tab pill for stat halves */
.stat-half-pills{
  display:flex;gap:6px;padding:0 0 14px;
  overflow-x:auto;scrollbar-width:none
}
.stat-half-pills::-webkit-scrollbar{display:none}

/* ═══ PREMIUM STAT BARS ═══ */
.stat-section{
  margin-bottom:8px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh-xs);
  transition:all .2s
}
.stat-section:hover{
  border-color:var(--border-s);box-shadow:var(--sh-sm)
}
.stat-section-header{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;font-size:11px;font-weight:700;
  color:var(--t2);background:linear-gradient(135deg,var(--elevated),var(--white));
  border-bottom:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.4px
}
.stat-section-icon{font-size:13px}
.stat-section-title{font-size:10px}
.stat-section-body{padding:0}

.stat-row{
  display:grid;grid-template-columns:44px 1fr 44px;
  align-items:center;gap:6px;padding:5px 12px;
  border-bottom:1px solid rgba(15,23,41,.04);
  transition:all .2s
}
.stat-row:last-child{border-bottom:none}
.stat-row:hover{background:var(--hover)}
.stat-row.stat-emphasis{background:rgba(192,57,43,.015)}

.stat-val{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--t2);line-height:1.1;transition:all .3s
}
.stat-val.left{text-align:right}
.stat-val.right{text-align:left}
.stat-val.win{
  color:var(--brand);font-weight:800;font-size:12px;
  text-shadow:0 0 12px var(--brand-glow)
}

.stat-center{display:flex;flex-direction:column;gap:2px}
.stat-label{
  font-size:10px;color:var(--t2);text-align:center;
  font-weight:600;letter-spacing:.2px;line-height:1.2
}
.stat-track{
  display:flex;height:5px;border-radius:3px;
  overflow:hidden;gap:1px;background:var(--inset);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04)
}
.stat-bar-home,.stat-bar-away{
  height:100%;border-radius:3px;position:relative;
  transition:width .8s cubic-bezier(.34,1.56,.64,1)
}
.stat-bar-home{
  background:linear-gradient(135deg,#E8EAF3,#DDE0ED)
}
.stat-bar-away{
  background:linear-gradient(135deg,#E8EAF3,#DDE0ED)
}
.stat-bar-home.dominant{
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 2px 8px var(--brand-glow)
}
.stat-bar-away.dominant{
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 2px 8px var(--brand-glow)
}
.stat-bar-glow{
  position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);
  pointer-events:none
}

/* ═══ PREMIUM H2H ═══ */
.h2h-hero{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rxl);margin-bottom:14px;
  box-shadow:var(--sh-sm);overflow:hidden;position:relative
}
.h2h-hero-bg{
  position:absolute;top:0;left:0;right:0;height:100px;
  background:linear-gradient(135deg,rgba(192,57,43,.05),rgba(231,76,60,.02));
  pointer-events:none
}
.h2h-hero-content{
  display:flex;align-items:center;justify-content:center;
  gap:16px;padding:24px 16px 14px;position:relative
}
.h2h-hero-team{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;flex:1;min-width:0
}
.h2h-hero-logo{
  width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;font-size:30px;
  transition:transform .3s
}
.h2h-hero-logo:hover{transform:scale(1.1)}
.h2h-hero-logo img{width:52px;height:52px;object-fit:contain}
.h2h-hero-name{
  font-size:13px;font-weight:700;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px
}
.h2h-hero-wins{
  font-size:11px;font-weight:600;color:var(--brand);
  padding:2px 10px;background:var(--brand-sub);border-radius:var(--rfl)
}
.h2h-hero-center{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  flex-shrink:0
}
.h2h-hero-count{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-l));
  color:#fff;font-family:var(--mono);font-size:20px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px var(--brand-glow);
  transition:transform .3s
}
.h2h-hero-count:hover{transform:scale(1.1)}
.h2h-hero-label{font-size:9px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.h2h-hero-draws{font-size:10px;color:var(--t3);font-weight:500;margin-top:2px}

/* H2H Dominance bar inside hero */
.h2h-hero-bar{
  display:flex;height:32px;margin:0 16px 16px;
  border-radius:var(--rfl);overflow:hidden;gap:2px;position:relative
}
.h2h-bar-seg{
  display:flex;align-items:center;justify-content:center;
  transition:width .8s cubic-bezier(.4,0,.2,1);min-width:24px
}
.h2h-bar-seg span{
  font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.2)
}
.h2h-bar-seg.home{
  background:linear-gradient(135deg,var(--brand),var(--brand-l));
  border-radius:var(--rfl) 0 0 var(--rfl)
}
.h2h-bar-seg.draw{background:linear-gradient(135deg,var(--t3),var(--t4))}
.h2h-bar-seg.away{
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  border-radius:0 var(--rfl) var(--rfl) 0
}

/* H2H Stats Grid */
.h2h-section-title{
  font-size:13px;font-weight:700;color:var(--t1);
  padding:14px 0 6px;margin-top:4px;
  display:flex;align-items:center;gap:6px
}
.h2h-stats-grid{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);overflow:hidden;margin-bottom:12px;
  box-shadow:var(--sh-xs)
}
.h2h-stat-row{
  display:grid;grid-template-columns:70px 1fr 70px;
  align-items:center;padding:10px 14px;
  border-bottom:1px solid rgba(15,23,41,.04);
  transition:background .15s
}
.h2h-stat-row:last-child{border-bottom:none}
.h2h-stat-row:hover{background:var(--hover)}
.h2h-stat-val{
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--t2)
}
.h2h-stat-val:first-child{text-align:left}
.h2h-stat-val:last-child{text-align:right}
.h2h-stat-val.win{color:var(--brand);font-weight:800}
.h2h-stat-mid{
  display:flex;flex-direction:column;align-items:center;gap:3px
}
.h2h-stat-bars{
  display:flex;width:100%;height:5px;border-radius:3px;overflow:hidden;gap:2px
}
.h2h-sbar-h{
  height:100%;background:var(--brand);border-radius:3px;
  transition:width .4s ease
}
.h2h-sbar-a{
  height:100%;background:var(--t3);border-radius:3px;
  transition:width .4s ease;margin-left:auto
}
.h2h-stat-label{
  font-size:11px;color:var(--t3);text-align:center;font-weight:500
}
/* H2H Line hit rows */
.h2h-line-row{
  grid-template-columns:1fr 120px 48px;gap:8px
}
.h2h-stat-label-wide{
  font-size:12px;color:var(--t2);font-weight:600;white-space:nowrap
}
.h2h-line-bar-wrap{
  height:6px;background:rgba(15,23,41,.06);border-radius:3px;overflow:hidden
}
.h2h-line-bar{
  height:100%;border-radius:3px;transition:width .5s ease
}
.h2h-line-bar.high{background:var(--brand)}
.h2h-line-bar.mid{background:#f59e0b}
.h2h-line-bar.low{background:var(--t3)}
.h2h-line-pct{
  font-family:var(--mono);font-size:13px;font-weight:800;text-align:right
}
.h2h-line-pct.high{color:var(--brand)}
.h2h-line-pct.mid{color:#f59e0b}
.h2h-line-pct.low{color:var(--t3)}

/* H2H Goal Flow Chart */
.h2h-flow{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);padding:14px;margin-bottom:12px;
  box-shadow:var(--sh-xs)
}
.h2h-flow-title{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--t1)}
.h2h-flow-chart{
  display:flex;justify-content:space-around;gap:4px;padding-bottom:8px
}
.h2h-flow-col{
  display:flex;flex-direction:column;align-items:center;gap:4px;flex:1
}
.h2h-flow-bars{
  display:flex;gap:3px;align-items:flex-end;height:52px
}
.h2h-bar-h,.h2h-bar-a{
  width:14px;border-radius:4px 4px 0 0;
  display:flex;align-items:flex-start;justify-content:center;
  font-size:8px;font-weight:700;color:#fff;min-height:4px;
  transition:height .6s cubic-bezier(.4,0,.2,1)
}
.h2h-bar-h{background:linear-gradient(180deg,var(--brand),var(--brand-l))}
.h2h-bar-a{background:linear-gradient(180deg,#3B82F6,#60A5FA)}
.h2h-flow-date{font-size:8px;color:var(--t3);font-family:var(--mono)}
.h2h-flow-legend{
  display:flex;align-items:center;gap:16px;justify-content:center;
  margin-top:8px;font-size:10px;color:var(--t3);font-weight:500
}
.h2h-legend-dot{
  width:10px;height:10px;border-radius:3px;display:inline-block;
  margin-right:4px;vertical-align:middle
}
.h2h-legend-dot.home{background:var(--brand)}
.h2h-legend-dot.away{background:#3B82F6}

/* H2H Match List Title */
.h2h-list-title{
  font-size:13px;font-weight:700;padding:12px 0 8px;color:var(--t1)
}

/* H2H Match rows */
.h2h-match{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:4px;cursor:pointer;transition:all .15s
}
.h2h-match:hover{
  background:var(--hover);transform:translateX(3px);
  box-shadow:var(--sh-xs)
}
.h2h-match-res{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;flex-shrink:0;
  transition:transform .2s
}
.h2h-match:hover .h2h-match-res{transform:scale(1.1)}
.h2h-match-res.W{background:linear-gradient(135deg,var(--green),#10B981)}
.h2h-match-res.D{background:linear-gradient(135deg,var(--t3),var(--t4))}
.h2h-match-res.L{background:linear-gradient(135deg,var(--red),var(--red-l))}
.h2h-match-body{flex:1;min-width:0}
.h2h-match-teams{display:flex;align-items:center;gap:4px}
.h2h-match-tn{
  font-size:12px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap
}
.h2h-match-tn.bold{font-weight:700}
.h2h-match-score{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--brand);padding:0 4px;flex-shrink:0
}
.h2h-match-meta{
  display:flex;align-items:center;gap:8px;margin-top:2px
}
.h2h-match-ht{font-size:10px;color:var(--t3);font-family:var(--mono)}
.h2h-match-league{
  font-size:10px;color:var(--t3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap
}
.h2h-match-date{
  font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 480px) {
  .live-dash-grid{grid-template-columns:repeat(5,1fr);gap:4px}
  .live-dash-num{font-size:18px}
  .live-dash-label{font-size:7px}
  .lx-card{padding:12px 12px 10px}
  .lx-team-name{font-size:13px}
  .lx-team-score{font-size:18px}
  .sb-score-num{font-size:34px}
  .sb-team-logo,.sb-team-logo img{width:44px;height:44px}
  .h2h-hero-logo,.h2h-hero-logo img{width:44px;height:44px}
  .h2h-hero-count{width:40px;height:40px;font-size:18px}
  .h2h-hero-name{font-size:12px;max-width:90px}
  .stat-row{grid-template-columns:42px 1fr 42px;gap:6px;padding:8px 12px}
  .stat-val{font-size:12px}
  .stat-val.win{font-size:13px}
  .stat-label{font-size:10px}
  .dtab{padding:6px 8px}
  .dtab-icon{font-size:13px}
  .dtab-label{font-size:9px}
}

/* ═══ SMOOTH ANIMATIONS ═══ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.fi{animation:fadeUp .3s ease both}

/* Stat bars entrance animation */
.stat-section{animation:fadeUp .35s ease both}
.stat-row{animation:fadeUp .25s ease both}

/* Hover micro-interactions */
@media (hover: hover) {
  .stat-row:hover .stat-val{font-size:14px}
  .stat-row:hover .stat-track{height:8px}
  .lx-card:active{transform:scale(.99)}
  .h2h-match:active{transform:scale(.98)}
}

/* ═══════════════════════════════════════════════════════════════
   TIPEDGE — Premium Betting Analysis Section
   ═══════════════════════════════════════════════════════════════ */

/* TipEdge Navigation */
.tipedge-nav {
  display: flex;
  gap: 8px;
  padding: 12px 4px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tipedge-nav::-webkit-scrollbar { display: none; }

.tipedge-nav-btn {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font);
}

.tipedge-nav-btn:hover {
  border-color: var(--border-s);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}

.tipedge-nav-btn.on {
  background: linear-gradient(145deg, #E74C3C, #C0392B);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px var(--brand-glow);
}

.tipedge-nav-icon {
  font-size: 24px;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.2s;
}

.tipedge-nav-btn.on .tipedge-nav-icon {
  filter: grayscale(0) opacity(1);
}

.tipedge-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--t2);
  transition: color 0.2s;
}

.tipedge-nav-btn.on .tipedge-nav-label {
  color: #fff;
}

/* TipEdge Content Panels */
.tipedge-content {
  position: relative;
  min-height: 300px;
}

.tipedge-panel {
  display: none;
  animation: fadeUp 0.3s ease;
}

.tipedge-panel.on {
  display: block;
}

/* Featured Match (Dagens Kamp) */
.tipedge-featured {
  background: linear-gradient(145deg, rgba(231, 76, 60, 0.03), rgba(192, 57, 43, 0.06));
  border: 2px solid var(--brand);
  border-radius: var(--rxl);
  padding: 20px;
  margin: 8px 4px 16px;
  box-shadow: 0 8px 20px rgba(192, 57, 43, 0.12);
  position: relative;
  overflow: hidden;
}

.tipedge-featured::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
  opacity: 0.4;
}

.tipedge-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--rfl);
  margin-bottom: 16px;
  box-shadow: 0 2px 8px var(--brand-glow);
}

.tipedge-featured-match {
  margin-bottom: 20px;
}

.tipedge-featured-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.tipedge-featured-team {
  flex: 1;
  text-align: center;
}

.tipedge-featured-team-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.3px;
}

.tipedge-featured-vs {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  padding: 4px 10px;
  background: var(--inset);
  border-radius: var(--rfl);
}

.tipedge-featured-time {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

.tipedge-featured-pick {
  background: var(--white);
  border-radius: var(--rl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
}

.tipedge-featured-pick-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.tipedge-featured-pick-market {
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 4px;
}

.tipedge-featured-pick-selection {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.5px;
}

.tipedge-featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.tipedge-featured-stat {
  text-align: center;
  background: var(--white);
  border-radius: var(--r);
  padding: 12px 8px;
  box-shadow: var(--sh-xs);
}

.tipedge-featured-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.tipedge-featured-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
  font-family: var(--mono);
}

.tipedge-edge {
  color: var(--green);
}

.tipedge-confidence-high {
  color: var(--green);
}

.tipedge-confidence-medium {
  color: var(--amber);
}

.tipedge-confidence-low {
  color: var(--t3);
}

.tipedge-featured-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px;
  border: none;
  border-radius: var(--rl);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px var(--brand-glow);
  font-family: var(--font);
}

.tipedge-featured-cta:hover {
  background: var(--brand-l);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--brand-glow);
}

.tipedge-featured-cta:active {
  transform: translateY(0);
}

/* Match Cards (Analyserte Kamper) */
.tipedge-match-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
}

.tipedge-match-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: var(--sh-xs);
}

.tipedge-match-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.08);
  transform: translateY(-1px);
}

.tipedge-match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tipedge-match-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

.tipedge-match-vs {
  font-size: 10px;
  color: var(--t3);
  font-weight: 500;
}

.tipedge-match-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-sub);
  padding: 3px 8px;
  border-radius: var(--rfl);
}

.tipedge-match-pick {
  background: var(--elevated);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.tipedge-match-market {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  margin-bottom: 2px;
}

.tipedge-match-selection {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}

.tipedge-match-stats {
  display: flex;
  gap: 16px;
}

.tipedge-match-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.tipedge-match-stat-label {
  color: var(--t3);
  font-weight: 500;
}

.tipedge-match-stat-value {
  font-weight: 700;
  color: var(--t1);
  font-family: var(--mono);
}

.tipedge-match-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  opacity: 0;
  transition: all 0.2s;
}

.tipedge-match-card:hover .tipedge-match-arrow {
  opacity: 1;
  right: 12px;
}

/* Pick Cards (Premium Picks) */
.tipedge-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 8px 4px;
}

.tipedge-pick-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--rxl);
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.tipedge-pick-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(192, 57, 43, 0.12);
  transform: translateY(-2px);
}

.tipedge-pick-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--rfl);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.tipedge-edge-badge {
  background: var(--green);
}

.tipedge-pick-header {
  margin-bottom: 14px;
  padding-right: 60px;
}

.tipedge-pick-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.tipedge-pick-team {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.3px;
}

.tipedge-pick-vs {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-align: center;
  margin: 2px 0;
}

.tipedge-pick-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
}

.tipedge-pick-bet {
  background: var(--elevated);
  border-radius: var(--rl);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tipedge-pick-market {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.tipedge-pick-odds {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  font-family: var(--mono);
}

.tipedge-pick-confidence {
  margin-bottom: 12px;
}

.tipedge-pick-confidence-bar {
  height: 6px;
  background: var(--inset);
  border-radius: var(--rfl);
  overflow: hidden;
  margin-bottom: 6px;
}

.tipedge-pick-confidence-fill {
  height: 100%;
  border-radius: var(--rfl);
  transition: width 0.6s ease;
}

.tipedge-pick-confidence-fill.tipedge-confidence-high {
  background: var(--green);
}

.tipedge-pick-confidence-fill.tipedge-confidence-medium {
  background: var(--amber);
}

.tipedge-pick-confidence-fill.tipedge-confidence-low {
  background: var(--t3);
}

.tipedge-pick-confidence-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-align: center;
}

.tipedge-pick-profit {
  font-size: 12px;
  color: var(--t2);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.tipedge-pick-profit strong {
  color: var(--green);
  font-weight: 700;
}

/* Mobile Responsive for TipEdge */
@media (max-width: 600px) {
  .tipedge-pick-list {
    grid-template-columns: 1fr;
  }
  
  .tipedge-featured-teams {
    flex-direction: column;
    gap: 8px;
  }
  
  .tipedge-featured-vs {
    transform: rotate(90deg);
  }
  
  .tipedge-nav-btn {
    min-width: 95px;
    padding: 10px 12px;
  }
  
  .tipedge-nav-label {
    font-size: 10px;
  }
}
