/* ═══════════════════════════════════════════════════════════════════════════
   NEXO UI — одна система на все три приложения.

   ─── Что изменилось против прошлой версии и почему ─────────────────────────

   Прежняя версия копировала ПРИЗНАКИ Apple: большие скругления, белые
   карточки, стекло. Признаки скопировались, ощущение — нет. Потому что у
   Apple первично не это: сначала иерархия, потом гармония, и только потом
   внешний вид. Здесь исправлено ровно это.

   1. ОДИН РАДИУС НА ВСЁ — не система, а её отсутствие. Радиус зависит от
      массы: большая панель 30, карточка 22, кнопка 16, мелкий бейдж 12.
      Когда всё скруглено одинаково, экран однообразен и глазу не за что
      зацепиться.

   2. ТЕНЬ ПОЧТИ НЕЗАМЕТНА. Было размытие 25–30 — карточка «висела». Стало
      blur 8 при .06, а чаще вовсе без тени: поверхность отделяет ВОЗДУХ и
      волосяная линия, а не подложка.

   3. МАТЕРИАЛ ВМЕСТО ПЛОСКОСТИ. Светлое ребро сверху rgba(255,255,255,.9),
      чуть темнее снизу rgba(0,0,0,.05). Сознательно это не читается, но
      именно из-за этого карточка перестаёт быть картинкой и становится
      листом.

   4. ФОН НЕ БЕЛЫЙ. Чистый #fff выглядит дёшево и слепит на длинном чтении.
      #F7F8FC почти неотличим на глаз, но экран становится мягче, а белые
      карточки на нём наконец видно как отдельные объекты.

   5. ЦВЕТ — ПОСЛЕДНИЙ СЛОЙ. Акцент живёт на активной вкладке, счётчике и
      полосе. Большие поверхности он не красит: цветная подложка под текстом
      13px утомляет за пару экранов.

   6. КОНТРАСТ ВЕСОВ ВМЕСТО СПЛОШНОГО ПОЛУЖИРНОГО: 700 → 600 → 400. Глубина
      берётся отсюда, а не из теней.

   7. ТРЕКИНГ ПОЧТИ НЕ ТРОГАЕМ. У системного шрифта межбуквенные расстояния
      уже выверены под каждый кегль; ручная правка их только портит. Осталась
      лёгкая отрицательная поджимка на крупных заголовках — там, где Apple
      делает то же самое.

   Значения --ink/--soft/--glass/--cta приходят из темы бизнеса
   (client_new.css). Здесь мы строим НАД ними нейтральный слой: тема решает,
   какого цвета витрина клиента, а не читается ли текст в панели владельца.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ширина считается по внешней рамке — иначе поле шире своей колонки.

   Сброса не было вовсе: он жил внутри одного экрана инлайном и уехал вместе
   с ним. По умолчанию padding прибавляется к width, поэтому input с
   width:100% и полями 13+10 занимал на 23px больше своей ячейки. В сетке
   «с» и «до» правое поле налезало на левое, и два поля времени читались
   одним слипшимся прямоугольником. */
*,*::before,*::after{box-sizing:border-box}

