RAX7

Верхний бордер сделай через псевдоэлементы before/after

У тебя инпут и кнопка inline-block элементы, поэтому между ними есть небольшой пробел.
https://htmlacademy.ru/blog/21-fighting-the-space-...

Текст не пропадает, просто рисуется красный текст на красном фоне.
https://codepen.io/anon/pen/NmmeEx
Есть еще полезные методы save и restore. Могут пригодиться.

.btn-button {
  padding: 18px;
}

Установки > основные > палитра цветов > adobe

В моб. и планшетной версии кружочки меньшего диаметра

Если у svg задать viewBox, то всё будет пропорционально масштабироваться, но на мобилках будет очень мелко. Можно на js пересчитывать размер и положение объектов в зависимости от ширины экрана.

Галочку "масштабировать углы" поставь.

Допускается ли использования двух fill в одном контуре ?

думаю нет, но можно сделать вот так

Опытным путем было установлено что сафари игнорирует CSS свойство color, если в качестве значения используется rgb() c дробными значениями.

color: rgb(37.916666666666664, 216.5, 16.583333333333332) /* не работает в Safari */

Чтобы все заработало значения для цветовых каналов нужно округлить до целых, например так:

const toStr = ({r, g, b}) => `rgb(${parseInt(r)}, ${parseInt(g)}, ${parseInt(b)})`;

Это можно сделать и без всяких слайдеров

https://codepen.io/anon/pen/VNzBzZ
https://developer.mozilla.org/ru/docs/Web/CSS/Gene...