:root {
  --pico-font-family:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pico-font-size: 15px;
  --pico-primary: #24766a;
  --pico-primary-background: #24766a;
  --pico-primary-border: #24766a;
  --pico-border-radius: 8px;
  --pico-background-color: #f5f7f9;
  --pico-form-element-spacing-vertical: 0.55rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}
body {
  margin: 0;
  color: #24344a;
}
h1 {
  font-size: 1.85rem;
  letter-spacing: -0.04em;
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1rem;
}
small,
.muted {
  color: #728096;
}
button {
  white-space: nowrap;
}
button:disabled {
  cursor: not-allowed;
}
.topbar {
  padding: 14px 32px;
  background: #132d34;
  color: white;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.brand { font-weight: 800; letter-spacing: .1em; font-size: 1rem; }
.topbar nav { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; }
.topbar nav a { color: #c6d6db; padding: 10px 14px; text-decoration: none; white-space: nowrap; }
.topbar nav a.active { background: #28474e; color: white; border-radius: 7px; }
.workspace { width: 100%; }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.workspace > header {
  background: white;
  border-bottom: 1px solid #e4e9ef;
  padding: 15px 32px;
  font-size: 0.84rem;
}
.workspace > header button {
  padding: 5px 10px;
  font-size: 0.77rem;
  margin: 0 0 0 12px;
}
main {
  padding: 32px;
  max-width: none;
  margin: auto;
}
.heading {
  margin-bottom: 24px;
}
.heading p {
  color: #728096;
  margin-bottom: 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.card,
article {
  box-shadow: none;
  background: white;
  border: 1px solid #e4e9ef;
  padding: 20px;
  margin-bottom: 20px;
}
.card strong {
  display: block;
  font-size: 1.7rem;
  margin: 10px 0 2px;
}
.card small {
  font-size: 0.8rem;
}
.section-top {
  margin: 8px 0 18px;
}
.section-top h2 {
  margin: 0;
}
.table-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 8px;
}
table {
  margin: 0;
  font-size: 0.86rem;
}
th {
  white-space: nowrap;
  background: #f8fafb;
  font-size: 0.78rem;
  color: #6f7b8b;
}
td {
  min-width: 65px;
}
td button {
  font-size: 0.79rem;
  padding: 5px 8px;
  margin: 0;
}
td pre {
  max-width: 600px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
}
tr:last-child td {
  border-bottom: none;
}
.badge {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.76rem;
  background: #e4f4ef;
  color: #24766a;
}
.badge.bad {
  background: #fff0e9;
  color: #b65738;
}
.filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  background: white;
  padding: 18px;
  border: 1px solid #e4e9ef;
  border-radius: 8px;
}
.filters label {
  font-size: 0.8rem;
  flex: 1;
  min-width: 140px;
  margin: 0;
}
.filters input,
.filters select,
.filters button {
  margin: 0;
}
.pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.pager button {
  padding: 6px 12px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.error {
  color: #aa4429;
  background: #fff0e9;
  padding: 12px;
  border-radius: 6px;
}
.login {
  max-width: 430px;
  margin: 12vh auto;
  padding: 32px;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
}
.login h1 {
  margin-top: 28px;
}
.login p {
  font-size: 0.9rem;
  color: #728096;
}
#notice {
  position: fixed;
  bottom: 16px;
  right: 20px;
  max-width: 90vw;
  background: #132d34;
  color: white;
  border-radius: 7px;
  padding: 12px 20px;
  z-index: 10;
}
#notice:empty {
  display: none;
}
dialog article {
  width: min(1200px, 96vw);
  max-width: 1200px;
}
pre {
  font-size: 0.78rem;
}
.empty {
  padding: 40px;
  text-align: center;
  color: #728096;
}
details > summary {
  font-weight: 650;
}
input[role="switch"] {
  margin: 0;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stats div {
  padding: 12px;
  background: #f8fafb;
  border-radius: 6px;
}
.stats strong {
  display: block;
  margin-top: 5px;
}
.break {
  overflow-wrap: anywhere;
}
progress {
  margin-top: 8px;
}
@media (max-width: 1050px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .topbar { padding: 16px; gap: 12px; }
  .topbar nav { width: 100%; }
  .topbar nav a { padding: 8px 10px; font-size: .85rem; }
  .workspace > header {
    padding: 12px 18px;
  }
  main {
    padding: 22px 16px;
  }
  .cards {
    gap: 10px;
  }
  .card {
    padding: 15px;
  }
  .card strong {
    font-size: 1.4rem;
  }
  .filters label {
    min-width: 120px;
  }
  .login {
    margin: 8vh 16px;
  }
  .heading {
    align-items: flex-start;
  }
  h1 {
    font-size: 1.5rem;
  }
}

.timestamp {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fixture-period {
  margin: 12px 0;
  font-size: 0.8rem;
}
.operation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
  font-size: 0.8rem;
}
.broadcast-icon {
  display: inline-flex;
  align-items: center;
  color: var(--pico-primary);
}
.broadcast-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fixture-list table {
  min-width: 1180px;
}

.list-pager { flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.page-buttons { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.list-pager button { margin: 0; }
.page-size { display: flex; gap: 8px; align-items: center; margin: 0; white-space: nowrap; }
.page-size select { width: auto; margin: 0; padding-block: 6px; }


.odds-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),480px)); gap:14px; align-items:start; }
.odds-group { padding:14px; margin:0; min-width:0; }
.odds-group h3 { margin:0 0 10px; font-size:.95rem; }
.compact-odds th, .compact-odds td { padding:7px 9px; text-align:center; min-width:55px; }
.compact-odds th[scope="row"] { width:70px; font-variant-numeric:tabular-nums; }
.compact-odds .odds-price { padding:5px 10px; font-size:1.1rem; font-weight:750; min-width:64px; font-variant-numeric:tabular-nums; }
.odds-status { display:block; font-size:.65rem; margin-top:2px; }
.odds-extra { margin:10px 0 0; font-size:.75rem; }
.odds-extra summary { font-size:.75rem; }
dialog article > header { position:sticky; top:0; z-index:2; background:var(--pico-card-sectioning-background-color,#fff); }
dialog article > header .modal-close { flex:none; width:auto; height:auto; margin:0; padding:6px 12px; background:#fff; color:#24344a; border:1px solid #aab5c2; font-size:.9rem; font-weight:600; opacity:1; }
#market-edit-dialog article { max-width:640px; }

.sort-heading { padding:0; margin:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; }

#league-edit-dialog article { max-width:640px; }

.league-inline { width:100px; min-width:90px; margin:0; padding:5px 28px 5px 8px; font-size:.85rem; }

#participant-edit-dialog article { max-width:640px; }

button.team-link { padding:0; margin:0; border:0; background:transparent; color:var(--pico-primary); font:inherit; text-align:left; white-space:normal; text-decoration:underline; text-underline-offset:3px; }

.emblem-preview { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; }
.emblem-preview img { max-width:40px; max-height:40px; object-fit:contain; }
.emblem-preview img[hidden], .emblem-preview span[hidden] { display:none; }