*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1117;
  color: #e2e8f0;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.container { max-width: 860px; margin: 0 auto; }
.container.narrow { max-width: 420px; margin: 8vh auto; text-align: center; }

h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
h1 .symbol { color: #60a5fa; font-weight: 400; font-size: 1rem; margin-left: .5rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }

.banner {
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: .9rem;
}
.banner.warn { background: #422006; border: 1px solid #92400e; color: #fcd34d; }
.banner a { color: #fbbf24; }

.card {
  background: #1e2330;
  border: 1px solid #2d3748;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.row { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid #2d3748; }
.row:last-child { border-bottom: none; }
.label { color: #94a3b8; font-size: .875rem; }
.value { font-weight: 600; font-size: .9rem; }

.state-IDLE         { color: #94a3b8; }
.state-PENDING_LONG { color: #60a5fa; }
.state-PENDING_SHORT{ color: #f87171; }
.state-LONG         { color: #34d399; }
.state-SHORT        { color: #f87171; }

table { width: 100%; border-collapse: collapse; font-size: .82rem; }
thead th { text-align: left; padding: .5rem .75rem; color: #64748b; font-weight: 600; border-bottom: 1px solid #2d3748; }
tbody td { padding: .45rem .75rem; border-bottom: 1px solid #1a2035; vertical-align: top; }
tbody tr:hover td { background: #1a2035; }

.mono  { font-family: "SF Mono", "Fira Code", monospace; }
.small { font-size: .78rem; color: #64748b; }

.btn {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  padding: .75rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 1rem;
}
.btn:hover { background: #1d4ed8; }

.footer { margin-top: 2rem; font-size: .8rem; color: #475569; }
.footer a { color: #60a5fa; text-decoration: none; }