/* One centred column of brick-like panels, chunky display type, and gold reserved for pay rates. */
:root {
  color-scheme: light;
  --bg: #eef1f6; --surface: #ffffff; --surface2: #f5f7fb; --ink: #0f1430; --muted: #5b6380; --line: #dce1ec;
  --accent: #1f5eff; --accent-ink: #ffffff; --accent-soft: #e3ebff;
  --gold: #ffc21a; --gold-ink: #3a2a00;
  --good: #12894b; --good-soft: #dff5e8; --warn: #9a5b00; --warn-soft: #fff0d1; --bad: #c22f3d; --bad-soft: #fde4e6;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0e1a; --surface: #141929; --surface2: #1a2034; --ink: #edf0fa; --muted: #9aa3c0; --line: #283049;
    --accent: #6c97ff; --accent-ink: #081030; --accent-soft: #1c2850;
    --gold: #ffcf40; --gold-ink: #2b1f00;
    --good: #4fd08a; --good-soft: #12301f; --warn: #f2b54a; --warn-soft: #33270c; --bad: #ff7d88; --bad-soft: #3a161b;
  }
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body) }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -.01em }
h1 { font-size: 30px } h2 { font-size: 20px } h3 { font-size: 16px; font-weight: 600 }
p { margin: 0 }
a { color: var(--accent) }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.muted { color: var(--muted) } .small { font-size: 13px }
.num { font-variant-numeric: tabular-nums }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px 16px }
.logo { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 8px }
.logo i { width: 22px; height: 22px; border-radius: 6px; background-color: var(--accent);
  background-image: radial-gradient(circle, var(--accent-ink) 0 3.5px, transparent 4px); background-size: 11px 11px }
.top nav { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap }
.top nav a { padding: 7px 13px; border-radius: 999px; font-weight: 600; color: var(--muted); text-decoration: none }
.top nav a[aria-current="page"] { background: var(--ink); color: var(--surface) }
.badge { background: var(--bad); color: var(--surface); border-radius: 999px; font: 700 11px var(--body); padding: 1px 6px; margin-left: 4px; vertical-align: middle }
.account { display: flex; align-items: center; gap: 8px }
@media (max-width: 820px) {
  .top nav { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto }
  .top nav a { padding: 7px 10px; white-space: nowrap }
}

.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--line); border-radius: 18px; padding: 3px }
.seg a, .seg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--muted); text-decoration: none }
.seg [aria-pressed="true"], .seg [aria-current="true"] { background: var(--accent); color: var(--accent-ink) }

.devbar { background: var(--warn-soft); color: var(--warn); font-size: 13px; padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center }
.devbar button { border: 1px solid currentColor; background: none; color: inherit; border-radius: 999px; padding: 3px 11px; font-weight: 600 }

.flash { max-width: 868px; margin: 16px auto 0; width: calc(100% - 32px); padding: 10px 14px; border-radius: 10px; font-weight: 600 }
.flash.ok { background: var(--good-soft); color: var(--good) }
.flash.error { background: var(--bad-soft); color: var(--bad) }

/* Page layout */
main { max-width: 900px; margin: 0 auto; padding: 28px 16px 48px; display: flex; flex-direction: column; gap: 20px }
.foot { max-width: 900px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 12px; text-align: center;
  display: flex; flex-direction: column; gap: 8px }
.foot nav { display: flex; justify-content: center; gap: 18px; font-size: 13px; font-weight: 600 }
.foot a { color: var(--muted) }

/* Long-form pages: terms, privacy, contact */
.prose { padding: 28px; display: flex; flex-direction: column; gap: 12px; line-height: 1.6 }
.prose > * { max-width: 70ch }
.prose h2 { margin-top: 10px }
.prose ul { display: flex; flex-direction: column; gap: 6px }
.head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: end }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0 }
.panel.narrow { width: min(440px, 100%); margin: 24px auto 0 }
.stack { display: flex; flex-direction: column; gap: 12px }
.stack.tight { gap: 6px }
.stack.center { align-items: center }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.row.between { justify-content: space-between }
.row.end { justify-content: flex-end; flex-wrap: nowrap }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) }
@media (max-width: 720px) { .cols { grid-template-columns: minmax(0, 1fr) } }
.back { font-weight: 600; text-decoration: none }

