/* Password Center. Вся палитра из токенов, ни одного литерального цвета.
   Шкала кегля намеренно короткая — четыре ступени вместо семи:
   28 (h1, из шаблона) · 18 (h2 раздела) · 14 (текст и элементы) · 12 (подписи).
   Раньше значение плитки 24px спорило с h2 22,5px, и глазу было не за что
   зацепиться. */

/* ── ритм ── */
.pw-card { margin-bottom: 16px; }
.pw-card > * + * { margin-top: 20px; }
.pw-card > .pw-note + * { margin-top: 12px; }

.pw-h2 {
  margin: 0; font: 600 18px/1.35 var(--sans); color: var(--white);
  letter-spacing: -.01em;
}
.pw-note { margin: 0; font: 400 12px/1.6 var(--sans); color: var(--muted); }
.pw-note--lead { margin-top: 6px; }

/* ── режимы ── */
.pw-modes { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pw-mode {
  min-height: 40px; padding: 0 14px;
  background: transparent; color: var(--muted2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 500 13px/1 var(--sans); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pw-mode:hover { color: var(--text); border-color: var(--border2); }
.pw-mode.is-active { color: var(--white); background: var(--surface2); border-color: var(--accent); }
.pw-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── вывод ── */
.pw-out__wrap { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.pw-out {
  flex: 1; min-width: 0; min-height: 72px; padding: 14px 16px;
  background: var(--surface2); color: var(--white);
  border: 1px solid var(--border2); border-radius: var(--radius);
  font: 600 clamp(15px, 2.2vw, 19px)/1.5 var(--mono);
  word-break: break-all; resize: none; overflow: hidden;
}
.pw-out:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-out[aria-invalid="true"] { border-color: var(--red); }

.pw-out__side { display: grid; gap: 8px; flex: none; }
.pw-iconbtn {
  display: grid; place-items: center; width: 44px; min-height: 32px; height: 100%;
  background: var(--surface2); color: var(--muted2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pw-iconbtn:hover { color: var(--white); border-color: var(--border2); }
.pw-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── главная кнопка: единственное свечение на странице ── */
.pw-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pw-generate {
  position: relative; flex: 1; min-width: 220px; min-height: 52px;
  background: var(--accent); color: var(--bg); border: 0; border-radius: var(--radius);
  font: 600 15px/1 var(--sans); cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.pw-generate::after {
  content: ''; position: absolute; inset: 8px 14px -6px;
  background: var(--accent2); filter: blur(16px); opacity: .4;
  border-radius: var(--radius); z-index: -1;
}
.pw-generate:hover { filter: brightness(1.06); }
.pw-generate:active { transform: translateY(1px); }
.pw-generate:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.pw-copied { display: inline-flex; align-items: center; gap: 6px; margin: 0;
  color: var(--green); font: 500 13px/1 var(--sans); }

/* ── анализ ── */
.pw-analysis { display: grid; gap: 20px; min-width: 0; }
.pw-meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pw-meter__seg { height: 6px; border-radius: 3px; background: var(--surface3);
  transition: background .25s ease; }
.pw-meter__seg--very-weak.is-on { background: var(--red); }
.pw-meter__seg--weak.is-on      { background: var(--orange); }
.pw-meter__seg--medium.is-on    { background: var(--yellow); }
.pw-meter__seg--strong.is-on    { background: var(--cyan); }
.pw-meter__seg--excellent.is-on { background: var(--green); }
.pw-meter__seg--military.is-on  { background: var(--accent); }

.pw-grade--very-weak { color: var(--red); }
.pw-grade--weak      { color: var(--orange); }
.pw-grade--medium    { color: var(--yellow); }
.pw-grade--strong    { color: var(--cyan); }
.pw-grade--excellent { color: var(--green); }
.pw-grade--military  { color: var(--accent); }

/* Плитки: иконка, значение, подпись — по референсу */
/* Отдельные коробки с зазором — как в утверждённом макете. Слитая полоса с
   волосяными разделителями читалась как одна таблица, а это три независимых
   показателя. */
.pw-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.pw-stat {
  display: grid; grid-template-columns: 16px 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 2px 10px; padding: 14px 16px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pw-stat__icon { grid-row: 1 / 3; align-self: center; color: var(--muted); display: grid; }
.pw-stat__val {
  font: 600 20px/1.2 var(--mono); color: var(--white);
  font-variant-numeric: tabular-nums;
}
.pw-stat__label { font: 400 12px/1.3 var(--sans); color: var(--muted); }

/* ── время подбора ── */
.pw-block { display: grid; gap: 12px; min-width: 0; }
/* Одна сетка на весь блок, строки отдают в неё ячейки через display:contents.
   Пока каждая строка была своей сеткой, колонки считались по её собственному
   содержимому: «мгновенно» и «7×10¹¹ лет» давали разную ширину значения, и
   подчёркивания с полосами разъезжались от строки к строке. */
.pw-crack {
  display: grid;
  grid-template-columns: 8px max-content minmax(80px, 1fr) max-content;
  align-items: center; gap: 10px 12px; min-width: 0;
}
.pw-crack__row { display: contents; }
.pw-crack__dot { width: 8px; height: 8px; border-radius: 50%; }
.pw-crack__dot--online  { background: var(--green); }
.pw-crack__dot--offline { background: var(--cyan); }
.pw-crack__dot--gpu     { background: var(--yellow); }
.pw-crack__dot--state   { background: var(--red); }
.pw-crack__label { font: 400 13px/1.3 var(--sans); color: var(--muted2); }
.pw-crack__bar { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.pw-crack__bar i { display: block; height: 100%; width: var(--w, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .35s ease; }
.pw-crack__val { font: 500 13px/1.3 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right; }

/* ── предупреждения ── */
.pw-warn { padding: 14px 16px; background: var(--surface2);
  border: 1px solid var(--border2); border-radius: var(--radius); }
.pw-warn__title { margin: 0 0 8px; font: 600 13px/1.3 var(--sans); color: var(--text); }
.pw-warn ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pw-warn__item { font: 400 13px/1.5 var(--sans); }
.pw-warn__item--critical { color: var(--red); }
.pw-warn__item--high     { color: var(--orange); }
.pw-warn__item--medium   { color: var(--yellow); }

/* ── настройки: величина слева, состав справа ── */
.pw-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.pw-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pw-col__title { margin: 0; font: 500 12px/1 var(--sans); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }

.pw-field { display: grid; gap: 8px; min-width: 0; }
.pw-field__label { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font: 500 13px/1.3 var(--sans); color: var(--muted2); }
.pw-field__num { font: 600 15px/1 var(--mono); color: var(--white);
  font-variant-numeric: tabular-nums; }
.pw-field--pair { grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-field--pair > span { display: grid; gap: 8px; min-width: 0; }

.pw-range { width: 100%; min-height: 44px; accent-color: var(--accent); }
.pw-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.pw-input {
  width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 400 14px/1 var(--mono);
}
.pw-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-input--wide { font-size: 15px; min-height: 52px; }

/* Редкие настройки убраны под раскрытие: раньше они стояли вровень со
   слайдером длины, хотя нужны единицам. */
.pw-more { min-width: 0; }
.pw-more__sum { min-height: 44px; display: flex; align-items: center;
  font: 500 13px/1 var(--sans); color: var(--accent); cursor: pointer; }
.pw-more__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-more__body { display: grid; gap: 14px; padding-top: 8px; }

/* ── тумблеры вместо голых чекбоксов, как в референсе ── */
.pw-opts { display: grid; gap: 2px; }
.pw-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 10px; border-radius: var(--radius-sm);
  font: 400 14px/1.3 var(--sans); color: var(--text); cursor: pointer;
}
.pw-opt:hover { background: var(--surface2); }
.pw-opt--inline { justify-content: flex-start; gap: 10px; padding: 0; }

.pw-toggle {
  appearance: none; flex: none; position: relative;
  width: 38px; height: 22px; border-radius: 11px;
  background: var(--surface3); border: 1px solid var(--border2);
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.pw-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted2); transition: transform .18s ease, background .18s ease;
}
.pw-toggle:checked { background: var(--accent); border-color: var(--accent); }
.pw-toggle:checked::after { transform: translateX(16px); background: var(--white); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── проверка чужого пароля ── */
.pw-check { display: grid; gap: 8px; }
.pw-check__grade { margin: 0; font: 600 15px/1.3 var(--sans); }
.pw-check__list { margin: 0; padding-left: 18px; display: grid; gap: 4px;
  font: 400 13px/1.5 var(--sans); color: var(--muted2); }
.pw-check__ok { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--green); }

.pw-breach__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pw-breach { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm);
  font: 500 13px/1.5 var(--sans); }
.pw-breach--ok  { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.pw-breach--bad { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.pw-breach--na  { background: var(--surface2); color: var(--muted2); }

.pw-btn {
  min-height: 44px; padding: 0 16px; background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font: 500 13px/1 var(--sans); cursor: pointer; transition: border-color .15s ease;
}
.pw-btn:hover { border-color: var(--border3); }
.pw-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── история ── */
#pwHistory { min-width: 0; }
.pw-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.pw-hist__row { display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px; border-radius: var(--radius-sm); min-width: 0; }
.pw-hist__row:hover { background: var(--surface2); }
.pw-hist__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 400 13px/1 var(--mono); color: var(--muted2); }
.pw-hist__copy { flex: none; min-height: 44px; padding: 0 12px; background: none;
  color: var(--accent); border: 0; font: 500 13px/1 var(--sans); cursor: pointer; }
.pw-hist__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-hist__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.pw-empty { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }

.pw-error { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red); font: 500 13px/1.5 var(--sans); }
.pw-offscreen { position: fixed; left: -9999px; opacity: 0; }

/* Атрибут hidden против класса: правило браузера имеет меньший вес, чем
   .pw-controls{display:grid}, поэтому скрытые панели оставались видимыми. */
.pw-controls[hidden], .pw-field[hidden], #pwTool [hidden] { display: none; }

/* ── мобильные ── */
@media (max-width: 720px) {
  .pw-controls { grid-template-columns: 1fr; gap: 20px; }
  .pw-crack__row { grid-template-columns: 8px 1fr auto; }
  .pw-crack__bar { display: none; }
  .pw-out { font-size: 15px; min-height: 64px; }
  .pw-generate { min-width: 0; }
  .pw-card > * + * { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-generate, .pw-crack__bar i, .pw-meter__seg, .pw-toggle, .pw-toggle::after { transition: none; }
}

/* ── несколько кандидатов ── */
.pw-cardhead { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }

.pw-bulk { list-style: none; margin: 0; padding: 4px; min-width: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); }
.pw-bulk__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 0 14px; min-width: 0;
  border-radius: var(--radius-sm);
}
/* Разделители вместо полосатого фона: полоски спорили с фоном карточки и
   строка всё равно терялась. Волосок между строками читается спокойнее и
   оставляет ряду воздух. */
.pw-bulk__row + .pw-bulk__row { box-shadow: 0 -1px 0 var(--border); }
.pw-bulk__row:hover { background: var(--surface3); box-shadow: none; }
.pw-bulk__row:hover + .pw-bulk__row { box-shadow: none; }
.pw-bulk__dot { flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; }
/* Кнопка остаётся у правого края, как в макете: в списке из двенадцати строк
   выровненный столбец действий читается быстрее, чем кнопка, скачущая следом
   за паролем переменной длины. */
.pw-bulk__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 400 14px/1 var(--mono); color: var(--white);
  letter-spacing: .01em; }
.pw-bulk__copy { flex: none; min-height: 44px; padding: 0 10px; background: none;
  color: var(--muted2); border: 0; font: 500 12px/1 var(--sans); cursor: pointer;
  transition: color .15s ease; }
.pw-bulk__copy:hover { color: var(--accent); }
.pw-bulk__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .pw-bulk__row { padding: 0 10px; gap: 8px; }
  .pw-bulk__val { font-size: 12px; }
}

/* Подпись строки подбора отделена волоском — в макете под ней тонкая линия,
   она отбивает название сценария от полосы. */
.pw-crack__label { align-self: stretch; display: flex; align-items: center;
  padding-bottom: 0; border-bottom: 0; }

/* Границы диапазона под слайдером */
.pw-range__ends { display: flex; justify-content: space-between;
  font: 400 11px/1 var(--mono); color: var(--muted); margin-top: -4px; }

/* Проверка: поле и кнопка в одну строку, на узком экране — в столбец */
.pw-checkrow { display: flex; gap: 12px; align-items: stretch; min-width: 0; }
.pw-checkrow .pw-input { flex: 1; min-width: 0; }
.pw-btn--pair { flex: none; min-height: 52px; }
@media (max-width: 620px) {
  .pw-checkrow { flex-direction: column; }
  .pw-btn--pair { min-height: 44px; }
}

/* Ручной ввод длины рядом со слайдером: у слайдера нет точности, а 24 против
   32 — это разница в две тысячи лет подбора. */
.pw-lenbox { display: inline-flex; align-items: center; }
.pw-lennum {
  width: 64px; min-height: 32px; padding: 0 8px; text-align: center;
  background: var(--surface2); color: var(--white);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.pw-lennum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pw-sources { padding-top: 2px; }
.pw-sources a { color: var(--accent); }

/* Метод оценки подписывается рядом с числом: у своего пароля алфавит
   известен и считается формулой, у вставленного — только словарём. Молча
   показывать одно число, полученное разными способами, значит вводить в
   заблуждение. */
.pw-check__method { font: 400 12px/1 var(--sans); color: var(--muted); }
.pw-check__crack { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--muted2); }

/* ── соответствие требованиям ── */
.pw-stds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pw-std { padding: 14px 16px; background: var(--surface2);
  border: 1px solid var(--border); border-left: 2px solid var(--muted); border-radius: var(--radius-sm); }
.pw-std.is-pass { border-left-color: var(--green); }
.pw-std.is-fail { border-left-color: var(--yellow); }
.pw-std__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pw-std__name { font: 600 13px/1.3 var(--sans); color: var(--white); }
.pw-std__verdict { font: 500 12px/1 var(--mono); color: var(--muted2); font-variant-numeric: tabular-nums; }
.pw-std.is-pass .pw-std__verdict { color: var(--green); }
.pw-std.is-fail .pw-std__verdict { color: var(--yellow); }
.pw-std__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.pw-std__item { position: relative; padding-left: 18px; font: 400 12px/1.5 var(--sans); color: var(--muted2); }
/* Метка исхода — символом, а не только цветом: цвет один не читается при
   дальтонизме и не озвучивается скринридером. */
.pw-std__item::before { position: absolute; left: 0; top: 0; font: 600 12px/1.5 var(--mono); }
.pw-std__item.is-ok::before      { content: '+'; color: var(--green); }
.pw-std__item.is-no::before      { content: '−'; color: var(--yellow); }
.pw-std__item.is-unknown::before { content: '?'; color: var(--muted); }
.pw-std__note { margin: 10px 0 0; font: 400 11px/1.5 var(--sans); color: var(--muted); }

/* ── конструктор политики ── */
.pw-pol { display: grid; gap: 14px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border); min-width: 0; }
.pw-pol__worst { padding: 16px; background: var(--surface2);
  border: 1px solid var(--border2); border-left: 2px solid var(--yellow);
  border-radius: var(--radius-sm); }
.pw-pol__label { margin: 0 0 8px; font: 500 12px/1.4 var(--sans); color: var(--muted); }
.pw-pol__pw { display: block; font: 600 18px/1.4 var(--mono); color: var(--white);
  word-break: break-all; }
.pw-pol__verdict { margin: 8px 0 0; font: 500 13px/1.5 var(--sans); }
.pw-pol__notes { margin: 0; padding-left: 18px; display: grid; gap: 8px;
  font: 400 13px/1.6 var(--sans); color: var(--muted2); }
.pw-pol__text { margin: 0; padding: 14px 16px; overflow-x: auto;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: 400 13px/1.7 var(--mono); color: var(--text); }

/* ── сравнение паролей ── */
.pw-cmp__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.pw-cmp__inputs > span { display: grid; gap: 8px; min-width: 0; }
.pw-cmp { display: grid; gap: 16px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border); min-width: 0; }
.pw-cmp__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-cmp__col { padding: 14px 16px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pw-cmp__lab { margin: 0; font: 500 12px/1 var(--sans); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.pw-cmp__val { margin: 8px 0 0; font: 600 22px/1.1 var(--mono);
  font-variant-numeric: tabular-nums; }
.pw-cmp__grade { margin: 2px 0 0; font: 500 13px/1.3 var(--sans); color: var(--text); }
.pw-cmp__time { margin: 4px 0 0; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.pw-cmp__head { margin: 0; font: 600 14px/1.4 var(--sans); color: var(--white); }
.pw-cmp__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pw-cmp__part { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto;
  align-items: center; gap: 12px; min-width: 0; }
.pw-cmp__part-label { font: 400 13px/1.4 var(--sans); color: var(--muted2); }
.pw-cmp__part-bar { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.pw-cmp__part-bar i { display: block; height: 100%; width: var(--w, 0%); }
.pw-cmp__part.is-plus  .pw-cmp__part-bar i { background: var(--green); }
.pw-cmp__part.is-minus .pw-cmp__part-bar i { background: var(--red); }
.pw-cmp__part-num { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pw-cmp__part.is-plus  .pw-cmp__part-num { color: var(--green); }
.pw-cmp__part.is-minus .pw-cmp__part-num { color: var(--red); }

@media (max-width: 620px) {
  .pw-cmp__inputs, .pw-cmp__pair { grid-template-columns: 1fr; }
  .pw-cmp__part { grid-template-columns: 1fr auto; }
  .pw-cmp__part-bar { display: none; }
}

/* ── кривая роста энтропии ── */
.pw-curve { display: grid; gap: 10px; min-width: 0; }
.pw-curve__svg { width: 100%; height: auto; display: block;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.pw-curve__thr { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 3 4; }
.pw-curve__thrlab { fill: var(--muted); font: 400 9px var(--sans); }
.pw-curve__line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.pw-curve__drop { stroke: var(--accent2); stroke-width: 1; stroke-dasharray: 2 3; }
.pw-curve__dot { fill: var(--accent2); stroke: var(--bg); stroke-width: 2; }
.pw-curve__now { fill: var(--white); font: 600 11px var(--mono); }