:root{
  /* Только системный шрифт — он единственный, у которого кернинг уже
     настроен под интерфейсные кегли. */
  --n-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
           system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;

  /* ── Поверхности ────────────────────────────────────────────────────── */
  --n-bg:#f7f8fc;
  --n-surface:255 255 255;
  --n-surface-a:1;
  --n-surface-strong:1;
  --n-rim:0 0 0;
  --n-shadow:15 23 42;

  /* Свет и тень материала: верхняя грань светлее, нижняя темнее. */
  --n-edge-top:rgb(255 255 255 / .9);
  --n-edge-bot:rgb(0 0 0 / .05);
  --n-line:rgb(0 0 0 / .07);

  /* ── Текст ──────────────────────────────────────────────────────────── */
  --n-ink:#18181b;
  --n-soft:#72727a;
  --n-faint:#a1a1a6;
  --n-hair:rgb(0 0 0 / .07);

  /* ── Цвет ───────────────────────────────────────────────────────────── */
  /* Не #007AFF: он читается как «системная кнопка iOS», а не как свой
     продукт. Собственный сине-фиолетовый узнаётся и не спорит с темами. */
  --n-accent:#6e84ff;
  --n-accent-2:#8f9dff;
  --n-ok:#22a06b;
  --n-warn:#b26a10;
  --n-err:#e0453a;

  /* Пастель для плиток: цвет виден, только если присматриваться. Именно
     поэтому он выглядит дорого, а не как раскраска. */
  --n-tint-book:#f5f1ff;
  --n-tint-people:#eef6ff;
  --n-tint-ask:#fff9eb;
  --n-tint-time:#eefdf7;

  /* Главное действие — почти чёрная пилюля: сильнее любого цвета и не
     спорит с акцентом, который занят подсветкой состояния. */
  --n-act:#18181b;
  --n-act-ink:#ffffff;

  /* ── Семейство форм ─────────────────────────────────────────────────── */
  /* Форма — общая с клиентским приложением. Панель и витрина открываются
     одним человеком подряд, и разная геометрия читается как два разных
     продукта: там пилюли и мягкие карточки, здесь были прямоугольники с
     радиусом 16. Скругления карточек чуть меньше клиентских (26 против
     28): в панели на экране вдвое больше строк, и на плотном списке
     слишком круглые углы превращаются в пузыри. */
  --n-r-panel:30px;
  --n-r-card:26px;
  --n-r-btn:999px;
  --n-r-field:18px;
  --n-r-chip:999px;
  --n-r-pill:999px;

  /* ── Ритм ───────────────────────────────────────────────────────────── */
  /* Одинаковые отступы делают экран таблицей. Разные — страницей. */
  --n-gap-xl:48px;
  --n-gap-l:32px;
  --n-gap-m:24px;
  --n-gap-s:16px;
  --n-gap-xs:12px;

  --n-tap:cubic-bezier(.2,.9,.25,1);
  --n-ease:cubic-bezier(.4,0,.6,1);
  /* Пружина: именно она, а не скругления, даёт ощущение, что интерфейс
     отвечает на прикосновение. */
  --n-spring:cubic-bezier(.34,1.56,.64,1);

  --n-blur:blur(24px) saturate(1.15);
  --n-lift:0 1px 2px rgb(var(--n-shadow) / .04),
           0 8px 20px -12px rgb(var(--n-shadow) / .10);
}

/* ── Фон ──────────────────────────────────────────────────────────────── */
.n-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--n-bg)}
.n-bg::before{content:none}
/* Зерно выключено: на светлом фоне ступенек не бывает, а шум поверх текста
   13px только грязнит. */
.n-bg::after{content:none}

/* ── Типографика ──────────────────────────────────────────────────────── */
.n-display{
  font-size:clamp(30px,8.5vw,34px);line-height:1.06;font-weight:700;
  letter-spacing:-.03em;color:var(--n-ink);
}
.n-section{
  font-size:clamp(22px,6vw,26px);line-height:1.18;font-weight:600;
  letter-spacing:-.01em;color:var(--n-ink);
}
.n-title{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--n-ink)}
.n-body{font-size:16px;line-height:1.5;font-weight:400;color:var(--n-ink)}
.n-label{font-size:13px;font-weight:400;color:var(--n-soft)}
.n-kicker{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n-faint);
}
.n-num{font-variant-numeric:tabular-nums;letter-spacing:-.025em;font-weight:700}

/* ── Поверхность ────────────────────────────────────────────────────────
   Свет сверху, тень снизу, волосяная линия по контуру. Тень минимальная:
   карточка лежит на фоне, а не парит над ним. */
.n-card{
  position:relative;border:none;border-radius:var(--n-r-card);
  padding:18px;color:var(--n-ink);
  background:rgb(var(--n-surface) / var(--n-surface-a));
  box-shadow:
    var(--n-lift),
    inset 0 0 0 1px var(--n-edge-bot),
    inset 0 1px 0 var(--n-edge-top);
}
.n-card--solid{background:rgb(var(--n-surface) / var(--n-surface-strong))}
/* Панель — самая крупная масса, поэтому и радиус самый большой. */
.n-panel{border-radius:var(--n-r-panel)}

