/* OpenBI Billing's pages: system fonts only (no font is fetched from anywhere), light and dark */
:root {
  --bg: #f5f5f5; --card: #ffffff; --text: #242424; --muted: #616161; --line: #d1d1d1;
  --accent: #0f6cbd; --accent-text: #ffffff; --error: #b10e1c; --key-bg: #f0f6fc;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1f1f1f; --card: #292929; --text: #f0f0f0; --muted: #adadad; --line: #474747;
    --accent: #479ef5; --accent-text: #0b0b0b; --error: #f1707b; --key-bg: #1b2a3a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
main.card { max-width: 560px; margin: 32px auto; padding: 24px 28px; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 600px) { main.card { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 20px 16px; } }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
p { margin: 8px 0; }
.muted { color: var(--muted); font-size: 13px; }
.lang { float: right; margin: 0; font-size: 13px; }
a { color: var(--accent); }
form label { display: block; margin: 12px 0; }
form label > span { display: block; font-weight: 600; margin-bottom: 4px; }
form label.choice { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: 400; }
form label.choice > span { font-weight: 400; margin: 0; }
fieldset { border: 0; padding: 0; margin: 12px 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
input[type=text], input:not([type]), input[type=email], input[type=number] {
  width: 100%; padding: 7px 10px; font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.offer { font-size: 13px; margin: 0 0 8px 26px; }
.summary { padding: 10px 12px; background: var(--key-bg); border-radius: 4px; }
.consent { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; }
.error { color: var(--error); }
button { margin-top: 12px; padding: 8px 20px; font: inherit; font-weight: 600; color: var(--accent-text);
  background: var(--accent); border: 0; border-radius: 4px; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.key { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 16px; padding: 10px 12px;
  background: var(--key-bg); border-radius: 4px; overflow-wrap: anywhere; user-select: all; }
.domain { margin: 12px 0; }
.domain label { margin: 0; }
.domain .help { margin: 0 0 6px; }
.domainrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.domainrow input { flex: 1 1 200px; width: auto; min-width: 0; }
button.ghost { margin-top: 0; padding: 7px 12px; color: var(--accent); background: transparent; border: 1px solid var(--accent); }
.derived { font-size: 13px; min-height: 20px; margin: 4px 0; overflow-wrap: anywhere; }
.derived.bad { color: var(--error); }
.madeup { margin: 4px 0 0; }
footer { max-width: 560px; margin: 0 auto 32px; padding: 0 16px; color: var(--muted); font-size: 12px; }
footer span { display: block; }