:root {
  --bg:#f5f6fa;          /* jasne tło całej strony */
  --card:#ffffff;        /* karty białe */
  --muted:#6b7280;       /* szarość tekstów pomocniczych */
  --acc:#0b5cff;         /* kolor akcentu (niebieski) */
  --border:#e5e7eb;      /* obramowania */
}

*{box-sizing:border-box}
body {
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,Helvetica;
  background:var(--bg);
  color:#111827;         /* ciemny tekst na jasnym tle */
}
a {
  color:var(--acc);
  text-decoration:none;
}
.container {
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.input, select, textarea {
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
}
.row {display:grid;gap:12px}
.row.cols-2{grid-template-columns:repeat(2,1fr)}
.row.cols-3{grid-template-columns:repeat(3,1fr)}
.btn-row .row.cols-5 {
  display: grid !important;
  grid-template-columns: 24px 1.5fr 1.2fr 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Uchwyt drag&drop */
.drag-handle {
  display:inline-block;
  width:24px;
  text-align:center;
  font-size:18px;
  line-height:1;
  cursor:grab;
  user-select:none;
  color:#9ca3af; /* lekko wyszarzony */
}
.drag-handle:active { cursor:grabbing; }

.btn {
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f9fafb;
  color:#111827;
  cursor:pointer;
}
.btn.primary {
  background:var(--acc);
  border-color:var(--acc);
  color:#fff;
}
.badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  border:1px solid var(--border);
}
.list {display:grid;gap:12px}
.flex {display:flex;gap:12px;align-items:center}
.justify-between {justify-content:space-between}
.small {color:var(--muted);font-size:.9rem}
hr {border-color:var(--border);margin:16px 0}
nav.card {position:sticky;top:0;z-index:10}
.hidden {display:none}
table {
  width:100%;
  border-collapse:collapse;
}
td,th {
  padding:8px;
  border-bottom:1px solid var(--border);
  text-align:left;
}