:root {
  --bg: #f4f6f8; --surface: #ffffff; --text: #14212b; --muted: #55636e; --accent: #0b5f8a;
  --ok: #1d7a3d; --error: #b3261e; --warn: #8a5a00; --border: #d5dde3; --highlight: #e8f3fa;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f171d; --surface: #17222a; --text: #e6edf2; --muted: #9fb0bc; --accent: #5cb3e0; --ok: #6fcf8f; --error: #ff8a80; --warn: #e6b45c; --border: #2a3944; --highlight: #14303f; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 3; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--border); z-index: 3; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { text-align: center; padding: 12px 2px; min-height: 52px; font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.bottom-nav a.active { color: var(--accent); font-weight: 700; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; }
.tabs a { white-space: nowrap; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--surface); }
.tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.card, .panel { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 12px 0; color: var(--text); text-decoration: none; }
.card.urgent { border-color: var(--error); }
.panel.highlight { background: var(--highlight); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin: 0 0 4px; } h3 { font-size: 1.05rem; margin: 0 0 8px; } h4 { margin: 12px 0 4px; }
label.field { display: block; margin: 8px 0; }
label.field > span { display: block; color: var(--muted); margin-bottom: 2px; }
label.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
input, select, textarea, button { font: inherit; width: 100%; min-height: 48px; margin: 4px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
input[type="checkbox"] { width: 24px; min-height: 24px; flex: none; }
button { cursor: pointer; background: var(--bg); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.danger { background: var(--error); color: #fff; border-color: var(--error); }
button.link { width: auto; min-height: 40px; border: 0; background: none; color: var(--accent); padding: 4px 6px; }
button.mic { font-weight: 600; }
.button-link { display: inline-block; margin-left: 8px; color: var(--accent); font-weight: 600; }
.wide { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row > button { flex: 1 1 140px; }
.stack > button { display: block; }
.small { font-size: 0.875rem; } .muted { color: var(--muted); }
.ok { color: var(--ok); } .error { color: var(--error); } .warn { color: var(--warn); }
.notice { background: var(--highlight); border-left: 4px solid var(--accent); padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; }
.big, .big-link { font-size: 1.25rem; font-weight: 700; word-break: break-all; }
.reply { border-left: 3px solid var(--ok); padding-left: 8px; }
.step { border-top: 1px solid var(--border); padding: 8px 0; }
.unit { margin: 8px 0; }
.ladder li.current { font-weight: 700; color: var(--accent); }
.ladder li.done { color: var(--muted); }
progress { width: 100%; height: 14px; }
.update-banner { background: var(--warn); color: #fff; padding: 8px 16px; }
.update-banner .link { color: #fff; text-decoration: underline; }
.toast { position: fixed; left: 16px; right: 16px; bottom: 72px; padding: 12px 14px; border-radius: 8px; background: var(--text); color: var(--bg); z-index: 10; }
.toast-error { background: var(--error); color: #fff; } .toast-ok { background: var(--ok); color: #fff; } .toast-warn { background: var(--warn); color: #fff; }
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.dialog { background: var(--surface); width: 100%; max-width: 560px; border-radius: 14px 14px 0 0; padding: 16px; }
.client-mode { max-width: 920px; padding-bottom: 32px; }
.client-mode table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.95rem; }
.client-mode th, .client-mode td { text-align: left; border-bottom: 1px solid var(--border); padding: 8px 4px; vertical-align: top; }
.statement { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
canvas.signature { width: 100%; height: auto; background: #fff; border: 2px dashed var(--border); border-radius: 8px; touch-action: none; }
.login button { margin-top: 8px; }
@media (max-width: 420px) { .client-mode th:nth-child(5), .client-mode td:nth-child(5) { display: none; } }

/* Zmiana ustaleń: obowiązujące i proponowane warunki obok siebie (review PR 82, R3). */
table.compare { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.95rem; }
table.compare th, table.compare td { border-bottom: 1px solid #d0d7de; padding: 0.35rem; text-align: left; vertical-align: top; }
table.compare tr.changed td { background: #fff4d6; }