/* 808 Pay: brand kit v1.4 colours. Sites can override any of these variables. */
:root {
  --p8-black: #14110e; --p8-sun: #e58a1f; --p8-ember: #c96a14; --p8-red: #d0462a;
  --p8-yellow: #ebc215; --p8-white: #f3efe6; --p8-steel: #7d9cb0; --p8-steel-deep: #4f6a7b;
  --p8-mono: "Space Mono", "Courier New", monospace; --p8-body: Inter, Helvetica, Arial, sans-serif;
  --p8-display: Jost, Helvetica, Arial, sans-serif;
}
.p8pay-form { display: inline-block; margin: 0; }
.p8pay-btn, .p8-btn {
  display: inline-block; font: 700 14px/1 var(--p8-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--p8-sun); color: var(--p8-black); border: 2px solid var(--p8-black); padding: 12px 18px;
  box-shadow: 4px 4px 0 var(--p8-black); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s;
}
.p8pay-btn:hover, .p8-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--p8-black); }
.p8pay-btn:active, .p8-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--p8-black); }
.p8pay-btn:focus-visible, .p8-chip:focus-visible { outline: 3px solid var(--p8-red); outline-offset: 2px; }
.p8pay-tip { background: var(--p8-yellow); }
.p8pay-offset .p8pay-btn { background: var(--p8-white); }
.p8pay-portal { font: 13px var(--p8-mono); color: inherit; }

.p8-offset { font-family: var(--p8-body); background: var(--p8-black); color: var(--p8-white); padding: 22px; border: 2px solid var(--p8-sun); max-width: 520px; }
.p8-offset h3 { font: 300 26px/1.15 var(--p8-display); margin: 4px 0 14px; }
.p8-kicker { font: 700 11px var(--p8-mono); letter-spacing: .14em; color: var(--p8-sun); margin: 0; }
.p8-lbl { display: block; font: 12px var(--p8-mono); color: var(--p8-steel); margin: 10px 0; }
.p8-lbl input, .p8-lbl select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: 15px var(--p8-body);
  background: #221d18; color: var(--p8-white); border: 1px solid var(--p8-steel-deep); padding: 9px 10px; }
.p8-est { font-size: 15px; margin: 12px 0; }
.p8-est a { color: var(--p8-sun); }
.p8-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.p8-chip { font: 700 13px var(--p8-mono); background: transparent; color: var(--p8-white); border: 1px solid var(--p8-steel); padding: 8px 12px; cursor: pointer; }
.p8-chip.on { background: var(--p8-sun); color: var(--p8-black); border-color: var(--p8-sun); }
.p8-small { font-size: 12px; line-height: 1.5; color: var(--p8-steel); }
.p8-fine b { color: var(--p8-white); }

/* pay.the808.org pages */
.p8-page { margin: 0; min-height: 100vh; background: var(--p8-black); color: var(--p8-white); font-family: var(--p8-body); display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.p8-card { max-width: 560px; border: 2px solid var(--p8-sun); padding: 32px; background: #1b1713; }
.p8-card h1 { font: 300 34px/1.1 var(--p8-display); margin: 8px 0 16px; }
.p8-card a:not(.p8-btn) { color: var(--p8-sun); }
.p8-foot { margin-top: 28px; font: 11px var(--p8-mono); color: var(--p8-steel); }
@media (prefers-reduced-motion: reduce) { .p8pay-btn, .p8-btn { transition: none; } }

/* DASHBOARD header button: avatar beside the word (never overlapping) */
.p8pay-dash { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--p8-red); color: var(--p8-black);
  border: 2px solid var(--p8-black); box-shadow: 3px 3px 0 var(--p8-black); font: 700 13px var(--p8-mono); letter-spacing: .06em; text-decoration: none; }
.p8pay-dash img, .p8pay-dash svg { position: static; width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.p8pay-dash-tag { font-size: 10px; background: var(--p8-black); color: var(--p8-sun); padding: 2px 5px; }