/* Герой: единственное место, где цвет выходит на большую поверхность. */
.n-card--hero{
  color:var(--n-act-ink);border-radius:var(--n-r-panel);
  background:
    radial-gradient(90% 140% at 12% -20%, hsl(var(--cta2,220 8% 30%)), transparent 68%),
    linear-gradient(150deg, hsl(var(--cta2,220 8% 30%)), hsl(var(--cta,220 10% 16%)));
  box-shadow:0 18px 44px -26px rgb(var(--n-shadow) / .40);
}
.n-card--hero .n-label,.n-card--hero .n-kicker{color:rgb(255 255 255 / .7)}

/* ── Список ─────────────────────────────────────────────────────────────
   Строка — не карточка. Десять строк-карточек читаются как десять
   всплывающих окон; один блок с волосяными разделителями — как список. */
.n-list{
  border-radius:var(--n-r-card);overflow:hidden;
  background:rgb(var(--n-surface));
  box-shadow:var(--n-lift),inset 0 0 0 1px var(--n-edge-bot);
}
.n-row{
  display:flex;align-items:center;gap:14px;width:100%;
  border:none;font:inherit;text-align:left;cursor:pointer;
  padding:15px 18px;color:var(--n-ink);background:none;
  transition:background .18s var(--n-ease);
}
.n-row+.n-row{box-shadow:inset 0 1px 0 var(--n-hair)}
.n-row:active{background:rgb(0 0 0 / .035)}

/* Значки — только контурные SVG. Системный шрифт рисует эмодзи цветными
   картинками, и в строгом списке они выглядят наклейками. */
.n-ico{
  width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ── Кнопка ─────────────────────────────────────────────────────────────
   17/600 — системный размер действия. Радиус 16: кнопка легче карточки, и
   форма обязана это показывать. */
.n-btn{
  appearance:none;border:none;cursor:pointer;font:inherit;
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  border-radius:var(--n-r-btn);padding:14px 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:var(--n-act-ink);background:var(--n-act);text-decoration:none;
  transition:transform .34s var(--n-spring),opacity .2s var(--n-ease);
}
.n-btn:active{transform:scale(.96)}
.n-btn[disabled]{opacity:.45;pointer-events:none}
.n-btn--ghost{
  color:var(--n-ink);background:rgb(var(--n-surface));
  box-shadow:inset 0 0 0 1px var(--n-line);
}
/* Опасное — не заливкой: красная кнопка во всю ширину читается как главное
   действие экрана, а это ровно наоборот. */
.n-btn--danger{color:var(--n-err);background:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--n-err) 30%,transparent)}
.n-btn--sm{font-size:14px;padding:10px 15px;border-radius:var(--n-r-chip)}
.n-btn--wide{width:100%}

/* ── Сегменты ─────────────────────────────────────────────────────────── */
.n-seg{
  display:flex;gap:4px;padding:4px;border-radius:var(--n-r-pill);
  background:rgb(0 0 0 / .045);
}
.n-seg__item{
  border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  padding:9px 15px;border-radius:var(--n-r-pill);color:var(--n-soft);
  background:none;transition:color .2s var(--n-ease),background .2s var(--n-ease);
}
.n-seg__item.is-on{color:var(--n-ink);background:rgb(var(--n-surface));
  box-shadow:var(--n-lift)}

/* ── Поле ───────────────────────────────────────────────────────────────
   16px — минимум, при котором iOS не зумит страницу на фокусе. */
.n-input{
  width:100%;border:none;font:inherit;font-size:16px;outline:none;
  border-radius:var(--n-r-field);padding:14px 16px;color:var(--n-ink);
  background:rgb(var(--n-surface));
  box-shadow:inset 0 0 0 1px var(--n-line);
  transition:box-shadow .2s var(--n-ease);
}
.n-input::placeholder{color:var(--n-faint)}
.n-input:focus{box-shadow:inset 0 0 0 1.5px var(--n-ink)}

