/* The look of the consent page and the Expense UI. The only copy of the colours and the base shapes.
   The gateway embeds this file and the UI serves it. Page-specific rules live beside each page. */
:root {
  --bg: #f4f1ea; --card: #fffdf8; --ink: #1d2320; --muted: #5d665f; --line: #d9d3c4;
  --accent: #1f5d50; --accent-ink: #ffffff; --accent-soft: #e3efe9; --warn: #8a3b12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151a18; --card: #1d2421; --ink: #e8ece8; --muted: #9aa59d; --line: #33403b;
    --accent: #5fb89f; --accent-ink: #0f1613; --accent-soft: #23342e; --warn: #e0a37a;
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
main {
  width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 28px; box-shadow: 0 1px 0 var(--line);
}
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; font-weight: 650; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); font-size: 14px; }
.who { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin: 0 0 24px; }
.who strong { font-weight: 650; }
.who code { font-size: 13px; color: var(--muted); word-break: break-all; }
button {
  font: inherit; font-weight: 650; border-radius: 10px; padding: 12px 18px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
}
button.allow { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }