/* Кабинет гостя.
 *
 * Размеры не подобраны на глаз и не перенесены из макета как есть.
 * Макет рисовался в рамке 258 px — это модель телефона, а не телефон:
 * настоящее окно 422 CSS-пикселя. Содержимое там 206 px, здесь 378 —
 * живой экран в 1,83 раза шире. Кегли макета умножены на этот множитель
 * и посажены на шкалу токенов:
 *
 *     заголовок 37   поле 23   кнопка 18/56   цифра кода 34
 *
 * Слепой пересчёт по множителю 1,83 дал заголовок 45 и кнопку 80 —
 * на живом телефоне это кричит, и половина экрана уходит в пустоту.
 * Числа ниже сняты с настоящего окна 412×915 и выверены снимком
 * (design-rules/tests/snimok.py), а не пересчётом из модели.
 *
 * Цвета, радиусы и отступы — из design-rules/tokens/tokens.json.
 * Тёмной темы здесь нет намеренно: экраны входа живут считанные минуты,
 * а фон в них несёт смысл (беж → ветер по мере продвижения) и во второй
 * палитре рассыпался бы.
 */

:root{
  --grafit:#242120; --pole:#5A732A; --sol:#D0D841; --bezh:#F3ECE4; --veter:#DDEDFA;
  --rule-2:#8C8682; --muted:#66625F; --trevoga:#9A3B2E;
  /* Поверхность карточек. В tokens.json её нет — значение живёт
     здесь одной строкой, пока владелец не решит, класть ли его
     в палитру. Рассыпать по файлу нельзя: разойдётся. */
  --karta:#FBF8F4;
  --r-sm:8px; --r-md:16px; --r-pill:9999px;
  --krivaya:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--grafit); background:var(--bezh);
  font-family:'Involve','Century Gothic','Questrial',system-ui,sans-serif;
  font-size:1.0625rem; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  transition:background .5s var(--krivaya);
}
/* Дрейф фона по трём шагам — ровная прямая между двумя фирменными,
   промежуточный получен делением, а не подбором. */