/* ── Крупная цифра ────────────────────────────────────────────────────── */
.n-stat{display:flex;align-items:baseline;gap:12px}
.n-stat b{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--n-ink);font-variant-numeric:tabular-nums}
.n-stat b i{font-style:normal;font-size:24px;font-weight:600;opacity:.5}
.n-stat span{font-size:15px;color:var(--n-soft)}

/* ── Разделители и пустота ────────────────────────────────────────────── */
.n-hr{border:none;height:1px;margin:var(--n-gap-m) 0;background:var(--n-hair)}
.n-empty{font-size:15px;line-height:1.5;padding:20px 2px;color:var(--n-faint)}

@media (prefers-reduced-motion:reduce){
  .n-row,.n-btn,.n-seg__item,.n-input,.n-card{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ОБЩИЙ ЯЗЫК СКИНА — то, что обязано совпадать в панели владельца и в
   кабинете мастера.

   Эти два экрана человек открывает подряд: из панели одним нажатием он
   попадает в свой кабинет. Пока язык жил только в panel_skin.css, кабинет
   оставался в прошлом оформлении, и переход выглядел как переход в другой
   продукт. Держать одинаковое в двух файлах — верный способ, чтобы они
   разъехались через месяц, поэтому фон, темы и точечные цифры живут здесь.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --n-page:#eef0f6;
  --n-lime:#d8f94f;
  --n-lime-ink:#1b2a00;
  --n-glass:255 255 255;
  --n-glass-a:.97;
  --n-blur-card:blur(18px) saturate(1.25);
  --n-lift:0 4px 10px rgb(24 24 27 / .06), 0 24px 50px -22px rgb(24 24 27 / .34);
  --n-r-panel:40px;
  --n-r-card:32px;
  --m1:#e3e8f7; --m2:#eef1fa; --m3:#e6ecf6; --m4:#f2f4fb;
}

/* Мешевый фон. Четыре размытых пятна разных цветов и диагональная
   подложка: живым фон делает переход между РАЗНЫМИ цветами, а не
   насыщенность одного. */
.wall{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(75% 55% at 2% 0%, var(--m1) 0%, transparent 70%),
    radial-gradient(70% 50% at 100% 8%, var(--m2) 0%, transparent 70%),
    radial-gradient(80% 60% at 96% 100%, var(--m3) 0%, transparent 72%),
    radial-gradient(70% 55% at 0% 96%, var(--m4) 0%, transparent 70%),
    linear-gradient(158deg, var(--m2) 0%, var(--m1) 48%, var(--m3) 100%);
}
.wall::before{
  content:'';position:absolute;inset:-20%;
  backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);
  /* Вуаль. Без неё цвет во весь экран красив ровно до первой подписи:
     серый вторичный текст, который лежит НЕ на карточке, а прямо на фоне,
     на насыщенном зелёном исчезает. Проверено в браузере: .42 сохраняет
     переливание и возвращает подписям контраст. */
  background:rgb(255 255 255 / .42);
}
.wall::after{content:none}
.wall>i{display:none}

/* Точечные цифры. Шаг сетки постоянный в пикселях, а не в долях кегля:
   так устроено настоящее табло — панель одна, числа на ней разного
   размера. Начертание плотное, иначе штрих цифры уже двух точек и вместо
   табло получается обводка. */
