/* Ustawienia → Kolory: próbki palety przy każdej opcji */
.kol-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 18px; align-items: start; }
.kol-spis { margin-bottom: 20px; }
.kol-opcja { gap: 16px; }
.kol-wybor { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.kol-probka { width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--k) 70%, transparent); transition: transform .12s var(--ease), box-shadow .12s; }
.kol-probka:hover { transform: scale(1.15); }
.kol-probka[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--k); background: var(--k); }
@media (max-width: 760px) {
  .kol-siatka { grid-template-columns: minmax(0, 1fr); }
  .kol-opcja { flex-wrap: wrap; }
  .kol-wybor { justify-content: flex-start; width: 100%; }
  .kol-probka { width: 26px; height: 26px; }
}

/* Ustawienia → Konto: klucze dostępu (plan 71) */
.klucze-opis { margin: -2px 0 12px; }
.klucze .rzad { gap: 14px; }
.klucze .rzad form { flex: none; }
.klucz-usun { min-height: 44px; padding: 8px 14px; }
.klucz-dodaj { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 14px 0 6px; }
.klucz-nazwa { display: grid; gap: 4px; flex: 1 1 220px; font-size: 13px; color: var(--muted); }
.klucz-nazwa input { width: 100%; min-height: 44px; }
.klucz-dodaj .przycisk { min-height: 44px; }
.klucz-dodaj .przycisk[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 760px) {
  .klucz-dodaj .przycisk { width: 100%; }
}
/* `hidden` ma wygrywać z display: flex formularza i akapitu (JS odkrywa jedno z nich po sprawdzeniu przeglądarki). */
.klucz-dodaj[hidden], .klucz-brak[hidden] { display: none; }