body.shag-1{background:#F3ECE4}
body.shag-2{background:#E8ECEF}
body.shag-3{background:#DDEDFA}

.ekran{
  min-height:100%; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column;
  padding:max(14px, env(safe-area-inset-top)) 26px max(20px, env(safe-area-inset-bottom));
}
.rastr{flex:1; min-height:16px}

/* Распорка работает только внутри флекса. Класс, а не «любая форма»:
   на экране звонка форм три, и растянуться должна одна — с полем. */
form.stolb{display:flex; flex-direction:column; flex:1; min-height:0}

/* На высоком телефоне содержимого мало, а места много. Верхняя распорка
   вдвое уже нижней: заголовок отходит от строки состояния, но остаётся
   в верхней трети, а не уезжает в середину. */
/* Воздушные распорки — они же место для подложки. Мотив живёт внутри
   них и обрезается их краями: снизу он не доходит до кнопки, справа
   уходит за экран (6.2.3). Так кнопка и подпись всегда стоят на чистом
   фоне, и перекрашивать их под солнечный не приходится. */
.vozduh{flex:1; min-height:0; max-height:200px}
/* Потолок у распорки: на телефоне с поднятой клавиатурой её и так мало,
   а на планшете в тысячу пикселей высотой она разводит части экрана
   на полкилометра, и композиция рассыпается. */
.vozduh-nizhniy{flex:2; min-height:24px; max-height:320px}

/* Подложка: фигура бренд-мотива во весь экран, обрезанная его краями
   (6.2.3). Лежит под содержимым и нажатий не ловит. */
.podlozhka{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.ekran{position:relative; z-index:1}
.motiv{position:absolute; color:var(--sol)}
.motiv--bird{right:-22%; bottom:-6%; width:105%}
/* Труба — за левый край: раструб у неё справа, обрежешь его — останется
   голая скоба, по которой трубу не узнать. */
.motiv--trumpet{left:-30%; bottom:-4%; width:118%}
.motiv--flower{right:-24%; bottom:-8%; width:104%}

h1{
  font-size:2.3125rem; line-height:1.05; font-weight:700; letter-spacing:-.02em;
  margin:0;
}
p{margin:8px 0 0; font-size:1.0625rem; line-height:1.4; color:var(--muted)}
p.krupno{font-size:1.3125rem; color:var(--grafit); font-weight:600; letter-spacing:.01em}

/* Метка хода. Призрака под завитком нет: в макете его не было, и с ним
   фигура читается улиткой, а не путём. Взамен — размер: 58 px вместо
   прежних 34, и дуга видна сама по себе. */
.hod{height:44px; margin:4px 0 20px; color:var(--pole)}
.hod svg{height:44px; width:100%; overflow:visible; display:block}
.hod path{fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round}

/* Поля — подчёркивание, не коробка */
.pole{
  display:block; width:100%; border:none; border-bottom:2px solid var(--grafit);
  background:none; border-radius:0; padding:14px 0; margin:0;
  font:inherit; font-size:1.4375rem; font-weight:600; letter-spacing:.01em;
  color:var(--grafit); appearance:none;
}
/* Приглушённый, а не цвет рамки: border-strong держит 3,07:1 — порог
   для линий, не для букв, и на самом светлом фоне он даёт ровно 3,00.
   Свой же запрет, наступил на него второй раз. */
.pole::placeholder{color:var(--muted); font-weight:400; opacity:1}
/* Знак фокуса — утолщение самой черты, а не рамка вокруг поля. Рамка
   рисовалась скруглённой коробкой поверх подчёркивания и спорила с ним;
   правило запрещает убирать outline без замены, и замена здесь она. */
.pole:focus,.pole:focus-visible{
  outline:none; border-bottom-width:4px; padding-bottom:12px;
}
.polya{display:grid; gap:18px; margin-top:22px}

/* Кнопка — плашка с торцом-таблеткой (6.3.1) */
.knopka{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:56px; padding:14px; border:none;
  border-radius:var(--r-pill); background:var(--grafit); color:var(--bezh);
  font:inherit; font-size:1.125rem; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .18s var(--krivaya);
}
.knopka:active{background:#3A3634}
.knopka:focus-visible{outline:3px solid var(--grafit); outline-offset:4px}
/* Погашенная кнопка — подсказка, а не запрет: пока номер не полон,
   нажатие заказало бы звонок в никуда, и за деньги. Обведённая, а не
   серая: серая заливка на солнечном даёт 2,32, и край кнопки там
   исчезает. Обводка держит 3,24 — порог для линий; надпись 5,4 —
   порог для букв. */
.knopka[disabled]{
  background:transparent; cursor:default;
  color:rgba(36,33,32,.75);
  box-shadow:inset 0 0 0 2px rgba(36,33,32,.55);
}
.knopka.tihaya{
  background:none; font-weight:500; font-size:1rem;
  min-height:48px; padding:10px;
  /* Тише делает отсутствие заливки и лёгкое начертание, а не цвет:
     поверх фигуры приглушённый серый даёт 3,91 при нужных 4,5, светлый
     серый — 2,32. Графит с прозрачностью 0,72 даёт 5,07, с 0,65 — 4,19
     и уже не проходит. */
  color:rgba(36,33,32,.75);
}
.knopka.tihaya:active{background:rgba(36,33,32,.06)}
/* Тихой кнопке обводка не положена: обведённой становится главная,
   когда теряет заливку, — а у тихой заливки и не было. С рамкой она
   превращалась в пустую плашку и лезла на поле ввода над собой. */
.knopka.tihaya[disabled]{background:none; box-shadow:none; color:rgba(36,33,32,.75)}

/* Согласие — строкой под кнопкой, как в макете: нажатие и есть согласие.
   Текст говорит об этом прямо, иначе строка была бы обманом. */
.soglasie{
  font-size:0.875rem; line-height:1.35; color:rgba(36,33,32,.78);
  text-align:center; margin:12px 0 0;
}

/* Код: четыре клетки одним полем — так короче и надёжнее, чем четыре
   отдельных, между которыми надо перебрасывать курсор. */
.kod-obolochka{position:relative; margin-top:26px}
.kod-vvod{
  position:absolute; inset:0; width:100%; height:100%; opacity:0;
  border:none; background:none; font-size:1rem; /* меньше 16px — iOS зумит */
}
/* Высота задана числом, а не пропорцией: пустой клетке нечем задать
   высоту, и от неё оставалась одна черта. */
.kletki{display:flex; gap:12px; justify-content:center; align-items:flex-end; pointer-events:none}
.kletki span{
  position:relative;
  flex:1; max-width:74px; height:54px;
  display:flex; align-items:flex-end; justify-content:center;
  font-size:2.125rem; font-weight:700; line-height:1; padding-bottom:8px;
  font-variant-numeric:tabular-nums; border-bottom:3px solid var(--rule-2);
}
.kletki span.est{border-bottom-color:var(--grafit)}

/* Каретка в той клетке, куда пойдёт следующая цифра. Без неё четыре
   пустые черты не говорят «набирайте» — они читаются линейкой. */
.kletki span.zhdyot::after{
  content:''; position:absolute; bottom:10px; left:50%; width:2px; height:32px;
  margin-left:-1px; background:var(--grafit);
  animation:migat 1.06s steps(2,end) infinite;
}
@keyframes migat{50%{opacity:0}}

/* Промах: краснеет подчёркивание, цифры остаются графитом — красить
   и цифры значит сказать «вы неверные»; неверен код целиком, а видеть
   набранное гостю нужно, чтобы найти опечатку. */
.mimo .kletki span{border-bottom-color:var(--trevoga)}
.zaperto .kletki span{border-bottom-color:#D6D0C9}
.mimo .kletki{animation:drozh .34s cubic-bezier(.36,.07,.19,.97) both}
@keyframes drozh{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

.beda{
  color:var(--trevoga); font-size:1rem; font-weight:600; line-height:1.3;
  margin-top:18px; text-align:center;
}

/* Ожидание звонка: волна голоса и долинник, который слушает вместе
   с гостем. Он молчит — правило 5.1.1. */
/* Долинник и волна — одна группа: он слушает то, что она рисует.
   Врозь они читались как значок и трава под ним. */
.zhdyom{margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:2px}
.volna{display:flex; align-items:center; justify-content:center; gap:5px; height:34px; color:var(--pole)}
.volna i{display:block; width:4px; border-radius:var(--r-pill); background:currentColor;
         animation:golos 1.15s var(--krivaya) infinite}
@keyframes golos{0%,100%{height:6px; opacity:.4} 50%{height:26px; opacity:1}}

/* Пасхалка, а не портрет: правило 5.5.3 не знает промежуточных
   размеров, а 200 px давали ровно запрещённое «картинка сбоку» —
   четверть экрана под персонажа, который здесь не главный. Пасхалка —
   3–5% высоты макета (5.5.1); при окне 915 это 28–46 px. И масштаб
   по высоте, а не по ширине (5.4.1). */
.dolinnik{display:block; color:var(--pole); height:42px; width:auto}
.slushaet{animation:slushat 2.8s ease-in-out infinite; transform-origin:70% 90%}
@keyframes slushat{
  0%,100%{transform:rotate(0)} 30%{transform:rotate(-7deg)} 60%{transform:rotate(3deg)}
}

/* Приветствие. Кегль здесь не вкусовой: поле на ветре даёт 4,48:1,
   обычному тексту нужно 4,5. Порог крупного текста (14 pt полужирным,
   то есть 18,67 px) снимает требование до 3:1 — 37 проходит с запасом.
   Уменьшить ниже 19 px нельзя, не сменив цвет. */
.privet{
  font-size:1.3125rem; font-weight:700; line-height:1.15; letter-spacing:-.01em;
  color:var(--pole); margin:0 0 16px;
  animation:vstupaet .62s var(--krivaya) both;
}
@keyframes vstupaet{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

.vozvrat{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; text-align:center;
}
.vozvrat .imya{font-size:2.3125rem; font-weight:700; letter-spacing:-.02em; line-height:1; margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ── Кабинет ─────────────────────────────────────────────────────────
   Единственная новая форма здесь — карточка. Радиус из токенов, теней
   нет: тень бывает только у всплывающих слоёв (12 · Цифра). */
.kab-shapka{display:flex; align-items:flex-start; gap:14px; margin-bottom:26px}
.kab-shapka .kto{flex:1; display:grid; gap:2px}
.kab-shapka .zdravstvuyte{font-size:1.0625rem; color:var(--muted)}
.kab-shapka .imya{font-size:2.3125rem; font-weight:700; letter-spacing:-.02em; line-height:1}

.karta{
  background:var(--karta); border-radius:24px; padding:22px;
  display:grid; gap:10px; margin-bottom:14px;
}
.karta.pusto{background:none; border:1.5px dashed rgba(36,33,32,.18)}
.karta.tihaya-karta{background:none; padding:0; margin-top:26px}
.karta .nadpis{
  font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:600; color:var(--pole);
}
.karta h2{font-size:1.625rem; line-height:1.05; letter-spacing:-.015em; margin:0}
.karta p{margin:0; font-size:1rem; color:var(--muted); line-height:1.4}
.karta p.krupno{font-size:1.4375rem; color:var(--grafit); font-weight:600}

.razdely{display:grid; gap:2px; background:rgba(36,33,32,.1);
         border-radius:20px; overflow:hidden}
.razdel-stroka{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:var(--karta); text-decoration:none; color:var(--grafit); min-height:64px;
}
.razdel-stroka .nazvanie{flex:1; font-size:1.125rem; font-weight:600}
.razdel-stroka .shevron{color:rgba(36,33,32,.32); font-size:1.25rem}

/* ── Приложение ──────────────────────────────────────────────────────
   Две разные вещи, а не одна в двух нарядах. На ладони — строка
   в ряд с «О себе»: нажал, поставилось. На мониторе ссылка на файл
   врёт (его там нечем поставить), поэтому вместо неё код для камеры.
   Что не работает — не показываем; переключение ниже, у ширины. */
.prilozhenie{
  display:flex; align-items:center; gap:14px; padding:14px 20px; min-height:64px;
  background:var(--karta); border-radius:20px; text-decoration:none; color:var(--grafit);
}
/* Название и приписка ярусами, а не в строку. В строку они помещались
   только на витрине в 760 px: на живом телефоне надпись переносилась
   в три яруса, а высоту подмены прятала плитка знака — по числу строка
   выглядела здоровой, и видно это стало только снимком. */
.prilozhenie .tekst{flex:1; min-width:0; display:grid; gap:1px}
.prilozhenie .nazvanie{font-size:1.125rem; font-weight:600; white-space:nowrap}
.prilozhenie .gde{font-size:0.9375rem; color:var(--muted); line-height:1.3}
.prilozhenie .shevron{flex:0 0 auto; color:rgba(36,33,32,.32); font-size:1.25rem}

.prilozhenie-qr{display:none}

/* Плитка знака. Отступ вместо вложенной обёртки: знак приходит
   картинкой, чтобы кешироваться и не висеть в разметке каждой
   страницы лишними пятью килобайтами. */
.znachok{
  flex:0 0 auto; width:52px; height:52px; box-sizing:border-box;
  padding:9px; border-radius:var(--r-md); background:var(--bezh); object-fit:contain;
}

.nazad{font-size:1rem; color:var(--muted); text-decoration:none;
       display:inline-block; margin-bottom:14px}
.poluchilos{
  color:var(--pole); font-size:1rem; font-weight:600; text-align:center;
  margin-top:18px;
}

/* ── Между телефоном и монитором ─────────────────────────────────────
   Фигура задана долями ширины окна, а содержимое упёрто в 520 — и чем
   шире окно, тем сильнее она давит. На 768 труба выходила в 906 пикселей
   против колонки в 520 и съедала экран.

   Пока раскладка телефонная, подложка держится колонки, а не окна:
   фигура обрезается её краями, и вид на планшете — тот же телефонный,
   просто по центру. */
@media (max-width:899px){
  .podlozhka{
    left:50%; right:auto; transform:translateX(-50%);
    width:100%; max-width:520px;
  }
}

/* ══ Широкий экран ═══════════════════════════════════════════════════
 *
 * Вход на мониторе — две половины: слева дело, справа фигура. Узкая
 * форма посреди экрана выглядит потерянной, а растянутая не читается:
 * поле шириной в монитор — это поле, в котором не видно ни начала
 * строки, ни конца.
 *
 * Разметку это не меняет ни на строку: подложка из края экрана
 * становится правой половиной, а .ekran — левой.
 *
 * Здесь же фигура наконец показывается целиком. На ладони её приходится
 * обрезать краем (6.2.3), и от птицы остаются перья; на мониторе места
 * хватает, и она узнаётся сразу.
 */
@media (min-width:900px){
  .ekran{
    width:50%; max-width:none; min-height:100vh;
    /* margin:0, а не auto: с автоматическим полем половина остаётся
       посередине экрана и наезжает на правую — беж закрывает фигуру.
       Померено, а не угадано: .ekran стоял в 320 при подложке в 640. */
    margin:0;
    justify-content:center; background:var(--bezh);
    padding:48px clamp(40px,5vw,96px);
  }
  /* Внутри левой половины содержимое держит свою ширину: форма шире
     520 пикселей перестаёт читаться. */
  .ekran > *{max-width:460px; width:100%}
  form.stolb{flex:0 0 auto; max-width:460px; width:100%}
  /* Распорки на широком не растягиваются — растягиваться некуда,
     форма больше не тянется во всю высоту. Без явной высоты они
     схлопывались в ноль, и кнопка липла к полю. 34 пикселя оказалось
     мало: поле кода и кнопка повтора читались одним куском. */
  .vozduh,.vozduh-nizhniy{flex:0 0 auto; min-height:0; height:56px}

  .podlozhka{
    left:50%; right:0; top:0; bottom:0;
    display:flex; align-items:center; justify-content:center; padding:60px;
  }
  .shag-1 .podlozhka,.shag-3 .podlozhka{background:var(--veter)}
  .shag-2 .podlozhka{background:#E8ECEF}

  /* Фигура целиком и по центру: ни отрицательных отступов, ни обрезки. */
  .motiv,.motiv--bird,.motiv--trumpet,.motiv--flower{
    position:static; inset:auto;
    width:78%; height:auto; max-height:62vh;
  }

  h1{font-size:3.25rem; line-height:1}
  p{font-size:1.1875rem}
  p.krupno{font-size:1.4375rem}
  .hod{height:0; margin:0; overflow:hidden}

  /* Долинник с волной здесь не показываются: на ладони он пасхалка
     в свободном углу, а тут угол занят трубой. */
  .zhdyom{display:none}

  .kletki span{max-width:88px; height:104px; font-size:3.25rem; padding-bottom:14px}
  .kletki{gap:16px; justify-content:flex-start}
  .kod-obolochka{margin-top:34px}

  /* Кабинет на мониторе — не форма, а место, куда возвращаются:
     половинная раскладка входа ему не подходит. Земля идёт от края
     до края, содержимое — одной колонкой.

     Колонка одна на всё, и края у неё общие. Раздавать детям
     «margin:auto» нельзя: каждый центруется по своей ширине, и
     приветствие, карточка и ссылка расходятся по трём разным линиям —
     ровно это и было видно на снимке. */
  body.kabinet .ekran{
    width:100%; max-width:840px; margin:0 auto; background:transparent;
    align-items:stretch; justify-content:flex-start;
    padding:56px clamp(24px,5vw,48px);
  }
  body.kabinet .ekran > *{max-width:none; margin-left:0; margin-right:0}
  body.kabinet .kab-shapka .imya{font-size:2.75rem}
  /* Подложка держится правого края и под колонку не лезет. */
  body.kabinet .podlozhka{left:auto; right:0; width:46%; opacity:.55;
                          align-items:flex-end; justify-content:flex-end; padding:0}
  body.kabinet .motiv{width:100%; max-height:none; transform:translate(18%, 22%)}

  /* Здесь ссылка на файл меняется кодом для камеры: поставить
     приложение можно только с телефона, а не отсюда. Карточка
     намеренно не ссылка — нажимать не на что. */
  .prilozhenie{display:none}
  .prilozhenie-qr{
    display:flex; align-items:center; gap:24px; padding:24px;
    background:var(--karta); border-radius:24px;
  }
  .prilozhenie-qr .tekst{flex:1; display:grid; gap:5px}
  .prilozhenie-qr .imya{font-size:1.25rem; font-weight:700; letter-spacing:-.01em}
  .prilozhenie-qr p{font-size:0.9375rem; color:var(--muted); line-height:1.4}
  /* 128, а не 104: на мониторе это ≈3,4 см, и телефон ловит код
     с вытянутой руки, а не вплотную. Белое поле по краю — не рамка,
     а часть кода: без пустой каймы его не читают. */
  .prilozhenie-qr .qr{
    flex:0 0 auto; width:128px; height:128px; box-sizing:border-box;
    padding:7px; border-radius:var(--r-md); background:#FFF;
  }

  .knopka{min-height:60px; font-size:1.1875rem}
  .knopka.tihaya{justify-content:flex-start; padding-left:0; min-height:48px}
  .soglasie{text-align:left}
}


/* ── Мой дом ───────────────────────────────────────────────────────── */
/* Приборы — строки-карточки, как разделы кабинета; переключатель —
   орган в 48 точек (12.6 брендбука), положение говорит и цветом,
   и словом. */
.pribory{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pribor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;background:var(--karta);border-radius:var(--r-md);
  padding:14px 16px;margin:0}
.pribor-imya{font-weight:600}
.pribor-znachenie{color:var(--muted);font-variant-numeric:tabular-nums}
.pereklyuchatel{min-height:48px;padding:0 22px;border:none;
  border-radius:var(--r-pill);background:var(--bezh);color:var(--grafit);
  font:inherit;font-weight:600;cursor:pointer;
  transition:background .2s var(--krivaya),color .2s var(--krivaya)}
.pereklyuchatel.vkl{background:var(--pole);color:#fff}
.pereklyuchatel:disabled{opacity:.6;cursor:default}
.pribor-otkaz{flex-basis:100%;color:var(--trevoga);font-size:14px}


/* ── Планшет на стене (Д2): тёмный киоск по макетам makety-ha.
   Единственное отступление от «в контуре тем нет»: стена светит в
   тёмную комнату, и светлая плита будила бы гостя. Класс ставит
   сервер по куке планшета — на телефонах гостя всё как было. */
body.planshet{background:var(--grafit);color:var(--bezh)}
body.planshet .kab-shapka .kto{color:var(--rule-2)}
body.planshet .karta,body.planshet .pribor{background:#2E2B2A;color:var(--bezh)}
body.planshet .pribor-znachenie{color:var(--rule-2)}
body.planshet .pereklyuchatel{background:#3D3938;color:var(--bezh)}
body.planshet .pereklyuchatel.vkl{background:var(--sol);color:var(--grafit)}

/* Страница привязки планшета (Д2.2): форма кода и кнопки читаемы
   и в киоске на графите, и в браузере на бежевом. */
.stroka-koda{display:flex; gap:12px; margin-top:14px; align-items:flex-end}
.stroka-koda .pole{flex:1}
.stroka-koda .knopka{width:auto; padding:14px 24px}
body.planshet .karta p{color:var(--bezh)}
body.planshet .karta a{color:var(--sol)}
body.planshet .knopka{background:var(--sol); color:var(--grafit)}
body.planshet .knopka:active{background:#B4C03B}
body.planshet .pole{border-bottom-color:var(--bezh); color:var(--bezh)}
body.planshet .pole::placeholder{color:var(--rule-2)}