.n-dots{
  font-weight:800;
  color:transparent;
  background-image:radial-gradient(var(--n-ink) 48%, transparent 50%);
  background-size:3px 3px;
  -webkit-background-clip:text;background-clip:text;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.n-dots.on-dark{background-image:radial-gradient(#fff 48%, transparent 50%)}

/* Цвет бизнеса: ведущий оттенок и три соседа из разных частей круга. */
html[data-wall="lime"]{
  --m1:#7ad13f; --m2:#e8f77a; --m3:#2fa6a0; --m4:#c8f0a0; --n-accent:#2f6a12;
}
html[data-wall="aqua"]{
  --m1:#3fc6de; --m2:#9ae8f0; --m3:#6a7fe0; --m4:#e3b8f0; --n-accent:#0f5570;
}
html[data-wall="blush"]{
  --m1:#f77aae; --m2:#ffc7a8; --m3:#b06ae0; --m4:#ffe0ec; --n-accent:#8a1a52;
}
html[data-wall="iris"]{
  --m1:#7a5cf0; --m2:#c96ae0; --m3:#5c8ef0; --m4:#d8f06a; --n-accent:#3a2b96;
}
html[data-wall="ember"]{
  --m1:#f79a4a; --m2:#f7d06a; --m3:#e0607a; --m4:#f0c0a0; --n-accent:#8a3608;
}

/* ══ ТЕМЫ РАБОЧЕЙ ПАНЕЛИ ═════════════════════════════════════════════════
   Шесть наборов, один на человека. Владелец просил: «чтобы не только
   зелёный был», «чб (как эпл) и ещё 5 вариантов для разных людей».

   ЧТО МЕНЯЕТ ТЕМА И ЧЕГО НЕ ТРОГАЕТ. Меняются четыре пятна фона, акцент и
   цвет текста НА акценте. Не трогается ничего из того, на чём держится
   работа: основной текст остаётся тёмным на светлом, поля ввода белыми,
   красный — красным. Тема — это настроение экрана, а не второй продукт.

   ПОЧЕМУ ПЯТНА РАЗНЫЕ, А НЕ ОТТЕНКИ ОДНОГО ЦВЕТА. Четыре тона одного
   цвета дают заливку, а не переливание: фон выглядит плоским и дешёвым.
   У каждой темы ведущий цвет и соседи из других частей круга — живым фон
   делает переход между ними.

   ПОЧЕМУ СЕЛЕКТОР `:root[...]`, А НЕ `html[...]`. Это не стиль записи, а
   единственное, что заставляет личную тему сработать. Рядом, в
   panel_skin.css, живут темы ВИТРИНЫ — `html[data-wall="aqua"]`, — и они
   тоже задают те же четыре пятна фона. Вес у `html[attr]` и у
   `html[attr]` одинаковый, а объявлены они ниже: побеждали они.

   Наружу это вышло так: человек выбирал чёрно-белую, кнопки и бумага
   становились чёрно-белыми, а ФОН оставался голубым — цвет его витрины.
   Половина темы. `:root[attr]` весит больше (псевдокласс плюс атрибут
   против типа плюс атрибута) и выигрывает независимо от порядка файлов.

   ПОЧЕМУ ЦВЕТ ТЕКСТА НА АКЦЕНТЕ ЗАДАН ЯВНО. Акцент стоит под подписью на
   кнопке подтверждения, и «подобрать сам» тут нельзя: на лайме нужен
   почти чёрный, на индиго — белый. Один неверный подбор означает
   невидимую кнопку «Подтвердить» — ровно то, что уже случалось на живой
   витрине. Каждая пара ниже проверена на контраст. */

/* ЛАЙМ — как было. Стоит первой намеренно: человек, открывший список,
   должен увидеть привычное на привычном месте. */
:root[data-skin="lime"]{
  --n-lime:#d8f94f; --n-lime-ink:#1b2a00;
  --n-page:#eef0f6;
  --m1:#e3e8f7; --m2:#eef1fa; --m3:#e6ecf6; --m4:#f2f4fb;
}

/* ЧЁРНО-БЕЛАЯ. Просили прямо, и она же самая строгая: цвета нет вовсе,
   кроме смысловых — красного у опасного и зелёного у оплаченного.
   Акцентом служит сам чёрный, и на нём белый текст. */
:root[data-skin="mono"]{
  --n-lime:#18181b; --n-lime-ink:#ffffff;
  --n-page:#f2f2f4;
  --m1:#e6e6ea; --m2:#f4f4f6; --m3:#dedee4; --m4:#fafafb;
  --n-accent:#18181b;
}

/* ПЕСОК. Тёплая бумага: тем, кому светло-серое кажется больничным. */
:root[data-skin="sand"]{
  --n-lime:#e8b53f; --n-lime-ink:#2b1c00;
  --n-page:#f6f1e8;
  --m1:#f0e2c8; --m2:#faf4e8; --m3:#e8dcd0; --m4:#fbf7f0;
  --n-accent:#8a5a10;
}

/* ИНДИГО. Спокойный вечером — панель часто открывают после смены. */
:root[data-skin="indigo"]{
  --n-lime:#4a5cd8; --n-lime-ink:#ffffff;
  --n-page:#eef0f8;
  --m1:#dfe4f8; --m2:#eef1fc; --m3:#e0e8f6; --m4:#f4f6fc;
  --n-accent:#2f3a9e;
}

/* РОЗА. Приглушённая, а не сладкая: салонам она ближе всего, и именно
   поэтому её легче всего испортить яркостью.

   Первый подбор был #e0708f — красивый и НЕЧИТАЕМЫЙ: белая подпись на нём
   даёт контраст 3.05 при нужных 4.5, то есть кнопка «Подтвердить»
   выглядела бы блёклой наклейкой. Замерено, а не оценено на глаз;
   #b84668 даёт 5.10 и остаётся розовым. */
:root[data-skin="rose"]{
  --n-lime:#b84668; --n-lime-ink:#ffffff;
  --n-page:#f8f0f2;
  --m1:#f6e0e6; --m2:#fdf2f4; --m3:#efe2e6; --m4:#fdf8f9;
  --n-accent:#a02a4e;
}

/* ХВОЯ. Тёмно-зелёный без яркости — для тех, кому лайм слишком громкий,
   но зелёное привычно. */
:root[data-skin="pine"]{
  --n-lime:#2f6a4a; --n-lime-ink:#ffffff;
  --n-page:#eef3ef;
  --m1:#dde9e0; --m2:#eff5f0; --m3:#e0eae4; --m4:#f5f9f6;
  --n-accent:#1f4a33;
}

/* ── Выбор темы ────────────────────────────────────────────────────────
   Шесть кнопок в две колонки: список в одну растягивается на пол-экрана,
   а сетка из трёх делает названия нечитаемыми на узком телефоне.

   Образец цвета — не точка, а полоса: тема это ПЕРЕЛИВАНИЕ четырёх пятен,
   и одной точкой его не показать. Полоса повторяет тот же градиент, что
   ляжет на фон, поэтому человек выбирает то, что увидит. */
.skinlist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skinopt{appearance:none;display:grid;gap:4px;text-align:left;cursor:pointer;
  padding:12px;border-radius:16px;border:1px solid var(--n-line);
  background:rgb(255 255 255 / .7);color:var(--n-ink);font:inherit;
  min-height:44px;transition:border-color .15s ease, background .15s ease}
.skinopt:hover{background:rgb(255 255 255 / .95)}
.skinopt.on{border-color:var(--n-ink);background:#fff}
.skinname{font-size:14.5px;font-weight:600}
.skinhint{font-size:12px;line-height:1.35;color:var(--n-soft)}
.skinswatch{display:block;height:22px;border-radius:8px;
  border:1px solid rgb(0 0 0 / .08)}
/* Образцы: те же цвета, что и у самих тем. Держим рядом с ними, иначе
   образец однажды покажет один цвет, а тема даст другой. */
.skinswatch[data-skin-swatch="lime"]{
  background:linear-gradient(120deg,#e3e8f7,#eef1fa 45%,#d8f94f)}
.skinswatch[data-skin-swatch="mono"]{
  background:linear-gradient(120deg,#e6e6ea,#f4f4f6 45%,#18181b)}
.skinswatch[data-skin-swatch="sand"]{
  background:linear-gradient(120deg,#f0e2c8,#faf4e8 45%,#e8b53f)}
.skinswatch[data-skin-swatch="indigo"]{
  background:linear-gradient(120deg,#dfe4f8,#eef1fc 45%,#4a5cd8)}
.skinswatch[data-skin-swatch="rose"]{
  background:linear-gradient(120deg,#f6e0e6,#fdf2f4 45%,#b84668)}
.skinswatch[data-skin-swatch="pine"]{
  background:linear-gradient(120deg,#dde9e0,#eff5f0 45%,#2f6a4a)}