:root{
  --ml-blue:#2b77ff;
  --ml-text:#e9eef7;
  --ml-muted:#90a3c7;
  --ml-border:rgba(120,140,180,.25);
}

.ml-container{}
.ml-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
}
@media (max-width: 1024px){
  .ml-layout{ display:flex; flex-direction:column; gap:12px; }
}

/* Sidebar (matches) */
.ml-sidebar{
  padding:8px;
  border:1px solid var(--ml-border);
  border-radius:14px;
  background: transparent;
  max-height: var(--ml-player-height, 560px);
}
.ml-heading{
  margin:4px 8px 10px;
  font-size:15px;
  font-weight:700;
  color:var(--ml-blue);
}
.ml-heading-channels{ margin: 6px 0 8px 0; }

.ml-match-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height: var(--ml-player-height, 560px);
  overflow:auto;
  scroll-behavior:smooth;
}

/* Match button */
.ml-match{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--ml-border);
  padding:10px 12px;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  transition: background .2s, border-color .2s, transform .05s;
  color:var(--ml-text);
  text-align:left;
  appearance:none; -webkit-appearance:none;
}
.ml-match:hover{ border-color: var(--ml-blue); background: rgba(43,119,255,.08) !important; }
.ml-match.active{ border-color: var(--ml-blue); background: rgba(43,119,255,.12) !important; }
.ml-match:active{ transform: scale(.995); }

/* Player */
.ml-player-area{ display:flex; flex-direction:column; gap:10px; }
.ml-player-wrap{
  position:relative;
  width:100%;
  height: var(--ml-player-height, 560px);
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--ml-border);
  background: #000;
}
.ml-player-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.ml-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:2;
  pointer-events:none;
}
.ml-broadcast-badge{
  position:absolute;
  top:8px; left:8px;
  padding:6px 10px;
  font-size:13px; font-weight:700;
  color: var(--ml-text);
  background: rgba(0,0,0,.45);
  border:1px solid var(--ml-border);
  border-radius:10px;
  z-index:3;
}

/* Channels block (full width) */
.ml-channels-block{ margin-top:8px; }
.ml-channels{ position:relative; }
.ml-channels-scroll{
  display:flex; gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 40px;
}
.ml-channel-card{
  min-width:220px;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--ml-border);
  border-radius:12px;
  padding:12px 14px;
  background:transparent;
  cursor:pointer;
  scroll-snap-align:start;
  transition: background .2s, border-color .2s;
  color:var(--ml-text);
  appearance:none; -webkit-appearance:none;
}
.ml-channel-card:hover{ border-color: var(--ml-blue); background: rgba(43,119,255,.08) !important; }
.ml-channel-card img{ width:28px; height:28px; object-fit:contain; }
.ml-arrows{
  position:absolute; inset:0; pointer-events:none;
  display:flex; justify-content:space-between; align-items:center;
}
.ml-arrow{
  pointer-events:auto;
  appearance:none;
  border:0; background:transparent;
  font-size:18px; line-height:1;
  padding:6px 8px;
  color:var(--ml-muted);
  transition: color .2s, transform .1s;
}
.ml-arrow:hover{ color:var(--ml-text); transform: scale(1.05); }

/* Scrollbars */
.ml-match-list::-webkit-scrollbar,
.ml-channels-scroll::-webkit-scrollbar{ height:8px; width:8px; }
.ml-match-list::-webkit-scrollbar-thumb,
.ml-channels-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 10px; }

/* Global override to kill unexpected theme button backgrounds (e.g., pink) */
.ml-container .ml-match,
.ml-container .ml-channel-card,
.ml-container .ml-channel-card:visited,
.ml-container .ml-match:visited,
.ml-container button,
.ml-container button:focus,
.ml-container button:active{
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.ml-container * { -webkit-tap-highlight-color: transparent; }