:root {
  --bg: #0f1420; --card: #161d2e; --line: #253049; --text: #e6ebf5; --muted: #8a94ad;
  --green: #2ed573; --red: #ff4757; --gold: #ffc048;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow: hidden; }

/* Full-height app: fixed header block + scrollable table */
.app { height: 100vh; height: 100dvh; max-width: 860px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; }
.top { flex: none; padding-top: 18px; }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
h1 { margin: 0; font-size: 18px; font-weight: 600; }
h1 .sub { font-weight: 400; color: var(--muted); font-size: 13px; }
.conn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.on i { background: var(--green); }
.conn.off i { background: var(--red); }

/* ---- waiting indicator ---- */
.waiting {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px;
}
.waiting.flash { animation: flash .6s ease; }
@keyframes flash { 0% { background: rgba(255,71,87,.35); } 100% { background: var(--card); } }
.spinner { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 3px solid var(--line); border-top-color: var(--green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.waiting-text { font-size: 15px; font-weight: 500; }
.dots::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.since { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- rounds ---- */
.rounds-head { display: flex; justify-content: space-between; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 14px 20px 8px; }
h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); font-size: 12px; }
.muted a { color: var(--muted); }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 1; background: var(--card);
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  padding: 8px 20px; border-bottom: 1px solid var(--line); font-weight: 600;
}
td { padding: 9px 20px; border-bottom: 1px solid rgba(37,48,73,.6); font-family: var(--mono); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.point { font-weight: 700; font-size: 15px; }
td.hash { color: var(--muted); font-size: 12px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
tr.new td { animation: rowIn .8s ease; }
@keyframes rowIn { from { background: rgba(46,213,115,.25); } to { background: transparent; } }
tr.backfill td { opacity: .75; }
.bf { font-size: 11px; color: var(--gold); border: 1px solid rgba(255,192,72,.4); border-radius: 4px; padding: 1px 6px; }
.low { color: var(--red); } .mid { color: var(--green); } .high { color: var(--gold); }
.empty td { text-align: center; color: var(--muted); padding: 24px; font-family: inherit; }

@media (max-width: 600px) {
  .app { padding: 0 10px; }
  thead th, td { padding-left: 12px; padding-right: 12px; }
  td.hash { max-width: 110px; }
  .since { display: none; }
}