/* DEVIL-DS · круглая кнопка: линза + жидкое нажатие. Блок 1 — как в стенде DS (artifact SLDb5YiT75vKNLS7tmtQJe), не править руками */

/* тень — общие токены для всех стеклянных элементов: кнопки, капсулы, поля */
.dv-rb, .dv-pill, .dv-field, .dv-bar {
  --dv-rb-shadow-outer-color-rgb: 0 0 0;
  --dv-rb-shadow-outer-blur: 2px;
  --dv-rb-shadow-outer-spread: 2px;
  --dv-rb-shadow-outer-inset: 1px;
  --dv-rb-shadow-outer-opacity: 100%;
}
.dv-pill::before, .dv-field::before, .dv-bar::before {
  content: ""; position: absolute; inset: var(--dv-rb-shadow-outer-inset); border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 0 var(--dv-rb-shadow-outer-blur) calc(var(--dv-rb-shadow-outer-spread) + var(--dv-rb-shadow-outer-inset)) rgb(var(--dv-rb-shadow-outer-color-rgb));
  opacity: var(--dv-rb-shadow-outer-opacity); transition: opacity 150ms ease;
}
.dv-rb {
  --dv-rb-box: 48px;
  --dv-rb-rim-width: 0.8px;
  --dv-rb-glass-color-rgb: 0 0 0;
  --dv-rb-glass-alpha: 45%;
  --dv-rb-shadow-outer-color-rgb: 0 0 0;
  --dv-rb-shadow-outer-blur: 2px;
  --dv-rb-shadow-outer-spread: 2px;
  --dv-rb-shadow-outer-inset: 1px;
  --dv-rb-shadow-inner-color-rgb: 0 0 0;
  --dv-rb-icon-glow-radius: 2px;
  --dv-rb-transition-color: 150ms;
  --dv-rb-rim-fill-default: linear-gradient(125deg, rgb(var(--dv-rb-rim-rgb) / 0.8) 14.6%, rgb(var(--dv-rb-rim-rgb) / 0.675) 18.45%, rgb(var(--dv-rb-rim-rgb) / 0.4) 22.3%, rgb(var(--dv-rb-rim-rgb) / 0.125) 26.15%, rgb(var(--dv-rb-rim-rgb) / 0) 30%, rgb(var(--dv-rb-rim-rgb) / 0) 70%, rgb(var(--dv-rb-rim-rgb) / 0.125) 73.85%, rgb(var(--dv-rb-rim-rgb) / 0.4) 77.7%, rgb(var(--dv-rb-rim-rgb) / 0.675) 81.55%, rgb(var(--dv-rb-rim-rgb) / 0.8) 85.4%);
  --dv-rb-rim-fill-pressed: linear-gradient(125deg, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 1) 55%, rgb(255 255 255 / 1)) 14.6%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 1) 55%, rgb(255 255 255 / 1)) 18.45%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0.75) 55%, rgb(255 255 255 / 0.75)) 22.3%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0.234) 55%, rgb(255 255 255 / 0.234)) 26.15%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0) 55%, rgb(255 255 255 / 0)) 30%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0) 55%, rgb(255 255 255 / 0)) 70%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0.234) 55%, rgb(255 255 255 / 0.234)) 73.85%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 0.75) 55%, rgb(255 255 255 / 0.75)) 77.7%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 1) 55%, rgb(255 255 255 / 1)) 81.55%, color-mix(in srgb, rgb(var(--dv-rb-rim-rgb) / 1) 55%, rgb(255 255 255 / 1)) 85.4%);

  --dv-rb-glass-saturate: 120%;
  --dv-rb-glass-brightness: 120%;
  --dv-rb-shadow-outer-opacity: 100%;
  --dv-rb-shadow-inner: inset 0 0 0px rgb(0 0 0 / 0%);
  --dv-rb-icon-size: 24px;
  --dv-rb-icon-opacity: 100%;
  --dv-rb-icon-stroke: 1.68;
  --dv-rb-fill-alpha: var(--dv-rb-tone-fill-default, 10%);
  --dv-rb-icon-color: var(--dv-rb-tone-icon-default);
  --dv-rb-rim-show-default: 1;
  --dv-rb-rim-show-pressed: 0;
  --sx: 1; --sy: 1;
}
.dv-rb[data-pressed] {
  --dv-rb-glass-saturate: 110%;
  --dv-rb-glass-brightness: 80%;
  --dv-rb-shadow-outer-opacity: 0%;
  --dv-rb-shadow-inner: inset 0 0 3px rgb(var(--dv-rb-shadow-inner-color-rgb) / 45%);
  --dv-rb-icon-opacity: 100%;
  --dv-rb-icon-stroke: 1.867;
  --dv-rb-fill-alpha: var(--dv-rb-tone-fill-pressed, 25%);
  --dv-rb-icon-color: var(--dv-rb-tone-icon-pressed);
  --dv-rb-rim-show-default: 0;
  --dv-rb-rim-show-pressed: 1;
}
.dv-rb[data-tone="messages"] { --dv-rb-tint-rgb: 42 171 238; --dv-rb-rim-rgb: 42 171 238; --dv-rb-tone-icon-default: #4CC2FF; --dv-rb-tone-icon-pressed: #4CC2FF; }
.dv-rb[data-tone="violetta"] { --dv-rb-tint-rgb: 244 114 182; --dv-rb-rim-rgb: 244 114 182; --dv-rb-tone-icon-default: #F472B6; --dv-rb-tone-icon-pressed: #F472B6; }
.dv-rb[data-tone="notifications"] { --dv-rb-tint-rgb: 250 204 21; --dv-rb-rim-rgb: 250 204 21; --dv-rb-tone-icon-default: #FACC15; --dv-rb-tone-icon-pressed: #FACC15; }
.dv-rb[data-tone="neutral"] { --dv-rb-tint-rgb: 255 255 255; --dv-rb-rim-rgb: 255 255 255; --dv-rb-tone-icon-default: #F5F5F5; --dv-rb-tone-icon-pressed: #F5F5F5; --dv-rb-tone-fill-default: 6%; --dv-rb-tone-fill-pressed: 25%; }
.dv-rb[data-tone="positive"] { --dv-rb-tint-rgb: 34 197 94; --dv-rb-rim-rgb: 34 197 94; --dv-rb-tone-icon-default: #4ADE80; --dv-rb-tone-icon-pressed: #4ADE80; }
.dv-rb[data-tone="negative"] { --dv-rb-tint-rgb: 239 68 68; --dv-rb-rim-rgb: 239 68 68; --dv-rb-tone-icon-default: #F87171; --dv-rb-tone-icon-pressed: #F87171; }
/* действие (отправить, сохранить): прозрачное стекло, синий ободок и синяя иконка — без заливки (правило 2 DS) */
.dv-rb[data-tone="send"] { --dv-rb-tint-rgb: 59 130 246; --dv-rb-rim-rgb: 147 187 250; --dv-rb-tone-icon-default: #60A5FA; --dv-rb-tone-icon-pressed: #93BBFA; }
.dv-rb[data-tone="accent"] { --dv-rb-tint-rgb: 245 158 11; --dv-rb-rim-rgb: 245 158 11; --dv-rb-tone-icon-default: #F5A524; --dv-rb-tone-icon-pressed: #F5A524; }

.dv-rb {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--dv-rb-box); height: var(--dv-rb-box);
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  box-shadow: var(--dv-rb-shadow-inner);
  transform: translate(calc(var(--st, 0) * 1px), calc(var(--su, 0) * 1px)) scale(var(--sx), var(--sy));
  will-change: transform;
  transition: box-shadow var(--dv-rb-transition-color) ease;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.dv-rb::before {
  content: ""; position: absolute; inset: var(--dv-rb-shadow-outer-inset); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 var(--dv-rb-shadow-outer-blur) calc(var(--dv-rb-shadow-outer-spread) + var(--dv-rb-shadow-outer-inset)) rgb(var(--dv-rb-shadow-outer-color-rgb));
  opacity: var(--dv-rb-shadow-outer-opacity); transition: opacity var(--dv-rb-transition-color) ease;
}
.dv-rb > span, .dv-rb__rim > span { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.dv-rb__lens { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; pointer-events: none; }
.dv-rb__glass {
  background: rgb(var(--dv-rb-glass-color-rgb) / var(--dv-rb-glass-alpha));
  -webkit-backdrop-filter: blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
  backdrop-filter: blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
}
.eng-svg .dv-rb__lens { display: none; }
.eng-svg .dv-rb__glass {
  -webkit-backdrop-filter: url(#dv-lens) blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
  backdrop-filter: url(#dv-lens) blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
}
.dv-rb__fill { background: rgb(var(--dv-rb-tint-rgb) / var(--dv-rb-fill-alpha)); transition: background-color var(--dv-rb-transition-color) ease; }
.dv-rb > .dv-rb__rim { overflow: hidden; display: none; }
/* рим кнопки: линия по контуру, перерисовывается по текущей форме (см. drawRim). Толщина 0.8px при любом масштабе,
   блик качается по кромке, когда форма переливается */
.dv-rb__rim2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: rgb(var(--dv-rb-rim-rgb)); }
.dv-rb[data-pressed] .dv-rb__rim2 { color: color-mix(in srgb, rgb(var(--dv-rb-rim-rgb)) 55%, #fff); }
.dv-rb[aria-disabled="true"] .dv-rb__rim2 { opacity: .3; }
.dv-rb__rim > span { transition: opacity var(--dv-rb-transition-color) ease; }
.dv-rb__rim > span::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: var(--dv-rb-rim-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.dv-rb__rim > [data-s="default"] { opacity: var(--dv-rb-rim-show-default); }
.dv-rb__rim > [data-s="pressed"] { opacity: var(--dv-rb-rim-show-pressed); }
.dv-rb__rim > [data-s="default"]::before { background: var(--dv-rb-rim-fill-default); }
.dv-rb__rim > [data-s="pressed"]::before { background: var(--dv-rb-rim-fill-pressed); }
.dv-rb > .dv-rb__icon {
  display: block; margin: auto; width: var(--dv-rb-icon-size); height: var(--dv-rb-icon-size);
  color: var(--dv-rb-icon-color); opacity: var(--dv-rb-icon-opacity);
  transition: color var(--dv-rb-transition-color) ease, opacity var(--dv-rb-transition-color) ease;
}
/* цветные кнопки: иконка насыщенного цвета своей кнопки, без свечения — как активная вкладка нижнего меню */
.dv-rb__icon svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--dv-rb-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
/* недоступна: стекло и тень на месте, гаснут только иконка, заливка и кромка */
.dv-rb[aria-disabled="true"] { cursor: not-allowed; --dv-rb-icon-opacity: 28%; --dv-rb-fill-alpha: 0%; --dv-rb-rim-show-default: .3; }
/* загрузка: иконка крутится */
.dv-rb[data-busy] .dv-rb__icon svg { animation: dv-spin .9s linear infinite; }
.dv-rb[data-busy="down"] .dv-rb__icon svg { animation: dv-drop 1s ease-in-out infinite; }
@keyframes dv-spin { to { transform: rotate(360deg); } }
@keyframes dv-drop { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
/* кольцо прогресса: скачивание и удержание */
.dv-rb__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; transform: rotate(-90deg); opacity: 0; transition: opacity .2s; }
.dv-rb__ring circle { fill: none; stroke: rgb(var(--ring-rgb, 255 255 255)); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 2px rgb(var(--ring-rgb, 255 255 255) / .7)); }
.dv-rb[data-ring] .dv-rb__ring { opacity: 1; }
.dv-rb__icon svg .fillable { fill: none; transition: fill .2s; }
.dv-rb[aria-pressed="true"] .dv-rb__icon svg .fillable { fill: currentColor; }
.dv-rb:focus-visible { outline: 1.5px solid rgb(255 255 255 / 85%); outline-offset: 3px; }

/* ---------- Блок 2 — посадка DS на CIGI ----------
   Размер берём из сетки CIGI (--p-btn = 44), DS-стенд рисует 48. Старое стекло .glass-round / .glass-btn гасим —
   теперь кнопку рисуют слои DS: стекло, заливка тона, кромка-линия (svg) и пружина (transform из js/ds-liquid.js) */
.rbtn.dv-rb { --dv-rb-box: var(--p-btn, 44px); --dv-rb-icon-size: 22px; }
.rbtn.rbtn--sm.dv-rb { --dv-rb-box: 36px; --dv-rb-icon-size: 18px; }
html .rbtn.dv-rb, html .rbtn.dv-rb:hover, html .rbtn.dv-rb:active {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: var(--dv-rb-shadow-inner) !important; color: var(--dv-rb-icon-color) !important;
  transform: translate(calc(var(--st, 0) * 1px), calc(var(--su, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1)) !important;
  transition: box-shadow var(--dv-rb-transition-color) ease, width .38s cubic-bezier(.3,.7,.2,1) !important;
}
html .rbtn.dv-rb::before {
  content: "" !important; position: absolute; inset: var(--dv-rb-shadow-outer-inset) !important; padding: 0 !important;
  border-radius: inherit !important; background: none !important; -webkit-mask: none !important; mask: none !important; mix-blend-mode: normal !important;
  box-shadow: 0 0 var(--dv-rb-shadow-outer-blur) calc(var(--dv-rb-shadow-outer-spread) + var(--dv-rb-shadow-outer-inset)) rgb(var(--dv-rb-shadow-outer-color-rgb)) !important;
  opacity: var(--dv-rb-shadow-outer-opacity) !important; transition: opacity var(--dv-rb-transition-color) ease !important;
}
html .rbtn.dv-rb::after { display: none !important; }
.rbtn.dv-rb > .dv-rb__glass, .rbtn.dv-rb > .dv-rb__fill { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.rbtn.dv-rb > .dv-rb__rim2 { border-radius: inherit; }
.rbtn.dv-rb > :is(svg.ic, .ic, .sec-item__lbl) { position: relative; z-index: 1; color: inherit; transition: color var(--dv-rb-transition-color) ease; }
.rbtn.dv-rb > svg.ic { stroke-width: var(--dv-rb-icon-stroke); }
.rbtn.dv-rb > .dv-badge { z-index: 2; }
/* вытянутые кнопки (капсула в полоске подстраниц) и маленькие: без линзы, кромка по контуру капсулы */
.eng-svg .rbtn.dv-rb:is(.dv-rb--pill, .rbtn--sm) .dv-rb__glass {
  -webkit-backdrop-filter: blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
  backdrop-filter: blur(var(--lab-blur, 0px)) saturate(var(--dv-rb-glass-saturate)) brightness(var(--dv-rb-glass-brightness));
}

html .dv-pill.glass-btn { position: relative; }   /* заголовок топа остаётся absolute — он центрируется сам */
/* капсулы с текстом (.glass-btn, заголовок топа): стекло DS, кромка-линия по контуру, пружина */
html .dv-pill.glass-btn, html .dv-pill.glass-btn:hover, html .dv-pill.glass-btn:active, html .dv-pill.cigi-sub-title {
  isolation: isolate; border: 0 !important;
  background: rgb(0 0 0 / 45%) !important;
  -webkit-backdrop-filter: saturate(120%) brightness(120%) !important; backdrop-filter: saturate(120%) brightness(120%) !important;
  transform: translate(calc(var(--st, 0) * 1px), calc(var(--su, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1)) !important;
  transition: box-shadow 150ms ease !important; box-shadow: none !important;
}
html .dv-pill.glass-btn::before, html .dv-pill.cigi-sub-title::before {
  content: "" !important; position: absolute; inset: 1px !important; padding: 0 !important; z-index: -1; border-radius: inherit !important;
  background: none !important; -webkit-mask: none !important; mask: none !important; mix-blend-mode: normal !important; opacity: 1 !important;
  box-shadow: 0 0 2px 3px rgb(0 0 0) !important; transition: opacity 150ms ease !important;
}
html .dv-pill[data-pressed] { box-shadow: inset 0 0 3px rgb(0 0 0 / 45%) !important; }
html .dv-pill[data-pressed]::before { opacity: 0 !important; }
.dv-pill .dv-pill__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #fff; z-index: 1; }
.dv-pill.glass-btn-gold { --pill-tint: 245 158 11; }
.dv-pill.glass-btn-danger { --pill-tint: 239 68 68; }
.dv-pill.glass-btn-success { --pill-tint: 74 222 128; }   /* зелёная — «да» */
html .dv-pill:is(.glass-btn-gold, .glass-btn-danger, .glass-btn-success), html .dv-pill.glass-btn:is(.glass-btn-gold, .glass-btn-danger, .glass-btn-success):is(:hover, :active) { background: linear-gradient(rgb(var(--pill-tint) / 10%), rgb(var(--pill-tint) / 10%)), rgb(0 0 0 / 45%) !important; }
.dv-pill.glass-btn-gold .dv-pill__rim { color: #F5A524; }
.dv-pill.glass-btn-danger .dv-pill__rim { color: #F87171; }
.dv-pill.glass-btn-success .dv-pill__rim { color: var(--green); }
.dv-pill.glass-btn-success { color: var(--green); }

/* ---------- поле DS (стенд: «Сообщение Віолетте», «Поле с проверкой») ----------
   Старое поле CIGI гасим целиком: его фон, блюр, внутреннюю тень и янтарную кромку на фокусе.
   Стекло поля — в ::after (иначе маленькие кнопки внутри видели бы только поле), кромка — линия svg по контуру.
   Покой — прозрачное стекло как остальные блоки; фокус — углубляется; ошибка — красное, тряска */
html .dv-field.cigi-field-wrap, html .dv-field.cigi-field-wrap:focus-within, html .dv-field.cigi-field-wrap:hover {
  border-radius: 999px; isolation: isolate; background: none !important; box-shadow: none !important;
  transform: translate(calc(var(--st, 0) * 1px), calc(var(--su, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1));   /* соседняя кнопка раздулась — поле отъезжает */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 10px 0 0; gap: 8px; }
html .dv-field.cigi-field-wrap::before {
  content: "" !important; position: absolute; inset: 1px !important; padding: 0 !important; z-index: -2 !important; border-radius: inherit !important;
  background: none !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important;
  box-shadow: 0 0 2px 3px rgb(0 0 0) !important; transition: none !important; }
html .dv-field.cigi-field-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(0 0 0 / 45%); -webkit-backdrop-filter: blur(3px) saturate(120%) brightness(120%); backdrop-filter: blur(3px) saturate(120%) brightness(120%);
  box-shadow: inset 0 0 14px rgb(0 0 0 / .95), inset 0 0 4px rgb(0 0 0 / .6);   /* поле: блюр 3px + внутренняя чёрная тень (13.11) */
  transition: background-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
html .dv-field.cigi-field-wrap:focus-within::after { background-color: rgb(0 0 0 / 55%);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(90%); backdrop-filter: blur(18px) saturate(140%) brightness(90%);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .75), inset 0 -1px 3px rgb(0 0 0 / .4); }
html .dv-field.cigi-field-wrap[data-invalid]::after { background: linear-gradient(rgb(239 68 68 / .16), rgb(239 68 68 / .16)), rgb(0 0 0 / 45%); }
html .dv-field.cigi-field-wrap[data-invalid]:focus-within::after { background: linear-gradient(rgb(239 68 68 / .16), rgb(239 68 68 / .16)), rgb(0 0 0 / 55%); }
html .dv-field.cigi-field-wrap[data-invalid] { animation: none; }
html .dv-field.cigi-field-wrap[data-invalid] > .dv-pill__rim { color: #F87171; }
html .dv-field.cigi-field-wrap[data-invalid] .cigi-field-input { color: #FECACA; }
html .dv-field.shake { animation: dv-field-shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes dv-field-shake { 15% { transform: translateX(-6px); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } 100% { transform: none; } }
html .dv-field .cigi-field-input { background: transparent !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #fff; font: 500 15px/1 Inter, -apple-system, BlinkMacSystemFont, sans-serif; padding-right: 0; }
html .dv-field .cigi-field-input::placeholder { color: rgb(255 255 255 / .45); }
html .dv-field .cigi-field-input::-webkit-search-cancel-button { display: none; }
html .dv-field .cigi-field-actions { background: none !important; padding: 0; gap: 0; }
.dv-field > .dv-pill__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #fff; z-index: 2; }
/* состояние поля красит всё поле целиком, иконку тоже: ошибка — красная иконка, успех (.has-success) — зелёная */
html .dv-field.cigi-field-wrap[data-invalid] .cigi-field-icon { color: #F87171; opacity: 1; }
html .dv-field.cigi-field-wrap[data-valid]::after { background: linear-gradient(rgb(34 197 94 / .14), rgb(34 197 94 / .14)), rgb(0 0 0 / 45%); }
html .dv-field.cigi-field-wrap[data-valid]:focus-within::after { background: linear-gradient(rgb(34 197 94 / .14), rgb(34 197 94 / .14)), rgb(0 0 0 / 55%); }
html .dv-field.cigi-field-wrap[data-valid] > .dv-pill__rim { color: #4ADE80; }
html .dv-field.cigi-field-wrap[data-valid] .cigi-field-icon { color: #4ADE80; opacity: 1; }
html .dv-field.cigi-field-wrap[data-valid] .cigi-field-input { color: #BBF7D0; }
html .cigi-field-wrap.is-disabled .cigi-field-icon { opacity: .28; }
/* подписи у поля: ошибка — красная на тёмной плашке, как в стенде */
html .cigi-field-error-msg { justify-self: start; display: inline-flex; margin: 6px 0 0 12px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .72); font-size: 12px; color: #F87171; }

/* маленькая круглая кнопка внутри поля (очистить): 28, иконка 14, тот же рим и пружина, без линзы */
html .cigi-field-icon-btn.dv-rb.dv-rb--mini { --dv-rb-box: 28px; --dv-rb-icon-size: 14px; --dv-rb-icon-stroke: 2; z-index: 1;
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent !important; color: var(--dv-rb-icon-color);
  transform: translate(calc(var(--st, 0) * 1px), calc(var(--su, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1)); }
html .cigi-field-icon-btn.dv-rb--mini::after { display: none !important; }
.cigi-field-icon-btn.dv-rb--mini > .dv-rb__glass, .cigi-field-icon-btn.dv-rb--mini > .dv-rb__fill { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cigi-field-icon-btn.dv-rb--mini > svg.ic { position: relative; z-index: 1; width: 14px; height: 14px; stroke-width: 2; }
.cigi-field-icon-btn.dv-rb--mini[hidden] { display: none; }
.eng-svg .dv-rb--mini .dv-rb__glass { -webkit-backdrop-filter: saturate(120%) brightness(120%); backdrop-filter: saturate(120%) brightness(120%); }

/* недоступная кнопка (disabled тоже): стекло и тень на месте, гаснут иконка, заливка и кромка */
.dv-rb:disabled { cursor: not-allowed; --dv-rb-icon-opacity: 28%; --dv-rb-fill-alpha: 0%; }
.dv-rb:is(:disabled, [aria-disabled="true"]) .dv-rb__rim2 { opacity: .3; }
.rbtn.dv-rb > svg.ic { opacity: var(--dv-rb-icon-opacity); }

/* заголовок топа — капсула DS топ-меню, шрифт на 2px меньше стенда: 700 14px капсом, +4%; капсула ужата пропорционально — 32 (центр в ряду 36) */
html .top-center > .cigi-sub-title.dv-pill { height: 32px; line-height: 32px; top: 2px; padding: 0 1em; font: 700 14px/32px Inter, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; }

@media (prefers-reduced-motion: reduce) { html .rbtn.dv-rb, html .dv-pill { transition: none !important; } }

/* ---------- нижнее меню DS: стеклянная капсула, вкладки 48, под активной — янтарная линза-индикатор ---------- */
:root, html.is-app { --p-menu-h: 66px; --p-tab: 60px;   /* как DS-стенд (капсула = вкладка + 3 сверху и снизу), только крупнее: вкладка и линза 60 */
  --p-content-bottom: calc(var(--p-bottom-safe) + var(--p-menu-h) + 12px + 44px + 32px); }
.bottom-bar.dv-bar { padding: 0 3px; background: none; isolation: isolate; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* стекло капсулы — в ::after, иначе линза индикатора видела бы только капсулу, а не фон страницы */
.bottom-bar.dv-bar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(0 0 0 / 45%); -webkit-backdrop-filter: saturate(120%) brightness(120%); backdrop-filter: saturate(120%) brightness(120%); }
.bottom-bar.dv-bar::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -2;
  box-shadow: 0 0 2px 3px rgb(0 0 0); }
.bottom-bar.dv-bar > .dv-bar__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #fff; z-index: 2; }
.dv-bar__tab { position: relative; z-index: 1; width: var(--p-tab); height: var(--p-tab); flex: none; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #8E8E93; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transform: scale(var(--ts, 1)); transition: color .25s; }
/* активный раздел — белая иконка на активном стекле (без золота); остальные — серые #8E8E93; без активного раздела все белые */
.dv-bar__tab[aria-selected="true"], .dv-bar.is-none .dv-bar__tab { color: #fff; }
.bottom-bar .dv-bar__tab > .dv-bar__badge { position: absolute; right: 7px; top: 5px; z-index: 3; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; box-sizing: border-box;
  background: #EF4444; color: #fff; box-shadow: 0 0 0 2px #000; font: 700 11px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bottom-bar .dv-bar__tab > .dv-bar__badge::before, .bottom-bar .dv-bar__tab > .dv-bar__badge::after { display: none; }
.dv-bar__tab:focus-visible { outline: 1.5px solid rgb(255 255 255 / 85%); outline-offset: 2px; }
.dv-bar__tab > .ic { width: 28px; height: 28px; stroke-width: 1.68; pointer-events: none; }
.bottom-bar.dv-bar > .dv-rb--ind { --dv-rb-box: var(--p-tab); position: absolute; left: 0; top: calc(50% - var(--p-tab) / 2); z-index: 0; pointer-events: none; transform-origin: 50% 50%;
  --dv-rb-shadow-outer-opacity: 0%; --dv-rb-tone-fill-default: 10%; --dv-rb-tone-fill-pressed: 18%; }
.bottom-bar.dv-bar > .dv-rb--ind > .dv-rb__glass, .bottom-bar.dv-bar > .dv-rb--ind > .dv-rb__fill { position: absolute; inset: 0; border-radius: 50%; }
.bottom-bar.dv-bar > .dv-rb--ind .dv-rb__glass { background: rgb(0 0 0 / 40%); }
.eng-svg .bottom-bar.dv-bar > .dv-rb--ind .dv-rb__glass {
  -webkit-backdrop-filter: url(#dv-lens-tab) saturate(120%) brightness(120%); backdrop-filter: url(#dv-lens-tab) saturate(120%) brightness(120%); }

/* поле поиска: иконка одним цветом. Раньше серый был полупрозрачным штрихом — где линии лупы пересекаются, просвечивал стык.
   Прозрачность теперь на всей иконке целиком, штрих сплошной */
html .cigi-field-wrap .cigi-field-icon { color: #fff; opacity: .5; transition: opacity .25s ease, color .25s ease; }
html .cigi-field-wrap:focus-within .cigi-field-icon { color: #fff; opacity: .7; }

/* полоска подстраниц, когда их много (прокрутка): место сверху и снизу, чтобы раздутая кнопка не обрезалась,
   и прокрутка на всю ширину экрана */
.sec-nav.is-many { padding: 14px var(--p-pad); margin: -14px 0; height: calc(var(--cap-h) + 28px); box-sizing: border-box; }

/* аватарка аккаунта в круглой кнопке: фото под стеклянной кромкой DS, пружина и толкание — как у всех кнопок */
.rbtn.dv-rb.rbtn--avatar > .rbtn__avatar { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; object-fit: cover; z-index: 0; pointer-events: none; -webkit-user-drag: none; }
.rbtn.dv-rb.rbtn--avatar > .dv-rb__rim2 { z-index: 1; }
.rbtn.dv-rb.rbtn--avatar > .dv-rb__fill { display: none; }
.rbtn.dv-rb.rbtn--avatar[data-pressed] > .rbtn__avatar { filter: brightness(.85); }
/* Мессенджер и Віолетта (списки): снизу нет капсулы с названием раздела */
body.no-secnav .sec-nav { display: none !important; }