.draw-panel {
  box-sizing: border-box;
  margin: 4px 0;
  padding: 5px;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #000;
  font: 13px/1.6 Arial, "Microsoft YaHei", sans-serif;
}
.draw-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  background: #eee;
}
.draw-panel-period { margin: 0 3px; color: red; }
.draw-panel-heading a { color: blue; font-size: 12px; text-decoration: none; }
.draw-panel-balls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 18px minmax(0, 1fr);
  align-items: center;
  padding: 6px 0;
  text-align: center;
}
.draw-panel-ball { min-width: 0; display: grid; justify-items: center; gap: 5px; }
.draw-panel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font: bold 24px/1 Arial, sans-serif;
}
.draw-panel-red { background: red; }
.draw-panel-blue { background: blue; }
.draw-panel-green { background: #00a000; }
.draw-panel-empty { background: #888; font-size: 18px; }
.draw-panel-label { white-space: nowrap; font-size: 12px; }
.draw-panel-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  border-top: 1px solid #ddd;
  color: #ff5000;
  font-size: 11px;
}
.draw-panel button { cursor: pointer; border: 0; font: inherit; }
.draw-panel-history-toggle { padding: 0 2px; background: #ff0; color: #c00; text-decoration: none; }
.draw-panel-refresh { margin-left: auto; padding: 2px 14px; border-radius: 5px; background: #ff9800; color: #fff; }
.draw-panel-status { margin: 3px 0 0; color: #b12222; font-size: 12px; }
.draw-panel [hidden] { display: none !important; }
@media (max-width: 400px) {
  .draw-panel-number { width: 28px; height: 28px; font-size: 21px; }
  .draw-panel-heading { padding: 4px 2px; font-size: 12px; }
}
.draw-game-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #fff;
}

.draw-game-tabs button {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 3px;
  background: #eee;
  color: #142c45;
  font: 16px/1.4 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.draw-game-tabs button[aria-selected="true"] {
  background: #19bc0c;
  color: #fff;
}

.draw-game-tabs button:focus-visible {
  outline: 2px solid #0756ff;
  outline-offset: 2px;
}

.draw-game-pending {
  margin: 0;
  padding: 14px 8px;
  background: #fff;
  color: #58627a;
  text-align: center;
}
.draw-game-results {
  padding: 4px;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #000;
  font: 13px/1.6 Arial, "Microsoft YaHei", sans-serif;
}
.draw-game-results .draw-panel-plus { color: #000; }

.external-draw-period { background: #fff; color: #111; text-align: center; font: bold 12px/20px Arial, sans-serif; }
.external-draw-balls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 18px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  padding: 2px 8px 6px;
  background: #fff;
}
.external-draw-ball { min-width: 0; border-radius: 4px; padding: 6px 0; text-align: center; }
.external-draw-ball strong { display: block; color: #fff; font: bold 20px/24px Arial, sans-serif; }
.external-draw-ball span { display: inline-block; margin-top: 4px; padding: 1px 2px; background: #fff; color: #111; white-space: nowrap; font: 11px/16px "Microsoft YaHei", sans-serif; }
.external-draw-red { background: #eb1005; }
.external-draw-blue { background: #258bee; }
.external-draw-green { background: #16bb12; }
.external-draw-plus { color: #111; text-align: center; font: bold 24px/1 Arial, sans-serif; }