.hero { background: var(--accent-soft); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.hero p { max-width: 60ch }
.btn { display: inline-block; border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 700; background: var(--ink); color: var(--surface); text-decoration: none }
.btn.blue { background: var(--accent); color: var(--accent-ink) }
.btn.ghost { background: var(--surface2); color: var(--ink); border: 1px solid var(--line) }
.btn.sm { padding: 5px 12px; font-size: 13px }

.tile b, .big { display: block; font: 800 26px var(--display); font-variant-numeric: tabular-nums }
.tile span { color: var(--muted); font-size: 13px }

.todo, .steps { margin: 0; padding: 0; display: flex; flex-direction: column }
.todo { list-style: none }
.todo li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line) }
.todo a { font-weight: 600; color: var(--ink); text-decoration: none }
.dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none }
.done .dot { background: var(--good); border-color: var(--good) }
.done { color: var(--muted); text-decoration: line-through }
.steps { padding-left: 20px; gap: 6px }

/* Campaigns */
.camp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none }
.camp:hover { border-color: var(--accent) }
.camp-head { display: flex; gap: 10px; align-items: center; min-width: 0 }
.camp-head.plain { color: var(--ink); text-decoration: none }
.camp-head > div:last-child { min-width: 0 }
.camp-head b, .camp-head .small { display: block; overflow-wrap: anywhere }
.camp-foot { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin-top: auto }

/* Game tiles are studded bricks. The hue comes from the campaign's id. */
.thumb { --h: 0; width: 42px; height: 42px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font: 800 20px var(--display); color: #fff; background-color: hsl(var(--h) 65% 42%);
  background-image: radial-gradient(circle, hsl(var(--h) 65% 52%) 0 4px, transparent 4.5px); background-size: 14px 14px }
.h1 { --h: 30 } .h2 { --h: 150 } .h3 { --h: 265 } .h4 { --h: 340 } .h5 { --h: 205 } .h6 { --h: 12 }
.h7 { --h: 95 } .h8 { --h: 180 } .h9 { --h: 290 } .h10 { --h: 235 } .h11 { --h: 320 }

.rate { flex: none; background: var(--gold); color: var(--gold-ink); border-radius: 10px; padding: 4px 10px; text-align: right; line-height: 1.15; white-space: nowrap }
.rate strong { display: block; font: 800 19px var(--display); font-variant-numeric: tabular-nums }
.rate small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.chips { display: flex; flex-wrap: wrap; gap: 5px }
.chip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); white-space: nowrap }

progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--surface2); overflow: hidden }
progress::-webkit-progress-bar { background: var(--surface2) }
progress::-webkit-progress-value { background: var(--accent) }
progress::-moz-progress-bar { background: var(--accent) }

.pill { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap }
.pill.pending, .pill.draft, .pill.processing, .pill.unverified { background: var(--warn-soft); color: var(--warn) }
.pill.approved, .pill.active, .pill.paid, .pill.connected { background: var(--good-soft); color: var(--good) }
.pill.rejected, .pill.failed { background: var(--bad-soft); color: var(--bad) }
.pill.ended { background: var(--surface2); color: var(--muted) }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px }
.facts div { background: var(--surface2); border-radius: 10px; padding: 8px 10px }
.facts b { display: block; font-variant-numeric: tabular-nums }
.facts span { font-size: 12px; color: var(--muted) }
.panel ul { margin: 0; padding-left: 20px }

/* Connected channels */
.panel ul.accounts { list-style: none; padding: 0; display: flex; flex-direction: column }
.accounts li { padding: 12px 0; border-top: 1px solid var(--line) }
.accounts code { align-self: flex-start; font: 600 15px ui-monospace, Consolas, monospace; background: var(--surface2);
  border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; user-select: all }
.row.end-aligned { align-items: flex-end }
.grow { flex: 1 1 240px }
.fund { background: var(--accent-soft); border-color: transparent; align-items: flex-start }

/* Tables */
.scroll { overflow-x: auto }
table { border-collapse: collapse; width: 100%; min-width: 540px }
th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 10px }
td { padding: 10px; border-top: 1px solid var(--line); vertical-align: middle }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums }
td.wide { min-width: 150px }
.url { color: var(--muted); font-size: 13px; overflow-wrap: anywhere }

/* Forms */
form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; min-width: 0 }
input[type=text], input[type=url], input[type=email], input[type=password], select, textarea {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; width: 100%; font-weight: 400; font-size: 15px }
textarea { min-height: 84px; resize: vertical }
.hint { font-weight: 400 }
fieldset.checks { border: 0; margin: 0; padding: 0 }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px }
.checks legend { font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 4px }
form .checks label { flex-direction: row; align-items: center; gap: 6px; font-size: 15px; font-weight: 500 }
.err { color: var(--bad); font-weight: 600; font-size: 13px }
.note { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px }
.empty { text-align: center; padding: 28px 10px; color: var(--muted) }