:root{ --bg:#f6f7fb; --card:#fff; /* --primary:#2fb344; (stary kolor, kontrast ~2.75:1 z #fff) */ --primary:#1d7a2d; /* nowy kolor, kontrast ~5.45:1 z #fff (WCAG AA) */ --text:#222; --muted:#6b7280; --border:#e5e7eb; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: Inter, system-ui, Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
.wrap{ max-width:1100px; margin:24px auto; padding:0 16px; }
h1{ font-size:22px; margin:0 0 14px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:14px; }
.shipment{ border:1px dashed var(--border); border-radius:12px; padding:12px; margin-bottom:12px; background:#fff; position:relative; }
.remove{ position:absolute; right:10px; top:10px; border:none; background:#fee2e2; color:#991b1b; font-weight:700; border-radius:8px; padding:4px 8px; cursor:pointer; }
.grid{ display:grid; grid-template-columns: 1fr 1fr 360px; gap:12px; }
.col{ display:flex; flex-direction:column; gap:6px; }
textarea{ width:100%; min-height:120px; resize:vertical; border:1px solid var(--border); border-radius:10px; padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; }
input[type="text"], input[type="number"]{ width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
label{ font-weight:700; color:#111827; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.toolbar-right{ display:flex; gap:10px; align-items:center; }
.btn{ appearance:none; border:1px solid var(--border); background:var(--card); padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; line-height:1.2; }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover{ background:#186425; }
.btn.primary:active{ background:#145221; }
.btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.btn.primary:focus-visible{ outline:3px solid #0f3a17; outline-offset:2px; }
/* Article styles */
.article{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; margin:16px 0 24px; }
.article h2{ font-size:20px; margin:0 0 10px; }
.article h3{ font-size:18px; margin:18px 0 8px; }
.article p{ line-height:1.6; margin:8px 0; }
.article ul{ margin:8px 0 8px 18px; }