/* Hub app bridge: same palette, header and boxes as the website. */
body { background: var(--bg); }
main { padding: 1.4rem 0 2.4rem; }
.hero { border-left: none; padding: 1rem 0 0.8rem; }
.hero h1 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.eyebrow { color: var(--muted); font-size: 0.74rem; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 0.35rem; }
.panel, .empty { background: var(--panel); border: 1px solid var(--line);
  padding: 1rem 1.1rem; margin-bottom: 1rem; }
.empty { border-style: dashed; color: var(--muted); }
.card { background: #fbfcfd; }
.card h2 { font-size: 1.05rem; margin: 0.15rem 0 0.3rem; }
.card h2 a { color: var(--ink); }
.path { font-family: ui-monospace, Consolas, monospace; font-size: 0.76rem;
  color: var(--warn); }
.meta { color: var(--muted); font-size: 0.82rem; }
.tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 99px;
  padding: 0.05rem 0.55rem; color: var(--muted); font-size: 0.76rem; background: #f6f8fa; }
.card.live { border-color: #9bd4b4; background: #f4fbf7; }

/* Buttons and forms: identical to the site's .btn styles */
.button, button {
  display: inline-block; border: 1px solid var(--navy); border-radius: 4px;
  padding: 0.5rem 1.05rem; font-weight: 600; font-size: 0.92rem;
  background: var(--navy); color: #fff; cursor: pointer; text-decoration: none;
  font-family: inherit; line-height: 1.4;
}
.button:hover, button:hover { background: var(--navy-light); color: #fff; text-decoration: none; }
.button.secondary, button.secondary {
  background: #fff; color: var(--link); border-color: var(--link);
}
.button.secondary:hover, button.secondary:hover { background: #eaf2fc; color: var(--link); }
.button.join { background: #1f7a4d; border-color: #1f7a4d; }
.button.join:hover { background: #268f5b; }
form.inline { display: inline; }
form.inline button {
  background: transparent; color: var(--muted); border: none; padding: 0.42rem 0.6rem;
  font-weight: 600;
}
form.inline button:hover { color: var(--ink); background: rgba(0,0,0,0.05); }

label { display: block; font-size: 0.84rem; color: var(--muted); margin-top: 0.5rem; }
input, textarea, select {
  width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; color: var(--ink); font: inherit;
  margin: 0.2rem 0 0.7rem;
}
input[type="checkbox"] { width: auto; margin: 0 0.3rem 0 0; }
textarea { min-height: 110px; resize: vertical; }
.form { max-width: 720px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }
.error { color: #a11; }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.filters label { margin: 0; flex: 1 1 170px; }
.filters input, .filters select { margin: 0; }
.filters button, .filters .button { margin: 0; flex: 0 0 auto; }

.live-summary { background: #f4fbf7; border: 1px solid #9bd4b4; padding: 0.6rem 0.9rem;
  margin: 0 0 1rem; font-size: 0.9rem; }
.live-summary strong { color: var(--ok); }
.players { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0; }
.player { background: #eef4f9; border: 1px solid var(--line); border-radius: 99px;
  padding: 0.05rem 0.6rem; font-size: 0.8rem; }
.live-game { background: #f4fbf7; border: 1px solid #9bd4b4; padding: 1rem 1.1rem;
  margin-bottom: 1rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  align-items: center; }
.live-kicker { color: var(--ok); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; }
.live-metrics { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; }
.live-metrics strong { color: var(--ink); }
@media (max-width: 620px) { .live-game { grid-template-columns: 1fr; } }
.setup { background: #f2f5f8; border: 1px solid var(--line); padding: 0.7rem 0.85rem;
  overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: 0.86rem; }
.steps { padding-left: 1.2rem; }
.steps li { margin: 0.45rem 0; }
.game { max-width: 760px; }