:root {
  --bg: #ffffff;
  --fg: #14181c;
  --accent: #1d6fdb;
  --surface: #f2f4f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1216;
    --fg: #e7edf3;
    --accent: #4c9aff;
    --surface: #1a2026;
  }
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.match-list { max-height: 60vh; overflow-y: auto; border: 1px solid var(--surface); border-radius: 8px; padding: .25rem .5rem; margin: .5rem 0; }
.match { background: var(--surface); border-radius: 8px; padding: .75rem; margin: .5rem 0; cursor: pointer; }
.match-time { font-size: .85rem; opacity: .7; margin-top: .15rem; }
.match-head { display: flex; align-items: center; gap: .6rem; }
.match-title { flex: 1; }
.match-active { font-size: .85rem; opacity: .8; }
.match-streams { list-style: none; padding: .25rem 0 0; margin: .35rem 0 0; }
.match-streams li { margin: .2rem 0; }
.gif-list { list-style: none; padding: 0; }
.gif-item { display: flex; align-items: center; gap: .75rem; background: var(--surface); border-radius: 8px; padding: .5rem; margin: .5rem 0; }
.gif-item img { max-width: 100%; height: auto; }
.gif-toggle { flex: none; width: 1.2rem; height: 1.2rem; }
.gif-name { flex: 1; font-size: .85rem; opacity: .8; word-break: break-all; }
button, select { font: inherit; }
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.gif-banner { margin: .5rem 0; text-align: center; }
.gif-banner img { max-width: 100%; height: auto; }
.banner-text { flex: 1; }
.banner-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.gif-banner:empty { margin: 0; }