:root {
  --qd-accent: #1f5f4a; --qd-accent-hover: #174a39; --qd-accent-tint: #e4efe9; --qd-bg: #f5f4f0; --qd-ink: #1c1f1d;
  --qd-surface: #fff; --qd-border: #dcdad2; --qd-border-soft: #ecebe5; --qd-input-border: #8a877b; --qd-hover: #f0eee7;
  --qd-muted: #555a57; --qd-code-bg: #f7f6f2; --qd-focus: #0b57d0;
  --qd-warn-bg: #fff8e1; --qd-warn-border: #e6c85a; --qd-warn-ink: #6b4a00; --qd-warn-edge: #9a6700; --qd-warn-chip: #fff1c9;
  --qd-danger: #8c1d18; --qd-danger-bg: #fdecea; --qd-danger-border: #d9534f; --qd-danger-solid: #b3261e; --qd-danger-chip: #fadbd8;
  --qd-ok-bg: #e8f3ee; --qd-ok-border: #8cc3ab; --qd-ok-chip: #d9efe3; --qd-ok-ink: #145236;
  --qd-info-chip: #e3e8f4; --qd-info-ink: #243a73; --qd-neutral-chip: #e4e2da;
}
/* the vendored CSS defines its variables on .sd-root-modern, so ours must sit on the same selector to win */
.sd-root-modern, .sd-theme-root {
  --sjs2-color-project-brand-600: var(--qd-accent);
  /* SurveyJS theme: the vendored survey-core.min.css reads these, so its primary colour matches the accent */
  --sjs-primary-backcolor: var(--qd-accent); --sjs-primary-backcolor-light: var(--qd-accent-tint); --sjs-primary-backcolor-dark: var(--qd-accent-hover);
  --sjs-primary-forecolor: #fff; --sjs-primary-forecolor-light: #fff;
  --sjs-general-backcolor-dim: var(--qd-bg); --sjs-general-forecolor: var(--qd-ink); --sjs-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sjs-border-default: var(--qd-input-border); --sjs-special-red: var(--qd-danger-solid);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--qd-bg); color: var(--qd-ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display: flex; align-items: center; gap: 12px; padding: 14px max(16px, calc((100% - 760px) / 2)); background: var(--qd-surface); border-bottom: 1px solid var(--qd-border); }
.logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--qd-accent); color: #fff; font-weight: 700; }
.org { font-weight: 600; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 8px; }
h1 { font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-size: 1.15rem; }
dl { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 4px 16px; background: var(--qd-surface); border: 1px solid var(--qd-border); border-radius: 8px; padding: 12px 16px; }
dt { color: var(--qd-muted); } dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.notice { background: var(--qd-warn-bg); border: 1px solid var(--qd-warn-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.notice.error { background: var(--qd-danger-bg); border-color: var(--qd-danger-border); }
.qd-missing { outline: 2px solid var(--qd-warn-edge); outline-offset: 4px; border-radius: 6px; }
.qd-missing::before { content: "Do uzupełnienia"; display: block; font-size: .8rem; font-weight: 600; color: var(--qd-warn-ink); }
.contact { padding: 10px 14px; background: var(--qd-surface); border: 1px solid var(--qd-border); border-radius: 8px; }
.contact a { color: var(--qd-accent); }
footer { max-width: 760px; margin: 0 auto; padding: 8px 16px 32px; color: var(--qd-muted); font-size: .8rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--qd-surface); padding: 6px 10px; z-index: 10; }
/* two-tone focus ring: the white inner ring keeps the blue visible on the green buttons */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--qd-focus); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 480px) { main { padding-top: 16px; } h1 { font-size: 1.35rem; } dl { grid-template-columns: 1fr; } }