/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
/* ------------[Файл «style.css»]------------ // Содержит исходный код модуля «оформление интерфейса» и его связанные обработчики. Модуль: «карта исходного кода». Часть 1/1 */
/* Во время замены палитры все цвета фиксируются в одном кадре. */
html.vmesta-theme-updating :where(*, *::before, *::after) {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/*! ======[ТЕМА МОНЕТ ЧАСТЬ 1/6: ЦВЕТОВЫЕ ТОКЕНЫ]========== */
/*! ======[ТЕМА МОНЕТ ЧАСТЬ 2/6: ДИНАМИЧЕСКИЕ КОМПОНЕНТЫ]========== */
/*! ======[ПЛАВНОЕ ОТКРЫТИЕ ПОСТА ЧАСТЬ 3/3: ПАНЕЛЬ ВЫЕЗЖАЕТ СПРАВА ИЗ-ПОД ФОТО]========== */
/*! ======[АЛЬБОМЫ ЧАСТЬ 7/8: ДИНАМИЧЕСКАЯ ТЕМА, СЛОИ И ПРОПОРЦИИ]========== */
/*! ======[ВИТРИНА АВАТАРОВ ЧАСТЬ 6/6: КОМПАКТНАЯ КНОПКА И КАРТОЧКИ]========== */
/*! ======[ПОСТЫ ЧАСТЬ 6/6: СЕТКИ МЕДИАГРУПП И ПРЕДПРОСМОТРА]========== */
/*! ======[АЛЬБОМЫ ЧАСТЬ 6/6: КАРТОЧКИ, МЕНЮ И ФОТОСТЕНА]========== */
/*! ======[АЛЬБОМЫ ЧАСТЬ 7/8: ФИНАЛЬНЫЕ ДИНАМИЧЕСКИЕ ПЕРЕОПРЕДЕЛЕНИЯ]========== */
/* ------------[Шрифт только для emoji-символов]------------ // Ограничивает цветной шрифт диапазонами эмодзи и флагов, поэтому цифры, даты, размеры файлов и счётчики остаются системными. Модуль: «эмодзи во всех редакторах». Часть 2/2 */
@font-face {
  font-family: "Vmesta Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/notocoloremoji/v40/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFab4.ttf") format("truetype");
  unicode-range: U+1F000-1FAFF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D;
}
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Vmesta Color Emoji", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-3xl: 64px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .-inset-2 {
    inset: calc(var(--spacing) * -2);
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-\[calc\(100\%\+0\.6rem\)\] {
    top: calc(100% + 0.6rem);
  }
  .top-\[calc\(100\%\+12px\)\] {
    top: calc(100% + 12px);
  }
  .top-\[calc\(100\%\+14px\)\] {
    top: calc(100% + 14px);
  }
  .top-\[calc\(100\%\+15px\)\] {
    top: calc(100% + 15px);
  }
  .top-full {
    top: 100%;
  }
  .-right-0\.5 {
    right: calc(var(--spacing) * -0.5);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-7 {
    right: calc(var(--spacing) * 7);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .right-10 {
    right: calc(var(--spacing) * 10);
  }
  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -0.5);
  }
  .-bottom-1\.5 {
    bottom: calc(var(--spacing) * -1.5);
  }
  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .bottom-11\.25 {
    bottom: calc(var(--spacing) * 11.25);
  }
  .bottom-full {
    bottom: 100%;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-3\.5 {
    left: calc(var(--spacing) * 3.5);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-100 {
    z-index: 100;
  }
  .z-1000 {
    z-index: 1000;
  }
  .z-1010 {
    z-index: 1010;
  }
  .z-2100 {
    z-index: 2100;
  }
  .z-3000 {
    z-index: 3000;
  }
  .z-9999 {
    z-index: 9999;
  }
  .z-10000 {
    z-index: 10000;
  }
  .z-10001 {
    z-index: 10001;
  }
  .z-20000 {
    z-index: 20000;
  }
  .z-20500 {
    z-index: 20500;
  }
  .z-21000 {
    z-index: 21000;
  }
  .z-21500 {
    z-index: 21500;
  }
  .z-22000 {
    z-index: 22000;
  }
  .z-60000 {
    z-index: 60000;
  }
  .z-\[10000\] {
    z-index: 10000;
  }
  .z-\[50000\] {
    z-index: 50000;
  }
  .z-\[60000\] {
    z-index: 60000;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -0.5);
  }
  .-mt-24 {
    margin-top: calc(var(--spacing) * -24);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-40 {
    margin-left: calc(var(--spacing) * 40);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .\!grid {
    display: grid !important;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-62\.5 {
    height: calc(var(--spacing) * 62.5);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-\[calc\(100dvh-1rem\)\] {
    height: calc(100dvh - 1rem);
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }
  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .max-h-112\.5 {
    max-height: calc(var(--spacing) * 112.5);
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .max-h-\[85vh\] {
    max-height: 85vh;
  }
  .max-h-\[86dvh\] {
    max-height: 86dvh;
  }
  .max-h-\[95vh\] {
    max-height: 95vh;
  }
  .max-h-\[150px\] {
    max-height: 150px;
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }
  .min-h-25 {
    min-height: calc(var(--spacing) * 25);
  }
  .min-h-37\.5 {
    min-height: calc(var(--spacing) * 37.5);
  }
  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }
  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }
  .min-h-75 {
    min-height: calc(var(--spacing) * 75);
  }
  .min-h-100 {
    min-height: calc(var(--spacing) * 100);
  }
  .min-h-125 {
    min-height: calc(var(--spacing) * 125);
  }
  .min-h-\[45vh\] {
    min-height: 45vh;
  }
  .min-h-\[400px\] {
    min-height: 400px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-1\/3 {
    width: calc(1 / 3 * 100%);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2\/3 {
    width: calc(2 / 3 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-60 {
    width: calc(var(--spacing) * 60);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-78 {
    width: calc(var(--spacing) * 78);
  }
  .w-85\.5 {
    width: calc(var(--spacing) * 85.5);
  }
  .w-\[50px\] {
    width: 50px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-32\.5 {
    max-width: calc(var(--spacing) * 32.5);
  }
  .max-w-50 {
    max-width: calc(var(--spacing) * 50);
  }
  .max-w-350 {
    max-width: calc(var(--spacing) * 350);
  }
  .max-w-360 {
    max-width: calc(var(--spacing) * 360);
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[1100px\] {
    max-width: 1100px;
  }
  .max-w-\[1400px\] {
    max-width: 1400px;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-4\.5 {
    min-width: calc(var(--spacing) * 4.5);
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }
  .min-w-14 {
    min-width: calc(var(--spacing) * 14);
  }
  .min-w-32\.5 {
    min-width: calc(var(--spacing) * 32.5);
  }
  .min-w-37\.5 {
    min-width: calc(var(--spacing) * 37.5);
  }
  .min-w-\[250px\] {
    min-width: 250px;
  }
  .min-w-\[320px\] {
    min-width: 320px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-\[1\.5\] {
    flex: 1.5;
  }
  .flex-\[1\.8\] {
    flex: 1.8;
  }
  .flex-\[1\.25\] {
    flex: 1.25;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .origin-top {
    transform-origin: top;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-10 {
    --tw-translate-x: calc(var(--spacing) * 10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-20 {
    --tw-translate-y: calc(var(--spacing) * 20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-\[0\.95\] {
    scale: 0.95;
  }
  .scale-\[0\.98\] {
    scale: 0.98;
  }
  .scale-\[0\.985\] {
    scale: 0.985;
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-bounce {
    animation: var(--animate-bounce);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-zoom-in {
    cursor: zoom-in;
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-50 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-50);
    }
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[1\.75rem\] {
    border-radius: 1.75rem;
  }
  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-\[3rem\] {
    border-radius: 3rem;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[15px\] {
    border-radius: 15px;
  }
  .rounded-\[18px\] {
    border-radius: 18px;
  }
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  .rounded-\[22px\] {
    border-radius: 22px;
  }
  .rounded-\[30px\] {
    border-radius: 30px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-amber-100 {
    border-color: var(--color-amber-100);
  }
  .border-blue-50 {
    border-color: var(--color-blue-50);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .border-blue-100\/50 {
    border-color: color-mix(in srgb, oklch(93.2% 0.032 255.585) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
    }
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-blue-200\/70 {
    border-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-200) 70%, transparent);
    }
  }
  .border-blue-400\/20 {
    border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-400) 20%, transparent);
    }
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-blue-500\/20 {
    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }
  .border-blue-500\/30 {
    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
    }
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .border-gray-50 {
    border-color: var(--color-gray-50);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-100\/50 {
    border-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
    }
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-orange-200\/70 {
    border-color: color-mix(in srgb, oklch(90.1% 0.076 70.697) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-orange-200) 70%, transparent);
    }
  }
  .border-red-100 {
    border-color: var(--color-red-100);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-400\/20 {
    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent);
    }
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-slate-50 {
    border-color: var(--color-slate-50);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-200\/50 {
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);
    }
  }
  .border-slate-200\/60 {
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);
    }
  }
  .border-slate-200\/70 {
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/15 {
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-white\/30 {
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .border-white\/40 {
    border-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .border-t-white {
    border-top-color: var(--color-white);
  }
  .bg-\[\#101010\] {
    background-color: #101010;
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/45 {
    background-color: color-mix(in srgb, #000 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-black\/80 {
    background-color: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-50\/30 {
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
  }
  .bg-blue-50\/85 {
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 85%, transparent);
    }
  }
  .bg-blue-50\/90 {
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 90%, transparent);
    }
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-blue-500\/5 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
    }
  }
  .bg-blue-500\/10 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }
  .bg-blue-500\/15 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
    }
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-blue-600\/90 {
    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-600) 90%, transparent);
    }
  }
  .bg-blue-900\/50 {
    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
    }
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-50\/30 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 30%, transparent);
    }
  }
  .bg-gray-50\/50 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
    }
  }
  .bg-gray-50\/60 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 60%, transparent);
    }
  }
  .bg-gray-50\/70 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 70%, transparent);
    }
  }
  .bg-gray-50\/80 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 80%, transparent);
    }
  }
  .bg-gray-50\/90 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 90%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-100\/80 {
    background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
    }
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-green-400\/80 {
    background-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-400) 80%, transparent);
    }
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-50\/50 {
    background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-50) 50%, transparent);
    }
  }
  .bg-red-50\/90 {
    background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-50) 90%, transparent);
    }
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .bg-red-500\/90 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 90%, transparent);
    }
  }
  .bg-rose-50\/50 {
    background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-50) 50%, transparent);
    }
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-50\/40 {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 40%, transparent);
    }
  }
  .bg-slate-50\/50 {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
    }
  }
  .bg-slate-50\/60 {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);
    }
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-400\/5 {
    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-400) 5%, transparent);
    }
  }
  .bg-slate-700 {
    background-color: var(--color-slate-700);
  }
  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }
  .bg-slate-900\/40 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
    }
  }
  .bg-slate-900\/65 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 65%, transparent);
    }
  }
  .bg-slate-900\/75 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 75%, transparent);
    }
  }
  .bg-slate-950\/60 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 60%, transparent);
    }
  }
  .bg-slate-950\/75 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 75%, transparent);
    }
  }
  .bg-slate-950\/80 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
    }
  }
  .bg-slate-950\/90 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
    }
  }
  .bg-slate-950\/95 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 95%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/8 {
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-white\/40 {
    background-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .bg-white\/70 {
    background-color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/95 {
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .bg-linear-to-b {
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-tr {
    --tw-gradient-position: to top right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-blue-400 {
    --tw-gradient-from: var(--color-blue-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-200 {
    --tw-gradient-from: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-slate-950\/35 {
    --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 35%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-purple-400 {
    --tw-gradient-via: var(--color-purple-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-slate-950\/55 {
    --tw-gradient-via: color-mix(in srgb, oklch(12.9% 0.042 264.695) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 55%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-indigo-500 {
    --tw-gradient-to: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-400 {
    --tw-gradient-to: var(--color-pink-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-slate-700 {
    --tw-gradient-to: var(--color-slate-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-slate-950\/90 {
    --tw-gradient-to: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .fill-\[\#cbd5e1\] {
    fill: #cbd5e1;
  }
  .fill-blue-600 {
    fill: var(--color-blue-600);
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .fill-slate-300 {
    fill: var(--color-slate-300);
  }
  .stroke-blue-600 {
    stroke: var(--color-blue-600);
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .stroke-white {
    stroke: var(--color-white);
  }
  .stroke-2 {
    stroke-width: 2;
  }
  .stroke-3 {
    stroke-width: 3;
  }
  .stroke-\[1\.5\] {
    stroke-width: 1.5;
  }
  .stroke-\[2\.2\] {
    stroke-width: 2.2;
  }
  .stroke-\[2\.3\] {
    stroke-width: 2.3;
  }
  .stroke-\[2\.5\] {
    stroke-width: 2.5;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-16 {
    padding: calc(var(--spacing) * 16);
  }
  .p-20 {
    padding: calc(var(--spacing) * 20);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[7px\] {
    font-size: 7px;
  }
  .text-\[8px\] {
    font-size: 8px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-\[0\.95\] {
    --tw-leading: 0.95;
    line-height: 0.95;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .font-thin {
    --tw-font-weight: var(--font-weight-thin);
    font-weight: var(--font-weight-thin);
  }
  .tracking-\[-0\.045em\] {
    --tw-tracking: -0.045em;
    letter-spacing: -0.045em;
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.05em\] {
    --tw-tracking: 0.05em;
    letter-spacing: 0.05em;
  }
  .tracking-\[0\.15em\] {
    --tw-tracking: 0.15em;
    letter-spacing: 0.15em;
  }
  .tracking-\[0\.18em\] {
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .tracking-\[0\.25em\] {
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-500\/60 {
    color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-blue-500) 60%, transparent);
    }
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-orange-400 {
    color: var(--color-orange-400);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-rose-400 {
    color: var(--color-rose-400);
  }
  .text-rose-500 {
    color: var(--color-rose-500);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/20 {
    color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .text-white\/25 {
    color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .text-white\/45 {
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .text-white\/55 {
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/90 {
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .placeholder-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .accent-blue-500 {
    accent-color: var(--color-blue-500);
  }
  .accent-blue-600 {
    accent-color: var(--color-blue-600);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_5px_rgba\(96\,165\,250\,0\.5\)\] {
    --tw-shadow: 0 0 5px var(--tw-shadow-color, rgba(96,165,250,0.5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_8px_rgba\(59\,130\,246\,0\.5\)\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(59,130,246,0.5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_15px_40px_rgba\(0\,0\,0\,0\.3\)\] {
    --tw-shadow: 0 15px 40px var(--tw-shadow-color, rgba(0,0,0,0.3));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.08\)\] {
    --tw-shadow: 0 20px 40px var(--tw-shadow-color, rgba(0,0,0,0.08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_20px_44px_rgba\(0\,0\,0\,0\.14\)\] {
    --tw-shadow: 0 20px 44px var(--tw-shadow-color, rgba(0,0,0,0.14));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.15\)\] {
    --tw-shadow: 0 20px 50px var(--tw-shadow-color, rgba(0,0,0,0.15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-blue-200 {
    --tw-shadow-color: oklch(88.2% 0.059 254.128);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-blue-200) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-blue-200\/50 {
    --tw-shadow-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-200) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-blue-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-blue-500\/30 {
    --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-red-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-blue-500\/20 {
    --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }
  .ring-yellow-400\/20 {
    --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
    }
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-2xl {
    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-md {
    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-250 {
    --tw-duration: 250ms;
    transition-duration: 250ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .group-focus-within\:text-blue-500 {
    &:is(:where(.group):focus-within *) {
      color: var(--color-blue-500);
    }
  }
  .group-hover\:translate-y-0\.5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:bg-blue-50 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .group-hover\:bg-blue-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .group-hover\:bg-red-500\/10 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-rose-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-rose-100);
      }
    }
  }
  .group-hover\:text-blue-400 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-400);
      }
    }
  }
  .group-hover\:text-blue-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-500);
      }
    }
  }
  .group-hover\:text-blue-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .group-hover\:text-gray-700 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .group-hover\:text-rose-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-rose-500);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:grayscale-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-grayscale: grayscale(0%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\/del\:scale-110 {
    &:is(:where(.group\/del):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\/edit\:rotate-12 {
    &:is(:where(.group\/edit):hover *) {
      @media (hover: hover) {
        rotate: 12deg;
      }
    }
  }
  .group-hover\/node\:opacity-100 {
    &:is(:where(.group\/node):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/showcase\:scale-105 {
    &:is(:where(.group\/showcase):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-active\:scale-95 {
    &:is(:where(.group):active *) {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .peer-checked\:bg-blue-600 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-blue-600);
    }
  }
  .placeholder\:text-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .placeholder\:text-slate-400 {
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:top-0\.5 {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0.5);
    }
  }
  .after\:left-0\.5 {
    &::after {
      content: var(--tw-content);
      left: calc(var(--spacing) * 0.5);
    }
  }
  .after\:h-4 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 4);
    }
  }
  .after\:w-4 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 4);
    }
  }
  .after\:rounded-full {
    &::after {
      content: var(--tw-content);
      border-radius: calc(infinity * 1px);
    }
  }
  .after\:border {
    &::after {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .after\:border-gray-300 {
    &::after {
      content: var(--tw-content);
      border-color: var(--color-gray-300);
    }
  }
  .after\:bg-white {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-white);
    }
  }
  .after\:transition-all {
    &::after {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:transition-transform {
    &::after {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:content-\[\'\'\] {
    &::after {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
  .peer-checked\:after\:translate-x-5 {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        --tw-translate-x: calc(var(--spacing) * 5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .peer-checked\:after\:translate-x-full {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .focus-within\:border-blue-500\/50 {
    &:focus-within {
      border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
      }
    }
  }
  .focus-within\:shadow-md {
    &:focus-within {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-within\:ring-4 {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-within\:ring-blue-500\/5 {
    &:focus-within {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:border-blue-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-200);
      }
    }
  }
  .hover\:border-blue-400\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-blue-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-500);
      }
    }
  }
  .hover\:border-blue-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-600);
      }
    }
  }
  .hover\:border-red-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-400);
      }
    }
  }
  .hover\:border-slate-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-600);
      }
    }
  }
  .hover\:bg-black\/40 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .hover\:bg-blue-50\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .hover\:bg-blue-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-500);
      }
    }
  }
  .hover\:bg-blue-500\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-600);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-gray-200\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-gray-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-red-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .hover\:bg-red-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-500);
      }
    }
  }
  .hover\:bg-red-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-slate-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
  }
  .hover\:bg-slate-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-200);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/15 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 15%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
        }
      }
    }
  }
  .hover\:text-blue-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-400);
      }
    }
  }
  .hover\:text-blue-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-500);
      }
    }
  }
  .hover\:text-blue-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .hover\:text-gray-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .hover\:text-red-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-400);
      }
    }
  }
  .hover\:text-red-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-500);
      }
    }
  }
  .hover\:text-slate-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-600);
      }
    }
  }
  .hover\:text-slate-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-yellow-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yellow-500);
      }
    }
  }
  .hover\:shadow-2xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-blue-500\/20 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:w-80 {
    &:focus {
      width: calc(var(--spacing) * 80);
    }
  }
  .focus\:border-blue-400 {
    &:focus {
      border-color: var(--color-blue-400);
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: var(--color-blue-500);
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-4 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:ring-blue-500\/5 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
      }
    }
  }
  .focus\:ring-blue-500\/10 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
      }
    }
  }
  .focus\:ring-blue-500\/20 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-4 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-blue-500\/20 {
    &:focus-visible {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
      }
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:scale-75 {
    &:active {
      --tw-scale-x: 75%;
      --tw-scale-y: 75%;
      --tw-scale-z: 75%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-90 {
    &:active {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-95 {
    &:active {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-110 {
    &:active {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-\[0\.98\] {
    &:active {
      scale: 0.98;
    }
  }
  .active\:cursor-grabbing {
    &:active {
      cursor: grabbing;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:cursor-wait {
    &:disabled {
      cursor: wait;
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .disabled\:opacity-60 {
    &:disabled {
      opacity: 60%;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:w-40 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 40);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-nowrap {
    @media (width >= 40rem) {
      flex-wrap: nowrap;
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:text-5xl {
    @media (width >= 40rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:top-8 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 8);
    }
  }
  .md\:right-5 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 5);
    }
  }
  .md\:right-8 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 8);
    }
  }
  .md\:bottom-0 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:bottom-6 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:left-8 {
    @media (width >= 48rem) {
      left: calc(var(--spacing) * 8);
    }
  }
  .md\:left-64 {
    @media (width >= 48rem) {
      left: calc(var(--spacing) * 64);
    }
  }
  .md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:-mt-52 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * -52);
    }
  }
  .md\:mt-6 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .md\:ml-60 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 60);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:h-100 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 100);
    }
  }
  .md\:h-\[85vh\] {
    @media (width >= 48rem) {
      height: 85vh;
    }
  }
  .md\:h-\[calc\(100dvh-3rem\)\] {
    @media (width >= 48rem) {
      height: calc(100dvh - 3rem);
    }
  }
  .md\:w-96 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 96);
    }
  }
  .md\:w-\[400px\] {
    @media (width >= 48rem) {
      width: 400px;
    }
  }
  .md\:w-full {
    @media (width >= 48rem) {
      width: 100%;
    }
  }
  .md\:max-w-110\.5 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 110.5);
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-10 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:space-y-6 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:rounded-\[18px\] {
    @media (width >= 48rem) {
      border-radius: 18px;
    }
  }
  .md\:border-t-0 {
    @media (width >= 48rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .md\:border-l {
    @media (width >= 48rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .md\:p-5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-7 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:p-20 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 20);
    }
  }
  .md\:px-5 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-7 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .md\:px-12 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:pt-9 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 9);
    }
  }
  .md\:pb-7 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .md\:pb-20 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-xs {
    @media (width >= 48rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .md\:text-\[10px\] {
    @media (width >= 48rem) {
      font-size: 10px;
    }
  }
  .md\:text-\[13px\] {
    @media (width >= 48rem) {
      font-size: 13px;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:text-7xl {
    @media (width >= 64rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .dark\:divide-slate-800 {
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-slate-800);
      }
    }
  }
  .dark\:border-blue-400 {
    &:where(.dark, .dark *) {
      border-color: var(--color-blue-400);
    }
  }
  .dark\:border-blue-500\/20 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
      }
    }
  }
  .dark\:border-blue-800\/40 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-800) 40%, transparent);
      }
    }
  }
  .dark\:border-blue-800\/50 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-800) 50%, transparent);
      }
    }
  }
  .dark\:border-blue-900\/20 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }
  }
  .dark\:border-blue-900\/30 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
      }
    }
  }
  .dark\:border-red-800\/40 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-red-800) 40%, transparent);
      }
    }
  }
  .dark\:border-red-900\/30 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
      }
    }
  }
  .dark\:border-slate-600 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-600);
    }
  }
  .dark\:border-slate-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
  }
  .dark\:border-slate-700\/50 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
      }
    }
  }
  .dark\:border-slate-700\/60 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
      }
    }
  }
  .dark\:border-slate-700\/70 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-slate-700) 70%, transparent);
      }
    }
  }
  .dark\:border-slate-800 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .dark\:border-slate-800\/50 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }
  }
  .dark\:border-slate-900 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-900);
    }
  }
  .dark\:border-slate-950 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-950);
    }
  }
  .dark\:border-white\/5 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .dark\:border-white\/10 {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .dark\:bg-black\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #000 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
      }
    }
  }
  .dark\:bg-blue-500\/10 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
      }
    }
  }
  .dark\:bg-blue-500\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
      }
    }
  }
  .dark\:bg-blue-900\/10 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 10%, transparent);
      }
    }
  }
  .dark\:bg-blue-900\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }
  }
  .dark\:bg-blue-900\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-blue-950\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
      }
    }
  }
  .dark\:bg-red-900\/10 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
      }
    }
  }
  .dark\:bg-red-900\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
      }
    }
  }
  .dark\:bg-rose-900\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-rose-900) 20%, transparent);
      }
    }
  }
  .dark\:bg-slate-500 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-500);
    }
  }
  .dark\:bg-slate-600 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-600);
    }
  }
  .dark\:bg-slate-700 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-700);
    }
  }
  .dark\:bg-slate-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
  }
  .dark\:bg-slate-800\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 30%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/35 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 35%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 35%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/40 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/60 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/70 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 70%, transparent);
      }
    }
  }
  .dark\:bg-slate-800\/80 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
      }
    }
  }
  .dark\:bg-slate-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .dark\:bg-slate-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-slate-900\/60 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
      }
    }
  }
  .dark\:bg-slate-900\/95 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-900) 95%, transparent);
      }
    }
  }
  .dark\:bg-slate-950 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-950);
    }
  }
  .dark\:bg-slate-950\/80 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
      }
    }
  }
  .dark\:bg-white\/1 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 1%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
      }
    }
  }
  .dark\:bg-white\/2 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 2%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
      }
    }
  }
  .dark\:bg-white\/5 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .dark\:bg-white\/\[0\.02\] {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 2%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
      }
    }
  }
  .dark\:fill-blue-400 {
    &:where(.dark, .dark *) {
      fill: var(--color-blue-400);
    }
  }
  .dark\:fill-slate-600 {
    &:where(.dark, .dark *) {
      fill: var(--color-slate-600);
    }
  }
  .dark\:stroke-blue-400 {
    &:where(.dark, .dark *) {
      stroke: var(--color-blue-400);
    }
  }
  .dark\:text-blue-300 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  .dark\:text-blue-400 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-400);
    }
  }
  .dark\:text-blue-400\/60 {
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-blue-400) 60%, transparent);
      }
    }
  }
  .dark\:text-blue-500 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-500);
    }
  }
  .dark\:text-gray-200 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-200);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-slate-100 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .dark\:text-slate-200 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
  }
  .dark\:text-slate-300 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .dark\:text-slate-400 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .dark\:text-slate-500 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-500);
    }
  }
  .dark\:text-slate-600 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-600);
    }
  }
  .dark\:text-slate-700 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-700);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:placeholder-slate-500 {
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-slate-500);
      }
    }
  }
  .dark\:placeholder-slate-600 {
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-slate-600);
      }
    }
  }
  .dark\:opacity-40 {
    &:where(.dark, .dark *) {
      opacity: 40%;
    }
  }
  .dark\:shadow-2xl {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.3\)\] {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 20px 40px var(--tw-shadow-color, rgba(0,0,0,0.3));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-\[0_20px_44px_rgba\(0\,0\,0\,0\.38\)\] {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 20px 44px var(--tw-shadow-color, rgba(0,0,0,0.38));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.3\)\] {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 20px 50px var(--tw-shadow-color, rgba(0,0,0,0.3));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.4\)\] {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 20px 50px var(--tw-shadow-color, rgba(0,0,0,0.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-none {
    &:where(.dark, .dark *) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:grayscale-0 {
    &:where(.dark, .dark *) {
      --tw-grayscale: grayscale(0%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  .dark\:group-focus-within\:text-blue-400 {
    &:where(.dark, .dark *) {
      &:is(:where(.group):focus-within *) {
        color: var(--color-blue-400);
      }
    }
  }
  .dark\:group-hover\:bg-blue-900\/30 {
    &:where(.dark, .dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
          }
        }
      }
    }
  }
  .dark\:group-hover\:bg-blue-900\/50 {
    &:where(.dark, .dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:group-hover\:bg-rose-900\/40 {
    &:where(.dark, .dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 40%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-rose-900) 40%, transparent);
          }
        }
      }
    }
  }
  .dark\:group-hover\:text-slate-200 {
    &:where(.dark, .dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-slate-200);
        }
      }
    }
  }
  .dark\:placeholder\:text-slate-500 {
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-slate-500);
      }
    }
  }
  .dark\:hover\:border-blue-900 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-blue-900);
        }
      }
    }
  }
  .dark\:hover\:bg-blue-500\/10 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-blue-500\/20 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-blue-600 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-blue-600);
        }
      }
    }
  }
  .dark\:hover\:bg-blue-900\/40 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-red-500 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-red-500);
        }
      }
    }
  }
  .dark\:hover\:bg-red-500\/10 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-red-900\/20 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-slate-600 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-600);
        }
      }
    }
  }
  .dark\:hover\:bg-slate-700 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-700);
        }
      }
    }
  }
  .dark\:hover\:bg-slate-700\/50 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-slate-800 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
  }
  .dark\:hover\:bg-slate-800\/30 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-slate-800) 30%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-slate-800\/50 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-white\/5 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:bg-white\/10 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:text-blue-300 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-blue-300);
        }
      }
    }
  }
  .dark\:hover\:text-blue-400 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-blue-400);
        }
      }
    }
  }
  .dark\:hover\:text-gray-200 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .dark\:hover\:text-red-400 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-red-400);
        }
      }
    }
  }
  .dark\:hover\:text-slate-200 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-200);
        }
      }
    }
  }
  .dark\:hover\:text-slate-300 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-300);
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .dark\:hover\:shadow-blue-500\/10 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
          }
        }
      }
    }
  }
  .dark\:focus\:border-blue-500\/50 {
    &:where(.dark, .dark *) {
      &:focus {
        border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
        }
      }
    }
  }
  .dark\:focus\:ring-blue-500\/10 {
    &:where(.dark, .dark *) {
      &:focus {
        --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
        }
      }
    }
  }
}
@layer base {
  html {
    overflow-x: hidden;
  }
  body {
    background-color: var(--color-slate-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-950);
    }
    margin: 0;
    padding: 0;
    min-width: 320px;
  }
  img, video, canvas {
    max-width: 100%;
  }
}
@layer theme {
  :root {
    --color-dynamic: rgb(59, 130, 246);
    --color-dynamic-secondary: rgb(99, 102, 241);
    --adaptive-bg-light: hsl(217 39% 90%);
    --adaptive-surface-light: hsl(217 39% 94%);
    --adaptive-surface-2-light: hsl(217 39% 85%);
    --adaptive-border-light: hsl(217 39% 72%);
    --adaptive-glow-light: hsl(217 78% 55% / 0.24);
    --adaptive-bg-dark: hsl(217 39% 7%);
    --adaptive-surface-dark: hsl(217 39% 11%);
    --adaptive-surface-2-dark: hsl(217 39% 17%);
    --adaptive-border-dark: hsl(217 39% 27%);
    --adaptive-glow-dark: hsl(217 78% 55% / 0.22);
  }
  html:not(.adaptive-theme) {
    --adaptive-background: rgb(244 247 251);
    --adaptive-surface: rgb(255 255 255);
    --adaptive-surface-2: rgb(235 241 248);
    --adaptive-border: rgb(210 220 233);
    --adaptive-glow: rgb(37 99 235 / 0.16);
    --adaptive-text: rgb(24 34 50);
    --adaptive-muted: rgb(101 116 137);
    --adaptive-text-strong: rgb(24 34 50);
    --adaptive-text-muted: rgb(101 116 137);
    --adaptive-card-tint: rgb(255 255 255);
  }
  html.dark:not(.adaptive-theme) {
    --adaptive-background: rgb(10 15 24);
    --adaptive-surface: rgb(19 27 40);
    --adaptive-surface-2: rgb(29 40 56);
    --adaptive-border: rgb(52 68 89);
    --adaptive-glow: rgb(59 130 246 / 0.14);
    --adaptive-text: rgb(232 238 246);
    --adaptive-muted: rgb(143 158 179);
    --adaptive-text-strong: rgb(232 238 246);
    --adaptive-text-muted: rgb(143 158 179);
    --adaptive-card-tint: rgb(20 29 43);
  }
  html.adaptive-theme {
    --adaptive-background: var(--adaptive-bg-light);
    --adaptive-surface: var(--adaptive-surface-light);
    --adaptive-surface-2: var(--adaptive-surface-2-light);
    --adaptive-border: var(--adaptive-border-light);
    --adaptive-glow: var(--adaptive-glow-light);
    --color-blue-50: var(--color-dynamic);
    @supports (color: color-mix(in lab, red, red)) {
      --color-blue-50: color-mix(in srgb, var(--color-dynamic) 12%, var(--adaptive-surface));
    }
    --color-blue-100: var(--color-dynamic);
    @supports (color: color-mix(in lab, red, red)) {
      --color-blue-100: color-mix(in srgb, var(--color-dynamic) 20%, var(--adaptive-surface));
    }
    --color-blue-200: var(--color-dynamic);
    @supports (color: color-mix(in lab, red, red)) {
      --color-blue-200: color-mix(in srgb, var(--color-dynamic) 34%, var(--adaptive-surface));
    }
    --color-blue-300: var(--color-dynamic);
    @supports (color: color-mix(in lab, red, red)) {
      --color-blue-300: color-mix(in srgb, var(--color-dynamic) 68%, var(--adaptive-surface));
    }
    --color-blue-400: var(--color-dynamic);
    --color-blue-500: var(--color-dynamic);
    --color-blue-600: var(--color-dynamic);
    --color-blue-700: var(--color-dynamic-secondary);
    --color-blue-800: var(--color-dynamic-secondary);
    --color-blue-900: var(--color-dynamic-secondary);
    --color-indigo-500: var(--color-dynamic-secondary);
    color-scheme: light;
  }
  html.adaptive-theme.dark {
    --adaptive-background: var(--adaptive-bg-dark);
    --adaptive-surface: var(--adaptive-surface-dark);
    --adaptive-surface-2: var(--adaptive-surface-2-dark);
    --adaptive-border: var(--adaptive-border-dark);
    --adaptive-glow: var(--adaptive-glow-dark);
    color-scheme: dark;
  }
}
#profile-sidebar-shell {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
@media (min-width: 768px) {
  #profile-left-rail {
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100dvh - 5.75rem);
    min-height: 0;
    overflow: visible;
  }

  #profile-sidebar-shell {
    display: flex;
    max-height: calc(100dvh - 5.75rem);
    min-height: 0;
    flex-direction: column;
  }

  #profile-sidebar-shell > :not(.profile-sidebar-navigation) {
    flex: 0 0 auto;
  }

  #profile-sidebar-shell > .profile-sidebar-navigation {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    /* Колесо сначала прокручивает меню, а на его границе естественно
       продолжает прокрутку страницы. contain здесь создавал «мёртвую зону». */
    overscroll-behavior-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #profile-sidebar-shell > .profile-sidebar-navigation::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
#profile-avatar-card {
  isolation: isolate;
  transform: translateZ(0);
}
#avatar-img {
  backface-visibility: hidden;
}
#cover-section {
  overflow: hidden;
  --cover-move-x: 0px;
  --cover-move-y: 0px;
  isolation: isolate;
  contain: paint;
  background-color: rgb(226 232 240);
  background-image: radial-gradient(circle at 18% 22%, rgb(219 234 254 / 0.96), transparent 34%), linear-gradient(135deg, rgb(241 245 249), rgb(191 219 254) 52%, rgb(147 197 253));
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
.dark #cover-section {
  background-color: rgb(15 23 42);
  background-image: radial-gradient(circle at 18% 22%, rgb(30 64 175 / 0.42), transparent 34%), linear-gradient(135deg, rgb(15 23 42), rgb(30 41 59) 52%, rgb(15 23 42));
}
#cover-section.is-cover-ready {
  background-color: rgb(15 23 42);
}
#cover-effect-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#cover-section::after {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cover-move-x), var(--cover-move-y), 0) scale(1);
  background: radial-gradient(circle at 22% 28%, rgb(255 255 255 / 0.34) 0 2px, transparent 3px), radial-gradient(circle at 72% 38%, rgb(147 197 253 / 0.28) 0 3px, transparent 4px), radial-gradient(circle at 45% 72%, rgb(255 255 255 / 0.24) 0 2px, transparent 3px), linear-gradient(120deg, transparent 0 42%, rgb(255 255 255 / 0.11) 50%, transparent 58% 100%);
  background-size: 180px 120px, 240px 150px, 210px 160px, 260px 100%;
  mix-blend-mode: screen;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
#cover-section.cover-motion-hover::after {
  opacity: 0.72;
  animation: coverMotionDrift 2.8s linear infinite;
}
#cover-section.cover-motion-burst::after {
  opacity: 0.9;
  animation: coverMotionBurst 900ms cubic-bezier(.18, .89, .32, 1.28);
}
.cover-motion-btn:not(.hidden) {
  position: relative;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(0 0 0 / 0.2);
  color: white;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgb(15 23 42 / 0.18);
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cover-motion-btn.hidden {
  display: none;
}
.cover-motion-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.42), transparent 42%), linear-gradient(135deg, rgb(59 130 246 / 0.46), rgb(14 165 233 / 0.08));
  transition: opacity 180ms ease;
}
.cover-motion-btn:hover, .cover-motion-btn:focus-visible {
  background: rgb(0 0 0 / 0.38);
  border-color: rgb(255 255 255 / 0.34);
  transform: translateY(-1px) scale(1.04);
  outline: none;
}
.cover-motion-btn:hover::before, .cover-motion-btn:focus-visible::before, .cover-motion-btn.is-burst::before {
  opacity: 1;
}
.cover-motion-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.28));
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.cover-motion-btn:hover .cover-motion-icon, .cover-motion-btn:focus-visible .cover-motion-icon, .cover-motion-btn.is-burst .cover-motion-icon {
  transform: rotate(-12deg) translate(1px, -1px);
}
.cover-motion-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.cover-motion-particles span {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  opacity: 0;
  background: currentColor;
  box-shadow: 0 0 16px rgb(255 255 255 / 0.68);
  transform: translate(-50%, -50%) scale(0.18);
}
.cover-motion-particles span:nth-child(3n) {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(125 211 252);
}
.cover-motion-particles span:nth-child(4n) {
  width: 0.28rem;
  height: 0.28rem;
  background: rgb(191 219 254);
}
.cover-motion-btn:hover .cover-motion-particles span, .cover-motion-btn:focus-visible .cover-motion-particles span {
  animation: coverParticleScatter 860ms cubic-bezier(.16, 1, .3, 1) var(--delay) both;
}
.cover-motion-btn.is-burst .cover-motion-particles span {
  animation: coverParticleBurst 760ms cubic-bezier(.16, 1, .3, 1) var(--delay) both;
}
@keyframes coverParticleScatter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0.08;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
  }
}
@keyframes coverParticleBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.35);
  }
}
@keyframes coverMotionDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, -180px 0;
  }
  100% {
    background-position: 180px 120px, -240px 150px, 210px -160px, 180px 0;
  }
}
@keyframes coverMotionBurst {
  0% {
    transform: translate3d(var(--cover-move-x), var(--cover-move-y), 0) scale(0.98);
  }
  45% {
    transform: translate3d(calc(var(--cover-move-x) * -0.45), calc(var(--cover-move-y) * -0.45), 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #cover-section.cover-motion-hover::after, #cover-section.cover-motion-burst::after, .cover-motion-btn:hover .cover-motion-particles span, .cover-motion-btn:focus-visible .cover-motion-particles span, .cover-motion-btn.is-burst .cover-motion-particles span {
    animation: none;
  }
}
.cover-animation-panel {
  position: relative;
  z-index: 60;
  isolation: isolate;
  border-bottom: 1px solid rgb(226 232 240);
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
}
.dark .cover-animation-panel {
  border-color: rgb(30 41 59);
  background: rgb(15 23 42 / 0.96);
}
.cover-animation-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1.5rem;
}
@media (min-width: 768px) {
  body.cover-editor-open {
    --cover-editor-avatar-gap: clamp(9rem, 13vw, 12rem);
    --cover-editor-avatar-lift: clamp(5rem, 7.5vw, 7rem);
  }
  body.cover-editor-open .cover-animation-inner {
    padding-bottom: calc(1.5rem + var(--cover-editor-avatar-gap));
  }
  body.cover-editor-open #profile-left-rail {
    z-index: 70;
  }
  body.cover-editor-open #profile-sidebar-shell {
    transform: translateY(calc(var(--cover-editor-avatar-lift) * -1)) translateZ(0);
  }
}
.cover-animation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}
.cover-animation-header h2 {
  margin: 0;
  color: rgb(15 23 42);
  font-size: 1.1rem;
  font-weight: 800;
}
.dark .cover-animation-header h2 {
  color: white;
}
.cover-animation-header p {
  margin-top: 0.25rem;
  color: rgb(100 116 139);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cover-animation-actions {
  display: flex;
  gap: 0.35rem;
}
.cover-animation-actions button {
  min-height: 2rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  padding: 0.45rem 0.8rem;
  background: white;
  color: rgb(71 85 105);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.cover-animation-actions button:last-child {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 20%);
  }
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.cover-animation-actions button:hover {
  transform: translateY(-1px);
}
.cover-editor-tabs {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding: 0.2rem 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cover-editor-tabs::-webkit-scrollbar {
  display: none;
}
.cover-editor-tab {
  flex: 0 0 auto;
  border: 1px solid var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%);
  }
  border-radius: 0.7rem;
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 94%);
  }
  color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(71 85 105) 34%);
  }
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cover-editor-tab:hover, .cover-editor-tab.is-active {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 35%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%);
  }
  color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 12%);
  }
  transform: translateY(-1px);
}
.dark .cover-animation-actions button {
  border-color: rgb(51 65 85);
  background: rgb(2 6 23);
  color: rgb(203 213 225);
}
.dark .cover-animation-actions button:last-child {
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.cover-animation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.cover-editor-pane.hidden {
  display: none !important;
}

/* ------------[Настройки аккаунта]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 1/203 */
/* Оформляет аккуратный список полей во вкладках «Безопасность» и «Данные». */
.cover-account-pane{width:100%;max-width:58rem}.cover-account-card{overflow:hidden;border:1px solid rgb(226 232 240);border-radius:1rem;background:rgb(248 250 252/.84);box-shadow:0 16px 34px rgb(15 23 42/.06)}.cover-account-card-header{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid rgb(226 232 240)}.cover-account-card-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:.75rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--color-dynamic,#3b82f6);font-size:1rem;font-weight:900}.cover-account-card-header h3{margin:0;color:rgb(15 23 42);font-size:.92rem;font-weight:900}.cover-account-card-header p{margin:.2rem 0 0;color:rgb(100 116 139);font-size:.7rem;font-weight:650}.cover-account-list{padding:0 1.1rem}.cover-account-row{display:grid;grid-template-columns:minmax(13rem,.9fr) minmax(16rem,1.15fr);align-items:center;gap:1.25rem;padding:.9rem 0;border-top:1px solid rgb(226 232 240)}.cover-account-row:first-child{border-top:0}.cover-account-row>span{display:flex;flex-direction:column;gap:.18rem}.cover-account-row strong{color:rgb(30 41 59);font-size:.76rem;font-weight:850}.cover-account-row small{color:rgb(100 116 139);font-size:.64rem;font-weight:600;line-height:1.4}.cover-account-row input,.cover-account-row select{width:100%;min-height:2.75rem;border:1px solid rgb(203 213 225);border-radius:.75rem;padding:.65rem .8rem;outline:0;background:#fff;color:rgb(15 23 42);font-size:.78rem;font-weight:700;transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease}.cover-account-row input:focus,.cover-account-row select:focus{border-color:var(--color-dynamic,#3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 84%)}.cover-account-notice{margin:0 1.1rem 1rem;border-radius:.72rem;padding:.7rem .8rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 91%);color:rgb(71 85 105);font-size:.65rem;font-weight:700}.dark .cover-account-card{border-color:rgb(51 65 85);background:rgb(2 6 23/.54)}.dark .cover-account-card-header,.dark .cover-account-row{border-color:rgb(51 65 85)}.dark .cover-account-card-header h3,.dark .cover-account-row strong{color:rgb(241 245 249)}.dark .cover-account-card-header p,.dark .cover-account-row small,.dark .cover-account-notice{color:rgb(148 163 184)}.dark .cover-account-row input,.dark .cover-account-row select{border-color:rgb(51 65 85);background:rgb(15 23 42);color:rgb(241 245 249)}html.adaptive-theme .cover-account-card{border-color:var(--adaptive-border);background:color-mix(in srgb,var(--adaptive-surface-2) 82%,transparent);box-shadow:0 16px 36px color-mix(in srgb,var(--color-dynamic),transparent 87%)}html.adaptive-theme .cover-account-card-header,html.adaptive-theme .cover-account-row{border-color:var(--adaptive-border)}html.adaptive-theme .cover-account-card-header h3,html.adaptive-theme .cover-account-row strong{color:var(--adaptive-text)}html.adaptive-theme .cover-account-card-header p,html.adaptive-theme .cover-account-row small,html.adaptive-theme .cover-account-notice{color:var(--adaptive-muted)}html.adaptive-theme .cover-account-row input,html.adaptive-theme .cover-account-row select{border-color:var(--adaptive-border);background:var(--adaptive-surface);color:var(--adaptive-text)}@media(max-width:640px){.cover-account-row{grid-template-columns:1fr;gap:.55rem}.cover-animation-header{align-items:flex-start}.cover-animation-actions{flex-wrap:wrap;justify-content:flex-end}}
.cover-animation-tile {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.55rem;
  background: transparent;
  color: rgb(51 65 85);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.cover-animation-tile:hover, .cover-animation-tile.is-active {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 55%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 92%);
  }
  box-shadow: 0 14px 28px rgb(15 23 42 / 0.08);
  transform: translateY(-1px);
}
.dark .cover-animation-tile {
  color: rgb(226 232 240);
}
.dark .cover-animation-tile:hover, .dark .cover-animation-tile.is-active {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(2 6 23) 86%);
  }
}
.cover-animation-title {
  font-size: 0.8rem;
  font-weight: 700;
}
.cover-animation-note {
  margin-top: -0.35rem;
  color: rgb(100 116 139);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cover-animation-preview {
  position: relative;
  display: block;
  height: 5.65rem;
  overflow: hidden;
  border-radius: 0.2rem;
  background: rgb(203 213 225);
  isolation: isolate;
}
html.adaptive-theme .cover-animation-panel {
  border-color: var(--adaptive-border);
  background: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 96%, transparent);
  }
  box-shadow: 0 18px 46px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 46px color-mix(in srgb, var(--color-dynamic), transparent 82%);
  }
}
html.adaptive-theme .cover-animation-header h2, html.adaptive-theme .cover-animation-title {
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-surface) 18%);
  }
}
html.adaptive-theme .cover-animation-header p {
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 45%);
  }
}
html.adaptive-theme .cover-editor-tab {
  border-color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 64%);
  }
  background: var(--adaptive-surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2), transparent 24%);
  }
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 22%);
  }
}
html.adaptive-theme .cover-editor-tab:hover, html.adaptive-theme .cover-editor-tab.is-active {
  background: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 82%);
  }
}
html.adaptive-theme .cover-animation-note {
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-muted) 34%);
  }
}
html.adaptive-theme .cover-animation-actions button {
  border-color: var(--adaptive-border);
  background: var(--adaptive-surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2) 74%, var(--adaptive-surface));
  }
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 18%);
  }
}
html.adaptive-theme .cover-animation-actions button:last-child {
  border-color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 18%);
  }
  background: var(--color-dynamic);
  color: white;
}
html.adaptive-theme .cover-animation-tile {
  color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 24%);
  }
}
html.adaptive-theme .cover-animation-tile:hover, html.adaptive-theme .cover-animation-tile.is-active {
  border-color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 42%);
  }
  background: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 86%);
  }
  box-shadow: 0 14px 30px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-dynamic), transparent 84%);
  }
}
html.adaptive-theme .cover-animation-preview {
  background: var(--adaptive-surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2), var(--color-dynamic) 8%);
  }
}
.cover-animation-preview::before, .cover-animation-preview::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.cover-preview-none::before {
  background: linear-gradient(135deg, rgb(203 213 225), rgb(226 232 240));
}
.cover-preview-image {
  background-position: center;
  background-size: cover;
}
.cover-preview-seasonal {
  background: radial-gradient(circle at 78% 24%, rgb(255 230 165 / 0.88) 0 20px, transparent 21px), linear-gradient(135deg, rgb(209 228 246), rgb(240 248 255) 44%, rgb(193 225 199));
}
.cover-preview-seasonal::before {
  background: linear-gradient(135deg, transparent 55%, rgb(75 130 95 / 0.34) 56% 62%, transparent 63%), linear-gradient(28deg, transparent 52%, rgb(94 151 196 / 0.22) 53% 58%, transparent 59%);
}
.cover-preview-custom {
  background: linear-gradient(135deg, var(--color-dynamic, #3b82f6), transparent), rgb(226 232 240);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%), transparent), rgb(226 232 240);
  }
}
.cover-preview-custom::before, .cover-preview-custom::after {
  content: none;
}
.cover-upload-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0.62rem;
  border: 2px solid currentColor;
  border-radius: 1rem;
  fill: none;
  stroke: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%);
  }
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-dynamic, #3b82f6);
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}
.cover-preview-custom.has-image .cover-upload-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
}
.cover-preview-white-ash, .cover-preview-virus, .cover-preview-dust {
  background: rgb(203 213 225);
}
.cover-preview-web, .cover-preview-microcosm {
  background: linear-gradient(135deg, rgb(226 232 240), rgb(190 204 216));
}
.cover-preview-bubbles {
  background: linear-gradient(135deg, rgb(211 226 234), rgb(238 246 250));
}
.cover-preview-flame-breath {
  background: rgb(32 4 4);
}
.cover-preview-white-ash::before, .cover-preview-virus::before, .cover-preview-dust::before {
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.9) 0 2px, transparent 3px);
  background-size: 42px 32px;
  animation: coverPreviewFloat 7s linear infinite;
}
.cover-preview-web::before {
  background: linear-gradient(22deg, transparent 47%, rgb(71 85 105 / 0.28) 49% 51%, transparent 53%), linear-gradient(155deg, transparent 47%, rgb(71 85 105 / 0.24) 49% 51%, transparent 53%);
  background-size: 88px 52px;
}
.cover-preview-microcosm::before {
  background: radial-gradient(circle at 20% 30%, black 0 5px, transparent 6px), radial-gradient(circle at 48% 24%, black 0 3px, transparent 4px), radial-gradient(circle at 76% 52%, black 0 4px, transparent 5px), linear-gradient(28deg, transparent 47%, rgb(15 23 42 / 0.22) 49% 51%, transparent 53%);
}
.cover-preview-bubbles::before {
  background: radial-gradient(circle at 22% 55%, rgb(255 255 255 / 0.35) 0 24px, rgb(255 255 255 / 0.7) 25px 27px, transparent 28px), radial-gradient(circle at 78% 34%, rgb(255 255 255 / 0.28) 0 16px, rgb(255 255 255 / 0.65) 17px 19px, transparent 20px);
  animation: coverPreviewRise 6s ease-in-out infinite;
}
.cover-preview-flame-breath::before {
  background: radial-gradient(circle at 64% 28%, rgb(249 115 22 / 0.55) 0 16px, transparent 17px), radial-gradient(circle at 78% 54%, rgb(220 38 38 / 0.42) 0 24px, transparent 25px), radial-gradient(circle at 42% 72%, rgb(251 146 60 / 0.48) 0 12px, transparent 13px);
  animation: coverPreviewFloat 5s ease-in-out infinite;
}
#cover-section.cover-anim-white-ash::after, #cover-section.cover-anim-dust::after {
  opacity: 0.82;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.86) 0 2px, transparent 3px);
  background-size: 74px 58px;
  animation: coverSnowfall 12s linear infinite;
}
#cover-section.cover-anim-dust::after {
  opacity: 0.58;
  background-size: 44px 36px;
  filter: blur(0.4px);
  animation-duration: 18s;
}
#cover-section.cover-anim-web::after {
  opacity: 0.55;
  background: linear-gradient(24deg, transparent 48%, rgb(255 255 255 / 0.22) 49% 51%, transparent 52%), linear-gradient(154deg, transparent 48%, rgb(255 255 255 / 0.18) 49% 51%, transparent 52%), radial-gradient(circle at 82% 18%, transparent 0 20px, rgb(255 255 255 / 0.14) 21px 22px, transparent 23px);
  background-size: 220px 130px, 260px 150px, 180px 180px;
  animation: coverWeb 16s linear infinite;
}
#cover-section.cover-anim-virus::after {
  opacity: 0.48;
  background: radial-gradient(circle at 18% 52%, rgb(255 255 255 / 0.44) 0 18px, transparent 19px), radial-gradient(circle at 44% 34%, rgb(255 255 255 / 0.58) 0 14px, transparent 15px), radial-gradient(circle at 73% 63%, rgb(255 255 255 / 0.38) 0 24px, transparent 25px), radial-gradient(circle at 88% 24%, rgb(255 255 255 / 0.46) 0 12px, transparent 13px);
  background-size: 280px 180px;
  animation: coverVirus 10s ease-in-out infinite alternate;
}
#cover-section.cover-anim-microcosm::after {
  opacity: 0.62;
  background: radial-gradient(circle at 20% 30%, rgb(0 0 0 / 0.8) 0 5px, transparent 6px), radial-gradient(circle at 48% 24%, rgb(0 0 0 / 0.78) 0 3px, transparent 4px), radial-gradient(circle at 76% 52%, rgb(0 0 0 / 0.74) 0 4px, transparent 5px), linear-gradient(28deg, transparent 47%, rgb(255 255 255 / 0.18) 49% 51%, transparent 53%), linear-gradient(150deg, transparent 47%, rgb(255 255 255 / 0.14) 49% 51%, transparent 53%);
  background-size: 180px 120px, 220px 140px, 240px 160px, 180px 120px, 220px 140px;
  animation: coverMicrocosm 14s linear infinite;
}
#cover-section.cover-anim-bubbles::after {
  opacity: 0.72;
  background: radial-gradient(circle at 22% 70%, rgb(255 255 255 / 0.18) 0 30px, rgb(255 255 255 / 0.55) 31px 34px, transparent 35px), radial-gradient(circle at 82% 44%, rgb(255 255 255 / 0.14) 0 20px, rgb(255 255 255 / 0.48) 21px 23px, transparent 24px), radial-gradient(circle at 56% 86%, rgb(255 255 255 / 0.12) 0 16px, rgb(255 255 255 / 0.4) 17px 19px, transparent 20px);
  background-size: 300px 210px, 240px 170px, 180px 150px;
  animation: coverBubbles 13s ease-in-out infinite;
}
#cover-section.cover-anim-flame-breath::after {
  opacity: 0.78;
  background: radial-gradient(circle at 62% 40%, rgb(249 115 22 / 0.42) 0 26px, transparent 27px), radial-gradient(circle at 76% 66%, rgb(220 38 38 / 0.34) 0 38px, transparent 39px), radial-gradient(circle at 42% 78%, rgb(251 146 60 / 0.38) 0 18px, transparent 19px);
  background-size: 260px 190px;
  animation: coverFlame 9s ease-in-out infinite alternate;
}
@keyframes coverSnowfall {
  to {
    background-position: 80px 260px;
  }
}
@keyframes coverWeb {
  to {
    background-position: 220px 130px, -260px 150px, 90px 120px;
  }
}
@keyframes coverVirus {
  to {
    transform: translate3d(18px, -12px, 0) scale(1.08);
  }
}
@keyframes coverMicrocosm {
  to {
    background-position: 160px 110px, -180px 130px, 220px -120px, 140px 120px, -160px 140px;
  }
}
@keyframes coverBubbles {
  0%, 100% {
    transform: translate3d(0, 18px, 0);
  }
  50% {
    transform: translate3d(18px, -26px, 0);
  }
}
@keyframes coverFlame {
  to {
    transform: translate3d(-18px, -10px, 0) scale(1.08);
    filter: saturate(1.25);
  }
}
@keyframes coverPreviewFloat {
  to {
    background-position: 90px 70px;
  }
}
@keyframes coverPreviewRise {
  0%, 100% {
    transform: translateY(14px);
  }
  50% {
    transform: translateY(-16px);
  }
}
@media (max-width: 768px) {
  .cover-animation-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .cover-animation-grid {
    grid-template-columns: 1fr;
  }
  .cover-editor-tabs {
    padding-bottom: 0.75rem;
  }
  .cover-animation-preview {
    height: 4.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #cover-section[class*="cover-anim-"]::after, .cover-animation-preview::before, .cover-animation-preview::after {
    animation: none !important;
  }
}
#cover-section::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}
@layer utilities {
  .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700 {
    background-color: var(--color-dynamic) !important;
  }
  .bg-blue-50, .bg-blue-50\/30, .bg-blue-50\/50, .bg-blue-50\/90, .bg-blue-100, .bg-blue-500\/5, .bg-blue-500\/10, .bg-blue-500\/20, .bg-blue-600\/20, .bg-blue-900\/10, .bg-blue-900\/20, .bg-blue-900\/30, .bg-blue-900\/40, .bg-blue-900\/50 {
    background-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-dynamic), transparent 80%) !important;
    }
  }
  .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700 {
    color: var(--color-dynamic) !important;
  }
  .fill-blue-400, .fill-blue-600 {
    fill: var(--color-dynamic) !important;
  }
  .stroke-blue-400, .stroke-blue-600 {
    stroke: var(--color-dynamic) !important;
  }
  .accent-blue-500, .accent-blue-600 {
    accent-color: var(--color-dynamic) !important;
  }
  .from-blue-400, .from-blue-500 {
    --tw-gradient-from: var(--color-dynamic) !important;
  }
  .to-indigo-500 {
    --tw-gradient-to: var(--color-dynamic-secondary) !important;
  }
  .border-blue-50, .border-blue-100, .border-blue-100\/50, .border-blue-200, .border-blue-400, .border-blue-400\/20, .border-blue-400\/50, .border-blue-500, .border-blue-500\/20, .border-blue-500\/30, .border-blue-500\/50, .border-blue-600, .border-blue-800\/40, .border-blue-900, .border-blue-900\/20, .border-blue-900\/30 {
    border-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-dynamic), transparent 35%) !important;
    }
  }
  .border-blue-500, .border-blue-600 {
    border-color: var(--color-dynamic) !important;
  }
  html.adaptive-theme body {
    background-color: var(--page-theme-background, var(--adaptive-background)) !important;
    background-image: radial-gradient(circle at 14% 0%, var(--adaptive-glow), transparent 34rem);
    background-attachment: fixed;
  }
  html.adaptive-theme .bg-white {
    background-color: var(--adaptive-card-tint) !important;
  }
  html.adaptive-theme .hover\:bg-white:hover {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 96%, var(--color-dynamic) 4%) !important;
    }
  }
  html.adaptive-theme .bg-white\/40 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 40%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-white\/50 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 50%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-white\/80 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 80%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-white\/90 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 90%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-white\/95 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 95%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-gray-50, html.adaptive-theme .bg-slate-50 {
    background-color: var(--adaptive-background) !important;
  }
  html.adaptive-theme .bg-gray-50\/30 {
    background-color: var(--adaptive-background) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-background) 30%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-gray-50\/50, html.adaptive-theme .bg-slate-50\/50 {
    background-color: var(--adaptive-background) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-background) 50%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-gray-50\/70 {
    background-color: var(--adaptive-background) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-background) 70%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-gray-50\/80, html.adaptive-theme .bg-gray-50\/90 {
    background-color: var(--adaptive-background) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-background) 88%, transparent) !important;
    }
  }
  html.adaptive-theme .bg-gray-100, html.adaptive-theme .bg-slate-100 {
    background-color: var(--adaptive-surface-2) !important;
  }
  html.adaptive-theme .border-gray-100, html.adaptive-theme .border-gray-200, html.adaptive-theme .border-slate-100, html.adaptive-theme .border-slate-200 {
    border-color: var(--adaptive-border) !important;
  }
  html.adaptive-theme.dark .dark\:bg-slate-950 {
    background-color: var(--adaptive-background) !important;
  }
  html.adaptive-theme.dark .dark\:bg-slate-950\/80 {
    background-color: var(--adaptive-background) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-background) 80%, transparent) !important;
    }
  }
  html.adaptive-theme.dark .dark\:bg-slate-900 {
    background-color: var(--adaptive-card-tint) !important;
  }
  html.adaptive-theme.dark .dark\:bg-slate-900\/50, html.adaptive-theme.dark .dark\:bg-slate-900\/95 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 88%, transparent) !important;
    }
  }
  html.adaptive-theme.dark .dark\:bg-slate-800, html.adaptive-theme.dark .dark\:bg-slate-700 {
    background-color: var(--adaptive-card-tint-strong) !important;
  }
  html.adaptive-theme.dark .dark\:bg-slate-800\/30, html.adaptive-theme.dark .dark\:bg-slate-800\/40, html.adaptive-theme.dark .dark\:bg-slate-800\/50 {
    background-color: var(--adaptive-card-tint-strong) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint-strong) 78%, transparent) !important;
    }
  }
  html.adaptive-theme.dark .dark\:border-slate-700, html.adaptive-theme.dark .dark\:border-slate-800, html.adaptive-theme.dark .dark\:border-white\/5, html.adaptive-theme.dark .dark\:border-white\/10 {
    border-color: var(--adaptive-border) !important;
  }
  html.adaptive-theme header, html.adaptive-theme #settings-dropdown {
    box-shadow: 0 14px 34px -28px var(--color-dynamic);
  }
  html.adaptive-theme #settings-dropdown {
    width: 16.25rem !important;
    overflow: hidden;
    border-radius: 1rem !important;
    background: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--adaptive-card-tint) 96%, transparent) !important;
    }
    backdrop-filter: blur(16px);
  }
  html.adaptive-theme #settings-dropdown button {
    min-height: 2.65rem;
    gap: 0.65rem;
    color: var(--adaptive-text-strong) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }
  #settings-dropdown button > span:first-child {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
  }
  html.adaptive-theme #settings-dropdown button > span:last-child {
    color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 38%) !important;
    }
  }
  html.adaptive-theme #settings-dropdown button[onclick*="logout"] {
    color: rgb(239 68 68) !important;
  }
  html.adaptive-theme #settings-dropdown .border-t {
    border-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-dynamic), transparent 72%) !important;
    }
  }
  [data-theme-control].theme-control-disabled, [data-theme-control]:disabled {
    cursor: not-allowed !important;
    filter: grayscale(0.45);
    opacity: 0.38 !important;
  }
  [data-theme-control]:disabled * {
    cursor: not-allowed !important;
  }
}
@layer components {
  #btn-to-top:not(.hidden) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
  }
  .nav-item {
    cursor: pointer;
  }
  html.adaptive-theme .nav-item, html.adaptive-theme .tab-btn {
    color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 54%) !important;
    }
  }
  html.adaptive-theme .nav-item:hover {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 96%, var(--color-dynamic) 4%) !important;
    }
    border-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-dynamic), transparent 68%) !important;
    }
    color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
    }
  }
  html.adaptive-theme .nav-item.bg-blue-50, html.adaptive-theme .nav-item.dark\:bg-slate-800\/60, html.adaptive-theme .nav-item.dark\:bg-blue-500\/10 {
    background-color: var(--adaptive-card-tint) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--adaptive-card-tint) 86%, var(--color-dynamic) 14%) !important;
    }
    border-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-dynamic), transparent 28%) !important;
    }
    color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
    }
  }
  html.adaptive-theme .tab-btn:hover, html.adaptive-theme .tab-btn.text-blue-500, html.adaptive-theme .tab-btn.text-blue-600 {
    background-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-dynamic), transparent 86%) !important;
    }
    border-color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-dynamic), transparent 28%) !important;
    }
    color: var(--color-dynamic) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
    }
  }
  html.adaptive-theme .nav-item:hover *, html.adaptive-theme .tab-btn:hover *, html.adaptive-theme .nav-item.bg-blue-50 *, html.adaptive-theme .tab-btn.text-blue-500 *, html.adaptive-theme .tab-btn.text-blue-600 * {
    color: inherit !important;
  }
  html.adaptive-theme .space-primary-button, html.adaptive-theme .space-primary-button *, html.adaptive-theme .btn-publish, html.adaptive-theme .btn-publish * {
    color: white !important;
  }
  html.adaptive-theme .nav-item svg, html.adaptive-theme .tab-btn svg {
    color: currentColor !important;
  }
  .btn-publish {
    min-width: 160px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
@layer utilities {
  @keyframes pulse-ring {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
  }
  .animate-pulse-ring {
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes shadow-pulse {
    0% {
      box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.7);
    }
    100% {
      box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
  }
  .status-dot-pulse {
    animation: shadow-pulse 2s infinite;
  }
  @keyframes soft-pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(2.5);
      opacity: 0;
    }
  }
  .animate-soft-pulse {
    animation: soft-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .status-scroll-container {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
  .status-scroll-text {
    display: inline-block;
    padding-left: 20px;
    will-change: transform;
    animation: status-autoplay 15s linear infinite;
  }
  @keyframes status-autoplay {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-result-item:hover {
  background: #f1f5f9;
  transform: translateX(4px);
}
.dark .search-result-item:hover {
  background: rgba(30, 41, 59, 0.5);
}
.search-result-item .item-name {
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
}
.dark .search-result-item .item-name {
  color: #f1f5f9 !important;
}
.search-g-box {
  width: 40px;
  height: 40px;
  background: #f8fafc;
  color: var(--color-dynamic);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-style: italic;
  flex-shrink: 0;
}
.dark .search-g-box {
  background: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 90%);
  }
  border-color: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 80%);
  }
}
html.adaptive-theme #global-search {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface) 92%, transparent) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 18%) !important;
  }
}
html.adaptive-theme #global-search::placeholder {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 58%) !important;
  }
}
html.adaptive-theme .search-wrapper svg {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 46%) !important;
  }
}
html.adaptive-theme #search-dropdown {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface) 96%, transparent) !important;
  }
  box-shadow: 0 24px 54px var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 54px color-mix(in srgb, var(--color-dynamic), transparent 78%) !important;
  }
}
html.adaptive-theme #search-dropdown [class*="text-slate-800"], html.adaptive-theme #search-dropdown [class*="text-slate-100"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 18%) !important;
  }
}
html.adaptive-theme #search-dropdown [class*="text-slate-400"], html.adaptive-theme #search-dropdown [class*="text-slate-500"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 52%) !important;
  }
}
html.adaptive-theme #search-dropdown .bg-gray-50\/50, html.adaptive-theme #search-dropdown .dark\:bg-slate-800\/50 {
  background-color: var(--adaptive-surface-2) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface-2) 74%, transparent) !important;
  }
}
html.adaptive-theme #search-dropdown .h-px, html.adaptive-theme #search-dropdown .border-t {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-border) !important;
}
html.adaptive-theme .search-result-item:hover {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 88%) !important;
  }
}
html.adaptive-theme .search-result-item:hover svg, html.adaptive-theme .search-result-item:hover [class*="group-hover\:text-blue"] {
  color: var(--color-dynamic) !important;
}
html.adaptive-theme .search-g-box, html.adaptive-theme #search-spaces-results .w-10.h-10 {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 48%) !important;
  }
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 90%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme #search-spaces-results > div:hover {
  background-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 86%) !important;
  }
}
html.adaptive-theme #search-spaces-results > div:hover [class*="text-slate-800"], html.adaptive-theme #search-spaces-results > div:hover [class*="text-slate-100"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 10%) !important;
  }
}
html.adaptive-theme #side-friends > div, html.adaptive-theme #recommended-friends-container, html.adaptive-theme #friends-viewport, html.adaptive-theme #friends-viewport .bg-white, html.adaptive-theme #friends-viewport .dark\:bg-slate-900 {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface) 96%, transparent) !important;
  }
}
html.adaptive-theme #tab-all-friends, html.adaptive-theme #tab-friend-requests, html.adaptive-theme #tab-friend-search, html.adaptive-theme #friends-sub-tabs .sub-tab-btn {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 48%) !important;
  }
  border: 1px solid transparent !important;
}
html.adaptive-theme #tab-all-friends.bg-blue-50, html.adaptive-theme #tab-friend-requests.bg-blue-50, html.adaptive-theme #tab-friend-search.bg-blue-50, html.adaptive-theme #tab-all-friends:hover, html.adaptive-theme #tab-friend-requests:hover, html.adaptive-theme #tab-friend-search:hover, html.adaptive-theme #friends-sub-tabs .sub-tab-btn.active, html.adaptive-theme #friends-sub-tabs .sub-tab-btn:hover {
  background-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 86%) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 45%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme #friends-sub-tabs {
  background-color: var(--adaptive-surface-2) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface-2) 74%, transparent) !important;
  }
  border: 1px solid var(--adaptive-border) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border), transparent 32%) !important;
  }
  box-shadow: inset 0 0 0 1px var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adaptive-surface), transparent 62%);
  }
}
html.adaptive-theme #recommended-friends-container [class*="text-slate-800"], html.adaptive-theme #recommended-friends-container [class*="text-slate-200"], html.adaptive-theme #friends-viewport [class*="text-gray-800"], html.adaptive-theme #friends-viewport [class*="text-slate-100"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 14%) !important;
  }
}
html.adaptive-theme #recommended-friends-container [class*="text-slate-400"], html.adaptive-theme #recommended-friends-container [class*="text-slate-500"], html.adaptive-theme #friends-viewport [class*="text-gray-400"], html.adaptive-theme #friends-viewport [class*="text-slate-500"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 54%) !important;
  }
}
html.adaptive-theme #notifications-dropdown {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface) 96%, transparent) !important;
  }
  box-shadow: 0 24px 54px var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 54px color-mix(in srgb, var(--color-dynamic), transparent 78%) !important;
  }
}
html.adaptive-theme #notifications-dropdown > .flex:first-child, html.adaptive-theme #notifications-dropdown > div:last-child {
  border-color: var(--adaptive-border) !important;
  background-color: var(--adaptive-surface-2) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface-2) 70%, transparent) !important;
  }
}
html.adaptive-theme #notifications-dropdown button {
  outline: none !important;
}
html.adaptive-theme #notifications-dropdown button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic), transparent 18%);
  }
}
html.adaptive-theme #tab-notif-user, html.adaptive-theme #tab-notif-system {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 48%) !important;
  }
}
html.adaptive-theme #tab-notif-user.border-blue-500, html.adaptive-theme #tab-notif-system.border-blue-500, html.adaptive-theme #tab-notif-user:hover, html.adaptive-theme #tab-notif-system:hover {
  border-color: var(--color-dynamic) !important;
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme #notif-content, html.adaptive-theme #notif-list-user, html.adaptive-theme #notif-list-system {
  background-color: transparent !important;
}
html.adaptive-theme #notifications-dropdown .empty-notif-msg, html.adaptive-theme #notifications-dropdown .clear-history-btn {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 54%) !important;
  }
}
html.adaptive-theme #notifications-dropdown .clear-history-btn:hover {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 10%) !important;
  }
}
.user-online-dot.online-dot, .user-online-dot:not(.online-dot) {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible;
  border: 2px solid rgb(255 255 255) !important;
  border-radius: 9999px !important;
  background: rgb(203 213 225) !important;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.06);
}
.dark .user-online-dot.online-dot, .dark .user-online-dot:not(.online-dot) {
  border-color: rgb(15 23 42) !important;
  background: rgb(71 85 105) !important;
}
.user-online-dot .online-dot-pulse {
  position: absolute;
  inset: -0.125rem;
  border-radius: inherit;
  background: rgb(74 222 128 / 0.58);
  animation: online-dot-pulse 1.7s ease-out infinite;
}
.user-online-dot .online-dot-core {
  position: relative;
  z-index: 1;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: inherit;
  background: rgb(203 213 225);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45);
}
.user-online-dot.is-online {
  background: transparent !important;
}
.user-online-dot.is-online .online-dot-core {
  background: rgb(34 197 94);
}
.user-online-dot.is-offline .online-dot-core {
  width: 100%;
  height: 100%;
  background: rgb(203 213 225);
}
.dark .user-online-dot.is-offline .online-dot-core {
  background: rgb(71 85 105);
}
@keyframes online-dot-pulse {
  0% {
    opacity: 0.85;
    transform: scale(0.72);
  }
  70% {
    opacity: 0;
    transform: scale(1.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}
@keyframes bell-ring {
  0%, 100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}
#notif-bell-btn:hover svg {
  animation: bell-ring 0.5s ease-in-out;
}
.notif-pulse {
  animation: pulse-bg 2s infinite ease-in-out !important;
  border-left: 4px solid var(--color-dynamic) !important;
  position: relative;
}
@keyframes pulse-bg {
  0% {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 98%);
  }
  50% {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 88%);
  }
  100% {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 98%);
  }
}
.posts-container {
  min-height: 500px;
  min-width: 0;
  contain: layout style;
}
.post-item {
  min-width: 0;
}
.post-item, [data-post-card] {
  overflow: visible !important;
  isolation: isolate;
}
[data-post-card].post-menu-open {
  z-index: 3000 !important;
}
[data-post-card].post-menu-open .post-actions {
  z-index: 3010 !important;
}
[id^="post-menu-"] {
  z-index: 3020 !important;
  min-width: 13rem;
  border-radius: 0.95rem !important;
  box-shadow: 0 1.25rem 3.5rem -1.8rem rgb(15 23 42 / 0.55) !important;
}
[id^="post-menu-"] button {
  gap: 0.65rem;
  min-height: 2.55rem;
  font-weight: 800 !important;
}
[id^="post-menu-"] svg {
  flex: 0 0 auto;
}
.emoji-picker {
  z-index: 4600 !important;
}
.post-item [data-post-vote="like"]:hover, .post-item [data-post-vote="like"].active, #viewer-post-actions [data-post-vote="like"]:hover, #viewer-post-actions [data-post-vote="like"].active, .comment-like-btn:hover, .comment-like-btn.active {
  color: var(--color-dynamic, rgb(59 130 246)) !important;
}
.comment-like-btn:not(.active):not(:hover) {
  color: rgb(148 163 184) !important;
}
.comment-like-btn > div {
  background: transparent !important;
  box-shadow: none !important;
}
.space-composer .emoji-picker {
  z-index: 4700 !important;
}
.about-header-icon-button {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 22%);
  }
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
#about-modal #modal-title {
  flex: 1 1 auto;
}
#about-modal #edit-profile-btn {
  margin-left: auto;
}
#about-modal #about-close-header-btn {
  margin-left: 0.45rem;
}
#about-modal #edit-status {
  min-height: 2.8rem;
  resize: vertical;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
  line-height: 1.55;
}
#about-modal #edit-status:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#about-modal input[id^="edit-"]:not([type="hidden"]), #about-modal textarea[id^="edit-"] {
  border: 0 !important;
  border-bottom: 1px solid var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 48%) !important;
  }
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
#about-modal input[id^="edit-"]:not([type="hidden"]):focus, #about-modal textarea[id^="edit-"]:focus {
  border-bottom-color: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%) !important;
  }
  box-shadow: none !important;
  outline: none !important;
}
.about-header-icon-button:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.about-header-icon-button.is-save, .space-about-edit-button.is-save {
  border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 20%) !important;
  background: var(--color-dynamic, #2563eb) !important;
  color: white !important;
  box-shadow: 0 0.6rem 1.25rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 76%);
}
.about-header-icon-button.is-save:hover, .space-about-edit-button.is-save:hover {
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), black 7%) !important;
}
.about-header-icon-button:active {
  transform: scale(0.94);
}
.about-header-icon-button svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-header-icon-button.is-close {
  margin-left: 0.25rem;
  font-size: 1.25rem;
  font-weight: 900;
}
html.adaptive-theme .hashtag-filter-banner {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 36%) !important;
  }
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 88%) !important;
  }
  box-shadow: inset 0 0 0 1px var(--adaptive-surface), 0 14px 30px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adaptive-surface), transparent 72%), 0 14px 30px color-mix(in srgb, var(--color-dynamic), transparent 86%);
  }
}
html.adaptive-theme .hashtag-filter-banner [class*="text-slate-400"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 42%) !important;
  }
}
html.adaptive-theme .hashtag-filter-banner [class*="text-blue"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 10%) !important;
  }
}
html.adaptive-theme .hashtag-filter-banner button {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 34%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 76%, transparent) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme .hashtag-filter-banner button:hover {
  background: var(--color-dynamic) !important;
  color: white !important;
}
.hashtag-filter-tags {
  min-width: 0;
}
.hashtag-filter-chip {
  max-width: 100%;
  min-width: max-content;
  line-height: 1;
}
.hashtag-filter-chip span {
  color: inherit !important;
}
.hashtag-filter-chip span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.adaptive-theme .hashtag-filter-chip {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 42%) !important;
  }
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 78%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme .hashtag-filter-chip:hover {
  background: var(--color-dynamic) !important;
  color: white !important;
}
html.adaptive-theme .space-hashtag-banner .hashtag-filter-chip {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), white 10%) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 20%) !important;
  }
  color: #fff !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
}
html.adaptive-theme .space-hashtag-banner .hashtag-filter-chip span {
  color: inherit !important;
}
html.adaptive-theme .hashtag-filter-banner .hashtag-filter-chip:hover, html.adaptive-theme .space-hashtag-banner .hashtag-filter-chip:hover {
  color: #fff !important;
}
html.adaptive-theme .post-item {
  border-color: var(--adaptive-border) !important;
  background-color: transparent;
}
html.adaptive-theme .post-item .post-content-text {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 38%) !important;
  }
}
html.adaptive-theme .post-item .post-hashtag-chip {
  border: 1px solid var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic), transparent 54%);
  }
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 76%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 18%) !important;
  }
  box-shadow: 0 8px 18px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-dynamic), transparent 86%);
  }
}
html.adaptive-theme .post-item .post-hashtag-chip[aria-pressed="true"], html.adaptive-theme .post-item .post-hashtag-chip:hover {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), white 14%) !important;
  }
  color: white !important;
}
html.adaptive-theme .post-item > .mt-4.flex.items-center {
  margin-top: 0.85rem !important;
  border-top: 1px solid var(--adaptive-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--adaptive-border), transparent 42%);
  }
  padding-top: 0.7rem;
}
html.adaptive-theme .post-item [data-post-vote], html.adaptive-theme .post-item [data-view-counter], html.adaptive-theme .post-item button[onclick^="openPostViewer"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 44%) !important;
  }
}
html.adaptive-theme .post-item [data-post-vote]:hover, html.adaptive-theme .post-item button[onclick^="openPostViewer"]:hover, html.adaptive-theme .post-item [data-view-counter]:hover {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .post-item [data-post-vote].active {
  color: rgb(248 113 113) !important;
}
html.adaptive-theme .post-item [id^="comment-count-"] {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 82%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 16%) !important;
  }
}
html.adaptive-theme .post-item [data-view-counter] span, html.adaptive-theme .post-item [data-post-count] {
  color: currentColor !important;
}
html.adaptive-theme .post-item .post-actions button {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 44%) !important;
  }
}
html.adaptive-theme .post-item .post-actions button:hover {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 86%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .end-feed-msg {
  border-color: var(--adaptive-border) !important;
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 50%) !important;
  }
}
html.adaptive-theme .load-more-posts {
  border-color: var(--adaptive-border) !important;
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 94%, transparent) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme .load-more-posts:hover {
  border-color: var(--color-dynamic) !important;
  background: var(--color-dynamic) !important;
  color: white !important;
}
#top-spaces-dropdown {
  width: min(20rem, calc(100vw - 2rem));
}
.space-menu-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.space-menu-manage {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 36%);
  }
  transition: color 160ms ease, background 160ms ease;
}
.space-menu-manage:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-menu-manage svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-menu-item {
  border: 1px solid transparent;
}
.space-menu-row.is-header-pinned .space-menu-item {
  border-color: rgb(59 130 246 / 0.28);
  border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 70%);
  background: rgb(59 130 246 / 0.09);
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 91%);
}
.space-menu-pin-indicator, .space-index-pin-indicator {
  position: relative;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(59 130 246 / 0.3);
  border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 68%);
  border-radius: 999px;
  background: rgb(59 130 246 / 0.14);
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  color: var(--color-dynamic, #2563eb);
  box-shadow: 0 0.45rem 1.1rem rgb(15 23 42 / 0.12);
}
.space-menu-pin-indicator::after, .space-index-pin-indicator::after {
  content: "";
  position: absolute;
  top: -0.08rem;
  right: -0.08rem;
  width: 0.42rem;
  height: 0.42rem;
  border: 2px solid var(--adaptive-surface, white);
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
}
.space-menu-pin-indicator svg, .space-index-pin-indicator svg {
  width: 0.92rem;
  height: 0.92rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-menu-create {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
  border: 1px dashed var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 42%);
  }
  border-radius: 0.9rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 88%, transparent);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 12%);
  }
  padding: 0.78rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.space-menu-create:hover, .space-menu-create:focus-visible {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 18%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 4%);
  }
  transform: translateY(-1px);
}
.space-manage-panel {
  position: fixed;
  top: 4.1rem;
  left: 18rem;
  z-index: 10000;
  width: min(22rem, calc(100vw - 2rem));
  overflow: visible;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.22);
}
.space-manage-panel header, .space-manage-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
}
.space-manage-panel header {
  border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 45%);
  }
}
.space-manage-panel header span, .space-manage-body label span {
  display: block;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 36%);
  }
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.space-manage-panel header strong {
  display: block;
  margin-top: 0.18rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 0.9rem;
  font-weight: 900;
}
.space-manage-panel header button {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.65rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 1.2rem;
  font-weight: 900;
}
.space-manage-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.space-manage-icon-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-manage-icon-button:hover, .space-manage-icon-button.is-active {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  }
}
.space-manage-actions-wrap {
  position: relative;
}
.space-manage-actions-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 10020;
  width: 14.5rem;
  max-height: min(18rem, calc(100vh - 8rem));
  overflow-y: auto;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 18%);
  }
  border-radius: 0.9rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  padding: 0.35rem;
  box-shadow: 0 1rem 2.8rem rgba(15, 23, 42, 0.22);
}
.space-manage-panel header .space-manage-actions-menu button {
  display: flex;
  width: 100% !important;
  height: auto !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  border-radius: 0.65rem;
  padding: 0.66rem 0.72rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 12%);
  }
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.space-manage-panel header .space-manage-actions-menu button:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
}
.space-manage-panel header .space-manage-actions-menu button.is-danger {
  color: rgb(239 68 68);
}
.space-manage-panel header .space-manage-actions-menu button.is-danger:hover {
  background: rgb(239 68 68 / 0.12);
}
.space-manage-actions-menu svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-manage-actions-menu span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.space-manage-body {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}
.space-manage-body input, .space-manage-body textarea {
  width: 100%;
  margin-top: 0.4rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 24%);
  }
  border-radius: 0.8rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 20%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  padding: 0.7rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  outline: none;
}
.space-manage-body textarea {
  min-height: 5rem;
  resize: vertical;
}
.space-manage-body small {
  display: block;
  margin-top: 0.35rem;
  color: var(--adaptive-muted, rgb(100 116 139));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(100 116 139)), transparent 12%);
  }
  font-size: 0.64rem;
  font-weight: 800;
}
.space-manage-panel footer {
  border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 45%);
  }
}
.space-manage-panel footer button {
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-manage-panel footer button:last-child {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  color: white;
}
html.adaptive-theme .space-menu-create:hover, html.adaptive-theme .space-menu-create:focus-visible {
  background: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-surface) 78%) !important;
  }
  color: var(--adaptive-text, rgb(15 23 42)) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text, rgb(15 23 42)), var(--color-dynamic, #2563eb) 16%) !important;
  }
}
html.adaptive-theme .space-manage-panel footer button:hover, html.adaptive-theme .space-about-footer button:hover, html.adaptive-theme .album-card-menu button:hover, html.adaptive-theme .album-action-menu button:hover, html.adaptive-theme #create-album-btn:hover, html.adaptive-theme #btn-show-photos:hover, html.adaptive-theme #btn-show-albums:hover, html.adaptive-theme .load-more-posts:hover {
  background: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%) !important;
  }
  border-color: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 30%) !important;
  }
  color: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 10%) !important;
  }
}
html.adaptive-theme .space-manage-panel footer button:last-child:hover, html.adaptive-theme .space-primary-button:hover, html.adaptive-theme .album-edit-save:hover:not(:disabled), html.adaptive-theme .album-share-button:hover {
  background: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), black 6%) !important;
  }
  color: white !important;
}
.space-page-shell {
  width: min(100%, 76rem);
  margin: 0 auto;
}
.space-profile-page-shell {
  width: 100%;
  margin: 0;
}
body.space-route #btn-tab-my {
  display: none !important;
}
body.space-route:not([data-space-active-tab="feed"]) #side-achievements {
  display: none !important;
}
body:not(.space-route) #btn-tab-albums, body:not(.space-route) #btn-tab-showcase {
  display: none !important;
}
body.space-route .tab-btn.active-tab {
  color: var(--color-dynamic, #2563eb) !important;
  border-color: var(--color-dynamic, #2563eb) !important;
}
body.space-route #friends-list-container > div {
  border-radius: 0.45rem !important;
}
body.space-route #friends-list-container {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0.45rem !important;
  align-items: center;
  min-height: 2.75rem;
  margin-top: -0.28rem !important;
  padding-inline: 0.15rem !important;
}
.space-subscriber-thumb {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.space-subscriber-thumb:active {
  transform: scale(0.96);
}
.space-left-actions {
  display: grid;
  gap: 0.55rem;
  margin: 0.15rem 0 0;
}
.space-left-photos {
  margin: 0.65rem 0 0.75rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 0.9rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, transparent);
  }
  padding: 0.65rem;
}
.space-left-photos-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 46%);
  }
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.space-left-photos-title strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
}
.space-left-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}
.space-left-photos-grid button {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.55rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
}
.space-left-photos-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
}
.space-left-photos-grid button:hover img {
  filter: brightness(1.04);
  transform: scale(1.04);
}
.space-left-message, .space-left-subscribe {
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 0.8rem;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.space-subscribe-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem;
  min-height: 2.45rem;
  overflow: hidden;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 50%);
  }
  border-radius: 0.8rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 92%, transparent);
  }
  box-shadow: 0 0.75rem 1.8rem -1.4rem var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.75rem 1.8rem -1.4rem color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 58%);
  }
}
.space-left-message {
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 35%);
  }
  background: var(--color-dynamic, #2563eb);
  color: white;
}
.space-left-subscribe {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: var(--color-dynamic, #2563eb);
  color: white;
  padding: 0 0.7rem;
}
.space-left-subscribe.is-active {
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 76%, var(--color-dynamic, #2563eb) 24%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 18%);
  }
}
.space-followers-count {
  display: grid;
  min-width: 0;
  place-items: center;
  border-left: 0;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 26%);
  }
  font-size: 0.72rem;
  font-weight: 950;
  transition: background 160ms ease, color 160ms ease;
}
.space-subscribe-divider-mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(100% - 3.25rem);
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--adaptive-surface, white) 84%, var(--color-dynamic, #2563eb) 16%);
  color: var(--color-dynamic, #2563eb);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--adaptive-surface, white) 88%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.space-subscribe-divider-mark svg {
  width: .62rem;
  height: .62rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-followers-count:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-left-message:hover, .space-subscribe-split:hover {
  transform: translateY(-1px);
}
.space-intro-card, .space-composer, .space-switchboard, .space-tabs, .space-news-strip, .space-post, .space-side-card, .space-list-panel, .spaces-index-card {
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, transparent);
  }
  box-shadow: 0 18px 44px -34px var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 44px -34px color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 46%);
  }
}
.space-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  padding: 1.1rem;
}
.space-kicker {
  margin-bottom: 0.35rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 42%);
  }
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.space-intro-main h2 {
  margin: 0;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 0.95;
}
.space-intro-main p {
  max-width: 42rem;
  margin-top: 0.7rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 54%);
  }
  font-size: 0.83rem;
  font-weight: 700;
}
.space-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.space-hero-tag, .hashtag-filter-chip {
  min-width: 0;
}
.hashtag-filter-tags .hashtag-filter-chip {
  width: auto;
  min-width: max-content;
  color: #2563eb;
}
.hashtag-filter-tags .hashtag-filter-chip span {
  display: inline-block;
  color: inherit !important;
  opacity: 1;
}
html.adaptive-theme .hashtag-filter-banner .hashtag-filter-tags .hashtag-filter-chip, html.adaptive-theme .space-hashtag-banner .hashtag-filter-tags .hashtag-filter-chip {
  background: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 70%) !important;
  }
  border-color: var(--color-dynamic, #2563eb) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 26%) !important;
  }
  color: #fff !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.22);
}
html.adaptive-theme .hashtag-filter-banner .hashtag-filter-tags .hashtag-filter-chip:hover, html.adaptive-theme .space-hashtag-banner .hashtag-filter-tags .hashtag-filter-chip:hover {
  background: var(--color-dynamic, #2563eb) !important;
  color: #fff !important;
}
.space-hero-tag {
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 82%);
  }
  padding: 0.35rem 0.65rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 16%);
  }
  font-size: 0.67rem;
  font-weight: 900;
}
.space-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: 1rem;
  align-items: start;
}
.space-feed-column, .space-side-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}
.space-composer {
  border-radius: 1rem;
  overflow: visible;
  margin-top: 0.75rem;
  position: relative;
  z-index: 20;
}
.space-composer-text {
  width: 100%;
  min-height: 6.2rem;
  resize: vertical;
  border: 0;
  background: transparent;
  padding: 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 38%);
  }
  font-size: 0.92rem;
  outline: none;
}
.space-composer-text::placeholder {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 54%);
  }
}
.space-composer-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 1rem 1rem;
  width: min(22rem, calc(100% - 2rem));
  overflow: visible;
}
.space-composer-preview.hidden {
  display: none;
}
.space-composer-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 34%);
  }
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 5%);
  }
}
.space-composer-preview-item img {
  width: 100%;
  height: 8rem;
  max-height: 15rem;
  object-fit: cover;
  display: block;
}
.space-composer-preview-item button {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgb(15 23 42 / 0.72);
  color: white;
}
.space-editing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240));
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  padding: 0.75rem 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-editing-banner button {
  border-radius: 0.65rem;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 48%);
  }
  padding: 0.45rem 0.65rem;
}
.space-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
  padding: 0.55rem 0.7rem;
}
.space-primary-button, .space-ghost-button, .space-icon-button, .space-delay-select {
  border-radius: 0.75rem;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.space-primary-button {
  background: var(--color-dynamic, #2563eb);
  padding: 0.72rem 1rem;
  color: white;
}
.space-ghost-button, .space-delay-select {
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 48%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  padding: 0.58rem 0.72rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
}
.space-icon-button {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 58%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
}
.space-primary-button:hover, .space-ghost-button:hover, .space-icon-button:hover {
  transform: translateY(-1px);
}
.space-tabs {
  display: flex;
  gap: 0.35rem;
  border-radius: 0.85rem 0.85rem 0 0;
  border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 42%);
  }
  padding: 0.35rem;
  min-height: 2.75rem;
}
.space-switchboard {
  overflow: hidden;
  border-radius: 1rem;
}
.space-switchboard .space-tabs, .space-switchboard .space-news-strip {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.space-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 1;
  border-radius: 0.75rem;
  padding: 0.58rem 0.7rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 45%);
  }
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.space-tabs button + button {
  border-left: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 36%);
  }
}
.space-tab-label {
  min-width: 0;
}
.space-tab-label b {
  margin-left: 0.35rem;
  font-weight: 900;
  opacity: 0.58;
}
.space-tab-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.56;
}
.space-tabs button.is-active .space-tab-icon, .space-tabs button:hover .space-tab-icon {
  opacity: 1;
  transform: translateX(1px);
}
.space-tabs button:not(.is-active):hover {
  background: var(--adaptive-card-tint, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-card-tint, white) 96%, var(--color-dynamic, #2563eb) 4%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
}
.space-tabs button.is-active, .space-tabs button.is-active:hover {
  background: var(--adaptive-card-tint, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-card-tint, white) 86%, var(--color-dynamic, #2563eb) 14%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
}
.space-news-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 0;
  border-radius: 0;
  margin-top: 0;
  border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 52%);
  }
  padding: 0.7rem 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 50%);
  }
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.publisher-strip-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin-left: auto;
}
.publisher-strip-actions strong {
  white-space: nowrap;
}
.publisher-create-button {
  display: inline-flex;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 48%);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  padding: .5rem .72rem;
  color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.publisher-create-button svg {
  width: .9rem;
  height: .9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  transition: transform 220ms ease;
}
.publisher-create-button:hover, .publisher-create-button.is-active {
  border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 18%);
  background: var(--color-dynamic, #2563eb);
  color: white;
  box-shadow: 0 12px 28px -18px var(--color-dynamic, #2563eb);
  transform: translateY(-1px);
}
.publisher-create-button.is-active svg {
  transform: rotate(45deg);
}
.publisher-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-.55rem);
  transition: grid-template-rows 320ms cubic-bezier(.22,.8,.24,1), opacity 220ms ease, transform 320ms cubic-bezier(.22,.8,.24,1);
}
.publisher-drawer-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 320ms;
}
.publisher-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.publisher-drawer.is-open .publisher-drawer-inner {
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.profile-publisher-hub, .profile-publisher-list {
  min-width: 0;
}
.profile-publisher-hub #profile-publisher-tab-body {
  margin-top: 1rem;
}
.profile-publisher-hub .profile-post-composer {
  margin-top: .75rem;
}
.profile-publisher-hub .space-composer-menu {
  z-index: 80;
}
@media (max-width: 640px) {
  .space-news-strip, .publisher-news-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .publisher-strip-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .publisher-create-button span {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ------------[Стабилизация окон и переходов]------------ // Исправляет утечки
   правой колонки, размеры модалок и конфликтующие фоны после навигации. Модуль: «оформление интерфейса». Часть 1/34 */
html:root body #messages-side-root.hidden {
    display: none !important;
}

html:root body #friends-modal > div {
    width: min(34rem, calc(100vw - 2rem)) !important;
    height: min(36rem, calc(100dvh - 2rem)) !important;
    max-height: calc(100dvh - 2rem) !important;
    border: 1px solid var(--vmesta-ui-line, var(--standard-line)) !important;
    border-radius: 1.15rem !important;
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
    box-shadow: var(--vmesta-ui-shadow, 0 1.6rem 4rem -1.5rem rgb(15 23 42 / .5)) !important;
}

html:root body #friends-modal > div > .p-8,
html:root body #friends-modal > div > .h-6 {
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
}

html:root body #friends-modal #modal-friends-list {
    min-height: 0 !important;
    border-top: 1px solid var(--vmesta-ui-line, var(--standard-line)) !important;
    background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important;
}

html:root body #friends-modal > div > button[aria-label="Закрыть модальное окно"] {
    top: .9rem !important;
    right: .9rem !important;
    display: grid !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: .68rem !important;
    background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important;
}

html:root body .spaces-index-filter-panel {
    width: min(22rem, calc(100vw - 1.5rem)) !important;
    height: min(22rem, calc(100dvh - 1.5rem)) !important;
    min-height: 18rem;
    aspect-ratio: auto !important;
    border: 1px solid var(--vmesta-ui-line, var(--standard-line)) !important;
    border-radius: 1.1rem !important;
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
    box-shadow: var(--vmesta-ui-shadow, 0 1.5rem 3.5rem -1.25rem rgb(15 23 42 / .45)) !important;
}

html:root body .spaces-index-filter-fields :is(input, select) {
    border-color: var(--vmesta-ui-line, var(--standard-line)) !important;
    background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important;
    color: var(--vmesta-ui-ink, var(--standard-text-active)) !important;
}

/* Пустая медиатека остаётся компактной; реальная сетка фотографий растёт по содержимому. */
html:root body #photos-list-container:has(.profile-photos-empty) {
    min-height: 12.5rem !important;
}

html:root body .profile-photos-empty,
html:root body .profile-albums-loading {
    min-height: 11.5rem !important;
    padding-block: 1.5rem !important;
}

html:root body .space-profile-photo-field:has(.space-empty) {
    min-height: 12.5rem !important;
    display: grid;
    place-items: center;
}

/* Окно достижений больше не меняет внешнюю геометрию между четырьмя областями. */
@media (min-width: 641px) {
    html:root body .achievements-dialog {
        width: min(70rem, calc(100vw - 3rem)) !important;
        height: min(46rem, calc(100dvh - 3rem)) !important;
        max-height: calc(100dvh - 3rem) !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    }
}

html:root body .achievements-dialog-head {
    min-height: 0 !important;
    padding: .72rem 1rem .65rem !important;
}

html:root body .achievements-dialog-head > div {
    gap: .1rem !important;
}

html:root body .achievements-dialog-head h2 {
    font-size: .94rem !important;
}

html:root body .achievements-dialog-head > button {
    width: 2.15rem !important;
    height: 2.15rem !important;
    flex: 0 0 2.15rem !important;
    margin: 0 !important;
    border-radius: .66rem !important;
}

html:root body .achievements-scope-tabs,
html:root body .achievements-dialog-tabs {
    padding: .5rem 1rem !important;
}

html:root body .achievements-scope-tabs button,
html:root body .achievements-dialog-tabs button {
    min-height: 2.35rem !important;
    padding: .45rem .65rem !important;
}

html:root body .achievements-dialog-body {
    min-height: 0 !important;
    overscroll-behavior: contain;
}

/* Заголовки настроек принадлежат прокручиваемой панели и остаются у её верхнего края. */
html:root body .cover-account-pane .cover-account-card {
    overflow: visible !important;
    border-color: var(--vmesta-ui-line, var(--standard-line)) !important;
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
}

html:root body .cover-account-pane .cover-account-card-header {
    position: sticky !important;
    z-index: 20;
    top: 0;
    border-color: var(--vmesta-ui-line, var(--standard-line)) !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel, var(--standard-panel)) 94%, transparent) !important;
    color: var(--vmesta-ui-ink, var(--standard-text-active)) !important;
    backdrop-filter: blur(14px);
}

html:root body .cover-account-pane :is(.cover-account-list, .privacy-settings-list, .privacy-system-note, .privacy-group > div) {
    border-color: var(--vmesta-ui-line, var(--standard-line)) !important;
    color: var(--vmesta-ui-ink, var(--standard-text-active)) !important;
}

html:root body .cover-account-verification-mark,
html:root body .cover-account-verification[data-status="verified"] .cover-account-verification-mark {
    border-color: rgb(37 131 255 / .48) !important;
    background: color-mix(in srgb, #2583ff 14%, var(--vmesta-ui-panel, #fff)) !important;
    color: #2583ff !important;
}

html:root body .cover-account-verification-mark::before {
    background-color: #2583ff !important;
}

html:root body .cover-account-verification-mark > svg {
    display: none !important;
}

/* Близость — обычное действие, удаление — отдельная опасная зона. */
html:root body .friend-row-menu-wrap .friend-dropdown {
    padding: .32rem !important;
}

html:root body .friend-closeness-menu-action {
    margin-bottom: .32rem;
    border: 0 !important;
    border-radius: .58rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 9%, transparent) !important;
}

html:root body .friend-row-menu-wrap .friend-dropdown > button:last-child {
    border-radius: .58rem !important;
    background: color-mix(in srgb, #ef4444 8%, transparent) !important;
}

/* Кнопки управления комнатой — квадраты со скруглением, без круговых масок. */
html:root body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
),
html:root body .messenger-room-settings-header-actions > button,
html:root body .messenger-room-settings-modal > section > header > button {
    border-radius: .62rem !important;
    clip-path: inset(0 round .62rem) !important;
}

@media (max-width: 640px) {
    html:root body #friends-modal > div {
        width: 100% !important;
        height: min(42rem, calc(100dvh - 1rem)) !important;
        max-height: calc(100dvh - 1rem) !important;
    }

    html:root body .spaces-index-filter-panel {
        position: fixed !important;
        top: 50% !important;
        right: .75rem !important;
        left: .75rem !important;
        width: auto !important;
        height: min(22rem, calc(100dvh - 1.5rem)) !important;
        transform: translateY(-50%) !important;
    }
}
.space-profile-photos-panel {
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, transparent);
  }
  box-shadow: 0 18px 44px -34px var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 44px -34px color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 46%);
  }
  padding: 1rem;
}
.space-profile-media-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.space-profile-media-layout.is-single {
  grid-template-columns: 1fr;
}
.space-profile-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.5rem 1rem;
}
.space-profile-media-head h3, .space-profile-showcase-card header span {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 42%);
  }
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.space-media-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 26%);
  }
  border-radius: 0.75rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 4%);
  }
  box-shadow: 0 0.45rem 1rem rgb(15 23 42 / 0.08);
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  cursor: pointer;
  padding: 0.58rem 0.9rem;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-media-upload svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-profile-media-toolbar {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0.5rem 1.25rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 28%);
  }
  border-radius: 0.85rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 92%);
  }
  padding: 0.22rem;
}
.space-profile-media-toolbar button {
  min-width: 5.2rem;
  border-radius: 0.6rem;
  padding: 0.48rem 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 34%);
  }
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-profile-media-toolbar button.is-active {
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 3%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  box-shadow: 0 0.4rem 0.9rem rgb(15 23 42 / 0.08);
}
.space-profile-photo-field {
  border: 1px dashed var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 54%);
  }
  border-radius: 1rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 34%);
  }
  padding: 1rem;
  min-height: 22.5rem;
}
.space-profile-photo-field.is-showcase {
  min-height: 0;
}
.space-profile-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.space-profile-photo-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.65rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  box-shadow: 0 0.35rem 1rem rgb(15 23 42 / 0.1);
}
.space-photo-delete, .space-showcase-set-avatar {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 36%);
  }
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 8%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.18);
}
.space-photo-delete {
  top: 0.4rem;
  right: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}
.space-profile-photo-tile:hover .space-photo-delete, .space-profile-photo-tile:focus-visible .space-photo-delete {
  opacity: 1;
  transform: translateY(0);
}
.space-showcase-set-avatar {
  right: 0.4rem;
  bottom: 0.4rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.55rem;
}
.space-showcase-set-avatar svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
}
.space-profile-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, filter 180ms ease;
}
.space-profile-photo-tile:hover img {
  filter: brightness(1.04);
  transform: scale(1.045);
}
.space-profile-showcase-card {
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, transparent);
  }
  box-shadow: 0 18px 44px -34px var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 44px -34px color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 46%);
  }
  padding: 1rem;
}
#space-side-panel .space-profile-showcase-card {
  width: 100%;
}
@media (max-width: 1023px) {
  .space-profile-media-layout {
    grid-template-columns: 1fr;
  }
  .space-profile-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .space-profile-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.space-profile-showcase-card.is-full {
  width: min(100%, 24rem);
  margin: 0 auto;
  box-shadow: none;
}
.space-profile-showcase-card.is-full .space-profile-showcase-grid {
  gap: 1rem;
}
.space-profile-showcase-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.space-profile-showcase-card header strong {
  display: block;
  margin-top: 0.18rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 48%);
  }
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.showcase-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.showcase-gallery-icon, .showcase-edit-button, .space-profile-showcase-card header button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.showcase-edit-button {
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 62%);
  }
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 14%);
  }
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.showcase-edit-button:hover {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 32%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%);
  }
  transform: translateY(-1px);
}
.showcase-gallery-icon svg, .showcase-edit-button svg, .space-profile-showcase-card header svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-profile-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.space-showcase-tile, .space-showcase-placeholder {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.85rem;
}
.space-showcase-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space-showcase-tile.is-main {
  outline: 2px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--color-dynamic, #2563eb), white 14%);
  }
  outline-offset: 2px;
}
.space-showcase-tile span {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 1;
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 26%);
  }
  color: white;
  padding: 0.18rem 0.42rem;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.space-showcase-placeholder {
  border: 1px dashed var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 54%);
  }
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 42%);
  }
}
.space-showcase-tile.is-broken {
  border: 1px dashed var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 54%);
  }
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 42%);
  }
  box-shadow: none;
}
body.modal-open {
  overflow: hidden;
}
.space-showcase-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px);
  padding: 1.2rem;
}
.space-showcase-editor-modal {
  width: min(44rem, 100%);
  max-height: min(42rem, calc(100vh - 2.4rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 1.15rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  box-shadow: 0 2rem 6rem rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
.space-showcase-editor-modal header, .space-showcase-editor-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}
.space-showcase-editor-modal header {
  border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 45%);
  }
}
.space-showcase-editor-modal header span, .space-showcase-editor-modal header strong {
  display: block;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-weight: 900;
  text-transform: uppercase;
}
.space-showcase-editor-modal header span {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
}
.space-showcase-editor-modal header strong {
  margin-top: 0.2rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 48%);
  }
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.space-showcase-editor-modal header > button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 1.35rem;
  font-weight: 900;
}
.space-showcase-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  overflow-y: auto;
  padding: 1.15rem;
}
.space-showcase-editor-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0.85rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 91%);
  }
  box-shadow: 0 0.45rem 1.2rem rgb(15 23 42 / 0.1);
}
.space-showcase-editor-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space-showcase-editor-tile span {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid white;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  box-shadow: 0 0.25rem 0.8rem rgba(15, 23, 42, 0.22);
}
.space-showcase-editor-tile.is-selected {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-showcase-editor-tile.is-selected span {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-showcase-editor-tile.is-selected span::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.18rem;
  width: 0.42rem;
  height: 0.68rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.space-showcase-editor-tile em {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), black 18%);
  }
  color: white;
  padding: 0.25rem 0.45rem;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.space-showcase-editor-tile i {
  position: absolute;
  right: 0.45rem;
  top: 0.45rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 0.62rem;
  background: rgb(15 23 42 / 0.72);
  color: white;
  cursor: pointer;
  font-style: normal;
  opacity: 0;
  transform: translateY(-0.2rem);
  transition: opacity 160ms ease, transform 160ms ease;
}
.space-showcase-editor-tile:hover i, .space-showcase-editor-tile:focus-within i {
  opacity: 1;
  transform: translateY(0);
}
.space-showcase-editor-tile i svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.space-showcase-editor-modal footer {
  border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 45%);
  }
}
.space-editor-cancel, .space-editor-save, .space-editor-delete {
  border-radius: 0.8rem;
  padding: 0.7rem 1rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-editor-cancel {
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 24%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-editor-save {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  color: white;
}
.space-editor-delete {
  border: 1px solid rgb(239 68 68 / 0.34);
  color: rgb(239 68 68);
  background: rgb(239 68 68 / 0.08);
}
.space-editor-delete:disabled {
  cursor: default;
  opacity: 0.42;
}
.space-mini-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  padding: 1rem;
}
.space-mini-modal {
  width: min(24rem, 100%);
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.22);
  padding: 1rem;
}
.space-mini-modal header, .space-mini-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.space-mini-modal header span {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.space-mini-modal header button {
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 1.2rem;
  font-weight: 900;
}
.space-mini-modal input {
  width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 24%);
  }
  border-radius: 0.8rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 20%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  padding: 0.8rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 900;
  outline: none;
}
.space-mini-modal-text {
  margin: 0.9rem 0 1rem;
  color: var(--adaptive-muted, rgb(100 116 139));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(100 116 139)), transparent 8%);
  }
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55;
}
.space-mini-modal-copy {
  margin: 0.95rem 0 1rem;
  color: var(--adaptive-muted, rgb(100 116 139));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(100 116 139)), transparent 8%);
  }
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.55;
}
.space-access-tabs {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}
.space-access-tabs button {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 22%);
  }
  border-radius: 0.85rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 22%);
  }
  padding: 0.78rem 0.9rem;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}
.space-access-tabs button:hover, .space-access-tabs button.is-active {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 32%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
}
.space-access-tabs button strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 6%);
  }
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-access-tabs button span {
  color: var(--adaptive-muted, rgb(100 116 139));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(100 116 139)), transparent 8%);
  }
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.35;
}
.space-mini-modal footer button {
  border-radius: 0.75rem;
  padding: 0.68rem 0.9rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.space-mini-modal footer button:last-child {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  color: white;
}
.space-mini-modal footer button.is-danger {
  background: rgb(239 68 68);
  color: white;
}
.space-create-modal {
  display: grid;
  gap: 0.9rem;
  width: min(34rem, 100%);
  border-radius: 1.65rem;
  padding: 1.25rem;
}
.space-create-modal header {
  padding-bottom: 0.2rem;
}
.space-create-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 56%);
  }
  border-radius: 1.15rem;
  background: linear-gradient(135deg, var(--color-dynamic, #2563eb), transparent), var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%), transparent), color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 14%);
  }
  padding: 0.85rem;
}
.space-create-hero-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
  color: white;
  box-shadow: 0 1rem 2rem var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 76%);
  }
}
.space-create-hero-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-create-hero strong {
  color: var(--adaptive-text, rgb(15 23 42));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text, rgb(15 23 42)), var(--color-dynamic, #2563eb) 8%);
  }
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.45;
}
.space-create-field {
  display: grid;
  gap: 0.4rem;
}
.space-create-field span {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-muted, rgb(100 116 139)) 24%);
  }
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.space-mini-modal .space-create-field input {
  margin: 0;
}
.space-create-modal footer {
  margin-top: 0.2rem;
}
.space-create-modal footer button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.space-delete-modal {
  z-index: 2147483000 !important;
  isolation: isolate;
}
.space-delete-modal-content {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .space-profile-media-layout {
    grid-template-columns: 1fr;
  }
  .space-profile-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .space-showcase-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.space-uploading {
  grid-column: 1 / -1;
  border-radius: 0.85rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  padding: 1.2rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.space-composer-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 4500;
  width: 13.25rem;
  overflow: hidden;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  border-radius: 0.9rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  box-shadow: 0 24px 56px -30px rgb(15 23 42 / 0.55);
  padding: 0.3rem;
}
.space-composer-menu:not(.hidden) {
  z-index: 4500;
}
.space-composer-menu button, .space-composer-menu label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border-radius: 0.75rem;
  padding: 0.72rem 0.75rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
  font-size: 0.67rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}
.space-composer-menu button:hover, .space-composer-menu label:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 6%);
  }
}
.space-about-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(54rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 64%);
  }
  border-radius: 2rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 97%, transparent);
  }
  box-shadow: 0 2.25rem 7rem -3rem rgb(15 23 42 / 0.74);
}
.space-about-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 2rem 0.75rem;
}
.space-about-title-group {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.space-about-title-group > span {
  color: var(--adaptive-muted, rgb(148 163 184));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(148 163 184)), var(--color-dynamic, #d66a2c) 16%);
  }
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.space-about-dots {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--adaptive-muted, rgb(148 163 184));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-muted, rgb(148 163 184)), transparent 8%);
  }
}
.space-about-dots svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.space-about-kicker, .space-about-card > span {
  color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-muted, rgb(148 163 184)) 28%);
  }
  font-size: 0.63rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.space-about-card.is-access-rank > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.space-about-card.is-access-rank > span svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-about-head h3 {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.08;
}
.space-about-head p {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 38%);
  }
  font-size: 0.78rem;
  font-weight: 800;
}
.space-about-close {
  margin-left: 0;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-muted, rgb(148 163 184)) 24%);
  }
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.space-about-edit-button.hidden + .space-about-close {
  margin-left: 0;
}
.space-about-close:hover {
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 90%);
  }
  border-color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 72%);
  }
}
.space-about-edit-button {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  border: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 58%);
  }
  border-radius: 0.85rem;
  color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), white 8%);
  }
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 18%);
  }
  transition: background 160ms ease, transform 160ms ease;
}
.space-about-edit-button svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-about-edit-button.hidden {
  display: none;
}
.space-about-edit-button:hover {
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 88%);
  }
}
.space-about-edit-button:active {
  transform: scale(0.95);
}
.space-about-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 1rem 1.75rem 1.35rem;
  scrollbar-width: thin;
}
.space-about-body.is-editing {
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  padding-top: 0.35rem;
}

/* ------------[Подробности пространства]------------ // Оформляет длинный публичный рассказ как самостоятельную читаемую секцию с редактором. Модуль: «пространства». Часть 1/2 */
.space-about-longform {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 68%);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--adaptive-surface, white) 91%, var(--color-dynamic, #d66a2c) 9%);
  padding: 1rem 1.05rem;
}

.space-about-longform header span,
.space-about-longform header strong {
  display: block;
}

.space-about-longform header span {
  color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-text-muted, rgb(100 116 139)) 28%);
  font-size: 0.54rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.space-about-longform header strong {
  margin-top: 0.25rem;
  color: var(--adaptive-text-strong, var(--adaptive-text, rgb(30 41 59)));
  font-size: 0.84rem;
  font-weight: 950;
}

.space-about-longform > p {
  margin: 0.7rem 0 0;
  color: var(--adaptive-text, rgb(51 65 85));
  font-size: 0.68rem;
  font-weight: 680;
  line-height: 1.65;
}

.space-about-longform.is-empty > p {
  color: var(--adaptive-text-muted, rgb(148 163 184));
  font-style: italic;
}

.space-about-longform textarea {
  width: 100%;
  min-height: 9rem;
  margin-top: 0.75rem;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 66%);
  border-radius: 0.72rem;
  background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  color: var(--adaptive-text, rgb(30 41 59));
  padding: 0.78rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.55;
  outline: none;
}

.space-about-longform textarea:focus {
  border-color: var(--color-dynamic, #d66a2c);
}
.space-about-quote {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 38%);
  }
  border-radius: 1.25rem;
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-surface, white) 84%);
  }
  padding: 1rem 1.15rem;
}
.space-about-quote-icon {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  flex: none;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), white 8%);
  }
  color: white;
  box-shadow: 0 0.8rem 1.5rem var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 72%);
  }
}
.space-about-quote-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-about-quote strong {
  color: var(--adaptive-text, rgb(15 23 42));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text, rgb(15 23 42)), var(--color-dynamic, #d66a2c) 8%);
  }
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.55;
}
.space-about-quote-input {
  width: 100%;
  min-height: 2.75rem;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--adaptive-text, rgb(15 23 42));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text, rgb(15 23 42)), var(--color-dynamic, #d66a2c) 8%);
  }
  font-size: 0.86rem;
  font-weight: 850;
  font-style: italic;
  line-height: 1.55;
  outline: none;
}
.space-about-description-field {
  position: relative;
  display: block;
  width: 100%;
}
.space-about-description-field .space-about-quote-input {
  padding-right: 2.65rem;
  padding-bottom: 2rem;
}
.space-about-description-emoji,
.profile-details-story-emoji {
  position: absolute;
  right: .48rem;
  bottom: .48rem;
  display: inline-grid;
  width: 1.82rem;
  height: 1.82rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 55%);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--adaptive-surface, #fff) 92%, var(--color-dynamic, #3b82f6) 8%);
  color: var(--color-dynamic, #3b82f6);
  cursor: pointer;
}
.space-about-description-emoji:hover,
.profile-details-story-emoji:hover {
  background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 14%, var(--adaptive-surface, #fff));
}
.space-about-description-emoji svg,
.profile-details-story-emoji svg {
  width: .82rem;
  height: .82rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-about-card {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  border: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 64%);
  }
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 4%);
  }
  min-height: 5.1rem;
  padding: 0.95rem 1rem;
}
.space-about-body.is-editing .space-about-card {
  display: flex;
  min-width: 0;
  min-height: 5.45rem;
  flex-direction: column;
  align-content: initial;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.55rem;
}
.space-about-body.is-editing .space-about-card.is-half {
  grid-column: auto;
  min-height: 5.45rem;
}
.space-about-quote.is-wide,
.space-about-longform.is-wide,
.space-about-card.is-wide,
.space-about-stats.is-wide,
.space-about-contact-section.is-wide,
.space-about-actions {
  grid-column: 1 / -1;
}

/* Две короткие справочные величины читаются как единая строка статистики. */
.space-about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  min-width: 0;
}
.space-about-stats .space-about-card {
  min-width: 0;
  min-height: 4.65rem;
}

/* ------------[Контакты во всю ширину пространства]------------ // Не даёт редактору внешних аккаунтов сжиматься в половину двухколоночной формы пространства. Модуль: «редактор пространства». Часть 1/1 */
.space-about-body > .space-about-contact-section {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.space-about-card strong, .space-about-card button, .space-about-card p, .space-about-card input, .space-about-card textarea {
  color: var(--adaptive-text, rgb(15 23 42));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text, rgb(15 23 42)), var(--color-dynamic, #d66a2c) 6%);
  }
  font-size: 0.85rem;
  font-weight: 950;
}
.space-about-card input, .space-about-card textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 58%);
  }
  border-radius: 0.72rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 70%, transparent);
  }
  padding: 0.62rem 0.7rem;
  outline: none;
}
.space-about-body.is-editing .space-about-card input, .space-about-body.is-editing .space-about-card textarea {
  border: 0;
  border-bottom: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 46%);
  }
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.space-about-body.is-editing .space-about-card input:focus, .space-about-body.is-editing .space-about-card textarea:focus {
  border-bottom-color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), white 8%);
  }
  box-shadow: none;
}
.space-about-body.is-editing .space-about-description textarea {
  border-bottom: 0;
  padding: 0.25rem 0 0;
}
.space-about-body.is-editing .space-about-description textarea:focus {
  border-bottom: 0;
}
.space-about-card input {
  height: 2.35rem;
  flex: 0 0 auto;
  line-height: 1.1;
}
.space-about-card textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}
.space-about-body.is-editing .space-about-description {
  gap: 0.55rem;
  min-height: 9.25rem;
}
.space-about-body.is-editing .space-about-description textarea {
  display: block;
  min-height: 7rem;
}
.space-about-card input:focus, .space-about-card textarea:focus {
  border-color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 28%);
  }
  box-shadow: 0 0 0 3px var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 86%);
  }
}
.space-about-save {
  justify-self: end;
}
.space-about-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  border-top: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 72%);
  }
  padding-top: 0.75rem;
}
.space-about-description p {
  line-height: 1.55;
}
.space-about-links {
  gap: 0.55rem;
}
.space-about-address {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  text-align: left;
}
.space-about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.8rem;
  padding: 0.7rem;
  text-align: left;
}
.space-about-link:hover {
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 90%);
  }
}
.space-about-link strong, .space-about-link small {
  display: block;
}
.space-about-link small {
  margin-top: 0.15rem;
  color: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-muted, rgb(148 163 184)) 42%);
  }
  font-size: 0.68rem;
  font-weight: 800;
}
.space-about-footer {
  border-top: 1px solid var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 72%);
  }
  padding: 1.25rem 1.75rem 1.35rem;
}
.space-about-footer button {
  width: 100%;
  border-radius: 1.05rem;
  background: var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), white 8%);
  }
  color: white;
  padding: 0.95rem 1rem;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0.9rem 1.8rem var(--color-dynamic, #d66a2c);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.9rem 1.8rem color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 80%);
  }
  transition: transform 160ms ease, filter 160ms ease;
}
.space-about-footer button:hover {
  filter: brightness(1.04);
}
.space-about-footer button:active {
  transform: scale(0.98);
}

/* Нижняя метапанель повторяет компоновку профиля: идентификатор слева,
   персональный ранг доступа справа, без двух крупных карточек в содержимом. */
.space-about-identity-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #2583ff) 18%, transparent);
  padding: .82rem 1.75rem 1rem;
  background: var(--vmesta-unified-surface, var(--adaptive-surface, #fff));
}
.space-about-identity-item {
  display: grid;
  min-width: 0;
  gap: .22rem;
}
.space-about-identity-item > span {
  color: var(--vmesta-unified-muted, var(--adaptive-muted, #94a3b8));
  font-size: .5rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.space-about-identity-value,
.space-about-identity-item.is-rank > strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .38rem;
}
.space-about-identity-value > strong,
.space-about-identity-item.is-rank > strong {
  overflow: hidden;
  color: var(--vmesta-unified-ink, var(--adaptive-text, #0f172a));
  font-size: .68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-about-identity-value > strong {
  color: var(--color-dynamic, #2583ff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.space-about-copy-login {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: .42rem;
  background: transparent;
  color: var(--color-dynamic, #2583ff);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.space-about-copy-login:is(:hover, .is-copied) {
  background: color-mix(in srgb, var(--color-dynamic, #2583ff) 14%, transparent);
  transform: translateY(-1px);
}
.space-about-copy-login svg,
.space-about-identity-item.is-rank > strong svg {
  width: .78rem;
  height: .78rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-about-identity-divider {
  width: 1px;
  height: 2rem;
  background: color-mix(in srgb, var(--vmesta-unified-muted, #94a3b8) 22%, transparent);
}
.space-about-identity-item.is-rank {
  justify-items: end;
  text-align: right;
}
.space-about-identity-item.is-rank > strong svg {
  color: var(--fixed-access-role-color, var(--color-dynamic, #2583ff));
}
.space-about-identity-bar .space-about-login-field label {
  max-width: 15rem;
}
.space-about-identity-bar .login-availability {
  min-height: 0;
}
@media (max-width: 480px) {
  .space-about-identity-bar {
    grid-template-columns: 1fr;
    gap: .62rem;
    padding-inline: 1.15rem;
  }
  .space-about-identity-divider {
    width: 100%;
    height: 1px;
  }
  .space-about-identity-item.is-rank {
    justify-items: start;
    text-align: left;
  }
}
.space-about-link svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-related-picker {
  display: grid;
  gap: 0.5rem;
}
.space-related-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%);
  }
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.space-related-option:hover {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 44%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
}
.space-related-option input {
  width: 1rem;
  height: 1rem;
  flex: none;
  accent-color: var(--color-dynamic, #2563eb);
}
.space-related-option span {
  min-width: 0;
}
.space-related-option strong, .space-related-option small {
  display: block;
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .space-about-body {
    grid-template-columns: 1fr;
  }
  .space-about-card.is-half {
    grid-column: 1 / -1;
  }
  .space-about-stats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .space-about-body.is-editing {
    grid-template-columns: 1fr;
  }
  .space-about-body.is-editing .space-about-card.is-half {
    grid-column: 1 / -1;
  }
}
.space-news-strip strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
}
.space-hashtag-banner {
  margin-bottom: 0.85rem;
  border-radius: 1rem;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 70%);
  }
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.space-post-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.space-post {
  border-radius: 1rem;
  padding: 1rem;
}
.space-post.is-pinned {
  border-color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 32%);
  }
}
.space-post-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.space-post-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.85rem;
  object-fit: cover;
}
.space-post-title {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
  font-size: 0.92rem;
  font-weight: 900;
}
.space-post-date {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 56%);
  }
  font-size: 0.68rem;
  font-weight: 800;
}
.space-pin-button {
  margin-left: auto;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 54%);
  }
}
.space-pin-button.is-active {
  color: rgb(248 113 113);
}
.space-post-content {
  margin-top: 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 40%);
  }
  font-size: 1rem;
  line-height: 1.65;
}
.space-post-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 1rem;
}
.space-post-media.is-1 {
  grid-template-columns: 1fr;
}
.space-post-media img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}
.space-post-media.is-1 img {
  height: auto;
  max-height: 28rem;
}
.space-post-footer {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 42%);
  }
  padding-top: 0.75rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 48%);
  }
  font-size: 0.75rem;
  font-weight: 900;
}
.space-side-card {
  border-radius: 1rem;
  padding: 1rem;
}
.space-rail-wrap {
  position: relative;
}
.space-photo-rail, .space-album-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 1.05rem) / 4);
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.space-photo-rail::-webkit-scrollbar, .space-album-rail::-webkit-scrollbar {
  display: none;
}
.space-album-rail {
  grid-auto-columns: minmax(4.8rem, 42%);
}
.space-rail-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 28%);
  }
  border-radius: 999px;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 8%);
  }
  box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.12);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}
.space-rail-wrap.is-photos .space-rail-arrow {
  top: 50%;
}
.space-rail-wrap.is-albums .space-rail-arrow {
  top: 38%;
}
.space-rail-arrow.is-left {
  left: -0.45rem;
}
.space-rail-arrow.is-right {
  right: -0.45rem;
}
.space-rail-arrow:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  }
}
#space-side-panel .space-side-column {
  gap: 0.75rem;
}
#space-side-panel .space-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#space-side-panel .space-album-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
#space-side-panel .space-album-card {
  display: block;
  min-width: 0;
}
#space-side-panel .space-album-card img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}
#space-side-panel .space-album-card strong, #space-side-panel .space-album-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-side-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 46%);
  }
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.space-side-card header button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 160ms ease;
}
.space-side-card header button:hover {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-side-card header strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.space-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.space-photo-grid img, .space-album-card img {
  width: 100%;
  object-fit: cover;
}
.space-photo-grid img {
  aspect-ratio: 1;
  border-radius: 0.65rem;
}
.space-photo-button, .space-photo-thumb {
  display: block;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.space-photo-button img, .space-photo-thumb img {
  transition: transform 160ms ease, filter 160ms ease;
}
.space-photo-button:hover img, .space-photo-thumb:hover img {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.space-profile-albums-panel {
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 36%);
  }
  border-radius: 1rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white), transparent 10%);
  }
  padding: 0.85rem;
}
.space-profile-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}
.space-profile-album-card {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 42%);
  }
  border-radius: 0.85rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)), transparent 10%);
  }
  padding: 0.45rem;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.space-profile-album-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.12);
}
.space-profile-album-card img {
  width: 100%;
  aspect-ratio: 1.15;
  border-radius: 0.65rem;
  object-fit: cover;
}
.space-profile-album-card strong, .space-profile-album-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-profile-album-card strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
  font-size: 0.78rem;
  font-weight: 900;
}
.space-profile-album-card small {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 50%);
  }
  font-size: 0.65rem;
  font-weight: 800;
}
.space-album-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.space-album-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.space-album-card img {
  width: 4rem;
  height: 3.2rem;
  border-radius: 0.65rem;
}
.space-album-card strong, .space-card-title {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
  font-size: 0.78rem;
  font-weight: 900;
}
.space-album-card span, .space-queue-card span {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 52%);
  }
  font-size: 0.65rem;
  font-weight: 800;
}
.space-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.space-stat-grid div {
  border-radius: 0.8rem;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%);
  }
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.space-stat-grid strong {
  display: block;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 10%);
  }
  font-size: 1rem;
  font-weight: 900;
}
.space-stat-grid span {
  display: block;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 54%);
  }
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.space-list-panel {
  border-radius: 0 0 1rem 1rem;
  padding: 1rem;
}
.space-queue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 50%);
  }
  padding: 1rem 0;
}
.space-queue-card:first-child {
  padding-top: 0;
}
.space-queue-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.space-queue-card p {
  margin-top: 0.35rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 38%);
  }
  font-size: 0.84rem;
}
.space-empty {
  display: grid;
  min-height: 10rem;
  place-items: center;
  border-radius: 1rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 54%);
  }
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.space-empty.mini {
  min-height: 5rem;
}

/* Ненайденное пространство: отдельная тематическая заглушка без контурной плашки. */
.space-not-found-state {
    --space-missing-accent: var(--color-dynamic, #219653);
    min-height: clamp(360px, 61vh, 650px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--vmesta-ui-ink, #17365f);
}

.space-not-found-visual {
    position: relative;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--space-missing-accent) 12%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--space-missing-accent) 16%, transparent);
    animation: spaceMissingFloat 4.4s ease-in-out infinite;
}

.space-not-found-visual svg {
    position: relative;
    z-index: 2;
    width: 104px;
    height: 104px;
    overflow: visible;
}

.space-not-found-planet {
    fill: color-mix(in srgb, var(--space-missing-accent) 18%, var(--adaptive-surface, #fff));
    stroke: var(--space-missing-accent);
    stroke-width: 4;
}

.space-not-found-contour,
.space-not-found-search {
    fill: none;
    stroke: color-mix(in srgb, var(--space-missing-accent) 70%, var(--vmesta-ui-ink, #17365f));
    stroke-width: 4;
    stroke-linecap: round;
}

.space-not-found-signal {
    fill: var(--adaptive-surface, #fff);
    stroke: var(--space-missing-accent);
    stroke-width: 4;
    animation: spaceMissingPulse 2.1s ease-in-out infinite;
    transform-origin: 85px 61px;
}

.space-not-found-orbit {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    animation: spaceMissingOrbit 9s linear infinite;
}

.space-not-found-orbit i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--space-missing-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--space-missing-accent) 14%, transparent);
}

.space-not-found-orbit i:nth-child(1) { left: 9px; top: 34px; }
.space-not-found-orbit i:nth-child(2) { right: 5px; top: 67px; width: 6px; height: 6px; }
.space-not-found-orbit i:nth-child(3) { left: 68px; bottom: 1px; width: 7px; height: 7px; }

.space-not-found-kicker {
    color: var(--space-missing-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.space-not-found-state h2 {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
}

.space-not-found-state p {
    max-width: 470px;
    margin: 0;
    color: var(--vmesta-ui-muted, #7087aa);
    font-weight: 600;
    line-height: 1.55;
}

.space-not-found-address {
    max-width: min(100%, 440px);
    padding: 7px 13px;
    border-radius: 999px;
    overflow: hidden;
    color: var(--vmesta-ui-muted, #7087aa);
    background: color-mix(in srgb, var(--space-missing-accent) 8%, transparent);
    font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.space-not-found-action { margin-top: 12px; }

@keyframes spaceMissingFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-9px) rotate(1deg); }
}

@keyframes spaceMissingOrbit { to { transform: rotate(360deg); } }

@keyframes spaceMissingPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.78); opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
    .space-not-found-visual,
    .space-not-found-orbit,
    .space-not-found-signal { animation: none; }
}
.spaces-index-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 1rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 30%);
  }
  border-radius: 0.95rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 88%, transparent);
  }
  padding: 0.65rem;
  box-shadow: 0 1rem 2.6rem -2.2rem var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1rem 2.6rem -2.2rem color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 48%);
  }
}
.spaces-index-scope {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.spaces-index-scope button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.72rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 16%);
  }
  padding: 0.52rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.spaces-index-scope button span {
  display: inline-grid;
  min-width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 10%);
  }
  padding: 0 0.28rem;
  font-size: 0.68rem;
  font-weight: 950;
}
.spaces-index-scope button:hover, .spaces-index-view button:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  }
}
.spaces-index-scope button.is-active {
  background: linear-gradient(135deg, var(--color-dynamic, #2563eb), var(--color-dynamic-secondary, #4f46e5));
  color: white;
}
.spaces-index-scope button.is-active span {
  background: rgb(255 255 255 / 0.22);
  color: white;
}
.spaces-index-view {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.85rem;
  background: var(--adaptive-surface-2, rgb(248 250 252));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 78%, transparent);
  }
  padding: 0.25rem;
}
.spaces-index-view button {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 0.65rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 18%);
  }
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.spaces-index-view button.is-active {
  background: var(--color-dynamic, #2563eb);
  color: white;
  box-shadow: 0 0.75rem 1.4rem -1rem var(--color-dynamic, #2563eb);
}
.spaces-index-view svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spaces-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.spaces-index-grid.is-list {
  grid-template-columns: minmax(0, 1fr);
}
.spaces-index-card {
  position: relative;
  overflow: visible;
  border-radius: 1rem;
  text-align: left;
}
.spaces-index-open {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  text-align: left;
}
.spaces-index-kebab {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 5;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 58%);
  }
  border-radius: 0.75rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 70%, var(--color-dynamic, #2563eb) 30%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 14%);
  }
  box-shadow: 0 0.55rem 1.35rem rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}
.spaces-index-kebab:hover, .spaces-index-kebab.is-active {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 52%, var(--color-dynamic, #2563eb) 48%);
  }
  color: white;
}
.spaces-index-kebab svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.space-index-pin-indicator {
  position: absolute;
  top: 0.78rem;
  right: 3.35rem;
  z-index: 6;
  pointer-events: none;
  backdrop-filter: blur(10px);
  animation: spaceHeaderPinArrive 320ms cubic-bezier(.22, 1, .36, 1) both;
}
.spaces-index-card.is-list .space-index-pin-indicator {
  top: 0.78rem;
  right: 3.35rem;
}
.spaces-index-card.is-header-pinned .spaces-index-open {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 64%);
}
.spaces-index-menu button.is-header-pinned-action, .space-manage-actions-menu button.is-header-pinned-action {
  background: rgb(59 130 246 / 0.12);
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  color: var(--color-dynamic, #2563eb);
}
.space-action-status-dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  margin-left: auto;
  border: 2px solid var(--adaptive-surface, white);
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%);
  animation: spaceHeaderPinPulse 1.8s ease-in-out infinite;
}
@keyframes spaceHeaderPinArrive {
  from {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes spaceHeaderPinPulse {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.72;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.spaces-index-menu {
  position: absolute;
  top: 3.1rem;
  right: 0.65rem;
  z-index: 30;
  width: 14.5rem;
  border: 1px solid var(--adaptive-border, rgb(226 232 240));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 18%);
  }
  border-radius: 0.9rem;
  background: var(--adaptive-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, transparent);
  }
  padding: 0.35rem;
  box-shadow: 0 1rem 2.8rem rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(14px);
}
.spaces-index-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  border-radius: 0.65rem;
  padding: 0.72rem 0.7rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 12%);
  }
  font-size: 0.72rem;
  font-weight: 850;
  text-align: left;
}
.spaces-index-menu button:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
}
.spaces-index-menu button.is-danger {
  color: rgb(239 68 68);
}
.spaces-index-menu button.is-danger:hover {
  background: rgb(239 68 68 / 0.12);
}
.spaces-index-menu svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spaces-index-cover {
  display: block;
  height: 9rem;
  background-position: center;
  background-size: cover;
}
.spaces-index-card.is-list {
  max-width: min(100%, 52rem);
}
.spaces-index-card.is-list .spaces-index-open {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  min-height: 8rem;
}
.spaces-index-card.is-list .spaces-index-cover {
  height: 100%;
  min-height: 8rem;
}
.spaces-index-card.is-list .spaces-index-body {
  align-items: center;
  padding-right: 4.2rem;
}
.spaces-index-card.is-list .spaces-index-body img {
  width: 3.4rem;
  height: 3.4rem;
}
.spaces-index-card.is-list .spaces-index-body strong {
  font-size: 1rem;
}
.spaces-index-card.is-list .spaces-index-kebab {
  top: 0.65rem;
  right: 0.65rem;
  transform: none;
}
.spaces-index-card.is-list .spaces-index-menu {
  top: 3.1rem;
  right: 0.65rem;
}
.spaces-index-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}
.spaces-index-body img {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  object-fit: cover;
}
.spaces-index-body strong, .spaces-index-body small {
  display: block;
}
.spaces-index-body strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
  font-weight: 900;
}
.spaces-index-body small {
  margin-top: 0.15rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-border, rgb(148 163 184)) 52%);
  }
  font-size: 0.72rem;
  font-weight: 800;
}
.spaces-index-genres {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: .42rem;
}
.spaces-index-genres > i {
  overflow: hidden;
  max-width: 9rem;
  padding: .2rem .42rem;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-dynamic, #2563eb) 10%, transparent);
  color: color-mix(in srgb, var(--color-dynamic, #2563eb) 70%, var(--adaptive-text, #334155) 30%);
  font-size: .53rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-menu-item:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
}
@media (max-width: 900px) {
  .space-content-grid, .spaces-index-grid {
    grid-template-columns: 1fr;
  }
  .spaces-index-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .spaces-index-view {
    width: max-content;
  }
  .spaces-index-card.is-list .spaces-index-open {
    grid-template-columns: 1fr;
  }
  .spaces-index-card.is-list .spaces-index-cover {
    height: 9rem;
  }
  .space-intro-card, .space-composer-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .space-intro-main h2 {
    font-size: 1.75rem;
  }
}
.post-media {
  width: 100%;
  min-height: 12.5rem;
  max-height: 34.375rem;
  isolation: isolate;
}
.post-media > img, .post-media > video {
  width: 100%;
  max-height: 34.375rem;
  object-fit: contain;
}
#photos-list-container > div {
  min-width: 0;
}
@media (max-width: 767px) {
  #notifications-dropdown {
    position: fixed;
    top: 4.5rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    transform: none;
  }
  #profile-avatar-card {
    margin-left: 0.25rem;
  }
  #user-info-group {
    left: 9.25rem;
    max-width: calc(100vw - 10rem);
    bottom: 0.75rem;
  }
  .post-media {
    min-height: 10rem;
    max-height: 70vh;
  }
  .post-media > img, .post-media > video {
    max-height: 70vh;
  }
}

/* ------------[Безопасность аккаунта: приватная почта]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 2/34 */
html:root body #cover-security-pane .cover-account-email-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: .45rem .5rem .45rem .9rem;
    border: 1px solid var(--adaptive-border, rgb(203 213 225));
    border-radius: .85rem;
    background: var(--adaptive-surface-2, #fff);
}
html:root body #cover-security-pane .cover-account-email-value > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .12rem;
}
html:root body #cover-security-pane .cover-account-email-value > span > strong {
    overflow: hidden;
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: .78rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html:root body #cover-security-pane .cover-account-email-value > span > small {
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: .6rem;
    font-weight: 650;
}
html:root body #cover-security-pane .cover-account-email-value > button,
html:root body .cover-email-send-code {
    flex: 0 0 auto;
    min-height: 2.35rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 62%);
    border-radius: .72rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    color: var(--color-dynamic, #3b82f6);
    padding: .6rem .9rem;
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
}
html:root body #cover-email-code-group.hidden {
    display: none !important;
}
html:root body .cover-email-send-code {
    width: 100%;
    min-height: 2.8rem;
}
html:root body .cover-email-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .8rem;
    border: 1px solid var(--adaptive-border, rgb(226 232 240));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--adaptive-surface-2, #fff), var(--color-dynamic, #3b82f6) 5%);
}
html:root body .cover-email-current > span {
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: .65rem;
    font-weight: 750;
}
html:root body .cover-email-current > strong {
    overflow: hidden;
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html:root body .cover-security-dialog-actions button:disabled,
html:root body .cover-email-send-code:disabled {
    cursor: not-allowed;
    opacity: .55;
}
html.dark body #cover-security-pane .cover-account-email-value {
    border-color: var(--adaptive-border, rgb(51 65 85));
    background: var(--adaptive-surface-2, rgb(15 23 42));
}
@media (max-width: 640px) {
    html:root body #cover-security-pane .cover-account-email-value {
        align-items: stretch;
        flex-direction: column;
    }
    html:root body #cover-security-pane .cover-account-email-value > button { width: 100%; }
}

/* ======[СООБЩЕНИЯ: ТРЁХКОЛОНОЧНЫЙ МЕССЕНДЖЕР]========== */
body.messages-route #profile-right-rail > :not(#messages-side-root) {
    display: none !important;
}

body.messages-route #content-main,
body.messages-route #tab-messages {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

#messages-root,
#messages-side-root {
    --msg-accent: var(--color-dynamic, #df8d5b);
    --msg-accent-soft: color-mix(in srgb, var(--msg-accent) 14%, transparent);
    --msg-accent-mid: color-mix(in srgb, var(--msg-accent) 28%, transparent);
    --msg-bg: color-mix(in srgb, var(--adaptive-card-tint, #fff) 95%, #eef2f8 5%);
    --msg-panel: color-mix(in srgb, var(--adaptive-card-tint, #fff) 98%, transparent);
    --msg-panel-strong: color-mix(in srgb, var(--adaptive-card-tint, #fff) 91%, var(--msg-accent) 9%);
    --msg-line: color-mix(in srgb, var(--msg-accent) 22%, transparent);
    --msg-text: var(--adaptive-text, #1f2937);
    --msg-muted: color-mix(in srgb, var(--msg-text) 57%, transparent);
    color: var(--msg-text);
}

.dark #messages-root,
.dark #messages-side-root {
    --msg-bg: color-mix(in srgb, var(--adaptive-card-tint, #0f172a) 89%, #020617 11%);
    --msg-panel: color-mix(in srgb, var(--adaptive-card-tint, #111827) 94%, #020617 6%);
    --msg-panel-strong: color-mix(in srgb, var(--adaptive-card-tint, #111827) 82%, var(--msg-accent) 18%);
    --msg-line: color-mix(in srgb, var(--msg-accent) 31%, transparent);
    --msg-text: var(--adaptive-text, #e5e7eb);
}

.messenger-shell {
    position: relative;
    display: block;
    height: min(48rem, calc(100dvh - 8.5rem));
    min-height: min(36rem, calc(100dvh - 8.5rem));
    overflow: hidden;
    background: var(--msg-bg);
    border: 1px solid var(--msg-line);
    border-radius: 1.2rem;
    box-shadow: 0 1.5rem 4rem color-mix(in srgb, #020617 16%, transparent);
}

.messenger-shell button,
.messenger-shell input,
.messenger-shell textarea,
.messenger-new-modal button {
    font: inherit;
}

.messenger-shell button,
.messenger-new-modal button {
    color: inherit;
}

.messenger-icon {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.messenger-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.messenger-dialogs-panel,
.messenger-conversation,
.messenger-side-panel {
    min-width: 0;
    min-height: 0;
    background: var(--msg-panel);
}

.messenger-dialogs-panel,
.messenger-conversation {
    height: 100%;
}

.messenger-dialogs-panel {
    display: flex;
    flex-direction: column;
}

.messenger-dialogs-panel,
.messenger-conversation {
    grid-column: 1;
    grid-row: 1;
}

.messenger-shell:not(.has-active-chat) .messenger-conversation,
.messenger-shell.has-active-chat .messenger-dialogs-panel {
    display: none;
}

.messenger-main-header,
.messenger-conversation-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 4.55rem;
    padding: 0.78rem 1rem;
    border-bottom: 1px solid var(--msg-line);
}

.messenger-kicker,
.messenger-side-kicker {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--msg-accent);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.messenger-main-header h1,
.messenger-new-modal h2,
.messenger-side-title h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.1;
}

.messenger-header-actions,
.messenger-conversation-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.messenger-header-actions > button,
.messenger-conversation-actions > button,
.messenger-mobile-back,
.messenger-settings-stub {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    background: transparent;
    color: var(--msg-muted);
    cursor: pointer;
    transition: 160ms ease;
}

.messenger-header-actions > button:hover,
.messenger-conversation-actions > button:hover,
.messenger-conversation-actions > button.is-active,
.messenger-mobile-back:hover,
.messenger-settings-stub:hover {
    color: var(--msg-accent);
    background: var(--msg-accent-soft);
    border-color: var(--msg-line);
}

.messenger-chat-search {
    position: relative;
    z-index: 22;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto repeat(3, 2.15rem);
    align-items: center;
    gap: 0.35rem;
    padding: 0.48rem 0.72rem;
    border-bottom: 1px solid var(--msg-line);
    background: color-mix(in srgb, var(--msg-panel) 92%, transparent);
}

.messenger-chat-search > .messenger-icon { width: 1rem; height: 1rem; color: var(--msg-accent); }

.messenger-chat-search input {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    height: 2.2rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.7rem;
    outline: 0;
    background: var(--msg-bg);
    color: var(--msg-text);
    padding: 0 0.7rem;
    font: inherit;
    font-size: 0.75rem;
}

.messenger-chat-search input:focus { border-color: var(--msg-accent); box-shadow: 0 0 0 3px var(--msg-accent-soft); }
.messenger-chat-search > span { min-width: 3.5rem; color: var(--msg-muted); text-align: center; font-size: 0.65rem; font-weight: 850; white-space: nowrap; }
.messenger-chat-search > button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--msg-line); border-radius: 0.68rem; background: var(--msg-bg); color: var(--msg-muted); cursor: pointer; }
.messenger-chat-search > button:hover:not(:disabled) { background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-chat-search > button:disabled { opacity: 0.35; cursor: default; }
.messenger-chat-search > button .messenger-icon { width: 0.9rem; height: 0.9rem; }

.messenger-message.is-search-match .messenger-bubble { box-shadow: 0 0 0 1px color-mix(in srgb, var(--msg-accent), transparent 45%), 0 0.35rem 1rem color-mix(in srgb, #020617 6%, transparent); }
.messenger-message.is-search-current .messenger-bubble { box-shadow: 0 0 0 3px var(--msg-accent-soft), 0 0 0 1px var(--msg-accent), 0 0.7rem 1.5rem color-mix(in srgb, var(--msg-accent), transparent 75%); }
.messenger-bubble mark { border-radius: 0.22rem; background: #facc15; color: #1f2937; padding: 0.02rem 0.12rem; }

.messenger-search {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 2.6rem;
    margin: 0.72rem 1.2rem 0.6rem;
    padding: 0 0.78rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--msg-panel) 80%, var(--msg-accent) 20%);
    color: var(--msg-muted);
}

.messenger-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--msg-text);
    font-size: 0.86rem;
}

.messenger-search input::placeholder,
.messenger-composer textarea::placeholder {
    color: var(--msg-muted);
}

.messenger-type-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    margin: 0 1.2rem 0.62rem;
    min-height: 2.3rem;
    padding: 0.15rem 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.messenger-type-tabs > button:not(.messenger-settings-stub) {
    display: inline-flex;
    min-width: max-content;
    height: 2rem;
    min-height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0 0.78rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--msg-panel) 92%, transparent);
    color: var(--msg-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.messenger-type-tabs > button.is-active {
    background: var(--msg-panel-strong);
    color: var(--msg-accent);
    box-shadow: inset 0 0 0 1px var(--msg-line);
}

.messenger-type-tabs .messenger-settings-stub {
    width: 1.95rem;
    height: 1.95rem;
    margin-left: 0.05rem;
}

.messenger-type-tabs .messenger-settings-stub .messenger-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.messenger-type-tabs .messenger-folder-tab .messenger-icon,
.messenger-type-tabs .messenger-folder-manage-button .messenger-icon { width: .9rem; height: .9rem; }
.messenger-type-tabs .messenger-folder-manage-button { width: 1.95rem; padding: 0 !important; }

/* ------------[Папки сообщений]------------ // Папки открываются поверх мессенджера, а закрепление и порядок остаются одинаковыми во всех темах. Модуль: «личные сообщения, группы и каналы». Часть 1/1 */
.messenger-folder-modal {
    position: fixed;
    z-index: 32000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(2 6 23 / .68);
    backdrop-filter: blur(10px);
}
.messenger-folder-modal > section {
    display: grid;
    width: min(29rem, 100%);
    max-height: min(80dvh, 38rem);
    gap: .85rem;
    overflow: hidden;
    border: 1px solid var(--msg-line);
    border-radius: 1.25rem;
    background: var(--msg-bg);
    color: var(--msg-text);
    padding: 1rem;
    box-shadow: 0 1.8rem 5rem rgb(2 6 23 / .42);
}
.messenger-folder-modal header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.messenger-folder-modal header > span { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.messenger-folder-modal header > span > .messenger-icon { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-folder-modal header > span > .messenger-icon svg { width: 1.15rem; height: 1.15rem; }
.messenger-folder-modal header span span { display: grid; gap: .16rem; }
.messenger-folder-modal header strong { font-size: .9rem; font-weight: 900; }
.messenger-folder-modal header small { color: var(--msg-muted); font-size: .63rem; font-weight: 700; }
.messenger-folder-modal header > button,
.messenger-folder-row button { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--msg-line); border-radius: .68rem; background: var(--msg-panel); color: var(--msg-muted); cursor: pointer; }
.messenger-folder-modal form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .55rem; }
.messenger-folder-modal form label { display: grid; gap: .34rem; color: var(--msg-muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.messenger-folder-modal form input { width: 100%; min-height: 2.7rem; border: 1px solid var(--msg-line); border-radius: .78rem; outline: none; background: var(--msg-panel); color: var(--msg-text); padding: .65rem .75rem; font: inherit; font-size: .78rem; font-weight: 750; text-transform: none; }
.messenger-folder-modal form button { display: inline-flex; min-height: 2.7rem; align-items: center; gap: .4rem; border-radius: .78rem; background: var(--msg-accent); color: #fff; padding: .65rem .9rem; font-size: .68rem; font-weight: 900; }
.messenger-folder-modal form button .messenger-icon { width: 1rem; height: 1rem; }
.messenger-folder-list,.messenger-folder-picker-list { display: grid; min-height: 0; gap: .45rem; overflow-y: auto; }
.messenger-folder-list > p,.messenger-folder-picker-list > p { margin: 0; border-radius: .8rem; background: var(--msg-panel); color: var(--msg-muted); padding: .9rem; font-size: .68rem; font-weight: 700; line-height: 1.45; }
.messenger-folder-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; border: 1px solid var(--msg-line); border-radius: .82rem; background: var(--msg-panel); padding: .52rem; }
.messenger-folder-row > span { display: flex; min-width: 0; align-items: center; gap: .48rem; }
.messenger-folder-row > span .messenger-icon { width: 1rem; height: 1rem; color: var(--msg-accent); }
.messenger-folder-row b { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-folder-row small { display: grid; min-width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 999px; background: var(--msg-accent-soft); color: var(--msg-accent); font-size: .58rem; font-weight: 900; }
.messenger-folder-row > div { display: flex; gap: .3rem; }
.messenger-folder-row button .messenger-icon { width: .9rem; height: .9rem; }
.messenger-folder-row button.is-active { border-color: var(--msg-accent); color: var(--msg-accent); }
.messenger-folder-row button.is-danger { color: #ef4444; }
.messenger-folder-row button:disabled { opacity: .3; cursor: default; }
.messenger-folder-picker-list > button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; width: 100%; border: 1px solid var(--msg-line); border-radius: .85rem; background: var(--msg-panel); color: var(--msg-text); padding: .72rem; text-align: left; cursor: pointer; }
.messenger-folder-picker-list > button > .messenger-icon { width: 1.1rem; height: 1.1rem; color: var(--msg-accent); }
.messenger-folder-picker-list > button > span { display: grid; gap: .15rem; }
.messenger-folder-picker-list b { font-size: .76rem; }
.messenger-folder-picker-list small { color: var(--msg-muted); font-size: .6rem; }
.messenger-folder-picker-list i { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: .55rem; background: var(--msg-accent-soft); color: var(--msg-accent); font-size: .75rem; font-style: normal; font-weight: 950; }
.messenger-folder-picker-list > button.is-active { border-color: var(--msg-accent); background: var(--msg-accent-soft); }
@media (max-width: 480px) {
    .messenger-folder-modal form { grid-template-columns: 1fr; }
    .messenger-folder-modal form button { justify-content: center; }
}

.messenger-archive-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0 1.2rem 0.62rem;
}

.messenger-archive-tabs > button {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--msg-panel) 92%, transparent);
    color: var(--msg-muted);
    padding: 0.4rem 0.7rem;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 850;
    cursor: pointer;
}

.messenger-archive-tabs > button.is-active {
    background: var(--msg-panel-strong);
    color: var(--msg-accent);
    box-shadow: inset 0 0 0 1px var(--msg-line);
}

.messenger-archive-tabs .messenger-icon { width: 0.95rem; height: 0.95rem; }
.messenger-archive-tabs b { color: var(--msg-accent); font-size: 0.62rem; }

.messenger-archived-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    padding: 0.58rem 0.65rem;
    background: color-mix(in srgb, var(--msg-panel) 68%, transparent);
}

.messenger-archived-message > span { display: grid; min-width: 0; }
.messenger-archived-message > span strong,
.messenger-archived-message > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-archived-message > span strong { color: var(--msg-text); font-size: 0.75rem; }
.messenger-archived-message > span small { margin-top: 0.15rem; color: var(--msg-muted); font-size: 0.66rem; }
.messenger-archived-message > span time { margin-top: 0.2rem; color: var(--msg-accent); font-size: 0.56rem; }
.messenger-archived-message > button { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--msg-line); border-radius: 0.65rem; background: var(--msg-bg); color: var(--msg-accent); padding: 0.48rem 0.58rem; font: inherit; font-size: 0.62rem; font-weight: 850; cursor: pointer; }
.messenger-archived-message > button .messenger-icon { width: 0.85rem; height: 0.85rem; }

.messenger-unread-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1.2rem 0.48rem;
    padding: 0.46rem 0.65rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.68rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.messenger-unread-summary span {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--msg-accent);
    color: white;
}

.messenger-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.1rem 0.55rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--msg-line) transparent;
}

.messenger-chat-row {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 0.18rem;
    border-radius: 1rem;
    transition: background 150ms ease;
}

.messenger-chat-row:hover,
.messenger-chat-row.is-active {
    background: var(--msg-accent-soft);
}

.messenger-chat-row.is-active {
    box-shadow: inset 0 0 0 1px var(--msg-line);
}

.messenger-chat-open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
    width: 100%;
    min-width: 0;
    min-height: 4.75rem;
    padding: 0.62rem 2.15rem 0.62rem 0.65rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messenger-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    overflow: visible;
    border-radius: 1rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-size: 0.86rem;
    font-weight: 900;
}

.messenger-avatar > img,
.messenger-avatar > span:not(.online-dot) {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.messenger-avatar > span:not(.online-dot) {
    display: grid;
    place-items: center;
}

.messenger-avatar.is-small {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.85rem;
}

.messenger-avatar.is-tiny {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
}

.messenger-avatar .online-dot {
    position: absolute !important;
    right: -0.15rem !important;
    bottom: -0.1rem !important;
    top: auto !important;
    left: auto !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
    border: 2px solid var(--msg-panel) !important;
    border-radius: 50% !important;
    background: #718096 !important;
    overflow: visible !important;
}

.messenger-avatar .online-dot.is-online {
    background: #22c55e !important;
}

.messenger-avatar .online-dot.is-online .online-dot-pulse {
    position: absolute;
    inset: -0.15rem;
    border-radius: inherit;
    background: #22c55e;
    animation: messenger-online-pulse 1.9s ease-out infinite;
}

.messenger-avatar .online-dot-core {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
}

@keyframes messenger-online-pulse {
    0% { transform: scale(0.65); opacity: 0.8; }
    75%, 100% { transform: scale(1.9); opacity: 0; }
}

.messenger-chat-copy {
    display: block;
    min-width: 0;
}

.messenger-chat-name,
.messenger-chat-preview {
    display: flex;
    align-items: center;
    min-width: 0;
}

.messenger-chat-name {
    gap: 0.28rem;
    margin-bottom: 0.32rem;
    font-size: 0.84rem;
}

.messenger-chat-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-chat-name time {
    margin-left: auto;
    color: var(--msg-muted);
    font-size: 0.61rem;
    font-weight: 700;
    white-space: nowrap;
}

.messenger-chat-name .messenger-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--msg-accent);
}

.messenger-chat-preview {
    display: block;
    overflow: hidden;
    color: var(--msg-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-chat-preview b,
.messenger-delivery.is-read {
    color: var(--msg-accent);
}

.messenger-delivery {
    margin-left: 0.25rem;
    font-weight: 900;
    letter-spacing: -0.2em;
}

.messenger-delivery-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.28rem;
    color: var(--msg-muted);
    vertical-align: middle;
}

.messenger-delivery-stars .messenger-icon,
.messenger-delivery-stars svg {
    width: 1rem;
    height: 1rem;
}

.messenger-delivery-stars.is-read {
    color: var(--msg-accent);
}

.messenger-delivery-stars.is-failed {
    color: #ef4444;
}

.messenger-delivery-stars.is-sending {
    opacity: 0.5;
    animation: messenger-status-pulse 1s ease-in-out infinite;
}

@keyframes messenger-status-pulse {
    50% { opacity: 0.2; }
}

.messenger-unread-badge {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--msg-accent);
    color: white;
    font-size: 0.66rem;
    font-weight: 900;
}

.messenger-row-menu-button {
    position: absolute;
    top: 0.48rem;
    right: 0.35rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--msg-muted);
    opacity: 0.15;
    cursor: pointer;
}

.messenger-chat-row:hover .messenger-row-menu-button,
.messenger-row-menu-button:focus-visible {
    opacity: 1;
}

.messenger-row-menu-button .messenger-icon {
    width: 1rem;
    height: 1rem;
}

.messenger-chat-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% - 0.6rem);
    right: 0;
    width: min(16.5rem, calc(100vw - 2rem));
    padding: 0.45rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem;
    background: var(--msg-bg);
    box-shadow: 0 1rem 3rem color-mix(in srgb, #020617 28%, transparent);
}

.messenger-chat-menu.is-row-menu {
    position: fixed;
    top: var(--messenger-menu-top, 5rem);
    right: auto;
    left: var(--messenger-menu-left, 1rem);
}

.messenger-chat-menu button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.messenger-chat-menu button:hover {
    background: var(--msg-accent-soft);
}

.messenger-chat-menu button small {
    color: var(--msg-muted);
    font-size: 0.52rem;
    text-transform: uppercase;
}

.messenger-chat-menu button.is-danger {
    color: #ef4444;
}

.messenger-conversation {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 15% 12%, var(--msg-accent-soft), transparent 25rem),
        var(--msg-bg);
}

.messenger-conversation.has-selection-toolbar,
.messenger-conversation.has-chat-search {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.messenger-conversation.has-selection-toolbar.has-chat-search {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.messenger-conversation.is-empty {
    display: grid;
    place-items: center;
}

.messenger-conversation-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: var(--msg-muted);
    text-align: center;
}

.messenger-conversation-placeholder .messenger-icon {
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 0.5rem;
    color: var(--msg-accent);
}

.messenger-conversation-placeholder strong {
    color: var(--msg-text);
    font-size: 1rem;
}

.messenger-mobile-back {
    display: grid;
    flex: 0 0 auto;
}

.messenger-contact {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    min-width: 0;
    margin-right: auto;
    padding: 0.2rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messenger-contact > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.messenger-contact strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.messenger-contact small {
    margin-top: 0.12rem;
    color: var(--msg-accent);
    font-size: 0.67rem;
}

.messenger-message-stream {
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem clamp(0.35rem, 1.2vw, 0.75rem);
    scrollbar-width: thin;
    scrollbar-color: var(--msg-line) transparent;
}

.messenger-conversation.is-message-menu-open .messenger-message-stream {
    overflow-y: hidden;
}

.messenger-day-divider {
    position: sticky;
    top: 0.15rem;
    z-index: 14;
    display: flex;
    justify-content: center;
    margin: 0.2rem 0 1rem;
    pointer-events: none;
}

.messenger-day-button {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.35rem 0.28rem 0.78rem;
    border: 1px solid var(--msg-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-panel) 94%, transparent);
    color: var(--msg-muted);
    box-shadow: 0 0.35rem 1rem color-mix(in srgb, #020617 12%, transparent);
    cursor: pointer;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
    backdrop-filter: blur(14px);
}

.messenger-day-button > span {
    font-size: 0.64rem;
    font-weight: 850;
    white-space: nowrap;
}

.messenger-day-button > i {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 999px;
    color: var(--msg-accent);
    transition: background 160ms ease, color 160ms ease;
}

.messenger-day-button:hover > i { background: var(--msg-accent-soft); }
.messenger-day-button > i .messenger-icon { width: 0.78rem; height: 0.78rem; }

.messenger-day-calendar-layer {
    position: absolute;
    z-index: 48;
    inset: 4.55rem 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    background: color-mix(in srgb, var(--msg-bg) 18%, transparent);
    backdrop-filter: blur(2px);
}

.messenger-day-calendar {
    width: min(22rem, calc(100% - 1rem));
    padding: 0.8rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--msg-panel) 97%, transparent);
    box-shadow: 0 1.25rem 3rem color-mix(in srgb, #020617 28%, transparent);
}

.messenger-day-calendar > header {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.messenger-day-calendar > header > button {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid var(--msg-line);
    border-radius: 0.7rem;
    background: var(--msg-bg);
    color: var(--msg-accent);
    cursor: pointer;
}

.messenger-day-calendar > header > button:hover { background: var(--msg-accent-soft); }
.messenger-day-calendar > header > button .messenger-icon { width: 0.9rem; height: 0.9rem; }
.messenger-day-calendar > header > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem; }

.messenger-day-calendar select {
    min-width: 0;
    height: 2.15rem;
    padding: 0 0.55rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.68rem;
    outline: 0;
    background: var(--msg-bg);
    color: var(--msg-text);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: capitalize;
}

.messenger-day-calendar-weekdays,
.messenger-day-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.28rem;
}

.messenger-day-calendar-weekdays { margin-bottom: 0.3rem; }
.messenger-day-calendar-weekdays > span { color: var(--msg-muted); text-align: center; font-size: 0.58rem; font-weight: 850; }

.messenger-day-calendar-grid > button,
.messenger-day-calendar-grid > span {
    position: relative;
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 0.62rem;
}

.messenger-day-calendar-grid > button {
    border: 1px solid var(--msg-line);
    background: var(--msg-bg);
    color: var(--msg-text);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 850;
}

.messenger-day-calendar-grid > button:hover:not(:disabled) { border-color: var(--msg-accent); background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-day-calendar-grid > button:disabled { border-color: transparent; background: transparent; color: var(--msg-muted); cursor: default; opacity: 0.38; }
.messenger-day-calendar-grid > button.is-today { box-shadow: inset 0 0 0 1px var(--msg-accent); }
.messenger-day-calendar-grid > button > i { position: absolute; right: 0.16rem; bottom: 0.12rem; color: var(--msg-accent); font-size: 0.45rem; font-style: normal; line-height: 1; }

.messenger-day-calendar > footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    color: var(--msg-muted);
    text-align: center;
    font-size: 0.6rem;
}

.messenger-day-calendar > footer .messenger-icon { width: 0.82rem; height: 0.82rem; color: var(--msg-accent); }

.messenger-message {
    display: flex;
    align-items: center;
    margin: 0.35rem 0;
}

.messenger-message.is-outgoing {
    justify-content: flex-end;
}

.messenger-bubble {
    max-width: min(78%, 34rem);
    padding: 0.68rem 0.8rem 0.42rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem 1rem 1rem 0.3rem;
    background: var(--msg-panel);
    box-shadow: 0 0.35rem 1rem color-mix(in srgb, #020617 6%, transparent);
}

.is-outgoing .messenger-bubble {
    border-radius: 1rem 1rem 0.3rem 1rem;
    background: var(--msg-panel-strong);
}

.messenger-bubble p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.messenger-bubble > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 0.25rem;
    color: var(--msg-muted);
    font-size: 0.58rem;
}

.messenger-bubble b {
    letter-spacing: -0.18em;
}

.messenger-bubble b.is-read {
    color: var(--msg-accent);
}

.messenger-message {
    transition: background-color 180ms ease;
}

.messenger-message {
    position: relative;
    padding: 0.16rem 0.18rem;
    border-radius: 0.9rem;
    touch-action: pan-y;
    transition: background-color 180ms ease, transform 180ms ease;
}

/* Новое сообщение входит снизу как единый элемент, без промежуточного
   появления под композером и резкого перескока на окончательную позицию. */
.messenger-message.is-entering {
    animation: messenger-message-enter 280ms cubic-bezier(.2, .78, .24, 1) both;
    transform-origin: 100% 100%;
}
.messenger-message.is-entering.is-incoming { transform-origin: 0 100%; }
@keyframes messenger-message-enter {
    from { opacity: 0; transform: translateY(.8rem) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .messenger-message.is-entering { animation-duration: 1ms; }
}

.messenger-message.is-selected {
    background: color-mix(in srgb, var(--msg-accent), transparent 86%);
}

.messenger-message.is-selected.is-incoming .messenger-bubble {
    transform: translateX(1.65rem);
}

.messenger-message.is-selected.is-outgoing .messenger-bubble {
    transform: translateX(-1.65rem);
}

/* Карточка истории звонка является полноценным сообщением и освобождает
   место под номер выделения тем же движением, что обычный пузырь. */
.messenger-message.is-selected.is-incoming .messenger-call-history-card {
    transform: translateX(1.65rem);
}

.messenger-message.is-selected.is-outgoing .messenger-call-history-card {
    transform: translateX(-1.65rem);
}

.messenger-selection-order {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    min-width: 1.34rem;
    height: 1.34rem;
    place-items: center;
    border-radius: 50%;
    background: var(--msg-accent);
    color: #fff;
    padding: 0 0.25rem;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 900;
    transform: translateY(-50%);
    box-shadow: 0 0.28rem 0.7rem color-mix(in srgb, var(--msg-accent), transparent 62%);
}

.messenger-message.is-incoming .messenger-selection-order { left: 0.18rem; }
.messenger-message.is-outgoing .messenger-selection-order { right: 0.18rem; }

.messenger-message-stream.is-selection-mode .messenger-bubble button,
.messenger-message-stream.is-selection-mode .messenger-bubble a,
.messenger-message-stream.is-selection-mode .messenger-bubble video,
.messenger-message-stream.is-selection-mode .messenger-bubble audio {
    pointer-events: none;
}

.messenger-message-stream.is-selection-mode .messenger-message {
    user-select: none;
}

.messenger-message-stream.is-selection-mode .messenger-message-hover-actions {
    display: none;
}

.messenger-bubble {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.messenger-bubble > span em {
    font-style: normal;
    opacity: 0.78;
}

.messenger-message-hover-actions {
    display: inline-flex;
    flex: 0 0 0;
    width: 0;
    align-items: center;
    gap: 0.18rem;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.2rem) scale(0.96);
    transition: opacity 140ms ease, transform 140ms ease;
}

.messenger-message-hover-actions.is-outgoing { justify-content: flex-end; padding-right: 0.35rem; }
.messenger-message-hover-actions.is-incoming { justify-content: flex-start; padding-left: 0.35rem; }

.messenger-message:hover .messenger-message-hover-actions,
.messenger-message:focus-within .messenger-message-hover-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.messenger-message-hover-actions > button {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--msg-muted);
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.messenger-message-hover-actions > button:hover {
    border-color: var(--msg-line);
    background: var(--msg-panel);
    color: var(--msg-accent);
    transform: translateY(-1px);
}

.messenger-message-hover-actions .messenger-icon,
.messenger-message-hover-actions svg { width: 1rem; height: 1rem; }

.messenger-message-reactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.28rem;
    margin-top: 0.42rem;
}

.is-outgoing .messenger-message-reactions { justify-content: flex-end; }

.messenger-message-reactions > button {
    display: inline-flex;
    min-width: 2.25rem;
    min-height: 1.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.16rem 0.42rem;
    border: 1px solid var(--msg-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-bg), transparent 18%);
    color: var(--msg-text);
    cursor: pointer;
    line-height: 1;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.messenger-message-reactions > button:hover,
.messenger-message-reactions > button.is-mine {
    border-color: color-mix(in srgb, var(--msg-accent), transparent 38%);
    background: var(--msg-accent-soft);
}

.messenger-message-reactions > button:active { transform: scale(0.94); }
.messenger-message-reactions > button span { font-size: 0.92rem; }
.messenger-message-reactions > button b { color: var(--msg-muted); font-size: 0.62rem; letter-spacing: 0; }
.messenger-message-reactions > button.is-mine b { color: var(--msg-accent); }

.messenger-forwarded-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.38rem;
    color: var(--msg-accent);
    font-size: 0.66rem;
    font-weight: 800;
}

.messenger-forwarded-label .messenger-icon,
.messenger-forwarded-label svg {
    width: 0.85rem;
    height: 0.85rem;
}

.messenger-message-menu button.is-danger {
    color: #ef4444;
}

.messenger-message-menu button.is-danger:hover {
    background: rgb(239 68 68 / 0.1);
    color: #ef4444;
}

.messenger-selection-toolbar {
    display: flex;
    min-height: 2.85rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.38rem;
    padding: 0.32rem 0.65rem 0.24rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.messenger-selection-close,
.messenger-selection-actions button {
    display: inline-flex;
    min-height: 2.05rem;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.36rem 0.58rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--msg-panel) 92%, transparent);
    color: var(--msg-muted);
    font: inherit;
    font-size: 0.64rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 0.35rem 1rem color-mix(in srgb, #020617 10%, transparent);
    backdrop-filter: blur(10px);
}

.messenger-selection-close {
    width: 2.05rem;
    padding: 0;
}

.messenger-selection-count {
    display: inline-flex;
    min-height: 2.05rem;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid var(--msg-line);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--msg-panel) 92%, transparent);
    color: var(--msg-text);
    padding: 0.36rem 0.62rem;
    font-size: 0.72rem;
    box-shadow: 0 0.35rem 1rem color-mix(in srgb, #020617 10%, transparent);
    backdrop-filter: blur(10px);
}

.messenger-selection-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.messenger-selection-actions button:hover,
.messenger-selection-close:hover {
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

.messenger-selection-actions button.is-danger {
    border-color: rgb(239 68 68 / 0.28);
    background: rgb(239 68 68 / 0.08);
    color: #ef4444;
}

.messenger-selection-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.messenger-selection-actions .messenger-icon,
.messenger-selection-actions svg,
.messenger-selection-close .messenger-icon,
.messenger-selection-close svg {
    width: 0.92rem;
    height: 0.92rem;
}

.messenger-forward-modal {
    position: fixed;
    inset: 0;
    z-index: 88000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(2 6 23 / 0.66);
    backdrop-filter: blur(10px);
    overflow: hidden;
    overscroll-behavior: none;
}

.messenger-forward-modal > section {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: min(25rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid var(--msg-line);
    border-radius: 1.15rem;
    background: var(--msg-panel);
    color: var(--msg-text);
    box-shadow: 0 1.5rem 4rem rgb(2 6 23 / 0.36);
    overscroll-behavior: contain;
}

.messenger-forward-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--msg-line);
}

.messenger-forward-modal h2 {
    margin: 0;
    font-size: 1rem;
}

.messenger-forward-modal header > button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 0.62rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    cursor: pointer;
}

.messenger-forward-modal > section > p {
    margin: 0;
    padding: 0.65rem 1rem 0.2rem;
    color: var(--msg-muted);
    font-size: 0.7rem;
}

.messenger-forward-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.55rem;
    margin: 0.55rem 0.75rem 0.15rem;
    padding: 0 0.7rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--msg-bg) 76%, var(--msg-panel) 24%);
    color: var(--msg-muted);
}

.messenger-forward-search .messenger-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.messenger-forward-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--msg-text);
    font: inherit;
    font-size: 0.75rem;
}

.messenger-forward-list {
    display: grid;
    gap: 0.25rem;
    max-height: 25rem;
    padding: 0.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.messenger-forward-list > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border: 0;
    border-radius: 0.82rem;
    background: transparent;
    color: var(--msg-text);
    text-align: left;
    cursor: pointer;
}

.messenger-forward-list > button:hover {
    background: var(--msg-accent-soft);
}

.messenger-forward-list > button > span {
    display: grid;
    min-width: 0;
}

.messenger-forward-list > button small {
    color: var(--msg-muted);
}

@media (max-width: 560px) {
    .messenger-selection-actions button span { display: none; }
    .messenger-selection-actions button { width: 2.35rem; padding: 0; }
}

.messenger-message.is-reply-highlighted .messenger-bubble {
    animation: messenger-reply-highlight 1.3s ease;
}

.messenger-reply-quote {
    display: grid;
    width: 100%;
    margin: 0 0 0.42rem;
    padding: 0.4rem 0.52rem;
    overflow: hidden;
    border: 0;
    border-left: 0.2rem solid var(--msg-accent);
    border-radius: 0.4rem 0.65rem 0.65rem 0.4rem;
    background: color-mix(in srgb, var(--msg-accent), transparent 89%);
    color: var(--msg-text);
    text-align: left;
    cursor: pointer;
}

.messenger-reply-quote strong {
    color: var(--msg-accent);
    font-size: 0.68rem;
    letter-spacing: 0;
}

.messenger-reply-quote span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--msg-muted);
    font-size: 0.7rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-message-menu-stack {
    position: fixed;
    left: var(--message-menu-x);
    top: var(--message-menu-y);
    z-index: 85000;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 13rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
}

.messenger-reaction-panel,
.messenger-message-menu,
.messenger-reaction-picker {
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: 0.26rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.76rem;
    background: color-mix(in srgb, var(--msg-panel), transparent 2%);
    box-shadow: 0 1rem 2.8rem rgb(2 6 23 / 0.25);
    backdrop-filter: blur(16px);
}

.messenger-reaction-panel {
    flex: 0 0 auto;
    overflow: hidden;
}

.messenger-message-menu {
    flex: 0 1 auto;
    max-height: calc(100vh - var(--message-menu-y) - 0.5rem);
}

.messenger-message-menu-actions > button {
    display: flex;
    width: 100%;
    min-height: 2.05rem;
    align-items: center;
    gap: 0.52rem;
    padding: 0.36rem 0.55rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--msg-text);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.messenger-message-menu-actions > button:hover {
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

.messenger-reaction-quick {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.14rem;
    padding: 0.06rem 0.04rem 0.16rem;
    border-bottom: 0;
}

.messenger-reaction-quick > button {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 1.95rem;
    place-items: center;
    border: 0;
    border-radius: 0.58rem;
    background: transparent;
    color: var(--msg-text);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 140ms ease, transform 140ms ease;
}

.messenger-reaction-quick > button:hover,
.messenger-reaction-quick > button.is-active {
    background: var(--msg-accent-soft);
    transform: translateY(-1px);
}

.messenger-reaction-quick > button.messenger-reaction-expand { color: var(--msg-muted); }
.messenger-reaction-quick > button.messenger-reaction-expand:hover,
.messenger-reaction-quick > button.messenger-reaction-expand.is-active { color: var(--msg-accent); }
.messenger-reaction-expand .messenger-icon,
.messenger-reaction-expand svg { width: 1rem; height: 1rem; }

.messenger-reaction-picker {
    position: absolute;
    top: -0.55rem;
    left: calc(100% + 0.5rem);
    display: flex;
    width: 20rem;
    max-width: calc(100vw - 1rem);
    max-height: min(24rem, calc(100vh - var(--message-menu-y) - 0.5rem));
    flex-direction: column;
    margin: 0;
    padding: 0.55rem 0.43rem;
    overflow: hidden;
}

.messenger-message-menu-stack.is-picker-left .messenger-reaction-picker {
    right: calc(100% + 0.5rem);
    left: auto;
}

.messenger-reaction-picker > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.1rem 0.35rem 0.45rem;
}

.messenger-reaction-picker > header strong { color: var(--msg-text); font-size: 0.76rem; }
.messenger-reaction-picker > header small { color: var(--msg-muted); font-size: 0.56rem; text-transform: uppercase; }

.messenger-reaction-picker > label {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.62rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.72rem;
    background: var(--msg-bg);
}

.messenger-reaction-picker > label .messenger-icon,
.messenger-reaction-picker > label svg { width: 0.9rem; height: 0.9rem; color: var(--msg-muted); }
.messenger-reaction-picker > label input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--msg-text); font-size: 0.7rem; }

.messenger-reaction-picker > nav {
    display: flex;
    gap: 0.2rem;
    margin: 0.42rem 0 0.35rem;
    padding-bottom: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.messenger-reaction-picker > nav::-webkit-scrollbar { display: none; }
.messenger-reaction-picker > nav > button {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    background: transparent;
    cursor: pointer;
    font-size: 0.92rem;
}
.messenger-reaction-picker > nav > button:hover,
.messenger-reaction-picker > nav > button.is-active { border-color: var(--msg-line); background: var(--msg-accent-soft); }

.messenger-reaction-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.16rem;
    min-height: 0;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.12rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--msg-accent), transparent 50%) transparent;
}

.messenger-reaction-grid > button {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 0.58rem;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background-color 120ms ease, transform 120ms ease;
}
.messenger-reaction-grid > button:hover { background: var(--msg-accent-soft); transform: scale(1.08); }
.messenger-reaction-grid > p { grid-column: 1 / -1; margin: 1rem 0; color: var(--msg-muted); text-align: center; font-size: 0.68rem; }

.messenger-message-menu .messenger-icon,
.messenger-message-menu svg {
    width: 1.05rem;
    height: 1.05rem;
}

.messenger-composer-reply {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    margin: -0.05rem 0.08rem 0.18rem;
    padding: 0.36rem 0.42rem 0.42rem;
    border-bottom: 1px solid var(--msg-line);
    color: var(--msg-accent);
}

.messenger-composer-reply > .messenger-icon,
.messenger-composer-reply > .messenger-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.messenger-composer-reply > span {
    display: grid;
    min-width: 0;
}

.messenger-composer-reply strong {
    font-size: 0.68rem;
}

.messenger-composer-reply small {
    overflow: hidden;
    color: var(--msg-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-composer-reply button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--msg-muted);
    cursor: pointer;
}

.messenger-composer-reply button:hover {
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

@keyframes messenger-reply-highlight {
    0%, 100% { box-shadow: 0 0.35rem 1rem color-mix(in srgb, #020617 6%, transparent); }
    35% { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--msg-accent), transparent 45%), 0 0.6rem 1.8rem color-mix(in srgb, var(--msg-accent), transparent 72%); }
}

.messenger-bubble.has-photos {
    width: fit-content;
    max-width: min(82%, 22rem);
    padding: 0.28rem 0.28rem 0.38rem;
}

.messenger-bubble.has-attachments {
    width: fit-content;
    max-width: min(84%, 23rem);
}

.messenger-video-grid {
    display: grid;
    gap: 0.3rem;
    width: min(20rem, 70vw);
    margin-bottom: 0.35rem;
}

.messenger-video-grid video {
    display: block;
    width: 100%;
    max-height: 18rem;
    border-radius: 0.78rem;
    background: #020617;
}

.messenger-file-list {
    display: grid;
    gap: 0.35rem;
    width: min(20rem, 70vw);
    margin: 0.3rem 0;
}

.messenger-file-card,
.messenger-audio-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    border: 1px solid var(--msg-line);
    border-radius: 0.78rem;
    background: color-mix(in srgb, var(--msg-accent), transparent 92%);
    color: var(--msg-text);
    padding: 0.52rem;
    text-decoration: none;
}
.messenger-file-card { width: 100%; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, opacity .18s ease; }
.messenger-file-card:hover { border-color: color-mix(in srgb, var(--msg-accent) 46%, var(--msg-line)); }
.messenger-file-card.is-downloaded { border-color: color-mix(in srgb, #22c55e 42%, var(--msg-line)); background: color-mix(in srgb, #22c55e 9%, var(--msg-panel)); }
.messenger-file-card.is-downloading { cursor: wait; opacity: .64; }
.messenger-file-card .messenger-file-action-icon { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; color: var(--msg-accent); }
.messenger-file-card .messenger-file-action-icon > .messenger-icon { width: 1rem; height: 1rem; }

/* ------------[Состояния кнопок скачивания]------------ // Единая вращающаяся индикация и галочка применяются к файлам чатов, библиотеки и публикаций. Модуль: «загрузки файлов». Часть 1/1 */
:is(.messenger-file-card, .messenger-library-file-button, .post-attachment-card) .messenger-file-action-icon {
    position: relative;
}
:is(.messenger-file-card, .messenger-library-file-button, .post-attachment-card).is-downloading .messenger-file-action-icon > * {
    opacity: 0;
}
:is(.messenger-file-card, .messenger-library-file-button, .post-attachment-card).is-downloading .messenger-file-action-icon::after {
    content: "";
    position: absolute;
    width: .78rem;
    height: .78rem;
    border: .11rem solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: vmesta-download-button-spin .68s linear infinite;
}
:is(.messenger-file-card, .messenger-library-file-button, .post-attachment-card).is-downloaded .messenger-file-action-icon {
    color: #16a34a;
    animation: vmesta-download-check-pop .38s cubic-bezier(.2, .9, .25, 1.35);
}
@keyframes vmesta-download-button-spin { to { transform: rotate(1turn); } }
@keyframes vmesta-download-check-pop {
    0% { transform: scale(.55); opacity: .2; }
    70% { transform: scale(1.16); }
    100% { transform: scale(1); opacity: 1; }
}

.messenger-file-card > .messenger-icon:first-child,
.messenger-audio-card > .messenger-icon:first-child {
    width: 2rem;
    height: 2rem;
    padding: 0.42rem;
    border-radius: 0.62rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

.messenger-file-card > span,
.messenger-audio-card > span {
    display: grid;
    min-width: 0;
}

.messenger-file-card strong,
.messenger-audio-card strong {
    overflow: hidden;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-file-card small,
.messenger-audio-card small {
    color: var(--msg-muted);
    font-size: 0.58rem;
}

.messenger-audio-card audio {
    grid-column: 1 / -1;
    width: 100%;
    height: 2rem;
}

.messenger-photo-grid {
    display: grid;
    width: min(19rem, 68vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 5rem;
    gap: 0.18rem;
    overflow: hidden;
    border-radius: 0.78rem;
}

.messenger-photo-grid button {
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: color-mix(in srgb, var(--msg-panel-strong), #000 8%);
    cursor: zoom-in;
}

.messenger-photo-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 160ms ease, filter 160ms ease;
}

.messenger-photo-grid button:hover img {
    filter: brightness(1.05);
    transform: scale(1.035);
}

.messenger-photo-grid.is-count-1 {
    width: min(15rem, 68vw);
    grid-template-columns: 1fr;
    grid-auto-rows: 11rem;
}

.messenger-photo-grid.is-count-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 10rem;
}

.messenger-photo-grid.is-count-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 8rem;
}

.messenger-photo-grid.is-count-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 6.5rem;
}

.messenger-photo-grid.is-count-5,
.messenger-photo-grid.is-count-6 {
    grid-auto-rows: 6rem;
}

.messenger-photo-grid.is-count-7,
.messenger-photo-grid.is-count-8,
.messenger-photo-grid.is-count-9 {
    grid-auto-rows: 4.8rem;
}

.messenger-photo-grid.is-count-10 {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 5rem;
}

.messenger-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: grid;
    place-items: center;
    padding: 2rem 4.5rem;
    background: rgb(2 6 23 / 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.messenger-photo-viewer figure {
    display: grid;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    place-items: center;
}

.messenger-photo-viewer figure img {
    display: block;
    max-width: min(92vw, 100%);
    max-height: calc(100vh - 5rem);
    border-radius: 0.9rem;
    object-fit: contain;
    box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.5);
}

.messenger-photo-viewer figcaption {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 0.75);
    color: #fff;
    font-size: 0.72rem;
    transform: translateX(-50%);
}

.messenger-photo-viewer-close,
.messenger-photo-viewer-nav {
    position: fixed;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(15 23 42 / 0.74);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.messenger-photo-viewer-close {
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
}

.messenger-photo-viewer-close .messenger-icon,
.messenger-photo-viewer-close svg {
    width: 1.35rem;
    height: 1.35rem;
}

.messenger-photo-viewer-nav {
    top: 50%;
    width: 3.25rem;
    height: 4.5rem;
    border-radius: 1rem;
    font-size: 2.4rem;
    line-height: 1;
    transform: translateY(-50%);
}

.messenger-photo-viewer-nav.is-prev { left: 1rem; }
.messenger-photo-viewer-nav.is-next { right: 1rem; }

@media (max-width: 640px) {
    .messenger-bubble.has-photos { max-width: 90%; }
    .messenger-photo-grid { width: min(18rem, 76vw); }
    .messenger-photo-viewer { padding: 3.5rem 0.75rem; }
    .messenger-photo-viewer-nav {
        top: auto;
        bottom: 1rem;
        width: 3rem;
        height: 3rem;
        transform: none;
    }
}

/* Одинаковая рамка обоих аватаров в строке партнёра без видимого фона. */
html:root body #relationship-avatar-pair > :is(div, button) {
    display: grid !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}
html:root body #relationship-avatar-pair > button > div,
html:root body #relationship-avatar-pair > div {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    margin: 0 !important;
    border-radius: 999px !important;
}
html:root body #relationship-avatar-pair > button {
    border: 0 !important;
    background: transparent !important;
}
html:root body #relationship-avatar-pair img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

/* Аватар пространства повторяет адаптивные размеры аватара человека. */
html:root body.space-route #profile-avatar-card {
    width: 8rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html:root body.space-route #profile-avatar-card > :first-child,
html:root body.space-route #profile-avatar-card #avatar-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
}
@media (min-width: 640px) {
    html:root body.space-route #profile-avatar-card { width: 10rem !important; }
}
@media (min-width: 768px) {
    html:root body.space-route #profile-avatar-card { width: 100% !important; }
}


/* ------------[Компактная левая колонка профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 3/34 */
/* Сохраняет удобную площадь нажатия, но убирает двойные вертикальные поля
   вокруг друзей и мини-аватаров, чтобы низ основной навигации не обрезался. */
@media (min-width: 768px) {
    html:root body #profile-sidebar-shell > #profile-avatar-card {
        margin-bottom: .35rem !important;
    }
    html:root body #profile-sidebar-shell > .profile-sidebar-summary {
        margin-top: .35rem !important;
        gap: .2rem !important;
    }
    html:root body #profile-sidebar-shell > #friends-list-container {
        margin-top: .15rem !important;
        padding-block: 0 !important;
    }
    html:root body.space-route #profile-sidebar-shell > .profile-sidebar-summary {
        display: none !important;
    }
    html:root body.space-route #profile-sidebar-shell > #friends-list-container {
        margin-top: .18rem !important;
    }
    html:root body #profile-sidebar-shell > .profile-sidebar-navigation {
        margin-top: .35rem !important;
        padding: .3rem !important;
        gap: 0 !important;
    }
    html:root body #profile-sidebar-shell > .profile-sidebar-navigation .nav-item {
        min-height: 2.25rem !important;
        padding: .42rem .68rem !important;
    }
}

/* Выбор публичной личности у комментариев пространства. */
.comment-form-container:has(.space-comment-identity) { overflow: visible !important; }
.space-comment-identity { position: relative; z-index: 32; flex: 0 0 auto; margin-left: .38rem; }
.space-comment-identity-trigger { position: relative; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; overflow: visible; border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 32%, transparent); border-radius: .72rem; padding: .15rem; background: color-mix(in srgb, var(--vmesta-ui-surface, var(--adaptive-surface, #fff)) 86%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 14%); color: var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)); box-shadow: 0 .22rem .65rem color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 18%, transparent); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.space-comment-identity-trigger:not(:disabled):hover, .space-comment-identity.is-open .space-comment-identity-trigger { transform: translateY(-1px); border-color: var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)); box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 14%, transparent), 0 .3rem .8rem color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 28%, transparent); }
.space-comment-identity-trigger:disabled { cursor: default; opacity: 1; }
.space-comment-identity-trigger > span { display: grid; width: 1.68rem; height: 1.68rem; place-items: center; overflow: hidden; border-radius: .52rem; }
.space-comment-identity-trigger > span > *, .space-comment-identity-option-avatar > * { width: 100% !important; height: 100% !important; min-width: 0 !important; border-radius: inherit !important; object-fit: cover; }
.space-comment-identity-trigger > svg { position: absolute; right: -.22rem; bottom: -.2rem; width: .78rem; height: .78rem; overflow: visible; border: 2px solid var(--vmesta-ui-surface, var(--adaptive-surface, #fff)); border-radius: 999px; padding: .04rem; background: var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)); fill: none; stroke: #fff; stroke-width: 2.5; }
.space-comment-identity-menu { position: absolute; left: 0; bottom: calc(100% + .58rem); display: none; width: min(18rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--vmesta-ui-line, var(--adaptive-border, #dbe4f0)); border-radius: 1rem; padding: .42rem; background: var(--vmesta-ui-surface, var(--adaptive-surface, #fff)); box-shadow: 0 1.1rem 2.8rem rgba(15, 23, 42, .24); color: var(--vmesta-ui-ink, var(--adaptive-text-strong, #172033)); }
.space-comment-identity.is-open .space-comment-identity-menu { display: grid; gap: .28rem; animation: space-comment-identity-in .16s ease-out both; }
.space-comment-identity-menu header { display: grid; gap: .12rem; padding: .38rem .48rem .5rem; }
.space-comment-identity-menu header strong { font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.space-comment-identity-menu header small { color: var(--vmesta-ui-muted, var(--adaptive-text-muted, #768399)); font-size: .54rem; font-weight: 700; }
.space-comment-identity-option { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) 1.2rem; align-items: center; gap: .62rem; min-height: 3.15rem; border: 1px solid transparent; border-radius: .78rem; padding: .42rem; background: transparent; color: inherit; text-align: left; transition: background .16s ease, border-color .16s ease; }
.space-comment-identity-option:hover, .space-comment-identity-option.is-active { border-color: color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 28%, transparent); background: color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 11%, transparent); }
.space-comment-identity-option-avatar { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; overflow: hidden; border-radius: .68rem; }
.space-comment-identity-option > span:nth-child(2) { display: grid; min-width: 0; gap: .1rem; }
.space-comment-identity-option strong, .space-comment-identity-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-comment-identity-option strong { font-size: .67rem; font-weight: 900; }
.space-comment-identity-option small { color: var(--vmesta-ui-muted, var(--adaptive-text-muted, #768399)); font-size: .54rem; font-weight: 700; }
.space-comment-identity-option i { color: var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)); font-size: .8rem; font-style: normal; font-weight: 950; text-align: center; }
.space-comment-identity-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)); color: #fff; font-size: .7rem; font-weight: 950; }
@keyframes space-comment-identity-in { from { opacity: 0; transform: translateY(.35rem) scale(.97); } to { opacity: 1; transform: none; } }

/* Яркая цель перехода из уведомления: отдельно выделяются комментарий и реакция. */
.comment-node.highlight-comment { border-left: 4px solid #3186ff !important; border-radius: .85rem !important; background: color-mix(in srgb, #3186ff 15%, var(--vmesta-ui-surface, var(--adaptive-surface, #fff))) !important; box-shadow: 0 0 0 2px color-mix(in srgb, #3186ff 48%, transparent), 0 0 1.4rem color-mix(in srgb, #3186ff 55%, transparent) !important; }
.comment-node.highlight-comment::before { content: ""; position: absolute; z-index: 25; inset: -.22rem; border: 2px solid #3186ff; border-radius: 1rem; background: color-mix(in srgb, #3186ff 18%, transparent); box-shadow: inset 0 0 1rem color-mix(in srgb, #3186ff 16%, transparent), 0 0 1.15rem color-mix(in srgb, #3186ff 56%, transparent); pointer-events: none; animation: notification-target-overlay 1.05s ease-in-out 3; }
.comment-node.highlight-comment::after { content: ""; position: absolute; z-index: -1; inset: -.34rem; border: 2px solid #3186ff; border-radius: 1rem; pointer-events: none; animation: notification-target-ring 1.05s ease-out 3; }
.comment-node.highlight-comment-like .comment-like-btn { color: #ff4567 !important; filter: drop-shadow(0 0 .42rem rgba(255,69,103,.85)); animation: notification-reaction-pop .72s ease-in-out 4; }
.notification-reaction-highlight { color: #ff4567 !important; filter: drop-shadow(0 0 .48rem rgba(255,69,103,.9)); animation: notification-reaction-pop .72s ease-in-out 4; }
@keyframes notification-target-ring { 0% { opacity: .95; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.055); } }
@keyframes notification-target-overlay { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes notification-reaction-pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .comment-node.highlight-comment::before, .comment-node.highlight-comment::after, .comment-node.highlight-comment-like .comment-like-btn, .notification-reaction-highlight { animation: none !important; } }

/* ------------[Единый центр уведомлений и звука]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 2/203 */
html:root body .cover-notifications-pane .cover-account-card {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .notification-preferences-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    border: 0 !important;
    background: transparent !important;
}

html:root body .notification-preferences-header h3 { color: var(--vmesta-ui-primary) !important; }
html:root body .notification-preferences-header p { color: color-mix(in srgb, var(--vmesta-ui-primary) 58%, var(--vmesta-ui-muted) 42%) !important; }

html:root body .notification-preferences-header .cover-account-card-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-preferences-status {
    color: var(--vmesta-ui-muted);
    font-size: .6rem;
    font-weight: 800;
    white-space: nowrap;
}

.notification-preferences-status[data-state="saved"] { color: #16a34a; }
.notification-preferences-status[data-state="local"] { color: var(--vmesta-ui-primary); }

.notification-preferences-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .2rem .85rem .95rem;
}

.notification-preference-group {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary) 15%, transparent);
    border-radius: .95rem;
    background: var(--vmesta-menu-surface);
}

.notification-preference-group > header {
    display: grid;
    gap: .1rem;
    padding: .72rem .78rem;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%);
}

.notification-preference-group > header > span {
    color: var(--vmesta-ui-primary);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.notification-preference-group > header > small {
    color: color-mix(in srgb, var(--vmesta-ui-primary) 55%, var(--vmesta-ui-muted) 45%);
    font-size: .57rem;
    font-weight: 650;
}

.notification-preference-row,
.notification-sound-choice,
.notification-custom-sound,
.notification-volume-row {
    display: flex;
    min-height: 3.45rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem .76rem;
    border-top: 1px solid color-mix(in srgb, var(--vmesta-ui-primary) 11%, transparent);
    transition: opacity 150ms ease, background-color 150ms ease;
}

.notification-preference-row:hover,
.notification-sound-choice:hover,
.notification-custom-sound:hover,
.notification-volume-row:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 83%, var(--vmesta-ui-primary) 17%);
}

.notification-preference-row > span:first-child,
.notification-sound-choice > span:first-child,
.notification-custom-sound > span:first-child,
.notification-volume-row > span:first-child {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.notification-preference-row strong,
.notification-sound-choice strong,
.notification-custom-sound strong,
.notification-volume-row strong {
    color: var(--vmesta-ui-primary);
    font-size: .67rem;
    font-weight: 900;
}

.notification-preference-row small,
.notification-sound-choice small,
.notification-custom-sound small,
.notification-volume-row small {
    color: color-mix(in srgb, var(--vmesta-ui-primary) 51%, var(--vmesta-ui-muted) 49%);
    font-size: .56rem;
    font-weight: 650;
    line-height: 1.35;
}

.notification-preference-row.is-master { min-height: 4rem; }
.notification-preference-row.is-master strong { font-size: .73rem; }
.notification-preference-row .cover-account-switch { flex: 0 0 auto; justify-self: auto !important; }

.notification-preference-row.is-disabled,
.notification-sound-choice.is-disabled,
.notification-custom-sound.is-disabled,
.notification-volume-row.is-disabled {
    opacity: .43;
}

.notification-sound-library { grid-column: 1 / -1; }
.notification-sound-choice > div { display: flex; flex: 0 0 min(100%, 18rem); gap: .42rem; }

.notification-sound-choice select,
.notification-sound-choice button {
    min-height: 2.2rem;
    border: 0;
    border-radius: .68rem;
    outline: 0;
    font-size: .63rem;
    font-weight: 850;
}

.notification-sound-choice select {
    flex: 1 1 auto;
    min-width: 0;
    padding: .42rem 1.8rem .42rem .68rem;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%);
    color: var(--vmesta-ui-primary);
}

.notification-sound-choice button {
    flex: 0 0 auto;
    padding: .42rem .7rem;
    background: var(--vmesta-ui-primary);
    color: var(--vmesta-ui-on-primary, #fff);
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}

.notification-sound-choice button:hover { filter: brightness(1.07); transform: translateY(-1px); }

.notification-sound-choice button.notification-sound-preview { display: grid; width: 2.2rem; min-width: 2.2rem; padding: 0; place-items: center; border-radius: .68rem; }
.notification-sound-preview svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notification-custom-sound > div { display: flex; flex: 0 0 min(100%, 18rem); justify-content: flex-end; gap: .42rem; }
.notification-custom-sound button {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .42rem .68rem;
    border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary) 28%, transparent);
    border-radius: .68rem;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%);
    color: var(--vmesta-ui-primary);
    font-size: .61rem;
    font-weight: 850;
    cursor: pointer;
}
.notification-custom-sound button:hover { filter: brightness(1.06); }
.notification-custom-sound button svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notification-custom-sound .notification-custom-sound-reset { width: 2.2rem; padding: 0; color: #ef476f; }
.notification-custom-sound.has-custom-sound small { color: #16a34a; }
.notification-space-library { grid-column: 1 / -1; }
.notification-space-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .65rem; }
.notification-space-list > p { grid-column: 1 / -1; margin: 0; padding: 1rem; color: var(--vmesta-ui-muted); font-size: .62rem; font-weight: 750; text-align: center; }
.notification-space-row { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-width: 0; border-radius: .72rem; padding: .48rem; background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%); }
.notification-space-row > img { width: 2.35rem; height: 2.35rem; border-radius: .65rem; object-fit: cover; }
.notification-space-row > span:nth-child(2) { display: grid; min-width: 0; gap: .08rem; }
.notification-space-row strong, .notification-space-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-space-row strong { color: var(--vmesta-ui-primary); font-size: .65rem; font-weight: 900; }
.notification-space-row small { color: var(--vmesta-ui-muted); font-size: .53rem; font-weight: 700; }

.notification-volume-row > input[type="range"] {
    flex: 0 0 min(100%, 18rem);
    accent-color: var(--vmesta-ui-primary);
    cursor: pointer;
}

@media (max-width: 760px) {
    .notification-preferences-layout { grid-template-columns: 1fr; padding-inline: .55rem; }
    .notification-sound-library { grid-column: auto; }
    .notification-space-library { grid-column: auto; }
    .notification-space-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .notification-preferences-header { grid-template-columns: auto minmax(0, 1fr); }
    .notification-preferences-status { grid-column: 1 / -1; padding-left: .15rem; }
    .notification-sound-choice,
    .notification-custom-sound,
    .notification-volume-row { align-items: stretch; flex-direction: column; }
    .notification-sound-choice > div,
    .notification-custom-sound > div,
    .notification-volume-row > input[type="range"] { width: 100%; flex-basis: auto; }
}

/* ------------[Публичный ID пользователя в настройках безопасности]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 3/203 */
html:root body #cover-security-pane .cover-account-identifier-value {
    display: flex;
    width: min(100%, 21rem);
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    justify-self: start;
    box-sizing: border-box;
    border: 1px solid var(--theme-border, var(--adaptive-border, var(--standard-line, #cbd5e1)));
    border-radius: .85rem;
    background: var(--theme-surface-control, var(--adaptive-ui-control, var(--standard-panel-soft, #f8fafc)));
    padding: .38rem .46rem .38rem .85rem;
    color: var(--theme-text-primary, var(--adaptive-text, var(--standard-text, #1e293b)));
}

html:root body #cover-security-pane .cover-account-identifier-value > code {
    min-width: 0;
    overflow: hidden;
    color: var(--theme-accent, var(--color-dynamic, #d76f2a));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:root body #cover-security-pane .cover-account-identifier-value.is-api-url > code {
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: 0;
}

html:root body #cover-security-pane .cover-account-identifier-value > button {
    display: grid;
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 0;
    border-radius: .64rem;
    background: transparent;
    color: var(--theme-accent, var(--color-dynamic, #d76f2a));
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

html:root body #cover-security-pane .cover-account-identifier-value > button:is(:hover, :focus-visible),
html:root body #cover-security-pane .cover-account-identifier-value > button.is-copied {
    background: color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #d76f2a)) 15%, transparent);
    transform: scale(.96);
}

html:root body #cover-security-pane .cover-account-identifier-value > button svg {
    width: .92rem;
    height: .92rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------[Запись: круглая контрастная кнопка Stop]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 4/203 */
/* ------------[Финальная геометрия редактора голосовых и видеокружков]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 5/203 */
html:root body .messenger-composer.has-recording-draft,
html:root body .messenger-composer.has-recording-draft > .messenger-recording-panel.is-draft,
html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html:root body .messenger-composer.has-recording-draft {
    min-height: 3.5rem !important;
    padding: .24rem !important;
    border-radius: 1rem !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
    min-height: 3rem !important;
    grid-template-columns: 2.35rem minmax(7rem, 1fr) 2.65rem !important;
    gap: .38rem !important;
    padding: .18rem !important;
    background: transparent !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    height: 2.3rem !important;
    border-radius: .72rem !important;
    background: color-mix(in srgb, var(--msg-menu-surface) 62%, var(--msg-accent) 38%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 30%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span {
    position: absolute !important;
    z-index: 2 !important;
    inset: .2rem .42rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span > i {
    display: block !important;
    width: .075rem !important;
    min-width: .075rem !important;
    max-width: .075rem !important;
    height: var(--voice-wave-height, .5rem) !important;
    min-height: .2rem !important;
    max-height: 1.42rem !important;
    flex: 0 0 .075rem !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--msg-accent) 72%, var(--msg-text) 28%) !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > i {
    z-index: 1 !important;
    top: .16rem !important;
    bottom: .16rem !important;
    background: color-mix(in srgb, var(--msg-accent) 13%, transparent) !important;
    box-shadow: inset .14rem 0 var(--msg-accent), inset -.14rem 0 var(--msg-accent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input {
    z-index: 4 !important;
    top: 0 !important;
    right: .34rem !important;
    bottom: 0 !important;
    left: .34rem !important;
    width: calc(100% - .68rem) !important;
    height: 100% !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play {
    z-index: 6 !important;
    min-width: 3.25rem !important;
    height: 1.48rem !important;
    padding: 0 .42rem !important;
    gap: .24rem !important;
    background: color-mix(in srgb, var(--msg-accent) 86%, var(--msg-panel) 14%) !important;
    color: #fff !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
    background: color-mix(in srgb, var(--msg-accent) 78%, var(--msg-panel) 22%) !important;
    color: #fff !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send::before {
    content: "";
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    background: currentColor;
    clip-path: polygon(4% 45%, 96% 4%, 63% 96%, 47% 61%);
    transform: rotate(-4deg);
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete .messenger-icon,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete svg {
    display: block !important;
    width: .92rem !important;
    height: .92rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* ------------[Редактор записи: настоящая волна и явные кнопки]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 6/203 */
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    background-color: var(--msg-panel) !important;
    background-image: linear-gradient(
        color-mix(in srgb, var(--msg-accent) 18%, transparent),
        color-mix(in srgb, var(--msg-accent) 18%, transparent)
    ) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 40%, transparent),
        0 .12rem .35rem color-mix(in srgb, #020617 8%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim-wave {
    position: absolute !important;
    z-index: 2 !important;
    inset: .42rem .62rem !important;
    display: block !important;
    width: calc(100% - 1.24rem) !important;
    height: calc(100% - .84rem) !important;
    overflow: visible !important;
    color: color-mix(in srgb, var(--msg-accent) 78%, var(--msg-text) 22%) !important;
    opacity: .96 !important;
    pointer-events: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim-wave rect {
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play::before {
    content: none !important;
    display: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play-symbol {
    display: inline-grid !important;
    width: .7rem !important;
    min-width: .7rem !important;
    height: .72rem !important;
    place-items: center !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: .62rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: .72rem !important;
    transform: translateY(-.01rem) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play.is-playing-icon .messenger-recording-draft-play-symbol {
    font-size: .58rem !important;
    letter-spacing: -.12rem !important;
    transform: translate(-.04rem, -.01rem) !important;
}

html.dark body .messenger-recording-panel.is-draft .messenger-recording-trim {
    background: color-mix(in srgb, var(--msg-menu-surface) 70%, var(--msg-accent) 30%) !important;
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
        grid-template-columns: 2.15rem minmax(5rem, 1fr) 2.42rem !important;
        gap: .26rem !important;
    }
}

/* ------------[Плавное раскрытие видеосообщения]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 7/203 */
html:root body .messenger-bubble.is-video-note-only {
    --messenger-video-note-size: min(12rem, 60vw);
    width: var(--messenger-video-note-size) !important;
    max-width: var(--messenger-video-note-size) !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    will-change: width, max-width;
    transition:
        width 330ms cubic-bezier(.2, .82, .22, 1),
        max-width 330ms cubic-bezier(.2, .82, .22, 1),
        filter 220ms ease !important;
}

html:root body .messenger-bubble.is-video-note-only:has(.messenger-video-note.is-expanded) {
    --messenger-video-note-size: min(22rem, 82vw);
}

html:root body .messenger-video-note,
html:root body .messenger-video-note.is-expanded {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    will-change: transform;
    transform: translateZ(0) scale(1);
}

html:root body .messenger-message.is-outgoing .messenger-bubble.is-video-note-only {
    transform-origin: right bottom;
}

html:root body .messenger-message.is-incoming .messenger-bubble.is-video-note-only {
    transform-origin: left bottom;
}

html:root body .messenger-video-note.is-expanding video,
html:root body .messenger-video-note.is-expanding .messenger-video-note-ring {
    animation: messenger-video-note-open 330ms cubic-bezier(.2, .82, .22, 1) both;
}

html:root body .messenger-video-note.is-collapsing video,
html:root body .messenger-video-note.is-collapsing .messenger-video-note-ring {
    animation: messenger-video-note-close 330ms cubic-bezier(.2, .82, .22, 1) both;
}

@keyframes messenger-video-note-open {
    from { opacity: .88; transform: scale(.965); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes messenger-video-note-close {
    from { opacity: 1; transform: scale(1); }
    58% { opacity: .94; transform: scale(.975); }
    to { opacity: 1; transform: scale(1); }
}

html:root body .messenger-message-stream {
    scroll-behavior: auto !important;
    transition: none !important;
}

/* Верхний контрол закрывается нашей кнопкой и одновременно сворачивает кружок. */
html:root body .messenger-inline-media-bar {
    display: grid !important;
    box-sizing: border-box;
    padding-right: .58rem !important;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transform-origin: top center;
    transition:
        opacity 170ms ease,
        transform 230ms cubic-bezier(.2, .82, .22, 1),
        visibility 0s linear 0s;
}

html:root body .messenger-inline-media-bar.hidden {
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-.45rem) scale(.97) !important;
    transition:
        opacity 170ms ease,
        transform 230ms cubic-bezier(.2, .82, .22, 1),
        visibility 0s linear 230ms !important;
}

html:root body .messenger-inline-media-close {
    justify-self: end;
    transform: translateX(-.18rem);
    border-radius: .5rem !important;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease !important;
}

html:root body .messenger-inline-media-close:hover {
    background: color-mix(in srgb, var(--msg-accent) 13%, transparent) !important;
    transform: translateX(-.18rem) scale(.94) !important;
}

/* Последняя страховка редактора: волна и Play видимы поверх любых старых тем. */
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    background-color: var(--msg-panel) !important;
    background-image: linear-gradient(
        color-mix(in srgb, var(--msg-accent) 18%, transparent),
        color-mix(in srgb, var(--msg-accent) 18%, transparent)
    ) !important;
}

/* ------------[Запись: постоянная кнопка отправки под замком]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 8/203 */
/* Правый слот существует с первой секунды записи. При фиксации его размеры
   не меняются, поэтому волна и кнопки больше не прыгают по горизонтали. */
html:root body .messenger-recording-panel.is-active:not(.is-draft) {
    display: grid !important;
    grid-template-columns: auto auto minmax(5rem, 1fr) 2.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-status {
    width: clamp(9rem, 24vw, 14rem) !important;
    min-width: 0 !important;
    max-width: 14rem !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-status > strong {
    flex: 0 0 2.5rem !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-status > span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-active:not(.is-draft) {
        grid-template-columns: auto auto minmax(3rem, 1fr) 2.2rem !important;
    }

    html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions,
    html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions > .messenger-recording-send.messenger-send-button {
        width: 2.2rem !important;
        min-width: 2.2rem !important;
        height: 2.2rem !important;
        min-height: 2.2rem !important;
    }

    html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-status {
        width: 4rem !important;
        max-width: 4rem !important;
    }
}

/* ------------[Точная геометрия полей «О пространстве»]------------ //
   Верхняя и нижняя кнопки стоят на одной оси, а текст не попадает под них. Модуль: «оформление интерфейса». Часть 1/50 */
html:root body #space-about-panel .space-about-description-field .space-about-quote-input {
    min-height: 5.4rem !important;
    padding-right: 3.05rem !important;
    padding-bottom: 2.7rem !important;
}

html:root body #space-about-panel .space-about-resize-field .space-about-expand-toggle {
    top: .68rem !important;
    right: .72rem !important;
}

html:root body #space-about-panel .space-about-resize-field .space-about-description-emoji {
    right: .72rem !important;
    bottom: .68rem !important;
}

html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle {
    top: 0 !important;
    right: .72rem !important;
}

html:root body #space-about-panel .space-about-longform > textarea {
    padding-right: 3rem !important;
    padding-bottom: 3rem !important;
}

html:root body #space-about-panel .space-about-details-emoji {
    right: 1.05rem !important;
    bottom: 1.05rem !important;
}

html:root body #space-about-panel :is(.space-about-expand-toggle, .space-about-description-emoji) {
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: .5rem !important;
}

/* ------------[Редактор кадрирования фотографии]------------ // Один компактный
   вариант обслуживает загрузку в профиль и в пространство. Модуль: «оформление интерфейса». Часть 2/50 */
html:root body #photo-modal {
    padding: 1rem !important;
}

html:root body #photo-modal > div {
    max-height: calc(100dvh - 2rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 1.45rem !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vmesta-ui-primary) 58%, transparent) transparent;
}

html:root body #photo-modal > div::-webkit-scrollbar { width: .34rem; }
html:root body #photo-modal > div::-webkit-scrollbar-track { background: transparent; }
html:root body #photo-modal > div::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 58%, transparent);
}

html:root body #photo-modal > div > .p-8 {
    padding: 1.55rem !important;
}

html:root body #avatar-crop-viewport {
    border: 0 !important;
    border-radius: 1.05rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body #photo-modal :is(.avatar-library-card, label.group.w-full),
html:root body #photo-modal .w-full.mt-7 > .flex {
    border: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body #photo-modal input[type="range"] {
    height: .34rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #photo-modal input[type="range"]::-webkit-slider-thumb {
    width: 1.05rem;
    height: 1.05rem;
}

html:root body #photo-modal > div > :last-child {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #photo-modal :is(.avatar-target-option, #save-photo-btn) {
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------[Каталог пространств]------------ // Светлая общая панель без
   контуров; состояние вкладки читается только по мягкой заливке. Модуль: «оформление интерфейса». Часть 3/50 */
html:root body .spaces-index-toolbar {
    border: 0 !important;
    border-radius: .95rem !important;
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

html:root body .spaces-index-scope button,
html:root body .spaces-index-scope button.is-active {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

html:root body .spaces-index-scope button:hover {
    background: var(--vmesta-ui-soft) !important;
}

html:root body .spaces-index-scope button.is-active,
html:root body .spaces-index-scope button.is-active:hover {
    background: var(--vmesta-menu-surface) !important;
}

html:root body .spaces-index-scope button span,
html:root body .spaces-index-scope button.is-active span {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 62%, var(--vmesta-ui-primary) 38%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .spaces-index-view,
html:root body .spaces-index-view button {
    border: 0 !important;
    box-shadow: none !important;
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-card,
html:root body .spaces-index-grid:not(.is-list) .spaces-index-open {
    height: 100%;
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-open {
    display: grid;
    grid-template-rows: 9rem minmax(7.5rem, auto);
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-body {
    min-height: 7.5rem;
    align-items: center;
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-body > span:last-child {
    display: flex;
    min-width: 0;
    min-height: 4.35rem;
    justify-content: center;
    flex-direction: column;
}

html:root body .spaces-index-body strong { line-height: 1.25; }
html:root body .spaces-index-body small { line-height: 1.4; }

/* ------------[Аватары в «Личной жизни»]------------ // Размеры ограничивают
   строку, а отсутствие overflow сохраняет круглую фотографию и индикатор. Модуль: «оформление интерфейса». Часть 4/50 */
html:root body #relationship-card > .mt-2 {
    overflow: visible !important;
}

html:root body #relationship-visual {
    width: 4.4rem;
    max-width: 4.4rem !important;
    overflow: visible !important;
    padding: .12rem;
}

html:root body #relationship-avatar-pair {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, 2rem);
    justify-content: end;
    gap: .28rem !important;
    overflow: visible;
}
html:root body #relationship-avatar-pair.is-single {
  width:2rem!important;
  grid-template-columns:2rem!important;
}

html:root body #relationship-avatar-pair > * {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 0;
    border-radius: 999px !important;
}

html:root body #relationship-avatar-pair :is(img, .avatar-placeholder) {
    display: block;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ------------[Финальная памятка галактического рейтинга]------------ // Оформляет справку по местам и шести номинациям в публичном топе и панели администратора. Модуль: «рейтинг пространств». Часть 1/1 */
.spaces-top-legend { position: relative; justify-content: space-between; }
.spaces-top-legend > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; }
.spaces-top-help-toggle { display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; place-items: center; border: 1px solid color-mix(in srgb, #2583ff 48%, transparent); border-radius: 999px; background: color-mix(in srgb, #2583ff 12%, transparent); color: #2583ff; font-size: .72rem; font-weight: 950; }
.spaces-top-help-toggle:is(:hover, :focus-visible, .is-active) { background: #2583ff; color: #fff; box-shadow: 0 0 1rem rgb(37 131 255 / .28); }
.spaces-top-help-popover { position: absolute; z-index: 120; right: 0; bottom: calc(100% + .6rem); display: grid; width: min(23rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100dvh - 2rem)); gap: .6rem; overflow-y: auto; border: 1px solid var(--vmesta-ui-line, var(--standard-line)); border-radius: 1rem; padding: .75rem; background: var(--vmesta-menu-surface, var(--vmesta-ui-surface, var(--standard-panel))); color: var(--vmesta-ui-ink, var(--standard-text-active)); box-shadow: 0 1.35rem 3.2rem rgb(4 8 18 / .42); }
.spaces-top-help-popover > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.spaces-top-help-popover > header span { color: inherit; font-size: .72rem; font-weight: 950; }
.spaces-top-help-popover > header button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .58rem; background: var(--vmesta-ui-soft, var(--standard-panel-soft)); color: var(--vmesta-ui-muted, var(--standard-text-secondary)); font-size: 1rem; }
.spaces-top-help-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.spaces-top-help-tiers b { display: flex; align-items: center; gap: .38rem; border-radius: .62rem; padding: .45rem .5rem; background: var(--vmesta-ui-soft, var(--standard-panel-soft)); color: inherit; font-size: .55rem; }
.spaces-top-help-tiers i { width: .52rem; height: .52rem; flex: 0 0 .52rem; border-radius: 50%; background: #b87333; }
.spaces-top-help-tiers .is-platinum { background: linear-gradient(135deg, #7dd3fc, #c4b5fd); }
.spaces-top-help-tiers .is-gold { background: #f59e0b; }
.spaces-top-help-tiers .is-silver { background: #94a3b8; }
.spaces-top-help-tiers .is-bronze { background: #b87333; }
.spaces-top-help-nominations { display: grid; gap: .28rem; }
.spaces-top-help-nominations article { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: center; gap: .48rem; border-radius: .62rem; padding: .4rem .48rem; background: color-mix(in srgb, var(--vmesta-ui-soft, var(--standard-panel-soft)) 82%, transparent); }
.spaces-top-help-nominations svg { width: .88rem; height: .88rem; justify-self: center; fill: none; stroke: #2583ff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.spaces-top-help-nominations article span { display: grid; gap: .06rem; color: inherit; }
.spaces-top-help-nominations strong { font-size: .56rem; }
.spaces-top-help-nominations small { color: var(--vmesta-ui-muted, var(--standard-text-secondary)); font-size: .49rem; line-height: 1.35; }
.spaces-top-help-popover > p { margin: 0; border-radius: .62rem; padding: .52rem; background: color-mix(in srgb, #2583ff 11%, transparent); color: var(--vmesta-ui-muted, var(--standard-text-secondary)); font-size: .5rem; font-weight: 760; line-height: 1.45; }
.space-rating-admin-nominations article p { margin: .28rem 0 0; color: var(--adaptive-muted, var(--standard-text-secondary)); font-size: .55rem; font-weight: 650; line-height: 1.42; }
.space-rating-admin-tiers { display: grid; gap: .48rem; border: 1px solid color-mix(in srgb, #2583ff 28%, transparent); border-radius: .95rem; padding: .82rem .9rem; background: color-mix(in srgb, #2583ff 7%, transparent); }
.space-rating-admin-tiers > span { color: #2583ff; font-size: .52rem; font-weight: 950; letter-spacing: .13em; }
.space-rating-admin-tiers > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; }
.space-rating-admin-tiers b { border-radius: .62rem; padding: .48rem; background: var(--adaptive-surface-2, var(--standard-panel-soft)); font-size: .56rem; text-align: center; }
.space-rating-admin-tiers b.is-platinum { color: #60a5fa; }
.space-rating-admin-tiers b.is-gold { color: #f59e0b; }
.space-rating-admin-tiers b.is-silver { color: #94a3b8; }
.space-rating-admin-tiers b.is-bronze { color: #c47b42; }
.space-rating-admin-tiers small { color: var(--adaptive-muted, var(--standard-text-secondary)); font-size: .54rem; line-height: 1.45; }

/* ------------[Безопасные меню карточек пространств]------------ // Открывает действия слева от троеточия и сохраняет доступ к нижним пунктам возле границ экрана. Модуль: «пространства». Часть 1/1 */
.spaces-index-card.has-open-menu { z-index: 90 !important; overflow: visible !important; }
.spaces-index-card.has-open-menu .spaces-index-open { overflow: hidden !important; border-radius: inherit !important; }
.spaces-index-menu { right: auto; max-height: calc(100dvh - 1.5rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.spaces-index-card.is-list .spaces-index-menu { right: auto; }
.space-manage-actions-menu { top: 0; right: calc(100% + .45rem); max-height: calc(100dvh - 1.5rem); overscroll-behavior: contain; }
.space-manage-actions-menu.opens-up { top: auto; bottom: 0; }

/* ------------[Ровная личная жизнь профиля]------------ // Удерживает подпись партнёра и обе фотографии в одной строке без выпадения индикаторов на фон. Модуль: «профиль». Часть 1/1 */
html:root body #relationship-visual { align-self: end !important; width: 4.45rem !important; max-width: 4.45rem !important; min-height: 2.2rem !important; margin: 0 0 .05rem !important; padding: 0 !important; overflow: visible !important; }
html:root body #relationship-avatar-pair { align-items: center !important; justify-content: end !important; overflow: visible !important; }
html:root body #relationship-avatar-pair > * { position: relative !important; display: block !important; overflow: visible !important; background: transparent !important; }

/* ------------[Редактор описания пространства]------------ // Ставит смайлик и кнопку разворачивания на одной правой оси и оставляет им место внутри поля. Модуль: «пространства». Часть 1/1 */
html:root body #space-about-panel .space-about-longform { position: relative; }
html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle { right: .78rem !important; }
html:root body #space-about-panel .space-about-details-emoji { right: .78rem !important; bottom: .78rem !important; margin: 0 !important; transform: none !important; }
html:root body #space-about-panel .space-about-longform > textarea { padding-right: 3.25rem !important; padding-bottom: 3rem !important; }
html:root body #space-about-panel .space-about-login-field label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem; border: 1px solid var(--vmesta-ui-line, var(--standard-line)); border-radius: .68rem; padding: 0 .55rem; background: var(--vmesta-ui-soft, var(--standard-panel-soft)); }
html:root body #space-about-panel .space-about-login-field label b { color: #2583ff; font-size: .72rem; }
html:root body #space-about-panel .space-about-login-field label input { border: 0 !important; padding-left: 0 !important; background: transparent !important; }
html:root body #space-about-panel .space-about-login-field > small { min-height: .75rem; color: var(--vmesta-ui-muted, var(--standard-text-secondary)); font-size: .49rem; line-height: 1.3; }

/* ------------[Единая синяя верификация]------------ // Делает подтверждение пользователя и пространства заметным и независимым от выбранной темы. Модуль: «верификация». Часть 1/1 */
html:root body :is(.profile-verification-card, .space-verification-card) { border-color: rgb(37 131 255 / .34) !important; background: color-mix(in srgb, #2583ff 7%, var(--vmesta-ui-surface, var(--standard-panel))) !important; }
html:root body :is(.verification-mark, .cover-account-verification-mark, .verification-own-mark) { width: 3.35rem !important; height: 3.35rem !important; flex: 0 0 3.35rem !important; border: 1px solid rgb(37 131 255 / .42) !important; border-radius: 1rem !important; background: rgb(37 131 255 / .13) !important; color: #2583ff !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 .55rem 1.25rem rgb(37 131 255 / .18) !important; }
html:root body :is(.verification-mark, .cover-account-verification-mark, .verification-own-mark)::before { background-color: #2583ff !important; }
html:root body :is(.verification-mark, .cover-account-verification-mark, .verification-own-mark) svg { width: 1.5rem !important; height: 1.5rem !important; color: #fff !important; }
html:root body .cover-account-verification[data-status="verified"] .cover-account-verification-mark { background: #2583ff !important; color: #fff !important; }

/* ------------[Тематические поверхности друзей и уведомлений]------------ // Возвращает читаемый контраст возможным друзьям, фильтрам и настройкам уведомлений в каждой теме. Модуль: «темы интерфейса». Часть 1/1 */
html:root body #recommended-friends-container { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-surface, var(--standard-panel)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; box-shadow: none !important; }
html:root body #recommended-friends-container > button { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; color: var(--vmesta-ui-primary, #2583ff) !important; }
html:root body #friends-modal > div { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-surface, var(--standard-panel)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body #friends-modal :is(#modal-friends-list, .modal-friends-filter-panel, .modal-friend-card) { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body #friends-modal :is(#modal-friends-search, .modal-friends-filter-panel input) { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-surface, var(--standard-panel)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body .entity-notification-modal > section { --entity-notification-blue: #2583ff; border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-surface, var(--standard-panel)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body .entity-notification-modal header { border-bottom: 1px solid var(--vmesta-ui-line, var(--standard-line)); background: color-mix(in srgb, var(--vmesta-ui-soft, var(--standard-panel-soft)) 84%, #2583ff 16%) !important; }
html:root body .entity-notification-modal header small { color: var(--entity-notification-blue) !important; }
html:root body .entity-notification-modal header strong,
html:root body .entity-notification-modal label strong { color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body .entity-notification-modal label small,
html:root body .entity-notification-modal footer { color: var(--vmesta-ui-muted, var(--standard-text-secondary)) !important; }
html:root body .entity-notification-modal > section > div > label:hover { background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; }

/* ------------[Перетаскивание фотографий]------------ // Показывает курсор захвата и отключает конфликтующее системное перетаскивание во всех полноэкранных просмотрщиках. Модуль: «просмотр медиа». Часть 1/1 */
#media-viewer-stage { cursor: grab !important; touch-action: none; }
#media-viewer-stage.is-dragging-photo { cursor: grabbing !important; }
#media-viewer-stage.is-dragging-photo #media-viewer-image { transition: none !important; }
:is(.shared-post-media-viewer, .messenger-photo-viewer) figure > img { cursor: grab; touch-action: none; user-select: none; transition: transform .12s ease; }
:is(.shared-post-media-viewer, .messenger-photo-viewer) figure > img.is-viewer-dragging { cursor: grabbing; transition: none; }

@media (max-width: 640px) {
    .space-rating-admin-tiers > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spaces-top-help-popover { position: fixed; right: .75rem; bottom: .75rem; left: .75rem; width: auto; }
}

.messenger-composer {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: end;
    gap: 0.3rem;
    margin: 0 1rem 1rem;
    padding: 0.38rem;
    border: 1px solid var(--msg-line);
    border-radius: 1.15rem;
    background: var(--msg-panel);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, #020617 8%, transparent);
    z-index: 20;
}

.messenger-pending-attachments {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.1rem 0.12rem 0.42rem;
    border-bottom: 1px solid var(--msg-line);
}

.messenger-pending-attachments > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.22rem;
}

.messenger-pending-attachments > header strong {
    color: var(--msg-text);
    font-size: 0.68rem;
}

.messenger-pending-attachments > header strong span {
    color: var(--msg-accent);
}

.messenger-pending-attachments > header button {
    border: 0;
    background: transparent;
    color: var(--msg-muted);
    font-size: 0.62rem;
    cursor: pointer;
}

.messenger-pending-attachments > div {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.08rem 0.12rem 0.15rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.messenger-pending-attachments article {
    position: relative;
    display: grid;
    width: 10.5rem;
    min-width: 10.5rem;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    border: 1px solid var(--msg-line);
    border-radius: 0.78rem;
    background: var(--msg-bg);
    padding: 0.35rem 1.7rem 0.35rem 0.35rem;
}

.messenger-pending-attachments article > img,
.messenger-pending-attachments article > video,
.messenger-pending-file-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 0.58rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    object-fit: cover;
}

.messenger-pending-file-icon .messenger-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.messenger-pending-attachments article > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.messenger-pending-attachments article strong,
.messenger-pending-attachments article small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-pending-attachments article strong { color: var(--msg-text); font-size: 0.64rem; }
.messenger-pending-attachments article small { color: var(--msg-muted); font-size: 0.54rem; }

.messenger-pending-attachments article > button {
    position: absolute;
    top: 0.28rem;
    right: 0.28rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 0;
    border-radius: 0.42rem;
    background: color-mix(in srgb, var(--msg-panel-strong), transparent 4%);
    color: var(--msg-muted);
    cursor: pointer;
}

.messenger-pending-attachments article > button .messenger-icon { width: 0.78rem; height: 0.78rem; }

.messenger-scroll-tools {
    position: absolute;
    right: 1.25rem;
    bottom: 5.35rem;
    z-index: 19;
    display: grid;
    gap: 0.38rem;
}

.messenger-conversation.has-pending-attachments .messenger-scroll-tools {
    bottom: 10.6rem;
}

.messenger-scroll-tools > button {
    position: relative;
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border: 1px solid var(--msg-line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--msg-panel) 94%, transparent);
    color: var(--msg-accent);
    box-shadow: 0 0.7rem 1.8rem rgb(2 6 23 / 0.2);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.messenger-scroll-tools > button.hidden {
    display: none;
}

.messenger-scroll-tools > button b {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    min-width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border: 2px solid var(--msg-bg);
    border-radius: 999px;
    background: var(--msg-accent);
    color: #fff;
    padding: 0 0.25rem;
    font-size: 0.56rem;
}

.messenger-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 89000;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
    background: rgb(2 6 23 / 0.7);
    backdrop-filter: blur(12px);
    overscroll-behavior: none;
}

.messenger-confirm-modal > section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(24rem, calc(100vw - 2rem));
    border: 0;
    border-radius: 1.2rem;
    background: var(--msg-panel);
    color: var(--msg-text);
    padding: 1.15rem;
    text-align: center;
    box-shadow: 0 1.7rem 4.5rem rgb(2 6 23 / 0.38);
}

.messenger-confirm-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto 0.8rem;
    place-items: center;
    border-radius: 0.85rem;
    background: rgb(239 68 68 / 0.12);
    color: #ef4444;
}

.messenger-confirm-modal .messenger-kicker { display: block; width: 100%; text-align: center; }
.messenger-confirm-modal h2 { width: 100%; margin: 0.18rem 0 0.45rem; text-align: center; font-size: 1.05rem; }
.messenger-confirm-modal p { width: 100%; max-width: 21rem; margin: 0 auto; color: var(--msg-muted); text-align: center; font-size: 0.72rem; line-height: 1.55; }
.messenger-delete-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .6rem;
    margin-top: 1rem;
}
.messenger-delete-scope > button {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    border: 0;
    border-radius: .9rem;
    background: var(--msg-bg);
    color: var(--msg-muted);
    padding: .62rem .7rem;
    text-align: left;
    font: inherit;
    font-size: .67rem;
    font-weight: 850;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.messenger-delete-scope > button:hover { color: var(--msg-text); background: var(--msg-accent-soft); transform: translateY(-1px); }
.messenger-delete-scope > button > i {
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border: 2px solid color-mix(in srgb, var(--msg-muted) 55%, transparent);
    border-radius: 999px;
    background: var(--msg-panel);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.messenger-delete-scope > button > i::after {
    content: '';
    position: absolute;
    inset: .38rem;
    border-radius: inherit;
    background: #ef4444;
    opacity: 0;
    transform: scale(.35);
    transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .25, 1);
}
.messenger-delete-scope > button.is-active { color: var(--msg-text); background: color-mix(in srgb, #ef4444 10%, var(--msg-bg)); box-shadow: inset 0 0 0 1px rgb(239 68 68 / .22); }
.messenger-delete-scope > button.is-active > i {
    border-color: #ef4444;
    box-shadow: 0 0 0 .2rem rgb(239 68 68 / 10%);
}
.messenger-delete-scope > button.is-active > i::after { opacity: 1; transform: scale(1); }
.messenger-delete-scope > button:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}
.messenger-delete-scope > button:disabled:hover { color: var(--msg-muted); transform: none; }
.messenger-confirm-modal > section > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1rem; }
.messenger-confirm-modal > section > div:last-child button { display: inline-flex; min-height: 2.45rem; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--msg-line); border-radius: 0.75rem; background: var(--msg-bg); color: var(--msg-text); padding: 0.55rem 0.8rem; font: inherit; font-size: 0.7rem; font-weight: 850; cursor: pointer; }
.messenger-confirm-modal > section > div:last-child button.is-danger { border-color: rgb(239 68 68 / 0.35); background: #ef4444; color: #fff; }

@media (max-width: 30rem) {
    .messenger-delete-scope { grid-template-columns: 1fr; gap: .45rem; }
    .messenger-confirm-modal > section > div:last-child button { flex: 0 1 auto; }
    .messenger-confirm-modal > section > div:last-child button:first-child { flex-basis: auto; }
}

.messenger-composer textarea {
    width: 100%;
    min-height: 2.35rem;
    max-height: 7.5rem;
    padding: 0.58rem 0.35rem;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    background: transparent;
    color: var(--msg-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

.messenger-attach-trigger,
.messenger-emoji-button,
.messenger-voice-button,
.messenger-send-button {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 0;
    border-radius: 0.82rem;
    background: transparent;
    color: var(--msg-muted);
    cursor: pointer;
    transition: 150ms ease;
}

.messenger-attach-trigger:hover,
.messenger-emoji-button:hover,
.messenger-voice-button:hover {
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

.messenger-send-button {
    background: var(--msg-accent);
    color: white;
}

.messenger-attach-wrap {
    position: relative;
}

.messenger-attach-menu {
    position: absolute;
    z-index: 70;
    left: 0;
    bottom: calc(100% + 0.55rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
    width: 18rem;
    padding: 0.45rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem;
    background: var(--msg-bg);
    box-shadow: 0 1rem 3rem color-mix(in srgb, #020617 25%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.4rem);
    transition: 150ms ease;
}

.messenger-attach-wrap:hover .messenger-attach-menu,
.messenger-attach-wrap:focus-within .messenger-attach-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.messenger-attach-menu button {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem;
    border: 0;
    border-radius: 0.68rem;
    background: transparent;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
}

.messenger-attach-menu button:hover {
    background: var(--msg-accent-soft);
}

.messenger-attach-menu i {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-style: normal;
}

.messenger-attach-menu small {
    grid-column: 2;
    margin-top: -0.4rem;
    color: var(--msg-muted);
    font-size: 0.48rem;
    text-transform: uppercase;
}

.messenger-composer .emoji-picker {
    max-width: min(25rem, calc(100vw - 2rem));
}

.messenger-side-panel {
    padding: 0.8rem;
    overflow-y: auto;
    border-left: 1px solid var(--msg-line);
    scrollbar-width: thin;
    scrollbar-color: var(--msg-line) transparent;
}

.messenger-side-section {
    padding: 0.82rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--msg-panel) 88%, var(--msg-accent) 12%);
}

.messenger-side-section + .messenger-side-section {
    margin-top: 0.72rem;
}

.messenger-side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.messenger-side-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.3rem;
    padding: 0.42rem 0.62rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--msg-muted);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.messenger-side-nav button:hover,
.messenger-side-nav button.is-active {
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}

.messenger-side-nav b {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-text) 7%, transparent);
    font-size: 0.62rem;
}

.messenger-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--msg-line);
}

.messenger-side-title h2 {
    font-size: 1rem;
}

.messenger-side-title > span {
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.55rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-size: 0.65rem;
    font-weight: 900;
}

.messenger-recent-list {
    padding-top: 0.4rem;
}

.messenger-recent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 0.8rem;
}

.messenger-recent:hover,
.messenger-recent.is-active {
    background: var(--msg-accent-soft);
}

.messenger-recent > button:first-child {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.36rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messenger-recent > button:first-child > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.messenger-recent strong,
.messenger-recent small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-recent strong {
    font-size: 0.7rem;
}

.messenger-recent small {
    margin-top: 0.15rem;
    color: var(--msg-muted);
    font-size: 0.58rem;
}

.messenger-recent > button:last-child {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.3rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--msg-muted);
    opacity: 0;
    cursor: pointer;
}

.messenger-recent:hover > button:last-child {
    opacity: 1;
}

.messenger-recent > button:last-child:hover {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}

.messenger-recent > button:last-child .messenger-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.messenger-empty,
.messenger-loading {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    color: var(--msg-muted);
    text-align: center;
    font-size: 0.72rem;
}

.messenger-empty strong {
    color: var(--msg-text);
    font-size: 0.8rem;
}

.messenger-empty.is-compact {
    min-height: 5rem;
}

.messenger-empty-state .messenger-icon {
    width: 2.15rem;
    height: 2.15rem;
    margin-bottom: 0.35rem;
    padding: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--msg-line) 55%, transparent);
    border-radius: 0.75rem;
    background: transparent;
    color: var(--msg-accent);
    opacity: 0.68;
}

.messenger-chat-list > .messenger-empty-state {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    background: transparent;
}

.messenger-empty-state.is-compact {
    min-height: 7.5rem;
    padding-inline: 0.25rem;
}

.messenger-empty-state.is-compact .messenger-icon {
    width: 1.85rem;
    height: 1.85rem;
}

.messenger-loading {
    height: min(52rem, calc(100vh - 7.5rem));
    border: 0;
    border-radius: 1.5rem;
    background: var(--msg-panel);
}

.messenger-loading > strong { color: var(--msg-text); font-size: .82rem; }
.messenger-loading > small { max-width: 18rem; color: var(--msg-muted); font-size: .62rem; line-height: 1.45; }
.messenger-loading-orbit {
    position: relative;
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: .25rem;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 38%, transparent);
    border-radius: 50%;
    animation: messenger-spin 1.35s linear infinite;
}
.messenger-loading-orbit::before { content: 'V'; position: absolute; inset: .55rem; display: grid; place-items: center; border-radius: 50%; background: var(--msg-accent-soft); color: var(--msg-accent); font-size: .62rem; font-weight: 950; }
.messenger-loading-orbit > i { position: absolute; top: -.18rem; left: 50%; width: .46rem; height: .46rem; border-radius: 50%; background: var(--msg-accent); box-shadow: 0 0 .65rem color-mix(in srgb, var(--msg-accent) 75%, transparent); transform: translateX(-50%); }

@keyframes messenger-spin { to { transform: rotate(360deg); } }

.messenger-new-modal {
    position: fixed;
    z-index: 2600;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: color-mix(in srgb, #020617 68%, transparent);
    backdrop-filter: blur(0.35rem);
}

.messenger-new-modal.hidden {
    display: none !important;
}

.messenger-new-modal > section {
    width: min(30rem, 100%);
    max-height: min(42rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid var(--msg-line, rgba(148, 163, 184, 0.25));
    border-radius: 1.35rem;
    background: var(--msg-bg, #fff);
    color: var(--msg-text, #1f2937);
    box-shadow: 0 2rem 6rem rgba(2, 6, 23, 0.35);
}

.messenger-new-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--msg-line, rgba(148, 163, 184, 0.25));
}

.messenger-new-modal header > button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 0.8rem;
    background: var(--msg-accent-soft, rgba(59, 130, 246, 0.1));
    color: var(--msg-muted, #64748b);
    cursor: pointer;
}

.messenger-new-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--msg-line, rgba(148, 163, 184, 0.25));
}

.messenger-new-tabs button {
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--msg-muted, #64748b);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.messenger-new-tabs button.is-active {
    background: var(--msg-accent-soft, rgba(59, 130, 246, 0.1));
    color: var(--msg-accent, #3b82f6);
}

.messenger-new-tabs small {
    margin-left: 0.2rem;
    font-size: 0.48rem;
    text-transform: uppercase;
}

.messenger-new-list {
    max-height: 30rem;
    overflow-y: auto;
    padding: 0.6rem;
}

.messenger-new-list > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem;
    border: 0;
    border-radius: 0.85rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messenger-new-list > button:hover {
    background: var(--msg-accent-soft, rgba(59, 130, 246, 0.1));
}

.messenger-new-list > button > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.messenger-new-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}

.messenger-new-list small {
    margin-top: 0.18rem;
    color: var(--msg-muted, #64748b);
    font-size: 0.65rem;
}

.messenger-new-list > button > .messenger-icon {
    color: var(--msg-accent, #3b82f6);
}

@media (max-width: 1180px) {
    .messenger-shell {
        display: block;
    }
}

@media (max-width: 920px) {
    .messenger-side-panel {
        display: none;
    }
}

@media (min-width: 1024px) {
    body.messages-route #profile-right-rail,
    body.messages-route #messages-side-root {
        display: block !important;
    }

    #messages-side-root .messenger-side-panel {
        display: block;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }
}

@media (max-width: 767px) {
    body.messages-route #profile-left-rail {
        display: none !important;
    }

    body.messages-route #content-main {
        width: 100% !important;
    }

    .messenger-shell {
        display: block;
        height: calc(100dvh - 4.25rem);
        min-height: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .messenger-dialogs-panel,
    .messenger-conversation {
        height: 100%;
    }

    .messenger-shell:not(.has-active-chat) .messenger-conversation,
    .messenger-shell.has-active-chat .messenger-dialogs-panel {
        display: none;
    }

    .messenger-conversation-header,
    .messenger-main-header {
        min-height: 4.65rem;
        padding: 0.75rem;
    }

    .messenger-message-stream {
        padding-inline: 0.75rem;
    }

    .messenger-bubble {
        max-width: 88%;
    }

    .messenger-composer {
        margin: 0 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .messenger-voice-button {
        display: none;
    }

    .messenger-composer .emoji-picker {
        position: fixed !important;
        right: 0.5rem !important;
        bottom: 4.8rem !important;
        left: 0.5rem !important;
        width: auto !important;
    }

    .messenger-chat-menu {
        position: fixed;
        top: auto !important;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.animate-fade-in {
  animation: postAppear 0.4s ease-out forwards;
}
@keyframes postAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
.replies-group {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}
.replies-group.is-visible {
  max-height: 5000px;
  opacity: 1;
  transform: scale(1) translateY(0);
}
.dark .replies-group {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.replies-group.is-active {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin-top: 12px;
  margin-bottom: 8px;
}
#viewer-comments-count {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}
.edit-preview-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.edit-preview-container .delete-preview-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: #ef4444;
  color: white;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
.edit-preview-container .delete-preview-btn:hover {
  background-color: #dc2626;
  transform: scale(1.1);
}
@layer utilities {
  @keyframes highlight-fade {
    0% {
      background-color: color-mix(in srgb, var(--color-dynamic), transparent 75%);
      box-shadow: 0 0 20px 2px color-mix(in srgb, var(--color-dynamic), transparent 70%);
    }
    20% {
      background-color: color-mix(in srgb, var(--color-dynamic), transparent 75%);
      box-shadow: 0 0 30px 5px color-mix(in srgb, var(--color-dynamic), transparent 60%);
    }
    100% {
      background-color: color-mix(in srgb, var(--color-dynamic), transparent 100%);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dynamic), transparent 100%);
    }
  }
  .animate-highlight {
    animation: highlight-fade 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}
.highlight-comment {
  position: relative;
  z-index: 10;
  isolation: isolate;
  border-left: 5px solid var(--color-dynamic) !important;
  border-radius: inherit !important;
  transition: border-left-color 0.5s ease;
}
.post-item {
  position: relative !important;
}
.pin-ribbon {
  display: flex;
  position: absolute;
  top: -1px;
  left: auto !important;
  right: 52px !important;
  width: 26px;
  height: 40px;
  background: linear-gradient(180deg, var(--color-dynamic) 0%, var(--color-dynamic-secondary) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
  align-items: center;
  justify-content: center;
  z-index: 20;
  will-change: transform, opacity;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 5px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 5px color-mix(in srgb, var(--color-dynamic), transparent 70%);
  }
}
.post-item.is-pinned .pin-ribbon {
  display: flex !important;
  animation: pinSpring 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pinSpring {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  60% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rocket-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
  }
}
.pin-icon {
  font-size: 12px;
  margin-top: -5px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  animation: rocket-glow 2s infinite ease-in-out;
}
@keyframes pin-soft-pulse {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}
html.page-scroll-locked, body.page-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.page-scroll-locked:not(.page-scroll-locked-soft) {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
html.page-scroll-locked-soft, body.page-scroll-locked-soft {
  position: static !important;
  width: auto;
  scrollbar-gutter: stable;
}
#post-viewer {
  overscroll-behavior: none;
}
#post-viewer-panel, #viewer-sidebar, #viewer-sidebar .overflow-y-auto {
  overscroll-behavior: contain;
}
#viewer-sidebar .overflow-y-auto {
  touch-action: pan-y;
}
.media-viewer-layout {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  background: transparent;
  transition: background-color 560ms cubic-bezier(.22, 1, .36, 1), border-color 560ms cubic-bezier(.22, 1, .36, 1), box-shadow 560ms cubic-bezier(.22, 1, .36, 1);
}
.media-viewer-photo-pane {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  transition: flex-basis 560ms cubic-bezier(.22, 1, .36, 1), padding 560ms cubic-bezier(.22, 1, .36, 1), background-color 560ms cubic-bezier(.22, 1, .36, 1);
}
.media-viewer-post-slot {
  position: relative;
  z-index: 1;
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4rem);
  transition: flex-basis 560ms cubic-bezier(.22, 1, .36, 1), width 560ms cubic-bezier(.22, 1, .36, 1), max-width 560ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease 80ms, transform 560ms cubic-bezier(.22, 1, .36, 1);
}
#media-viewer.is-post-expanded .media-viewer-layout {
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(2 6 23 / 0.72);
  box-shadow: 0 32px 90px rgb(0 0 0 / 0.48);
}
#media-viewer.is-post-expanded .media-viewer-photo-pane {
  padding: 1rem;
  background: rgb(2 6 23 / 0.54);
}
#media-viewer.is-post-expanded .media-viewer-post-slot {
  flex-basis: clamp(24rem, 28vw, 31rem);
  width: clamp(24rem, 28vw, 31rem);
  max-width: clamp(24rem, 28vw, 31rem);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.media-viewer-post-slot #viewer-sidebar {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  border-top: 0;
  border-left-width: 1px;
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6) 18%, rgb(226 232 240));
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 3%, white);
  }
  box-shadow: -20px 0 45px rgb(0 0 0 / 0.16);
}
.media-viewer-post-slot #viewer-comments-list {
  min-height: 0;
  overflow-y: auto;
}
.media-viewer-post-slot #viewer-form-container {
  flex: none;
}
.dark .media-viewer-post-slot #viewer-sidebar {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6) 22%, rgb(30 41 59));
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 5%, rgb(2 6 23));
  }
}
#media-viewer-toolbar {
  transition: left 560ms cubic-bezier(.22, 1, .36, 1), transform 300ms ease;
}
@media (min-width: 768px) {
  #media-viewer.is-post-expanded #media-viewer-toolbar {
    left: calc(50% - min(15.5rem, 14vw));
  }
}
@media (max-width: 767px) {
  #media-viewer.is-post-expanded #media-viewer-panel {
    padding: 4.5rem 0.75rem 5.5rem !important;
  }
  .media-viewer-layout {
    flex-direction: column;
  }
  .media-viewer-post-slot {
    flex-basis: 0;
    width: 100%;
    max-width: none;
    height: 0;
    max-height: 0;
    transform: translateY(-2rem);
    transition: flex-basis 560ms cubic-bezier(.22, 1, .36, 1), height 560ms cubic-bezier(.22, 1, .36, 1), max-height 560ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease 80ms, transform 560ms cubic-bezier(.22, 1, .36, 1);
  }
  #media-viewer.is-post-expanded .media-viewer-photo-pane {
    padding: 0.5rem;
  }
  #media-viewer.is-post-expanded .media-viewer-post-slot {
    flex-basis: 46%;
    width: 100%;
    max-width: none;
    height: 46%;
    max-height: 46%;
    transform: translateY(0);
  }
  .media-viewer-post-slot #viewer-sidebar {
    width: 100% !important;
    min-width: 0;
    border-top-width: 1px;
    border-left: 0;
    border-radius: 0 0 1.4rem 1.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-viewer-layout, .media-viewer-photo-pane, .media-viewer-post-slot, #media-viewer-toolbar {
    transition-duration: 1ms !important;
  }
}
.post-content-text.is-editing, .post-content-text .edit-wrapper {
  white-space: normal;
}
.post-content-text .edit-wrapper textarea {
  white-space: pre-wrap;
}
#delete-modal {
  background: rgba(2, 6, 23, 0.76);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (max-width: 639px) {
  .photos-toolbar {
    align-items: stretch;
  }
  .photos-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
#site-header {
  height: 3.5rem;
  transform: translateZ(0);
}
#media-viewer {
  z-index: 60000 !important;
  --media-viewer-bg: rgb(2 6 23 / 0.96);
  --media-viewer-surface: rgb(15 23 42 / 0.78);
  --media-viewer-photo: rgb(2 6 23 / 0.82);
  --media-viewer-control: rgb(15 23 42 / 0.84);
  --media-viewer-border: rgb(148 163 184 / 0.24);
  background: var(--media-viewer-bg) !important;
}
@supports (color: color-mix(in lab, red, red)) {
  #media-viewer {
    --media-viewer-bg: color-mix(in srgb, var(--color-dynamic, #3b82f6) 13%, rgb(2 6 23) 87%);
    --media-viewer-surface: color-mix(in srgb, var(--color-dynamic, #3b82f6) 10%, rgb(15 23 42 / 0.9));
    --media-viewer-photo: color-mix(in srgb, var(--color-dynamic, #3b82f6) 7%, rgb(2 6 23 / 0.9));
    --media-viewer-control: color-mix(in srgb, var(--color-dynamic, #3b82f6) 16%, rgb(15 23 42 / 0.9));
    --media-viewer-border: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 62%);
  }
}
#media-viewer .media-viewer-layout, #media-viewer.is-post-expanded .media-viewer-layout {
  border-color: var(--media-viewer-border);
  background: var(--media-viewer-surface);
  box-shadow: 0 32px 90px rgb(0 0 0 / 0.48);
}
#media-viewer .media-viewer-photo-pane, #media-viewer.is-post-expanded .media-viewer-photo-pane {
  background: var(--media-viewer-photo);
}
#media-viewer-close, #media-viewer-prev, #media-viewer-next, #media-viewer-toolbar {
  border-color: var(--media-viewer-border) !important;
  background: var(--media-viewer-control) !important;
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.28);
}
#media-viewer-close:hover, #media-viewer-prev:hover, #media-viewer-next:hover {
  border-color: var(--color-dynamic, #3b82f6) !important;
  background: var(--color-dynamic, #3b82f6) !important;
  color: white !important;
}
#media-viewer-open-post {
  background: var(--color-dynamic, #3b82f6) !important;
  box-shadow: 0 10px 28px -16px var(--color-dynamic, #3b82f6);
}
html.adaptive-theme #post-viewer {
  background: rgb(2 6 23 / 0.86) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 12%, rgb(2 6 23 / 0.9)) !important;
  }
}
html.adaptive-theme #viewer-media-container {
  background: var(--adaptive-media-surface) !important;
}
.album-viewer-modal-shell {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 14%, rgb(15 23 42 / 0.72));
  }
}
.album-viewer-panel {
  border-color: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 70%) !important;
  }
  background: rgb(248 250 252) !important;
  color: rgb(15 23 42) !important;
  box-shadow: 0 36px 90px -34px var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 36px 90px -34px color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 68%);
  }
}
.album-viewer-header {
  border-color: rgb(226 232 240 / 0.92) !important;
  background: rgb(255 255 255 / 0.9) !important;
}
.album-viewer-body {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 5%, rgb(241 245 249));
  }
}
#album-viewer-title {
  color: rgb(15 23 42) !important;
}
#album-viewer-dates {
  color: rgb(100 116 139) !important;
}
.dark .album-viewer-panel {
  border-color: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 66%) !important;
  }
  background: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
}
.dark .album-viewer-header {
  border-color: rgb(51 65 85 / 0.9) !important;
  background: rgb(15 23 42 / 0.92) !important;
}
.dark .album-viewer-body {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 8%, rgb(2 6 23));
  }
}
.dark #album-viewer-title {
  color: rgb(248 250 252) !important;
}
.dark #album-viewer-dates {
  color: rgb(148 163 184) !important;
}
html.adaptive-theme .album-viewer-panel, html.adaptive-theme .album-viewer-header, html.adaptive-theme .album-share-panel {
  border-color: var(--adaptive-border) !important;
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface), transparent 3%) !important;
  }
}
html.adaptive-theme .album-viewer-body {
  background: var(--adaptive-background) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-background), var(--color-dynamic) 4%) !important;
  }
}
.album-viewer-close {
  border: 1px solid rgb(148 163 184 / 0.28);
  background: rgb(255 255 255 / 0.78);
  color: rgb(71 85 105);
}
.album-viewer-close:hover {
  border-color: var(--color-dynamic, #3b82f6);
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.dark .album-viewer-close {
  background: rgb(2 6 23 / 0.68);
  color: rgb(203 213 225);
}
.album-header-action, .album-share-button {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 91%);
  }
  color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 35%);
  }
}
.album-share-button {
  border-color: var(--color-dynamic, #3b82f6);
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.album-share-button:hover {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%);
  }
}
.dark .album-header-action {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 82%);
  }
  color: rgb(226 232 240);
}
.album-edit-toolbar-shell {
  border-color: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%) !important;
  }
  background: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 94%) !important;
  }
}
.dark .album-edit-toolbar-shell {
  background: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 88%) !important;
  }
}
.album-edit-tool {
  color: rgb(71 85 105);
}
.album-edit-tool:hover:not(:disabled) {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
  }
  color: var(--color-dynamic, #3b82f6);
}
.dark .album-edit-tool {
  color: rgb(203 213 225);
}
.album-edit-save {
  background: var(--color-dynamic, #3b82f6);
  color: white !important;
}
.album-edit-save:hover:not(:disabled) {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%);
  }
  color: white;
}
.album-edit-hint {
  color: rgb(148 163 184);
}
.album-card-kebab {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 42%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 38%);
  }
}
.album-card-menu, .album-action-menu {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 95%);
  }
  color: rgb(51 65 85);
  box-shadow: 0 24px 58px -24px var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 58px -24px color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 70%);
  }
}
.album-card-menu button:hover, .album-action-menu button:hover {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
  }
}
.album-action-menu button strong {
  color: rgb(30 41 59);
}
.album-action-menu button small {
  color: rgb(100 116 139);
}
.dark .album-card-menu, .dark .album-action-menu {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 88%);
  }
  color: rgb(226 232 240);
}
.dark .album-action-menu button strong {
  color: white;
}
.dark .album-action-menu button small {
  color: rgb(148 163 184);
}
html.adaptive-theme .album-card-menu, html.adaptive-theme .album-action-menu {
  border-color: var(--adaptive-border);
  background: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface), transparent 2%);
  }
}
.album-photo-wall.is-single, .album-photo-wall.is-pair {
  grid-auto-flow: row;
  grid-auto-rows: auto;
  justify-content: center;
  align-content: center;
  min-height: min(60vh, 44rem);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding: clamp(0.5rem, 2vw, 2rem);
}
.album-photo-wall.is-single {
  grid-template-columns: minmax(0, min(100%, 56rem)) !important;
}
.album-photo-wall.is-pair {
  grid-template-columns: repeat(2, minmax(0, 36rem)) !important;
}
.album-photo-tile {
  cursor: zoom-in;
  border: 1px solid var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
  }
  border-radius: 1rem;
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 94%);
  }
  box-shadow: 0 18px 45px -34px rgb(15 23 42 / 0.72);
}
.dark .album-photo-tile {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(2 6 23) 90%);
  }
}
.album-photo-tile.is-editing {
  cursor: pointer;
}
.album-photo-wall.is-single .album-photo-tile img {
  width: 100%;
  height: auto;
  min-height: clamp(18rem, 42vh, 34rem);
  max-height: 68vh;
  object-fit: contain;
}
.album-photo-wall.is-pair .album-photo-tile img {
  width: 100%;
  height: clamp(22rem, 56vh, 42rem);
  min-height: 0;
  object-fit: contain;
}
.album-photo-wall.is-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#album-viewer-empty > div > div {
  background: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%) !important;
  }
  color: var(--color-dynamic, #3b82f6) !important;
}
#album-viewer-empty p {
  color: rgb(100 116 139) !important;
}
#album-share-modal {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 12%, rgb(15 23 42 / 0.74));
  }
}
.album-share-panel {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
  }
  background: rgb(255 255 255 / 0.96);
  color: rgb(15 23 42);
}
.dark .album-share-panel {
  background: rgb(15 23 42 / 0.97);
  color: rgb(248 250 252);
}
.album-share-close, .album-share-system {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 75%);
  }
  color: rgb(71 85 105);
}
.dark .album-share-close, .dark .album-share-system {
  color: rgb(203 213 225);
}
.album-share-close:hover, .album-share-system:hover {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
  }
  color: var(--color-dynamic, #3b82f6);
}
.album-share-input {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 70%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 95%);
  }
  color: rgb(51 65 85);
}
.dark .album-share-input {
  background: rgb(2 6 23 / 0.68);
  color: rgb(226 232 240);
}
@media (min-width: 640px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1500px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .album-photo-wall.is-pair {
    grid-template-columns: 1fr !important;
  }
  .album-photo-wall.is-pair .album-photo-tile img {
    height: auto;
    min-height: 16rem;
    max-height: 62vh;
  }
}
html.adaptive-theme {
  --adaptive-text-strong: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-text-strong: color-mix(in srgb, var(--color-dynamic), rgb(15 23 42) 20%);
  }
  --adaptive-text-muted: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-text-muted: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 50%);
  }
  --adaptive-soft-tint: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-soft-tint: color-mix(in srgb, var(--color-dynamic), transparent 88%);
  }
  --adaptive-card-tint: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
  --adaptive-card-tint: color-mix(in srgb, var(--adaptive-surface) 86%, var(--color-dynamic) 14%);
  }
  --adaptive-card-tint-strong: var(--adaptive-surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-card-tint-strong: color-mix(in srgb, var(--adaptive-surface-2) 72%, var(--color-dynamic) 28%);
  }
  --adaptive-media-surface: var(--adaptive-card-tint-strong);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-media-surface: color-mix(in srgb, var(--adaptive-card-tint) 58%, var(--adaptive-card-tint-strong) 42%);
  }
}
html.adaptive-theme.dark {
  --adaptive-text-strong: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-text-strong: color-mix(in srgb, var(--color-dynamic), white 18%);
  }
  --adaptive-text-muted: var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-text-muted: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 42%);
  }
  --adaptive-card-tint: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-card-tint: color-mix(in srgb, var(--adaptive-surface) 88%, var(--color-dynamic) 12%);
  }
  --adaptive-card-tint-strong: var(--adaptive-surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --adaptive-card-tint-strong: color-mix(in srgb, var(--adaptive-surface-2) 70%, var(--color-dynamic) 30%);
  }
}
.project-access-modal {
  position: fixed;
  inset: 0;
  z-index: 22000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(15 23 42 / 0.62);
  backdrop-filter: blur(16px);
}
.project-access-panel {
  width: min(31rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 58%);
  }
  border-radius: 1.45rem;
  background: white;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, white 94%, var(--color-dynamic, #2563eb) 6%);
  }
  box-shadow: 0 28px 80px rgb(15 23 42 / 0.28);
}
.dark .project-access-panel {
  background: rgb(15 23 42);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, rgb(15 23 42) 90%, var(--color-dynamic, #2563eb) 10%);
  }
  box-shadow: 0 28px 80px rgb(0 0 0 / 0.46);
}
.project-access-panel header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%);
  }
  padding: 1rem 1.2rem;
}
.project-access-panel header span, .project-command-field span {
  display: block;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(148 163 184) 48%);
  }
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.project-access-panel header strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 12%);
  }
  font-size: 1rem;
  font-weight: 950;
}
.dark .project-access-panel header strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 12%);
  }
}
.project-access-back, .project-access-close {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 999px;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 28%);
  }
  font-size: 1.35rem;
  font-weight: 950;
}
.project-access-back:hover, .project-access-close:hover {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  }
}
.project-access-body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}
.project-access-role {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 4.2rem;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 68%);
  }
  border-radius: 1.25rem;
  background: white;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, white 88%, var(--color-dynamic, #2563eb) 12%);
  }
  padding: 0.95rem 1rem;
  text-align: left;
}
.dark .project-access-role {
  background: rgb(15 23 42);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, rgb(15 23 42) 84%, var(--color-dynamic, #2563eb) 16%);
  }
}
.project-access-role > span:last-child {
  display: block;
  min-width: 0;
}
.project-access-role strong, .project-access-role small {
  display: block;
  line-height: 1.25;
}
.project-access-role strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 14%);
  }
  font-size: 1rem;
  font-weight: 950;
}
.project-access-role small {
  margin-top: 0.3rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 46%);
  }
  font-size: 0.78rem;
  font-weight: 750;
}
.project-role-icon, .settings-profile-rank-icon {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 0.9rem;
}
.project-role-icon svg, .settings-profile-rank-icon svg, .project-rank-badge svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.project-rank-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}
.project-rank-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-profile-rank-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  padding: 0.65rem 0.9rem;
  text-align: left;
}
.settings-profile-rank-btn > span:last-child {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.12rem;
}
.settings-profile-rank-btn strong, .settings-profile-rank-btn small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.settings-profile-rank-btn strong {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 16%);
  }
  font-size: 0.72rem;
  font-weight: 950;
}
.settings-profile-rank-btn small {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 42%);
  }
  font-size: 0.68rem;
  font-weight: 750;
}
.profile-identifier-block {
  position: relative;
  padding-right: 1.65rem;
}
.profile-copy-login-btn {
  position: absolute;
  right: 0;
  bottom: -0.08rem;
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 0.4rem;
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 22%);
  }
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.profile-copy-login-btn:hover, .profile-copy-login-btn.is-copied {
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), white 8%);
  }
}
.profile-copy-login-btn svg {
  width: 0.78rem;
  height: 0.78rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
}
.project-command-field {
  display: grid;
  gap: 0.45rem;
}
.project-command-field input {
  width: 100%;
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 64%);
  }
  border-radius: 1rem;
  background: white;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, white 88%, var(--color-dynamic, #2563eb) 12%);
  }
  padding: 0.85rem 1rem;
  color: rgb(15 23 42);
  font-weight: 850;
  outline: none;
}
.dark .project-command-field input {
  background: rgb(15 23 42);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, rgb(15 23 42) 84%, var(--color-dynamic, #2563eb) 16%);
  }
  color: white;
}
.project-command-note {
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(100 116 139) 48%);
  }
  font-size: 0.75rem;
  line-height: 1.55;
}
.project-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.project-access-secondary, .project-access-primary {
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project-access-secondary {
  border: 1px solid var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 64%);
  }
  color: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #2563eb), rgb(15 23 42) 12%);
  }
}
html.adaptive-theme body, html.adaptive-theme #content-area, html.adaptive-theme main {
  color: var(--adaptive-text-strong);
}
html.adaptive-theme #user-name-title, html.adaptive-theme #main-profile-status, html.adaptive-theme #top-user-name, html.adaptive-theme .item-name, html.adaptive-theme .post-author, html.adaptive-theme .post-author-link, html.adaptive-theme .viewer-author-link, html.adaptive-theme .comment-author-link, html.adaptive-theme .comment-node strong, html.adaptive-theme .space-post-title, html.adaptive-theme .space-card-title, html.adaptive-theme .spaces-index-card strong, html.adaptive-theme #top-spaces-dropdown strong, html.adaptive-theme .space-about-card strong, html.adaptive-theme .space-about-card button, html.adaptive-theme .project-rank-badge, html.adaptive-theme .settings-profile-rank-btn strong {
  color: var(--adaptive-text-strong) !important;
}
html.adaptive-theme .post-author-link:hover, html.adaptive-theme .viewer-author-link:hover, html.adaptive-theme .comment-author-link:hover {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 12%) !important;
  }
}
html.adaptive-theme [class*="text-gray-300"], html.adaptive-theme [class*="text-gray-400"], html.adaptive-theme [class*="text-gray-500"], html.adaptive-theme [class*="text-slate-400"], html.adaptive-theme [class*="text-slate-500"], html.adaptive-theme .post-date, html.adaptive-theme .comment-node small, html.adaptive-theme .space-post-date, html.adaptive-theme .space-about-card > span, html.adaptive-theme .space-about-head p, html.adaptive-theme .settings-profile-rank-btn small, html.adaptive-theme #modal-user-rank {
  color: var(--adaptive-text-muted) !important;
}
html.adaptive-theme [class*="text-orange-"], html.adaptive-theme [class*="text-amber-"], html.adaptive-theme [class*="text-yellow-"], html.adaptive-theme [class*="hover:text-orange-"]:hover, html.adaptive-theme [class*="hover:text-amber-"]:hover, html.adaptive-theme [class*="hover:text-yellow-"]:hover {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme [class*="bg-orange-"], html.adaptive-theme [class*="bg-amber-"], html.adaptive-theme [class*="bg-yellow-"] {
  background-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 82%) !important;
  }
}
html.adaptive-theme [class*="border-orange-"], html.adaptive-theme [class*="border-amber-"], html.adaptive-theme [class*="border-yellow-"] {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 52%) !important;
  }
}
html.adaptive-theme .post-item, html.adaptive-theme .space-post, html.adaptive-theme .space-side-card, html.adaptive-theme .space-composer, html.adaptive-theme .space-switchboard, html.adaptive-theme .space-tabs, html.adaptive-theme .space-profile-photos-panel, html.adaptive-theme .space-profile-showcase-card, html.adaptive-theme .spaces-index-card, html.adaptive-theme #top-spaces-dropdown, html.adaptive-theme #post-viewer-panel, html.adaptive-theme #viewer-sidebar, html.adaptive-theme #viewer-comments-block, html.adaptive-theme .comment-dropdown, html.adaptive-theme .comment-form-container, html.adaptive-theme .space-about-panel, html.adaptive-theme .space-about-card, html.adaptive-theme .project-access-panel, html.adaptive-theme .project-access-role {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 56%) !important;
  }
  background-color: var(--adaptive-card-tint) !important;
  box-shadow: 0 20px 46px -34px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 46px -34px color-mix(in srgb, var(--color-dynamic), rgb(15 23 42) 52%);
  }
}
html.adaptive-theme .post-item, html.adaptive-theme .space-post, html.adaptive-theme .space-composer, html.adaptive-theme .space-profile-photos-panel, html.adaptive-theme .space-profile-showcase-card {
  padding: clamp(1rem, 1.8vw, 1.35rem) !important;
}
html.adaptive-theme .post-item + .post-item, html.adaptive-theme .space-post-list .space-post + .space-post {
  margin-top: 0.15rem;
}
html.adaptive-theme .post-item:hover, html.adaptive-theme .space-post:hover {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 34%) !important;
  }
  background-color: var(--adaptive-card-tint) !important;
}
html.adaptive-theme .spaces-index-card:hover, html.adaptive-theme .space-about-card:hover, html.adaptive-theme .project-access-role:hover {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 34%) !important;
  }
  background-color: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--adaptive-surface) 82%, var(--color-dynamic) 18%) !important;
  }
}
html.adaptive-theme .post-content-text, html.adaptive-theme .space-post-content, html.adaptive-theme .comment-node [id^="comment-text-"], html.adaptive-theme #viewer-caption, html.adaptive-theme #viewer-comments-list {
  color: var(--adaptive-text-strong) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--adaptive-text-strong), var(--adaptive-surface) 12%) !important;
  }
}
html.adaptive-theme .post-actions, html.adaptive-theme .space-post-footer, html.adaptive-theme #viewer-comments-block, html.adaptive-theme #viewer-form-container, html.adaptive-theme .space-about-footer, html.adaptive-theme .space-about-head, html.adaptive-theme #top-spaces-dropdown > div, html.adaptive-theme #top-spaces-dropdown .border-t {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 68%) !important;
  }
}
html.adaptive-theme .comment-node {
  border-radius: 1rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic), transparent 76%);
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 88%, var(--color-dynamic) 12%) !important;
  }
}
html.adaptive-theme .comment-node:hover {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 92%) !important;
  }
}
html.adaptive-theme .comment-like-btn, html.adaptive-theme .space-post-footer button, html.adaptive-theme .post-item .post-actions button, html.adaptive-theme .space-menu-manage, html.adaptive-theme #top-spaces-dropdown button, html.adaptive-theme .space-about-close, html.adaptive-theme .space-about-edit-button {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 34%) !important;
  }
}
html.adaptive-theme .comment-like-btn:hover, html.adaptive-theme .space-post-footer button:hover, html.adaptive-theme .post-item .post-actions button:hover, html.adaptive-theme .space-menu-manage:hover, html.adaptive-theme #top-spaces-dropdown button:hover, html.adaptive-theme .space-about-close:hover, html.adaptive-theme .space-about-edit-button:hover {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
  background-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-dynamic), transparent 86%) !important;
  }
}
html.adaptive-theme .post-item [data-post-vote], html.adaptive-theme .post-item button[onclick*="openPostViewer"], html.adaptive-theme .post-author-link, html.adaptive-theme .post-author-avatar, html.adaptive-theme .comment-like-btn, html.adaptive-theme .comment-like-btn > div {
  background: transparent !important;
  box-shadow: none !important;
}
html.adaptive-theme .post-item [data-post-vote]:hover, html.adaptive-theme .post-item button[onclick*="openPostViewer"]:hover, html.adaptive-theme .post-author-link:hover, html.adaptive-theme .post-author-avatar:hover, html.adaptive-theme .comment-like-btn:hover {
  background: transparent !important;
}
html.adaptive-theme .post-author-link {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
html.adaptive-theme .post-item [data-post-vote="like"]:hover, html.adaptive-theme .post-item [data-post-vote="like"].active, html.adaptive-theme #viewer-post-actions [data-post-vote="like"]:hover, html.adaptive-theme #viewer-post-actions [data-post-vote="like"].active, html.adaptive-theme .comment-like-btn:hover, html.adaptive-theme .comment-like-btn.active {
  color: var(--color-dynamic, rgb(59 130 246)) !important;
}
html.adaptive-theme .comment-like-btn:not(.active):not(:hover) {
  color: rgb(148 163 184) !important;
}
html.adaptive-theme .comment-like-btn:hover .count-num, html.adaptive-theme .comment-like-btn.active .count-num {
  color: var(--color-dynamic, rgb(59 130 246)) !important;
}
html.adaptive-theme .comment-form-container, html.adaptive-theme .space-comment-form .comment-form-container {
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 88%, var(--color-dynamic) 12%) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 62%) !important;
  }
}
html.adaptive-theme .comment-form-container:focus-within {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 22%) !important;
  }
  box-shadow: 0 0 0 3px var(--color-dynamic);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic), transparent 86%);
  }
}
html.adaptive-theme .comment-form-container textarea, html.adaptive-theme .comment-form-container input {
  color: var(--adaptive-text-strong) !important;
}
html.adaptive-theme .comment-form-container textarea::placeholder, html.adaptive-theme .comment-form-container input::placeholder {
  color: var(--adaptive-text-muted) !important;
}
html.adaptive-theme #top-spaces-dropdown {
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 94%, transparent) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 54%) !important;
  }
}
html.adaptive-theme #top-spaces-list {
  padding: 0.65rem !important;
}
html.adaptive-theme .space-menu-row {
  gap: 0.5rem;
  padding: 0.15rem 0;
}
html.adaptive-theme .space-menu-item {
  border: 1px solid transparent;
  border-radius: 1rem !important;
}
html.adaptive-theme .space-menu-item:hover {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 70%) !important;
  }
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 90%) !important;
  }
}
html.adaptive-theme .space-menu-create {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 56%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 88%, var(--color-dynamic) 12%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .space-manage-actions-menu {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 58%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 94%, transparent) !important;
  }
}
html.adaptive-theme .spaces-index-toolbar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.adaptive-theme .spaces-index-scope, html.adaptive-theme .spaces-index-view {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 64%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 90%, var(--color-dynamic) 10%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .spaces-index-kebab, html.adaptive-theme .spaces-index-menu {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 60%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 92%, transparent) !important;
  }
}
html.adaptive-theme .spaces-index-kebab {
  border-color: var(--color-dynamic) !important;
  background: var(--adaptive-surface) !important;
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 52%) !important;
    background: color-mix(in srgb, var(--adaptive-surface) 68%, var(--color-dynamic) 32%) !important;
    color: color-mix(in srgb, var(--color-dynamic), white 18%) !important;
  }
}
html.adaptive-theme .spaces-index-kebab:hover, html.adaptive-theme .spaces-index-kebab.is-active {
  background: var(--color-dynamic) !important;
  color: white !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 50%, var(--color-dynamic) 50%) !important;
  }
}
html.adaptive-theme .space-primary-button, html.adaptive-theme .space-about-footer button, html.adaptive-theme .project-access-primary, html.adaptive-theme .btn-publish, html.adaptive-theme #save-comment-btn {
  background: linear-gradient(135deg, var(--color-dynamic), var(--color-dynamic-secondary)) !important;
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 16%) !important;
  }
  color: white !important;
  box-shadow: 0 18px 34px -22px var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--color-dynamic), rgb(15 23 42) 44%) !important;
  }
}
html.adaptive-theme .space-about-panel {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(88vh, 54rem);
}
html.adaptive-theme .space-about-head, html.adaptive-theme .space-about-body, html.adaptive-theme .space-about-footer {
  padding-left: clamp(1.35rem, 3vw, 2rem);
  padding-right: clamp(1.35rem, 3vw, 2rem);
}
html.adaptive-theme .space-about-body {
  gap: 0.9rem 1rem;
}
html.adaptive-theme .space-about-card {
  padding: 1rem !important;
}
html.adaptive-theme .space-about-card strong, html.adaptive-theme .space-about-card button {
  display: block;
  margin-top: 0.35rem;
  line-height: 1.35;
}
html.adaptive-theme .space-about-quote {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 84%) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 38%) !important;
  }
}
html.adaptive-theme .space-about-quote-icon, html.adaptive-theme .project-role-icon, html.adaptive-theme .settings-profile-rank-icon {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 82%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .project-rank-badge, html.adaptive-theme .project-access-role {
  gap: 0.75rem !important;
}
html.adaptive-theme .project-rank-badge span, html.adaptive-theme .project-access-role small {
  white-space: normal !important;
}
html.adaptive-theme .project-access-role {
  min-height: 4.3rem;
  padding: 0.95rem 1rem !important;
  border-radius: 1.25rem !important;
}
html.adaptive-theme .project-access-role strong, html.adaptive-theme .project-access-role small {
  margin-top: 0 !important;
}
html.adaptive-theme .project-access-role small {
  margin-top: 0.3rem !important;
}
html.adaptive-theme .project-rank-badge {
  gap: 0.35rem !important;
  white-space: nowrap !important;
}
html.adaptive-theme .project-rank-badge span {
  white-space: nowrap !important;
}
html.adaptive-theme #settings-dropdown {
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 62%) !important;
  }
  background: var(--adaptive-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface) 94%, transparent) !important;
  }
}
html.adaptive-theme button[onclick*="toggleSettingsMenu"] {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 26%) !important;
  }
}
html.adaptive-theme button[onclick*="toggleSettingsMenu"]:hover, html.adaptive-theme #settings-dropdown button:hover, html.adaptive-theme .settings-profile-rank-btn:hover {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 88%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme .settings-profile-rank-btn {
  border-radius: 0.9rem !important;
  box-shadow: none !important;
}
html.adaptive-theme .settings-profile-rank-btn strong {
  color: var(--adaptive-text-strong) !important;
}
html.adaptive-theme .profile-copy-login-btn {
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), var(--adaptive-border) 32%) !important;
  }
}
html.adaptive-theme .profile-copy-login-btn svg {
  width: 0.78rem !important;
  height: 0.78rem !important;
}
html.adaptive-theme #viewer-comments-count, html.adaptive-theme [id^="comment-count-"], html.adaptive-theme .post-hashtag-chip, html.adaptive-theme .hashtag-filter-chip, html.adaptive-theme .space-tab-icon {
  background: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic), transparent 80%) !important;
  }
  border-color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 46%) !important;
  }
  color: var(--color-dynamic) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic), white 8%) !important;
  }
}
html.adaptive-theme input, html.adaptive-theme textarea, html.adaptive-theme select {
  caret-color: var(--color-dynamic);
}
@media (max-width: 640px) {
  html.adaptive-theme .space-about-panel {
    width: calc(100vw - 1rem);
    border-radius: 1.35rem !important;
  }
  html.adaptive-theme .post-item, html.adaptive-theme .space-post, html.adaptive-theme .space-composer, html.adaptive-theme .space-about-card {
    padding: 0.9rem !important;
  }
}
.avatar-edit-corner:not(.hidden) {
  display: flex;
}
.avatar-edit-corner:hover .avatar-edit-tooltip, .avatar-edit-corner:focus-visible .avatar-edit-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.avatar-library-card {
  transition: border-color 180ms ease, background-color 180ms ease;
}
#avatar-library-options {
  max-height: 12rem;
  opacity: 1;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 180ms ease, padding 240ms ease, margin 240ms ease;
}
#avatar-library-options.is-disabled {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  opacity: 1;
  pointer-events: none;
}
.avatar-target-option {
  border-color: rgb(226 232 240);
  background: rgba(255, 255, 255, 0.72);
  color: rgb(148 163 184);
}
.dark .avatar-target-option {
  border-color: rgb(51 65 85);
  background: rgba(15, 23, 42, 0.62);
  color: rgb(100 116 139);
}
.avatar-target-option.is-active {
  border-color: var(--color-dynamic, #2563eb);
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  }
  color: var(--color-dynamic, #2563eb);
  box-shadow: 0 8px 20px -14px var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 35%);
  }
}
.avatar-showcase-item {
  isolation: isolate;
}
.avatar-showcase-item.is-active {
  box-shadow: 0 0 0 2px var(--color-dynamic, #2563eb), 0 12px 24px -16px var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-dynamic, #2563eb), white 28%), 0 12px 24px -16px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 20%);
  }
}
.avatar-showcase-active-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: var(--color-dynamic, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), #020617 26%);
  }
  padding: 0.25rem 0.45rem;
  color: white;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.avatar-showcase-actions {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 4;
  display: flex;
  gap: 0.3rem;
  opacity: 1;
  transform: translateY(0.3rem);
  transition: opacity 180ms ease, transform 180ms ease;
}
.avatar-showcase-item:hover .avatar-showcase-actions, .avatar-showcase-item:focus-within .avatar-showcase-actions {
  opacity: 1;
  transform: translateY(0);
}
.avatar-showcase-actions button {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.65rem;
  background: rgba(2, 6, 23, 0.7);
  color: white;
  backdrop-filter: blur(10px);
  transition: background 160ms ease, transform 160ms ease;
}
.avatar-showcase-actions button:hover {
  background: var(--color-dynamic, #2563eb);
  transform: translateY(-1px);
}
.avatar-showcase-grid.is-collapsed .avatar-showcase-item:nth-of-type(n + 5) {
  display: none;
}
@media (hover: none) {
  .avatar-showcase-actions {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 767px) {
  .avatar-edit-corner {
    right: -0.35rem;
    bottom: -0.35rem;
    width: 2.25rem;
    height: 2.25rem;
  }
}
.post-media-grid {
  display: grid;
  width: 100%;
  min-height: 0;
  margin-top: 0.9rem;
  gap: 3px;
  overflow: hidden;
  border: 1px solid var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
  }
  border-radius: 18px;
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), #f8fafc 94%);
  }
}
.dark .post-media-grid {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), #020617 88%);
  }
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 74%);
  }
}
.post-media-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), #e2e8f0 92%);
  }
}
.dark .post-media-tile {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), #0f172a 86%);
  }
}
html.adaptive-theme .post-media-grid {
  border-color: var(--color-dynamic) !important;
  background: var(--adaptive-media-surface) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 66%) !important;
    background: color-mix(in srgb, var(--adaptive-media-surface) 72%, var(--adaptive-card-tint) 28%) !important;
  }
}
html.adaptive-theme .post-media-tile, html.adaptive-theme.dark .post-media-tile {
  background: var(--adaptive-media-surface) !important;
}
.post-media-content {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms ease;
}
.post-media-tile:hover .post-media-content {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.02);
}
.post-media-tile:focus-visible {
  outline: 3px solid var(--color-dynamic, #3b82f6);
  outline-offset: -3px;
  z-index: 2;
}
.post-media-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.65);
  color: white;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
}
.post-media-play-modern {
  isolation: isolate;
  width: 3rem;
  height: 3rem;
  border-color: color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #0d9488)) 58%, #fff 42%);
  background: color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #0d9488)) 76%, rgb(2 6 23 / .72));
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #0d9488)) 13%, transparent), 0 .7rem 1.8rem rgb(0 0 0 / .32);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease;
}
.post-media-play-modern > i {
  position: absolute;
  z-index: 0;
  inset: -.38rem;
  border: 1px dashed color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #0d9488)) 62%, transparent);
  border-radius: 50%;
  animation: galaxy-player-orbit 10s linear infinite;
}
.post-media-play-modern > svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  margin-left: .12rem;
  fill: #fff;
  stroke: #fff;
}
.post-media-tile:hover .post-media-play-modern { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 .42rem color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #0d9488)) 18%, transparent), 0 .85rem 2rem rgb(0 0 0 / .38); }
.post-media-grid-1 {
  max-height: 550px;
  grid-template-columns: minmax(0, 1fr);
}
.post-media-grid-1 .post-media-tile {
  min-height: clamp(260px, 48vw, 550px);
  max-height: 550px;
}
.post-media-grid-1 .post-media-content {
  object-fit: contain;
}
.post-media-grid-2 {
  height: clamp(280px, 48vw, 510px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-media-grid-3 {
  height: clamp(320px, 52vw, 540px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.post-media-grid-3 .post-media-tile:first-child {
  grid-row: 1 / 3;
}
.post-media-grid-4 {
  height: clamp(340px, 54vw, 560px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.post-media-grid-5 {
  height: clamp(360px, 56vw, 580px);
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.post-media-grid-5 .post-media-tile:first-child {
  grid-row: 1 / 3;
}
.post-media-grid-6 {
  height: clamp(360px, 56vw, 580px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* ------------[Видеоподборка публикации]------------ // Один крупный ролик и до пяти компактных превью с единым полноэкранным просмотрщиком. Модуль: «видео публикаций». Часть 1/2 */
.post-media-grid.is-video-collection {
  height: auto;
  max-height: none;
  grid-template-columns: repeat(var(--video-thumb-count, 5), minmax(0, 1fr));
  grid-template-rows: clamp(260px, 45vw, 520px) auto;
}
.post-media-grid.is-video-collection .post-media-tile:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
}
.post-media-grid.is-video-collection .post-media-tile:not(:first-child) {
  grid-row: 2;
  aspect-ratio: 1;
}
.post-media-grid.is-video-collection .post-media-tile:first-child .post-media-content {
  object-fit: contain;
  background: #020617;
}
.post-media-grid.is-video-collection .post-media-tile:not(:first-child) .post-media-play {
  width: 2rem;
  height: 2rem;
  font-size: .7rem;
}
.post-media-grid.is-video-collection.post-media-grid-2 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, clamp(220px, 35vw, 430px));
}
.post-media-grid.is-video-collection.post-media-grid-2 .post-media-tile:first-child {
  grid-column: 1;
  grid-row: 1;
}
.post-media-grid.is-video-collection.post-media-grid-2 .post-media-tile:not(:first-child) {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: auto;
}
.post-media-grid.is-video-collection.post-media-grid-2 .post-media-tile .post-media-content {
  object-fit: contain;
  background: #020617;
}
.post-media-grid.is-video-discussion {
  position: relative;
  display: block;
  height: min(62vh, 620px) !important;
}
.post-media-grid.is-video-discussion .post-media-tile {
  width: 100%;
  height: 100%;
}
.post-media-grid.is-video-discussion .post-media-content { object-fit: contain; background: #020617; }
.post-video-discussion-count {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  padding: .48rem .72rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(2 6 23 / .72);
  color: #fff;
  font-size: .66rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}
.post-video-selection-preview {
  position: relative;
  width: 4.4rem;
  height: 3.2rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: .7rem;
  background: #020617;
}
.post-video-selection-preview video { width: 100%; height: 100%; object-fit: cover; }
.post-video-selection-preview i { position: absolute; inset: 50% auto auto 50%; color: #fff; font-style: normal; transform: translate(-50%, -50%); text-shadow: 0 1px 8px #000; }

/* ------------[Видеотека профиля]------------ // Рабочая вкладка собирает видео из публикаций и использует цвета выбранной темы. Модуль: «видео публикаций». Часть 2/2 */
.profile-video-library {
  --video-accent: var(--color-dynamic, #0d9488);
  padding: clamp(1rem, 2.5vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--video-accent) 18%, transparent);
  border-radius: 1.5rem;
  background: var(--vmesta-left-reference-surface, #fff);
  box-shadow: 0 1rem 3rem rgb(15 23 42 / .06);
}
.profile-video-library-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.profile-video-library-head > div > span { color: var(--video-accent); font-size: .62rem; font-weight: 900; letter-spacing: .2em; }
.profile-video-library-head h2 { margin: .25rem 0 0; color: var(--theme-text, #0f172a); font-size: clamp(1.15rem, 2.2vw, 1.65rem); font-weight: 900; }
.profile-video-library-head p { margin: .2rem 0 0; color: var(--theme-muted, #64748b); font-size: .72rem; font-weight: 650; }
.profile-video-add { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.65rem; padding: .65rem .9rem; border: 1px solid color-mix(in srgb, var(--video-accent) 30%, transparent); border-radius: .85rem; background: color-mix(in srgb, var(--video-accent) 12%, transparent); color: var(--video-accent); font-size: .68rem; font-weight: 850; }
.profile-video-add svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.profile-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-video-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--video-accent) 16%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--video-accent) 5%, var(--vmesta-left-reference-surface, #fff)); }
.profile-video-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; background: #020617; cursor: pointer; }
.profile-video-cover video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.profile-video-cover:hover video { transform: scale(1.025); filter: saturate(1.08); }
.profile-video-play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgb(255 255 255 / .36); border-radius: 50%; background: color-mix(in srgb, var(--video-accent) 78%, rgb(2 6 23 / .72)); color: #fff; transform: translate(-50%, -50%); backdrop-filter: blur(10px); }
.profile-video-play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; stroke: currentColor; }
.profile-video-cover small { position: absolute; right: .55rem; bottom: .5rem; padding: .28rem .46rem; border-radius: .45rem; background: rgb(2 6 23 / .72); color: #fff; font-size: .58rem; font-weight: 800; }
.profile-video-card > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3.5rem; padding: .72rem .8rem; }
.profile-video-card strong { min-width: 0; overflow: hidden; color: var(--theme-text, #0f172a); font-size: .76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-video-card > div > button { flex: 0 0 auto; }
.profile-video-open-post {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: 1px solid color-mix(in srgb, var(--video-accent) 76%, transparent) !important;
  border-radius: .65rem;
  padding: .42rem .62rem;
  background: var(--video-accent) !important;
  color: #fff !important;
  font-size: .58rem;
  font-weight: 900;
  box-shadow: 0 .5rem 1.1rem -.75rem var(--video-accent);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.profile-video-open-post svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-video-open-post:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 .65rem 1.2rem -.7rem var(--video-accent); }
.profile-video-open-post:active { transform: translateY(0) scale(.97); }
.profile-video-library .profile-video-empty { min-height: 20rem; }
.profile-video-loading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-video-loading i { aspect-ratio: 16 / 10; border-radius: 1rem; background: color-mix(in srgb, var(--video-accent) 9%, transparent); animation: pulse 1.4s ease-in-out infinite; }
.profile-video-library > footer { display: flex; justify-content: center; padding-top: 1.25rem; }
.profile-video-library > footer button { padding: .7rem 1rem; border-radius: .8rem; background: color-mix(in srgb, var(--video-accent) 12%, transparent); color: var(--video-accent); font-size: .68rem; font-weight: 850; }
@media (max-width: 640px) {
  .post-media-grid.is-video-collection { grid-template-rows: clamp(220px, 62vw, 350px) auto; }
  .post-media-grid.is-video-collection.post-media-grid-2 { grid-template-rows: repeat(2, clamp(210px, 62vw, 340px)); }
  .profile-video-library-head { align-items: flex-start; flex-direction: column; }
  .profile-video-add { width: 100%; justify-content: center; }
  .profile-video-grid, .profile-video-loading { grid-template-columns: 1fr; }
}
.viewer-media-grid {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 14px;
}
.viewer-media-grid.post-media-grid-1 .post-media-tile {
  height: 100%;
  min-height: 0;
  max-height: none;
}
.viewer-media-grid.post-media-grid-1 .post-media-content {
  object-fit: contain;
}
.post-upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 0.65rem;
}
.post-upload-preview-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
  }
  border-radius: 14px;
  background: #e2e8f0;
}
.post-upload-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-upload-preview-item button {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: white;
  font-size: 1.15rem;
  line-height: 1;
  backdrop-filter: blur(10px);
  transition: background 180ms ease, transform 180ms ease;
}
.post-upload-preview-item button:hover {
  background: #ef4444;
  transform: scale(1.08);
}
.post-hashtag-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .post-media-grid-2, .post-media-grid-3, .post-media-grid-4, .post-media-grid-5, .post-media-grid-6 {
    height: clamp(245px, 78vw, 430px);
  }
  .post-media-grid-5 {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .post-media-grid-5 .post-media-tile:first-child {
    grid-row: 1 / 5;
  }
  .viewer-media-grid {
    min-height: 44vh;
  }
}
#album-viewer-modal {
  z-index: 20500;
}
#album-photo-picker-modal, #album-access-modal {
  z-index: 21500;
}
#album-delete-modal {
  z-index: 22000;
}
.album-card {
  min-width: 0;
  cursor: pointer;
  border: 1px solid rgb(226 232 240 / 0.85);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 0.82);
  padding: 0.4rem;
  box-shadow: 0 12px 30px -26px rgb(15 23 42 / 0.55);
  outline: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.dark .album-card {
  border-color: rgb(51 65 85 / 0.72);
  background: rgb(15 23 42 / 0.78);
  box-shadow: 0 20px 45px -32px rgb(0 0 0 / 0.95);
}
html.adaptive-theme .album-card {
  border-color: var(--adaptive-border);
  background: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface), transparent 5%);
  }
}
.album-card:hover, .album-card:focus-visible {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 42%);
  }
  box-shadow: 0 22px 48px -30px var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 22px 48px -30px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 52%);
  }
  transform: translateY(-3px);
}
.album-card-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.85rem;
  background: rgb(226 232 240);
}
.dark .album-card-cover {
  background: rgb(2 6 23);
}
.album-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), filter 220ms ease;
}
.album-card:hover .album-card-cover img {
  transform: scale(1.035);
}
.album-card-empty {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgb(148 163 184 / 0.45);
  background: radial-gradient(circle at 50% 30%, var(--color-dynamic, #3b82f6), transparent 65%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%), transparent 65%);
  }
}
.album-card-copy {
  padding: 0.7rem 0.45rem 0.55rem;
}
.album-card-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  color: rgb(15 23 42);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.dark .album-card-copy h3 {
  color: rgb(248 250 252);
}
.album-card-copy p {
  margin-top: 0.42rem;
  color: rgb(100 116 139);
  font-size: 0.72rem;
  font-weight: 600;
}
.album-card-kebab {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: rgb(15 23 42 / 0.58);
  color: white;
  font-size: 1.45rem;
  line-height: 1;
  opacity: 1;
  backdrop-filter: blur(12px);
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}
.album-card:hover .album-card-kebab, .album-card:focus-within .album-card-kebab {
  opacity: 1;
  transform: translateY(0);
}
.album-card-kebab:hover {
  background: rgb(15 23 42 / 0.9);
}
.album-card-menu, .album-action-menu {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 0.97);
  box-shadow: 0 22px 55px -20px rgb(0 0 0 / 0.95);
  color: rgb(244 244 245);
  backdrop-filter: blur(18px);
}
.album-card-menu {
  position: absolute;
  top: 3rem;
  right: 0;
  width: 14rem;
  padding: 0.35rem;
}
.album-card-menu button, .album-action-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7rem;
  border-radius: 0.55rem;
  padding: 0.8rem 0.7rem;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}
.album-card-menu button:hover, .album-action-menu button:hover {
  background: rgb(255 255 255 / 0.09);
}
.album-card-menu button.is-danger {
  color: rgb(248 113 113);
}
.album-card-menu button.is-danger:hover {
  background: rgb(239 68 68 / 0.14);
}
.album-card-menu svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke-width: 2;
}
.album-header-action, .album-share-button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  transition: background 170ms ease, color 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.album-share-button {
  background: rgb(255 255 255 / 0.9);
  color: rgb(24 24 27);
}
.album-header-action {
  background: rgb(255 255 255 / 0.06);
}
.album-header-action:hover, .album-header-action.is-active {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 20%);
  }
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.album-share-button:hover {
  background: white;
  transform: translateY(-1px);
}
.album-action-menu button span {
  display: grid;
  gap: 0.15rem;
}
.album-action-menu button strong {
  color: white;
  font-size: 0.75rem;
}
.album-action-menu button small {
  color: rgb(161 161 170);
  font-size: 0.62rem;
  font-weight: 600;
}
.album-edit-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 0.75rem;
  padding: 0.55rem 0.75rem;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.album-edit-tool:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.09);
  color: white;
}
.album-edit-tool.is-danger {
  color: rgb(248 113 113);
}
.album-edit-tool.is-danger:hover:not(:disabled) {
  background: rgb(239 68 68 / 0.14);
}
.album-edit-tool:disabled {
  cursor: not-allowed;
  opacity: 0.28;
}
.album-photo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 8px;
  gap: 0.25rem;
  align-items: start;
}
.album-photo-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: rgb(0 0 0);
}
.album-photo-tile img {
  display: block;
  width: 100%;
  min-height: 10rem;
  max-height: 42rem;
  object-fit: cover;
  transition: filter 180ms ease, opacity 180ms ease, transform 300ms ease;
}
.album-photo-tile:not(.is-editing):hover img {
  transform: scale(1.02);
}
.album-photo-tile.is-editing img {
  filter: brightness(0.72);
}
.album-photo-tile.is-selected img {
  filter: brightness(0.46);
  opacity: 0.82;
}
.album-photo-tile.is-selected {
  box-shadow: inset 0 0 0 4px var(--color-dynamic, #3b82f6);
}
.album-photo-check {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  display: none;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 0.7);
  border-radius: 999px;
  background: rgb(15 23 42 / 0.45);
  color: transparent;
  backdrop-filter: blur(8px);
}
.album-photo-tile.is-editing .album-photo-check {
  display: grid;
}
.album-photo-tile.is-selected .album-photo-check {
  border-color: var(--color-dynamic, #3b82f6);
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.album-picker-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0.9rem;
  background: rgb(226 232 240);
  transition: border-color 160ms ease, transform 160ms ease;
}
.album-picker-photo:hover {
  transform: translateY(-2px);
}
.album-picker-photo.is-selected {
  border-color: var(--color-dynamic, #3b82f6);
}
.album-picker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-picker-photo span {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border: 2px solid white;
  border-radius: 999px;
  background: rgb(15 23 42 / 0.42);
  color: transparent;
}
.album-picker-photo.is-selected span {
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.album-visibility-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 0.9rem;
  color: rgb(71 85 105);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}
.dark .album-visibility-option {
  border-color: rgb(51 65 85);
  color: rgb(203 213 225);
}
.album-visibility-option > span:first-child {
  font-size: 1.2rem;
}
.album-visibility-option > span:last-child {
  display: grid;
  gap: 0.15rem;
}
.album-visibility-option strong {
  font-size: 0.8rem;
}
.album-visibility-option small {
  color: rgb(148 163 184);
  font-size: 0.65rem;
  font-weight: 600;
}
.album-visibility-option.is-active {
  border-color: var(--color-dynamic, #3b82f6);
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 90%);
  }
}
@media (min-width: 640px) {
  .album-photo-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .album-photo-wall {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .album-photo-wall {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .album-card-kebab {
    opacity: 1;
    transform: none;
  }
  .album-card-menu {
    width: min(14rem, calc(100vw - 3rem));
  }
  .album-viewer-panel {
    border-radius: 1.2rem;
  }
  .album-photo-tile img {
    min-height: 7.5rem;
  }
}
.album-card-kebab {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 42%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 38%);
  }
}
.album-card-menu, .album-action-menu {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 95%);
  }
  color: rgb(51 65 85);
  box-shadow: 0 24px 58px -24px var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 58px -24px color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 70%);
  }
}
.album-card-menu button:hover, .album-action-menu button:hover {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
  }
}
.album-action-menu button strong {
  color: rgb(30 41 59);
}
.album-action-menu button small {
  color: rgb(100 116 139);
}
.dark .album-card-menu, .dark .album-action-menu {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 88%);
  }
  color: rgb(226 232 240);
}
.dark .album-action-menu button strong {
  color: white;
}
.dark .album-action-menu button small {
  color: rgb(148 163 184);
}
html.adaptive-theme .album-card-menu, html.adaptive-theme .album-action-menu {
  border-color: var(--adaptive-border);
  background: var(--adaptive-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--adaptive-surface), transparent 2%);
  }
}
.album-header-action, .album-share-button {
  border-color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%);
  }
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 91%);
  }
  color: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 35%);
  }
}
.album-share-button {
  border-color: var(--color-dynamic, #3b82f6);
  background: var(--color-dynamic, #3b82f6);
  color: white;
}
.album-share-button:hover {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%);
  }
}
.dark .album-header-action {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 82%);
  }
  color: rgb(226 232 240);
}
.album-edit-toolbar-shell {
  border-color: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%) !important;
  }
  background: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 94%) !important;
  }
}
.dark .album-edit-toolbar-shell {
  background: var(--color-dynamic, #3b82f6) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(15 23 42) 88%) !important;
  }
}
.album-edit-tool {
  color: rgb(71 85 105);
}
.album-edit-tool:hover:not(:disabled) {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
  }
  color: var(--color-dynamic, #3b82f6);
}
.dark .album-edit-tool {
  color: rgb(203 213 225);
}
.album-edit-save {
  background: var(--color-dynamic, #3b82f6);
  color: white !important;
}
.album-edit-save:hover:not(:disabled) {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%);
  }
  color: white;
}
.album-photo-wall.is-single, .album-photo-wall.is-pair {
  grid-auto-flow: row;
  grid-auto-rows: auto;
  justify-content: center;
  align-content: center;
  min-height: min(60vh, 44rem);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding: clamp(0.5rem, 2vw, 2rem);
}
.album-photo-wall.is-single {
  grid-template-columns: minmax(0, min(100%, 56rem)) !important;
}
.album-photo-wall.is-pair {
  grid-template-columns: repeat(2, minmax(0, 36rem)) !important;
}
.album-photo-wall.is-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.album-photo-tile {
  cursor: zoom-in;
  border: 1px solid var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
  }
  border-radius: 1rem;
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 94%);
  }
  box-shadow: 0 18px 45px -34px rgb(15 23 42 / 0.72);
}
.dark .album-photo-tile {
  background: var(--color-dynamic, #3b82f6);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), rgb(2 6 23) 90%);
  }
}
.album-photo-tile.is-editing {
  cursor: pointer;
}
.album-photo-wall.is-single .album-photo-tile img {
  width: 100%;
  height: auto;
  min-height: clamp(18rem, 42vh, 34rem);
  max-height: 68vh;
  object-fit: contain;
}
.album-photo-wall.is-pair .album-photo-tile img {
  width: 100%;
  height: clamp(22rem, 56vh, 42rem);
  min-height: 0;
  object-fit: contain;
}
@media (min-width: 640px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1500px) {
  .album-photo-wall.is-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .album-photo-wall.is-pair {
    grid-template-columns: 1fr !important;
  }
  .album-photo-wall.is-pair .album-photo-tile img {
    height: auto;
    min-height: 16rem;
    max-height: 62vh;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

/* ======[КАТАЛОГ ПРОСТРАНСТВ: СКРУГЛЁННАЯ ПАНЕЛЬ И ПОИСК]====== */
.spaces-index-grid > #spaces-index-empty.hidden {
  display: none !important;
}
.spaces-index-toolbar {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.spaces-index-scope {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 24%);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--adaptive-surface, white) 90%, var(--color-dynamic, #2563eb) 10%);
  padding: .35rem;
}
.spaces-index-tools {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: .55rem;
}
.spaces-index-search {
  display: flex;
  width: clamp(10rem, 20vw, 15rem);
  height: 2.7rem;
  align-items: center;
  gap: .5rem;
  border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 18%);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--adaptive-surface, white) 92%, var(--color-dynamic, #2563eb) 8%);
  color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-muted, rgb(100 116 139)) 52%);
  padding: 0 .75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.spaces-index-search:focus-within {
  border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 30%);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
}
.spaces-index-search svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.spaces-index-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--adaptive-text, rgb(15 23 42));
  font-size: .75rem;
  font-weight: 750;
}
.spaces-index-search input::placeholder {
  color: var(--adaptive-muted, rgb(148 163 184));
  opacity: .82;
}
.spaces-index-view {
  border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 24%);
  border-radius: .95rem;
}
html.adaptive-theme .spaces-index-scope,
html.adaptive-theme .spaces-index-search,
html.adaptive-theme .spaces-index-view {
  border-color: color-mix(in srgb, var(--color-dynamic), transparent 64%) !important;
  background: color-mix(in srgb, var(--adaptive-surface) 90%, var(--color-dynamic) 10%) !important;
}
@media (max-width: 900px) {
  .spaces-index-tools { width: 100%; }
  .spaces-index-search { width: auto; flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .spaces-index-scope { display: grid; width: 100%; grid-template-columns: 1fr; }
  .spaces-index-tools { align-items: stretch; }
  .spaces-index-search { min-width: 0; }
}

/* ------------[Двухколоночный редактор ковра]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 13/203 */
/* Оставляет левую колонку профиля нетронутой и размещает редактор в центре и справа. */
.cover-animation-panel {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.dark .cover-animation-panel { background: transparent; }
.cover-animation-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
.cover-editor-workspace {
  grid-column: 1 / -1;
  min-width: 0;
  max-height: min(76vh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.1rem;
  padding: 1rem;
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 55%) transparent;
  pointer-events: auto;
}
.dark .cover-editor-workspace {
  border-color: rgb(30 41 59);
  background: rgb(15 23 42 / 0.96);
}
body.cover-editor-open .cover-animation-inner { padding-bottom: 1rem; }
body.cover-editor-open #profile-left-rail { z-index: 30; }
body.cover-editor-open #profile-sidebar-shell { transform: translateZ(0); }
.cover-animation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.adaptive-theme .cover-animation-panel {
  background: transparent;
  box-shadow: none;
}
html.adaptive-theme .cover-editor-workspace {
  border-color: var(--adaptive-border);
  background: color-mix(in srgb, var(--adaptive-surface) 96%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--color-dynamic), transparent 82%);
}
@media (min-width: 768px) {
  .cover-editor-workspace { grid-column: 4 / -1; }
}
@media (min-width: 1024px) {
  .cover-editor-workspace { grid-column: 3 / -1; }
}
@media (max-width: 768px) {
  .cover-animation-panel { position: relative; pointer-events: auto; }
  .cover-animation-inner { display: block; padding: 0.75rem; }
  .cover-editor-workspace { max-height: none; border-radius: 0.9rem; padding: 0.8rem; }
  .cover-animation-grid { grid-template-columns: 1fr; }
}

/* ------------[Редактор в потоке страницы]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 14/203 */
/* Сдвигает профиль вниз при открытии редактора и исключает наложение на ленту. */
.cover-animation-panel {
  position: relative;
  inset-inline: auto;
  width: auto;
  pointer-events: auto;
}
body.cover-editor-open #profile-left-rail {
  margin-top: 0 !important;
  z-index: 30;
}
body.cover-editor-open #profile-sidebar-shell {
  transform: translateZ(0);
}

/* ------------[Редактор внутри сетки профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 15/203 */
/* Левая колонка остаётся в первой строке, а основное содержимое уходит под редактор. */
.cover-editor-workspace {
  display: flex;
  flex-direction: column;
  max-height: min(76vh, 48rem);
  overflow: hidden;
}
.cover-editor-workspace > .cover-animation-header,
.cover-editor-workspace > .cover-editor-tabs {
  flex: 0 0 auto;
}
.cover-editor-workspace > .cover-editor-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 55%) transparent;
}
#profile-layout-grid > .cover-animation-panel .cover-animation-inner {
  display: block;
  max-width: none;
  padding: 0;
}
#profile-layout-grid > .cover-animation-panel .cover-editor-workspace {
  grid-column: auto;
}
@media (min-width: 768px) {
  #profile-layout-grid > #profile-left-rail { grid-column: 1 / span 3; }
  #profile-layout-grid > .cover-animation-panel { grid-column: 4 / -1; }
  #profile-layout-grid > #content-main { grid-column: 4 / span 6; }
}
@media (min-width: 1024px) {
  #profile-layout-grid > #profile-left-rail { grid-column: 1 / span 2; }
  #profile-layout-grid > .cover-animation-panel { grid-column: 3 / -1; }
  #profile-layout-grid > #content-main { grid-column: 3 / span 7; }
  #profile-layout-grid > #profile-right-rail { grid-column: 10 / span 3; }
}
@media (max-width: 768px) {
  #profile-layout-grid > .cover-animation-panel { grid-column: 1 / -1; }
  #profile-layout-grid > .cover-animation-panel .cover-editor-workspace {
    max-height: min(82vh, 48rem);
  }
}

/* ------------[Современные настройки аккаунта]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 16/203 */
.cover-account-pane{width:100%;max-width:none}.cover-account-row{padding:1.05rem 0}.cover-account-setting-row,.cover-account-toggle-row{display:grid;grid-template-columns:minmax(14rem,.9fr) minmax(18rem,1.15fr);align-items:center;gap:1.4rem;padding:1.15rem 0;border-top:1px solid rgb(226 232 240)}.cover-account-setting-row:first-child,.cover-account-toggle-row:first-child{border-top:0}.cover-account-setting-row>label,.cover-account-setting-row>span,.cover-account-toggle-row>span:first-child{display:flex;flex-direction:column;gap:.22rem}.cover-account-setting-row strong,.cover-account-toggle-row strong{color:rgb(30 41 59);font-size:.8rem;font-weight:900}.cover-account-setting-row small,.cover-account-toggle-row small{color:rgb(100 116 139);font-size:.66rem;font-weight:650;line-height:1.45}.cover-account-setting-row>input{width:100%;min-height:3rem;border:1px solid rgb(203 213 225);border-radius:.85rem;padding:.72rem .9rem;outline:0;background:#fff;color:rgb(15 23 42);font-size:.82rem;font-weight:750}.cover-account-password-value{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;border:1px solid rgb(203 213 225);border-radius:.85rem;padding:.4rem .45rem .4rem .9rem;background:#fff}.cover-account-password-value>span{color:rgb(100 116 139);font-size:1rem;letter-spacing:.12em}.cover-account-password-value button,.cover-security-dialog-actions button:last-child{border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 34%);border-radius:.72rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--color-dynamic,#3b82f6);padding:.65rem 1rem;font-size:.68rem;font-weight:900;cursor:pointer}.cover-account-toggle-row{cursor:pointer}.cover-account-switch{position:relative;justify-self:end;display:inline-flex;width:3.1rem;height:1.75rem}.cover-account-switch input{position:absolute;opacity:0;pointer-events:none}.cover-account-switch>span{position:absolute;inset:0;border:1px solid rgb(203 213 225);border-radius:999px;background:rgb(226 232 240);transition:background 180ms ease,border-color 180ms ease}.cover-account-switch>span:after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.22rem;height:1.22rem;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgb(15 23 42/.18);transition:transform 180ms ease}.cover-account-switch input:checked+span{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6)}.cover-account-switch input:checked+span:after{transform:translateX(1.35rem)}

/* ------------[Свободное положение левой колонки]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 17/203 */
/* Сохраняет исходное перекрытие обложки независимо от открытого редактора. */
body.cover-editor-open #profile-left-rail{margin-top:-6rem!important}
@media(min-width:768px){body.cover-editor-open #profile-left-rail{margin-top:-13rem!important}}

/* ------------[Слой настроек профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 18/203 */
/* Панель остаётся ниже фиксированной шапки и навигации профиля. */
.cover-animation-panel{z-index:10}

/* ------------[Окно смены пароля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 19/203 */
.cover-security-modal{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;padding:1rem}.cover-security-modal.hidden{display:none!important}.cover-security-modal-backdrop{position:absolute;inset:0;border:0;background:rgb(2 6 23/.68);backdrop-filter:blur(7px);cursor:default}.cover-security-dialog{position:relative;width:min(100%,31rem);overflow:hidden;border:1px solid rgb(226 232 240);border-radius:1.2rem;background:#fff;box-shadow:0 28px 90px rgb(2 6 23/.34)}.cover-security-dialog-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:1.05rem 1.1rem;border-bottom:1px solid rgb(226 232 240)}.cover-security-dialog-header h3{margin:0;color:rgb(15 23 42);font-size:.95rem;font-weight:900}.cover-security-dialog-header p{margin:.2rem 0 0;color:rgb(100 116 139);font-size:.68rem;font-weight:650}.cover-security-dialog-header>button{width:2.2rem;height:2.2rem;border:0;border-radius:.7rem;background:rgb(241 245 249);color:rgb(100 116 139);font-size:1.35rem;cursor:pointer}.cover-security-dialog-body{display:grid;gap:.9rem;padding:1.1rem}.cover-security-dialog-body label{display:grid;gap:.42rem;color:rgb(51 65 85);font-size:.7rem;font-weight:850}.cover-security-dialog-body input{width:100%;min-height:3rem;border:1px solid rgb(203 213 225);border-radius:.8rem;padding:.7rem .85rem;outline:0;background:rgb(248 250 252);color:rgb(15 23 42);font-size:.82rem;font-weight:750}.cover-security-dialog-body input:focus,.cover-account-setting-row>input:focus{border-color:var(--color-dynamic,#3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 84%)}.cover-security-dialog-body small{color:rgb(100 116 139);font-size:.62rem}.cover-security-dialog-actions{display:flex;justify-content:flex-end;gap:.55rem;padding:.9rem 1.1rem 1.1rem;border-top:1px solid rgb(226 232 240)}.cover-security-dialog-actions button{min-width:6.6rem;border:1px solid rgb(203 213 225);border-radius:.72rem;background:#fff;color:rgb(71 85 105);padding:.68rem 1rem;font-size:.68rem;font-weight:900;cursor:pointer}.cover-security-dialog-actions button:last-child{background:var(--color-dynamic,#3b82f6);color:#fff}body.cover-security-modal-open{overflow:hidden}.dark .cover-account-setting-row,.dark .cover-account-toggle-row,.dark .cover-security-dialog-header,.dark .cover-security-dialog-actions{border-color:rgb(51 65 85)}.dark .cover-account-setting-row strong,.dark .cover-account-toggle-row strong,.dark .cover-security-dialog-header h3,.dark .cover-security-dialog-body label{color:rgb(241 245 249)}.dark .cover-account-setting-row small,.dark .cover-account-toggle-row small,.dark .cover-security-dialog-header p,.dark .cover-security-dialog-body small{color:rgb(148 163 184)}.dark .cover-account-setting-row>input,.dark .cover-account-password-value,.dark .cover-security-dialog-body input{border-color:rgb(51 65 85);background:rgb(15 23 42);color:rgb(241 245 249)}.dark .cover-security-dialog{border-color:rgb(51 65 85);background:rgb(2 6 23)}.dark .cover-security-dialog-header>button,.dark .cover-security-dialog-actions button:first-child{border-color:rgb(51 65 85);background:rgb(15 23 42);color:rgb(203 213 225)}html.adaptive-theme .cover-account-setting-row,html.adaptive-theme .cover-account-toggle-row,html.adaptive-theme .cover-security-dialog-header,html.adaptive-theme .cover-security-dialog-actions{border-color:var(--adaptive-border)}html.adaptive-theme .cover-account-setting-row strong,html.adaptive-theme .cover-account-toggle-row strong,html.adaptive-theme .cover-security-dialog-header h3,html.adaptive-theme .cover-security-dialog-body label{color:var(--adaptive-text)}html.adaptive-theme .cover-account-setting-row small,html.adaptive-theme .cover-account-toggle-row small,html.adaptive-theme .cover-security-dialog-header p,html.adaptive-theme .cover-security-dialog-body small{color:var(--adaptive-muted)}html.adaptive-theme .cover-account-setting-row>input,html.adaptive-theme .cover-account-password-value,html.adaptive-theme .cover-security-dialog-body input,html.adaptive-theme .cover-security-dialog-header>button,html.adaptive-theme .cover-security-dialog-actions button:first-child{border-color:var(--adaptive-border);background:var(--adaptive-surface-2);color:var(--adaptive-text)}html.adaptive-theme .cover-security-dialog{border-color:var(--adaptive-border);background:var(--adaptive-surface)}@media(max-width:640px){.cover-account-setting-row,.cover-account-toggle-row{grid-template-columns:1fr;gap:.65rem}.cover-account-switch{justify-self:start}}
/* ------------[Тематическое состояние лайка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 20/203 */
/* Активный лайк получает цвет обоев и заливку сердца во всех лентах и пространствах. */
.post-item [data-post-vote="like"][aria-pressed="true"],
#viewer-post-actions [data-post-vote="like"][aria-pressed="true"],
html.adaptive-theme .post-item [data-post-vote="like"][aria-pressed="true"],
html.adaptive-theme #viewer-post-actions [data-post-vote="like"][aria-pressed="true"] {
  color: var(--color-dynamic, #3b82f6) !important;
}
.post-item [data-post-vote="like"][aria-pressed="true"] .post-like-icon,
#viewer-post-actions [data-post-vote="like"][aria-pressed="true"] .post-like-icon {
  fill: currentColor !important;
  stroke: currentColor !important;
}
.post-item [data-post-vote="like"][aria-pressed="false"] .post-like-icon,
#viewer-post-actions [data-post-vote="like"][aria-pressed="false"] .post-like-icon {
  fill: transparent !important;
}
html.adaptive-theme .post-item [data-post-vote="like"][aria-pressed="false"],
html.adaptive-theme #viewer-post-actions [data-post-vote="like"][aria-pressed="false"] {
  color: var(--adaptive-muted, #94a3b8) !important;
}

/* ------------[Файлы публикации]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 21/203 */
/* Отдельные карточки файлов располагаются после хэштегов и не смешиваются с фотогалереей. */
.post-attachments,
.post-attachment-selection-list {
  display: grid;
  gap: .55rem;
}
.post-attachments { margin-top: .7rem; }
.post-attachment-card,
.post-file-selection-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 70%);
  border-radius: .9rem;
  padding: .7rem .8rem;
  color: var(--adaptive-text, #334155);
  background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 88%, var(--color-dynamic, #3b82f6) 12%);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.post-attachment-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.post-attachment-card:hover {
  border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 34%);
  background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 78%, var(--color-dynamic, #3b82f6) 22%);
  transform: translateY(-1px);
}
.post-attachment-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border-radius: .72rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1));
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .04em;
}
.post-attachment-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .15rem;
}
.post-attachment-copy strong {
  overflow: hidden;
  color: var(--adaptive-text-strong, #0f172a);
  font-size: .76rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-attachment-copy small {
  color: var(--adaptive-muted, #64748b);
  font-size: .62rem;
  font-weight: 700;
}
.post-attachment-download {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  color: var(--color-dynamic, #3b82f6);
}
.post-attachment-download > svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.post-attachment-card.is-downloading { cursor: wait; opacity: .66; }
.post-attachment-card.is-downloaded {
  border-color: color-mix(in srgb, #22c55e 48%, transparent);
  background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 88%, #22c55e 12%);
}
.post-attachment-selection {
  margin-top: .75rem;
  border: 1px solid var(--adaptive-border, #e2e8f0);
  border-radius: 1rem;
  padding: .75rem;
  background: color-mix(in srgb, var(--adaptive-surface-2, #f8fafc) 92%, transparent);
}
.post-attachment-selection-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .55rem;
  color: var(--adaptive-muted, #64748b);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-attachment-selection-head span:nth-child(2) {
  margin-left: auto;
  color: var(--color-dynamic, #3b82f6);
}
.post-attachment-selection-head button {
  margin-left: auto;
  color: #ef4444;
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.post-attachment-selection-head span:nth-child(2):not(.hidden) + button { margin-left: 0; }
.post-file-selection-card { padding: .55rem .65rem; }
.post-file-selection-card .post-attachment-icon { width: 2.15rem; height: 2.15rem; }
.post-file-selection-card > button {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 999px;
  color: var(--adaptive-muted, #64748b);
  background: color-mix(in srgb, var(--adaptive-surface, #fff) 82%, transparent);
  font-size: 1.15rem;
}
.post-file-selection-card > button:hover { color: #fff; background: #ef4444; }
.post-attachment-trigger {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .65rem;
  color: var(--adaptive-muted, #64748b);
  transition: color .18s ease, background .18s ease;
}
.post-attachment-trigger:hover {
  color: var(--color-dynamic, #3b82f6);
  background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}
.post-attachment-trigger svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* ------------[Навигация разделов профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 22/203 */
/* Повторяет спокойный стиль пунктов левой навигации профиля. */
#profile-tabs-container {
  border-color: var(--adaptive-border, #e2e8f0) !important;
  background: var(--adaptive-surface, #fff) !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--adaptive-text, #0f172a), transparent 94%) !important;
}
.profile-tabs-inner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
}
.profile-tab-list { display: flex; align-items: center; gap: .25rem; width: max-content; }
#profile-tabs-container .tab-btn:not(.hidden) {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid transparent !important;
  border-radius: .75rem;
  background: transparent !important;
  color: var(--adaptive-text-muted, #64748b) !important;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
  transition: color 160ms ease, background 160ms ease;
}
#profile-tabs-container .tab-btn.hidden { display: none !important; }
/* В каталоге пространств верхняя кнопка относится не к каталогу, а к открытому пространству. */
body.space-route[data-spaces-route-mode="index"] #btn-tab-space { display: none !important; }
/* Активный пункт каталога сохраняется даже после асинхронной перерисовки списка. */
body.spaces-catalog-route #nav-spaces {
  border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%) !important;
  background: color-mix(in srgb, var(--adaptive-card-tint, #fff) 86%, var(--color-dynamic, #3b82f6) 14%) !important;
  color: var(--color-dynamic, #3b82f6) !important;
  font-weight: 700 !important;
}
body.spaces-catalog-route #nav-spaces * { color: inherit !important; }
/* ------------[Чистый каталог пространств]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 23/203 */
/* Карточки достижений и интересов принадлежат профилю; в общем каталоге они не должны занимать правую колонку. На странице конкретного пространства класс каталога снимается, поэтому его собственные достижения остаются доступны. */
body.spaces-catalog-route #side-achievements,
body.spaces-catalog-route #profile-interests-card,
body.spaces-catalog-route #profile-interest-match-placeholder {
  display: none !important;
}
body.space-route #profile-interests-card,
body.space-route #profile-interest-match-placeholder {
    display: none !important;
}

/* ------------[Центр уведомлений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 24/203 */
.notifications-dropdown-v2 {
    --notice-bg: var(--adaptive-ui-panel, var(--standard-panel, #fff));
    --notice-soft: var(--adaptive-ui-active, var(--standard-panel-soft, #f7f5f2));
    --notice-text: var(--adaptive-text-active, var(--standard-text-active, #25211d));
    --notice-muted: var(--adaptive-text-muted, var(--standard-text-secondary, #8b8178));
    --notice-border: var(--adaptive-ui-line, var(--standard-line, rgba(101, 80, 62, .2)));
    position: absolute;
    top: calc(100% + .85rem);
    left: 50%;
    z-index: 10020;
    width: min(25rem, calc(100vw - 1rem));
    max-height: min(38rem, calc(100vh - 5rem));
    overflow: hidden;
    transform: translateX(-50%);
    color: var(--notice-text);
    background: color-mix(in srgb, var(--notice-bg) 96%, transparent);
    border: 1px solid var(--notice-border);
    border-radius: 1.35rem;
    box-shadow: 0 1.35rem 3.5rem rgba(20, 12, 8, .22);
    backdrop-filter: blur(22px) saturate(1.1);
}

.notifications-dropdown-v2.hidden,
.notification-history-modal.hidden,
.profile-safety-menu.hidden,
.profile-safety-dropdown.hidden,
.profile-report-reasons.hidden { display: none !important; }

.notifications-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.2rem .75rem;
}

.notifications-dropdown-head > div { display: grid; gap: .18rem; }
.notifications-dropdown-head span,
.notification-history-head span {
    color: var(--color-dynamic, #d76f2a);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .17em;
}
.notifications-dropdown-head strong { font-size: 1.05rem; line-height: 1.1; }
#notifications-dropdown-count {
    display: grid;
    min-width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: #fff;
    background: var(--color-dynamic, #d76f2a);
    border-radius: 999px;
}
#notifications-dropdown-count:empty { display: none; }

.notifications-dropdown-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin: 0 .75rem .65rem;
    padding: .28rem;
    background: var(--notice-soft);
    border: 1px solid var(--notice-border);
    border-radius: 1rem;
}
.notifications-dropdown-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.65rem;
    color: var(--notice-muted);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: .78rem;
    transition: .2s ease;
}
.notifications-dropdown-tabs button svg,
.notification-history-filters svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.notifications-dropdown-tabs button.is-active {
    color: var(--color-dynamic, #d76f2a);
    background: var(--notice-bg);
    box-shadow: 0 .35rem 1rem rgba(40, 24, 12, .08);
}
.notifications-dropdown-content {
    max-height: 25rem;
    min-height: 13rem;
    overflow: auto;
    padding: .55rem .8rem .75rem;
    border-top: 1px solid var(--notice-border);
}
.notifications-dropdown-v2 .notif-item {
    margin: 0 0 .55rem !important;
    padding: .75rem !important;
    color: var(--notice-text) !important;
    background: var(--notice-soft) !important;
    border-color: var(--notice-border) !important;
    border-radius: .95rem !important;
    box-shadow: none !important;
}
.notifications-dropdown-v2 .notif-item:hover { transform: translateY(-1px); }
.galaxy-protect-icon {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    align-self: center;
    vertical-align: middle;
    line-height: 1;
    background: linear-gradient(135deg, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 5%, var(--color-dynamic-secondary, #8b5cf6) 88%);
    -webkit-mask: url('/assets/galaxy-protect.svg?v=20260909.2') center / contain no-repeat;
    mask: url('/assets/galaxy-protect.svg?v=20260909.2') center / contain no-repeat;
    filter: drop-shadow(0 .14rem .28rem color-mix(in srgb, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 28%, transparent));
}
html.dark .galaxy-protect-icon,
html.adaptive-theme.dark .galaxy-protect-icon { filter: brightness(1.18) saturate(1.08) drop-shadow(0 .16rem .35rem color-mix(in srgb, var(--color-dynamic, #60a5fa) 42%, transparent)); }
.notification-system-tab-mark,
.notification-system-filter-mark {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 0;
}
.notification-system-filter-mark { width: 1.2rem; height: 1.2rem; border-radius: 0; }
.system-notification-avatar { align-self: center; overflow: visible; padding: .18rem; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.system-notification-avatar .galaxy-protect-icon { display: block; width: 100%; height: 100%; }
.system-notification-avatar > span { display: grid; width: 100%; height: 100%; place-items: center; font-size: .85rem; }
.vmesta-notice-system-avatar { overflow: visible; padding: .42rem; border:1px solid rgb(255 255 255/.34); background:rgb(255 255 255/.16)!important; box-shadow:inset 0 0 0 1px rgb(255 255 255/.08),0 .35rem .8rem rgb(15 23 42/.12)!important; }
.vmesta-system-mark { display: block; width: 100%; height: 100%; background:linear-gradient(135deg,#fff 8%,#d9f4ff 56%,#ffe58a 100%); filter:drop-shadow(0 .16rem .26rem rgb(15 23 42/.22)); }
.notifications-dropdown-footer {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: .55rem;
    padding: .7rem .8rem .8rem;
    border-top: 1px solid var(--notice-border);
}
.notification-broom-button,
.notification-history-open {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    color: var(--notice-muted);
    border: 1px solid var(--notice-border);
    border-radius: .85rem;
    transition: .2s ease;
}
.notification-broom-button:hover { color: #e14c52; background: color-mix(in srgb, #e14c52 9%, var(--notice-bg)); }
.notification-broom-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-history-open { gap: .55rem; color: var(--color-dynamic, #d76f2a); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.notification-history-open:hover { background: var(--notice-soft); }
.notification-history-open svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notification-empty-state {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--notice-muted);
    text-align: center;
}
.notification-empty-icon {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .8rem;
    place-items: center;
    color: var(--color-dynamic, #d76f2a);
    background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 10%, transparent);
    border-radius: 1.15rem;
}
.notification-empty-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.notification-empty-state strong { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.notification-empty-state small { margin-top: .25rem; font-size: .62rem; opacity: .7; }

/* ------------[Полная история уведомлений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 25/203 */
body.notification-history-open { overflow: hidden; }
.notification-history-modal { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 1rem; }
.notification-history-backdrop { position: absolute; inset: 0; background: rgba(13, 8, 5, .62); backdrop-filter: blur(8px); }
.notification-history-dialog {
    --history-bg: var(--adaptive-ui-panel, var(--standard-panel, #fff));
    --history-soft: var(--adaptive-ui-active, var(--standard-panel-soft, #f7f5f2));
    --history-text: var(--adaptive-text-active, var(--standard-text-active, #25211d));
    --history-muted: var(--adaptive-text-muted, var(--standard-text-secondary, #8b8178));
    --history-border: var(--adaptive-ui-line, var(--standard-line, rgba(101, 80, 62, .2)));
    position: relative;
    width: min(47rem, 100%);
    max-height: min(46rem, calc(100vh - 2rem));
    overflow: hidden;
    color: var(--history-text);
    background: var(--history-bg);
    border: 1px solid var(--history-border);
    border-radius: 1.65rem;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .36);
}
.notification-history-head { display: grid; grid-template-columns: 3rem 1fr 2.5rem; gap: .85rem; align-items: center; padding: 1.35rem 1.45rem 1rem; }
.notification-history-emblem { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--color-dynamic, #d76f2a); background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 12%, transparent); border-radius: 1rem; }
.notification-history-emblem svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-history-head h2 { margin: .1rem 0 0; font-size: 1.2rem; line-height: 1.2; }
.notification-history-head p { margin: .22rem 0 0; color: var(--history-muted); font-size: .7rem; }
.notification-history-close { width: 2.35rem; height: 2.35rem; color: var(--history-muted); font-size: 1.55rem; border: 1px solid var(--history-border); border-radius: .8rem; }
.notification-history-filters { display: flex; gap: .5rem; padding: 0 1.45rem 1rem; overflow-x: auto; }
.notification-history-filters button { display: flex; min-height: 2.35rem; align-items: center; gap: .42rem; padding: 0 .8rem; color: var(--history-muted); font-size: .65rem; font-weight: 900; white-space: nowrap; border: 1px solid var(--history-border); border-radius: .8rem; }
.notification-history-filters button.is-active { color: var(--color-dynamic, #d76f2a); background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 9%, var(--history-bg)); border-color: color-mix(in srgb, var(--color-dynamic, #d76f2a) 42%, var(--history-border)); }
.notification-history-filters button span { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; background: var(--history-soft); border-radius: 999px; }
.notification-history-list { min-height: 18rem; max-height: min(31rem, calc(100vh - 15rem)); overflow: auto; padding: .25rem 1.45rem 1rem; }
.notification-history-item { position: relative; display: grid; grid-template-columns: 2.9rem 1fr auto; gap: .8rem; align-items: center; margin-bottom: .6rem; padding: .85rem; background: var(--history-soft); border: 1px solid var(--history-border); border-radius: 1rem; }
.notification-history-item.is-unread { border-left: 3px solid var(--color-dynamic, #d76f2a); }
.notification-history-item.is-system.is-unread { border-left-color: #8a55ff; }
.notification-history-avatar, .notification-history-avatar > * { display: block; width: 2.75rem !important; height: 2.75rem !important; border-radius: .85rem !important; overflow: hidden; }
.notification-history-system-icon { display: grid; width: 2.75rem; height: 2.75rem; overflow: visible; place-items: center; padding: .32rem; color: #8a55ff; background: transparent; border: 0; border-radius: 0; box-shadow: none; }

/* ------------[Регистрация: единая геометрия полей]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 4/34 */
.auth-register-page .auth-register-card {
  width: min(100%, 34rem);
}
.auth-register-page #registerForm input:not([type="date"]) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3.65rem;
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 1rem !important;
  background: rgb(248 250 252 / .82) !important;
  color: rgb(30 41 59) !important;
  padding: .9rem 1rem !important;
  font-size: .875rem;
  line-height: 1.25rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .72);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.auth-register-page #registerForm .relative > span + input {
  padding-left: 2.4rem !important;
}
.auth-register-page #registerForm input:not([type="date"]):focus {
  border-color: var(--color-dynamic, #3b82f6) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}
.auth-register-page .auth-register-credentials {
  display: grid;
  gap: .75rem;
}
.auth-register-page .auth-register-credentials > * {
  margin-block: 0 !important;
}
.auth-register-page .auth-email-row,
.auth-register-page #email-code-row.flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: stretch;
}
.auth-register-page .auth-email-action {
  min-width: 8.8rem;
  min-height: 3.65rem;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 89%) !important;
  color: var(--color-dynamic, #3b82f6) !important;
  padding: .7rem 1rem;
  font-size: .625rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: pointer;
}
.auth-register-page .auth-email-action:hover {
  background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%) !important;
}
.auth-register-page .login-availability {
  margin: -.15rem .25rem 0 !important;
}
.dark .auth-register-page #registerForm input:not([type="date"]),
.auth-register-page.dark #registerForm input:not([type="date"]) {
  border-color: rgb(51 65 85) !important;
  background: rgb(30 41 59 / .9) !important;
  color: rgb(241 245 249) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
}
html.adaptive-theme .auth-register-page #registerForm input:not([type="date"]) {
  border-color: var(--adaptive-border, rgb(51 65 85)) !important;
  background: var(--adaptive-surface-2, rgb(30 41 59)) !important;
  color: var(--adaptive-text, rgb(241 245 249)) !important;
}
@media (max-width: 520px) {
  .auth-register-page .auth-register-card { padding: 1.35rem !important; }
  .auth-register-page .auth-email-row,
  .auth-register-page #email-code-row.flex { grid-template-columns: 1fr; }
  .auth-register-page .auth-email-action { width: 100%; min-height: 3rem; }
}
.notification-history-system-icon svg { width: 1.35rem; height: 1.35rem; object-fit: contain; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.notification-history-system-icon .galaxy-protect-mark { display: block; width: 100%; height: 100%; }
.notification-history-copy { min-width: 0; }
.notification-history-copy > div { display: flex; align-items: center; gap: .55rem; }
.notification-history-copy strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-history-copy > div span { color: var(--color-dynamic, #d76f2a); font-size: .52rem; font-weight: 900; letter-spacing: .1em; }
.notification-history-copy p { margin: .2rem 0; color: var(--history-text); font-size: .72rem; line-height: 1.4; }
.notification-history-copy time { color: var(--history-muted); font-size: .58rem; }
.notification-history-item > i { width: .48rem; height: .48rem; background: var(--color-dynamic, #d76f2a); border-radius: 999px; box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-dynamic, #d76f2a) 13%, transparent); }
.notification-history-item.is-system > i { background: #8a55ff; box-shadow: 0 0 0 .25rem rgba(138, 85, 255, .13); }
.notification-history-item.is-actionable { cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.notification-history-item.is-actionable:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-dynamic, #8a55ff) 48%, var(--history-border)); box-shadow: 0 .7rem 1.6rem -.9rem color-mix(in srgb, var(--color-dynamic, #8a55ff) 45%, transparent); }
.notification-history-item.is-actionable:focus-visible { outline: 2px solid var(--color-dynamic, #8a55ff); outline-offset: 2px; }
.notification-history-empty, .notification-history-loading { display: flex; min-height: 18rem; flex-direction: column; align-items: center; justify-content: center; color: var(--history-muted); text-align: center; }
.notification-history-loading { gap: .28rem; }
.notification-history-loading strong { color: var(--history-text); font-size: .78rem; }
.notification-history-loading small { font-size: .63rem; }
.notification-history-orbit { position: relative; width: 2.7rem; height: 2.7rem; margin-bottom: .45rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 40%, transparent); border-radius: 50%; animation: messenger-spin 1.35s linear infinite; }
.notification-history-orbit::before { content: 'V'; position: absolute; inset: .52rem; display: grid; place-items: center; border-radius: 50%; background: var(--history-soft); color: var(--color-dynamic, #d76f2a); font-size: .6rem; font-weight: 950; }
.notification-history-orbit > i { position: absolute; top: -.18rem; left: 50%; width: .44rem; height: .44rem; border-radius: 50%; background: var(--color-dynamic, #d76f2a); transform: translateX(-50%); }
.notification-history-empty > .vmesta-empty-visual { display: grid; width: min(11.25rem, 58vw); height: 7rem; margin-bottom: .8rem; place-items: center; color: var(--color-dynamic, #d76f2a); background: var(--history-soft); border-radius: 1.25rem; }
.notification-history-empty > .vmesta-empty-copy { width: auto; height: auto; margin: 0; background: transparent; border-radius: 0; }
.notification-history-empty svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.notification-history-empty p { margin: .3rem 0 0; font-size: .7rem; }
.notification-history-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.45rem; color: var(--history-muted); border-top: 1px solid var(--history-border); }
.notification-history-footer span { font-size: .62rem; }
.notification-history-footer button { display: flex; align-items: center; gap: .45rem; min-height: 2.3rem; padding: 0 .8rem; color: #d34b51; font-size: .65rem; font-weight: 900; border: 1px solid color-mix(in srgb, #d34b51 35%, var(--history-border)); border-radius: .75rem; }
.notification-history-footer button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------[Действия с чужим профилем]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 26/203 */
.profile-safety-menu { position: absolute; top: 1rem; right: 1.25rem; z-index: 42; }
.profile-safety-trigger { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: #fff; background: rgba(12, 9, 8, .48); border: 1px solid rgba(255, 255, 255, .24); border-radius: .9rem; box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .2); backdrop-filter: blur(10px); transition: .2s ease; }
.profile-safety-trigger:hover, .profile-safety-trigger[aria-expanded="true"] { color: var(--color-dynamic, #e38b52); background: rgba(12, 9, 8, .72); transform: translateY(-1px); }
.profile-safety-trigger svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.profile-safety-dropdown { position: absolute; top: calc(100% + .55rem); right: 0; width: 17rem; overflow: hidden; color: var(--adaptive-text-active, var(--standard-text-active, #27201b)); background: var(--adaptive-ui-panel, var(--standard-panel, #fff)); border: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(96, 72, 55, .22))); border-radius: 1rem; box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .28); backdrop-filter: blur(18px); }
.profile-safety-dropdown-head { display: grid; gap: .1rem; padding: .85rem 1rem .65rem; border-bottom: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(96, 72, 55, .18))); }
.profile-safety-dropdown-head span { color: var(--color-dynamic, #d76f2a); font-size: .52rem; font-weight: 900; letter-spacing: .15em; }
.profile-safety-dropdown-head strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-safety-dropdown > button { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .75rem 1rem; text-align: left; transition: .2s ease; }
.profile-safety-dropdown > button:hover { background: var(--adaptive-ui-active, var(--standard-panel-soft, rgba(128, 96, 72, .08))); }
.profile-safety-dropdown > button svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-safety-dropdown > button span { display: grid; gap: .1rem; }
.profile-safety-dropdown > button strong { font-size: .7rem; }
.profile-safety-dropdown > button small { color: var(--adaptive-text-muted, var(--standard-text-secondary, #8a7e75)); font-size: .58rem; }
.profile-safety-dropdown > button.is-danger { color: #d34b51; border-top: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(96, 72, 55, .18))); }
.profile-safety-dropdown > button.is-blocked { color: #2ca66f; }
.profile-report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 0 .75rem .75rem; }
.profile-report-reasons button { min-height: 2rem; padding: .35rem .45rem; color: var(--adaptive-text-muted, var(--standard-text-secondary, #8a7e75)); font-size: .57rem; font-weight: 800; border: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(96, 72, 55, .18))); border-radius: .65rem; }
.profile-report-reasons button:hover { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, var(--standard-panel-soft, rgba(128, 96, 72, .08))); }

/* ------------[Жалоба на профиль]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 27/203 */
.profile-safety-dropdown > button { padding: .9rem 1.05rem; }
.profile-safety-dropdown { max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.profile-report-reasons { position: relative; margin: .15rem .8rem .85rem 1rem; padding: .15rem 0 0 1rem; gap: .48rem; }
.profile-report-reasons::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 68%, transparent); transform-origin: top; animation: moderation-rail-in .25s ease both; }
.profile-report-reasons button { min-height: 2.35rem; padding: .5rem .55rem; }
@keyframes moderation-rail-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ------------[Единая форма жалобы]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 28/203 */
body.moderation-modal-open { overflow: hidden; }
.content-report-modal.hidden, .galaxy-guard-modal.hidden, .my-reports-modal.hidden { display: none !important; }
.content-report-modal, .galaxy-guard-modal, .my-reports-modal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 1rem; }
.content-report-backdrop, .galaxy-guard-backdrop, .my-reports-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 13, .72); backdrop-filter: blur(9px); }
.content-report-dialog, .galaxy-guard-dialog, .my-reports-dialog { position: relative; overflow: hidden; color: var(--adaptive-text-active, var(--standard-text-active, #382419)); background: color-mix(in srgb, var(--adaptive-ui-panel, var(--standard-panel, #f6e8dd)) 94%, transparent); border: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(131, 86, 55, .25))); border-radius: 1.45rem; box-shadow: 0 2rem 6rem rgba(0, 0, 0, .38); }
.content-report-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(38rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.content-report-dialog > header, .galaxy-guard-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--adaptive-ui-line, var(--standard-line, rgba(131, 86, 55, .18))); }
.content-report-emblem, .galaxy-guard-emblem { display: grid; width: 3rem; height: 3rem; place-items: center; flex: 0 0 auto; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215, 111, 42, .12)); border-radius: 1rem; }
.content-report-emblem svg, .galaxy-guard-emblem svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.content-report-dialog header > div, .galaxy-guard-head > div { min-width: 0; flex: 1; }
.content-report-dialog header small, .galaxy-guard-head small { display: block; color: var(--color-dynamic, #d76f2a); font-size: .58rem; font-weight: 950; letter-spacing: .16em; }
.content-report-dialog h2, .galaxy-guard-head h2 { margin: .12rem 0; font-size: 1.25rem; font-weight: 950; line-height: 1.1; }
.content-report-dialog header p, .galaxy-guard-head p { overflow: hidden; margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.content-report-close, .galaxy-guard-close { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; flex: 0 0 auto; color: var(--adaptive-text-muted, #8b7467); border: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .2)); border-radius: .85rem; font-size: 1.35rem; }
.content-report-close:hover, .galaxy-guard-close:hover { color: #d34b51; background: rgba(211, 75, 81, .1); }
.content-report-body { display: grid; gap: 1rem; overflow-y: auto; padding: 1.1rem 1.2rem; }
.content-report-body > strong { font-size: .75rem; }
.content-report-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.content-report-reasons button { min-height: 2.5rem; padding: .5rem; color: var(--adaptive-text-muted, #8b7467); font-size: .65rem; font-weight: 850; border: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .2)); border-radius: .8rem; }
.content-report-reasons button:hover, .content-report-reasons button.is-active { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215, 111, 42, .12)); border-color: var(--color-dynamic, #d76f2a); }
.content-report-body label { display: grid; gap: .45rem; }
.content-report-body label > span { font-size: .68rem; font-weight: 900; }
.content-report-body label i { color: var(--adaptive-text-muted, #8b7467); font-size: .58rem; font-style: normal; font-weight: 650; }
#content-report-details { min-height: 6rem; resize: vertical; padding: .8rem; color: inherit; background: var(--adaptive-ui-input, rgba(255,255,255,.18)); border: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .2)); border-radius: .85rem; font-size: .72rem; outline: none; }
#content-report-details:focus { border-color: var(--color-dynamic, #d76f2a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #d76f2a) 15%, transparent); }
.content-report-dialog > footer { display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.2rem; border-top: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .18)); }
.content-report-dialog > footer button { min-height: 2.45rem; padding: 0 1rem; border: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .2)); border-radius: .75rem; font-size: .65rem; font-weight: 900; }
#content-report-submit { color: #fff; background: var(--color-dynamic, #d76f2a); border-color: transparent; }
#content-report-submit:disabled { opacity: .45; cursor: not-allowed; }

/* ------------[Страж галактики]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 29/203 */
.settings-profile-guard-btn { position: relative; }
.settings-profile-guard-btn > span:nth-child(2) { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: .12rem; }
.settings-profile-guard-icon { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-radius: .7rem; }
.settings-profile-guard-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galaxy-guard-menu-count { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; margin-left: auto; padding: 0 .3rem; color: #fff; background: #ef4f72; border-radius: 999px; font-size: .55rem; font-weight: 950; }
.galaxy-guard-menu-count.hidden { display: none; }
.galaxy-guard-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(72rem, calc(100vw - 2rem)); height: min(49rem, calc(100vh - 2rem)); }
.galaxy-guard-head { padding: .95rem 1.15rem; }
.galaxy-guard-toolbar { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-bottom: 1px solid var(--adaptive-ui-line, rgba(131, 86, 55, .18)); }
#galaxy-guard-statuses { display: flex; min-width: 0; gap: .4rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
#galaxy-guard-statuses button { display: flex; min-height: 2.25rem; align-items: center; gap: .4rem; flex: 0 0 auto; padding: 0 .75rem; color: var(--adaptive-text-muted, #8b7467); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .7rem; font-size: .59rem; font-weight: 900; }
#galaxy-guard-statuses button span { display: grid; min-width: 1.15rem; height: 1.15rem; place-items: center; padding: 0 .2rem; background: var(--adaptive-ui-active, rgba(131,86,55,.1)); border-radius: 999px; }
#galaxy-guard-statuses button.is-active { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-color: var(--color-dynamic, #d76f2a); }
.galaxy-guard-toolbar > label { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; color: var(--adaptive-text-muted, #8b7467); font-size: .58rem; font-weight: 900; }
#galaxy-guard-type { min-height: 2.25rem; padding: 0 2rem 0 .7rem; color: var(--adaptive-text-active, #382419); background: var(--adaptive-ui-input, transparent); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .7rem; font-size: .62rem; font-weight: 800; }
.galaxy-guard-list { overflow-y: auto; padding: 1rem; }
.galaxy-case { margin-bottom: .7rem; overflow: hidden; background: var(--adaptive-ui-panel-soft, rgba(135,85,55,.08)); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: 1rem; }
.galaxy-case.status-open { border-left: 3px solid #ef4f72; }
.galaxy-case.status-reviewing { border-left: 3px solid var(--color-dynamic, #d76f2a); }
.galaxy-case-summary { display: flex; width: 100%; align-items: center; gap: .8rem; padding: .85rem 1rem; text-align: left; }
.galaxy-case-summary:hover { background: var(--adaptive-ui-active, rgba(131,86,55,.08)); }
.galaxy-case-type { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; flex: 0 0 auto; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-radius: .8rem; }
.galaxy-case-type svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galaxy-case-main { display: grid; min-width: 0; gap: .13rem; flex: 1; }
.galaxy-case-main small { color: var(--color-dynamic, #d76f2a); font-size: .5rem; font-weight: 950; letter-spacing: .1em; }
.galaxy-case-main strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.galaxy-case-main > span { color: var(--adaptive-text-muted, #8b7467); font-size: .6rem; font-weight: 700; }
.galaxy-case-summary time { color: var(--adaptive-text-muted, #8b7467); font-size: .56rem; font-weight: 700; }
.galaxy-case-summary > i { color: var(--color-dynamic, #d76f2a); font-style: normal; transition: transform .2s ease; }
.galaxy-case.is-open .galaxy-case-summary > i { transform: rotate(180deg); }
.galaxy-case-details.hidden { display: none; }
.galaxy-case-details { position: relative; margin: 0 1rem 1rem 1.25rem; padding: .25rem 0 0 1.25rem; animation: galaxy-case-open .25s ease both; }
.galaxy-case-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 72%, transparent); transform-origin: top; animation: moderation-rail-in .3s ease both; }
@keyframes galaxy-case-open { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: translateY(0); } }
.galaxy-case-subject { display: flex; align-items: center; gap: .7rem; margin-bottom: .65rem; padding: .7rem .8rem; color: var(--adaptive-text-active, #382419); background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 9%, var(--adaptive-ui-input, transparent)); border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 28%, transparent); border-radius: .8rem; }
.galaxy-case-subject > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; flex: 0 0 auto; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-radius: .65rem; }
.galaxy-case-subject svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galaxy-case-subject > div { display: grid; min-width: 0; gap: .06rem; }
.galaxy-case-subject small { color: var(--color-dynamic, #d76f2a); font-size: .47rem; font-weight: 950; letter-spacing: .11em; }
.galaxy-case-subject strong { font-size: .69rem; }
.galaxy-case-subject p { overflow: hidden; margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .58rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.galaxy-case-evidence { display: grid; gap: .55rem; padding: .8rem; background: var(--adaptive-ui-input, rgba(255,255,255,.1)); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.16)); border-radius: .8rem; }
.galaxy-case-evidence > small { color: var(--color-dynamic, #d76f2a); font-size: .5rem; font-weight: 950; letter-spacing: .12em; }
.galaxy-case-evidence blockquote, .galaxy-case-evidence p { margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .65rem; line-height: 1.45; }
.galaxy-case-evidence blockquote { max-height: 5.5rem; overflow: auto; padding-left: .7rem; border-left: 2px solid var(--adaptive-ui-line, rgba(131,86,55,.25)); }
.galaxy-case-evidence dl { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; }
.galaxy-case-evidence dl div { display: grid; gap: .08rem; padding: .45rem .6rem; background: var(--adaptive-ui-active, rgba(131,86,55,.08)); border-radius: .6rem; }
.galaxy-case-evidence dt { color: var(--adaptive-text-muted, #8b7467); font-size: .47rem; font-weight: 800; }
.galaxy-case-evidence dd { margin: 0; font-size: .58rem; font-weight: 900; }
.galaxy-case-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.galaxy-case-actions > button, .galaxy-ban-menu > summary, .galaxy-ban-menu button { min-height: 2.15rem; padding: 0 .72rem; color: var(--adaptive-text-active, #382419); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .65rem; font-size: .56rem; font-weight: 900; }
.galaxy-case-actions button:hover, .galaxy-ban-menu > summary:hover { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(131,86,55,.08)); }
.galaxy-case-actions .is-danger, .galaxy-ban-menu .is-danger { color: #d34b51; border-color: rgba(211,75,81,.35); }
.galaxy-case-actions .is-primary { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.1)); border-color: color-mix(in srgb, var(--color-dynamic, #d76f2a) 45%, transparent); }
.galaxy-case-actions .is-muted { color: var(--adaptive-text-muted, #8b7467); }
.galaxy-ban-menu { position: relative; }
.galaxy-ban-menu > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.galaxy-ban-menu > div { position: absolute; right: 0; bottom: calc(100% + .4rem); z-index: 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; width: 13rem; padding: .5rem; background: var(--adaptive-ui-panel, #f6e8dd); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .75rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.25); }
.galaxy-guard-loading, .galaxy-guard-empty { display: grid; min-height: 17rem; place-items: center; align-content: center; gap: .55rem; color: var(--adaptive-text-muted, #8b7467); text-align: center; }
.galaxy-guard-loading > span { width: 2rem; height: 2rem; border: 3px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-top-color: var(--color-dynamic, #d76f2a); border-radius: 50%; animation: spin 1s linear infinite; }
.galaxy-guard-empty-icon { display: grid; width: 3rem; height: 3rem; place-items: center; color: #2ca66f; background: rgba(44,166,111,.12); border-radius: 1rem; font-size: 1.4rem; }
.galaxy-guard-empty b { font-size: .8rem; }
.galaxy-guard-empty span:not(.galaxy-guard-empty-icon) { font-size: .65rem; }

/* ------------[Личная история жалоб]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 30/203 */
.my-reports-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(58rem, calc(100vw - 2rem)); height: min(44rem, calc(100dvh - 2rem)); }
.my-reports-head { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.18)); }
.my-reports-emblem { display: grid; width: 3rem; height: 3rem; place-items: center; flex: 0 0 auto; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-radius: 1rem; }
.my-reports-emblem svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.my-reports-head > div { min-width: 0; flex: 1; }
.my-reports-head small { display: block; color: var(--color-dynamic, #d76f2a); font-size: .58rem; font-weight: 950; letter-spacing: .16em; }
.my-reports-head h2 { margin: .12rem 0; font-size: 1.25rem; font-weight: 950; line-height: 1.1; }
.my-reports-head p { overflow: hidden; margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.my-reports-close { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; flex: 0 0 auto; color: var(--adaptive-text-muted, #8b7467); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .85rem; font-size: 1.35rem; }
.my-reports-close:hover { color: #d34b51; background: rgba(211,75,81,.1); }
.my-reports-statuses { display: flex; gap: .45rem; overflow-x: auto; padding: .75rem 1rem; border-bottom: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.18)); scrollbar-width: none; }
.my-reports-statuses button { display: flex; min-height: 2.25rem; align-items: center; gap: .45rem; flex: 0 0 auto; padding: 0 .8rem; color: var(--adaptive-text-muted, #8b7467); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-radius: .72rem; font-size: .6rem; font-weight: 900; }
.my-reports-statuses button span { display: grid; min-width: 1.15rem; height: 1.15rem; place-items: center; padding: 0 .2rem; background: var(--adaptive-ui-active, rgba(131,86,55,.1)); border-radius: 999px; }
.my-reports-statuses button.is-active { color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.12)); border-color: var(--color-dynamic, #d76f2a); }
.my-reports-list { overflow-y: auto; padding: 1rem; }
.my-report-card { --report-state:#64748b; margin-bottom: .7rem; overflow: hidden; background: var(--adaptive-ui-panel-soft, rgba(135,85,55,.08)); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.2)); border-left: 3px solid var(--report-state); border-radius: 1rem; }
.my-report-card.is-pending { --report-state:#f59e0b; }
.my-report-card.is-reviewing { --report-state:#38bdf8; }
.my-report-card.is-actioned { --report-state:#22a06b; }
.my-report-card.is-dismissed { --report-state:#ef4f72; }
.my-report-card-main { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }
.my-report-type { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; flex: 0 0 auto; color: var(--report-state); background: color-mix(in srgb, var(--report-state) 13%, transparent); border-radius: .8rem; }
.my-report-type svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.my-report-card-main > div { display: grid; min-width: 0; gap: .12rem; flex: 1; }
.my-report-card-main small { color: var(--color-dynamic, #d76f2a); font-size: .5rem; font-weight: 950; letter-spacing: .1em; }
.my-report-card-main strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.my-report-card-main p { margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .6rem; font-weight: 700; }
.my-report-status { flex: 0 0 auto; padding: .42rem .62rem; color: var(--report-state); background: color-mix(in srgb, var(--report-state) 12%, transparent); border: 1px solid color-mix(in srgb, var(--report-state) 35%, transparent); border-radius: 999px; font-size: .55rem; font-weight: 950; }
.my-report-result { display: flex; align-items: center; gap: .7rem; margin: 0 .85rem .85rem; padding: .72rem; background: var(--adaptive-ui-input, rgba(255,255,255,.1)); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.16)); border-radius: .8rem; }
.my-report-result > img, .my-report-result > video { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; object-fit: cover; background:#111827; border-radius: .65rem; }
.my-report-result > span { display: grid; min-width: 0; gap: .18rem; flex: 1; }
.my-report-result b { font-size: .64rem; line-height: 1.4; }
.my-report-result small { color: var(--adaptive-text-muted, #8b7467); font-size: .55rem; line-height: 1.35; }
.my-report-result button { min-height: 2.15rem; flex: 0 0 auto; padding: 0 .72rem; color: var(--color-dynamic, #d76f2a); background: var(--adaptive-ui-active, rgba(215,111,42,.1)); border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 45%, transparent); border-radius: .65rem; font-size: .56rem; font-weight: 900; }

/* ------------[Подтверждение решения Стража]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 31/203 */
.galaxy-guard-confirm.hidden { display: none !important; }
.galaxy-guard-confirm { position: fixed; inset: 0; z-index: 10080; display: grid; place-items: center; padding: 1rem; }
.galaxy-guard-confirm-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 8, .64); backdrop-filter: blur(6px); }
.galaxy-guard-confirm > section { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); width: min(29rem, calc(100vw - 2rem)); gap: .9rem; padding: 1.2rem; color: var(--adaptive-text-active, #382419); background: var(--adaptive-ui-panel, var(--standard-panel, #f6e8dd)); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.24)); border-radius: 1.2rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.42); animation: galaxy-case-open .2s ease both; }
.galaxy-guard-confirm-icon { display: grid; width: 3rem; height: 3rem; place-items: center; color: #d34b51; background: rgba(211,75,81,.11); border-radius: .9rem; }
.galaxy-guard-confirm-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galaxy-guard-confirm > section > div { min-width: 0; }
.galaxy-guard-confirm small { color: var(--color-dynamic, #d76f2a); font-size: .52rem; font-weight: 950; letter-spacing: .14em; }
.galaxy-guard-confirm h3 { margin: .15rem 0 .3rem; font-size: 1rem; font-weight: 950; }
.galaxy-guard-confirm p { margin: 0; color: var(--adaptive-text-muted, #8b7467); font-size: .65rem; line-height: 1.45; }
.galaxy-guard-confirm footer { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: .55rem; padding-top: .35rem; }
.galaxy-guard-confirm footer button { min-height: 2.35rem; padding: 0 .9rem; color: var(--adaptive-text-active, #382419); border: 1px solid var(--adaptive-ui-line, rgba(131,86,55,.22)); border-radius: .7rem; font-size: .62rem; font-weight: 900; }
.galaxy-guard-confirm footer button.is-danger { color: #fff; background: #d34b51; border-color: #d34b51; }
@media (max-width: 720px) {
    .content-report-reasons { grid-template-columns: repeat(2, 1fr); }
    .galaxy-guard-modal { padding: 0; }
    .galaxy-guard-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
    .galaxy-guard-toolbar { align-items: stretch; flex-direction: column; }
    .galaxy-guard-toolbar > label { justify-content: flex-end; }
    .galaxy-case-summary time { display: none; }
    .galaxy-case-details { margin-right: .65rem; }
    .my-reports-modal { padding: 0; }
    .my-reports-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
    .my-report-card-main { align-items: flex-start; flex-wrap: wrap; }
    .my-report-status { margin-left: 3.35rem; }
    .my-report-result { align-items: stretch; flex-direction: column; }
}

@media (max-width: 640px) {
    .notifications-dropdown-v2 { position: fixed; top: 4rem; left: .5rem; right: .5rem; width: auto; max-height: calc(100vh - 4.5rem); transform: none; }
    .notification-history-modal { padding: .45rem; }
    .notification-history-dialog { max-height: calc(100vh - .9rem); border-radius: 1.15rem; }
    .notification-history-head { grid-template-columns: 2.6rem 1fr 2.25rem; padding: 1rem; }
    .notification-history-emblem { width: 2.6rem; height: 2.6rem; }
    .notification-history-head p { display: none; }
    .notification-history-filters, .notification-history-list { padding-left: 1rem; padding-right: 1rem; }
    .notification-history-footer { padding: .75rem 1rem; }
    .notification-history-footer > span { display: none; }
    .notification-history-footer button { margin-left: auto; }
    .profile-safety-menu { top: .75rem; right: .75rem; }
}
/* ------------[Сворачивание длинного текста]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 32/203 */
/* Создаёт компактную стеклянную шторку для публикаций, комментариев и ответов. */
.smart-text-collapsible { position: relative; overflow: hidden; transition: max-height 320ms ease; }
.smart-text-collapsible.smart-text-post.is-collapsed { max-height: 10.5rem; }
.smart-text-collapsible.smart-text-comment.is-collapsed { max-height: 6.75rem; }
.smart-text-collapsible.is-expanded { max-height: none; overflow: visible; }
.smart-text-collapsible.is-expanded { -webkit-mask-image: none; mask-image: none; }
.smart-text-collapsible.is-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 3.6rem), rgb(0 0 0 / .82) calc(100% - 2.65rem), rgb(0 0 0 / .34) calc(100% - 1.25rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 3.6rem), rgb(0 0 0 / .82) calc(100% - 2.65rem), rgb(0 0 0 / .34) calc(100% - 1.25rem), transparent 100%);
}
.smart-text-collapsible.is-collapsed::after {
  content: none;
}
#viewer-sidebar .smart-text-collapsible.is-collapsed::after {
  content: none;
}
.smart-text-toggle {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
  gap: .65rem;
  margin: -.15rem 0 .75rem;
  padding: .2rem .15rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text-muted, #64748b) 28%);
  cursor: pointer;
  isolation: isolate;
}
.smart-text-toggle-comment { min-height: 1.65rem; margin: .1rem 0 .2rem; }
.smart-text-toggle-line {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 62%));
}
.smart-text-toggle-line:last-child { transform: scaleX(-1); }
.smart-text-toggle-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .38rem;
  padding: .38rem .7rem;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 75%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--adaptive-card-tint, #fff) 68%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 62%), 0 6px 18px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 91%);
  backdrop-filter: blur(10px);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.smart-text-toggle-label svg {
  width: .85rem;
  height: .85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}
.smart-text-toggle.is-expanded .smart-text-toggle-label svg { transform: rotate(180deg); }
.smart-text-toggle:hover { color: var(--color-dynamic, #3b82f6); }
.smart-text-toggle:hover .smart-text-toggle-label {
  border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 52%);
  background: color-mix(in srgb, var(--adaptive-card-tint, #fff) 76%, var(--color-dynamic, #3b82f6) 10%);
}
.smart-text-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 58%);
  outline-offset: 2px;
  border-radius: .75rem;
}
@media (max-width: 520px) {
  .smart-text-collapsible.smart-text-post.is-collapsed { max-height: 9rem; }
  .smart-text-toggle { gap: .4rem; }
  .smart-text-toggle-label { padding: .34rem .58rem; font-size: .58rem; }
}
.profile-tab-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: var(--color-dynamic, #3b82f6);
  transition: color 160ms ease;
}
.profile-tab-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#profile-tabs-container .tab-btn:hover {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 94%, var(--color-dynamic, #3b82f6) 6%) !important;
  color: var(--color-dynamic, #3b82f6) !important;
}
#profile-tabs-container .tab-btn:hover .profile-tab-icon {
  color: var(--color-dynamic, #3b82f6) !important;
  background: transparent;
}
#profile-tabs-container .tab-btn.active-tab,
#profile-tabs-container .tab-btn.text-blue-500,
#profile-tabs-container .tab-btn.text-blue-600 {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 82%, var(--color-dynamic, #3b82f6) 18%) !important;
  color: var(--color-dynamic, #3b82f6) !important;
  box-shadow: none !important;
}
#profile-tabs-container .tab-btn.active-tab .profile-tab-icon,
#profile-tabs-container .tab-btn.text-blue-500 .profile-tab-icon,
#profile-tabs-container .tab-btn.text-blue-600 .profile-tab-icon {
  color: var(--color-dynamic, #3b82f6) !important;
  background: transparent;
  box-shadow: none;
}
#profile-tabs-container .tab-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%) !important;
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .profile-tabs-inner { padding-inline: 1.25rem; }
  .profile-tab-list { margin-left: 12rem; }
}
@media (min-width: 1024px) { .profile-tab-list { margin-left: 15rem; } }
@media (max-width: 520px) {
  .profile-tabs-inner { padding: .45rem .65rem; }
  .profile-tab-list { gap: .15rem; }
  #profile-tabs-container .tab-btn:not(.hidden) { min-height: 2.35rem; padding: .45rem .6rem; font-size: .8rem; }
  .profile-tab-icon { width: 1.1rem; height: 1.1rem; }
}
/* Закрепление пространств: без круговых индикаторов, активна только залитая иконка. */
.space-menu-pin-indicator,
.space-index-pin-indicator {
  width: 1.25rem;
  height: 1.25rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.space-menu-pin-indicator::after,
.space-index-pin-indicator::after {
  display: none !important;
}
.space-menu-pin-indicator svg,
.space-index-pin-indicator svg,
.spaces-index-menu button.is-header-pinned-action svg,
.space-manage-actions-menu button.is-header-pinned-action svg,
.spaces-index-menu button.is-favorite-action svg,
.space-manage-actions-menu button.is-favorite-action svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.45;
}
.spaces-index-menu button.is-favorite-action,
.space-manage-actions-menu button.is-favorite-action {
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%);
  color: var(--color-dynamic, #2563eb);
}
/* Каталог пространств: поиск рядом с созданием, переключатель вида отдельной строкой. */
.space-intro-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}
.space-intro-actions .spaces-index-search {
  width: clamp(12rem, 19vw, 17rem);
  height: 3rem;
}
.space-intro-actions .space-primary-button {
  min-width: 12rem;
  min-height: 3rem;
}
.spaces-index-toolbar {
  margin-bottom: 0.65rem;
}
.spaces-index-view-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
}
.spaces-index-view-row > span {
  color: color-mix(in srgb, var(--color-dynamic, #2563eb), var(--adaptive-muted, rgb(100 116 139)) 55%);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------[Расширенные фильтры пространств]------------ // Оформляет кнопку и раскрывающуюся панель точного поиска по каталогу. Модуль: «пространства». Часть 1/1 */
.spaces-index-search-wrap {
  position: relative;
  display: flex;
  width: clamp(14rem, 22vw, 20rem);
  min-width: 0;
  align-items: center;
}
.space-intro-actions .spaces-index-search-wrap .spaces-index-search {
  width: 100%;
  padding-right: 3.15rem;
}
.spaces-index-filter-toggle {
  position: absolute;
  right: .38rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 60%);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 84%, transparent);
  color: var(--color-dynamic, #2563eb);
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.spaces-index-filter-toggle:hover,
.spaces-index-filter-toggle.is-active {
  background: var(--color-dynamic, #2563eb);
  color: #fff;
  transform: translateY(-1px);
}
.spaces-index-filter-toggle svg,
.spaces-index-filter-panel svg,
.spaces-top-search svg,
.space-top-open-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spaces-index-filter-toggle span {
  position: absolute;
  top: -.32rem;
  right: -.32rem;
  display: grid;
  min-width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 2px solid var(--adaptive-surface, #fff);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  padding: 0 .2rem;
  font-size: .55rem;
  font-weight: 950;
}
.spaces-index-filter-panel {
  position: absolute;
  z-index: 160;
  top: calc(100% + .7rem);
  right: 0;
  display: grid;
  width: min(23rem, calc(100vw - 1rem));
  aspect-ratio: 1 / 1;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .9rem;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%);
  border-radius: 1.15rem;
  background: var(--adaptive-surface, #fff);
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1.5rem 3.5rem -1.25rem color-mix(in srgb, var(--color-dynamic, #2563eb), #020617 62%);
  transform-origin: top right;
  animation: space-filter-reveal 180ms ease-out both;
}
@keyframes space-filter-reveal { from { opacity: 0; transform: translateY(-.45rem) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.spaces-index-filter-panel > header,
.spaces-index-filter-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.spaces-index-filter-panel > header > div { display: grid; min-width: 0; gap: .15rem; }
.spaces-index-filter-panel > header span {
  color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a));
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spaces-index-filter-panel > header small { max-width: 14rem; color: var(--adaptive-muted, #64748b); font-size: .65rem; font-weight: 700; line-height: 1.35; }
.spaces-index-filter-panel > header button {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .68rem;
  background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%);
  color: var(--color-dynamic, #2563eb);
}
.spaces-index-filter-fields { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .55rem; }
.spaces-index-filter-fields label { display: grid; min-width: 0; gap: .35rem; }
.spaces-index-filter-fields label > span { color: var(--adaptive-muted, #64748b); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.spaces-index-filter-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 2.45rem;
  border: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 18%);
  border-radius: .75rem;
  outline: none;
  background: var(--adaptive-surface-2, #f8fafc);
  color: var(--adaptive-text, #0f172a);
  padding: .65rem .75rem;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
}
.spaces-index-filter-fields :is(input, select):focus { border-color: var(--color-dynamic, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%); }
.spaces-index-filter-panel > footer { display: grid; width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); align-self: end; }
.spaces-index-filter-panel > footer button { min-height: 2.55rem; border-radius: .75rem; padding: .55rem .72rem; font-size: .64rem; font-weight: 900; }
.space-filter-reset { background: var(--adaptive-surface-2, #f8fafc); color: var(--adaptive-muted, #64748b); }
.space-filter-apply { background: var(--color-dynamic, #2563eb); color: #fff; }

/* ------------[Рейтинг пространств]------------ // Размещает топ-100 в правой колонке и выделяет места платиной, золотом, серебром и бронзой. Модуль: «пространства». Часть 1/1 */
.spaces-index-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
  gap: 1rem;
  align-items: start;
}
.spaces-index-catalog-column .space-intro-main { min-width: 0; flex: 1 1 21rem; }
.spaces-index-catalog-column .space-intro-actions { min-width: 0; flex: 1 1 29rem; }
.spaces-index-catalog-column .spaces-index-search-wrap { width: auto; min-width: 11rem; flex: 1 1 14rem; }
.spaces-index-catalog-column .space-intro-actions .space-primary-button { min-width: 10.5rem; max-width: 12.5rem; flex: 1 1 11rem; padding-inline: .75rem; }
@media (min-width: 1024px) {
  body.spaces-catalog-route #profile-layout-grid > #content-main { grid-column: 3 / -1; }
  body.spaces-catalog-route #profile-right-rail { display: none !important; }
  body.spaces-catalog-route .space-page-shell { width: 100%; max-width: none; }
}
.spaces-index-catalog-column { min-width: 0; }
.spaces-index-catalog-column .spaces-index-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spaces-top-panel {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: .7rem;
  max-height: calc(100dvh - 6.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%);
  border-radius: 1.05rem;
  background: var(--adaptive-surface, #fff);
  padding: .85rem;
  box-shadow: 0 1.5rem 3rem -2.4rem color-mix(in srgb, var(--color-dynamic, #2563eb), #0f172a 58%);
}
.spaces-top-header { position: relative; display: flex; min-height: 4.1rem; align-items: center; justify-content: space-between; gap: .65rem; overflow: hidden; }
.spaces-top-header > div { position: relative; z-index: 2; display: grid; min-width: 0; gap: .12rem; }
.spaces-top-header span:not(.spaces-top-orbit) { color: var(--color-dynamic, #2563eb); font-size: .56rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.spaces-top-header h3 { margin: 0; color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a)); font-size: 1.12rem; font-weight: 950; line-height: 1.1; }
.spaces-top-header small { max-width: 13rem; color: var(--adaptive-muted, #64748b); font-size: .62rem; font-weight: 700; line-height: 1.35; }
.spaces-top-system-icon {
  width: 5rem;
  height: 5rem;
  flex: 0 0 5rem;
  object-fit: contain;
  filter: drop-shadow(0 .35rem .7rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 52%));
}
.spaces-top-orbit { position: relative; width: 3.65rem; height: 3.65rem; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 65%); border-radius: 50%; transform: rotate(-18deg); }
.spaces-top-orbit::before,
.spaces-top-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.spaces-top-orbit::before { inset: .82rem; background: radial-gradient(circle at 35% 30%, #fff 0 5%, var(--color-dynamic, #2563eb) 24%, var(--color-dynamic-secondary, #7c3aed) 72%); box-shadow: 0 0 1rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 35%); }
.spaces-top-orbit::after { inset: 1.55rem -.35rem; border: 2px solid color-mix(in srgb, var(--color-dynamic-secondary, #7c3aed), #f59e0b 32%); transform: rotate(9deg); }
.spaces-top-nominations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.spaces-top-nominations button { display: grid; min-width: 0; min-height: 2.55rem; grid-template-columns: .95rem minmax(0, 1fr); align-items: center; gap: .3rem; border: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 48%); border-radius: .7rem; background: var(--adaptive-surface-2, #f8fafc); color: var(--adaptive-muted, #64748b); padding: .35rem .42rem; text-align: left; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; }
.spaces-top-nominations button:hover { border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 48%); color: var(--color-dynamic, #2563eb); transform: translateY(-1px); }
.spaces-top-nominations button.is-active { border-color: transparent; background: var(--color-dynamic, #2563eb); color: #fff; box-shadow: 0 .55rem 1.1rem -.8rem var(--color-dynamic, #2563eb); }
.spaces-top-nominations svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spaces-top-nominations span { min-width: 0; overflow: hidden; font-size: .52rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.spaces-top-search { display: flex; min-height: 2.55rem; align-items: center; gap: .48rem; border-radius: .72rem; background: var(--adaptive-surface-2, #f8fafc); color: var(--adaptive-muted, #64748b); padding: 0 .7rem; }
.spaces-top-search-toggle {
  display: grid;
  width: 100%;
  min-height: 2.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .48rem;
  border: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 48%);
  border-radius: .72rem;
  background: var(--adaptive-surface-2, #f8fafc);
  color: var(--adaptive-muted, #64748b);
  padding: 0 .7rem;
  text-align: left;
}
.spaces-top-search-toggle:hover,
.spaces-top-search-toggle.is-active { border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 52%); color: var(--color-dynamic, #2563eb); }
.spaces-top-search-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spaces-top-search-toggle span { overflow: hidden; font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.spaces-top-search-chevron { transition: transform 180ms ease; }
.spaces-top-search-toggle.is-active .spaces-top-search-chevron { transform: rotate(180deg); }
.spaces-top-search-panel { overflow: hidden; animation: space-top-search-reveal 180ms ease-out both; }
@keyframes space-top-search-reveal { from { max-height: 0; opacity: 0; transform: translateY(-.3rem); } to { max-height: 4rem; opacity: 1; transform: translateY(0); } }
html:root body .spaces-top-search > input[type="search"] {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--adaptive-text, #0f172a);
  padding: 0 !important;
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
}
html:root body .spaces-top-search > input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.spaces-top-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; border-radius: .72rem; background: var(--adaptive-surface-2, #f8fafc); padding: .25rem; }
.spaces-top-limits button { min-height: 2rem; border-radius: .55rem; color: var(--adaptive-muted, #64748b); font-size: .62rem; font-weight: 900; }
.spaces-top-limits button:hover { color: var(--color-dynamic, #2563eb); }
.spaces-top-limits button.is-active { background: var(--color-dynamic, #2563eb); color: #fff; }
.spaces-top-list { display: grid; min-height: 0; gap: .42rem; overflow-y: auto; padding: .08rem .18rem .08rem 0; scrollbar-width: thin; }
.space-top-item { --rank-color: #b87333; --rank-soft: #f0b27a; position: relative; display: grid; width: 100%; grid-template-columns: 3.1rem 2.35rem minmax(0, 1fr) 1rem; align-items: center; gap: .48rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rank-color), transparent 73%); border-radius: .78rem; background: linear-gradient(105deg, color-mix(in srgb, var(--rank-color), transparent 88%), transparent 48%), var(--adaptive-surface-2, #f8fafc); color: var(--adaptive-text, #0f172a); padding: .42rem .5rem; text-align: left; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.space-top-item:hover { border-color: color-mix(in srgb, var(--rank-color), transparent 35%); transform: translateX(-.12rem); box-shadow: 0 .65rem 1.4rem -.95rem var(--rank-color); }
.space-top-item.is-platinum { --rank-color: #7dd3fc; --rank-soft: #c4b5fd; background: linear-gradient(110deg, color-mix(in srgb, #7dd3fc, transparent 78%), color-mix(in srgb, #c4b5fd, transparent 89%) 55%, transparent), var(--adaptive-surface-2, #f8fafc); }
.space-top-item.is-gold { --rank-color: #f59e0b; --rank-soft: #fde68a; }
.space-top-item.is-silver { --rank-color: #94a3b8; --rank-soft: #e2e8f0; }
.space-top-item.is-bronze { --rank-color: #b87333; --rank-soft: #f0b27a; }
.space-top-rank-icon { position: relative; display: grid; width: 3.05rem; height: 3.05rem; place-items: center; color: var(--rank-color); filter: drop-shadow(0 .3rem .45rem color-mix(in srgb, currentColor, transparent 62%)); }
.space-top-rank-icon::before,
.space-top-rank-icon::after { display: none; }
.space-top-rank-icon .space-rank-badge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: none; }
.space-top-rank-icon b { position: absolute; z-index: 2; top: 77%; left: 50%; display: grid; min-width: .82rem; height: .72rem; place-items: center; border-radius: .22rem; background: color-mix(in srgb, #020617, transparent 18%); color: #fff; padding: 0 .18rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-color), transparent 48%); font-size: .45rem; font-weight: 950; line-height: 1; text-shadow: 0 1px 2px #020617; transform: translate(-50%, -50%); }
.space-top-item.is-gold .space-top-rank-icon b { top: 81%; left: 27%; }
.space-top-item.is-silver .space-top-rank-icon b { top: 84%; left: 73%; }
.space-top-item.is-bronze .space-top-rank-icon b { top: 83%; left: 50%; min-width: 1.2rem; }
.space-top-item > img { width: 2.35rem; height: 2.35rem; border: 2px solid color-mix(in srgb, var(--rank-color), transparent 25%); border-radius: .65rem; object-fit: cover; }
.space-top-item-copy { display: grid; min-width: 0; gap: .06rem; }
.space-top-item-copy strong { overflow: hidden; color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a)); font-size: .72rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.space-top-item-copy small { overflow: hidden; color: var(--adaptive-muted, #64748b); font-size: .56rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.space-top-item-copy i { color: color-mix(in srgb, var(--rank-color), var(--adaptive-text, #0f172a) 28%); font-size: .5rem; font-style: normal; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.space-top-open-icon { color: color-mix(in srgb, var(--rank-color), var(--adaptive-muted, #64748b) 28%); }
.space-top-empty { border: 1px dashed color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 22%); border-radius: .75rem; color: var(--adaptive-muted, #64748b); padding: 1.25rem .75rem; font-size: .68rem; font-weight: 800; text-align: center; }
.spaces-top-panel > footer { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; border-top: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 45%); padding-top: .62rem; }
.spaces-top-panel > footer span { display: inline-flex; align-items: center; gap: .25rem; color: var(--adaptive-muted, #64748b); font-size: .52rem; font-weight: 850; }
.spaces-top-panel > footer i { width: .48rem; height: .48rem; border-radius: 50%; background: #b87333; box-shadow: 0 0 .45rem currentColor; }
.spaces-top-panel > footer i.is-platinum { background: linear-gradient(135deg, #7dd3fc, #c4b5fd); color: #7dd3fc; }
.spaces-top-panel > footer i.is-gold { background: #f59e0b; color: #f59e0b; }
.spaces-top-panel > footer i.is-silver { background: #94a3b8; color: #94a3b8; }
.spaces-top-panel > footer i.is-bronze { background: #b87333; color: #b87333; }

/* ------------[Административный рейтинг]------------ // Оформляет сезон, шесть номинаций, формулу баланса и безопасный сброс во всех темах. Модуль: «панель администратора». Часть 1/1 */
.space-rating-admin-modal { position: fixed; inset: 0; z-index: 23000; display: grid; place-items: center; padding: 1rem; }
.space-rating-admin-modal.hidden { display: none !important; }
.space-rating-admin-backdrop { position: absolute; inset: 0; border: 0; background: rgb(2 6 23 / .72); backdrop-filter: blur(12px); }
.space-rating-admin-dialog { position: relative; display: grid; width: min(44rem, calc(100vw - 2rem)); max-height: min(88dvh, 47rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 52%); border-radius: 1.3rem; background: var(--adaptive-surface, #fff); box-shadow: 0 2rem 6rem rgb(2 6 23 / .38); color: var(--adaptive-text, #0f172a); }
.space-rating-admin-dialog > header { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 35%); padding: .9rem 1rem; }
.space-rating-admin-dialog > header > img { width: 3.65rem; height: 3.65rem; object-fit: contain; filter: drop-shadow(0 .45rem .85rem color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 55%)); }
.space-rating-admin-dialog > header div { min-width: 0; }
.space-rating-admin-dialog > header span, .space-rating-admin-season span, .space-rating-admin-formula > span, .space-rating-admin-reset span { display: block; color: var(--color-dynamic, #2563eb); font-size: .57rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.space-rating-admin-dialog > header h2 { margin: .12rem 0 0; color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a)); font-size: 1.2rem; font-weight: 950; }
.space-rating-admin-dialog > header p { margin: .15rem 0 0; color: var(--adaptive-muted, #64748b); font-size: .68rem; font-weight: 700; }
.space-rating-admin-dialog > header > button { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .75rem; background: var(--adaptive-surface-2, #f8fafc); color: var(--adaptive-muted, #64748b); font-size: 1.25rem; }
.space-rating-admin-dialog > header > button:hover { color: var(--color-dynamic, #2563eb); }
.space-rating-admin-body { display: grid; gap: .75rem; overflow-y: auto; padding: 1rem; scrollbar-width: thin; }
.space-rating-admin-loading { display: grid; min-height: 15rem; place-items: center; color: var(--adaptive-muted, #64748b); font-size: .78rem; font-weight: 850; }
.space-rating-admin-loading.is-error { color: #ef4444; }
.space-rating-admin-season { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%); border-radius: .95rem; background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 92%); padding: .85rem .9rem; }
.space-rating-admin-season div { display: grid; min-width: 0; gap: .16rem; }
.space-rating-admin-season strong, .space-rating-admin-reset strong { color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a)); font-size: .83rem; font-weight: 950; }
.space-rating-admin-season small, .space-rating-admin-reset small, .space-rating-admin-formula small { color: var(--adaptive-muted, #64748b); font-size: .62rem; font-weight: 700; line-height: 1.4; }
.space-rating-admin-season > b { flex: 0 0 auto; border-radius: 999px; background: var(--color-dynamic, #2563eb); color: #fff; padding: .45rem .65rem; font-size: .58rem; font-weight: 950; }
.space-rating-admin-nominations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.space-rating-admin-nominations article { display: grid; min-width: 0; gap: .14rem; border: 1px solid color-mix(in srgb, var(--adaptive-border, #cbd5e1), transparent 35%); border-radius: .9rem; background: var(--adaptive-surface-2, #f8fafc); padding: .75rem; }
.space-rating-admin-nominations article:first-child { border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 50%); background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%); }
.space-rating-admin-nominations span { color: var(--color-dynamic, #2563eb); font-size: .55rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.space-rating-admin-nominations strong { overflow: hidden; color: var(--adaptive-text-strong, var(--adaptive-text, #0f172a)); font-size: .72rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.space-rating-admin-nominations small { color: var(--adaptive-muted, #64748b); font-size: .6rem; font-weight: 750; }
.space-rating-admin-formula { display: grid; gap: .45rem; border-radius: .95rem; background: var(--adaptive-surface-2, #f8fafc); padding: .85rem .9rem; }
.space-rating-admin-formula p { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.space-rating-admin-formula p b { border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 68%); border-radius: 999px; color: var(--adaptive-text, #0f172a); padding: .32rem .52rem; font-size: .58rem; font-weight: 850; }
.space-rating-admin-reset { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid rgb(239 68 68 / .3); border-radius: .95rem; background: rgb(239 68 68 / .055); padding: .9rem; }
.space-rating-admin-reset > div { display: grid; min-width: 0; gap: .16rem; }
.space-rating-admin-reset span { color: #ef4444; }
.space-rating-admin-reset > button { display: inline-flex; min-height: 2.55rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .42rem; border-radius: .75rem; background: #ef4444; color: #fff; padding: .65rem .8rem; font-size: .65rem; font-weight: 950; }
.space-rating-admin-reset > button:hover { background: #dc2626; }
.space-rating-admin-reset > button:disabled { cursor: wait; opacity: .7; }
.space-rating-admin-reset svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.space-rating-admin-spinner { width: .9rem; height: .9rem; border: 2px solid rgb(255 255 255 / .42); border-top-color: #fff; border-radius: 50%; animation: space-rating-admin-spin .7s linear infinite; }
@keyframes space-rating-admin-spin { to { transform: rotate(360deg); } }
body.space-rating-admin-open { overflow: hidden; }

@media (max-width: 620px) {
  .space-rating-admin-modal { align-items: end; padding: 0; }
  .space-rating-admin-dialog { width: 100%; max-height: 92dvh; border-radius: 1.2rem 1.2rem 0 0; }
  .space-rating-admin-dialog > header { grid-template-columns: 3.35rem minmax(0, 1fr) 2.3rem; }
  .space-rating-admin-dialog > header > img { width: 3rem; height: 3rem; }
  .space-rating-admin-nominations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .space-rating-admin-reset { align-items: stretch; flex-direction: column; }
  .space-rating-admin-reset > button { width: 100%; }
}

@media (max-width: 1280px) {
  .spaces-index-content-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem); }
  .spaces-index-catalog-column .space-intro-card { align-items: stretch; flex-direction: column; }
  .spaces-index-catalog-column .space-intro-main,
  .spaces-index-catalog-column .space-intro-actions { width: 100%; flex: 0 0 auto; }
  .spaces-index-catalog-column .spaces-index-search-wrap { flex: 1 1 auto; width: auto; }
}
@media (max-width: 1080px) {
  .spaces-index-content-layout { grid-template-columns: minmax(0, 1fr); }
  .spaces-top-panel { position: static; max-height: 34rem; }
}
@media (max-width: 1100px) {
  .space-intro-card {
    align-items: stretch;
    flex-direction: column;
  }
  .space-intro-actions {
    width: 100%;
  }
  .space-intro-actions .spaces-index-search {
    width: auto;
    flex: 1 1 auto;
  }
  .spaces-index-search-wrap { width: auto; flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .space-intro-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .space-intro-actions .spaces-index-search,
  .space-intro-actions .space-primary-button,
  .spaces-index-search-wrap {
    width: 100%;
  }
  .spaces-index-filter-fields { grid-template-columns: minmax(0, 1fr); }
  .spaces-index-catalog-column .spaces-index-grid:not(.is-list) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------[Личная жизнь: положение фотографий]------------ // Опускает пару аватаров к строке партнёра и удерживает её внутри карточки «О себе». Модуль: «профиль». Часть 1/1 */
html:root body #relationship-visual {
  align-self: start !important;
  margin-top: 1.75rem !important;
  overflow: visible !important;
}
html:root body #relationship-avatar-pair {
  align-items: center !important;
  justify-content: end !important;
  transform: none !important;
}
/* Современная команда пространства. */
.space-manage-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(27rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 5rem); border-radius: .8rem; }
.space-manage-body { min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; gap: .6rem; padding: .7rem; }
.space-team-section { display: grid; gap: .5rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%); border-radius: .72rem; background: var(--adaptive-card-tint, color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 88%, transparent)); padding: .62rem; }
.space-team-section > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.space-team-section > header > div { display: flex; align-items: center; gap: .45rem; }
.space-team-section > header span { color: var(--adaptive-text-strong, var(--adaptive-text, rgb(15 23 42))); font-size: .62rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.space-team-section > header small { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%); color: var(--color-dynamic, #2563eb); font-size: .62rem; font-weight: 950; }
.space-team-section > header button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 58%); border-radius: .7rem; background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%); color: var(--color-dynamic, #2563eb); font-size: 1.15rem; font-weight: 900; }
.space-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.space-team-grid > p { grid-column: 1 / -1; margin: 0; color: var(--adaptive-muted, rgb(100 116 139)); font-size: .68rem; font-weight: 750; }
.space-team-person { display: flex; min-width: 0; align-items: center; gap: .45rem; border: 1px solid color-mix(in srgb, var(--adaptive-border, rgb(226 232 240)), transparent 25%); border-radius: .62rem; background: color-mix(in srgb, var(--adaptive-surface, white) 92%, var(--color-dynamic, #2563eb) 8%); padding: .42rem; }
.space-team-person img { width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: .55rem; object-fit: cover; }
.space-team-person > span { min-width: 0; flex: 1 1 auto; }
.space-team-person strong, .space-team-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-team-person strong { color: var(--adaptive-text-strong, var(--adaptive-text, rgb(15 23 42))); font-size: .64rem; font-weight: 900; }
.space-team-person small { margin-top: .12rem; color: var(--adaptive-text-muted, var(--adaptive-muted, rgb(100 116 139))); font-size: .5rem; font-weight: 750; }
.space-team-person > button { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; color: rgb(239 68 68); font-size: 1rem; }
.space-team-person > button:hover { background: rgb(239 68 68 / .12); }
.space-team-edit-note { margin: 0; color: var(--adaptive-muted, rgb(100 116 139)); font-size: .62rem; font-weight: 750; line-height: 1.5; }
.space-role-picker-modal { position: fixed; inset: 0; z-index: 70000; display: none; align-items: center; justify-content: center; background: rgb(2 6 23 / .72); padding: 1rem; backdrop-filter: blur(12px); }
.space-role-picker-modal.is-open { display: flex; }
.space-role-picker-modal > section { width: min(27rem, 100%); max-height: min(76vh, 39rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 58%); border-radius: .9rem; background: var(--adaptive-surface, white); box-shadow: 0 2rem 5rem rgb(2 6 23 / .34); }
.space-role-picker-modal > section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--adaptive-border, rgb(226 232 240)); padding: 1rem; }
.space-role-picker-modal header span, .space-role-picker-modal header strong { display: block; }
.space-role-picker-modal header span { color: var(--adaptive-muted, rgb(100 116 139)); font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.space-role-picker-modal header strong { margin-top: .2rem; color: var(--adaptive-text-strong, var(--adaptive-text, rgb(15 23 42))); font-size: 1rem; font-weight: 950; }
.space-role-picker-modal header button { font-size: 1.5rem; color: var(--adaptive-muted, rgb(100 116 139)); }
.space-role-picker-search { display: flex; align-items: center; gap: .55rem; margin: .85rem; border: 1px solid var(--adaptive-border, rgb(226 232 240)); border-radius: .85rem; padding: .7rem .8rem; }
.space-role-picker-search svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.space-role-picker-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--adaptive-text, rgb(15 23 42)); }
.space-role-picker-list { display: grid; gap: .45rem; max-height: 25rem; overflow-y: auto; padding: 0 .85rem .85rem; }
.space-role-picker-list > button { display: flex; align-items: center; gap: .7rem; border-radius: .85rem; padding: .55rem; text-align: left; }
.space-role-picker-list > button:hover { background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%); }
.space-role-picker-list img { width: 2.6rem; height: 2.6rem; border-radius: .75rem; object-fit: cover; }
.space-role-picker-list span { min-width: 0; flex: 1; }
.space-role-picker-list strong, .space-role-picker-list small { display: block; }
.space-role-picker-list strong { color: var(--adaptive-text, rgb(15 23 42)); font-size: .76rem; font-weight: 900; }
.space-role-picker-list small { color: var(--adaptive-muted, rgb(100 116 139)); font-size: .62rem; }
.space-role-picker-list b { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: .6rem; background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%); color: var(--color-dynamic, #2563eb); }
html.adaptive-theme .space-manage-panel, html.adaptive-theme .space-role-picker-modal > section { border-color: color-mix(in srgb, var(--color-dynamic), transparent 58%); background: var(--adaptive-card-tint); color: var(--adaptive-text-strong); }
html.adaptive-theme .space-manage-panel header strong, html.adaptive-theme .space-team-person strong, html.adaptive-theme .space-team-section > header span, html.adaptive-theme .space-role-picker-modal header strong, html.adaptive-theme .space-role-picker-search input, html.adaptive-theme .space-role-picker-list strong { color: var(--adaptive-text-strong) !important; }
html.adaptive-theme .space-team-person small, html.adaptive-theme .space-team-edit-note, html.adaptive-theme .space-team-grid > p, html.adaptive-theme .space-role-picker-modal header span, html.adaptive-theme .space-role-picker-list small { color: var(--adaptive-text-muted) !important; }
.space-subscriber-actions-wrap { position: relative; }
.space-subscriber-kebab { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .75rem; background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 86%); color: var(--color-dynamic, #2563eb); }
.space-subscriber-kebab svg { width: 1rem; height: 1rem; fill: currentColor; }
.space-subscriber-actions-menu { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 40; display: grid; width: 11rem; gap: .2rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 64%); border-radius: .75rem; background: var(--adaptive-surface, white); padding: .35rem; box-shadow: 0 .9rem 2.2rem rgb(15 23 42 / .24); }
.space-subscriber-actions-menu.hidden { display: none; }
.space-subscriber-actions-menu button { display: flex; align-items: center; gap: .55rem; border-radius: .55rem; padding: .58rem .65rem; color: var(--adaptive-text-strong, var(--adaptive-text, rgb(15 23 42))); font-size: .65rem; font-weight: 850; text-align: left; }
.space-subscriber-actions-menu button:hover { background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%); }
.space-subscriber-actions-menu button.is-danger { color: rgb(239 68 68); }
.space-subscriber-actions-menu svg { width: .95rem; height: .95rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-profile-rank-btn.is-readonly { cursor: default; opacity: .7; }
@media (max-width: 560px) { .space-team-grid { grid-template-columns: 1fr; } }

/* ======[РОЛИ ПРОСТРАНСТВ В ПРОФИЛЕ]========== */
.profile-spaces-section {
    display: grid;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 82%, transparent);
    padding: 0.9rem;
}

.profile-spaces-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-spaces-kicker {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-muted, rgb(148 163 184)) 28%);
    font-size: 0.56rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-spaces-heading h4 {
    margin-top: 0.16rem;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.8rem;
    font-weight: 950;
}

.profile-spaces-count {
    display: inline-flex;
    min-width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: var(--color-dynamic, #3b82f6);
    font-size: 0.68rem;
    font-weight: 950;
}

.profile-spaces-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.profile-space-card {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, transparent);
    padding: 0.58rem;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.profile-space-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 55%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-surface, white) 94%);
}

.profile-space-card > img {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.72rem;
    object-fit: cover;
}

.profile-space-card-copy {
    min-width: 0;
}

.profile-space-card-copy strong,
.profile-space-card-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-space-card-copy strong {
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.72rem;
    font-weight: 950;
}

.profile-space-card-copy small {
    margin-top: 0.12rem;
    color: var(--adaptive-muted, rgb(148 163 184));
    font-size: 0.58rem;
    font-weight: 750;
}

.profile-space-role {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    padding: 0.28rem 0.46rem;
    font-size: 0.52rem;
    font-weight: 950;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.profile-space-role.is-creator {
    background: color-mix(in srgb, #eab308, transparent 84%);
    color: color-mix(in srgb, #b45309, var(--adaptive-text, rgb(30 41 59)) 16%);
}

.profile-space-card > svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
}

.profile-spaces-empty {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--adaptive-muted, rgb(148 163 184)), transparent 92%);
    color: var(--adaptive-muted, rgb(148 163 184));
    padding: 0.85rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.profile-spaces-empty.is-error {
    color: #ef4444;
}

/* ------------[Внешние контакты профиля]------------ // Оформляет ссылки после пространств и их компактную копию между медианавигацией и лентой во всех темах. Модуль: «внешние контакты профиля». Часть 1/1 */
.profile-contact-links-section {
    display: grid;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 56%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 88%, var(--color-dynamic, #3b82f6) 12%);
    padding: 0.9rem;
}

.profile-contact-links-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-contact-links-kicker {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    font-size: 0.56rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-contact-links-heading h4 {
    margin-top: 0.16rem;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    font-size: 0.8rem;
    font-weight: 950;
}

.profile-contact-links-count {
    display: inline-flex;
    min-width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 80%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 14%);
    font-size: 0.68rem;
    font-weight: 950;
}

.profile-contact-links-list,
.profile-contact-links-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.profile-contact-links-list.hidden,
.profile-contact-links-editor.hidden {
    display: none !important;
}

.profile-contact-link,
.profile-contact-edit-field {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.62rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 58%);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 93%, var(--color-dynamic, #3b82f6) 7%);
    padding: 0.58rem;
    color: var(--adaptive-text, rgb(30 41 59));
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.profile-contact-link:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 34%);
    background: color-mix(in srgb, var(--adaptive-surface, white) 84%, var(--color-dynamic, #3b82f6) 16%);
}

.profile-contact-link-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
    color: var(--color-dynamic, #3b82f6);
}

.profile-contact-link-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-contact-link-copy,
.profile-contact-edit-copy {
    min-width: 0;
    flex: 1;
}

.profile-contact-link-copy strong,
.profile-contact-link-copy small,
.profile-contact-edit-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-contact-link-copy strong,
.profile-contact-edit-copy strong {
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.7rem;
    font-weight: 950;
}

.profile-contact-link-copy small {
    margin-top: 0.1rem;
    color: var(--adaptive-muted, rgb(100 116 139));
    font-size: 0.56rem;
    font-weight: 750;
}

.profile-contact-edit-copy input {
    width: 100%;
    min-width: 0;
    margin-top: 0.2rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%);
    outline: 0;
    background: transparent;
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0.2rem 0;
    font-size: 0.62rem;
    font-weight: 750;
}

.profile-contact-links-empty {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--adaptive-muted, rgb(148 163 184)), transparent 92%);
    color: var(--adaptive-muted, rgb(100 116 139));
    padding: 0.8rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.profile-contact-links-bar {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 0.55rem;
}

.profile-contact-links-bar.hidden {
    display: none !important;
}

.profile-contact-links-bar-list {
    display: flex;
    align-items: center;
}

.profile-contact-dock,
.profile-contact-dock-links {
    display: flex;
    align-items: center;
}

.profile-contact-dock {
    gap: 0.55rem;
}

.profile-contact-dock-links {
    gap: 0.15rem;
}

.profile-contact-dock-divider {
    width: 1px;
    height: 1.25rem;
    flex: none;
    align-self: center;
    background: color-mix(in srgb, var(--adaptive-border, #e2e8f0) 72%, transparent);
    opacity: 0.72;
}

.profile-contact-link.is-compact {
    width: auto;
    min-height: 2.35rem;
    gap: 0.34rem;
    padding: 0.25rem 0.55rem 0.25rem 0.3rem;
    border-color: transparent;
    border-radius: 0.68rem;
    background: transparent;
    box-shadow: none;
}

.profile-contact-link.is-compact .profile-contact-link-icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.5rem;
}

.profile-contact-link.is-compact .profile-contact-link-copy strong {
    font-size: 0.63rem;
}

.profile-contact-link.is-compact:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--adaptive-surface-2, #f1f5f9) 88%, var(--color-dynamic, #3b82f6) 12%);
    transform: translateY(-1px);
}

.privacy-action-disabled {
    cursor: not-allowed !important;
    opacity: 0.38 !important;
    pointer-events: none !important;
}

.privacy-action-notice {
    width: 100%;
    border: 1px solid var(--adaptive-border, rgb(226 232 240));
    border-radius: 0.85rem;
    background: var(--adaptive-surface-2, rgb(248 250 252));
    color: var(--adaptive-muted, rgb(100 116 139));
    padding: 0.8rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.messenger-privacy-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 4rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid var(--adaptive-border, rgb(226 232 240));
    background: var(--adaptive-surface-1, rgb(255 255 255));
    color: var(--adaptive-muted, rgb(100 116 139));
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.messenger-privacy-notice .messenger-icon,
.messenger-privacy-notice svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.dark .profile-contact-link,
.dark .profile-contact-edit-field,
.dark .profile-contact-links-section {
    color: var(--adaptive-text, rgb(226 232 240));
}

html.adaptive-theme .profile-contact-links-section,
html.adaptive-theme .profile-contact-link,
html.adaptive-theme .profile-contact-edit-field {
    border-color: color-mix(in srgb, var(--color-dynamic), transparent 58%);
}

.space-about-loading {
    min-height: 12rem;
    display: grid;
    place-items: center;
    color: var(--adaptive-muted, rgb(148 163 184));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.space-about-link > img {
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 72%);
}

.space-about-link > span {
    min-width: 0;
    flex: 1;
}

.space-about-created strong {
    display: block;
    margin-top: 0.12rem;
    text-transform: capitalize;
}

.space-about-created small {
    display: block;
    color: var(--adaptive-muted, rgb(148 163 184));
    font-size: 0.62rem;
    font-weight: 800;
}

@media (max-width: 640px) {
    .profile-spaces-list {
        grid-template-columns: 1fr;
    }

    .profile-space-card {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    }

    .profile-space-card > img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .profile-space-card > svg {
        display: none;
    }

    .profile-contact-links-list,
    .profile-contact-links-editor {
        grid-template-columns: 1fr;
    }

    .profile-contact-links-bar {
        margin-left: 0;
        padding-left: 0.2rem;
    }
}

/* ------------[Карточка подробностей профиля]------------ // Оформляет развёрнутое описание и личные сведения отдельным спокойным разделом внутри окна «О себе». Модуль: «подробности профиля». Часть 2/4 */
.profile-details-section {
    display: grid;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 56%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 89%, var(--color-dynamic, #3b82f6) 11%);
    padding: 0.9rem;
}

.profile-details-section.is-story-only {
    gap: 0.65rem;
}

.profile-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-details-heading span,
.profile-details-story > span,
.profile-detail-card > span {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    font-size: 0.56rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-details-heading h4 {
    margin-top: 0.16rem;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    font-size: 0.8rem;
    font-weight: 950;
}

.profile-details-heading svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--color-dynamic, #3b82f6);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-details-story {
    position: relative;
    overflow: hidden;
    border-left: 3px solid var(--color-dynamic, #3b82f6);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    padding: 0.78rem 0.85rem;
}

.profile-details-story p {
    margin: 0.35rem 0 0;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
}

.profile-details-story textarea {
    width: 100%;
    min-height: 6.5rem;
    margin-top: 0.45rem;
    resize: vertical;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--adaptive-surface-2, #f8fafc) 90%, transparent);
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0.65rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    outline: none;
}
.profile-details-story-editor {
    position: relative;
    margin-top: 0.45rem;
}

.profile-details-story-editor textarea {
    margin-top: 0;
    padding-right: 2.65rem;
    padding-bottom: 2rem;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.profile-detail-card {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 66%);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    padding: 0.68rem 0.72rem;
}

.profile-detail-card p {
    overflow: hidden;
    margin: 0.35rem 0 0;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.profile-detail-card input,
.profile-detail-card select {
    width: 100%;
    min-width: 0;
    height: 2.2rem;
    margin-top: 0.25rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 56%);
    border-radius: 0;
    background: transparent;
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0;
    font-size: 0.65rem;
    font-weight: 800;
    outline: none;
}

.profile-details-story textarea:focus,
.profile-detail-card input:focus,
.profile-detail-card select:focus {
    border-color: var(--color-dynamic, #3b82f6);
}

/* ------------[Композиция личной жизни]------------ // Размещает детей и знакомства внутри карточки отношений и сохраняет читаемость в обоих режимах. Модуль: «личный профиль». Часть 4/5 */
.profile-personal-life-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 74%);
}

.profile-personal-life-details.is-dating-hidden {
    grid-template-columns: 1fr;
}

.profile-personal-life-row {
    min-width: 0;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 92%, var(--color-dynamic, #3b82f6) 8%);
    padding: 0.6rem 0.65rem;
}

.profile-personal-life-row > span {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    font-size: 0.54rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-personal-life-row p {
    margin: 0.28rem 0 0;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.4;
}

.profile-personal-life-row select,
.profile-personal-life-row input {
    width: 100%;
    min-width: 0;
    height: 2.15rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 56%);
    border-radius: 0;
    background: transparent;
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0;
    font-size: 0.64rem;
    font-weight: 800;
    outline: none;
}

#edit-children-wrap {
    margin-top: 0.25rem;
}

/* ------------[Структура рабочей карточки]------------ // Заполняет растянутую карточку отдельными уровнями места, должности и дополнительной деятельности. Модуль: «личный профиль». Часть 1/2 */
.profile-work-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.profile-work-kicker,
.profile-work-main > span,
.profile-work-row > span {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 20%);
    font-size: 0.52rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    line-height: 1.15;
    text-transform: uppercase;
}

.profile-work-main {
    margin-top: 0.65rem;
}

.profile-work-main p {
    margin: 0.3rem 0 0;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.35;
    text-transform: uppercase;
}

.profile-work-details {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.72rem;
    padding-top: 0.72rem;
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
}

.profile-work-row {
    min-width: 0;
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 92%, var(--color-dynamic, #3b82f6) 8%);
    padding: 0.52rem 0.58rem;
}

.profile-work-row p {
    margin: 0.25rem 0 0;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.64rem;
    font-weight: 830;
    line-height: 1.35;
}

.profile-work-card input {
    width: 100%;
    min-width: 0;
    height: 1.95rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 52%);
    border-radius: 0;
    background: transparent;
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0;
    font-size: 0.64rem;
    font-weight: 820;
    outline: none;
}

.profile-work-main input {
    font-size: 0.72rem;
    font-weight: 900;
}

/* ------------[Компас жизненных ориентиров]------------ // Показывает ценности спокойной текстовой композицией, а выбор переносит в отдельную сетку с галочками. Модуль: «личный профиль». Часть 5/5 */
.profile-life-values-card {
    position: relative;
    overflow: hidden;
}

.profile-life-values-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-life-values-heading > div {
    min-width: 0;
}

.profile-life-values-kicker {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 20%);
    font-size: 0.5rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.profile-life-values-heading strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
}

.profile-life-values-counter {
    flex: 0 0 auto;
    min-width: 2.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    color: var(--color-dynamic, #3b82f6);
    padding: 0.38rem 0.52rem;
    font-size: 0.56rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.profile-life-values-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.85rem;
    row-gap: 0.38rem;
    margin-top: 0.72rem;
}

.profile-life-values-list > span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--adaptive-text, rgb(30 41 59));
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1.25;
}

.profile-life-values-list > span::before {
    width: 0.34rem;
    height: 0.34rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), white 12%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 18%);
    content: "";
    transform: rotate(45deg);
}

.profile-life-values-list > span.is-empty {
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-weight: 750;
}

.profile-life-values-list > span.is-empty::before {
    display: none;
}

.profile-life-values-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
    margin-top: 0.72rem;
    padding-top: 0.72rem;
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
}

.profile-life-values-picker.hidden,
.profile-life-values-counter.hidden {
    display: none;
}

.profile-life-value-chip {
    display: flex;
    min-width: 0;
    min-height: 2rem;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0.35rem 0.48rem;
    font-size: 0.57rem;
    font-weight: 850;
    line-height: 1.1;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.profile-life-value-chip::before {
    display: grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 58%);
    border-radius: 50%;
    color: white;
    content: "";
    font-size: 0.58rem;
    font-weight: 950;
}

.profile-life-value-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 52%);
}

.profile-life-value-chip.is-selected {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 38%);
    background: color-mix(in srgb, var(--adaptive-surface, white) 78%, var(--color-dynamic, #3b82f6) 22%);
    color: color-mix(in srgb, var(--adaptive-text, rgb(30 41 59)) 78%, var(--color-dynamic, #3b82f6) 22%);
}

.profile-life-value-chip.is-selected::before {
    border-color: var(--color-dynamic, #3b82f6);
    background: var(--color-dynamic, #3b82f6);
    content: "✓";
}

@media (max-width: 640px) {
    .profile-details-grid {
        grid-template-columns: 1fr;
    }
    .profile-personal-life-details {
        grid-template-columns: 1fr;
    }
}

/* ======[КОМПАКТНОЕ СКРУГЛЕНИЕ И ЦВЕТА ИНФОРМАЦИОННЫХ ФОРМ]========== */
#about-modal > div {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 62%) !important;
    border-radius: 1.2rem !important;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #d66a2c) 6%) !important;
}

/* ------------[Компактные шапки анкет]------------ // Уменьшает вертикальный воздух и ставит заголовки, карандаш и закрытие на единую центральную линию. Модуль: «профиль и пространства». Часть 2/2 */
#about-modal .about-modal-head {
    min-height: 3.25rem;
    flex: 0 0 auto;
    gap: 0.25rem;
    padding: 0.7rem 1.4rem 0.35rem !important;
}

#about-modal .about-modal-head #modal-title {
    align-self: center;
    margin: 0;
    line-height: 1.2;
}

#about-modal .about-modal-head .about-header-icon-button {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.65rem;
}

#about-modal .about-modal-head #about-close-header-btn {
    margin-left: 0.18rem;
}

.space-about-head {
    min-height: 3.25rem;
    gap: 0.35rem;
    padding: 0.7rem 1.4rem 0.35rem;
}

.space-about-title-group > span {
    line-height: 1.2;
}

.space-about-edit-button,
.space-about-close {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.65rem;
}

@media (max-width: 640px) {
    #about-modal .about-modal-head,
    .space-about-head {
        padding-inline: 1rem !important;
    }
}

#about-modal [class~="rounded-3xl"] {
    border-radius: 0.95rem !important;
}

#about-modal [class~="rounded-2xl"] {
    border-radius: 0.8rem !important;
}

#about-modal [class*="border-blue-"],
#about-modal [class*="border-gray-"] {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 70%) !important;
}

#about-modal [class*="bg-blue-50"],
#about-modal [class*="bg-gray-50"] {
    background-color: color-mix(in srgb, var(--adaptive-surface, white) 90%, var(--color-dynamic, #d66a2c) 10%) !important;
}

.profile-spaces-section {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 56%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 88%, var(--color-dynamic, #d66a2c) 12%);
}

.profile-spaces-kicker,
.profile-spaces-heading h4 {
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-text, rgb(30 41 59)) 18%);
}

.profile-spaces-count {
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 80%);
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-text, rgb(30 41 59)) 14%);
}

.profile-space-card {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 58%);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 93%, var(--color-dynamic, #d66a2c) 7%);
}

.profile-space-card:hover {
    border-color: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 34%);
    background: color-mix(in srgb, var(--adaptive-surface, white) 84%, var(--color-dynamic, #d66a2c) 16%);
}

.profile-space-card > img {
    border-radius: 0.58rem;
}

.profile-space-card-copy strong {
    color: color-mix(in srgb, var(--adaptive-text, rgb(30 41 59)), var(--color-dynamic, #d66a2c) 12%);
}

.profile-space-role,
.profile-space-role.is-creator {
    background: color-mix(in srgb, var(--color-dynamic, #d66a2c), transparent 82%);
    color: color-mix(in srgb, var(--color-dynamic, #d66a2c), var(--adaptive-text, rgb(30 41 59)) 16%);
}

.space-about-panel {
    border-radius: 1.2rem;
}

.space-about-quote {
    border-radius: 0.9rem;
}

.space-about-card {
    border-radius: 0.78rem;
}

.space-about-link,
.space-related-option {
    border-radius: 0.68rem;
}

.space-about-link > img {
    border-radius: 0.58rem;
}

/* ======[ОБНОВЛЁННЫЙ РАЗДЕЛ ДРУЗЕЙ]========== */
.profile-call-action {
    display: grid;
    width: 2.7rem;
    min-width: 2.7rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6) 42%, transparent);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6) 13%, var(--adaptive-surface, #fff));
    color: var(--color-dynamic, #3b82f6);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.profile-call-action.hidden { display: none !important; }
.profile-call-action:hover { transform: translateY(-1px); background: var(--color-dynamic, #3b82f6); color: #fff; }
.profile-call-action svg { width: 1.18rem; height: 1.18rem; }

#friends-list-full {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 0.8rem 1rem 1rem;
    background: transparent !important;
}

.friends-list-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 4.7rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    padding: 0.65rem 0.75rem;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.friends-list-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 48%);
    background: color-mix(in srgb, var(--adaptive-surface, white) 88%, var(--color-dynamic, #3b82f6) 12%);
    box-shadow: 0 0.8rem 1.8rem -1.35rem color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 42%);
}

.friend-row-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.friend-row-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 50%;
    object-fit: cover;
}

.friend-row-identity h4 {
    overflow: hidden;
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-row-identity p {
    overflow: hidden;
    margin-top: 0.16rem;
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.65rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-row-actions {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.friend-row-action,
.friend-row-menu-button {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 91%, var(--color-dynamic, #3b82f6) 9%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 14%);
    padding: 0.48rem 0.68rem;
    font-size: 0.68rem;
    font-weight: 850;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.friend-row-action:hover,
.friend-row-menu-button:hover {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 44%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
}
.friend-row-action.is-call { min-width: 2.15rem; padding-inline: .58rem; color: var(--color-dynamic, #3b82f6); }
.friend-row-action.is-call svg { width: 1rem; height: 1rem; }

.vmesta-entry-call-mark {
    overflow: visible;
    fill: currentColor !important;
    stroke: none !important;
}
.vmesta-entry-call-mark path { fill: currentColor !important; stroke: none !important; }

.friend-row-menu-button {
    width: 2.15rem;
    padding: 0;
}

.friends-search-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%);
    padding: 1.1rem 1.2rem 0.85rem;
}

.friends-search-head span,
.friends-search-section-title span {
    display: block;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text-muted, rgb(148 163 184)) 28%);
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.friends-search-head strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: 0.95rem;
    font-weight: 950;
}

.friends-search-head > small {
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.6rem;
    font-weight: 800;
}

.friends-search-toolbar {
    padding: 0.9rem 1rem;
}

.friends-search-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 70%);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 90%, var(--color-dynamic, #3b82f6) 10%);
}

.friends-search-field > svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.85rem;
    flex: none;
    fill: none;
    stroke: var(--adaptive-text-muted, rgb(148 163 184));
    stroke-width: 2;
}

.friends-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--adaptive-text-strong, rgb(30 41 59));
    padding: 0.72rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 750;
    outline: none;
}

.friends-filter-button {
    position: relative;
    display: grid;
    width: 2.4rem;
    height: 2.25rem;
    margin-right: 0.28rem;
    flex: none;
    place-items: center;
    border-left: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text-muted, rgb(148 163 184)) 30%);
    transition: background 0.18s ease, color 0.18s ease;
}

.friends-filter-button:hover,
.friends-filter-button.is-active,
.friends-filter-button.has-filters {
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
    color: var(--color-dynamic, #3b82f6);
}

.friends-filter-button > span {
    position: absolute;
    top: -0.18rem;
    right: -0.16rem;
    display: grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    border: 2px solid var(--adaptive-surface, white);
    border-radius: 999px;
    background: var(--color-dynamic, #3b82f6);
    color: white;
    font-size: 0.47rem;
    font-weight: 950;
}

.friends-filter-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* ------------[Панель параметров поиска]------------ // Оформляет раскрываемые поля поиска людей без отдельной тяжёлой страницы. Модуль: «поиск друзей». Часть 1/4 */
.friends-search-filters {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 90%, var(--color-dynamic, #3b82f6) 10%);
    box-shadow: 0 0.8rem 1.8rem -1.2rem rgb(15 23 42 / 0.32);
    padding: 0.85rem;
}

.friends-search-filters[hidden] {
    display: none;
}

.friends-filter-heading,
.friends-filter-footer,
.friends-filter-footer > div {
    display: flex;
    align-items: center;
}

.friends-filter-heading,
.friends-filter-footer {
    justify-content: space-between;
    gap: 0.8rem;
}

.friends-filter-heading span,
.friends-filter-heading small {
    display: block;
}

.friends-filter-heading span {
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.friends-filter-heading small {
    margin-top: 0.12rem;
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.54rem;
    font-weight: 720;
}

.friends-filter-heading > button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 0.55rem;
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 1.2rem;
    line-height: 1;
}

.friends-filter-heading > button:hover {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: var(--color-dynamic, #3b82f6);
}

.friends-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.friends-filter-grid > label {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
}

.friends-filter-grid > label > span:first-child {
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.friends-filter-grid input,
.friends-filter-grid select {
    width: 100%;
    min-width: 0;
    height: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 78%);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--adaptive-surface-2, rgb(248 250 252)) 94%, var(--color-dynamic, #3b82f6) 6%);
    color: var(--adaptive-text-strong, rgb(30 41 59));
    padding: 0 0.65rem;
    font-size: 0.62rem;
    font-weight: 760;
    outline: none;
}

.friends-filter-grid input:focus,
.friends-filter-grid select:focus {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}

.friends-filter-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
}

.friends-filter-range i {
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-style: normal;
}

.friends-filter-photo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--adaptive-text, rgb(51 65 85));
    font-size: 0.6rem;
    font-weight: 850;
}

.friends-filter-photo input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-dynamic, #3b82f6);
}

.friends-filter-footer > div {
    gap: 0.45rem;
}

.friends-filter-reset,
.friends-filter-apply {
    border-radius: 0.58rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.56rem;
    font-weight: 920;
}

.friends-filter-reset {
    color: var(--adaptive-text-muted, rgb(100 116 139));
}

.friends-filter-apply {
    background: var(--color-dynamic, #3b82f6);
    color: white;
}

.friends-search-content {
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    padding: 0.9rem 1rem 1.1rem;
}

.friends-search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.friends-search-section-title small {
    display: inline-grid;
    min-width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    color: var(--color-dynamic, #3b82f6);
    font-size: 0.6rem;
    font-weight: 950;
}

.friends-search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.friend-search-card {
    position: relative;
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    padding: 0.85rem;
}

.friend-search-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding-right: 5.5rem;
    text-align: left;
}

.friend-search-avatar-wrap {
    position: relative;
    flex: none;
}

.friend-search-avatar-wrap img {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    object-fit: cover;
}

.friend-search-avatar-wrap i {
    position: absolute;
    right: -0.15rem;
    bottom: -0.1rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--adaptive-surface, white);
    border-radius: 50%;
    background: rgb(148 163 184);
}

.friend-search-avatar-wrap i.is-online {
    background: rgb(34 197 94);
}

.friend-search-copy {
    min-width: 0;
}

.friend-search-copy strong,
.friend-search-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-search-copy strong {
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: 0.78rem;
    font-weight: 950;
}

.friend-search-copy small,
.friend-search-card > p {
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.62rem;
    font-weight: 750;
}

.friend-search-card > p {
    min-height: 2.4em;
    margin: 0;
    overflow: hidden;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ------------[Информация в рекомендациях]------------ // Выравнивает карточки и компактно показывает деятельность с жизненными ориентирами под статусом. Модуль: «поиск друзей». Часть 1/2 */
.friend-search-details {
    display: grid;
    height: 4.3rem;
    min-width: 0;
    align-content: start;
    gap: 0.42rem;
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 80%);
    padding-top: 0.52rem;
}

.friend-search-activity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: color-mix(in srgb, var(--adaptive-text, rgb(30 41 59)) 78%, var(--color-dynamic, #3b82f6) 22%);
    font-size: 0.58rem;
    font-weight: 850;
}

.friend-search-activity svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--color-dynamic, #3b82f6);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.friend-search-activity span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-search-values {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    overflow: hidden;
}

.friend-search-values span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.28rem;
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 0.53rem;
    font-weight: 820;
    white-space: nowrap;
}

.friend-search-values span::before {
    width: 0.28rem;
    height: 0.28rem;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 15%);
    content: "";
    transform: rotate(45deg);
}

/* ------------[Строка интересов рекомендации]------------ // Показывает любимые занятия отдельной компактной строкой и сохраняет одинаковую высоту карточек. Модуль: «поиск друзей». Часть 2/4 */
.friend-search-interests {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.38rem;
    color: color-mix(in srgb, var(--adaptive-text, rgb(30 41 59)) 80%, var(--color-dynamic, #3b82f6) 20%);
    font-size: 0.55rem;
    font-weight: 820;
}

.friend-search-interests svg {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--color-dynamic, #3b82f6);
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.friend-search-interests span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-search-details-empty {
    margin: 0;
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.55rem;
    font-weight: 720;
}

.friend-search-add {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    gap: 0.3rem;
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
    color: var(--color-dynamic, #3b82f6);
    padding: 0.38rem 0.5rem;
    font-size: 0.56rem;
    font-weight: 900;
}

.friend-search-add svg,
.recommended-friend-add svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.friend-search-add.is-sent,
.recommended-friend-add.is-sent {
    background: rgb(34 197 94 / 0.14);
    color: rgb(22 163 74);
}

.friend-search-add.is-friend {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text-strong, rgb(30 41 59)) 18%);
}

.friend-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.friend-search-actions button {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 72%);
    border-radius: 0.58rem;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 16%);
    padding: 0.48rem;
    font-size: 0.6rem;
    font-weight: 900;
}

.friend-search-actions button:hover {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}

.friends-search-empty {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--adaptive-text-muted, rgb(148 163 184)), transparent 92%);
    color: var(--adaptive-text-muted, rgb(148 163 184));
    padding: 3rem 1rem;
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
}

.recommended-friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.32rem 0;
}

.recommended-friend-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.58rem;
    text-align: left;
}

.recommended-friend-avatar {
    position: relative;
    flex: none;
}

.recommended-friend-avatar img {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    object-fit: cover;
}

.recommended-friend-avatar i {
    position: absolute;
    right: -0.1rem;
    bottom: -0.08rem;
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid var(--adaptive-surface, white);
    border-radius: 50%;
    background: rgb(148 163 184);
}

.recommended-friend-person > span:last-child {
    min-width: 0;
}

.recommended-friend-person strong,
.recommended-friend-person small,
.recommended-friend-person em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommended-friend-person strong {
    color: var(--adaptive-text-strong, rgb(30 41 59));
    font-size: 0.65rem;
    font-weight: 950;
}

.recommended-friend-person small {
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.55rem;
    font-weight: 750;
}

/* ------------[Подробность боковой рекомендации]------------ // Добавляет одну приглушённую строку деятельности, сохраняя компактность правой панели. Модуль: «поиск друзей». Часть 2/2 */
.recommended-friend-person em {
    max-width: 9.5rem;
    margin-top: 0.1rem;
    color: color-mix(in srgb, var(--adaptive-text-muted, rgb(148 163 184)), var(--color-dynamic, #3b82f6) 26%);
    font-size: 0.49rem;
    font-style: normal;
    font-weight: 760;
}

.recommended-friend-add {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.58rem;
    color: var(--color-dynamic, #3b82f6);
}

.recommended-friend-add span {
    display: none;
}

@media (max-width: 720px) {
    .friends-search-grid {
        grid-template-columns: 1fr;
    }

    .friends-list-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .friend-row-menu-wrap {
        display: none;
    }
}

@media (max-width: 520px) {
    #friends-list-full {
        padding-inline: 0.7rem;
    }

    .friend-row-action {
        width: 2.15rem;
        padding-inline: 0;
    }
}

/* ======[МЕНЮ И НЕОГРАНИЧЕННЫЕ РЕКОМЕНДАЦИИ ДРУЗЕЙ]========== */
#friends-viewport:has(#friends-list-full) {
    overflow: visible;
}

.friends-list-row {
    z-index: 1;
}

.friends-list-row.is-menu-open {
    z-index: 300;
}

.friend-row-menu-wrap .friend-dropdown {
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 500 !important;
    margin-top: 0 !important;
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 62%) !important;
    border-radius: 0.7rem !important;
    background: color-mix(in srgb, var(--adaptive-surface, white) 92%, var(--color-dynamic, #3b82f6) 8%) !important;
    box-shadow: 0 1rem 2.4rem -0.9rem rgb(15 23 42 / 0.38) !important;
}

/* ------------[Близость в строке друга]------------ // Показывает личную категорию и оформляет новый пункт меню без смешивания с опасным удалением. Модуль: «списки друзей». Часть 1/3 */
.friend-closeness-badge {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text, rgb(30 41 59)) 18%);
    padding: 0.2rem 0.42rem;
    font-size: 0.5rem;
    font-weight: 900;
    line-height: 1;
}

/* ------------[Строка логина и близости]------------ // Выравнивает идентификатор и личную категорию друга на одной базовой линии. Модуль: «списки друзей». Часть 2/2 */
.friend-row-login-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.42rem;
}

.friend-row-login-line > p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-closeness-menu-action {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%);
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0.75rem 0.85rem;
    text-align: left;
}

.friend-closeness-menu-action:hover {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 89%);
}

.friend-closeness-menu-action > svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--color-dynamic, #3b82f6);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.friend-closeness-menu-action span,
.friend-closeness-menu-action strong,
.friend-closeness-menu-action small {
    display: block;
    min-width: 0;
}

.friend-closeness-menu-action strong {
    font-size: 0.62rem;
    font-weight: 920;
}

.friend-closeness-menu-action small {
    margin-top: 0.15rem;
    color: var(--adaptive-text-muted, rgb(148 163 184));
    font-size: 0.5rem;
    font-weight: 760;
}

.friend-row-menu-wrap .friend-dropdown.friend-dropdown-up {
    top: auto;
    bottom: calc(100% + 0.45rem);
}

/* ------------[Окно списков друзей]------------ // Выводит семь категорий близости в компактном адаптивном модальном выборе. Модуль: «списки друзей». Часть 2/3 */
.friend-closeness-modal {
    position: fixed;
    inset: 0;
    z-index: 72000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgb(2 6 23 / 0.68);
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.friend-closeness-modal.is-open {
    display: flex;
}

.friend-closeness-modal.hidden {
    display: none;
}

.friend-closeness-modal > section {
    width: min(25rem, 100%);
    max-height: min(82vh, 38rem);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 54%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 94%, var(--color-dynamic, #3b82f6) 6%);
    box-shadow: 0 2rem 5rem rgb(2 6 23 / 0.38);
    padding: 1rem;
}

.friend-closeness-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.friend-closeness-modal header span,
.friend-closeness-modal header strong {
    display: block;
}

.friend-closeness-modal header span {
    color: var(--color-dynamic, #3b82f6);
    font-size: 0.52rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.friend-closeness-modal header strong {
    margin-top: 0.25rem;
    color: var(--adaptive-text-strong, var(--adaptive-text, rgb(30 41 59)));
    font-size: 0.82rem;
    font-weight: 950;
}

.friend-closeness-modal header button {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.65rem;
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 1.25rem;
}

.friend-closeness-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.friend-closeness-options > button {
    display: flex;
    min-width: 0;
    min-height: 3.35rem;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--adaptive-surface, white) 96%, var(--color-dynamic, #3b82f6) 4%);
    color: var(--adaptive-text, rgb(30 41 59));
    padding: 0.58rem;
    text-align: left;
}

.friend-closeness-options > button:hover,
.friend-closeness-options > button.is-selected {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 38%);
    background: color-mix(in srgb, var(--adaptive-surface, white) 80%, var(--color-dynamic, #3b82f6) 20%);
}

.friend-closeness-options i {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 48%);
    border-radius: 50%;
}

.friend-closeness-options > button.is-selected i {
    border: 0.25rem solid color-mix(in srgb, var(--color-dynamic, #3b82f6), white 8%);
    background: var(--color-dynamic, #3b82f6);
}

.friend-closeness-options span,
.friend-closeness-options strong,
.friend-closeness-options small {
    display: block;
    min-width: 0;
}

.friend-closeness-options strong {
    font-size: 0.6rem;
    font-weight: 900;
}

.friend-closeness-options small {
    margin-top: 0.14rem;
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 0.49rem;
    font-weight: 720;
}

.friend-closeness-modal > section > p {
    margin: 0.8rem 0 0;
    color: var(--adaptive-text-muted, rgb(100 116 139));
    font-size: 0.52rem;
    font-weight: 750;
    text-align: center;
}

/* ------------[Мобильный список близости]------------ // Переводит варианты в одну колонку на узком экране. Модуль: «списки друзей». Часть 3/3 */
@media (max-width: 520px) {
    .friend-closeness-options {
        grid-template-columns: 1fr;
    }
}

#recomended-friends-side {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: none;
}

.recommended-friend-row {
    border-radius: 0.62rem;
    padding: 0.42rem 0.35rem;
    transition: background 160ms ease;
}

.recommended-friend-row:hover {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}

.recommended-friend-person strong {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), var(--adaptive-text-strong, rgb(30 41 59)) 42%);
    font-size: 0.68rem;
    letter-spacing: 0.015em;
    transition: color 160ms ease;
}

.recommended-friend-person:hover strong {
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 8%);
}

.recommended-friend-person small {
    color: color-mix(in srgb, var(--adaptive-text-muted, rgb(148 163 184)), var(--color-dynamic, #3b82f6) 18%);
}

.recommended-friend-add {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 92%);
}

.recommended-friend-add:hover {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 48%);
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 82%);
}

/* Пространства и закреплённые посты: плоские кнопки в стиле левой навигации. */
.space-intro-actions .space-primary-button,
#top-spaces-dropdown .top-spaces-open-button,
.spaces-index-scope button.is-active,
.spaces-index-view button.is-active {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%) !important;
    background: color-mix(in srgb, var(--adaptive-card-tint, var(--adaptive-surface-2, #f1f5f9)) 86%, var(--color-dynamic, #3b82f6) 14%) !important;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 12%) !important;
    box-shadow: none !important;
}

.space-intro-actions .space-primary-button:hover,
#top-spaces-dropdown .top-spaces-open-button:hover,
.spaces-index-scope button.is-active:hover,
.spaces-index-view button.is-active:hover {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 54%) !important;
    background: color-mix(in srgb, var(--adaptive-card-tint, var(--adaptive-surface-2, #f1f5f9)) 80%, var(--color-dynamic, #3b82f6) 20%) !important;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 8%) !important;
    box-shadow: none !important;
    transform: none !important;
}

.spaces-index-scope button.is-active span {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%) !important;
    color: color-mix(in srgb, var(--color-dynamic, #3b82f6), white 10%) !important;
}

.spaces-index-search,
.space-menu-create {
    background-image: none !important;
    box-shadow: none !important;
}

.post-item.is-pinned .pin-ribbon {
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 68%) !important;
    border-top: 0 !important;
    background: color-mix(in srgb, var(--adaptive-card-tint, var(--adaptive-surface-2, #f1f5f9)) 82%, var(--color-dynamic, #3b82f6) 18%) !important;
    color: var(--color-dynamic, #3b82f6) !important;
    box-shadow: none !important;
}

.post-item.is-pinned .pin-icon {
    filter: none !important;
    animation: none !important;
}

/* Ручные связи пространств: единый блок в стиле карточек профиля. */
.space-about-related-section {
    grid-column: 1 / -1;
}

.space-about-related-section .profile-spaces-list {
    width: 100%;
}

.space-related-editor {
    display: block;
    min-width: 0;
}

/* ------------[Поле связанных пространств как теги]------------ // Наследует обычную тонкую нижнюю линию формы и исключает дополнительную рамку внутри карточки. Модуль: «редактор пространства». Часть 1/1 */
.space-about-body.is-editing .space-about-links .space-related-editor input {
    margin: 0;
}

@media (max-width: 720px) {
    .space-about-related-section .profile-spaces-list {
        grid-template-columns: 1fr;
    }
}

/* Единый индикатор присутствия во всех разделах приложения. */
.user-online-dot.online-dot,
.user-online-dot:not(.online-dot),
.friend-search-avatar-wrap .user-online-dot {
    --online-dot-border: rgb(255 255 255);
    box-sizing: border-box !important;
    width: 0.875rem !important;
    min-width: 0.875rem !important;
    height: 0.875rem !important;
    min-height: 0.875rem !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    border: 2px solid var(--online-dot-border) !important;
    border-radius: 9999px !important;
    background: rgb(203 213 225) !important;
    box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08) !important;
    pointer-events: none;
}

.dark .user-online-dot.online-dot,
.dark .user-online-dot:not(.online-dot),
.dark .friend-search-avatar-wrap .user-online-dot {
    --online-dot-border: rgb(15 23 42);
    background: rgb(71 85 105) !important;
}

.user-online-dot.is-online {
    background: transparent !important;
}

.user-online-dot .online-dot-core {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 0.625rem !important;
    height: 0.625rem !important;
    border-radius: inherit;
    background: rgb(203 213 225) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.42);
}

.user-online-dot.is-online .online-dot-core {
    background: rgb(34 197 94) !important;
}

.dark .user-online-dot.is-offline .online-dot-core {
    background: rgb(71 85 105) !important;
}

.user-online-dot.is-online .online-dot-pulse {
    position: absolute;
    inset: -0.1875rem;
    border-radius: 9999px;
    background: rgb(74 222 128 / 0.56);
    animation: unified-online-pulse 1.8s cubic-bezier(0.2, 0.65, 0.35, 1) infinite !important;
    pointer-events: none;
}

.user-online-dot.profile-online-dot,
.dark .user-online-dot.profile-online-dot {
    --online-dot-border: rgb(255 255 255 / 0.92);
}

@keyframes unified-online-pulse {
    0% { opacity: 0.85; transform: scale(0.62); }
    72%, 100% { opacity: 0; transform: scale(1.72); }
}

/* Статус присутствия остаётся заметным и при системном сокращении анимаций. */
@media (prefers-reduced-motion: reduce) {
    .user-online-dot.is-online .online-dot-pulse {
        animation: unified-online-pulse 1.8s cubic-bezier(0.2, 0.65, 0.35, 1) infinite !important;
    }
}

/* Сохраняем ширину страницы при появлении модальных окон. */
html {
    scrollbar-gutter: stable;
}

html.page-scroll-locked-soft,
body.page-scroll-locked-soft {
    position: static !important;
    top: auto !important;
}

/* На десктопе overflow у body ломает sticky-колонки под фотомодалками. */
@media (min-width: 768px) {
    html.page-scroll-locked.page-scroll-locked-soft {
        overflow: hidden !important;
    }

    body.page-scroll-locked.page-scroll-locked-soft {
        overflow: visible !important;
    }
}

/* ------------[Встроенная форма редактирования]------------ // Оформляет перенесённую из Vmesta_V2.0.4 форму прямо на месте текста и использует единый радиус текущих комментариев. Модуль: «комментарии». Часть 2/2 */
.comment-text-is-editing,
.comment-edit-hidden-toggle {
    display: none !important;
}

.comment-inline-editor {
    width: 100%;
    margin-top: 0.35rem;
    animation: comment-inline-editor-in 160ms ease-out both;
}

.comment-inline-editor-shell {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.38rem 0.42rem 0.38rem 0.55rem;
    border: 1px solid rgb(203 213 225 / 0.7);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.78);
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.comment-inline-editor-shell:focus-within {
    border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 42%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
}

.comment-inline-emoji {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin-bottom: 0.1rem;
}

.comment-inline-emoji-trigger {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: var(--color-dynamic, #3b82f6);
    cursor: pointer;
    transition: transform 140ms ease, color 140ms ease, background-color 140ms ease;
}

.comment-inline-emoji-trigger:hover {
    color: rgb(234 179 8);
    transform: scale(1.04);
}

.comment-inline-emoji-trigger svg,
.comment-inline-editor-actions svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comment-inline-edit-badge {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 0.15rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 76%);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 88%);
    color: var(--color-dynamic, #3b82f6);
    animation: comment-inline-editor-in 160ms ease-out both;
}

.comment-inline-edit-badge svg {
    width: 0.92rem;
    height: 0.92rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comment-inline-editor textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.25rem;
    max-height: 8rem;
    padding: 0.48rem 0.2rem 0.35rem;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgb(30 41 59);
    font-size: 0.875rem;
    line-height: 1.45;
}

.comment-inline-editor-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.3rem;
}

.comment-inline-editor-actions button {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}

.comment-inline-editor-actions button:hover {
    transform: translateY(-1px);
}

.comment-inline-cancel {
    background: rgb(241 245 249);
    color: rgb(100 116 139);
}

.comment-inline-save {
    background: var(--color-dynamic, #3b82f6);
    color: white;
}

.comment-inline-editor.is-saving {
    opacity: 0.68;
    pointer-events: none;
}

.dark .comment-inline-editor-shell {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.055);
    box-shadow: none;
}

.dark .comment-inline-editor textarea {
    color: rgb(241 245 249);
}

.dark .comment-inline-cancel {
    background: rgb(255 255 255 / 0.07);
    color: rgb(148 163 184);
}

html.adaptive-theme .comment-inline-editor-shell {
    border-color: var(--adaptive-ui-line, var(--adaptive-border));
    background: color-mix(in srgb, var(--adaptive-ui-panel, var(--adaptive-surface)) 90%, transparent);
}

html.adaptive-theme .comment-inline-editor textarea {
    color: var(--adaptive-text-active, var(--adaptive-text));
}

@keyframes comment-inline-editor-in {
    from { opacity: 0; transform: translateY(-0.3rem); }
    to { opacity: 1; transform: translateY(0); }
}
/* ===== Единая расширенная панель эмодзи ===== */
.emoji-picker-expanded {
    position: fixed;
    inset: auto;
    left: 0;
    top: 0;
    z-index: 60000 !important;
    width: min(22rem, calc(100vw - 1.5rem));
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
    height: 24.1rem;
    max-height: calc(100vh - 1.5rem);
    margin: 0;
    box-sizing: border-box;
    padding: 0.75rem;
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.32);
    border-radius: 1.05rem !important;
    background: rgb(255 255 255 / 0.96);
    color: rgb(30 41 59);
    box-shadow: 0 1.25rem 3.5rem rgb(15 23 42 / 0.22);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform-origin: var(--emoji-arrow-left, 1.6rem) bottom;
    animation: emoji-picker-in 150ms ease-out;
}

.emoji-picker-expanded:popover-open {
    display: block;
}

.emoji-picker-expanded.emoji-picker-fallback {
    position: absolute;
    left: 0.35rem;
    top: auto;
    bottom: calc(100% + 0.65rem);
    height: auto;
    max-height: none;
}

.emoji-picker-expanded.hidden {
    display: none !important;
}

.emoji-picker-header,
.emoji-picker-search-wrap,
.emoji-picker-tabs {
    display: flex;
    align-items: center;
}

.emoji-picker-header {
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
    padding: 0 0.15rem 0.55rem;
}

.emoji-picker-header > button {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 0;
    border-radius: 0.6rem;
    background: rgb(148 163 184 / 0.13);
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker-mode-tabs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 0.72rem;
    background: rgb(148 163 184 / 0.12);
}

.emoji-picker-mode-button {
    height: 1.8rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: rgb(100 116 139);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    cursor: pointer;
}

.emoji-picker-mode-button span {
    margin-left: 0.22rem;
    font-size: 0.52rem;
    opacity: 0.62;
}

.emoji-picker-mode-button.is-active {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
    color: var(--color-dynamic, #3b82f6);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 62%);
}

.emoji-picker-search-wrap {
    gap: 0.55rem;
    height: 2.45rem;
    padding: 0 0.75rem;
    border: 1px solid rgb(148 163 184 / 0.28);
    border-radius: 0.75rem;
    background: rgb(241 245 249 / 0.82);
}

.emoji-picker-search-wrap svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    color: rgb(100 116 139);
}

.emoji-picker-search {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
}

.emoji-picker-search::-webkit-search-cancel-button {
    opacity: 0.55;
}

.emoji-picker-tabs {
    gap: 0.25rem;
    margin: 0.55rem -0.15rem 0.4rem;
    padding: 0.1rem 0.15rem 0.35rem;
    overflow: hidden;
    scrollbar-width: none;
}

/* ------------[Строка категорий эмодзи]------------ // Прижимает категории к верхнему краю и отделяет недавние смайлики от общего списка. Модуль: «панель смайликов и стикеров». Часть 1/1 */
.emoji-picker-tab[data-category="recent"] {
    position: relative;
    margin-right: 0.38rem;
}

.emoji-picker-tab[data-category="recent"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.32rem;
    width: 1px;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
    pointer-events: none;
    transform: translateY(-50%);
}

.emoji-picker-tabs::-webkit-scrollbar {
    display: none;
}

.emoji-picker-tab,
.emoji-picker-item {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: background-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

.emoji-picker-tab {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.62rem;
    background: transparent;
    font-size: 1.02rem;
}

.emoji-picker-tab:hover,
.emoji-picker-tab.is-active {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
}

.emoji-picker-tab.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 58%);
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 0.18rem;
    height: 14rem;
    min-height: 14rem;
    max-height: 14rem;
    padding: 0.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

/* ------------[Компактная сетка смайликов во всех редакторах]------------ // Не даёт короткому списку недавних смайликов растягивать строки внутри постов, пространств, комментариев и сообщений. Модуль: «панель смайликов и стикеров». Часть 1/1 */
.emoji-picker-expanded .emoji-picker-grid {
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
}

.emoji-picker-emoji-view.hidden,
.emoji-picker-sticker-view.hidden {
    display: none !important;
}

.emoji-picker-sticker-view {
    display: flex;
    min-height: 17.35rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgb(148 163 184 / 0.35);
    border-radius: 0.82rem;
    background: rgb(148 163 184 / 0.055);
    text-align: center;
}

.emoji-picker-sticker-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.75rem;
    place-items: center;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 84%);
    color: var(--color-dynamic, #3b82f6);
    font-size: 2rem;
    transform: rotate(45deg);
}

.emoji-picker-sticker-view strong {
    font-size: 0.9rem;
}

.emoji-picker-sticker-view p {
    margin: 0.25rem 0 0;
    color: rgb(100 116 139);
    font-size: 0.72rem;
}

.emoji-picker-item {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.62rem;
    background: transparent;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.35rem;
    line-height: 1;
}

.emoji-picker-item:hover {
    background: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 86%);
    transform: translateY(-1px) scale(1.08);
}

.emoji-picker-item:active {
    transform: scale(0.88);
}

.emoji-picker-empty {
    grid-column: 1 / -1;
    align-self: center;
    margin: auto;
    padding: 1.5rem 1rem;
    color: rgb(100 116 139);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.45;
}

.emoji-picker-arrow {
    display: none;
    position: absolute;
    left: calc(var(--emoji-arrow-left, 1.6rem) - 0.36rem);
    bottom: -0.38rem;
    width: 0.72rem;
    height: 0.72rem;
    border-right: 1px solid rgb(148 163 184 / 0.32);
    border-bottom: 1px solid rgb(148 163 184 / 0.32);
    background: inherit;
    transform: rotate(45deg);
}

.emoji-picker-expanded.opens-down {
    transform-origin: var(--emoji-arrow-left, 1.6rem) top;
}

.emoji-picker-expanded.opens-down .emoji-picker-arrow {
    top: -0.38rem;
    bottom: auto;
    border: 0;
    border-top: 1px solid rgb(148 163 184 / 0.32);
    border-left: 1px solid rgb(148 163 184 / 0.32);
}

.dark .emoji-picker-expanded {
    border-color: rgb(255 255 255 / 0.12);
    background: rgb(15 23 42 / 0.96);
    color: rgb(241 245 249);
    box-shadow: 0 1.35rem 4rem rgb(0 0 0 / 0.48);
}

.dark .emoji-picker-search-wrap {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.06);
}

.dark .emoji-picker-mode-tabs,
.dark .emoji-picker-sticker-view {
    background: rgb(255 255 255 / 0.055);
}

.dark .emoji-picker-mode-button,
.dark .emoji-picker-sticker-view p {
    color: rgb(148 163 184);
}

.dark .emoji-picker-mode-button.is-active {
    color: color-mix(in srgb, var(--color-dynamic, #60a5fa), white 14%);
}

.dark .emoji-picker-search-wrap svg,
.dark .emoji-picker-empty {
    color: rgb(148 163 184);
}

.dark .emoji-picker-arrow {
    border-color: rgb(255 255 255 / 0.12);
}

html.adaptive-theme .emoji-picker-expanded {
    border-color: var(--adaptive-border);
    background: color-mix(in srgb, var(--adaptive-surface), transparent 3%);
    color: var(--adaptive-text);
}

html.adaptive-theme .emoji-picker-search-wrap {
    border-color: var(--adaptive-border);
    background: color-mix(in srgb, var(--adaptive-surface-strong, var(--adaptive-surface)), transparent 15%);
}

html.adaptive-theme .emoji-picker-mode-tabs,
html.adaptive-theme .emoji-picker-sticker-view {
    border-color: var(--adaptive-border);
    background: color-mix(in srgb, var(--adaptive-surface-strong, var(--adaptive-surface)), transparent 18%);
}

html.adaptive-theme .emoji-picker-arrow {
    border-color: var(--adaptive-border);
}

@media (max-width: 480px) {
    .emoji-picker-expanded {
        width: min(21rem, calc(100vw - 1rem));
        height: 22.8rem;
        padding: 0.65rem;
    }

    .emoji-picker-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        height: 12.75rem;
        min-height: 12.75rem;
        max-height: 12.75rem;
    }

    .emoji-picker-item {
        font-size: 1.25rem;
    }
}

@keyframes emoji-picker-in {
    from { opacity: 0; transform: translateY(0.35rem) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Большой режим обсуждения публикации ===== */
#post-viewer.is-discussion-mode {
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.5rem) !important;
    background: rgb(2 6 23 / 0.72);
}

#post-viewer.is-discussion-mode #post-viewer-panel > button {
    position: absolute;
    top: 0.15rem;
    right: -3.25rem;
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 0.8rem;
    background: rgb(15 23 42 / 0.76);
    color: rgb(226 232 240);
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.24);
    backdrop-filter: blur(14px);
}

#post-viewer.is-discussion-mode #post-viewer-panel {
    display: flex !important;
    width: min(49rem, calc(100vw - 5.75rem)) !important;
    max-width: 49rem !important;
    height: min(92vh, 56rem) !important;
    max-height: calc(100vh - 2rem);
    flex-direction: column !important;
    overflow: visible;
    border-radius: 1.15rem !important;
    box-shadow: 0 2rem 6rem rgb(2 6 23 / 0.48);
}

#post-viewer.is-discussion-mode #viewer-media-container {
    flex: 0 0 clamp(15rem, 39vh, 25rem) !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgb(148 163 184 / 0.18);
    border-radius: 1.15rem 1.15rem 0 0;
}

#post-viewer.is-discussion-mode:not(.viewer-has-media) #viewer-media-container {
    display: none !important;
}

#post-viewer.is-discussion-mode #viewer-media-container .viewer-media-grid {
    width: min(45rem, 100%);
    height: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 0.85rem;
}

#post-viewer.is-discussion-mode #viewer-media-container .post-media-tile {
    min-height: 0 !important;
    max-height: none !important;
}

#post-viewer.is-discussion-mode #viewer-sidebar {
    display: flex;
    flex: 1 1 auto;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    border-top: 0;
    border-left: 0 !important;
    overflow: hidden;
    border-radius: 0 0 1.15rem 1.15rem;
    background: rgb(255 255 255 / 0.98);
}

#post-viewer.is-discussion-mode:not(.viewer-has-media) #viewer-sidebar {
    border-radius: 1.15rem;
}

#post-viewer.is-discussion-mode #viewer-post-header {
    min-height: 4rem;
    padding: 0.75rem 1.25rem;
}

#post-viewer.is-discussion-mode #viewer-scroll-region {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-top: 1rem;
}

#post-viewer.is-discussion-mode #viewer-post-summary {
    flex: 0 0 auto;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgb(148 163 184 / 0.14);
}

#post-viewer.is-discussion-mode #viewer-post-body {
    margin-bottom: 0.65rem;
}

#post-viewer.is-discussion-mode #viewer-comments-block {
    flex: 1 0 auto;
    min-height: 18rem;
    border-top: 0;
}

#post-viewer.is-discussion-mode .viewer-comments-head {
    min-height: 3rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid rgb(148 163 184 / 0.14);
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(16px);
}

#post-viewer.is-discussion-mode #viewer-comments-list {
    width: min(45rem, 100%);
    min-height: 12rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 2rem;
}

#post-viewer.is-discussion-mode .viewer-form-shell {
    position: relative;
    z-index: 20;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 -0.75rem 2rem rgb(15 23 42 / 0.05);
}

#post-viewer.is-discussion-mode #viewer-form-container {
    width: min(45rem, 100%);
    margin: 0 auto;
    padding: 0.8rem 1.25rem;
}

.dark #post-viewer.is-discussion-mode #viewer-sidebar,
.dark #post-viewer.is-discussion-mode .viewer-comments-head,
.dark #post-viewer.is-discussion-mode .viewer-form-shell {
    background: rgb(2 6 23 / 0.97);
}

html.adaptive-theme #post-viewer.is-discussion-mode #viewer-sidebar,
html.adaptive-theme #post-viewer.is-discussion-mode .viewer-comments-head,
html.adaptive-theme #post-viewer.is-discussion-mode .viewer-form-shell {
    background: color-mix(in srgb, var(--adaptive-surface) 96%, transparent);
}

@media (max-width: 767px) {
    #post-viewer.is-discussion-mode {
        padding: 0 !important;
    }

    #post-viewer.is-discussion-mode #post-viewer-panel > button {
        top: 0.65rem;
        right: 0.65rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    #post-viewer.is-discussion-mode #post-viewer-panel {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none;
        border-width: 0;
        border-radius: 0 !important;
        overflow: hidden;
    }

    #post-viewer.is-discussion-mode #viewer-media-container {
        flex-basis: min(29vh, 13rem) !important;
        padding: 0.65rem !important;
        border-radius: 0;
    }

    #post-viewer.is-discussion-mode #viewer-post-header {
        min-height: 3.6rem;
        padding: 0.65rem 1rem;
    }

    #post-viewer.is-discussion-mode #viewer-post-summary {
        padding: 0.7rem 1rem;
    }

    #post-viewer.is-discussion-mode #viewer-comments-block {
        min-height: 55vh;
    }

    #post-viewer.is-discussion-mode .viewer-comments-head {
        padding-inline: 1rem;
    }

    #post-viewer.is-discussion-mode #viewer-comments-list {
        padding: 0.85rem 1rem 1.5rem;
    }

    #post-viewer.is-discussion-mode #viewer-form-container {
        padding: 0.65rem 0.75rem;
    }

    #post-viewer.is-discussion-mode #viewer-sidebar {
        border-radius: 0;
    }
}


/* ===== Баланс фотографий и комментариев в просмотрщиках ===== */
#post-viewer.is-discussion-mode #viewer-sidebar {
    border-radius: 1.15rem;
}

#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="1"] {
    flex-basis: clamp(28rem, 68vh, 42rem) !important;
}

#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="2"] {
    flex-basis: clamp(24rem, 60vh, 36rem) !important;
}

#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="3"],
#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="4"] {
    flex-basis: clamp(26rem, 64vh, 39rem) !important;
}

#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="5"],
#post-viewer.is-discussion-mode #viewer-media-container[data-media-count="6"] {
    flex-basis: clamp(29rem, 68vh, 42rem) !important;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-1 {
    display: flex;
    width: fit-content !important;
    max-width: 100%;
    margin-inline: auto !important;
    justify-content: center;
    border: 0;
    background: transparent !important;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-1 .post-media-tile {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    border-radius: 0.85rem;
    background: transparent !important;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-1 .post-media-content {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 .post-media-tile:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 1;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 .post-media-tile:nth-child(2) {
    grid-column: 4 / 7;
    grid-row: 1;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 .post-media-tile:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 .post-media-tile:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2;
}

#post-viewer.is-discussion-mode .viewer-media-grid.post-media-grid-5 .post-media-tile:nth-child(5) {
    grid-column: 5 / 7;
    grid-row: 2;
}

@media (min-width: 768px) {
    #media-viewer.is-post-expanded #media-viewer-panel {
        padding: 3.5rem 1.5rem 4.5rem !important;
    }

    #media-viewer.is-post-expanded .media-viewer-layout {
        width: min(84rem, 100%);
        margin-inline: auto;
    }

    #media-viewer.is-post-expanded .media-viewer-photo-pane {
        padding: 0.5rem;
    }

    #media-viewer.is-post-expanded .media-viewer-post-slot {
        flex-basis: clamp(28rem, 35vw, 36rem);
        width: clamp(28rem, 35vw, 36rem);
        max-width: clamp(28rem, 35vw, 36rem);
    }

    #media-viewer.is-post-expanded #media-viewer-toolbar {
        left: calc(50% - min(18rem, 17.5vw));
    }
}

@media (max-width: 767px) {
    #post-viewer.is-discussion-mode #viewer-media-container[data-media-count] {
        flex-basis: min(42vh, 20rem) !important;
    }

    #post-viewer.is-discussion-mode #viewer-sidebar {
        border-radius: 0;
    }
}
/* Единые выпадающие элементы VMESTA */
.vm-select-shell,
.vm-date-shell {
    --vm-control-accent: var(--msg-accent, var(--color-dynamic, #df8d5b));
    --vm-control-bg: var(--msg-bg, var(--adaptive-surface, #fff));
    --vm-control-panel: var(--msg-panel, var(--adaptive-surface-2, var(--adaptive-surface, #fff)));
    --vm-control-text: var(--msg-text, var(--adaptive-text, #1f2937));
    --vm-control-muted: var(--msg-muted, var(--adaptive-muted, #94a3b8));
    --vm-control-line: var(--msg-line, var(--adaptive-border, color-mix(in srgb, var(--vm-control-accent) 25%, transparent)));
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.vm-select-shell:has(> .vm-native-control.hidden),
.vm-date-shell:has(> .vm-native-control.hidden) { display: none !important; }

.vm-native-control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.vm-select-trigger,
.vm-date-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.72rem;
    border: 1px solid var(--vm-control-line);
    border-radius: 0.72rem;
    outline: 0;
    background: var(--vm-control-bg);
    color: var(--vm-control-text);
    box-shadow: 0 0.2rem 0.65rem color-mix(in srgb, #020617 5%, transparent);
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.vm-select-trigger > span,
.vm-date-trigger > span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 780;
}

.vm-select-trigger > svg,
.vm-date-trigger > svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--vm-control-accent);
    transition: transform 160ms ease;
}

.vm-date-trigger > svg:first-child { width: 1rem; height: 1rem; }
.vm-select-shell.is-open .vm-select-trigger,
.vm-date-shell.is-open .vm-date-trigger,
.vm-select-trigger:focus-visible,
.vm-date-trigger:focus-visible {
    border-color: var(--vm-control-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-control-accent) 18%, transparent);
}

.vm-select-shell.is-open .vm-select-trigger > svg:last-child,
.vm-date-shell.is-open .vm-date-trigger > svg:last-child { transform: rotate(180deg); }
.vm-select-trigger:disabled,
.vm-date-trigger:disabled { opacity: 0.5; cursor: default; }

.vm-select-menu,
.vm-date-popover {
    --vm-control-accent: var(--color-dynamic, #df8d5b);
    --vm-control-bg: var(--adaptive-surface, #fff);
    --vm-control-panel: var(--adaptive-surface-2, var(--adaptive-surface, #fff));
    --vm-control-text: var(--adaptive-text, #1f2937);
    --vm-control-muted: var(--adaptive-muted, #94a3b8);
    --vm-control-line: var(--adaptive-border, color-mix(in srgb, var(--vm-control-accent) 25%, transparent));
    position: fixed;
    z-index: 12002;
    overflow: auto;
    max-height: min(19rem, calc(100vh - 1rem));
    padding: 0.38rem;
    border: 1px solid var(--vm-control-line);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--vm-control-panel) 97%, transparent);
    color: var(--vm-control-text);
    box-shadow: 0 1.2rem 3.2rem color-mix(in srgb, #020617 32%, transparent);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vm-control-accent) 48%, transparent) transparent;
    backdrop-filter: blur(18px);
}

.vm-select-menu.hidden,
.vm-date-popover.hidden { display: none !important; }

.vm-select-option {
    display: flex;
    width: 100%;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.68rem;
    border: 0;
    border-radius: 0.62rem;
    background: transparent;
    color: var(--vm-control-text);
    cursor: pointer;
    text-align: left;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.vm-select-option > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 720; }
.vm-select-option > i { color: var(--vm-control-accent); font-size: 0.78rem; font-style: normal; font-weight: 950; }
.vm-select-option:hover:not(:disabled),
.vm-select-option:focus-visible { outline: 0; background: color-mix(in srgb, var(--vm-control-accent) 14%, transparent); color: var(--vm-control-accent); }
.vm-select-option.is-selected { background: color-mix(in srgb, var(--vm-control-accent) 20%, transparent); color: var(--vm-control-accent); }
.vm-select-option:active:not(:disabled) { transform: scale(0.985); }
.vm-select-option:disabled { opacity: 0.4; cursor: default; }
.vm-select-group { padding: 0.5rem 0.68rem 0.28rem; color: var(--vm-control-muted); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }

.vm-date-popover {
    z-index: 12001;
    position: fixed;
    width: min(20rem, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    overflow: visible;
    padding: 0.75rem;
}

/* В «О себе» календарь должен оставаться кликабельным, а знак зодиака —
   не перекрывать кнопку поля даты в режиме редактирования. */
#modal-user-zodiac { pointer-events: none; }
#about-modal .vm-date-shell:has(> #edit-birthdate:not(.hidden)) ~ #modal-user-zodiac {
    display: none !important;
}

.vm-date-popover > header {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem;
    align-items: center;
    gap: 0.42rem;
    margin-bottom: 0.65rem;
}

.vm-date-popover > header > div { display: grid; grid-template-columns: minmax(0, 1fr) 5.3rem; gap: 0.35rem; min-width: 0; }
.vm-date-choice-toggle {
    display:flex; min-width:0; min-height:2.15rem; align-items:center; justify-content:space-between; gap:.35rem;
    padding:0 .55rem; border:1px solid var(--vm-control-line); border-radius:.62rem;
    background:var(--vm-control-bg); color:var(--vm-control-text); cursor:pointer;
}
.vm-date-choice-toggle > span { overflow:hidden; font-size:.68rem; font-weight:820; text-overflow:ellipsis; text-transform:capitalize; white-space:nowrap; }
.vm-date-choice-toggle > svg { width:.78rem; height:.78rem; flex:0 0 auto; fill:none; stroke:var(--vm-control-accent); stroke-width:2; }
.vm-date-choice-toggle[aria-expanded="true"] { background:color-mix(in srgb,var(--vm-control-accent) 14%,var(--vm-control-bg)); color:var(--vm-control-accent); }
.vm-date-choice-toggle[aria-expanded="true"] > svg { transform:rotate(180deg); }
.vm-date-choice-panel {
    position:absolute; z-index:12; inset:3rem .44rem .44rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start; gap:.18rem; overflow:auto; padding:.3rem; border:1px solid var(--vm-control-line); border-radius:.68rem;
    background:var(--vm-control-panel); box-shadow:0 .8rem 2rem color-mix(in srgb,#020617 24%,transparent); scrollbar-width:thin;
}
.vm-date-choice-panel.hidden { display:none !important; }
.vm-date-choice-panel[data-kind="month"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vm-date-choice-panel > button {
    min-height:1.72rem; padding:.25rem .28rem; border:0; border-radius:.5rem; background:var(--vm-control-bg);
    color:var(--vm-control-text); cursor:pointer; font-size:.6rem; font-weight:820;
}
.vm-date-choice-panel > button:is(:hover,:focus-visible,.is-selected) { outline:0; background:color-mix(in srgb,var(--vm-control-accent) 18%,var(--vm-control-bg)); color:var(--vm-control-accent); }
.vm-date-choice-panel > button.is-selected::after { content:' ✓'; }
.vm-date-popover > header > button {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid var(--vm-control-line);
    border-radius: 0.68rem;
    background: var(--vm-control-bg);
    color: var(--vm-control-accent);
    cursor: pointer;
}

.vm-date-popover > header > button:hover { background: color-mix(in srgb, var(--vm-control-accent) 14%, transparent); }
.vm-date-popover > header > button svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-date-popover .vm-select-trigger { min-height: 2.15rem; padding: 0 0.55rem; }
.vm-date-popover .vm-select-trigger > span { font-size: 0.68rem; text-transform: capitalize; }

.vm-date-weekdays,
.vm-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.vm-date-weekdays { margin-bottom: 0.28rem; }
.vm-date-weekdays > span { color: var(--vm-control-muted); text-align: center; font-size: 0.56rem; font-weight: 850; }
.vm-date-grid > i,
.vm-date-grid > button { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border-radius: 0.6rem; }
.vm-date-grid > button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--vm-control-text);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 820;
}

.vm-date-grid > button:hover:not(:disabled) { border-color: var(--vm-control-line); background: color-mix(in srgb, var(--vm-control-accent) 14%, transparent); color: var(--vm-control-accent); }
.vm-date-grid > button.is-today { border-color: var(--vm-control-line); }
.vm-date-grid > button.is-selected { border-color: var(--vm-control-accent); background: var(--vm-control-accent); color: #fff; box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--vm-control-accent) 30%, transparent); }
.vm-date-grid > button:disabled { opacity: 0.25; cursor: default; }

.vm-date-popover > footer { display: flex; justify-content: space-between; gap: 0.45rem; margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--vm-control-line); }
.vm-date-popover > footer > button {
    min-height: 1.9rem;
    padding: 0 0.68rem;
    border: 1px solid var(--vm-control-line);
    border-radius: 0.62rem;
    background: var(--vm-control-bg);
    color: var(--vm-control-muted);
    cursor: pointer;
    font-size: 0.63rem;
    font-weight: 820;
}

.vm-date-popover > footer > button:hover { background: color-mix(in srgb, var(--vm-control-accent) 14%, transparent); color: var(--vm-control-accent); }

.dark .vm-select-menu,
.dark .vm-date-popover {
    --vm-control-bg: var(--adaptive-surface, #111827);
    --vm-control-panel: var(--adaptive-surface-2, #172033);
    --vm-control-text: var(--adaptive-text, #e5e7eb);
    --vm-control-muted: var(--adaptive-muted, #94a3b8);
}

@media (max-width: 520px) {
    .vm-select-menu { max-height: min(16rem, calc(100vh - 1rem)); }
    .vm-date-popover { width: calc(100vw - 1rem); }
}

/* ======[ПУБЛИКАЦИИ: СОХРАНЕНИЕ ТЕКСТА И РЕПОСТЫ]========== */
.viewer-post-preserve-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.shared-post-card{display:grid;width:100%;max-width:34rem;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 66%);border-radius:1rem;background:color-mix(in srgb,var(--adaptive-card-tint,#fff) 94%,transparent);color:var(--adaptive-text,#1f2937);text-align:left;cursor:pointer;box-shadow:0 .75rem 2rem color-mix(in srgb,#020617 10%,transparent);transition:transform 160ms ease,border-color 160ms ease}
.shared-post-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 38%)}
.shared-post-cover{position:relative;min-height:8.5rem;overflow:hidden;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 88%)}
.shared-post-cover.is-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.shared-post-cover-item{position:relative;display:block;min-width:0;min-height:100%;overflow:hidden}
.shared-post-cover img,.shared-post-cover video{width:100%;height:100%;object-fit:cover}
.shared-post-cover-item>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.6rem}
.shared-post-copy{display:flex;min-width:0;flex-direction:column;gap:.5rem;padding:.78rem .85rem}
.shared-post-copy header{display:flex;min-width:0;align-items:center;gap:.48rem}
.shared-post-copy header img,.shared-post-copy header i{width:1.7rem;height:1.7rem;flex:0 0 auto;border-radius:50%;object-fit:cover}
.shared-post-copy header i{display:grid;place-items:center;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 84%);color:var(--color-dynamic,#3b82f6);font-style:normal}
.shared-post-copy header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.shared-post-copy p{display:-webkit-box;margin:0;overflow:hidden;color:color-mix(in srgb,var(--adaptive-text,#1f2937),transparent 28%);font-size:.72rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.shared-post-copy footer{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;color:color-mix(in srgb,var(--adaptive-text,#1f2937),transparent 46%);font-size:.58rem}
.shared-post-copy footer b{color:var(--color-dynamic,#3b82f6);font-size:.62rem;white-space:nowrap}
.shared-post-card-message{width:min(26rem,calc(100vw - 7rem));grid-template-columns:minmax(0,7rem) minmax(0,1fr);box-shadow:none}
.shared-post-card-message .shared-post-cover{min-height:7rem}
.shared-post-card-share{max-width:none;box-shadow:none}
.post-share-modal{position:fixed;inset:0;z-index:92000;display:grid;place-items:center;padding:1rem;background:rgb(2 6 23/.66);backdrop-filter:blur(12px)}
.post-share-modal>section{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);width:min(31rem,calc(100vw - 2rem));max-height:min(42rem,calc(100dvh - 2rem));overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 64%);border-radius:1.2rem;background:var(--adaptive-card-tint,#fff);color:var(--adaptive-text,#1f2937);box-shadow:0 2rem 5rem rgb(2 6 23/.38)}
.post-share-modal>section>header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.05rem;border-bottom:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 78%)}
.post-share-modal header small{display:block;color:var(--color-dynamic,#3b82f6);font-size:.58rem;font-weight:900;letter-spacing:.18em}
.post-share-modal header h2{margin:.14rem 0 0;font-size:1rem}
.post-share-modal header>button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 72%);border-radius:.75rem;background:transparent;color:inherit;cursor:pointer;font-size:1.25rem}
.post-share-preview{padding:.8rem .9rem .35rem}
.post-share-destinations{display:flex;gap:.45rem;padding:.45rem .9rem;overflow-x:auto;scrollbar-width:thin}
.post-share-destinations>button{display:flex;min-width:12rem;align-items:center;gap:.58rem;padding:.65rem .72rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 72%);border-radius:.85rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 92%);color:inherit;text-align:left;cursor:pointer}
.post-share-destinations i{font-style:normal}
.post-share-destinations span{display:flex;min-width:0;flex-direction:column}
.post-share-destinations strong{font-size:.7rem}
.post-share-destinations small{margin-top:.12rem;color:color-mix(in srgb,var(--adaptive-text,#1f2937),transparent 48%);font-size:.56rem}
.post-share-search{display:flex;align-items:center;gap:.5rem;margin:.45rem .9rem;padding:0 .75rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 70%);border-radius:.85rem;background:color-mix(in srgb,var(--adaptive-card-tint,#fff),#020617 5%)}
.post-share-search input{width:100%;height:2.75rem;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:.75rem}
.post-share-chat-list{min-height:0;overflow-y:auto;padding:.25rem .9rem .9rem;scrollbar-width:thin}
.post-share-chat-list>button{display:flex;width:100%;align-items:center;gap:.65rem;padding:.62rem;border:0;border-radius:.85rem;background:transparent;color:inherit;text-align:left;cursor:pointer}
.post-share-chat-list>button:hover{background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 90%)}
.post-share-chat-list .avatar,.post-share-chat-list img{width:2.35rem;height:2.35rem;flex:0 0 auto;border-radius:50%;object-fit:cover}
.post-share-chat-list>button>span{display:flex;min-width:0;flex:1;flex-direction:column}
.post-share-chat-list strong{font-size:.74rem}
.post-share-chat-list small{color:color-mix(in srgb,var(--adaptive-text,#1f2937),transparent 50%);font-size:.6rem}
.post-share-chat-list b{color:var(--color-dynamic,#3b82f6);font-size:.62rem}
.post-share-empty{padding:1.6rem;color:color-mix(in srgb,var(--adaptive-text,#1f2937),transparent 48%);text-align:center;font-size:.7rem}
@media(max-width:640px){.shared-post-card{grid-template-columns:1fr}.shared-post-cover{min-height:9rem;max-height:13rem}.shared-post-card-message{width:min(19rem,calc(100vw - 5rem))}.post-share-modal{padding:0}.post-share-modal>section{width:100%;max-height:100dvh;border-radius:0}}

/* ======[ПУБЛИКАЦИИ: КОМПАКТНОЕ ОКНО ПЕРЕСЫЛКИ]========== */
.shared-post-cover-item img,.shared-post-cover-item video{position:absolute;inset:0;display:block}
.post-share-modal>section{width:min(34rem,calc(100vw - 2rem));background:color-mix(in srgb,var(--color-dynamic,#e3a174) 13%,#170f0c 87%);color:#f8e9df}
.post-share-modal>section>header{padding:.8rem .9rem}
.post-share-modal header h2,.post-share-modal header>button,.post-share-modal .shared-post-card,.post-share-modal .shared-post-copy header strong,.post-share-modal .post-share-chat-list strong,.post-share-modal .post-share-destinations strong{color:#f8e9df!important}
.post-share-modal header small,.post-share-modal .shared-post-copy footer b,.post-share-modal .post-share-chat-list b{color:color-mix(in srgb,var(--color-dynamic,#e3a174) 76%,white 24%)!important}
.post-share-modal header>button{border-color:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 60%);background:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 90%)}
.post-share-preview{padding:.7rem .9rem .3rem}
.post-share-preview .shared-post-card{height:9.25rem;max-height:9.25rem;grid-template-columns:9rem minmax(0,1fr);border-color:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 54%);background:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 91%);box-shadow:none}
.post-share-preview .shared-post-cover{height:9.25rem;min-height:0;max-height:9.25rem}
.post-share-preview .shared-post-copy{gap:.35rem;padding:.68rem .75rem}
.post-share-preview .shared-post-copy p{color:rgb(248 233 223/.7);font-size:.68rem;-webkit-line-clamp:2}
.post-share-preview .shared-post-copy footer{color:rgb(248 233 223/.5)}
.post-share-destinations{padding:.35rem .9rem}
.post-share-destinations>button{min-width:0;flex:1;border-color:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 66%);background:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 91%);color:#f8e9df}
.post-share-destinations small,.post-share-chat-list small{color:rgb(248 233 223/.55)!important}
.post-share-search{margin:.35rem .9rem;border-color:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 62%);background:rgb(0 0 0/.14);color:#f8e9df}
.post-share-search input{color:#f8e9df}
.post-share-search input::placeholder{color:rgb(248 233 223/.48)}
.post-share-chat-list{padding:.15rem .9rem .75rem}
.post-share-chat-list>button{color:#f8e9df}
.post-share-chat-list>button:hover{background:color-mix(in srgb,var(--color-dynamic,#e3a174),transparent 88%)}
@media(max-width:640px){.post-share-preview .shared-post-card{height:8.5rem;max-height:8.5rem;grid-template-columns:7.5rem minmax(0,1fr)}.post-share-preview .shared-post-cover{height:8.5rem;min-height:0}.post-share-destinations{flex-direction:column}.post-share-destinations>button{width:100%}}

/* ======[ПУБЛИКАЦИИ: ВЛОЖЕНИЯ И КАРТОЧКА В СООБЩЕНИИ]========== */
#viewer-post-attachments:not(:empty)+#viewer-post-actions{margin-top:.9rem;padding-top:.15rem}
.shared-post-card.has-no-cover{grid-template-columns:1fr}
.shared-post-card-message{width:min(23rem,calc(100vw - 6rem));height:7.25rem;max-height:7.25rem;grid-template-columns:7.5rem minmax(0,1fr);border-radius:.82rem;background:rgb(0 0 0/.12);color:inherit;box-shadow:none}
.shared-post-card-message.has-no-cover{grid-template-columns:1fr}
.shared-post-card-message .shared-post-cover{height:7.25rem;min-height:0;max-height:7.25rem}
.shared-post-card-message .shared-post-copy{gap:.3rem;padding:.58rem .68rem;color:inherit}
.shared-post-card-message .shared-post-copy header strong,.shared-post-card-message .shared-post-copy footer b{color:inherit}
.shared-post-card-message .shared-post-copy p{color:color-mix(in srgb,currentColor,transparent 28%);font-size:.66rem;-webkit-line-clamp:2}
.shared-post-card-message .shared-post-copy footer{color:color-mix(in srgb,currentColor,transparent 45%)}
@media(max-width:640px){.shared-post-card-message{width:min(19rem,calc(100vw - 4rem));grid-template-columns:6.5rem minmax(0,1fr)}}

/* ======[ПУБЛИКАЦИИ: ТЕМАТИЧЕСКАЯ ПЕРЕСЫЛКА И ПОСТ-СООБЩЕНИЕ]========== */
.post-share-modal>section{--share-accent:var(--color-dynamic,#df8d5b);--share-bg:color-mix(in srgb,var(--adaptive-card-tint,#fff) 92%,var(--share-accent) 8%);--share-panel:color-mix(in srgb,var(--adaptive-card-tint,#fff) 97%,var(--share-accent) 3%);--share-line:color-mix(in srgb,var(--share-accent) 30%,transparent);--share-text:var(--adaptive-text,#1f2937);--share-muted:color-mix(in srgb,var(--share-text) 58%,transparent);background:var(--share-bg);color:var(--share-text)}
.dark .post-share-modal>section{--share-bg:color-mix(in srgb,var(--adaptive-card-tint,#111827) 86%,var(--share-accent) 14%);--share-panel:color-mix(in srgb,var(--adaptive-card-tint,#111827) 94%,var(--share-accent) 6%);--share-text:var(--adaptive-text,#e5e7eb)}
.post-share-modal header h2,.post-share-modal header>button,.post-share-modal .shared-post-card,.post-share-modal .shared-post-copy header strong,.post-share-modal .post-share-chat-list strong,.post-share-modal .post-share-destination-row strong{color:var(--share-text)!important}
.post-share-modal header small,.post-share-modal .shared-post-copy footer b,.post-share-modal .post-share-chat-list b,.post-share-destination-main>b{color:var(--share-accent)!important}
.post-share-modal header>button,.post-share-search,.post-share-preview .shared-post-card{border-color:var(--share-line);background:var(--share-panel)}
.post-share-preview .shared-post-copy p,.post-share-preview .shared-post-copy footer,.post-share-chat-list small{color:var(--share-muted)!important}
.post-share-destination-list{display:flex;max-height:12rem;flex-direction:column;gap:.38rem;margin:.35rem .9rem;padding-right:.2rem;overflow-y:auto;scrollbar-width:thin}
.post-share-destination-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.48rem .55rem;border:1px solid var(--share-line);border-radius:.85rem;background:var(--share-panel)}
.post-share-destination-main{display:flex;min-width:0;align-items:center;gap:.6rem;border:0;background:transparent;color:var(--share-text);text-align:left;cursor:pointer}
.post-share-destination-main>i{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border-radius:.65rem;background:color-mix(in srgb,var(--share-accent) 16%,transparent);font-style:normal}
.post-share-destination-main>span{display:flex;min-width:0;flex:1;flex-direction:column}
.post-share-destination-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}
.post-share-destination-main small{margin-top:.08rem;color:var(--share-muted);font-size:.54rem}
.post-share-destination-main>b{font-size:.58rem;white-space:nowrap}
.post-share-identity-toggle{display:grid;width:9.8rem;min-width:9.8rem;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.42rem;padding:0;border:0;background:transparent;color:var(--share-muted);cursor:pointer}
.post-share-identity-toggle>span{position:relative;width:2rem;height:1.08rem;flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--share-text) 18%,transparent);transition:background 160ms ease}
.post-share-identity-toggle>span:after{content:"";position:absolute;top:.14rem;left:.14rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--share-text);transition:transform 160ms ease}
.post-share-identity-toggle.is-destination>span{background:var(--share-accent)}
.post-share-identity-toggle.is-destination>span:after{transform:translateX(.92rem)}
.post-share-identity-toggle>em{display:block;width:7.35rem;overflow:hidden;font-size:.52rem;font-style:normal;line-height:1.25;text-align:left;white-space:nowrap}
.post-share-search{color:var(--share-text)}
.post-share-search input{color:var(--share-text)}
.post-share-search input::placeholder{color:var(--share-muted)}
.post-share-chat-list>button{color:var(--share-text)}
.post-share-chat-list>button:hover{background:color-mix(in srgb,var(--share-accent) 11%,transparent)}
.shared-post-card-message{display:flex;width:min(25rem,calc(100vw - 6rem));height:auto;max-height:none;grid-template-columns:none;flex-direction:column;overflow:hidden;border-color:var(--msg-line,color-mix(in srgb,currentColor,transparent 72%));border-radius:.9rem;background:var(--msg-panel,transparent);color:var(--msg-text,inherit);box-shadow:none}
.shared-post-message-author{display:flex;align-items:center;gap:.55rem;padding:.62rem .68rem;border-bottom:1px solid var(--msg-line,color-mix(in srgb,currentColor,transparent 82%))}
.shared-post-message-author>img,.shared-post-message-author>i{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border-radius:50%;object-fit:cover;font-style:normal}
.shared-post-message-author>span{display:flex;min-width:0;flex-direction:column}
.shared-post-message-author strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}
.shared-post-message-author small{margin-top:.08rem;color:var(--msg-muted,color-mix(in srgb,currentColor,transparent 48%));font-size:.55rem}
.shared-post-card-message .shared-post-cover{width:100%;height:8.5rem;min-height:8.5rem;max-height:8.5rem;border-bottom:1px solid var(--msg-line,color-mix(in srgb,currentColor,transparent 82%))}
.shared-post-message-body{display:flex;flex-direction:column;gap:.55rem;padding:.65rem .7rem .7rem}
.shared-post-message-body p{display:-webkit-box;margin:0;overflow:hidden;color:inherit;font-size:.72rem;line-height:1.46;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:5}
.shared-post-message-body b{display:block;padding:.48rem .65rem;border:1px solid var(--msg-line,color-mix(in srgb,currentColor,transparent 72%));border-radius:.6rem;color:var(--msg-accent,currentColor);text-align:center;font-size:.62rem;letter-spacing:0}
@media(max-width:640px){.post-share-destination-row{grid-template-columns:1fr}.post-share-identity-toggle{width:9.8rem;min-width:9.8rem}.post-share-identity-toggle>em{width:7.35rem;text-align:left}.shared-post-card-message{width:min(20rem,calc(100vw - 4rem))}}

/* ======[ПЕРЕСЫЛКА: КОМПАКТНЫЙ ВЫБОР ПРОСТРАНСТВА И ЖИВОЕ ПРЕВЬЮ]========== */
.post-share-destination-list{max-height:none;overflow:visible}
.post-share-destination-row{position:relative;grid-template-columns:minmax(0,1fr) auto auto;transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease}
.post-share-destination-row.is-preview-active{border-color:color-mix(in srgb,var(--share-accent) 68%,transparent);background:color-mix(in srgb,var(--share-accent) 9%,var(--share-panel));box-shadow:inset .18rem 0 0 var(--share-accent)}
.post-share-destination-avatar{display:grid;width:2.05rem;height:2.05rem;flex:0 0 auto;place-items:center;border:1px solid var(--share-line);border-radius:50%;background:color-mix(in srgb,var(--share-accent) 15%,var(--share-panel));object-fit:cover;font-style:normal}
.post-share-destination-main>.post-share-destination-avatar{border-radius:50%}
.post-share-destination-main>b{color:var(--share-accent);font-size:.75rem}
.post-share-space-change{padding:.3rem .48rem;border:1px solid color-mix(in srgb,var(--share-accent) 42%,transparent);border-radius:.55rem;background:color-mix(in srgb,var(--share-accent) 9%,transparent);font-size:.53rem!important;letter-spacing:0;transition:background 160ms ease,color 160ms ease}
.post-share-destination-main:hover .post-share-space-change{background:var(--share-accent);color:var(--share-bg)!important}
.post-share-publish-button{min-height:2rem;padding:0 .72rem;border:1px solid color-mix(in srgb,var(--share-accent) 55%,transparent);border-radius:.62rem;background:color-mix(in srgb,var(--share-accent) 14%,transparent);color:var(--share-accent);cursor:pointer;font-size:.57rem;font-weight:850;white-space:nowrap}
.post-share-publish-button:hover{background:var(--share-accent);color:var(--share-bg)}
.post-share-space-wrap{position:relative}
.post-share-space-picker{position:absolute;z-index:8;top:calc(100% + .35rem);right:0;left:0;padding:.48rem;border:1px solid var(--share-line);border-radius:.88rem;background:color-mix(in srgb,var(--share-bg) 96%,transparent);box-shadow:0 1rem 2.6rem rgb(0 0 0/.28);backdrop-filter:blur(18px)}
.post-share-space-search{display:flex;height:2.35rem;align-items:center;gap:.45rem;padding:0 .65rem;border:1px solid var(--share-line);border-radius:.68rem;background:var(--share-panel);color:var(--share-text)}
.post-share-space-search>span{color:var(--share-accent);font-size:1rem}
.post-share-space-search>input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--share-text);font-size:.68rem}
.post-share-space-search>input::placeholder{color:var(--share-muted)}
.post-share-space-results{display:flex;max-height:10.5rem;flex-direction:column;gap:.18rem;margin-top:.38rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.post-share-space-results>button{display:flex;width:100%;min-width:0;align-items:center;gap:.56rem;padding:.42rem .48rem;border:0;border-radius:.65rem;background:transparent;color:var(--share-text);text-align:left;cursor:pointer}
.post-share-space-results>button:hover,.post-share-space-results>button.is-selected{background:color-mix(in srgb,var(--share-accent) 13%,transparent)}
.post-share-space-results>button>span{display:flex;min-width:0;flex:1;flex-direction:column}
.post-share-space-results strong,.post-share-space-results small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-share-space-results strong{font-size:.67rem}.post-share-space-results small{margin-top:.08rem;color:var(--share-muted);font-size:.52rem}.post-share-space-results>button>b{color:var(--share-accent)}
.post-share-space-empty{margin:.35rem .9rem}
.post-share-chat-list{max-height:11.5rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.post-share-chat-list > .post-share-target-heading{display:block;margin:.4rem .35rem .2rem;color:var(--share-muted);font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.post-share-preview .shared-post-card{transition:border-color 160ms ease,background 160ms ease,transform 160ms ease}

/* ======[СООБЩЕНИЯ: КАРТОЧКА В ГРАНИЦАХ И ХВОСТИК ПОСЛЕДНЕЙ РЕПЛИКИ]========== */
.messenger-message{min-width:0;max-width:100%}
.messenger-message-stream{overflow-x:hidden}
.messenger-message .messenger-bubble{position:relative;min-width:0;max-width:min(78%,34rem);box-sizing:border-box}
.messenger-message .messenger-bubble.has-attachments{max-width:min(78%,26rem)}
.shared-post-card-message{width:min(23rem,100%);max-width:100%;box-sizing:border-box}
.shared-post-card-message,.shared-post-card-message *{min-width:0;box-sizing:border-box}
.messenger-message.is-group-middle,.messenger-message.is-group-end{margin-top:.08rem}
.messenger-message.is-outgoing:not(.has-tail) .messenger-bubble{border-bottom-right-radius:1rem}
.messenger-message.is-incoming:not(.has-tail) .messenger-bubble{border-bottom-left-radius:1rem}
.messenger-bubble-tail{position:absolute;z-index:1;bottom:-1px;width:1rem;height:1.2rem;overflow:visible;pointer-events:none}
.messenger-message.is-outgoing .messenger-bubble-tail{right:-.72rem;color:var(--msg-panel-strong)}
.messenger-message.is-incoming .messenger-bubble-tail{left:-.72rem;color:var(--msg-panel);transform:scaleX(-1)}
.messenger-bubble-tail-fill{fill:currentColor}
.messenger-bubble-tail-line{fill:none;stroke:var(--msg-line);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ======[ПЕРЕСЫЛКА: СТАТУС ПОЛЬЗОВАТЕЛЯ НА АВАТАРЕ]========== */
.post-share-destination-avatar-wrap{position:relative;display:inline-grid;width:2.05rem;height:2.05rem;flex:0 0 auto;place-items:center}
.post-share-destination-main>.post-share-destination-avatar-wrap,.post-share-chat-list>button>.post-share-destination-avatar-wrap{display:inline-grid;width:2.05rem;min-width:2.05rem;height:2.05rem;flex:0 0 auto;flex-direction:initial;place-items:center}
.post-share-destination-avatar-wrap>.post-share-destination-avatar{width:100%;height:100%}
.post-share-online-dot{position:absolute!important;z-index:3;right:-.12rem;bottom:-.12rem;width:.72rem!important;height:.72rem!important;border:2px solid var(--share-panel)!important;border-radius:50%;box-shadow:0 0 0 1px var(--share-line)}
.post-share-online-dot .online-dot-core{inset:.08rem!important}
.post-share-online-dot .online-dot-pulse{inset:.02rem!important}

/* ======[СООБЩЕНИЯ: ХВОСТ БЕЗ ОБРЕЗАНИЯ]========== */
.messenger-message.is-outgoing{padding-right:1.05rem}
.messenger-message.is-incoming{padding-left:1.05rem}
.messenger-bubble-tail{z-index:3;width:1.08rem;height:1.24rem;filter:drop-shadow(0 .1rem .12rem rgb(0 0 0/.2))}
.messenger-message.is-outgoing .messenger-bubble-tail{right:-.66rem}
.messenger-message.is-incoming .messenger-bubble-tail{left:-.66rem}

/* ======[ПРОФИЛЬ И ПРОСТРАНСТВО: РЕДАКТОР ТОЛЬКО НА РАЗРЕШЁННОМ МАРШРУТЕ]========== */
body:not(.profile-editor-route):not(.space-editor-route) #cover-action-stack{display:none!important}

/* ======[АДАПТИВНАЯ RGB-ТЕМА: ЕДИНАЯ ИЕРАРХИЯ ЦВЕТА И ГЛУБИНЫ]========== */
html.adaptive-theme{
  --adaptive-text-active:rgb(120 72 44);
  --adaptive-text-secondary:rgb(132 88 62);
  --adaptive-text-passive:rgb(145 103 77);
  --adaptive-ui-panel:var(--adaptive-card-tint);
  --adaptive-ui-active:var(--adaptive-card-tint-strong);
  --adaptive-ui-line:var(--adaptive-border);
  --adaptive-ui-line-strong:var(--color-dynamic);
  --adaptive-ui-shadow:0 12px 28px -24px rgb(15 23 42/.42);
  --adaptive-ui-shadow-hover:0 16px 32px -24px rgb(15 23 42/.48);
  --adaptive-text:var(--adaptive-text-active);
  --adaptive-muted:var(--adaptive-text-passive);
  --adaptive-text-strong:var(--adaptive-text-active);
  --adaptive-text-muted:var(--adaptive-text-passive);
}
@supports(color:color-mix(in srgb,black,white)){
  html.adaptive-theme{
    --adaptive-text-active:color-mix(in srgb,var(--color-dynamic) 66%,rgb(15 23 42) 34%);
    --adaptive-text-secondary:color-mix(in srgb,var(--color-dynamic) 52%,rgb(71 85 105) 48%);
    --adaptive-text-passive:color-mix(in srgb,var(--color-dynamic) 36%,rgb(100 116 139) 64%);
    --adaptive-ui-panel:var(--adaptive-card-tint);
    --adaptive-ui-active:color-mix(in srgb,var(--adaptive-ui-panel) 80%,var(--color-dynamic) 20%);
    --adaptive-ui-line:color-mix(in srgb,var(--color-dynamic) 22%,transparent);
    --adaptive-ui-line-strong:color-mix(in srgb,var(--color-dynamic) 48%,transparent);
  }
}
html.adaptive-theme.dark{
  --adaptive-text-active:rgb(224 167 129);
  --adaptive-text-secondary:rgb(180 128 93);
  --adaptive-text-passive:rgb(151 107 78);
  --adaptive-ui-shadow:0 12px 28px -24px rgb(0 0 0/.82);
  --adaptive-ui-shadow-hover:0 16px 34px -24px rgb(0 0 0/.9);
}
@supports(color:color-mix(in srgb,black,white)){
  html.adaptive-theme.dark{
    --adaptive-text-active:color-mix(in srgb,var(--color-dynamic) 92%,white 8%);
    --adaptive-text-secondary:color-mix(in srgb,var(--color-dynamic) 70%,var(--adaptive-surface-2) 30%);
    --adaptive-text-passive:color-mix(in srgb,var(--color-dynamic) 52%,var(--adaptive-surface) 48%);
    --adaptive-ui-panel:var(--adaptive-card-tint);
    --adaptive-ui-active:color-mix(in srgb,var(--adaptive-ui-panel) 84%,var(--color-dynamic) 16%);
  }
}
html.adaptive-theme body,html.adaptive-theme #content-area,html.adaptive-theme main{color:var(--adaptive-text-active)}
html.adaptive-theme :is([class*="text-gray-900"],[class*="text-gray-800"],[class*="text-slate-900"],[class*="text-slate-800"],[class*="text-slate-200"],[class*="text-slate-100"]){color:var(--adaptive-text-active)!important}
html.adaptive-theme :is([class*="text-gray-700"],[class*="text-gray-600"],[class*="text-gray-500"],[class*="text-slate-700"],[class*="text-slate-600"],[class*="text-slate-500"],[class*="text-slate-300"]){color:var(--adaptive-text-secondary)!important}
html.adaptive-theme :is([class*="text-gray-400"],[class*="text-gray-300"],[class*="text-slate-400"]){color:var(--adaptive-text-passive)!important}
html.adaptive-theme :is(input,textarea,select){color:var(--adaptive-text-active)}
html.adaptive-theme :is(input,textarea)::placeholder{color:var(--adaptive-text-passive)}
html.adaptive-theme :is(.post-item,.space-post,.space-side-card,.space-composer,.space-switchboard,.space-tabs,.space-profile-photos-panel,.space-profile-showcase-card,.spaces-index-card,#top-spaces-dropdown,#post-viewer-panel,#viewer-sidebar,#viewer-comments-block,.comment-dropdown,.comment-form-container,.space-about-panel,.space-about-card,.project-access-panel,.project-access-role,.messenger-shell,.messenger-dialogs-panel,.messenger-conversation,.messenger-side-panel){border:1px solid var(--adaptive-ui-line)!important;background-color:var(--adaptive-ui-panel)!important;box-shadow:var(--adaptive-ui-shadow)!important}
html.adaptive-theme :is(.post-item,.space-post,.spaces-index-card,.space-about-card,.project-access-role):hover{border-color:var(--adaptive-ui-line-strong)!important;background-color:var(--adaptive-ui-active)!important;box-shadow:var(--adaptive-ui-shadow-hover)!important}
html.adaptive-theme :is(.border-gray-50,.border-gray-100,.border-gray-200,.border-slate-100,.border-slate-200,.dark\:border-slate-700,.dark\:border-slate-800){border-color:var(--adaptive-ui-line)!important}
html.adaptive-theme :is(.post-actions,.space-post-footer,#viewer-comments-block,#viewer-form-container,.space-about-footer,.space-about-head){border-color:var(--adaptive-ui-line)!important}
html.adaptive-theme :is(.nav-item,.tab-btn,.post-actions button,.space-post-footer button,.messenger-dialogs-panel button,.messenger-side-panel button,.post-share-chat-list>button){color:var(--adaptive-text-passive)!important}
html.adaptive-theme :is(.nav-item,.tab-btn,.messenger-dialogs-panel button,.messenger-side-panel button,.post-share-chat-list>button):hover{background-color:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme .nav-item.bg-blue-50,html.adaptive-theme .nav-item[aria-current="page"],html.adaptive-theme .tab-btn.active-tab,html.adaptive-theme .tab-btn.text-blue-500,html.adaptive-theme .tab-btn.text-blue-600{border-color:transparent!important;background-color:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important;box-shadow:none!important}
html.adaptive-theme :is(.nav-item,.tab-btn) svg{color:currentColor!important;stroke:currentColor}

/* ======[СТАНДАРТНАЯ ТЕМА: СБАЛАНСИРОВАННЫЕ СВЕТЛЫЙ И ТЁМНЫЙ РЕЖИМЫ]========== */
html:not(.adaptive-theme){
  --standard-text-active:rgb(32 79 145);
  --standard-text-secondary:rgb(68 104 154);
  --standard-text-passive:rgb(105 132 170);
  --standard-panel:var(--adaptive-surface);
  --standard-panel-soft:var(--adaptive-surface-2);
  --standard-line:var(--adaptive-border);
  --standard-active:rgb(229 238 252);
  --standard-shadow:0 12px 30px -24px rgb(15 23 42/.34),0 2px 8px -6px rgb(15 23 42/.16);
  --standard-shadow-hover:0 18px 38px -24px rgb(15 23 42/.42),0 5px 12px -8px rgb(15 23 42/.2);
}
/* ------------[Синие тексты стандартной светлой темы]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 33/203 */
/* Подменяет также общие adaptive-переменные, которыми пользуются авторские карточки без Tailwind-классов. Ограничение :not(.dark) не позволяет светлой палитре затронуть ночную тему. */
html:not(.adaptive-theme):not(.dark){
  --adaptive-text:var(--standard-text-active);
  --adaptive-text-strong:var(--standard-text-active);
  --adaptive-muted:var(--standard-text-passive);
  --adaptive-text-muted:var(--standard-text-passive);
}
html.dark:not(.adaptive-theme){
  --standard-text-active:rgb(232 238 246);
  --standard-text-secondary:rgb(183 195 211);
  --standard-text-passive:rgb(132 148 170);
  --standard-panel:rgb(20 29 43);
  --standard-panel-soft:rgb(29 40 56);
  --standard-line:rgb(52 68 89);
  --standard-active:rgb(35 51 73);
  --standard-shadow:0 14px 34px -22px rgb(0 0 0/.62),0 3px 10px -7px rgb(0 0 0/.42);
  --standard-shadow-hover:0 20px 42px -22px rgb(0 0 0/.72),0 6px 14px -9px rgb(0 0 0/.5);
}
html:not(.adaptive-theme) body{background-color:var(--adaptive-background)!important;color:var(--standard-text-active)}
html:not(.adaptive-theme) :is([class*="text-gray-900"],[class*="text-gray-800"],[class*="text-slate-900"],[class*="text-slate-800"],[class*="text-slate-200"],[class*="text-slate-100"],.text-black){color:var(--standard-text-active)!important}
html:not(.adaptive-theme) :is([class*="text-gray-700"],[class*="text-gray-600"],[class*="text-gray-500"],[class*="text-slate-700"],[class*="text-slate-500"],[class*="text-slate-300"]){color:var(--standard-text-secondary)!important}
html:not(.adaptive-theme) :is([class*="text-gray-400"],[class*="text-gray-300"],[class*="text-slate-400"],[class*="text-slate-600"]){color:var(--standard-text-passive)!important}
html:not(.adaptive-theme) :is(input,textarea,select){border-color:var(--standard-line);background-color:var(--standard-panel);color:var(--standard-text-active)}
html:not(.adaptive-theme) :is(input,textarea)::placeholder{color:var(--standard-text-passive)}
html:not(.adaptive-theme) :is(.space-post,.space-side-card,.space-composer,.space-switchboard,.space-tabs,.space-profile-photos-panel,.space-profile-showcase-card,.spaces-index-card,#top-spaces-dropdown,#post-viewer-panel,#viewer-sidebar,#viewer-comments-block,.comment-dropdown,.comment-form-container,.space-about-panel,.space-about-card,.project-access-panel,.project-access-role,.messenger-shell,.messenger-dialogs-panel,.messenger-conversation,.messenger-side-panel,.profile-interests-card,.interest-match-card){border:1px solid var(--standard-line)!important;background-color:var(--standard-panel)!important;box-shadow:var(--standard-shadow)!important}
html:not(.adaptive-theme) :is(.space-post,.spaces-index-card,.space-about-card,.project-access-role):hover{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 45%,var(--standard-line))!important;box-shadow:var(--standard-shadow-hover)!important}
html:not(.adaptive-theme) :is(.border-gray-50,.border-gray-100,.border-gray-200,.border-slate-100,.border-slate-200,.dark\:border-slate-700,.dark\:border-slate-800){border-color:var(--standard-line)!important}
html:not(.adaptive-theme) :is(.nav-item,.tab-btn){color:var(--standard-text-passive)!important}
html:not(.adaptive-theme) :is(.nav-item,.tab-btn):hover{background-color:var(--standard-panel-soft)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) .nav-item.bg-blue-50,html:not(.adaptive-theme) .nav-item[aria-current="page"],html:not(.adaptive-theme) .tab-btn.active-tab,html:not(.adaptive-theme) .tab-btn.text-blue-500,html:not(.adaptive-theme) .tab-btn.text-blue-600{background-color:var(--standard-active)!important;color:var(--color-dynamic,#3b82f6)!important;box-shadow:none!important}
html:not(.adaptive-theme) :is(.nav-item,.tab-btn) svg{color:currentColor!important;stroke:currentColor}
html:not(.adaptive-theme):not(.dark) :is(#user-name-title,#main-profile-status,#top-user-name,.item-name,.post-author,.post-author-link,.viewer-author-link,.comment-author-link,.comment-node strong,.space-post-title,.space-card-title,.spaces-index-card strong,#top-spaces-dropdown strong,.space-about-card strong,.space-about-card button,.project-rank-badge,.settings-profile-rank-btn strong){color:var(--standard-text-active)!important}

html:not(.adaptive-theme) .post-item{
  border:1px solid var(--standard-line)!important;
  border-radius:1.15rem!important;
  background:var(--standard-panel)!important;
  padding:clamp(1rem,1.8vw,1.3rem)!important;
  box-shadow:var(--standard-shadow)!important;
}
html:not(.adaptive-theme) .post-item:hover{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 38%,var(--standard-line))!important;box-shadow:var(--standard-shadow-hover)!important}
html:not(.adaptive-theme) .post-item>.mt-4.flex.items-center{margin-top:.85rem!important;border-top:1px solid var(--standard-line);padding-top:.7rem}
html:not(.adaptive-theme) .post-media-grid{border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--standard-line) 58%,transparent)}
html:not(.adaptive-theme) .post-media-tile{background:var(--standard-panel-soft)!important}
html:not(.adaptive-theme) .post-actions button,html:not(.adaptive-theme) .post-item [data-post-vote],html:not(.adaptive-theme) .post-item [data-view-counter],html:not(.adaptive-theme) .post-item button[onclick^="openPostViewer"]{color:var(--standard-text-passive)!important}
html:not(.adaptive-theme) .post-actions button:hover,html:not(.adaptive-theme) .post-item [data-post-vote]:hover,html:not(.adaptive-theme) .post-item button[onclick^="openPostViewer"]:hover{background:var(--standard-panel-soft)!important;color:var(--color-dynamic,#3b82f6)!important}
html:not(.adaptive-theme) [class~="bg-gray-50"],html:not(.adaptive-theme) [class~="bg-slate-50"]{background-color:var(--adaptive-background)!important}
html:not(.adaptive-theme) [class~="bg-gray-100"],html:not(.adaptive-theme) [class~="bg-slate-100"]{background-color:var(--standard-panel-soft)!important}
html.dark:not(.adaptive-theme) [class~="dark:bg-slate-950"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-950/80"]{background-color:var(--adaptive-background)!important}
html.dark:not(.adaptive-theme) [class~="dark:bg-slate-900"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-900/50"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-900/95"]{background-color:var(--standard-panel)!important}
html.dark:not(.adaptive-theme) [class~="dark:bg-slate-800"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-800/30"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-800/40"],html.dark:not(.adaptive-theme) [class~="dark:bg-slate-800/50"]{background-color:var(--standard-panel-soft)!important}

/* ======[СООБЩЕНИЯ: ЧИСТЫЙ ПОИСК И КАРТОЧКИ ПРАВОЙ КОЛОНКИ]========== */
/* Внешний rail остаётся прозрачным: собственный фон и рамка есть у каждой секции внутри. */
html.adaptive-theme #messages-side-root .messenger-side-panel,
html:not(.adaptive-theme) #messages-side-root .messenger-side-panel{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html.adaptive-theme #messages-side-root .messenger-side-section{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-panel)!important;
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html:not(.adaptive-theme) #messages-side-root .messenger-side-section{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
  box-shadow:var(--standard-shadow)!important;
}
/* Оболочка поиска отвечает за форму; внутреннее поле не рисует второй квадрат. */
.messenger-search>input,
html.adaptive-theme .messenger-search>input,
html:not(.adaptive-theme) .messenger-search>input{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--msg-text)!important;
  appearance:none;
}
.messenger-search>input:focus{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ======[СТАНДАРТНАЯ ТЕМА: ЕДИНОЕ СОСТОЯНИЕ ЛАЙКА]========== */
html:not(.adaptive-theme) .post-item [data-post-vote="like"][aria-pressed="false"],
html:not(.adaptive-theme) #viewer-post-actions [data-post-vote="like"][aria-pressed="false"],
html:not(.adaptive-theme) .comment-like-btn:not(.active){
  color:var(--standard-text-passive)!important;
}
html:not(.adaptive-theme) .post-item [data-post-vote="like"][aria-pressed="true"],
html:not(.adaptive-theme) #viewer-post-actions [data-post-vote="like"][aria-pressed="true"],
html:not(.adaptive-theme) .comment-like-btn.active{
  color:rgb(239 68 68)!important;
}
html:not(.adaptive-theme) .post-item [data-post-vote="like"][aria-pressed="false"]:hover,
html:not(.adaptive-theme) #viewer-post-actions [data-post-vote="like"][aria-pressed="false"]:hover,
html:not(.adaptive-theme) .comment-like-btn:not(.active):hover{
  color:rgb(239 68 68)!important;
}
html:not(.adaptive-theme) .post-item [data-post-vote="like"][aria-pressed="true"] .post-like-icon,
html:not(.adaptive-theme) #viewer-post-actions [data-post-vote="like"][aria-pressed="true"] .post-like-icon,
html:not(.adaptive-theme) .comment-like-btn.active .heart-icon{
  fill:currentColor!important;
  stroke:currentColor!important;
}
html:not(.adaptive-theme) .post-item [data-post-vote="like"][aria-pressed="false"] .post-like-icon,
html:not(.adaptive-theme) #viewer-post-actions [data-post-vote="like"][aria-pressed="false"] .post-like-icon,
html:not(.adaptive-theme) .comment-like-btn:not(.active) .heart-icon{
  fill:transparent!important;
}
html:not(.adaptive-theme) .comment-like-btn.active .count-num{color:inherit!important}

/* ======[ЦВЕТНАЯ ТЕМА: СЛОИ ПОСТОВ, РЕДАКТОРА И ФИЛЬТРОВ]========== */
/* SVG вкладок остаются чистыми штриховыми иконками без фоновой плашки и свечения. */
.space-tab-icon,
html.adaptive-theme .space-tab-icon{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Жёсткие белые поверхности наследуют общую палитру страницы. */
html.adaptive-theme:not(.dark) body,
html.adaptive-theme:not(.dark) #content-area{
  background-color:color-mix(in srgb,var(--adaptive-background) 84%,var(--color-dynamic) 16%)!important;
}
html.adaptive-theme.dark body,
html.adaptive-theme.dark #content-area{
  background-color:color-mix(in srgb,var(--adaptive-background) 91%,var(--color-dynamic) 9%)!important;
}
html.adaptive-theme :is(
  #site-header,
  .cover-editor-workspace,
  #post-viewer-panel,
  #viewer-sidebar,
  #viewer-scroll-region,
  #viewer-post-summary,
  #viewer-comments-block,
  .viewer-comments-head,
  .viewer-form-shell
){
  border-color:var(--adaptive-ui-line)!important;
  background-color:var(--adaptive-ui-panel)!important;
}
html.adaptive-theme .cover-editor-workspace{
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html.adaptive-theme :is(#viewer-media-container,.cover-animation-preview){
  background-color:var(--adaptive-ui-active)!important;
}
html.adaptive-theme :is(#viewer-comments-list,.cover-editor-pane){
  background-color:transparent!important;
}
html.adaptive-theme .comment-node{
  background:var(--adaptive-ui-active)!important;
}
html.adaptive-theme .comment-node:hover{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:color-mix(in srgb,var(--adaptive-ui-active) 88%,var(--color-dynamic) 12%)!important;
}

/* Выбранные хэштеги должны читаться, а не сливаться с акцентной заливкой. */
html.adaptive-theme .hashtag-filter-banner{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--adaptive-ui-panel)!important;
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html.adaptive-theme .hashtag-filter-banner :is(.text-slate-400,.text-slate-500){
  color:var(--adaptive-text-secondary)!important;
}
html.adaptive-theme .hashtag-filter-chip,
html.adaptive-theme .hashtag-filter-banner .hashtag-filter-tags .hashtag-filter-chip,
html.adaptive-theme .space-hashtag-banner .hashtag-filter-tags .hashtag-filter-chip{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--adaptive-ui-active)!important;
  color:var(--adaptive-text-active)!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html.adaptive-theme .hashtag-filter-chip:hover,
html.adaptive-theme .hashtag-filter-banner .hashtag-filter-tags .hashtag-filter-chip:hover,
html.adaptive-theme .space-hashtag-banner .hashtag-filter-tags .hashtag-filter-chip:hover{
  background:var(--color-dynamic)!important;
  color:var(--adaptive-surface)!important;
  text-shadow:none!important;
}

/* Hover недавнего контакта рисуется на всей строке, а не отдельно на первой кнопке. */
.messenger-recent{
  overflow:hidden;
}
html.adaptive-theme .messenger-recent:hover,
html.adaptive-theme .messenger-recent.is-active{
  background:var(--adaptive-ui-active)!important;
}
html:not(.adaptive-theme) .messenger-recent:hover,
html:not(.adaptive-theme) .messenger-recent.is-active{
  background:var(--standard-panel-soft)!important;
}
.messenger-recent:hover>button,
.messenger-recent.is-active>button,
html.adaptive-theme .messenger-recent:hover>button,
html:not(.adaptive-theme) .messenger-recent:hover>button{
  background:transparent!important;
  box-shadow:none!important;
}
html.adaptive-theme .messenger-side-panel .messenger-recent:hover>button:first-child,
html.adaptive-theme .messenger-side-panel .messenger-recent.is-active>button:first-child{
  color:var(--adaptive-text-active)!important;
}
html:not(.adaptive-theme) .messenger-side-panel .messenger-recent:hover>button:first-child,
html:not(.adaptive-theme) .messenger-side-panel .messenger-recent.is-active>button:first-child{
  color:var(--standard-text-active)!important;
}
.messenger-recent>button:first-child{
  border-radius:.8rem 0 0 .8rem;
}
.messenger-recent>button:last-child{
  border-radius:.55rem!important;
}
.messenger-recent>button:last-child:hover{
  background:color-mix(in srgb,#ef4444 12%,transparent)!important;
  color:#ef4444!important;
}

/* ======[ПОСТ В СООБЩЕНИИ: ПОЛНОЭКРАННОЕ МЕДИА И ОПИСАНИЕ]========== */
.shared-post-card-message .shared-post-cover-item{position:relative;display:block;min-width:0;padding:0;border:0;background:transparent;cursor:zoom-in}
.shared-post-card-message .shared-post-cover-item:focus-visible{outline:2px solid var(--msg-accent);outline-offset:-2px}
.shared-post-message-body p{-webkit-line-clamp:4}
.shared-post-card-message.is-description-expanded .shared-post-message-body p{display:block;overflow:visible;-webkit-line-clamp:unset}
.shared-post-message-actions{display:flex;gap:.45rem}
.shared-post-message-actions>button{min-height:2rem;padding:.42rem .62rem;border:1px solid var(--msg-line,color-mix(in srgb,currentColor,transparent 72%));border-radius:.62rem;background:transparent;color:var(--msg-accent,currentColor);cursor:pointer;font-size:.6rem;font-weight:850}
.shared-post-description-toggle{flex:0 0 auto}
.shared-post-open-button{flex:1}
.shared-post-message-actions>button:hover{background:color-mix(in srgb,var(--msg-accent,currentColor) 12%,transparent)}
.shared-post-media-viewer{position:fixed;z-index:99000;inset:0;display:grid;place-items:center;padding:1.5rem;background:rgb(5 3 8/.9);backdrop-filter:blur(18px)}
.shared-post-media-viewer figure{display:grid;width:min(74rem,calc(100vw - 7rem));height:min(52rem,calc(100dvh - 5rem));place-items:center;margin:0}
.shared-post-media-viewer img,.shared-post-media-viewer video{display:block;max-width:100%;max-height:100%;border-radius:1rem;object-fit:contain;box-shadow:0 1.5rem 5rem rgb(0 0 0/.45)}
.shared-post-media-viewer figcaption{position:absolute;bottom:1rem;left:50%;padding:.38rem .72rem;border-radius:999px;background:rgb(0 0 0/.55);color:#fff;font-size:.66rem;font-weight:850;transform:translateX(-50%)}
.shared-post-media-close,.shared-post-media-nav{position:fixed;z-index:2;display:grid;place-items:center;border:1px solid rgb(255 255 255/.24);background:rgb(255 255 255/.1);color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.shared-post-media-close{top:1rem;right:1rem;width:2.7rem;height:2.7rem;border-radius:.85rem;font-size:1.55rem}
.shared-post-media-nav{top:50%;width:3rem;height:3rem;border-radius:50%;font-size:2rem;transform:translateY(-50%)}
.shared-post-media-nav.is-prev{left:1rem}.shared-post-media-nav.is-next{right:1rem}
.shared-post-media-close:hover,.shared-post-media-nav:hover{background:color-mix(in srgb,var(--color-dynamic,#df8d5b) 70%,transparent)}

/* ======[МАРКЕР РЕПОСТА: СПУТНИК ИЗ ДРУГОЙ ГАЛАКТИКИ]========== */
.post-author-name-row{display:flex;min-width:0;align-items:center;gap:.42rem}
.post-author-name-row>.post-author-link,.post-author-name-row>.viewer-author-link{min-width:0}
.post-repost-origin{display:inline-flex;min-width:0;align-items:center;gap:.28rem;color:color-mix(in srgb,var(--color-dynamic,#df8d5b) 82%,currentColor);font-size:.52rem;font-weight:800;white-space:nowrap}
.post-repost-origin svg{width:1rem;height:1rem;flex:0 0 auto;filter:drop-shadow(0 0 .28rem color-mix(in srgb,var(--color-dynamic,#df8d5b) 56%,transparent));animation:repost-satellite-orbit 3.8s ease-in-out infinite}
.post-repost-origin:not(.is-compact)>span{max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}
.post-repost-origin.is-compact{display:grid;width:1.75rem;height:1.75rem;flex:0 0 auto;place-items:center;border:1px solid color-mix(in srgb,var(--color-dynamic,#df8d5b) 38%,transparent);border-radius:50%;background:color-mix(in srgb,var(--color-dynamic,#df8d5b) 10%,transparent)}
.post-repost-origin.is-compact svg{width:.95rem;height:.95rem}
.post-share-trigger .post-share-satellite-icon,.viewer-post-share .post-share-satellite-icon{filter:drop-shadow(0 0 .22rem color-mix(in srgb,currentColor 38%,transparent));transition:transform 180ms ease,filter 180ms ease}
.post-share-trigger:hover .post-share-satellite-icon,.viewer-post-share:hover .post-share-satellite-icon{transform:translate3d(.08rem,-.08rem,0) rotate(5deg);filter:drop-shadow(0 0 .38rem color-mix(in srgb,currentColor 62%,transparent))}
@keyframes repost-satellite-orbit{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}45%{transform:translate3d(.12rem,-.12rem,0) rotate(5deg)}60%{transform:translate3d(.04rem,-.18rem,0) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.post-repost-origin svg{animation:none}}

@media(max-width:760px){
    .post-share-destination-row{grid-template-columns:minmax(0,1fr) auto}
    .post-share-identity-toggle{justify-content:flex-end}
    .post-share-publish-button{grid-column:1/-1;width:100%}
    .messenger-message .messenger-bubble.has-attachments{max-width:88%}
    .shared-post-card-message{width:100%;max-width:100%}
    .shared-post-media-viewer{padding:.75rem}.shared-post-media-viewer figure{width:calc(100vw - 2rem);height:calc(100dvh - 4rem)}
    .shared-post-media-nav{width:2.45rem;height:2.45rem}.shared-post-media-nav.is-prev{left:.45rem}.shared-post-media-nav.is-next{right:.45rem}
    .post-repost-origin:not(.is-compact)>span{display:none}
}

/* ------------[Полировка медиатеки V2.0.13]------------ // Устраняет обрезание и разъезд элементов в фото- и видеоальбомах профиля и пространства. Модуль: «оформление интерфейса». Часть 1/1 */
html:root body .space-video-library.profile-video-library {
  position:relative;isolation:isolate;min-width:0;overflow:visible!important;padding:1.5rem!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 28%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  border-radius:1.4rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;
  box-shadow:0 1.35rem 3.2rem -2.35rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 45%,rgb(15 23 42/.3))!important;
}
html:root body .space-video-library .profile-video-library-head { align-items:flex-start;margin-bottom:1rem; }
html:root body .space-video-library .profile-video-library-head h2 { margin:.2rem 0 0;font-size:1.25rem;line-height:1.15; }
html:root body .space-video-library .profile-video-library-head p { margin:.25rem 0 0; }
html:root body .space-video-library .profile-video-add { cursor:pointer; }
html:root body .space-video-library .profile-video-add input { display:none!important; }

html:root body .album-unified-dialog,
html:root body #space-video-dialog-host .profile-video-dialog {
  box-sizing:border-box!important;border:1.5px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 38%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 70%,transparent),0 2rem 5rem -1rem rgb(2 6 23/.42)!important;
}
html:root body .album-unified-dialog :is(input,select) {
  box-sizing:border-box;border:1.5px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 32%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  background-color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 5%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)))!important;
}
html:root body .space-access-tabs .album-access-option.album-visibility-option {
  display:grid!important;grid-template-columns:2.65rem minmax(0,1fr) 1rem!important;align-items:center!important;gap:.75rem!important;
}
html:root body .space-access-tabs .album-access-option>span:nth-child(2) { min-width:0;align-self:center; }
html:root body .space-access-tabs .album-access-option>i { justify-self:end;align-self:center; }
.album-access-option.is-followers,.album-access-option.is-subscribers{--access-color:#8b5cf6}.album-access-option.is-managers{--access-color:#f59e0b}

html:root body .album-card-cover { position:relative;overflow:hidden!important; }
html:root body .album-card-empty-media {
  display:grid;width:100%!important;height:100%!important;min-height:0!important;place-items:center;overflow:hidden!important;border:0!important;border-radius:inherit!important;
  background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 17%,transparent),transparent 58%),color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 7%,var(--vmesta-ui-soft,var(--adaptive-surface-2,#f1f5f9)))!important;
  color:var(--color-dynamic,var(--video-accent,#0d9488));
}
html:root body .album-card-empty-media svg { display:block;width:min(7.5rem,52%)!important;height:auto!important;max-height:72%!important;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8; }
.album-empty-frame { fill:color-mix(in srgb,currentColor 9%,transparent); }
.album-empty-glyph { fill:color-mix(in srgb,currentColor 16%,transparent); }
.album-empty-orbit { stroke-dasharray:4 7;opacity:.48;transform-origin:47px 40px;animation:album-card-orbit 8s linear infinite; }
.album-empty-satellite { fill:currentColor;stroke:none;transform-origin:47px 40px;animation:album-card-orbit 5.5s linear infinite reverse; }
.album-empty-spark { stroke-width:2.5;transform-origin:17px 25px;animation:album-card-spark 2.6s ease-in-out infinite; }
@keyframes album-card-orbit { to { transform:rotate(360deg); } }
@keyframes album-card-spark { 0%,100%{opacity:.25;transform:scale(.72)}50%{opacity:1;transform:scale(1.12)} }

html:root body .album-viewer-empty-state { display:grid!important;min-height:18rem;place-items:center;align-content:center;gap:.65rem;padding:1.5rem;text-align:center; }
html:root body .album-viewer-empty-state>.album-card-empty-media { width:6rem!important;height:6rem!important;border-radius:1.35rem!important; }
html:root body .album-viewer-empty-state>.album-card-empty-media svg { width:4.8rem!important;max-height:none!important; }
html:root body .album-viewer-empty-state p { margin:0!important;color:var(--vmesta-ui-ink,var(--adaptive-text,#334155))!important;font-size:.78rem;font-weight:900; }
html:root body .album-viewer-empty-state small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.6rem;font-weight:700; }

html:root body .profile-video-album-viewer-grid { overflow:visible!important;isolation:isolate; }
html:root body .profile-video-album-viewer-card { contain:layout!important;overflow:visible!important;isolation:isolate; }
html:root body .profile-video-album-viewer-media { overflow:hidden;contain:layout paint; }
html:root body .profile-video-album-viewer-card>div { position:relative;overflow:visible!important; }
html:root body .profile-video-album-viewer-card .media-card-inline-actions .media-card-menu {
  top:auto!important;right:0!important;bottom:calc(100% + .4rem)!important;
}

html:root body .media-delete-dialog>p { margin:0;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.7rem;line-height:1.55; }
html:root body .album-unified-dialog>footer>button.is-danger {
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:#ef4444!important;color:#fff!important;opacity:1!important;box-shadow:0 .75rem 1.6rem -.9rem rgb(239 68 68/.75)!important;
}
html:root body .album-unified-dialog>footer>button.is-danger:hover { background:#dc2626!important; }
html:root body .album-unified-dialog>footer>button.is-danger svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

@media(max-width:760px){
  html:root body .space-video-library.profile-video-library{padding:1rem!important;border-radius:1.1rem!important}
  html:root body .space-video-library .profile-video-library-head{align-items:stretch;flex-direction:column}
  html:root body .space-video-library .profile-video-head-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.album-empty-orbit,.album-empty-satellite,.album-empty-spark{animation-duration:10s!important}}

/* ------------[Единая медиасистема V2.0.14]------------ // Выравнивает фото и видео профилей и пространств после старых тематических слоёв. Модуль: «оформление интерфейса». Часть 1/1 */
html:root body :is(.space-profile-photos-panel,.space-video-library.profile-video-library) {
  box-sizing:border-box!important;width:100%!important;min-height:36rem!important;border-radius:1.5rem!important;
}
html:root body .space-profile-photo-field { box-sizing:border-box!important;width:100%!important;min-height:30rem!important;border-radius:1.25rem!important; }
html:root body .space-profile-photo-tile {
  overflow:hidden!important;border-radius:1rem!important;background:var(--vmesta-ui-soft,var(--adaptive-surface-2,#f1f5f9))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-dynamic,#0d9488) 12%,transparent);
}
html:root body .space-profile-photo-tile>img { display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit; }

html:root body :is(#album-create-panel,#album-access-panel,.album-access-dialog,#album-photo-picker-panel,#album-share-panel),
html:root body #space-video-dialog-host .profile-video-dialog:not(.media-delete-confirm),
html:root body #profile-video-dialog-host .profile-video-dialog:not(.media-delete-confirm) {
  box-sizing:border-box!important;width:min(38rem,calc(100vw - 2rem))!important;max-width:38rem!important;max-height:calc(100dvh - 2rem)!important;
  border-radius:1.75rem!important;overflow:auto!important;
}
html:root body :is(.album-unified-dialog,#album-photo-picker-panel,#album-share-panel)>header>button,
html:root body :is(.album-viewer-close,.profile-video-album-viewer-close,.album-picker-close,.album-share-close) {
  display:grid!important;width:2.75rem!important;height:2.75rem!important;min-width:2.75rem!important;place-items:center!important;padding:0!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#0d9488) 14%,transparent)!important;border-radius:.9rem!important;
  background:color-mix(in srgb,var(--color-dynamic,#0d9488) 10%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)))!important;color:var(--color-dynamic,#0d9488)!important;
}
html:root body :is(.album-unified-dialog,#album-photo-picker-panel,#album-share-panel)>header>button svg,
html:root body :is(.album-viewer-close,.profile-video-album-viewer-close,.album-picker-close,.album-share-close) svg {
  display:block;width:1.12rem!important;height:1.12rem!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round;stroke-linejoin:round;
}
html:root body :is(.album-unified-dialog,#album-photo-picker-panel,#album-share-panel)>header>button:hover,
html:root body :is(.album-viewer-close,.profile-video-album-viewer-close,.album-picker-close,.album-share-close):hover { background:var(--color-dynamic,#0d9488)!important;color:#fff!important; }

html:root body .album-access-dialog { padding:1.25rem!important; }
html:root body .album-access-dialog>header { margin-bottom:.25rem; }
html:root body .album-access-dialog .album-access-options { display:grid!important;gap:.65rem!important; }
html:root body .album-access-dialog .album-access-option { min-height:4.6rem!important;border-radius:1rem!important; }

html:root body .media-delete-confirm,
html:root body #space-video-dialog-host .media-delete-confirm,
html:root body #profile-video-dialog-host .media-delete-confirm {
  position:relative!important;display:grid!important;width:min(30rem,calc(100vw - 2rem))!important;max-width:30rem!important;max-height:calc(100dvh - 2rem)!important;
  justify-items:center!important;gap:1rem!important;overflow:auto!important;padding:2.25rem 2rem 1.75rem!important;border:1px solid color-mix(in srgb,#ef4444 15%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  border-radius:2.35rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a))!important;text-align:center!important;
  box-shadow:0 2rem 5rem -1rem rgb(2 6 23/.42)!important;
}
html:root body .media-delete-confirm .media-delete-hero {
  position:relative;display:grid;width:5rem;height:5rem;place-items:center;border-radius:1.25rem;background:rgb(239 68 68/.11);color:#ef4444;
}
html:root body .media-delete-confirm .media-delete-hero::after { content:"";position:absolute;inset:-.55rem;border:1px solid rgb(239 68 68/.14);border-radius:1.65rem;animation:media-delete-breathe 2.7s ease-in-out infinite; }
html:root body .media-delete-confirm .media-delete-hero svg { width:2.15rem;height:2.15rem;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round; }
html:root body .media-delete-confirm>h3 { margin:.45rem 0 0;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));font-size:1.35rem;font-weight:950;line-height:1.18;letter-spacing:-.02em; }
html:root body .media-delete-confirm>p { max-width:24rem;margin:0!important;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b))!important;font-size:.78rem!important;line-height:1.6!important; }
html:root body .media-delete-confirm>footer { display:grid!important;width:100%;grid-template-columns:1fr 1.5fr;gap:.75rem;margin-top:.4rem; }
html:root body .media-delete-confirm>footer>button { min-height:3rem!important;border-radius:1rem!important;font-size:.68rem!important;text-transform:uppercase;letter-spacing:.04em; }
html:root body .media-delete-confirm>footer>button.is-danger { display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:#ef4444!important;color:#fff!important;box-shadow:0 .9rem 1.9rem -1rem rgb(239 68 68/.8)!important; }
html:root body .media-delete-confirm>footer>button.is-danger:hover { background:#dc2626!important; }
html:root body .media-delete-confirm>footer>button.is-danger svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
@keyframes media-delete-breathe { 0%,100%{opacity:.35;transform:scale(.92)} 50%{opacity:.8;transform:scale(1.05)} }

html:root body #album-delete-panel.media-delete-card,
html:root body .space-delete-modal-content {
  box-sizing:border-box!important;width:min(30rem,calc(100vw - 2rem))!important;max-width:30rem!important;border-radius:2.35rem!important;
}

html:root body #space-video-dialog-host .profile-video-album-viewer-backdrop { z-index:1!important; }
html:root body #space-video-dialog-host .profile-video-dialog-backdrop { z-index:8!important;pointer-events:auto!important; }
html:root body #space-video-dialog-host .profile-video-dialog-backdrop>.profile-video-dialog { position:relative;z-index:1; }

html:root body .album-viewer-empty-state,
html:root body .profile-video-album-viewer-empty>.album-library-complete-state {
  box-sizing:border-box!important;width:min(100%,42rem)!important;min-height:clamp(24rem,56vh,38rem)!important;margin:auto!important;padding:2rem!important;
}
html:root body .album-viewer-empty-state>.album-card-empty-media { width:8rem!important;height:8rem!important;border-radius:1.8rem!important; }
html:root body .album-viewer-empty-state>.album-card-empty-media svg { width:6.2rem!important; }
html:root body .profile-video-album-viewer-empty>.album-library-complete-state .album-library-complete-visual { width:7.5rem!important;height:7.5rem!important;border-radius:1.8rem!important; }
html:root body .profile-video-album-viewer-empty>.album-library-complete-state .album-library-complete-visual svg { width:5.5rem!important;height:5.5rem!important; }
html:root body :is(.album-viewer-empty-state,.profile-video-album-viewer-empty>.album-library-complete-state)>:is(p,strong) { font-size:1rem!important;line-height:1.45!important; }

html:root body #album-viewer-modal.is-space-album .album-photo-wall.is-single { display:grid!important;grid-template-columns:minmax(0,1fr)!important;place-items:center!important; }
html:root body #album-viewer-modal.is-space-album .album-photo-wall.is-single .album-photo-tile {
  width:min(100%,68rem)!important;overflow:hidden!important;border:0!important;border-radius:1.35rem!important;background:transparent!important;box-shadow:none!important;
}
html:root body #album-viewer-modal.is-space-album .album-photo-wall.is-single .album-photo-tile img { width:100%!important;max-height:calc(100dvh - 19rem)!important;border-radius:inherit!important;object-fit:contain!important;background:transparent!important; }

html:root body .profile-video-album-viewer-card .media-card-menu { width:13rem!important;max-width:min(13rem,calc(100vw - 2rem))!important; }
html:root body .profile-video-album-viewer-card>div { min-height:3.65rem!important;padding:.65rem .75rem!important; }

@media(max-width:760px){
  html:root body :is(.space-profile-photos-panel,.space-video-library.profile-video-library){min-height:0!important;border-radius:1.15rem!important}
  html:root body .space-profile-photo-field{min-height:22rem!important;border-radius:1rem!important}
  html:root body .media-delete-confirm,html:root body #space-video-dialog-host .media-delete-confirm,html:root body #profile-video-dialog-host .media-delete-confirm{padding:1.75rem 1.25rem 1.25rem!important;border-radius:1.75rem!important}
  html:root body .media-delete-confirm>footer{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){html:root body .media-delete-confirm .media-delete-hero::after{animation:none!important}}
.media-delete-visual{position:relative;display:grid;width:4rem;height:4rem;place-items:center;margin:.15rem auto;border-radius:1.1rem;background:rgb(239 68 68/.1);color:#ef4444}.media-delete-visual::after{content:"";position:absolute;inset:-.28rem;border:1px solid rgb(239 68 68/.2);border-radius:1.32rem;animation:album-complete-breathe 2.7s ease-in-out infinite}.media-delete-visual svg{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ======[ТЕМЫ: ОКОНЧАТЕЛЬНАЯ ОЧИСТКА БЕЛЫХ СЛОЁВ И КОМПАКТНЫЕ ФОРМЫ]========== */
html.adaptive-theme{--adaptive-ui-modal:var(--adaptive-ui-panel)}
@supports(color:color-mix(in srgb,black,white)){
html.adaptive-theme:not(.dark){--adaptive-ui-panel:color-mix(in srgb,var(--adaptive-surface) 78%,var(--color-dynamic) 22%);--adaptive-ui-active:color-mix(in srgb,var(--adaptive-surface-2) 72%,var(--color-dynamic) 28%);--adaptive-ui-modal:color-mix(in srgb,var(--adaptive-surface) 70%,var(--color-dynamic) 30%);--adaptive-ui-line:color-mix(in srgb,var(--color-dynamic) 22%,transparent)}
html.adaptive-theme.dark{--adaptive-ui-modal:color-mix(in srgb,var(--adaptive-surface) 86%,var(--color-dynamic) 14%)}}

/* Окно друзей: внутренние bg-white больше не перебивают тему. */
html.adaptive-theme #friends-modal>div,
html.adaptive-theme #friends-modal>div>.p-8,
html.adaptive-theme #friends-modal>div>.h-6,
html.adaptive-theme #modal-friends-list,
html.adaptive-theme #modal-friends-list .bg-white{border-color:var(--adaptive-ui-line)!important;background-color:var(--adaptive-ui-modal)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme #friends-modal{background:color-mix(in srgb,var(--adaptive-background) 84%,transparent)!important}
html.adaptive-theme #modal-friends-list>.relative{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important;box-shadow:none!important}
html.adaptive-theme #modal-friends-list>.relative:hover{border-color:var(--adaptive-ui-line-strong)!important;box-shadow:var(--adaptive-ui-shadow-hover)!important}
html.adaptive-theme #modal-friends-search{border:1px solid var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important;box-shadow:none!important}
html.adaptive-theme #friends-modal :is(#btn-tab-all,#btn-tab-online){border-color:transparent!important;color:var(--adaptive-text-secondary)!important}
html.adaptive-theme #friends-modal :is(#btn-tab-all,#btn-tab-online).shadow-sm{border-color:var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important;box-shadow:none!important}

/* Просмотр поста целиком получает оттенки обоев: ни один внутренний слой не остаётся белым или чёрным. */
html.adaptive-theme #post-viewer{
  --viewer-theme-surface:color-mix(in srgb,var(--adaptive-ui-panel) 76%,var(--color-dynamic) 24%);
  --viewer-theme-elevated:color-mix(in srgb,var(--adaptive-ui-modal) 82%,var(--color-dynamic) 18%);
  --viewer-theme-subtle:color-mix(in srgb,var(--adaptive-ui-active) 84%,var(--color-dynamic) 16%);
  background:color-mix(in srgb,var(--adaptive-background) 82%,var(--color-dynamic) 18%)!important;
  backdrop-filter:blur(14px)
}
html.adaptive-theme #post-viewer-panel{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--viewer-theme-surface)!important;
  box-shadow:0 2rem 6rem color-mix(in srgb,var(--adaptive-background) 62%,transparent)!important
}
html.adaptive-theme #post-viewer :is(#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-surface)!important
}
html.adaptive-theme #post-viewer :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-elevated)!important
}
html.adaptive-theme #post-viewer :is(#viewer-comments-block,#viewer-comments-list){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-subtle)!important
}
html.adaptive-theme #post-viewer #viewer-form-container{border-color:var(--adaptive-ui-line)!important;background:transparent!important}
html.adaptive-theme #post-viewer .comment-form-container{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:color-mix(in srgb,var(--viewer-theme-elevated) 74%,var(--viewer-theme-subtle) 26%)!important;
  box-shadow:none!important
}
html.adaptive-theme #post-viewer .comment-node{border-color:var(--adaptive-ui-line)!important;background:var(--viewer-theme-elevated)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel>button{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--viewer-theme-elevated)!important;
  color:var(--adaptive-text-active)!important;
  box-shadow:var(--adaptive-ui-shadow)!important
}

/* Выпадающее меню настроек: одна ровная рамка и мягкая тень. */
html.adaptive-theme #settings-dropdown{border:1px solid var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-modal)!important;filter:none!important;box-shadow:0 22px 52px -28px rgb(15 23 42/.48),0 7px 18px -12px rgb(15 23 42/.28)!important}
html.adaptive-theme.dark #settings-dropdown{box-shadow:0 24px 56px -26px rgb(0 0 0/.82),0 8px 20px -12px rgb(0 0 0/.62)!important}

/* Поля «Данные» и «Безопасность»: компактнее по ширине и высоте. */
.cover-account-row,.cover-account-setting-row,.cover-account-toggle-row{grid-template-columns:minmax(12rem,1fr) minmax(14rem,25rem)!important;justify-content:space-between;gap:1rem!important;padding-block:.72rem!important}
.cover-account-row>:is(input,select,.vm-select-shell,.vm-date-shell),.cover-account-setting-row>:is(input,.vm-select-shell,.vm-date-shell),.cover-account-password-value{width:min(100%,25rem)!important;justify-self:end}
.cover-account-row input,.cover-account-row select,.cover-account-setting-row>input,.cover-account-password-value,.cover-account-row .vm-select-trigger,.cover-account-row .vm-date-trigger,.cover-account-setting-row .vm-select-trigger,.cover-account-setting-row .vm-date-trigger{min-height:2.28rem!important;border-radius:.68rem!important;padding-block:.42rem!important}
.cover-account-switch{width:2.75rem!important;height:1.55rem!important}
.cover-account-switch>span:after{top:.17rem!important;left:.17rem!important;width:1.08rem!important;height:1.08rem!important}
.cover-account-switch input:checked+span:after{transform:translateX(1.28rem)!important}
html.adaptive-theme .cover-account-card{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-modal)!important;box-shadow:var(--adaptive-ui-shadow)!important}
html.adaptive-theme .cover-account-card-header,html.adaptive-theme :is(.cover-account-row,.cover-account-setting-row,.cover-account-toggle-row){border-color:var(--adaptive-ui-line)!important}
html.adaptive-theme .cover-account-row :is(input,select,.vm-select-trigger,.vm-date-trigger),html.adaptive-theme .cover-account-setting-row :is(input,.vm-select-trigger,.vm-date-trigger),html.adaptive-theme .cover-account-password-value{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important}

/* Календарь и список пола больше не перекрывают половину редактора. */
.vm-date-popover{width:min(15.25rem,calc(100vw - 1rem))!important;padding:.44rem!important;border-radius:.78rem!important}
.vm-date-popover>header{grid-template-columns:1.85rem minmax(0,1fr) 1.85rem!important;gap:.28rem!important;margin-bottom:.4rem!important}
.vm-date-popover>header>div{grid-template-columns:minmax(0,1fr) 4.45rem!important;gap:.25rem!important}
.vm-date-popover>header>button{width:1.85rem!important;height:1.85rem!important;border-radius:.56rem!important}
.vm-date-popover .vm-select-trigger{min-height:1.85rem!important;padding-inline:.42rem!important}
.vm-date-weekdays,.vm-date-grid{gap:.12rem!important}.vm-date-weekdays{margin-bottom:.16rem!important}
.vm-date-grid>:is(i,button){border-radius:.45rem!important}.vm-date-grid>button{font-size:.62rem!important}
.vm-date-popover>footer{margin-top:.38rem!important;padding-top:.4rem!important}
.vm-date-popover>footer>button{min-height:1.65rem!important;padding-inline:.52rem!important}
html.adaptive-theme :is(.vm-select-menu,.vm-date-popover){--vm-control-bg:var(--adaptive-ui-panel);--vm-control-panel:var(--adaptive-ui-modal);--vm-control-line:var(--adaptive-ui-line);background:var(--adaptive-ui-modal)!important}
html:not(.adaptive-theme) :is(.vm-select-menu,.vm-date-popover){--vm-control-bg:var(--standard-panel);--vm-control-panel:var(--standard-panel-soft);--vm-control-line:var(--standard-line);background:var(--standard-panel)!important}

/* Создание пространства — плоская акцентная кнопка без градиента. */
html .space-intro-actions .space-primary-button{border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 76%,transparent)!important;background:var(--color-dynamic,#3b82f6)!important;background-image:none!important;color:#fff!important;filter:none!important;box-shadow:none!important}
html .space-intro-actions .space-primary-button:hover{border-color:var(--color-dynamic,#3b82f6)!important;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 86%,#111827 14%)!important;background-image:none!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 10px 24px -18px var(--color-dynamic,#3b82f6)!important}

/* Полноэкранные фотографии наследуют текущую тему. */
html.adaptive-theme #media-viewer{--media-viewer-bg:color-mix(in srgb,var(--adaptive-background) 90%,transparent);--media-viewer-surface:var(--adaptive-ui-modal);--media-viewer-photo:var(--adaptive-ui-active);--media-viewer-control:var(--adaptive-ui-panel);--media-viewer-border:var(--adaptive-ui-line-strong);--media-viewer-text:var(--adaptive-text-active)}
html:not(.adaptive-theme):not(.dark) #media-viewer{--media-viewer-bg:color-mix(in srgb,var(--adaptive-background) 92%,transparent);--media-viewer-surface:var(--standard-panel);--media-viewer-photo:var(--standard-panel-soft);--media-viewer-control:var(--standard-panel);--media-viewer-border:var(--standard-line);--media-viewer-text:var(--standard-text-active)}
html.dark:not(.adaptive-theme) #media-viewer{--media-viewer-bg:color-mix(in srgb,var(--adaptive-background) 94%,transparent);--media-viewer-surface:var(--standard-panel);--media-viewer-photo:var(--standard-panel-soft);--media-viewer-control:var(--standard-panel);--media-viewer-border:var(--standard-line);--media-viewer-text:var(--standard-text-active)}
#media-viewer{color:var(--media-viewer-text)!important;backdrop-filter:blur(18px)}
#media-viewer :is(#media-viewer-close,#media-viewer-prev,#media-viewer-next,#media-viewer-toolbar,#media-viewer-toolbar button,#media-viewer-counter){color:var(--media-viewer-text)!important}
#media-viewer #media-viewer-toolbar #media-viewer-open-post{color:#fff!important}
#media-viewer .media-viewer-layout,#media-viewer.is-post-expanded .media-viewer-layout{box-shadow:0 24px 64px -34px color-mix(in srgb,var(--media-viewer-text) 42%,transparent)!important}
#media-viewer-image,#media-viewer-video{filter:none!important}
html.adaptive-theme :is(.messenger-photo-viewer,.shared-post-media-viewer,.album-viewer-modal-shell){background:color-mix(in srgb,var(--adaptive-background) 90%,transparent)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme :is(.messenger-photo-viewer figure,.shared-post-media-viewer figure){border:1px solid var(--adaptive-ui-line-strong);border-radius:1rem;background:var(--adaptive-ui-active)}
html.adaptive-theme :is(.messenger-photo-viewer-close,.messenger-photo-viewer-nav,.shared-post-media-close,.shared-post-media-nav){border-color:var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme :is(.messenger-photo-viewer figcaption,.shared-post-media-viewer figcaption){background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme .album-viewer-panel,html.adaptive-theme .album-viewer-header,html.adaptive-theme .album-share-panel{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-modal)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme .album-viewer-body{background:var(--adaptive-ui-active)!important}
html.adaptive-theme .album-viewer-close{border-color:var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html:not(.adaptive-theme) :is(.messenger-photo-viewer,.shared-post-media-viewer){background:color-mix(in srgb,var(--adaptive-background) 92%,transparent)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) :is(.messenger-photo-viewer figure,.shared-post-media-viewer figure){border:1px solid var(--standard-line);border-radius:1rem;background:var(--standard-panel-soft)}
html:not(.adaptive-theme) :is(.messenger-photo-viewer-close,.messenger-photo-viewer-nav,.shared-post-media-close,.shared-post-media-nav){border-color:var(--standard-line)!important;background:var(--standard-panel)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) :is(.messenger-photo-viewer figcaption,.shared-post-media-viewer figcaption){background:var(--standard-panel)!important;color:var(--standard-text-active)!important}

@media(max-width:640px){
.cover-account-row,.cover-account-setting-row,.cover-account-toggle-row{grid-template-columns:1fr!important;gap:.48rem!important}
.cover-account-row>:is(input,select,.vm-select-shell,.vm-date-shell),.cover-account-setting-row>:is(input,.vm-select-shell,.vm-date-shell),.cover-account-password-value{width:100%!important;justify-self:stretch}}

/* Ссылки в публикациях заметны во всех темах и не спорят с основным текстом. */
.post-supported-link{
  position:relative;
  border-radius:.28rem;
  color:var(--color-dynamic,#2563eb)!important;
  font-weight:800;
  text-decoration-line:underline;
  text-decoration-color:color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 54%);
  text-decoration-thickness:.08em;
  text-underline-offset:.18em;
  transition:color .16s ease,background-color .16s ease,text-decoration-color .16s ease,box-shadow .16s ease;
}
.post-supported-link:hover,.post-supported-link:focus-visible{
  color:color-mix(in srgb,var(--color-dynamic,#2563eb) 82%,#fff 18%)!important;
  background:color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 86%);
  text-decoration-color:currentColor;
  box-shadow:0 0 0 .22rem color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 88%);
  outline:0;
}
html:not(.adaptive-theme):not(.dark) .post-supported-link:hover{color:color-mix(in srgb,var(--color-dynamic,#2563eb) 84%,#111827 16%)!important}

/* Инструменты формы поста: фотография и файл — одна аккуратная система. */
.post-composer-tool{
  display:inline-grid!important;
  width:2.15rem!important;
  height:2.15rem!important;
  flex:0 0 2.15rem;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 76%);
  border-radius:.72rem!important;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 92%,var(--color-dynamic,#3b82f6) 8%);
  color:var(--adaptive-muted,#64748b)!important;
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease!important;
}
.post-composer-tool:hover{
  border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 42%);
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 78%,var(--color-dynamic,#3b82f6) 22%);
  color:var(--color-dynamic,#3b82f6)!important;
  transform:translateY(-1px);
}
.post-composer-tool svg{width:1.12rem!important;height:1.12rem!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round;stroke-linejoin:round}

/* Вложения выглядят как самостоятельные медиа-плитки, а не системная строка файла. */
.post-attachments,.post-attachment-selection-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.62rem}
.post-attachment-card,.post-file-selection-card{
  min-height:3.7rem;
  border-radius:1rem;
  padding:.62rem .72rem;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 90%,var(--color-dynamic,#3b82f6) 10%);
  box-shadow:0 8px 22px -20px color-mix(in srgb,var(--adaptive-text-strong,#0f172a) 62%,transparent);
}
.post-attachment-icon{
  position:relative;
  display:grid;
  width:2.7rem;
  height:2.7rem;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 54%);
  border-radius:.86rem;
  background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 84%);
  color:var(--color-dynamic,#3b82f6);
}
.post-attachment-icon svg{width:1.28rem;height:1.28rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.post-attachment-icon>small{position:absolute;right:-.28rem;bottom:-.22rem;max-width:2rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 48%);border-radius:.36rem;padding:.09rem .2rem;background:var(--adaptive-surface,#fff);color:var(--color-dynamic,#3b82f6);font-size:.43rem;font-weight:950;line-height:1;letter-spacing:.025em}
.post-file-selection-card .post-attachment-icon{width:2.35rem;height:2.35rem}
.post-attachment-selection{padding:.65rem;border-radius:.9rem}

/* Поля аккаунта компактны и находятся рядом с собственными подписями. */
@media(min-width:641px){
  .cover-account-row,.cover-account-setting-row,.cover-account-toggle-row{
    grid-template-columns:minmax(10.5rem,14.5rem) minmax(12rem,21rem)!important;
    justify-content:start!important;
    gap:.72rem!important;
    padding-block:.58rem!important;
  }
  .cover-account-row>:is(input,select,.vm-select-shell,.vm-date-shell),.cover-account-setting-row>:is(input,.vm-select-shell,.vm-date-shell),.cover-account-password-value{
    width:min(100%,21rem)!important;
    justify-self:start!important;
  }
  .cover-account-switch{justify-self:start!important}
}
.cover-account-row input,.cover-account-row select,.cover-account-setting-row>input,.cover-account-password-value,.cover-account-row .vm-select-trigger,.cover-account-row .vm-date-trigger,.cover-account-setting-row .vm-select-trigger,.cover-account-setting-row .vm-date-trigger{min-height:2.08rem!important;padding-block:.32rem!important}

/* ======[РЕДАКТОР ПОСТА: ВЛОЖЕНИЯ КАК В СООБЩЕНИЯХ]========== */
.post-composer-attach-control{position:relative;z-index:90;display:inline-flex;flex:0 0 auto}
.post-composer-plus{display:grid;width:2.65rem;height:2.65rem;place-items:center;border:1px solid var(--adaptive-ui-line,var(--adaptive-border,#cbd5e1));border-radius:.82rem;background:var(--adaptive-ui-active,var(--adaptive-surface-2,#f1f5f9));color:var(--color-dynamic,#3b82f6);cursor:pointer;box-shadow:none;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.post-composer-plus>span{font-size:1.65rem;font-weight:350;line-height:1;transform:translateY(-.04rem);transition:transform .18s ease}
.post-composer-plus:hover,.post-composer-plus[aria-expanded="true"]{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 38%);background:color-mix(in srgb,var(--adaptive-ui-active,var(--adaptive-surface-2,#f1f5f9)) 80%,var(--color-dynamic,#3b82f6) 20%);transform:translateY(-1px)}
.post-composer-plus[aria-expanded="true"]>span{transform:translateY(-.04rem) scale(1.06)}
.post-composer-attach-menu{position:absolute;z-index:5200;left:0;bottom:calc(100% + .55rem);display:grid;width:min(22.5rem,calc(100vw - 2rem));grid-template-columns:repeat(2,minmax(0,1fr));gap:.28rem;border:1px solid var(--adaptive-ui-line,var(--adaptive-border,#cbd5e1));border-radius:1.1rem;padding:.7rem;background:var(--adaptive-ui-panel,var(--adaptive-surface,#fff));box-shadow:0 24px 60px -32px rgb(15 23 42/.56)}
.post-composer-attach-menu.hidden{display:none!important}
.post-composer-attach-menu>button{display:grid;min-width:0;min-height:3.25rem;grid-template-columns:2.35rem minmax(0,1fr);align-items:center;gap:.65rem;border:0;border-radius:.75rem;padding:.38rem .48rem;background:transparent;color:var(--adaptive-text-secondary,var(--adaptive-text,#334155));cursor:pointer;text-align:left;transition:background .16s ease,color .16s ease,transform .16s ease}
.post-composer-attach-menu>button:hover{background:var(--adaptive-ui-active,var(--adaptive-surface-2,#f1f5f9));color:var(--adaptive-text-active,var(--adaptive-text-strong,#0f172a));transform:translateY(-1px)}
.post-composer-attach-icon{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.72rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--color-dynamic,#3b82f6)}
.post-composer-attach-icon svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.post-composer-attach-menu strong{display:block;overflow:hidden;font-size:.76rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.post-composer-attach-menu small{display:block;margin-top:.16rem;color:var(--adaptive-text-passive,var(--adaptive-muted,#94a3b8));font-size:.5rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.post-composer-attach-menu .is-soon{opacity:.72}
html:not(.adaptive-theme) .post-composer-attach-menu{border-color:var(--standard-line);background:var(--standard-panel);color:var(--standard-text-secondary)}
html:not(.adaptive-theme) .post-composer-attach-menu>button{color:var(--standard-text-secondary)}
html:not(.adaptive-theme) .post-composer-attach-menu>button:hover{background:var(--standard-panel-soft);color:var(--standard-text-active)}
html:not(.adaptive-theme) .post-composer-plus{border-color:var(--standard-line);background:var(--standard-panel-soft)}

/* Настройки темы: раскрываемые адаптивные режимы без прыжков ширины. */
#settings-dropdown{width:17rem!important}
.adaptive-theme-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 2.55rem;overflow:hidden;border:1px solid rgb(226 232 240);border-radius:.85rem;background:transparent;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.dark .adaptive-theme-shell{border-color:rgb(30 41 59)}
.adaptive-theme-shell.is-active{border-color:rgb(59 130 246);background:rgb(59 130 246/.08);box-shadow:inset 0 0 0 1px rgb(59 130 246/.08)}
.adaptive-theme-main{display:flex;min-width:0;min-height:3.3rem;align-items:center;justify-content:space-between;gap:.65rem;border:0;padding:.7rem .45rem .7rem .75rem;background:transparent;color:inherit;cursor:pointer;text-align:left;transition:background .16s ease}
.adaptive-theme-main:hover,.adaptive-theme-mode-toggle:hover{background:rgb(148 163 184/.10)}
.adaptive-theme-mode-toggle{display:grid;width:100%;min-height:3.3rem;place-items:center;border:0;border-left:1px solid rgb(226 232 240);background:transparent;color:rgb(100 116 139);cursor:pointer;transition:background .16s ease,color .16s ease}
.dark .adaptive-theme-mode-toggle{border-left-color:rgb(30 41 59);color:rgb(148 163 184)}
.adaptive-theme-mode-toggle svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.adaptive-theme-mode-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.adaptive-theme-mode-menu{grid-column:1/-1;display:grid;gap:.2rem;border-top:1px solid rgb(226 232 240);padding:.42rem;background:rgb(248 250 252/.72)}
.dark .adaptive-theme-mode-menu{border-top-color:rgb(30 41 59);background:rgb(15 23 42/.42)}
.adaptive-theme-mode-menu.hidden{display:none!important}
.adaptive-theme-mode-menu>button{display:grid!important;min-height:2.85rem!important;grid-template-columns:1.9rem minmax(0,1fr) 1rem;align-items:center;gap:.55rem!important;border:0;border-radius:.68rem;padding:.36rem .48rem;background:transparent;color:rgb(71 85 105);cursor:pointer;text-align:left;transition:background .16s ease,color .16s ease}
.dark .adaptive-theme-mode-menu>button{color:rgb(203 213 225)}
.adaptive-theme-mode-menu>button:hover,.adaptive-theme-mode-menu>button.is-active{background:rgb(59 130 246/.11);color:rgb(37 99 235)}
.dark .adaptive-theme-mode-menu>button:hover,.dark .adaptive-theme-mode-menu>button.is-active{color:rgb(96 165 250)}
.adaptive-mode-icon{display:grid!important;width:1.85rem;height:1.85rem;min-width:1.85rem!important;place-items:center;border-radius:.58rem;background:rgb(148 163 184/.13);font-size:.82rem}
.adaptive-theme-mode-menu strong,.adaptive-theme-mode-menu small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adaptive-theme-mode-menu strong{font-size:.68rem;font-weight:850}.adaptive-theme-mode-menu small{margin-top:.1rem;color:rgb(148 163 184);font-size:.48rem;font-weight:750;letter-spacing:.035em;text-transform:uppercase}
.adaptive-mode-check{visibility:hidden!important;color:rgb(59 130 246);font-size:.72rem;font-weight:900}.adaptive-theme-mode-menu>button.is-active .adaptive-mode-check{visibility:visible!important}
html.adaptive-theme .adaptive-theme-shell{border-color:var(--adaptive-ui-line-strong,var(--adaptive-border))}
html.adaptive-theme .adaptive-theme-shell.is-active{border-color:var(--color-dynamic);background:color-mix(in srgb,var(--color-dynamic),transparent 89%)}
html.adaptive-theme .adaptive-theme-mode-toggle,html.adaptive-theme .adaptive-theme-mode-menu{border-color:var(--adaptive-ui-line,var(--adaptive-border))}
html.adaptive-theme .adaptive-theme-mode-menu{background:var(--adaptive-ui-panel,var(--adaptive-surface))}
html.adaptive-theme .adaptive-theme-mode-menu>button{color:var(--adaptive-text-secondary,var(--adaptive-text))!important}
html.adaptive-theme .adaptive-theme-mode-menu>button:hover,html.adaptive-theme .adaptive-theme-mode-menu>button.is-active{background:var(--adaptive-ui-active,var(--adaptive-surface-2))!important;color:var(--adaptive-text-active,var(--adaptive-text-strong))!important}

/* ------------[Компактная кнопка адаптивной темы]------------ // Уменьшает высоту и визуальную тяжесть основного переключателя в шапке страницы. Модуль: «настройки темы в шапке». Часть 1/1 */
#settings-dropdown .adaptive-theme-shell{grid-template-columns:minmax(0,1fr) 2.3rem}
#settings-dropdown .adaptive-theme-main{min-height:2.8rem!important;padding:.48rem .38rem .48rem .62rem}
#settings-dropdown .adaptive-theme-mode-toggle{min-height:2.8rem!important}

/* ======[СООБЩЕНИЯ: ОБЩИЕ ЗАКРЕПЫ ДИАЛОГА]========== */
.messenger-pinned-toggle{position:relative}
.messenger-pinned-toggle.has-pins{color:var(--msg-accent)!important}
.messenger-pinned-toggle>b{position:absolute;top:-.18rem;right:-.2rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--msg-panel);border-radius:999px;padding:0 .18rem;background:var(--msg-accent);color:var(--msg-bg);font-size:.48rem;font-weight:900;letter-spacing:0;line-height:1}
.messenger-pinned-panel{position:absolute;z-index:46;top:4.15rem;right:.65rem;display:flex;width:min(24rem,calc(100% - 1.3rem));max-height:min(28rem,calc(100% - 5.4rem));flex-direction:column;overflow:hidden;border:1px solid var(--msg-line);border-radius:1rem;background:color-mix(in srgb,var(--msg-panel) 97%,transparent);box-shadow:0 1.35rem 3.8rem color-mix(in srgb,#020617 30%,transparent);backdrop-filter:blur(18px)}
.messenger-pinned-panel>header{display:flex;min-height:3.55rem;align-items:center;justify-content:space-between;gap:.65rem;padding:.62rem .7rem .58rem .78rem;border-bottom:1px solid var(--msg-line)}
.messenger-pinned-panel>header>div{display:flex;min-width:0;align-items:center;gap:.58rem}.messenger-pinned-panel>header>div>.messenger-icon{width:1rem;height:1rem;flex:0 0 auto;color:var(--msg-accent)}
.messenger-pinned-panel>header span{display:flex;min-width:0;flex-direction:column}.messenger-pinned-panel>header strong{font-size:.76rem;font-weight:900}.messenger-pinned-panel>header small{margin-top:.1rem;color:var(--msg-muted);font-size:.55rem;font-weight:750}
.messenger-pinned-panel>header>button,.messenger-pinned-remove{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:1px solid transparent;border-radius:.65rem;background:transparent;color:var(--msg-muted);cursor:pointer}.messenger-pinned-panel>header>button:hover,.messenger-pinned-remove:hover{border-color:var(--msg-line);background:var(--msg-accent-soft);color:var(--msg-accent)}
.messenger-pinned-panel>header>button .messenger-icon,.messenger-pinned-remove .messenger-icon{width:.85rem;height:.85rem}
.messenger-pinned-list{display:flex;min-height:0;flex-direction:column;gap:.28rem;padding:.45rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.messenger-pinned-row{display:grid;grid-template-columns:minmax(0,1fr) 2rem;align-items:center;gap:.25rem;border:1px solid transparent;border-radius:.82rem;background:transparent;transition:background .15s ease,border-color .15s ease}.messenger-pinned-row:hover,.messenger-pinned-row.is-current{border-color:var(--msg-line);background:var(--msg-accent-soft)}
.messenger-pinned-open{display:grid;min-width:0;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.55rem;border:0;padding:.48rem;background:transparent;color:var(--msg-text);cursor:pointer;text-align:left}.messenger-pinned-open>i{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.65rem;background:var(--msg-accent-soft);color:var(--msg-accent);font-style:normal}.messenger-pinned-open>i .messenger-icon{width:.9rem;height:.9rem}
.messenger-pinned-open>span{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:.08rem .45rem}.messenger-pinned-open strong{overflow:hidden;font-size:.68rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.messenger-pinned-open small{grid-column:1/-1;overflow:hidden;color:var(--msg-muted);font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.messenger-pinned-open small>b{color:var(--msg-accent);font-weight:850;letter-spacing:0}.messenger-pinned-open time{grid-column:2;grid-row:1;color:var(--msg-muted);font-size:.5rem}
.messenger-pinned-empty{display:flex;min-height:9rem;align-items:center;justify-content:center;flex-direction:column;gap:.38rem;padding:1rem;color:var(--msg-muted);text-align:center}.messenger-pinned-empty>.messenger-icon{width:1.45rem;height:1.45rem;color:var(--msg-accent)}.messenger-pinned-empty strong{color:var(--msg-text);font-size:.72rem}.messenger-pinned-empty span{font-size:.58rem}
.messenger-bubble-bottom{display:flex;min-width:0;align-items:flex-end;gap:.38rem;margin-top:.4rem}.messenger-bubble-bottom>.messenger-message-reactions{min-width:0;flex:1;margin-top:0}.messenger-message-pin-marker{display:grid;width:1.52rem;height:1.52rem;flex:0 0 auto;place-items:center;border:1px solid color-mix(in srgb,var(--msg-accent),transparent 58%);border-radius:.48rem;background:var(--msg-accent-soft);color:var(--msg-accent);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}.messenger-message-pin-marker:hover{background:var(--msg-accent);color:var(--msg-bg);transform:translateY(-1px)}.messenger-message-pin-marker .messenger-icon{width:.72rem;height:.72rem}
.messenger-message.is-pinned .messenger-bubble{border-color:color-mix(in srgb,var(--msg-accent),transparent 54%)}
@media(max-width:640px){.messenger-pinned-panel{top:4.05rem;right:.4rem;width:calc(100% - .8rem);max-height:calc(100% - 5rem)}.messenger-pinned-open{grid-template-columns:1.8rem minmax(0,1fr);padding:.42rem}.messenger-pinned-open>i{width:1.8rem;height:1.8rem}}

.post-composer-selection-shell{margin:.75rem 0;border:1px solid var(--adaptive-ui-line,var(--adaptive-border,#cbd5e1));border-radius:1rem;padding:.62rem;background:color-mix(in srgb,var(--adaptive-ui-panel,var(--adaptive-surface,#fff)) 94%,transparent);box-shadow:none}
.post-composer-selection-head{display:flex;min-height:1.75rem;align-items:center;gap:.65rem;margin-bottom:.48rem;padding:0 .12rem;color:var(--adaptive-text-secondary,var(--adaptive-text,#334155))}
.post-composer-selection-head strong{font-size:.72rem;font-weight:850}.post-composer-selection-head strong>span{color:var(--color-dynamic,#3b82f6)}
.post-composer-selection-head>span{margin-left:auto;color:var(--color-dynamic,#3b82f6);font-size:.58rem;font-weight:750}
.post-composer-selection-head>button{margin-left:auto;border:0;background:transparent;color:var(--adaptive-text-passive,var(--adaptive-muted,#94a3b8));font-size:.62rem;font-weight:750;cursor:pointer}
.post-composer-selection-head>span:not(.hidden)+button{margin-left:0}.post-composer-selection-head>button:hover{color:#ef4444}
.post-composer-selection-list{display:grid;gap:.48rem;border-bottom:1px solid var(--adaptive-ui-line,var(--adaptive-border,#cbd5e1));padding-bottom:.58rem}
.post-upload-preview-grid,.space-composer-preview,.post-attachment-selection-list{display:grid!important;width:100%!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),16rem))!important;gap:.5rem!important;margin:0!important}
.post-upload-preview-item.post-selected-media-card,.space-composer-preview-item.post-selected-media-card,.post-file-selection-card{position:relative;display:grid;min-width:0;min-height:4.2rem;aspect-ratio:auto;grid-template-columns:3.15rem minmax(0,1fr) 1.75rem;align-items:center;gap:.62rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 62%);border-radius:.92rem;padding:.36rem;background:color-mix(in srgb,var(--adaptive-ui-active,var(--adaptive-surface-2,#f1f5f9)) 90%,var(--color-dynamic,#3b82f6) 10%);box-shadow:none;color:var(--adaptive-text-active,var(--adaptive-text-strong,#0f172a))}
.post-upload-preview-item.post-selected-media-card>img,.space-composer-preview-item.post-selected-media-card>img{position:static;width:3.15rem;height:3.15rem;border-radius:.72rem;object-fit:cover}
.post-selected-media-copy{display:flex;min-width:0;flex-direction:column;gap:.17rem}.post-selected-media-copy strong{overflow:hidden;color:inherit;font-size:.73rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.post-selected-media-copy small{overflow:hidden;color:var(--adaptive-text-passive,var(--adaptive-muted,#64748b));font-size:.57rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.post-upload-preview-item.post-selected-media-card>button,.space-composer-preview-item.post-selected-media-card>button,.post-file-selection-card>button{position:static;display:grid;width:1.75rem;height:1.75rem;place-items:center;border:0;border-radius:.58rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--adaptive-text-secondary,var(--adaptive-muted,#64748b));font-size:1.05rem;line-height:1;backdrop-filter:none;transition:background .16s ease,color .16s ease,transform .16s ease}
.post-upload-preview-item.post-selected-media-card>button:hover,.space-composer-preview-item.post-selected-media-card>button:hover,.post-file-selection-card>button:hover{background:#ef4444;color:#fff;transform:scale(1.04)}
.post-file-selection-card{padding:.36rem}.post-file-selection-card .post-attachment-icon{width:3.15rem;height:3.15rem;border-radius:.72rem}.post-file-selection-card .post-attachment-copy strong{font-size:.73rem}.post-file-selection-card .post-attachment-copy small{font-size:.57rem}
html:not(.adaptive-theme) .post-composer-selection-shell{border-color:var(--standard-line);background:var(--standard-panel)}
html:not(.adaptive-theme) .post-composer-selection-list{border-color:var(--standard-line)}
html:not(.adaptive-theme) :is(.post-upload-preview-item.post-selected-media-card,.space-composer-preview-item.post-selected-media-card,.post-file-selection-card){border-color:var(--standard-line);background:var(--standard-panel-soft);color:var(--standard-text-active)}
.profile-post-composer>.post-composer-selection-shell{margin-inline:0}.space-composer>.post-composer-selection-shell{margin:.2rem .7rem .7rem}
@media(max-width:520px){.post-composer-attach-menu{grid-template-columns:1fr;width:min(17rem,calc(100vw - 1.5rem));max-height:21rem;overflow:auto}.post-upload-preview-grid,.space-composer-preview,.post-attachment-selection-list{grid-template-columns:1fr!important}}

/* У каждой анимации ковра собственный знак, фон и мягкая реакция на курсор. */
.cover-animation-preview{--preview-repel-x:0px;--preview-repel-y:0px;cursor:pointer}
.cover-animation-preview::before,.cover-animation-preview::after{translate:var(--preview-repel-x) var(--preview-repel-y);transition:translate .22s ease-out,filter .22s ease-out}
.cover-preview-symbol{position:absolute;z-index:3;top:50%;left:50%;width:2.55rem;height:2.55rem;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%);translate:var(--preview-repel-x) var(--preview-repel-y);filter:drop-shadow(0 4px 8px rgb(15 23 42/.18));transition:translate .22s ease-out,transform .22s ease-out,filter .22s ease-out}
.cover-animation-preview.is-pulsing .cover-preview-symbol{transform:translate(-50%,-50%) scale(1.16);filter:drop-shadow(0 7px 13px currentColor)}
.cover-preview-galaxy{color:#e9d5ff;background:radial-gradient(circle at 28% 30%,#a78bfa 0 2px,transparent 3px),radial-gradient(circle at 75% 65%,#93c5fd 0 1px,transparent 2px),linear-gradient(135deg,#171036,#312e81)}
.cover-preview-galaxy::before{background:radial-gradient(ellipse at center,rgb(192 132 252/.42),transparent 58%);animation:coverPreviewGalaxy 5s ease-in-out infinite}
.cover-preview-white-ash{color:#fff;background:linear-gradient(150deg,#94a3b8,#dbeafe)}
.cover-preview-white-ash::before{background-image:radial-gradient(circle,#fff 0 1.4px,transparent 2px);background-size:30px 24px;animation:coverPreviewAsh 6s linear infinite}
.cover-preview-web{color:#475569;background:radial-gradient(circle at 50% 50%,#f8fafc,#cbd5e1)}
.cover-preview-web::before{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 11px,rgb(71 85 105/.22) 12px 13px),repeating-conic-gradient(from 0deg,rgb(71 85 105/.2) 0 1deg,transparent 1deg 30deg)}
.cover-preview-virus{color:#bbf7d0;background:radial-gradient(circle at 18% 28%,rgb(16 185 129/.45) 0 9px,transparent 10px),linear-gradient(135deg,#064e3b,#0f766e)}
.cover-preview-virus::before{background:radial-gradient(circle,rgb(110 231 183/.7) 0 3px,transparent 4px);background-size:38px 32px;animation:coverPreviewVirus 4.6s ease-in-out infinite alternate}
.cover-preview-microcosm{color:#f8fafc;background:radial-gradient(circle at 28% 32%,#38bdf8 0 2px,transparent 3px),radial-gradient(circle at 76% 68%,#f472b6 0 3px,transparent 4px),linear-gradient(135deg,#111827,#334155)}
.cover-preview-microcosm::before{background:linear-gradient(25deg,transparent 49%,rgb(148 163 184/.24) 50%,transparent 51%);animation:coverPreviewOrbit 8s linear infinite}
.cover-preview-bubbles{color:#fff;background:linear-gradient(145deg,#7dd3fc,#c4b5fd)}
.cover-preview-bubbles::before{background:radial-gradient(circle at 20% 70%,transparent 0 14px,rgb(255 255 255/.75) 15px 16px,transparent 17px),radial-gradient(circle at 80% 30%,transparent 0 9px,rgb(255 255 255/.65) 10px 11px,transparent 12px);animation:coverPreviewRise 5s ease-in-out infinite}
.cover-preview-dust{color:#78350f;background:linear-gradient(145deg,#fde68a,#d6b37a)}
.cover-preview-dust::before{background-image:radial-gradient(circle,rgb(120 53 15/.52) 0 .9px,transparent 1.7px);background-size:17px 13px;animation:coverPreviewDust 9s linear infinite}
.cover-preview-flame-breath{color:#fed7aa;background:linear-gradient(145deg,#450a0a,#9a3412)}
.cover-preview-flame-breath::before{background:radial-gradient(ellipse at 40% 100%,rgb(251 146 60/.72),transparent 52%),radial-gradient(ellipse at 72% 90%,rgb(239 68 68/.58),transparent 46%);animation:coverPreviewFlame 3.4s ease-in-out infinite alternate}
@keyframes coverPreviewGalaxy{50%{filter:hue-rotate(28deg) brightness(1.18);transform:scale(1.08) rotate(8deg)}}
@keyframes coverPreviewAsh{to{background-position:35px 85px}}
@keyframes coverPreviewVirus{to{background-position:22px -16px;filter:saturate(1.35)}}
@keyframes coverPreviewOrbit{to{transform:rotate(360deg) scale(1.12)}}
@keyframes coverPreviewDust{to{background-position:70px 22px}}
@keyframes coverPreviewFlame{to{transform:translateY(-8px) scale(1.09);filter:saturate(1.35)}}

/* ======[ФИНАЛЬНЫЙ БАЛАНС ТЕМ: ЧАТЫ, ХЭШТЕГИ, ДРУЗЬЯ, ПРОСТРАНСТВА И ПРОСМОТР ПОСТА]========== */
/* Активный закреп виден сразу: заливка работает и в меню диалога, и в списке чатов. */
.messenger-chat-menu button.is-active-action{
  border:1px solid color-mix(in srgb,var(--msg-accent) 48%,transparent)!important;
  background:var(--msg-accent-soft)!important;
  color:var(--msg-accent)!important;
}
.messenger-chat-menu button.is-active-action:hover{
  background:color-mix(in srgb,var(--msg-accent) 22%,var(--msg-panel))!important;
}
.messenger-chat-menu button.is-active-action>.messenger-icon path:first-child,
.messenger-chat-name>.messenger-icon path:first-child{
  fill:currentColor!important;
  fill-opacity:.28;
}
.messenger-chat-menu button.is-active-action>.messenger-icon path:first-child{
  fill-opacity:.7;
}
.messenger-chat-menu button.is-danger,
html.adaptive-theme .messenger-chat-menu button.is-danger,
html:not(.adaptive-theme) .messenger-chat-menu button.is-danger{
  color:#ff3f52!important;
}
.messenger-chat-menu button.is-danger:hover,
html.adaptive-theme .messenger-chat-menu button.is-danger:hover,
html:not(.adaptive-theme) .messenger-chat-menu button.is-danger:hover{
  background:rgb(239 68 68/.13)!important;
  color:#ff3046!important;
}

/* Статус в сети в окне пересылки аккуратно сидит на аватаре и хорошо пульсирует. */
.user-online-dot.post-share-online-dot{
  right:-.09rem!important;
  bottom:-.09rem!important;
  display:grid!important;
  width:.95rem!important;
  min-width:.95rem!important;
  height:.95rem!important;
  min-height:.95rem!important;
  place-items:center;
  overflow:visible;
  isolation:isolate;
  border:2px solid var(--share-panel)!important;
  background:var(--share-panel)!important;
  box-shadow:0 0 0 1px var(--share-line),0 .16rem .4rem rgb(0 0 0/.2)!important;
}
/* ------------[Плотная подложка индикатора пересылки]------------ // Закрывает участок аватара под зелёной точкой и делает статус заметнее в списке профилей и чатов. Модуль: «пересылка публикации». Часть 1/1 */
.user-online-dot.post-share-online-dot.is-online{background:var(--share-panel)!important}
.post-share-online-dot .online-dot-core{
  position:absolute!important;
  inset:.12rem!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.5),0 0 .22rem rgb(34 197 94/.55)!important;
}
.post-share-online-dot.is-online .online-dot-pulse{
  position:absolute!important;
  z-index:0!important;
  inset:-.03rem!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%;
  background:rgb(34 197 94/.34)!important;
  animation:post-share-online-pulse 1.7s ease-out infinite!important;
}
@keyframes post-share-online-pulse{
  0%{opacity:.48;transform:scale(.78)}
  72%,100%{opacity:0;transform:scale(1.3)}
}

/* ------------[Конфиденциальность профиля]------------ // Единый тематический интерфейс разрешений для стандартной, ночной и адаптивной палитры. Модуль: «оформление интерфейса». Часть 34/203 */
.privacy-hidden{display:none!important}
.privacy-system-note{display:flex;align-items:flex-start;gap:.75rem;margin:.9rem 1.45rem 0;padding:.8rem .9rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 26%,var(--adaptive-border,rgb(226 232 240)));border-radius:1rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 7%,var(--adaptive-surface-2,rgb(241 245 249)));color:var(--adaptive-text-strong,rgb(30 41 59))}.privacy-system-note>svg{flex:0 0 auto;width:1.2rem;height:1.2rem;margin-top:.08rem;fill:none;stroke:var(--color-dynamic,#3b82f6);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.privacy-system-note strong{display:block;font-size:.72rem;font-weight:900}.privacy-system-note p{margin:.18rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.66rem;font-weight:600;line-height:1.5}
.privacy-settings-list{min-height:12rem;overflow-y:auto;padding:1rem 1.45rem 1.3rem;scrollbar-width:thin;scrollbar-color:var(--adaptive-border,rgb(203 213 225)) transparent}.privacy-settings-loading,.privacy-settings-error{display:grid;min-height:14rem;place-items:center;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.76rem;font-weight:800}.privacy-settings-error{gap:.7rem}.privacy-settings-error button{border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:.7rem;padding:.55rem .8rem;color:var(--color-dynamic,#3b82f6);font-size:.65rem;font-weight:900}
.privacy-group+ .privacy-group{margin-top:1rem}.privacy-group>header{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;padding:0 .25rem}.privacy-group>header span{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.6rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.privacy-group>header small{display:grid;min-width:1.25rem;height:1.25rem;place-items:center;border-radius:999px;background:var(--adaptive-surface-2,rgb(241 245 249));color:var(--color-dynamic,#3b82f6);font-size:.55rem;font-weight:900}
.privacy-group>div{overflow:hidden;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:1rem;background:color-mix(in srgb,var(--adaptive-surface,rgb(255 255 255)) 92%,var(--color-dynamic,#3b82f6) 8%)}
.privacy-setting-row{display:grid;grid-template-columns:minmax(13rem,1fr) minmax(23rem,1.25fr);align-items:center;gap:1rem;padding:.82rem .9rem;border-top:1px solid var(--adaptive-border,rgb(226 232 240))}.privacy-setting-row:first-child{border-top:0}.privacy-setting-copy{min-width:0}.privacy-setting-copy strong{display:block;font-size:.72rem;font-weight:900}.privacy-setting-copy p{margin:.16rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.61rem;font-weight:600;line-height:1.4}.privacy-setting-copy code{display:inline-block;margin-top:.28rem;color:color-mix(in srgb,var(--adaptive-text-muted,rgb(100 116 139)) 74%,transparent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.52rem}
.privacy-audience-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.28rem;padding:.24rem;border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:.72rem;background:var(--adaptive-surface-2,rgb(241 245 249))}.privacy-audience-option{min-height:2.25rem;border:1px solid transparent;border-radius:.52rem;padding:.38rem .25rem;background:transparent;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.57rem;font-weight:850;line-height:1.15;transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.privacy-audience-option:hover{color:var(--color-dynamic,#3b82f6);background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,transparent)}.privacy-audience-option.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,transparent);background:var(--adaptive-surface,rgb(255 255 255));color:var(--color-dynamic,#3b82f6);box-shadow:0 4px 12px color-mix(in srgb,var(--color-dynamic,#3b82f6) 14%,transparent)}
.cover-privacy-pane{max-width:none}.cover-privacy-pane .cover-account-card{overflow:clip;isolation:isolate}.cover-privacy-header{position:sticky;top:0;z-index:2;gap:.65rem;padding:.72rem .9rem;border-radius:calc(1rem - 1px) calc(1rem - 1px) 0 0;background:inherit}.cover-privacy-header .cover-account-card-icon{width:2rem;height:2rem;border-radius:.64rem}.cover-privacy-header .cover-account-card-icon svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cover-privacy-header h3{font-size:.82rem}.cover-privacy-header p{margin-top:.12rem;font-size:.62rem}.cover-privacy-save-status{margin-left:auto;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.62rem;font-weight:750}.cover-privacy-pane .privacy-settings-list{min-height:18rem;overflow:visible}.cover-privacy-pane .privacy-system-note{margin-top:1rem}
@media(min-width:769px){.cover-editor-workspace{max-height:min(84vh,54rem)}.cover-animation-header{padding-bottom:.55rem}.cover-animation-header h2{font-size:1rem}.cover-animation-header p{margin-top:.12rem;font-size:.64rem}.cover-animation-actions button{min-height:1.85rem;padding:.36rem .72rem}.cover-editor-tabs{margin-top:.25rem;padding:.12rem 0 .7rem}}
.cover-editor-search{position:relative;z-index:30;width:min(24rem,34vw);min-width:12rem;margin-left:auto;color:var(--adaptive-text-muted,rgb(100 116 139))}
.cover-editor-search>svg{position:absolute;z-index:2;top:50%;left:.72rem;width:.92rem;height:.92rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transform:translateY(-50%);pointer-events:none}
.cover-editor-search>input{width:100%;height:2.15rem;border:1px solid var(--adaptive-ui-line,var(--adaptive-border,rgb(203 213 225)));border-radius:.72rem;padding:.45rem 2rem .45rem 2.1rem;outline:0;background:var(--adaptive-ui-active,var(--adaptive-surface-2,rgb(248 250 252)));color:var(--adaptive-text-active,var(--adaptive-text-strong,rgb(30 41 59)));font-size:.68rem;font-weight:750;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.cover-editor-search>input::-webkit-search-cancel-button{display:none}
.cover-editor-search>input:focus{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 35%);background:var(--adaptive-ui-panel,var(--adaptive-surface,#fff));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%)}
.cover-editor-search>button{position:absolute;z-index:3;top:50%;right:.42rem;display:grid;width:1.35rem;height:1.35rem;place-items:center;border:0;border-radius:.42rem;background:transparent;color:inherit;font-size:1rem;line-height:1;transform:translateY(-50%);cursor:pointer}
.cover-editor-search>button.hidden,.cover-editor-search-results.hidden{display:none!important}
.cover-editor-search>button:hover{background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--color-dynamic,#3b82f6)}
.cover-editor-search-results{position:absolute;z-index:520;top:calc(100% + .42rem);left:0;right:0;display:grid;max-height:min(22rem,62vh);gap:.18rem;overflow-y:auto;border:1px solid var(--adaptive-ui-line,var(--adaptive-border,rgb(203 213 225)));border-radius:.82rem;padding:.38rem;background:var(--adaptive-ui-panel,var(--adaptive-surface,#fff));box-shadow:0 1.4rem 3.8rem -1.5rem rgb(15 23 42/.58);scrollbar-width:thin}
.cover-editor-search-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.58rem .65rem;background:transparent;color:var(--adaptive-text-active,var(--adaptive-text-strong,rgb(30 41 59)));cursor:pointer;text-align:left}
.cover-editor-search-result:hover,.cover-editor-search-result:focus{outline:0;background:color-mix(in srgb,var(--adaptive-ui-active,var(--adaptive-surface-2,#f1f5f9)) 82%,var(--color-dynamic,#3b82f6) 18%)}
.cover-editor-search-result strong{overflow:hidden;font-size:.64rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.cover-editor-search-result span{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;font-weight:800}
.cover-editor-search-empty{padding:.85rem;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.62rem;font-weight:800;text-align:center}
.cover-editor-search-hit{scroll-margin-block:5rem;animation:cover-editor-search-highlight 1.8s ease both}
@keyframes cover-editor-search-highlight{0%,100%{outline:2px solid transparent;outline-offset:1px}18%,65%{outline:2px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 18%);outline-offset:3px;background-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 88%)}}
@media(max-width:900px){.cover-animation-header{flex-wrap:wrap}.cover-editor-search{order:3;width:100%;min-width:0;margin-left:0}.cover-animation-actions{margin-left:auto}}
html:not(.adaptive-theme).dark .cover-privacy-pane{--adaptive-surface:rgb(15 23 42);--adaptive-surface-2:rgb(30 41 59);--adaptive-border:rgb(51 65 85);--adaptive-text-strong:rgb(241 245 249);--adaptive-text-muted:rgb(148 163 184)}

/* ======[АНАЛИТИКА ПРОСТРАНСТВА]========== */
.space-analytics-pane{--analytics-panel:var(--adaptive-ui-panel,var(--adaptive-surface,#fff));--analytics-soft:var(--adaptive-ui-active,var(--adaptive-surface-2,#f8fafc));--analytics-line:var(--adaptive-ui-line,var(--adaptive-border,#d8dee9));--analytics-text:var(--adaptive-text-active,var(--adaptive-text-strong,#1e293b));--analytics-muted:var(--adaptive-text-muted,#64748b);--space-analytics-primary:#8b5cf6;--space-analytics-positive:#22c55e;--space-analytics-negative:#ef4444;--space-analytics-comment:#f59e0b;--space-analytics-like:#ec4899;--space-analytics-repost:#06b6d4;max-width:none!important;overflow:auto;padding:.2rem .15rem 1rem;scrollbar-width:thin;color:var(--analytics-text)}
.space-analytics-shell{display:grid;gap:.85rem}.space-analytics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border:1px solid var(--analytics-line);border-radius:1rem;padding:1rem 1.1rem;background:linear-gradient(135deg,color-mix(in srgb,var(--color-dynamic,#8b5cf6),transparent 88%),var(--analytics-panel))}.space-analytics-head span,.space-analytics-chart-card header span,.space-analytics-lower header span{color:var(--color-dynamic,#8b5cf6);font-size:.55rem;font-weight:950;letter-spacing:.14em}.space-analytics-head h3{margin:.18rem 0 .15rem;font-size:1.05rem;font-weight:950}.space-analytics-head p{margin:0;color:var(--analytics-muted);font-size:.64rem;font-weight:650}.space-analytics-periods{display:flex;gap:.2rem;border:1px solid var(--analytics-line);border-radius:.7rem;padding:.18rem;background:var(--analytics-soft)}.space-analytics-periods button{min-height:1.9rem;border:0;border-radius:.52rem;padding:.35rem .72rem;background:transparent;color:var(--analytics-muted);font-size:.59rem;font-weight:900;cursor:pointer}.space-analytics-periods button:hover,.space-analytics-periods button.is-active{background:var(--analytics-panel);color:var(--color-dynamic,#8b5cf6);box-shadow:0 .25rem .7rem rgb(15 23 42/.08)}
.space-analytics-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.space-analytics-cards article{display:flex;min-width:0;align-items:flex-start;gap:.7rem;border:1px solid var(--analytics-line);border-radius:.9rem;padding:.82rem;background:var(--analytics-panel)}.space-analytics-cards svg{flex:0 0 auto;width:1.85rem;height:1.85rem;border-radius:.6rem;padding:.43rem;background:color-mix(in srgb,var(--color-dynamic,#8b5cf6),transparent 87%);fill:none;stroke:var(--color-dynamic,#8b5cf6);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.space-analytics-cards article>div{display:grid;min-width:0;gap:.08rem}.space-analytics-cards article span{overflow:hidden;color:var(--analytics-muted);font-size:.57rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.space-analytics-cards article strong{font-size:1.25rem;font-weight:950;line-height:1.15}.space-analytics-cards article .is-positive{color:var(--space-analytics-positive)}.space-analytics-cards article .is-negative{color:var(--space-analytics-negative)}.space-analytics-cards article .is-neutral{color:var(--analytics-muted)}
.space-analytics-chart-card,.space-analytics-breakdown,.space-analytics-top{border:1px solid var(--analytics-line);border-radius:1rem;background:var(--analytics-panel)}.space-analytics-chart-card{overflow:hidden;padding:.9rem 1rem .55rem}.space-analytics-chart-card>header,.space-analytics-top>header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.space-analytics-chart-card h4,.space-analytics-lower h4{margin:.12rem 0 0;font-size:.83rem;font-weight:950}.space-analytics-chart-card>header>strong{font-size:1.35rem;font-weight:950}.space-analytics-metrics{display:flex;gap:.3rem;margin:.75rem 0 .35rem;overflow-x:auto;padding-bottom:.15rem;scrollbar-width:thin}.space-analytics-metric{display:grid;grid-template-columns:auto auto;align-items:center;gap:.15rem .35rem;flex:0 0 auto;border:1px solid transparent;border-radius:.62rem;padding:.38rem .55rem;background:var(--analytics-soft);color:var(--analytics-muted);font-size:.54rem;font-weight:850;cursor:pointer}.space-analytics-metric i{width:.42rem;height:.42rem;border-radius:50%;background:var(--metric-color)}.space-analytics-metric b{grid-column:2;color:var(--analytics-text);font-size:.62rem}.space-analytics-metric:hover,.space-analytics-metric.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#8b5cf6),transparent 50%);background:color-mix(in srgb,var(--color-dynamic,#8b5cf6),transparent 90%);color:var(--analytics-text)}
.space-analytics-chart{display:block;width:100%;height:auto;min-height:13rem;overflow:visible;color:var(--chart-color)}.space-analytics-chart-grid line{stroke:var(--analytics-line);stroke-width:1}.space-analytics-chart-grid text{fill:var(--analytics-muted);font-size:10px;font-weight:700}.space-analytics-chart-area{fill:url(#space-analytics-area);stroke:none}.space-analytics-chart-line{fill:none;stroke:var(--chart-color);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.space-analytics-chart-points circle{fill:var(--analytics-panel);stroke:var(--chart-color);stroke-width:2;transition:r .15s ease}.space-analytics-chart-points circle:hover,.space-analytics-chart-points circle:focus{r:6;outline:0}
.space-analytics-chart stop{stop-color:var(--chart-color)}
.space-analytics-lower{display:grid;grid-template-columns:minmax(15rem,.72fr) minmax(0,1.55fr);gap:.85rem}.space-analytics-breakdown,.space-analytics-top{padding:.9rem 1rem}.space-analytics-ring{display:grid;width:8rem;height:8rem;margin:.9rem auto;place-content:center;border-radius:50%;background:radial-gradient(circle,var(--analytics-panel) 59%,transparent 60%),conic-gradient(var(--color-dynamic,#8b5cf6) var(--analytics-progress),var(--analytics-soft) 0);text-align:center}.space-analytics-ring strong{font-size:1.15rem;font-weight:950}.space-analytics-ring span{color:var(--analytics-muted);font-size:.53rem;font-weight:750;line-height:1.3}.space-analytics-breakdown dl{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:0}.space-analytics-breakdown dl div{border-radius:.58rem;padding:.5rem;background:var(--analytics-soft)}.space-analytics-breakdown dt{color:var(--analytics-muted);font-size:.5rem;font-weight:750}.space-analytics-breakdown dd{margin:.18rem 0 0;font-size:.7rem;font-weight:950}.space-analytics-breakdown>small{display:block;margin-top:.65rem;color:var(--analytics-muted);font-size:.5rem;line-height:1.45}.space-analytics-top>header>small{color:var(--analytics-muted);font-size:.55rem;font-weight:850}.space-analytics-top>div{display:grid;margin-top:.65rem}.space-analytics-post{display:grid;grid-template-columns:1.7rem minmax(8rem,1fr) minmax(18rem,1.2fr);align-items:center;gap:.6rem;border-top:1px solid var(--analytics-line);padding:.55rem 0}.space-analytics-post:first-child{border-top:0}.space-analytics-post>span{display:grid;width:1.45rem;height:1.45rem;place-items:center;border-radius:.45rem;background:var(--analytics-soft);color:var(--color-dynamic,#8b5cf6);font-size:.58rem;font-weight:950}.space-analytics-post>div{display:grid;min-width:0}.space-analytics-post>div strong{overflow:hidden;font-size:.61rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.space-analytics-post>div small{color:var(--analytics-muted);font-size:.48rem}.space-analytics-post dl{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin:0}.space-analytics-post dl div{min-width:0}.space-analytics-post dt{color:var(--analytics-muted);font-size:.45rem;font-weight:700}.space-analytics-post dd{margin:.1rem 0 0;font-size:.58rem;font-weight:900}.space-analytics-no-posts{padding:2.5rem 1rem;color:var(--analytics-muted);font-size:.62rem;font-weight:750;text-align:center}
.space-analytics-loading,.space-analytics-empty{display:grid;min-height:22rem;place-content:center;justify-items:center;gap:.35rem;border:1px dashed var(--analytics-line);border-radius:1rem;color:var(--analytics-muted);text-align:center}.space-analytics-loading span{width:2rem;height:2rem;border:.2rem solid color-mix(in srgb,var(--color-dynamic,#8b5cf6),transparent 80%);border-top-color:var(--color-dynamic,#8b5cf6);border-radius:50%;animation:space-analytics-spin .8s linear infinite}.space-analytics-loading strong,.space-analytics-empty strong{color:var(--analytics-text);font-size:.75rem}.space-analytics-loading small,.space-analytics-empty span{font-size:.58rem}.space-analytics-empty button{margin-top:.4rem;border:1px solid var(--analytics-line);border-radius:.55rem;padding:.45rem .8rem;background:var(--analytics-panel);color:var(--analytics-text);font-size:.58rem;font-weight:900;cursor:pointer}@keyframes space-analytics-spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.space-analytics-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.space-analytics-lower{grid-template-columns:1fr}.space-analytics-post{grid-template-columns:1.7rem minmax(0,1fr)}.space-analytics-post dl{grid-column:2}}
@media(max-width:640px){.space-analytics-head{align-items:stretch;flex-direction:column}.space-analytics-periods{align-self:stretch}.space-analytics-periods button{flex:1}.space-analytics-cards{grid-template-columns:1fr 1fr}.space-analytics-cards article{padding:.65rem}.space-analytics-post dl{grid-template-columns:repeat(2,1fr)}.space-analytics-chart{min-width:42rem}.space-analytics-chart-card{overflow-x:auto}.space-analytics-breakdown dl{grid-template-columns:1fr 1fr 1fr}}

/* ------------[Настройки системы сигналов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 35/203 */
.signal-settings-panel{padding:1rem 1.45rem 0}.signal-settings-card{overflow:hidden;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:1rem;background:color-mix(in srgb,var(--adaptive-surface,rgb(255 255 255)) 95%,var(--color-dynamic,#3b82f6) 5%)}.signal-settings-card>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--adaptive-border,rgb(226 232 240))}.signal-settings-card>header span{display:block;color:var(--color-dynamic,#3b82f6);font-size:.52rem;font-weight:950;letter-spacing:.15em}.signal-settings-card>header h4{margin:.12rem 0 0;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.82rem;font-weight:950}.signal-settings-card>header p{margin:.18rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.61rem;font-weight:650}.signal-master-switch{display:grid;grid-template-columns:auto auto;align-items:center;gap:.4rem .55rem;cursor:pointer}.signal-master-switch input{position:absolute;opacity:0}.signal-master-switch>span{position:relative;width:3.2rem;height:1.75rem;border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:999px;background:var(--adaptive-surface-2,rgb(226 232 240));transition:.2s}.signal-master-switch>span:after{content:"";position:absolute;left:.21rem;top:.2rem;width:1.22rem;height:1.22rem;border-radius:50%;background:#fff;box-shadow:0 3px 9px rgb(15 23 42/.2);transition:.2s}.signal-master-switch input:checked+span{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6)}.signal-master-switch input:checked+span:after{transform:translateX(1.42rem)}.signal-master-switch b{grid-column:1/-1;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.5rem;text-align:center}.signal-mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;padding:1rem}.signal-mode-option{display:grid;gap:.22rem;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:.8rem;padding:.72rem;background:var(--adaptive-surface-2,rgb(248 250 252));text-align:left}.signal-mode-option strong{color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.63rem}.signal-mode-option small{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;line-height:1.35}.signal-mode-option:hover,.signal-mode-option.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 54%,transparent);background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,var(--adaptive-surface,rgb(255 255 255)))}.signal-mode-option.is-active strong{color:var(--color-dynamic,#3b82f6)}.signal-settings-grid{padding:0 1rem}.signal-setting-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.78rem 0;border-top:1px solid var(--adaptive-border,rgb(226 232 240));cursor:pointer}.signal-setting-toggle>span:first-child{display:grid;gap:.15rem}.signal-setting-toggle strong{color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.64rem}.signal-setting-toggle small{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.53rem}.signal-package{display:grid;grid-template-columns:minmax(12rem,.8fr) minmax(18rem,1.2fr);align-items:center;gap:1rem;padding:1rem;border-top:1px solid var(--adaptive-border,rgb(226 232 240))}.signal-package>div:first-child{display:grid;gap:.18rem}.signal-package strong{color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.67rem}.signal-package small{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.53rem;line-height:1.4}.signal-package>div:last-child{display:flex;flex-wrap:wrap;gap:.35rem}.signal-package label{cursor:pointer}.signal-package input{position:absolute;opacity:0}.signal-package label span{display:block;border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:999px;padding:.48rem .67rem;background:var(--adaptive-surface-2,rgb(248 250 252));color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.55rem;font-weight:850}.signal-package input:checked+span{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 50%,transparent);background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,var(--adaptive-surface,rgb(255 255 255)));color:var(--color-dynamic,#3b82f6)}.signal-settings-card.is-disabled>:not(header){opacity:.56}

/* ------------[Зонд нового сигнала]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 36/203 */
.signal-probe{position:fixed;right:clamp(1rem,3vw,3rem);top:clamp(6rem,16vh,10rem);z-index:16000;width:5.2rem;height:5.2rem;border:0;background:transparent;color:var(--color-dynamic,#3b82f6);filter:drop-shadow(0 18px 22px rgb(15 23 42/.28));transform:translateX(10rem) rotate(18deg);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .35s}.signal-probe.hidden{display:none}.signal-probe.is-arrived{transform:translateX(0) rotate(0);opacity:1}.signal-probe.is-departing{transform:translate(12rem,-3rem) rotate(-24deg) scale(.72);opacity:0}.signal-probe-hull{position:absolute;inset:.5rem;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 52%,transparent);border-radius:1.45rem;background:color-mix(in srgb,var(--adaptive-surface,rgb(255 255 255)) 86%,currentColor 14%);box-shadow:inset 0 0 22px color-mix(in srgb,currentColor 17%,transparent)}.signal-probe svg{width:3.25rem;height:3.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.signal-probe-wave{position:absolute;inset:-.15rem;border:1px solid currentColor;border-radius:1.7rem;animation:signal-probe-wave 2.2s ease-out infinite}.signal-probe-count{position:absolute;right:-.12rem;top:-.12rem;display:grid;min-width:1.35rem;height:1.35rem;place-items:center;border:2px solid var(--adaptive-surface,#fff);border-radius:999px;background:#ef476f;color:#fff;font-size:.58rem;font-weight:950}.signal-probe:hover .signal-probe-hull{transform:translateY(-3px)}@keyframes signal-probe-wave{0%{opacity:.7;transform:scale(.82)}80%,100%{opacity:0;transform:scale(1.32)}}
.signal-probe-modal{position:fixed;inset:0;z-index:32000;display:grid;place-items:center;padding:1rem}.signal-probe-modal.hidden{display:none}.signal-probe-backdrop{position:absolute;inset:0;border:0;background:rgb(2 6 23/.74);backdrop-filter:blur(12px)}.signal-probe-dialog{position:relative;width:min(100%,31rem);overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,transparent);border-radius:1.35rem;padding:1.5rem;background:var(--adaptive-surface,rgb(255 255 255));box-shadow:0 36px 100px rgb(0 0 0/.48);text-align:center}.signal-probe-dialog:before{content:"";position:absolute;inset:-45% 25% auto;height:16rem;background:radial-gradient(circle,color-mix(in srgb,var(--color-dynamic,#3b82f6) 25%,transparent),transparent 68%);pointer-events:none}.signal-probe-emblem{position:relative;display:grid;width:5rem;height:5rem;margin:0 auto 1rem;place-items:center;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 45%,transparent);border-radius:1.5rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 11%,var(--adaptive-surface-2,rgb(248 250 252)));color:var(--color-dynamic,#3b82f6)}.signal-probe-emblem svg{width:3.5rem;height:3.5rem;fill:none;stroke:currentColor;stroke-width:2}.signal-probe-dialog>span{position:relative;color:var(--color-dynamic,#3b82f6);font-size:.56rem;font-weight:950;letter-spacing:.2em}.signal-probe-dialog h2{position:relative;margin:.45rem 0 0;color:var(--adaptive-text-strong,rgb(15 23 42));font-size:1.25rem;font-weight:950}.signal-probe-dialog p{position:relative;margin:.55rem auto 1.25rem;max-width:24rem;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.72rem;font-weight:650;line-height:1.55}.signal-probe-dialog>div:last-child{position:relative;display:flex;justify-content:center;gap:.5rem}.signal-probe-dialog button:not(.signal-probe-backdrop){min-height:2.65rem;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:.75rem;padding:.6rem 1rem;background:var(--adaptive-surface-2,rgb(248 250 252));color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.62rem;font-weight:900;text-transform:uppercase}.signal-probe-dialog button:last-child{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);color:#fff}

/* ------------[Журнал сигналов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 37/203 */
.nav-alert-indicator{position:relative;display:grid;flex:0 0 auto;min-width:1.08rem;height:1.08rem;margin-left:auto;padding:0 .22rem;place-items:center;box-sizing:border-box;border:2px solid var(--adaptive-surface,rgb(255 255 255));border-radius:999px;background:#ef476f;color:#fff;font-size:.46rem;font-weight:950;line-height:1;box-shadow:0 0 0 .12rem color-mix(in srgb,#ef476f 24%,transparent),0 0 .7rem color-mix(in srgb,#ef476f 65%,transparent)}.nav-alert-indicator.hidden{display:none}.nav-alert-indicator.is-alerting:after{content:"";position:absolute;inset:-.3rem;border:1px solid #ef476f;border-radius:inherit;animation:nav-alert-beacon 1.35s ease-out infinite}@keyframes nav-alert-beacon{0%{opacity:.85;transform:scale(.55)}75%,100%{opacity:0;transform:scale(1.45)}}
.signal-sidebar-subnav{display:grid;gap:.25rem;margin:.15rem .35rem .35rem;padding:.35rem 0 .15rem .9rem;border-left:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 28%,var(--adaptive-border,rgb(226 232 240)))}.signal-sidebar-subnav button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:2.05rem;border:0;border-radius:.62rem;padding:.42rem .58rem;background:transparent;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;font-weight:850;text-align:left;text-transform:uppercase;transition:background .16s ease,color .16s ease}.signal-sidebar-subnav button:hover,.signal-sidebar-subnav button.is-active{background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,transparent);color:var(--color-dynamic,#3b82f6)}.signal-sidebar-subnav b{display:grid;min-width:1.2rem;height:1.2rem;place-items:center;border-radius:999px;background:var(--adaptive-surface-2,rgb(241 245 249));font-size:.48rem}.signal-sidebar-subnav button.is-active b{background:var(--color-dynamic,#3b82f6);color:#fff}
.signal-count-badge{display:grid;min-width:1.15rem;height:1.15rem;place-items:center;border-radius:999px;background:#ef476f;color:#fff;font-size:.5rem}.signals-journal{min-height:31rem;padding:1.15rem;background:var(--adaptive-surface,rgb(255 255 255));color:var(--adaptive-text-strong,rgb(30 41 59))}.signals-journal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:1rem;padding:1rem;background:color-mix(in srgb,var(--adaptive-surface-2,rgb(248 250 252)) 88%,var(--color-dynamic,#3b82f6) 12%)}.signals-journal-head span{color:var(--color-dynamic,#3b82f6);font-size:.54rem;font-weight:950;letter-spacing:.18em}.signals-journal-head h2{margin:.12rem 0 0;font-size:1.1rem;font-weight:950}.signals-journal-head p{margin:.2rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.61rem;font-weight:650}.signals-journal-head>b{display:grid;width:2.3rem;height:2.3rem;place-items:center;border-radius:.75rem;background:var(--adaptive-surface,rgb(255 255 255));color:var(--color-dynamic,#3b82f6);font-size:.75rem}.signals-grid{display:grid;gap:.85rem}.signal-card{position:relative;display:grid;gap:.8rem;overflow:hidden;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:1.05rem;padding:1rem;background:var(--adaptive-surface-2,rgb(248 250 252));box-shadow:0 10px 28px -24px rgb(15 23 42/.6)}.signal-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:.22rem;background:var(--color-dynamic,#3b82f6);opacity:.65}.signal-card-identity{display:flex;align-items:center;gap:.85rem}.signal-card-avatar{position:relative;display:grid;flex:0 0 auto;width:4.5rem;height:4.5rem;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 45%,transparent);border-radius:1.2rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,var(--adaptive-surface,rgb(255 255 255)));color:var(--color-dynamic,#3b82f6)}.signal-card-avatar img{width:100%;height:100%;object-fit:cover}.signal-unknown-avatar svg{width:3rem;height:3rem;fill:none;stroke:currentColor;stroke-width:1.7}.signal-card-avatar>span:last-child{position:absolute;right:.25rem;bottom:.25rem;border-radius:999px;padding:.22rem .38rem;background:rgb(15 23 42/.82);color:#fff;font-size:.46rem;font-weight:950}.signal-card-identity>div:last-child>small{color:var(--color-dynamic,#3b82f6);font-size:.5rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.signal-card-identity h3{margin:.12rem 0 0;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.9rem;font-weight:950}.signal-card-identity p{margin:.16rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.56rem;font-weight:700}.signal-progress{height:.32rem;overflow:hidden;border-radius:999px;background:var(--adaptive-border,rgb(226 232 240))}.signal-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-dynamic,#3b82f6),#8b5cf6)}.signal-facts{display:flex;flex-wrap:wrap;gap:.35rem}.signal-facts span,.signal-facts em{border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:999px;padding:.42rem .58rem;background:var(--adaptive-surface,rgb(255 255 255));color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.54rem;font-style:normal;font-weight:750}.signal-facts b{color:var(--adaptive-text-strong,rgb(30 41 59))}.signal-route{border-top:1px solid var(--adaptive-border,rgb(226 232 240));padding-top:.65rem}.signal-route summary{cursor:pointer;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.56rem;font-weight:900;text-transform:uppercase}.signal-route ul{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0;padding:0;list-style:none}.signal-route li{border-radius:.55rem;padding:.35rem .48rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,transparent);color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.53rem}.signal-timeline{display:grid;gap:.42rem;margin:0;padding:.65rem 0 0;border-top:1px solid var(--adaptive-border,rgb(226 232 240));list-style:none}.signal-timeline li{display:grid;grid-template-columns:auto 1fr;gap:.52rem}.signal-timeline i{width:.45rem;height:.45rem;margin-top:.22rem;border-radius:50%;background:var(--color-dynamic,#3b82f6);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent)}.signal-timeline div{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.signal-timeline strong{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.54rem;font-weight:700}.signal-timeline small{flex:0 0 auto;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.46rem;opacity:.72}.signal-card>footer{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding-top:.7rem;border-top:1px solid var(--adaptive-border,rgb(226 232 240))}.signal-card>footer>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}.signal-intersection-mark{color:#8b5cf6;font-size:.52rem;font-weight:900}.signal-action{min-height:2.2rem;border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:.65rem;padding:.45rem .65rem;background:var(--adaptive-surface,rgb(255 255 255));color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;font-weight:900;text-transform:uppercase}.signal-action.primary{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);color:#fff}.signal-action.ghost{border-color:transparent;background:transparent}.signals-loading,.signals-empty{display:grid;min-height:22rem;place-items:center;align-content:center;gap:.45rem;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.68rem;font-weight:800;text-align:center}.signals-empty>div{font-size:2rem;color:var(--color-dynamic,#3b82f6)}.signals-empty strong{color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.85rem}.signals-empty p{margin:0;font-size:.6rem}.signals-empty button{border:1px solid var(--adaptive-border,rgb(203 213 225));border-radius:.7rem;padding:.55rem .8rem;color:var(--color-dynamic,#3b82f6);font-weight:900}
.signals-scope-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.42rem;margin:0 0 1rem;padding:.3rem;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:.85rem;background:var(--adaptive-surface-2,rgb(248 250 252))}.signals-scope-tabs button{display:flex;align-items:center;justify-content:center;gap:.38rem;min-height:2.35rem;border:1px solid transparent;border-radius:.65rem;background:transparent;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.56rem;font-weight:900;text-transform:uppercase}.signals-scope-tabs button:hover{color:var(--color-dynamic,#3b82f6)}.signals-scope-tabs button.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 38%,transparent);background:var(--adaptive-surface,rgb(255 255 255));color:var(--color-dynamic,#3b82f6);box-shadow:0 5px 16px -12px rgb(15 23 42/.45)}.signals-scope-tabs b{display:grid;min-width:1.15rem;height:1.15rem;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);font-size:.48rem}
.signal-notif-item{display:flex;gap:.65rem;margin-bottom:.45rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 30%,var(--adaptive-border,rgb(226 232 240)));border-radius:.8rem;padding:.65rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,var(--adaptive-surface-2,rgb(248 250 252)));cursor:pointer}.signal-notif-icon{display:grid;flex:0 0 auto;width:2.2rem;height:2.2rem;place-items:center;border-radius:.7rem;background:var(--adaptive-surface,rgb(255 255 255));color:var(--color-dynamic,#3b82f6)}.signal-notif-icon svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.8}.signal-notif-copy{min-width:0;flex:1}.signal-notif-copy strong{color:var(--color-dynamic,#3b82f6);font-size:.55rem;text-transform:uppercase}.signal-notif-copy p{margin:.12rem 0;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.62rem;line-height:1.35}.signal-notif-copy button{border:0;background:none;color:var(--color-dynamic,#3b82f6);font-size:.5rem;font-weight:900;text-transform:uppercase}.signal-notif-dismiss{align-self:flex-start;border:0;background:none;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:1rem}
html:not(.adaptive-theme).dark :is(.signal-settings-panel,.signal-probe-modal,.signals-journal,#notif-list-system){--adaptive-surface:rgb(15 23 42);--adaptive-surface-2:rgb(30 41 59);--adaptive-border:rgb(51 65 85);--adaptive-text-strong:rgb(241 245 249);--adaptive-text-muted:rgb(148 163 184)}
@media(max-width:760px){.signal-settings-panel{padding:.8rem 1rem 0}.signal-settings-card>header{align-items:flex-start}.signal-mode-picker{grid-template-columns:1fr}.signal-package{grid-template-columns:1fr}.signal-probe{right:.8rem;top:6rem}.signals-journal{padding:.7rem}.signals-scope-tabs{grid-template-columns:1fr}.signal-card>footer{align-items:flex-start;flex-direction:column}.signal-card>footer>div{justify-content:flex-start}.signal-timeline div{display:grid;gap:.15rem}}
@media(prefers-reduced-motion:reduce){.nav-alert-indicator.is-alerting:after{animation:none}}
@media(max-width:760px){.privacy-system-note{margin:.7rem 1rem 0}.privacy-settings-list{padding:.85rem 1rem 1rem}.privacy-setting-row{grid-template-columns:1fr;gap:.58rem}.privacy-audience-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.cover-privacy-header{align-items:flex-start;flex-wrap:wrap}.cover-privacy-save-status{width:100%;margin-left:3.15rem}}

/* Хэштег остаётся контрастным и в выбранном, и в наведённом состоянии. */
html.adaptive-theme :is(.hashtag-filter-chip,.post-hashtag-chip),
html.adaptive-theme :is(.hashtag-filter-chip,.post-hashtag-chip)>span{
  color:var(--adaptive-text-active)!important;
}
html.adaptive-theme :is(.hashtag-filter-chip,.post-hashtag-chip):hover,
html.adaptive-theme .post-hashtag-chip[aria-pressed="true"],
html.adaptive-theme :is(.hashtag-filter-chip,.post-hashtag-chip):hover>span,
html.adaptive-theme .post-hashtag-chip[aria-pressed="true"]>span{
  background-color:var(--color-dynamic)!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgb(0 0 0/.3)!important;
}

/* Внутренние карточки друзей больше не возвращаются к чисто белому фону. */
html.adaptive-theme #friends-viewport:has(#friends-list-full){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-panel)!important;
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html.adaptive-theme .friends-list-row{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-active)!important;
  color:var(--adaptive-text-active)!important;
  box-shadow:none!important;
}
html.adaptive-theme .friends-list-row:hover{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:color-mix(in srgb,var(--adaptive-ui-active) 88%,var(--color-dynamic) 12%)!important;
  box-shadow:var(--adaptive-ui-shadow-hover)!important;
}

/* ------------[Контраст карточек рекомендаций]------------ // Отделяет карточки от фона страницы и усиливает читаемость управляющих кнопок во всех адаптивных палитрах. Модуль: «поиск друзей». Часть 3/4 */
html.adaptive-theme .friend-search-card{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:color-mix(in srgb,var(--adaptive-ui-panel) 78%,var(--color-dynamic) 22%)!important;
  color:var(--adaptive-text-active)!important;
  box-shadow:0 .65rem 1.35rem -.95rem color-mix(in srgb,var(--adaptive-text-active) 28%,transparent)!important;
}
html.adaptive-theme .friend-search-card:hover{
  border-color:color-mix(in srgb,var(--color-dynamic) 58%,var(--adaptive-ui-line-strong) 42%)!important;
  background:color-mix(in srgb,var(--adaptive-ui-panel) 70%,var(--color-dynamic) 30%)!important;
  box-shadow:var(--adaptive-ui-shadow-hover)!important;
}
html.adaptive-theme .friend-search-actions button,
html.adaptive-theme .friend-search-add:not(.is-friend):not(.is-sent){
  border-color:color-mix(in srgb,var(--color-dynamic) 42%,var(--adaptive-ui-line-strong) 58%)!important;
  background:color-mix(in srgb,var(--adaptive-ui-panel) 76%,var(--color-dynamic) 24%)!important;
  color:var(--adaptive-text-active)!important;
}
html:not(.adaptive-theme) #friends-viewport:has(#friends-list-full),
html:not(.adaptive-theme) :is(.friends-list-row,.friend-search-card){
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
  color:var(--standard-text-active)!important;
  box-shadow:var(--standard-shadow)!important;
}
html:not(.adaptive-theme) :is(.friends-list-row,.friend-search-card):hover{
  background:var(--standard-panel-soft)!important;
  box-shadow:var(--standard-shadow-hover)!important;
}

/* ------------[Адаптация параметров поиска]------------ // Перестраивает поля и действия на планшетах и телефонах без горизонтальной прокрутки. Модуль: «поиск друзей». Часть 4/4 */
@media (max-width: 620px) {
  .friends-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .friends-filter-grid { grid-template-columns: 1fr; }
  .friends-filter-footer { align-items: stretch; flex-direction: column; }
  .friends-filter-footer > div { justify-content: flex-end; }
}

/* Шапка и контекстные меню пространств используют те же слои, что и остальная страница. */
html.adaptive-theme :is(.space-intro-card,.spaces-index-menu,.space-manage-actions-menu){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-panel)!important;
  color:var(--adaptive-text-active)!important;
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html.adaptive-theme :is(.spaces-index-menu,.space-manage-actions-menu) button:not(.is-danger){
  color:var(--adaptive-text-secondary)!important;
}
html.adaptive-theme :is(.spaces-index-menu,.space-manage-actions-menu) button:not(.is-danger):hover{
  background:var(--adaptive-ui-active)!important;
  color:var(--adaptive-text-active)!important;
}
html:not(.adaptive-theme) :is(.space-intro-card,.spaces-index-menu,.space-manage-actions-menu){
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
  color:var(--standard-text-active)!important;
  box-shadow:var(--standard-shadow)!important;
}
html:not(.adaptive-theme) :is(.spaces-index-menu,.space-manage-actions-menu) button:not(.is-danger):hover{
  background:var(--standard-panel-soft)!important;
  color:var(--standard-text-active)!important;
}
.space-page-shell{background:transparent!important}

/* Тёмная тема сохраняет глубину, но тени больше не превращаются в чёрные пятна. */
html.adaptive-theme.dark{
  --adaptive-ui-shadow:0 12px 30px -23px color-mix(in srgb,var(--color-dynamic) 34%,transparent),0 2px 9px -7px color-mix(in srgb,var(--color-dynamic) 22%,transparent);
  --adaptive-ui-shadow-hover:0 17px 38px -24px color-mix(in srgb,var(--color-dynamic) 46%,transparent),0 5px 13px -9px color-mix(in srgb,var(--color-dynamic) 28%,transparent);
}
html.dark:not(.adaptive-theme){
  --standard-shadow:0 12px 32px -24px rgb(5 10 18/.46),0 2px 9px -7px color-mix(in srgb,var(--color-dynamic,#3b82f6) 22%,transparent);
  --standard-shadow-hover:0 18px 40px -24px rgb(5 10 18/.54),0 5px 14px -9px color-mix(in srgb,var(--color-dynamic,#3b82f6) 30%,transparent);
}

/* Модальный пост повторяет иерархию карточки ленты, без кашляного монолитного слоя. */
html.adaptive-theme #post-viewer{
  --viewer-theme-surface:var(--adaptive-ui-panel);
  --viewer-theme-elevated:var(--adaptive-ui-modal);
  --viewer-theme-subtle:var(--adaptive-ui-active);
  background:color-mix(in srgb,var(--adaptive-background) 91%,transparent)!important;
}
html.adaptive-theme #post-viewer-panel{
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--viewer-theme-surface)!important;
  box-shadow:0 24px 62px -38px color-mix(in srgb,var(--color-dynamic) 42%,transparent)!important;
}
html.adaptive-theme #post-viewer :is(#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-surface)!important;
}
html.adaptive-theme #post-viewer :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-elevated)!important;
}
html.adaptive-theme #post-viewer :is(#viewer-comments-block,#viewer-comments-list){
  border-color:var(--adaptive-ui-line)!important;
  background:var(--viewer-theme-subtle)!important;
}
html:not(.adaptive-theme) #post-viewer{
  background:color-mix(in srgb,var(--adaptive-background) 92%,transparent)!important;
}
html:not(.adaptive-theme) #post-viewer :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
}
html:not(.adaptive-theme) #post-viewer :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell,#viewer-comments-block,#viewer-comments-list){
  border-color:var(--standard-line)!important;
  background:var(--standard-panel-soft)!important;
}

/* Развёрнутая фотография берёт фон страницы и панелей темы, а не чёрный/белый шаблон. */
html.adaptive-theme #media-viewer{
  --media-viewer-bg:color-mix(in srgb,var(--adaptive-background) 94%,transparent);
  --media-viewer-surface:var(--adaptive-ui-panel);
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-background) 91%,var(--adaptive-ui-panel) 9%);
  --media-viewer-control:var(--adaptive-ui-modal);
  --media-viewer-border:var(--adaptive-ui-line-strong);
}
html:not(.adaptive-theme) #media-viewer{
  --media-viewer-bg:color-mix(in srgb,var(--adaptive-background) 94%,transparent);
  --media-viewer-surface:var(--standard-panel);
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-background) 91%,var(--standard-panel) 9%);
  --media-viewer-control:var(--standard-panel-soft);
  --media-viewer-border:var(--standard-line);
}
#media-viewer .media-viewer-layout,
#media-viewer.is-post-expanded .media-viewer-layout{
  border-color:var(--media-viewer-border)!important;
  background:var(--media-viewer-surface)!important;
  box-shadow:0 24px 64px -38px color-mix(in srgb,var(--color-dynamic,#3b82f6) 40%,transparent)!important;
}
#media-viewer .media-viewer-photo-pane,
#media-viewer.is-post-expanded .media-viewer-photo-pane{background:var(--media-viewer-photo)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-sidebar{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-panel)!important;
  box-shadow:none!important;
}
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot #viewer-sidebar{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
  box-shadow:none!important;
}

/* ======[ЛИЧНЫЕ СООБЩЕНИЯ: ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ]========== */
.messenger-incoming-toast{
  position:relative;
  display:grid;
  width:min(23rem,calc(100vw - 2rem));
  min-height:5.25rem;
  grid-template-columns:minmax(0,1fr) 2rem;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,var(--adaptive-border,#cbd5e1));
  border-radius:1.05rem;
  background:var(--adaptive-surface,#fff);
  color:var(--adaptive-text-strong,#0f172a);
  box-shadow:0 20px 54px -28px color-mix(in srgb,var(--color-dynamic,#3b82f6) 46%,rgb(15 23 42));
  pointer-events:auto;
  isolation:isolate;
  animation:messenger-toast-arrive .3s cubic-bezier(.22,1,.36,1) both;
}
.messenger-incoming-toast.is-leaving{animation:messenger-toast-leave .24s ease both}
.messenger-incoming-toast-open{
  display:grid;
  min-width:0;
  grid-template-columns:3rem minmax(0,1fr);
  align-items:center;
  gap:.72rem;
  border:0;
  padding:.72rem .3rem .76rem .72rem;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.messenger-incoming-toast-open:hover{background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 9%,transparent)}
.messenger-incoming-toast-avatar{
  position:relative;
  display:grid;
  width:3rem;
  height:3rem;
  place-items:center;
  color:var(--color-dynamic,#3b82f6);
  font-size:.78rem;
  font-weight:950;
}
.messenger-incoming-toast-avatar-media{
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 44%,transparent);
  border-radius:.9rem;
  background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 13%,var(--adaptive-surface-2,#e2e8f0));
}
.messenger-incoming-toast-avatar img,.messenger-incoming-toast-avatar-media img{display:block;width:100%;height:100%;object-fit:cover}
.messenger-incoming-toast-online,.messenger-pending-reply-online{
  position:absolute!important;
  right:-.1rem!important;
  bottom:-.1rem!important;
  z-index:3!important;
  display:grid!important;
  width:.82rem!important;
  height:.82rem!important;
  place-items:center;
  overflow:visible;
}
.messenger-incoming-toast-online .online-dot-core,.messenger-pending-reply-online .online-dot-core{
  position:absolute!important;
  inset:.1rem!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
}
.messenger-incoming-toast-online.is-online .online-dot-pulse,.messenger-pending-reply-online.is-online .online-dot-pulse{
  position:absolute!important;
  inset:-.18rem!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%;
  background:rgb(34 197 94/.52)!important;
  animation:messenger-online-pulse 1.55s ease-out infinite!important;
}
.messenger-incoming-toast-copy{display:flex;min-width:0;flex-direction:column;gap:.13rem}
.messenger-incoming-toast-kicker{color:var(--color-dynamic,#3b82f6);font-size:.49rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.messenger-incoming-toast-copy strong{overflow:hidden;color:inherit;font-size:.78rem;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.messenger-incoming-toast-preview{display:-webkit-box;overflow:hidden;color:var(--adaptive-text-secondary,#475569);font-size:.67rem;font-weight:700;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.messenger-incoming-toast-copy small{margin-top:.12rem;color:var(--adaptive-text-passive,#94a3b8);font-size:.5rem;font-weight:750}
.messenger-incoming-toast-close{
  display:grid;
  width:1.75rem;
  height:1.75rem;
  align-self:start;
  place-items:center;
  margin:.48rem .38rem 0 0;
  border:0;
  border-radius:.58rem;
  background:transparent;
  color:var(--adaptive-text-passive,#94a3b8);
  cursor:pointer;
}
.messenger-incoming-toast-close:hover{background:rgb(239 68 68/.12);color:#ef4444}
.messenger-incoming-toast-close .messenger-icon{width:.82rem;height:.82rem}
.messenger-incoming-toast-progress{position:absolute;right:0;bottom:0;left:0;height:.16rem;transform-origin:left;background:var(--color-dynamic,#3b82f6);animation:messenger-toast-progress 8s linear both}
.messenger-incoming-toast.is-call-event {
  width:min(20rem,calc(100vw - 1rem));
  min-height:4.2rem;
  grid-template-columns:minmax(0,1fr) 1.65rem;
  border-radius:.88rem;
}
.messenger-incoming-toast.is-call-event .messenger-incoming-toast-open {
  grid-template-columns:2.35rem minmax(0,1fr);
  gap:.58rem;
  padding:.48rem .18rem .52rem .55rem;
}
.messenger-incoming-toast.is-call-event .messenger-incoming-toast-avatar { width:2.35rem;height:2.35rem; }
.messenger-incoming-toast.is-call-event .messenger-incoming-toast-avatar-media { border-radius:.72rem; }
.messenger-incoming-toast.is-call-event .messenger-incoming-toast-close { width:1.45rem;height:1.45rem;margin:.34rem .24rem 0 0;border-radius:.45rem; }
.messenger-incoming-toast.is-call-event .messenger-incoming-toast-progress { animation-duration:5.2s; }
html.adaptive-theme .messenger-incoming-toast{
  border-color:var(--adaptive-ui-line-strong);
  background:var(--adaptive-ui-modal,var(--adaptive-ui-panel));
  color:var(--adaptive-text-active);
  box-shadow:0 20px 54px -30px color-mix(in srgb,var(--color-dynamic) 54%,transparent),var(--adaptive-ui-shadow);
}
html.adaptive-theme .messenger-incoming-toast-avatar-media{background:var(--adaptive-ui-active);color:var(--adaptive-text-active)}
html.adaptive-theme .messenger-incoming-toast-preview{color:var(--adaptive-text-secondary)}
html.adaptive-theme .messenger-incoming-toast-copy small,html.adaptive-theme .messenger-incoming-toast-close{color:var(--adaptive-text-passive)}
html:not(.adaptive-theme) .messenger-incoming-toast{
  border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,var(--standard-line));
  background:var(--standard-panel);
  color:var(--standard-text-active);
  box-shadow:var(--standard-shadow-hover);
}
html:not(.adaptive-theme) .messenger-incoming-toast-avatar-media{background:var(--standard-panel-soft)}
html:not(.adaptive-theme) .messenger-incoming-toast-preview{color:var(--standard-text-secondary)}
html:not(.adaptive-theme) .messenger-incoming-toast-copy small,html:not(.adaptive-theme) .messenger-incoming-toast-close{color:var(--standard-text-passive)}
@keyframes messenger-toast-arrive{from{opacity:0;transform:translate3d(2rem,-.5rem,0) scale(.94)}to{opacity:1;transform:none}}
@keyframes messenger-toast-leave{to{opacity:0;transform:translate3d(2rem,0,0) scale(.94)}}
@keyframes messenger-toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes messenger-online-pulse{0%{opacity:.72;transform:scale(.62)}72%,100%{opacity:0;transform:scale(1.75)}}

/* Неотвеченные личные сообщения остаются выделенными во вкладке «Профиль». */
.messenger-pending-reply{
  position:relative;
  display:grid!important;
  min-width:0;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  align-items:center;
  gap:.65rem;
  margin:0 0 .45rem!important;
  padding:.65rem!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 48%,var(--adaptive-border,#cbd5e1))!important;
  border-radius:.9rem!important;
  background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 14%,var(--adaptive-surface,#fff))!important;
  color:var(--adaptive-text-strong,#0f172a)!important;
  box-shadow:0 11px 28px -22px color-mix(in srgb,var(--color-dynamic,#3b82f6) 70%,transparent)!important;
  cursor:pointer;
  isolation:isolate;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
.messenger-pending-reply:hover,.messenger-pending-reply:focus-visible{
  transform:translateY(-1px);
  border-color:var(--color-dynamic,#3b82f6)!important;
  background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 20%,var(--adaptive-surface,#fff))!important;
  box-shadow:0 15px 32px -22px color-mix(in srgb,var(--color-dynamic,#3b82f6) 82%,transparent)!important;
  outline:none;
}
.messenger-pending-reply-avatar{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;color:var(--color-dynamic,#3b82f6);font-size:.68rem;font-weight:950}
.messenger-pending-reply-avatar-media{display:grid;width:100%;height:100%;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,transparent);border-radius:.78rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 14%,var(--adaptive-surface-2,#e2e8f0))}
.messenger-pending-reply-avatar-media img{display:block;width:100%;height:100%;object-fit:cover}
.messenger-pending-reply-copy{display:flex;min-width:0;flex-direction:column;gap:.08rem}
.messenger-pending-reply-kicker{color:var(--color-dynamic,#3b82f6);font-size:.43rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.messenger-pending-reply-copy strong{overflow:hidden;font-size:.68rem;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.messenger-pending-reply-preview{overflow:hidden;color:var(--adaptive-text-secondary,#475569);font-size:.58rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.messenger-pending-reply-copy small{color:var(--adaptive-text-passive,#94a3b8);font-size:.46rem;font-weight:750}
.messenger-pending-reply-count{display:grid;min-width:1.5rem;height:1.5rem;place-items:center;padding:0 .38rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 62%,transparent);border-radius:.55rem;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.58rem;font-weight:950;box-shadow:0 7px 16px -10px var(--color-dynamic,#3b82f6)}
.profile-notif-with-read-action{position:relative!important;padding-bottom:2.25rem!important}
.profile-notif-read-button{
  position:absolute;
  right:.58rem;
  bottom:.46rem;
  z-index:4;
  display:inline-flex;
  min-height:1.35rem;
  align-items:center;
  gap:.24rem;
  padding:.2rem .48rem;
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,transparent);
  border-radius:.48rem;
  background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 9%,transparent);
  color:var(--color-dynamic,#3b82f6);
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.profile-notif-read-button svg{width:.72rem;height:.72rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.profile-notif-read-button:hover{transform:translateY(-1px);border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);color:#fff}
.profile-notif-read-button:focus-visible{outline:2px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 48%,transparent);outline-offset:2px}
html.adaptive-theme .messenger-pending-reply{border-color:var(--adaptive-ui-line-strong)!important;background:color-mix(in srgb,var(--color-dynamic) 14%,var(--adaptive-ui-panel))!important;color:var(--adaptive-text-active)!important;box-shadow:var(--adaptive-ui-shadow)!important}
html.adaptive-theme .messenger-pending-reply:hover,html.adaptive-theme .messenger-pending-reply:focus-visible{background:color-mix(in srgb,var(--color-dynamic) 20%,var(--adaptive-ui-panel))!important;box-shadow:var(--adaptive-ui-shadow-hover)!important}
html.adaptive-theme .messenger-pending-reply-avatar-media{background:var(--adaptive-ui-active)}
html.adaptive-theme .messenger-pending-reply-preview{color:var(--adaptive-text-secondary)}
html.adaptive-theme .messenger-pending-reply-copy small{color:var(--adaptive-text-passive)}
html:not(.adaptive-theme) .messenger-pending-reply{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,var(--standard-line))!important;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,var(--standard-panel))!important;color:var(--standard-text-active)!important;box-shadow:var(--standard-shadow)!important}
html:not(.adaptive-theme) .messenger-pending-reply:hover,html:not(.adaptive-theme) .messenger-pending-reply:focus-visible{background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 18%,var(--standard-panel))!important;box-shadow:var(--standard-shadow-hover)!important}
html:not(.adaptive-theme) .messenger-pending-reply-avatar-media{background:var(--standard-panel-soft)}
html:not(.adaptive-theme) .messenger-pending-reply-preview{color:var(--standard-text-secondary)}
html:not(.adaptive-theme) .messenger-pending-reply-copy small{color:var(--standard-text-passive)}
html.adaptive-theme .profile-notif-read-button{border-color:var(--adaptive-ui-line-strong);background:var(--adaptive-ui-active);color:var(--adaptive-text-secondary)}
html.adaptive-theme .profile-notif-read-button:hover{border-color:var(--color-dynamic);background:var(--color-dynamic);color:#fff}
html:not(.adaptive-theme) .profile-notif-read-button{border-color:var(--standard-line);background:var(--standard-panel-soft);color:var(--standard-text-secondary)}
html:not(.adaptive-theme) .profile-notif-read-button:hover{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);color:#fff}
@media(max-width:560px){
  #toast-container{top:.65rem!important;right:.65rem!important;left:.65rem!important;align-items:stretch}
  .messenger-incoming-toast{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .messenger-incoming-toast,.messenger-incoming-toast.is-leaving,.messenger-incoming-toast-progress{animation:none!important}
}

/* ------------[Уведомления ниже шапки]------------ // Удерживает все всплывающие уведомления под верхней панелью и не даёт длинному тексту растягивать их по экрану. Модуль: «всплывающие уведомления». Часть 1/3 */
#toast-container{
  top:calc(env(safe-area-inset-top,0px) + 4.25rem)!important;
  right:.8rem!important;
  left:auto!important;
  z-index:49!important;
  width:min(28rem,calc(100vw - 1.6rem));
  align-items:stretch;
}
#toast-container>:is(.vmesta-notice-toast,.messenger-incoming-toast){width:100%;max-width:100%;min-width:0!important;margin-inline:0;pointer-events:auto}
.vmesta-notice-copy{overflow:hidden}
.vmesta-notice-text{
  display:-webkit-box;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
@media(max-width:560px){
  #toast-container{top:calc(env(safe-area-inset-top,0px) + 4.05rem)!important;right:.6rem!important;left:.6rem!important;width:auto}
}

/* ------------[Компактный просмотр обсуждения]------------ // Переносит крестики внутрь панелей, уменьшает шапки и смягчает слишком тёмные поверхности во всех режимах комментариев. Модуль: «просмотр публикации и комментариев». Часть 2/3 */
#post-viewer.is-discussion-mode #post-viewer-panel{
  width:min(49rem,calc(100vw - 2rem))!important;
  overflow:hidden!important;
}
#post-viewer.is-discussion-mode #post-viewer-panel>button{
  top:.62rem!important;
  right:.62rem!important;
  width:2.35rem!important;
  height:2.35rem!important;
  border-radius:.72rem!important;
  box-shadow:0 .55rem 1.4rem rgb(0 0 0/.14)!important;
}
#post-viewer.is-discussion-mode #viewer-post-header{
  min-height:3.25rem!important;
  padding:.55rem 3.65rem .55rem 1rem!important;
}
#post-viewer.is-discussion-mode .viewer-comments-head{
  min-height:2.55rem!important;
  padding:.48rem 1rem!important;
}
#post-viewer.is-discussion-mode #viewer-form-container{padding:.58rem .9rem!important}
#post-viewer .comment-form-container{border-radius:.86rem!important;box-shadow:none!important}
#post-viewer .comment-form-container textarea,
.media-viewer-post-slot .comment-form-container textarea,
.space-comment-form .comment-form-container textarea{
  min-height:2.45rem!important;
  max-height:6rem!important;
  padding-top:.58rem!important;
  padding-bottom:.58rem!important;
  font-size:.8rem!important;
  line-height:1.2rem!important;
}
#post-viewer .comment-form-container .emoji-trigger svg,
.media-viewer-post-slot .comment-form-container .emoji-trigger svg,
.space-comment-form .comment-form-container .emoji-trigger svg{width:1.1rem!important;height:1.1rem!important}
#post-viewer .comment-form-container [data-comment-send],
.media-viewer-post-slot .comment-form-container [data-comment-send]{right:.38rem!important;bottom:.28rem!important;padding:.48rem!important}
html.adaptive-theme #post-viewer.is-discussion-mode{
  --viewer-sticky-surface:var(--adaptive-ui-modal);
}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region){background:var(--adaptive-ui-panel)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell){background:var(--adaptive-ui-modal)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-comments-block,#viewer-comments-list){background:var(--adaptive-ui-active)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode{--viewer-sticky-surface:var(--standard-panel-soft)}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region){background:var(--standard-panel)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell,#viewer-comments-block,#viewer-comments-list){background:var(--standard-panel-soft)!important}

/* ------------[Плавный край обсуждения]------------ // Маскирует комментарии под закреплённой шапкой мягким затуханием во всех источниках постов. Модуль: «просмотр публикации и комментариев». Часть 3/3 */
#post-viewer .viewer-comments-head,
.media-viewer-post-slot .viewer-comments-head{
  position:sticky;
  top:0;
  z-index:30!important;
  isolation:isolate;
}
#post-viewer .viewer-comments-head::after,
.media-viewer-post-slot .viewer-comments-head::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:1.15rem;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--viewer-sticky-surface,var(--adaptive-surface,#fff)),transparent);
}
.media-viewer-layout{position:relative}
#media-viewer-close{
  position:absolute;
  top:.72rem;
  right:.72rem;
  border-color:var(--media-viewer-border)!important;
  background:var(--media-viewer-control)!important;
  color:var(--media-viewer-text,var(--adaptive-text-strong,#e2e8f0))!important;
  box-shadow:0 .65rem 1.8rem rgb(0 0 0/.16);
}
#media-viewer-close:hover{border-color:var(--color-dynamic,#3b82f6)!important;color:var(--color-dynamic,#3b82f6)!important;transform:translateY(-1px)}
.shared-post-media-viewer figure{position:relative}
.shared-post-media-close{position:absolute!important;top:.72rem!important;right:.72rem!important;width:2.45rem!important;height:2.45rem!important;border-radius:.72rem!important}

/* ------------[Местоположение профиля]------------ // Оформляет ссылку на карте, карточку «О себе» и парные поля редактора во всех темах. Модуль: «местоположение профиля». Часть 1/1 */
.profile-cover-meta-actions{display:flex;min-width:0;align-items:center;gap:.2rem}
.profile-cover-meta-link{display:inline-flex;min-width:0;cursor:pointer;align-items:center;gap:.48rem;border-bottom:2px solid transparent;padding:.48rem .72rem;color:rgb(203 213 225);font-size:.7rem;font-weight:780;text-decoration:none;transition:border-color .18s ease,color .18s ease,background .18s ease}
.profile-cover-meta-link:hover{border-bottom-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 35%);color:#fff}
.profile-cover-meta-link svg{width:.95rem;height:.95rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#main-profile-location{max-width:min(19rem,42vw);border-left:1px solid rgb(255 255 255/.2)}
#main-profile-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cover-account-dual-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;border-top:1px solid rgb(226 232 240)}
.cover-account-dual-row:first-child{border-top:0}
.cover-account-dual-row .cover-account-row.is-compact{display:grid!important;grid-template-columns:1fr!important;align-content:start;gap:.48rem;border-top:0!important;padding:.78rem 0!important}
.cover-account-dual-row .cover-account-row.is-compact>:is(input,select,.vm-select-shell,.vm-date-shell){width:100%!important;justify-self:stretch!important}
.cover-account-identity-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(14rem,.85fr);align-items:stretch;gap:1.1rem;border-top:1px solid rgb(226 232 240)}
.cover-account-identity-row .cover-account-identity-field{display:grid!important;grid-template-columns:minmax(8rem,10.5rem) minmax(10rem,1fr)!important;align-items:center;gap:.72rem!important;border-top:0!important;padding:.78rem 0!important}
.cover-account-identity-row .cover-account-identity-field>:is(input,.vm-select-shell,.vm-date-shell){width:100%!important;justify-self:stretch!important}
.cover-account-identity-row .cover-account-identity-toggle{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center;gap:.75rem!important;border-top:0!important;padding:.78rem 0!important}
.cover-account-identity-row .cover-account-identity-toggle .cover-account-switch{justify-self:end!important}
html.adaptive-theme .cover-account-identity-row{border-color:var(--adaptive-ui-line)!important}
html:not(.adaptive-theme) .cover-account-identity-row{border-color:var(--standard-line)!important}
.profile-location-card{display:grid;min-width:0;align-content:start;gap:.52rem}
.profile-location-card-title{display:flex;align-items:center;gap:.4rem;color:var(--color-dynamic,#3b82f6);font-size:.55rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.profile-location-card-title svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.profile-location-value{display:block;overflow:hidden;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.7rem;font-weight:920;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.profile-location-value:not(.is-disabled):hover{color:var(--color-dynamic,#3b82f6);text-decoration:underline;text-underline-offset:.18rem}
.profile-location-value.is-disabled{cursor:default;pointer-events:none}
.profile-location-edit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.profile-location-edit[hidden],.profile-location-edit.hidden{display:none!important}
.profile-location-edit input{min-width:0;border:0;border-bottom:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 55%);background:transparent;color:var(--adaptive-text-strong,rgb(30 41 59));padding:.38rem .1rem;font-size:.66rem;font-weight:850;outline:0}
html.adaptive-theme .cover-account-dual-row{border-color:var(--adaptive-ui-line)!important}
html:not(.adaptive-theme) .cover-account-dual-row{border-color:var(--standard-line)!important}

/* ------------[Короткие фильтры своих друзей]------------ // Открывает город и возраст отдельным окном поверх списка, не изменяя высоту строки поиска. Модуль: «списки друзей». Часть 1/2 */
.friends-own-search-shell{position:relative;z-index:35;display:block}
.friends-own-search-field{position:relative;display:flex;align-items:center}
.friends-own-search-icon{position:absolute;top:50%;left:.86rem;margin:0;pointer-events:none;transform:translateY(-50%)}
#friends-own-filter-button{position:absolute;top:.22rem;right:.24rem;display:grid;width:2.15rem;height:2.05rem;place-items:center;border-left:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 78%);border-radius:.55rem;color:var(--adaptive-text-muted,rgb(100 116 139))}
#friends-own-filter-button:hover,#friends-own-filter-button.is-active,#friends-own-filter-button.has-filters{background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 86%);color:var(--color-dynamic,#3b82f6)}
#friends-own-filter-button svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#friends-own-filter-button>span{position:absolute;top:-.2rem;right:-.18rem;display:grid;min-width:1rem;height:1rem;place-items:center;border:2px solid var(--adaptive-surface,#fff);border-radius:999px;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.46rem;font-weight:950}
.friends-own-filter-panel{position:absolute;z-index:75;top:calc(100% + .45rem);right:0;display:grid;width:min(100%,42rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:.6rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 78%);border-radius:.78rem;background:color-mix(in srgb,var(--adaptive-surface-2,#f8fafc) 92%,var(--color-dynamic,#3b82f6) 8%);padding:.68rem;box-shadow:0 1.35rem 3.2rem -1.4rem rgb(15 23 42/.48),0 .45rem 1.15rem -.65rem rgb(15 23 42/.28);transform-origin:top right;animation:modal-friends-filter-in .16s ease-out}
.friends-own-filter-panel[hidden]{display:none}
.friends-own-filter-panel>label{display:grid;gap:.24rem}
.friends-own-filter-panel>label>span:first-child{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.5rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.friends-own-filter-panel input{width:100%;min-width:0;height:2.05rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 78%);border-radius:.55rem;background:var(--adaptive-surface,#fff);color:var(--adaptive-text-strong,rgb(30 41 59));padding:0 .58rem;font-size:.6rem;font-weight:760;outline:0}
.friends-own-age-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.3rem}
.friends-own-age-range i{color:var(--adaptive-text-muted,rgb(148 163 184));font-style:normal}
.friends-own-filter-panel>div{display:flex;align-items:center;gap:.35rem}
.friends-own-filter-panel>div button{height:2.05rem;border-radius:.55rem;padding:0 .65rem;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;font-weight:900}
.friends-own-filter-panel>div button:last-child{background:var(--color-dynamic,#3b82f6);color:#fff}

/* ------------[Единый поиск публикаций]------------ // Оформляет лупу и два поля совпадений одинаково в ленте, профиле и пространствах. Модуль: «поиск публикаций». Часть 1/2 */
.publisher-search-button{position:relative;display:inline-flex;min-height:2.15rem;align-items:center;justify-content:center;gap:.38rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 56%);border-radius:.72rem;background:color-mix(in srgb,var(--adaptive-surface-2,#f8fafc) 88%,var(--color-dynamic,#3b82f6) 12%);color:var(--color-dynamic,#3b82f6);padding:.48rem .66rem;font-size:.58rem;font-weight:920;letter-spacing:.05em;text-transform:uppercase;transition:.18s ease}
.publisher-search-button:hover,.publisher-search-button.is-active,.publisher-search-button.has-filters{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 24%);background:color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 80%);transform:translateY(-1px)}
.publisher-search-button svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.publisher-search-button b{display:grid;min-width:1rem;height:1rem;place-items:center;border-radius:.38rem;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.46rem}
.publisher-search-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:.65rem;border-top:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 82%);background:color-mix(in srgb,var(--adaptive-surface-2,#f8fafc) 94%,var(--color-dynamic,#3b82f6) 6%);padding:.75rem 1rem}
.publisher-search-panel[hidden]{display:none}
.publisher-search-panel>label{display:grid;min-width:0;gap:.27rem}
.publisher-search-panel>label>span{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.5rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.publisher-search-panel>label>div{display:flex;min-width:0;height:2.2rem;align-items:center;gap:.45rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6),transparent 76%);border-radius:.62rem;background:var(--adaptive-surface,#fff);padding:0 .62rem;color:var(--color-dynamic,#3b82f6)}
.publisher-search-panel svg{width:.88rem;height:.88rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2}
.publisher-search-panel strong{font-size:.8rem}
.publisher-search-panel input{width:100%;min-width:0;border:0;background:transparent;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.62rem;font-weight:760;outline:0}
.publisher-search-actions{display:flex;align-items:center;gap:.38rem}
.publisher-search-actions button{height:2.2rem;border-radius:.62rem;padding:0 .72rem;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.54rem;font-weight:920;text-transform:uppercase}
.publisher-search-actions button:last-child{background:var(--color-dynamic,#3b82f6);color:#fff}
html.adaptive-theme :is(.publisher-search-panel,.friends-own-filter-panel){border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important}
html.adaptive-theme :is(.publisher-search-panel>label>div,.friends-own-filter-panel input){border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html:not(.adaptive-theme) :is(.publisher-search-panel,.friends-own-filter-panel){border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important}
html:not(.adaptive-theme) :is(.publisher-search-panel>label>div,.friends-own-filter-panel input){border-color:var(--standard-line)!important;background:var(--standard-panel)!important;color:var(--standard-text-active)!important}
html.adaptive-theme .friends-own-filter-panel{box-shadow:0 1.4rem 3.4rem -1.35rem color-mix(in srgb,var(--adaptive-background) 68%,transparent),0 .45rem 1.15rem -.65rem rgb(15 23 42/.3)!important}
html:not(.adaptive-theme) .friends-own-filter-panel{box-shadow:var(--standard-shadow-hover),0 1.4rem 3rem -1.5rem rgb(15 23 42/.32)!important}

/* ------------[Адаптация новых поисковых панелей]------------ // Перестраивает местоположение и фильтры без горизонтальной прокрутки на узких экранах. Модуль: «поиск и местоположение». Часть 2/2 */
@media(max-width:760px){
  .cover-account-identity-row{grid-template-columns:1fr;gap:0}
  .cover-account-identity-row .cover-account-identity-toggle{border-top:1px dashed color-mix(in srgb,var(--adaptive-ui-line,var(--standard-line)) 72%,transparent)!important}
  .publisher-search-panel{grid-template-columns:1fr 1fr}.publisher-search-actions{grid-column:1/-1;justify-content:flex-end}
  .friends-own-filter-panel{grid-template-columns:1fr 1fr}.friends-own-filter-panel>div{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:560px){
  .cover-account-identity-row .cover-account-identity-field{grid-template-columns:1fr!important;gap:.48rem!important}
  .cover-account-dual-row,.profile-location-edit,.publisher-search-panel,.friends-own-filter-panel{grid-template-columns:1fr}
  .publisher-search-actions,.friends-own-filter-panel>div{grid-column:auto}
  .publisher-strip-actions strong{display:none}
  .publisher-search-button span{display:none}
  #main-profile-location{max-width:48vw}
}

/* ------------[Местоположение в «О пространстве»]------------ // Оформляет строку карты и два компактных поля страны и города во всех палитрах. Модуль: «местоположение пространства». Часть 1/1 */
.space-about-location > span{display:flex;align-items:center;gap:.42rem}
.space-about-location > span > svg{width:.92rem;height:.92rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.space-about-location-value{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:.75rem;color:var(--adaptive-text-strong,var(--adaptive-text,rgb(15 23 42)));font-size:.85rem;font-weight:950;text-decoration:none}
.space-about-location-value:hover{color:var(--color-dynamic,#d66a2c)}
.space-about-location-value > svg{width:1rem;height:1rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.space-about-location-empty{color:var(--adaptive-text-passive,var(--adaptive-muted,rgb(148 163 184)))!important}
.space-about-location-edit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.space-about-location-edit label{display:grid;min-width:0;gap:.28rem}
.space-about-location-edit small{color:var(--adaptive-text-passive,var(--adaptive-muted,rgb(148 163 184)));font-size:.56rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* ------------[Выравнивание полей местоположения]------------ // Удерживает подписи, текст и нижние линии страны и города внутри рамки карточки при редактировании. Модуль: «местоположение пространства». Часть 1/1 */
.space-about-body.is-editing .space-about-location{min-height:7.5rem;padding:1rem 1.2rem 1.15rem;gap:.68rem}
.space-about-body.is-editing .space-about-location-edit{align-items:start}
.space-about-body.is-editing .space-about-location-edit label{grid-template-rows:auto 2.2rem;align-content:start}
.space-about-body.is-editing .space-about-location-edit input{display:block;height:2.2rem!important;padding:.28rem 0 .48rem!important;line-height:1.2!important}

/* ------------[Скрытие профиля в медиапанели]------------ // Прячет кнопку «Профиль» рядом с медиа-разделами, не затрагивая шапку и вертикальное меню. Модуль: «навигация профиля». Часть 3/3 */
#profile-tabs-container #btn-tab-my{display:none!important}

@media(max-width:640px){
  .space-about-location-edit{grid-template-columns:1fr;gap:.55rem}
  .space-about-body.is-editing .space-about-location{min-height:10.6rem}
}

/* ------------[Мягкая палитра обсуждений]------------ // Заменяет почти чёрные слои поста, списка комментариев, карточек и поля ввода оттенками активной темы. Модуль: «цвета публикаций и комментариев». Часть 1/3 */
html.adaptive-theme #post-viewer.is-discussion-mode{
  --viewer-discussion-panel:color-mix(in srgb,var(--adaptive-ui-panel) 88%,var(--color-dynamic) 12%);
  --viewer-discussion-elevated:color-mix(in srgb,var(--adaptive-ui-modal) 90%,var(--color-dynamic) 10%);
  --viewer-discussion-card:color-mix(in srgb,var(--adaptive-ui-panel) 78%,var(--color-dynamic) 22%);
  --viewer-sticky-surface:var(--viewer-discussion-elevated);
}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){background:var(--viewer-discussion-panel)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-media-container,#viewer-comments-block,#viewer-comments-list){background:color-mix(in srgb,var(--viewer-discussion-panel) 84%,var(--adaptive-ui-active) 16%)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell){background:var(--viewer-discussion-elevated)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(.comment-node,.comment-form-container){border-color:var(--adaptive-ui-line-strong)!important;background:var(--viewer-discussion-card)!important;color:var(--adaptive-text-active)!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode{
  --viewer-discussion-panel:color-mix(in srgb,var(--standard-panel) 90%,var(--color-dynamic,#3b82f6) 10%);
  --viewer-discussion-elevated:color-mix(in srgb,var(--standard-panel-soft) 88%,var(--color-dynamic,#3b82f6) 12%);
  --viewer-discussion-card:color-mix(in srgb,var(--standard-panel) 78%,var(--color-dynamic,#3b82f6) 22%);
  --viewer-sticky-surface:var(--viewer-discussion-elevated);
}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){background:var(--viewer-discussion-panel)!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#viewer-media-container,#viewer-comments-block,#viewer-comments-list,#viewer-post-header,.viewer-comments-head,.viewer-form-shell){background:var(--viewer-discussion-elevated)!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(.comment-node,.comment-form-container){border-color:var(--standard-line)!important;background:var(--viewer-discussion-card)!important;color:var(--standard-text-active)!important}

/* ------------[Тематический фон фотографий]------------ // Убирает глухой чёрный цвет вокруг изображения и продолжает цвет панели просмотра. Модуль: «цвета публикаций и комментариев». Часть 2/3 */
html.adaptive-theme #media-viewer{
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-ui-panel) 90%,var(--color-dynamic) 10%);
  background:color-mix(in srgb,var(--adaptive-background) 82%,var(--adaptive-ui-panel) 18%)!important;
}
html.dark:not(.adaptive-theme) #media-viewer{
  --media-viewer-photo:color-mix(in srgb,var(--standard-panel-soft) 90%,var(--color-dynamic,#3b82f6) 10%);
  background:color-mix(in srgb,var(--adaptive-background) 82%,var(--standard-panel) 18%)!important;
}

/* ------------[Контраст отправки сообщения]------------ // Делает кнопку отправки заметной в тёмных палитрах: усиливает рамку, тень и контраст самой стрелки. Модуль: «цвета публикаций и комментариев». Часть 3/3 */
html:is(.dark,.adaptive-theme) .messenger-send-button{
  border:1px solid color-mix(in srgb,var(--msg-accent) 72%,white 28%)!important;
  background:color-mix(in srgb,var(--msg-accent) 82%,var(--msg-bg) 18%)!important;
  color:color-mix(in srgb,var(--msg-bg) 88%,black 12%)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--msg-accent) 18%,transparent),0 .55rem 1.25rem color-mix(in srgb,var(--msg-accent) 28%,transparent)!important;
}
html:is(.dark,.adaptive-theme) .messenger-send-button:hover{border-color:var(--msg-accent)!important;background:var(--msg-accent)!important;transform:translateY(-1px)}
html:is(.dark,.adaptive-theme) .messenger-send-button .messenger-icon{filter:none!important;opacity:1!important}

/* ------------[Одна дата над перепиской]------------ // Оставляет единственную плавающую кнопку даты, а остальные дни превращает в невидимые координаты прокрутки. Модуль: «анимированный день переписки». Часть 1/2 */
.messenger-active-day{
  position:sticky;
  top:.15rem;
  z-index:14;
  display:flex;
  height:0;
  justify-content:center;
  pointer-events:none;
}
.messenger-active-day .messenger-day-button{pointer-events:auto;transform:translateY(.2rem)}
.messenger-day-divider{
  position:relative!important;
  top:auto!important;
  z-index:0!important;
  display:block!important;
  width:100%;
  height:1px;
  min-height:1px;
  margin:.72rem 0!important;
  scroll-margin-top:3rem;
  visibility:hidden;
}

/* ------------[Плавная замена даты]------------ // Анимирует новую подпись дня коротким вертикальным сдвигом без одновременного показа двух дат. Модуль: «анимированный день переписки». Часть 2/2 */
.messenger-active-day .messenger-day-button.is-switching>span{animation:messenger-day-label-swap .3s cubic-bezier(.22,1,.36,1)}
@keyframes messenger-day-label-swap{from{opacity:0;transform:translateY(-.42rem);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.messenger-active-day .messenger-day-button.is-switching>span{animation:none}}

/* ------------[Аккуратная шапка эмодзи]------------ // Уменьшает подписи «Смайлики / Стикеры» и заменяет случайные серые заливки поверхностями текущей темы. Модуль: «панель смайликов и стикеров». Часть 1/4 */
.emoji-picker-expanded{
  --emoji-picker-line:color-mix(in srgb,var(--color-dynamic,#3b82f6) 28%,transparent);
  --emoji-picker-muted:var(--adaptive-text-secondary,rgb(100 116 139));
  --emoji-picker-track:color-mix(in srgb,var(--color-dynamic,#3b82f6) 7%,transparent);
}
.emoji-picker-mode-tabs{gap:.12rem;padding:.16rem;border:1px solid var(--emoji-picker-line);background:transparent!important}
.emoji-picker-mode-button{height:1.65rem;padding:0 .58rem;font-size:.62rem;font-weight:800;letter-spacing:.015em;text-transform:none}
.emoji-picker-mode-button span{font-size:.46rem;letter-spacing:.08em;text-transform:uppercase}
.emoji-picker-header>button{width:1.72rem;height:1.72rem;border:1px solid var(--emoji-picker-line);background:transparent!important;font-size:1.08rem}
html.adaptive-theme .emoji-picker-expanded{border-color:var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-modal)!important;color:var(--adaptive-text-active)!important;box-shadow:var(--adaptive-ui-shadow-hover)!important}
html.adaptive-theme .emoji-picker-mode-button{color:var(--adaptive-text-secondary)!important}
html.adaptive-theme .emoji-picker-mode-button.is-active{background:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important}
html.dark:not(.adaptive-theme) .emoji-picker-expanded{border-color:var(--standard-line)!important;background:var(--standard-panel)!important;color:var(--standard-text-active)!important;box-shadow:var(--standard-shadow-hover)!important}
html.dark:not(.adaptive-theme) .emoji-picker-mode-button{color:var(--standard-text-secondary)!important}
html.dark:not(.adaptive-theme) .emoji-picker-mode-button.is-active{background:var(--standard-panel-soft)!important;color:var(--standard-text-active)!important}

/* ------------[Разделитель категорий эмодзи]------------ // Проводит тонкую тематическую линию под навигационными иконками, визуально отделяя их от списка смайликов. Модуль: «панель смайликов и стикеров». Часть 2/4 */
.emoji-picker-tabs{
  justify-content:space-between;
  gap:.08rem;
  margin:.5rem 0 .42rem;
  padding:.08rem .08rem .52rem;
  border-bottom:1px solid var(--emoji-picker-line);
}
.emoji-picker-tab{width:1.92rem;height:1.92rem;border-radius:.58rem}
.emoji-picker-tab[data-category="recent"]{margin-right:.28rem}
.emoji-picker-tab[data-category="recent"]::after{right:-.22rem;height:1.2rem;background:var(--emoji-picker-line)}

/* ------------[Цвета и прокрутка эмодзи]------------ // Красит поиск, подсказки и полосу прокрутки в палитру страницы вместо несвязанных серых оттенков. Модуль: «панель смайликов и стикеров». Часть 3/4 */
.emoji-picker-search-wrap{border-color:var(--emoji-picker-line)!important;background:transparent!important}
.emoji-picker-search-wrap svg,.emoji-picker-search::placeholder,.emoji-picker-empty{color:var(--emoji-picker-muted)!important}
.emoji-picker-grid{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 62%,transparent) var(--emoji-picker-track)}
.emoji-picker-grid::-webkit-scrollbar{width:.38rem}
.emoji-picker-grid::-webkit-scrollbar-track{border-radius:999px;background:var(--emoji-picker-track)}
.emoji-picker-grid::-webkit-scrollbar-thumb{border:1px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 62%,transparent);background-clip:padding-box}
.emoji-picker-grid::-webkit-scrollbar-thumb:hover{background:var(--color-dynamic,#3b82f6);background-clip:padding-box}

/* ------------[Флаги стран в эмодзи]------------ // Выравнивает изображения флагов и сохраняет системный эмодзи как запасной вариант при недоступной картинке. Модуль: «панель смайликов и стикеров». Часть 4/4 */
.emoji-country-flag{display:block;width:1.5rem;height:1.08rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.16rem;object-fit:cover;box-shadow:0 .12rem .32rem rgb(0 0 0/.16)}
.emoji-country-flag-fallback{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:1.15rem}

/* ------------[Флаги в сообщениях]------------ // Показывает выбранные государственные флаги изображениями в пузырях, превью, ответах и закреплённых сообщениях. Модуль: «отображение флагов в переписке». Часть 2/2 */
.messenger-inline-flag{display:inline-block;width:1.42em;height:1.02em;margin:0 .08em;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.14em;object-fit:cover;vertical-align:-.13em;box-shadow:0 .08em .22em rgb(0 0 0/.16)}
.messenger-inline-flag-fallback{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:1em}
.messenger-chat-preview .messenger-inline-flag,.messenger-reply-quote .messenger-inline-flag,.messenger-pinned-row .messenger-inline-flag{width:1.25em;height:.9em}

/* ------------[Светлее подпись и обсуждение]------------ // Отдельно осветляет подпись под постом, закреплённую строку обсуждения и нижнюю форму, не меняя фон фотографии. Модуль: «цвета публикаций и комментариев». Часть 1/2 */
html.adaptive-theme #post-viewer.is-discussion-mode{
  --viewer-caption-surface:color-mix(in srgb,var(--adaptive-ui-panel) 72%,var(--color-dynamic) 28%);
  --viewer-discussion-bar:color-mix(in srgb,var(--adaptive-ui-panel) 60%,var(--color-dynamic) 40%);
  --viewer-comment-input:color-mix(in srgb,var(--adaptive-ui-panel) 64%,var(--color-dynamic) 36%);
  --viewer-sticky-surface:var(--viewer-discussion-bar);
}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-post-summary,html.adaptive-theme .media-viewer-post-slot #viewer-post-summary{border-color:var(--adaptive-ui-line-strong)!important;background:var(--viewer-caption-surface,color-mix(in srgb,var(--adaptive-ui-panel) 72%,var(--color-dynamic) 28%))!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-comments-block .viewer-comments-head,html.adaptive-theme .media-viewer-post-slot #viewer-comments-block .viewer-comments-head{border-color:var(--adaptive-ui-line-strong)!important;background:var(--viewer-discussion-bar,color-mix(in srgb,var(--adaptive-ui-panel) 60%,var(--color-dynamic) 40%))!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-sidebar .viewer-form-shell,html.adaptive-theme .media-viewer-post-slot #viewer-sidebar .viewer-form-shell{border-color:var(--adaptive-ui-line-strong)!important;background:var(--viewer-caption-surface,color-mix(in srgb,var(--adaptive-ui-panel) 72%,var(--color-dynamic) 28%))!important}
html.adaptive-theme #post-viewer.is-discussion-mode .comment-form-container,html.adaptive-theme .media-viewer-post-slot .comment-form-container{border-color:var(--adaptive-ui-line-strong)!important;background:var(--viewer-comment-input,color-mix(in srgb,var(--adaptive-ui-panel) 64%,var(--color-dynamic) 36%))!important}
html.adaptive-theme .media-viewer-post-slot{--viewer-sticky-surface:color-mix(in srgb,var(--adaptive-ui-panel) 60%,var(--color-dynamic) 40%)}

/* ------------[Светлее подпись в обычной тёмной теме]------------ // Повторяет тот же контраст для стандартной тёмной палитры без адаптивных обоев. Модуль: «цвета публикаций и комментариев». Часть 2/2 */
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode{
  --viewer-caption-surface:color-mix(in srgb,var(--standard-panel) 74%,var(--color-dynamic,#3b82f6) 26%);
  --viewer-discussion-bar:color-mix(in srgb,var(--standard-panel) 62%,var(--color-dynamic,#3b82f6) 38%);
  --viewer-comment-input:color-mix(in srgb,var(--standard-panel) 66%,var(--color-dynamic,#3b82f6) 34%);
  --viewer-sticky-surface:var(--viewer-discussion-bar);
}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode #viewer-post-summary,html.dark:not(.adaptive-theme) .media-viewer-post-slot #viewer-post-summary{border-color:var(--standard-line)!important;background:var(--viewer-caption-surface,color-mix(in srgb,var(--standard-panel) 74%,var(--color-dynamic,#3b82f6) 26%))!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode #viewer-comments-block .viewer-comments-head,html.dark:not(.adaptive-theme) .media-viewer-post-slot #viewer-comments-block .viewer-comments-head{border-color:var(--standard-line)!important;background:var(--viewer-discussion-bar,color-mix(in srgb,var(--standard-panel) 62%,var(--color-dynamic,#3b82f6) 38%))!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode #viewer-sidebar .viewer-form-shell,html.dark:not(.adaptive-theme) .media-viewer-post-slot #viewer-sidebar .viewer-form-shell{border-color:var(--standard-line)!important;background:var(--viewer-caption-surface,color-mix(in srgb,var(--standard-panel) 74%,var(--color-dynamic,#3b82f6) 26%))!important}
html.dark:not(.adaptive-theme) #post-viewer.is-discussion-mode .comment-form-container,html.dark:not(.adaptive-theme) .media-viewer-post-slot .comment-form-container{border-color:var(--standard-line)!important;background:var(--viewer-comment-input,color-mix(in srgb,var(--standard-panel) 66%,var(--color-dynamic,#3b82f6) 34%))!important}
html.dark:not(.adaptive-theme) .media-viewer-post-slot{--viewer-sticky-surface:color-mix(in srgb,var(--standard-panel) 62%,var(--color-dynamic,#3b82f6) 38%)}

/* ------------[Пост и обсуждение одной карточкой]------------ // Собирает увеличенный пост, подпись, форму и комментарии в одну непрерывную поверхность с теми же цветами, рамкой и тенью, что у карточки в ленте. Модуль: «единый просмотр поста и комментариев». Часть 1/4 */
#post-viewer.is-discussion-mode{
  align-items:center!important;
  padding:clamp(.65rem,2vw,1.35rem)!important;
}
#post-viewer.is-discussion-mode #post-viewer-panel{
  display:flex!important;
  width:min(52rem,calc(100vw - 2rem))!important;
  max-width:52rem!important;
  height:min(93vh,58rem)!important;
  max-height:calc(100vh - 1.3rem)!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:1.15rem!important;
}
#post-viewer.is-discussion-mode #viewer-sidebar{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
#post-viewer.is-discussion-mode #viewer-scroll-region{
  display:flex!important;
  min-height:0!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable;
}
#post-viewer.is-discussion-mode #viewer-post-header{
  min-height:3.55rem!important;
  padding:.62rem 3.65rem .62rem 1rem!important;
  border-bottom-width:1px!important;
}
#post-viewer.is-discussion-mode #viewer-media-container{
  display:flex;
  width:100%!important;
  height:clamp(18rem,56vh,38rem)!important;
  min-height:18rem!important;
  flex:0 0 auto!important;
  padding:.9rem 1rem!important;
  border:0!important;
  border-bottom-width:1px!important;
  border-radius:0!important;
}
#post-viewer.is-discussion-mode:not(.viewer-has-media) #viewer-media-container{display:none!important}
#post-viewer.is-discussion-mode #viewer-media-container .viewer-media-grid{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:.9rem!important;
}
#post-viewer.is-discussion-mode #viewer-post-summary{
  width:100%!important;
  padding:1rem!important;
  border:0!important;
  border-bottom-width:1px!important;
  border-radius:0!important;
}
#post-viewer.is-discussion-mode #viewer-post-actions{margin-top:.8rem;padding-top:.72rem;border-top:1px solid var(--viewer-feed-line)}

/* ------------[Комментарии сразу под постом]------------ // Убирает вид отдельной панели: заголовок обсуждения и весь список идут обычным продолжением публикации в том же вертикальном скролле. Модуль: «единый просмотр поста и комментариев». Часть 2/4 */
#post-viewer.is-discussion-mode #viewer-comments-block{
  display:block!important;
  min-height:0!important;
  flex:0 0 auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode .viewer-comments-head{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  min-height:2.65rem!important;
  padding:.62rem 1rem!important;
  border:0!important;
  border-bottom-width:1px!important;
  backdrop-filter:none!important;
}
#post-viewer.is-discussion-mode .viewer-comments-head::after{display:none!important}
#post-viewer.is-discussion-mode #viewer-comments-list{
  display:grid!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:.85rem 1rem 1.15rem!important;
  gap:.72rem!important;
  border-radius:0!important;
}
#post-viewer.is-discussion-mode #viewer-comments-list>.root-wrapper{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode #viewer-comments-list>.root-wrapper>.comment-node{
  margin:0!important;
  padding:.72rem .78rem!important;
  border:1px solid var(--viewer-feed-line)!important;
  border-radius:1rem!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode #viewer-comments-list>.root-wrapper>.comment-node>.absolute{display:none!important}
#post-viewer.is-discussion-mode .replies-group{
  margin:.45rem 0 0 1.6rem!important;
  padding:.42rem!important;
  border:1px solid var(--viewer-feed-line)!important;
  border-radius:.35rem!important;
  background:var(--viewer-feed-soft)!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode .replies-inner-list{display:grid!important;gap:.35rem!important}
/* ------------[Компактный контейнер ветки]------------ // Возвращает обычный список ответов и оставляет общей рамке минимальное скругление без древовидных линий. Модуль: «ветки комментариев». Часть 1/1 */
#post-viewer.is-discussion-mode .replies-group .comment-node{
  margin:0!important;
  padding:.5rem .55rem!important;
  border:0!important;
  border-radius:.25rem!important;
  background:transparent!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode .replies-group .comment-node>.absolute{display:none!important}
.comment-replies-toggle .replies-chevron{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.comment-replies-toggle.is-open .replies-chevron{transform:rotate(180deg)}

/* ------------[Форма как часть публикации]------------ // Оставляет поле ответа доступным снизу, но красит и соединяет его с общей карточкой вместо отдельного чёрного подвала. Модуль: «единый просмотр поста и комментариев». Часть 3/4 */
#post-viewer.is-discussion-mode .viewer-form-shell{
  position:relative!important;
  z-index:20!important;
  flex:0 0 auto!important;
  border:0!important;
  border-top:1px solid var(--viewer-feed-line)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode #viewer-form-container{width:100%!important;margin:0!important;padding:.7rem 1rem!important}
#post-viewer.is-discussion-mode .comment-form-container{
  min-height:2.8rem!important;
  border:1px solid var(--viewer-feed-line)!important;
  border-radius:.9rem!important;
  box-shadow:none!important;
}
#post-viewer.is-discussion-mode #viewer-reply-indicator{
  margin:0 0 .45rem!important;
  border-color:var(--viewer-feed-line)!important;
  background:var(--viewer-feed-soft)!important;
  color:var(--viewer-feed-text)!important;
}

/* ------------[Палитра ровно как в ленте]------------ // Подставляет поверхности текущей темы без дополнительных затемнений и смешанных почти чёрных слоёв. Модуль: «единый просмотр поста и комментариев». Часть 4/4 */
html.adaptive-theme #post-viewer.is-discussion-mode{
  --viewer-feed-surface:var(--adaptive-ui-panel);
  --viewer-feed-soft:color-mix(in srgb,var(--adaptive-ui-panel) 86%,var(--adaptive-ui-active) 14%);
  --viewer-feed-line:var(--adaptive-ui-line);
  --viewer-feed-text:var(--adaptive-text-active);
  background:color-mix(in srgb,var(--adaptive-background) 72%,transparent)!important;
}
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel{border:1px solid var(--adaptive-ui-line)!important;background:var(--adaptive-ui-panel)!important;box-shadow:var(--adaptive-ui-shadow-hover)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-sidebar,#viewer-scroll-region,#viewer-post-header,#viewer-media-container,#viewer-post-summary,#viewer-comments-block,#viewer-comments-list,.viewer-comments-head,.viewer-form-shell){background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-post-header,#viewer-media-container,#viewer-post-summary,.viewer-comments-head,.viewer-form-shell){border-color:var(--adaptive-ui-line)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-sidebar>.viewer-form-shell{background:var(--adaptive-ui-panel)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-comments-block>.viewer-comments-head{background:var(--adaptive-ui-panel)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-comments-list>.root-wrapper>.comment-node,.comment-form-container){border-color:var(--adaptive-ui-line)!important;background:var(--viewer-feed-soft)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel>button{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-modal)!important;color:var(--adaptive-text-active)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode{
  --viewer-feed-surface:var(--standard-panel);
  --viewer-feed-soft:var(--standard-panel-soft);
  --viewer-feed-line:var(--standard-line);
  --viewer-feed-text:var(--standard-text-active);
  background:color-mix(in srgb,var(--adaptive-background) 78%,transparent)!important;
}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel{border:1px solid var(--standard-line)!important;background:var(--standard-panel)!important;box-shadow:var(--standard-shadow-hover)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#viewer-sidebar,#viewer-scroll-region,#viewer-post-header,#viewer-media-container,#viewer-post-summary,#viewer-comments-block,#viewer-comments-list,.viewer-comments-head,.viewer-form-shell){background:var(--standard-panel)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#viewer-post-header,#viewer-media-container,#viewer-post-summary,.viewer-comments-head,.viewer-form-shell){border-color:var(--standard-line)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #viewer-sidebar>.viewer-form-shell{background:var(--standard-panel)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #viewer-comments-block>.viewer-comments-head{background:var(--standard-panel)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode :is(#viewer-comments-list>.root-wrapper>.comment-node,.comment-form-container){border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel>button{border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important;color:var(--standard-text-active)!important}
@media(max-width:767px){
  #post-viewer.is-discussion-mode{padding:0!important}
  #post-viewer.is-discussion-mode #post-viewer-panel{width:100%!important;height:100%!important;max-height:none!important;border:0!important;border-radius:0!important}
  #post-viewer.is-discussion-mode #viewer-media-container{height:min(48vh,25rem)!important;min-height:15rem!important;padding:.65rem!important}
  #post-viewer.is-discussion-mode #viewer-post-summary,#post-viewer.is-discussion-mode #viewer-comments-list{padding-inline:.8rem!important}
  #post-viewer.is-discussion-mode #viewer-form-container{padding:.58rem .7rem!important}
}

/* ------------[Единые скругления комментариев]------------ // Слегка увеличивает скругление прежней квадратной ветки и применяет один радиус к корню, ответам, контейнеру ветки и форме во всех видах обсуждения. Модуль: «комментарии». Часть 1/2 */
#post-viewer.is-discussion-mode{--viewer-comment-radius:.75rem}
#post-viewer.is-discussion-mode :is(
  #viewer-comments-list>.root-wrapper>.comment-node,
  .replies-group,
  .replies-group .comment-node,
  .comment-form-container,
  #viewer-reply-indicator,
  .comment-dropdown
){border-radius:var(--viewer-comment-radius)!important}

/* ------------[Компактная колонка поста в фотопросмотрщике]------------ // Уменьшает заголовок автора, строку обсуждения и поля комментариев только в правой панели увеличенной фотографии. Модуль: «просмотр медиа и комментариев». Часть 1/2 */
.media-viewer-post-slot #viewer-post-header{
  min-height:3.15rem!important;
  gap:.58rem!important;
  padding:.48rem 3.55rem .48rem .82rem!important;
}
.media-viewer-post-slot #viewer-post-header :is(img,.avatar-placeholder,.user-avatar){width:2.2rem!important;height:2.2rem!important}
.media-viewer-post-slot #viewer-post-header .viewer-author-link{font-size:.76rem!important;line-height:1.05rem!important}
.media-viewer-post-slot #viewer-post-header>div>span{font-size:.58rem!important;line-height:.85rem!important}
.media-viewer-post-slot .viewer-comments-head{min-height:2.2rem!important;padding:.38rem .82rem!important}
.media-viewer-post-slot #post-discussion-title{font-size:.5rem!important;letter-spacing:.1em!important}
.media-viewer-post-slot #viewer-comments-count{padding:.08rem .42rem!important;font-size:.52rem!important}
.media-viewer-post-slot #viewer-form-container{padding:.48rem .72rem!important}
.media-viewer-post-slot .comment-form-container{min-height:2.35rem!important}
.media-viewer-post-slot .comment-form-container textarea{
  min-height:2.05rem!important;
  max-height:4.8rem!important;
  padding-top:.4rem!important;
  padding-bottom:.4rem!important;
  font-size:.74rem!important;
  line-height:1.05rem!important;
}
.media-viewer-post-slot .comment-inline-editor-shell{min-height:2.55rem;padding:.28rem .32rem .28rem .42rem}
.media-viewer-post-slot .comment-inline-editor textarea{min-height:1.9rem;max-height:5rem;padding:.34rem .15rem .25rem;font-size:.78rem;line-height:1.15rem}
.media-viewer-post-slot .comment-inline-emoji-trigger{width:1.82rem;height:1.82rem}
.media-viewer-post-slot .comment-inline-editor-actions button{width:1.9rem;height:1.9rem}

/* ------------[Зазор над кнопкой открытия поста]------------ // Поднимает нижний край раскрытого просмотрщика над плавающей панелью, чтобы рамка окна и кнопка «Открыть / Свернуть пост» больше не накладывались. Модуль: «просмотр медиа и комментариев». Часть 2/2 */
@media(min-width:768px){
  #media-viewer.is-post-expanded #media-viewer-panel{padding-bottom:5.25rem!important}
}
@media(max-width:767px){
  #media-viewer.is-post-expanded #media-viewer-panel{padding-bottom:6.15rem!important}
}

/* ------------[Нейтральный фон большого поста]------------ // Сохраняет оттенок обоев, но смешивает коричневые поверхности с тёмной нейтральной основой и отдельно затемняет поле фотографии. Модуль: «большой просмотр публикации». Часть 1/3 */
html.adaptive-theme #post-viewer.is-discussion-mode{
  --big-post-surface:color-mix(in srgb,var(--adaptive-ui-panel) 58%,rgb(15 18 22) 42%);
  --big-post-elevated:color-mix(in srgb,var(--adaptive-ui-panel) 66%,rgb(15 18 22) 34%);
  --big-post-soft:color-mix(in srgb,var(--adaptive-ui-active) 54%,rgb(15 18 22) 46%);
  --big-post-photo:color-mix(in srgb,var(--adaptive-ui-panel) 24%,rgb(8 11 15) 76%);
}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#post-viewer-panel,#viewer-sidebar,#viewer-scroll-region,#viewer-post-summary){background:var(--big-post-surface)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-post-header,.viewer-comments-head,.viewer-form-shell){background:var(--big-post-elevated)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-comments-block,#viewer-comments-list){background:var(--big-post-soft)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-media-container{background:var(--big-post-photo)!important}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-media-container :is(.viewer-media-grid,.post-media-tile){background-color:var(--big-post-photo)!important}
html.adaptive-theme #post-viewer.is-discussion-mode :is(#viewer-comments-list>.root-wrapper>.comment-node,.comment-form-container){background:var(--big-post-elevated)!important}
html.adaptive-theme #media-viewer{
  --media-viewer-surface:color-mix(in srgb,var(--adaptive-ui-panel) 58%,rgb(15 18 22) 42%);
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-ui-panel) 24%,rgb(8 11 15) 76%);
}
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-sidebar{background:var(--media-viewer-surface)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot :is(#viewer-post-header,#viewer-post-summary,.viewer-comments-head,.viewer-form-shell){background:color-mix(in srgb,var(--adaptive-ui-panel) 64%,rgb(15 18 22) 36%)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot :is(#viewer-comments-block,#viewer-comments-list){background:color-mix(in srgb,var(--adaptive-ui-active) 52%,rgb(15 18 22) 48%)!important}

/* ------------[Описание как у поста в ленте]------------ // Повторяет размер, светлый тематический цвет, толщину и межстрочный интервал обычной карточки публикации. Модуль: «большой просмотр публикации». Часть 2/3 */
#post-viewer.is-discussion-mode #viewer-post-body,.media-viewer-post-slot #viewer-post-body{
  overflow-wrap:anywhere;
  color:var(--standard-text-active,rgb(226 232 240))!important;
  font-size:.9375rem!important;
  font-weight:400!important;
  line-height:1.625!important;
  white-space:pre-wrap!important;
}
html.adaptive-theme #post-viewer.is-discussion-mode #viewer-post-body,html.adaptive-theme .media-viewer-post-slot #viewer-post-body{color:color-mix(in srgb,var(--color-dynamic) 62%,white 38%)!important}

/* ------------[Нижнее скругление формы]------------ // Завершает большой пост единой округлой нижней кромкой и не оставляет квадратный фон под полем комментария. Модуль: «большой просмотр публикации». Часть 3/3 */
#post-viewer.is-discussion-mode #viewer-sidebar{border-radius:0 0 1.15rem 1.15rem!important;overflow:hidden!important}
#post-viewer.is-discussion-mode .viewer-form-shell{border-radius:0 0 1.15rem 1.15rem!important;overflow:hidden!important}
.media-viewer-post-slot #viewer-sidebar{border-radius:0 0 1.4rem 0!important;overflow:hidden!important}
.media-viewer-post-slot .viewer-form-shell{border-radius:0 0 1.4rem 0!important;overflow:hidden!important}
@media(max-width:767px){
  .media-viewer-post-slot #viewer-sidebar,.media-viewer-post-slot .viewer-form-shell{border-radius:0 0 1.4rem 1.4rem!important}
}

/* ------------[Время комментария под автором]------------ // Оставляет имя и @логин в первой строке, а время переносит на компактную вторую строку без смещения меню и текста комментария. Модуль: «комментарии». Часть 1/1 */
.comment-author-meta{display:grid;min-width:0;gap:.08rem;align-content:start}
.comment-author-line{display:flex;min-width:0;align-items:center;gap:.45rem}
.comment-author-line .comment-author-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comment-author-login{min-width:0;overflow:hidden;color:var(--adaptive-text-secondary,rgb(148 163 184));font-size:.625rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.comment-time{display:block;color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 72%,var(--adaptive-text-secondary,rgb(148 163 184)) 28%);font-size:.55rem;font-weight:850;line-height:.72rem;letter-spacing:.065em;text-transform:uppercase}

/* ------------[Компактные ответы в фотопросмотрщике]------------ // Делает раскрытую ветку уже корневого комментария, уменьшает карточки ответов и отделяет начало и конец ветки собственной мягкой рамкой. Модуль: «фотография → открыть пост». Часть 1/2 */
.media-viewer-post-slot .replies-group{
  margin:.42rem .48rem .2rem 1.55rem!important;
  padding:.34rem!important;
  border:1px solid var(--media-viewer-border,var(--standard-line))!important;
  border-radius:.75rem!important;
  box-shadow:none!important;
}
.media-viewer-post-slot .replies-inner-list{display:grid!important;gap:.3rem!important}
.media-viewer-post-slot .replies-group .comment-node{
  margin:0!important;
  padding:.42rem .48rem!important;
  border:1px solid var(--media-viewer-border,var(--standard-line))!important;
  border-radius:.68rem!important;
  box-shadow:none!important;
}
.media-viewer-post-slot .replies-group .comment-node>.absolute{display:none!important}
.media-viewer-post-slot .replies-group .comment-node>div.flex{gap:.55rem!important;padding:.12rem!important}
.media-viewer-post-slot .replies-group .comment-node>div.flex>button:first-child>div:first-child{width:2rem!important;height:2rem!important}
.media-viewer-post-slot .replies-group .comment-node .user-online-dot{width:.52rem!important;height:.52rem!important;border-width:1px!important}
.media-viewer-post-slot .replies-group .comment-author-link{font-size:.7rem!important;line-height:.9rem!important}
.media-viewer-post-slot .replies-group .comment-author-login{font-size:.55rem!important}
.media-viewer-post-slot .replies-group .comment-time{font-size:.48rem!important;line-height:.62rem!important}
.media-viewer-post-slot .replies-group [id^="comment-text-"]{font-size:.76rem!important;line-height:1.12rem!important}
.media-viewer-post-slot .replies-group [id^="comment-text-"]+.flex{gap:.85rem!important;margin-top:.48rem!important}
.media-viewer-post-slot .replies-group .comment-like-btn>div{padding:.25rem!important}
.media-viewer-post-slot .replies-group .comment-like-btn svg{width:.72rem!important;height:.72rem!important}
.media-viewer-post-slot .replies-group .comment-node button{font-size:.55rem!important}

/* ------------[Поверхности ветки ответов]------------ // Сохраняет тематические оттенки большого поста, но даёт контейнеру и вложенной карточке разные уровни яркости для читаемой границы. Модуль: «фотография → открыть пост». Часть 2/2 */
html.adaptive-theme #media-viewer .media-viewer-post-slot .replies-group{background:color-mix(in srgb,var(--media-viewer-surface) 72%,rgb(8 11 15) 28%)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot .replies-group .comment-node{background:color-mix(in srgb,var(--adaptive-ui-panel) 52%,rgb(15 18 22) 48%)!important}
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot .replies-group{background:color-mix(in srgb,var(--standard-panel) 78%,var(--standard-panel-soft) 22%)!important}
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot .replies-group .comment-node{background:var(--standard-panel-soft)!important}

/* ------------[Единый низ большого поста]------------ // Убирает отдельную коричневую подложку формы и окрашивает нижнюю панель тем же нейтральным слоем, что и вся публикация. Модуль: «большой пост и фото → открыть пост». Часть 1/2 */
html.adaptive-theme #post-viewer.is-discussion-mode .viewer-form-shell{background:var(--big-post-surface)!important}
html.adaptive-theme #post-viewer.is-discussion-mode .comment-form-container{background:var(--big-post-elevated)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot .viewer-form-shell{background:var(--media-viewer-surface)!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot .comment-form-container{background:color-mix(in srgb,var(--media-viewer-surface) 78%,var(--adaptive-ui-active) 22%)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode .viewer-form-shell,
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot .viewer-form-shell{background:var(--standard-panel)!important}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode .comment-form-container,
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot .comment-form-container{background:var(--standard-panel-soft)!important}

/* ------------[Скруглённая нижняя панель]------------ // Скругляет оба нижних угла правой колонки и само поле комментария, сохраняя рамку внутри контура поста без квадратной подложки. Модуль: «большой пост и фото → открыть пост». Часть 2/2 */
#post-viewer.is-discussion-mode #viewer-sidebar,
#post-viewer.is-discussion-mode .viewer-form-shell,
.media-viewer-post-slot #viewer-sidebar,
.media-viewer-post-slot .viewer-form-shell{
  border-radius:0 0 1.35rem 1.35rem!important;
  overflow:hidden!important;
}
#post-viewer.is-discussion-mode .viewer-form-shell,
.media-viewer-post-slot .viewer-form-shell{border-top:1px solid var(--media-viewer-border,var(--viewer-feed-line,var(--standard-line)))!important;box-shadow:none!important}
#post-viewer.is-discussion-mode #viewer-form-container,
.media-viewer-post-slot #viewer-form-container{background:transparent!important}
#post-viewer.is-discussion-mode .comment-form-container,
.media-viewer-post-slot .comment-form-container{border-radius:1.1rem!important;overflow:hidden!important;box-shadow:none!important}

/* ------------[Приоритет фона обычного большого поста]------------ // Перекрывает старые высокоспецифичные правила темы, чтобы нижняя форма обычного просмотрщика действительно совпадала с нейтральной поверхностью поста. Модуль: «открыть пост». Часть 1/1 */
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel #viewer-sidebar>.viewer-form-shell{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--big-post-surface)!important;
}
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel #viewer-sidebar #viewer-form-container .comment-form-container{
  border-color:var(--adaptive-ui-line)!important;
  border-radius:1.1rem!important;
  background:var(--big-post-elevated)!important;
}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel #viewer-sidebar>.viewer-form-shell{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel #viewer-sidebar #viewer-form-container .comment-form-container{
  border-color:var(--standard-line)!important;
  border-radius:1.1rem!important;
  background:var(--standard-panel-soft)!important;
}

/* ------------[Цвет ветки в большом посте]------------ // Убирает слишком светлую коричневую заливку вложенного ответа и возвращает ему тот же нейтральный уровень поверхности, что у корневого комментария. Модуль: «открыть пост → комментарии». Часть 1/1 */
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel #viewer-comments-list .replies-group{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--big-post-surface)!important;
}
html.adaptive-theme #post-viewer.is-discussion-mode #post-viewer-panel #viewer-comments-list .replies-group .comment-node{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--big-post-elevated)!important;
}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel #viewer-comments-list .replies-group{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
}
html:not(.adaptive-theme) #post-viewer.is-discussion-mode #post-viewer-panel #viewer-comments-list .replies-group .comment-node{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel-soft)!important;
}

/* ------------[Нейтральные комментарии в фотопросмотрщике]------------ // Убирает ярко-коричневую заливку корневых комментариев и выравнивает всю область обсуждения с нейтральной поверхностью открытого поста. Модуль: «фото → открыть пост → комментарии». Часть 1/1 */
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-comments-block,
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-comments-list{
  background:var(--media-viewer-surface)!important;
}
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-comments-list>.root-wrapper>.comment-node{
  border-color:var(--adaptive-ui-line)!important;
  background:color-mix(in srgb,var(--media-viewer-surface) 88%,var(--adaptive-ui-panel) 12%)!important;
  box-shadow:none!important;
}
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot #viewer-comments-block,
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot #viewer-comments-list{
  background:var(--standard-panel)!important;
}
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot #viewer-comments-list>.root-wrapper>.comment-node{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel-soft)!important;
  box-shadow:none!important;
}

/* ------------[Ветка как в большом посте]------------ // Убирает двойную внешнюю рамку в фотопросмотрщике: остаётся одна карточка ответа с отступом слева и правым краем на уровне корневого комментария. Модуль: «фото → открыть пост → ответы». Часть 1/1 */
.media-viewer-post-slot #viewer-comments-list .replies-group{
  margin:.42rem 0 .2rem 1.55rem!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.media-viewer-post-slot #viewer-comments-list .replies-inner-list{width:100%!important}
html.adaptive-theme #media-viewer .media-viewer-post-slot #viewer-comments-list .replies-group,
html:not(.adaptive-theme) #media-viewer .media-viewer-post-slot #viewer-comments-list .replies-group{
  border:0!important;
  background:transparent!important;
}

/* ------------[Изоляция дневной и ночной палитр]------------ // Не позволяет тёмным нейтральным примесям большого поста попадать в дневную адаптивную тему и задаёт каждому режиму собственные поверхности. Модуль: «большой пост и фото → открыть пост». Часть 1/2 */
html.adaptive-theme.dark #post-viewer.is-discussion-mode{
  --big-post-surface:color-mix(in srgb,var(--adaptive-ui-panel) 58%,rgb(15 18 22) 42%);
  --big-post-elevated:color-mix(in srgb,var(--adaptive-ui-panel) 66%,rgb(15 18 22) 34%);
  --big-post-soft:color-mix(in srgb,var(--adaptive-ui-active) 54%,rgb(15 18 22) 46%);
  --big-post-photo:color-mix(in srgb,var(--adaptive-ui-panel) 24%,rgb(8 11 15) 76%);
}
html.adaptive-theme:not(.dark) #post-viewer.is-discussion-mode{
  --big-post-surface:var(--adaptive-ui-panel);
  --big-post-elevated:color-mix(in srgb,var(--adaptive-ui-panel) 84%,var(--adaptive-ui-active) 16%);
  --big-post-soft:color-mix(in srgb,var(--adaptive-ui-panel) 72%,var(--adaptive-ui-active) 28%);
  --big-post-photo:color-mix(in srgb,var(--adaptive-background) 82%,var(--adaptive-ui-panel) 18%);
}
html.adaptive-theme.dark #media-viewer{
  --media-viewer-surface:color-mix(in srgb,var(--adaptive-ui-panel) 58%,rgb(15 18 22) 42%);
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-ui-panel) 24%,rgb(8 11 15) 76%);
}
html.adaptive-theme:not(.dark) #media-viewer{
  --media-viewer-surface:var(--adaptive-ui-panel);
  --media-viewer-photo:color-mix(in srgb,var(--adaptive-background) 82%,var(--adaptive-ui-panel) 18%);
}

/* ------------[Поверхности по активному режиму]------------ // Закрепляет светлые панели и тёмный читаемый текст днём, сохраняя прежние нейтрально-тёмные поверхности и светлый текст ночью. Модуль: «большой пост и фото → открыть пост». Часть 2/2 */
html.adaptive-theme.dark #media-viewer .media-viewer-post-slot :is(#viewer-post-header,#viewer-post-summary,.viewer-comments-head,.viewer-form-shell){background:color-mix(in srgb,var(--adaptive-ui-panel) 64%,rgb(15 18 22) 36%)!important}
html.adaptive-theme:not(.dark) #media-viewer .media-viewer-post-slot :is(#viewer-post-header,#viewer-post-summary,.viewer-comments-head,.viewer-form-shell){background:color-mix(in srgb,var(--adaptive-ui-panel) 86%,var(--adaptive-ui-active) 14%)!important}
html.adaptive-theme:not(.dark) #media-viewer .media-viewer-post-slot :is(#viewer-comments-block,#viewer-comments-list){background:var(--media-viewer-surface)!important}
html.adaptive-theme.dark #post-viewer.is-discussion-mode #viewer-post-body,
html.adaptive-theme.dark .media-viewer-post-slot #viewer-post-body{color:color-mix(in srgb,var(--color-dynamic) 62%,white 38%)!important}
html.adaptive-theme:not(.dark) #post-viewer.is-discussion-mode #viewer-post-body,
html.adaptive-theme:not(.dark) .media-viewer-post-slot #viewer-post-body{color:var(--adaptive-text-active)!important}
html.adaptive-theme.dark #media-viewer .media-viewer-post-slot .replies-group .comment-node{background:color-mix(in srgb,var(--adaptive-ui-panel) 52%,rgb(15 18 22) 48%)!important}
html.adaptive-theme:not(.dark) #media-viewer .media-viewer-post-slot .replies-group .comment-node{background:color-mix(in srgb,var(--media-viewer-surface) 80%,var(--adaptive-ui-active) 20%)!important}

/* ------------[Тематический фон всей страницы]------------ // Заменяет стандартный белый холст профиля, пространств и остальных разделов на оттенок активной палитры, который автоматически меняется вместе с темой и акцентом. Модуль: «общий фон приложения». Часть 1/2 */
html.adaptive-theme:not(.dark){
  --page-theme-background:color-mix(in srgb,var(--adaptive-background) 84%,var(--color-dynamic) 16%);
  --page-theme-glow:color-mix(in srgb,var(--color-dynamic) 17%,transparent);
}
html.adaptive-theme.dark{
  --page-theme-background:color-mix(in srgb,var(--adaptive-background) 91%,var(--color-dynamic) 9%);
  --page-theme-glow:color-mix(in srgb,var(--color-dynamic) 12%,transparent);
}
html:not(.adaptive-theme):not(.dark){
  --page-theme-background:color-mix(in srgb,var(--adaptive-background) 92%,var(--color-dynamic,#3b82f6) 8%);
  --page-theme-glow:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,transparent);
}
html.dark:not(.adaptive-theme){
  --page-theme-background:color-mix(in srgb,var(--adaptive-background) 94%,var(--color-dynamic,#3b82f6) 6%);
  --page-theme-glow:color-mix(in srgb,var(--color-dynamic,#3b82f6) 9%,transparent);
}

/* ------------[Единый холст разделов]------------ // Оставляет профильные и пространственные оболочки прозрачными поверх тематического холста, чтобы по бокам центральной колонки больше не появлялся белый фон. Модуль: «общий фон приложения». Часть 2/2 */
html,
body{
  background-color:var(--page-theme-background,var(--adaptive-background))!important;
}
html.adaptive-theme:not(.dark) body,
html.adaptive-theme.dark body,
html:not(.adaptive-theme) body{
  background-color:var(--page-theme-background,var(--adaptive-background))!important;
}
body{
  background-image:
    radial-gradient(circle at 16% 8%,var(--page-theme-glow),transparent 34rem),
    radial-gradient(circle at 86% 38%,color-mix(in srgb,var(--page-theme-glow) 68%,transparent),transparent 38rem)!important;
  background-attachment:fixed!important;
}
body>main,
#content-area,
#content-main,
#space-page-root,
.space-page-shell{
  background-color:transparent!important;
}

/* ------------[Тематические иконки меню профиля]------------ // Заменяет системные цветные эмодзи на одноцветные SVG, которые наследуют активный акцент светлой, тёмной и адаптивной темы. Модуль: «меню профиля». Часть 1/1 */
#settings-dropdown .settings-menu-icon{
  width:1rem;
  height:1rem;
  flex:none;
  fill:currentColor;
  color:var(--color-dynamic,#3b82f6)!important;
  transition:color .18s ease,filter .18s ease;
}
#settings-dropdown button:hover .settings-menu-icon{
  filter:drop-shadow(0 0 .24rem color-mix(in srgb,currentColor 34%,transparent));
}
#settings-dropdown button[onclick*="logout"] .settings-menu-icon{
  color:rgb(239 68 68)!important;
}
/* ------------[Цвета витрины фотографий]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 38/203 */
/* Перекрывает светлые slate-утилиты у динамически созданных ячеек. Витрина получает поверхность, рамки и пустые слоты из текущей темы, не смешивая стандартную и адаптивную палитры. */
html.adaptive-theme #side-photos>div{
  border-color:var(--adaptive-ui-line)!important;
  background:var(--adaptive-ui-panel)!important;
  color:var(--adaptive-text-active)!important;
  box-shadow:var(--adaptive-ui-shadow)!important;
}
html.adaptive-theme #side-photos :is(.avatar-showcase-item,.avatar-showcase-placeholder){
  border-color:var(--adaptive-ui-line-strong)!important;
  background:var(--adaptive-ui-active)!important;
}
html.adaptive-theme #side-photos :is(.showcase-gallery-icon,.showcase-edit-button){
  border:1px solid var(--adaptive-ui-line-strong)!important;
  background:var(--adaptive-ui-active)!important;
  color:var(--color-dynamic,#3b82f6)!important;
}
html:not(.adaptive-theme) #side-photos>div{
  border-color:var(--standard-line)!important;
  background:var(--standard-panel)!important;
  color:var(--standard-text-active)!important;
  box-shadow:var(--standard-shadow)!important;
}
html:not(.adaptive-theme) #side-photos :is(.avatar-showcase-item,.avatar-showcase-placeholder){
  border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 38%,var(--standard-line))!important;
  background:var(--standard-panel-soft)!important;
}
html:not(.adaptive-theme) #side-photos :is(.showcase-gallery-icon,.showcase-edit-button){
  border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,var(--standard-line))!important;
  background:var(--standard-panel-soft)!important;
  color:var(--color-dynamic,#3b82f6)!important;
}
#side-photos .avatar-showcase-item.is-active{border-color:var(--color-dynamic,#3b82f6)!important}
/* ------------[Система достижений и заданий]------------ // Оформляет публичную витрину, каталог с описанием слева и наградой справа, прогресс заданий и тусклые закрытые уровни во всех темах. Модуль: «достижения». Часть 1/1 */
.achievement-sidebar-card,.achievements-dialog,.achievement-showcase-dialog{--achievement-surface:var(--standard-panel,#fff);--achievement-surface-soft:var(--standard-panel-soft,#f8fafc);--achievement-line:var(--standard-line,#e2e8f0);--achievement-text:var(--standard-text-active,#1e293b);--achievement-muted:var(--standard-text-passive,#94a3b8);--achievement-shadow:var(--standard-shadow,0 20px 45px -30px rgb(15 23 42/.32))}
html.adaptive-theme .achievement-sidebar-card,html.adaptive-theme .achievements-dialog,html.adaptive-theme .achievement-showcase-dialog{--achievement-surface:var(--adaptive-ui-panel,var(--adaptive-surface));--achievement-surface-soft:var(--adaptive-ui-active,var(--adaptive-surface-2));--achievement-line:var(--adaptive-ui-line,var(--adaptive-border));--achievement-text:var(--adaptive-text-active,var(--adaptive-text));--achievement-muted:var(--adaptive-text-passive,var(--adaptive-muted));--achievement-shadow:var(--adaptive-ui-shadow)}
.achievement-sidebar-card{background:var(--achievement-surface)!important;border-color:var(--achievement-line)!important;box-shadow:var(--achievement-shadow)!important}
.achievement-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.achievement-sidebar-head>div{display:grid;min-width:0;gap:.22rem}
#achievements-title{color:var(--achievement-text);font-size:.6rem;font-weight:950;letter-spacing:.17em;line-height:1.35;text-transform:uppercase}#achievement-showcase-summary{color:var(--achievement-muted);font-size:.52rem;font-weight:800}
.achievement-sidebar-actions{display:flex;flex:none;align-items:center;gap:.35rem}.achievement-sidebar-actions button{flex:none;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 42%,var(--achievement-line));border-radius:.62rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,transparent);color:var(--color-dynamic,#3b82f6);padding:.38rem .52rem;font-size:.48rem;font-weight:950;letter-spacing:.07em;text-transform:uppercase;transition:transform .18s ease,background .18s ease}.achievement-sidebar-actions button:hover{background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 18%,transparent);transform:translateY(-1px)}
/* ------------[Карандаш витрины в режиме редактора]------------ // Скрывает настройку достижений при обычном просмотре и показывает компактную иконку только после включения основного редактора профиля или пространства. Модуль: «витрина достижений». Часть 1/1 */
.achievement-sidebar-actions #achievement-showcase-edit-button{display:none;width:1.95rem;height:1.95rem;place-items:center;padding:0;border-radius:.62rem}.achievement-sidebar-actions #achievement-showcase-edit-button svg{width:.88rem;height:.88rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}body.cover-edit-mode .achievement-sidebar-actions #achievement-showcase-edit-button.is-available{display:grid}
.achievement-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.48rem;margin-bottom:1.2rem}
.achievement-showcase-item{position:relative;display:grid;min-width:0;place-items:center;gap:.25rem;border:1px solid var(--achievement-line);border-radius:.78rem;background:var(--achievement-surface-soft);padding:.65rem .25rem .5rem;color:var(--color-dynamic,#3b82f6);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.achievement-showcase-item:hover{z-index:1;border-color:color-mix(in srgb,currentColor 54%,var(--achievement-line));box-shadow:0 12px 22px -18px currentColor;transform:translateY(-2px)}.achievement-showcase-item>span{display:grid;width:1.75rem;height:1.75rem;place-items:center;border-radius:50%;background:color-mix(in srgb,currentColor 14%,transparent)}.achievement-showcase-item svg{width:1.08rem;height:1.08rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.achievement-showcase-item strong{max-width:100%;overflow:hidden;color:var(--achievement-text);font-size:.48rem;font-weight:900;text-align:center;text-overflow:ellipsis;white-space:nowrap}.achievement-showcase-item small{position:absolute;right:.26rem;top:.25rem;color:currentColor;font-size:.42rem;font-weight:950}.achievement-showcase-item.tier-silver{color:#8b6fce}.achievement-showcase-item.tier-gold{color:#d58b28}.achievement-showcase-item.tier-legend{color:#e14f6a}
.achievement-showcase-item.tier-zodiac{color:#9b6fe7;background:radial-gradient(circle at 50% 16%,rgb(155 111 231/.2),transparent 62%),var(--achievement-surface-soft)}.achievement-showcase-item.tier-zodiac small{font-size:.7rem;line-height:1}
.achievement-showcase-item.tier-verified{color:var(--color-dynamic,#d76f2a);background:radial-gradient(circle at 50% 16%,color-mix(in srgb,var(--color-dynamic,#d76f2a) 24%,transparent),transparent 64%),var(--achievement-surface-soft)}
.achievement-showcase-empty{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .65rem;width:100%;border:1px dashed var(--achievement-line);border-radius:.8rem;background:var(--achievement-surface-soft);padding:.72rem;color:var(--achievement-muted);text-align:left}.achievement-showcase-empty>span{grid-row:1/3;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,transparent)}.achievement-showcase-empty svg{width:1.15rem;height:1.15rem;fill:none;stroke:var(--color-dynamic,#3b82f6);stroke-width:1.8}.achievement-showcase-empty strong{color:var(--achievement-text);font-size:.57rem}.achievement-showcase-empty small{font-size:.48rem}
.achievement-showcase-loading{height:4.25rem;border-radius:.78rem;background:linear-gradient(100deg,var(--achievement-surface-soft),color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,var(--achievement-surface-soft)),var(--achievement-surface-soft));background-size:200% 100%;animation:achievement-shimmer 1.25s linear infinite}.achievement-showcase-error{grid-column:1/-1;border:1px dashed var(--achievement-line);border-radius:.8rem;padding:1rem;color:var(--achievement-muted);font-size:.55rem;font-weight:800;text-align:center}@keyframes achievement-shimmer{to{background-position:-200% 0}}
.achievements-modal{position:fixed;inset:0;z-index:24000;display:grid;place-items:center;padding:clamp(.65rem,2vw,1.5rem)}.achievements-modal.hidden{display:none!important}.achievements-modal-backdrop{position:absolute;inset:0;border:0;background:rgb(8 10 14/.72);backdrop-filter:blur(8px)}
/* ------------[Фиксация страницы под достижениями]------------ // Блокирует корневую и кузовную прокрутку без скачка страницы; список внутри окна продолжает прокручиваться отдельно. Модуль: «достижения». Часть 1/1 */
html.achievements-scroll-locked{overflow:hidden!important;overscroll-behavior:none!important}
body.achievements-scroll-locked{position:fixed!important;top:var(--achievement-scroll-offset,0)!important;right:0!important;bottom:auto!important;left:0!important;width:100%!important;overflow:hidden!important;overscroll-behavior:none!important}
.achievements-dialog{position:relative;display:grid;width:min(100%,58rem);max-height:min(88vh,54rem);grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden;border:1px solid var(--achievement-line);border-radius:1.2rem;background:var(--achievement-surface);box-shadow:0 35px 95px -36px rgb(0 0 0/.72)}
.achievements-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem 1rem;border-bottom:1px solid var(--achievement-line)}.achievements-dialog-head>div{display:grid;gap:.22rem}.achievements-dialog-head span{color:var(--color-dynamic,#3b82f6);font-size:.52rem;font-weight:950;letter-spacing:.18em}.achievements-dialog-head h2{margin:0;color:var(--achievement-text);font-size:1.05rem;font-weight:950}.achievements-dialog-head p{margin:0;color:var(--achievement-muted);font-size:.63rem;font-weight:750}.achievements-dialog-head>button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid var(--achievement-line);border-radius:.72rem;background:var(--achievement-surface-soft);color:var(--achievement-muted);font-size:1.4rem;line-height:1}
.achievements-dialog-tabs{display:flex;gap:.4rem;padding:.7rem 1.25rem;border-bottom:1px solid var(--achievement-line);background:color-mix(in srgb,var(--achievement-surface-soft) 72%,transparent)}.achievements-dialog-tabs button{border:1px solid transparent;border-radius:.65rem;padding:.55rem .8rem;color:var(--achievement-muted);font-size:.58rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.achievements-dialog-tabs button.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 40%,var(--achievement-line));background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);color:var(--color-dynamic,#3b82f6)}
.achievements-scope-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;padding:.72rem 1.25rem;border-bottom:1px solid var(--achievement-line);background:var(--achievement-surface)}.achievements-scope-tabs button{border:1px solid var(--achievement-line);border-radius:.72rem;background:var(--achievement-surface-soft);padding:.68rem;color:var(--achievement-muted);font-size:.62rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.achievements-scope-tabs button.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 52%,var(--achievement-line));background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 14%,var(--achievement-surface-soft));color:var(--color-dynamic,#3b82f6);box-shadow:inset 0 -2px 0 currentColor}
.achievements-dialog-body{overflow:auto;padding:1rem 1.25rem 1.25rem;scrollbar-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 56%,var(--achievement-line)) transparent;scrollbar-width:thin}.achievement-list{display:grid;gap:.62rem}
.achievement-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;border:1px solid var(--achievement-line);border-radius:.9rem;background:var(--achievement-surface-soft);padding:.82rem .88rem;transition:border-color .18s ease,opacity .18s ease}.achievement-row.is-unlocked{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 25%,var(--achievement-line))}.achievement-row.is-locked{opacity:.46;filter:saturate(.18)}.achievement-row-copy{display:grid;min-width:0;gap:.2rem}.achievement-row-copy>span{color:var(--color-dynamic,#3b82f6);font-size:.48rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.achievement-row-copy strong{color:var(--achievement-text);font-size:.76rem;font-weight:950}.achievement-row-copy p{margin:0;color:var(--achievement-muted);font-size:.61rem;font-weight:700}.achievement-row-copy small{color:var(--achievement-muted);font-size:.5rem;font-weight:850}
.achievement-progress{height:.28rem;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--achievement-line) 75%,transparent)}.achievement-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-dynamic,#3b82f6),color-mix(in srgb,var(--color-dynamic,#3b82f6) 65%,#f8b36d));transition:width .35s ease}
.achievement-badge{position:relative;display:grid;width:4.35rem;height:4.35rem;place-items:center;border:1px solid var(--achievement-line);border-radius:1rem;background:var(--achievement-surface);color:var(--achievement-muted);box-shadow:inset 0 0 0 .24rem color-mix(in srgb,currentColor 7%,transparent)}.achievement-badge>span{display:grid;width:2.45rem;height:2.45rem;place-items:center;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent)}.achievement-badge svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.achievement-badge>b{position:absolute;right:.38rem;top:.3rem;font-size:.48rem}.achievement-badge>i{position:absolute;right:.3rem;bottom:.28rem;display:grid;width:.92rem;height:.92rem;place-items:center;border-radius:50%;background:currentColor;color:var(--achievement-surface);font-size:.48rem;font-style:normal;font-weight:950}.achievement-badge>i.is-lock{background:var(--achievement-line);color:var(--achievement-muted)}
.achievement-badge.is-unlocked{color:var(--color-dynamic,#3b82f6);border-color:color-mix(in srgb,currentColor 48%,var(--achievement-line));background:radial-gradient(circle at 35% 20%,color-mix(in srgb,currentColor 22%,transparent),transparent 65%),var(--achievement-surface)}.achievement-badge.tier-silver{color:#8b6fce}.achievement-badge.tier-gold{color:#d58b28}.achievement-badge.tier-legend{color:#e14f6a}.achievement-badge.is-selectable{cursor:pointer}.achievement-badge.is-selectable:hover{transform:translateY(-2px)}.achievement-badge.is-selected{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 12px 26px -18px currentColor,inset 0 0 0 .24rem color-mix(in srgb,currentColor 11%,transparent)}
.achievement-badge.tier-zodiac{color:#9b6fe7;background:radial-gradient(circle at 36% 18%,rgb(155 111 231/.3),transparent 66%),var(--achievement-surface)}.achievement-badge.tier-zodiac>b{font-size:.88rem;line-height:1}
.achievement-badge.tier-verified{color:var(--color-dynamic,#d76f2a);background:radial-gradient(circle at 36% 18%,color-mix(in srgb,var(--color-dynamic,#d76f2a) 30%,transparent),transparent 66%),var(--achievement-surface)}
.achievement-verified-icon{fill:currentColor!important;stroke:none!important}
/* ------------[Космические достижения рейтинга]------------ // Использует четыре символа единого SVG-спрайта и сохраняет платиновую, золотую, серебряную и бронзовую палитры во всех темах. Модуль: «достижения пространств». Часть 1/1 */
:is(.achievement-badge,.achievement-showcase-item,.achievement-task).tier-rank-platinum{color:#78c8f8;background:radial-gradient(circle at 35% 20%,rgb(120 200 248/.32),transparent 68%),var(--achievement-surface)}
:is(.achievement-badge,.achievement-showcase-item,.achievement-task).tier-rank-gold{color:#f3b51b;background:radial-gradient(circle at 35% 20%,rgb(243 181 27/.28),transparent 68%),var(--achievement-surface)}
:is(.achievement-badge,.achievement-showcase-item,.achievement-task).tier-rank-silver{color:#a7b4c8;background:radial-gradient(circle at 35% 20%,rgb(167 180 200/.28),transparent 68%),var(--achievement-surface)}
:is(.achievement-badge,.achievement-showcase-item,.achievement-task).tier-rank-bronze{color:#bd7440;background:radial-gradient(circle at 35% 20%,rgb(189 116 64/.28),transparent 68%),var(--achievement-surface)}
.achievement-rank-icon{overflow:visible!important;fill:currentColor!important;stroke:none!important;filter:drop-shadow(0 .28rem .35rem color-mix(in srgb,currentColor 58%,transparent))}
.achievement-badge[class*="tier-rank-"]>span{width:3.55rem;height:3.55rem;background:transparent}
.achievement-badge[class*="tier-rank-"] .achievement-rank-icon{width:3.45rem;height:3.45rem}
.achievement-badge[class*="tier-rank-"]>b{left:50%;right:auto;top:77%;z-index:2;min-width:.82rem;border-radius:.2rem;background:rgb(2 6 23/.82);padding:.08rem .2rem;transform:translate(-50%,-50%);color:#fff;font-size:.45rem;text-align:center;text-shadow:0 1px 3px rgb(2 6 23/.78)}
.achievement-badge.tier-rank-gold>b{left:27%;top:81%}
.achievement-badge.tier-rank-silver>b{left:73%;top:84%}
.achievement-badge.tier-rank-bronze>b{left:50%;top:83%;min-width:1.25rem}
.achievement-badge[class*="tier-rank-"]>i{top:.24rem;right:.24rem;bottom:auto}
.achievement-showcase-item[class*="tier-rank-"]>span{width:2.55rem;height:2.55rem;background:transparent}
.achievement-showcase-item[class*="tier-rank-"] .achievement-rank-icon{width:2.45rem;height:2.45rem}
.achievement-showcase-item[class*="tier-rank-"]>small{left:50%;right:auto;top:1.75rem;z-index:2;min-width:.72rem;border-radius:.16rem;background:rgb(2 6 23/.8);padding:.03rem .13rem;transform:translate(-50%,-50%);color:#fff;font-size:.36rem;text-shadow:0 1px 3px rgb(2 6 23/.82)}
.achievement-showcase-item.tier-rank-gold>small{left:27%;top:1.82rem}
.achievement-showcase-item.tier-rank-silver>small{left:73%;top:1.87rem}
.achievement-showcase-item.tier-rank-bronze>small{left:50%;top:1.84rem;min-width:.92rem}
.achievement-task[class*="tier-rank-"] .achievement-task-icon{background:transparent;color:inherit}
.achievement-task[class*="tier-rank-"] .achievement-rank-icon{width:2.15rem;height:2.15rem}
.achievement-task-list{display:grid;gap:.62rem}.achievement-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid var(--achievement-line);border-radius:.9rem;background:var(--achievement-surface-soft);padding:.8rem}.achievement-task-icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:.78rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);color:var(--color-dynamic,#3b82f6)}.achievement-task-icon svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.9}.achievement-task>div{display:grid;gap:.22rem}.achievement-task>div>span{color:var(--color-dynamic,#3b82f6);font-size:.47rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.achievement-task strong{color:var(--achievement-text);font-size:.68rem}.achievement-task small{color:var(--achievement-muted);font-size:.5rem;font-weight:850}.achievement-task>b{color:var(--color-dynamic,#3b82f6);font-size:.62rem}.achievement-task.is-completed{opacity:.72}
.achievements-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;padding:.8rem 1.25rem;border-top:1px solid var(--achievement-line);background:var(--achievement-surface)}.achievements-dialog-footer.hidden{display:none!important}.achievements-dialog-footer span{margin-right:auto;color:var(--achievement-muted);font-size:.56rem;font-weight:900}.achievements-dialog-footer button{border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 60%,transparent);border-radius:.72rem;background:var(--color-dynamic,#3b82f6);color:#fff;padding:.65rem .9rem;font-size:.56rem;font-weight:950;text-transform:uppercase}.achievements-dialog-footer button:disabled{cursor:wait;opacity:.55}.achievement-modal-loading{padding:4rem 1rem;color:var(--achievement-muted);font-size:.72rem;font-weight:850;text-align:center}
.achievement-scope-empty{display:grid;min-height:16rem;place-items:center;align-content:center;gap:.45rem;border:1px dashed var(--achievement-line);border-radius:1rem;background:var(--achievement-surface-soft);padding:2rem;color:var(--achievement-muted);text-align:center}.achievement-scope-empty>span{display:grid;width:3rem;height:3rem;place-items:center;border-radius:1rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);color:var(--color-dynamic,#3b82f6)}.achievement-scope-empty svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:1.8}.achievement-scope-empty strong{color:var(--achievement-text);font-size:.78rem}.achievement-scope-empty p{max-width:25rem;margin:0;font-size:.6rem;font-weight:700}.achievement-showcase-dialog{position:relative;display:grid;width:min(100%,52rem);max-height:min(88vh,52rem);grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--achievement-line);border-radius:1.2rem;background:var(--achievement-surface);box-shadow:0 35px 95px -36px rgb(0 0 0/.72)}.achievement-showcase-dialog-body{overflow:auto;padding:1rem 1.25rem 1.25rem;scrollbar-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 56%,var(--achievement-line)) transparent;scrollbar-width:thin}
@media(max-width:640px){.achievements-modal{padding:0}.achievements-dialog,.achievement-showcase-dialog{width:100%;height:100%;max-height:none;border-radius:0}.achievements-dialog-head{padding:1rem}.achievements-scope-tabs,.achievements-dialog-tabs{padding:.65rem 1rem}.achievements-dialog-body,.achievement-showcase-dialog-body{padding:.75rem}.achievement-row{gap:.65rem;padding:.7rem}.achievement-badge{width:3.75rem;height:3.75rem}.achievement-badge>span{width:2.1rem;height:2.1rem}.achievement-row-copy p{font-size:.57rem}.achievements-dialog-footer{padding:.75rem}}

/* ------------[Тематические вкладки и фильтры окна друзей]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 39/203 */
/* Убирает жёсткий белый фон, связывает карточки с палитрой активной темы и оформляет раскрываемый фильтр города, даты рождения и возраста. */
#friends-modal .friends-modal-tabs{gap:.18rem!important;border:1px solid transparent!important;border-radius:.82rem!important;padding:.22rem!important}
/* ------------[Компактная шапка окна друзей]------------ // Уменьшает только вкладки, поиск и фильтр, сохраняя размеры карточек и удобную область нажатия. Модуль: «окно друзей профиля». Часть 1/1 */
#friends-modal .friends-modal-tab{min-height:2.15rem!important;border-color:transparent!important;border-radius:.66rem!important;background:transparent!important;padding:.38rem .9rem!important;font-size:.56rem!important;box-shadow:none!important}
/* ------------[Всплывающее окно фильтров]------------ // Вынимает расширенный поиск из потока и размещает его поверх списка друзей под строкой поиска. Модуль: «модальное окно друзей». Часть 1/1 */
#friends-modal .friends-modal-filter-shell{position:relative;z-index:40;padding-top:.65rem!important;padding-bottom:.7rem!important}
/* ------------[Безопасные отступы строки поиска]------------ // Фиксирует лупу и кнопку фильтра по краям и не позволяет тексту заходить под иконки даже без утилитарных классов. Модуль: «модальное окно друзей». Часть 1/1 */
#friends-modal .friends-modal-search-block{position:relative;display:flex;height:2.8rem;align-items:center}
#friends-modal #modal-friends-search{display:block;box-sizing:border-box!important;width:100%!important;height:2.8rem!important;min-height:2.8rem!important;border-radius:.8rem!important;padding-top:0!important;padding-right:3rem!important;padding-bottom:0!important;padding-left:2.65rem!important;line-height:1.25!important}
/* ------------[Вертикальный центр лупы]------------ // Центрирует иконку по реальной высоте поля, исключая влияние строковой высоты и внутренних отступов input. Модуль: «поиск друзей». Часть 1/1 */
#friends-modal .friends-modal-search-block>svg{position:absolute!important;left:.95rem!important;top:50%!important;width:.9rem!important;height:.9rem!important;margin:0!important;pointer-events:none;translate:none!important;transform:translateY(-50%)!important}
#friends-modal .modal-friends-filter-button{position:absolute;right:.38rem;top:50%;display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.62rem;transform:translateY(-50%);color:var(--adaptive-text-muted,#64748b);transition:background .18s ease,color .18s ease}
#friends-modal .modal-friends-filter-button svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#friends-modal .modal-friends-filter-button:is(:hover,.is-active,.has-filters){color:var(--color-dynamic,#3b82f6)}
#friends-modal .modal-friends-filter-button>span{position:absolute;right:-.18rem;top:-.22rem;display:grid;min-width:1rem;height:1rem;place-items:center;border:2px solid currentColor;border-radius:99px;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.44rem;font-weight:950}
#friends-modal .modal-friends-filter-button>span[hidden]{display:none}
.modal-friends-filter-panel{position:absolute;z-index:80;top:calc(100% - .3rem);right:0;display:grid;width:min(100%,28rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.62rem;margin:0;border:1px solid;border-radius:.9rem;padding:.72rem;box-shadow:0 1.35rem 3.2rem -1.4rem rgb(15 23 42/.48),0 .45rem 1.15rem -.65rem rgb(15 23 42/.28);transform-origin:top right;animation:modal-friends-filter-in .16s ease-out}
.modal-friends-filter-panel[hidden]{display:none}
@keyframes modal-friends-filter-in{from{opacity:0;transform:translateY(-.35rem) scale(.985)}to{opacity:1;transform:none}}
.modal-friends-filter-panel>label{display:grid;min-width:0;gap:.28rem}
.modal-friends-filter-panel>label>span:first-child{font-size:.52rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.modal-friends-filter-panel input{width:100%;min-width:0;height:2.2rem;border:1px solid;border-radius:.62rem;padding:0 .65rem;outline:0;font-size:.62rem;font-weight:760}
.modal-friends-age-filter{grid-column:1/-1}
.modal-friends-age-filter>span:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.38rem}
.modal-friends-age-filter i{font-style:normal;text-align:center}
.modal-friends-filter-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.42rem}
.modal-friends-filter-actions button{height:2.1rem;border-radius:.62rem;padding:0 .75rem;font-size:.52rem;font-weight:950;text-transform:uppercase}
.modal-friends-filter-actions button:last-child{background:var(--color-dynamic,#3b82f6)!important;color:#fff!important}
html.adaptive-theme #friends-modal .friends-modal-tabs{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important}
html.adaptive-theme #friends-modal .friends-modal-tab{color:var(--adaptive-text-secondary)!important}
html.adaptive-theme #friends-modal .friends-modal-tab.is-active{border-color:var(--adaptive-ui-line-strong)!important;background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
/* ------------[Подсветка вкладок друзей]------------ // Даёт обеим вкладкам явный отклик наведения без белого фона и без смешивания стандартной и адаптивной палитр. Модуль: «окно и вкладка друзей». Часть 1/1 */
html.adaptive-theme #friends-modal .friends-modal-tab:hover,html.adaptive-theme #friends-sub-tabs .sub-tab-btn:hover{border-color:var(--adaptive-ui-line-strong)!important;background:color-mix(in srgb,var(--adaptive-ui-panel) 76%,var(--color-dynamic) 24%)!important;color:var(--adaptive-text-active)!important;box-shadow:0 .45rem 1rem -.75rem color-mix(in srgb,var(--color-dynamic) 48%,transparent)!important}
html.adaptive-theme #friends-modal .modal-friends-filter-button:is(:hover,.is-active,.has-filters),html.adaptive-theme #friends-modal .modal-friend-action{background:var(--adaptive-ui-panel)!important}
html.adaptive-theme #friends-modal :is(.modal-friends-filter-panel,.modal-friend-card){border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-active)!important;color:var(--adaptive-text-active)!important}
html.adaptive-theme #friends-modal .modal-friends-filter-panel{box-shadow:0 1.4rem 3.4rem -1.35rem color-mix(in srgb,var(--adaptive-background) 68%,transparent),0 .45rem 1.15rem -.65rem rgb(15 23 42/.3)!important}
html.adaptive-theme #friends-modal .modal-friends-filter-panel input{border-color:var(--adaptive-ui-line)!important;background:var(--adaptive-ui-panel)!important;color:var(--adaptive-text-active)!important}
html:not(.adaptive-theme) #friends-modal>div,html:not(.adaptive-theme) #friends-modal>div>.p-8,html:not(.adaptive-theme) #modal-friends-list,html:not(.adaptive-theme) #friends-modal>div>.h-6{border-color:var(--standard-line)!important;background:var(--standard-panel)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) #friends-modal .friends-modal-tabs{border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important}
html:not(.adaptive-theme) #friends-modal .friends-modal-tab{color:var(--standard-text-secondary)!important}
html:not(.adaptive-theme) #friends-modal .friends-modal-tab.is-active{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 48%,var(--standard-line))!important;background:var(--standard-panel)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) #friends-modal .friends-modal-tab:hover,html:not(.adaptive-theme) #friends-sub-tabs .sub-tab-btn:hover{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 52%,var(--standard-line))!important;background:color-mix(in srgb,var(--standard-panel) 76%,var(--color-dynamic,#3b82f6) 24%)!important;color:var(--standard-text-active)!important;box-shadow:0 .45rem 1rem -.75rem color-mix(in srgb,var(--color-dynamic,#3b82f6) 48%,transparent)!important}
html:not(.adaptive-theme) #friends-modal :is(#modal-friends-search,.modal-friends-filter-panel,.modal-friend-card){border-color:var(--standard-line)!important;background:var(--standard-panel-soft)!important;color:var(--standard-text-active)!important}
html:not(.adaptive-theme) #friends-modal .modal-friends-filter-panel{box-shadow:var(--standard-shadow-hover),0 1.4rem 3rem -1.5rem rgb(15 23 42/.32)!important}
html:not(.adaptive-theme) #friends-modal .modal-friends-filter-panel input,html:not(.adaptive-theme) #friends-modal .modal-friend-action{border-color:var(--standard-line)!important;background:var(--standard-panel)!important;color:var(--color-dynamic,#3b82f6)!important}

/* ------------[Город и дата в карточке друга]------------ // Отделяет дополнительные сведения от логина и наследует приглушённый цвет текущей темы. Модуль: «модальное окно друзей». Часть 1/1 */
#friends-modal .modal-friend-details{max-width:20rem;margin:.22rem 0 0;overflow:hidden;color:var(--adaptive-text-muted,#64748b);font-size:.58rem;font-weight:760;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
html.adaptive-theme #friends-modal .modal-friend-details{color:var(--adaptive-text-secondary)!important}
html:not(.adaptive-theme) #friends-modal .modal-friend-details{color:var(--standard-text-secondary)!important}

/* ------------[Контраст текста на обложке профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 40/203 */
/* Имя и статус остаются контрастными, а «О себе / О пространстве» и местоположение выводятся цветным текстом без фоновых плашек. */
#cover-section #user-name-title,#cover-section #main-profile-status{color:#fff!important;text-shadow:0 1px 2px rgb(0 0 0/.95),0 2px 9px rgb(0 0 0/.78)}
#cover-section #user-name-title{-webkit-text-stroke:.25px rgb(0 0 0/.38)}
/* ------------[Цветные метаданные без кнопочного фона]------------ // Одна строка обслуживает профиль и пространство; цвет наследует выбранный акцент, а тень сохраняет читаемость на любой фотографии. Модуль: «обложка профиля и пространства». Часть 1/1 */
#cover-section .profile-cover-meta-link{border:0!important;border-radius:0!important;background:transparent!important;color:color-mix(in srgb,var(--color-dynamic,#f28a4b) 74%,#fff 26%)!important;padding:.42rem .28rem!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:0 1px 2px rgb(0 0 0/.96),0 2px 8px rgb(0 0 0/.82)}
#cover-section .profile-cover-meta-link:hover{border:0!important;background:transparent!important;color:color-mix(in srgb,var(--color-dynamic,#f28a4b) 54%,#fff 46%)!important;text-shadow:0 1px 2px rgb(0 0 0/.98),0 0 .65rem color-mix(in srgb,var(--color-dynamic,#f28a4b) 72%,transparent)}
#cover-section #user-online-status>div{border-color:rgb(255 255 255/.28)!important;background:rgb(2 6 23/.58)!important;color:#fff!important}

@media(max-width:520px){.modal-friends-filter-panel{grid-template-columns:1fr}.modal-friends-age-filter,.modal-friends-filter-actions{grid-column:auto}}

/* ------------[Фирменная SVG системы сигналов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 41/203 */
.signal-menu-icon{width:1.25rem;height:1.25rem;object-fit:contain;filter:drop-shadow(0 .12rem .18rem rgb(59 130 246/.28))}
.signal-probe{width:5.8rem;height:5.8rem}
.signal-probe-hull{inset:0;border-radius:1.45rem;overflow:hidden}
.signal-probe-hull img{display:block;width:100%;height:100%;object-fit:contain}
.signal-probe-emblem{width:5.4rem;height:5.4rem;border-radius:1.25rem;overflow:hidden}
.signal-probe-emblem img{display:block;width:100%;height:100%;object-fit:contain}
.signal-notif-icon img{width:1.85rem;height:1.85rem;object-fit:contain}
.achievement-signal-icon{display:block!important;width:100%!important;height:100%!important;object-fit:contain;filter:drop-shadow(0 .14rem .22rem rgb(59 130 246/.28))}
.achievement-showcase-item.tier-signal{overflow:hidden}
.achievement-showcase-item.tier-signal>span{align-self:center;width:1.85rem;height:1.85rem;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,transparent)}
.achievement-showcase-item.tier-signal>span>.achievement-signal-icon{display:block!important;width:1.48rem!important;height:1.48rem!important;max-width:1.48rem!important;max-height:1.48rem!important;margin:0!important;object-fit:contain!important;transform:none!important}
.achievement-badge.tier-signal>span{width:3.65rem;height:2.3rem;border-radius:.7rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,transparent)}
.achievement-task-icon .achievement-signal-icon{width:2.3rem!important;height:1.45rem!important}

/* ------------[Единый интерфейс языка]------------ */
.auth-language-control{position:absolute;right:0;top:calc(100% + .55rem);display:flex;align-items:center;gap:.38rem;min-height:2.35rem;border:1px solid rgb(226 232 240);border-radius:.8rem;padding:.45rem .7rem;background:#fff;color:#2563eb;box-shadow:0 .7rem 1.6rem -.9rem rgb(15 23 42/.35);font-size:.68rem;font-weight:900;cursor:pointer}
.auth-language-control.auth-language-standalone{position:fixed;z-index:10001;top:1.5rem;right:1.5rem}
.site-language-value{display:inline-flex;align-items:center;gap:.35rem;border-radius:.65rem;padding:.3rem .5rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,transparent);color:var(--color-dynamic,#3b82f6)}.site-language-value i{font-size:.85rem;font-style:normal;line-height:1}.site-language-value b{font-size:.55rem;font-weight:950;letter-spacing:.08em}
.dark .auth-language-control{border-color:rgb(51 65 85);background:rgb(15 23 42);color:#60a5fa}
.vmesta-language-modal{position:fixed;inset:0;z-index:50000;display:grid;place-items:center;padding:1rem}.vmesta-language-modal.hidden{display:none}.vmesta-language-backdrop{position:absolute;inset:0;border:0;background:rgb(2 6 23/.64)}
.vmesta-language-modal>section{position:relative;width:min(100%,25rem);overflow:hidden;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:1.25rem;padding:1rem;background:var(--adaptive-surface,#fff);box-shadow:0 2.2rem 6rem rgb(2 6 23/.4)}
.vmesta-language-modal header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;margin-bottom:.8rem}.vmesta-language-globe{display:grid;width:2.65rem;height:2.65rem;place-items:center;border-radius:.85rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);color:var(--color-dynamic,#3b82f6);font-size:1.25rem}.vmesta-language-modal h2{margin:0;color:var(--adaptive-text-strong,rgb(15 23 42));font-size:.95rem;font-weight:950}.vmesta-language-modal p{margin:.12rem 0 0;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.56rem}.vmesta-language-modal header>button{display:grid;width:2.3rem;height:2.3rem;place-items:center;border:0;border-radius:.72rem;background:var(--adaptive-surface-2,rgb(241 245 249));color:var(--adaptive-text-muted,rgb(100 116 139));font-size:1.2rem}
.vmesta-language-options{display:grid;gap:.45rem}.vmesta-language-options button{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.65rem;min-height:3.25rem;border:1px solid var(--adaptive-border,rgb(226 232 240));border-radius:.85rem;padding:.55rem .7rem;background:var(--adaptive-surface-2,rgb(248 250 252));color:var(--adaptive-text-strong,rgb(15 23 42));text-align:left}.vmesta-language-options button>span{font-size:1.25rem}.vmesta-language-options strong{font-size:.7rem}.vmesta-language-options small{color:var(--adaptive-text-muted,rgb(100 116 139));font-size:.52rem;font-weight:800}.vmesta-language-options i{display:grid;width:1.45rem;height:1.45rem;place-items:center;border-radius:50%;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.6rem;font-style:normal;opacity:0}.vmesta-language-options button.is-active{border-color:var(--color-dynamic,#3b82f6);background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,var(--adaptive-surface,#fff))}.vmesta-language-options button.is-active i{opacity:1}
html.dark:not(.adaptive-theme) .vmesta-language-modal{--adaptive-surface:rgb(15 23 42);--adaptive-surface-2:rgb(30 41 59);--adaptive-border:rgb(51 65 85);--adaptive-text-strong:rgb(241 245 249);--adaptive-text-muted:rgb(148 163 184)}
.vmesta-language-globe svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.language-modal-open{overflow:hidden}
@media(max-width:640px){.auth-language-control.auth-language-standalone{top:.75rem;right:.75rem}.vmesta-language-modal>section{border-radius:1rem}.vmesta-language-options button{min-height:3rem}}

/* ------------[Планета сигналов]------------ */
.signal-probe{width:7.2rem;height:7.2rem;filter:drop-shadow(0 .9rem 1.1rem rgb(15 23 42/.26))}.signal-probe-hull{inset:0;overflow:visible;border:0;border-radius:50%;background:transparent;box-shadow:none;transition:transform .18s ease}.signal-probe-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 .48rem rgb(34 211 238/.35));animation:signal-art-float 4.8s ease-in-out infinite}.signal-probe-arrival{position:absolute;right:-1.8rem;top:50%;width:2.6rem;height:.12rem;border-radius:999px;background:linear-gradient(90deg,transparent,#62e5c3);opacity:0;transform:translateX(1.4rem)}.signal-probe.is-arrived .signal-probe-arrival{animation:signal-arrival-streak .7s .2s ease-out}.signal-probe.is-gift .signal-probe-arrival:after{content:"◆";position:absolute;right:0;top:50%;color:#ff6f91;font-size:.9rem;transform:translate(0,-50%) rotate(45deg)}.signal-probe.is-impacting .signal-probe-art{animation:signal-gift-impact .55s .48s ease-out,signal-art-float 4.8s 1.1s ease-in-out infinite}.signal-probe-wave{inset:.72rem;border-radius:50%}.signal-probe-emblem{width:8rem;height:8rem;border:0;border-radius:50%;background:transparent;box-shadow:none}.signal-probe-emblem img{width:100%;height:100%;object-fit:contain}.signal-welcome-scene>img{object-fit:contain}
@keyframes signal-art-float{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-.22rem,0) rotate(1deg)}}@keyframes signal-arrival-streak{0%{opacity:0;transform:translateX(2.2rem)}35%{opacity:1}100%{opacity:0;transform:translateX(-2.8rem)}}@keyframes signal-gift-impact{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.signal-probe-art,.signal-probe.is-arrived .signal-probe-arrival,.signal-probe.is-impacting .signal-probe-art{animation:none}.signal-probe-arrival{display:none}}

/* ------------[Живая SVG-сцена сигналов]------------ */
.signal-probe{width:7.6rem;height:7.6rem}.signal-probe-wave{display:none}.signal-scene-host{display:grid;width:100%;height:100%;place-items:center}.signal-system-scene{display:block;width:100%!important;height:100%!important;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 .55rem .8rem rgb(15 23 42/.2))}
.signal-scene-rings{transform-box:view-box;transform-origin:88px 91px;animation:signal-rings-idle 34s linear infinite}.signal-scene-rings ellipse{fill:none;stroke:#62eaf0;stroke-linecap:round}.signal-scene-rings ellipse:first-child{stroke-width:2.5;opacity:.84}.signal-scene-rings ellipse:last-child{stroke-width:1.25;stroke-dasharray:4 7;opacity:.4}
.signal-scene-planet circle{fill:url(#vm-signal-ocean);stroke:#c9fff7;stroke-width:2.6}.signal-scene-planet path{fill:none;stroke:#ddfff8;stroke-width:5;stroke-linecap:round;opacity:.58}
.signal-scene-satellite{transform-box:view-box;transform-origin:47px 34px}.signal-scene-satellite>*{stroke:#f7fbff;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.signal-scene-panel{fill:url(#vm-signal-gold);stroke:#fff4d3}.signal-scene-panel-grid{fill:none;stroke:#ffe8a8;stroke-width:.8;opacity:.75}.signal-scene-panel-arm,.signal-scene-mast,.signal-scene-antenna{fill:none}.signal-scene-body{fill:#e99135;stroke:#fff}.signal-scene-body-core{fill:#253b5e;stroke:#9af5ff}.signal-scene-dish{fill:#d7f5ff;stroke:#fff}.signal-scene-antenna-tip{fill:#ffe277;stroke:#fff}
.signal-scene-waves{opacity:.35}.signal-scene-waves path{fill:none;stroke:#67eaff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:22;stroke-dashoffset:0}.signal-scene-star,.signal-scene-meteor,.signal-scene-burn{opacity:0}.signal-scene-star path{fill:#fff1a3;stroke:#fff;stroke-width:1.4}.signal-scene-star circle{fill:none;stroke:#70f5ff;stroke-width:2;opacity:.45}.signal-scene-meteor circle{fill:url(#vm-meteor);stroke:#ffd9a2;stroke-width:1.8}.signal-scene-meteor>path:last-child{fill:none;stroke:#6f3340;stroke-width:1.4;stroke-linecap:round}.signal-scene-meteor-tail{fill:none;stroke:#ff9655;stroke-width:3;stroke-linecap:round}.signal-scene-burn path{fill:#ff8d48;stroke:#ffe09e;stroke-width:1.4}.signal-scene-burn circle{fill:#7d8795}
.signal-scene-host.is-idle .signal-scene-waves{animation:signal-waves-idle 3.4s ease-in-out infinite}
.signal-scene-host.is-signal .signal-scene-star{animation:signal-star-flight 5.8s cubic-bezier(.22,.7,.24,1) both}.signal-scene-host.is-signal .signal-scene-satellite{animation:signal-satellite-track 5.8s ease-in-out both}.signal-scene-host.is-signal .signal-scene-waves{animation:signal-wave-contact 5.8s ease-in-out both}.signal-scene-host.is-signal .signal-scene-waves path{animation:signal-wave-dash 1.15s linear 4}
.signal-scene-host.is-gift .signal-scene-rings{animation:signal-rings-gift 14s linear infinite}.signal-scene-host.is-gift .signal-scene-waves,.signal-scene-host.is-gift .signal-scene-star{opacity:0}.signal-scene-host.is-gift .signal-scene-meteor{opacity:1;animation:signal-meteor-orbit 12s linear infinite}.signal-scene-host.is-gift.is-read .signal-scene-rings{animation-play-state:paused;opacity:.72}
.signal-scene-host.is-gift-accepted .signal-scene-rings,.signal-scene-host.is-gift-declined .signal-scene-rings{animation-play-state:paused}.signal-scene-host.is-gift-accepted .signal-scene-meteor{animation:signal-meteor-accepted .85s ease-out forwards!important}.signal-scene-host.is-gift-declined .signal-scene-meteor{animation:signal-meteor-declined 1s ease-in forwards!important}.signal-scene-host.is-gift-declined .signal-scene-burn{animation:signal-atmosphere-burn 1.15s .08s ease-out both}
.signal-probe-emblem.signal-scene-host{width:8.4rem;height:8.4rem;overflow:visible}.signal-welcome-scene .signal-scene-host{position:relative;z-index:2;width:9.5rem;height:9.5rem}.signal-menu-icon{object-fit:contain}
@keyframes signal-rings-idle{to{transform:rotate(360deg)}}
@keyframes signal-rings-gift{to{transform:rotate(-360deg)}}
@keyframes signal-waves-idle{0%,100%{opacity:.28}50%{opacity:.62}}
@keyframes signal-wave-dash{to{stroke-dashoffset:-44}}
@keyframes signal-star-flight{0%{opacity:0;transform:translate(170px,18px) scale(.65) rotate(0)}12%{opacity:1}45%{opacity:1;transform:translate(92px,36px) scale(1) rotate(120deg)}72%{opacity:.9;transform:translate(52px,54px) scale(.85) rotate(230deg)}100%{opacity:0;transform:translate(-24px,78px) scale(.35) rotate(360deg)}}
@keyframes signal-satellite-track{0%,100%{transform:rotate(0)}25%{transform:rotate(8deg)}55%{transform:rotate(17deg)}78%{transform:rotate(-5deg)}}
@keyframes signal-wave-contact{0%,8%,100%{opacity:0}24%,66%{opacity:1}82%{opacity:.18}}
@keyframes signal-meteor-orbit{0%{opacity:0;transform:translate(170px,-12px) scale(.6) rotate(0)}9%{opacity:1;transform:translate(142px,36px) scale(.85) rotate(45deg)}20%{transform:translate(118px,62px) scale(1) rotate(95deg)}34%{transform:translate(78px,43px) scale(.9) rotate(155deg)}50%{transform:translate(34px,78px) scale(.78) rotate(225deg)}66%{transform:translate(63px,127px) scale(.92) rotate(285deg)}82%{transform:translate(126px,119px) scale(1) rotate(335deg)}100%{opacity:1;transform:translate(118px,62px) scale(1) rotate(455deg)}}
@keyframes signal-meteor-accepted{0%{opacity:1;transform:translate(118px,62px) scale(1)}45%{opacity:1;transform:translate(132px,48px) scale(1.15)}100%{opacity:0;transform:translate(170px,18px) scale(.3)}}
@keyframes signal-meteor-declined{0%{opacity:1;transform:translate(118px,62px) scale(1) rotate(0)}62%{opacity:1;transform:translate(91px,72px) scale(.78) rotate(190deg)}100%{opacity:0;transform:translate(87px,87px) scale(.12) rotate(430deg)}}
@keyframes signal-atmosphere-burn{0%{opacity:0;transform:translateY(-6px) scale(.4)}35%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(22px) scale(.25)}}
@media(prefers-reduced-motion:reduce){.signal-scene-rings,.signal-scene-host :is(.signal-scene-star,.signal-scene-satellite,.signal-scene-waves,.signal-scene-meteor,.signal-scene-burn){animation:none!important}.signal-scene-host.is-gift .signal-scene-meteor{opacity:1;transform:translate(118px,62px)}.signal-scene-host.is-signal .signal-scene-star{opacity:1;transform:translate(104px,40px)}}

/* ------------[Три независимые орбиты]------------ */
.signal-orbit-lines path{fill:none;stroke-linecap:round}.signal-orbit-line.is-gift{stroke:#ff9bb0;stroke-width:1.55;opacity:.52}.signal-orbit-line.is-satellite{stroke:#5ce7ef;stroke-width:1.45;stroke-dasharray:3 5;opacity:.58}.signal-orbit-line.is-studied{stroke:#8aa9ff;stroke-width:1.2;stroke-dasharray:1 6;opacity:.42}
.signal-scene-planet{transform-box:view-box;transform-origin:85px 88px}.signal-scene-host.is-scene-running .signal-scene-planet{animation:signal-planet-slow-turn 48s linear infinite}.signal-scene-planet>circle{fill:url(#vm-signal-ocean);stroke:#c9fff7;stroke-width:2.4}.signal-scene-planet>path{stroke-width:4.2}.signal-planet-data{opacity:0;transform-box:fill-box;transform-origin:center}.signal-planet-data circle{fill:#744ee8;stroke:#dcd8ff;stroke-width:1.3}.signal-planet-data path{fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round}
.signal-gift-orbiter,.signal-studied-orbiter,.signal-incoming-star,.signal-data-transfer{opacity:0;transition:opacity .35s ease}.signal-satellite-orbiter{opacity:1}.signal-gift-icon path{fill:#ff718d;stroke:#fff1f5;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.signal-studied-icon circle{fill:#7669ed;stroke:#d9d6ff;stroke-width:1.5}.signal-studied-icon path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.signal-incoming-star path{fill:#fff1a3;stroke:#fff;stroke-width:1.25}.signal-incoming-star circle{fill:none;stroke:#6df5ff;stroke-width:1.8;opacity:.45}.signal-data-transfer circle{fill:#73f4dc;stroke:#fff;stroke-width:1.2}
.signal-studied-meteor .signal-studied-tail{fill:none;stroke:#8af8e1;stroke-width:2.5;stroke-linecap:round}.signal-studied-meteor .signal-studied-core{fill:#7669ed;stroke:#e4e0ff;stroke-width:1.4}.signal-studied-meteor circle{fill:#aa9cff;stroke:#fff;stroke-width:.7}
.signal-scene-satellite{transform-box:fill-box;transform-origin:center;transform:scale(.88)}.signal-scene-host .signal-satellite-orbiter .signal-scene-satellite{animation:none}.signal-scene-dish-assembly{transform-box:fill-box;transform-origin:28% 70%}.signal-scene-waves{opacity:0}.signal-satellite-data{opacity:0;transform-box:fill-box;transform-origin:center}.signal-satellite-data circle{fill:#8af8e1;stroke:#fff;stroke-width:.75}
.signal-scene-host.is-scene-running.is-gift .signal-gift-orbiter{opacity:1}.signal-scene-host.is-scene-running.is-signal:not(.is-read) .signal-incoming-star{animation:signal-incoming-cycle 7.5s ease-in-out infinite}.signal-scene-host.is-scene-running.is-signal:not(.is-read) .signal-scene-dish-assembly{animation:signal-dish-follow 7.5s ease-in-out infinite}.signal-scene-host.is-scene-running.is-signal:not(.is-read) .signal-scene-waves{animation:signal-radio-contact 7.5s ease-in-out infinite}.signal-scene-host.is-scene-running.is-signal:not(.is-read) .signal-scene-waves path{animation:signal-wave-dash 1.1s linear infinite}
.signal-scene-host.is-signal.is-read .signal-scene-waves{opacity:0;animation:none}.signal-scene-host.is-scene-running.is-signal.is-read .signal-studied-orbiter{opacity:1}.signal-scene-host.is-scene-running.is-signal.is-read .signal-satellite-data{opacity:1;animation:signal-data-around-satellite 4.5s linear infinite}.signal-scene-host.is-scene-running.is-signal.is-read .signal-data-transfer{opacity:1;animation:signal-data-pulse 3.2s ease-in-out infinite}.signal-scene-host.is-scene-running.is-signal.is-read .signal-planet-data{animation:signal-planet-data-arrival 3.2s 1.7s ease-out both}
.signal-scene-host.is-scene-paused :is(.signal-scene-planet,.signal-gift-orbiter,.signal-satellite-orbiter,.signal-studied-orbiter,.signal-incoming-star,.signal-data-transfer,.signal-scene-dish-assembly,.signal-scene-waves,.signal-scene-waves path,.signal-satellite-data,.signal-planet-data){animation-play-state:paused!important}
.signal-scene-host.is-gift-accepted .signal-gift-icon{animation:signal-gift-accepted .8s ease-out forwards}.signal-scene-host.is-gift-declined .signal-gift-icon{animation:signal-gift-declined .9s ease-in forwards}.signal-scene-host.is-gift-declined .signal-scene-burn{animation:signal-atmosphere-burn 1.15s .08s ease-out both}
@keyframes signal-planet-slow-turn{to{transform:rotate(360deg)}}
@keyframes signal-incoming-cycle{0%,100%{opacity:0}10%,72%{opacity:1}88%{opacity:.12}}
@keyframes signal-dish-follow{0%,12%{transform:rotate(0)}32%{transform:rotate(-12deg)}54%{transform:rotate(-38deg)}74%{transform:rotate(-68deg)}92%,100%{transform:rotate(-88deg)}}
@keyframes signal-radio-contact{0%,100%{opacity:.22;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
@keyframes signal-data-around-satellite{to{transform:rotate(360deg)}}
@keyframes signal-data-pulse{0%,100%{opacity:0}18%,68%{opacity:1}82%{opacity:.2}}
@keyframes signal-planet-data-arrival{0%{opacity:0;transform:scale(.35)}45%{opacity:1;transform:scale(1.35)}100%{opacity:.9;transform:scale(1)}}
@keyframes signal-gift-accepted{0%{opacity:1}55%{opacity:1;filter:drop-shadow(0 0 .5rem #fff)}100%{opacity:0;transform:scale(.25)}}
@keyframes signal-gift-declined{0%{opacity:1}55%{opacity:1;transform:translate(0,0) scale(.9)}100%{opacity:0;transform:translate(26px,22px) scale(.12)}}
@media(prefers-reduced-motion:reduce){.signal-scene-planet,.signal-scene-host :is(.signal-scene-dish-assembly,.signal-scene-waves,.signal-satellite-data,.signal-data-transfer,.signal-gift-icon){animation:none!important}.signal-scene-host.is-signal:not(.is-read) .signal-incoming-star{opacity:1;animation:none}.signal-scene-host.is-signal.is-read .signal-studied-orbiter{opacity:1}}

/* ------------[Системное уведомление о достижении]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 42/203 */
.achievement-notif-item{display:flex;gap:.65rem;margin-bottom:.45rem;border:1px solid color-mix(in srgb,#8b5cf6 38%,var(--adaptive-border,rgb(226 232 240)));border-radius:.8rem;padding:.65rem;background:color-mix(in srgb,#8b5cf6 9%,var(--adaptive-surface-2,rgb(248 250 252)));cursor:pointer}
.achievement-notif-icon{display:grid;flex:0 0 auto;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border-radius:.72rem;background:var(--adaptive-surface,rgb(255 255 255));color:#8b5cf6;font-size:1.2rem}
.achievement-notif-icon img{width:2rem;height:2rem;object-fit:contain}.achievement-notif-icon span{filter:drop-shadow(0 .2rem .3rem rgb(139 92 246/.28))}
.achievement-notif-copy{min-width:0;flex:1}.achievement-notif-copy strong{color:#8b5cf6;font-size:.55rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.achievement-notif-copy p{margin:.12rem 0;color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.62rem;line-height:1.4}.achievement-notif-copy button{border:0;background:none;color:var(--color-dynamic,#3b82f6);font-size:.5rem;font-weight:950;text-transform:uppercase}.achievement-notif-dismiss{align-self:flex-start;border:0;background:none;color:var(--adaptive-text-muted,rgb(100 116 139));font-size:1rem}
.achievement-row.is-newly-unlocked{animation:achievement-new-pulse 1.15s ease-in-out 3;border-color:#8b5cf6!important;box-shadow:0 0 0 .2rem rgb(139 92 246/.13),0 1rem 2.5rem -1.5rem rgb(139 92 246/.62)}
@keyframes achievement-new-pulse{50%{transform:translateY(-2px);box-shadow:0 0 0 .38rem rgb(139 92 246/.09),0 1.2rem 2.6rem -1.35rem rgb(139 92 246/.72)}}

/* ------------[Сворачиваемый журнал и заметный индикатор сигналов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 43/203 */
#tab-friend-signals{position:relative}
#tab-friend-signals.has-signals .signal-menu-icon{filter:drop-shadow(0 0 .42rem rgb(139 92 246/.58))}
.signal-count-badge{flex:0 0 auto;background:#8b5cf6!important;box-shadow:0 0 0 .16rem rgb(139 92 246/.13),0 0 .72rem rgb(139 92 246/.38)}
.signal-count-badge.is-unread{animation:signal-sidebar-beacon 1.5s ease-in-out infinite;background:#a855f7!important}
@keyframes signal-sidebar-beacon{50%{transform:scale(1.12);box-shadow:0 0 0 .32rem rgb(168 85 247/.13),0 0 1rem rgb(168 85 247/.68)}}
.signal-sidebar-chevron{display:grid;flex:0 0 auto;width:1.35rem;height:1.35rem;place-items:center;border-radius:.4rem;color:#8b5cf6;transition:transform .22s ease,background .18s ease}
.signal-sidebar-chevron svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#tab-friend-signals:hover .signal-sidebar-chevron{background:rgb(139 92 246/.1)}
#tab-friend-signals[aria-expanded="true"] .signal-sidebar-chevron{transform:rotate(180deg)}
.signal-sidebar-subnav{max-height:0;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden;border-left-color:transparent!important;opacity:0;pointer-events:none;transform:translateY(-.3rem);transition:max-height .25s ease,opacity .18s ease,transform .22s ease,margin .22s ease,padding .22s ease}
.signal-sidebar-subnav.is-open{max-height:10rem;margin-top:.15rem!important;margin-bottom:.35rem!important;padding-top:.35rem!important;padding-bottom:.15rem!important;border-left-color:color-mix(in srgb,#8b5cf6 38%,var(--adaptive-border,rgb(226 232 240)))!important;opacity:1;pointer-events:auto;transform:translateY(0)}
.signal-sidebar-label{display:flex;min-width:0;align-items:center;gap:.45rem}
.signal-sidebar-label i,.signals-scope-tabs i{display:grid;flex:0 0 auto;width:1.15rem;height:1.15rem;place-items:center;color:#8b5cf6}
.signal-sidebar-label svg,.signals-scope-tabs i svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.signal-sidebar-subnav button.is-active{background:color-mix(in srgb,#8b5cf6 13%,transparent);color:#7c3aed}
.signal-sidebar-subnav button.is-active b{background:#8b5cf6}
.signals-scope-tabs button i{width:1.3rem;height:1.3rem}
.signals-scope-tabs button i svg{width:1.1rem;height:1.1rem}
.signals-scope-tabs button.is-active i{color:#8b5cf6}
.signal-action{display:inline-flex;align-items:center;justify-content:center;gap:.38rem;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.signal-action:hover{transform:translateY(-1px)}
.signal-action svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.signal-action.archive{border-color:rgb(139 92 246/.45);background:color-mix(in srgb,#8b5cf6 10%,var(--adaptive-surface,rgb(255 255 255)));color:#7c3aed}
.signal-action.archive:hover{background:#8b5cf6;color:#fff;box-shadow:0 .45rem 1rem -.65rem rgb(139 92 246/.85)}
.signal-action.primary.archive-restore{border-color:#8b5cf6;background:#8b5cf6;color:#fff;box-shadow:0 .55rem 1.2rem -.8rem rgb(139 92 246/.9)}
.signal-card.is-archived:before{background:#8b5cf6;opacity:.9}
.signal-card.is-archived .signal-card-avatar{border-color:rgb(139 92 246/.48);color:#8b5cf6}
.signal-confirmation{display:grid;gap:.2rem;border:1px solid color-mix(in srgb,#8b5cf6 38%,var(--adaptive-border,rgb(226 232 240)));border-radius:.8rem;padding:.65rem .75rem;background:color-mix(in srgb,#8b5cf6 9%,var(--adaptive-surface,rgb(255 255 255)));color:var(--adaptive-text-muted,rgb(100 116 139))}
.signal-confirmation strong{color:#7c3aed;font-size:.61rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.signal-confirmation span{color:var(--adaptive-text-strong,rgb(30 41 59));font-size:.59rem;font-weight:750}
.signal-confirmation small{font-size:.52rem;line-height:1.45}
.signal-action.share-discovery{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#7c3aed;box-shadow:0 .5rem 1.1rem -.75rem rgb(124 58 237/.9)}
@media(prefers-reduced-motion:reduce){.signal-count-badge.is-unread{animation:none}.signal-sidebar-subnav{transition:none}}

/* ------------[Палитра журнала сигналов]------------ // Фиолетовый остаётся признаком только непрочитанного эфира; изученные жители и архив наследуют активную тему. Модуль: «оформление интерфейса». Часть 44/203 */
html.adaptive-theme .signals-journal{
  --signal-panel:var(--adaptive-ui-panel,var(--adaptive-surface));
  --signal-panel-soft:var(--adaptive-ui-active,var(--adaptive-surface-2));
  --signal-line:var(--adaptive-ui-line,var(--adaptive-border));
  --signal-text:var(--adaptive-text-active,var(--adaptive-text-strong));
  --signal-muted:var(--adaptive-text-secondary,var(--adaptive-text-muted));
}
html:not(.adaptive-theme) .signals-journal{
  --signal-panel:var(--standard-panel,var(--adaptive-surface));
  --signal-panel-soft:var(--standard-panel-soft,var(--adaptive-surface-2));
  --signal-line:var(--standard-line,var(--adaptive-border));
  --signal-text:var(--standard-text-active,var(--adaptive-text-strong));
  --signal-muted:var(--standard-text-secondary,var(--adaptive-text-muted));
}
.signals-journal{
  border-color:var(--signal-line)!important;
  background:var(--signal-panel)!important;
  color:var(--signal-text)!important;
}
.signals-journal :is(.signals-journal-head,.signals-scope-tabs,.signal-card){border-color:var(--signal-line);background:var(--signal-panel-soft)}
.signals-journal :is(.signals-journal-head>b,.signals-scope-tabs button.is-active,.signal-facts span,.signal-facts em,.signal-action){background:var(--signal-panel)}
.signals-journal :is(.signals-journal-head h2,.signal-card-identity h3,.signal-facts b,.signals-empty strong){color:var(--signal-text)}
.signals-journal :is(.signals-journal-head p,.signal-card-identity p,.signal-facts span,.signal-facts em,.signal-route summary,.signal-timeline strong,.signal-timeline small){color:var(--signal-muted)}

/* Эфир — единственный фиолетовый пункт. */
.signals-scope-tabs button[data-signal-scope="active"] i,
#tab-friend-signal-active .signal-sidebar-label i{color:#8b5cf6}
.signals-scope-tabs button[data-signal-scope="active"].is-active{border-color:rgb(139 92 246/.42);color:#7c3aed}
.signals-scope-tabs button[data-signal-scope="active"].is-active b,
#tab-friend-signal-active.is-active b{background:#8b5cf6;color:#fff}
#tab-friend-signal-active.is-active{background:rgb(139 92 246/.13);color:#7c3aed}

/* Изученные жители и архив всегда используют цвет выбранной темы. */
.signals-scope-tabs button:is([data-signal-scope="studied"],[data-signal-scope="archive"]) i,
#tab-friend-signal-studied .signal-sidebar-label i,
#tab-friend-signal-archive .signal-sidebar-label i{color:var(--color-dynamic,#3b82f6)}
.signals-scope-tabs button:is([data-signal-scope="studied"],[data-signal-scope="archive"]):is(:hover,.is-active){color:var(--color-dynamic,#3b82f6)}
.signal-sidebar-subnav button:is(#tab-friend-signal-studied,#tab-friend-signal-archive):is(:hover,.is-active){background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 12%,transparent);color:var(--color-dynamic,#3b82f6)}
.signal-sidebar-subnav button:is(#tab-friend-signal-studied,#tab-friend-signal-archive).is-active b{background:var(--color-dynamic,#3b82f6);color:#fff}
.signal-action.archive{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 45%,var(--signal-line,var(--adaptive-border)));background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 10%,var(--signal-panel,var(--adaptive-surface)));color:var(--color-dynamic,#3b82f6)}
.signal-action.archive:hover,.signal-action.primary.archive-restore{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);color:#fff;box-shadow:0 .55rem 1.2rem -.8rem color-mix(in srgb,var(--color-dynamic,#3b82f6) 72%,transparent)}
.signal-card.is-archived:before{background:var(--color-dynamic,#3b82f6)}
.signal-card.is-archived .signal-card-avatar{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 48%,transparent);color:var(--color-dynamic,#3b82f6)}
.signal-confirmation{border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 38%,var(--signal-line,var(--adaptive-border)));background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 9%,var(--signal-panel,var(--adaptive-surface)))}
.signal-confirmation strong{color:var(--color-dynamic,#3b82f6)}
.signal-action.share-discovery{border-color:var(--color-dynamic,#3b82f6);background:var(--color-dynamic,#3b82f6);box-shadow:0 .5rem 1.1rem -.75rem color-mix(in srgb,var(--color-dynamic,#3b82f6) 72%,transparent)}

/* Тип сигнала виден прямо во вложенном пункте: постоянная точка означает
   наличие записей, расходящееся кольцо — новое непрочитанное событие. */
.signal-sidebar-subnav button[data-signal-scope="active"]{--signal-scope-color:#8b5cf6}
.signal-sidebar-subnav button[data-signal-scope="studied"]{--signal-scope-color:#10b981}
.signal-sidebar-subnav button[data-signal-scope="gifts"]{--signal-scope-color:#d946ef}
.signal-sidebar-subnav button[data-signal-scope="archive"]{--signal-scope-color:#64748b}
.signal-sidebar-subnav button[data-signal-scope] .signal-sidebar-label i{color:var(--signal-scope-color)}
.signal-scope-indicator{position:relative;display:block;flex:0 0 auto;width:.48rem;height:.48rem;margin-left:auto;border-radius:50%;background:var(--signal-scope-color);color:var(--signal-scope-color);opacity:0;transform:scale(.72);transition:opacity .16s ease,transform .16s ease}
.signal-sidebar-subnav button.has-items .signal-scope-indicator{opacity:.65;transform:scale(1)}
.signal-sidebar-subnav button.has-attention .signal-scope-indicator{opacity:1;transform:scale(1)}
.signal-sidebar-subnav button.has-attention .signal-scope-indicator::after{content:"";position:absolute;inset:-.24rem;border:1px solid currentColor;border-radius:50%;animation:signal-scope-pulse 1.45s ease-out infinite}
.signal-sidebar-subnav button.has-attention{background:color-mix(in srgb,var(--signal-scope-color) 11%,transparent);color:var(--signal-scope-color)}
.signal-sidebar-subnav button.has-attention b{background:var(--signal-scope-color);color:#fff}
@keyframes signal-scope-pulse{0%{opacity:.85;transform:scale(.45)}75%,100%{opacity:0;transform:scale(1.8)}}
@media(prefers-reduced-motion:reduce){.signal-sidebar-subnav button.has-attention .signal-scope-indicator::after{animation:none;opacity:.5;transform:none}}
/* Заявки в друзья: компактная карточка без выхода имени за границы. */
.friends-requests-title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.friends-requests-title > svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.request-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  padding: .85rem 1rem !important;
  overflow: hidden;
}
.request-card-person,
.request-card-copy {
  min-width: 0;
}
.request-card-copy {
  width: min(100%, 17rem);
}
.request-card-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.request-card-actions {
  align-items: center;
  margin-left: 0 !important;
}
/* Список заявок лежит на общей поверхности главного окна без второй подложки. */
#friends-requests-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}
@media (max-width: 620px) {
  .request-card {
    grid-template-columns: minmax(0, 1fr);
    padding: .75rem !important;
  }
  .request-card-actions {
    justify-content: flex-end;
    padding-top: .65rem;
    border-top: 1px solid color-mix(in srgb, currentColor 13%, transparent);
  }
}

/* ------------[Компактный центр событий]------------ // Финальные размеры поверх старых правил уведомлений. Модуль: «оформление интерфейса». Часть 45/203 */
.notifications-dropdown-v2{
  width:min(22.5rem,calc(100vw - 1rem));
  max-height:min(42rem,calc(100vh - 4.5rem));
}
.notifications-dropdown-head{position:relative;padding:.72rem .78rem .52rem}
.notifications-dropdown-head>div:first-child{gap:.08rem}
.notifications-dropdown-head>div:first-child>span{font-size:.5rem}
.notifications-dropdown-head>div:first-child>strong{font-size:.9rem}
.notifications-dropdown-head-actions{display:flex!important;align-items:center;gap:.38rem}
.notification-settings-button{display:grid;width:2rem;height:2rem;place-items:center;color:var(--notice-muted);border:1px solid var(--notice-border);border-radius:.65rem;transition:background .16s ease,color .16s ease,transform .16s ease}
.notification-settings-button:hover,.notification-settings-button[aria-expanded="true"]{color:var(--color-dynamic,#3b82f6);background:var(--notice-soft);transform:translateY(-1px)}
.notification-settings-button svg{width:.92rem;height:.92rem;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#notifications-dropdown-count{min-width:1.5rem;height:1.5rem;font-size:.58rem}
.notification-settings-menu{position:absolute;z-index:12;top:3.1rem;right:.75rem;display:grid;width:16rem;gap:.22rem;padding:.42rem;color:var(--notice-text);background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:.88rem;box-shadow:0 1rem 2.4rem rgba(10,7,5,.24)}
.notification-settings-menu.hidden{display:none!important}
.notification-settings-menu>button{display:flex;align-items:center;gap:.62rem;padding:.58rem .62rem;text-align:left;border-radius:.65rem;transition:background .15s ease,color .15s ease}
.notification-settings-menu>button:hover{background:var(--notice-soft)}
.notification-settings-menu>button.is-danger{color:#d34b51}
.notification-settings-menu>button>svg{width:1rem;height:1rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-settings-menu>button>span{display:grid;gap:.08rem}
.notification-settings-menu strong{font-size:.62rem}
.notification-settings-menu small{color:var(--notice-muted);font-size:.5rem}
.notifications-dropdown-tabs{gap:.25rem;margin:0 .62rem .5rem;padding:.2rem;border-radius:.78rem}
.notifications-dropdown-tabs button{min-height:2.12rem;gap:.38rem;font-size:.58rem;border-radius:.62rem}
.notifications-dropdown-tabs button svg{width:.85rem;height:.85rem}
.notifications-dropdown-content{min-height:15rem;max-height:min(30rem,calc(100vh - 12.5rem));padding:.42rem .62rem .5rem}
.notifications-dropdown-v2 .notif-item{margin-bottom:.38rem!important;padding:.6rem!important;border-radius:.75rem!important}
.notifications-dropdown-v2 .profile-notif-with-read-action{min-height:3.7rem!important;padding:.58rem 5.45rem .58rem .58rem!important}
.notifications-dropdown-v2 .profile-notif-read-button{top:50%;right:.5rem;bottom:auto;min-height:1.7rem;padding:.25rem .42rem;transform:translateY(-50%);border-radius:.52rem;font-size:.43rem;white-space:nowrap}
.notifications-dropdown-v2 .profile-notif-read-button:hover{transform:translateY(calc(-50% - 1px))}
.notifications-dropdown-footer{grid-template-columns:2.2rem 1fr;gap:.4rem;padding:.5rem .62rem .58rem}
.notification-broom-button,.notification-history-open{min-height:2.18rem;border-radius:.65rem}
.notification-broom-button svg{width:1rem;height:1rem}
.notification-history-open{font-size:.58rem}
.notification-empty-state{min-height:14.5rem}
.notification-empty-icon{width:2.75rem;height:2.75rem;margin-bottom:.6rem;border-radius:.85rem}
.notification-empty-icon svg{width:1.25rem;height:1.25rem}
.notification-empty-state strong{font-size:.62rem}
.notification-empty-state small{font-size:.54rem}

/* ------------[Фон центра уведомлений в активной теме]------------ // Старое правило с !important оставляло светлую подложку поверх полной палитры. Модуль: «оформление интерфейса». Часть 46/203 */
html:not(.adaptive-theme) #notifications-dropdown.notifications-dropdown-v2 {
  --notice-bg:var(--standard-panel,#fff);
  --notice-soft:var(--standard-panel-soft,#f7f5f2);
  --notice-text:var(--standard-text-active,#25211d);
  --notice-muted:var(--standard-text-secondary,#8b8178);
  --notice-border:var(--standard-line,rgba(101,80,62,.2));
  border-color:var(--notice-border)!important;
  background:color-mix(in srgb,var(--notice-bg) 96%,transparent)!important;
}
html.adaptive-theme #notifications-dropdown.notifications-dropdown-v2 {
  /* Центр событий намеренно светлее карточек темы — как поиск, без жёлтой заливки. */
  --notice-bg:color-mix(in srgb,var(--adaptive-surface,#fff) 72%,white 28%);
  --notice-soft:color-mix(in srgb,var(--adaptive-surface-2,#f8fafc) 78%,white 22%);
  --notice-text:var(--adaptive-text-active,var(--adaptive-text));
  --notice-muted:var(--adaptive-text-passive,var(--adaptive-muted));
  --notice-border:var(--adaptive-ui-line,var(--adaptive-border));
  border-color:var(--notice-border)!important;
  background:color-mix(in srgb,var(--notice-bg) 96%,transparent)!important;
}
#notifications-dropdown.notifications-dropdown-v2 .notifications-dropdown-content {
  background:color-mix(in srgb,var(--notice-bg) 92%,var(--notice-soft) 8%)!important;
}
#notifications-dropdown.notifications-dropdown-v2 .notifications-dropdown-footer {
  border-color:var(--notice-border)!important;
  background:color-mix(in srgb,var(--notice-bg) 88%,var(--notice-soft) 12%)!important;
}
#notifications-dropdown.notifications-dropdown-v2 .notifications-dropdown-tabs button {
  border:1px solid transparent;
  transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#notifications-dropdown.notifications-dropdown-v2 .notifications-dropdown-tabs button:hover {
  color:var(--color-dynamic,#d76f2a)!important;
  background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 8%,var(--notice-bg))!important;
}
#notifications-dropdown.notifications-dropdown-v2 .notifications-dropdown-tabs button.is-active {
  color:var(--color-dynamic,#d76f2a)!important;
  border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 62%,var(--notice-border))!important;
  background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 13%,var(--notice-bg))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-dynamic,#d76f2a) 9%,transparent),0 .25rem .7rem color-mix(in srgb,var(--color-dynamic,#d76f2a) 10%,transparent)!important;
}

/* ------------[Уплотнённая история уведомлений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 47/203 */
.notification-history-dialog{max-height:min(49rem,calc(100vh - 1rem))}
.notification-history-head{grid-template-columns:2.45rem 1fr 2.15rem;gap:.68rem;padding:.78rem 1rem .62rem}
.notification-history-emblem{width:2.45rem;height:2.45rem;border-radius:.78rem}
.notification-history-emblem svg{width:1.1rem;height:1.1rem}
.notification-history-head h2{font-size:1rem}
.notification-history-head p{margin-top:.12rem;font-size:.6rem}
.notification-history-close{width:2.08rem;height:2.08rem;font-size:1.3rem;border-radius:.65rem}
.notification-history-filters{gap:.36rem;padding:0 1rem .58rem}
.notification-history-filters button{min-height:1.95rem;gap:.32rem;padding:0 .62rem;font-size:.57rem;border-radius:.64rem}
.notification-history-filters button span{min-width:1.08rem;height:1.08rem;font-size:.52rem}
.notification-history-list{min-height:23rem;max-height:min(38rem,calc(100vh - 10.5rem));padding:.25rem 1rem .65rem}
.notification-history-item{grid-template-columns:2.45rem 1fr auto;gap:.68rem;margin-bottom:.4rem;padding:.62rem .7rem;border-radius:.78rem}
.notification-history-avatar,.notification-history-avatar>*{width:2.35rem!important;height:2.35rem!important;border-radius:.7rem!important}
.notification-history-system-icon{width:2.35rem;height:2.35rem;border-radius:.7rem}
.notification-history-system-icon svg,.notification-history-system-icon img{width:1.15rem;height:1.15rem}
.notification-history-copy strong{font-size:.68rem}
.notification-history-copy>div span{font-size:.46rem}
.notification-history-copy p{margin:.12rem 0;font-size:.64rem;line-height:1.32}
.notification-history-copy time{font-size:.52rem}
.notification-history-footer{padding:.58rem 1rem}
.notification-history-footer button{min-height:2rem;font-size:.58rem;border-radius:.62rem}

/* ------------[Подтверждение очистки уведомлений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 48/203 */
.notification-clear-modal{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:1rem}
.notification-clear-modal.hidden{display:none!important}
.notification-clear-backdrop{position:absolute;inset:0;background:rgba(12,8,6,.66);backdrop-filter:blur(7px)}
.notification-clear-dialog{position:relative;display:grid;width:min(25rem,100%);grid-template-columns:3rem 1fr;gap:.85rem;padding:1.1rem;color:var(--adaptive-text-active,var(--standard-text-active,#2b211b));background:var(--adaptive-ui-panel,var(--standard-panel,#fff));border:1px solid var(--adaptive-ui-line,var(--standard-line,rgba(95,70,50,.22)));border-radius:1.15rem;box-shadow:0 1.8rem 5rem rgba(0,0,0,.4)}
.notification-clear-icon{display:grid;width:3rem;height:3rem;place-items:center;color:#d34b51;background:color-mix(in srgb,#d34b51 12%,transparent);border-radius:.9rem}
.notification-clear-icon svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-clear-dialog>div:nth-child(2)>span{color:#d34b51;font-size:.5rem;font-weight:950;letter-spacing:.14em}
.notification-clear-dialog h2{margin:.16rem 0 .25rem;font-size:1rem}
.notification-clear-dialog p{margin:0;color:var(--adaptive-text-muted,var(--standard-text-secondary,#857970));font-size:.65rem;line-height:1.45}
.notification-clear-dialog footer{display:flex;grid-column:1/-1;justify-content:flex-end;gap:.45rem;padding-top:.35rem}
.notification-clear-dialog footer button{min-height:2.2rem;padding:0 .85rem;font-size:.62rem;font-weight:900;border:1px solid var(--adaptive-ui-line,var(--standard-line,rgba(95,70,50,.22)));border-radius:.68rem}
.notification-clear-dialog footer button.is-danger{color:#fff;background:#d34b51;border-color:#d34b51}
.notification-clear-dialog footer button:disabled{cursor:wait;opacity:.6}

/* Единая пустая заглушка и компактная выдача пространств в глобальном поиске. */
.search-empty-result{padding:1rem .55rem;color:var(--adaptive-text-muted,var(--standard-text-secondary,#94a3b8));font-size:.58rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}

@media(max-width:640px){
  .notifications-dropdown-v2{width:auto}
  .notification-history-head{padding:.7rem .75rem .55rem}
  .notification-history-filters,.notification-history-list{padding-left:.75rem;padding-right:.75rem}
  .notification-history-list{max-height:calc(100vh - 9rem)}
  .notification-clear-dialog{grid-template-columns:2.6rem 1fr;padding:.9rem}
  .notification-clear-icon{width:2.6rem;height:2.6rem}
}

/* ------------[Безопасные отступы истории уведомлений]------------ // Шапка и нижние действия всегда целиком остаются в окне. Модуль: «оформление интерфейса». Часть 49/203 */
.notification-history-modal{
  padding:max(1.5rem,env(safe-area-inset-top,0px)) 1rem max(.75rem,env(safe-area-inset-bottom,0px));
}
.notification-history-dialog{
  display:grid;
  width:min(47rem,100%);
  height:min(46rem,calc(100vh - 2.25rem));
  max-height:calc(100vh - 2.25rem);
  grid-template-rows:auto auto minmax(0,1fr) auto;
}
.notification-history-head{
  padding-top:.88rem;
}
.notification-history-list{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-top:.4rem;
  padding-bottom:.7rem;
}
.notification-history-footer{
  min-height:3.2rem;
  padding-top:.62rem;
  padding-bottom:.72rem;
  background:var(--history-bg);
}
@media(max-width:640px){
  .notification-history-modal{
    padding:max(.85rem,env(safe-area-inset-top,0px)) .5rem max(.5rem,env(safe-area-inset-bottom,0px));
  }
  .notification-history-dialog{
    height:calc(100vh - 1.35rem);
    max-height:calc(100vh - 1.35rem);
  }
}

/* ------------[Компактные иконки рангов]------------ // Роль отмечается возле аватара; подписи и карточки сохраняют обычные цвета темы. Модуль: «оформление интерфейса». Часть 50/203 */
.profile-avatar-role-badge{
  --access-rank-color:#38bdf8;
  position:absolute;
  top:.55rem;
  right:-.55rem;
  z-index:35;
  display:grid;
  width:2.45rem;
  height:2.45rem;
  place-items:center;
  padding:0;
  color:var(--access-rank-color);
  background:color-mix(in srgb,var(--adaptive-surface,white) 88%,var(--access-rank-color) 12%);
  border:2px solid color-mix(in srgb,var(--access-rank-color) 76%,white 24%);
  border-radius:.9rem;
  box-shadow:0 .45rem 1.15rem color-mix(in srgb,var(--access-rank-color) 28%,transparent);
  cursor:pointer;
}
.profile-avatar-role-badge.hidden{display:none!important}
.profile-avatar-verification-badge{
  position:absolute;
  top:.55rem;
  right:-.55rem;
  z-index:34;
  display:grid;
  width:2.45rem;
  height:2.45rem;
  place-items:center;
  color:#fff;
  background:var(--color-dynamic,#d76f2a);
  border:2px solid color-mix(in srgb,var(--color-dynamic,#d76f2a) 76%,white 24%);
  border-radius:.9rem;
  box-shadow:0 .45rem 1.15rem color-mix(in srgb,var(--color-dynamic,#d76f2a) 30%,transparent);
}
.profile-avatar-verification-badge.is-below-role{top:3.45rem}
.profile-avatar-verification-badge::before{
  content:"";
  display:block;
  width:1.35rem;
  height:1.35rem;
  background:currentColor;
  -webkit-mask:url('/assets/verified-medal.svg?v=20260904.1') center/contain no-repeat;
  mask:url('/assets/verified-medal.svg?v=20260904.1') center/contain no-repeat;
}
.profile-avatar-verification-badge.hidden{display:none!important}
.profile-avatar-role-badge.role-moderator{--access-rank-color:#38bdf8}
.profile-avatar-role-badge.role-admin,.profile-avatar-role-badge.role-administrator{--access-rank-color:#eab308}
.profile-avatar-role-badge.role-captain,.profile-avatar-role-badge.role-creator{--access-rank-color:#ef4444}
.profile-avatar-role-badge>svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.access-role-scope-icon{position:absolute;right:-.26rem;bottom:-.24rem;display:grid;width:.68rem;height:.68rem;place-items:center;color:#2563eb;background:var(--adaptive-ui-panel,var(--standard-panel,var(--adaptive-card-tint,#ead2c1)));border:1px solid currentColor;border-radius:50%;box-shadow:0 .12rem .3rem rgba(15,23,42,.2)}
.access-role-scope-icon>svg{width:.46rem!important;height:.46rem!important;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.profile-avatar-role-badge>.access-role-scope-icon{right:-.2rem;bottom:-.2rem;width:.9rem;height:.9rem}
.profile-avatar-role-badge>.access-role-scope-icon>svg{width:.58rem!important;height:.58rem!important}
.project-rank-icon-wrap{position:relative;display:inline-grid;width:1.35rem;height:1.35rem;place-items:center;flex:0 0 auto;overflow:visible!important}
.project-rank-icon-wrap>.access-role-scope-icon{right:-.2rem;bottom:-.16rem}
.access-role-marker{
  --access-rank-color:#38bdf8;
  position:relative;
  display:inline-grid;
  width:1.22rem;
  height:1.22rem;
  flex:0 0 auto;
  place-items:center;
  padding:0;
  color:var(--access-rank-color);
  background:color-mix(in srgb,var(--adaptive-surface,white) 86%,var(--access-rank-color) 14%);
  border:1px solid color-mix(in srgb,var(--access-rank-color) 68%,white 32%);
  border-radius:.4rem;
  box-shadow:0 .18rem .55rem color-mix(in srgb,var(--access-rank-color) 22%,transparent);
  vertical-align:middle;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.access-role-marker:hover,.access-role-marker:focus-visible{transform:translateY(-1px) scale(1.06);box-shadow:0 .28rem .72rem color-mix(in srgb,var(--access-rank-color) 32%,transparent);outline:none}
.access-role-marker.role-moderator{--access-rank-color:#38bdf8}
.access-role-marker.role-admin,.access-role-marker.role-administrator{--access-rank-color:#eab308}
.access-role-marker.role-captain,.access-role-marker.role-creator{--access-rank-color:#ef4444}
.access-role-marker>svg{width:.72rem;height:.72rem;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.access-role-marker.is-global{border-radius:50%}
.access-role-marker.has-multiple::after{content:"";position:absolute;right:-.14rem;top:-.14rem;width:.34rem;height:.34rem;background:#fff;border:1.5px solid var(--access-rank-color);border-radius:50%}
.space-subscriber-thumb>.access-role-marker{position:absolute;left:-.38rem;top:-.38rem;z-index:20}
.modal-friend-card>.access-role-marker{position:absolute;left:3.2rem;top:.55rem;z-index:20}
.space-team-person>.space-team-person-avatar{position:relative;display:block;width:2rem;height:2rem;min-width:2rem;flex:0 0 2rem}
.space-team-person-avatar>img{display:block;width:100%;height:100%;object-fit:cover}
.space-team-person-avatar>.access-role-marker{position:absolute;right:-.42rem;top:-.42rem;z-index:5}
.post-author-name-row,.comment-author-line{align-items:center}

.access-role-popover{
  position:fixed;
  z-index:10080;
  overflow:hidden;
  color:var(--adaptive-text,rgb(30 41 59));
  background:color-mix(in srgb,var(--adaptive-ui-panel,var(--standard-panel,var(--adaptive-card-tint,#ead2c1))) 92%,var(--color-dynamic,#d66a2c) 8%);
  border:1px solid var(--adaptive-ui-line,var(--standard-line,color-mix(in srgb,var(--color-dynamic,#d66a2c) 30%,transparent)));
  border-radius:1rem;
  box-shadow:0 1.25rem 3.5rem rgba(15,23,42,.28);
  backdrop-filter:blur(18px);
  animation:access-role-popover-in .16s ease both;
}
.access-role-popover>header{display:grid;gap:.15rem;padding:.82rem .9rem .68rem;border-bottom:1px solid color-mix(in srgb,var(--color-dynamic,#d66a2c) 18%,transparent)}
.access-role-popover>header span{color:var(--adaptive-muted,rgb(100 116 139));font-size:.48rem;font-weight:950;letter-spacing:.13em}
.access-role-popover>header strong{font-size:.78rem;font-weight:950}
.access-role-popover-list{display:grid;gap:.32rem;padding:.55rem}
.access-role-popover-row{--access-rank-color:#38bdf8;display:flex;width:100%;align-items:center;gap:.62rem;padding:.55rem .6rem;color:inherit;text-align:left;background:color-mix(in srgb,var(--adaptive-ui-active,var(--standard-panel-soft,var(--adaptive-card-tint,#ead2c1))) 84%,var(--access-rank-color) 16%);border:1px solid color-mix(in srgb,var(--access-rank-color) 34%,var(--adaptive-ui-line,var(--standard-line,transparent)));border-radius:.75rem}
button.access-role-popover-row{cursor:pointer;transition:background .16s ease,transform .16s ease}
button.access-role-popover-row:hover{background:color-mix(in srgb,var(--access-rank-color) 14%,transparent);transform:translateX(2px)}
.access-role-popover-row.role-moderator{--access-rank-color:#38bdf8}
.access-role-popover-row.role-admin,.access-role-popover-row.role-administrator{--access-rank-color:#eab308}
.access-role-popover-row.role-captain,.access-role-popover-row.role-creator{--access-rank-color:#ef4444}
.access-role-popover-icon{position:relative;display:grid;width:1.75rem;height:1.75rem;flex:0 0 auto;place-items:center;color:var(--access-rank-color);background:color-mix(in srgb,var(--access-rank-color) 14%,transparent);border-radius:.58rem}
.access-role-popover-icon>svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.access-role-popover-row>span:nth-child(2){display:grid;min-width:0;flex:1;gap:.08rem}
.access-role-popover-row strong{font-size:.65rem;font-weight:950}
.access-role-popover-row small{overflow:hidden;color:var(--adaptive-muted,rgb(100 116 139));font-size:.54rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.access-role-popover-row>b{color:var(--access-rank-color);font-size:1rem}
.access-role-popover-loading,.access-role-popover-empty{margin:0;padding:.48rem .6rem;color:var(--adaptive-muted,rgb(100 116 139));font-size:.54rem;font-weight:800;text-align:center}
@keyframes access-role-popover-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.project-rank-badge,.project-rank-badge>.project-rank-icon-wrap,#modal-user-rank,.space-about-card.is-access-rank,.space-about-card.is-access-rank>span{overflow:visible!important}
.project-rank-badge .project-rank-icon-wrap>svg:first-child,.space-about-card.is-access-rank>span>svg:first-child{width:1rem;height:1rem;flex:0 0 auto}
.project-rank-badge.role-moderator .project-rank-icon-wrap>svg:first-child,.space-about-card.is-access-rank.role-moderator>span>svg:first-child{color:#0284c7!important}
.project-rank-badge.role-admin .project-rank-icon-wrap>svg:first-child,.space-about-card.is-access-rank.role-administrator>span>svg:first-child{color:#8a4b08!important;stroke-width:2.7}
.project-rank-badge.role-captain .project-rank-icon-wrap>svg:first-child,.space-about-card.is-access-rank.role-creator>span>svg:first-child{color:#dc2626!important}
.access-role-marker.role-admin>svg:first-child,.access-role-marker.role-administrator>svg:first-child,.profile-avatar-role-badge.role-admin>svg:first-child,.profile-avatar-role-badge.role-administrator>svg:first-child{color:#8a4b08!important;stroke-width:2.7}
.access-role-popover-row.role-admin .access-role-popover-icon>svg:first-child,.access-role-popover-row.role-administrator .access-role-popover-icon>svg:first-child{color:#7c3f06!important;stroke-width:2.7}
.access-role-popover-row.role-admin .access-role-popover-icon,.access-role-popover-row.role-administrator .access-role-popover-icon{background:rgba(255,255,255,.34)}
@media(max-width:767px){
  .profile-avatar-role-badge{top:.42rem;right:-.42rem;width:2.1rem;height:2.1rem;border-radius:.78rem}
  .profile-avatar-role-badge>svg{width:1.05rem;height:1.05rem}
  .profile-avatar-verification-badge{top:.42rem;right:-.42rem;width:2.1rem;height:2.1rem;border-radius:.78rem}
  .profile-avatar-verification-badge.is-below-role{top:2.95rem}
  .profile-avatar-verification-badge::before{width:1.15rem;height:1.15rem}
}

/* ------------[Настройки видимости значков доступа]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 51/203 */
html.access-role-icons-hidden .access-role-marker,
html.access-role-icons-hidden .profile-avatar-role-badge{display:none!important}
body.access-icon-settings-open{overflow:hidden}
.access-icon-settings-modal.hidden{display:none!important}
.access-icon-settings-modal{position:fixed;inset:0;z-index:10070;display:grid;place-items:center;padding:1rem}
.access-icon-settings-backdrop{position:absolute;inset:0;background:rgba(10,8,13,.72);backdrop-filter:blur(9px)}
.access-icon-settings-modal>section{position:relative;overflow:hidden;width:min(33rem,calc(100vw - 2rem));color:var(--adaptive-text-active,var(--standard-text-active,#382419));background:var(--adaptive-ui-panel,var(--standard-panel,#f6e8dd));border:1px solid var(--adaptive-ui-line,var(--standard-line,rgba(131,86,55,.25)));border-radius:1.25rem;box-shadow:0 2rem 6rem rgba(0,0,0,.4)}
.access-icon-settings-modal>section>header{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-bottom:1px solid var(--adaptive-ui-line,var(--standard-line,rgba(131,86,55,.18)))}
.access-icon-settings-modal>section>header>span{display:grid;width:2.7rem;height:2.7rem;place-items:center;flex:0 0 auto;color:var(--color-dynamic,#d76f2a);background:var(--adaptive-ui-active,rgba(215,111,42,.12));border-radius:.85rem}
.access-icon-settings-modal>section>header svg,.settings-profile-action-icon svg,.space-role-visibility svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.access-icon-settings-modal>section>header>div{display:grid;min-width:0;gap:.08rem;flex:1}
.access-icon-settings-modal>section>header small{color:var(--color-dynamic,#d76f2a);font-size:.5rem;font-weight:950;letter-spacing:.14em}
.access-icon-settings-modal h2{margin:0;font-size:1rem;font-weight:950}
.access-icon-settings-modal header p{overflow:hidden;margin:0;color:var(--adaptive-text-muted,#8b7467);font-size:.6rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.access-icon-settings-close{display:grid;width:2.35rem;height:2.35rem;place-items:center;flex:0 0 auto;color:var(--adaptive-text-muted,#8b7467);border:1px solid var(--adaptive-ui-line,rgba(131,86,55,.2));border-radius:.75rem;font-size:1.25rem}
.access-icon-settings-body{display:grid;gap:.65rem;padding:1rem}
.access-icon-settings-body>div{display:flex;align-items:center;gap:.75rem;padding:.8rem;background:var(--adaptive-ui-panel-soft,rgba(135,85,55,.08));border:1px solid var(--adaptive-ui-line,rgba(131,86,55,.2));border-radius:.9rem}
.access-icon-settings-symbol,.settings-profile-action-icon{display:grid;width:2rem;height:2rem;place-items:center;flex:0 0 auto;color:var(--color-dynamic,#d76f2a);background:var(--adaptive-ui-active,rgba(215,111,42,.12));border-radius:.7rem}
.access-icon-settings-symbol svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2}
.access-icon-settings-body>div>span:nth-child(2){display:grid;min-width:0;gap:.12rem;flex:1}
.access-icon-settings-body strong{font-size:.7rem;font-weight:950}
.access-icon-settings-body small{color:var(--adaptive-text-muted,#8b7467);font-size:.56rem;font-weight:700;line-height:1.4}
#access-icon-visibility-toggle{position:relative;width:2.65rem;height:1.5rem;flex:0 0 auto;padding:.15rem;background:color-mix(in srgb,var(--adaptive-ui-line,var(--standard-line,#8b7467)) 72%,transparent);border:1px solid color-mix(in srgb,var(--color-dynamic,#d76f2a) 20%,transparent);border-radius:999px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
#access-icon-visibility-toggle i{display:block;width:1.1rem;height:1.1rem;background:var(--adaptive-surface,var(--standard-panel,#fff));border:1px solid color-mix(in srgb,var(--adaptive-text-muted,#8b7467) 28%,transparent);border-radius:50%;box-shadow:0 .15rem .4rem rgba(0,0,0,.22);transition:transform .2s ease,background .2s ease}
#access-icon-visibility-toggle.is-on{background:var(--color-dynamic,#d76f2a);border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 78%,white 22%);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-dynamic,#d76f2a) 14%,transparent)}
#access-icon-visibility-toggle.is-on i{transform:translateX(1.15rem)}
#access-icon-visibility-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--color-dynamic,#d76f2a) 72%,white 28%);outline-offset:2px}
#access-icon-visibility-toggle:disabled{opacity:.55}
.access-icon-settings-body>p{margin:0;color:var(--adaptive-text-muted,#8b7467);font-size:.55rem;font-weight:750;text-align:right}
.access-icon-settings-body>p b{color:var(--color-dynamic,#d76f2a)}
.settings-profile-reports-btn,.settings-profile-icons-btn{position:relative}
.settings-profile-reports-btn strong,.settings-profile-icons-btn strong{color:var(--adaptive-text-strong,var(--standard-text-active,#382419))!important}

/* ------------[Уровень доступа пространства]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 52/203 */
.space-role-visibility{display:grid;gap:.65rem;padding:.72rem;background:var(--adaptive-card-tint,color-mix(in srgb,var(--adaptive-surface-2,rgb(248 250 252)) 88%,transparent));border:1px solid color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 66%);border-radius:.78rem}
.space-role-visibility>header{display:flex!important;align-items:center!important;gap:.65rem!important;padding:0!important;border:0!important}
.space-role-visibility>header>span{display:grid;width:2.2rem;height:2.2rem;place-items:center;flex:0 0 auto;color:var(--color-dynamic,#2563eb);background:color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 86%);border-radius:.68rem}
.space-role-visibility>header>div{display:grid;min-width:0;gap:.06rem}
.space-role-visibility>header small{color:var(--color-dynamic,#2563eb);font-size:.46rem;font-weight:950;letter-spacing:.12em}
.space-role-visibility>header strong{font-size:.7rem!important;font-weight:950}
.space-role-visibility>header p{margin:0;color:var(--adaptive-text-muted,var(--adaptive-muted,rgb(100 116 139)));font-size:.52rem;font-weight:700}
.space-role-visibility-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem}
.space-role-visibility-options button{display:grid;min-width:0;gap:.12rem;padding:.58rem .62rem;color:var(--adaptive-text-muted,var(--adaptive-muted,rgb(100 116 139)));text-align:left;background:color-mix(in srgb,var(--adaptive-surface,white) 91%,var(--color-dynamic,#2563eb) 9%);border:1px solid var(--adaptive-ui-line,var(--adaptive-border,rgb(226 232 240)));border-radius:.68rem}
.space-role-visibility-options button span{font-size:.58rem;font-weight:950}
.space-role-visibility-options button small{font-size:.48rem;font-weight:700;line-height:1.35}
.space-role-visibility-options button.is-active{color:var(--color-dynamic,#2563eb);background:color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 86%);border-color:color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 42%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-dynamic,#2563eb),transparent 65%)}
.space-role-visibility-options button:disabled{opacity:.58}

/* Роли команды различаются не только иконкой, но и устойчивым цветом карточки. */
.space-team-section{--space-team-role:var(--color-dynamic,#2563eb)}
.space-team-section.is-owner{--space-team-role:#dc3f4f}
.space-team-section.role-admin{--space-team-role:#a5650b}
.space-team-section.role-moderator{--space-team-role:#0284c7}
.space-team-section:is(.is-owner,.role-admin,.role-moderator){border-color:color-mix(in srgb,var(--space-team-role),transparent 62%);background:color-mix(in srgb,var(--space-team-role) 7%,var(--adaptive-card-tint,var(--adaptive-surface,white)))}
.space-team-section:is(.is-owner,.role-admin,.role-moderator)>header span{color:var(--space-team-role)!important}
.space-team-section:is(.is-owner,.role-admin,.role-moderator)>header small{color:var(--space-team-role);background:color-mix(in srgb,var(--space-team-role),transparent 84%)}
.space-team-section.role-admin .access-role-marker.role-administrator>svg:first-child{color:#704006!important}

/* Основной уровень шестерёнки остаётся спокойным; акцент работает на пиктограммах и наведении. */
#settings-dropdown #menu-main-content>button:not([onclick*="logout"]){color:var(--adaptive-text-strong,var(--standard-text-active,#382419))!important}
#settings-dropdown #menu-main-content>button[onclick*="logout"],#settings-dropdown #menu-main-content>button[onclick*="logout"] .settings-menu-icon{color:#dc3f4f!important}
@media(max-width:560px){
  .space-role-visibility-options{grid-template-columns:1fr}
}
/* Источник новых уведомлений в верхней панели:
   профиль — синий, система — красный, оба источника — разделённый цвет. */
.notification-source-badge {
    background: #2563eb;
    isolation: isolate;
    overflow: hidden;
    box-shadow: 0 2px 7px rgb(37 99 235 / 35%);
}

.notification-source-badge.is-profile-only {
    background: #2563eb;
    box-shadow: 0 2px 7px rgb(37 99 235 / 35%);
}

.notification-source-badge.is-system-only {
    background: #ef4444;
    box-shadow: 0 2px 7px rgb(239 68 68 / 35%);
}

.notification-source-badge.is-mixed {
    background: linear-gradient(135deg, #2563eb 0 46%, #f8fafc 46% 54%, #ef4444 54% 100%);
    box-shadow: -2px 2px 7px rgb(37 99 235 / 28%), 2px 2px 7px rgb(239 68 68 / 28%);
}

.notifications-dropdown-tabs .notification-tab-count {
    display: inline-grid;
    min-width: 1.18rem;
    height: 1.18rem;
    padding: 0 .28rem;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    font-size: .52rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    border: 2px solid var(--notice-bg);
    border-radius: 999px;
    box-shadow: 0 .2rem .55rem rgb(15 23 42 / 18%);
}

.notifications-dropdown-tabs .notification-tab-count.is-profile { background: #2563eb; }
.notifications-dropdown-tabs .notification-tab-count.is-system { background: #ef4444; }
.notifications-dropdown-tabs .notification-tab-count.hidden { display: none !important; }

/* ------------[Голосовые и круглые видеосообщения]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 53/203 */
.messenger-voice-button {
    display: grid !important;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.messenger-voice-button.is-video-mode {
    color: #ef4444;
    background: rgb(239 68 68 / 10%);
}

.messenger-recording-panel {
    display: none;
}

.messenger-recording-panel.is-active {
    position: absolute;
    inset: .3rem;
    z-index: 45;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .55rem;
    padding: .15rem .2rem;
    color: var(--msg-text);
    background: var(--msg-panel);
    border-radius: .85rem;
}

.messenger-composer.is-recording > :not(.messenger-recording-panel) {
    visibility: hidden !important;
    pointer-events: none !important;
}

.messenger-recording-cancel,
.messenger-recording-send {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: .78rem;
    cursor: pointer;
}

.messenger-recording-cancel {
    color: #ef4444;
    background: rgb(239 68 68 / 12%);
}

.messenger-recording-cancel:hover { background: #ef4444; color: #fff; }
.messenger-recording-cancel .messenger-icon,
.messenger-recording-send .messenger-icon { width: 1.15rem; height: 1.15rem; }

.messenger-recording-status {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .42rem;
}

.messenger-recording-status > i {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    background: #ef4444;
    border-radius: 50%;
    animation: messenger-recording-pulse 1s ease-in-out infinite;
}

.messenger-recording-status strong {
    min-width: 2.2rem;
    color: #ef4444;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.messenger-recording-status span {
    overflow: hidden;
    color: var(--msg-muted);
    font-size: .58rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-recording-wave {
    display: flex;
    min-width: 3rem;
    height: 1.65rem;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: .12rem;
    overflow: hidden;
}

.messenger-recording-wave i {
    width: .12rem;
    height: calc(.16rem + var(--wave) * .12rem);
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--msg-accent) 76%, transparent);
    border-radius: 999px;
    animation: messenger-recording-wave .85s ease-in-out infinite alternate;
    animation-delay: calc(var(--wave) * -70ms);
}

.messenger-recording-lock {
    position: absolute;
    right: .45rem;
    bottom: 3.15rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--msg-muted);
    background: var(--msg-panel);
    border: 1px solid var(--msg-line);
    border-radius: .68rem;
    opacity: .6;
    transform: translateY(.35rem);
    transition: .18s ease;
    box-shadow: 0 .55rem 1.4rem rgb(2 6 23 / 16%);
}

.messenger-recording-lock .messenger-icon { width: .9rem; height: .9rem; }
.messenger-recording-panel.is-locked .messenger-recording-lock {
    color: #fff;
    background: var(--msg-accent);
    border-color: var(--msg-accent);
    opacity: 1;
    transform: translateY(-.15rem);
}

.messenger-recording-send {
    display: none;
    color: #fff;
    background: var(--msg-accent);
    box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--msg-accent), transparent 62%);
}

.messenger-recording-panel.is-locked .messenger-recording-send { display: grid; }
.messenger-recording-panel.is-locked .messenger-recording-wave { display: none; }

.messenger-recording-video {
    display: none;
}

.messenger-recording-panel.is-video .messenger-recording-video {
    position: absolute;
    right: .15rem;
    bottom: 3.55rem;
    display: block;
    width: 9rem;
    height: 9rem;
    overflow: hidden;
    background: #020617;
    border: .24rem solid #ef4444;
    border-radius: 50%;
    box-shadow: 0 1rem 2.8rem rgb(2 6 23 / 34%);
}

.messenger-recording-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.messenger-recording-video i {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: .7rem;
    height: .7rem;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: messenger-recording-pulse 1s ease-in-out infinite;
}

.messenger-voice-note-list { display: grid; gap: .35rem; }
.messenger-voice-note {
    display: grid;
    width: min(18rem, 68vw);
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .5rem;
    color: var(--msg-text);
    background: color-mix(in srgb, var(--msg-accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--msg-accent) 28%, var(--msg-line));
    border-radius: .85rem;
}

.messenger-voice-note-symbol {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: #fff;
    background: var(--msg-accent);
    border-radius: 50%;
}

.messenger-voice-note-symbol .messenger-icon { width: 1.05rem; height: 1.05rem; }
.messenger-voice-note > div { display: grid; min-width: 0; grid-template-columns: 1fr auto; align-items: center; gap: .08rem .45rem; }
.messenger-voice-note strong { font-size: .65rem; }
.messenger-voice-note small { color: var(--msg-muted); font-size: .56rem; font-variant-numeric: tabular-nums; }
.messenger-voice-note audio { grid-column: 1 / -1; width: 100%; height: 2rem; margin-top: .18rem; accent-color: var(--msg-accent); }

.messenger-video-note-list { display: grid; gap: .4rem; }
.messenger-video-note {
    position: relative;
    width: min(12rem, 58vw);
    aspect-ratio: 1;
    overflow: hidden;
    background: #020617;
    border: .22rem solid color-mix(in srgb, var(--msg-accent) 70%, #fff 30%);
    border-radius: 50%;
    box-shadow: 0 .55rem 1.6rem rgb(2 6 23 / 22%);
}

.messenger-video-note video { display: block; width: 100%; height: 100%; object-fit: cover; }
.messenger-video-note > button {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    color: #fff;
    background: rgb(2 6 23 / 58%);
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(7px);
}

.messenger-video-note.is-playing > button { opacity: 0; }
.messenger-video-note:hover > button,
.messenger-video-note > button:focus-visible { opacity: 1; }
.messenger-video-note > button .messenger-icon { width: 1.2rem; height: 1.2rem; }
.messenger-video-note > time {
    position: absolute;
    right: 1rem;
    bottom: .65rem;
    padding: .18rem .38rem;
    color: #fff;
    background: rgb(2 6 23 / 55%);
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 850;
    backdrop-filter: blur(6px);
}

/* ------------[Единый силуэт сообщения]------------ // Пузырь и SVG-хвост используют общий цвет, контур и внешнюю тень без заметного стыка. Модуль: «оформление интерфейса». Часть 54/203 */
.messenger-message .messenger-bubble-tail {
    display: block !important;
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
.messenger-message.is-outgoing { padding-right: .15rem; }
.messenger-message.is-incoming { padding-left: .15rem; }
.messenger-message .messenger-bubble {
    --message-shape-fill: color-mix(in srgb,var(--adaptive-card-tint,#fff) 98%,var(--msg-bg) 2%);
    --message-shape-line: var(--msg-line);
    border-radius: 1rem !important;
    background: var(--message-shape-fill);
    background-clip: padding-box;
    box-shadow: none;
    filter: drop-shadow(0 .18rem .32rem rgb(2 6 23 / 8%));
}
.messenger-message.is-outgoing .messenger-bubble {
    --message-shape-fill: var(--msg-panel-strong);
    background: var(--message-shape-fill);
}
.messenger-message.has-tail .messenger-bubble {
    border-color: transparent;
    filter:
        drop-shadow(0 0 .035rem var(--message-shape-line))
        drop-shadow(0 0 .035rem var(--message-shape-line))
        drop-shadow(0 .18rem .32rem rgb(2 6 23 / 8%));
}
.messenger-message.has-tail.is-outgoing .messenger-bubble { border-bottom-right-radius: .48rem !important; }
.messenger-message.has-tail.is-incoming .messenger-bubble { border-bottom-left-radius: .48rem !important; }
.messenger-message .messenger-bubble-tail { bottom: 0; width: .88rem; height: 1.02rem; }
.messenger-message.is-outgoing .messenger-bubble-tail { right: -.48rem; }
.messenger-message.is-incoming .messenger-bubble-tail { left: -.48rem; }
.messenger-message .messenger-bubble-tail { color: var(--message-shape-fill); }
.messenger-message .messenger-bubble-tail-line { display: none; }

@keyframes messenger-recording-pulse { 50% { opacity: .35; transform: scale(.82); } }
@keyframes messenger-recording-wave { from { transform: scaleY(.55); opacity: .48; } to { transform: scaleY(1.35); opacity: 1; } }

@media (max-width: 560px) {
    .messenger-recording-status span { display: none; }
    .messenger-recording-wave { min-width: 2rem; }
    .messenger-recording-panel.is-video .messenger-recording-video { width: 7.5rem; height: 7.5rem; }
}

/* ------------[Голосовые и видеосообщения v2: компактный Telegram-подобный интерфейс]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 55/203 */
.messenger-composer.is-recording {
    min-height: 3.2rem;
    overflow: visible;
}

.messenger-composer.is-recording > :not(.messenger-recording-panel) {
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.messenger-recording-panel.is-active {
    inset: .3rem;
    display: grid;
    grid-template-columns: auto auto minmax(3rem, 1fr) auto auto;
    align-items: center;
    gap: .48rem;
    padding: 0 .08rem;
    border: 0;
    background: var(--msg-panel);
    box-shadow: none;
}

.messenger-recording-status { gap: .35rem; white-space: nowrap; }
.messenger-recording-status strong { min-width: 2.5rem; font-size: .72rem; }
.messenger-recording-status span { font-size: .56rem; }
.messenger-recording-wave {
    min-width: 2.5rem;
    height: 1.75rem;
    justify-content: stretch;
    gap: .1rem;
}
.messenger-recording-wave i { flex: 1 1 auto; max-width: .14rem; }

.messenger-recording-lock {
    position: static;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    opacity: .72;
    transform: none;
    box-shadow: none;
}
.messenger-recording-panel.is-locked .messenger-recording-lock { transform: none; }
.messenger-recording-panel.is-locked .messenger-recording-wave { display: flex; }
.messenger-recording-send { border-radius: 50%; }
.messenger-recording-cancel { border-radius: 50%; }

.messenger-recording-panel.is-video .messenger-recording-video {
    right: .2rem;
    bottom: 3.45rem;
    width: 10rem;
    height: 10rem;
    border-width: .2rem;
    box-shadow: 0 1rem 2.6rem rgb(2 6 23 / 34%), 0 0 0 .35rem color-mix(in srgb, #ef4444 16%, transparent);
}

.messenger-bubble.is-voice-note-only {
    width: min(21rem, 76vw);
    padding: .6rem .72rem .38rem;
}
.messenger-voice-note-list { width: 100%; }
.messenger-voice-note {
    display: grid;
    width: 100%;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.messenger-voice-note-toggle {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--msg-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 .35rem .9rem color-mix(in srgb, var(--msg-accent), transparent 62%);
}
.messenger-voice-note-toggle .messenger-icon { width: 1rem; height: 1rem; }
.messenger-voice-note-content { display: grid; min-width: 0; gap: .18rem; }
.messenger-voice-wave {
    position: relative;
    display: grid;
    height: 1.72rem;
    align-items: center;
}
.messenger-voice-wave > span {
    display: flex;
    height: 100%;
    align-items: center;
    gap: .09rem;
    overflow: hidden;
}
.messenger-voice-wave i {
    width: .12rem;
    height: var(--voice-wave-height);
    flex: 1 1 auto;
    max-width: .17rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-muted) 60%, transparent);
    transition: background-color 100ms ease, opacity 100ms ease;
}
.messenger-voice-wave i.is-played { background: var(--msg-accent); }
.messenger-voice-wave input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}
.messenger-voice-note-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .28rem;
    color: var(--msg-muted);
    font-size: .55rem;
    font-variant-numeric: tabular-nums;
}
.messenger-voice-note-meta time { color: var(--msg-accent); font-weight: 850; }
.messenger-voice-note-meta small { font: inherit; }
.messenger-voice-note-meta span { display: grid; margin-left: auto; color: var(--msg-accent); }
.messenger-voice-note-meta .messenger-icon { width: .72rem; height: .72rem; }
.messenger-voice-note audio { display: none; }

.messenger-bubble.is-video-note-only {
    width: min(12rem, 60vw);
    max-width: min(12rem, 60vw) !important;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    background: transparent;
    box-shadow: none;
}
.messenger-bubble.is-video-note-only > .messenger-bubble-tail { display: none !important; }
.messenger-bubble.is-video-note-only > span {
    position: absolute;
    z-index: 6;
    right: .75rem;
    bottom: .62rem;
    margin: 0;
    padding: .18rem .38rem;
    border-radius: 999px;
    background: rgb(2 6 23 / 58%);
    color: #fff;
    backdrop-filter: blur(6px);
}
.messenger-bubble.is-video-note-only > span b { color: #fff; }
.messenger-video-note-list { width: 100%; }
.messenger-video-note {
    width: 100%;
    border: .2rem solid color-mix(in srgb, var(--msg-accent) 76%, #fff 24%);
    box-shadow: 0 .7rem 1.8rem rgb(2 6 23 / 25%);
}
.messenger-video-note video { transform: translateZ(0); }
.messenger-video-note > time { right: auto; left: .78rem; bottom: .62rem; }
.messenger-video-note > button { cursor: pointer; transition: opacity 150ms ease, transform 150ms ease; }
.messenger-video-note.is-playing > button { transform: translate(-50%, -50%) scale(.88); }

@media (max-width: 720px) {
    .messenger-recording-panel.is-active { grid-template-columns: auto auto minmax(2rem, 1fr) auto auto; gap: .3rem; }
    .messenger-recording-status span { display: none; }
    .messenger-recording-wave { min-width: 1.8rem; }
    .messenger-bubble.is-voice-note-only { width: min(19rem, 82vw); }
}

@media (max-width: 460px) {
    .messenger-recording-wave { display: none; }
    .messenger-recording-panel.is-locked .messenger-recording-wave { display: none; }
    .messenger-bubble.is-voice-note-only { width: min(17rem, 84vw); }
}

/* ------------[Живая запись: уровень голоса, захват замка и лимит 60 секунд]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 56/203 */
.messenger-recording-panel.is-active::after {
    content: "";
    position: absolute;
    right: .15rem;
    bottom: -.2rem;
    left: .15rem;
    height: .16rem;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444 0 var(--recording-progress, 0%), color-mix(in srgb, var(--msg-line) 75%, transparent) var(--recording-progress, 0%) 100%);
    pointer-events: none;
}

.messenger-recording-wave {
    justify-content: flex-start;
    gap: .055rem;
}
.messenger-recording-wave i {
    width: .07rem;
    max-width: .085rem;
    height: calc(.14rem + var(--record-level, .08) * 1.36rem);
    flex: 1 1 .07rem;
    background: color-mix(in srgb, var(--msg-accent) 80%, var(--msg-muted) 20%);
    opacity: .7;
    animation: none;
    transition: height 70ms linear, opacity 70ms linear;
}

.messenger-recording-lock {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    opacity: 1;
}
.messenger-recording-lock > b {
    position: relative;
    z-index: 2;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: .13rem solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--msg-panel), var(--msg-panel)) padding-box,
        conic-gradient(var(--msg-accent) var(--recording-lock-progress, 0%), var(--msg-line) 0) border-box;
    color: var(--msg-muted);
    transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.messenger-recording-lock > i {
    position: absolute;
    z-index: 1;
    top: -.92rem;
    display: grid;
    color: var(--msg-accent);
    opacity: .78;
    animation: messenger-lock-lift 1.05s ease-in-out infinite;
}
.messenger-recording-lock > em {
    position: absolute;
    top: -1.48rem;
    padding: .12rem .28rem;
    border-radius: 999px;
    background: var(--msg-panel);
    color: var(--msg-muted);
    font-size: .43rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    opacity: .82;
}
.messenger-recording-lock > i .messenger-icon { width: .78rem; height: .78rem; }
.messenger-recording-lock > b .messenger-icon { width: .9rem; height: .9rem; }
.messenger-recording-panel.is-locking .messenger-recording-lock > b {
    color: var(--msg-accent);
    transform: scale(1.08);
    box-shadow: 0 0 0 .26rem color-mix(in srgb, var(--msg-accent) 12%, transparent);
}
.messenger-recording-panel.is-locked .messenger-recording-lock > b {
    border-color: var(--msg-accent);
    background: var(--msg-accent);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--msg-accent) 17%, transparent), 0 .35rem .9rem color-mix(in srgb, var(--msg-accent) 45%, transparent);
    animation: messenger-lock-captured 420ms cubic-bezier(.2, .9, .25, 1.35);
}
.messenger-recording-panel.is-locked .messenger-recording-lock {
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    transform: none;
}
.messenger-recording-panel.is-locked .messenger-recording-lock > i,
.messenger-recording-panel.is-locked .messenger-recording-lock > em { display: none; }

.messenger-recording-panel.is-video .messenger-recording-video {
    overflow: visible;
    border: 0;
    background: #020617;
}
.messenger-recording-panel.is-video .messenger-recording-video::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -.38rem;
    border-radius: 50%;
    background: conic-gradient(#ef4444 var(--recording-progress, 0%), color-mix(in srgb, var(--msg-line) 72%, transparent) 0);
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .24rem), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .24rem), #000 0);
}
.messenger-recording-video video { border-radius: 50%; clip-path: circle(50%); }
.messenger-recording-video > i { z-index: 4; }

.messenger-voice-wave > span { gap: .055rem; }
.messenger-voice-wave i {
    width: .07rem;
    max-width: .09rem;
    min-width: .055rem;
}
.messenger-voice-note-meta small::before { content: "/ "; opacity: .6; }

.messenger-bubble.is-video-note-only { overflow: visible !important; }
.messenger-video-note { overflow: visible; isolation: isolate; }
.messenger-video-note::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: -.32rem;
    border-radius: 50%;
    background: conic-gradient(var(--msg-accent) var(--video-note-progress, 0%), color-mix(in srgb, var(--msg-line) 68%, transparent) 0);
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .18rem), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .18rem), #000 0);
}
.messenger-video-note video { border-radius: 50%; clip-path: circle(50%); }
.messenger-video-note > time,
.messenger-bubble.is-video-note-only > span {
    bottom: .78rem;
    min-height: 1.1rem;
    box-sizing: border-box;
    align-items: center;
    line-height: .72rem;
}
.messenger-video-note > time { z-index: 7; left: .82rem; right: auto; }
.messenger-bubble.is-video-note-only > span { z-index: 7; right: .82rem; left: auto; }

/* ------------[Запись без тайм-лимита и широкая волна справа налево]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 57/203 */
.messenger-recording-panel.is-active::after {
    background: linear-gradient(90deg, transparent, #ef4444 48%, transparent);
    background-repeat: no-repeat;
    background-size: 34% 100%;
    animation: messenger-recording-scan 1.8s linear infinite;
}
.messenger-recording-wave {
    width: 100%;
    justify-content: space-between;
    direction: ltr;
    gap: 0;
}
.messenger-recording-wave i {
    width: .065rem;
    max-width: .065rem;
    flex: 0 0 .065rem;
}
.messenger-recording-panel.is-locked {
    grid-template-columns: auto auto minmax(5rem, 1fr) auto;
}
.messenger-recording-panel.is-locked .messenger-recording-lock {
    position: absolute;
    right: .2rem;
    bottom: 3.25rem;
}
.messenger-recording-panel.is-locked .messenger-recording-wave {
    grid-column: 3;
}
.messenger-recording-panel.is-locked .messenger-recording-send {
    grid-column: 4;
}

.messenger-recording-panel.is-video .messenger-recording-video {
    right: 2.25rem;
    box-shadow: 0 .45rem 1.15rem color-mix(in srgb, var(--msg-accent) 18%, transparent), 0 0 0 .18rem color-mix(in srgb, var(--msg-accent) 12%, transparent);
}
.messenger-recording-panel.is-video .messenger-recording-video::before {
    background: conic-gradient(transparent 0 72%, #ef4444 86% 100%);
    animation: messenger-video-ring-spin 1.35s linear infinite;
}

.messenger-bubble.is-voice-note-only {
    width: min(25rem, 82vw);
    min-height: 4.45rem;
    padding: .68rem .82rem .42rem;
}
.messenger-voice-note { grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem; }
.messenger-voice-note-toggle { width: 3rem; height: 3rem; }
.messenger-voice-wave { width: 100%; height: 2.15rem; }
.messenger-voice-wave > span {
    width: 100%;
    justify-content: space-between;
    gap: 0;
}
.messenger-voice-wave i {
    width: .065rem;
    min-width: .065rem;
    max-width: .065rem;
    flex: 0 0 .065rem;
}

.messenger-video-note {
    border-width: .1rem;
    box-shadow: 0 .24rem .62rem color-mix(in srgb, var(--msg-accent) 15%, transparent);
}
.messenger-video-note > button {
    width: 2.55rem;
    height: 2.55rem;
    border-color: color-mix(in srgb, #fff 52%, transparent);
    background: color-mix(in srgb, var(--msg-accent) 82%, #fff 18%);
    box-shadow: 0 .3rem .85rem rgb(2 6 23 / 14%);
}
.messenger-message.is-outgoing .messenger-bubble.is-video-note-only { margin-right: .75rem; }
.messenger-message.is-incoming .messenger-bubble.is-video-note-only { margin-left: .75rem; }

@keyframes messenger-recording-scan {
    from { background-position: -50% 0; }
    to { background-position: 150% 0; }
}
@keyframes messenger-video-ring-spin { to { transform: rotate(1turn); } }

/* ------------[Компактная голосовая капсула и раскрываемая расшифровка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 58/203 */
.messenger-bubble.is-voice-note-only {
    position: relative;
    width: min(20rem, 78vw);
    min-height: 3.65rem;
    padding: .48rem .65rem .42rem;
    border-radius: 1.05rem !important;
}
.messenger-message.has-tail.is-outgoing .messenger-bubble.is-voice-note-only { border-bottom-right-radius: .42rem !important; }
.messenger-message.has-tail.is-incoming .messenger-bubble.is-voice-note-only { border-bottom-left-radius: .42rem !important; }
.messenger-voice-note {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: .58rem;
}
.messenger-voice-note-toggle {
    width: 2.65rem;
    height: 2.65rem;
    align-self: start;
    box-shadow: inset 0 0 0 .16rem color-mix(in srgb, #fff 20%, transparent), 0 .25rem .7rem color-mix(in srgb, var(--msg-accent) 42%, transparent);
}
.messenger-voice-note-toggle .messenger-icon { width: .92rem; height: .92rem; }
.messenger-voice-note-content { gap: .08rem; }
.messenger-voice-wave { height: 1.42rem; }
.messenger-voice-wave i {
    width: .055rem;
    min-width: .055rem;
    max-width: .055rem;
    flex-basis: .055rem;
}
.messenger-voice-note-meta {
    min-height: 1rem;
    gap: .24rem;
    padding-right: 3.55rem;
}
.messenger-voice-note-meta > button {
    display: inline-grid;
    min-width: 1.45rem;
    height: 1.25rem;
    margin-left: .08rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 42%, transparent);
    border-radius: .42rem;
    padding: 0 .26rem;
    background: color-mix(in srgb, var(--msg-accent) 8%, transparent);
    color: var(--msg-accent);
    font-size: .52rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: 150ms ease;
}
.messenger-voice-note-meta > button:hover,
.messenger-voice-note-meta > button.is-active { background: var(--msg-accent); color: #fff; }
.messenger-voice-note-meta > span { margin-left: .06rem; }
.messenger-bubble.is-voice-note-only > span {
    position: absolute;
    right: .62rem;
    bottom: .52rem;
    margin: 0;
    white-space: nowrap;
}
.messenger-voice-transcript {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .4rem;
    margin: .5rem .08rem .08rem .22rem;
    padding: .48rem .55rem .48rem .72rem;
    border-left: .14rem solid var(--msg-accent);
    border-radius: 0 .65rem .65rem 0;
    background: color-mix(in srgb, var(--msg-accent) 7%, transparent);
    color: var(--msg-text);
    animation: messenger-transcript-open 180ms ease-out;
}
.messenger-voice-transcript.hidden {
    display: none !important;
}
.messenger-voice-transcript::before {
    content: "";
    position: absolute;
    top: -.28rem;
    left: -.31rem;
    width: .48rem;
    height: .48rem;
    border: .12rem solid var(--msg-accent);
    border-radius: 50%;
    background: var(--msg-panel-strong);
}
.messenger-message.is-incoming .messenger-voice-transcript::before { background: var(--msg-panel); }
.messenger-voice-transcript > i,
.messenger-voice-transcript > b {
    color: var(--msg-accent);
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 900;
    line-height: .9;
}
.messenger-voice-transcript > b { align-self: end; }
.messenger-voice-transcript > p {
    margin: 0;
    font-size: .64rem;
    font-weight: 650;
    line-height: 1.48;
    white-space: pre-wrap;
}

@keyframes messenger-transcript-open {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
    .messenger-bubble.is-voice-note-only { width: min(18.5rem, 84vw); }
    .messenger-voice-note-meta { padding-right: 3.15rem; }
}

@keyframes messenger-lock-lift {
    0%, 100% { opacity: .32; transform: translateY(.34rem); }
    50% { opacity: 1; transform: translateY(-.16rem); }
}
@keyframes messenger-lock-captured {
    0% { transform: scale(.72); }
    58% { transform: scale(1.2); }
    100% { transform: scale(1.08); }
}

/* ------------[Единая волна и аккуратная сворачиваемая расшифровка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 59/203 */
.messenger-recording-wave,
.messenger-voice-wave {
    width: min(100%, 13.5rem);
    max-width: 13.5rem;
    height: 1.55rem;
}
.messenger-recording-wave {
    min-width: 0;
    justify-self: end;
    justify-content: space-between;
    gap: 0;
}
.messenger-recording-wave i,
.messenger-voice-wave i {
    width: .09rem;
    min-width: .09rem;
    max-width: .09rem;
    flex: 0 0 .09rem;
    border-radius: 999px;
}
.messenger-voice-wave > span {
    justify-content: space-between;
    gap: 0;
}
.messenger-voice-note-meta > button {
    grid-auto-flow: column;
    gap: .14rem;
    min-width: 2.05rem;
}
.messenger-voice-note-meta > button .messenger-icon {
    width: .56rem;
    height: .56rem;
    transition: transform 160ms ease;
}
.messenger-voice-note-meta > button.is-active .messenger-icon {
    transform: rotate(180deg);
}
.messenger-voice-note-meta > button > span {
    display: inline;
    margin: 0;
    color: inherit;
}
.messenger-voice-note-meta > button:hover,
.messenger-voice-note-meta > button.is-active {
    border-color: var(--msg-accent);
    background: color-mix(in srgb, var(--msg-accent) 18%, var(--msg-panel));
    color: var(--msg-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 12%, transparent);
}
.messenger-bubble.is-voice-note-only > span {
    top: 2.55rem;
    bottom: auto;
}
.messenger-voice-transcript > i {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}
.messenger-voice-transcript > p {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}
.messenger-voice-transcript > b {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    letter-spacing: 0 !important;
}

@media (max-width: 560px) {
    .messenger-recording-wave,
    .messenger-voice-wave {
        width: min(100%, 11.5rem);
        max-width: 11.5rem;
    }
    .messenger-recording-wave,
    .messenger-recording-panel.is-locked .messenger-recording-wave {
        display: flex;
    }
}

/* ------------[Более компактная высота звуковых волн]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 60/203 */
.messenger-recording-wave,
.messenger-voice-wave {
    height: 1.25rem;
}
.messenger-recording-wave i {
    height: calc(.12rem + var(--record-level, .08) * 1.05rem);
}
.messenger-voice-wave i {
    transform: scaleY(.78);
    transform-origin: center;
}

/* ------------[Кольца прогресса и управление голосовым сообщением]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 61/203 */
.messenger-voice-note-content {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .3rem;
}
.messenger-voice-wave {
    grid-column: 1 / -1;
    grid-row: 1;
}
.messenger-voice-note-tools {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
}
.messenger-voice-note-meta {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
}
.messenger-voice-note-tools > button {
    display: inline-grid;
    height: 1.25rem;
    grid-auto-flow: column;
    place-items: center;
    gap: .14rem;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 42%, transparent);
    border-radius: .42rem;
    padding: 0 .32rem;
    background: color-mix(in srgb, var(--msg-accent) 8%, transparent);
    color: var(--msg-accent);
    font-size: .52rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: 150ms ease;
}
.messenger-voice-note-tools > button .messenger-icon {
    width: .56rem;
    height: .56rem;
    transition: transform 160ms ease;
}
.messenger-voice-note-tools > button:hover,
.messenger-voice-note-tools > button.is-active {
    border-color: var(--msg-accent);
    background: color-mix(in srgb, var(--msg-accent) 18%, var(--msg-panel));
}
.messenger-voice-note-tools > button.is-active .messenger-icon { transform: rotate(180deg); }
.messenger-voice-speed {
    min-width: 2rem !important;
    padding-inline: .28rem !important;
}
.messenger-voice-speed > span {
    display: inline !important;
    margin: 0 !important;
    color: inherit !important;
}

.messenger-voice-note-toggle {
    position: relative;
    isolation: isolate;
    overflow: visible;
}
.messenger-voice-note-toggle::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -.22rem;
    border-radius: 50%;
    background: conic-gradient(var(--msg-accent) var(--voice-note-progress, 0%), color-mix(in srgb, var(--msg-line) 70%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .13rem), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .13rem), #000 0);
}
.messenger-voice-note-toggle > .messenger-icon {
    position: relative;
    z-index: 1;
}
.messenger-voice-note-toggle::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -.29rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% .12rem, var(--msg-accent) 0 .1rem, transparent .12rem);
    transform: rotate(var(--voice-note-angle, 0deg));
    pointer-events: none;
    transition: transform 90ms linear;
}

.messenger-video-note::after,
.messenger-recording-panel.is-video .messenger-recording-video::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: -.39rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% .11rem, #ef4444 0 .13rem, #fff .14rem .18rem, transparent .19rem);
    transform: rotate(var(--video-note-angle, 0deg));
    pointer-events: none;
    transition: transform 90ms linear;
}
.messenger-recording-panel.is-video .messenger-recording-video::before {
    background: conic-gradient(#ef4444 var(--recording-progress, 0%), color-mix(in srgb, var(--msg-line) 72%, transparent) 0);
    animation: none;
}
.messenger-recording-panel.is-video .messenger-recording-video::after {
    z-index: 5;
    transform: rotate(var(--recording-angle, 0deg));
}
.messenger-video-note::after {
    background: radial-gradient(circle at 50% .11rem, var(--msg-accent) 0 .13rem, #fff .14rem .18rem, transparent .19rem);
}

/* ------------[Две строки голосового и свайп записи к корзине]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 62/203 */
.messenger-voice-note-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .08rem;
}
.messenger-voice-note-top {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .32rem;
}
.messenger-voice-note-top .messenger-voice-wave {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
}
.messenger-voice-speed {
    display: inline-grid;
    min-width: 2.05rem !important;
    height: 1.4rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 42%, transparent);
    border-radius: .45rem;
    padding: 0 .3rem !important;
    background: color-mix(in srgb, var(--msg-accent) 8%, transparent);
    color: var(--msg-accent);
    font-size: .53rem;
    font-weight: 900;
    cursor: pointer;
}
.messenger-voice-speed:hover,
.messenger-voice-speed.is-active {
    border-color: var(--msg-accent);
    background: color-mix(in srgb, var(--msg-accent) 18%, var(--msg-panel));
}
.messenger-voice-mic {
    display: grid;
    margin: 0;
    color: var(--msg-accent);
}
.messenger-voice-mic .messenger-icon { width: .72rem; height: .72rem; }
.messenger-voice-note-tools {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    align-items: center;
    padding-right: 3.45rem;
}
.messenger-voice-note-tools .messenger-voice-note-meta {
    display: flex;
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-left: auto;
    padding: 0;
}

/* ------------[Финальный приоритет состояний передачи и отмены]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 63/203 */
.messenger-voice-note-toggle::before,
.messenger-voice-note-toggle::after,
.messenger-video-note::before,
.messenger-video-note::after {
    display: none !important;
}
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::before,
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::after,
.messenger-video-note:is(.is-uploading, .is-downloading)::before,
.messenger-video-note:is(.is-uploading, .is-downloading)::after {
    display: block !important;
}
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::after,
.messenger-video-note.is-transfer-indeterminate::after {
    display: none !important;
}
.messenger-recording-panel.is-canceling {
    background:
        radial-gradient(ellipse 7rem 3rem at 1.4rem 50%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 0 18%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 38%, transparent 72%),
        var(--msg-panel);
}
.messenger-recording-panel.is-cancel-ready {
    background:
        radial-gradient(ellipse 7rem 3rem at 1.4rem 50%, rgb(239 68 68 / 34%) 0, rgb(239 68 68 / 14%) 42%, transparent 74%),
        var(--msg-panel);
}

/* ------------[Плотная аккуратная аудиограмма]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 64/203 */
.messenger-recording-wave,
.messenger-voice-wave {
    width: min(100%, 10rem);
    max-width: 10rem;
    height: 1.15rem;
}
.messenger-voice-note-top .messenger-voice-wave {
    width: min(100%, 10rem);
    max-width: 10rem;
    flex: 1 1 10rem;
}
.messenger-recording-wave,
.messenger-voice-wave > span {
    justify-content: flex-start;
    gap: .0625rem;
}
.messenger-recording-wave i,
.messenger-voice-wave i {
    width: .1rem;
    min-width: .1rem;
    max-width: .1rem;
    flex: 0 0 .1rem;
    border-radius: 999px;
}
.messenger-recording-wave i {
    height: calc(.1rem + var(--record-level, .08) * .78rem);
}
.messenger-voice-wave i {
    transform: none;
}
.messenger-voice-transcript {
    direction: ltr;
    text-align: left;
}
.messenger-voice-transcript > p {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* ------------[Передача медиа: кольцо только при загрузке]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 65/203 */
@property --media-transfer-progress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}
.messenger-voice-note:is(.is-uploading, .is-downloading),
.messenger-video-note:is(.is-uploading, .is-downloading) {
    transition: --media-transfer-progress 120ms linear;
}
.messenger-voice-note-toggle::before,
.messenger-voice-note-toggle::after,
.messenger-video-note::before,
.messenger-video-note::after {
    display: none;
}
.messenger-voice-note-toggle {
    box-shadow: 0 .25rem .7rem color-mix(in srgb, var(--msg-accent) 34%, transparent);
}
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::before,
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::after,
.messenger-video-note:is(.is-uploading, .is-downloading)::before,
.messenger-video-note:is(.is-uploading, .is-downloading)::after {
    display: block;
}
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::before,
.messenger-video-note:is(.is-uploading, .is-downloading)::before {
    background: conic-gradient(var(--msg-accent) var(--media-transfer-progress, 0%), color-mix(in srgb, var(--msg-line) 72%, transparent) 0);
}
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::after,
.messenger-video-note:is(.is-uploading, .is-downloading)::after {
    transform: rotate(var(--media-transfer-angle, 0deg));
    transition: transform 100ms linear;
}
.messenger-video-note:is(.is-uploading, .is-downloading)::after {
    background: radial-gradient(circle at 50% .11rem, var(--msg-accent) 0 .13rem, #fff .14rem .18rem, transparent .19rem);
}
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::before,
.messenger-video-note.is-transfer-indeterminate::before {
    background: conic-gradient(transparent 0 66%, var(--msg-accent) 76% 100%);
    animation: messenger-media-transfer-spin .82s linear infinite;
}
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::after,
.messenger-video-note.is-transfer-indeterminate::after { display: none; }
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle,
.messenger-video-note:is(.is-uploading, .is-downloading) > button {
    cursor: pointer;
}
.messenger-voice-note.is-download-required .messenger-voice-wave input { pointer-events: none; }
@keyframes messenger-media-transfer-spin { to { transform: rotate(1turn); } }
.messenger-message:has(.is-uploading) .messenger-bubble {
    animation: messenger-upload-appear 220ms cubic-bezier(.2, .8, .25, 1) both;
}
.messenger-message.is-upload-complete .messenger-bubble {
    animation: messenger-upload-complete 360ms cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes messenger-upload-appear {
    from { opacity: 0; transform: translateY(.45rem) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes messenger-upload-complete {
    0% { opacity: .72; transform: scale(.985); }
    58% { transform: scale(1.018); }
    100% { opacity: 1; transform: scale(1); }
}

/* ------------[Настройка автозагрузки медиа]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 67/203 */
.messenger-media-settings-wrap {
    position: relative;
    display: grid;
}
.messenger-media-settings-wrap > .messenger-settings-stub.is-active {
    border-color: var(--msg-accent);
    color: var(--msg-accent);
}
.messenger-media-settings {
    position: absolute;
    z-index: 80;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    width: min(18rem, 78vw);
    gap: .55rem;
    border: 1px solid var(--msg-line);
    border-radius: .85rem;
    padding: .72rem;
    background: var(--msg-panel-strong);
    color: var(--msg-text);
    box-shadow: 0 .9rem 2.2rem rgb(2 6 23 / 20%);
}
.messenger-media-settings > strong { font-size: .64rem; }
.messenger-media-settings > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}
.messenger-media-settings > label > span { display: grid; gap: .12rem; }
.messenger-media-settings > label b { font-size: .59rem; }
.messenger-media-settings > label small { color: var(--msg-muted); font-size: .5rem; line-height: 1.35; }
.messenger-media-settings input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.messenger-media-settings label > i {
    position: relative;
    width: 2rem;
    height: 1.08rem;
    border-radius: 999px;
    background: var(--msg-line);
    transition: 160ms ease;
}
.messenger-media-settings label > i::after {
    content: "";
    position: absolute;
    top: .14rem;
    left: .14rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--msg-panel-strong);
    box-shadow: 0 .08rem .25rem rgb(2 6 23 / 24%);
    transition: transform 160ms ease;
}
.messenger-media-settings input:checked + i { background: var(--msg-accent); }
.messenger-media-settings input:checked + i::after { transform: translateX(.92rem); }

.messenger-voice-note-toggle::before {
    background: conic-gradient(var(--msg-accent) var(--voice-load-progress, 0%), color-mix(in srgb, var(--msg-line) 70%, transparent) 0);
}
.messenger-voice-note-toggle::after {
    transform: rotate(var(--voice-load-angle, 0deg));
    transition: transform 140ms linear;
}
.messenger-voice-note.is-loading .messenger-voice-note-toggle::after {
    animation: messenger-voice-loading-orbit .85s linear infinite;
}
.messenger-video-note::after { transition: none; }

.messenger-recording-panel {
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
.messenger-recording-panel .messenger-recording-wave,
.messenger-recording-panel .messenger-recording-status,
.messenger-recording-panel .messenger-recording-lock {
    transform: translateX(var(--recording-swipe-x, 0));
    transition: transform 90ms linear, color 140ms ease;
}
.messenger-recording-panel.is-canceling {
    background: color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), var(--msg-panel));
}
.messenger-recording-panel.is-canceling .messenger-recording-wave i {
    background: color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), var(--msg-accent));
}
.messenger-recording-panel.is-canceling .messenger-recording-status strong,
.messenger-recording-panel.is-canceling .messenger-recording-status span {
    color: color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), var(--msg-text));
}
.messenger-recording-panel.is-canceling .messenger-recording-cancel {
    color: #ef4444;
    transform: scale(var(--recording-trash-scale, 1));
    box-shadow: 0 0 0 var(--recording-trash-ring, 0) color-mix(in srgb, #ef4444 18%, transparent);
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-cancel {
    background: #ef4444;
    color: #fff;
    animation: messenger-recording-trash-ready .6s ease-in-out infinite alternate;
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-wave,
.messenger-recording-panel.is-cancel-ready .messenger-recording-status { opacity: .5; }

@keyframes messenger-voice-loading-orbit { to { transform: rotate(1turn); } }
@keyframes messenger-recording-trash-ready { to { transform: scale(1.14); box-shadow: 0 0 0 .38rem color-mix(in srgb, #ef4444 20%, transparent); } }

/* ------------[Фиксированная раскладка управления голосовым]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 68/203 */
.messenger-voice-note > .messenger-voice-note-content {
    display: block;
    grid-template-columns: none;
}
.messenger-voice-note-top {
    display: flex !important;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: .34rem;
}
.messenger-voice-note-top .messenger-voice-wave {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
}
.messenger-voice-note-top .messenger-voice-speed,
.messenger-voice-note-top .messenger-voice-mic {
    flex: 0 0 auto;
    align-self: center;
}
.messenger-voice-note-top .messenger-voice-speed {
    min-width: 1.85rem !important;
    height: 1.25rem;
    border-radius: .42rem;
    padding: 0 .26rem !important;
    background: color-mix(in srgb, var(--msg-accent) 8%, transparent);
    font-size: .52rem;
    line-height: 1;
}
.messenger-voice-note-tools {
    display: flex !important;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: .38rem;
    margin-top: .08rem;
    padding: 0 3.45rem 0 0;
}
.messenger-voice-note-tools .messenger-voice-note-meta {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: .22rem;
    margin: 0;
    padding: 0;
}

/* ------------[Последний слой: загрузка медиа и зона корзины]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 69/203 */
.messenger-voice-note-toggle::before,
.messenger-voice-note-toggle::after,
.messenger-video-note::before,
.messenger-video-note::after { display: none !important; }
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::before,
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::after,
.messenger-video-note:is(.is-uploading, .is-downloading)::before,
.messenger-video-note:is(.is-uploading, .is-downloading)::after { display: block !important; }
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::after,
.messenger-video-note.is-transfer-indeterminate::after { display: none !important; }
.messenger-recording-panel.is-canceling {
    background:
        radial-gradient(ellipse 7rem 3rem at 1.4rem 50%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 0 18%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 38%, transparent 72%),
        var(--msg-panel);
}
.messenger-recording-panel.is-cancel-ready {
    background:
        radial-gradient(ellipse 7rem 3rem at 1.4rem 50%, rgb(239 68 68 / 34%) 0, rgb(239 68 68 / 14%) 42%, transparent 74%),
        var(--msg-panel);
}

/* Окончательный приоритет рамок после всех исторических переопределений. */
.messenger-voice-note-toggle::before {
    display: block !important;
    background: color-mix(in srgb, var(--msg-accent) 24%, transparent) !important;
}
.messenger-voice-note-toggle::after { display: none !important; }
.messenger-voice-note:is(.is-uploading, .is-downloading) .messenger-voice-note-toggle::before {
    background: conic-gradient(var(--msg-accent) var(--media-transfer-progress, 0%), color-mix(in srgb, var(--msg-accent) 24%, transparent) 0) !important;
}
.messenger-voice-note:is(.is-uploading, .is-downloading):not(.is-transfer-indeterminate) .messenger-voice-note-toggle::after {
    display: block !important;
    transform: rotate(var(--media-transfer-angle, 0deg));
}
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::before {
    background: conic-gradient(transparent 0 66%, var(--msg-accent) 76% 100%) !important;
}
.messenger-voice-note.is-transfer-indeterminate .messenger-voice-note-toggle::after { display: none !important; }

.messenger-video-note:not(.is-uploading):not(.is-downloading):not(.is-download-required)::before {
    display: block !important;
    background: conic-gradient(var(--msg-accent) var(--video-play-progress, 0%), color-mix(in srgb, var(--msg-accent) 22%, transparent) 0) !important;
    transform: scale(.86);
    transition: transform 220ms cubic-bezier(.2, .8, .25, 1), opacity 160ms ease;
}
.messenger-video-note.has-play-progress:not(.is-uploading):not(.is-downloading)::after {
    display: block !important;
    background: radial-gradient(circle at 50% .11rem, var(--msg-accent) 0 .13rem, #fff .14rem .18rem, transparent .19rem) !important;
    transform: rotate(var(--video-play-angle, 0deg)) scale(.86);
    transition: transform 220ms cubic-bezier(.2, .8, .25, 1);
}
.messenger-video-note.is-playing:not(.is-uploading):not(.is-downloading)::before {
    transform: scale(1);
}
.messenger-video-note.is-playing.has-play-progress:not(.is-uploading):not(.is-downloading)::after {
    transform: rotate(var(--video-play-angle, 0deg)) scale(1);
}
.messenger-video-note:is(.is-uploading, .is-downloading)::before {
    display: block !important;
    background: conic-gradient(var(--msg-accent) var(--media-transfer-progress, 0%), color-mix(in srgb, var(--msg-accent) 22%, transparent) 0) !important;
    transform: scale(1);
}
.messenger-video-note:is(.is-uploading, .is-downloading):not(.is-transfer-indeterminate)::after {
    display: block !important;
    transform: rotate(var(--media-transfer-angle, 0deg)) scale(1);
}
.messenger-video-note.is-transfer-indeterminate::before {
    background: conic-gradient(transparent 0 66%, var(--msg-accent) 76% 100%) !important;
}
.messenger-video-note.is-transfer-indeterminate::after { display: none !important; }

/* Крупнее основное управление; у видеокружка центр остаётся только для передачи файла. */
.messenger-voice-note {
    grid-template-columns: 3.15rem minmax(0, 1fr);
}
.messenger-voice-note-toggle {
    width: 3.15rem;
    height: 3.15rem;
}
.messenger-voice-note-toggle .messenger-icon {
    width: 1.12rem;
    height: 1.12rem;
}
.messenger-video-note {
    cursor: pointer;
}
.messenger-video-note video {
    cursor: pointer;
    outline: none;
}
.messenger-video-note > button {
    width: 3.15rem;
    height: 3.15rem;
}
.messenger-video-note > button .messenger-icon {
    width: 1.3rem;
    height: 1.3rem;
}

/* Расшифровка всегда остаётся внутри ширины голосового сообщения. */
.messenger-voice-transcript {
    width: auto;
    max-width: calc(100% - .22rem);
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}
.messenger-voice-transcript > p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Живой статус собеседника. */
#messenger-peer-activity {
    min-height: 1em;
    transition: color 160ms ease, opacity 160ms ease;
}
#messenger-peer-activity.is-active {
    color: var(--msg-accent);
    font-weight: 750;
    animation: messenger-peer-activity-pulse 1.25s ease-in-out infinite alternate;
}
@keyframes messenger-peer-activity-pulse {
    from { opacity: .62; }
    to { opacity: 1; }
}

/* Два независимых пункта автозагрузки. */
.messenger-media-settings > label + label {
    margin-top: .12rem;
    padding-top: .62rem;
    border-top: 1px solid var(--msg-line);
}

/* Подготовка расшифровки вместо преждевременной кнопки Aa. */
.messenger-voice-note-tools > button.is-preparing {
    width: 1.7rem;
    min-width: 1.7rem;
    padding: 0;
    cursor: wait;
    opacity: .86;
}
.messenger-transcript-spinner {
    display: block !important;
    width: .72rem;
    height: .72rem;
    margin: 0 !important;
    border: .12rem solid color-mix(in srgb, var(--msg-accent) 24%, transparent);
    border-top-color: var(--msg-accent);
    border-radius: 50%;
    animation: messenger-transcript-spin .72s linear infinite;
}
@keyframes messenger-transcript-spin { to { transform: rotate(1turn); } }

/* Ручная загрузка фотографий и обычных медиафайлов. */
.messenger-photo-manual {
    position: relative;
    cursor: pointer !important;
}
.messenger-photo-manual > img:not([src]) {
    background: color-mix(in srgb, var(--msg-accent) 8%, var(--msg-panel));
}
.messenger-photo-manual > span {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 42%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--msg-panel-strong) 86%, transparent);
    color: var(--msg-accent);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(6px);
}
.messenger-photo-manual > span .messenger-icon { width: 1.05rem; height: 1.05rem; }
.messenger-photo-manual.is-downloading::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: conic-gradient(var(--msg-accent) var(--photo-download-progress, 0%), color-mix(in srgb, var(--msg-accent) 20%, transparent) 0);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .13rem), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .13rem), #000 0);
}
.messenger-photo-manual.is-downloaded > span {
    border-color: color-mix(in srgb, #22c55e 58%, transparent);
    color: #16a34a;
    animation: vmesta-download-check-pop .38s cubic-bezier(.2, .9, .25, 1.35);
}
.messenger-generic-media {
    position: relative;
    min-height: 3rem;
}
.messenger-video-grid .messenger-generic-media > button {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #fff 40%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--msg-panel-strong) 82%, transparent);
    color: var(--msg-accent);
    transform: translate(-50%, -50%);
    cursor: pointer;
    backdrop-filter: blur(7px);
}
.messenger-audio-card.messenger-generic-media > button {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid var(--msg-line);
    border-radius: 50%;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    cursor: pointer;
}
.messenger-generic-media > button .messenger-icon { width: 1rem; height: 1rem; }
:is(.messenger-generic-media.is-downloaded > button, .messenger-voice-note.is-downloaded .messenger-voice-note-toggle, .messenger-video-note.is-downloaded > button) {
    border-color: color-mix(in srgb, #22c55e 58%, transparent);
    color: #16a34a;
    animation: vmesta-download-check-pop .38s cubic-bezier(.2, .9, .25, 1.35);
}

/* Настройки сообщений находятся в заголовке, а не среди папок. */
.messenger-header-media-settings {
    position: relative;
    display: grid;
    flex: 0 0 auto;
}
.messenger-header-media-settings > .messenger-settings-stub.is-active {
    border-color: var(--msg-line);
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
}
.messenger-header-media-settings .messenger-media-settings {
    top: calc(100% + .5rem);
    right: 0;
}

/* ------------[Гладкое кольцо видеосообщения]------------ // Непрозрачная SVG-дорожка закрывает тёмный край видео и убирает «лесенку» рядом с бегущей точкой. Модуль: «оформление интерфейса». Часть 70/203 */
.messenger-video-note:not(.is-uploading):not(.is-downloading)::before,
.messenger-video-note:not(.is-uploading):not(.is-downloading)::after {
    display: none !important;
}
.messenger-video-note-ring {
    position: absolute;
    z-index: 6;
    inset: -.34rem;
    width: calc(100% + .68rem);
    height: calc(100% + .68rem);
    overflow: visible;
    pointer-events: none;
    shape-rendering: geometricPrecision;
    transform: scale(1);
    transform-origin: center;
    transition: transform 230ms cubic-bezier(.2, .8, .25, 1), filter 180ms ease;
}
.messenger-video-note:is(.is-uploading, .is-downloading, .is-download-required) .messenger-video-note-ring {
    display: none;
}
.messenger-video-note.is-paused:not(.is-playing):not(.is-uploading):not(.is-downloading) .messenger-video-note-ring {
    transform: scale(.88);
}
.messenger-video-note.is-playing .messenger-video-note-ring {
    transform: scale(1);
    filter: drop-shadow(0 0 .18rem color-mix(in srgb, var(--msg-accent) 32%, transparent));
}
.messenger-video-note-ring circle {
    vector-effect: none;
    fill: none;
}
.messenger-video-note-ring-track {
    stroke: color-mix(in srgb, var(--msg-accent) 24%, var(--msg-panel-strong));
    stroke-width: 1.42;
}
.messenger-video-note-ring-progress {
    stroke: var(--msg-accent);
    stroke-width: 1.72;
    stroke-linecap: round;
    /* Длина задаётся SVG-атрибутом в координатах viewBox: 2πr. */
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-box: view-box;
    transform-origin: center;
}
.messenger-video-note-ring-thumb {
    r: 2.4;
    fill: var(--msg-accent) !important;
    stroke: color-mix(in srgb, #fff 84%, var(--msg-accent));
    stroke-width: .3;
    opacity: 1;
    transform: rotate(var(--video-play-angle, 0deg));
    transform-box: view-box;
    transform-origin: center;
    transition: r 180ms ease, opacity 120ms ease;
}
.messenger-video-note.is-playing .messenger-video-note-ring-thumb { r: 2.75; }
.messenger-video-note:has(video:focus-visible) .messenger-video-note-ring-track {
    stroke: color-mix(in srgb, var(--msg-accent) 48%, transparent);
}

/* Расшифровка строго слева направо и без выхода линии за карточку. */
.messenger-voice-transcript {
    direction: ltr !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
    unicode-bidi: isolate !important;
}
.messenger-voice-transcript > i { grid-column: 1 !important; }
.messenger-voice-transcript > p {
    grid-column: 2 !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext !important;
}
.messenger-voice-transcript > b { grid-column: 3 !important; }

/* Плавная локальная подсветка строго под корзиной. */
@property --recording-cancel-progress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}
.messenger-recording-panel {
    transition: --recording-cancel-progress 130ms linear, background-color 180ms ease;
}
.messenger-recording-panel.is-canceling,
.messenger-recording-panel.is-cancel-ready {
    background:
        radial-gradient(circle 2.25rem at 1.45rem 50%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 0 34%, color-mix(in srgb, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 34%, transparent) 58%, transparent 76%),
        var(--msg-panel);
}
.messenger-recording-panel .messenger-recording-cancel {
    transition: color 180ms ease, background-color 180ms ease, transform 160ms ease, box-shadow 180ms ease;
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-cancel {
    animation: none;
    background: color-mix(in srgb, #ef4444 88%, var(--msg-panel));
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-wave,
.messenger-recording-panel.is-cancel-ready .messenger-recording-status {
    opacity: 1;
}

/* Убираем старые постоянные ободки: прогресс остаётся только в новом кольце. */
.messenger-video-note {
    border: 0 !important;
    box-shadow: 0 .24rem .62rem color-mix(in srgb, var(--msg-accent) 15%, transparent);
}
.messenger-recording-panel.is-video .messenger-recording-video {
    border: 0 !important;
    box-shadow: 0 .45rem 1.15rem color-mix(in srgb, var(--msg-accent) 18%, transparent);
}

/* Ответ занимает собственную компактную строку без разъезжающихся отступов. */
.messenger-composer:has(> .messenger-composer-reply) {
    row-gap: .12rem;
    padding-top: .3rem;
}
.messenger-composer > .messenger-composer-reply {
    width: auto;
    min-height: 2.2rem;
    box-sizing: border-box;
    margin: 0 .08rem .04rem;
    padding: .26rem .36rem .32rem;
    align-self: stretch;
}

/* ------------[Гладкое кольцо записи видео]------------ // Та же непрозрачная дорожка используется в предпросмотре, поэтому чёрный фон не просвечивает возле маркера. Модуль: «оформление интерфейса». Часть 71/203 */
.messenger-recording-panel.is-video .messenger-recording-video::before,
.messenger-recording-panel.is-video .messenger-recording-video::after {
    display: none !important;
}
.messenger-recording-panel.is-video .messenger-recording-video > i {
    display: none;
}
.messenger-recording-video-ring {
    position: absolute;
    z-index: 6;
    inset: -.34rem;
    width: calc(100% + .68rem);
    height: calc(100% + .68rem);
    overflow: visible;
    pointer-events: none;
    shape-rendering: geometricPrecision;
}
.messenger-recording-video-ring circle {
    fill: none;
    vector-effect: none;
}
.messenger-recording-video-ring-track {
    stroke: color-mix(in srgb, #ef4444 24%, var(--msg-panel-strong));
    stroke-width: 1.38;
}
.messenger-recording-video-ring-progress {
    stroke: #ef4444;
    stroke-width: 1.68;
    stroke-linecap: round;
    /* Длина задаётся SVG-атрибутом в координатах viewBox: 2πr. */
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-box: view-box;
    transform-origin: center;
}
.messenger-recording-video-ring-thumb {
    fill: #ef4444 !important;
    stroke: #fff;
    stroke-width: .28;
    transform: rotate(var(--recording-angle, 0deg));
    transform-box: view-box;
    transform-origin: center;
}

/* Перетаскиваемая точка кольца видеосообщения. */
.messenger-video-note.is-seeking .messenger-video-note-ring {
    transform: scale(1);
    filter: drop-shadow(0 0 .24rem color-mix(in srgb, var(--msg-accent) 42%, transparent));
}
.messenger-video-note.is-paused.is-seeking .messenger-video-note-ring {
    transform: scale(.88);
}
.messenger-video-note.is-seeking .messenger-video-note-ring-thumb {
    r: 3;
    opacity: 1;
}

/* Статус действия собеседника в общем списке диалогов. */
.messenger-chat-preview.is-activity {
    color: var(--msg-accent);
    font-weight: 800;
    animation: messenger-peer-activity-pulse 1.25s ease-in-out infinite alternate;
}

/* Полностью гасим прежнее conic-кольцо у уже загруженного видеосообщения. */
.messenger-video-note:not(.is-uploading):not(.is-downloading):not(.is-download-required)::before,
.messenger-video-note:not(.is-uploading):not(.is-downloading):not(.is-download-required)::after {
    content: none !important;
    display: none !important;
}

/* ------------[Статус верификации]------------ // Единая карточка подтверждения для профиля и пространства с заметной галочкой справа. Модуль: «оформление интерфейса». Часть 72/203 */
.profile-verification-card,
.space-verification-card {
    display: flex !important;
    min-width: 0;
    min-height: 6rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 62%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--adaptive-surface, #fff) 94%, var(--color-dynamic, #d76f2a) 6%);
    padding: 1rem 1.1rem;
}

.space-verification-card {
    min-height: 7.35rem;
    align-items: center;
    overflow: hidden;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.space-verification-card .space-verification-action {
    position: static;
    margin: .55rem 0 0;
    flex: 0 0 auto;
}

.profile-verification-copy,
.space-verification-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .22rem;
}

.profile-verification-copy > span,
.space-verification-copy > span {
    color: var(--color-dynamic, #d76f2a);
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.profile-verification-copy strong,
.space-verification-copy strong {
    color: var(--adaptive-text, #382419);
    font-size: .86rem;
    font-weight: 950;
    line-height: 1.25;
}

.profile-verification-copy small,
.space-verification-copy small {
    color: color-mix(in srgb, var(--adaptive-text, #382419), transparent 42%);
    font-size: .66rem;
    font-weight: 720;
    line-height: 1.35;
}

.verification-mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 64%);
    border-radius: 999px;
    color: color-mix(in srgb, var(--adaptive-text, #382419), transparent 65%);
    background: color-mix(in srgb, var(--adaptive-surface, #fff), transparent 14%);
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.verification-mark svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verification-mark::before,
.cover-account-verification-mark::before,
.verification-own-mark::before {
    content: "";
    display: block;
    width: 58%;
    height: 58%;
    background: currentColor;
    -webkit-mask: url('/assets/verified-medal.svg?v=20260904.1') center / contain no-repeat;
    mask: url('/assets/verified-medal.svg?v=20260904.1') center / contain no-repeat;
}

.verification-mark > svg,
.cover-account-verification-mark > svg,
.verification-own-mark > svg { display: none; }

.verification-mark.is-verified {
    color: #fff;
    border-color: var(--color-dynamic, #d76f2a);
    background: var(--color-dynamic, #d76f2a);
    box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 66%);
    transform: scale(1.04);
}

.profile-verification-action,
.space-verification-action {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    justify-content: center;
    margin-top: .38rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 48%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 88%);
    color: var(--color-dynamic, #d76f2a) !important;
    padding: .34rem .72rem;
    font-size: .64rem !important;
    font-weight: 900 !important;
    line-height: 1;
    transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}

.profile-verification-action.hidden { display: none !important; }
.profile-verification-action:hover,
.space-verification-action:hover { transform: translateY(-1px); }
.profile-verification-action.is-revoke,
.space-verification-action.is-revoke {
    border-color: color-mix(in srgb, #ef4444, transparent 55%);
    background: color-mix(in srgb, #ef4444, transparent 90%);
    color: #dc2626 !important;
}
.profile-verification-action:disabled,
.space-verification-action:disabled { cursor: wait; opacity: .55; }

@media (max-width: 520px) {
    .profile-verification-card,
    .space-verification-card { min-height: 5.4rem; padding: .85rem; }
    .verification-mark { width: 2.65rem; height: 2.65rem; flex-basis: 2.65rem; }
}

/* ------------[Запрос верификации в редакторе]------------ // Размещает кнопку запроса напротив имени и показывает текущее состояние заявки. Модуль: «оформление интерфейса». Часть 73/203 */
.cover-account-name-verification-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .85fr);
    align-items: stretch;
    gap: 1.1rem;
}
.cover-account-name-verification-row .cover-account-name-row {
    grid-template-columns: minmax(8rem, 10.5rem) minmax(10rem, 1fr) !important;
    gap: .72rem !important;
    border-top: 0 !important;
    padding: .78rem 0 !important;
}
.cover-account-name-verification-row .cover-account-name-row > input {
    width: 100% !important;
    justify-self: stretch !important;
}
.cover-account-verification {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    margin: .62rem 0;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 65%);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--adaptive-surface, #fff) 91%, var(--color-dynamic, #d76f2a) 9%);
    padding: .55rem .65rem;
}
.cover-account-verification-mark {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 58%);
    border-radius: 999px;
    color: color-mix(in srgb, var(--adaptive-text, #382419), transparent 56%);
    background: color-mix(in srgb, var(--adaptive-surface, #fff), transparent 12%);
}
.cover-account-verification-mark svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cover-account-verification > div { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.cover-account-verification strong { color: var(--adaptive-text, #382419); font-size: .72rem; font-weight: 950; }
.cover-account-verification small { overflow: hidden; color: var(--adaptive-muted, #8b6a58); font-size: .59rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cover-account-verification > button {
    min-height: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 42%);
    border-radius: 999px;
    background: var(--color-dynamic, #d76f2a);
    color: #fff;
    padding: .42rem .72rem;
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}
.cover-account-verification[data-status="pending"] .cover-account-verification-mark { color: var(--color-dynamic, #d76f2a); animation: verification-request-pulse 1.5s ease-in-out infinite; }
.cover-account-verification[data-status="verified"] .cover-account-verification-mark { border-color: var(--color-dynamic, #d76f2a); color: #fff; background: var(--color-dynamic, #d76f2a); }
.cover-account-verification[data-status="rejected"] .cover-account-verification-mark { border-color: color-mix(in srgb, #ef4444, transparent 45%); color: #ef4444; }
.cover-account-verification > button:disabled { cursor: default; opacity: .62; }
@keyframes verification-request-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 88%); } }

/* ------------[Очередь верификации]------------ // Компактный центр заявок в разделе «Остальное». Модуль: «оформление интерфейса». Часть 74/203 */
.verification-menu-count {
    display: inline-grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-dynamic, #d76f2a);
    color: #fff;
    padding: 0 .3rem;
    font-size: .58rem;
    font-weight: 950;
}
.verification-menu-count.hidden { display: none !important; }
.settings-profile-other-btn { position: relative; padding-right: 2.2rem; }
.settings-profile-next { position: absolute; right: .85rem; color: var(--adaptive-muted, #8b6a58); font-size: 1.05rem; font-weight: 900; }
.settings-profile-rank-btn > .settings-profile-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .14rem;
}
.settings-profile-rank-btn > .settings-profile-copy strong,
.settings-profile-rank-btn > .settings-profile-copy small {
    display: block;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.verification-center-modal { position: fixed; inset: 0; z-index: 23000; display: grid; place-items: center; padding: 1rem; }
.verification-center-modal.hidden { display: none !important; }
.verification-center-backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / .64); backdrop-filter: blur(14px); }
.verification-center-panel {
    position: relative;
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(82vh, 44rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 56%);
    border-radius: 1.35rem;
    background: var(--adaptive-surface, #fff);
    box-shadow: 0 28px 80px rgb(15 23 42 / .32);
}
.verification-center-panel > header { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 2.3rem; align-items: center; gap: .75rem; border-bottom: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 72%); padding: 1rem 1.1rem; }
.verification-center-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .85rem; color: var(--color-dynamic, #d76f2a); background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 86%); }
.verification-center-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verification-center-panel > header div { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.verification-center-panel > header small,.verification-queue-head span { color: var(--color-dynamic, #d76f2a); font-size: .57rem; font-weight: 950; letter-spacing: .14em; }
.verification-center-panel > header strong { color: var(--adaptive-text, #382419); font-size: 1rem; font-weight: 950; }
.verification-center-close { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 999px; color: var(--adaptive-muted, #8b6a58); font-size: 1.35rem; }
.verification-center-close:hover { background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 88%); }
.verification-center-body { max-height: calc(min(82vh, 44rem) - 4.8rem); overflow-y: auto; padding: 1rem; }
.verification-center-loading { padding: 2.5rem 1rem; color: var(--adaptive-muted, #8b6a58); text-align: center; font-size: .75rem; font-weight: 800; }
.verification-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .2rem .85rem; }
.verification-queue-head > div { display: flex; flex-direction: column; gap: .16rem; }
.verification-queue-head strong { color: var(--adaptive-text, #382419); font-size: .86rem; font-weight: 950; }
.verification-queue-head b { display: grid; min-width: 2rem; height: 2rem; place-items: center; border-radius: .7rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 84%); color: var(--color-dynamic, #d76f2a); font-size: .72rem; font-weight: 950; }
.verification-request-list { display: grid; gap: .6rem; }
.verification-request-card { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; align-items: center; gap: .7rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 72%); border-radius: 1rem; background: color-mix(in srgb, var(--adaptive-surface, #fff) 94%, var(--color-dynamic, #d76f2a) 6%); padding: .72rem; }
.verification-request-card > img { width: 2.7rem; height: 2.7rem; border-radius: .8rem; object-fit: cover; }
.verification-request-copy { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.verification-request-copy strong { overflow: hidden; color: var(--adaptive-text, #382419); font-size: .76rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.verification-request-copy strong > span { color: var(--adaptive-muted, #8b6a58); font-size: .61rem; font-weight: 760; }
.verification-request-copy small { overflow: hidden; color: var(--adaptive-muted, #8b6a58); font-size: .62rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.verification-request-actions { display: flex; gap: .42rem; }
.verification-request-actions button,.verification-own-card > button { min-height: 2rem; border-radius: 999px; padding: .42rem .72rem; font-size: .61rem; font-weight: 900; white-space: nowrap; }
.verification-request-actions .is-reject { border: 1px solid color-mix(in srgb, #ef4444, transparent 58%); color: #dc2626; background: color-mix(in srgb, #ef4444, transparent 92%); }
.verification-request-actions .is-revoke { border: 1px solid color-mix(in srgb, #ef4444, transparent 50%); color: #dc2626; background: color-mix(in srgb, #ef4444, transparent 90%); }
.verification-request-actions .is-approve,.verification-own-card > button { border: 1px solid var(--color-dynamic, #d76f2a); color: #fff; background: var(--color-dynamic, #d76f2a); }
.verification-request-actions button:disabled,.verification-own-card > button:disabled { opacity: .52; }
.verification-queue-empty { display: flex; min-height: 11rem; align-items: center; justify-content: center; flex-direction: column; gap: .25rem; color: var(--adaptive-muted, #8b6a58); text-align: center; }
.verification-queue-empty > span { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: .45rem; border-radius: 999px; background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 86%); color: var(--color-dynamic, #d76f2a); font-size: 1.35rem; }
.verification-queue-empty strong { color: var(--adaptive-text, #382419); font-size: .82rem; font-weight: 950; }
.verification-queue-empty small { font-size: .65rem; font-weight: 700; }
.verification-queue-empty.is-compact { min-height: 6rem; }
.verification-queue-empty.is-compact > span { width: 2.35rem; height: 2.35rem; margin-bottom: .2rem; font-size: 1rem; }
.verification-issued-section { margin-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 74%); padding-top: 1rem; }
.verification-request-card.is-issued { background: color-mix(in srgb, var(--adaptive-surface, #fff) 96%, var(--color-dynamic, #d76f2a) 4%); }
.verification-own-card { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto; align-items: center; gap: .85rem; min-height: 7rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 62%); border-radius: 1rem; background: color-mix(in srgb, var(--adaptive-surface, #fff) 93%, var(--color-dynamic, #d76f2a) 7%); padding: 1rem; }
.verification-own-mark { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 55%); border-radius: 999px; color: var(--color-dynamic, #d76f2a); }
.verification-own-mark svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.verification-own-card > div { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.verification-own-card > div strong { color: var(--adaptive-text, #382419); font-size: .8rem; font-weight: 950; }
.verification-own-card > div small { color: var(--adaptive-muted, #8b6a58); font-size: .64rem; font-weight: 700; line-height: 1.4; }
.verification-own-card[data-status="verified"] .verification-own-mark { color: #fff; background: var(--color-dynamic, #d76f2a); }

@media (max-width: 760px) {
    .cover-account-name-verification-row { grid-template-columns: 1fr; gap: 0; }
    .cover-account-name-verification-row .cover-account-name-row { grid-template-columns: 1fr !important; gap: .48rem !important; }
    .cover-account-verification { margin: 0 0 .75rem; }
    .verification-request-card { grid-template-columns: 2.5rem minmax(0,1fr); }
    .verification-request-card > img { width: 2.5rem; height: 2.5rem; }
    .verification-request-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .verification-own-card { grid-template-columns: 2.7rem minmax(0,1fr); }
    .verification-own-mark { width: 2.7rem; height: 2.7rem; }
    .verification-own-card > button { grid-column: 1 / -1; }
}

/* ------------[Глобальный поиск]------------ // Полноэкранный поиск людей, пространств и публикаций без сброса текущей страницы. Модуль: «оформление интерфейса». Часть 75/203 */
.search-dropdown-footer { display: flex; align-items: center; border-top: 1px solid var(--adaptive-ui-line, var(--standard-line, #e2e8f0)); padding: .4rem .55rem; background: color-mix(in srgb,var(--adaptive-ui-active,var(--standard-panel-soft,#f8fafc)) 72%,transparent); }
.search-open-global-button { width:100%;min-height:2rem;border:1px solid transparent;border-radius:.62rem;background:transparent;color:var(--color-dynamic,#d76f2a);font-size:.56rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase;transition:color .18s ease,background .18s ease,border-color .18s ease; }
.search-open-global-button:hover { border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 28%,transparent);background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 8%,transparent); }

#search-dropdown .search-result-item,
#search-dropdown #search-spaces-results > div { border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
#search-dropdown .search-result-item:hover,
#search-dropdown #search-spaces-results > div:hover { border-color: color-mix(in srgb, var(--color-dynamic, #d76f2a) 34%, transparent); background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 10%, transparent) !important; transform: translateX(3px); }

.global-search-modal { position: fixed; inset: 0; z-index: 30000; display: grid; place-items: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.global-search-modal.hidden { display: none !important; }
.global-search-modal.is-open { opacity: 1; pointer-events: auto; }
.global-search-backdrop { position: absolute; inset: 0; border: 0; background: rgb(8 12 22 / .72); backdrop-filter: blur(16px) saturate(.86); }
.global-search-dialog {
    --global-search-bg: var(--adaptive-ui-modal, var(--standard-panel, #fff));
    --global-search-soft: var(--adaptive-ui-active, var(--standard-panel-soft, #f8fafc));
    --global-search-page: var(--adaptive-background, #eef3f8);
    --global-search-line: var(--adaptive-ui-line, var(--standard-line, #dbe3ee));
    --global-search-text: var(--adaptive-text-active, var(--standard-text-active, #1f2937));
    --global-search-muted: var(--adaptive-text-passive, var(--standard-text-passive, #7b8799));
    position: relative;
    display: flex;
    width: min(76rem, calc(100vw - 2rem));
    height: min(52rem, calc(100dvh - 2rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--global-search-line);
    border-radius: 1.45rem;
    background: var(--global-search-bg);
    color: var(--global-search-text);
    box-shadow: 0 2.25rem 7rem rgb(2 6 23 / .5);
    transform: translateY(1rem) scale(.975);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.global-search-dialog::before { position: absolute; z-index: 4; top: 0; left: 4.5rem; right: 4.5rem; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, transparent, var(--color-dynamic, #d76f2a), var(--theme-tertiary, #f59e0b), transparent); content: ""; opacity: .8; pointer-events: none; }
html:not(.adaptive-theme) .global-search-dialog {
    --global-search-bg: var(--standard-panel, #fff);
    --global-search-soft: var(--standard-panel-soft, #f8fafc);
    --global-search-page: var(--adaptive-background, #eef3f8);
    --global-search-line: var(--standard-line, #dbe3ee);
    --global-search-text: var(--standard-text-active, #1f2937);
    --global-search-muted: var(--standard-text-passive, #7b8799);
}
html.adaptive-theme .global-search-dialog {
    --global-search-bg: var(--adaptive-ui-modal, var(--adaptive-ui-panel));
    --global-search-soft: var(--adaptive-ui-active, var(--adaptive-surface-2));
    --global-search-page: var(--adaptive-background, var(--adaptive-surface));
    --global-search-line: var(--adaptive-ui-line, var(--adaptive-border));
    --global-search-text: var(--adaptive-text-active, var(--adaptive-text));
    --global-search-muted: var(--adaptive-text-passive, var(--adaptive-muted));
}
.global-search-modal.is-open .global-search-dialog { transform: translateY(0) scale(1); }
.global-search-head { display: grid; grid-template-columns: 2.35rem minmax(0,1fr) 2.35rem; align-items: center; gap: .68rem; border-bottom: 1px solid var(--global-search-line); padding: .54rem .78rem; background: linear-gradient(100deg,color-mix(in srgb,var(--color-dynamic,#d76f2a) 10%,var(--global-search-bg)),var(--global-search-bg) 55%,color-mix(in srgb,var(--theme-tertiary,#f59e0b) 6%,var(--global-search-bg))); }
.global-search-emblem { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .75rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 13%, transparent); color: var(--color-dynamic, #d76f2a); transform: rotate(-2deg); }
.global-search-emblem svg,.global-search-field svg,.global-search-section-icon svg,.global-search-side-icon svg,.global-search-result-action svg,.global-search-close svg,.global-search-filter-menu svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.global-search-emblem svg { width: 1.12rem; height: 1.12rem; }
.global-search-head > div { display: grid; min-width: 0; gap: .08rem; }
.global-search-head small,.global-search-side > header small { color: var(--color-dynamic, #d76f2a); font-size: .46rem; font-weight: 950; letter-spacing: .16em; }
.global-search-head h2 { margin: 0; font-size: .86rem; font-weight: 950; line-height: 1.1; }
.global-search-head p { overflow: hidden; margin: 0; color: var(--global-search-muted); font-size: .52rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.global-search-close { display: grid; width: 2.35rem; height: 2.05rem; place-items: center; border: 1px solid color-mix(in srgb,#ef4444 42%,var(--global-search-line)); border-radius: .62rem; background: color-mix(in srgb,#ef4444 10%,var(--global-search-bg)); color: #ef4444; transition: color .18s ease, background .18s ease, transform .18s ease; }
.global-search-close svg { width: .9rem; height: .9rem; stroke-width: 2.15; }
.global-search-close:hover { color: #fff; background: #ef4444; transform:translateY(-1px); }
.global-search-layout { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(0,1fr) 18.5rem; gap: .9rem; overflow: hidden; padding: .9rem; background: color-mix(in srgb, var(--global-search-page) 42%, var(--global-search-bg) 58%); }
.global-search-main,.global-search-side { min-width: 0; border: 1px solid var(--global-search-line); border-radius: 1rem; background: color-mix(in srgb, var(--global-search-bg) 94%, transparent); }
.global-search-main { position: relative; display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding: .8rem; }
.global-search-searchbar { position: relative; z-index: 20; }
.global-search-field { display: grid; grid-template-columns: 1.25rem minmax(0,1fr) auto; align-items: center; gap: .55rem; min-height: 3rem; border: 1px solid var(--global-search-line); border-radius: .86rem; padding: 0 .55rem 0 .78rem; background: var(--global-search-soft); color: var(--global-search-muted); transition: border-color .18s ease, box-shadow .18s ease; }
.global-search-field:focus-within { border-color: var(--color-dynamic, #d76f2a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #d76f2a) 12%, transparent); }
.global-search-field > svg { width: 1.12rem; height: 1.12rem; }
.global-search-field input { min-width: 0; border: 0 !important; outline: 0; background: transparent !important; color: var(--global-search-text) !important; font-size: .72rem; font-weight: 750; box-shadow: none !important; }
.global-search-field input::placeholder { color: var(--global-search-muted) !important; }
.global-search-field-actions { display: flex; align-items: center; gap: .34rem; }
.global-search-field button { position: relative; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid transparent; border-radius: .58rem; background: color-mix(in srgb, var(--global-search-muted) 9%, transparent); color: var(--global-search-muted); transition: color .17s ease,background .17s ease,border-color .17s ease; }
.global-search-field button svg { width: .92rem; height: .92rem; }
.global-search-field .global-search-filter-button:hover,.global-search-field .global-search-filter-button.is-active { border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 45%,transparent);background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 12%,transparent);color:var(--color-dynamic,#d76f2a); }
.global-search-filter-button > i { position: absolute; top: -.28rem; right: -.28rem; display:grid; min-width: 1rem; height: 1rem; place-items:center; border: 2px solid var(--global-search-soft); border-radius: 999px; padding:0 .15rem; background: var(--color-dynamic,#d76f2a); color:#fff; font-size:.42rem; font-style:normal; font-weight:950; line-height:1; }
.global-search-field button.hidden { display: none; }
.global-search-filter-menu { position: absolute; z-index: 40; top: calc(100% + .42rem); left: 0; right: 0; display: grid; gap: .65rem; border: 1px solid var(--global-search-line); border-radius: .95rem; padding: .72rem; background: color-mix(in srgb,var(--global-search-bg) 97%,transparent); box-shadow: 0 1.35rem 3.4rem rgb(2 6 23/.3); backdrop-filter: blur(18px) saturate(1.1); transform-origin: top right; animation: global-search-menu-in .16s ease both; }
.global-search-filter-menu.hidden { display:none!important; }
@keyframes global-search-menu-in { from { opacity:0;transform:translateY(-.3rem) scale(.97); } }
.global-search-filter-menu > header { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.08rem .1rem;color:var(--global-search-muted); }
.global-search-filter-menu > header > div { display:grid;gap:.04rem; }
.global-search-filter-menu > header strong { color:var(--global-search-text);font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em; }
.global-search-filter-menu > header small { color:var(--global-search-muted);font-size:.46rem;font-weight:700; }
.global-search-filter-menu > header > button { display:grid;width:1.75rem;height:1.75rem;place-items:center;border:1px solid var(--global-search-line);border-radius:50%;color:var(--global-search-muted); }
.global-search-filter-menu > header svg { width:.76rem;height:.76rem; }
.global-search-filter-all-note { display:none;min-height:5.25rem;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.65rem;border:1px solid color-mix(in srgb,var(--color-dynamic,#d76f2a) 25%,var(--global-search-line));border-radius:.75rem;padding:.72rem;background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 7%,var(--global-search-bg)); }
.global-search-filter-all-note > span { display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:.65rem;background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 12%,transparent);color:var(--color-dynamic,#d76f2a);font-size:.72rem; }
.global-search-filter-all-note > div { display:grid;gap:.1rem; }
.global-search-filter-all-note strong { color:var(--global-search-text);font-size:.59rem;font-weight:950; }
.global-search-filter-all-note small { color:var(--global-search-muted);font-size:.48rem;font-weight:700;line-height:1.45; }
.global-search-filter-scope { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;padding:.25rem;border:1px solid var(--global-search-line);border-radius:.75rem;background:var(--global-search-soft); }
.global-search-filter-scope > button { display:flex;min-width:0;align-items:center;justify-content:center;gap:.38rem;min-height:2rem;border:1px solid transparent;border-radius:.58rem;color:var(--global-search-muted);font-size:.52rem;font-weight:900;transition:background .16s ease,border-color .16s ease,color .16s ease; }
.global-search-filter-scope > button b { display:grid;min-width:1.15rem;height:1.15rem;place-items:center;border-radius:50%;background:var(--global-search-bg);font-size:.43rem; }
.global-search-filter-scope > button.is-active { border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 52%,var(--global-search-line));background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 12%,var(--global-search-bg));color:var(--color-dynamic,#d76f2a); }
.global-search-filter-scope > button.is-active b { background:var(--color-dynamic,#d76f2a);color:#fff; }
.global-search-filter-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.58rem; }
.global-search-filter-grid > label { display:grid;min-width:0;gap:.26rem; }
.global-search-filter-menu [data-global-filter-for] { display:none; }
.global-search-filter-menu[data-filter="all"] .global-search-filter-all-note[data-global-filter-for="all"] { display:grid; }
.global-search-filter-menu[data-filter="users"] [data-global-filter-for="users"] { display:grid; }
.global-search-filter-menu[data-filter="spaces"] [data-global-filter-for="spaces"] { display:grid; }
.global-search-filter-menu[data-filter="posts"] [data-global-filter-for="posts"] { display:grid; }
.global-search-filter-grid > label > span:first-child { color:var(--global-search-muted);font-size:.47rem;font-weight:950;letter-spacing:.07em;text-transform:uppercase; }
.global-search-filter-grid input,.global-search-filter-grid select { width:100%;min-width:0;height:2.25rem;border:1px solid var(--global-search-line);border-radius:.62rem;padding:0 .62rem;outline:0;background:var(--global-search-soft);color:var(--global-search-text);font-size:.56rem;font-weight:750;transition:border-color .16s ease,box-shadow .16s ease; }
.global-search-filter-grid input:focus,.global-search-filter-grid select:focus { border-color:var(--color-dynamic,#d76f2a);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-dynamic,#d76f2a) 11%,transparent); }
.global-search-filter-age > span:last-child { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.35rem; }
.global-search-filter-age i { color:var(--global-search-muted);font-size:.7rem;font-style:normal;text-align:center; }
.global-search-filter-menu > footer { display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--global-search-line);padding-top:.62rem; }
.global-search-filter-menu > footer > label { align-items:center;gap:.42rem;color:var(--global-search-text);font-size:.52rem;font-weight:850; }
.global-search-filter-menu[data-filter="users"] > footer > label[data-global-filter-for="users"],.global-search-filter-menu[data-filter="posts"] > footer > label[data-global-filter-for="posts"] { display:flex; }
.global-search-filter-menu > footer input { width:.92rem;height:.92rem;accent-color:var(--color-dynamic,#d76f2a); }
.global-search-filter-menu > footer > div { display:flex;align-items:center;gap:.42rem;margin-left:auto; }
.global-search-filter-menu > footer button { min-height:2rem;border-radius:.6rem;padding:.4rem .7rem;color:var(--global-search-muted);font-size:.49rem;font-weight:950;text-transform:uppercase; }
.global-search-filter-menu > footer button:last-child { background:var(--color-dynamic,#d76f2a);color:#fff; }
.global-search-summary { border-bottom: 1px solid var(--global-search-line); padding: .55rem .2rem .5rem; color: var(--global-search-muted); font-size: .54rem; font-weight: 750; }
.global-search-results { display: grid; min-height: 0; flex: 1; align-content: start; gap: .7rem; overflow-y: auto; padding: .7rem .15rem .15rem; }
.global-search-result-section { display: grid; align-content: start; gap: .55rem; border: 1px solid var(--global-search-line); border-radius: .9rem; padding: .65rem; background: color-mix(in srgb, var(--global-search-soft) 54%, var(--global-search-bg) 46%); }
.global-search-result-section > header { display: flex; align-items: center; gap: .58rem; }
.global-search-section-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .62rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 12%, transparent); color: var(--color-dynamic, #d76f2a); }
.global-search-section-icon svg { width: .98rem; height: .98rem; }
.global-search-result-section > header > div { display: grid; gap: .03rem; }
.global-search-result-section h3,.global-search-side h3 { margin: 0; color: var(--global-search-text); font-size: .68rem; font-weight: 950; }
.global-search-result-section header p { margin: 0; color: var(--global-search-muted); font-size: .5rem; font-weight: 700; }
.global-search-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.global-search-result-card { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(0,1fr) 1.8rem; align-items: center; gap: .58rem; border: 1px solid var(--global-search-line); border-radius: .78rem; padding: .52rem; background: var(--global-search-bg); color: var(--global-search-text); text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.global-search-result-card:hover { border-color: color-mix(in srgb, var(--color-dynamic, #d76f2a) 52%, var(--global-search-line)); background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 9%, var(--global-search-bg)); transform: translateY(-1px); box-shadow: 0 .55rem 1rem -.8rem color-mix(in srgb, var(--color-dynamic, #d76f2a) 48%, transparent); }
.global-search-result-card.is-post { grid-column: 1 / -1; }
.global-search-result-avatar { position: relative; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; }
.global-search-result-avatar :is(img,.avatar-placeholder),.global-search-fallback-avatar { width: 2.5rem !important; height: 2.5rem !important; border-radius: .72rem !important; object-fit: cover; }
.global-search-fallback-avatar { display: grid; place-items: center; background: var(--global-search-soft); color: var(--color-dynamic, #d76f2a); font-weight: 950; }
.global-search-result-avatar .user-online-dot { right: -.08rem !important; bottom: -.08rem !important; }
.global-search-online { position: absolute; right: -.08rem; bottom: -.08rem; width: .65rem; height: .65rem; border: 2px solid var(--global-search-bg); border-radius: 50%; background: #94a3b8; }
.global-search-online.is-online { background: #22c55e; }
.global-search-result-copy { display: grid; min-width: 0; gap: .12rem; }
.global-search-result-copy > strong,.global-search-post-meta strong { overflow: hidden; color: var(--global-search-text); font-size: .62rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy > small { display: -webkit-box; overflow: hidden; color: var(--global-search-muted); font-size: .51rem; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.global-search-post-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; }
.global-search-post-meta i { flex: 0 0 auto; color: var(--theme-tertiary, var(--global-search-muted)); font-size: .45rem; font-style: normal; font-weight: 850; }
.global-search-result-action { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: var(--global-search-soft); color: var(--global-search-muted); transition: color .18s ease, background .18s ease; }
.global-search-result-action svg { width: .82rem; height: .82rem; }
.global-search-result-card:hover .global-search-result-action { background: var(--color-dynamic, #d76f2a); color: #fff; }
.global-search-empty { grid-column: 1 / -1; display: flex; min-height: 4.2rem; align-items: center; justify-content: center; gap: .55rem; border: 1px dashed var(--global-search-line); border-radius: .72rem; color: var(--global-search-muted); }
.global-search-empty > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: .5rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 10%, transparent); color: var(--color-dynamic, #d76f2a); font-size: .62rem; font-weight: 950; }
.global-search-empty p { margin: 0; font-size: .54rem; font-weight: 750; }
.global-search-post-skeleton { grid-column: 1 / -1; display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: .38rem .6rem; border-radius: .75rem; padding: .55rem; background: var(--global-search-bg); }
.global-search-post-skeleton i { grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--global-search-soft); }
.global-search-post-skeleton span { height: .52rem; border-radius: 999px; background: var(--global-search-soft); animation: global-search-pulse 1.2s ease-in-out infinite alternate; }
.global-search-post-skeleton span:last-child { width: 68%; }
@keyframes global-search-pulse { to { opacity: .42; } }
.global-search-side { display: flex; min-height: 0; flex-direction: column; gap: .5rem; padding: .75rem; }
.global-search-side > header { display: grid; gap: .08rem; padding: .2rem .2rem .4rem; }
.global-search-side-stat { display: grid; grid-template-columns: 2.25rem minmax(0,1fr) auto; align-items: center; gap: .58rem; border: 1px solid transparent; border-radius: .78rem; padding: .55rem; color: var(--global-search-muted); background:color-mix(in srgb,var(--global-search-soft) 45%,transparent); }
.global-search-side-stat:hover,.global-search-side-stat.is-active { border-color:color-mix(in srgb,var(--color-dynamic,#d76f2a) 44%,var(--global-search-line));background:color-mix(in srgb,var(--color-dynamic,#d76f2a) 10%,var(--global-search-bg)); }
.global-search-side-stat.is-active .global-search-side-icon { background:var(--color-dynamic,#d76f2a);color:#fff;box-shadow:0 .4rem .8rem color-mix(in srgb,var(--color-dynamic,#d76f2a) 22%,transparent); }
.global-search-side-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .68rem; background: var(--global-search-soft); color: var(--color-dynamic, #d76f2a); }
.global-search-side-icon svg { width: 1.05rem; height: 1.05rem; }
.global-search-side-stat > span:nth-child(2) { display: grid; min-width: 0; gap: .05rem; }
.global-search-side-stat strong { color: var(--global-search-text); font-size: .6rem; font-weight: 950; }
.global-search-side-stat small { overflow: hidden; color: var(--global-search-muted); font-size: .46rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.global-search-side-stat > b { display: grid; min-width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 999px; background: var(--global-search-bg); color: var(--color-dynamic, #d76f2a); font-size: .5rem; }
.global-search-hint { display: flex; align-items: flex-start; gap: .55rem; margin-top: auto; border: 1px solid color-mix(in srgb, var(--theme-tertiary, #f59e0b) 34%, var(--global-search-line)); border-radius: .82rem; padding: .68rem; background: color-mix(in srgb, var(--theme-tertiary, #f59e0b) 8%, var(--global-search-bg)); }
.global-search-hint > span { color: var(--theme-tertiary, #f59e0b); font-size: .8rem; }
.global-search-hint p { display: grid; margin: 0; gap: .12rem; }
.global-search-hint strong { color: var(--global-search-text); font-size: .54rem; font-weight: 950; }
.global-search-hint small { color: var(--global-search-muted); font-size: .47rem; font-weight: 700; line-height: 1.4; }
#global-search-modal[data-filter="users"] [data-global-search-section]:not([data-global-search-section="users"]),
#global-search-modal[data-filter="spaces"] [data-global-search-section]:not([data-global-search-section="spaces"]),
#global-search-modal[data-filter="posts"] [data-global-search-section]:not([data-global-search-section="posts"]) { display: none; }

@media (max-width: 900px) {
    .global-search-layout { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
    .global-search-main { min-height: 34rem; overflow: visible; }
    .global-search-results { overflow: visible; }
    .global-search-side { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .global-search-side > header,.global-search-hint { grid-column: 1 / -1; }
    .global-search-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .global-search-modal { padding: 0; }
    .global-search-dialog { width: 100%; height: 100dvh; min-height: 100dvh; border-radius: 0; }
    .global-search-head { grid-template-columns: 2.25rem minmax(0,1fr) 2.35rem; padding: .48rem .6rem; }
    .global-search-emblem { width: 2.25rem; height: 2.25rem; }
    .global-search-head p { display: none; }
    .global-search-layout { padding: .55rem; }
    .global-search-main { min-height: 0; padding: .6rem; }
    .global-search-list { grid-template-columns: 1fr; }
    .global-search-side { grid-template-columns: 1fr; }
    .global-search-side > header,.global-search-hint { grid-column: auto; }
    .global-search-filter-menu { max-height:calc(100dvh - 9rem);overflow-y:auto; }
    .global-search-filter-scope { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .global-search-filter-grid { grid-template-columns:1fr; }
    .global-search-filter-menu > footer { align-items:stretch;flex-direction:column; }
    .global-search-filter-menu > footer > div { justify-content:flex-end; }
}

/* ------------[Глобальный поиск — компактный командный центр]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 76/203 */
.search-dropdown-footer {
    min-height: 2.2rem;
    justify-content: flex-end;
    padding: .16rem .55rem;
    background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--color-dynamic,#d76f2a) 8%,var(--adaptive-ui-active,var(--standard-panel-soft,#f8fafc))));
}
.search-open-global-button {
    display: grid;
    width: 1.85rem;
    min-height: 1.85rem;
    place-items: center;
    border: 0;
    border-radius: .48rem;
    padding: 0;
    color: var(--color-dynamic,#d76f2a);
}
.search-open-global-button svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.search-open-global-button:hover { border-color: transparent; background: color-mix(in srgb,var(--color-dynamic,#d76f2a) 13%,transparent); transform: translateY(-1px); }

.global-search-dialog {
    width: min(73rem,calc(100vw - 2rem));
    height: min(48rem,calc(100dvh - 2rem));
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--theme-tertiary,#f59e0b) 9%,transparent),transparent 24rem),
        var(--global-search-bg);
}
.global-search-dialog::before { left: 1.1rem; right: 1.1rem; height: 3px; }
.global-search-head {
    z-index: 50;
    grid-template-columns: 2.15rem minmax(0,1fr) 2.35rem;
    min-height: 3.55rem;
    gap: .62rem;
    padding: .42rem .65rem;
    background: color-mix(in srgb,var(--global-search-bg) 92%,var(--color-dynamic,#d76f2a) 8%);
    box-shadow: 0 .45rem 1.4rem -.9rem rgb(15 23 42/.35);
}
.global-search-emblem { width: 2.15rem; height: 2.15rem; border-radius: .62rem; transform: none; }
.global-search-head h2 { font-size: .82rem; }
.global-search-head p { font-size: .49rem; }
.global-search-close { border-radius: .58rem; box-shadow: 0 .35rem .9rem -.65rem #ef4444; }
.global-search-layout {
    position: relative;
    grid-template-columns: minmax(0,1fr) 15.5rem;
    gap: .65rem;
    overflow: hidden;
    padding: .65rem;
    background:
        radial-gradient(circle at 4% 100%,color-mix(in srgb,var(--color-dynamic,#d76f2a) 8%,transparent),transparent 23rem),
        color-mix(in srgb,var(--global-search-page) 24%,var(--global-search-bg) 76%);
}
.global-search-main {
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
.global-search-searchbar { z-index: 300; isolation: isolate; }
.global-search-field {
    min-height: 2.7rem;
    border-radius: .72rem;
    padding-right: .42rem;
    background: color-mix(in srgb,var(--global-search-bg) 91%,var(--global-search-soft));
    box-shadow: 0 .55rem 1.4rem -.95rem rgb(15 23 42/.4);
}
.global-search-field button { width: 1.78rem; height: 1.78rem; border-radius: .5rem; }
.global-search-filter-menu {
    z-index: 2000;
    overflow: visible;
    isolation: isolate;
    border-radius: .82rem;
    background: var(--global-search-bg);
    box-shadow: 0 1.8rem 5rem -1.2rem rgb(2 6 23/.62),0 0 0 1px color-mix(in srgb,var(--color-dynamic,#d76f2a) 8%,transparent);
    backdrop-filter: none;
}
.global-search-filter-menu > header > button { border-radius: .48rem; }
.global-search-filter-grid select {
    position: relative;
    z-index: 2100;
    appearance: auto !important;
    pointer-events: auto !important;
    color-scheme: light;
}
html.dark .global-search-filter-grid select { color-scheme: dark; }
.global-search-filter-grid select option { background: var(--global-search-bg); color: var(--global-search-text); }
.global-search-summary {
    margin: .08rem .1rem 0;
    border-bottom: 0;
    padding: .5rem .28rem .42rem;
    letter-spacing: .015em;
}
.global-search-results { position: relative; z-index: 1; gap: .58rem; padding: .08rem .1rem .1rem; }
.global-search-result-section {
    position: relative;
    gap: .5rem;
    border-color: color-mix(in srgb,var(--global-search-line) 80%,transparent);
    border-radius: .78rem;
    padding: .62rem;
    background: color-mix(in srgb,var(--global-search-bg) 86%,var(--global-search-soft));
    box-shadow: 0 .55rem 1.35rem -1.15rem rgb(15 23 42/.38);
}
.global-search-result-section::before {
    position: absolute;
    top: .72rem;
    bottom: .72rem;
    left: 0;
    width: 2px;
    border-radius: 0 99px 99px 0;
    background: linear-gradient(var(--color-dynamic,#d76f2a),var(--theme-tertiary,#f59e0b));
    content: "";
    opacity: .72;
}
.global-search-section-icon { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; border-radius: .55rem; }
.global-search-result-card {
    border-color: transparent;
    border-radius: .68rem;
    background: color-mix(in srgb,var(--global-search-soft) 60%,var(--global-search-bg));
}
.global-search-result-card:hover { transform: translateX(2px); }
.global-search-result-action { border-radius: .5rem; }
.global-search-side {
    position: relative;
    overflow: hidden;
    gap: .38rem;
    border: 0;
    border-radius: .82rem;
    padding: .58rem;
    background: linear-gradient(160deg,color-mix(in srgb,var(--color-dynamic,#d76f2a) 10%,var(--global-search-bg)),color-mix(in srgb,var(--global-search-soft) 65%,var(--global-search-bg)));
    box-shadow: inset 0 0 0 1px var(--global-search-line),0 .8rem 1.8rem -1.4rem rgb(15 23 42/.45);
}
.global-search-side::after {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 8rem;
    height: 8rem;
    border: 1.35rem solid color-mix(in srgb,var(--theme-tertiary,#f59e0b) 7%,transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.global-search-side > * { position: relative; z-index: 1; }
.global-search-side-stat {
    grid-template-columns: 2rem minmax(0,1fr) auto;
    gap: .5rem;
    border-radius: .65rem;
    padding: .44rem;
    background: transparent;
    text-align: left;
}
.global-search-side-stat:hover { transform: translateX(-2px); }
.global-search-side-stat.is-active {
    border-color: color-mix(in srgb,var(--color-dynamic,#d76f2a) 38%,var(--global-search-line));
    background: var(--global-search-bg);
    box-shadow: 0 .5rem 1.1rem -.85rem color-mix(in srgb,var(--color-dynamic,#d76f2a) 45%,transparent);
}
.global-search-side-icon { width: 2rem; height: 2rem; border-radius: .55rem; }
.global-search-side-stat > b { min-width: 1.35rem; height: 1.35rem; }
.global-search-hint { border-radius: .68rem; padding: .56rem; }

@media (max-width: 900px) {
    .global-search-dialog { height: min(52rem,calc(100dvh - 1rem)); }
    .global-search-layout { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
    .global-search-main { min-height: 34rem; }
    .global-search-side { display: grid; order: -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .global-search-filter-menu { max-height: calc(100dvh - 9rem); overflow-y: auto; }
}
@media (max-width: 640px) {
    .global-search-dialog { width: 100%; height: 100dvh; border-radius: 0; }
    .global-search-head { grid-template-columns: 2.15rem minmax(0,1fr) 2.35rem; }
    .global-search-layout { padding: .48rem; }
    .global-search-side { grid-template-columns: 1fr 1fr; }
    .global-search-side > header,.global-search-hint { grid-column: 1/-1; }
    .global-search-side-stat { grid-template-columns: 1.8rem minmax(0,1fr) auto; }
    .global-search-side-icon { width: 1.8rem; height: 1.8rem; }
}

/* ------------[Аудиотреки в сообщениях и публикациях]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 77/203 */
.vmesta-track-player {
    --track-accent: var(--color-dynamic,#d76f2a);
    --track-detail: var(--theme-tertiary,var(--track-accent));
    --track-panel: var(--adaptive-ui-active,var(--standard-panel-soft,#f8fafc));
    --track-strong: var(--adaptive-ui-modal,var(--standard-panel,#fff));
    --track-line: var(--adaptive-ui-line,var(--standard-line,#dbe3ee));
    --track-text: var(--adaptive-text-active,var(--standard-text-active,#1f2937));
    --track-muted: var(--adaptive-text-passive,var(--standard-text-passive,#7b8799));
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: .5rem;
    overflow: visible;
    border: 1px solid color-mix(in srgb,var(--track-accent) 26%,var(--track-line));
    border-radius: .86rem;
    padding: .58rem;
    background:
        radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--track-detail) 10%,transparent),transparent 7rem),
        color-mix(in srgb,var(--track-panel) 88%,var(--track-strong));
    color: var(--track-text);
    box-shadow: 0 .52rem 1.25rem -.95rem color-mix(in srgb,var(--track-accent) 35%,transparent);
    isolation: isolate;
}
.messenger-file-list .vmesta-track-player {
    --track-accent: var(--msg-accent);
    --track-detail: var(--theme-tertiary,var(--msg-accent));
    --track-panel: var(--msg-accent-soft);
    --track-strong: var(--msg-panel-strong);
    --track-line: var(--msg-line);
    --track-text: var(--msg-text);
    --track-muted: var(--msg-muted);
    grid-column: 1/-1;
}
.post-attachments > .vmesta-track-player {
    width: 100%;
    max-width: none;
    grid-column: 1/-1;
    justify-self: start;
}
#viewer-post-attachments .post-attachments > .vmesta-track-player { width: 100%; max-width: none; }
.vmesta-track-player > audio { display: none; }
.vmesta-track-head { display: flex; min-width: 0; align-items: center; gap: .48rem; }
.vmesta-track-head > span:last-child { display: grid; min-width: 0; gap: .02rem; }
.vmesta-track-head strong { overflow: hidden; color: var(--track-text); font-size: .66rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-track-head small { color: var(--track-muted); font-size: .47rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vmesta-track-mark {
    display: grid;
    width: 1.78rem;
    height: 1.78rem;
    flex: 0 0 1.78rem;
    place-items: center;
    border-radius: .52rem;
    background: color-mix(in srgb,var(--track-accent) 12%,transparent);
    color: var(--track-accent);
}
.vmesta-track-mark svg,.vmesta-track-play svg,.vmesta-track-tools svg { width: .92rem; height: .92rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vmesta-track-body { display: grid; min-width: 0; grid-template-columns: 2.15rem minmax(5rem,1fr) auto; align-items: center; gap: .52rem; }
.vmesta-track-play {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--track-accent);
    color: #fff;
    box-shadow: 0 .35rem .8rem color-mix(in srgb,var(--track-accent) 36%,transparent);
    transition: transform .16s ease,box-shadow .16s ease;
}
.vmesta-track-play:hover { transform: scale(1.045); box-shadow: 0 .45rem 1rem color-mix(in srgb,var(--track-accent) 48%,transparent); }
.vmesta-track-play svg { width: .78rem; height: .78rem; fill: currentColor; stroke-width: 0; }
.vmesta-track-timeline { display: grid; min-width: 0; gap: .05rem; }
.vmesta-track-wave { position: relative; height: 1.82rem; overflow: visible; }
.vmesta-track-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vmesta-track-wave path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.vmesta-track-wave-base { stroke: color-mix(in srgb,var(--track-muted) 30%,transparent); stroke-width: 1.55; }
.vmesta-track-wave-buffered {
    stroke: color-mix(in srgb,var(--track-detail) 32%,var(--track-muted));
    stroke-width: 1.82;
    clip-path: inset(0 calc(100% - var(--track-buffered-position,0%)) 0 0);
    transition: clip-path .18s linear;
}
.vmesta-track-wave-motion { stroke: color-mix(in srgb,var(--track-detail) 42%,transparent); stroke-width: 1.85; stroke-dasharray: 1.4 10; opacity: .1; }
.vmesta-track-wave-progress {
    stroke: var(--track-accent);
    stroke-width: 2.18;
    clip-path: inset(0 calc(100% - var(--track-progress-position,0%)) 0 0);
    transition: clip-path .08s linear;
}
.vmesta-track-player.is-playing .vmesta-track-wave-motion { opacity: .38; animation: vmesta-track-wave-flow 2.8s linear infinite; }
@keyframes vmesta-track-wave-flow { to { stroke-dashoffset: -22.8; } }
.vmesta-track-progress-thumb {
    fill: color-mix(in srgb,var(--track-detail,#f59e0b) 58%,#fbbf24);
    stroke: #fff;
    stroke-width: 2.15;
    paint-order: stroke fill;
    filter: drop-shadow(0 .12rem .2rem rgb(15 23 42/.28));
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.vmesta-track-player.is-playing .vmesta-track-progress-thumb { transform: scale(1.08); }
.vmesta-track-wave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.vmesta-track-time { display: flex; align-items: center; gap: .22rem; color: var(--track-muted); font-size: .48rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vmesta-track-time time:first-child { color: var(--track-accent); }
.vmesta-track-tools { display: grid; grid-template-columns: auto auto; align-items: end; gap: .16rem .22rem; }
.vmesta-track-tools button {
    position: relative;
    display: grid;
    width: 1.78rem;
    height: 1.78rem;
    place-items: center;
    border: 1px solid color-mix(in srgb,var(--track-accent) 18%,var(--track-line));
    border-radius: .52rem;
    background: color-mix(in srgb,var(--track-strong) 82%,transparent);
    color: var(--track-muted);
    transition: color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease;
}
.vmesta-track-tools button:hover,.vmesta-track-volume-wrap.is-open > button { border-color: color-mix(in srgb,var(--track-accent) 45%,var(--track-line)); background: color-mix(in srgb,var(--track-accent) 10%,var(--track-strong)); color: var(--track-accent); transform: translateY(-1px); }
.vmesta-track-volume-wrap { position: relative; display: grid; }
.vmesta-track-volume-popover {
    position: absolute;
    z-index: 25;
    right: auto;
    left: 50%;
    bottom: calc(100% + .42rem);
    display: block;
    width: 2.18rem;
    height: 5.85rem;
    border: 1px solid var(--track-line);
    border-radius: .7rem;
    background: var(--track-strong);
    box-shadow: 0 .8rem 1.8rem rgb(15 23 42/.24);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,.3rem) scale(.94);
    transform-origin: bottom;
    transition: opacity .15s ease,transform .15s ease;
}
.vmesta-track-volume-wrap.is-open .vmesta-track-volume-popover { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.vmesta-track-volume-popover input {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.55rem;
    height: .9rem;
    margin: 0;
    accent-color: var(--track-accent);
    transform: translate(-50%,-50%) rotate(-90deg);
    transform-origin: center;
    cursor: pointer;
}
.vmesta-track-message-meta {
    display: flex;
    min-height: .66rem;
    grid-column: 1/-1;
    align-items: center;
    justify-content: flex-end;
    gap: .12rem;
    color: var(--track-muted);
    font-size: .47rem;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.vmesta-track-message-meta .messenger-delivery-stars { width: .72rem; height: .72rem; margin-left: .08rem; }
.vmesta-track-message-meta .messenger-delivery-stars svg { width: .72rem; height: .72rem; }
.vmesta-track-download::after {
    position: absolute;
    inset: -.16rem;
    border-radius: .62rem;
    background: conic-gradient(var(--track-accent) var(--track-download-progress,0%),transparent 0);
    content: "";
    opacity: 0;
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - .11rem),#000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - .11rem),#000 0);
}
.vmesta-track-player.is-downloading .vmesta-track-download { color: var(--track-accent); }
.vmesta-track-player.is-downloading .vmesta-track-download::after { opacity: 1; animation: vmesta-track-download-spin .9s linear infinite; }
.vmesta-track-player.is-downloaded .vmesta-track-download { border-color: #22c55e; color: #16a34a !important; background: color-mix(in srgb,#22c55e 10%,var(--track-strong)); }
.vmesta-track-player.is-downloaded .vmesta-track-download > svg { opacity: 0; }
.vmesta-track-player.is-downloaded .vmesta-track-download::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .34rem;
    height: .62rem;
    border-right: .12rem solid currentColor;
    border-bottom: .12rem solid currentColor;
    transform: translate(-50%, -62%) rotate(45deg);
    animation: vmesta-download-check-pop .38s cubic-bezier(.2, .9, .25, 1.35);
}
@keyframes vmesta-track-download-spin { to { transform: rotate(1turn); } }
.vmesta-track-player.is-download-required .vmesta-track-play { opacity: .62; }

/* ------------[Плеер как пузырь сообщения]------------ // Одиночный трек занимает место обычного сообщения, поэтому дополнительная подложка не создаётся. Модуль: «оформление интерфейса». Часть 78/203 */
.messenger-bubble.is-track-only {
    --track-message-fill: color-mix(in srgb,var(--msg-panel-strong) 84%,var(--msg-accent) 16%);
    --message-shape-fill: var(--track-message-fill);
    --message-shape-line: color-mix(in srgb,var(--msg-accent) 26%,var(--msg-line));
    width: min(24rem,70vw);
    max-width: min(24rem,70vw) !important;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
}
.messenger-bubble.is-track-only > .messenger-file-list { width: 100%; margin: 0; overflow: visible; }
.messenger-bubble.is-track-only .vmesta-track-player {
    border-radius: 1rem;
    background:
        radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--track-detail) 10%,transparent),transparent 7rem),
        var(--track-message-fill);
}
.messenger-message.has-tail.is-outgoing .messenger-bubble.is-track-only .vmesta-track-player { border-bottom-right-radius: .48rem; }
.messenger-message.has-tail.is-incoming .messenger-bubble.is-track-only .vmesta-track-player { border-bottom-left-radius: .48rem; }
.messenger-message.has-tail .messenger-bubble.is-track-only .vmesta-track-player { border-color: transparent; }
.messenger-message.is-outgoing .messenger-bubble.is-track-only .messenger-bubble-tail {
    color: var(--track-message-fill);
}
.messenger-message.is-incoming .messenger-bubble.is-track-only .messenger-bubble-tail {
    color: var(--track-message-fill);
}

/* ------------[Компактные кнопки воспроизведения]------------ // Play у голосового уменьшен ещё на один шаг, не затрагивая кнопку музыкального плеера. Модуль: «оформление интерфейса». Часть 79/203 */
.messenger-voice-note { grid-template-columns: 2.12rem minmax(0,1fr); gap: .55rem; }
.messenger-voice-note-toggle { width: 2.12rem; height: 2.12rem; }
.messenger-voice-note-toggle .messenger-icon { width: .74rem; height: .74rem; }
.messenger-video-note > button { width: 2.38rem; height: 2.38rem; }
.messenger-video-note > button .messenger-icon { width: .95rem; height: .95rem; }

/* ------------[Спокойное удаление записи]------------ // Убирает бегущую линию, плавно меняет подсказку и держит красное свечение строго под корзиной. Модуль: «оформление интерфейса». Часть 80/203 */
.messenger-recording-panel.is-active::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.messenger-recording-status > span {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 110ms ease, transform 110ms ease, color 180ms ease;
}
.messenger-recording-status > span.is-changing {
    opacity: 0;
    transform: translateY(.16rem);
}
.messenger-recording-panel .messenger-recording-cancel {
    position: relative;
    z-index: 2;
    isolation: isolate;
    box-shadow: none !important;
}
.messenger-recording-panel .messenger-recording-cancel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -.48rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(239 68 68 / 24%) 0 44%, rgb(239 68 68 / 9%) 56%, transparent 72%);
    opacity: var(--recording-cancel-value, 0);
    transform: scale(var(--recording-trash-scale, .82));
    transition: opacity 150ms ease, transform 150ms ease;
    pointer-events: none;
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-cancel {
    animation: none !important;
    box-shadow: none !important;
}
.messenger-recording-panel.is-cancel-ready .messenger-recording-cancel::before {
    opacity: 1;
}

/* ------------[Компактный редактор публикаций]------------ // Одинаковая геометрия, вложения и заметная ручка высоты для пространств и профиля. Модуль: «оформление интерфейса». Часть 81/203 */
.space-composer.is-editing,
.publication-inline-editor {
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 55%);
    border-radius: 1.05rem;
    background: color-mix(in srgb, var(--adaptive-ui-panel, var(--adaptive-surface, #fff)) 96%, transparent);
    box-shadow: 0 .32rem 1rem color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 91%);
}
.space-composer.is-editing .space-editing-banner,
.publication-inline-editor .space-editing-banner {
    min-height: 2.55rem;
    box-sizing: border-box;
    border-radius: 1rem 1rem 0 0;
    padding: .52rem .78rem;
}
.publication-editor-text-shell {
    position: relative;
    min-width: 0;
}
.space-composer.is-editing .space-composer-text,
.publication-inline-editor .space-composer-text {
    display: block;
    min-height: 8.5rem;
    max-height: 34rem;
    box-sizing: border-box;
    padding: .68rem .82rem .82rem;
    font-size: .86rem;
    line-height: 1.46;
    resize: vertical;
}
.publication-editor-resize-hint {
    position: absolute;
    z-index: 4;
    right: .42rem;
    bottom: .38rem;
    display: block;
    width: 1.18rem;
    height: 1.18rem;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 56%);
    border-radius: .38rem;
    background: color-mix(in srgb, var(--adaptive-ui-panel, var(--adaptive-surface, #fff)) 88%, var(--color-dynamic, #d76f2a) 12%);
    box-shadow: 0 .16rem .4rem rgb(0 0 0 / 8%);
    pointer-events: none;
}
.publication-editor-resize-hint > i {
    position: absolute;
    right: .19rem;
    bottom: .22rem;
    width: .52rem;
    height: .08rem;
    border-radius: 999px;
    background: var(--color-dynamic, #d76f2a);
    transform: rotate(-45deg);
    transform-origin: right center;
}
.publication-editor-resize-hint > i:nth-child(2) { width: .36rem; bottom: .37rem; }
.publication-editor-resize-hint > i:nth-child(3) { width: .2rem; bottom: .52rem; }
.space-composer.is-editing > .post-composer-selection-shell,
.publication-inline-editor > .post-composer-selection-shell {
    margin: .08rem .58rem .42rem;
    border-radius: .82rem;
    padding: .4rem;
}
.space-composer.is-editing .post-composer-selection-head,
.publication-inline-editor .post-composer-selection-head {
    min-height: 1.35rem;
    margin-bottom: .28rem;
    padding-inline: .08rem;
}
.space-composer.is-editing .post-composer-selection-list,
.publication-inline-editor .post-composer-selection-list {
    gap: .32rem;
    border-bottom: 0;
    padding-bottom: 0;
}
.space-composer.is-editing :is(.post-upload-preview-grid, .space-composer-preview, .post-attachment-selection-list),
.publication-inline-editor :is(.post-upload-preview-grid, .post-attachment-selection-list) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 14.2rem)) !important;
    gap: .34rem !important;
}
.space-composer.is-editing :is(.post-upload-preview-item.post-selected-media-card, .space-composer-preview-item.post-selected-media-card, .post-file-selection-card),
.publication-inline-editor :is(.post-upload-preview-item.post-selected-media-card, .post-file-selection-card) {
    min-height: 3.35rem;
    grid-template-columns: 2.55rem minmax(0, 1fr) 1.55rem;
    gap: .42rem;
    border-radius: .72rem;
    padding: .28rem;
}
.space-composer.is-editing :is(.post-upload-preview-item.post-selected-media-card, .space-composer-preview-item.post-selected-media-card) > img,
.publication-inline-editor .post-upload-preview-item.post-selected-media-card > img,
.space-composer.is-editing .post-file-selection-card .post-attachment-icon,
.publication-inline-editor .post-file-selection-card .post-attachment-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .58rem;
}
.space-composer.is-editing .space-composer-actions,
.publication-inline-editor .space-composer-actions {
    gap: .5rem;
    border-radius: 0 0 1rem 1rem;
    padding: .38rem .58rem;
}
.space-composer.is-editing :is(.space-primary-button, .space-ghost-button),
.publication-inline-editor :is(.space-primary-button, .space-ghost-button) {
    padding: .52rem .72rem;
}
.publication-inline-editor {
    width: 100%;
    margin: .15rem 0 .42rem;
    color: var(--adaptive-text-active, var(--adaptive-text-strong, #0f172a));
}
.post-item.is-editing-publication > .post-actions,
.post-item.is-editing-publication > :is(.post-media, .post-attachments, .post-hashtags, .shared-post-card),
.post-item.is-editing-publication > .mt-4 {
    display: none !important;
}
.post-item.is-editing-publication .post-content-text {
    margin-bottom: 0 !important;
}

@media (max-width: 560px) {
    .space-composer.is-editing .space-composer-actions,
    .publication-inline-editor .space-composer-actions { align-items: stretch; flex-direction: column; }
    .space-composer.is-editing .space-composer-actions > div,
    .publication-inline-editor .space-composer-actions > div { justify-content: space-between; }
}

@media (max-width: 520px) {
    .vmesta-track-player { padding: .5rem; }
    .vmesta-track-body { grid-template-columns: 2rem minmax(4rem,1fr) auto; gap: .4rem; }
    .vmesta-track-play { width: 2rem; height: 2rem; }
    .vmesta-track-tools button { width: 1.65rem; height: 1.65rem; }
    .vmesta-track-mark { width: 1.62rem; height: 1.62rem; flex-basis: 1.62rem; }
}

/* ------------[Каталог тем]------------ // Готовые трёхцветные палитры, Monet без окрашивания фона и ручной конструктор. Модуль: «оформление интерфейса». Часть 82/203 */
.theme-catalog-dialog {
    --theme-catalog-panel: var(--adaptive-ui-modal, var(--standard-panel, var(--adaptive-surface, #fff)));
    --theme-catalog-soft: var(--adaptive-ui-active, var(--standard-panel-soft, var(--adaptive-surface-2, #f8fafc)));
    --theme-catalog-line: var(--adaptive-ui-line, var(--standard-line, color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 72%)));
    --theme-catalog-text: var(--adaptive-text-active, var(--standard-text-active, var(--adaptive-text, #382419)));
    --theme-catalog-muted: var(--adaptive-text-passive, var(--standard-text-passive, var(--adaptive-muted, #8b6a58)));
    position: relative;
    display: flex;
    width: min(58rem, calc(100vw - 2rem));
    max-height: min(90vh, 50rem);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--theme-catalog-line);
    border-radius: 1.35rem;
    background: var(--theme-catalog-panel);
    box-shadow: 0 2rem 7rem rgb(15 23 42 / .38);
    color: var(--theme-catalog-text);
    transform: scale(.95);
    transition: transform .3s ease, opacity .3s ease;
}
html:not(.adaptive-theme) .theme-catalog-dialog {
    --theme-catalog-panel: var(--standard-panel, #fff);
    --theme-catalog-soft: var(--standard-panel-soft, #f8fafc);
    --theme-catalog-line: var(--standard-line, #dbe3ee);
    --theme-catalog-text: var(--standard-text-active, #1f4f91);
    --theme-catalog-muted: var(--standard-text-passive, #6984aa);
    --theme-catalog-page: var(--adaptive-background, #f3f7fc);
}
html.adaptive-theme .theme-catalog-dialog {
    --theme-catalog-panel: var(--adaptive-ui-modal, var(--adaptive-ui-panel));
    --theme-catalog-soft: var(--adaptive-ui-active, var(--adaptive-surface-2));
    --theme-catalog-line: var(--adaptive-ui-line, var(--adaptive-border));
    --theme-catalog-text: var(--adaptive-text-active, var(--adaptive-text));
    --theme-catalog-muted: var(--adaptive-text-passive, var(--adaptive-muted));
    --theme-catalog-page: var(--adaptive-background, var(--adaptive-surface));
}
.theme-catalog-dialog.scale-100 { transform: scale(1); }
.theme-catalog-head { display: grid; grid-template-columns: 3rem minmax(0,1fr) 2.5rem; align-items: center; gap: .85rem; border-bottom: 1px solid var(--theme-catalog-line); padding: 1rem 1.15rem; background: color-mix(in srgb, var(--theme-catalog-panel) 92%, var(--color-dynamic, #d76f2a) 8%); }
.theme-catalog-head-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .9rem; color: var(--color-dynamic, #d76f2a); background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 86%); }
.theme-catalog-head-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-catalog-head > div { display: flex; min-width: 0; flex-direction: column; gap: .1rem; }
.theme-catalog-head small,.theme-catalog-section > header small,.theme-monet-card > div:nth-child(2) > small { color: var(--color-dynamic, #d76f2a); font-size: .55rem; font-weight: 950; letter-spacing: .15em; }
.theme-catalog-head h3 { margin: 0; font-size: 1.15rem; font-weight: 950; }
.theme-catalog-head p { overflow: hidden; margin: 0; color: var(--theme-catalog-muted); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.theme-catalog-head > button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; color: var(--theme-catalog-muted); font-size: 1.4rem; transition: color .18s ease, background .18s ease; }
.theme-catalog-head > button:hover { color: #ef4444; background: color-mix(in srgb, #ef4444, transparent 90%); }
.theme-catalog-body { display: grid; gap: 1rem; overflow-y: auto; padding: 1rem 1.15rem 1.2rem; background: color-mix(in srgb, var(--theme-catalog-page) 48%, var(--theme-catalog-panel) 52%); }
.theme-catalog-section { border: 1px solid var(--theme-catalog-line); border-radius: 1rem; background: color-mix(in srgb, var(--theme-catalog-soft) 78%, var(--theme-catalog-panel) 22%); padding: 1rem; }
.theme-catalog-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.theme-catalog-section > header > div,.theme-monet-card > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.theme-catalog-section h4 { margin: 0; color: var(--theme-catalog-text); font-size: .88rem; font-weight: 950; }
.theme-catalog-section p { margin: 0; color: var(--theme-catalog-muted); font-size: .61rem; font-weight: 690; line-height: 1.45; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; }
.theme-preset-grid > button { position: relative; display: grid; min-width: 0; gap: .55rem; overflow: hidden; border: 1px solid var(--theme-catalog-line); border-radius: .95rem; background: var(--theme-catalog-panel); padding: .55rem; color: var(--theme-catalog-text); text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.theme-preset-grid > button:hover { transform: translateY(-2px); border-color: var(--theme-swatch-1); box-shadow: 0 .75rem 1.6rem -.9rem var(--theme-swatch-1); }
.theme-preset-grid > button.is-active { border-color: var(--theme-swatch-1); box-shadow: inset 0 0 0 1px var(--theme-swatch-1), 0 .65rem 1.4rem -.95rem var(--theme-swatch-1); }
.theme-profile-preview { display: grid; min-height: 5.3rem; grid-template-rows: 2.25rem 1fr; overflow: hidden; border: 1px solid color-mix(in srgb, var(--theme-swatch-1) 38%, var(--theme-catalog-line)); border-radius: .72rem; background: color-mix(in srgb, var(--theme-catalog-panel) 88%, var(--theme-swatch-1) 12%); }
.theme-profile-cover { position: relative; display: block; overflow: hidden; background: linear-gradient(125deg, color-mix(in srgb, var(--theme-swatch-1) 82%, #111827), var(--theme-swatch-2) 58%, var(--theme-swatch-3)); }
.theme-profile-cover::after { position: absolute; inset: auto -.5rem -.85rem 35%; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--theme-swatch-3) 72%, transparent); content: ""; filter: blur(.15rem); transform: rotate(-8deg); }
.theme-profile-cover > i { position: absolute; display: block; border: 1px solid rgb(255 255 255 / .48); border-radius: 50%; background: rgb(255 255 255 / .22); }
.theme-profile-cover > i:first-child { top: .42rem; right: .7rem; width: .62rem; height: .62rem; }
.theme-profile-cover > i:last-child { top: .72rem; right: 1.55rem; width: .28rem; height: .28rem; }
.theme-profile-body { position: relative; display: grid; grid-template-columns: 2.2rem minmax(0,1fr) 1.65rem; align-items: center; gap: .48rem; padding: .5rem .55rem; background: color-mix(in srgb, var(--theme-catalog-panel) 91%, var(--theme-swatch-1) 9%); }
.theme-profile-avatar { display: block; width: 2.05rem; height: 2.05rem; margin-top: -1.05rem; border: .16rem solid var(--theme-catalog-panel); border-radius: .58rem; background: radial-gradient(circle at 38% 32%, #fff 0 .22rem, transparent .24rem), linear-gradient(145deg, var(--theme-swatch-1), var(--theme-swatch-2)); box-shadow: 0 .3rem .7rem rgb(15 23 42 / .22); }
.theme-profile-lines { display: grid; min-width: 0; gap: .28rem; }
.theme-profile-lines > i { display: block; height: .34rem; border-radius: 999px; }
.theme-profile-lines > i:first-child { width: 78%; background: var(--theme-swatch-2); }
.theme-profile-lines > i:last-child { width: 55%; background: var(--theme-swatch-3); opacity: .82; }
.theme-profile-button { display: block; width: 1.5rem; height: 1.5rem; border-radius: .48rem; background: var(--theme-swatch-1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.theme-preset-info { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: .55rem; padding: 0 .08rem .08rem; }
.theme-preset-info > span:first-child { display: grid; min-width: 0; gap: .08rem; }
.theme-preset-info strong { overflow: hidden; color: var(--theme-catalog-text); font-size: .7rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.theme-preset-info small { overflow: hidden; color: var(--theme-catalog-muted); font-size: .47rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.theme-preset-colors { display: flex; flex: 0 0 auto; gap: .2rem; }
.theme-preset-colors > i { display: grid; width: 1.28rem; height: 1.28rem; place-items: center; border: 1px solid rgb(255 255 255 / .35); border-radius: 50%; color: #fff; font-size: .42rem; font-style: normal; font-weight: 950; line-height: 1; box-shadow: 0 .18rem .42rem rgb(15 23 42 / .2); }
.theme-preset-colors > i:nth-child(1) { background: var(--theme-swatch-1); }
.theme-preset-colors > i:nth-child(2) { background: var(--theme-swatch-2); }
.theme-preset-colors > i:nth-child(3) { background: var(--theme-swatch-3); }
.theme-preset-check { position: absolute; top: .75rem; left: .75rem; display: none; width: 1.3rem; height: 1.3rem; place-items: center; border: 2px solid rgb(255 255 255 / .8); border-radius: 50%; background: var(--theme-swatch-1); color: #fff; font-size: .55rem; box-shadow: 0 .28rem .65rem rgb(15 23 42 / .28); }
.theme-preset-grid > button.is-active .theme-preset-check { display: grid; }
.theme-monet-card { display: grid; grid-template-columns: 3.25rem minmax(0,1fr) auto; align-items: center; gap: .85rem; background: linear-gradient(120deg, color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 88%), color-mix(in srgb, var(--color-dynamic-secondary, #7c3aed), transparent 92%)), var(--theme-catalog-panel); }
.theme-monet-orbit { position: relative; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: conic-gradient(var(--color-dynamic,#d76f2a),var(--color-dynamic-secondary,#7c3aed),var(--theme-tertiary,#f59e0b),var(--color-dynamic,#d76f2a)); box-shadow: inset 0 0 0 .45rem color-mix(in srgb, var(--theme-catalog-panel), transparent 12%); }
.theme-monet-orbit i { position: absolute; border-radius: 50%; background: #fff; }
.theme-monet-orbit i:nth-child(1) { width: .48rem; height: .48rem; left: .45rem; top: .8rem; }
.theme-monet-orbit i:nth-child(2) { width: .64rem; height: .64rem; right: .42rem; top: .55rem; }
.theme-monet-orbit i:nth-child(3) { width: .38rem; height: .38rem; right: .8rem; bottom: .42rem; }
.theme-monet-card > button,.theme-builder-actions button,.theme-catalog-footer button { min-height: 2.35rem; border-radius: 999px; background: var(--color-dynamic, #d76f2a); color: #fff; padding: .55rem .9rem; font-size: .61rem; font-weight: 950; white-space: nowrap; }
.theme-monet-scope-switch { grid-column: 1 / -1; width: 100%; margin-top: .15rem; }
.theme-builder-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.theme-builder-grid label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .65rem; border: 1px solid var(--theme-catalog-line); border-radius: .8rem; padding: .65rem .7rem; background: var(--theme-catalog-panel); }
.theme-builder-grid label span { color: var(--theme-catalog-text); font-size: .58rem; font-weight: 850; line-height: 1.3; }
.theme-builder-grid input[type="color"] { width: 2.2rem; height: 2.2rem; flex: 0 0 2.2rem; overflow: hidden; border: 2px solid color-mix(in srgb, var(--adaptive-text, #382419), transparent 78%); border-radius: .65rem; padding: 0; background: transparent; cursor: pointer; }
.theme-builder-grid input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.theme-builder-grid input[type="color"]::-webkit-color-swatch { border: 0; }
.theme-scope-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: .7rem; }
.theme-scope-switch button { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .12rem; border: 1px solid var(--theme-catalog-line); border-radius: .75rem; padding: .6rem .7rem; background: var(--theme-catalog-panel); color: var(--theme-catalog-text); text-align: left; }
.theme-scope-switch button strong { font-size: .63rem; font-weight: 950; }
.theme-scope-switch button small { color: var(--theme-catalog-muted); font-size: .52rem; font-weight: 700; }
.theme-scope-switch button:is(.is-active,[aria-pressed="true"]) { border-color: var(--color-dynamic, #d76f2a); background: color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 88%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #d76f2a), transparent 70%); }
.theme-builder-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .8rem; }
.theme-builder-actions button.is-reset { border: 1px solid var(--theme-catalog-line); background: var(--theme-catalog-panel); color: var(--theme-catalog-muted); }
.theme-catalog-footer { display: flex; min-height: 4.1rem; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--theme-catalog-line); padding: .75rem 1.15rem; background: color-mix(in srgb, var(--theme-catalog-panel) 94%, var(--color-dynamic, #d76f2a) 6%); }
.theme-catalog-footer span { overflow: hidden; color: var(--theme-catalog-muted); font-size: .6rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

/* Акцентные темы намеренно не затрагивают фон страницы и карточек. */
html.theme-palette-active:not(.adaptive-theme) :is(.profile-tab-icon,.nav-item svg,.tab-btn svg,.settings-menu-icon,.search-wrapper svg,.post-actions svg,.space-tabs svg) { color: var(--color-dynamic, #2563eb) !important; }
html.theme-palette-active:not(.adaptive-theme) :is(.post-author,.space-post-title,.space-card-title,.item-name,.settings-profile-rank-btn strong,.theme-catalog-section h4) { color: var(--color-dynamic-secondary, #e11d48) !important; }
html.theme-palette-active:not(.adaptive-theme) :is(.post-date,.space-post-date,.settings-profile-rank-btn small,.theme-catalog-section p) { color: var(--theme-tertiary, #f59e0b) !important; }
html.theme-palette-active:not(.adaptive-theme) :is(.btn-publish,.space-primary-button,.load-more-posts,#theme-monet-apply) { border-color: var(--color-dynamic, #2563eb) !important; background: var(--color-dynamic, #2563eb) !important; color: #fff !important; }
html.theme-palette-active:not(.adaptive-theme) :is(#global-search,.post-input,.comment-input):focus { border-color: var(--color-dynamic, #2563eb) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 84%) !important; }

/* Панель «Настройки и Тема» всегда использует активную палитру целиком, без смеси с Tailwind blue. */
html.theme-palette-active #settings-dropdown :is(#theme-option-light,#theme-option-dark)[aria-pressed="true"] > div {
    border-color: var(--color-dynamic, #2563eb) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 68%);
}
html.theme-palette-active #settings-dropdown :is(#theme-option-light,#theme-option-dark)[aria-pressed="true"] > span,
html.theme-palette-active #settings-dropdown #menu-settings-content > button:first-child:hover {
    color: var(--color-dynamic, #2563eb) !important;
}
html.theme-palette-active #settings-dropdown :is(#theme-card-light,#theme-card-dark) > div:nth-child(2) {
    background-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 64%) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-theme-main .bg-linear-to-tr {
    background: conic-gradient(from 35deg, var(--color-dynamic, #2563eb), var(--color-dynamic-secondary, #e11d48), var(--theme-tertiary, #f59e0b), var(--color-dynamic, #2563eb)) !important;
}
html.theme-palette-active #settings-dropdown #system-theme-btn[aria-pressed="true"] {
    border-color: var(--color-dynamic, #2563eb) !important;
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%) !important;
}
html.theme-palette-active #settings-dropdown :is(#system-toggle-checkbox,#adaptive-toggle-checkbox):checked + span {
    background-color: var(--color-dynamic, #2563eb) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-theme-shell.is-active {
    border-color: var(--color-dynamic, #2563eb) !important;
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 90%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-theme-mode-toggle {
    border-left-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-theme-mode-menu {
    border-top-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 72%) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-theme-mode-menu > button:is(:hover,.is-active) {
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%) !important;
    color: var(--color-dynamic, #2563eb) !important;
}
html.theme-palette-active #settings-dropdown .adaptive-mode-check,
html.theme-palette-active #settings-dropdown .adaptive-theme-mode-toggle[aria-expanded="true"] {
    color: var(--color-dynamic, #2563eb) !important;
}
html.theme-palette-active #settings-dropdown button[onclick="openAllSettings()"] {
    border-color: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 62%) !important;
    background: color-mix(in srgb, var(--color-dynamic, #2563eb), transparent 88%) !important;
}
html.theme-palette-active #settings-dropdown button[onclick="openAllSettings()"] :is(span,svg),
html.theme-palette-active #settings-dropdown button[onclick="openLanguageSelect()"] > span:last-child {
    color: var(--color-dynamic, #2563eb) !important;
}

/* Полная трёхцветная тема: первый цвет — управление, второй — основной текст, третий — подписи. */
html.theme-palette-active.adaptive-theme:not(.theme-monet-active) {
    --adaptive-text-active: color-mix(in srgb, var(--color-dynamic-secondary, #e11d48) 72%, #172033);
    --adaptive-text-secondary: color-mix(in srgb, var(--color-dynamic-secondary, #e11d48) 58%, #475569);
    --adaptive-text-passive: color-mix(in srgb, var(--theme-tertiary, #f59e0b) 54%, #64748b);
    --adaptive-text: var(--adaptive-text-active);
    --adaptive-muted: var(--adaptive-text-passive);
    --adaptive-text-strong: var(--adaptive-text-active);
    --adaptive-text-muted: var(--adaptive-text-passive);
}
html.theme-palette-active.adaptive-theme.dark:not(.theme-monet-active) {
    --adaptive-text-active: color-mix(in srgb, var(--color-dynamic-secondary, #e11d48) 62%, #ffffff);
    --adaptive-text-secondary: color-mix(in srgb, var(--color-dynamic-secondary, #e11d48) 72%, #cbd5e1);
    --adaptive-text-passive: color-mix(in srgb, var(--theme-tertiary, #f59e0b) 62%, #94a3b8);
}

@media (max-width: 720px) {
    #settings-modal { padding: 0 !important; }
    .theme-catalog-dialog { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
    .theme-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .theme-builder-grid { grid-template-columns: 1fr; }
    .theme-monet-card { grid-template-columns: 3rem minmax(0,1fr); }
    .theme-monet-card > button { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .theme-preset-grid,.theme-scope-switch { grid-template-columns: 1fr; }
    .theme-catalog-head p { white-space: normal; }
}


/* ------------[Создание групп и каналов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 83/203 */
/* Общая форма использует палитру мессенджера и остаётся компактной даже при длинном списке участников. */
.messenger-type-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.messenger-type-tabs::-webkit-scrollbar { display: none; }
.messenger-new-modal > section { width: min(38rem, 100%); }
.messenger-room-kind-list { display: grid; gap: .7rem; padding: 1rem; }
.messenger-room-kind-list > button {
    display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .8rem;
    width: 100%; padding: .85rem; border: 1px solid var(--msg-line); border-radius: 1rem;
    background: color-mix(in srgb, var(--msg-panel, #fff) 88%, var(--msg-accent-soft));
    color: var(--msg-text); text-align: left; cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.messenger-room-kind-list > button:hover { transform: translateY(-1px); border-color: var(--msg-accent); background: var(--msg-accent-soft); }
.messenger-room-kind-list > button > i {
    display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .85rem;
    background: var(--msg-accent-soft); color: var(--msg-accent); font-size: 1.25rem; font-style: normal; font-weight: 900;
}
.messenger-room-kind-list > button > i .messenger-icon { width: 1.35rem; height: 1.35rem; }
.messenger-room-kind-list > button > span { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.messenger-room-kind-list strong { font-size: .88rem; }
.messenger-room-kind-list small,
.messenger-room-create-form label > span small,
.messenger-room-create-form legend small { color: var(--msg-muted); font-size: .65rem; font-weight: 600; }
.messenger-room-create-form {
    display: grid; gap: .85rem; max-height: calc(100vh - 9rem); overflow-y: auto; padding: 1rem 1.1rem 1.1rem;
}
.messenger-room-create-form > label,
.messenger-room-create-form fieldset { display: grid; gap: .38rem; min-width: 0; }
.messenger-room-create-form label > span,
.messenger-room-create-form legend { color: var(--msg-muted); font-size: .7rem; font-weight: 850; }
.messenger-room-create-form input:not([type]),
.messenger-room-create-form textarea,
.messenger-room-create-form select {
    width: 100%; border: 1px solid var(--msg-line); border-radius: .8rem; background: var(--msg-panel, #fff);
    color: var(--msg-text); outline: none; padding: .72rem .8rem; font: inherit; font-size: .78rem; resize: vertical;
}
.messenger-room-create-form input:focus,
.messenger-room-create-form textarea:focus,
.messenger-room-create-form select:focus { border-color: var(--msg-accent); box-shadow: 0 0 0 3px var(--msg-accent-soft); }
.messenger-room-field-note { color: var(--msg-muted); font-size: .62rem; }
.messenger-room-create-form fieldset { margin: 0; padding: 0; border: 0; }
.messenger-room-members {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; max-height: 11rem; overflow-y: auto; padding: .15rem;
}
.messenger-room-members > label {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: .4rem;
    padding: .45rem; border: 1px solid var(--msg-line); border-radius: .8rem; cursor: pointer;
}
.messenger-room-members > label > input,
.messenger-room-settings > label > input { position: absolute; opacity: 0; pointer-events: none; }
.messenger-room-members > label > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; align-items: center; }
.messenger-room-members .messenger-avatar { grid-row: 1 / 3; }
.messenger-room-members b,
.messenger-room-members small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-members b { font-size: .7rem; }
.messenger-room-members small { color: var(--msg-muted); font-size: .58rem; }
.messenger-room-members > label > i { width: .9rem; height: .9rem; border: 1px solid var(--msg-line); border-radius: .32rem; }
.messenger-room-members > label:has(input:checked) { border-color: var(--msg-accent); background: var(--msg-accent-soft); }
.messenger-room-members > label:has(input:checked) > i { border-color: var(--msg-accent); background: var(--msg-accent); box-shadow: inset 0 0 0 3px var(--msg-panel, #fff); }
.messenger-room-settings { display: grid; gap: .35rem; }
.messenger-room-settings > label {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .62rem .7rem; border: 1px solid var(--msg-line); border-radius: .8rem; cursor: pointer;
}
.messenger-room-settings > label > span { display: flex; flex-direction: column; gap: .12rem; }
.messenger-room-settings > label b { color: var(--msg-text); font-size: .72rem; }
.messenger-room-settings > label small { color: var(--msg-muted); font-size: .6rem; }
.messenger-room-settings > label > i {
    flex: 0 0 auto; width: 2rem; height: 1.1rem; padding: .16rem; border-radius: 2rem;
    background: color-mix(in srgb, var(--msg-muted) 30%, transparent);
}
.messenger-room-settings > label > i::after {
    content: ""; display: block; width: .78rem; height: .78rem; border-radius: 50%; background: #fff; transition: transform .18s ease;
}
.messenger-room-settings > label:has(input:checked) > i { background: var(--msg-accent); }
.messenger-room-settings > label:has(input:checked) > i::after { transform: translateX(.9rem); }
.messenger-room-create-form > footer {
    position: sticky; bottom: -.05rem; display: flex; justify-content: flex-end; gap: .5rem; padding-top: .75rem; background: var(--msg-bg);
}
.messenger-room-create-form > footer button {
    padding: .65rem .9rem; border: 1px solid var(--msg-line); border-radius: .8rem; background: transparent;
    color: var(--msg-text); font-size: .7rem; font-weight: 850; cursor: pointer;
}
.messenger-room-create-form > footer .is-primary { border-color: var(--msg-accent); background: var(--msg-accent); color: white; }
.messenger-room-space-link {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: calc(100% - 1.5rem);
    margin: .55rem .75rem 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--msg-accent) 35%, var(--msg-line));
    border-radius: .85rem; background: var(--msg-accent-soft); color: var(--msg-text); cursor: pointer;
}
.messenger-room-space-link > span { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .4rem; min-width: 0; }
.messenger-room-space-link b { font-size: .66rem; }
.messenger-room-space-link small { overflow: hidden; color: var(--msg-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-author {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .3rem; padding: 0;
    border: 0; background: transparent; color: var(--msg-accent); cursor: pointer;
}
.messenger-room-author img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
.messenger-room-author strong { font-size: .64rem; font-weight: 850; }
.messenger-attachments-modal > section { width: min(46rem, 100%); }
.messenger-shared-attachments {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem;
    max-height: min(34rem, calc(100vh - 9rem)); overflow-y: auto; padding: .8rem;
}
.messenger-shared-attachments > a {
    display: grid; grid-template-rows: 7.5rem auto; overflow: hidden; border: 1px solid var(--msg-line);
    border-radius: .9rem; background: var(--msg-panel, #fff); color: var(--msg-text); text-decoration: none;
}
.messenger-shared-attachments > a > img,
.messenger-shared-attachments > a > video { width: 100%; height: 7.5rem; object-fit: cover; }
.messenger-shared-attachments > a > i {
    display: grid; place-items: center; height: 7.5rem; background: var(--msg-accent-soft); color: var(--msg-accent);
}
.messenger-shared-attachments > a > i .messenger-icon { width: 2rem; height: 2rem; }
.messenger-shared-attachments > a > span { display: flex; min-width: 0; flex-direction: column; gap: .15rem; padding: .5rem; }
.messenger-shared-attachments strong,
.messenger-shared-attachments small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-shared-attachments strong { font-size: .68rem; }
.messenger-shared-attachments small { color: var(--msg-muted); font-size: .58rem; }
.messenger-shared-attachments > .messenger-empty { grid-column: 1 / -1; }
@media (max-width: 620px) {
    .messenger-room-members,
    .messenger-shared-attachments { grid-template-columns: 1fr; }
    .messenger-room-create-form { max-height: calc(100vh - 7rem); }
}


/* ------------[Компактное создание и настройки общих чатов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 84/203 */
.messenger-room-title-field .messenger-room-error {
    display: none;
    color: #ef4444;
    font-size: .62rem;
    font-weight: 750;
}
.messenger-room-title-field.has-error input {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 7%, var(--msg-panel, #fff));
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 15%, transparent);
}
.messenger-room-title-field.has-error .messenger-room-error { display: block; }
.messenger-room-members-fieldset { border: 0 !important; }
.messenger-room-members-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    width: 100%;
    padding: .72rem .78rem;
    border: 1px solid var(--msg-line);
    border-radius: .82rem;
    background: var(--msg-panel, #fff);
    color: var(--msg-text);
    text-align: left;
    cursor: pointer;
}
.messenger-room-members-trigger > span { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.messenger-room-members-trigger b { font-size: .74rem; }
.messenger-room-members-trigger small { color: var(--msg-muted); font-size: .61rem; }
.messenger-room-members-trigger > .messenger-icon { width: 1rem; height: 1rem; transition: transform .18s ease; }
.messenger-room-members-trigger.is-open > .messenger-icon { transform: rotate(180deg); }
.messenger-room-members.hidden { display: none; }
.messenger-room-members-fieldset .messenger-room-members {
    grid-template-columns: 1fr;
    max-height: 15rem;
    margin-top: .35rem;
    padding: .35rem;
    border: 1px solid var(--msg-line);
    border-radius: .85rem;
    background: var(--msg-panel, #fff);
}
.messenger-room-candidate-search,
.messenger-room-member-picker-search {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .62rem .7rem !important;
    border: 1px solid var(--msg-line) !important;
    border-radius: .75rem !important;
    background: var(--msg-panel, #fff) !important;
}
.messenger-room-candidate-search .messenger-icon,
.messenger-room-member-picker-search .messenger-icon { flex: 0 0 auto; width: .9rem; height: .9rem; color: var(--msg-muted); }
.messenger-room-candidate-search input,
.messenger-room-member-picker-search input {
    position: static !important;
    min-width: 0;
    width: 100%;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--msg-text);
    font: inherit;
    font-size: .7rem;
    outline: none;
}
.messenger-room-candidate-list { display: grid; gap: .18rem; margin-top: .35rem; }
.messenger-room-candidate-list > label {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .4rem;
    padding: .45rem;
    border-radius: .72rem;
    cursor: pointer;
}
.messenger-room-candidate-list > label:hover,
.messenger-room-candidate-list > label:has(input:checked) { background: var(--msg-accent-soft); }
.messenger-room-candidate-list > label > input { position: absolute; opacity: 0; pointer-events: none; }
.messenger-room-candidate-list > label > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; align-items: center; }
.messenger-room-candidate-list > label > i { width: .9rem; height: .9rem; border: 1px solid var(--msg-line); border-radius: .32rem; }
.messenger-room-candidate-list > label:has(input:checked) > i { border-color: var(--msg-accent); background: var(--msg-accent); box-shadow: inset 0 0 0 3px var(--msg-panel, #fff); }
.messenger-room-candidate-list > label[hidden],
.messenger-room-member-picker-list > button[hidden] { display: none; }
.messenger-room-candidate-empty { margin: .55rem 0 .15rem; color: var(--msg-muted); font-size: .64rem; text-align: center; }
.messenger-room-candidate-empty.hidden { display: none; }
.messenger-chat-open:focus,
.messenger-chat-open:focus-visible,
.messenger-row-menu-button:focus,
.messenger-row-menu-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--msg-accent) 48%, transparent);
}
.messenger-room-message-avatar {
    align-self: flex-end;
    flex: 0 0 auto;
    margin: 0 .45rem .1rem 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.messenger-room-message-avatar .messenger-avatar { width: 1.9rem; height: 1.9rem; }
.messenger-room-message-avatar .online-dot { display: none; }
.messenger-message.is-incoming.is-group-middle .messenger-room-message-avatar { visibility: hidden; }
.messenger-send-button.is-slow-mode {
    background: var(--msg-accent-soft) !important;
    color: var(--msg-accent) !important;
    cursor: wait;
}
.messenger-send-button.is-slow-mode b { font-size: .66rem; font-variant-numeric: tabular-nums; }

.messenger-room-settings-modal > section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(35rem, calc(100vw - 1rem));
    height: min(40rem, calc(100vh - 1rem));
    overflow: hidden;
}
.messenger-room-settings-form {
    display: grid;
    gap: .58rem;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: .65rem .75rem .75rem;
}
.messenger-room-settings-form > label { display: grid; gap: .32rem; }
.messenger-room-settings-form > label > span,
.messenger-room-settings-form .messenger-room-identity label > span {
    color: var(--msg-muted);
    font-size: .66rem;
    font-weight: 850;
}
.messenger-room-settings-form input[type="text"],
.messenger-room-settings-form textarea,
.messenger-room-settings-form select {
    width: 100%;
    padding: .68rem .75rem;
    border: 1px solid var(--msg-line);
    border-radius: .78rem;
    background: var(--msg-panel, #fff);
    color: var(--msg-text);
    font: inherit;
    font-size: .75rem;
    outline: none;
}
.messenger-room-settings-form input:focus,
.messenger-room-settings-form textarea:focus,
.messenger-room-settings-form select:focus {
    border-color: var(--msg-accent);
    box-shadow: 0 0 0 3px var(--msg-accent-soft);
}
.messenger-room-settings-form textarea { resize: vertical; }
.messenger-room-identity {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
}
.messenger-room-identity > label:last-child { display: grid; gap: .32rem; }
.messenger-room-avatar-picker {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .25rem;
    cursor: pointer;
}
.messenger-room-avatar-picker .messenger-avatar { width: 3.4rem; height: 3.4rem; }
.messenger-room-avatar-picker .online-dot { display: none; }
.messenger-room-avatar-picker input { position: absolute; opacity: 0; pointer-events: none; }
.messenger-room-avatar-picker > span { display: inline-flex; align-items: center; gap: .25rem; color: var(--msg-accent); font-size: .6rem; font-weight: 800; }
.messenger-room-avatar-picker > span .messenger-icon { width: .72rem; height: .72rem; }
.messenger-room-policy {
    display: grid;
    gap: .35rem;
    padding: .7rem;
    border: 1px solid var(--msg-line);
    border-radius: .9rem;
}
.messenger-room-policy h3,
.messenger-room-members-manage h3 { margin: 0; font-size: .75rem; }
.messenger-room-policy > label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem .1rem;
    cursor: pointer;
}
.messenger-room-policy > label + label { border-top: 1px solid var(--msg-line); }
.messenger-room-policy input { position: absolute; opacity: 0; pointer-events: none; }
.messenger-room-policy label > span { display: flex; flex-direction: column; gap: .1rem; }
.messenger-room-policy b { font-size: .68rem; }
.messenger-room-policy small { color: var(--msg-muted); font-size: .58rem; }
.messenger-room-policy label > i {
    flex: 0 0 auto;
    width: 2rem;
    height: 1.1rem;
    padding: .16rem;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--msg-muted) 30%, transparent);
}
.messenger-room-policy label > i::after {
    content: "";
    display: block;
    width: .78rem;
    height: .78rem;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.messenger-room-policy label:has(input:checked) > i { background: var(--msg-accent); }
.messenger-room-policy label:has(input:checked) > i::after { transform: translateX(.9rem); }
.messenger-room-members-manage {
    display: grid;
    gap: .5rem;
    padding: .7rem;
    border: 1px solid var(--msg-line);
    border-radius: .9rem;
}
.messenger-room-members-manage > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.messenger-room-members-manage > div:first-child small {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-size: .6rem;
    font-weight: 850;
}
.messenger-room-member-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.messenger-room-member-add button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem .65rem;
    border: 1px solid var(--msg-accent);
    border-radius: .7rem;
    background: var(--msg-accent-soft);
    color: var(--msg-accent);
    font-size: .62rem;
    font-weight: 850;
    cursor: pointer;
}
.messenger-room-member-add button .messenger-icon { width: .75rem; height: .75rem; }
.messenger-room-member-picker { position: relative; min-width: 0; }
.messenger-room-member-picker-trigger {
    justify-content: space-between;
    width: 100%;
    min-height: 2.45rem;
    border-color: var(--msg-line) !important;
    background: var(--msg-panel, #fff) !important;
    color: var(--msg-text) !important;
    text-align: left;
}
.messenger-room-member-picker-trigger > span { display: flex; min-width: 0; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-member-picker-trigger b { overflow: hidden; text-overflow: ellipsis; font-size: .66rem; }
.messenger-room-member-picker-trigger small { color: var(--msg-muted); font-size: .56rem; }
.messenger-room-member-picker-trigger > .messenger-icon { flex: 0 0 auto; transition: transform .18s ease; }
.messenger-room-member-picker-trigger.is-open > .messenger-icon { transform: rotate(180deg); }
.messenger-room-member-picker-popover {
    position: absolute;
    z-index: 35;
    top: calc(100% + .35rem);
    right: 0;
    left: 0;
    padding: .42rem;
    border: 1px solid var(--msg-line);
    border-radius: .85rem;
    background: var(--msg-panel, #fff);
    box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--msg-text) 14%, transparent);
}
.messenger-room-member-picker-popover.hidden { display: none; }
.messenger-room-member-picker-list { display: grid; gap: .12rem; max-height: 13rem; margin-top: .32rem; overflow-y: auto; }
.messenger-room-member-add .messenger-room-member-picker-list > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .52rem;
    width: 100%;
    padding: .43rem;
    border: 0;
    border-radius: .68rem;
    background: transparent;
    color: var(--msg-text);
    text-align: left;
}
.messenger-room-member-add .messenger-room-member-picker-list > button:hover { background: var(--msg-accent-soft); }
.messenger-room-member-picker-list .messenger-avatar { width: 2rem; height: 2rem; }
.messenger-room-member-picker-list .online-dot { display: none; }
.messenger-room-member-picker-list button > span { display: flex; min-width: 0; flex-direction: column; }
.messenger-room-member-picker-list b,
.messenger-room-member-picker-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-member-picker-list b { font-size: .66rem; }
.messenger-room-member-picker-list small { color: var(--msg-muted); font-size: .57rem; }
.messenger-room-member-add-submit { white-space: nowrap; }
.messenger-system-message {
    display: flex;
    justify-content: center;
    margin: .48rem 0;
    padding: 0 .5rem;
}
.messenger-system-message > span {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    max-width: min(34rem, 92%);
    padding: .34rem .62rem;
    border: 1px solid var(--msg-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-panel, #fff) 84%, transparent);
    color: var(--msg-muted);
    box-shadow: 0 .25rem .8rem color-mix(in srgb, var(--msg-text) 6%, transparent);
}
.messenger-system-message .messenger-icon { flex: 0 0 auto; width: .72rem; height: .72rem; color: var(--msg-accent); }
.messenger-system-message b { font-size: .6rem; font-weight: 750; }
.messenger-system-message time { flex: 0 0 auto; font-size: .52rem; opacity: .75; }
.messenger-room-panel {
    position: absolute;
    z-index: 82;
    top: calc(100% - .35rem);
    right: 0;
    display: grid;
    grid-template-rows: auto auto minmax(5.5rem, 1fr) auto;
    width: min(25rem, calc(100vw - 1rem));
    height: min(31rem, calc(100vh - 6rem));
    padding: .58rem;
    border: 1px solid var(--msg-line);
    border-radius: 1rem;
    background: var(--msg-bg);
    box-shadow: 0 1rem 3rem color-mix(in srgb, #020617 28%, transparent);
}
.messenger-room-panel > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .58rem; padding: .25rem .25rem .55rem; }
.messenger-room-panel > header .messenger-avatar { width: 2.8rem; height: 2.8rem; }
.messenger-room-panel > header .online-dot { display: none; }
.messenger-room-panel > header > span { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.messenger-room-panel > header strong,
.messenger-room-panel > header small { overflow: hidden; text-overflow: ellipsis; }
.messenger-room-panel > header strong { font-size: .78rem; white-space: nowrap; }
.messenger-room-panel > header small { display: -webkit-box; color: var(--msg-muted); font-size: .58rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.messenger-room-panel > nav { display: flex; gap: .32rem; padding: .18rem .1rem .5rem; overflow-x: auto; scrollbar-width: thin; }
.messenger-room-panel > nav button {
    display: grid;
    flex: 0 0 4.25rem;
    place-items: center;
    gap: .22rem;
    min-height: 3.35rem;
    padding: .38rem;
    border: 1px solid var(--msg-line);
    border-radius: .75rem;
    background: var(--msg-panel, #fff);
    color: var(--msg-muted);
    font-size: .55rem;
    font-weight: 800;
    cursor: pointer;
}
.messenger-room-panel > nav button.is-active,
.messenger-room-panel > nav button:hover { border-color: var(--msg-accent); background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-room-panel > nav .messenger-icon { width: 1rem; height: 1rem; }
.messenger-room-panel > section { min-height: 0; overflow: hidden auto; border-top: 1px solid var(--msg-line); }
.messenger-room-panel-content { padding: .48rem .08rem; }
.messenger-room-panel-overview { display: flex; min-height: 7rem; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: 1rem; color: var(--msg-muted); text-align: center; }
.messenger-room-panel-overview b { color: var(--msg-text); font-size: .68rem; }
.messenger-room-panel-overview span { font-size: .58rem; }
.messenger-room-panel-members { display: grid; gap: .2rem; padding: .42rem .05rem; }
.messenger-room-panel-members article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .42rem; padding: .4rem; border-radius: .68rem; background: var(--msg-panel, #fff); }
.messenger-room-panel-members article > span { display: flex; min-width: 0; flex-direction: column; }
.messenger-room-panel-members b,
.messenger-room-panel-members small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-panel-members b { font-size: .64rem; }
.messenger-room-panel-members small { color: var(--msg-muted); font-size: .54rem; }
.messenger-room-panel-members button { padding: .35rem .48rem; border: 1px solid var(--msg-line); border-radius: .58rem; background: var(--msg-accent-soft); color: var(--msg-accent); font-size: .55rem; font-weight: 800; cursor: pointer; }
.messenger-room-panel > footer { padding-top: .48rem; border-top: 1px solid var(--msg-line); }
.messenger-room-panel > footer button { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; padding: .5rem; border: 1px solid var(--msg-accent); border-radius: .7rem; background: var(--msg-accent-soft); color: var(--msg-accent); font-size: .62rem; font-weight: 850; cursor: pointer; }
.messenger-room-panel > footer .messenger-icon { width: .8rem; height: .8rem; }
.messenger-blank-context-menu {
    position: fixed;
    z-index: 210;
    top: var(--blank-menu-y, 5rem);
    left: var(--blank-menu-x, 5rem);
    width: min(14.4rem, calc(100vw - 1rem));
    padding: .38rem;
    border: 1px solid var(--msg-line);
    border-radius: .88rem;
    background: var(--msg-bg);
    box-shadow: 0 .8rem 2.4rem color-mix(in srgb, #020617 28%, transparent);
}
.messenger-blank-context-menu button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.15rem;
    padding: .4rem .5rem;
    border: 0;
    border-radius: .62rem;
    background: transparent;
    color: var(--msg-text);
    font-size: .66rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}
.messenger-blank-context-menu button:hover { background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-blank-context-menu .messenger-icon { width: .82rem; height: .82rem; }

/* ------------[Ответ во время записи]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 85/203 */
/* Цитата остаётся отдельной верхней строкой, а запись занимает собственную строку под ней и больше её не перекрывает. */
.messenger-composer.is-recording {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    min-height: 3.5rem;
}
.messenger-composer.is-recording > :not(.messenger-recording-panel):not(.messenger-composer-reply) {
    display: none !important;
}
.messenger-composer.is-recording > .messenger-composer-reply {
    position: relative;
    z-index: 46;
    display: grid !important;
    grid-column: 1;
    grid-row: 1;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.messenger-composer.is-recording > .messenger-recording-panel.is-active {
    position: relative;
    inset: auto;
    z-index: 45;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 3rem;
}
.messenger-composer.is-recording.has-reply {
    grid-template-rows: auto minmax(3rem, auto);
}
.messenger-composer.is-recording.has-reply > .messenger-recording-panel.is-active { grid-row: 2; }
.messenger-composer.is-recording.has-reply > .messenger-recording-panel.is-video .messenger-recording-video {
    bottom: calc(100% + 3rem);
}
.messenger-room-member-list { display: grid; gap: .3rem; max-height: 13rem; overflow-y: auto; }
.messenger-room-member-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .45rem;
    padding: .42rem;
    border-radius: .72rem;
    background: color-mix(in srgb, var(--msg-panel, #fff) 88%, var(--msg-accent-soft));
}
.messenger-room-member-list article > span { display: flex; min-width: 0; flex-direction: column; }
.messenger-room-member-list b,
.messenger-room-member-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-member-list b { font-size: .67rem; }
.messenger-room-member-list small { color: var(--msg-muted); font-size: .56rem; }
.messenger-room-member-list article > button {
    padding: .38rem .48rem;
    border: 1px solid var(--msg-line);
    border-radius: .6rem;
    background: transparent;
    color: var(--msg-muted);
    font-size: .58rem;
    font-weight: 800;
    cursor: pointer;
}
.messenger-room-member-list article > button.is-danger { color: #ef4444; }
.messenger-room-member-list article > button .messenger-icon { width: .7rem; height: .7rem; }
.messenger-room-settings-form > footer {
    position: sticky;
    z-index: 2;
    bottom: -.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    min-height: 4.15rem;
    margin: .15rem -.75rem -.75rem;
    padding: .7rem .75rem .75rem;
    background: var(--msg-bg);
    box-shadow: 0 -.65rem 1rem color-mix(in srgb, var(--msg-bg) 76%, transparent);
}
.messenger-room-settings-form > footer button {
    padding: .62rem .85rem;
    border: 1px solid var(--msg-line);
    border-radius: .75rem;
    background: transparent;
    color: var(--msg-text);
    font-size: .65rem;
    font-weight: 850;
    cursor: pointer;
}
.messenger-room-settings-form > footer .is-primary { border-color: var(--msg-accent); background: var(--msg-accent); color: #fff; }
.messenger-room-settings-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 10rem;
    color: var(--msg-muted);
    font-size: .7rem;
}
.messenger-room-settings-loading > span {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--msg-line);
    border-top-color: var(--msg-accent);
    border-radius: 50%;
    animation: messenger-spin .8s linear infinite;
}
.messenger-attachment-filters {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .65rem .8rem .1rem;
    scrollbar-width: none;
}
.messenger-attachment-filters::-webkit-scrollbar { display: none; }
.messenger-attachment-filters button {
    flex: 0 0 auto;
    padding: .45rem .65rem;
    border: 1px solid var(--msg-line);
    border-radius: 999px;
    background: transparent;
    color: var(--msg-muted);
    font-size: .62rem;
    font-weight: 800;
    cursor: pointer;
}
.messenger-attachment-filters button.is-active { border-color: var(--msg-accent); background: var(--msg-accent-soft); color: var(--msg-accent); }
@media (max-width: 620px) {
    .messenger-room-identity { grid-template-columns: 1fr; }
    .messenger-room-member-add { grid-template-columns: 1fr; }
}

/* ------------[Компактная музыка и управление группой]------------ // Выравнивает крестик, ужимает аудиостроку и выделяет участников из чёрного списка. Модуль: «оформление интерфейса». Часть 86/203 */
.messenger-room-panel-close { right: 0; left: auto; }
.messenger-room-panel-manage { right: auto; left: 0; }
.vmesta-track-file-meta { overflow: hidden; color: var(--track-muted); font-size: .45rem; font-weight: 800; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vmesta-track-clock { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .2rem; }
.messenger-attachment-audio .vmesta-track-player { gap: .16rem; padding: .42rem .48rem; border-radius: .72rem; box-shadow: 0 .38rem .9rem -.82rem color-mix(in srgb,var(--track-accent) 32%,transparent); }
.messenger-attachment-audio .vmesta-track-head { min-height: .78rem; padding-left: 2.35rem; }
.messenger-attachment-audio .vmesta-track-head strong { font-size: .61rem; }
.messenger-attachment-audio .vmesta-track-body { grid-template-columns: 1.85rem minmax(4rem,1fr) auto; gap: .4rem; }
.messenger-attachment-audio .vmesta-track-play { width: 1.85rem; height: 1.85rem; }
.messenger-attachment-audio .vmesta-track-wave { height: 1.4rem; }
.messenger-attachment-audio .vmesta-track-tools button { width: 1.58rem; height: 1.58rem; }
.messenger-attachment-audio .vmesta-track-time { gap: .48rem; }
.messenger-room-member-list article { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.messenger-room-member-list article.is-blacklisted { box-shadow: inset .14rem 0 0 #ef4444; }
.messenger-room-member-list article > button.is-blacklist.is-active { border-color: color-mix(in srgb, #ef4444 50%, var(--msg-line)); background: color-mix(in srgb, #ef4444 10%, transparent); color: #ef4444; }
@media (max-width: 620px) {
    .messenger-room-member-list article { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .messenger-room-member-list article > button.is-blacklist { grid-column: 2; justify-self: start; }
}

/* ------------[Плеер внутри шапки]------------ // Раскрывается вправо от логотипа, повторяет волну сообщений и оставляет только воспроизведение, громкость и очередь. Модуль: «оформление интерфейса». Часть 87/203 */
.site-brand-player { z-index: 2; }
.global-music-dock { position: absolute; top: 50%; left: calc(100% + 1rem); display: flex; align-items: center; gap: .42rem; margin-left: 0; transform: translateY(-50%); }
.global-music-panel { position: static; display: grid; width: clamp(12.5rem, 22vw, 18rem); height: 2.55rem; grid-template-columns: 1.9rem minmax(5.5rem, 1fr) 1.68rem; align-items: center; gap: .42rem; padding: .25rem .32rem; border-radius: .78rem; background: color-mix(in srgb, var(--adaptive-surface, #fff) 90%, transparent); box-shadow: 0 .35rem 1rem rgba(61,35,19,.11); backdrop-filter: blur(14px); transform: none; }
.global-music-panel > audio { display: none; }
#global-music-play { width: 1.9rem; height: 1.9rem; border-radius: .62rem; }
#global-music-play svg { width: .78rem; height: .78rem; }
.global-music-timeline { display: grid; min-width: 0; align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }
.global-music-wave { position: relative; min-width: 0; min-height: 1.08rem; }
.global-music-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.global-music-wave path { fill: none; stroke: color-mix(in srgb, var(--color-text, #6f442b) 26%, transparent); stroke-width: 1.45; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.global-music-wave path.is-progress { stroke: var(--color-dynamic, #d76f2a); stroke-width: 2; clip-path: inset(0 calc(100% - var(--global-track-progress, 0%)) 0 0); transition: clip-path .08s linear; }
#global-music-progress { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.global-music-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .35rem; }
.global-music-footer > small { display: inline-flex; align-items: center; gap: .16rem; color: color-mix(in srgb, var(--color-text, #6f442b) 58%, transparent); font-size: .43rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.global-music-footer > small time:first-child { color: var(--color-dynamic, #d76f2a); }
.global-music-switches { display: inline-flex; align-items: center; gap: .16rem; }
.global-music-switches button { display: grid; width: 1.08rem; height: .82rem; place-items: center; border: 0; border-radius: .28rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 9%, transparent); color: var(--color-dynamic, #d76f2a); cursor: pointer; }
.global-music-switches svg { width: .58rem; height: .58rem; fill: currentColor; stroke: currentColor; stroke-width: 1.4; }
.global-music-volume-wrap { position: relative; display: grid; }
#global-music-volume { display: grid; width: 1.68rem; height: 1.68rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 24%, transparent); border-radius: .52rem; background: color-mix(in srgb, var(--adaptive-surface, #fff) 80%, transparent); color: var(--color-dynamic, #d76f2a); cursor: pointer; }
#global-music-volume svg { width: .78rem; height: .78rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#global-music-volume.is-muted { opacity: .55; }
.global-music-volume-popover { position: absolute; right: 50%; bottom: calc(100% + .42rem); display: block; width: 2rem; height: 5.2rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 22%, transparent); border-radius: .68rem; background: var(--adaptive-surface, #fff); box-shadow: 0 .7rem 1.8rem rgba(61,35,19,.18); opacity: 0; pointer-events: none; transform: translate(50%, .24rem) scale(.95); transition: opacity .16s ease, transform .16s ease; }
.global-music-volume-wrap.is-open .global-music-volume-popover { opacity: 1; pointer-events: auto; transform: translateX(50%); }
.global-music-volume-popover input { position: absolute; top: 50%; left: 50%; width: 3.9rem; height: .8rem; margin: 0; accent-color: var(--color-dynamic, #d76f2a); transform: translate(-50%, -50%) rotate(-90deg); cursor: pointer; }
@media (max-width: 900px) {
    .global-music-dock { left: calc(100% + .55rem); }
    .global-music-panel { width: 12rem; }
}
@media (max-width: 720px) {
    .global-music-panel { position: absolute; top: calc(100% + .55rem); left: 0; width: min(18rem, calc(100vw - 1rem)); }
}

/* ------------[Врезанный плеер шапки]------------ // Убирает вид отдельной карточки: панель остаётся тонкой частью верхней строки и закрывается маленьким крестиком. Модуль: «оформление интерфейса». Часть 88/203 */
.global-music-dock { left: calc(100% + 1.35rem); }
.global-music-panel { position: static; top: auto; left: auto; width: clamp(11.5rem, 20vw, 15.5rem); height: 2.1rem; grid-template-columns: 1.68rem minmax(4.5rem, 1fr) 1.46rem .82rem; gap: .24rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: none; }
#global-music-play { width: 1.68rem; height: 1.68rem; border-radius: .52rem; box-shadow: none; }
.global-music-wave { min-height: .9rem; }
.global-music-footer > small { font-size: .4rem; }
.global-music-switches button { width: .92rem; height: .7rem; }
#global-music-volume { width: 1.46rem; height: 1.46rem; border-radius: .46rem; }
.global-music-inline-close { display: grid; width: .82rem; height: .82rem; place-items: center; align-self: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-text, #6f442b) 8%, transparent); color: color-mix(in srgb, var(--color-text, #6f442b) 58%, transparent); font-size: .68rem; line-height: 1; cursor: pointer; }
.global-music-inline-close:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.global-music-volume-popover { top: calc(100% + .42rem); bottom: auto; }
@media (max-width: 900px) {
    .global-music-dock { left: calc(100% + .7rem); }
    .global-music-panel { width: 10.5rem; grid-template-columns: 1.55rem minmax(3.4rem, 1fr) 1.35rem .78rem; }
    #global-music-play { width: 1.55rem; height: 1.55rem; }
    #global-music-volume { width: 1.35rem; height: 1.35rem; }
}
@media (max-width: 720px) {
    .global-music-panel { position: static; top: auto; left: auto; width: 9.7rem; transform: none; }
    .global-music-footer > small { font-size: .37rem; }
    .global-music-switches button { width: .78rem; }
}

/* ------------[Финальная компоновка групп и плеера]------------ // Обе кнопки группы стоят справа, автор не дублирует аватар, а плеер заменяет музыкальную иконку внутри шапки. Модуль: «оформление интерфейса». Часть 89/203 */
.messenger-room-panel-close { right: 0; left: auto; }
.messenger-room-panel-manage { right: 2.35rem; left: auto; }
.messenger-room-author { align-items: flex-start; margin-left: .08rem; }
.messenger-room-author > span { display: grid; justify-items: start; gap: .02rem; }
.messenger-room-author strong { line-height: 1.1; }
.messenger-room-author small { color: var(--msg-muted); font-size: .48rem; font-weight: 750; line-height: 1.1; }
.messenger-room-settings-form > footer .messenger-room-leave { margin-right: auto; border-color: color-mix(in srgb, #ef4444 38%, var(--msg-line)); color: #ef4444; }
.messenger-room-settings-form > footer .messenger-room-leave:disabled { cursor: not-allowed; opacity: .45; }
.messenger-room-panel-leave { margin-top: .42rem; padding: .34rem .62rem; border: 1px solid color-mix(in srgb, #ef4444 38%, var(--msg-line)); border-radius: .58rem; color: #ef4444; font-size: .52rem; font-weight: 850; cursor: pointer; }
.global-music-dock.is-open .global-music-toggle { display: none; }
.global-music-dock.is-open { gap: 0; }

/* ======[ПРОФИЛЬ ГРУППЫ: ЦЕНТРИРОВАННАЯ КАРТОЧКА И ТОНКИЕ РАЗДЕЛЫ]====== */
.messenger-room-panel { grid-template-rows: auto auto minmax(5.5rem, 1fr); width: min(26rem, calc(100vw - 1rem)); }
.messenger-room-panel > header { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem .35rem .55rem; text-align: center; }
.messenger-room-panel > header .messenger-avatar { width: 5.2rem; height: 5.2rem; margin-top: .15rem; border: 2px solid var(--msg-panel, #fff); box-shadow: 0 .4rem 1.4rem color-mix(in srgb, var(--msg-text) 12%, transparent); }
.messenger-room-panel > header .online-dot { display: none; }
.messenger-room-panel > header > strong { max-width: 70%; margin-top: .2rem; overflow: hidden; color: var(--msg-text); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-panel-handle { overflow: hidden; color: var(--msg-accent); font-size: .58rem; font-weight: 800; text-overflow: ellipsis; }
.messenger-room-panel > header > p { display: -webkit-box; max-width: 88%; margin: .2rem 0 .35rem; overflow: hidden; color: var(--msg-muted); font-size: .58rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.messenger-room-panel-manage { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: .25rem; padding: .36rem .46rem; border: 1px solid var(--msg-line); border-radius: .62rem; background: var(--msg-panel, #fff); color: var(--msg-accent); font-size: .52rem; font-weight: 850; cursor: pointer; }
.messenger-room-panel-manage .messenger-icon { width: .72rem; height: .72rem; }
.messenger-room-panel-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .28rem; width: 100%; }
.messenger-room-panel-meta button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .06rem .3rem; min-width: 0; padding: .38rem .45rem; border: 1px solid var(--msg-line); border-radius: .62rem; background: color-mix(in srgb, var(--msg-panel, #fff) 88%, transparent); color: var(--msg-text); text-align: left; cursor: pointer; }
.messenger-room-panel-meta button.is-invite { grid-column: 1 / -1; }
.messenger-room-panel-meta span { grid-column: 1; color: var(--msg-muted); font-size: .48rem; }
.messenger-room-panel-meta b { grid-column: 1; overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-panel-meta .messenger-icon { grid-column: 2; grid-row: 1 / 3; width: .7rem; height: .7rem; color: var(--msg-accent); }
.messenger-room-panel > nav { display: flex; gap: .28rem; padding: .28rem .05rem .48rem; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.messenger-room-panel > nav button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .25rem; min-width: 4rem; min-height: 2.15rem; padding: .32rem .46rem; border-radius: .65rem; }
.messenger-room-panel > nav .messenger-icon { width: .76rem; height: .76rem; }
.messenger-room-panel-content.is-music,
.messenger-room-panel-content.is-file { display: block; }
.messenger-room-asset-list { display: grid; gap: .28rem; }
.messenger-room-asset-list > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .42rem; min-height: 2.7rem; padding: .36rem .44rem; border: 1px solid var(--msg-line); border-radius: .68rem; background: var(--msg-panel, #fff); color: var(--msg-text); text-decoration: none; }
.messenger-room-asset-list > a > i { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .55rem; background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-room-asset-list > a > i .messenger-icon { width: .85rem; height: .85rem; }
.messenger-room-asset-list > a > span { display: flex; min-width: 0; flex-direction: column; text-align: left; }
.messenger-room-asset-list strong,
.messenger-room-asset-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-asset-list strong { font-size: .6rem; }
.messenger-room-asset-list small { color: var(--msg-muted); font-size: .5rem; }
.messenger-room-asset-list > a > .messenger-icon { width: .72rem; height: .72rem; color: var(--msg-muted); }
.messenger-room-handle-field { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--msg-line); border-radius: .68rem; background: var(--msg-panel, #fff); }
.messenger-room-handle-field > b { padding-left: .55rem; color: var(--msg-accent); font-size: .68rem; }
.messenger-room-handle-field > input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; }
.messenger-room-panel-layer { position: absolute; z-index: 81; inset: 4.55rem 0 0; display: flex; align-items: flex-start; justify-content: center; padding: .7rem; background: color-mix(in srgb, var(--msg-bg) 34%, transparent); backdrop-filter: blur(2px); }
.messenger-room-panel-layer .messenger-room-panel { position: relative; top: auto; right: auto; height: min(31rem, calc(100% - .2rem)); max-height: calc(100% - .2rem); }
.messenger-room-panel-close { position: absolute; top: 0; left: 0; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--msg-line); border-radius: .62rem; background: var(--msg-panel, #fff); color: var(--msg-muted); cursor: pointer; }
.messenger-room-panel-close .messenger-icon { width: .78rem; height: .78rem; }
/* ------------[Библиотека вложений чата]------------ // Встроенный просмотр медиа, компактные строки музыки и переход к исходному сообщению. Модуль: «оформление интерфейса». Часть 90/203 */
.messenger-attachment-media { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--msg-line); border-radius: .8rem; background: var(--msg-panel, #fff); }
.messenger-attachment-preview { display: flex; width: 100%; flex-direction: column; padding: 0; color: var(--msg-text); text-align: left; cursor: pointer; }
.messenger-attachment-preview > img,.messenger-attachment-preview > video { width: 100%; height: 7.5rem; object-fit: cover; background: color-mix(in srgb, var(--msg-text) 7%, transparent); }
.messenger-attachment-preview > span { display: flex; min-width: 0; flex-direction: column; gap: .1rem; padding: .48rem 2.45rem .48rem .55rem; }
.messenger-attachment-preview strong,.messenger-attachment-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-attachment-preview strong { font-size: .64rem; }
.messenger-attachment-preview small { color: var(--msg-muted); font-size: .52rem; }
.messenger-attachment-reveal { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--msg-line); border-radius: .58rem; background: var(--msg-panel, #fff); color: var(--msg-accent); cursor: pointer; }
.messenger-attachment-reveal .messenger-icon { width: .78rem; height: .78rem; }
.messenger-attachment-media > .messenger-attachment-reveal { position: absolute; right: .45rem; bottom: .42rem; }
.messenger-attachment-audio,.messenger-attachment-file { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .38rem; min-width: 0; }
.messenger-attachment-audio .vmesta-track-player { width: 100%; max-width: none; }
.messenger-attachment-file { padding: .4rem; border: 1px solid var(--msg-line); border-radius: .78rem; background: var(--msg-panel, #fff); }
.messenger-attachment-file > :is(a,button) { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .5rem; min-width: 0; border: 0; background: transparent; color: var(--msg-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.messenger-attachment-file > :is(a,button) > i:first-child { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .58rem; background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-attachment-file > :is(a,button) > i:first-child .messenger-icon { width: .88rem; height: .88rem; }
.messenger-attachment-file > :is(a,button) > span { display: flex; min-width: 0; flex-direction: column; }
.messenger-attachment-file .messenger-library-file-button { width: 100%; }
.messenger-attachment-file .messenger-library-file-button.is-downloaded { color: #22c55e; }
.messenger-attachment-file .messenger-library-file-button.is-downloading { cursor: wait; opacity: .58; }
.messenger-attachment-file .messenger-file-action-icon { display: grid; width: 1rem; height: 1rem; place-items: center; color: var(--msg-accent); }
.messenger-attachment-file .messenger-file-action-icon .messenger-icon { width: .9rem; height: .9rem; }
.messenger-attachment-file strong,.messenger-attachment-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-attachment-file strong { font-size: .62rem; }
.messenger-attachment-file small { color: var(--msg-muted); font-size: .52rem; }
.messenger-shared-media-viewer figure video { display: block; max-width: min(72rem, 88vw); max-height: 82vh; border-radius: 1rem; background: #050505; box-shadow: 0 1.2rem 4rem rgba(0,0,0,.4); }
.messenger-room-panel-manage { width: 2rem; height: 2rem; justify-content: center; padding: 0; }
.messenger-room-panel-members em { padding: .26rem .42rem; border-radius: 999px; background: color-mix(in srgb, var(--msg-muted) 10%, transparent); color: var(--msg-muted); font-size: .48rem; font-style: normal; font-weight: 850; }
.messenger-room-panel-members em.is-owner,.messenger-room-panel-members em.is-admin { background: var(--msg-accent-soft); color: var(--msg-accent); }
.messenger-room-invite-settings { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .35rem; padding: .45rem; border: 1px solid var(--msg-line); border-radius: .75rem; background: color-mix(in srgb, var(--msg-panel, #fff) 88%, transparent); }
.messenger-room-invite-settings > div { display: flex; min-width: 0; flex-direction: column; gap: .1rem; }
.messenger-room-invite-settings span { color: var(--msg-muted); font-size: .53rem; }
.messenger-room-invite-settings strong { overflow: hidden; color: var(--msg-text); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-room-invite-settings button { display: inline-flex; align-items: center; gap: .22rem; padding: .4rem .48rem; border: 1px solid var(--msg-line); border-radius: .6rem; color: var(--msg-accent); font-size: .5rem; font-weight: 850; cursor: pointer; }
.messenger-room-invite-settings button.is-regenerate { color: #ef4444; }
.messenger-room-invite-settings button:disabled { cursor: default; opacity: .45; }
.messenger-room-invite-settings .messenger-icon { width: .68rem; height: .68rem; }
details.messenger-room-policy { overflow: hidden; padding: 0; }
details.messenger-room-policy > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .62rem; color: var(--msg-text); cursor: pointer; list-style: none; }
details.messenger-room-policy > summary::-webkit-details-marker { display: none; }
details.messenger-room-policy > summary > span { display: flex; flex-direction: column; gap: .1rem; }
details.messenger-room-policy > summary b { font-size: .65rem; }
details.messenger-room-policy > summary small { color: var(--msg-muted); font-size: .52rem; }
details.messenger-room-policy > summary .messenger-icon { width: .72rem; height: .72rem; color: var(--msg-muted); transition: transform .2s ease; }
details.messenger-room-policy[open] > summary .messenger-icon { transform: rotate(180deg); }
.messenger-room-policy-content { display: grid; gap: .32rem; padding: 0 .45rem .45rem; }
.messenger-room-policy-content > label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .1rem; cursor: pointer; }
.messenger-room-policy-content > label + label { border-top: 1px solid var(--msg-line); }
@media (max-width: 620px) {
    .messenger-room-invite-settings { grid-template-columns: 1fr 1fr; }
    .messenger-room-invite-settings > div { grid-column: 1 / -1; }
}

/* ------------[Плеер в шапке]------------ // Компактная кнопка занимает место прежней подписи beta, а панель раскрывается поверх страницы. Модуль: «оформление интерфейса». Часть 91/203 */
.global-music-dock { position: relative; align-self: center; margin-left: .35rem; font-family: inherit; }
.global-music-toggle { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 28%, transparent); border-radius: .65rem; background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 9%, white); color: var(--color-dynamic, #d76f2a); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.global-music-toggle:hover,.global-music-dock.is-open .global-music-toggle { background: color-mix(in srgb, var(--color-dynamic, #d76f2a) 18%, white); transform: translateY(-1px); }
.global-music-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.global-music-dock.is-playing .global-music-toggle { box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--color-dynamic, #d76f2a) 12%, transparent); }
.global-music-panel { position: absolute; z-index: 120; top: calc(100% + .65rem); left: 50%; display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto; align-items: center; gap: .55rem; width: min(22rem, calc(100vw - 1rem)); padding: .65rem .72rem; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 28%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--adaptive-surface, #fff) 96%, transparent); box-shadow: 0 .8rem 2.4rem rgba(61,35,19,.16); backdrop-filter: blur(18px); transform: translateX(-50%); }
.global-music-panel.hidden { display: none; }
.global-music-panel > audio { display: none; }
#global-music-play,.global-music-collapse { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-dynamic, #d76f2a) 34%, transparent); border-radius: .72rem; color: var(--color-dynamic, #d76f2a); cursor: pointer; }
#global-music-play { background: var(--color-dynamic, #d76f2a); color: white; }
#global-music-play svg { width: .92rem; height: .92rem; fill: currentColor; stroke: currentColor; }
.global-music-collapse { width: 1.65rem; height: 1.65rem; background: transparent; font-size: 1rem; }
.global-music-copy { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.global-music-copy strong { overflow: hidden; color: var(--color-text, #6f442b); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.global-music-copy small { color: color-mix(in srgb, var(--color-text, #6f442b) 58%, transparent); font-size: .52rem; }
#global-music-progress { grid-column: 2 / 4; width: 100%; height: .18rem; accent-color: var(--color-dynamic, #d76f2a); cursor: pointer; }
.vmesta-track-player.is-header-track { box-shadow: 0 0 0 1px color-mix(in srgb, var(--track-accent) 24%, transparent); }
@media (max-width: 620px) {
    .global-music-panel { left: auto; right: -5.8rem; transform: none; }
    .global-music-copy { max-width: 10rem; }
}

/* ------------[Окончательная компоновка группы и плеера]------------ // Перекрывает старые варианты: обе кнопки группы справа, а раскрытый плеер занимает место иконки прямо в шапке. Модуль: «оформление интерфейса». Часть 92/203 */
.messenger-room-panel-close { top: 0; right: 0; left: auto; }
.messenger-room-panel-manage { top: 0; right: 2.35rem; left: auto; }
.messenger-room-author { align-items: flex-start; margin-left: .08rem; }
.messenger-room-author > span { display: grid; justify-items: start; gap: .02rem; }
.messenger-room-author strong { line-height: 1.1; }
.messenger-room-author small { color: var(--msg-muted); font-size: .48rem; font-weight: 750; line-height: 1.1; }
.messenger-room-settings-form > footer .messenger-room-leave { margin-right: auto; border-color: color-mix(in srgb, #ef4444 38%, var(--msg-line)); color: #ef4444; }
.messenger-room-settings-form > footer .messenger-room-leave:disabled { cursor: not-allowed; opacity: .45; }
.messenger-room-panel-leave { margin-top: .42rem; padding: .34rem .62rem; border: 1px solid color-mix(in srgb, #ef4444 38%, var(--msg-line)); border-radius: .58rem; background: transparent; color: #ef4444; font-size: .52rem; font-weight: 850; cursor: pointer; }
.global-music-dock { position: absolute; top: 50%; left: calc(100% + 1.35rem); display: flex; align-items: center; gap: .42rem; margin-left: 0; transform: translateY(-50%); }
.global-music-dock.is-open { gap: 0; }
.global-music-dock.is-open .global-music-toggle { display: none; }
.global-music-panel { position: static; top: auto; right: auto; left: auto; width: clamp(11.5rem, 20vw, 15.5rem); height: 2.1rem; grid-template-columns: 1.68rem minmax(4.5rem, 1fr) 1.46rem .82rem; gap: .24rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: none; }
#global-music-play { width: 1.68rem; height: 1.68rem; border-radius: .52rem; box-shadow: none; }
.global-music-wave { min-height: .9rem; }
.global-music-footer > small { font-size: .4rem; }
.global-music-switches button { width: .92rem; height: .7rem; }
#global-music-volume { width: 1.46rem; height: 1.46rem; border-radius: .46rem; }
.global-music-inline-close { display: grid; width: .82rem; height: .82rem; place-items: center; align-self: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-text, #6f442b) 8%, transparent); color: color-mix(in srgb, var(--color-text, #6f442b) 58%, transparent); font-size: .68rem; line-height: 1; cursor: pointer; }
.global-music-inline-close:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.global-music-volume-popover { top: calc(100% + .42rem); bottom: auto; }
@media (max-width: 900px) {
    .global-music-dock { left: calc(100% + .7rem); }
    .global-music-panel { width: 10.5rem; grid-template-columns: 1.55rem minmax(3.4rem, 1fr) 1.35rem .78rem; }
    #global-music-play { width: 1.55rem; height: 1.55rem; }
    #global-music-volume { width: 1.35rem; height: 1.35rem; }
}
@media (max-width: 720px) {
    .global-music-panel { position: static; top: auto; right: auto; left: auto; width: 9.7rem; transform: none; }
    .global-music-footer > small { font-size: .37rem; }
    .global-music-switches button { width: .78rem; }
}

/* ------------[Видимые разрешения и верхний выход]------------ // Раздел раскрывается собственной кнопкой, а выход больше не занимает строку под реквизитами группы. Модуль: «оформление интерфейса». Часть 93/203 */
.messenger-room-panel-leave { position: absolute; top: 0; right: 2.35rem; display: inline-flex; align-items: center; gap: .2rem; min-height: 2rem; margin: 0; padding: 0 .55rem; background: transparent; }
.messenger-room-panel-profile.has-manage .messenger-room-panel-leave { right: 4.7rem; }
.messenger-room-panel-leave .messenger-icon { width: .68rem; height: .68rem; }
.messenger-room-settings-header-actions { display: inline-flex; align-items: center; gap: .3rem; }
.messenger-room-settings-header-actions > button { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; gap: .22rem; padding: .42rem .58rem; border: 1px solid var(--msg-line); border-radius: .68rem; color: var(--msg-muted); cursor: pointer; }
.messenger-room-settings-header-actions > .messenger-room-settings-leave { color: #ef4444; }
.messenger-room-settings-header-actions .messenger-icon { width: .72rem; height: .72rem; }
.messenger-room-policy { display: grid !important; gap: 0; padding: 0; }
.messenger-room-policy-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; padding: .58rem .65rem; color: var(--msg-text); text-align: left; cursor: pointer; }
.messenger-room-policy-toggle > span { display: flex; flex-direction: column; gap: .1rem; }
.messenger-room-policy-toggle b { font-size: .68rem; }
.messenger-room-policy-toggle small { color: var(--msg-muted); font-size: .54rem; }
.messenger-room-policy-toggle .messenger-icon { width: .72rem; height: .72rem; color: var(--msg-accent); transition: transform .2s ease; }
.messenger-room-policy.is-open .messenger-room-policy-toggle .messenger-icon { transform: rotate(180deg); }
.messenger-room-policy-content.hidden { display: none !important; }

/* ------------[Синхронный плеер в шапке]------------ // Иконка заменяется узкой панелью с названием, стрелкой сворачивания и тем же таймингом, что у карточки трека. Модуль: «оформление интерфейса». Часть 94/203 */
.global-music-panel { width: clamp(10.5rem, 18vw, 13.8rem); height: 2.35rem; grid-template-columns: 1.58rem .78rem minmax(4rem, 1fr) 1.35rem; align-items: center; gap: .2rem; }
#global-music-play { width: 1.58rem; height: 1.58rem; align-self: center; }
.global-music-inline-close { width: .78rem; height: 1.2rem; align-self: center; border-radius: .34rem; }
.global-music-inline-close svg { width: .62rem; height: .62rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.global-music-timeline { grid-template-rows: auto .78rem auto; align-self: center; gap: 0; }
.global-music-title { display: block; min-width: 0; overflow: hidden; color: var(--color-text, #6f442b); font-size: .43rem; font-weight: 850; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.global-music-wave { min-height: .72rem; }
#global-music-progress { z-index: 2; touch-action: none; }
.vmesta-track-wave input { z-index: 2; touch-action: none; }
.global-music-footer { min-height: .58rem; }
.global-music-footer > small { font-size: .37rem; }
.global-music-switches button { width: .82rem; height: .64rem; }
.global-music-volume-wrap { align-self: start; margin-top: .04rem; }
#global-music-volume { width: 1.35rem; height: 1.35rem; }
@media (max-width: 900px) {
    .global-music-panel { width: 10rem; grid-template-columns: 1.48rem .72rem minmax(3.3rem, 1fr) 1.25rem; }
    #global-music-play { width: 1.48rem; height: 1.48rem; }
    #global-music-volume { width: 1.25rem; height: 1.25rem; }
}

/* ------------[Ровная колонка сообщений группы]------------ // Аватар занимает отдельное фиксированное место, поэтому соседние пузыри больше не образуют лесенку. Модуль: «оформление интерфейса». Часть 95/203 */
.messenger-conversation.is-room-chat .messenger-message.is-incoming { justify-content: flex-start; padding-left: 2.7rem; }
.messenger-conversation.is-room-chat .messenger-room-message-avatar { position: absolute; left: .18rem; bottom: .22rem; margin: 0; }
.messenger-conversation.is-room-chat .messenger-message.is-selected.is-incoming .messenger-room-message-avatar { left: 2.35rem; }
.messenger-conversation.is-room-chat .messenger-room-message-avatar { transition: left 180ms ease; }
.messenger-conversation.is-room-chat .messenger-message.is-incoming .messenger-bubble { margin-left: 0; }

/* ------------[Иконка выхода и удаление группы]------------ // Выход остаётся компактным, а опасное действие владельца отделено от обычного сохранения. Модуль: «оформление интерфейса». Часть 96/203 */
.messenger-room-panel-leave { width: 2rem; min-width: 2rem; padding: 0; justify-content: center; }
.messenger-room-panel-leave .messenger-icon { width: .82rem; height: .82rem; }
.messenger-room-settings-header-actions > .messenger-room-settings-leave { width: 2rem; padding: 0; }
.messenger-room-settings-form > footer .messenger-room-delete { margin-right: auto; border-color: color-mix(in srgb, #ef4444 38%, var(--msg-line)); color: #ef4444; }
.messenger-room-settings-form > footer .messenger-room-delete .messenger-icon { width: .72rem; height: .72rem; }
.messenger-room-description-field { position: relative; display: block; }
.messenger-room-description-field textarea { padding-right: 2.45rem; padding-bottom: 2rem; }
.messenger-room-description-emoji { position: absolute; right: .42rem; bottom: .42rem; display: inline-flex; width: 1.82rem; height: 1.82rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--msg-line); border-radius: .58rem; background: var(--msg-surface,transparent); color: var(--msg-muted); cursor: pointer; }
.messenger-room-description-emoji:hover { border-color: var(--msg-accent); color: var(--msg-accent); background: var(--msg-accent-soft); }
.messenger-room-description-emoji .messenger-icon { width: .72rem; height: .72rem; }

/* Редактор «Данные» и «Конфиденциальность» наследует выбранную палитру, включая ранее белые поля. */
html.adaptive-theme :is(#cover-data-pane,#cover-privacy-pane) .cover-account-card {
  background: color-mix(in srgb, var(--adaptive-surface, #fff) 86%, var(--color-dynamic, #3b82f6) 14%) !important;
  border-color: var(--adaptive-border, rgb(203 213 225)) !important;
}
html.adaptive-theme :is(#cover-data-pane,#cover-privacy-pane) :is(input,select,textarea,.vm-select-trigger,.vm-date-trigger,.privacy-audience-picker,.privacy-group>div,.signal-settings-card) {
  background: color-mix(in srgb, var(--adaptive-surface-2, #f8fafc) 88%, var(--color-dynamic, #3b82f6) 12%) !important;
  border-color: var(--adaptive-border, rgb(203 213 225)) !important;
  color: var(--adaptive-text, rgb(30 41 59)) !important;
}
html.adaptive-theme :is(#cover-data-pane,#cover-privacy-pane) :is(.privacy-audience-option.is-active,.signal-settings-card>header,.signal-package label span) {
  background: color-mix(in srgb, var(--adaptive-surface, #fff) 82%, var(--color-dynamic, #3b82f6) 18%) !important;
}
.login-availability { display: block; min-height: .8rem; margin-top: .22rem; color: var(--msg-muted); font-size: .52rem; font-weight: 750; line-height: 1.25; }
.login-availability.is-available { color: #16a34a; }
.login-availability.is-taken, .login-availability.is-invalid { color: #e05252; }
input.is-login-taken, input.is-login-invalid { border-color: #e05252 !important; }
input.is-login-available { border-color: color-mix(in srgb, #16a34a 58%, var(--msg-line)) !important; }
.cover-account-login-field { width: min(100%, 21rem); justify-self: start; }
.cover-account-login-field > input { width: 100%; }

/* ------------[Ответ над записью]------------ // Цитата и панель записи получают независимые строки даже при старых стилях абсолютного рекордера. Модуль: «оформление интерфейса». Часть 97/203 */
.messenger-composer.is-recording.has-reply { display: grid !important; height: auto !important; min-height: 6.9rem; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(3.15rem, auto) !important; align-items: stretch !important; }
.messenger-composer.is-recording.has-reply > .messenger-composer-reply { position: relative !important; inset: auto !important; z-index: 47; display: grid !important; grid-column: 1 !important; grid-row: 1 !important; width: auto !important; min-width: 0; margin: 0 .08rem .18rem !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }
.messenger-composer.is-recording.has-reply > .messenger-recording-panel.is-active { position: relative !important; inset: auto !important; z-index: 45; display: flex !important; grid-column: 1 !important; grid-row: 2 !important; width: auto !important; max-width: 100%; min-width: 0; min-height: 3.15rem; margin: 0; transform: none !important; }
.messenger-composer.is-recording.has-reply > .messenger-recording-panel.is-video .messenger-recording-video { bottom: calc(100% + .45rem); }

/* ------------[Компактные карточки сообщений]------------ // Уменьшаем пустые поля, а имя автора в группе прижимаем к верхнему краю пузыря. Модуль: «оформление интерфейса». Часть 98/203 */
.messenger-message { margin: .18rem 0; padding: .08rem .14rem; }
.messenger-bubble:not(.has-attachments):not(.is-track-only):not(.is-voice-note-only):not(.is-video-note-only) {
    padding: .46rem .62rem .28rem;
    border-radius: .78rem .78rem .78rem .24rem;
    box-shadow: 0 .22rem .65rem color-mix(in srgb, #020617 5%, transparent);
}
.messenger-message.is-outgoing .messenger-bubble:not(.has-attachments):not(.is-track-only):not(.is-voice-note-only):not(.is-video-note-only) { border-radius: .78rem .78rem .24rem .78rem; }
.messenger-bubble.has-attachments:not(.is-track-only):not(.is-voice-note-only):not(.is-video-note-only) { padding: .22rem .22rem .28rem; border-radius: .82rem; }
.messenger-bubble p { font-size: .82rem; line-height: 1.38; }
.messenger-bubble > span { gap: .22rem; margin-top: .12rem; font-size: .52rem; }
.messenger-room-author { min-height: 0; margin: -.18rem 0 .18rem .02rem; line-height: 1; }
.messenger-room-author > span { gap: 0; line-height: 1; }
.messenger-room-author strong { font-size: .59rem; line-height: 1; }
.messenger-room-author small { margin-top: .03rem; font-size: .44rem; line-height: 1; }

/* ------------[Неподвижная прокрутка участников]------------ // Полоса всегда занимает одну ширину и не моргает при назначении ролей или обновлении списка. Модуль: «оформление интерфейса». Часть 99/203 */
.messenger-room-settings-form,
.messenger-room-member-list {
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--msg-accent) 38%, transparent) transparent;
}
.messenger-room-settings-form::-webkit-scrollbar,
.messenger-room-member-list::-webkit-scrollbar { width: .34rem; }
.messenger-room-settings-form::-webkit-scrollbar-track,
.messenger-room-member-list::-webkit-scrollbar-track { background: transparent; }
.messenger-room-settings-form::-webkit-scrollbar-thumb,
.messenger-room-member-list::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--msg-accent) 38%, transparent); }

/* ------------[Автор у верхней границы сообщения]------------ // Точное правило группового чата переносит подпись выше старых общих стилей пузыря. Модуль: «оформление интерфейса». Часть 100/203 */
.messenger-conversation.is-room-chat .messenger-message.is-incoming.is-group-start .messenger-bubble:not(.has-attachments):not(.is-track-only):not(.is-voice-note-only):not(.is-video-note-only) { padding: .15rem .55rem .2rem; }
.messenger-conversation.is-room-chat .messenger-message.is-incoming.is-group-start .messenger-room-author { display: block; margin: 0 0 .1rem; padding: 0; transform: none; }
.messenger-conversation.is-room-chat .messenger-message.is-incoming.is-group-start .messenger-room-author > span { gap: 0; }

/* ------------[Закреп рядом со временем]------------ // Единый маленький индикатор расположен внутри метаданных личного, группового и музыкального сообщения. Модуль: «оформление интерфейса». Часть 101/203 */
.messenger-bubble > span > .messenger-message-pin-marker,
.vmesta-track-message-meta > .messenger-message-pin-marker {
    display: inline-grid;
    width: .72rem;
    height: .72rem;
    flex: 0 0 .72rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: .22rem;
    background: transparent;
    color: var(--msg-accent, var(--track-accent));
    cursor: pointer;
    transform: none;
}
.messenger-bubble > span > .messenger-message-pin-marker:hover,
.vmesta-track-message-meta > .messenger-message-pin-marker:hover { background: color-mix(in srgb, var(--msg-accent, var(--track-accent)) 14%, transparent); color: var(--msg-accent, var(--track-accent)); transform: none; }
.messenger-bubble > span > .messenger-message-pin-marker .messenger-icon,
.vmesta-track-message-meta > .messenger-message-pin-marker .messenger-icon { width: .58rem; height: .58rem; }
/* ------------[Компактное управление участниками]------------ // Поиск, постоянная прокрутка и меню по троеточию сохраняют список коротким даже в большой группе. Модуль: «оформление интерфейса». Часть 102/203 */
.messenger-room-member-search { display:flex; min-width:0; align-items:center; gap:.36rem; padding:.38rem .52rem; border:1px solid var(--msg-line); border-radius:.62rem; background:color-mix(in srgb,var(--msg-panel,#fff) 72%,transparent); color:var(--msg-muted); }
.messenger-room-member-search.is-inline { width:min(13rem,52%); margin-left:auto; }
.messenger-room-member-search .messenger-icon { width:.7rem; height:.7rem; flex:0 0 auto; }
.messenger-room-member-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--msg-text); font-size:.58rem; }
.messenger-room-member-list { max-height:13rem; overflow-y:scroll; scrollbar-gutter:stable; }
.messenger-room-panel-member-section { display:grid; gap:.45rem; min-height:0; }
.messenger-room-panel-members { max-height:18rem; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; }
[data-room-member][hidden] { display:none !important; }
.messenger-room-member-search-empty { margin:.3rem 0; color:var(--msg-muted); font-size:.58rem; text-align:center; }
.messenger-room-member-list article { grid-template-columns:auto minmax(0,1fr) auto; }
.messenger-room-member-actions { position:relative; display:grid; place-items:center; }
.messenger-room-member-actions-toggle { display:grid; width:1.8rem; height:1.8rem; place-items:center; border:1px solid var(--msg-line); border-radius:.58rem; background:transparent; color:var(--msg-muted); cursor:pointer; }
.messenger-room-member-actions-toggle .messenger-icon { width:.78rem; height:.78rem; }
.messenger-room-member-actions-menu { position:absolute; z-index:35; top:calc(100% + .28rem); right:0; display:grid; width:min(14rem,72vw); padding:.28rem; border:1px solid var(--msg-line); border-radius:.72rem; background:var(--msg-panel,#fff); box-shadow:0 .7rem 1.7rem rgba(32,20,12,.16); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-.2rem); transition:opacity .15s ease,transform .15s ease,visibility .15s; }
.messenger-room-member-actions:focus-within .messenger-room-member-actions-menu { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.messenger-room-member-actions-menu button { display:flex; width:100%; align-items:center; gap:.42rem; padding:.48rem .52rem; border:0; border-radius:.52rem; background:transparent; color:var(--msg-text); font-size:.56rem; font-weight:780; text-align:left; cursor:pointer; }
.messenger-room-member-actions-menu button:hover { background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-room-member-actions-menu button.is-danger { color:#ef4444; }
.messenger-room-member-actions-menu .messenger-icon { width:.72rem; height:.72rem; flex:0 0 auto; }

/* ------------[Прокрутка окна группы и ссылки]------------ // Всё содержимое панели прокручивается целиком, а ссылки отображаются коротким читаемым списком. Модуль: «оформление интерфейса». Часть 103/203 */
.messenger-room-panel { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; }
.messenger-room-panel-content.messenger-room-link-list { display:grid; align-content:start; gap:.35rem; }
.messenger-room-link-list article { display:grid; grid-template-columns:1.5rem minmax(0,1fr) 1.7rem; align-items:center; gap:.42rem; padding:.44rem .5rem; border:1px solid var(--msg-line); border-radius:.68rem; }
.messenger-room-link-list article > i,.messenger-room-link-list article > button { display:grid; width:1.5rem; height:1.5rem; place-items:center; border:0; border-radius:.48rem; background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-room-link-list article > a { display:grid; min-width:0; gap:.08rem; color:var(--msg-text); text-decoration:none; }
.messenger-room-link-list article strong,.messenger-room-link-list article small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messenger-room-link-list article strong { font-size:.61rem; }
.messenger-room-link-list article small { color:var(--msg-muted); font-size:.5rem; }

/* ------------[Индикатор закрепа]------------ // Заполненная булавка стоит перед временем без дополнительной плашки. Модуль: «оформление интерфейса». Часть 104/203 */
.messenger-message-pin-marker,.messenger-message-pin-marker:hover { width:.62rem !important; height:.62rem !important; flex-basis:.62rem !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.messenger-message-pin-marker .messenger-icon { width:.54rem !important; height:.54rem !important; fill:currentColor; stroke:currentColor; }

/* ------------[Финальная компоновка плеера шапки]------------ // Укорачивает волну, даёт логотипу воздух и собирает переходы с громкостью в одном блоке. Модуль: «оформление интерфейса». Часть 105/203 */
.global-music-dock { left:calc(100% + 1.85rem); }
.global-music-panel { width:clamp(9.8rem,16vw,12.2rem); grid-template-columns:1.5rem .7rem minmax(2.7rem,1fr) auto; gap:.16rem; }
.global-music-controls { display:inline-flex; align-items:center; gap:.08rem; }
.global-music-switches { gap:.02rem; }
.global-music-switches button { width:.7rem; height:.72rem; padding:0; background:transparent; }
.global-music-switches svg { width:.46rem; height:.46rem; }
.global-music-wave { min-height:.62rem; }
#global-music-volume { width:1.18rem; height:1.18rem; border-radius:.4rem; }
#global-music-volume svg { width:.65rem; height:.65rem; }
.global-music-volume-wrap { margin:0; align-self:center; }
@media (max-width:900px) { .global-music-dock { left:calc(100% + 1rem); } .global-music-panel { width:9.2rem; grid-template-columns:1.4rem .66rem minmax(2.3rem,1fr) auto; } }

/* ------------[Верхнее управление голосовыми]------------ // Тонкая полоса под шапкой синхронизирована с активным голосовым или видеосообщением. Модуль: «оформление интерфейса». Часть 106/203 */
.messenger-inline-media-bar { position:absolute; z-index:44; top:4.2rem; left:50%; display:grid; width:min(24rem,calc(100% - 2rem)); grid-template-columns:1.7rem minmax(0,1fr) 2rem 1.45rem; align-items:center; gap:.38rem; padding:.3rem .42rem; border:1px solid var(--msg-line); border-radius:999px; background:color-mix(in srgb,var(--msg-panel,#fff) 92%,transparent); box-shadow:0 .45rem 1.2rem rgba(32,20,12,.13); backdrop-filter:blur(14px); transform:translateX(-50%); }
.messenger-conversation.has-chat-search .messenger-inline-media-bar { top:7.4rem; }
.messenger-inline-media-bar > button { display:grid; height:1.45rem; min-width:1.45rem; place-items:center; border:0; border-radius:999px; background:transparent; color:var(--msg-accent); font-size:.55rem; font-weight:850; cursor:pointer; }
.messenger-inline-media-bar > button:first-child { width:1.7rem; height:1.7rem; background:var(--msg-accent); color:#fff; }
.messenger-inline-media-bar .messenger-icon { width:.72rem; height:.72rem; }
.messenger-inline-media-bar > span { display:grid; min-width:0; gap:.02rem; }
.messenger-inline-media-bar strong { overflow:hidden; color:var(--msg-text); font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; }
.messenger-inline-media-bar small { color:var(--msg-muted); font-size:.46rem; font-variant-numeric:tabular-nums; }

/* ------------[Опросы в сообщениях]------------ // Варианты показывают долю голосов внутри кнопки, а публичные имена раскрываются по требованию. Модуль: «оформление интерфейса». Часть 107/203 */
.messenger-poll-card { display:grid; min-width:min(17rem,70vw); gap:.55rem; padding:.42rem; }
.messenger-poll-card > header { display:flex; align-items:flex-start; gap:.42rem; }
.messenger-poll-card > header .messenger-icon { width:1rem; height:1rem; color:var(--msg-accent); }
.messenger-poll-card > header span { display:grid; gap:.08rem; }
.messenger-poll-card > header strong { font-size:.72rem; }
.messenger-poll-card > header small,.messenger-poll-card > footer { color:var(--msg-muted); font-size:.5rem; }
.messenger-poll-card > div { display:grid; gap:.3rem; }
.messenger-poll-option-wrap { display:grid; gap:.16rem; }
.messenger-poll-option { position:relative; isolation:isolate; display:flex; overflow:hidden; width:100%; align-items:center; justify-content:space-between; gap:.6rem; padding:.48rem .58rem; border:1px solid var(--msg-line); border-radius:.62rem; background:transparent; color:var(--msg-text); font-size:.58rem; font-weight:750; cursor:pointer; }
.messenger-poll-option::before { position:absolute; z-index:-1; inset:0 auto 0 0; width:var(--poll-percent); background:color-mix(in srgb,var(--msg-accent) 14%,transparent); content:""; transition:width .25s ease; }
.messenger-poll-option.is-selected { border-color:var(--msg-accent); color:var(--msg-accent); }
.messenger-poll-option-wrap details { padding-left:.5rem; color:var(--msg-muted); font-size:.48rem; }
.messenger-poll-option-wrap details div { display:flex; flex-wrap:wrap; gap:.24rem; padding:.2rem 0; }
.messenger-poll-option-wrap details span { padding:.14rem .28rem; border-radius:999px; background:var(--msg-accent-soft); }
.messenger-poll-modal > section { width:min(31rem,calc(100vw - 1rem)); }
.messenger-poll-modal form { display:grid; gap:.65rem; padding:.8rem; }
.messenger-poll-modal form > label:not(.messenger-poll-anonymous),.messenger-poll-modal fieldset { display:grid; gap:.32rem; border:0; }
.messenger-poll-modal textarea,.messenger-poll-modal input[name="option"] { width:100%; border:1px solid var(--msg-line); border-radius:.62rem; outline:0; background:transparent; color:var(--msg-text); font:inherit; font-size:.63rem; }
.messenger-poll-modal textarea { min-height:5rem; padding:.58rem; resize:vertical; }
.messenger-poll-modal fieldset > div { display:grid; gap:.32rem; }
.messenger-poll-modal fieldset > div label { display:grid; grid-template-columns:minmax(0,1fr) 1.7rem; gap:.28rem; }
.messenger-poll-modal input[name="option"] { padding:.5rem .58rem; }
.messenger-poll-modal fieldset button { border:1px solid var(--msg-line); border-radius:.54rem; color:var(--msg-accent); cursor:pointer; }
.messenger-poll-add-option { justify-self:start; padding:.4rem .55rem; }
.messenger-poll-anonymous { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem; border:1px solid var(--msg-line); border-radius:.68rem; }
.messenger-poll-anonymous > span { display:grid; gap:.08rem; }
.messenger-poll-anonymous small { color:var(--msg-muted); font-size:.5rem; }
.messenger-poll-modal footer { display:flex; justify-content:flex-end; gap:.38rem; }
.messenger-poll-modal footer button { padding:.52rem .72rem; border:1px solid var(--msg-line); border-radius:.62rem; color:var(--msg-text); cursor:pointer; }
.messenger-poll-modal footer .is-primary { border-color:var(--msg-accent); background:var(--msg-accent); color:#fff; }
.messenger-room-member-list article:nth-last-child(-n+2) .messenger-room-member-actions-menu { top:auto; bottom:calc(100% + .28rem); }
.messenger-message-pin-marker .messenger-pin-solid { display:block; width:.54rem; height:.54rem; fill:currentColor; stroke:none; }
/* ------------[Скрытие голосового контроллера]------------ // Панель располагается поверх ленты и никогда не меняет её геометрию. Модуль: «оформление интерфейса». Часть 108/203 */
.messenger-inline-media-bar.hidden { display:none !important; }
.messenger-inline-media-bar { top:4.72rem; }
.messenger-conversation.has-chat-search .messenger-inline-media-bar { top:7.72rem; }

/* ------------[Единая кнопка закреплений]------------ // Личные диалоги, группы и каналы используют одну тонкую закладку с тематическим счётчиком. Модуль: «оформление интерфейса». Часть 109/203 */
.messenger-conversation-actions > .messenger-pinned-toggle { border:0; background:transparent; color:var(--msg-muted); }
.messenger-conversation-actions > .messenger-pinned-toggle:hover,
.messenger-conversation-actions > .messenger-pinned-toggle.is-active,
.messenger-conversation-actions > .messenger-pinned-toggle.has-pins { border:0; background:transparent; color:var(--msg-accent) !important; }
.messenger-pinned-toggle .messenger-icon { width:1.08rem; height:1.08rem; }
.messenger-pinned-toggle > b { top:-.14rem; right:-.16rem; border-color:var(--msg-panel); background:var(--msg-accent); color:#fff; }

/* ------------[Тематическая прокрутка окна группы]------------ // Ползунки панели, разделов и участников окрашиваются текущим акцентом сайта. Модуль: «оформление интерфейса». Часть 110/203 */
.messenger-room-panel,
.messenger-room-panel > section,
.messenger-room-panel > nav,
.messenger-room-panel-members {
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--msg-accent) 62%,transparent) color-mix(in srgb,var(--msg-accent) 8%,transparent);
}
.messenger-room-panel::-webkit-scrollbar,
.messenger-room-panel > section::-webkit-scrollbar,
.messenger-room-panel > nav::-webkit-scrollbar,
.messenger-room-panel-members::-webkit-scrollbar { width:.36rem; height:.36rem; }
.messenger-room-panel::-webkit-scrollbar-track,
.messenger-room-panel > section::-webkit-scrollbar-track,
.messenger-room-panel > nav::-webkit-scrollbar-track,
.messenger-room-panel-members::-webkit-scrollbar-track { border-radius:999px; background:color-mix(in srgb,var(--msg-accent) 8%,transparent); }
.messenger-room-panel::-webkit-scrollbar-thumb,
.messenger-room-panel > section::-webkit-scrollbar-thumb,
.messenger-room-panel > nav::-webkit-scrollbar-thumb,
.messenger-room-panel-members::-webkit-scrollbar-thumb { border-radius:999px; background:color-mix(in srgb,var(--msg-accent) 62%,transparent); }

/* ------------[Крупные кнопки очереди в шапке]------------ // Назад, вперёд и громкость получают одинаковую удобную область нажатия. Модуль: «оформление интерфейса». Часть 111/203 */
.global-music-panel { width:clamp(10.8rem,17vw,13.4rem); }
.global-music-switches { gap:.08rem; }
.global-music-switches button {
    width:1.18rem;
    height:1.18rem;
    border:1px solid color-mix(in srgb,var(--color-dynamic,#d76f2a) 24%,transparent);
    border-radius:.4rem;
    background:color-mix(in srgb,var(--adaptive-surface,#fff) 80%,transparent);
}
.global-music-switches svg { width:.65rem; height:.65rem; }
/* ------------[Новый дизайн создания опроса]------------ // Компактная форма повторяет карточки, радиусы, акцент и переключатели остальных окон VMESTA. Модуль: «оформление интерфейса». Часть 112/203 */
.messenger-poll-modal > section {
    width:min(29rem,calc(100vw - 1rem));
    max-height:min(38rem,calc(100vh - 1.5rem));
    overflow:hidden auto;
    border:1px solid var(--msg-line);
    border-radius:1.15rem;
    background:var(--msg-bg);
    box-shadow:0 1.4rem 4rem color-mix(in srgb,#020617 34%,transparent);
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--msg-accent) 52%,transparent) transparent;
}
.messenger-poll-modal > section::-webkit-scrollbar { width:.34rem; }
.messenger-poll-modal > section::-webkit-scrollbar-thumb { border-radius:999px; background:color-mix(in srgb,var(--msg-accent) 52%,transparent); }
.messenger-poll-modal .messenger-poll-modal-head {
    display:grid;
    grid-template-columns:2.35rem minmax(0,1fr) 2rem;
    align-items:center;
    gap:.62rem;
    min-height:0;
    padding:.72rem .78rem;
    border-bottom:1px solid var(--msg-line);
    background:linear-gradient(135deg,color-mix(in srgb,var(--msg-accent) 8%,var(--msg-bg)),var(--msg-bg) 72%);
}
.messenger-poll-modal-head > i {
    display:grid;
    width:2.35rem;
    height:2.35rem;
    place-items:center;
    border-radius:.72rem;
    background:var(--msg-accent-soft);
    color:var(--msg-accent);
}
.messenger-poll-modal-head > i .messenger-icon { width:1.08rem; height:1.08rem; }
.messenger-poll-modal-head > div { display:grid; min-width:0; gap:.06rem; }
.messenger-poll-modal-head > div > span { color:var(--msg-accent); font-size:.47rem; font-weight:900; letter-spacing:.14em; }
.messenger-poll-modal-head h2 { margin:0; color:var(--msg-text); font-size:.92rem; font-weight:900; line-height:1.12; }
.messenger-poll-modal-head p { margin:0; color:var(--msg-muted); font-size:.51rem; line-height:1.25; }
.messenger-poll-modal-head > button {
    display:grid;
    width:2rem;
    height:2rem;
    place-items:center;
    border:1px solid transparent;
    border-radius:.62rem;
    background:transparent;
    color:var(--msg-muted);
    cursor:pointer;
}
.messenger-poll-modal-head > button:hover { border-color:var(--msg-line); background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-poll-modal-head > button .messenger-icon { width:.78rem; height:.78rem; }
.messenger-poll-modal form { display:grid; gap:.62rem; padding:.72rem .78rem .78rem; }
.messenger-poll-modal .messenger-poll-question { display:grid; gap:.3rem; }
.messenger-poll-question > span,
.messenger-poll-modal fieldset > legend > span { display:grid; gap:.03rem; }
.messenger-poll-question b,
.messenger-poll-modal fieldset legend b { color:var(--msg-text); font-size:.61rem; font-weight:850; }
.messenger-poll-question small,
.messenger-poll-modal fieldset legend small { color:var(--msg-muted); font-size:.48rem; }
.messenger-poll-modal textarea {
    width:100%;
    min-height:4.15rem;
    padding:.58rem .62rem;
    border:1px solid var(--msg-line);
    border-radius:.72rem;
    outline:0;
    background:var(--msg-panel);
    color:var(--msg-text);
    font:inherit;
    font-size:.66rem;
    line-height:1.4;
    resize:vertical;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.messenger-poll-modal textarea:focus,
.messenger-poll-option-input:focus-within { border-color:color-mix(in srgb,var(--msg-accent) 62%,var(--msg-line)); box-shadow:0 0 0 .18rem color-mix(in srgb,var(--msg-accent) 8%,transparent); }
.messenger-poll-modal fieldset { display:grid; gap:.36rem; min-width:0; margin:0; padding:0; border:0; }
.messenger-poll-modal fieldset > legend {
    display:flex;
    width:100%;
    align-items:end;
    justify-content:space-between;
    gap:.6rem;
    margin-bottom:.34rem;
    padding:0;
}
.messenger-poll-modal fieldset > legend > em { color:var(--msg-muted); font-size:.48rem; font-style:normal; font-weight:800; }
.messenger-poll-modal fieldset > div { display:grid; gap:.28rem; }
.messenger-poll-modal fieldset > div label.messenger-poll-option-input {
    display:grid;
    grid-template-columns:1.45rem minmax(0,1fr) 1.65rem;
    align-items:center;
    gap:.34rem;
    min-height:2.55rem;
    padding:.24rem .3rem;
    border:1px solid var(--msg-line);
    border-radius:.7rem;
    background:var(--msg-panel);
    transition:border-color .16s ease,box-shadow .16s ease;
}
.messenger-poll-option-input > i {
    display:grid;
    width:1.45rem;
    height:1.45rem;
    place-items:center;
    border-radius:.45rem;
    background:var(--msg-accent-soft);
    color:var(--msg-accent);
    font-size:.52rem;
    font-style:normal;
    font-weight:900;
}
.messenger-poll-modal input[name="option"] {
    width:100%;
    min-width:0;
    padding:.3rem 0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--msg-text);
    font:inherit;
    font-size:.61rem;
}
.messenger-poll-option-input > button {
    display:grid;
    width:1.65rem;
    height:1.65rem;
    place-items:center;
    border:0;
    border-radius:.5rem;
    background:transparent;
    color:var(--msg-muted);
    cursor:pointer;
}
.messenger-poll-option-input > button:hover { background:color-mix(in srgb,#ef4444 9%,transparent); color:#ef4444; }
.messenger-poll-option-input > button .messenger-icon { width:.68rem; height:.68rem; }
.messenger-poll-modal .messenger-poll-add-option {
    display:flex;
    width:100%;
    align-items:center;
    gap:.48rem;
    justify-content:flex-start;
    padding:.4rem;
    border:1px dashed color-mix(in srgb,var(--msg-accent) 38%,var(--msg-line));
    border-radius:.7rem;
    background:color-mix(in srgb,var(--msg-accent) 3%,transparent);
    color:var(--msg-text);
    text-align:left;
    cursor:pointer;
}
.messenger-poll-add-option > i {
    display:grid;
    width:1.65rem;
    height:1.65rem;
    flex:0 0 auto;
    place-items:center;
    border-radius:.5rem;
    background:var(--msg-accent-soft);
    color:var(--msg-accent);
}
.messenger-poll-add-option > i .messenger-icon { width:.72rem; height:.72rem; }
.messenger-poll-add-option > span { display:grid; gap:.02rem; }
.messenger-poll-add-option b { font-size:.57rem; font-weight:850; }
.messenger-poll-add-option small { color:var(--msg-muted); font-size:.46rem; }
.messenger-poll-add-option:hover { border-style:solid; background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-poll-add-option:disabled { cursor:default; opacity:.48; }
.messenger-poll-settings { display:grid; gap:.36rem; }
.messenger-poll-modal .messenger-poll-anonymous {
    position:relative;
    display:grid;
    grid-template-columns:1.85rem minmax(0,1fr) 2.25rem;
    align-items:center;
    gap:.48rem;
    padding:.48rem .54rem;
    border:1px solid var(--msg-line);
    border-radius:.72rem;
    background:var(--msg-panel);
    cursor:pointer;
}
.messenger-poll-privacy-icon { display:grid; width:1.85rem; height:1.85rem; place-items:center; border-radius:.56rem; background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-poll-privacy-icon .messenger-icon { width:.78rem; height:.78rem; }
.messenger-poll-anonymous > span { display:grid; gap:.04rem; }
.messenger-poll-anonymous > span b { color:var(--msg-text); font-size:.59rem; font-weight:850; }
.messenger-poll-anonymous > span small { color:var(--msg-muted); font-size:.47rem; }
.messenger-poll-anonymous > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.messenger-poll-switch {
    position:relative;
    display:block;
    width:2.1rem;
    height:1.18rem;
    border:1px solid var(--msg-line);
    border-radius:999px;
    background:color-mix(in srgb,var(--msg-muted) 12%,transparent);
    transition:.18s ease;
}
.messenger-poll-switch > span { position:absolute; top:.14rem; left:.14rem; width:.78rem; height:.78rem; border-radius:50%; background:var(--msg-muted); box-shadow:0 .1rem .25rem rgba(0,0,0,.15); transition:.18s ease; }
.messenger-poll-anonymous > input:checked + .messenger-poll-switch { border-color:var(--msg-accent); background:var(--msg-accent); }
.messenger-poll-anonymous > input:checked + .messenger-poll-switch > span { left:1.03rem; background:#fff; }
.messenger-poll-modal form > footer { display:flex; justify-content:flex-end; gap:.36rem; padding-top:.08rem; }
.messenger-poll-modal form > footer button {
    display:inline-flex;
    min-height:2.2rem;
    align-items:center;
    justify-content:center;
    gap:.32rem;
    padding:.45rem .72rem;
    border:1px solid var(--msg-line);
    border-radius:.66rem;
    background:transparent;
    color:var(--msg-muted);
    font-size:.58rem;
    font-weight:850;
    cursor:pointer;
}
.messenger-poll-modal form > footer button.is-primary { border-color:var(--msg-accent); background:var(--msg-accent); color:#fff; box-shadow:0 .42rem .9rem color-mix(in srgb,var(--msg-accent) 20%,transparent); }
.messenger-poll-modal form > footer .messenger-icon { width:.7rem; height:.7rem; }

/* ------------[Новая карточка опроса]------------ // Результаты выглядят как спокойная часть сообщения, а не отдельная чужая форма. Модуль: «оформление интерфейса». Часть 113/203 */
.messenger-poll-card {
    display:grid;
    width:min(18.5rem,72vw);
    min-width:0;
    gap:.58rem;
    padding:.36rem .32rem .22rem;
}
.messenger-poll-card > header { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:start; gap:.48rem; }
.messenger-poll-card > header > i { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.62rem; background:var(--msg-accent-soft); color:var(--msg-accent); }
.messenger-poll-card > header > i .messenger-icon { width:.88rem; height:.88rem; }
.messenger-poll-card > header > span { display:grid; min-width:0; gap:.1rem; padding-top:.04rem; }
.messenger-poll-card > header small { color:var(--msg-accent); font-size:.43rem; font-weight:900; letter-spacing:.12em; }
.messenger-poll-card > header strong { color:var(--msg-text); font-size:.7rem; font-weight:900; line-height:1.32; }
.messenger-poll-card > .messenger-poll-options { display:grid; gap:.3rem; }
.messenger-poll-option-wrap { display:grid; gap:.14rem; }
.messenger-poll-option {
    position:relative;
    isolation:isolate;
    display:grid;
    overflow:hidden;
    width:100%;
    min-height:2.25rem;
    grid-template-columns:1rem minmax(0,1fr) auto;
    align-items:center;
    gap:.4rem;
    padding:.4rem .48rem;
    border:1px solid var(--msg-line);
    border-radius:.66rem;
    background:color-mix(in srgb,var(--msg-panel) 72%,transparent);
    color:var(--msg-text);
    text-align:left;
    cursor:pointer;
}
.messenger-poll-option::before { position:absolute; z-index:-1; inset:0 auto 0 0; width:var(--poll-percent); background:color-mix(in srgb,var(--msg-accent) 11%,transparent); content:""; transition:width .25s ease; }
.messenger-poll-option > i { display:grid; width:.9rem; height:.9rem; place-items:center; border:1px solid color-mix(in srgb,var(--msg-muted) 52%,transparent); border-radius:50%; }
.messenger-poll-option > i > span { width:.45rem; height:.45rem; border-radius:50%; background:transparent; transform:scale(.5); transition:.16s ease; }
.messenger-poll-option.is-selected { border-color:color-mix(in srgb,var(--msg-accent) 65%,var(--msg-line)); color:var(--msg-accent); }
.messenger-poll-option.is-selected > i { border-color:var(--msg-accent); }
.messenger-poll-option.is-selected > i > span { background:var(--msg-accent); transform:scale(1); }
.messenger-poll-option-copy { overflow:hidden; font-size:.58rem; font-weight:760; line-height:1.25; text-overflow:ellipsis; }
.messenger-poll-option > em { color:var(--msg-muted); font-size:.5rem; font-style:normal; font-weight:900; font-variant-numeric:tabular-nums; }
.messenger-poll-option:hover { border-color:color-mix(in srgb,var(--msg-accent) 50%,var(--msg-line)); }
.messenger-poll-option:disabled { cursor:default; opacity:.82; }
.messenger-poll-option.is-locked:hover { border-color:var(--msg-line); }
.messenger-poll-voters { padding:0 .42rem; color:var(--msg-muted); font-size:.46rem; }
.messenger-poll-voters summary { cursor:pointer; }
.messenger-poll-voters > div { display:flex; flex-wrap:wrap; gap:.2rem; padding:.2rem 0; }
.messenger-poll-voters span { padding:.12rem .26rem; border-radius:999px; background:var(--msg-accent-soft); }
.messenger-poll-card > footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.08rem .08rem 0; color:var(--msg-muted); font-size:.46rem; }
.messenger-poll-card > footer > span { display:inline-flex; align-items:center; gap:.22rem; }
.messenger-poll-card > footer .messenger-icon { width:.58rem; height:.58rem; }
.messenger-poll-card > footer b { font-weight:800; }
.messenger-poll-card > footer small { padding-left:.18rem; color:var(--msg-accent); font-size:.43rem; font-weight:800; }
.messenger-poll-card > footer em { font-style:normal; font-weight:750; }
.messenger-poll-public-voters { overflow:hidden; border:1px solid var(--msg-line); border-radius:.66rem; background:color-mix(in srgb,var(--msg-panel) 76%,transparent); }
.messenger-poll-public-voters > summary { display:grid; min-height:2rem; grid-template-columns:minmax(0,1fr) auto .8rem; align-items:center; gap:.35rem; padding:.38rem .48rem; color:var(--msg-muted); font-size:.5rem; font-weight:850; cursor:pointer; list-style:none; }
.messenger-poll-public-voters > summary::-webkit-details-marker { display:none; }
.messenger-poll-public-voters > summary > span { display:flex; align-items:center; gap:.28rem; color:var(--msg-text); }
.messenger-poll-public-voters > summary .messenger-icon { width:.7rem; height:.7rem; color:var(--msg-accent); }
.messenger-poll-public-voters > summary > .messenger-icon { transition:transform .18s ease; }
.messenger-poll-public-voters[open] > summary > .messenger-icon { transform:rotate(180deg); }
.messenger-poll-public-voters > div { display:grid; max-height:10rem; gap:.35rem; padding:0 .42rem .42rem; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--msg-accent) transparent; }
.messenger-poll-public-voters section { display:grid; gap:.24rem; padding-top:.34rem; border-top:1px solid var(--msg-line); }
.messenger-poll-public-voters section > header { display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:0 .12rem; }
.messenger-poll-public-voters section > header b { overflow:hidden; color:var(--msg-text); font-size:.48rem; text-overflow:ellipsis; white-space:nowrap; }
.messenger-poll-public-voters section > header small { color:var(--msg-muted); font-size:.44rem; }
.messenger-poll-public-voters section > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.22rem; }
.messenger-poll-public-voters section button { display:grid; min-width:0; grid-template-columns:1.42rem minmax(0,1fr); align-items:center; gap:.28rem; padding:.22rem; border:0; border-radius:.48rem; background:transparent; color:var(--msg-text); text-align:left; cursor:pointer; }
.messenger-poll-public-voters section button:hover { background:var(--msg-accent-soft); }
.messenger-poll-public-voters section button .messenger-avatar { width:1.42rem; height:1.42rem; }
.messenger-poll-public-voters section button .online-dot { display:none; }
.messenger-poll-public-voters section button > span { display:grid; min-width:0; gap:.02rem; }
.messenger-poll-public-voters section button b,.messenger-poll-public-voters section button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messenger-poll-public-voters section button b { font-size:.46rem; }
.messenger-poll-public-voters section button small { color:var(--msg-muted); font-size:.4rem; }
.messenger-poll-card.is-loading { opacity:.75; }
.messenger-poll-skeleton { display:grid; gap:.32rem; }
.messenger-poll-skeleton i { height:2.15rem; border-radius:.66rem; background:linear-gradient(90deg,var(--msg-accent-soft),color-mix(in srgb,var(--msg-panel) 78%,transparent),var(--msg-accent-soft)); background-size:220% 100%; animation:messenger-poll-loading 1.1s linear infinite; }
@keyframes messenger-poll-loading { to { background-position:-220% 0; } }
@media (max-width:520px) {
    .messenger-poll-modal > section { border-radius:.95rem; }
    .messenger-poll-modal form { padding:.62rem; }
    .messenger-poll-card { width:min(17rem,76vw); }
    .messenger-poll-public-voters section > div { grid-template-columns:1fr; }
}

/* Сообщения: оранжевый — главный текст, мягкий персиковый — вторичный. */
html.adaptive-theme :is(#messages-root, #messages-side-root) {
    --msg-text: var(--adaptive-text-strong);
    --msg-muted: color-mix(in srgb, var(--color-dynamic, #df8d5b) 48%, var(--adaptive-border, #e6c9b7) 52%);
}

/* Общая тема задаёт кнопкам пассивный цвет с !important; для мессенджера
   возвращаем его собственную цветовую иерархию. */
html.adaptive-theme :is(#messages-root, #messages-side-root) :is(
    .messenger-chat-open,
    .messenger-side-nav button,
    .messenger-recent > button:first-child
) {
    color: var(--msg-text) !important;
}

html.adaptive-theme :is(#messages-root, #messages-side-root) :is(
    .messenger-chat-name time,
    .messenger-chat-preview,
    .messenger-side-nav button:not(.is-active),
    .messenger-recent small,
    .messenger-empty,
    .messenger-loading
) {
    color: var(--msg-muted) !important;
}

html.adaptive-theme :is(#messages-root, #messages-side-root) :is(
    .messenger-chat-row:hover .messenger-chat-open,
    .messenger-chat-row.is-active .messenger-chat-open,
    .messenger-side-nav button:hover,
    .messenger-recent:hover > button:first-child,
    .messenger-recent.is-active > button:first-child
) {
    color: var(--msg-accent) !important;
}

html.adaptive-theme :is(#messages-root, #messages-side-root) .messenger-side-nav button.is-active {
    color: var(--msg-text) !important;
}

/* Та же тёплая иерархия в навигации и каталоге пространств. */
html.adaptive-theme .space-intro-main h2,
html.adaptive-theme .spaces-index-scope button.is-active,
html.adaptive-theme #profile-tabs-container .tab-btn:is(.active-tab, .text-blue-500, .text-blue-600),
html.adaptive-theme .nav-item:is(.bg-blue-50, [aria-current="page"]) {
    color: var(--adaptive-text-strong) !important;
}

html.adaptive-theme :is(
    .space-kicker,
    .space-intro-main p,
    .spaces-index-scope button:not(.is-active),
    #profile-tabs-container .tab-btn:not(.active-tab):not(.text-blue-500):not(.text-blue-600),
    .nav-item:not(.bg-blue-50):not([aria-current="page"])
) {
    color: var(--adaptive-text-secondary) !important;
}

html.adaptive-theme :is(
    #profile-tabs-container .tab-btn,
    .nav-item,
    .spaces-index-scope button
) :is(svg, span) {
    color: currentColor !important;
}

/* Остальные навигационные зоны: не дают старому яркому акценту перебивать
   основную текстовую иерархию. */
html.adaptive-theme :is(
    .nav-item,
    #profile-tabs-container .tab-btn,
    .space-tabs button
) {
    color: var(--adaptive-text-strong) !important;
}

html.adaptive-theme .space-tabs button :is(.space-tab-label b, .space-tab-icon) {
    color: currentColor !important;
}

html.adaptive-theme .spaces-index-body small,
html.adaptive-theme .space-menu-item > span > span:last-child,
html.adaptive-theme .space-intro-main p {
    color: var(--adaptive-text-secondary) !important;
}

html.adaptive-theme .space-menu-item > span > span:first-child,
html.adaptive-theme .spaces-index-body strong {
    color: var(--adaptive-text-strong) !important;
}

/* Друзья: спокойные поверхности и тёплая иерархия вместо жёлтого акцента. */
html.adaptive-theme #friends-viewport:has(#friends-list-full),
html.adaptive-theme #recommended-friends-container {
    background: var(--adaptive-ui-panel) !important;
    color: var(--adaptive-text-active) !important;
}

html.adaptive-theme :is(.friends-list-row, .friend-search-card, .friends-search-filters) {
    border-color: var(--adaptive-ui-line) !important;
    background: color-mix(in srgb, var(--adaptive-ui-panel) 91%, var(--color-dynamic) 9%) !important;
    color: var(--adaptive-text-active) !important;
    box-shadow: none !important;
}

html.adaptive-theme :is(.friends-list-row, .friend-search-card):hover {
    background: color-mix(in srgb, var(--adaptive-ui-panel) 85%, var(--color-dynamic) 15%) !important;
    border-color: var(--adaptive-ui-line-strong) !important;
}

html.adaptive-theme :is(
    .friend-row-identity h4,
    .friend-search-copy strong,
    .friends-filter-heading span,
    .friends-search-head strong
) {
    color: var(--adaptive-text-active) !important;
}

html.adaptive-theme :is(
    .friend-row-identity p,
    .friend-search-copy small,
    .friend-search-card > p,
    .friends-filter-heading small,
    .friends-filter-grid > label > span:first-child,
    .friends-filter-reset
) {
    color: var(--adaptive-text-secondary) !important;
}

html.adaptive-theme :is(.friend-row-action, .friend-row-menu-button, .friends-filter-button) {
    color: var(--adaptive-text-active) !important;
    background: var(--adaptive-ui-panel) !important;
    border-color: var(--adaptive-ui-line) !important;
}

html.adaptive-theme :is(.friends-search-field, .friends-filter-grid input, .friends-filter-grid select) {
    background: var(--adaptive-ui-panel) !important;
    border-color: var(--adaptive-ui-line) !important;
    color: var(--adaptive-text-active) !important;
}

html.adaptive-theme :is(#tab-all-friends, #tab-friend-requests, #tab-friend-search, #friends-sub-tabs .sub-tab-btn) {
    color: var(--adaptive-text-secondary) !important;
}

html.adaptive-theme :is(#tab-all-friends, #tab-friend-requests, #tab-friend-search).bg-blue-50,
html.adaptive-theme #friends-sub-tabs .sub-tab-btn.active {
    color: var(--adaptive-text-active) !important;
    background: var(--adaptive-ui-panel) !important;
    border-color: var(--adaptive-ui-line-strong) !important;
}

/* Центр уведомлений повторяет мягкую поверхность карточек друзей, без белого слоя. */
html.adaptive-theme #notifications-dropdown.notifications-dropdown-v2 {
    --notice-bg: var(--adaptive-ui-panel);
    --notice-soft: color-mix(in srgb, var(--adaptive-ui-panel) 89%, var(--color-dynamic) 11%);
    --notice-text: var(--adaptive-text-active);
    --notice-muted: var(--adaptive-text-secondary);
    --notice-border: var(--adaptive-ui-line);
    background: var(--notice-bg) !important;
    color: var(--notice-text) !important;
}

html.adaptive-theme #notifications-dropdown :is(
    .notifications-dropdown-head strong,
    .notification-empty-state strong,
    .notifications-dropdown-tabs button.is-active,
    .notification-history-open
) {
    color: var(--adaptive-text-active) !important;
}

html.adaptive-theme #notifications-dropdown :is(
    .notifications-dropdown-head span,
    .notifications-dropdown-tabs button:not(.is-active),
    .notification-empty-state,
    .notification-broom-button
) {
    color: var(--adaptive-text-secondary) !important;
}

html.adaptive-theme #notifications-dropdown :is(
    .notifications-dropdown-tabs,
    .notifications-dropdown-head > button,
    .notification-broom-button,
    .notification-history-open
) {
    background: var(--notice-soft) !important;
    border-color: var(--notice-border) !important;
}

html.adaptive-theme .notification-history-dialog {
    --history-bg: var(--adaptive-ui-panel);
    --history-soft: color-mix(in srgb, var(--adaptive-ui-panel) 89%, var(--color-dynamic) 11%);
    --history-text: var(--adaptive-text-active);
    --history-muted: var(--adaptive-text-secondary);
    --history-border: var(--adaptive-ui-line);
}

/* Старые утилитарные классы задавали цвет и заливку после темы — перекрываем их адресно. */
html.adaptive-theme #profile-left-rail .nav-item,
html.adaptive-theme #profile-left-rail .nav-item :is(svg, svg *),
html.adaptive-theme #profile-tabs-container .tab-btn,
html.adaptive-theme #profile-tabs-container .tab-btn .profile-tab-icon,
html.adaptive-theme #profile-tabs-container .tab-btn .profile-tab-icon svg {
    color: var(--adaptive-text-active) !important;
}

html.adaptive-theme #profile-left-rail .nav-item svg.fill-blue-600 {
    fill: currentColor !important;
}

html.adaptive-theme #profile-left-rail .nav-item svg.fill-none {
    fill: none !important;
    stroke: currentColor !important;
}

/* Общая палитра интерфейса. Она не привязана к adaptive-theme, поэтому
   одинаково работает в обычной, синей и тёмной темах. */
:root {
    --vmesta-ui-primary: var(--color-dynamic, #d76f2a);
    --vmesta-ui-ink: var(--adaptive-text-active, var(--standard-text-active, #824c2c));
    --vmesta-ui-muted: var(--adaptive-text-secondary, var(--standard-text-secondary, #ad795b));
    --vmesta-ui-panel: var(--adaptive-ui-panel, var(--standard-panel, var(--adaptive-surface, #f4e5dc)));
    --vmesta-ui-soft: var(--adaptive-ui-active, var(--standard-panel-soft, color-mix(in srgb, var(--vmesta-ui-panel) 90%, var(--vmesta-ui-primary) 10%)));
    --vmesta-ui-line: var(--adaptive-ui-line, var(--standard-line, color-mix(in srgb, var(--vmesta-ui-primary) 24%, transparent)));
}

/* Левая навигация и вкладки профиля наследуют один цвет с контактными ссылками. */
#profile-left-rail .nav-item,
#profile-tabs-container .tab-btn,
.space-tabs button {
    color: var(--vmesta-ui-ink) !important;
}

#profile-left-rail .nav-item:is(:hover, .bg-blue-50, [aria-current="page"]),
#profile-tabs-container .tab-btn:is(:hover, .active-tab, .text-blue-500, .text-blue-600),
.space-tabs button:is(:hover, .is-active) {
    color: var(--vmesta-ui-primary) !important;
}

#profile-left-rail .nav-item :is(svg, svg *),
#profile-tabs-container .tab-btn :is(.profile-tab-icon, .profile-tab-icon svg, .profile-tab-label),
.space-tabs button :is(.space-tab-icon, .space-tab-label, .space-tab-label b) {
    color: currentColor !important;
}

#profile-left-rail .nav-item svg.fill-blue-600 { fill: currentColor !important; }
#profile-left-rail .nav-item svg.fill-none { fill: none !important; stroke: currentColor !important; }

/* Друзья и поиск: акцент — только у активных действий; имена и вторичный текст читаемы. */
#friends-viewport:has(#friends-list-full),
#recommended-friends-container {
    background: var(--vmesta-ui-panel) !important;
}

:is(.friends-list-row, .friend-search-card, .friends-search-filters) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 91%, var(--vmesta-ui-primary) 9%) !important;
    border-color: var(--vmesta-ui-line) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.friend-row-identity h4, .friend-search-copy strong, .friends-filter-heading span, .friends-search-head strong) {
    color: var(--vmesta-ui-ink) !important;
}

:is(.friend-row-identity p, .friend-search-copy small, .friend-search-card > p, .friends-filter-heading small, .friends-filter-grid > label > span:first-child, .friends-filter-reset) {
    color: var(--vmesta-ui-muted) !important;
}

:is(.friend-row-action, .friend-row-menu-button, .friends-filter-button, .friends-search-field, .friends-filter-grid input, .friends-filter-grid select) {
    border-color: var(--vmesta-ui-line) !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(#tab-all-friends, #tab-friend-requests, #tab-friend-search, #friends-sub-tabs .sub-tab-btn) {
    color: var(--vmesta-ui-muted) !important;
}

:is(#tab-all-friends, #tab-friend-requests, #tab-friend-search).bg-blue-50,
#friends-sub-tabs .sub-tab-btn.active,
.friends-filter-button:is(:hover, .is-active, .has-filters),
.friend-row-action:hover,
.friend-row-menu-button:hover {
    color: var(--vmesta-ui-primary) !important;
    border-color: color-mix(in srgb, var(--vmesta-ui-primary) 50%, var(--vmesta-ui-line)) !important;
}

/* Текст публикации — основной читаемый цвет, а не цвет кнопки действия. */
:is(.post-content-text, .space-post-content, #viewer-post-body, #viewer-caption) {
    color: var(--vmesta-ui-ink) !important;
}

/* Верхняя панель пространств — без белой кнопки и случайного жёлтого текста. */
#top-spaces-dropdown :is(.space-menu-item > span > span:first-child, .top-spaces-open-button, .space-menu-create),
#top-spaces-dropdown > div:first-child {
    color: var(--vmesta-ui-primary) !important;
}

#top-spaces-dropdown :is(.space-menu-item > span > span:last-child) {
    color: var(--vmesta-ui-muted) !important;
}

#top-spaces-dropdown :is(.top-spaces-open-button, .space-menu-create) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 90%, var(--vmesta-ui-primary) 10%) !important;
    border-color: var(--vmesta-ui-line) !important;
}

/* Нижняя полоса уведомлений остаётся частью одной карточки, без другого фона. */
#notifications-dropdown.notifications-dropdown-v2 {
    --notice-bg: var(--vmesta-ui-panel);
    --notice-soft: color-mix(in srgb, var(--vmesta-ui-panel) 90%, var(--vmesta-ui-primary) 10%);
    --notice-text: var(--vmesta-ui-ink);
    --notice-muted: var(--vmesta-ui-muted);
    --notice-border: var(--vmesta-ui-line);
}

#notifications-dropdown .notifications-dropdown-footer {
    background: var(--notice-bg) !important;
}

/* Выход — обычное действие меню в палитре темы, а не отдельный красный элемент. */
#settings-dropdown #menu-main-content > button[onclick*="logout"],
#settings-dropdown #menu-main-content > button[onclick*="logout"] .settings-menu-icon {
    color: var(--vmesta-ui-primary) !important;
}

/* Название пространства и название уровня доступа всегда стоят первыми. */
.space-manage-panel > header > div:first-child {
    display: flex;
    flex-direction: column;
}

.space-manage-panel > header > div:first-child > strong {
    order: -1;
    margin-top: 0 !important;
    color: var(--vmesta-ui-primary) !important;
}

.space-manage-panel > header > div:first-child > span {
    margin-top: 0.16rem;
    color: var(--vmesta-ui-muted) !important;
}

.space-role-visibility > header > div {
    display: flex !important;
    flex-direction: column;
}

.space-role-visibility > header strong {
    order: -1;
    color: var(--vmesta-ui-primary) !important;
}

.space-role-visibility > header small { color: var(--vmesta-ui-muted) !important; }

/* Единая палитра выбранной темы.
   Любая цветовая тема теперь имеет один источник — --color-dynamic.  От него
   вычисляются текст, иконки, поверхности и границы; вторичные цвета не могут
   случайно попасть в карточку, вкладку или заголовок. */
html {
    --vm-theme-accent: var(--color-dynamic, #2563eb);
    --vm-theme-ink: color-mix(in srgb, var(--vm-theme-accent) 62%, rgb(15 23 42) 38%);
    --vm-theme-muted: color-mix(in srgb, var(--vm-theme-accent) 45%, rgb(100 116 139) 55%);
    --vm-theme-panel: color-mix(in srgb, var(--adaptive-surface, #fff) 96%, var(--vm-theme-accent) 4%);
    --vm-theme-soft: color-mix(in srgb, var(--adaptive-surface-2, #f8fafc) 82%, var(--vm-theme-accent) 18%);
    --vm-theme-line: color-mix(in srgb, var(--adaptive-border, #dbe3ee) 72%, var(--vm-theme-accent) 28%);
    --vm-theme-line-strong: color-mix(in srgb, var(--adaptive-border, #dbe3ee) 48%, var(--vm-theme-accent) 52%);

    --adaptive-text-active: var(--vm-theme-ink) !important;
    --adaptive-text-strong: var(--vm-theme-ink) !important;
    --adaptive-text-secondary: var(--vm-theme-muted) !important;
    --adaptive-text-passive: var(--vm-theme-muted) !important;
    --adaptive-text: var(--vm-theme-ink) !important;
    --adaptive-text-muted: var(--vm-theme-muted) !important;
    --adaptive-muted: var(--vm-theme-muted) !important;
    --adaptive-ui-panel: var(--vm-theme-panel) !important;
    --adaptive-ui-active: var(--vm-theme-soft) !important;
    --adaptive-ui-line: var(--vm-theme-line) !important;
    --adaptive-ui-line-strong: var(--vm-theme-line-strong) !important;
    --standard-text-active: var(--vm-theme-ink) !important;
    --standard-text-secondary: var(--vm-theme-muted) !important;
    --standard-text-passive: var(--vm-theme-muted) !important;
    --standard-panel: var(--vm-theme-panel) !important;
    --standard-panel-soft: var(--vm-theme-soft) !important;
    --standard-line: var(--vm-theme-line) !important;
    --vmesta-ui-primary: var(--vm-theme-accent) !important;
    --vmesta-ui-ink: var(--vm-theme-ink) !important;
    --vmesta-ui-muted: var(--vm-theme-muted) !important;
    --vmesta-ui-panel: var(--vm-theme-panel) !important;
    --vmesta-ui-soft: var(--vm-theme-soft) !important;
    --vmesta-ui-line: var(--vm-theme-line) !important;

    /* Старые blue/indigo/purple utility-классы становятся семантическим
       акцентом выбранной темы, а не вторым независимым набором красок. */
    --color-blue-50: var(--vm-theme-soft) !important;
    --color-blue-100: var(--vm-theme-soft) !important;
    --color-blue-200: var(--vm-theme-line) !important;
    --color-blue-300: var(--vm-theme-line-strong) !important;
    --color-blue-400: var(--vm-theme-accent) !important;
    --color-blue-500: var(--vm-theme-accent) !important;
    --color-blue-600: var(--vm-theme-accent) !important;
    --color-blue-700: var(--vm-theme-ink) !important;
    --color-blue-800: var(--vm-theme-ink) !important;
    --color-blue-900: var(--vm-theme-ink) !important;
    --color-indigo-500: var(--vm-theme-accent) !important;
    --color-purple-500: var(--vm-theme-accent) !important;
    --color-violet-500: var(--vm-theme-accent) !important;
    --color-cyan-500: var(--vm-theme-accent) !important;
    --color-teal-500: var(--vm-theme-accent) !important;
}

html.dark {
    --vm-theme-ink: color-mix(in srgb, white 82%, var(--vm-theme-accent) 18%);
    --vm-theme-muted: color-mix(in srgb, white 58%, var(--vm-theme-accent) 42%);
    --vm-theme-panel: color-mix(in srgb, var(--adaptive-surface, #111827) 93%, var(--vm-theme-accent) 7%);
    --vm-theme-soft: color-mix(in srgb, var(--adaptive-surface-2, #172033) 78%, var(--vm-theme-accent) 22%);
    --vm-theme-line: color-mix(in srgb, var(--adaptive-border, #334155) 66%, var(--vm-theme-accent) 34%);
    --vm-theme-line-strong: color-mix(in srgb, var(--adaptive-border, #334155) 40%, var(--vm-theme-accent) 60%);
}

html :is(.achievement-notif-item, .achievement-row.is-newly-unlocked) {
    border-color: var(--vm-theme-line-strong) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vm-theme-accent) 13%, transparent) !important;
}

html :is(.achievement-notif-icon, .achievement-notif-copy strong) {
    color: var(--vm-theme-accent) !important;
}

/* Главные названия и контент в динамической теме не наследуют старый синий
   или жёлтый utility-класс. Состояния ошибок и статусов намеренно не трогаем. */
html :is(
    .post-author, .post-author-link, .viewer-author-link, .comment-author-link,
    .space-post-title, .space-card-title, .spaces-index-card strong,
    .space-about-card strong, .space-menu-item > span > span:first-child,
    #top-spaces-dropdown strong, .achievement-sidebar-card, .interest-card h3
) {
    color: var(--vm-theme-ink) !important;
}

html :is(
    .post-date, .space-post-date, .comment-node small, .space-about-card > span,
    .space-about-head p, .space-menu-item > span > span:last-child,
    #top-spaces-dropdown small
) {
    color: var(--vm-theme-muted) !important;
}

/* Профильные вкладки и левая колонка раньше имели отдельный accent-only
   оверрайд: иконки были акцентными даже у неактивных пунктов. */
html.theme-palette-active:not(.adaptive-theme) :is(
    #profile-left-rail .nav-item:not(:is(:hover, .bg-blue-50, [aria-current="page"])) :is(svg, svg *),
    #profile-tabs-container .tab-btn:not(:is(:hover, .active-tab, .text-blue-500, .text-blue-600)) :is(.profile-tab-icon, .profile-tab-icon svg)
) {
    color: currentColor !important;
}

html.theme-palette-active:not(.adaptive-theme) :is(
    .post-author, .space-post-title, .space-card-title, .item-name,
    .settings-profile-rank-btn strong, .theme-catalog-section h4
) {
    color: var(--vmesta-ui-ink) !important;
}

html.theme-palette-active:not(.adaptive-theme) :is(
    .post-date, .space-post-date, .settings-profile-rank-btn small,
    .theme-catalog-section p
) {
    color: var(--vmesta-ui-muted) !important;
}

/* Старое правило adaptive-theme красило текст поста как ссылку.  В тёмной
   теме это и давало длинный ярко-синий текст на карточке. */
html.adaptive-theme .post-item .post-content-text,
html.adaptive-theme .space-post-content,
html.adaptive-theme #viewer-post-body,
html.adaptive-theme #viewer-caption {
    color: var(--vmesta-ui-ink) !important;
}

/* Аудиоплеер использует те же поверхность, линии и акцент, что публикация.
   В частности, убран всегда жёлтый маркер прогресса. */
html .vmesta-track-player {
    --track-accent: var(--vmesta-ui-primary);
    --track-detail: var(--vmesta-ui-primary);
    --track-panel: var(--vmesta-ui-soft);
    --track-strong: var(--vmesta-ui-panel);
    --track-line: var(--vmesta-ui-line);
    --track-text: var(--vmesta-ui-ink);
    --track-muted: var(--vmesta-ui-muted);
}

html .vmesta-track-progress-thumb {
    fill: var(--vmesta-ui-primary) !important;
}

/* Плоские поверхности: акцент больше не используется ни в тенях, ни в
   обводках. Он остаётся только у активного действия или значка. */
html {
    --vm-theme-panel: var(--adaptive-surface, #fff);
    --vm-theme-soft: color-mix(in srgb, var(--adaptive-surface-2, #f8fafc) 96%, var(--adaptive-text, #0f172a) 4%);
    --vm-theme-line: color-mix(in srgb, var(--adaptive-border, #dbe3ee) 86%, var(--adaptive-text, #0f172a) 14%);
    --vm-theme-line-strong: var(--vm-theme-line);
    --adaptive-ui-shadow: none !important;
    --adaptive-ui-shadow-hover: none !important;
    --standard-shadow: none !important;
    --standard-shadow-hover: none !important;
}

html.dark {
    --vm-theme-panel: var(--adaptive-surface, #111827);
    --vm-theme-soft: color-mix(in srgb, var(--adaptive-surface-2, #172033) 94%, white 6%);
    --vm-theme-line: color-mix(in srgb, var(--adaptive-border, #334155) 86%, white 14%);
    --vm-theme-line-strong: var(--vm-theme-line);
}

/* Тени отключены сознательно во всём интерфейсе: оформление остаётся
   плоским и не создаёт цветных ореолов вокруг интерактивных элементов. */
html *, html *::before, html *::after {
    box-shadow: none !important;
    border-color: transparent !important;
}

html :is(button, [role="button"], .post-item, .space-post, .space-side-card,
    .space-composer, .space-switchboard, .space-tabs, .spaces-index-card,
    .achievement-sidebar-card, .profile-interests-card, .interest-match-card,
    .messenger-shell, .messenger-dialogs-panel, .messenger-conversation,
    .messenger-side-panel, #top-spaces-dropdown, #post-viewer-panel,
    #viewer-sidebar, #viewer-comments-block, #viewer-comments-list,
    .comment-node, .comment-form-container, .comment-dropdown,
    .space-about-panel, .space-about-card) {
    box-shadow: none !important;
}

html :is(button, .post-item, .space-post, .space-side-card, .space-composer,
    .space-switchboard, .space-tabs, .spaces-index-card, .achievement-sidebar-card,
    .profile-interests-card, .interest-match-card, .messenger-shell,
    .messenger-dialogs-panel, .messenger-conversation, .messenger-side-panel,
    #top-spaces-dropdown, #post-viewer-panel, #viewer-sidebar,
    #viewer-comments-block, #viewer-comments-list, .comment-node,
    .comment-form-container, .comment-dropdown, .space-about-panel,
    .space-about-card) {
    border-color: var(--vmesta-ui-line) !important;
}

html :is(#profile-avatar-card, #profile-left-rail .nav-item,
    #profile-left-rail .sidebar-friends-panel, #profile-tabs-container,
    .profile-contact-link, .profile-contact-links-section, #site-header) {
    border-color: var(--vmesta-ui-line) !important;
}

/* Просмотр поста и комментарии не получают синюю заливку: это одна плоская
   карточка с чуть отличающейся зоной ввода. */
html :is(#post-viewer-panel, #viewer-sidebar, #viewer-scroll-region,
    #viewer-post-summary, #viewer-comments-block, #viewer-comments-list) {
    background: var(--vmesta-ui-panel) !important;
}

html :is(#viewer-post-header, .viewer-comments-head, .viewer-form-shell,
    #viewer-form-container) {
    background: var(--vmesta-ui-soft) !important;
    border-color: var(--vmesta-ui-line) !important;
}

html :is(.comment-node, #post-viewer .comment-form-container,
    .media-viewer-post-slot .comment-form-container, .space-comment-form .comment-form-container) {
    background: var(--vmesta-ui-panel) !important;
    border-color: var(--vmesta-ui-line) !important;
    box-shadow: none !important;
}

html :is(#post-viewer .comment-form-container textarea,
    .media-viewer-post-slot .comment-form-container textarea,
    .space-comment-form .comment-form-container textarea) {
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html :is(#post-viewer .comment-form-container .emoji-trigger,
    .media-viewer-post-slot .comment-form-container .emoji-trigger,
    .space-comment-form .comment-form-container .emoji-trigger) {
    background: transparent !important;
    color: var(--vmesta-ui-muted) !important;
    box-shadow: none !important;
}

/* Шапка, метаданные обложки и горизонтальные вкладки используют ту же
   контрастную пару, что и карточки. Это убирает отдельный синий слой в
   «О себе / Москва» и у Фото, Видео, Музыки в тёмном режиме. */
#site-header {
    background: var(--vmesta-ui-panel) !important;
    border-color: var(--vmesta-ui-line) !important;
}

#site-header :is(#top-user-name, #top-spaces-btn, #top-display-level) {
    color: var(--vmesta-ui-ink) !important;
}

#site-header :is(#top-spaces-btn:hover, #top-user-name:hover) {
    color: var(--vmesta-ui-primary) !important;
}

#profile-tabs-container {
    border-color: var(--vmesta-ui-line) !important;
    background: var(--vmesta-ui-panel) !important;
}

#profile-tabs-container .tab-btn:not(.hidden) {
    color: var(--vmesta-ui-ink) !important;
}

#profile-tabs-container .tab-btn:not(.hidden) :is(.profile-tab-icon, .profile-tab-icon svg) {
    color: currentColor !important;
}

#profile-tabs-container .tab-btn:is(:hover, .active-tab, .text-blue-500, .text-blue-600) {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

#cover-section .profile-cover-meta-link {
    color: color-mix(in srgb, white 82%, var(--vmesta-ui-primary) 18%) !important;
}

#cover-section .profile-cover-meta-link:hover {
    color: white !important;
}

/* Без обводок: поверхность и отступы задают структуру сами, без рамок. */
html *, html *::before, html *::after {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Карточки не имитируют границу градиентом или внутренним слоем. */
html :is(.post-item, .space-post, .space-tabs, .space-side-card,
    .achievement-sidebar-card, .profile-interests-card, .interest-match-card,
    .messenger-shell, .messenger-dialogs-panel, .messenger-conversation,
    .messenger-side-panel, #profile-tabs-container, #profile-left-rail,
    #top-spaces-dropdown, #post-viewer-panel, #viewer-sidebar,
    #viewer-comments-block, #viewer-comments-list, .comment-node,
    .comment-form-container, .comment-dropdown, .space-about-panel,
    .space-about-card) {
    background-image: none !important;
    box-shadow: none !important;
}

/* Единый цвет пиктограмм: весь интерфейс берёт активный оттенок выбранной
   темы. Текст остаётся контрастным и не превращается в ссылку. */
html :is(
    #cover-section .profile-cover-meta-link > svg,
    #profile-tabs-container .tab-btn :is(.profile-tab-icon, .profile-tab-icon svg),
    #profile-left-rail .nav-item :is(svg, svg *),
    .vmesta-track-mark, .vmesta-track-mark svg,
    .vmesta-track-tools, .vmesta-track-tools svg,
    .vmesta-track-download, .vmesta-track-download svg,
    .settings-profile-rank-icon, .settings-profile-rank-icon svg,
    .settings-profile-action-icon, .settings-profile-action-icon svg,
    .settings-profile-guard-icon, .settings-profile-guard-icon svg,
    .access-role-marker, .access-role-marker svg,
    .access-role-popover-icon, .access-role-popover-icon svg,
    .project-rank-icon-wrap > svg:first-child,
    .profile-avatar-role-badge, .profile-avatar-role-badge > svg:first-child,
    .access-role-scope-icon, .access-role-scope-icon svg
) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

html :is(.settings-profile-rank-btn strong, .access-role-popover-row strong) {
    color: var(--vmesta-ui-ink) !important;
}

html :is(.settings-profile-rank-btn small, .access-role-popover-row small) {
    color: var(--vmesta-ui-muted) !important;
}

/* Колокольчик нейтрален, но в активном состоянии становится цветом темы. */
#notif-bell-btn {
    color: var(--vmesta-ui-muted) !important;
}

#notif-bell-btn :is(svg, svg *) {
    stroke: currentColor !important;
}

#notif-bell-btn:is(:hover, :focus-visible, [aria-expanded="true"]) {
    color: var(--vmesta-ui-primary) !important;
}

/* Подписи — тёмный текстовый оттенок, пиктограммы — яркий активный. */
#profile-tabs-container .tab-btn .profile-tab-label,
#cover-section .profile-cover-meta-link > span {
    color: var(--vmesta-ui-ink) !important;
}

/* Горизонтальные вкладки — один адаптивный цвет и у знака, и у подписи. */
#profile-tabs-container .tab-btn :is(.profile-tab-icon, .profile-tab-icon svg, .profile-tab-label) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

/* Это не рамки карточек, а смысловые направляющие: они остаются видимыми
   даже при общем отключении обводок. */
.signal-sidebar-subnav {
    position: relative;
    border-left: 0 !important;
}

.signal-sidebar-subnav::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 0;
    width: 1px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 58%, transparent);
    pointer-events: none;
}

/* Начало направляющей помечено точкой — линия не выглядит случайным
   обрывком рядом с вложенными пунктами «Сигналов». */
.signal-sidebar-subnav::after {
    content: "";
    position: absolute;
    top: .06rem;
    left: calc(-.14rem + .5px);
    width: .28rem;
    height: .28rem;
    border-radius: 50%;
    background: var(--vmesta-ui-primary) !important;
    pointer-events: none;
}

.messenger-voice-transcript {
    border-left: 0 !important;
}

.messenger-voice-transcript::after {
    content: "";
    position: absolute;
    top: .38rem;
    bottom: .38rem;
    left: 0;
    width: .14rem;
    border-radius: 999px;
    background: var(--msg-accent, var(--vmesta-ui-primary)) !important;
    pointer-events: none;
}

/* Недавние контакты остаются отдельными карточками: активный фон одной
   строки не соприкасается с соседней и не образует рваный блок. */
.messenger-recent-list {
    display: grid !important;
    gap: .35rem !important;
}

.messenger-recent {
    margin: 0 !important;
    border-radius: .8rem !important;
}

/* Настройки и тема: только компактный, мягкий отклик вместо квадратной
   заливки всего элемента. Раскрытие адаптивной темы намеренно не меняем. */
button[onclick*="toggleSettingsMenu"] {
    border-radius: 999px !important;
    background: transparent !important;
}

button[onclick*="toggleSettingsMenu"]:is(:hover, :focus-visible) {
    color: var(--vmesta-ui-primary) !important;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 12%, transparent) !important;
}

#settings-dropdown :is(#theme-option-light, #theme-option-dark) {
    border-radius: .8rem !important;
    background: transparent !important;
}

#settings-dropdown :is(#theme-option-light, #theme-option-dark):is(:hover, :focus-visible) {
    background: transparent !important;
}

#settings-dropdown :is(#theme-card-light, #theme-card-dark) {
    position: relative;
    overflow: hidden;
}

#settings-dropdown :is(#theme-option-light, #theme-option-dark):is(:hover, :focus-visible) > :is(#theme-card-light, #theme-card-dark) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

#settings-dropdown :is(#theme-option-light, #theme-option-dark):is(:hover, :focus-visible) > span {
    color: var(--vmesta-ui-primary) !important;
}

/* Первый проход баланса цветов: текст не становится ссылочным, а цвет темы
   принадлежит знаку и выбранной площадке. Это одинаково работает в светлом,
   тёмном и адаптивном режимах. */
#profile-left-rail .nav-item {
    color: var(--vmesta-ui-ink) !important;
}

#profile-left-rail .nav-item :is(svg, svg *),
#profile-tabs-container .tab-btn :is(.profile-tab-icon, .profile-tab-icon svg) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

#profile-tabs-container .tab-btn .profile-tab-label {
    color: var(--vmesta-ui-ink) !important;
}

/* Поиск и публикация: фон отмечает состояние, а надпись остаётся читаемой. */
:is(.publisher-search-button, .publisher-create-button) {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.publisher-search-button, .publisher-create-button) :is(svg, svg *) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

:is(.publisher-search-button, .publisher-create-button):is(:hover, .is-active, .has-filters) {
    background: color-mix(in srgb, var(--vmesta-ui-primary) 16%, var(--vmesta-ui-panel)) !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Хэштег — нейтральная подпись на мягкой акцентной площадке. */
:is(.post-hashtag-chip, .hashtag-filter-chip),
:is(.post-hashtag-chip, .hashtag-filter-chip) > span {
    color: var(--vmesta-ui-ink) !important;
    text-shadow: none !important;
}

:is(.post-hashtag-chip, .hashtag-filter-chip) {
    background: var(--vmesta-ui-soft) !important;
}

:is(.post-hashtag-chip, .hashtag-filter-chip):is(:hover, [aria-pressed="true"]) {
    background: color-mix(in srgb, var(--vmesta-ui-primary) 18%, var(--vmesta-ui-panel)) !important;
}

/* Реакции публикации: контур и заливка всегда используют текущий акцент. */
:is(.post-item, #viewer-post-actions) :is([data-post-vote], .post-share-trigger, button:has(> [id^="comment-count-"])) {
    color: var(--vmesta-ui-primary) !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote="like"][aria-pressed="true"] :is(svg, .post-like-icon) {
    fill: currentColor !important;
    stroke: currentColor !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote="like"][aria-pressed="false"] .post-like-icon {
    fill: transparent !important;
    stroke: currentColor !important;
}

:is(.post-item, #viewer-post-actions) [id^="comment-count-"] {
    background: color-mix(in srgb, var(--vmesta-ui-primary) 13%, transparent) !important;
    color: var(--vmesta-ui-primary) !important;
}

.achievement-sidebar-actions button {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Пункты «Профиль» и «Пространства» в раскрытом меню: читаемый текст и
   отдельный акцентный значок. */
#settings-dropdown #menu-main-content > button {
    color: var(--vmesta-ui-ink) !important;
}

#settings-dropdown #menu-main-content > button .settings-menu-icon {
    color: var(--vmesta-ui-primary) !important;
}

/* Верхний плеер перестаёт быть микроскопическим. Кнопки и волна — цвета
   темы, название и тайминг — контрастный текст. */
.global-music-panel {
    width: clamp(12.6rem, 20vw, 16rem) !important;
    height: 2.7rem !important;
    grid-template-columns: 2.1rem .9rem minmax(4rem, 1fr) auto !important;
    gap: .3rem !important;
}

#global-music-play {
    width: 2.1rem !important;
    height: 2.1rem !important;
    background: var(--vmesta-ui-primary) !important;
    color: var(--vmesta-ui-panel) !important;
}

#global-music-play svg { width: 1rem !important; height: 1rem !important; }

.global-music-title { color: var(--vmesta-ui-ink) !important; }

.global-music-footer > small { color: var(--vmesta-ui-muted) !important; }
.global-music-footer > small time:first-child { color: var(--vmesta-ui-primary) !important; }

.global-music-switches { gap: .14rem !important; }
.global-music-switches button,
#global-music-volume {
    width: 1.42rem !important;
    height: 1.42rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

.global-music-switches svg { width: .76rem !important; height: .76rem !important; }
#global-music-volume svg { width: .8rem !important; height: .8rem !important; }

/* Направляющие — это самостоятельные маркеры, не рамки. Ось линии проходит
   точно через центр стартовой точки и остаётся заметной после сброса border. */
.signal-sidebar-subnav::before {
    top: .31rem;
    bottom: .24rem;
    left: .28rem;
    width: 2px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 76%, transparent);
}

.signal-sidebar-subnav::after {
    top: .10rem;
    left: calc(.28rem + 1px - .21rem);
    width: .42rem;
    height: .42rem;
    background: var(--vmesta-ui-primary) !important;
}

.messenger-voice-transcript::before {
    top: .05rem;
    left: calc(.24rem + 1px - .22rem);
    width: .44rem;
    height: .44rem;
    border: 0 !important;
    border-radius: 50%;
    background: var(--msg-accent, var(--vmesta-ui-primary)) !important;
}

/* ------------[Согласованный слой интерактивных поверхностей]------------ // Оформляет связанный блок интерфейса.
   Карточки, меню и поля должны отличаться от основного фона без возврата
   тяжёлых контуров. Модуль: «оформление интерфейса». Часть 5/50 */

/* В глобальном поиске лупа остаётся частью единой увеличенной строки, а не
   отдельной иконкой рядом с зелёным полем. */
.global-search-field {
    grid-template-columns: 1.35rem minmax(0, 1fr) auto !important;
    min-height: 3.45rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 .7rem 0 1rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 70%, var(--vmesta-ui-primary) 30%) !important;
    color: var(--vmesta-ui-primary) !important;
}

.global-search-field:focus-within {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 58%, var(--vmesta-ui-primary) 42%) !important;
    box-shadow: none !important;
}

.global-search-field > svg { color: var(--vmesta-ui-primary) !important; }
.global-search-field input {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Рекомендации и каталог пространств получают заметную, но неброскую
   площадку в любой палитре. */
#recommended-friends-container,
.friend-search-card,
.spaces-index-card,
.spaces-index-body {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
}

.friend-search-card:hover,
.spaces-index-card:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%) !important;
}

/* Карточка верификации использует тот же мягкий фон, что и остальные
   служебные блоки профиля и пространства. */
:is(.profile-verification-card, .space-verification-card, .cover-account-verification) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--vmesta-ui-primary) 22%) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.profile-verification-card, .space-verification-card, .cover-account-verification) :is(strong, small) {
    color: var(--vmesta-ui-ink) !important;
}

:is(.verification-mark, .cover-account-verification-mark, .verification-own-mark) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 22%, var(--vmesta-ui-panel)) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Выпадающие действия всегда читаются поверх одинакового фона страницы. */
html:root :is([id^="post-menu-"], .spaces-index-menu, .space-manage-actions-menu, .friend-dropdown, .space-composer-menu, .global-search-filter-menu) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is([id^="post-menu-"], .spaces-index-menu, .space-manage-actions-menu, .friend-dropdown, .space-composer-menu, .global-search-filter-menu) button:not(.is-danger):hover {
    border-radius: .66rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 61%, var(--vmesta-ui-primary) 39%) !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Поле эмодзи — увеличенное и целостное: отдельная лупа и вложенный овал
   больше не появляются из-за общего правила поиска. */
.emoji-picker-search-wrap {
    height: 2.7rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 75%, var(--vmesta-ui-primary) 25%) !important;
    color: var(--vmesta-ui-primary) !important;
}

.emoji-picker-search {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Реакции: у обычного состояния — аккуратная иконка, у выбранного — явная
   мягкая площадка. Никаких квадратных hover-подсветок. */
:is(.post-item, #viewer-post-actions) [data-post-vote] {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 999px !important;
    color: var(--vmesta-ui-primary) !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote]:is(:hover, [aria-pressed="true"]) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 74%, var(--vmesta-ui-primary) 26%) !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote="like"][aria-pressed="true"] :is(svg, .post-like-icon) {
    fill: var(--vmesta-ui-primary) !important;
    stroke: var(--vmesta-ui-primary) !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote="dislike"][aria-pressed="true"] {
    color: var(--vmesta-ui-primary) !important;
}

/* В настройках темы отклик остаётся внутри миниатюры и не создаёт квадрат
   вокруг всей кнопки. Иконка редактирования профиля получает свою площадку. */
#settings-dropdown :is(#theme-option-light, #theme-option-dark) { background: transparent !important; }
#settings-dropdown :is(#theme-option-light, #theme-option-dark) > :is(#theme-card-light, #theme-card-dark) {
    border-radius: .78rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 82%, var(--vmesta-ui-primary) 18%) !important;
}
#settings-dropdown :is(#theme-option-light, #theme-option-dark):is(:hover, :focus-visible) > :is(#theme-card-light, #theme-card-dark) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 67%, var(--vmesta-ui-primary) 33%) !important;
}

#edit-profile-btn,
.space-about-edit-button:not(.is-save) {
    border-radius: 999px !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Ответы образуют ветку: точка у начала и более заметная вертикальная связь. */
#post-viewer.is-discussion-mode .replies-group {
    position: relative;
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--vmesta-ui-primary) 22%) !important;
}

#post-viewer.is-discussion-mode .replies-group::before {
    content: "";
    position: absolute;
    top: .42rem;
    bottom: .42rem;
    left: -.52rem;
    width: 2px;
    border-radius: 999px;
    background: var(--vmesta-ui-primary);
}

#post-viewer.is-discussion-mode .replies-group::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: calc(-.52rem + 1px - .22rem);
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    background: var(--vmesta-ui-primary);
}

/* Опасные операции никогда не наследуют обычный акцент темы. */
:is(.is-danger, .text-red-500, .text-red-600, [data-danger="true"]) {
    color: #e5484d !important;
}

:is(.is-danger, [data-danger="true"]):hover {
    background: color-mix(in srgb, #e5484d 18%, var(--vmesta-ui-panel)) !important;
    color: #e5484d !important;
}

/* Единый вид редактируемых полей. Даже на светлом фоне это отдельная
   мягкая площадка, а вводимый текст всегда читается цветом темы. */
:is(.cover-account-row, .cover-account-setting-row) :is(input, select, .vm-select-trigger, .vm-date-trigger),
.cover-account-password-value,
.cover-security-dialog-body input,
.profile-contact-edit-copy input,
#about-modal :is(input[id^="edit-"], textarea[id^="edit-"], #profile-location-edit) {
    border: 0 !important;
    border-radius: .72rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 84%, var(--vmesta-ui-primary) 16%) !important;
    color: var(--vmesta-ui-primary) !important;
    caret-color: var(--vmesta-ui-primary);
}

:is(.cover-account-row, .cover-account-setting-row) :is(input, select, .vm-select-trigger, .vm-date-trigger):focus,
.cover-security-dialog-body input:focus,
.profile-contact-edit-copy input:focus,
#about-modal :is(input[id^="edit-"], textarea[id^="edit-"], #profile-location-edit):focus {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 70%, var(--vmesta-ui-primary) 30%) !important;
}

/* В режиме правки контактов значение не растворяется в строке карточки. */
.profile-contact-edit-copy input {
    margin-top: .28rem;
    padding: .36rem .5rem !important;
}

/* Вкладки редактора различимы на белой теме так же, как строка поиска. */
.cover-editor-tab {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 86%, var(--vmesta-ui-primary) 14%) !important;
    color: var(--vmesta-ui-primary) !important;
}

.cover-editor-tab:is(:hover, .is-active) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Действия списка друзей: слова — контрастные, значки — акцентные. */
.friend-row-action,
.friend-row-menu-button {
    color: var(--vmesta-ui-ink) !important;
}

.friend-row-action :is(svg, svg *),
.friend-row-menu-button :is(svg, svg *) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

/* Город и возраст становятся последовательными полями, а не широкой строкой. */
.friends-own-filter-panel {
    width: min(19rem, calc(100vw - 2rem)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.friends-own-filter-panel > div { justify-content: flex-end !important; }

/* Карточки поиска друзей не сливаются с фоном даже в дневной палитре. */
.friend-search-card {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 86%, var(--vmesta-ui-primary) 14%) !important;
}

.friend-search-card:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
}

/* Нижняя зона редактора — отдельная мягкая площадка с внутренней линией. */
:is(.profile-post-composer > .flex.items-center.justify-between.mt-2, .space-composer-actions) {
    position: relative;
    background: var(--vmesta-ui-soft) !important;
}

.profile-post-composer > .flex.items-center.justify-between.mt-2 {
    margin-inline: -.45rem;
    padding-inline: .7rem;
    border-radius: 0 0 .9rem .9rem;
}

:is(.profile-post-composer > .flex.items-center.justify-between.mt-2, .space-composer-actions)::before {
    content: "";
    position: absolute;
    top: 0;
    left: .7rem;
    right: .7rem;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 46%, transparent);
    pointer-events: none;
}

/* Меню «три точки»: плотнее, с понятными знаками действий. */
.space-composer-menu {
    width: 12.25rem !important;
    padding: .32rem !important;
    background: var(--vmesta-ui-panel) !important;
}

.space-composer-menu :is(button, label) {
    display: grid !important;
    grid-template-columns: 1.15rem minmax(0, 1fr) auto;
    min-height: 2.2rem;
    align-items: center;
    gap: .45rem;
    padding: .4rem .48rem !important;
    color: var(--vmesta-ui-ink) !important;
    font-size: .56rem !important;
}

.space-composer-menu .composer-menu-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: var(--vmesta-ui-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.space-composer-menu :is(button, label):hover {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Линия внутри панели смайлов отделяет категории от самих эмодзи. */
.emoji-picker-tabs {
    position: relative;
    border-bottom: 0 !important;
}

.emoji-picker-tabs::after {
    content: "";
    position: absolute;
    left: .08rem;
    right: .08rem;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 42%, transparent);
    pointer-events: none;
}

.messenger-voice-transcript::after {
    top: .27rem;
    bottom: .34rem;
    left: .24rem;
    width: 2px;
    border-radius: 999px;
    background: var(--msg-accent, var(--vmesta-ui-primary)) !important;
}

/* Финальный порядок важен: старые общие правила для type="search" не должны
   создавать второй овал внутри глобального поиска и панели эмодзи. */
#global-search-modal .global-search-field {
    min-height: 3.45rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 70%, var(--vmesta-ui-primary) 30%) !important;
}

:is(#global-search-modal-input, .emoji-picker-search) {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
}

.emoji-picker-search-wrap {
    height: 2.7rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 75%, var(--vmesta-ui-primary) 25%) !important;
}

#recommended-friends-container,
.friend-search-card,
.spaces-index-card,
.spaces-index-body {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
}

.friend-search-card:hover,
.spaces-index-card:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%) !important;
}

:is([id^="post-menu-"], .spaces-index-menu, .space-manage-actions-menu, .friend-dropdown, .space-composer-menu, .global-search-filter-menu) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.profile-verification-card, .space-verification-card, .cover-account-verification) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--vmesta-ui-primary) 22%) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.post-item, #viewer-post-actions) [data-post-vote] {
    border-radius: 999px !important;
    color: var(--vmesta-ui-primary) !important;
}

#post-viewer.is-discussion-mode .replies-group {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--vmesta-ui-primary) 22%) !important;
}

/* Реакции комментариев остаются иконками: без круглой или овальной плашки
   вокруг цифры и без фона при наведении. */
:is(.comment-like-btn, .comment-like-btn > div, .comment-like-btn:hover, .comment-like-btn.active, .comment-like-btn:hover > div, .comment-like-btn.active > div) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Переключение «Фото → Альбомы» не должно запускать анимацию старого списка
   на один кадр до появления нового. */
#photos-list-container,
#albums-placeholder { transition: none !important; }

/* Общая поверхность левой навигации. Её же используем для ленты и чатов:
   страницы остаются единым интерфейсом, но второе меню чуть светлее. */
:root {
    --vmesta-rail-surface: color-mix(in srgb, var(--vmesta-ui-panel) 84%, var(--vmesta-ui-primary) 16%);
    --vmesta-menu-surface: color-mix(in srgb, var(--vmesta-ui-panel) 66%, var(--vmesta-ui-primary) 34%);
}

/* В ночном режиме базовая панель уже содержит оттенок акцента. Повторное
   подмешивание делало посты и шапку ленты заметно синее боковых панелей. */
html.dark {
    --vmesta-rail-surface: var(--vmesta-ui-panel);
    --vmesta-menu-surface: var(--vmesta-ui-soft);
}

/* Стандартная дневная тема не тонирует базовые поверхности акцентом.
   Белый — фон и карточки, голубой — только состояние и раскрытое меню. */
html:not(.adaptive-theme):not(.dark) {
    --vm-theme-panel: #ffffff;
    --vm-theme-soft: color-mix(in srgb, #ffffff 86%, var(--vm-theme-accent) 14%);
    --vmesta-rail-surface: #ffffff;
    --vmesta-menu-surface: color-mix(in srgb, #ffffff 80%, var(--vm-theme-accent) 20%);
}

html:not(.adaptive-theme):not(.dark) :is(body, #content-area) {
    background-color: #f3f6fb !important;
}

html:not(.adaptive-theme):not(.dark) #profile-tabs-container .tab-btn {
    color: var(--vmesta-ui-ink) !important;
}

html:not(.adaptive-theme):not(.dark) #profile-tabs-container .tab-btn .profile-tab-label {
    color: var(--vmesta-ui-ink) !important;
}

html:not(.adaptive-theme):not(.dark) #profile-tabs-container .tab-btn :is(.profile-tab-icon, svg, svg *) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

html:not(.adaptive-theme):not(.dark) [data-testid^="post-actions-"] {
    background: transparent !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Активная реакция читается по заливке сердца, а не по неровной общей
   плашке вокруг значка и счётчика. */
html:root :is(.post-item, #viewer-post-actions) [data-post-vote]:is(:hover, [aria-pressed="true"], .active) {
    background: transparent !important;
}

/* Главное меню шестерёнки — три одинаковые строки. Исключение только выход. */
html:root #settings-dropdown {
    border: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root #settings-dropdown #menu-main-content {
    display: grid;
    gap: .18rem;
    padding: .42rem !important;
}

html:root #settings-dropdown #menu-main-content > button {
    min-height: 2.55rem;
    border: 0 !important;
    border-radius: .58rem !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
    padding: .55rem .68rem !important;
}

html:root #settings-dropdown #menu-main-content > button:not([onclick*="logout"]):hover {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root #settings-dropdown #menu-main-content > button .settings-menu-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--vmesta-ui-primary) !important;
    filter: none !important;
}

html:root #settings-dropdown .settings-menu-arrow {
    margin-left: auto;
    color: var(--vmesta-ui-primary) !important;
    font-size: .82rem !important;
    line-height: 1;
    opacity: .72 !important;
}

html:root #settings-dropdown #menu-main-content > button[onclick*="logout"],
html:root #settings-dropdown #menu-main-content > button[onclick*="logout"] .settings-menu-icon {
    color: #ef4444 !important;
}

html:root #settings-dropdown #menu-main-content > button[onclick*="logout"]:hover {
    background: color-mix(in srgb, #ef4444 13%, transparent) !important;
    color: #ef4444 !important;
}

#profile-layout-grid #content-main .post-item,
#profile-tabs-container {
    border: 0 !important;
    background: var(--vmesta-rail-surface) !important;
}

/* Цвет оболочки отделён от переменных пузырей и поиска. Значения повторяют
   исходные bg-white / dark:bg-slate-900/50 левой навигации. */
:root { --vmesta-messages-surface: var(--color-white, #fff); }
html.dark { --vmesta-messages-surface: var(--standard-panel); }
html.adaptive-theme { --vmesta-messages-surface: var(--adaptive-card-tint); }
html.adaptive-theme.dark {
    --vmesta-messages-surface: color-mix(in srgb, var(--adaptive-card-tint) 88%, transparent);
}

:is(#messages-root, #messages-side-root) {
    --msg-bg: var(--vmesta-ui-panel);
    --msg-panel: var(--vmesta-ui-panel);
    --msg-panel-strong: var(--vmesta-menu-surface);
    --msg-line: transparent;
}

/* ID контейнера нужен из-за старых общих :is(..., #id)-правил темы.
   Полупрозрачная заливка наносится один раз, без сложения на родителях. */
html body.messages-route :is(#messages-root, #messages-side-root) :is(.messenger-dialogs-panel, .messenger-conversation, .messenger-side-section, .messenger-loading) {
    border: 0 !important;
    background: var(--vmesta-messages-surface) !important;
}

html body.messages-route :is(#messages-root, #messages-side-root) :is(.messenger-shell, .messenger-side-panel) {
    background: transparent !important;
}

body.messages-route .messenger-search {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
}

/* Карточка пространства заполняется до края одним цветом: исчезает тёмная
   полоса под «Косметикой» и ложная подсветка вокруг неё. */
.spaces-index-card,
.spaces-index-card .spaces-index-open,
.spaces-index-card .spaces-index-body {
    border: 0 !important;
    background: var(--vmesta-rail-surface) !important;
}

.spaces-index-card:hover,
.spaces-index-card:hover .spaces-index-open,
.spaces-index-card:hover .spaces-index-body {
    background: var(--vmesta-menu-surface) !important;
}

/* Контекстное меню — отдельный, но родственный навигации слой. */
:is([id^="post-menu-"], .spaces-index-menu, .space-manage-actions-menu, .friend-dropdown, .space-composer-menu, .global-search-filter-menu) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root :is([id^="post-menu-"], .spaces-index-menu, .space-manage-actions-menu, .friend-dropdown, .space-composer-menu, .global-search-filter-menu) > button:hover {
    background: var(--vmesta-rail-surface) !important;
}

/* Компактная кнопка музыки в шапке больше не выглядит белой чужой иконкой. */
.global-music-toggle {
    border: 0 !important;
    background: var(--vmesta-rail-surface) !important;
    color: var(--vmesta-ui-primary) !important;
}

.global-music-toggle:hover,
.global-music-dock.is-open .global-music-toggle {
    background: var(--vmesta-menu-surface) !important;
}

/* Стабильные поверхности динамических блоков. Они применяются и к узлам,
   которые лента добавляет позже, без инлайновых перекрасок после отрисовки. */
#profile-layout-grid #content-main .profile-publisher-hub {
    border-radius: 1rem !important;
    background: transparent !important;
}

.profile-publisher-hub .space-switchboard {
    border: 0 !important;
    background: var(--vmesta-rail-surface) !important;
}

.achievement-showcase-item.tier-bronze { color: #d99364 !important; }
.achievement-showcase-item.tier-silver { color: #9bb8d8 !important; }
.achievement-showcase-item.tier-gold { color: #e8bd62 !important; }
.achievement-showcase-item.tier-legend { color: #e080a8 !important; }
.achievement-showcase-item.tier-zodiac { color: #b391ef !important; }
.achievement-showcase-item.tier-verified { color: #62c99a !important; }
.achievement-showcase-item.tier-signal { color: #65b8e8 !important; }

/* Цвет принадлежит категории достижения, а не теме и не числовому уровню. */
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-friends,
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-members,
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-zodiac,
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-star { color: #8b5cf6 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-likes { color: #ec4899 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-posts { color: #3b82f6 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-views { color: #6366f1 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-comments { color: #06b6d4 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-messages,
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-signal { color: #0ea5e9 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-spaces { color: #14b8a6 !important; }
:is(.achievement-showcase-item, .achievement-badge, .achievement-task-icon).achievement-kind-verified { color: #10b981 !important; }

.achievement-showcase-item :is(svg, svg *, span, small) {
    color: currentColor !important;
    stroke: currentColor !important;
}

.achievement-showcase-item strong { color: var(--vmesta-ui-ink) !important; }

:is(.profile-post-composer, .space-composer.is-editing, .publication-inline-editor) {
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-rail-surface) !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Цвет достижения остаётся различимым, но не создаёт ещё один уровень
   поверхности: оттенок наносится только внутри самой плитки. */
.achievement-showcase-item {
    background: var(--vmesta-menu-surface) !important;
}

:is(.profile-post-composer textarea, .space-composer.is-editing .space-composer-text, .publication-inline-editor .space-composer-text, .publication-inline-editor .publication-editor-text-shell) {
    border: 0 !important;
    border-radius: .72rem !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
}

:is(.profile-post-composer .post-composer-selection-shell, .space-composer.is-editing .post-composer-selection-shell, .publication-inline-editor .post-composer-selection-shell, .space-composer.is-editing .space-editing-banner, .publication-inline-editor .space-editing-banner, .publication-inline-editor .space-composer-actions) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
}

/* ------------[Доводка редактора публикации]------------ // Полная линия действий, точный плюс и рабочее разворачивание поля. Модуль: «оформление интерфейса». Часть 115/203 */
:is(.profile-post-composer > .flex.items-center.justify-between.mt-2, .space-composer-actions)::before {
    left: 0 !important;
    right: 0 !important;
}

.post-composer-writing-shell {
    position: relative;
}

.post-composer-writing-shell > textarea {
    display: block;
    padding-right: 2.55rem !important;
    transition: min-height .2s ease !important;
}

.profile-post-composer.is-expanded .post-composer-writing-shell > textarea {
    min-height: 15rem !important;
}

.post-composer-expand-toggle {
    position: absolute;
    right: .38rem;
    bottom: .38rem;
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 0 !important;
    border-radius: .55rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    cursor: pointer;
}

.post-composer-expand-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.post-composer-expand-toggle[aria-expanded="true"] {
    background: var(--vmesta-menu-surface) !important;
}

.post-composer-expand-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.post-composer-plus {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
}

.post-composer-plus > span {
    display: grid !important;
    width: 100%;
    height: 100%;
    place-items: center;
    line-height: 1 !important;
    transform: none !important;
}

/* Меню выбора и уже выбранные вложения образуют два различимых слоя без обводок. */
.post-composer-attach-menu {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

.post-composer-attach-menu > button:not(.is-soon) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 86%, var(--vmesta-ui-primary) 14%) !important;
}

.post-composer-attach-menu > button:not(.is-soon):hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%) !important;
}

:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-selection-shell {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
}

:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-selection-list {
    border: 0 !important;
    border-radius: .78rem;
    padding: .48rem !important;
    background: var(--vmesta-ui-panel) !important;
}

:is(.post-upload-preview-item.post-selected-media-card, .space-composer-preview-item.post-selected-media-card, .post-file-selection-card) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 82%, var(--vmesta-ui-primary) 18%) !important;
    color: var(--vmesta-ui-ink) !important;
}

.post-attachment-kind-label {
    color: var(--vmesta-ui-primary) !important;
    font-weight: 800;
}

/* Панель эмодзи имеет мягкую оболочку и отдельную площадку со смайлами;
   fallback больше не растягивается поверх всей ленты. */
.emoji-picker-expanded,
.emoji-picker-expanded.emoji-picker-fallback {
    width: min(22rem, calc(100vw - 1.25rem)) !important;
    height: min(24rem, calc(100vh - 1.5rem)) !important;
    max-height: calc(100vh - 1.5rem) !important;
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

.emoji-picker-expanded .emoji-picker-search-wrap {
    background: var(--vmesta-ui-panel) !important;
}

.emoji-picker-expanded .emoji-picker-grid {
    border-radius: .76rem;
    padding: .38rem !important;
    background: var(--vmesta-ui-panel) !important;
}

/* Обычный лайк спокойнее дизлайка; активный лайк и большой просмотр используют
   один и тот же акцент темы вместо отдельного красного цвета. */
:root {
    --vmesta-like-rest: color-mix(in srgb, var(--vmesta-ui-muted) 76%, var(--vmesta-ui-primary) 24%);
}

html:root :is(.post-item, #viewer-post-actions) [data-post-vote="like"] {
    color: var(--vmesta-like-rest) !important;
}

html:root :is(.post-item, #viewer-post-actions) [data-post-vote="like"]:is(:hover, [aria-pressed="true"], .active) {
    color: var(--vmesta-ui-primary) !important;
}

html:root :is(.post-item, #viewer-post-actions) [data-post-vote="like"]:is([aria-pressed="true"], .active) :is(svg, .post-like-icon) {
    fill: var(--vmesta-ui-primary) !important;
    stroke: var(--vmesta-ui-primary) !important;
}

@media (max-width: 520px) {
    .profile-post-composer.is-expanded .post-composer-writing-shell > textarea { min-height: 12rem !important; }
}

/* ------------[Контраст интерактивных поверхностей]------------ // Светлая тема: элементы остаются без рамок, но не растворяются на белом фоне. Модуль: «оформление интерфейса». Часть 116/203 */
.profile-post-composer .emoji-trigger,
.space-composer .emoji-trigger {
    display: grid !important;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 0 !important;
    border-radius: .68rem !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
}

.profile-post-composer .emoji-trigger:hover,
.space-composer .emoji-trigger:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%) !important;
    color: var(--vmesta-ui-primary) !important;
}

.post-composer-attach-menu {
    background: var(--vmesta-ui-soft) !important;
}

.post-composer-attach-menu > button:not(.is-soon) {
    background: var(--vmesta-menu-surface) !important;
}

.post-composer-attach-menu > button:not(.is-soon):hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%) !important;
}

/* В меню очереди ни строка действия, ни селектор времени не становятся белыми. */
html:root .space-composer-menu :is(button, label):hover,
html:root .space-composer-menu :is(button, label):focus-within {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 66%, var(--vmesta-ui-primary) 34%) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root .space-composer-menu .space-delay-select {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%) !important;
    color: var(--vmesta-ui-ink) !important;
}

/* Компактный поиск в шапке получает ту же голубую площадку, что действия. */
html:root #global-search {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root #global-search:focus {
    background: var(--vmesta-menu-surface) !important;
}

html:root #global-search::placeholder {
    color: var(--vmesta-ui-primary) !important;
    opacity: .78;
}

/* В поиске пространств голубая оболочка является единственным фоном:
   внутренний input больше не рисует белый прямоугольник. */
html:root .spaces-index-search {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root .spaces-index-search:focus-within {
    background: var(--vmesta-menu-surface) !important;
}

html:root .spaces-index-search > input {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root .spaces-index-search > input::placeholder {
    color: var(--vmesta-ui-primary) !important;
    opacity: .72;
}

/* Карточки в одной строке растягиваются до общей высоты. Кнопка открытия тоже
   занимает её целиком, поэтому hover закрашивает нижний край без белой полосы. */
.spaces-index-card .spaces-index-open {
    min-height: 100%;
}

.spaces-index-card:hover,
.spaces-index-card:hover .spaces-index-open,
.spaces-index-card:hover .spaces-index-body {
    background: var(--vmesta-menu-surface) !important;
    background-color: var(--vmesta-menu-surface) !important;
}

/* ------------[Единый фон всплывающих инструментов редактора]------------ //
   Смайлики и вложения используют ровно поверхность меню черновика/очереди. Модуль: «оформление интерфейса». Часть 6/50 */
.emoji-picker-expanded,
.emoji-picker-expanded.emoji-picker-fallback,
.post-composer-attach-menu {
    background: var(--vmesta-menu-surface) !important;
    background-color: var(--vmesta-menu-surface) !important;
}

/* ------------[Выпадающий выбор времени]------------ // Портальный список продолжает
   цвет меню очереди и больше не раскрывается белым листом. Модуль: «оформление интерфейса». Часть 7/50 */
html:root #vm-select-portal.vm-select-menu {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    background-color: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root #vm-select-portal.vm-select-menu .vm-select-option {
    border: 0 !important;
    border-radius: .62rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root #vm-select-portal.vm-select-menu .vm-select-option + .vm-select-option {
    margin-top: .18rem;
}

html:root #vm-select-portal.vm-select-menu .vm-select-option:is(:hover, :focus-visible, .is-selected) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* ------------[Одинаковые инструменты редактора]------------ // Кнопки добавления и
   изменения размера совпадают в создании, редактировании и пространствах. Модуль: «оформление интерфейса». Часть 8/50 */
:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-plus {
    display: grid !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: .68rem !important;
    background: var(--vmesta-menu-surface) !important;
    line-height: 1 !important;
}

:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-plus > span {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 0 .08rem !important;
    line-height: 1 !important;
    transform: none !important;
}

.publication-editor-text-shell {
    position: relative;
}

.publication-editor-text-shell > textarea {
    padding-right: 2.55rem !important;
    resize: none !important;
    transition: min-height .2s ease !important;
}

:is(.space-composer, .publication-inline-editor).is-expanded .publication-editor-text-shell > textarea {
    min-height: 15rem !important;
}

.publication-editor-expand-toggle {
    right: .38rem !important;
    bottom: .38rem !important;
}

@media (max-width: 520px) {
    :is(.space-composer, .publication-inline-editor).is-expanded .publication-editor-text-shell > textarea {
        min-height: 12rem !important;
    }
}

/* ------------[Доводка меню очереди]------------ // Кнопка выбора показывает полное
   значение и остаётся частью голубой панели, а не белой вставкой. Модуль: «оформление интерфейса». Часть 9/50 */
html:root .space-composer-menu {
    width: 15.75rem !important;
}

html:root .space-composer-menu > label {
    display: grid !important;
    grid-template-columns: 1rem minmax(4.5rem, 1fr) 7.15rem;
    align-items: center;
    gap: .55rem !important;
}

html:root .space-composer-menu > label > .vm-select-shell {
    width: 7.15rem !important;
    min-width: 7.15rem !important;
}

html:root .space-composer-menu .vm-select-trigger {
    min-height: 2.35rem !important;
    padding-inline: .65rem !important;
    border: 0 !important;
    border-radius: .68rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 62%, var(--vmesta-ui-primary) 38%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root .space-composer-menu .vm-select-trigger > span {
    overflow: visible;
    font-size: .66rem;
    font-weight: 850;
    text-overflow: clip;
}

html:root .space-composer-menu .vm-select-shell:is(.is-open, :focus-within) .vm-select-trigger {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 54%, var(--vmesta-ui-primary) 46%) !important;
}

/* Текстовый плюс заменён симметричной SVG-иконкой: больше нет сдвига базовой линии. */
:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-attach-control {
    height: 2.2rem;
    align-items: center;
}

:is(.profile-post-composer, .space-composer, .publication-inline-editor) .post-composer-plus > svg {
    display: block;
    width: 1.18rem;
    height: 1.18rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Неактивный дизлайк равен по тону счётчику просмотров. Акцент появляется
   только после выбора; это одинаково работает в карточке и большом просмотре. */
html:root :is(.post-item, #viewer-post-actions) [data-post-vote="dislike"]:not([aria-pressed="true"]):not(.active) {
    color: var(--vmesta-ui-muted) !important;
}

html:root :is(.post-item, #viewer-post-actions) [data-post-vote="dislike"]:not([aria-pressed="true"]):not(.active):hover {
    color: color-mix(in srgb, var(--vmesta-ui-muted) 72%, var(--vmesta-ui-primary) 28%) !important;
}

html:root :is(.post-item, #viewer-post-actions) [data-post-vote="dislike"]:is([aria-pressed="true"], .active) {
    color: var(--vmesta-ui-primary) !important;
}

/* Контекстное меню поста не выдаёт белую строку поверх белой карточки. */
html:root [id^="post-menu-"] > button:not(.text-red-500):is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 58%, var(--vmesta-ui-primary) 42%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root [id^="post-menu-"] > button.text-red-500:is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 80%, #ef4444 20%) !important;
    color: #dc2626 !important;
}

/* ------------[Настройки аккаунта: фирменная палитра]------------ // Разделы данных и
   безопасности больше не возвращаются к чёрно-серым базовым стилям. Модуль: «оформление интерфейса». Часть 10/50 */
html:root :is(#cover-data-pane, #cover-security-pane) .cover-account-card {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root :is(#cover-data-pane, #cover-security-pane) .cover-account-card-header {
    border: 0 !important;
    background: transparent !important;
}

html:root :is(#cover-data-pane, #cover-security-pane) :is(
    .cover-account-card-header h3,
    .cover-account-row strong,
    .cover-account-setting-row strong,
    .cover-account-toggle-row strong
) {
    color: var(--vmesta-ui-primary) !important;
}

html:root :is(#cover-data-pane, #cover-security-pane) :is(
    .cover-account-card-header p,
    .cover-account-row small,
    .cover-account-setting-row small,
    .cover-account-toggle-row small,
    .cover-account-notice
) {
    color: color-mix(in srgb, var(--vmesta-ui-primary) 58%, var(--vmesta-ui-muted) 42%) !important;
}

html:root :is(#cover-data-pane, #cover-security-pane) :is(
    input,
    select,
    .vm-select-trigger,
    .vm-date-trigger,
    .cover-account-password-value,
    .cover-account-notice
) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root #cover-security-pane .cover-account-login-field {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    justify-self: stretch !important;
}

html:root #cover-security-pane .cover-account-login-field > input {
    display: block;
    width: 100% !important;
    min-height: 3rem !important;
    box-sizing: border-box;
    padding: .7rem .9rem !important;
    border: 0 !important;
    border-radius: .72rem !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    caret-color: var(--vmesta-ui-primary) !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
}

html:root #cover-security-pane .cover-account-login-field > input:focus {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 66%, var(--vmesta-ui-primary) 34%) !important;
}

/* ------------[Смена пароля]------------ // Диалог продолжает палитру настроек;
   вторичная кнопка различима без белой обводки. Модуль: «оформление интерфейса». Часть 11/50 */
html:root .cover-security-dialog {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root .cover-security-dialog-header {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
}

html:root .cover-security-dialog :is(h3, .cover-security-dialog-body label) {
    color: var(--vmesta-ui-primary) !important;
}

html:root .cover-security-dialog :is(.cover-security-dialog-header p, .cover-security-dialog-body small) {
    color: color-mix(in srgb, var(--vmesta-ui-primary) 56%, var(--vmesta-ui-muted) 44%) !important;
}

html:root .cover-security-dialog-header > button,
html:root .cover-security-dialog-body input {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root .cover-security-dialog-body input:focus {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 66%, var(--vmesta-ui-primary) 34%) !important;
}

html:root .cover-security-dialog-actions {
    border: 0 !important;
    background: transparent !important;
}

html:root .cover-security-dialog-actions > button:first-child {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root .cover-security-dialog-actions > button:first-child:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 62%, var(--vmesta-ui-primary) 38%) !important;
}

html:root .cover-security-dialog-actions > button:last-child {
    border: 0 !important;
    background: var(--vmesta-ui-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Поиск настроек получает ту же площадку, что компактный поиск в шапке. */
html:root .cover-editor-search {
    color: var(--vmesta-ui-primary) !important;
}

html:root .cover-editor-search > input {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root .cover-editor-search > input:focus {
    background: var(--vmesta-menu-surface) !important;
}

html:root .cover-editor-search > input::placeholder {
    color: var(--vmesta-ui-primary) !important;
    opacity: .78;
}

html:root .cover-editor-search-results {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root .cover-animation-actions > button:first-child {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root .cover-animation-actions > button:first-child:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 62%, var(--vmesta-ui-primary) 38%) !important;
}

/* Нижний ряд создания поста не касается края собственной подложки. */
html:root .profile-post-composer > .flex.items-center.justify-between.mt-2 {
    padding-top: .72rem !important;
    padding-bottom: .78rem !important;
    margin-bottom: .22rem !important;
}

/* ------------[Состояние репоста]------------ // Спутник остаётся спокойным до
   собственного репоста и получает акцент только после успешной публикации. Модуль: «оформление интерфейса». Часть 12/50 */
html:root :is(.post-share-trigger, .viewer-post-share) {
    color: var(--vmesta-ui-muted) !important;
}

html:root :is(.post-share-trigger, .viewer-post-share):not(.is-reposted):not([aria-pressed="true"]):hover {
    color: color-mix(in srgb, var(--vmesta-ui-muted) 72%, var(--vmesta-ui-primary) 28%) !important;
}

html:root :is(.post-share-trigger, .viewer-post-share):is(.is-reposted, [aria-pressed="true"]) {
    color: var(--vmesta-ui-primary) !important;
}

/* ------------[Большой просмотр: белая шапка и тонкое обсуждение]------------ // Оформляет связанный блок интерфейса.
   Авторская строка и заголовок комментариев продолжают поверхность поста,
   а разделение обозначает тонкая линия, как в карточке ленты. Модуль: «оформление интерфейса». Часть 13/50 */
html:root #post-viewer.is-discussion-mode :is(#viewer-post-header, #viewer-comments-block, .viewer-comments-head) {
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

html:not(.dark) #post-viewer.is-discussion-mode :is(#viewer-post-header, #viewer-comments-block, .viewer-comments-head) {
    background: #fff !important;
}

html:root #post-viewer.is-discussion-mode #viewer-post-header {
    border: 0 !important;
}

html:root #post-viewer.is-discussion-mode .viewer-comments-head {
    border: 0 !important;
    background-image: none !important;
}

html:root #post-viewer.is-discussion-mode .viewer-comments-head > .h-px {
    display: block !important;
    height: 1px !important;
    background: color-mix(in srgb, var(--vmesta-ui-muted) 30%, transparent) !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-count {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* ------------[Комментарии и их меню]------------ // Оформляет связанный блок интерфейса.
   Карточки получают заметное скругление, а контекстное меню — отдельную
   спокойную площадку без рамки, тени и ореола вокруг кнопок. Модуль: «оформление интерфейса». Часть 14/50 */
html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-node {
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-ui-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-node > .absolute.-inset-2 {
    display: none !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list button[onclick^="toggleCommentMenu"] {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list button[onclick^="toggleCommentMenu"]:is(:hover, :focus, :focus-visible) {
    background: transparent !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-dropdown {
    border: 0 !important;
    outline: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-menu-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: .28rem !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-dropdown > button {
    border: 0 !important;
    outline: 0 !important;
    border-radius: .65rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-dropdown > button:not(.text-red-500):is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 70%, var(--vmesta-ui-primary) 30%) !important;
}

html:root #post-viewer.is-discussion-mode #viewer-comments-list .comment-dropdown > button.text-red-500:is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 82%, #ef4444 18%) !important;
}

/* ------------[Спутник в ленте: фактическое состояние]------------ // Оформляет связанный блок интерфейса.
   Раннее правило реакций имело ID-специфичность и красило спутник акцентом
   независимо от aria-pressed. Здесь состояние кнопки и её SVG синхронны. Модуль: «оформление интерфейса». Часть 15/50 */
html:root :is(.post-item, #viewer-post-actions) :is(.post-share-trigger, .viewer-post-share):not(.is-reposted):not([aria-pressed="true"]),
html:root :is(.post-item, #viewer-post-actions) :is(.post-share-trigger, .viewer-post-share):not(.is-reposted):not([aria-pressed="true"]) :is(svg, svg *) {
    color: var(--vmesta-ui-muted) !important;
    stroke: currentColor !important;
}

html:root :is(.post-item, #viewer-post-actions) :is(.post-share-trigger, .viewer-post-share):is(.is-reposted, [aria-pressed="true"]),
html:root :is(.post-item, #viewer-post-actions) :is(.post-share-trigger, .viewer-post-share):is(.is-reposted, [aria-pressed="true"]) :is(svg, svg *) {
    color: var(--vmesta-ui-primary) !important;
    stroke: currentColor !important;
}

/* ------------[Пост, раскрытый из фотографии]------------ // Оформляет связанный блок интерфейса.
   Правая колонка повторяет белую карточку ленты: без голубых квадратных
   заливок, с единым скруглением и одной тонкой линией обсуждения. Модуль: «оформление интерфейса». Часть 16/50 */
html:root #media-viewer .media-viewer-post-slot {
    border-radius: 1.2rem !important;
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

html:root #media-viewer .media-viewer-post-slot :is(
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    .viewer-form-shell,
    #viewer-form-container
) {
    background: var(--vmesta-ui-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:not(.dark) #media-viewer .media-viewer-post-slot :is(
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    .viewer-form-shell,
    #viewer-form-container
) {
    background: #fff !important;
}

html:root #media-viewer .media-viewer-post-slot #viewer-sidebar {
    border: 0 !important;
    border-radius: 1.2rem !important;
    overflow: hidden !important;
}

html:root #media-viewer .media-viewer-post-slot :is(#viewer-post-header, #viewer-post-summary, #viewer-comments-block, #viewer-comments-list) {
    border: 0 !important;
}

html:root #media-viewer .media-viewer-post-slot .viewer-comments-head {
    position: relative !important;
    top: auto !important;
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
}

html:not(.dark) #media-viewer .media-viewer-post-slot .viewer-comments-head {
    background: #fff !important;
}

html:root #media-viewer .media-viewer-post-slot .viewer-comments-head::after {
    display: none !important;
}

html:root #media-viewer .media-viewer-post-slot .viewer-comments-head > .h-px {
    display: block !important;
    height: 1px !important;
    background: color-mix(in srgb, var(--vmesta-ui-muted) 30%, transparent) !important;
}

html:root #media-viewer .media-viewer-post-slot #viewer-comments-count {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root #media-viewer .media-viewer-post-slot #viewer-comments-list > .root-wrapper > .comment-node,
html:root #media-viewer .media-viewer-post-slot #viewer-comments-list .replies-group .comment-node {
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-ui-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html:root #media-viewer .media-viewer-post-slot #viewer-comments-list .comment-node > .absolute.-inset-2 {
    display: none !important;
}

html:root #media-viewer .media-viewer-post-slot .viewer-form-shell {
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--vmesta-ui-muted) 30%, transparent) !important;
    border-radius: 0 0 1.2rem 1.2rem !important;
}

html:root #media-viewer .media-viewer-post-slot .comment-form-container {
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

/* Меню комментария в фотопросмотрщике совпадает с большим постом. */
html:root #media-viewer .media-viewer-post-slot button[onclick^="toggleCommentMenu"] {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root #media-viewer .media-viewer-post-slot .comment-dropdown {
    border: 0 !important;
    outline: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-menu-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: .28rem !important;
}

html:root #media-viewer .media-viewer-post-slot .comment-dropdown > button {
    border: 0 !important;
    outline: 0 !important;
    border-radius: .65rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root #media-viewer .media-viewer-post-slot .comment-dropdown > button:not(.text-red-500):is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 70%, var(--vmesta-ui-primary) 30%) !important;
}

html:root #media-viewer .media-viewer-post-slot .comment-dropdown > button.text-red-500:is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 82%, #ef4444 18%) !important;
}

/* ------------[Видимая прокрутка публикации]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 128/203 */
html:root :is(#post-viewer.is-discussion-mode, #media-viewer .media-viewer-post-slot) :is(#viewer-scroll-region, #viewer-comments-list) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vmesta-ui-primary) 58%, var(--vmesta-ui-muted) 42%) var(--vmesta-ui-soft);
}

html:root :is(#post-viewer.is-discussion-mode, #media-viewer .media-viewer-post-slot) :is(#viewer-scroll-region, #viewer-comments-list)::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html:root :is(#post-viewer.is-discussion-mode, #media-viewer .media-viewer-post-slot) :is(#viewer-scroll-region, #viewer-comments-list)::-webkit-scrollbar-track {
    background: var(--vmesta-ui-soft) !important;
    border-radius: 999px;
}

html:root :is(#post-viewer.is-discussion-mode, #media-viewer .media-viewer-post-slot) :is(#viewer-scroll-region, #viewer-comments-list)::-webkit-scrollbar-thumb {
    min-height: 2.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 58%, var(--vmesta-ui-muted) 42%) !important;
}

html:root :is(#post-viewer.is-discussion-mode, #media-viewer .media-viewer-post-slot) :is(#viewer-scroll-region, #viewer-comments-list)::-webkit-scrollbar-thumb:hover {
    background: var(--vmesta-ui-primary) !important;
}

/* ------------[Стрелки фотопросмотрщика]------------ // Оформляет связанный блок интерфейса.
   Рисуем одинаковые шевроны вместо смещённых текстовых символов. Модуль: «оформление интерфейса». Часть 17/50 */
html:root #media-viewer :is(#media-viewer-prev, #media-viewer-next) {
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
}

html:root #media-viewer :is(#media-viewer-prev, #media-viewer-next)::before {
    content: "";
    display: block;
    width: .78rem;
    height: 1.05rem;
    margin: auto;
    background: currentColor !important;
    clip-path: polygon(72% 0, 100% 18%, 38% 50%, 100% 82%, 72% 100%, 0 50%);
}

html:root #media-viewer #media-viewer-next::before {
    transform: rotate(180deg);
}

/* ------------[Значки возле аватаров]------------ // Оформляет связанный блок интерфейса.
   Ранг остаётся пиктограммой без кнопки-квадрата; рядом с глобальной ролью
   сохраняется маленький глобус. Медаль подтверждения не получает подложку. Модуль: «оформление интерфейса». Часть 18/50 */
html:root .profile-avatar-role-badge,
html:root .access-role-marker {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root .profile-avatar-role-badge {
    top: .62rem !important;
    right: -.18rem !important;
    width: 1.62rem !important;
    height: 1.62rem !important;
    border-radius: 0 !important;
}

html:root .profile-avatar-role-badge > svg:first-child {
    width: 1.2rem !important;
    height: 1.2rem !important;
}

html:root :is(.profile-avatar-role-badge, .access-role-marker) > .access-role-scope-icon {
    right: -.3rem !important;
    bottom: -.12rem !important;
    display: grid !important;
    width: .64rem !important;
    height: .64rem !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2563eb !important;
    box-shadow: none !important;
}

html:root :is(.profile-avatar-role-badge, .access-role-marker) > .access-role-scope-icon > svg,
html:root :is(.profile-avatar-role-badge, .access-role-marker) > .access-role-scope-icon > svg * {
    width: .62rem !important;
    height: .62rem !important;
    color: #2563eb !important;
    stroke: #2563eb !important;
}

html:root :is(.profile-avatar-role-badge, .access-role-marker).has-multiple::after {
    display: none !important;
}

html:root .access-role-marker {
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 0 !important;
}

html:root .access-role-marker > svg:first-child {
    width: .86rem !important;
    height: .86rem !important;
}

html:root .space-subscriber-thumb > .access-role-marker {
    top: -.12rem !important;
    left: -.12rem !important;
}

html:root .space-team-person-avatar > .access-role-marker {
    top: -.12rem !important;
    right: -.12rem !important;
}

html:root .profile-avatar-verification-badge {
    right: -.15rem !important;
    width: 1.4rem !important;
    height: 1.4rem !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #3b82f6 !important;
    box-shadow: none !important;
}

html:root .profile-avatar-verification-badge.is-below-role {
    top: 2.42rem !important;
}

html:root .profile-avatar-verification-badge::before {
    width: 1.32rem !important;
    height: 1.32rem !important;
    background: #3b82f6 !important;
}

html.dark .profile-avatar-verification-badge {
    background: transparent !important;
}

/* ------------[Фиксированные цвета рангов]------------ // Оформляет связанный блок интерфейса.
   Эти служебные цвета не наследуют выбранную тему: основатель и создатель
   всегда красные, администраторы золотые, модераторы голубые. Модуль: «оформление интерфейса». Часть 19/50 */
html:root :is(
    .profile-avatar-role-badge,
    .access-role-marker,
    .project-rank-badge,
    .settings-profile-rank-btn,
    .space-about-card.is-access-rank,
    .space-about-identity-item.is-rank,
    .access-role-popover-row
):is(.role-captain, .role-creator) {
    --fixed-access-role-color: #ef4444;
}

html:root :is(
    .profile-avatar-role-badge,
    .access-role-marker,
    .project-rank-badge,
    .settings-profile-rank-btn,
    .space-about-card.is-access-rank,
    .space-about-identity-item.is-rank,
    .access-role-popover-row
):is(.role-admin, .role-administrator) {
    --fixed-access-role-color: #d49312;
}

html:root :is(
    .profile-avatar-role-badge,
    .access-role-marker,
    .project-rank-badge,
    .settings-profile-rank-btn,
    .space-about-card.is-access-rank,
    .space-about-identity-item.is-rank,
    .access-role-popover-row
):is(.role-moderator) {
    --fixed-access-role-color: #0ea5e9;
}

html:root :is(.profile-avatar-role-badge, .access-role-marker):is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) > svg:first-child,
html:root .project-rank-badge:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .project-rank-icon-wrap > svg:first-child,
html:root .settings-profile-rank-btn:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .settings-profile-rank-icon > svg:first-child,
html:root .space-about-card.is-access-rank:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) > span > svg:first-child,
html:root .access-role-popover-row:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .access-role-popover-icon > svg:first-child {
    color: var(--fixed-access-role-color) !important;
    stroke: var(--fixed-access-role-color) !important;
}

html:root :is(.profile-avatar-role-badge, .access-role-marker):is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) > svg:first-child *,
html:root .project-rank-badge:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .project-rank-icon-wrap > svg:first-child *,
html:root .settings-profile-rank-btn:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .settings-profile-rank-icon > svg:first-child *,
html:root .space-about-card.is-access-rank:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) > span > svg:first-child *,
html:root .access-role-popover-row:is(.role-captain, .role-creator, .role-admin, .role-administrator, .role-moderator) .access-role-popover-icon > svg:first-child * {
    color: var(--fixed-access-role-color) !important;
    stroke: var(--fixed-access-role-color) !important;
}

/* ------------[Ранги доступа в управляющем окне]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 132/203 */
html:root .project-access-role.role-admin {
    --fixed-access-role-color: #d49312;
}

html:root .project-access-role.role-moderator {
    --fixed-access-role-color: #0ea5e9;
}

html:root .project-access-role {
    border: 0 !important;
    outline: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root .project-access-role:is(:hover, :focus, :focus-visible) {
    background: var(--vmesta-menu-surface) !important;
}

html:root .project-access-role:is(.role-admin, .role-moderator) .project-role-icon,
html:root .project-access-role:is(.role-admin, .role-moderator) .project-role-icon :is(svg, svg *) {
    color: var(--fixed-access-role-color) !important;
    stroke: var(--fixed-access-role-color) !important;
}

/* ------------[Единый компактный скролл]------------ // Оформляет связанный блок интерфейса.
   Узкий ползунок используется во всём интерфейсе; системные кнопки сверху
   и снизу скрыты, чтобы скролл не выглядел отдельной крупной панелью. Модуль: «оформление интерфейса». Часть 20/50 */
html:root * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vmesta-ui-primary) 55%, var(--vmesta-ui-muted) 45%) transparent;
}

html:root *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html:root *::-webkit-scrollbar-track {
    background: transparent !important;
}

html:root *::-webkit-scrollbar-thumb {
    min-height: 1.8rem;
    border: 0 !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 55%, var(--vmesta-ui-muted) 45%) !important;
}

html:root *::-webkit-scrollbar-thumb:hover {
    background: var(--vmesta-ui-primary) !important;
}

html:root *::-webkit-scrollbar-button,
html:root *::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* В фотопросмотрщике прокручивается только общая колонка. Выпадающее меню
   комментария больше не создаёт на мгновение второй ползунок. */
html:root #media-viewer .media-viewer-post-slot #viewer-scroll-region {
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
}

html:root #media-viewer .media-viewer-post-slot #viewer-comments-list {
    overflow-y: visible !important;
    scrollbar-gutter: auto;
}

/* ------------[Положение служебных значков на аватарах]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 134/203 */
html:root :is(#profile-avatar-card, .space-subscriber-thumb, .space-team-person-avatar, .post-author-avatar) {
    overflow: visible !important;
}

html:root .profile-avatar-role-badge {
    right: -.28rem !important;
}

html:root .profile-avatar-verification-badge {
    right: -.19rem !important;
}

html:root .space-subscriber-thumb > .access-role-marker {
    top: -.24rem !important;
    left: -.24rem !important;
    z-index: 60 !important;
}

html:root .space-team-person-avatar > .access-role-marker {
    top: -.24rem !important;
    right: -.24rem !important;
    z-index: 60 !important;
}

html:root :is(.space-subscriber-thumb, .space-team-person-avatar) > .access-role-marker > svg:first-child {
    width: .94rem !important;
    height: .94rem !important;
    stroke-width: 2.65 !important;
}

/* ------------[О пространстве: панели вместо обводок]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 135/203 */
html:root body #space-about-panel {
    border: 0 !important;
    outline: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body #space-about-panel :is(
    .space-about-card,
    .space-about-longform,
    .space-about-contact-section,
    .profile-spaces-section,
    .space-external-links,
    .profile-space-card
) {
    border: 0 !important;
    outline: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body #space-about-panel .space-about-quote {
    border: 0 !important;
    outline: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body #space-about-panel :is(
    .space-about-edit-button,
    .space-about-close,
    .space-about-description-emoji,
    .space-verification-action,
    input,
    textarea,
    select,
    button
) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html:root body #space-about-panel :is(input, textarea, select) {
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
}

html:root body #space-about-panel :is(.space-about-edit-button, .space-about-description-emoji) {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body #space-about-panel .verification-mark.is-verified {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ------------[Форма публикации пространства]------------ // Мягкие углы в обычном режиме без обрезания выпадающих панелей. Модуль: «оформление интерфейса». Часть 136/203 */
html:root body .space-composer:not(.is-editing) {
    isolation: isolate;
    border: 0 !important;
    border-radius: 1rem !important;
    background: var(--vmesta-ui-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body .space-composer:not(.is-editing) > .publication-editor-text-shell,
html:root body .space-composer:not(.is-editing) .space-composer-text {
    border: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    background: var(--vmesta-ui-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body .space-composer:not(.is-editing) .space-composer-actions {
    border: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: var(--vmesta-ui-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Цифры занимают стабильную ширину и не сдвигают шапку при обновлении XP. */
html:root #top-display-level,
html:root #top-display-xp {
    font-variant-numeric: tabular-nums;
}

html:root #top-display-level { min-width: 5.4rem; }
html:root #top-display-xp { min-width: 3.5rem; text-align: right; }

/* ------------[Редактор «О пространстве»]------------ // Поля продолжают цвет
   карточек, а разворачивание текста использует ту же кнопку, что публикации. Модуль: «оформление интерфейса». Часть 21/50 */
html:root body #space-about-panel .space-about-body.is-editing :is(
    .space-about-card,
    .space-about-quote,
    .space-about-longform
) {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body #space-about-panel .space-about-body.is-editing :is(input, textarea) {
    border: 0 !important;
    border-radius: .72rem !important;
    background: var(--vmesta-menu-surface) !important;
    background-image: none !important;
    color: var(--vmesta-ui-ink) !important;
    caret-color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body #space-about-panel .space-about-body.is-editing textarea {
    resize: none !important;
    padding-right: 2.75rem !important;
    transition: min-height .2s ease !important;
}

html:root body #space-about-panel .space-about-resize-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

html:root body #space-about-panel .space-about-resize-field.is-expanded textarea {
    min-height: 12rem !important;
}

html:root body #space-about-panel .space-about-longform > header {
    position: relative;
    padding-right: 2.35rem;
}

html:root body #space-about-panel .space-about-longform.is-expanded textarea {
    min-height: 19rem !important;
}

html:root body #space-about-panel .space-about-expand-toggle {
    top: .34rem;
    right: .34rem;
    bottom: auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle {
    top: -.18rem;
    right: 0;
}

html:root body #space-about-panel .space-about-expand-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 72%, var(--vmesta-ui-primary) 28%) !important;
}

/* ------------[Календарь и выпадающие списки]------------ // Портальные окна
   сохраняют палитру страницы и не раскрываются белыми листами. Модуль: «оформление интерфейса». Часть 22/50 */
html:root body #vm-date-portal.vm-date-popover,
html:root body #vm-select-portal.vm-select-menu {
    --vm-control-accent: var(--vmesta-ui-primary) !important;
    --vm-control-bg: var(--vmesta-ui-soft) !important;
    --vm-control-panel: var(--vmesta-menu-surface) !important;
    --vm-control-text: var(--vmesta-ui-ink) !important;
    --vm-control-muted: var(--vmesta-ui-muted) !important;
    --vm-control-line: transparent !important;
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    background-color: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #vm-date-portal :is(.vm-select-trigger, header > button, footer > button) {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #vm-date-portal :is(header > button, footer > button):hover,
html:root body #vm-date-portal .vm-select-trigger:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 70%, var(--vmesta-ui-primary) 30%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body #vm-date-portal .vm-date-grid > button:is(:hover, .is-today) {
    border-color: transparent !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #vm-date-portal .vm-date-grid > button.is-selected {
    border: 0 !important;
    background: var(--vmesta-ui-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

html:root body #vm-date-portal > footer { border: 0 !important; }

/* ------------[Управление глобальными ролями]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 139/203 */
html:root body .project-access-panel {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .project-access-panel > header { border: 0 !important; }

html:root body .project-access-panel .project-access-role {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .project-access-panel .project-access-role:is(:hover, :focus-visible) {
    background: var(--vmesta-menu-surface) !important;
}

html:root body .project-access-back svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html:root body .project-command-field input {
    min-height: 2.75rem;
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    caret-color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .project-command-field input::placeholder {
    color: var(--vmesta-ui-muted) !important;
    opacity: .75;
}

html:root body .project-command-actions > button {
    min-height: 2.65rem;
    border: 0 !important;
    box-shadow: none !important;
}

html:root body .project-command-actions .project-access-secondary {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .project-command-actions .project-access-primary {
    background: var(--vmesta-ui-primary) !important;
    color: #fff !important;
}

/* ------------[Мои жалобы]------------ // Статусы остаются цветными, но
   поверхности больше не выпадают из общей темы серо-бежевыми прямоугольниками. Модуль: «оформление интерфейса». Часть 23/50 */
html:root body .my-reports-dialog {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body :is(.my-reports-head, .my-reports-statuses) { border: 0 !important; }

html:root body .my-reports-statuses button {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-muted) !important;
    box-shadow: none !important;
}

html:root body .my-reports-statuses button.is-active {
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .my-report-card {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .my-report-result {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .my-report-result > button {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

/* ------------[Значки доступа и верификация]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 141/203 */
html:root body .access-icon-settings-modal > section {
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .access-icon-settings-modal > section > header { border: 0 !important; }

html:root body .access-icon-settings-body > div {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .access-icon-settings-symbol {
    background: var(--vmesta-menu-surface) !important;
}

html:root body :is(.access-icon-settings-close, .verification-center-close) {
    border: 0 !important;
    border-radius: .65rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body :is(.access-icon-settings-close, .verification-center-close):hover {
    background: var(--vmesta-menu-surface) !important;
}

/* ------------[Верхнее меню пространств]------------ // Разделяет выпадающую
   панель, отдельное пространство и действия без рамки вокруг нижней кнопки. Модуль: «оформление интерфейса». Часть 24/50 */
html:root body #top-spaces-dropdown {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #top-spaces-dropdown > :is(div:first-child, div:last-child) {
    border: 0 !important;
    background: transparent !important;
}

html:root body #top-spaces-dropdown .space-menu-row {
    overflow: hidden;
    border: 0 !important;
    border-radius: .85rem;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #top-spaces-dropdown .space-menu-row:is(:hover, :focus-within) {
    background: var(--vmesta-menu-surface) !important;
}

html:root body #top-spaces-dropdown :is(.space-menu-item, .space-menu-manage) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root body #top-spaces-dropdown :is(.space-menu-create, .top-spaces-open-button) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body #top-spaces-dropdown :is(.space-menu-create, .top-spaces-open-button):hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 72%, var(--vmesta-ui-primary) 28%) !important;
}

/* ------------[Панель управления пространством]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 143/203 */
html:root body .space-manage-panel {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .space-manage-panel > header {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body .space-manage-body { background: transparent !important; }

html:root body .space-manage-panel :is(.space-role-visibility, .space-team-section) {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .space-manage-panel .space-role-visibility-options > button {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--vmesta-ui-primary) 22%) !important;
    color: var(--vmesta-ui-muted) !important;
    box-shadow: none !important;
}

html:root body .space-manage-panel .space-role-visibility-options > button.is-active {
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .space-manage-panel .space-team-person {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

/* ------------[Центр событий]------------ // Не сливается ни с белой шапкой,
   ни с голубым фоном страницы; меню настроек является его вторым слоем. Модуль: «оформление интерфейса». Часть 25/50 */
html:root body #notifications-dropdown.notifications-dropdown-v2 {
    --notice-bg: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%);
    --notice-soft: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%);
    --notice-border: transparent;
    border: 0 !important;
    background: var(--notice-bg) !important;
    box-shadow: none !important;
}

html:root body #notifications-dropdown :is(.notifications-dropdown-tabs, .notifications-dropdown-footer) {
    border: 0 !important;
    background: var(--notice-soft) !important;
}

html:root body #notifications-dropdown .notification-settings-menu {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #notifications-dropdown .notification-settings-menu > button {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #notifications-dropdown .notification-settings-menu > button:hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 72%, var(--vmesta-ui-primary) 28%) !important;
}

html:root body #notifications-dropdown .notification-settings-menu > button.is-danger {
    background: color-mix(in srgb, #e5484d 12%, var(--vmesta-ui-panel)) !important;
}

html:root body #notifications-dropdown :is(.notification-broom-button, .notification-history-open) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #notifications-dropdown .notification-broom-button {
    color: #e5484d !important;
}

/* ------------[Поиск друзей]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 145/203 */
html:root body :is(.friends-search-filters, .friends-own-filter-panel) {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body :is(.friends-search-filters, .friends-own-filter-panel) :is(input, select, .vm-select-trigger, .vm-date-trigger) {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .friends-filter-reset,
html:root body .friends-own-filter-panel > div > button:first-child {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body :is(.friends-filter-reset, .friends-own-filter-panel > div > button:first-child):hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 70%, var(--vmesta-ui-primary) 30%) !important;
}

/* ------------[Создание пространства]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 146/203 */
html:root body .space-create-modal {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--vmesta-ui-primary) 12%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .space-create-modal .space-create-hero {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .space-create-modal .space-create-field input {
    min-height: 3.05rem;
    border: 0 !important;
    border-radius: .82rem !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    caret-color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .space-create-modal .space-create-field input::placeholder {
    color: var(--vmesta-ui-muted) !important;
    opacity: .8;
}

html:root body .space-create-modal .space-create-field > small:not(.login-availability) {
    color: var(--vmesta-ui-muted);
    font-size: .54rem;
    font-weight: 700;
}

/* ------------[О себе: реальные элементы управления]------------ //
   Системные селекты и календарь заменяются кнопками, поэтому красим их тоже. Модуль: «оформление интерфейса». Часть 26/50 */
html:root body #about-modal :is(.vm-select-trigger, .vm-date-trigger) {
    width: 100% !important;
    min-width: 0;
    border: 0 !important;
    border-radius: .72rem !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #about-modal :is(.vm-select-trigger, .vm-date-trigger):is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 70%, var(--vmesta-ui-primary) 30%) !important;
}

html:root body #relationship-card > .mt-2 > .min-w-0 {
    min-width: 11rem !important;
}

html:root body #relationship-edit-meta,
html:root body #edit-partner-wrap,
html:root body .relationship-partner-summary {
    width: 100%;
    max-width: none !important;
    min-width: 0;
}

html:root body .relationship-partner-link {
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal !important;
}

html:root body #edit-partner-login {
    min-height: 2.35rem;
    padding-inline: .62rem !important;
    text-overflow: clip;
}

@media (max-width: 520px) {
    html:root body #relationship-card > .mt-2 {
        align-items: stretch !important;
        flex-direction: column;
    }

    html:root body #relationship-visual { align-self: flex-end; }
}

/* ------------[Редактор пространства: внутренние отступы]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 148/203 */
html:root body #space-about-panel .space-about-body.is-editing :is(input, textarea) {
    padding-left: .82rem !important;
    padding-right: .82rem !important;
}

html:root body #space-about-panel .space-about-body.is-editing textarea {
    padding-top: .76rem !important;
    padding-bottom: .76rem !important;
    padding-right: 2.9rem !important;
}

html:root body #space-about-panel .space-about-longform {
    position: relative;
}

html:root body #space-about-panel .space-about-details-emoji {
    right: 1.48rem;
    bottom: 1.35rem;
    z-index: 3;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Карточка подтверждения в режиме редактирования остаётся двухколоночной:
   текст и действие слева, медаль справа. Кнопка больше не уходит под срез. */
html:root body #space-about-panel .space-about-body.is-editing .space-verification-card {
    display: grid !important;
    min-height: 8.6rem !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    justify-content: stretch !important;
    overflow: visible !important;
    padding: 1rem 1.1rem !important;
}

html:root body #space-about-panel .space-about-body.is-editing .space-verification-copy {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
}

html:root body #space-about-panel .space-about-body.is-editing .space-verification-action {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    min-height: 2rem;
    margin: .58rem 0 0 !important;
    padding: .42rem .72rem !important;
    white-space: normal;
}

/* ------------[Единая панель смайликов]------------ // Поиск, категории и
   сетка находятся внутри одной поверхности без вложенного белого овала. Модуль: «оформление интерфейса». Часть 27/50 */
html:root body .emoji-picker-expanded {
    height: min(21rem, calc(100vh - 1.5rem)) !important;
    padding: .62rem !important;
}

html:root body .emoji-picker-expanded .emoji-picker-emoji-view {
    overflow: hidden;
    border-radius: .82rem;
    background: var(--vmesta-ui-panel) !important;
    padding: .48rem;
}

html:root body .emoji-picker-expanded .emoji-picker-search-wrap {
    height: 2.35rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: .62rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .emoji-picker-expanded .emoji-picker-search {
    border: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .emoji-picker-expanded .emoji-picker-tabs {
    margin-top: .38rem;
    margin-bottom: .28rem;
}

html:root body .emoji-picker-expanded .emoji-picker-grid {
    height: 12.35rem !important;
    min-height: 12.35rem !important;
    max-height: 12.35rem !important;
    border-radius: .62rem;
    background: transparent !important;
    padding: .24rem !important;
}

/* ------------[Нумерация витрины достижений]------------ // Общий редактор
   обслуживает профиль и пространство, поэтому номера работают в обоих. Модуль: «оформление интерфейса». Часть 28/50 */
.achievement-selection-slots {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .42rem;
    margin-bottom: .8rem;
}

.achievement-selection-slots > span {
    display: grid;
    min-width: 0;
    min-height: 2.45rem;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: center;
    gap: .38rem;
    border-radius: .68rem;
    background: var(--achievement-surface-soft);
    color: var(--achievement-muted);
    padding: .36rem .42rem;
}

.achievement-selection-slots b {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: .48rem;
    background: color-mix(in srgb, var(--achievement-muted) 12%, transparent);
    font-size: .62rem;
}

.achievement-selection-slots small {
    overflow: hidden;
    font-size: .46rem;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-selection-slots > span.is-filled {
    background: color-mix(in srgb, var(--achievement-surface) 64%, var(--vmesta-ui-primary) 36%);
    color: var(--vmesta-ui-primary);
}

.achievement-selection-slots > span.is-filled b {
    background: var(--vmesta-ui-primary);
    color: #fff;
}

.achievement-badge.is-selected {
    background: color-mix(in srgb, var(--achievement-surface) 58%, currentColor 42%) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.achievement-row:has(.achievement-badge.is-selected) {
    background: color-mix(in srgb, var(--achievement-surface-soft) 72%, var(--vmesta-ui-primary) 28%) !important;
}

.achievement-selection-slot {
    position: absolute;
    top: -.34rem;
    left: -.34rem;
    z-index: 3;
    display: grid;
    width: 1.42rem;
    height: 1.42rem;
    place-items: center;
    border-radius: .48rem;
    background: var(--vmesta-ui-primary);
    color: #fff;
    font-size: .62rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

@media (max-width: 720px) {
    .achievement-selection-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------[Финальная настройка поверхностей управления и поиска]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 151/203 */
html:root body .space-manage-panel {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 96%, var(--vmesta-ui-primary) 4%) !important;
}

html:root body .space-manage-panel > header,
html:root body .space-manage-panel .space-role-visibility {
    background: var(--vmesta-menu-surface) !important;
}

html:root body .space-manage-panel .space-role-visibility-options > button {
    background: var(--vmesta-ui-soft) !important;
}

html:root body .space-manage-panel .space-role-visibility-options > button.is-active {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 65%, var(--vmesta-ui-primary) 35%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .space-manage-panel .space-team-section {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--space-team-role, var(--vmesta-ui-primary)) 12%) !important;
}

html:root body .space-manage-panel .space-team-person {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 78%, var(--space-team-role, var(--vmesta-ui-primary)) 22%) !important;
}

/* Фирменные селекты рендерятся в body. Портал должен быть выше полноэкранного поиска. */
html:root body :is(#vm-select-portal, #vm-date-portal) {
    z-index: 36050 !important;
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #vm-select-portal .vm-select-option:hover:not(:disabled),
html:root body #vm-select-portal .vm-select-option.is-selected {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 66%, var(--vmesta-ui-primary) 34%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .global-search-close {
    border: 0 !important;
    background: color-mix(in srgb, var(--global-search-bg) 82%, var(--vmesta-ui-primary) 18%) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .global-search-close:hover {
    background: color-mix(in srgb, var(--global-search-bg) 62%, var(--vmesta-ui-primary) 38%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body #search-dropdown {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 90%, var(--vmesta-ui-primary) 10%) !important;
    box-shadow: none !important;
}

html:root body #search-dropdown .search-result-item,
html:root body #search-dropdown #search-spaces-results > div {
    background: var(--vmesta-ui-soft) !important;
}

html:root body #search-dropdown :is(.search-result-item, #search-spaces-results > div):hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 64%, var(--vmesta-ui-primary) 36%) !important;
    color: var(--vmesta-ui-ink) !important;
    transform: none !important;
}

/* ------------[Поля и личная жизнь профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 152/203 */
html:root body #relationship-card > .mt-2 {
    display: grid !important;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    overflow: hidden;
}

html:root body #relationship-card > .mt-2 > .min-w-0 { min-width: 0 !important; }
html:root body #relationship-visual { max-width: 5.25rem; overflow: hidden; }
html:root body #relationship-avatar-pair { max-width: 100%; gap: .28rem !important; }
html:root body #relationship-avatar-pair :is(img, .avatar-placeholder) { width: 2rem !important; height: 2rem !important; }

html:root body #about-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html:root body #about-modal textarea,
html:root body #about-modal :is(.vm-select-trigger, .vm-date-trigger),
html:root body #about-modal :is(.profile-personal-life-row, .profile-work-row) > p,
html:root body #about-modal .relationship-partner-link {
    padding-left: .68rem !important;
    padding-right: .68rem !important;
}

/* ------------[Фотографии профиля и витрина]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 153/203 */
html:root body #tab-photos > div {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 94%, var(--vmesta-ui-primary) 6%) !important;
}

html:root body #tab-photos > div > .mb-6,
html:root body #side-photos > div > .mb-5,
html:root body .space-profile-media-head,
html:root body .space-profile-showcase-card > header {
    transform: translateY(-.42rem);
}

html:root body #photos-list-container {
    min-height: 19rem;
    align-content: start;
}

html:root body #photos-list-container:has(.profile-photos-empty) {
    align-content: stretch;
}

html:root body .profile-photos-empty,
html:root body .profile-albums-loading {
    min-height: 18rem;
    border-radius: .9rem;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-muted) !important;
}

html:root body .profile-albums-loading {
    display: grid;
    place-items: center;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html:root body #upload-photo-btn,
html:root body #create-album-btn {
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #upload-photo-btn:hover,
html:root body #create-album-btn:hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 68%, var(--vmesta-ui-primary) 32%) !important;
}

/* Карандаш кадрирования в пространстве использует ту же нижнюю панель, что и профиль. */
html:root body .space-profile-showcase-card .avatar-showcase-actions {
    opacity: 0;
    transform: translateY(.2rem);
    transition: opacity .16s ease, transform .16s ease;
}

html:root body .space-profile-showcase-card .avatar-showcase-item:is(:hover, :focus-within) .avatar-showcase-actions {
    opacity: 1;
    transform: translateY(0);
}

/* ------------[Форма жалобы: цельная голубая поверхность]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 154/203 */
html:root body .content-report-dialog {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 91%, var(--vmesta-ui-primary) 9%) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body .content-report-dialog > header,
html:root body .content-report-dialog > footer {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 82%, var(--vmesta-ui-primary) 18%) !important;
}

html:root body .content-report-emblem {
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .content-report-close {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0 !important;
    border-radius: .68rem !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .content-report-close:hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 65%, var(--vmesta-ui-primary) 35%) !important;
}

html:root body .content-report-close svg,
html:root body :is(.content-report-details-expand, .content-report-details-emoji) svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html:root body .content-report-body { padding: 1rem 1.2rem 1.15rem; }

html:root body .content-report-reasons button {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-muted) !important;
    box-shadow: none !important;
}

html:root body .content-report-reasons button:is(:hover, .is-active) {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 64%, var(--vmesta-ui-primary) 36%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .content-report-details-label { position: relative; display: grid; gap: .45rem; }
html:root body .content-report-details-label > span:first-child { font-size: .68rem; font-weight: 900; }
html:root body .content-report-details-label > span:first-child i { color: var(--vmesta-ui-muted); font-size: .58rem; font-style: normal; font-weight: 650; }
html:root body .content-report-details-field { position: relative; display: block; }

html:root body #content-report-details {
    width: 100%;
    min-height: 7rem;
    padding: .82rem 3.15rem .82rem .86rem !important;
    resize: none !important;
    border: 0 !important;
    background: var(--vmesta-menu-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    caret-color: var(--vmesta-ui-primary);
    box-shadow: none !important;
    transition: min-height .2s ease, background-color .16s ease;
}

html:root body .content-report-details-field.is-expanded #content-report-details { min-height: 15rem; }

html:root body :is(.content-report-details-expand, .content-report-details-emoji) {
    position: absolute;
    right: .62rem;
    z-index: 2;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0 !important;
    border-radius: .58rem;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .content-report-details-expand { top: .58rem; }
html:root body .content-report-details-emoji { bottom: .58rem; }
html:root body .content-report-details-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

html:root body :is(.content-report-details-expand, .content-report-details-emoji):hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 64%, var(--vmesta-ui-primary) 36%) !important;
}

html:root body .content-report-cancel {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
}

html:root body .content-report-cancel:hover {
    background: color-mix(in srgb, var(--vmesta-menu-surface) 64%, var(--vmesta-ui-primary) 36%) !important;
}

html:root body #content-report-submit { border: 0 !important; box-shadow: none !important; }

/* ------------[Сообщения: единые голубые меню и редактор]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 155/203 */
#messages-root,
#messages-side-root,
.messenger-new-modal {
    --msg-menu-surface: color-mix(in srgb, var(--msg-panel, var(--vmesta-ui-panel)) 76%, var(--msg-accent, var(--vmesta-ui-primary)) 24%);
    --msg-menu-soft: color-mix(in srgb, var(--msg-panel, var(--vmesta-ui-panel)) 86%, var(--msg-accent, var(--vmesta-ui-primary)) 14%);
    --msg-menu-active: color-mix(in srgb, var(--msg-panel, var(--vmesta-ui-panel)) 62%, var(--msg-accent, var(--vmesta-ui-primary)) 38%);
}

html:root body :is(
    .messenger-chat-menu,
    .messenger-media-settings,
    .messenger-attach-menu,
    .messenger-pinned-panel,
    .messenger-day-calendar,
    .messenger-reaction-panel,
    .messenger-message-menu,
    .messenger-reaction-picker,
    .messenger-blank-context-menu,
    .messenger-room-member-picker-popover,
    .messenger-room-member-actions-menu
) {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body :is(
    .messenger-new-modal,
    .messenger-forward-modal,
    .messenger-attachments-modal,
    .messenger-room-settings-modal,
    .messenger-poll-modal
) > section {
    border: 0 !important;
    background: var(--msg-menu-surface, color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%)) !important;
    box-shadow: none !important;
}

html:root body :is(
    .messenger-chat-menu,
    .messenger-message-menu,
    .messenger-attach-menu,
    .messenger-blank-context-menu,
    .messenger-room-member-actions-menu
) button:not(.is-danger):hover,
html:root body :is(.messenger-reaction-quick, .messenger-reaction-picker nav) > button:is(:hover, .is-active) {
    background: var(--msg-menu-active) !important;
    color: var(--msg-accent) !important;
}

/* Красные действия остаются красными и не наследуют новый голубой hover. */
html:root body :is(.messenger-chat-menu, .messenger-message-menu, .messenger-room-member-actions-menu) button.is-danger {
    color: #ef4444 !important;
}

html:root body :is(.messenger-chat-menu, .messenger-message-menu, .messenger-room-member-actions-menu) button.is-danger:hover {
    background: color-mix(in srgb, #ef4444 13%, var(--msg-panel)) !important;
    color: #ef4444 !important;
}

html:root body .messenger-chat-search {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-chat-search input,
html:root body .messenger-chat-search > button,
html:root body .messenger-search,
html:root body .messenger-forward-search,
html:root body .messenger-reaction-picker > label {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-day-button {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html:root body .messenger-composer {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-composer textarea {
    min-height: 2.55rem;
    padding: .68rem .7rem !important;
    border-radius: .72rem;
    background: color-mix(in srgb, var(--msg-panel) 83%, var(--msg-accent) 17%) !important;
}

/* ------------[Входящие пространства и выбор отправителя]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 156/203 */
.messenger-space-inbox-group { display: grid; gap: .34rem; margin: .35rem 0 .7rem; }
.messenger-space-inbox-group > header { display: flex; align-items: center; justify-content: space-between; gap: .48rem; padding: .28rem .55rem; color: var(--msg-muted); font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.messenger-space-inbox-group > header > span { display: flex; align-items: center; gap: .42rem; min-width: 0; }
.messenger-space-inbox-group > header .messenger-avatar { width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; border-radius: .45rem; }
.messenger-space-inbox-group > div > .messenger-chat-row { margin-left: .65rem; }
.messenger-composer:has(.messenger-sender-identity) { grid-template-columns: auto auto minmax(0,1fr) auto auto auto; }
.messenger-sender-identity { position: relative; flex: 0 0 auto; }
.messenger-sender-identity-trigger { position: relative; display: grid; width: 2.55rem; min-width: 2.55rem; height: 2.55rem; place-items: center; border: 0; border-radius: .78rem; padding: .25rem; background: color-mix(in srgb,var(--msg-panel) 70%,var(--msg-accent) 30%); color: var(--msg-text); cursor: pointer; }
.messenger-sender-identity-trigger:hover,.messenger-sender-identity.is-open .messenger-sender-identity-trigger { background: color-mix(in srgb,var(--msg-panel) 56%,var(--msg-accent) 44%); }
.messenger-sender-identity-trigger .messenger-avatar { width: 1.95rem; height: 1.95rem; flex: 0 0 1.95rem; }
.messenger-sender-identity-trigger > .messenger-icon { position: absolute; right: .02rem; bottom: .02rem; display: grid; width: .86rem; height: .86rem; place-items: center; border-radius: 999px; background: var(--msg-panel); color: var(--msg-accent); box-shadow: 0 0 0 2px var(--msg-menu-soft); }
.messenger-sender-identity-trigger > .messenger-icon svg { width: .62rem; height: .62rem; }
.messenger-sender-identity-menu { position: absolute; z-index: 240; left: 0; bottom: calc(100% + .6rem); display: grid; width: min(20rem, calc(100vw - 2rem)); overflow: hidden; border: 0; border-radius: 1rem; padding: .45rem; background: color-mix(in srgb,var(--msg-panel) 84%,var(--msg-accent) 16%); box-shadow: 0 1.25rem 3.4rem rgb(2 6 23 / .34),0 .15rem .8rem rgb(2 6 23 / .14); }
html.dark .messenger-sender-identity-menu { background: color-mix(in srgb,var(--msg-panel) 88%,white 12%); box-shadow: 0 1.35rem 3.8rem rgb(0 0 0 / .58); }
.messenger-sender-identity-menu > header { display: flex; flex-direction: column; gap: .1rem; padding: .58rem .68rem .52rem; }
.messenger-sender-identity-menu > header strong { font-size: .7rem; }
.messenger-sender-identity-menu > header small { color: var(--msg-muted); font-size: .58rem; }
.messenger-sender-identity-list { display: grid; max-height: 16rem; gap: .2rem; overflow-x: hidden; overflow-y: auto; padding: .12rem .18rem .18rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--msg-accent) 58%,transparent) transparent; }
.messenger-sender-identity-list::-webkit-scrollbar { width: .35rem; }
.messenger-sender-identity-list::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb,var(--msg-accent) 58%,transparent); }
.messenger-sender-identity-list > button { display: grid; min-height: 3rem; grid-template-columns: 2.15rem minmax(0,1fr) 1.15rem; align-items: center; gap: .68rem; border: 0; border-radius: .76rem; padding: .5rem .62rem; background: transparent; color: var(--msg-text); text-align: left; cursor: pointer; }
.messenger-sender-identity-list > button:hover { background: color-mix(in srgb,var(--msg-panel) 64%,var(--msg-accent) 36%); }
.messenger-sender-identity-list > button.is-active { background: color-mix(in srgb,var(--msg-panel) 52%,var(--msg-accent) 48%); }
html.dark .messenger-sender-identity-list > button:hover { background: color-mix(in srgb,var(--msg-panel) 84%,white 16%); }
html.dark .messenger-sender-identity-list > button.is-active { background: color-mix(in srgb,var(--msg-panel) 68%,var(--msg-accent) 32%); }
.messenger-sender-identity-list > button > .messenger-avatar { width: 2.15rem; height: 2.15rem; }
.messenger-sender-identity-list > button > span { display: flex; min-width: 0; flex-direction: column; gap: .08rem; }
.messenger-sender-identity-list > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.messenger-sender-identity-list > button small { overflow: hidden; color: var(--msg-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .56rem; }
.messenger-sender-identity-list > button > i { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; color: var(--msg-accent); font-style: normal; }
.messenger-sender-identity-list > button > i .messenger-icon,.messenger-sender-identity-list > button > i svg { width: .9rem; height: .9rem; }
.messenger-sender-identity .messenger-avatar:is(.is-identity-space,.is-identity-room) .online-dot { display: none; }

/* ------------[Компактное подтверждение удаления]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 157/203 */
html:root body #messenger-delete-confirm > section { width: min(21rem, calc(100vw - 2rem)); padding: 1.05rem; }
html:root body #messenger-delete-confirm .messenger-confirm-icon { width: 2.35rem; height: 2.35rem; margin-bottom: .55rem; border-radius: 999px; }
html:root body #messenger-delete-confirm p { max-width: 18rem; font-size: .67rem; }
html:root body #messenger-delete-confirm .messenger-delete-scope { display: flex; gap: .2rem; margin-top: .82rem; border-radius: .82rem; padding: .22rem; background: var(--msg-bg); }
html:root body #messenger-delete-confirm .messenger-delete-scope > button { display: flex; min-height: 2.35rem; flex: 1 1 0; grid-template-columns: none; justify-content: center; gap: .42rem; border-radius: .64rem; padding: .45rem .55rem; background: transparent; text-align: center; transform: none; box-shadow: none; }
html:root body #messenger-delete-confirm .messenger-delete-scope > button > i { width: .88rem; height: .88rem; flex: 0 0 .88rem; border-width: 1.5px; background: transparent; box-shadow: none; }
html:root body #messenger-delete-confirm .messenger-delete-scope > button > i::after { inset: .19rem; }
html:root body #messenger-delete-confirm .messenger-delete-scope > button.is-active { background: var(--msg-panel); box-shadow: 0 .18rem .65rem rgb(2 6 23 / .1); }
html:root body #messenger-delete-confirm .messenger-delete-actions { width: 100%; }
html:root body #messenger-delete-confirm .messenger-delete-actions > button { flex: 1 1 0; }

/* ------------[Конфиденциальность пространства]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 158/203 */
.cover-editor-tab-lock { display: none; margin-left: .28rem; font-style: normal; font-size: .62rem; }
.cover-editor-tab.is-locked { opacity: .72; filter: saturate(.55); }
.cover-editor-tab.is-locked .cover-editor-tab-lock { display: inline; }
.space-privacy-pane { width: 100%; max-width: none; }
.space-privacy-card { position: relative; overflow: hidden; }
.space-privacy-status { margin-left: auto; color: var(--adaptive-text-muted,rgb(100 116 139)); font-size: .62rem; font-weight: 750; }
.space-privacy-list { padding: 0 1.1rem; }
.space-privacy-row { display: grid; grid-template-columns: minmax(14rem,.85fr) minmax(20rem,1.15fr); align-items: center; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--adaptive-border,rgb(226 232 240)); }
.space-privacy-row:first-child { border-top: 0; }
.space-privacy-row > span { display: flex; flex-direction: column; gap: .18rem; }
.space-privacy-row strong { color: var(--adaptive-text-strong,rgb(30 41 59)); font-size: .76rem; font-weight: 900; }
.space-privacy-row small { color: var(--adaptive-text-muted,rgb(100 116 139)); font-size: .62rem; line-height: 1.42; }
.space-privacy-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .2rem; border-radius: .82rem; padding: .22rem; background: var(--adaptive-surface-2,rgb(226 232 240)); }
.space-privacy-options button { min-height: 2.55rem; border: 0; border-radius: .65rem; background: transparent; color: var(--adaptive-text-muted,rgb(100 116 139)); font: inherit; font-size: .64rem; font-weight: 850; cursor: pointer; }
.space-privacy-options button.is-active { background: var(--adaptive-surface,#fff); color: var(--color-dynamic,#3b82f6); box-shadow: 0 .2rem .7rem rgb(15 23 42 / .08); }
.space-privacy-card.is-locked .space-privacy-list { filter: blur(2px); opacity: .58; pointer-events: none; user-select: none; }
.space-privacy-lock { position: absolute; z-index: 2; inset: 4.2rem 1rem 1rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .35rem; border-radius: .9rem; background: color-mix(in srgb,var(--adaptive-surface,#fff) 76%,transparent); text-align: center; backdrop-filter: blur(5px); }
.space-privacy-lock b { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; background: color-mix(in srgb,var(--color-dynamic,#3b82f6) 14%,transparent); }
.space-privacy-lock strong { color: var(--adaptive-text-strong,rgb(30 41 59)); font-size: .82rem; }
.space-privacy-lock span { max-width: 24rem; color: var(--adaptive-text-muted,rgb(100 116 139)); font-size: .66rem; line-height: 1.5; }
.space-left-message.is-disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 760px) { .space-privacy-row { grid-template-columns: 1fr; gap: .55rem; } .space-privacy-options { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)); } }

html:root body .messenger-composer-reply,
html:root body :is(.messenger-pending-attachments article, .messenger-voice-note, .messenger-voice-transcript) {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-attach-menu i {
    background: var(--msg-menu-active) !important;
    color: var(--msg-accent) !important;
}

/* Панель смайликов сообщения поднимается над редактором и получает ту же поверхность. */
html:root body .messenger-composer .emoji-picker-expanded {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-composer .emoji-picker-emoji-view,
html:root body .messenger-composer .emoji-picker-grid {
    background: var(--msg-menu-soft) !important;
}

/* Кружок видеосообщения находится в центре рабочей области и заметно крупнее. */
html:root body .messenger-recording-panel.is-video .messenger-recording-video {
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: clamp(12rem, 24vw, 16rem) !important;
    height: clamp(12rem, 24vw, 16rem) !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 0 .38rem var(--msg-menu-soft), 0 1.2rem 3.2rem rgb(15 54 120 / 18%) !important;
}

@media (max-width: 640px) {
    html:root body .messenger-recording-panel.is-video .messenger-recording-video {
        width: min(13rem, 58vw) !important;
        height: min(13rem, 58vw) !important;
    }
}

/* ------------[Финальная геометрия редактора пространства]------------ // Кнопки
   текста стоят на одной правой оси, а у нижнего смайлика остаётся воздух. Модуль: «оформление интерфейса». Часть 29/50 */
html:root body #space-about-panel .space-about-resize-field .space-about-expand-toggle {
    top: .58rem !important;
    right: .58rem !important;
}

html:root body #space-about-panel .space-about-resize-field .space-about-description-emoji {
    right: .58rem !important;
    bottom: .58rem !important;
}

html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle {
    top: 0 !important;
    right: .58rem !important;
}

html:root body #space-about-panel .space-about-details-emoji {
    right: .58rem !important;
    bottom: .58rem !important;
}

html:root body #space-about-panel :is(.space-about-expand-toggle, .space-about-description-emoji) {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: .56rem !important;
}

html:root body #space-about-panel .space-about-body.is-editing textarea {
    padding-right: 3rem !important;
    padding-bottom: .92rem !important;
}

/* ------------[Фото профиля и пространства]------------ // Основная карточка снова
   белая; голубой тон остаётся у рабочего поля, альбомов и пустых состояний. Модуль: «оформление интерфейса». Часть 30/50 */
html:root body #tab-photos > div {
    background: var(--vmesta-ui-panel) !important;
}

html:root body #tab-photos > div > .mb-6,
html:root body #side-photos > div > .mb-5,
html:root body .space-profile-media-head,
html:root body .space-profile-showcase-card > header {
    transform: none !important;
}

html:root body #tab-photos > div > .mt-4,
html:root body #albums-placeholder,
html:root body .space-profile-photo-field {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body .space-profile-photos-panel {
    padding: 1.5rem !important;
    border: 0 !important;
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

html:root body .space-profile-media-head {
    padding: .2rem .5rem 1.2rem !important;
}

html:root body .space-profile-photo-field {
    min-height: 19rem;
    border-radius: .9rem !important;
}

html:root body :is(.space-profile-album-card, #albums-placeholder > article, #albums-placeholder > button) {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-soft) 82%, var(--vmesta-ui-primary) 18%) !important;
    box-shadow: none !important;
}

html:root body #photo-modal > div > div:last-child > button:first-child {
    border-radius: 1rem;
    background: transparent;
}

html:root body #photo-modal > div > div:last-child > button:first-child:is(:hover, :focus-visible) {
    background: var(--vmesta-ui-soft) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* ------------[Группы и каналы: отдельные поверхности]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 161/203 */
html:root body .messenger-room-panel {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-panel > :is(header, nav, section),
html:root body .messenger-room-panel-overview,
html:root body .messenger-room-panel-content {
    background: transparent !important;
}

html:root body .messenger-room-panel :is(
    nav button,
    .messenger-room-panel-meta button,
    .messenger-room-panel-members article,
    .messenger-room-link-list article,
    .messenger-attachment-media,
    .messenger-attachment-file
) {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-panel :is(nav button, .messenger-room-panel-meta button):is(:hover, .is-active) {
    background: var(--msg-menu-active) !important;
    color: var(--msg-accent) !important;
}

html:root body :is(.messenger-room-panel-close, .messenger-room-panel-manage) {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    color: var(--msg-accent) !important;
    box-shadow: none !important;
}

html:root body :is(.messenger-room-panel-close, .messenger-room-panel-manage):hover {
    background: var(--msg-menu-active) !important;
}

html:root body .messenger-room-settings-form {
    background: color-mix(in srgb, var(--msg-menu-surface) 76%, var(--msg-menu-soft) 24%) !important;
}

html:root body .messenger-room-settings-form :is(
    input[type="text"],
    textarea,
    select,
    .messenger-room-member-picker-trigger,
    .messenger-room-policy,
    .messenger-room-members-manage,
    .messenger-room-member-list article,
    .messenger-room-member-search
) {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-settings-form :is(input[type="text"], textarea, select):focus {
    background: var(--msg-menu-active) !important;
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--msg-accent) 14%, transparent) !important;
}

html:root body .messenger-room-settings-header-actions > button:not(.messenger-room-settings-leave),
html:root body .messenger-room-settings-form > footer button:not(.messenger-room-delete):not(.messenger-room-leave) {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-room-settings-header-actions > button:not(.messenger-room-settings-leave):hover,
html:root body .messenger-room-settings-form > footer button:not(.messenger-room-delete):not(.messenger-room-leave):hover {
    background: var(--msg-menu-active) !important;
    color: var(--msg-accent) !important;
}

html:root body .messenger-pinned-panel {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html:root body .messenger-pinned-panel :is(.messenger-pinned-item, .messenger-pinned-empty) {
    background: var(--msg-menu-soft) !important;
}

/* Отдельные вложения читаются как отдельные элементы, включая два трека подряд. */
html:root body .messenger-file-list {
    gap: .52rem !important;
}

html:root body .messenger-conversation.is-room-chat .messenger-file-list > * + * {
    margin-top: .12rem !important;
}

/* ------------[Создание голосования]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 162/203 */
html:root body .messenger-poll-modal > section,
html:root body .messenger-poll-modal .messenger-poll-modal-head {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-poll-modal form {
    background: color-mix(in srgb, var(--msg-menu-surface) 78%, var(--msg-menu-soft) 22%) !important;
}

html:root body .messenger-poll-question {
    position: relative;
}

html:root body .messenger-poll-question-field {
    position: relative;
    display: block;
}

html:root body .messenger-poll-modal .messenger-poll-question-field textarea {
    min-height: 5.25rem;
    padding: .72rem 3.1rem .72rem .72rem !important;
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    resize: none;
    box-shadow: none !important;
    transition: min-height .18s ease, background .18s ease !important;
}

html:root body .messenger-poll-question-field.is-expanded textarea {
    min-height: 12rem !important;
}

html:root body .messenger-poll-question-tools {
    position: absolute;
    top: .48rem;
    right: .48rem;
    display: grid;
    gap: .28rem;
}

html:root body .messenger-poll-question-tools button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 0;
    border-radius: .54rem;
    background: var(--msg-menu-surface);
    color: var(--msg-accent);
    cursor: pointer;
}

html:root body .messenger-poll-question-tools button:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: var(--msg-menu-active);
}

html:root body .messenger-poll-question-tools .messenger-icon {
    width: .74rem;
    height: .74rem;
}

html:root body .messenger-poll-question > .emoji-picker-expanded {
    z-index: 220;
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-poll-modal fieldset > div label.messenger-poll-option-input,
html:root body .messenger-poll-modal .messenger-poll-anonymous,
html:root body .messenger-poll-modal .messenger-poll-add-option {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-poll-modal fieldset > div label.messenger-poll-option-input:focus-within,
html:root body .messenger-poll-modal .messenger-poll-add-option:hover {
    background: var(--msg-menu-active) !important;
}

html:root body .messenger-poll-modal form > footer button.is-secondary:is(:hover, :focus-visible) {
    border-color: transparent !important;
    background: var(--msg-menu-active) !important;
    color: var(--msg-accent) !important;
}

/* ------------[Отправленное голосование]------------ // Карточка компактнее,
   служебная строка просторнее, список проголосовавших ограничен прокруткой. Модуль: «оформление интерфейса». Часть 31/50 */
html:root body .messenger-bubble.is-poll {
    width: min(17.2rem, 67vw) !important;
    max-width: min(17.2rem, 67vw) !important;
    padding: .3rem !important;
    background: var(--msg-menu-surface) !important;
}

html:root body .messenger-poll-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: .48rem !important;
}

html:root body .messenger-poll-card > .messenger-poll-options {
    width: calc(100% - .7rem);
    margin-inline: .35rem;
}

html:root body .messenger-poll-option {
    min-height: 2.15rem;
    padding: .48rem .62rem !important;
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-poll-card > footer {
    min-height: 2rem;
    align-items: center;
    gap: .55rem;
    padding: .32rem .3rem .08rem !important;
    font-size: .49rem !important;
}

html:root body .messenger-poll-card > footer > span {
    flex-wrap: wrap;
    gap: .28rem .36rem !important;
}

html:root body .messenger-poll-card > footer small {
    padding-left: 0 !important;
    font-size: .47rem !important;
}

html:root body .messenger-poll-public-voters {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-poll-public-voters > div {
    max-height: 7.5rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

html:root body .messenger-poll-public-voters section button {
    background: var(--msg-menu-surface) !important;
}

html:root body .messenger-poll-public-voters section button:hover {
    background: var(--msg-menu-active) !important;
}

@media (max-width: 520px) {
    html:root body .messenger-bubble.is-poll {
        width: min(16rem, 80vw) !important;
        max-width: min(16rem, 80vw) !important;
    }
}

/* ------------[Меню диалогов без прокрутки страницы]------------ // Само меню
   остаётся прокручиваемым, но всегда целиком удерживается внутри окна. Модуль: «оформление интерфейса». Часть 32/50 */
html:root body .messenger-chat-menu.is-row-menu {
    max-height: calc(100dvh - 1rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--msg-accent) 55%, transparent) transparent;
}

html:root body .messenger-chat-menu.is-row-menu::-webkit-scrollbar { width: .34rem; }
html:root body .messenger-chat-menu.is-row-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--msg-accent) 55%, transparent);
}

/* ------------[Центральный выбор реакции]------------ // Полная палитра временно
   заменяет обычные действия и возвращает их без изменения координат. Модуль: «оформление интерфейса». Часть 33/50 */
html:root body .messenger-message-menu-stack.has-reaction-picker {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    place-items: center;
    padding: .75rem;
    background: transparent;
}

html:root body .messenger-message-menu-stack.has-reaction-picker > :is(.messenger-reaction-panel, .messenger-message-menu) {
    display: none !important;
}

html:root body .messenger-message-menu-stack.has-reaction-picker .messenger-reaction-picker {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    width: min(24rem, calc(100vw - 1.5rem)) !important;
    max-width: min(24rem, calc(100vw - 1.5rem)) !important;
    max-height: min(27rem, calc(100dvh - 1.5rem)) !important;
    margin: 0 !important;
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
    transform-origin: center;
    animation: messenger-reaction-center-open .22s cubic-bezier(.2,.85,.25,1) both;
}

@keyframes messenger-reaction-center-open {
    from { opacity: 0; transform: scaleX(.96) scaleY(.18); }
    to { opacity: 1; transform: scale(1); }
}

html:root body .messenger-reaction-picker > header {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center !important;
    gap: .5rem;
}

html:root body .messenger-reaction-picker > header > button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: .62rem;
    background: var(--msg-menu-soft);
    color: var(--msg-accent);
    cursor: pointer;
}

html:root body .messenger-reaction-picker > header > button:hover {
    background: var(--msg-menu-active);
}

html:root body .messenger-reaction-picker > header > button .messenger-icon {
    width: .82rem;
    height: .82rem;
}

html:root body .messenger-reaction-picker > label,
html:root body .messenger-reaction-picker > nav,
html:root body .messenger-reaction-grid {
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-reaction-picker > nav {
    padding: .28rem;
    border-radius: .72rem;
}

html:root body .messenger-reaction-grid {
    margin-top: .12rem;
    padding: .42rem !important;
    border-radius: .8rem;
}

/* ------------[Компактный поиск внутри чата]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 166/203 */
html:root body .messenger-chat-search {
    width: auto !important;
    margin: .5rem .72rem .15rem !important;
    padding: .4rem .48rem !important;
    border: 0 !important;
    border-radius: .88rem !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
    animation: messenger-chat-search-drop .18s ease-out both;
}

@keyframes messenger-chat-search-drop {
    from { opacity: 0; transform: translateY(-.35rem) scaleY(.92); }
    to { opacity: 1; transform: none; }
}

html:root body .messenger-chat-search input {
    height: 2.1rem;
    border: 0 !important;
    border-radius: .66rem !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-chat-search > button {
    width: 2.1rem;
    height: 2.1rem;
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
}

/* ------------[Цельная нижняя панель и запись]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 167/203 */
html:root body .messenger-composer {
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-composer textarea {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-active {
    border: 0 !important;
    border-radius: .82rem !important;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-canceling,
html:root body .messenger-recording-panel.is-cancel-ready {
    background:
        radial-gradient(circle 2.25rem at 1.45rem 50%, color-mix(in srgb, #ef4444 var(--recording-cancel-progress, 0%), transparent) 0 34%, transparent 74%),
        var(--msg-menu-soft) !important;
}

html:root body .messenger-recording-lock {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    color: var(--msg-accent) !important;
    opacity: .92 !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-lock:hover,
html:root body .messenger-recording-panel.is-locking .messenger-recording-lock {
    background: var(--msg-menu-active) !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-status span {
    color: color-mix(in srgb, var(--msg-text) 68%, var(--msg-muted)) !important;
}

html:root body .messenger-recording-wave i {
    background: color-mix(in srgb, var(--msg-accent) 86%, transparent) !important;
}

html:root body .messenger-recording-cancel {
    background: color-mix(in srgb, #ef4444 13%, var(--msg-menu-surface)) !important;
}

html:root body .messenger-recording-cancel:hover,
html:root body .messenger-recording-panel.is-cancel-ready .messenger-recording-cancel {
    background: #ef4444 !important;
    color: #fff !important;
}

/* ------------[Рекомендации друзей]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 168/203 */
html:root body #friends-search-results .friend-search-card {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 82%, var(--vmesta-ui-primary) 18%) !important;
    box-shadow: none !important;
}

html:root body #friends-search-results .friend-search-card:hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel) 70%, var(--vmesta-ui-primary) 30%) !important;
}

/* На узком экране голосовая кнопка уступает место отправке: обе кнопки не
   должны переносить цельную панель ввода на вторую строку. */
@media (max-width: 767px) {
    html:root body .messenger-composer:not(.is-recording) {
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    }

    html:root body .messenger-composer:not(.is-recording) > .messenger-voice-button {
        display: none !important;
    }
}

/* ------------[Финальная геометрия профиля и пространств]------------ //
   Этот блок идёт после общих тем, чтобы одинаково работать во всех палитрах. Модуль: «оформление интерфейса». Часть 34/50 */
html:root body #space-about-panel .space-about-description-field .space-about-quote-input {
    min-height: 5.4rem !important;
    padding-right: 3.05rem !important;
    padding-bottom: 2.7rem !important;
}

html:root body #space-about-panel .space-about-resize-field .space-about-expand-toggle {
    top: .68rem !important;
    right: .72rem !important;
}

html:root body #space-about-panel .space-about-resize-field .space-about-description-emoji {
    right: .72rem !important;
    bottom: .68rem !important;
}

html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle {
    top: 0 !important;
    right: .72rem !important;
}

html:root body #space-about-panel .space-about-longform > textarea {
    padding-right: 3rem !important;
    padding-bottom: 3rem !important;
}

html:root body #space-about-panel .space-about-details-emoji {
    right: 1.05rem !important;
    bottom: 1.05rem !important;
}

html:root body #space-about-panel :is(.space-about-expand-toggle, .space-about-description-emoji) {
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: .5rem !important;
}

html:root body #photo-modal {
    padding: 1rem !important;
}

html:root body #photo-modal > div {
    max-height: calc(100dvh - 2rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 1.45rem !important;
    background: var(--vmesta-ui-panel) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vmesta-ui-primary) 58%, transparent) transparent;
}

html:root body #photo-modal > div::-webkit-scrollbar { width: .34rem; }
html:root body #photo-modal > div::-webkit-scrollbar-track { background: transparent; }
html:root body #photo-modal > div::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--vmesta-ui-primary) 58%, transparent);
}

html:root body #photo-modal > div > .p-8 { padding: 1.55rem !important; }

html:root body #avatar-crop-viewport {
    border: 0 !important;
    border-radius: 1.05rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body #photo-modal :is(.avatar-library-card, label.group.w-full),
html:root body #photo-modal .w-full.mt-7 > .flex {
    border: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-ui-soft) !important;
    box-shadow: none !important;
}

html:root body #photo-modal input[type="range"] {
    height: .34rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--vmesta-menu-surface) !important;
    box-shadow: none !important;
}

html:root body #photo-modal input[type="range"]::-webkit-slider-thumb {
    width: 1.05rem;
    height: 1.05rem;
}

html:root body #photo-modal > div > :last-child {
    border: 0 !important;
    background: var(--vmesta-ui-soft) !important;
}

html:root body #photo-modal :is(.avatar-target-option, #save-photo-btn) {
    border: 0 !important;
    box-shadow: none !important;
}

html:root body .spaces-index-toolbar {
    border: 0 !important;
    border-radius: .95rem !important;
    background: var(--vmesta-ui-panel) !important;
    box-shadow: none !important;
}

html:root body .spaces-index-scope button,
html:root body .spaces-index-scope button.is-active {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

html:root body .spaces-index-scope button:hover { background: var(--vmesta-ui-soft) !important; }

html:root body .spaces-index-scope button.is-active,
html:root body .spaces-index-scope button.is-active:hover {
    background: var(--vmesta-menu-surface) !important;
}

html:root body .spaces-index-scope button span,
html:root body .spaces-index-scope button.is-active span {
    border: 0 !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel) 62%, var(--vmesta-ui-primary) 38%) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root body .spaces-index-view,
html:root body .spaces-index-view button {
    border: 0 !important;
    box-shadow: none !important;
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-card,
html:root body .spaces-index-grid:not(.is-list) .spaces-index-open { height: 100%; }

html:root body .spaces-index-grid:not(.is-list) .spaces-index-open {
    display: grid;
    grid-template-rows: 9rem minmax(7.5rem, auto);
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-body {
    min-height: 7.5rem;
    align-items: center;
}

html:root body .spaces-index-grid:not(.is-list) .spaces-index-body > span:last-child {
    display: flex;
    min-width: 0;
    min-height: 4.35rem;
    justify-content: center;
    flex-direction: column;
}

html:root body .spaces-index-body strong { line-height: 1.25; }
html:root body .spaces-index-body small { line-height: 1.4; }


html:root body #relationship-visual {
    width: 4.4rem;
    max-width: 4.4rem !important;
    overflow: visible !important;
    padding: .12rem;
}

html:root body #relationship-avatar-pair {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, 2rem);
    justify-content: end;
    gap: .28rem !important;
    overflow: visible;
}

html:root body #relationship-avatar-pair > * {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 0;
    border-radius: 999px !important;
}

html:root body #relationship-avatar-pair :is(img, .avatar-placeholder) {
    display: block;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ------------[Финальная компоновка настроек комнат и опросов]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 170/203 */
html:root body .messenger-room-settings-modal > section { width: min(39rem, calc(100vw - 1rem)); }
html:root body .messenger-room-settings-form {
    padding: .72rem 1rem .8rem .82rem !important;
    scrollbar-gutter: stable;
}

html:root body .messenger-room-controls-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(10rem, .65fr);
    align-items: start;
    gap: .55rem;
}

html:root body .messenger-room-controls-grid > :is(.messenger-room-policy, .messenger-room-slow-mode) {
    min-width: 0;
    border: 0 !important;
    border-radius: .82rem;
    background: var(--msg-menu-soft) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-slow-mode { display: grid; gap: .3rem; padding: .58rem .62rem; }
html:root body .messenger-room-slow-mode > span { color: var(--msg-text) !important; font-size: .62rem !important; }
html:root body .messenger-room-slow-mode > select {
    min-height: 2.3rem;
    padding: .48rem .58rem !important;
    border: 0 !important;
    border-radius: .62rem !important;
    background: var(--msg-menu-surface) !important;
}

html:root body .messenger-room-policy-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem .62rem;
    padding: .08rem .62rem .62rem;
}

html:root body .messenger-room-policy-content > label {
    min-width: 0;
    min-height: 3.1rem;
    padding: .42rem .48rem !important;
    border: 0 !important;
    border-radius: .62rem;
    background: var(--msg-menu-surface);
}

html:root body .messenger-room-handle-field {
    display: grid;
    overflow: hidden;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    border: 0 !important;
    background: var(--msg-menu-soft) !important;
}

html:root body .messenger-room-handle-field > b {
    display: grid;
    height: 100%;
    place-items: center;
    padding: 0 !important;
    background: var(--msg-menu-active);
}

html:root body .messenger-room-handle-field > input {
    width: auto !important;
    min-width: 0 !important;
    padding-left: .66rem !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html:root body .messenger-room-description-field textarea {
    min-height: 6rem;
    padding-right: 3rem !important;
    padding-bottom: .72rem !important;
    resize: none !important;
}
html:root body .messenger-room-description-field.is-expanded textarea { min-height: 13rem !important; }

html:root body .messenger-room-description-tools {
    position: absolute;
    top: .48rem;
    right: .48rem;
    display: grid;
    gap: .28rem;
}

html:root body .messenger-room-description-tools > button {
    position: static !important;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    padding: 0;
    border: 0 !important;
    border-radius: .56rem;
    background: var(--msg-menu-surface) !important;
    color: var(--msg-accent);
}
html:root body .messenger-room-description-tools > button:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--msg-menu-active) !important; }

html:root body .messenger-room-members-head {
    display: grid !important;
    grid-template-columns: auto minmax(11rem, 17rem);
    align-items: center;
    gap: .55rem;
}
html:root body .messenger-room-members-head h3 { display: inline-flex; align-items: center; gap: .38rem; }
html:root body .messenger-room-members-head h3 > small {
    display: grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
    background: var(--msg-menu-active);
    color: var(--msg-accent);
    font-size: .58rem;
}

html:root body .messenger-room-member-search.is-inline {
    width: 100% !important;
    margin-left: 0 !important;
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
}
html:root body :is(.messenger-room-member-search, .messenger-room-member-picker-search) input {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-room-member-add {
    display: grid;
    grid-template-columns: 1fr;
    gap: .3rem;
    padding: .5rem;
    border-radius: .72rem;
    background: color-mix(in srgb, var(--msg-menu-surface) 82%, var(--msg-menu-active) 18%);
}
html:root body .messenger-room-member-add-label { color: var(--msg-muted); font-size: .52rem; font-weight: 850; }
html:root body .messenger-room-member-add-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
html:root body :is(.messenger-room-member-picker-trigger, .messenger-room-member-picker-popover, .messenger-room-member-picker-search) {
    border: 0 !important;
    background: var(--msg-menu-surface) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-settings-form > footer {
    bottom: -.8rem;
    min-height: 3.35rem;
    margin: .12rem 0 -.8rem !important;
    padding: .55rem .12rem .68rem !important;
    background: color-mix(in srgb, var(--msg-menu-surface) 82%, var(--msg-menu-soft) 18%) !important;
    box-shadow: none !important;
}
html:root body .messenger-room-settings-form > footer :is(button, .messenger-room-delete) {
    min-height: 2.25rem;
    margin: 0 !important;
    padding: .48rem .7rem !important;
    border: 0 !important;
    border-radius: .66rem !important;
    background: var(--msg-menu-soft) !important;
    color: var(--msg-accent) !important;
    box-shadow: none !important;
}
html:root body .messenger-room-settings-form > footer .messenger-room-delete { margin-right: auto !important; }
html:root body .messenger-room-settings-form > footer button:is(:hover, :focus-visible) { background: var(--msg-menu-active) !important; }
html:root body .messenger-room-settings-form > footer button.is-primary:not(:disabled) { background: var(--msg-accent) !important; color: #fff !important; }

html:root body .messenger-reaction-picker > label { border: 0 !important; background: var(--msg-menu-active) !important; }
html:root body .messenger-reaction-picker > label input[type="search"] {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--msg-text) !important;
    box-shadow: none !important;
}
html:root body .messenger-reaction-picker > label input[type="search"]::placeholder { color: var(--msg-muted) !important; opacity: 1; }

html:root body .messenger-poll-card > .messenger-poll-options {
    width: calc(100% - 1rem) !important;
    margin-inline: .5rem !important;
    gap: .28rem !important;
}
html:root body .messenger-poll-option {
    min-height: 2rem !important;
    grid-template-columns: .9rem minmax(0, 1fr) 2.4rem !important;
    padding: .42rem .58rem !important;
    border-radius: .62rem !important;
    background: var(--msg-menu-soft) !important;
}
html:root body .messenger-poll-option-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .messenger-poll-option > em { text-align: right; }
html:root body .messenger-bubble.is-poll .messenger-bubble-tail { bottom: 0; color: var(--msg-menu-surface) !important; }
html:root body .messenger-message.is-outgoing .messenger-bubble.is-poll .messenger-bubble-tail { right: -.64rem; }
html:root body .messenger-message.is-incoming .messenger-bubble.is-poll .messenger-bubble-tail { left: -.64rem; }

@media (max-width: 680px) {
    html:root body :is(.messenger-room-controls-grid, .messenger-room-policy-content, .messenger-room-members-head) { grid-template-columns: 1fr; }
    html:root body .messenger-room-member-add-controls { grid-template-columns: 1fr; }
}

/* ------------[Голосовые сообщения: различимые стороны]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 171/203 */
html:root body .messenger-bubble.is-voice-note-only .messenger-voice-note {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-message.is-incoming .messenger-bubble.is-voice-note-only {
    --message-shape-fill: color-mix(in srgb, var(--msg-panel) 95%, var(--msg-accent) 5%);
    background: var(--message-shape-fill) !important;
}

html:root body .messenger-message.is-outgoing .messenger-bubble.is-voice-note-only {
    --message-shape-fill: color-mix(in srgb, var(--msg-panel) 74%, var(--msg-accent) 26%);
    background: var(--message-shape-fill) !important;
}

html:root body .messenger-bubble.is-voice-note-only .messenger-voice-transcript {
    margin-top: .42rem;
    border: 0 !important;
    border-radius: .62rem !important;
    background: color-mix(in srgb, var(--msg-panel) 88%, var(--msg-accent) 12%) !important;
    box-shadow: none !important;
}

html:root body .messenger-message.is-incoming .messenger-voice-transcript {
    background: color-mix(in srgb, var(--msg-panel) 94%, var(--msg-accent) 6%) !important;
}

/* ------------[Компактная палитра реакций]------------ // Заголовок и поиск
   образуют одну узкую панель, категории и сетка занимают меньше места. Модуль: «оформление интерфейса». Часть 35/50 */
html:root body .messenger-message-menu-stack.has-reaction-picker {
    overflow: hidden;
    scrollbar-gutter: stable;
}

html:root body .messenger-message-menu-stack.has-reaction-picker .messenger-reaction-picker {
    width: min(18.5rem, calc(100vw - 1rem)) !important;
    max-width: min(18.5rem, calc(100vw - 1rem)) !important;
    max-height: min(21.5rem, calc(100dvh - 1rem)) !important;
    gap: .26rem;
    padding: .34rem !important;
    border-radius: .82rem !important;
}

html:root body .messenger-reaction-picker > header {
    display: grid !important;
    grid-template-columns: 1.65rem auto minmax(0, 1fr);
    align-items: center !important;
    gap: .34rem !important;
    padding: .18rem !important;
    border-radius: .68rem;
    background: var(--msg-menu-soft);
}

html:root body .messenger-reaction-picker > header > button {
    width: 1.65rem !important;
    height: 1.65rem !important;
    border-radius: .5rem !important;
}

html:root body .messenger-reaction-picker > header > strong { font-size: .66rem; }
html:root body .messenger-reaction-picker > header > small { display: none; }

html:root body .messenger-reaction-picker > header > label {
    display: grid;
    min-width: 0;
    min-height: 1.65rem;
    grid-template-columns: .9rem minmax(0, 1fr);
    align-items: center;
    gap: .22rem;
    padding: 0 .42rem;
    border: 0 !important;
    border-radius: .5rem;
    background: var(--msg-menu-active) !important;
}

html:root body .messenger-reaction-picker > header > label .messenger-icon {
    width: .72rem;
    height: .72rem;
    color: var(--msg-accent);
}

html:root body .messenger-reaction-picker > header > label input[type="search"] {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--msg-text) !important;
    box-shadow: none !important;
    font-size: .58rem;
    appearance: none;
}

html:root body .messenger-reaction-picker > nav {
    gap: .1rem;
    margin: 0 !important;
    padding: .18rem !important;
    border-radius: .62rem !important;
}

html:root body .messenger-reaction-picker > nav > button {
    flex-basis: 1.65rem;
    height: 1.65rem;
    border-radius: .5rem;
    font-size: .84rem;
}

html:root body .messenger-reaction-grid {
    max-height: 13.25rem !important;
    gap: .08rem !important;
    margin-top: 0 !important;
    padding: .24rem !important;
    border-radius: .64rem !important;
    overscroll-behavior: contain;
}

html:root body .messenger-reaction-grid > button {
    border-radius: .45rem;
    font-size: .92rem;
}

html:root body .messenger-message-menu-stack.is-reaction-closing {
    pointer-events: none;
}

html:root body .messenger-message-menu-stack.has-reaction-picker.is-reaction-closing .messenger-reaction-picker {
    animation: messenger-reaction-center-close .17s cubic-bezier(.55,0,.85,.35) both !important;
}

@keyframes messenger-reaction-center-close {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scaleX(.96) scaleY(.18); }
}

/* Ползунок переписки остаётся на своей оси; колесо блокируется обработчиком
   меню, поэтому положение ленты при раскрытии не меняется. */
html:root body .messenger-conversation.is-message-menu-open .messenger-message-stream {
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* ------------[Пост внутри сообщения: компактная карточка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 173/203 */
html:root body .shared-post-card-message {
    width: min(19.5rem, 68vw) !important;
    border: 0 !important;
    border-radius: .78rem !important;
    background: color-mix(in srgb, var(--msg-panel) 91%, var(--msg-accent) 9%) !important;
    box-shadow: none !important;
}

html:root body .shared-post-message-author {
    gap: .4rem;
    padding: .42rem .5rem !important;
    border: 0 !important;
}

html:root body .shared-post-message-author > :is(img, i) {
    width: 1.6rem;
    height: 1.6rem;
}

html:root body .shared-post-message-author strong { font-size: .62rem; }
html:root body .shared-post-message-author small { font-size: .48rem; }

html:root body .shared-post-card-message .shared-post-cover {
    height: 6.3rem;
    min-height: 6.3rem;
    max-height: 6.3rem;
    border: 0 !important;
}

html:root body .shared-post-message-body {
    gap: .38rem;
    padding: .48rem .54rem .52rem;
}

html:root body .shared-post-message-body p {
    font-size: .6rem;
    line-height: 1.38;
    -webkit-line-clamp: 3;
}

html:root body .shared-post-message-actions { gap: .3rem; }
html:root body .shared-post-message-actions > button {
    min-height: 1.72rem;
    padding: .3rem .48rem;
    border: 0 !important;
    border-radius: .52rem;
    background: var(--msg-menu-soft) !important;
    font-size: .5rem;
}

html:root body .shared-post-message-actions > button:hover { background: var(--msg-menu-active) !important; }

@media (max-width: 520px) {
    html:root body .shared-post-card-message { width: min(18rem, 78vw) !important; }
}

/* Лента получает собственную поверхность между фоном страницы и карточками.
   Так панель не выглядит белым пятном в цветной теме и не пропадает в тёмной. */
:root {
    --vmesta-feed-surface: color-mix(in srgb, var(--vmesta-ui-panel) 72%, var(--vmesta-ui-primary) 28%);
    --vmesta-feed-active: color-mix(in srgb, var(--vmesta-ui-panel) 58%, var(--vmesta-ui-primary) 42%);
}

html:not(.adaptive-theme):not(.dark) {
    --vmesta-feed-surface: color-mix(in srgb, #ffffff 84%, var(--vmesta-ui-primary) 16%);
    --vmesta-feed-active: color-mix(in srgb, #ffffff 70%, var(--vmesta-ui-primary) 30%);
}

html.dark {
    --vmesta-feed-surface: color-mix(in srgb, var(--vmesta-ui-panel) 82%, var(--vmesta-ui-primary) 18%);
    --vmesta-feed-active: color-mix(in srgb, var(--vmesta-ui-panel) 68%, var(--vmesta-ui-primary) 32%);
}

html:root body #profile-layout-grid #content-main .profile-publisher-hub .space-switchboard,
html:root body #tab-feed .feed-search-hub .space-switchboard {
    border: 0 !important;
    background: var(--vmesta-feed-surface) !important;
}

html:root body #profile-layout-grid #content-main .profile-publisher-hub .space-tabs button.is-active,
html:root body #tab-feed .feed-search-hub .space-tabs button.is-active {
    background: var(--vmesta-feed-active) !important;
}

html:root body :is(#profile-layout-grid #content-main .profile-publisher-hub, #tab-feed .feed-search-hub) .space-news-strip {
    border-top-color: color-mix(in srgb, var(--vmesta-ui-primary) 18%, transparent) !important;
}

/* Хвост наследует итоговую заливку конкретного пузыря, включая голосовые и
   музыкальные сообщения. Старое правило стороны больше не оставляет светлый стык. */
html:root body .messenger-message:is(.is-incoming, .is-outgoing)
    .messenger-bubble:not(.is-poll) > .messenger-bubble-tail {
    color: var(--message-shape-fill) !important;
}

html:root body .messenger-message:is(.is-incoming, .is-outgoing)
    .messenger-bubble:not(.is-poll) > .messenger-bubble-tail-fill {
    fill: var(--message-shape-fill) !important;
}

/* При полной покраске темы служебные оболочки тоже получают оттенок палитры.
   Светлая и ночная версии используют разную насыщенность, сохраняя глубину. */
html.adaptive-theme {
    --vmesta-full-panel: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%);
    --vmesta-full-panel-soft: color-mix(in srgb, var(--vmesta-ui-panel) 86%, var(--vmesta-ui-primary) 14%);
    --vmesta-messages-surface: var(--vmesta-full-panel-soft);
}

html.adaptive-theme.dark {
    --vmesta-full-panel: color-mix(in srgb, var(--vmesta-ui-panel) 84%, var(--vmesta-ui-primary) 16%);
    --vmesta-full-panel-soft: color-mix(in srgb, var(--vmesta-ui-panel) 91%, var(--vmesta-ui-primary) 9%);
    --vmesta-messages-surface: var(--vmesta-full-panel-soft);
}

html.adaptive-theme body :is(.space-intro-card, .spaces-index-toolbar) {
    border-color: transparent !important;
    background: var(--vmesta-full-panel-soft) !important;
}

html.adaptive-theme body :is(
    #profile-layout-grid #content-main .profile-publisher-hub,
    #tab-feed .feed-search-hub
) .space-switchboard {
    background: var(--vmesta-full-panel) !important;
}

/* Внутренняя строка вкладок больше не рисует поверх окрашенной оболочки
   отдельный белый прямоугольник. */
html.adaptive-theme body :is(
    #profile-layout-grid #content-main .profile-publisher-hub,
    #tab-feed .feed-search-hub
) .space-tabs {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.adaptive-theme body.messages-route :is(#messages-root, #messages-side-root)
    :is(.messenger-conversation-header, .messenger-main-header, .messenger-message-stream) {
    background: transparent !important;
}

html.adaptive-theme body.messages-route :is(
    .messenger-chat-search,
    .messenger-inline-media-bar,
    .messenger-pinned-panel,
    .messenger-side-section,
    .messenger-room-panel
) {
    border-color: transparent !important;
    background: var(--vmesta-full-panel) !important;
}

/* ------------[Тёмная Monet: та же иерархия, что в дневной теме]------------ // Оформляет связанный блок интерфейса.
   Поверхности строятся только из тёмных тонов одной Monet-палитры. Яркий
   акцент остаётся у действий и состояний, а не заливает каждую карточку. Модуль: «оформление интерфейса». Часть 36/50 */
html.adaptive-theme.dark {
    --vm-theme-ink: color-mix(in srgb, #f8fafc 86%, var(--color-dynamic) 14%);
    --vm-theme-muted: color-mix(in srgb, #cbd5e1 70%, var(--color-dynamic) 30%);
    --vm-theme-panel: color-mix(in srgb, var(--adaptive-surface) 88%, var(--adaptive-surface-2) 12%);
    --vm-theme-soft: color-mix(in srgb, var(--adaptive-surface) 62%, var(--adaptive-surface-2) 38%);
    --vm-theme-line: color-mix(in srgb, var(--adaptive-border) 58%, transparent);
    --vm-theme-line-strong: color-mix(in srgb, var(--adaptive-border) 64%, var(--color-dynamic) 36%);
    --vmesta-rail-surface: var(--vm-theme-panel);
    --vmesta-menu-surface: var(--vm-theme-soft);
    --vmesta-feed-surface: var(--vm-theme-soft);
    --vmesta-feed-active: color-mix(in srgb, var(--vm-theme-soft) 76%, var(--color-dynamic) 24%);
    --vmesta-full-panel: var(--vm-theme-soft);
    --vmesta-full-panel-soft: var(--vm-theme-panel);
    --vmesta-messages-surface: var(--vm-theme-panel);
}

html.adaptive-theme.dark :is(body, #content-area) {
    background-color: var(--adaptive-background) !important;
}

html.adaptive-theme.dark body :is(
    #profile-layout-grid #content-main .post-item,
    .space-post,
    .space-side-card,
    .achievement-sidebar-card,
    .profile-interests-card,
    .interest-match-card
) {
    border-color: transparent !important;
    background: var(--vm-theme-panel) !important;
    color: var(--vm-theme-ink) !important;
    box-shadow: none !important;
}

html.adaptive-theme.dark body :is(
    #profile-layout-grid #content-main .post-item,
    .space-post
):hover {
    background: var(--vm-theme-soft) !important;
}

html.adaptive-theme.dark body :is(
    .post-file-card,
    .post-attachment-card,
    .space-post-file,
    .post-media-grid,
    .achievement-showcase-item,
    .profile-interest-chip
) {
    border-color: transparent !important;
    background: var(--vm-theme-soft) !important;
    box-shadow: none !important;
}

/* ------------[Обсуждение без цветной полосы]------------ // Оформляет связанный блок интерфейса.
   Заголовок и пустое состояние продолжают поверхность поста. Разделителем
   служит только короткая тонкая линия после счётчика. Модуль: «оформление интерфейса». Часть 37/50 */
html:root body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) #viewer-comments-block > .viewer-comments-head {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) #viewer-comments-block > .viewer-comments-head > .h-px {
    max-width: 9rem;
    height: 1px !important;
    background: color-mix(in srgb, var(--vmesta-ui-muted) 24%, transparent) !important;
}

html:root body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) :is(#viewer-comments-block, #viewer-comments-list) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) #viewer-comments-list:empty {
    color: var(--vmesta-ui-muted) !important;
}

/* Сам просмотр повторяет карточку ленты; внутри нет дополнительного серого
   или зелёного слоя, который менял оттенок при открытии комментариев. */
html.adaptive-theme body #post-viewer.is-discussion-mode :is(
    #post-viewer-panel,
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    .viewer-form-shell
),
html.adaptive-theme body #media-viewer .media-viewer-post-slot :is(
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    .viewer-form-shell
) {
    background: var(--vmesta-ui-panel) !important;
    background-image: none !important;
}

/* ------------[Публикации Monet: спокойная карточка и заметные вложения]------------ // Оформляет связанный блок интерфейса.
   Полная тема сохраняет оттенок обоев на странице, но не заливает им весь
   текстовый пост. Внутренние элементы получают отдельную ступень контраста. Модуль: «оформление интерфейса». Часть 38/50 */
html.adaptive-theme {
    --vmesta-post-surface: color-mix(in srgb, #ffffff 88%, var(--adaptive-surface) 12%);
    --vmesta-post-surface-hover: color-mix(in srgb, #ffffff 82%, var(--adaptive-surface-2) 18%);
    --vmesta-post-inner: color-mix(in srgb, var(--vmesta-post-surface) 80%, var(--color-dynamic) 20%);
    --vmesta-post-inner-strong: color-mix(in srgb, var(--vmesta-post-surface) 68%, var(--color-dynamic) 32%);
    --vmesta-post-line: color-mix(in srgb, var(--color-dynamic) 24%, transparent);
}

html.adaptive-theme.dark {
    --vmesta-post-surface: color-mix(in srgb, var(--adaptive-background, #151a21) 80%, var(--adaptive-surface) 20%);
    --vmesta-post-surface-hover: color-mix(in srgb, var(--adaptive-background, #1b222b) 68%, var(--adaptive-surface-2) 32%);
    --vmesta-post-inner: color-mix(in srgb, var(--vmesta-post-surface) 72%, var(--adaptive-surface-2) 28%);
    --vmesta-post-inner-strong: color-mix(in srgb, var(--vmesta-post-inner) 86%, var(--color-dynamic) 14%);
    --vmesta-post-line: color-mix(in srgb, var(--color-dynamic) 30%, transparent);
}

/* Ночная Monet использует тот же внешний слой, что достижения, фотографии,
   профиль и сообщения. Внутренние элементы остаются отдельным уровнем. */
html.adaptive-theme.dark.theme-monet-active {
    --vmesta-post-surface: color-mix(in srgb, var(--vm-theme-panel) 88%, var(--color-dynamic) 12%);
    --vmesta-post-surface-hover: var(--vmesta-post-surface);
    --vmesta-post-inner: color-mix(in srgb, var(--vm-theme-panel) 64%, var(--adaptive-background) 36%);
    --vmesta-post-inner-strong: color-mix(in srgb, var(--vm-theme-panel) 76%, var(--color-dynamic) 24%);
    --vmesta-feed-surface: var(--vmesta-post-surface);
    --vmesta-feed-active: var(--vmesta-post-inner-strong);
}

html:root.adaptive-theme.dark.theme-monet-active body :is(.post-item, .space-post):hover,
html:root.adaptive-theme.dark.theme-monet-active body #profile-layout-grid #content-main .post-item:hover {
    background: var(--vmesta-post-surface) !important;
}

html:root.adaptive-theme body :is(.post-item, .space-post),
html:root.adaptive-theme body #profile-layout-grid #content-main .post-item {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme body :is(.post-item, .space-post):hover,
html:root.adaptive-theme body #profile-layout-grid #content-main .post-item:hover {
    background: var(--vmesta-post-surface-hover) !important;
}

html:root.adaptive-theme body :is(.post-item, .space-post, #post-viewer-panel, .media-viewer-post-slot) :is(
    .post-attachment-card,
    .post-file-selection-card,
    .post-media-grid,
    .post-hashtag-chip,
    .smart-text-toggle-label
) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme body :is(.post-item, .space-post, #post-viewer-panel, .media-viewer-post-slot)
    .post-attachment-card:hover {
    background: var(--vmesta-post-inner-strong) !important;
}

html:root.adaptive-theme body :is(.post-item, .space-post, #post-viewer-panel, .media-viewer-post-slot)
    .smart-text-toggle-line {
    background: var(--vmesta-post-line) !important;
}

/* Увеличенный пост использует ту же спокойную карточку, что и публикация в
   ленте. Обсуждение остаётся прозрачным продолжением, без второго полотна. */
html:root.adaptive-theme body #post-viewer.is-discussion-mode :is(
    #post-viewer-panel,
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    .viewer-form-shell
),
html:root.adaptive-theme body #media-viewer .media-viewer-post-slot :is(
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    .viewer-form-shell
) {
    background: var(--vmesta-post-surface) !important;
}

html:root.adaptive-theme body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) :is(
    #viewer-comments-list .comment-node,
    .comment-form-container,
    #viewer-comments-count,
    #viewer-comments-list > .py-20.text-center > .rounded-full
) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) #viewer-comments-list > .py-20.text-center > :last-child {
    color: var(--vmesta-ui-muted) !important;
    opacity: .82 !important;
}

/* Старые правила формы имеют несколько ID в селекторе, поэтому повторяем
   фактическую структуру окна и не даём подвалу снова стать насыщенным. */
html:root.adaptive-theme body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > .viewer-form-shell,
html:root.adaptive-theme body #media-viewer .media-viewer-post-slot
    #viewer-sidebar > .viewer-form-shell {
    border-top-color: var(--vmesta-post-line) !important;
    background: var(--vmesta-post-surface) !important;
}

html:root.adaptive-theme body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-form-container .comment-form-container,
html:root.adaptive-theme body #media-viewer .media-viewer-post-slot
    #viewer-sidebar #viewer-form-container .comment-form-container {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
}

/* ------------[Ночная тема комментариев: структура светлого режима]------------ // Оформляет связанный блок интерфейса.
   Обычная тёмная тема использует одно непрерывное полотно для шапки, текста
   публикации и обсуждения. Акцент остаётся только у вложений, поля ввода и
   управляющих элементов, поэтому окно больше не распадается на синие полосы. Модуль: «оформление интерфейса». Часть 39/50 */
html.dark:not(.adaptive-theme) {
    --vmesta-night-viewer-surface: color-mix(in srgb, #111827 94%, var(--vm-theme-accent) 6%);
    --vmesta-night-viewer-inner: color-mix(in srgb, #1e293b 90%, var(--vm-theme-accent) 10%);
    --vmesta-night-viewer-inner-strong: color-mix(in srgb, #263449 84%, var(--vm-theme-accent) 16%);
    --vmesta-night-viewer-line: color-mix(in srgb, #64748b 58%, var(--vm-theme-accent) 42%);
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode :is(
    #post-viewer-panel,
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-media-container,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    #viewer-form-container,
    .viewer-form-shell
) {
    background: var(--vmesta-night-viewer-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode :is(
    #viewer-post-header,
    #viewer-media-container,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    #viewer-form-container
) {
    border-color: transparent !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode
    #post-viewer-panel {
    border-color: var(--vmesta-night-viewer-line) !important;
    box-shadow: 0 1.6rem 4rem rgb(0 0 0 / .34) !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode :is(
    .post-attachment-card,
    .post-file-selection-card,
    .post-hashtag-chip,
    #viewer-comments-list .comment-node,
    #viewer-comments-count,
    #viewer-comments-list > .py-20.text-center > .rounded-full,
    .comment-form-container
) {
    border-color: transparent !important;
    background: var(--vmesta-night-viewer-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode
    .post-attachment-card:hover {
    background: var(--vmesta-night-viewer-inner-strong) !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > .viewer-form-shell {
    border-color: transparent !important;
    border-top-color: color-mix(in srgb, var(--vmesta-night-viewer-line) 48%, transparent) !important;
    background: var(--vmesta-night-viewer-surface) !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-form-container .comment-form-container {
    border-color: transparent !important;
    background: var(--vmesta-night-viewer-inner) !important;
}

html:root.dark:not(.adaptive-theme) body #post-viewer.is-discussion-mode
    #viewer-comments-block > .viewer-comments-head > .h-px {
    background: color-mix(in srgb, var(--vmesta-night-viewer-line) 42%, transparent) !important;
}

/* ------------[Ночная Monet: единая поверхность поста и комментариев]------------ // Оформляет связанный блок интерфейса.
   Повторяет иерархию обычной тёмной темы, но берёт базовый оттенок из палитры
   Monet. Благодаря этому публикации не становятся холодно-серыми на тёплом
   фоне, а обсуждение не делится на коричневые и чёрные прямоугольники. Модуль: «оформление интерфейса». Часть 40/50 */
html:root.adaptive-theme.dark body #post-viewer.is-discussion-mode :is(
    #post-viewer-panel,
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-media-container,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    #viewer-form-container,
    .viewer-form-shell
),
html:root.adaptive-theme.dark body #media-viewer .media-viewer-post-slot :is(
    #viewer-sidebar,
    #viewer-scroll-region,
    #viewer-post-header,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    #viewer-form-container,
    .viewer-form-shell
) {
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) :is(
    #viewer-post-header,
    #viewer-media-container,
    #viewer-post-summary,
    #viewer-comments-block,
    #viewer-comments-list,
    .viewer-comments-head,
    #viewer-form-container
) {
    border-color: transparent !important;
}

html:root.adaptive-theme.dark body :is(
    #post-viewer.is-discussion-mode,
    #media-viewer .media-viewer-post-slot
) :is(
    .post-attachment-card,
    .post-file-selection-card,
    .post-hashtag-chip,
    #viewer-comments-list .comment-node,
    #viewer-comments-count,
    #viewer-comments-list > .py-20.text-center > .rounded-full,
    .comment-form-container
) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark body #post-viewer.is-discussion-mode
    #post-viewer-panel {
    border-color: var(--vmesta-post-line) !important;
    box-shadow: 0 1.6rem 4rem rgb(0 0 0 / .34) !important;
}

html:root.adaptive-theme.dark body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > .viewer-form-shell,
html:root.adaptive-theme.dark body #media-viewer .media-viewer-post-slot
    #viewer-sidebar > .viewer-form-shell {
    border-color: transparent !important;
    border-top-color: var(--vmesta-post-line) !important;
    background: var(--vmesta-post-surface) !important;
}

html:root.adaptive-theme.dark body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-form-container .comment-form-container,
html:root.adaptive-theme.dark body #media-viewer .media-viewer-post-slot
    #viewer-sidebar #viewer-form-container .comment-form-container {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
}

/* ------------[Интересы Monet: тот же блок, что соседние панели]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 179/203 */
html:root.adaptive-theme.dark.theme-monet-active body :is(
    .profile-interests-card,
    .interest-match-card
) {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    color: var(--vm-theme-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark.theme-monet-active body .profile-interests-card :is(
    .profile-interests-total,
    .profile-interest-group-title span,
    .profile-interest-tag,
    .profile-interest-input,
    .profile-interests-reminder,
    .profile-interests-ready,
    .profile-interests-save,
    .profile-interests-cancel
) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark.theme-monet-active body .profile-interests-card
    .profile-interest-group + .profile-interest-group {
    border-top-color: var(--vmesta-post-line) !important;
}

/* Старые групповые :is()-правила содержат ID и выигрывают каскад даже при
   совпадении по короткой ветке. Фиксируем итоговый цвет по реальной структуре. */
html:root.adaptive-theme.dark.theme-monet-active body
    #profile-layout-grid #content-main .post-item,
html:root.adaptive-theme.dark.theme-monet-active body
    #tab-feed .post-item {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark.theme-monet-active body
    #profile-layout-grid #content-main .post-item:hover,
html:root.adaptive-theme.dark.theme-monet-active body
    #tab-feed .post-item:hover {
    background: var(--vmesta-post-surface) !important;
}

html:root.adaptive-theme.dark.theme-monet-active body
    #profile-layout-grid #content-main .profile-publisher-hub .space-switchboard,
html:root.adaptive-theme.dark.theme-monet-active body
    #tab-feed .feed-search-hub .space-switchboard {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.dark.theme-monet-active body
    #profile-right-rail #side-achievements #profile-interests-card {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ------------[Дневная Monet: полная покраска ленты]------------ // Оформляет связанный блок интерфейса.
   Лента, публикации и левая навигация используют один цвет полной темы.
   Белая карточка больше не вклинивается между окрашенными панелями. Модуль: «оформление интерфейса». Часть 41/50 */
html.adaptive-theme:not(.dark).theme-monet-active {
    --vmesta-monet-profile-surface: var(--vmesta-full-panel);
    --vmesta-post-surface: var(--vmesta-monet-profile-surface);
    --vmesta-post-surface-hover: var(--vmesta-post-surface);
    --vmesta-post-inner: color-mix(in srgb, var(--vmesta-post-surface) 72%, #ffffff 28%);
    --vmesta-post-inner-strong: color-mix(in srgb, var(--vmesta-post-surface) 80%, var(--color-dynamic) 20%);
    --vmesta-feed-surface: var(--vmesta-monet-profile-surface);
    --vmesta-feed-active: var(--vmesta-post-inner-strong);
    --vmesta-rail-surface: var(--vmesta-monet-profile-surface);
}

html:root.adaptive-theme:not(.dark).theme-monet-active body
    #profile-layout-grid #content-main .post-item,
html:root.adaptive-theme:not(.dark).theme-monet-active body
    #tab-feed .post-item,
html:root.adaptive-theme:not(.dark).theme-monet-active body
    #profile-layout-grid #content-main .profile-publisher-hub .space-switchboard,
html:root.adaptive-theme:not(.dark).theme-monet-active body
    #tab-feed .feed-search-hub .space-switchboard,
html:root.adaptive-theme:not(.dark).theme-monet-active body
    #profile-left-rail nav,
html:root.adaptive-theme:not(.dark).theme-monet-active body
    #profile-left-rail #profile-friends-open-button {
    border-color: transparent !important;
    background: var(--vmesta-monet-profile-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme:not(.dark).theme-monet-active body :is(
    #profile-layout-grid #content-main .post-item,
    #tab-feed .post-item
):hover {
    background: var(--vmesta-monet-profile-surface) !important;
}

/* ------------[Monet: обсуждение как одно полотно]------------ // Оформляет связанный блок интерфейса.
   Повышенная структурная специфичность убирает отдельную полосу заголовка,
   отличающийся пустой список и белый зазор перед формой в обоих режимах. Модуль: «оформление интерфейса». Часть 42/50 */
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > #viewer-post-header,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > #viewer-scroll-region,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-post-summary,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-comments-block,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-comments-block > .viewer-comments-head,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-comments-list,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > .viewer-form-shell,
html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-form-container {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar #viewer-comments-block > .viewer-comments-head {
    position: relative !important;
    top: auto !important;
}

html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar > .viewer-form-shell {
    border-top: 1px solid var(--vmesta-post-line) !important;
}

html:root.adaptive-theme.theme-monet-active body #post-viewer.is-discussion-mode
    #post-viewer-panel #viewer-sidebar :is(
        .post-attachment-card,
        .post-file-selection-card,
        #viewer-comments-list .comment-node,
        #viewer-comments-count,
        #viewer-comments-list > .py-20.text-center > .rounded-full,
        .comment-form-container
    ) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ------------[Меню публикации и комментария Monet]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 182/203 */
html:root.adaptive-theme.theme-monet-active body :is(
    [id^="post-menu-"],
    #post-viewer.is-discussion-mode .comment-dropdown,
    #media-viewer .media-viewer-post-slot .comment-dropdown
) {
    min-width: 10.75rem;
    overflow: hidden;
    border: 0 !important;
    border-radius: .9rem !important;
    background: var(--vmesta-post-inner-strong) !important;
    background-image: none !important;
    padding: .28rem !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: 0 1rem 2.6rem rgb(0 0 0 / .22) !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    [id^="post-menu-"],
    #post-viewer.is-discussion-mode .comment-dropdown,
    #media-viewer .media-viewer-post-slot .comment-dropdown
) > button {
    border: 0 !important;
    border-radius: .65rem !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    [id^="post-menu-"],
    #post-viewer.is-discussion-mode .comment-dropdown,
    #media-viewer .media-viewer-post-slot .comment-dropdown
) > button:not(.text-red-500):is(:hover, :focus, :focus-visible) {
    background: var(--vmesta-post-inner) !important;
    color: var(--vmesta-ui-primary) !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    [id^="post-menu-"],
    #post-viewer.is-discussion-mode .comment-dropdown,
    #media-viewer .media-viewer-post-slot .comment-dropdown
) > button.text-red-500:is(:hover, :focus, :focus-visible) {
    background: color-mix(in srgb, var(--vmesta-post-inner-strong) 82%, #ef4444 18%) !important;
    color: #ef4444 !important;
}

/* Фотопросмотрщик повторяет ту же цельную колонку поста и обсуждения. */
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-sidebar,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-scroll-region,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-post-header,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-post-summary,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-comments-block,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-comments-block > .viewer-comments-head,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-comments-list,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot .viewer-form-shell,
html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot #viewer-form-container {
    border-color: transparent !important;
    background: var(--vmesta-post-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot :is(
        .post-attachment-card,
        .post-file-selection-card,
        #viewer-comments-list .comment-node,
        #viewer-comments-count,
        #viewer-comments-list > .py-20.text-center > .rounded-full,
        .comment-form-container
    ) {
    border-color: transparent !important;
    background: var(--vmesta-post-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #media-viewer
    .media-viewer-post-slot .viewer-form-shell {
    border-top: 1px solid var(--vmesta-post-line) !important;
}

/* ------------[Сообщения: различимые поиск, редактор и голосование]------------ // Оформляет связанный блок интерфейса.
   Служебные блоки получают собственную ступень цвета, а не повторяют фон
   переписки. Опрос остаётся заметной карточкой во всех четырёх режимах темы. Модуль: «оформление интерфейса». Часть 43/50 */
#messages-root,
#messages-side-root {
    --msg-search-shell-surface: color-mix(in srgb, var(--msg-panel) 90%, var(--msg-accent) 10%);
    --msg-search-field-surface: color-mix(in srgb, var(--msg-panel) 76%, var(--msg-accent) 24%);
    --msg-composer-surface: color-mix(in srgb, var(--msg-panel) 78%, var(--msg-accent) 22%);
    --msg-poll-surface: color-mix(in srgb, var(--msg-panel) 68%, var(--msg-accent) 32%);
    --msg-poll-option-surface: color-mix(in srgb, var(--msg-panel) 88%, var(--msg-bg) 12%);
    --msg-poll-option-active: color-mix(in srgb, var(--msg-poll-option-surface) 72%, var(--msg-accent) 28%);
}

html.dark :is(#messages-root, #messages-side-root) {
    --msg-search-shell-surface: color-mix(in srgb, var(--msg-panel) 84%, var(--msg-accent) 16%);
    --msg-search-field-surface: color-mix(in srgb, var(--msg-panel) 70%, var(--msg-accent) 30%);
    --msg-composer-surface: color-mix(in srgb, var(--msg-panel) 72%, var(--msg-accent) 28%);
    --msg-poll-surface: color-mix(in srgb, var(--msg-panel) 70%, var(--msg-accent) 30%);
    --msg-poll-option-surface: color-mix(in srgb, var(--msg-bg) 78%, var(--msg-panel) 22%);
    --msg-poll-option-active: color-mix(in srgb, var(--msg-poll-option-surface) 68%, var(--msg-accent) 32%);
}

/* В дневной Monet внешняя строка поиска спокойнее, чем её поле: большая
   плашка больше не выглядит случайно залитым персиковым прямоугольником. */
html.adaptive-theme.theme-monet-active:not(.dark) body.messages-route
    :is(#messages-root, #messages-side-root) {
    --msg-search-shell-surface: color-mix(in srgb, var(--vmesta-ui-panel) 93%, var(--vmesta-ui-primary) 7%);
    --msg-search-field-surface: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%);
    --msg-composer-surface: color-mix(in srgb, var(--vmesta-ui-panel) 70%, var(--vmesta-ui-primary) 30%);
    --msg-poll-surface: color-mix(in srgb, var(--vmesta-ui-panel) 64%, var(--vmesta-ui-primary) 36%);
    --msg-poll-option-surface: color-mix(in srgb, var(--vmesta-ui-panel) 88%, var(--adaptive-background) 12%);
}

html:root body .messenger-chat-search {
    border: 0 !important;
    background: var(--msg-search-shell-surface) !important;
    background-image: none !important;
}

html:root.adaptive-theme.theme-monet-active:not(.dark) body.messages-route
    :is(#messages-root, #messages-side-root) .messenger-chat-search {
    background: var(--msg-search-shell-surface) !important;
}

html:root body .messenger-chat-search :is(input, button) {
    border: 0 !important;
    background: var(--msg-search-field-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body .messenger-chat-search input:focus {
    background: var(--msg-search-field-surface) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 46%, transparent) !important;
}

html.adaptive-theme.theme-monet-active:not(.dark) body.messages-route #global-search {
    border: 0 !important;
    background: var(--msg-search-shell-surface, color-mix(in srgb, var(--vmesta-ui-panel) 90%, var(--vmesta-ui-primary) 10%)) !important;
    box-shadow: none !important;
}

html.adaptive-theme.theme-monet-active:not(.dark) body.messages-route #global-search:focus {
    background: var(--msg-search-field-surface, color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%)) !important;
}

html:root body .messenger-composer {
    border: 0 !important;
    background: var(--msg-composer-surface) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 18%, transparent) !important;
}

html:root body .messenger-composer textarea {
    color: var(--msg-text) !important;
}

/* Голосование — отдельная карточка, а не ещё один оттенок пузыря сообщения. */
html:root body .messenger-bubble.is-poll {
    --message-shape-fill: var(--msg-poll-surface);
    border: 0 !important;
    background: var(--msg-poll-surface) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 26%, transparent) !important;
}

html:root body .messenger-poll-card {
    border-radius: .78rem;
    background: transparent !important;
    color: var(--msg-text) !important;
}

html:root body .messenger-poll-option {
    border: 0 !important;
    background: var(--msg-poll-option-surface) !important;
    color: var(--msg-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-line) 52%, transparent) !important;
}

html:root body .messenger-poll-option::before {
    background: color-mix(in srgb, var(--msg-accent) 24%, transparent) !important;
}

html:root body .messenger-poll-option:is(:hover, .is-selected) {
    background: var(--msg-poll-option-active) !important;
    color: var(--msg-text) !important;
}

html:root body .messenger-poll-public-voters {
    border: 0 !important;
    background: var(--msg-poll-option-surface) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-line) 52%, transparent) !important;
}

html:root body .messenger-poll-card > footer,
html:root body .messenger-poll-card > footer > span {
    color: var(--msg-text) !important;
    font-size: .52rem !important;
    line-height: 1.25;
    opacity: 1 !important;
}

html:root body .messenger-poll-card > footer > span > .messenger-icon,
html:root body .messenger-poll-card > footer > span > small {
    color: var(--msg-accent) !important;
}

html:root body .messenger-poll-card > footer b,
html:root body .messenger-poll-card > footer em {
    color: var(--msg-text) !important;
    font-size: .52rem !important;
    font-weight: 850 !important;
}

html:root:not(.dark) body .messenger-poll-card > footer,
html:root:not(.dark) body .messenger-poll-card > footer > span,
html:root:not(.dark) body .messenger-poll-card > footer b,
html:root:not(.dark) body .messenger-poll-card > footer em {
    color: color-mix(in srgb, var(--msg-text) 78%, #111827 22%) !important;
}

/* Старый отрицательный вынос был шире самого визуального кончика. Хвост
   теперь компактнее и заходит под край карточки, поэтому не образует выступ. */
html:root body .messenger-bubble.is-poll > .messenger-bubble-tail {
    bottom: .04rem !important;
    width: .7rem !important;
    height: .84rem !important;
    color: var(--msg-poll-surface) !important;
    filter: none !important;
}

html:root body .messenger-message.is-outgoing .messenger-bubble.is-poll > .messenger-bubble-tail {
    right: -.27rem !important;
}

html:root body .messenger-message.is-incoming .messenger-bubble.is-poll > .messenger-bubble-tail {
    left: -.27rem !important;
}

html:root body .messenger-bubble.is-poll > .messenger-bubble-tail-fill {
    fill: var(--msg-poll-surface) !important;
}

/* Переходные слои перекраски ниже заменены единым файлом theme-system.css.
   Они остаются в истории до полной очистки style.css, но больше не участвуют
   в каскаде и не могут переопределять смысловые уровни темы. */
@media not all {
/* ------------[Monet: одна система поверхностей на всём сайте]------------ // Оформляет связанный блок интерфейса.
   Базовый цвет повторяет карточку публикации. Крупные панели больше не
   используют собственные белые, серые или почти чёрные заливки. Модуль: «оформление интерфейса». Часть 44/50 */
html.adaptive-theme.theme-monet-active:not(.dark) {
    --vmesta-monet-surface: color-mix(in srgb, var(--vmesta-ui-panel) 76%, var(--vmesta-ui-primary) 24%);
    --vmesta-monet-inner: color-mix(in srgb, var(--vmesta-monet-surface) 74%, #ffffff 26%);
    --vmesta-monet-strong: color-mix(in srgb, var(--vmesta-monet-surface) 82%, var(--vmesta-ui-primary) 18%);
    --vmesta-monet-line: color-mix(in srgb, var(--vmesta-ui-primary) 24%, transparent);
    --vmesta-monet-ink: color-mix(in srgb, #111827 62%, var(--vmesta-ui-primary) 38%);
    --vmesta-monet-muted: color-mix(in srgb, var(--vmesta-monet-ink) 74%, var(--vmesta-ui-primary) 26%);
}

html.adaptive-theme.theme-monet-active.dark {
    --vmesta-monet-surface: color-mix(in srgb, var(--vm-theme-panel) 88%, var(--vmesta-ui-primary) 12%);
    --vmesta-monet-inner: color-mix(in srgb, var(--vmesta-monet-surface) 76%, var(--adaptive-background) 24%);
    --vmesta-monet-strong: color-mix(in srgb, var(--vmesta-monet-surface) 76%, var(--vmesta-ui-primary) 24%);
    --vmesta-monet-line: color-mix(in srgb, var(--vmesta-ui-primary) 30%, transparent);
    --vmesta-monet-ink: color-mix(in srgb, #f8fafc 88%, var(--vmesta-ui-primary) 12%);
    --vmesta-monet-muted: color-mix(in srgb, #cbd5e1 78%, var(--vmesta-ui-primary) 22%);
}

html.adaptive-theme.theme-monet-active {
    --vmesta-ui-ink: var(--vmesta-monet-ink);
    --vmesta-ui-muted: var(--vmesta-monet-muted);
    --adaptive-text: var(--vmesta-monet-ink);
    --adaptive-text-active: var(--vmesta-monet-ink);
    --adaptive-text-strong: var(--vmesta-monet-ink);
    --adaptive-text-secondary: var(--vmesta-monet-muted);
    --adaptive-text-passive: var(--vmesta-monet-muted);
    --adaptive-text-muted: var(--vmesta-monet-muted);
    --vmesta-post-surface: var(--vmesta-monet-surface);
    --vmesta-post-surface-hover: var(--vmesta-monet-surface);
    --vmesta-post-inner: var(--vmesta-monet-inner);
    --vmesta-post-inner-strong: var(--vmesta-monet-strong);
    --vmesta-post-line: var(--vmesta-monet-line);
    --vmesta-rail-surface: var(--vmesta-monet-surface);
    --vmesta-feed-surface: var(--vmesta-monet-surface);
    --vmesta-feed-active: var(--vmesta-monet-strong);
    --vmesta-full-panel: var(--vmesta-monet-surface);
    --vmesta-full-panel-soft: var(--vmesta-monet-inner);
    --vmesta-menu-surface: var(--vmesta-monet-inner);
    --vmesta-messages-surface: var(--vmesta-monet-surface);
}

/* Шапка, навигация профиля и обе боковые колонки используют цвет поста. */
html:root.adaptive-theme.theme-monet-active body :is(
    #site-header,
    #profile-tabs-container,
    #profile-left-rail nav,
    #profile-left-rail #profile-friends-open-button,
    #profile-left-rail .space-left-photos,
    #profile-right-rail .achievement-sidebar-card,
    #profile-right-rail .profile-interests-card,
    #profile-right-rail .interest-match-card
) {
    border-color: transparent !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(#global-search, .spaces-index-search) {
    border-color: transparent !important;
    background: var(--vmesta-monet-inner) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #global-search:focus {
    background: var(--vmesta-monet-strong) !important;
    box-shadow: inset 0 0 0 1px var(--vmesta-monet-line) !important;
}

html:root.adaptive-theme.theme-monet-active body :is(#global-search, .spaces-index-search input)::placeholder {
    color: var(--vmesta-monet-muted) !important;
    opacity: 1 !important;
}

/* Индекс пространств, лента пространства и боковые карточки продолжают ту
   же поверхность. Белый фон больше не появляется при смене маршрута. */
html:root.adaptive-theme.theme-monet-active body :is(
    .space-intro-card,
    .spaces-index-toolbar,
    .spaces-index-card,
    .spaces-index-card .spaces-index-open,
    .spaces-index-card .spaces-index-body,
    .space-switchboard,
    .space-composer,
    .space-side-card,
    .space-list-panel
) {
    border-color: transparent !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .spaces-index-card:hover,
    .spaces-index-card:hover .spaces-index-open,
    .spaces-index-card:hover .spaces-index-body,
    .space-post:hover
) {
    background: var(--vmesta-monet-surface) !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .space-intro-main h2,
    .space-intro-main p,
    .space-kicker,
    .spaces-index-body strong,
    .spaces-index-body small,
    .space-switchboard,
    .space-switchboard button,
    .space-news-strip
) {
    color: var(--vmesta-monet-ink) !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .space-tabs button.is-active,
    .spaces-index-scope button.is-active,
    .spaces-index-view button,
    .publisher-search-button,
    .publisher-create-button
) {
    border-color: transparent !important;
    background: var(--vmesta-monet-inner) !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .space-tabs,
    .space-news-strip
) {
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* «О пространстве»: одно полотно окна и заметные внутренние карточки. */
html:root.adaptive-theme.theme-monet-active body #space-about-panel,
html:root.adaptive-theme.theme-monet-active body #space-about-panel :is(
    .space-about-head,
    .space-about-body,
    .space-about-footer,
    .space-about-identity-bar
) {
    border-color: transparent !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #space-about-panel :is(
    .space-about-card,
    .space-about-quote,
    .space-about-longform,
    .space-about-contact-section,
    .profile-spaces-section
) {
    border-color: transparent !important;
    background: var(--vmesta-monet-inner) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body #space-about-panel .space-about-card:hover {
    background: var(--vmesta-monet-inner) !important;
}

html:root.adaptive-theme.theme-monet-active body #space-about-panel :is(
    .space-about-card > span,
    .space-about-card strong,
    .space-about-card button,
    .space-about-card p,
    .space-about-card small,
    .space-about-quote strong,
    .space-about-longform header strong,
    .space-about-longform > p,
    .profile-spaces-heading,
    .profile-space-card
) {
    color: var(--vmesta-monet-ink) !important;
}

html:root.adaptive-theme.theme-monet-active body #space-about-panel :is(input, textarea, select) {
    border-color: transparent !important;
    background: var(--vmesta-monet-strong) !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

/* Достижения наследуют тему Monet, включая модальное окно и закрытые уровни. */
html:root.adaptive-theme.theme-monet-active body :is(
    .achievement-sidebar-card,
    .achievements-dialog,
    .achievement-showcase-dialog
) {
    --achievement-surface: var(--vmesta-monet-surface);
    --achievement-surface-soft: var(--vmesta-monet-inner);
    --achievement-line: var(--vmesta-monet-line);
    --achievement-text: var(--vmesta-monet-ink);
    --achievement-muted: var(--vmesta-monet-muted);
    border-color: transparent !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .achievements-dialog-head,
    .achievements-scope-tabs,
    .achievements-dialog-tabs,
    .achievements-dialog-body,
    .achievement-showcase-dialog-body,
    .achievements-dialog-footer
) {
    border-color: var(--vmesta-monet-line) !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .achievement-row,
    .achievement-task,
    .achievement-scope-empty,
    .achievement-showcase-item,
    .achievement-showcase-empty,
    .achievement-badge,
    .achievements-scope-tabs button,
    .achievements-dialog-tabs button
) {
    border-color: transparent !important;
    background-color: var(--vmesta-monet-inner) !important;
    color: var(--vmesta-monet-ink);
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body :is(
    .achievements-scope-tabs button.is-active,
    .achievements-dialog-tabs button.is-active
) {
    background: var(--vmesta-monet-strong) !important;
    color: var(--vmesta-ui-primary) !important;
}

/* Мессенджер больше не берёт фон пузырей из старой чёрной/белой карточки. */
html:root.adaptive-theme.theme-monet-active body :is(#messages-root, #messages-side-root) {
    --msg-bg: var(--vmesta-monet-surface);
    --msg-panel: var(--vmesta-monet-surface);
    --msg-panel-strong: var(--vmesta-monet-strong);
    --msg-line: var(--vmesta-monet-line);
    --msg-text: var(--vmesta-monet-ink);
    --msg-muted: var(--vmesta-monet-muted);
    --msg-menu-surface: var(--vmesta-monet-inner);
    --msg-menu-soft: var(--vmesta-monet-inner);
    --msg-menu-active: var(--vmesta-monet-strong);
    --msg-search-shell-surface: var(--vmesta-monet-surface);
    --msg-search-field-surface: var(--vmesta-monet-inner);
    --msg-composer-surface: var(--vmesta-monet-inner);
    --msg-poll-surface: var(--vmesta-monet-strong);
    --msg-poll-option-surface: var(--vmesta-monet-inner);
    --msg-poll-option-active: var(--vmesta-monet-surface);
}

html:root.adaptive-theme.theme-monet-active body.messages-route
    :is(#messages-root, #messages-side-root) :is(
        .messenger-shell,
        .messenger-dialogs-panel,
        .messenger-conversation,
        .messenger-side-panel,
        .messenger-side-section,
        .messenger-main-header,
        .messenger-conversation-header,
        .messenger-message-stream,
        .messenger-loading
    ) {
    border-color: transparent !important;
    background: var(--vmesta-monet-surface) !important;
    background-image: none !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body.messages-route
    :is(#messages-root, #messages-side-root) :is(
        .messenger-search,
        .messenger-chat-search,
        .messenger-composer,
        .messenger-chat-row.is-active,
        .messenger-chat-row:hover,
        .messenger-room-panel,
        .messenger-pinned-panel,
        .messenger-inline-media-bar
    ) {
    border-color: transparent !important;
    background: var(--vmesta-monet-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root.adaptive-theme.theme-monet-active body.messages-route
    .messenger-message.is-incoming .messenger-bubble:not(.is-poll) {
    --message-shape-fill: var(--vmesta-monet-inner);
    background: var(--message-shape-fill) !important;
}

html:root.adaptive-theme.theme-monet-active body.messages-route
    .messenger-message.is-outgoing .messenger-bubble:not(.is-poll) {
    --message-shape-fill: var(--vmesta-monet-strong);
    background: var(--message-shape-fill) !important;
}

html:root.adaptive-theme.theme-monet-active body.messages-route
    :is(.messenger-chat-menu, .messenger-message-menu, .messenger-attach-menu, .messenger-blank-context-menu) {
    border-color: transparent !important;
    background: var(--vmesta-monet-inner) !important;
    color: var(--vmesta-monet-ink) !important;
    box-shadow: none !important;
}

/* ------------[Все темы: единая поверхность крупных панелей]------------ // Оформляет связанный блок интерфейса.
   Обычная, Monet и каталоговые палитры используют цвет своего поста как
   опорный. Разница остаётся только у вложенных элементов и действий. Модуль: «оформление интерфейса». Часть 45/50 */
:root {
    --vmesta-unified-surface: var(--standard-panel, #ffffff);
    --vmesta-unified-inner: var(--standard-panel-soft, #f8fafc);
    --vmesta-unified-strong: var(--standard-active, #e5eefc);
    --vmesta-unified-ink: var(--standard-text-active, #1f2937);
    --vmesta-unified-muted: var(--standard-text-passive, #64748b);
    --vmesta-unified-line: transparent;
}

html.adaptive-theme {
    --vmesta-unified-surface: var(--vmesta-post-surface);
    --vmesta-unified-inner: var(--vmesta-post-inner);
    --vmesta-unified-strong: var(--vmesta-post-inner-strong);
    --vmesta-unified-ink: var(--vmesta-ui-ink);
    --vmesta-unified-muted: var(--vmesta-ui-muted);
    --vmesta-unified-line: var(--vmesta-post-line);
}

html:root body :is(
    #site-header,
    #profile-tabs-container,
    #profile-left-rail nav,
    #profile-left-rail #profile-friends-open-button,
    #profile-left-rail .space-left-photos,
    #profile-right-rail .achievement-sidebar-card,
    #profile-right-rail .profile-interests-card,
    #profile-right-rail .interest-match-card,
    .space-intro-card,
    .spaces-index-toolbar,
    .spaces-index-card,
    .spaces-index-card .spaces-index-open,
    .spaces-index-card .spaces-index-body,
    .space-switchboard,
    .space-composer,
    .space-side-card,
    .space-list-panel
) {
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body :is(
    .spaces-index-card:hover,
    .spaces-index-card:hover .spaces-index-open,
    .spaces-index-card:hover .spaces-index-body,
    .post-item:hover,
    .space-post:hover
) {
    background: var(--vmesta-unified-surface) !important;
}

html:root body :is(#global-search, .spaces-index-search) {
    border-color: transparent !important;
    background: var(--vmesta-unified-inner) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body #global-search:focus {
    background: var(--vmesta-unified-strong) !important;
    box-shadow: none !important;
}

html:root body :is(#global-search, .spaces-index-search input)::placeholder {
    color: var(--vmesta-unified-muted) !important;
    opacity: 1 !important;
}

html:root body :is(
    .space-intro-main h2,
    .space-intro-main p,
    .space-kicker,
    .spaces-index-body strong,
    .spaces-index-body small,
    .space-switchboard,
    .space-switchboard button,
    .space-news-strip
) {
    color: var(--vmesta-unified-ink) !important;
}

html:root body :is(
    .space-tabs button.is-active,
    .spaces-index-scope button.is-active,
    .spaces-index-view button,
    .publisher-search-button,
    .publisher-create-button
) {
    border-color: transparent !important;
    background: var(--vmesta-unified-inner) !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body :is(.space-tabs, .space-news-strip) {
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Окно информации о пространстве повторяет структуру основной страницы. */
html:root body #space-about-panel,
html:root body #space-about-panel :is(.space-about-head, .space-about-body, .space-about-footer, .space-about-identity-bar) {
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body #space-about-panel :is(
    .space-about-card,
    .space-about-quote,
    .space-about-longform,
    .space-about-contact-section,
    .profile-spaces-section
) {
    border-color: transparent !important;
    background: var(--vmesta-unified-inner) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body #space-about-panel .space-about-card:hover {
    background: var(--vmesta-unified-inner) !important;
}

html:root body #space-about-panel :is(
    .space-about-card > span,
    .space-about-card strong,
    .space-about-card button,
    .space-about-card p,
    .space-about-card small,
    .space-about-quote strong,
    .space-about-longform header strong,
    .space-about-longform > p,
    .profile-spaces-heading,
    .profile-space-card
) {
    color: var(--vmesta-unified-ink) !important;
}

html:root body #space-about-panel :is(input, textarea, select) {
    border-color: transparent !important;
    background: var(--vmesta-unified-strong) !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

/* Боковая витрина и большое окно достижений больше не переключаются на
   чужую чёрную поверхность при открытии из цветной темы. */
html:root body :is(.achievement-sidebar-card, .achievements-dialog, .achievement-showcase-dialog) {
    --achievement-surface: var(--vmesta-unified-surface);
    --achievement-surface-soft: var(--vmesta-unified-inner);
    --achievement-line: var(--vmesta-unified-line);
    --achievement-text: var(--vmesta-unified-ink);
    --achievement-muted: var(--vmesta-unified-muted);
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body :is(
    .achievements-dialog-head,
    .achievements-scope-tabs,
    .achievements-dialog-tabs,
    .achievements-dialog-body,
    .achievement-showcase-dialog-body,
    .achievements-dialog-footer
) {
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
}

html:root body :is(
    .achievement-row,
    .achievement-task,
    .achievement-scope-empty,
    .achievement-showcase-item,
    .achievement-showcase-empty,
    .achievement-badge,
    .achievements-scope-tabs button,
    .achievements-dialog-tabs button
) {
    border-color: transparent !important;
    background-color: var(--vmesta-unified-inner) !important;
    box-shadow: none !important;
}

html:root body :is(.achievements-scope-tabs button.is-active, .achievements-dialog-tabs button.is-active) {
    background: var(--vmesta-unified-strong) !important;
}

/* Мессенджер во всех темах: поверхности различаются цветом, не рамками. */
html:root body :is(#messages-root, #messages-side-root) {
    --msg-bg: var(--vmesta-unified-surface);
    --msg-panel: var(--vmesta-unified-surface);
    --msg-panel-strong: var(--vmesta-unified-strong);
    --msg-line: transparent;
    --msg-text: var(--vmesta-unified-ink);
    --msg-muted: var(--vmesta-unified-muted);
    --msg-menu-surface: var(--vmesta-unified-inner);
    --msg-menu-soft: var(--vmesta-unified-inner);
    --msg-menu-active: var(--vmesta-unified-strong);
    --msg-search-shell-surface: var(--vmesta-unified-surface);
    --msg-search-field-surface: var(--vmesta-unified-inner);
    --msg-composer-surface: var(--vmesta-unified-inner);
    --msg-poll-surface: var(--vmesta-unified-strong);
    --msg-poll-option-surface: var(--vmesta-unified-inner);
    --msg-poll-option-active: var(--vmesta-unified-surface);
}

html:root body.messages-route :is(#messages-root, #messages-side-root) :is(
    .messenger-shell,
    .messenger-dialogs-panel,
    .messenger-conversation,
    .messenger-side-panel,
    .messenger-side-section,
    .messenger-main-header,
    .messenger-conversation-header,
    .messenger-message-stream,
    .messenger-loading
) {
    border: 0 !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body.messages-route :is(#messages-root, #messages-side-root) :is(
    .messenger-search,
    .messenger-chat-search,
    .messenger-composer,
    .messenger-room-panel,
    .messenger-pinned-panel,
    .messenger-inline-media-bar
) {
    border: 0 !important;
    background: var(--vmesta-unified-inner) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body.messages-route :is(#messages-root, #messages-side-root)
    .messenger-chat-search :is(input, button),
html:root body.messages-route :is(#messages-root, #messages-side-root)
    .messenger-composer textarea {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html:root body.messages-route :is(#messages-root, #messages-side-root)
    .messenger-chat-row:is(:hover, .is-active) {
    border: 0 !important;
    background: var(--vmesta-unified-inner) !important;
    box-shadow: none !important;
}

html:root body.messages-route .messenger-message.is-incoming .messenger-bubble:not(.is-poll) {
    --message-shape-fill: var(--vmesta-unified-inner);
    border-color: transparent !important;
    background: var(--message-shape-fill) !important;
    box-shadow: none !important;
}

html:root body.messages-route .messenger-message.is-outgoing .messenger-bubble:not(.is-poll) {
    --message-shape-fill: var(--vmesta-unified-strong);
    border-color: transparent !important;
    background: var(--message-shape-fill) !important;
    box-shadow: none !important;
}

html:root body.messages-route #messages-root :is(
    .messenger-chat-menu,
    .messenger-message-menu,
    .messenger-attach-menu,
    .messenger-blank-context-menu
) {
    border: 0 !important;
    background: var(--vmesta-unified-inner) !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

/* ------------[Финальная синхронизация поверхностей всех тем]------------ // Оформляет связанный блок интерфейса.
   Главная карточка темы является источником цвета для шапки, ленты,
   боковых панелей, пространств и сообщений. Модуль: «оформление интерфейса». Часть 46/50 */
html.adaptive-theme.theme-monet-active {
    --vmesta-unified-surface: var(--vmesta-monet-surface);
}

html.adaptive-theme:not(.theme-monet-active):not(.dark) {
    --vmesta-unified-surface: var(--adaptive-surface);
}

html.adaptive-theme:not(.theme-monet-active).dark {
    --vmesta-unified-surface: var(--vm-theme-panel);
}

html:root.adaptive-theme.theme-monet-active body :is(
    #site-header,
    #profile-tabs-container,
    #profile-left-rail nav,
    #profile-left-rail #profile-friends-open-button,
    #profile-left-rail .space-left-photos,
    #profile-right-rail .achievement-sidebar-card,
    #profile-right-rail .profile-interests-card,
    #profile-right-rail .interest-match-card,
    .space-intro-card,
    .spaces-index-toolbar,
    .spaces-index-card,
    .spaces-index-card .spaces-index-open,
    .spaces-index-card .spaces-index-body,
    .space-switchboard,
    .space-composer,
    .space-side-card,
    .space-list-panel,
    .post-item,
    .space-post
),
html:root.adaptive-theme:not(.theme-monet-active) body :is(
    #site-header,
    #profile-tabs-container,
    #profile-left-rail nav,
    #profile-left-rail #profile-friends-open-button,
    #profile-left-rail .space-left-photos,
    #profile-right-rail .achievement-sidebar-card,
    #profile-right-rail .profile-interests-card,
    #profile-right-rail .interest-match-card,
    .space-intro-card,
    .spaces-index-toolbar,
    .spaces-index-card,
    .spaces-index-card .spaces-index-open,
    .spaces-index-card .spaces-index-body,
    .space-switchboard,
    .space-composer,
    .space-side-card,
    .space-list-panel,
    .post-item,
    .space-post
),
html:root:not(.adaptive-theme) body :is(
    #site-header,
    #profile-tabs-container,
    #profile-left-rail nav,
    #profile-left-rail #profile-friends-open-button,
    #profile-left-rail .space-left-photos,
    #profile-right-rail .achievement-sidebar-card,
    #profile-right-rail .profile-interests-card,
    #profile-right-rail .interest-match-card,
    .space-intro-card,
    .spaces-index-toolbar,
    .spaces-index-card,
    .spaces-index-card .spaces-index-open,
    .spaces-index-card .spaces-index-body,
    .space-switchboard,
    .space-composer,
    .space-side-card,
    .space-list-panel,
    .post-item,
    .space-post
) {
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    background-image: none !important;
    color: var(--vmesta-unified-ink) !important;
    box-shadow: none !important;
}

html:root body :is(.post-item, .space-post):hover {
    border-color: transparent !important;
    background: var(--vmesta-unified-surface) !important;
    box-shadow: none !important;
}

/* В мессенджере контуры не участвуют в разделении уровней: ни у окна,
   ни у поиска, ни у нижней панели ввода. */
html:root body :is(#messages-root, #messages-side-root),
html:root body :is(#messages-root, #messages-side-root) :is(
    .messenger-shell,
    .messenger-dialogs-panel,
    .messenger-conversation,
    .messenger-side-panel,
    .messenger-side-section,
    .messenger-main-header,
    .messenger-conversation-header,
    .messenger-message-stream,
    .messenger-search,
    .messenger-chat-search,
    .messenger-composer
) {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}
}

/* Header search uses the exact themed surface of the music button.  This is
   intentionally last: route/theme redraw rules above must not repaint it. */
html:root body #site-header #global-search,
html:root body #site-header #global-search:focus {
    border: 0 !important;
    background-color: var(--vmesta-rail-surface) !important;
    background-image: none !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #site-header .search-wrapper svg {
    color: var(--vmesta-ui-primary) !important;
}

/* ===== Message mentions ===== */
.messenger-mention-picker {
    position: absolute;
    z-index: 90;
    left: 3.15rem;
    bottom: calc(100% + .45rem);
    display: none;
    width: min(22rem, calc(100% - 6.6rem));
    max-height: 15.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 20%, var(--msg-line));
    border-radius: 1rem;
    padding: .34rem;
    background: color-mix(in srgb, var(--msg-panel) 97%, transparent);
    box-shadow: 0 .9rem 2.2rem rgb(2 6 23 / .22);
    backdrop-filter: blur(16px);
}

.messenger-mention-picker.is-open { display: grid; }

.messenger-mention-option {
    display: grid;
    min-height: 2.9rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.7rem;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: .72rem;
    padding: .34rem .48rem;
    background: transparent;
    color: var(--msg-text);
    text-align: left;
    cursor: pointer;
}

.messenger-mention-option:is(:hover, .is-active) {
    background: color-mix(in srgb, var(--msg-panel) 78%, var(--msg-accent) 22%);
}

.messenger-mention-option .messenger-avatar { width: 2.15rem; height: 2.15rem; }
.messenger-mention-option > span { display: grid; min-width: 0; gap: .05rem; }
.messenger-mention-option strong,
.messenger-mention-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-mention-option strong { font-size: .7rem; }
.messenger-mention-option small { color: var(--msg-muted); font-size: .56rem; }
.messenger-mention-option > i { color: var(--msg-accent); font-size: .92rem; font-style: normal; font-weight: 950; text-align: center; }
.messenger-mention-empty { padding: 1rem; color: var(--msg-muted); font-size: .65rem; font-weight: 750; text-align: center; }

.messenger-inline-mention {
    display: inline;
    border: 0;
    border-radius: .35rem;
    padding: .04em .22em;
    background: color-mix(in srgb, var(--msg-accent) 16%, transparent);
    color: var(--msg-accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.messenger-mention-chat-badge {
    display: inline-flex;
    min-width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    border-radius: 999px;
    padding: 0 .4rem;
    background: var(--msg-accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 950;
}

.messenger-mention-chat-badge b { font-size: .52rem; }

.messenger-message-mention-marker {
    display: inline-grid;
    width: 1.18rem;
    height: 1.18rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: color-mix(in srgb, var(--msg-accent) 18%, transparent);
    color: var(--msg-accent);
    font-size: .65rem;
    font-weight: 950;
    cursor: pointer;
}

.messenger-message.is-mention-unread .messenger-bubble {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 50%, transparent);
}

.messenger-scroll-mention > span { font-size: 1rem; font-weight: 950; }
.messenger-scroll-tools > .messenger-scroll-mention {
    background: var(--msg-accent);
    color: #fff;
}

.messenger-message.is-mention-focus .messenger-bubble {
    animation: messenger-mention-focus 1.4s ease;
}

@keyframes messenger-mention-focus {
    0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 40%, transparent); }
    45% { box-shadow: inset 0 0 0 2px var(--msg-accent), 0 0 0 .32rem color-mix(in srgb, var(--msg-accent) 18%, transparent); }
}

@media (max-width: 42rem) {
    .messenger-mention-picker { left: .4rem; width: calc(100% - .8rem); }
}

/* ------------[Пять уровней тематических поверхностей]------------ // Оформляет связанный блок интерфейса.
   Один набор ступеней используется во всех палитрах. В полной Monet-палитре
   свет подмешивается отдельно, чтобы соседние зелёные/коричневые слои не
   сливались друг с другом. Модуль: «оформление интерфейса». Часть 47/50 */
html:root {
    --vmesta-tone-1: var(--vmesta-ui-panel, var(--adaptive-surface, #fff));
    --vmesta-tone-2: color-mix(in srgb, var(--vmesta-tone-1) 92%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 8%);
    --vmesta-tone-3: color-mix(in srgb, var(--vmesta-tone-1) 84%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 16%);
    --vmesta-tone-4: color-mix(in srgb, var(--vmesta-tone-1) 74%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 26%);
    --vmesta-tone-5: color-mix(in srgb, var(--vmesta-tone-1) 62%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 38%);
}

html:root.dark {
    --vmesta-tone-2: color-mix(in srgb, var(--vmesta-tone-1) 94%, white 6%);
    --vmesta-tone-3: color-mix(in srgb, var(--vmesta-tone-1) 89%, white 11%);
    --vmesta-tone-4: color-mix(in srgb, var(--vmesta-tone-1) 82%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 18%);
    --vmesta-tone-5: color-mix(in srgb, var(--vmesta-tone-1) 68%, var(--vmesta-ui-primary, var(--color-dynamic, #3b82f6)) 32%);
}

html:root.adaptive-theme.theme-monet-active:not(.dark) {
    --vmesta-tone-1: var(--vmesta-monet-profile-surface, var(--vmesta-ui-panel));
    --vmesta-tone-2: color-mix(in srgb, var(--vmesta-tone-1) 92%, white 8%);
    --vmesta-tone-3: color-mix(in srgb, var(--vmesta-tone-1) 82%, white 18%);
    --vmesta-tone-4: color-mix(in srgb, var(--vmesta-tone-1) 72%, white 28%);
    --vmesta-tone-5: color-mix(in srgb, var(--vmesta-tone-1) 68%, var(--vmesta-ui-primary) 32%);
}

/* Поиск и кнопка плеера используют одну заметную ступень во всех темах. */
html:root body #site-header #global-search,
html:root body #site-header #global-search:focus,
html:root body #site-header .global-music-toggle {
    border: 0 !important;
    background: var(--vmesta-tone-3) !important;
    background-image: none !important;
    color: var(--vmesta-ui-ink) !important;
    box-shadow: none !important;
}

html:root body #site-header #global-search:focus,
html:root body #site-header .global-music-toggle:is(:hover, :focus-visible) {
    background: var(--vmesta-tone-4) !important;
}

html:root body #site-header :is(.search-wrapper svg, .global-music-toggle) {
    color: var(--vmesta-ui-primary) !important;
}

/* ------------[Группы и каналы: цельная геометрия и баланс полей]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 188/203 */
html:root body :is(.messenger-room-settings-modal, .messenger-room-panel-layer) {
    --room-tone-1: var(--msg-bg);
    --room-tone-2: color-mix(in srgb, var(--msg-bg) 78%, var(--msg-panel) 22%);
    --room-tone-3: color-mix(in srgb, var(--msg-panel) 88%, var(--msg-accent) 12%);
    --room-tone-4: color-mix(in srgb, var(--msg-panel) 76%, var(--msg-accent) 24%);
    --room-tone-5: color-mix(in srgb, var(--msg-panel) 62%, var(--msg-accent) 38%);
}

html:root body .messenger-room-settings-modal > section {
    overflow: hidden !important;
    background: var(--room-tone-1) !important;
}

html:root body .messenger-room-settings-modal > section > header {
    background: var(--room-tone-2) !important;
}

html:root body .messenger-room-settings-form {
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto !important;
    padding: .72rem .82rem .8rem !important;
    background: var(--room-tone-1) !important;
    scrollbar-gutter: auto !important;
}

html:root body .messenger-room-settings-form :is(
    input[type="text"], textarea, select,
    .messenger-room-handle-field,
    .messenger-room-member-picker-trigger,
    .messenger-room-member-search,
    .messenger-room-member-picker-search
) {
    border: 0 !important;
    background: var(--room-tone-3) !important;
    color: var(--msg-text) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-settings-form :is(input[type="text"], textarea, select):focus,
html:root body .messenger-room-settings-form :is(.messenger-room-member-search, .messenger-room-member-picker-search):focus-within {
    background: var(--room-tone-4) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 42%, transparent) !important;
}

html:root body .messenger-room-handle-field > b { background: var(--room-tone-4) !important; }
html:root body .messenger-room-handle-field > input { background: transparent !important; }

html:root body :is(.messenger-room-invite-settings, .messenger-room-policy, .messenger-room-members-manage) {
    border: 0 !important;
    background: var(--room-tone-2) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-policy-toggle,
html:root body .messenger-room-member-add,
html:root body .messenger-room-settings-form > footer {
    background: var(--room-tone-3) !important;
}

html:root body .messenger-room-policy-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    gap: .28rem;
}

html:root body .messenger-room-policy-content > label,
html:root body .messenger-room-member-list article {
    border: 0 !important;
    background: var(--room-tone-3) !important;
    box-shadow: none !important;
}

html:root body .messenger-room-policy-content > label:has(input:checked) {
    background: var(--room-tone-4) !important;
}

html:root body .messenger-room-controls-grid { grid-template-columns: minmax(0, 1fr) !important; }

html:root body .messenger-room-policy-content > .messenger-room-slow-mode {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    box-sizing: border-box;
    gap: .42rem;
    padding: .62rem !important;
    background: var(--room-tone-2) !important;
}

html:root body .messenger-room-slow-mode-scale {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .16rem;
}

html:root body .messenger-room-slow-mode-scale > button {
    min-width: 0;
    min-height: 1.75rem;
    border: 0;
    border-radius: .48rem;
    padding: .25rem .12rem;
    background: transparent;
    color: var(--msg-muted);
    font-size: .53rem;
    font-weight: 800;
    cursor: pointer;
}

html:root body .messenger-room-slow-mode-scale > button.is-active {
    background: var(--room-tone-5);
    color: var(--msg-text);
}

html:root body .messenger-room-slow-mode-range {
    width: 100%;
    height: 1rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

html:root body .messenger-room-slow-mode-range::-webkit-slider-runnable-track {
    height: .48rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--msg-accent) 0 var(--slow-progress), var(--room-tone-4) var(--slow-progress) 100%);
}

html:root body .messenger-room-slow-mode-range::-webkit-slider-thumb {
    width: .9rem;
    height: .9rem;
    margin-top: -.21rem;
    appearance: none;
    border: .12rem solid var(--msg-accent);
    border-radius: 50%;
    background: var(--room-tone-1);
}

html:root body .messenger-room-slow-mode-range::-moz-range-track {
    height: .48rem;
    border-radius: 999px;
    background: var(--room-tone-4);
}

html:root body .messenger-room-slow-mode-range::-moz-range-progress { height: .48rem; border-radius: 999px; background: var(--msg-accent); }
html:root body .messenger-room-slow-mode-range::-moz-range-thumb { width: .7rem; height: .7rem; border: .12rem solid var(--msg-accent); border-radius: 50%; background: var(--room-tone-1); }

/* Профиль комнаты больше не оставляет полосы другого цвета по краям. */
html:root body .messenger-room-panel {
    box-sizing: border-box;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--room-tone-1) !important;
    scrollbar-gutter: auto !important;
}

html:root body .messenger-room-panel > header { background: var(--room-tone-2) !important; }
html:root body .messenger-room-panel > nav { background: var(--room-tone-3) !important; }
html:root body .messenger-room-panel > section { background: var(--room-tone-2) !important; scrollbar-gutter: auto !important; }
html:root body .messenger-room-panel :is(nav button, .messenger-room-panel-meta button, .messenger-room-panel-members article, .messenger-room-link-list article, .messenger-attachment-media, .messenger-attachment-file) { background: var(--room-tone-3) !important; }
html:root body .messenger-room-panel :is(nav button, .messenger-room-panel-meta button):is(:hover, .is-active) { background: var(--room-tone-4) !important; }
html:root body .messenger-room-panel-overview { background: transparent !important; }

/* Связь канала с пространством — компактная строка, а не растянутый баннер. */
html:root body .messenger-conversation.has-space-link { grid-template-rows: auto auto minmax(0, 1fr) auto; }
html:root body .messenger-conversation.has-space-link:is(.has-selection-toolbar, .has-chat-search) { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
html:root body .messenger-conversation.has-space-link.has-selection-toolbar.has-chat-search { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
html:root body .messenger-room-space-link {
    align-self: center;
    width: calc(100% - 1.5rem);
    min-height: 2.65rem;
    margin: .42rem .75rem;
    background: var(--room-tone-3, var(--msg-accent-soft)) !important;
}

html:root body .messenger-pinned-row:not(:has(.messenger-pinned-remove)) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 42rem) {
    html:root body .messenger-room-policy-content { grid-template-columns: minmax(0, 1fr); }
    html:root body .messenger-room-slow-mode-scale { gap: .08rem; }
    html:root body .messenger-room-slow-mode-scale > button { font-size: .48rem; }
}

/* ------------[Без неонового свечения]------------ // Оформляет связанный блок интерфейса.
   Глубина интерфейса строится цветом поверхностей, без цветных ореолов,
   светящихся рамок и теней при наведении или фокусе. Модуль: «оформление интерфейса». Часть 48/50 */
html:root {
    --adaptive-glow: transparent !important;
    --adaptive-glow-light: transparent !important;
    --adaptive-glow-dark: transparent !important;
    --page-theme-glow: transparent !important;
    --adaptive-ui-shadow: none !important;
    --adaptive-ui-shadow-hover: none !important;
    --standard-shadow: none !important;
    --standard-shadow-hover: none !important;
}

html:root body { background-image: none !important; }

html:root body *,
html:root body *::before,
html:root body *::after {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:root body :is(button, a, input, textarea, select, summary, [role="button"], [role="tab"], svg):is(:hover, :focus, :focus-visible, :active) {
    filter: none !important;
}

/* ------------[Смайлики без обводок форм]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 190/203 */
html:root body .emoji-picker-expanded,
html:root body .emoji-picker-expanded :is(
    .emoji-picker-header,
    .emoji-picker-mode-tabs,
    .emoji-picker-mode-button,
    .emoji-picker-search-wrap,
    .emoji-picker-search,
    .emoji-picker-tabs,
    .emoji-picker-tab,
    .emoji-picker-emoji-view,
    .emoji-picker-grid,
    .emoji-picker-sticker-view,
    .emoji-picker-item,
    button,
    input
) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html:root body .emoji-picker-expanded .emoji-picker-tabs { border-bottom: 0 !important; }
html:root body .emoji-picker-expanded .emoji-picker-tab[data-category="recent"]::after { display: none !important; }
html:root body .emoji-picker-expanded .emoji-picker-arrow { display: none !important; border: 0 !important; }

/* ------------[Компактные меню диалогов]------------ // Оформляет связанный блок интерфейса.
   Строковое меню измеряется после отрисовки и остаётся рядом с кнопкой,
   а уменьшенная геометрия не заставляет его преждевременно прыгать к шапке. Модуль: «оформление интерфейса». Часть 49/50 */
html:root body .messenger-chat-menu.is-row-menu {
    width: min(14.25rem, calc(100vw - 1rem)) !important;
    max-height: calc(100dvh - 1rem) !important;
    padding: .34rem !important;
    border-radius: .82rem !important;
}

html:root body .messenger-chat-menu.is-row-menu > button {
    min-height: 1.92rem !important;
    gap: .5rem !important;
    padding: .31rem .42rem !important;
    border-radius: .54rem !important;
    font-size: .67rem !important;
    line-height: 1.15;
}

html:root body .messenger-chat-menu.is-row-menu > button .messenger-icon {
    width: .82rem;
    height: .82rem;
}

/* ------------[Действия групп, каналов и пространств]------------ // Оформляет связанный блок интерфейса.
   Настройки, выход и закрытие образуют одну группу квадратных кнопок.
   Их фон берёт спокойную ступень текущей темы, поэтому остаётся читаемым
   и в дневной, и в цветной, и в тёмной палитре. Модуль: «оформление интерфейса». Часть 50/50 */
html:root body .messenger-room-panel-header-actions {
    position: absolute;
    z-index: 2;
    top: .42rem;
    right: .42rem;
    display: inline-flex;
    align-items: center;
    gap: .34rem;
}

html:root body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
),
html:root body .messenger-room-settings-header-actions > button,
html:root body .messenger-room-settings-modal > section > header > button {
    position: static !important;
    inset: auto !important;
    display: inline-grid !important;
    width: 2.12rem !important;
    min-width: 2.12rem !important;
    height: 2.12rem !important;
    min-height: 2.12rem !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .68rem !important;
    background: color-mix(in srgb, var(--msg-panel) 91%, var(--msg-accent) 9%) !important;
    color: var(--msg-muted) !important;
    cursor: pointer;
}

html:root body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
):is(:hover, :focus-visible),
html:root body .messenger-room-settings-header-actions > button:is(:hover, :focus-visible),
html:root body .messenger-room-settings-modal > section > header > button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--msg-panel) 82%, var(--msg-accent) 18%) !important;
    color: var(--msg-accent) !important;
}

html:root.dark body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
),
html:root.dark body .messenger-room-settings-header-actions > button,
html:root.dark body .messenger-room-settings-modal > section > header > button {
    background: var(--room-tone-3, var(--msg-menu-soft)) !important;
}

html:root body :is(.messenger-room-panel-header-actions, .messenger-room-settings-header-actions) .messenger-icon,
html:root body .messenger-room-settings-modal > section > header > button .messenger-icon {
    width: .78rem;
    height: .78rem;
}

/* ------------[Запись: контраст и подготовка перед отправкой]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 193/203 */
html:root body .messenger-recording-panel.is-active {
    background: color-mix(in srgb, var(--msg-panel) 84%, var(--msg-accent) 16%) !important;
    color: var(--msg-text) !important;
}

html:root body .messenger-recording-status span {
    color: color-mix(in srgb, var(--msg-text) 88%, var(--msg-muted)) !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-lock > em {
    background: var(--msg-menu-active) !important;
    color: var(--msg-text) !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-lock > i { color: var(--msg-accent) !important; opacity: 1 !important; }

.messenger-recording-review {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: .72rem;
    background: var(--msg-menu-surface);
    color: var(--msg-accent);
    cursor: pointer;
}

.messenger-recording-review:hover { background: var(--msg-menu-active); }
.messenger-recording-review .messenger-icon { width: .92rem; height: .92rem; }

/* После фиксации замок больше не является действием. Две следующие кнопки
   держим в одной группе, чтобы старые grid/absolute-правила не накладывали их. */
.messenger-recording-actions { display: none; }

html:root body .messenger-recording-panel.is-locked {
    grid-template-columns: auto auto minmax(5rem, 1fr) auto !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-lock {
    display: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions {
    position: static !important;
    grid-column: 4;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > button {
    position: static !important;
    display: grid !important;
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    padding: 0;
    place-items: center;
    border: 0 !important;
    border-radius: .72rem !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-review {
    position: absolute !important;
    right: .25rem;
    bottom: 3.05rem;
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    border-radius: .58rem !important;
    background: var(--msg-menu-surface) !important;
    color: var(--msg-accent) !important;
    box-shadow: 0 .42rem 1rem color-mix(in srgb, #020617 15%, transparent) !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-send {
    background: var(--msg-accent) !important;
    color: #fff !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions .messenger-icon,
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions svg {
    display: block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > button {
        width: 2.2rem;
        height: 2.2rem;
        min-width: 2.2rem;
    }
    html:root body .messenger-recording-panel.is-locked .messenger-recording-review {
        right: .18rem;
        bottom: 2.85rem;
        width: 1.72rem;
        height: 1.72rem;
        min-width: 1.72rem;
    }
}

/* Редактор открывается в той же нижней панели, в которой шла запись. */
html:root body .messenger-composer.has-recording-draft {
    min-height: 4.65rem;
}

html:root body .messenger-recording-panel.is-draft {
    inset: .3rem !important;
    display: block !important;
    padding: .28rem !important;
    overflow: visible;
    background: var(--msg-menu-soft) !important;
    animation: messenger-recording-editor-open 190ms cubic-bezier(.2,.82,.24,1) both;
}

html:root body .messenger-recording-panel.is-draft::after { display: none !important; }

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft {
    width: 100%;
    min-height: 3.45rem;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--msg-panel) 82%, var(--msg-accent) 18%);
}

@keyframes messenger-recording-editor-open {
    from { opacity: 0; transform: translateY(.42rem) scaleY(.9); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@media (max-width: 720px) {
    html:root body .messenger-composer.has-recording-draft { min-height: 6.55rem; }
}

.messenger-recording-draft {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto auto minmax(10rem, 1fr) auto;
    align-items: center;
    gap: .48rem;
    min-width: 0;
    padding: .42rem .48rem .52rem;
    border-radius: .82rem;
    background: color-mix(in srgb, var(--msg-panel) 80%, var(--msg-accent) 20%);
    color: var(--msg-text);
}

.messenger-recording-draft > :is(audio, video) { display: none; }
.messenger-recording-draft-play,
.messenger-recording-draft-delete,
.messenger-recording-draft-send {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 0;
    border-radius: .68rem;
    cursor: pointer;
}

.messenger-recording-draft-play { background: var(--msg-accent); color: #fff; }
.messenger-recording-draft-delete { background: color-mix(in srgb, #ef4444 14%, var(--msg-panel)); color: #ef4444; }
.messenger-recording-draft-send { background: var(--msg-accent); color: #fff; }
.messenger-recording-draft :is(.messenger-recording-draft-play, .messenger-recording-draft-delete, .messenger-recording-draft-send) .messenger-icon { width: .82rem; height: .82rem; }

.messenger-recording-trim {
    position: relative;
    display: grid;
    height: 2.15rem;
    min-width: 8rem;
    align-items: center;
    overflow: hidden;
    border-radius: .62rem;
    background: color-mix(in srgb, var(--msg-panel) 82%, transparent);
}

.messenger-recording-trim > span {
    display: flex;
    height: 1.45rem;
    align-items: center;
    gap: .08rem;
    padding: 0 .45rem;
    opacity: .48;
}

.messenger-recording-trim > span > i {
    width: .08rem;
    height: var(--voice-wave-height);
    flex: 1 1 auto;
    border-radius: 999px;
    background: var(--msg-accent);
}

.messenger-recording-trim > i {
    position: absolute;
    z-index: 1;
    top: .16rem;
    right: calc(100% - var(--trim-end));
    bottom: .16rem;
    left: var(--trim-start);
    border-radius: .48rem;
    background: color-mix(in srgb, var(--msg-accent) 19%, transparent);
    box-shadow: inset .12rem 0 var(--msg-accent), inset -.12rem 0 var(--msg-accent) !important;
    pointer-events: none;
}

.messenger-recording-trim > output {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    min-width: 4.8rem;
    justify-content: center;
    padding: .2rem .38rem;
    border-radius: .44rem;
    background: color-mix(in srgb, var(--msg-panel) 88%, transparent);
    color: var(--msg-text);
    font-size: .52rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.messenger-recording-trim > output b { color: var(--msg-muted); font-weight: 750; }

.messenger-recording-trim > input {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.messenger-recording-trim > input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.messenger-recording-trim > input::-webkit-slider-thumb {
    width: .72rem;
    height: 1.75rem;
    margin-top: .2rem;
    appearance: none;
    border: .14rem solid var(--msg-panel);
    border-radius: .38rem;
    background: var(--msg-accent);
    cursor: ew-resize;
    pointer-events: auto;
}

.messenger-recording-trim > input::-moz-range-track { height: 100%; background: transparent; }
.messenger-recording-trim > input::-moz-range-thumb {
    width: .55rem;
    height: 1.6rem;
    border: .14rem solid var(--msg-panel);
    border-radius: .34rem;
    background: var(--msg-accent);
    cursor: ew-resize;
    pointer-events: auto;
}

/* ------------[Раскрытие видеосообщений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 194/203 */
.messenger-video-note,
.messenger-bubble.is-video-note-only { transition: width 210ms cubic-bezier(.2,.8,.2,1), max-width 210ms cubic-bezier(.2,.8,.2,1); }
.messenger-bubble.is-video-note-only:has(.messenger-video-note.is-expanded) {
    width: min(22rem, 82vw) !important;
    max-width: min(22rem, 82vw) !important;
}
.messenger-video-note.is-expanded { width: min(22rem, 82vw) !important; }

/* ------------[Выбор отправителя: выезд из кнопки]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 195/203 */
.messenger-sender-identity-trigger > .messenger-icon {
    transform: rotate(180deg);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease;
}
.messenger-sender-identity.is-open .messenger-sender-identity-trigger > .messenger-icon { transform: rotate(0deg); }
.messenger-sender-identity-menu {
    transform-origin: left bottom;
    animation: messenger-sender-unroll 190ms cubic-bezier(.2,.82,.24,1) both;
}
.messenger-sender-identity.is-closing .messenger-sender-identity-menu {
    pointer-events: none;
    animation: messenger-sender-rollup 180ms cubic-bezier(.55,.05,.72,.3) both;
}

@keyframes messenger-sender-unroll {
    0% { opacity: 0; clip-path: inset(88% 76% 0 0 round .8rem); transform: translateY(.48rem) scaleX(.35); }
    48% { opacity: 1; clip-path: inset(38% 44% 0 0 round .9rem); transform: translateY(.12rem) scaleX(.7); }
    100% { opacity: 1; clip-path: inset(0 0 0 0 round 1rem); transform: translateY(0) scaleX(1); }
}

@keyframes messenger-sender-rollup {
    0% { opacity: 1; clip-path: inset(0 0 0 0 round 1rem); transform: translateY(0) scaleX(1); }
    52% { opacity: .9; clip-path: inset(42% 48% 0 0 round .9rem); transform: translateY(.14rem) scaleX(.66); }
    100% { opacity: 0; clip-path: inset(90% 80% 0 0 round .8rem); transform: translateY(.5rem) scaleX(.3); }
}

/* Новое исходящее сообщение появляется из области ввода, без резкого скачка. */
.messenger-message.is-entering .messenger-bubble,
.messenger-message.is-entering > .messenger-room-message-avatar {
    animation: messenger-message-arrive 260ms cubic-bezier(.18,.82,.25,1) both;
}

@keyframes messenger-message-arrive {
    from { opacity: 0; transform: translateY(.6rem) scale(.965); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
    .messenger-recording-draft { grid-template-columns: auto auto minmax(0,1fr) auto; }
    .messenger-recording-trim { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .messenger-sender-identity-menu,
    .messenger-sender-identity.is-closing .messenger-sender-identity-menu,
    .messenger-message.is-entering .messenger-bubble,
    .messenger-message.is-entering > .messenger-room-message-avatar { animation: none !important; }
}

/* ------------[Форма действий чатов и положение выбора отправителя]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 196/203 */
/* Старое правило header > span ставило этот span в колонку. Здесь намеренно
   возвращаем действия групп, каналов и пространств в один горизонтальный ряд. */
html:root body .messenger-room-panel > header > .messenger-room-panel-header-actions,
html:root body .messenger-room-panel-header-actions,
html:root body .messenger-room-settings-header-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .34rem !important;
}

html:root body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
),
html:root body .messenger-room-settings-header-actions > button,
html:root body .messenger-room-settings-modal > section > header > button {
    width: 2.12rem !important;
    min-width: 2.12rem !important;
    height: 2.12rem !important;
    min-height: 2.12rem !important;
    aspect-ratio: 1;
    padding: 0 !important;
    border: 0 !important;
    border-radius: .58rem !important;
    background: color-mix(in srgb, var(--msg-panel) 88%, var(--msg-accent) 12%) !important;
    clip-path: inset(0 round .58rem);
}

html:root body .messenger-room-panel-header-actions > :is(
    .messenger-room-panel-close,
    .messenger-room-panel-manage,
    .messenger-room-panel-leave
):is(:hover, :focus-visible),
html:root body .messenger-room-settings-header-actions > button:is(:hover, :focus-visible),
html:root body .messenger-room-settings-modal > section > header > button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--msg-panel) 76%, var(--msg-accent) 24%) !important;
}

/* Статус сети живёт снизу справа на аватаре, поэтому стрелка раскрытия теперь
   закреплена в верхнем правом углу и не перекрывает зелёную точку. */
html:root body .messenger-sender-identity-trigger > .messenger-icon {
    top: -.02rem !important;
    right: -.02rem !important;
    bottom: auto !important;
    left: auto !important;
}

/* ------------[Запись: длинная волна, стоп и встроенная обрезка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 197/203 */
html:root body .messenger-recording-panel .messenger-recording-wave {
    width: 100% !important;
    max-width: none !important;
    min-width: 3rem !important;
    justify-self: stretch !important;
    justify-content: space-between !important;
    gap: .035rem !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) {
    column-gap: .28rem !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions {
    position: static !important;
    display: block !important;
    width: 0;
    min-width: 0;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-stop {
    position: absolute !important;
    right: .22rem !important;
    bottom: 3.05rem !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 3.35rem !important;
    height: 1.82rem !important;
    padding: 0 .48rem !important;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    border: 0 !important;
    border-radius: .56rem !important;
    background: color-mix(in srgb, #ef4444 88%, var(--msg-panel)) !important;
    color: #fff !important;
    box-shadow: 0 .4rem 1rem color-mix(in srgb, #ef4444 22%, transparent) !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-stop .messenger-icon {
    width: .72rem !important;
    height: .72rem !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-stop > span:last-child {
    font-size: .52rem;
    font-weight: 900;
    line-height: 1;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft {
    grid-template-columns: auto auto minmax(10rem, 1fr) auto;
    background: var(--msg-menu-surface) !important;
    color: var(--msg-text) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    background: color-mix(in srgb, var(--msg-panel) 78%, var(--msg-accent) 22%) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span {
    opacity: .76;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > output {
    background: var(--msg-panel) !important;
    color: var(--msg-text) !important;
    box-shadow: 0 .18rem .45rem color-mix(in srgb, #020617 10%, transparent);
}

@media (max-width: 720px) {
    html:root body .messenger-recording-panel.is-draft .messenger-recording-draft {
        grid-template-columns: auto auto minmax(0,1fr) auto;
    }
    html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* После захвата жеста маленький круг «Стоп» занимает прежнее место замка.
   Селектор намеренно сильнее старого .recording-actions > button, иначе кнопка
   возвращается в сетку и выезжает за правую границу панели. */
html:root body .messenger-recording-panel.is-locked {
    overflow: visible !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop {
    position: absolute !important;
    top: auto !important;
    right: .28rem !important;
    bottom: 3rem !important;
    left: auto !important;
    display: grid !important;
    width: 1.68rem !important;
    min-width: 1.68rem !important;
    height: 1.68rem !important;
    min-height: 1.68rem !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop > span:last-child {
    display: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop .messenger-icon,
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop svg {
    width: .66rem !important;
    height: .66rem !important;
    opacity: 1 !important;
}

/* ------------[Цельный редактор записи в стиле компактной ленты]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 198/203 */
html:root body .messenger-composer.has-recording-draft {
    display: grid !important;
    min-height: 3.65rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(3rem, auto) !important;
    align-items: stretch !important;
    padding: .3rem !important;
}

html:root body .messenger-composer.has-recording-draft > :not(.messenger-recording-panel) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html:root body .messenger-composer.has-recording-draft > .messenger-recording-panel.is-draft {
    position: relative !important;
    inset: auto !important;
    z-index: 45;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: .92rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
    position: relative;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.65rem !important;
    align-items: center !important;
    gap: .42rem !important;
    padding: .24rem !important;
    border-radius: .88rem !important;
    background: var(--msg-menu-soft) !important;
    box-sizing: border-box;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
    position: static !important;
    display: grid !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete {
    grid-column: 1;
    background: color-mix(in srgb, #ef4444 14%, var(--msg-panel)) !important;
    color: #ef4444 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
    grid-column: 3;
    width: 2.65rem !important;
    min-width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    background: var(--msg-accent) !important;
    color: #fff !important;
    box-shadow: 0 .28rem .72rem color-mix(in srgb, var(--msg-accent) 26%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2.15rem !important;
    overflow: hidden !important;
    border-radius: .66rem !important;
    background: color-mix(in srgb, var(--msg-panel) 70%, var(--msg-accent) 30%) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .04rem !important;
    padding: 0 .46rem !important;
    box-sizing: border-box;
    opacity: .92 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span > i {
    min-width: .075rem;
    max-width: .075rem;
    flex: 0 0 .075rem;
    background: color-mix(in srgb, var(--msg-accent) 82%, var(--msg-text) 18%) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    left: 50% !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 3.4rem !important;
    height: 1.42rem !important;
    padding: 0 .42rem 0 .3rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .22rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--msg-accent) !important;
    color: #fff !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 .14rem .4rem color-mix(in srgb, #020617 14%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play output {
    display: inline !important;
    color: inherit !important;
    font-size: .55rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play .messenger-icon {
    width: .66rem !important;
    height: .66rem !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input::-webkit-slider-thumb {
    width: .42rem !important;
    height: 1.86rem !important;
    margin-top: .14rem !important;
    border: 0 !important;
    border-radius: .22rem !important;
    background: var(--msg-accent) !important;
    box-shadow: 0 0 0 .1rem color-mix(in srgb, var(--msg-panel) 72%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input::-moz-range-thumb {
    width: .42rem !important;
    height: 1.86rem !important;
    border: 0 !important;
    border-radius: .22rem !important;
    background: var(--msg-accent) !important;
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
        grid-template-columns: 2.15rem minmax(0, 1fr) 2.42rem !important;
        gap: .28rem !important;
    }
    html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete {
        width: 2.15rem !important;
        min-width: 2.15rem !important;
        height: 2.15rem !important;
        min-height: 2.15rem !important;
    }
    html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
        width: 2.42rem !important;
        min-width: 2.42rem !important;
        height: 2.42rem !important;
        min-height: 2.42rem !important;
    }
}

/* ------------[Окончательная лента обрезки: всегда последняя в каскаде]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 199/203 */
html:root body .messenger-composer.has-recording-draft {
    display: grid !important;
    width: auto !important;
    min-height: 3.5rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(3rem, auto) !important;
    align-items: stretch !important;
    padding: .24rem !important;
    border-radius: 1rem !important;
    background: var(--msg-menu-soft) !important;
    box-sizing: border-box !important;
}

html:root body .messenger-composer.has-recording-draft > :not(.messenger-recording-panel) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html:root body .messenger-composer.has-recording-draft > .messenger-recording-panel.is-draft {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: .92rem !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    grid-template-columns: 2.35rem minmax(7rem, 1fr) 2.65rem !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: .38rem !important;
    padding: .18rem !important;
    border-radius: .88rem !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
    position: static !important;
    display: grid !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    background: color-mix(in srgb, #ef4444 14%, var(--msg-panel)) !important;
    color: #ef4444 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 2.65rem !important;
    min-width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    background: color-mix(in srgb, var(--msg-accent) 78%, var(--msg-panel) 22%) !important;
    color: #fff !important;
    box-shadow: 0 .28rem .72rem color-mix(in srgb, var(--msg-accent) 26%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2.3rem !important;
    overflow: hidden !important;
    border-radius: .72rem !important;
    background: color-mix(in srgb, var(--msg-menu-surface) 62%, var(--msg-accent) 38%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg-accent) 30%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span {
    position: absolute !important;
    z-index: 2 !important;
    inset: .2rem .42rem !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .04rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > span > i {
    display: block !important;
    width: .075rem !important;
    min-width: .075rem !important;
    max-width: .075rem !important;
    height: var(--voice-wave-height, .5rem) !important;
    min-height: .2rem !important;
    max-height: 1.42rem !important;
    flex: 0 0 .075rem !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--msg-accent) 72%, var(--msg-text) 28%) !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > i {
    z-index: 1 !important;
    top: .16rem !important;
    bottom: .16rem !important;
    background: color-mix(in srgb, var(--msg-accent) 13%, transparent) !important;
    box-shadow: inset .14rem 0 var(--msg-accent), inset -.14rem 0 var(--msg-accent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input {
    z-index: 4 !important;
    top: 0 !important;
    right: .34rem !important;
    bottom: 0 !important;
    left: .34rem !important;
    width: calc(100% - .68rem) !important;
    height: 100% !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play {
    position: absolute !important;
    z-index: 6 !important;
    top: 50% !important;
    left: 50% !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 3.25rem !important;
    height: 1.48rem !important;
    padding: 0 .42rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .24rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--msg-accent) 86%, var(--msg-panel) 14%) !important;
    color: #fff !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 .14rem .4rem color-mix(in srgb, #020617 14%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play > .messenger-icon,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send > .messenger-icon {
    display: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-top: .26rem solid transparent;
    border-bottom: .26rem solid transparent;
    border-left: .42rem solid currentColor;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play.is-playing-icon::before {
    width: .38rem;
    height: .5rem;
    border: 0;
    background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play output {
    display: inline !important;
    color: inherit !important;
    font-size: .55rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send::before {
    content: "";
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    background: currentColor;
    clip-path: polygon(4% 45%, 96% 4%, 63% 96%, 47% 61%);
    transform: rotate(-4deg);
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete .messenger-icon,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete svg {
    display: block !important;
    width: .92rem !important;
    height: .92rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input::-webkit-slider-thumb {
    width: .42rem !important;
    height: 1.86rem !important;
    margin-top: .14rem !important;
    border: 0 !important;
    border-radius: .22rem !important;
    background: var(--msg-accent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input::-moz-range-thumb {
    width: .42rem !important;
    height: 1.86rem !important;
    border: 0 !important;
    border-radius: .22rem !important;
    background: var(--msg-accent) !important;
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
        grid-template-columns: 2.15rem minmax(5rem, 1fr) 2.42rem !important;
        gap: .26rem !important;
    }
}

/* ------------[Финальная анимация видеосообщений]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 200/203 */
/* ------------[Запись и редактор: фирменные кнопки VMESTA]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 201/203 */
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions {
    position: static !important;
    display: grid !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    place-items: center !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-send.messenger-send-button {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .82rem !important;
    background: var(--theme-accent, var(--msg-accent)) !important;
    color: var(--theme-text-inverse, #fff) !important;
    box-shadow: 0 .38rem .85rem color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 25%, transparent) !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop {
    top: auto !important;
    right: .25rem !important;
    bottom: calc(100% + .42rem) !important;
    left: auto !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    border-radius: .62rem !important;
    background: color-mix(in srgb, #ef4444 88%, var(--theme-surface-panel, var(--msg-panel))) !important;
    color: #fff !important;
    box-shadow: 0 .36rem .8rem color-mix(in srgb, #ef4444 25%, transparent) !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > :is(.messenger-recording-send, .messenger-recording-stop) .messenger-icon,
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > :is(.messenger-recording-send, .messenger-recording-stop) svg {
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel .messenger-recording-wave {
    gap: .018rem !important;
    justify-content: space-between !important;
}

html:root body .messenger-recording-panel .messenger-recording-wave > i {
    width: .075rem !important;
    min-width: .055rem !important;
    max-width: .075rem !important;
    height: clamp(.22rem, calc(.18rem + var(--record-level, .08) * 1.18rem), 1.42rem) !important;
    flex: 0 1 .075rem !important;
    border-radius: .18rem !important;
}

html:root body .messenger-recording-panel.is-draft > .messenger-recording-draft {
    grid-template-columns: 2.45rem minmax(8rem, 1fr) 2.45rem !important;
    gap: .42rem !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send.messenger-send-button {
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    border: 0 !important;
    border-radius: .82rem !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-delete {
    background: color-mix(in srgb, #ef4444 13%, var(--theme-surface-control, var(--msg-panel))) !important;
    color: #ef4444 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send.messenger-send-button {
    background: var(--theme-accent, var(--msg-accent)) !important;
    color: var(--theme-text-inverse, #fff) !important;
    box-shadow: 0 .38rem .85rem color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 25%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send.messenger-send-button::before {
    content: none !important;
    display: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send.messenger-send-button > .messenger-icon,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-send.messenger-send-button > svg {
    display: block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    height: 2.45rem !important;
    border-radius: .76rem !important;
    background: color-mix(in srgb, var(--theme-surface-control, var(--msg-panel)) 80%, var(--theme-accent, var(--msg-accent)) 20%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 26%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play.messenger-recording-draft-play {
    min-width: 3.45rem !important;
    height: 1.62rem !important;
    padding: 0 .48rem !important;
    gap: .28rem !important;
    border-radius: .58rem !important;
    background: var(--theme-accent, var(--msg-accent)) !important;
    color: var(--theme-text-inverse, #fff) !important;
    box-shadow: 0 .16rem .38rem color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 22%, transparent) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play-symbol {
    display: grid !important;
    width: .78rem !important;
    min-width: .78rem !important;
    height: .78rem !important;
    place-items: center !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play-symbol .messenger-icon,
html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play-symbol svg {
    display: block !important;
    width: .78rem !important;
    height: .78rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play output {
    font-size: .58rem !important;
    font-weight: 900 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-trim-wave.messenger-recording-trim-wave {
    z-index: 4 !important;
    inset: .26rem .28rem !important;
    width: calc(100% - .56rem) !important;
    height: calc(100% - .52rem) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim::before,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    display: block;
    background: color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 24%, transparent);
    backdrop-filter: saturate(.72) brightness(.96);
    pointer-events: none;
    transition: width 45ms linear;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim::before {
    left: 0;
    width: var(--trim-start, 0%);
    border-radius: .76rem 0 0 .76rem;
    box-shadow: inset -.08rem 0 color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 42%, transparent);
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim::after {
    right: 0;
    width: calc(100% - var(--trim-end, 100%));
    border-radius: 0 .76rem .76rem 0;
    box-shadow: inset .08rem 0 color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 42%, transparent);
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-start,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-end {
    z-index: 6 !important;
    right: .2rem !important;
    left: .2rem !important;
    width: calc(100% - .4rem) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-start::-webkit-slider-runnable-track,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-end::-webkit-slider-runnable-track {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-start::-moz-range-track,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-end::-moz-range-track {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-start::-webkit-slider-thumb,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-end::-webkit-slider-thumb {
    width: .28rem !important;
    height: 2.45rem !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: .14rem !important;
    background: var(--theme-accent, var(--msg-accent)) !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-start::-moz-range-thumb,
html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > input.is-end::-moz-range-thumb {
    width: .28rem !important;
    height: 2.45rem !important;
    border: 0 !important;
    border-radius: .14rem !important;
    background: var(--theme-accent, var(--msg-accent)) !important;
    box-shadow: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play.messenger-recording-draft-play {
    z-index: 7 !important;
}

html:root body .messenger-bubble.is-video-note-only {
    --messenger-video-note-size: min(12rem, 60vw);
    width: var(--messenger-video-note-size) !important;
    max-width: var(--messenger-video-note-size) !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    will-change: width, max-width;
    transition: width 330ms cubic-bezier(.2, .82, .22, 1), max-width 330ms cubic-bezier(.2, .82, .22, 1), filter 220ms ease !important;
}

html:root body .messenger-bubble.is-video-note-only:has(.messenger-video-note.is-expanded) {
    --messenger-video-note-size: min(22rem, 82vw);
}

html:root body .messenger-video-note,
html:root body .messenger-video-note.is-expanded {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    transform: translateZ(0) scale(1);
}

html:root body .messenger-video-note.is-expanding video,
html:root body .messenger-video-note.is-expanding .messenger-video-note-ring {
    animation: messenger-video-note-open 330ms cubic-bezier(.2, .82, .22, 1) both;
}

html:root body .messenger-video-note.is-collapsing video,
html:root body .messenger-video-note.is-collapsing .messenger-video-note-ring {
    animation: messenger-video-note-close 330ms cubic-bezier(.2, .82, .22, 1) both;
}

html:root body .messenger-message-stream {
    scroll-behavior: auto !important;
    transition: none !important;
    overflow-anchor: none;
    scrollbar-gutter: stable;
}

html:root body .messenger-inline-media-bar {
    display: grid !important;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transform-origin: top center;
    transition: opacity 170ms ease, transform 230ms cubic-bezier(.2, .82, .22, 1), visibility 0s linear 0s;
}

html:root body .messenger-inline-media-bar.hidden {
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-.45rem) scale(.97) !important;
    transition: opacity 170ms ease, transform 230ms cubic-bezier(.2, .82, .22, 1), visibility 0s linear 230ms !important;
}

html:root body .messenger-inline-media-close {
    justify-self: end;
    transform: translateX(-.18rem);
    border-radius: .5rem !important;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease !important;
}

html:root body .messenger-inline-media-close:hover {
    background: color-mix(in srgb, var(--msg-accent) 13%, transparent) !important;
    transform: translateX(-.18rem) scale(.94) !important;
}

/* ------------[Финальная позиция основной кнопки и замка записи]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 202/203 */
html:root body .messenger-composer:not(.is-recording) {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
}

html:root body .messenger-composer:not(.is-recording):has(.messenger-sender-identity) {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
}

html:root body .messenger-primary-action {
    position: relative !important;
    display: grid !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    place-items: center !important;
    isolation: isolate;
}

html:root body .messenger-primary-action > :is(.messenger-voice-button, .messenger-send-button) {
    grid-area: 1 / 1 !important;
    margin: 0 !important;
    transition: opacity 120ms ease, transform 150ms cubic-bezier(.2, .82, .22, 1), visibility 0s linear 0s, background-color 150ms ease, color 150ms ease !important;
}

html:root body .messenger-composer:not(.has-sendable-content) .messenger-primary-action:not(.has-no-recorder) > .messenger-send-button,
html:root body .messenger-composer.has-sendable-content .messenger-primary-action > .messenger-voice-button {
    z-index: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(.82) !important;
}

html:root body .messenger-composer:not(.has-sendable-content) .messenger-primary-action:not(.has-no-recorder) > .messenger-voice-button,
html:root body .messenger-composer.has-sendable-content .messenger-primary-action > .messenger-send-button,
html:root body .messenger-primary-action.has-no-recorder > .messenger-send-button {
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) {
    overflow: visible !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft):not(.is-locked) .messenger-recording-lock {
    position: absolute !important;
    top: auto !important;
    right: .25rem !important;
    bottom: calc(100% + .42rem) !important;
    left: auto !important;
    display: grid !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft):not(.is-locked) .messenger-recording-lock > b {
    width: 1.9rem !important;
    height: 1.9rem !important;
    border-width: .11rem !important;
    border-radius: 50% !important;
    box-shadow: 0 .32rem .72rem color-mix(in srgb, #020617 14%, transparent) !important;
}

html:root body .messenger-recording-panel .messenger-recording-lock > :is(i, em) {
    display: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim > .messenger-recording-draft-play.messenger-recording-draft-play {
    min-width: 3.25rem !important;
    padding: 0 .55rem !important;
    gap: 0 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play output {
    display: block !important;
    min-width: 2rem !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim {
    background-color: var(--msg-panel) !important;
    background-image: linear-gradient(color-mix(in srgb, var(--msg-accent) 18%, transparent), color-mix(in srgb, var(--msg-accent) 18%, transparent)) !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim-wave {
    position: absolute !important;
    z-index: 2 !important;
    inset: .42rem .62rem !important;
    display: block !important;
    width: calc(100% - 1.24rem) !important;
    height: calc(100% - .84rem) !important;
    color: color-mix(in srgb, var(--msg-accent) 78%, var(--msg-text) 22%) !important;
    opacity: .96 !important;
    pointer-events: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-trim-wave rect {
    fill: currentColor !important;
    stroke: none !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play::before {
    content: none !important;
    display: none !important;
}

html:root body .messenger-recording-panel.is-draft .messenger-recording-draft-play-symbol {
    display: inline-grid !important;
    width: .7rem !important;
    min-width: .7rem !important;
    height: .72rem !important;
    place-items: center !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    line-height: .72rem !important;
}

/* ------------[Запись: окончательная геометрия правого слота]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 203/203 */
/* Связанное с каналом пространство живёт в шапке, не занимая отдельную
   полноширинную строку над историей сообщений. */
html:root body .messenger-conversation-header.has-linked-space .messenger-contact {
    flex: 0 1 auto;
    max-width: min(19rem, 38%);
    margin-right: 0;
}

html:root body .messenger-conversation-space-link {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) .72rem;
    align-items: center;
    gap: .48rem;
    min-width: 9rem;
    max-width: 22rem;
    min-height: 2.55rem;
    margin: 0 auto;
    padding: .34rem .58rem;
    overflow: hidden;
    border: 0;
    border-radius: .78rem;
    background: var(--room-tone-3, var(--msg-accent-soft));
    color: var(--msg-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

html:root body .messenger-conversation-space-link:hover,
html:root body .messenger-conversation-space-link:focus-visible {
    background: var(--room-tone-4, var(--msg-menu-active));
    color: var(--msg-accent);
}

html:root body .messenger-conversation-space-link > .messenger-icon:first-child {
    width: 1.7rem;
    height: 1.7rem;
    padding: .38rem;
    box-sizing: border-box;
    border-radius: .52rem;
    background: color-mix(in srgb, var(--msg-accent) 14%, transparent);
    color: var(--msg-accent);
}

html:root body .messenger-conversation-space-link > .messenger-icon:last-child {
    width: .72rem;
    height: .72rem;
    color: var(--msg-muted);
}

html:root body .messenger-conversation-space-link > span {
    display: grid;
    min-width: 0;
    gap: .08rem;
}

html:root body .messenger-conversation-space-link small,
html:root body .messenger-conversation-space-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:root body .messenger-conversation-space-link small {
    color: var(--msg-muted);
    font-size: .51rem;
    font-weight: 750;
}

html:root body .messenger-conversation-space-link strong {
    font-size: .66rem;
    font-weight: 900;
}

@media (max-width: 48rem) {
    html:root body .messenger-conversation-header.has-linked-space {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .35rem .55rem;
    }

    html:root body .messenger-conversation-header.has-linked-space .messenger-contact {
        grid-row: 1;
        max-width: none;
    }

    html:root body .messenger-conversation-header.has-linked-space .messenger-conversation-actions {
        grid-column: 3;
        grid-row: 1;
    }

    html:root body .messenger-conversation-header.has-linked-space .messenger-conversation-space-link {
        grid-column: 2 / 4;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
    }
}

.messenger-room-policy-content > .messenger-room-permission-rule {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1.85rem minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .5rem .62rem;
    box-sizing: border-box;
    border-radius: .62rem;
    background: color-mix(in srgb, var(--room-tone-4, var(--msg-menu-active)) 82%, var(--msg-accent) 18%);
    color: var(--msg-text);
}

.messenger-room-policy-content > .messenger-room-permission-rule > .messenger-icon {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    padding: .48rem;
    box-sizing: border-box;
    border-radius: .56rem;
    background: color-mix(in srgb, var(--msg-accent) 16%, transparent);
    color: var(--msg-accent);
}

.messenger-room-policy-content > .messenger-room-permission-rule > span {
    display: grid;
    gap: .12rem;
}

.messenger-room-policy-content > .messenger-room-permission-rule b { font-size: .68rem; }
.messenger-room-policy-content > .messenger-room-permission-rule small {
    color: var(--msg-muted);
    font-size: .56rem;
    line-height: 1.4;
}

/* Кнопка аудио/видеозаписи ведёт себя так же, как соседний смайлик:
   без постоянной плашки и с мягкой подсветкой только при взаимодействии. */
html:root body .messenger-primary-action > .messenger-voice-button,
html:root body .messenger-primary-action > .messenger-voice-button.is-video-mode {
    border: 0 !important;
    background: transparent !important;
    color: var(--msg-muted) !important;
    box-shadow: none !important;
}

html:root body .messenger-primary-action > .messenger-voice-button:is(:hover, :focus-visible),
html:root body .messenger-primary-action > .messenger-voice-button.is-video-mode:is(:hover, :focus-visible) {
    background: var(--msg-accent-soft) !important;
    color: var(--msg-accent) !important;
    box-shadow: none !important;
}

/* Stop сохраняет один и тот же круглый, контрастный вид во всех палитрах. */
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop {
    position: absolute !important;
    top: auto !important;
    right: .25rem !important;
    bottom: calc(100% + .42rem) !important;
    left: auto !important;
    display: grid !important;
    width: 1.95rem !important;
    min-width: 1.95rem !important;
    height: 1.95rem !important;
    min-height: 1.95rem !important;
    padding: 0 !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border: .12rem solid color-mix(in srgb, var(--theme-surface-panel, var(--msg-panel)) 88%, #fff 12%) !important;
    border-radius: 50% !important;
    background: #ef4f5f !important;
    color: #fff !important;
    box-shadow: 0 .34rem .78rem color-mix(in srgb, #b91c1c 30%, transparent) !important;
    opacity: 1 !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop:is(:hover, :focus-visible) {
    background: #dc3f50 !important;
    box-shadow: 0 .4rem .9rem color-mix(in srgb, #b91c1c 38%, transparent) !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop .messenger-icon,
html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop svg {
    display: block !important;
    width: .76rem !important;
    height: .76rem !important;
    fill: currentColor !important;
    stroke: none !important;
    opacity: 1 !important;
}

html:root body .messenger-recording-panel.is-locked .messenger-recording-actions > .messenger-recording-stop.messenger-recording-stop svg rect {
    fill: currentColor !important;
    stroke: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) {
    grid-template-columns: auto auto minmax(5rem, 1fr) 2.45rem !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions {
    position: static !important;
    grid-column: 4 !important;
    display: grid !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    margin: 0 !important;
    place-items: center !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions > .messenger-recording-send.messenger-send-button {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .82rem !important;
    background: var(--theme-accent, var(--msg-accent)) !important;
    color: var(--theme-text-inverse, #fff) !important;
    box-shadow: 0 .38rem .85rem color-mix(in srgb, var(--theme-accent, var(--msg-accent)) 25%, transparent) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft):not(.is-locked) .messenger-recording-actions > .messenger-recording-stop {
    display: none !important;
}

html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions > .messenger-recording-send .messenger-icon,
html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions > .messenger-recording-send svg {
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* Числовой маяк конкретного пространства в каталоге и верхнем меню. */
.spaces-index-card[data-space-slug], .space-menu-row[data-space-slug] { position: relative; }
.space-alert-badge { position: absolute; top: .42rem; left: .42rem; z-index: 8; display: grid; min-width: 1.18rem; height: 1.18rem; padding: 0 .24rem; place-items: center; box-sizing: border-box; border: 2px solid var(--vmesta-ui-surface, #fff); border-radius: 999px; background: #ef476f; color: #fff; font-size: .48rem; font-weight: 950; line-height: 1; box-shadow: 0 0 .7rem color-mix(in srgb, #ef476f 58%, transparent); pointer-events: none; }
.space-alert-badge::after { content: ""; position: absolute; inset: -.3rem; border: 1px solid #ef476f; border-radius: inherit; animation: nav-alert-beacon 1.35s ease-out infinite; }
.space-menu-row > .space-alert-badge { top: .15rem; left: .12rem; }

/* Контекстное меню живёт на аватаре и не заслоняет обложку. */
#profile-avatar-card > :first-child { position: relative; z-index: 2; }
#profile-avatar-card > .profile-safety-menu { top: .6rem; right: auto; left: -1.3rem; z-index: auto; }
#profile-avatar-card > .profile-safety-menu .profile-safety-trigger { position: relative; z-index: 1; width: 1.8rem; height: 2.75rem; border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 28%, var(--vmesta-ui-line, #cbd5e1)) !important; border-right: 0 !important; border-radius: .75rem 0 0 .75rem; background: color-mix(in srgb, var(--vmesta-ui-surface, #fff) 84%, var(--vmesta-ui-primary, #3b82f6) 16%) !important; color: var(--vmesta-ui-primary, #3b82f6) !important; box-shadow: -.45rem .55rem 1.35rem color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 17%, transparent) !important; opacity: 0; transform: translateX(.35rem); backdrop-filter: blur(14px); }
#profile-avatar-card:is(:hover, :focus-within) > .profile-safety-menu .profile-safety-trigger,
#profile-avatar-card > .profile-safety-menu .profile-safety-trigger[aria-expanded="true"] { opacity: 1; transform: translateX(0); }
#profile-avatar-card > .profile-safety-menu .profile-safety-trigger:hover,
#profile-avatar-card > .profile-safety-menu .profile-safety-trigger[aria-expanded="true"] { background: var(--vmesta-ui-primary, #3b82f6) !important; color: var(--vmesta-ui-on-primary, #fff) !important; }
#profile-avatar-card > .profile-safety-menu .profile-safety-trigger svg { width: .95rem; height: .95rem; }
#profile-avatar-card > .profile-safety-menu .profile-safety-dropdown { top: 0; right: auto; left: calc(100% + .45rem); z-index: 90; }

/* У каждого раздела свой маяк: сообщения — синие, друзья — коралловые, пространства — фиолетовые. */
#messages-nav-dot { --nav-alert-color: #2583ff; }
#friends-nav-dot { --nav-alert-color: #ff4567; }
#spaces-nav-dot, .space-alert-badge { --nav-alert-color: #9858ff; }
.nav-alert-indicator, .space-alert-badge { isolation: isolate; overflow: visible; background: var(--nav-alert-color, #ff4567); border-color: var(--vmesta-ui-surface, var(--adaptive-surface, #fff)); box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 0 .45rem color-mix(in srgb, var(--nav-alert-color, #ff4567) 96%, transparent), 0 0 1rem color-mix(in srgb, var(--nav-alert-color, #ff4567) 72%, transparent); }
.nav-alert-indicator.is-alerting::before, .space-alert-badge::before,
.nav-alert-indicator.is-alerting::after, .space-alert-badge::after { content: ""; position: absolute; z-index: -1; inset: -.22rem; pointer-events: none; border-radius: inherit; }
.nav-alert-indicator.is-alerting::before, .space-alert-badge::before { background: color-mix(in srgb, var(--nav-alert-color, #ff4567) 34%, transparent); animation: nav-alert-beacon 1.45s ease-out infinite; }
.nav-alert-indicator.is-alerting::after, .space-alert-badge::after { inset: -.28rem; border: 2px solid var(--nav-alert-color, #ff4567); box-shadow: 0 0 .55rem color-mix(in srgb, var(--nav-alert-color, #ff4567) 82%, transparent); animation: nav-alert-beacon 1.45s .18s ease-out infinite; }
.space-alert-badge { background: var(--nav-alert-color); }
@keyframes nav-alert-beacon { 0% { opacity: .98; transform: scale(.64); } 72%, 100% { opacity: 0; transform: scale(2.05); } }
#profile-avatar-card > .space-alert-badge { top: .55rem; right: .55rem; left: auto; z-index: 72; }

.notification-source-badge:not(.hidden) { --notification-beacon-color: #2583ff; animation: notification-source-beacon 1.55s ease-in-out infinite; }
.notification-source-badge.is-system-only { --notification-beacon-color: #ff4567; }
.notification-source-badge.is-mixed { --notification-beacon-color: #9858ff; }
@keyframes notification-source-beacon {
    0%, 100% { box-shadow: 0 0 0 .08rem rgba(255,255,255,.78), 0 0 .45rem color-mix(in srgb, var(--notification-beacon-color) 76%, transparent); }
    50% { box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--notification-beacon-color) 24%, transparent), 0 0 1rem color-mix(in srgb, var(--notification-beacon-color) 92%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-alert-indicator.is-alerting::before, .space-alert-badge::before,
    .nav-alert-indicator.is-alerting::after, .space-alert-badge::after,
    .notification-source-badge:not(.hidden) { animation: none !important; }
}

/* Настройки уведомлений: категории и раскрывающиеся строки подписок. */
.notification-category-label { padding: .55rem .65rem .22rem; color: var(--vmesta-ui-muted, #64748b); font-size: .48rem; font-weight: 950; letter-spacing: .14em; }
.notification-preference-row.is-category-master { background: color-mix(in srgb, var(--vmesta-ui-panel, #eff6ff) 72%, var(--vmesta-ui-primary, #3b82f6) 28%); }
.notification-space-list { grid-template-columns: 1fr; gap: .52rem; }
.notification-space-row { display: block; overflow: hidden; padding: 0; border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 18%, transparent); background: color-mix(in srgb, var(--vmesta-ui-panel, #eff6ff) 90%, var(--vmesta-ui-primary, #3b82f6) 10%); }
.notification-space-summary { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-height: 3.45rem; padding: .48rem .62rem; }
.notification-space-summary > img { width: 2.35rem; height: 2.35rem; border-radius: .65rem; object-fit: cover; }
.notification-space-expand { display: grid; grid-template-columns: minmax(0, 1fr) 1.8rem; align-items: center; gap: .4rem; min-width: 0; padding: .25rem 0; color: inherit; text-align: left; }
.notification-space-expand > span { display: grid; min-width: 0; gap: .08rem; }
.notification-space-expand strong, .notification-space-expand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-space-expand strong { color: var(--vmesta-ui-primary, #3b82f6); font-size: .65rem; font-weight: 900; }
.notification-space-expand small { color: var(--vmesta-ui-muted, #64748b); font-size: .53rem; font-weight: 700; }
.notification-space-expand svg { width: 1rem; height: 1rem; fill: none; stroke: var(--vmesta-ui-primary, #3b82f6); stroke-width: 2; transition: transform .22s ease; }
.notification-space-row.is-expanded .notification-space-expand svg { transform: rotate(180deg); }
.notification-space-details { display: grid; max-height: 0; gap: .15rem; overflow: hidden; padding: 0 .55rem; border-top: 0 solid transparent; opacity: 0; transition: max-height .3s ease, padding .3s ease, opacity .2s ease, border-color .2s ease; }
.notification-space-row.is-expanded .notification-space-details { max-height: 25rem; padding: .45rem .55rem .6rem; border-top-width: 1px; border-top-color: color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 14%, transparent); opacity: 1; }
.notification-space-details > label { display: flex; min-height: 2.85rem; align-items: center; justify-content: space-between; gap: .8rem; padding: .38rem .5rem; border-radius: .62rem; }
.notification-space-details > label:hover { background: color-mix(in srgb, var(--vmesta-ui-surface, #fff) 62%, transparent); }
.notification-space-details > label > span:first-child { display: grid; min-width: 0; gap: .08rem; }
.notification-space-details strong { color: var(--vmesta-ui-ink, #1e293b); font-size: .6rem; font-weight: 900; }
.notification-space-details small { color: var(--vmesta-ui-muted, #64748b); font-size: .5rem; font-weight: 650; }
.notification-space-details .is-disabled { opacity: .42; }
.notification-sound-preview.is-playing { background: #ef476f !important; color: #fff !important; animation: notification-preview-pulse 1.25s ease-in-out infinite; }
@keyframes notification-preview-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ef476f 36%, transparent); }
    50% { box-shadow: 0 0 0 .38rem color-mix(in srgb, #ef476f 0%, transparent); }
}

.entity-notification-modal { position: fixed; inset: 0; z-index: 10120; display: grid; place-items: center; padding: 1rem; }
.entity-notification-backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / .62); backdrop-filter: blur(8px); }
.entity-notification-modal > section { position: relative; width: min(27rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--vmesta-ui-line, rgb(226 232 240)); border-radius: 1.15rem; background: var(--vmesta-ui-surface, #fff); color: var(--vmesta-ui-ink, #1e293b); box-shadow: 0 2rem 5rem rgb(15 23 42 / .38); animation: galaxy-case-open .2s ease both; }
.entity-notification-modal header { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .7rem; padding: .9rem; background: color-mix(in srgb, var(--vmesta-ui-panel, #eff6ff) 84%, var(--vmesta-ui-primary, #3b82f6) 16%); }
.entity-notification-modal header img { width: 2.8rem; height: 2.8rem; border-radius: .8rem; object-fit: cover; }
.entity-notification-modal header span { display: grid; min-width: 0; gap: .08rem; }
.entity-notification-modal header small { color: var(--vmesta-ui-primary, #3b82f6); font-size: .5rem; font-weight: 950; letter-spacing: .14em; }
.entity-notification-modal header strong { overflow: hidden; font-size: .78rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.entity-notification-modal header button { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .7rem; color: var(--vmesta-ui-muted, #64748b); font-size: 1.25rem; }
.entity-notification-modal > section > div { padding: .55rem; }
.entity-notification-modal > section > div > label { display: flex; min-height: 3.65rem; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .7rem; border-radius: .75rem; }
.entity-notification-modal > section > div > label:hover { background: var(--vmesta-ui-panel, #eff6ff); }
.entity-notification-modal label > span:first-child { display: grid; gap: .1rem; }
.entity-notification-modal label strong { color: var(--vmesta-ui-primary, #3b82f6); font-size: .68rem; font-weight: 900; }
.entity-notification-modal label small { color: var(--vmesta-ui-muted, #64748b); font-size: .56rem; font-weight: 650; }
.entity-notification-modal footer { padding: .7rem 1rem; border-top: 1px solid var(--vmesta-ui-line, rgb(226 232 240)); color: var(--vmesta-ui-muted, #64748b); font-size: .55rem; font-weight: 750; text-align: center; }

.level-up-celebration { pointer-events: auto; display: grid; grid-template-columns: 3.3rem minmax(0, 1fr) 2rem; align-items: center; gap: .8rem; overflow: hidden; border: 1px solid color-mix(in srgb, #f59e0b 48%, transparent); border-radius: 1rem; padding: .8rem; background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 18%, var(--vmesta-ui-surface, #fff)), var(--vmesta-ui-surface, #fff)); box-shadow: 0 1.25rem 3rem rgb(15 23 42 / .28); }
.level-up-celebration > span { display: grid; width: 3.3rem; height: 3.3rem; place-items: center; border-radius: 1rem; background: #f59e0b; color: #fff; font-size: 1.15rem; font-weight: 950; box-shadow: 0 0 0 .35rem rgb(245 158 11 / .14); }
.level-up-celebration > div { display: grid; gap: .1rem; }
.level-up-celebration small { color: #d97706; font-size: .48rem; font-weight: 950; letter-spacing: .14em; }
.level-up-celebration strong { color: var(--vmesta-ui-ink, #1e293b); font-size: .74rem; font-weight: 950; }
.level-up-celebration p { margin: 0; color: var(--vmesta-ui-muted, #64748b); font-size: .56rem; line-height: 1.4; }
.level-up-celebration button { color: var(--vmesta-ui-muted, #64748b); font-size: 1.15rem; }

/* Всплывающее событие уровня открывает полноценное поздравление целиком. */
.level-up-celebration[role="button"] { cursor: pointer; transition: transform .16s ease, opacity .14s ease, box-shadow .16s ease; }
.level-up-celebration[role="button"]:is(:hover,:focus-visible) { transform: translateY(-2px); box-shadow: 0 1.45rem 3.2rem rgb(15 23 42 / .34); }
.level-up-celebration.is-opening{pointer-events:none;opacity:0;transform:translate3d(0,-.2rem,0) scale(.97)}

/* Поиск сообщений — плавающий слой поверх истории, а не новая строка сетки. */
html:root body .messenger-conversation.has-chat-search:not(.has-selection-toolbar) {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}
html:root body .messenger-conversation.has-chat-search.has-selection-toolbar {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}
html:root body .messenger-conversation.has-chat-search .messenger-chat-search {
    position: absolute !important;
    inset: 4.85rem .72rem auto !important;
    z-index: 58 !important;
    width: auto !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--msg-accent) 22%, var(--msg-line)) !important;
    box-shadow: 0 .85rem 2rem rgb(15 23 42 / .16) !important;
    backdrop-filter: blur(18px);
}
html:root body .messenger-conversation.has-space-link.has-chat-search:not(.has-selection-toolbar) {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}
html:root body .messenger-conversation.has-space-link.has-chat-search.has-selection-toolbar {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}
.birthday-notif-item { border-color: color-mix(in srgb, #ec4899 24%, var(--vmesta-ui-line, #e2e8f0)); background: color-mix(in srgb, #ec4899 7%, var(--vmesta-ui-surface, #fff)); }

@media (max-width: 640px) {
    #profile-avatar-card > .profile-safety-menu .profile-safety-trigger { opacity: 1; transform: none; }
    #profile-avatar-card > .profile-safety-menu .profile-safety-dropdown { position: fixed; top: auto; right: .65rem; bottom: .65rem; left: .65rem; width: auto; }
}

@media (max-width: 560px) {
    html:root body .messenger-recording-panel.is-active:not(.is-draft) {
        grid-template-columns: auto auto minmax(3rem, 1fr) 2.2rem !important;
    }

    html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions,
    html:root body .messenger-recording-panel.is-active:not(.is-draft) .messenger-recording-actions > .messenger-recording-send.messenger-send-button {
        width: 2.2rem !important;
        min-width: 2.2rem !important;
        height: 2.2rem !important;
        min-height: 2.2rem !important;
    }
}

/* Эти правила стоят последними: старые темы просмотрщика не должны обрезать меню личности или гасить целевую подсветку. */
html:root body :is(#post-viewer, #media-viewer) .comment-form-container:has(.space-comment-identity),
html:root body .space-comment-form .comment-form-container:has(.space-comment-identity) { overflow: visible !important; }
/* ------------[Меню автора поверх обсуждения]------------ // Не позволяет нижней оболочке формы обрезать выпадающий список выбора автора комментария. Модуль: «комментарии пространства». Часть 1/1 */
html:root body :is(#post-viewer, #media-viewer) .viewer-form-shell:has(.space-comment-identity) { z-index: 40 !important; overflow: visible !important; }
html:root body .space-comment-identity-menu { z-index: 100 !important; }
html:root body .comment-node.highlight-comment { border-left-color: #3186ff !important; background: color-mix(in srgb, #3186ff 15%, var(--vmesta-ui-surface, var(--adaptive-surface, #fff))) !important; box-shadow: 0 0 0 2px color-mix(in srgb, #3186ff 48%, transparent), 0 0 1.4rem color-mix(in srgb, #3186ff 55%, transparent) !important; }
html:root body .comment-node.highlight-comment-like .comment-like-btn,
html:root body .notification-reaction-highlight { color: #ff4567 !important; filter: drop-shadow(0 0 .48rem rgba(255,69,103,.9)) !important; }

/* ------------[Медаль подтверждения групп и каналов]------------ // Один адаптивный знак располагается поверх аватара во всех темах и отображается только при серверном подтверждении комнаты. Модуль: «верификация общих чатов». Часть 1/1 */
.messenger-room-verified-avatar { position: relative; display: inline-flex; flex: 0 0 auto; align-self: center; }
.messenger-room-verification-badge {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    background: #3b82f6;
    -webkit-mask: url('/assets/verified-medal.svg?v=20260904.1') center / contain no-repeat;
    mask: url('/assets/verified-medal.svg?v=20260904.1') center / contain no-repeat;
    filter: drop-shadow(0 0 .34rem rgba(59, 130, 246, .62));
}
.messenger-room-verified-avatar > .messenger-room-verification-badge {
    position: absolute;
    z-index: 4;
    top: -.28rem;
    left: -.4rem;
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 50%;
    background-color: #3b82f6;
}
/* Фиксированный служебный цвет имеет приоритет над палитрами светлой, тёмной и пользовательских тем. */
html:root body .messenger-room-verification-badge { background-color: #3b82f6 !important; color: #3b82f6 !important; }
.messenger-room-panel-profile > .messenger-room-verified-avatar > .messenger-room-verification-badge { top: .05rem; left: -.28rem; width: 1.25rem; height: 1.25rem; }
.messenger-room-verification-status { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .62rem; width: 100%; padding: .62rem .72rem; border: 1px solid color-mix(in srgb, var(--msg-text-muted) 18%, transparent); border-radius: .9rem; background: color-mix(in srgb, var(--msg-text-muted) 7%, var(--msg-panel, #fff)); text-align: left; }
.messenger-room-verification-status:not(.is-verified) { grid-template-columns: minmax(0,1fr) auto; }
.messenger-room-verification-status > i { opacity: .38; }
.messenger-room-verification-status.is-verified { border-color: color-mix(in srgb, var(--color-dynamic, #2f80ed) 38%, transparent); background: color-mix(in srgb, var(--color-dynamic, #2f80ed) 10%, var(--msg-panel, #fff)); }
.messenger-room-verification-status.is-verified > i { opacity: 1; }
.messenger-room-verification-status > span { display: grid; min-width: 0; gap: .12rem; }
.messenger-room-verification-status > span b { color: var(--msg-text); font-size: .72rem; }
.messenger-room-verification-status > span small { color: var(--msg-text-muted); font-size: .58rem; }
.messenger-room-verification-status > button { border: 0; border-radius: .72rem; padding: .55rem .7rem; background: var(--color-dynamic, var(--msg-accent, #2f80ed)); color: #fff; font-size: .58rem; font-weight: 900; white-space: nowrap; }
.messenger-room-panel-overview-actions { width: 100%; margin-top: .55rem; }
.messenger-room-panel-overview-actions > button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .68rem; border: 1px solid color-mix(in srgb, var(--msg-text-muted) 18%, transparent); border-radius: .85rem; background: color-mix(in srgb, var(--color-dynamic, #2f80ed) 7%, var(--msg-panel, #fff)); color: var(--msg-text); text-align: left; }
.messenger-room-panel-overview-actions > button > span:not(.messenger-icon) { display: grid; gap: .1rem; }
.messenger-room-panel-overview-actions strong { font-size: .7rem; }
.messenger-room-panel-overview-actions small { color: var(--msg-text-muted); font-size: .58rem; }
@media (max-width: 640px) { .achievements-scope-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .messenger-room-verification-status { grid-template-columns: auto minmax(0,1fr); } .messenger-room-verification-status > button { grid-column: 1 / -1; width: 100%; } }

/* ------------[Финальные приоритеты текущего обновления]------------ // Закрепляет геометрию и служебные цвета поверх исторических блоков тем. Модуль: «оформление интерфейса». Часть 204/204 */
html:root body #relationship-card > .mt-2 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: .65rem !important; overflow: visible !important; }
html:root body #relationship-visual { align-self: end !important; width: 4.45rem !important; max-width: 4.45rem !important; min-height: 2.2rem !important; margin: 0 0 .05rem !important; padding: 0 !important; overflow: visible !important; }
html:root body #relationship-avatar-pair { display: grid !important; width: 100% !important; grid-template-columns: repeat(2, 2rem) !important; align-items: center !important; justify-content: end !important; gap: .28rem !important; overflow: visible !important; }
html:root body #relationship-avatar-pair > * { position: relative !important; display: block !important; width: 2rem !important; height: 2rem !important; overflow: visible !important; background: transparent !important; }
html:root body #relationship-avatar-pair :is(img, .avatar-placeholder) { display: block !important; width: 2rem !important; height: 2rem !important; object-fit: cover !important; object-position: center !important; }
html:root body #space-about-panel .space-about-longform { position: relative !important; }
html:root body #space-about-panel .space-about-longform > header .space-about-expand-toggle { right: .78rem !important; }
html:root body #space-about-panel .space-about-details-emoji { right: .78rem !important; bottom: .78rem !important; margin: 0 !important; transform: none !important; }
html:root body #space-about-panel .space-about-longform > textarea { padding-right: 3.25rem !important; padding-bottom: 3rem !important; }
html:root body #space-about-panel :is(.profile-verification-card, .space-verification-card) { border-color: rgb(37 131 255 / .34) !important; background: color-mix(in srgb, #2583ff 7%, var(--vmesta-ui-surface, var(--standard-panel))) !important; }
html:root body #space-about-panel .verification-mark,
html:root body #about-modal .verification-mark { width: 3.35rem !important; height: 3.35rem !important; flex: 0 0 3.35rem !important; border-color: rgb(37 131 255 / .42) !important; border-radius: 1rem !important; background: rgb(37 131 255 / .13) !important; color: #2583ff !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 .55rem 1.25rem rgb(37 131 255 / .18) !important; }
html:root body #space-about-panel .verification-mark::before,
html:root body #about-modal .verification-mark::before { background-color: #2583ff !important; }

/* ------------[Быстрое окно и общая панель инструментов]------------ //
   Убирает дорогой blur всей страницы и держит смайлик рядом с кнопкой
   разворачивания в заголовке подробного описания. Модуль: «оформление интерфейса». Часть 1/1 */
html:root body #space-about-modal.space-about-modal-layer {
  background: rgb(2 6 23 / .58) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: strict;
  isolation: isolate;
}
html:root body #space-about-panel {
  contain: layout paint style;
}
html:root body #space-about-panel .space-about-longform > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .7rem;
  padding-right: 0 !important;
}
html:root body #space-about-panel .space-about-longform > header > :is(span:first-child, strong) {
  grid-column: 1;
}
html:root body #space-about-panel .space-about-longform > header > .space-about-longform-tools {
  position: static !important;
  display: flex !important;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-items: center;
  gap: .38rem;
}
html:root body #space-about-panel .space-about-longform-tools > :is(.space-about-expand-toggle, .space-about-details-emoji) {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}
html:root body #space-about-panel .space-about-longform > textarea {
  padding-right: .8rem !important;
  padding-bottom: .8rem !important;
}

/* ------------[Исправление закрытия справки рейтинга]------------ // Не даёт стилю окна перебивать hidden и удерживает справку внутри правой колонки. Модуль: «рейтинг пространств». Часть 1/1 */
html:root body .spaces-top-panel > footer.spaces-top-legend { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
html:root body .spaces-top-panel .spaces-top-help-popover.hidden { display: none !important; }
html:root body .spaces-top-panel .spaces-top-help-popover { position: absolute !important; right: 0 !important; bottom: calc(100% + .6rem) !important; left: auto !important; display: grid !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: .58rem !important; overflow: auto !important; padding: .75rem !important; }
html:root body .spaces-top-panel .spaces-top-help-popover > header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .5rem !important; padding: 0 !important; background: transparent !important; }
html:root body .spaces-top-panel .spaces-top-help-popover > header > span { display: block !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; font-size: .72rem !important; font-weight: 950 !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root body .spaces-top-panel .spaces-top-help-popover > header > button { display: grid !important; width: 1.8rem !important; height: 1.8rem !important; min-width: 1.8rem !important; place-items: center !important; padding: 0 !important; }
html:root body .spaces-top-panel .spaces-top-help-popover :is(.spaces-top-help-tiers, .spaces-top-help-nominations) span { color: inherit !important; font-size: inherit !important; letter-spacing: 0 !important; }

/* ------------[Партнёр строго в своей строке]------------ // Помещает фотографии рядом с подписью партнёра, а не у верхнего края всей карточки. Модуль: «личный профиль». Часть 1/1 */
html:root body #relationship-card .profile-relationship-layout { display: block !important; overflow: visible !important; }
html:root body #relationship-card .profile-relationship-partner-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: .65rem !important; min-height: 2.35rem !important; margin-top: .42rem !important; overflow: visible !important; }
html:root body #relationship-card #relationship-edit-meta { min-width: 0 !important; margin: 0 !important; }
html:root body #relationship-card #relationship-visual { align-self: center !important; width: 4.45rem !important; max-width: 4.45rem !important; min-height: 2rem !important; margin: 0 !important; }

/* ------------[Выразительная синяя медаль]------------ // Делает новый знак верификации крупным визуальным элементом с фиксированной синей палитрой. Модуль: «верификация». Часть 1/1 */
html:root body #space-about-panel .space-verification-card .verification-mark,
html:root body #about-modal .profile-verification-card .verification-mark { width: 4.15rem !important; height: 4.15rem !important; flex-basis: 4.15rem !important; border: 2px solid rgb(37 131 255 / .58) !important; border-radius: 1.2rem !important; background: radial-gradient(circle at 30% 22%, rgb(255 255 255 / .7) 0 5%, transparent 6%), linear-gradient(145deg, rgb(37 131 255 / .24), rgb(37 131 255 / .08)) !important; color: #2583ff !important; box-shadow: inset 0 0 1.35rem rgb(37 131 255 / .15), 0 .65rem 1.45rem rgb(37 131 255 / .22) !important; transform: none !important; }
html:root body #space-about-panel .space-verification-card .verification-mark::before,
html:root body #about-modal .profile-verification-card .verification-mark::before { width: 68% !important; height: 68% !important; background-color: #2583ff !important; filter: drop-shadow(0 0 .5rem rgb(37 131 255 / .42)); }

@media (max-width: 640px) {
    html:root body .spaces-top-panel .spaces-top-help-popover { position: fixed !important; right: .75rem !important; bottom: .75rem !important; left: .75rem !important; width: auto !important; max-width: none !important; }
    html:root body #space-about-panel .space-verification-card .verification-mark,
    html:root body #about-modal .profile-verification-card .verification-mark { width: 3.55rem !important; height: 3.55rem !important; flex-basis: 3.55rem !important; }
}

/* ------------[Финальные приоритеты стабильной геометрии]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 5/34 */
html:root body #messages-side-root.hidden { display: none !important; }
html:root body #friends-modal > div { width: min(34rem, calc(100vw - 2rem)) !important; height: min(36rem, calc(100dvh - 2rem)) !important; max-height: calc(100dvh - 2rem) !important; border-radius: 1.15rem !important; border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-panel, var(--standard-panel)) !important; }
html:root body #friends-modal > div > :is(.p-8, .h-6) { background: var(--vmesta-ui-panel, var(--standard-panel)) !important; }
html:root body #friends-modal #modal-friends-list { min-height: 0 !important; border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; }
html:root body #friends-modal > div > button[aria-label="Закрыть модальное окно"] { top: .9rem !important; right: .9rem !important; display: grid !important; width: 2.25rem !important; height: 2.25rem !important; padding: 0 !important; place-items: center !important; border-radius: .68rem !important; background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; }
html:root body #photos-list-container:has(.profile-photos-empty) { min-height: 12.5rem !important; }
html:root body :is(.profile-photos-empty, .profile-albums-loading) { min-height: 11.5rem !important; padding-block: 1.5rem !important; }
html:root body .cover-account-pane .cover-account-card { overflow: visible !important; border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-panel, var(--standard-panel)) !important; }
html:root body .cover-account-pane .cover-account-card-header { position: sticky !important; z-index: 20 !important; top: 0 !important; border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: color-mix(in srgb, var(--vmesta-ui-panel, var(--standard-panel)) 94%, transparent) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; backdrop-filter: blur(14px); }
html:root body .cover-account-verification-mark,
html:root body .cover-account-verification[data-status="verified"] .cover-account-verification-mark { border-color: rgb(37 131 255 / .48) !important; background: color-mix(in srgb, #2583ff 14%, var(--vmesta-ui-panel, #fff)) !important; color: #2583ff !important; }
html:root body .cover-account-verification-mark::before { background-color: #2583ff !important; }
html:root body .cover-account-verification-mark > svg { display: none !important; }
@media (min-width: 641px) { html:root body .achievements-dialog { width: min(70rem, calc(100vw - 3rem)) !important; height: min(46rem, calc(100dvh - 3rem)) !important; max-height: calc(100dvh - 3rem) !important; grid-template-rows: auto auto auto minmax(0, 1fr) !important; } }
html:root body .achievements-dialog-head { min-height: 0 !important; padding: .72rem 1rem .65rem !important; }
html:root body :is(.achievements-scope-tabs, .achievements-dialog-tabs) { padding: .5rem 1rem !important; }
html:root body :is(.achievements-scope-tabs, .achievements-dialog-tabs) button { min-height: 2.35rem !important; padding: .45rem .65rem !important; }
html:root body .cover-account-pane :is(h3, strong, label, .privacy-setting-copy) { color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body .cover-account-pane :is(p, small, .cover-privacy-save-status) { color: var(--vmesta-ui-muted, var(--standard-text-passive)) !important; }
html:root body .cover-account-pane :is(input, select, textarea, .cover-account-password-value, .privacy-audience-picker) { border-color: var(--vmesta-ui-line, var(--standard-line)) !important; background: var(--vmesta-ui-soft, var(--standard-panel-soft)) !important; color: var(--vmesta-ui-ink, var(--standard-text-active)) !important; }
html:root body [role="dialog"] button[aria-label*="Закры"] { line-height: 1 !important; }
html:root body [role="dialog"] button[aria-label*="Закры"] > svg { display: block !important; margin: 0 !important; }

/* ------------[Контекстная кнопка возврата в чужой профиль]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 6/34 */
/* Левая панель всегда личная; эта кнопка появляется только в горизонтальной
   медианавигации чужого аккаунта и возвращает к его основной странице. */
html:root body:not(.space-route) #profile-tabs-container #btn-tab-my.is-visible {
    display: inline-flex !important;
    align-items: center !important;
}
html:root body.space-route #profile-tabs-container #btn-tab-my,
html:root body:not(.space-route) #profile-tabs-container #btn-tab-my:not(.is-visible) {
    display: none !important;
}

/* ------------[Карточки друзей и подписчиков]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 7/34 */
html:root body #friends-modal #modal-friends-list {
    display: grid !important;
    align-content: start !important;
    gap: .62rem !important;
    padding: .85rem !important;
}
html:root body #friends-modal #modal-friends-list .modal-friend-card {
    width: 100% !important;
    min-height: 4.7rem !important;
    margin: 0 !important;
    padding: .72rem .78rem !important;
    border: 1px solid var(--vmesta-ui-line, var(--standard-line)) !important;
    border-radius: .9rem !important;
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
    box-shadow: 0 .28rem .8rem rgb(15 23 42 / .055) !important;
}
html:root body #friends-modal #modal-friends-list .modal-friend-card:hover {
    border-color: color-mix(in srgb, #2583ff 32%, var(--vmesta-ui-line, #dbe4ef)) !important;
    box-shadow: 0 .55rem 1.2rem rgb(15 23 42 / .1) !important;
}
html:root body #friends-modal[data-mode="space-subscribers"] #modal-friends-list .modal-friend-card {
    background: color-mix(in srgb, #2583ff 4%, var(--vmesta-ui-panel, #fff)) !important;
}
html:root body #friends-modal :is(.modal-friend-name, .modal-friend-details) {
    color: var(--vmesta-ui-ink, var(--standard-text-active)) !important;
}
html:root body #friends-modal .modal-friend-login {
    color: var(--vmesta-ui-muted, var(--standard-text-passive)) !important;
}

/* ------------[Единая синяя шапка настроек аккаунта]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 8/34 */
html:root body :is(#cover-data-pane, #cover-security-pane, #cover-notifications-pane) .cover-account-card {
    border-color: color-mix(in srgb, #2583ff 18%, var(--vmesta-ui-line, #dbe4ef)) !important;
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane, #cover-notifications-pane) .cover-account-card-header {
    border-bottom: 1px solid color-mix(in srgb, #2583ff 18%, var(--vmesta-ui-line, #dbe4ef)) !important;
    background: color-mix(in srgb, #2583ff 7%, var(--vmesta-ui-panel, #fff)) !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane, #cover-notifications-pane) .cover-account-card-header .cover-account-card-icon {
    border-color: rgb(37 131 255 / .28) !important;
    background: rgb(37 131 255 / .12) !important;
    color: #2583ff !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane, #cover-notifications-pane) .cover-account-card-header h3 {
    color: #1f6fd1 !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane, #cover-notifications-pane) .cover-account-card-header p {
    color: var(--vmesta-ui-muted, var(--standard-text-passive)) !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane) .cover-account-list :is(strong, label) {
    color: var(--vmesta-ui-ink, var(--standard-text-active)) !important;
}
html:root body :is(#cover-data-pane, #cover-security-pane) .cover-account-list small {
    color: var(--vmesta-ui-muted, var(--standard-text-passive)) !important;
}

/* Медаль больше не залезает на название и статус верификации. */
html:root body #cover-data-pane .cover-account-verification {
    grid-template-columns: 2.9rem minmax(7.5rem, 1fr) auto !important;
    gap: .75rem !important;
    min-width: 0 !important;
    padding: .62rem .7rem !important;
}
html:root body #cover-data-pane .cover-account-verification-mark,
html:root body #cover-data-pane .cover-account-verification[data-status="verified"] .cover-account-verification-mark {
    width: 2.8rem !important;
    height: 2.8rem !important;
    min-width: 2.8rem !important;
    flex-basis: 2.8rem !important;
    border-radius: .85rem !important;
}
html:root body #cover-data-pane .cover-account-verification > div {
    min-width: 0 !important;
    padding-left: .08rem !important;
}
html:root body #cover-data-pane .cover-account-verification :is(strong, small) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    html:root body #friends-modal #modal-friends-list { padding: .65rem !important; }
    html:root body #cover-data-pane .cover-account-verification {
        grid-template-columns: 2.65rem minmax(0, 1fr) !important;
    }
    html:root body #cover-data-pane .cover-account-verification > button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ------------[Постоянная контекстная полоса под обложкой]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 9/34 */
/* Высота не меняется между своим профилем, гостем и пространством. */
html:root body #profile-tabs-container {
    min-height: 3.5rem !important;
}
html:root body #profile-tabs-container .profile-tabs-inner {
    min-height: 3.5rem !important;
    box-sizing: border-box !important;
}
html:root body #profile-tabs-container.is-own-profile-context .profile-tab-list {
    display: flex !important;
}
html:root body #profile-tabs-container.is-own-profile-context .profile-tab-list > :is(#about-profile-button, #btn-tab-photos, #btn-tab-videos, #btn-tab-music) {
    display: inline-flex !important;
    align-items: center !important;
}
html:root body #profile-tabs-container.is-own-profile-context .profile-contact-links-bar {
    margin-left: auto !important;
}

/* ------------[Чистый поиск без обводок]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 10/34 */
html:root body #friends-modal > div,
html:root body #friends-modal #modal-friends-list,
html:root body #friends-modal #modal-friends-list .modal-friend-card,
html:root body #friends-modal .friends-modal-filter-shell,
html:root body #friends-modal .friends-modal-tabs,
html:root body #friends-modal .friends-modal-tab,
html:root body #friends-modal #modal-friends-search {
    border: 0 !important;
    box-shadow: none !important;
}
html:root body #friends-modal #modal-friends-list .modal-friend-card {
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 90%, var(--vmesta-ui-primary, #2583ff) 10%) !important;
}
html:root body #friends-modal .friends-modal-search-block {
    height: 2.65rem !important;
    border-radius: .82rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 84%, var(--vmesta-ui-primary, #2583ff) 16%) !important;
}
html:root body #friends-modal #modal-friends-search {
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink, #173f73) !important;
    font-size: .7rem !important;
    font-weight: 760 !important;
    caret-color: var(--vmesta-ui-primary, #2583ff) !important;
}
html:root body #friends-modal #modal-friends-search::placeholder {
    color: var(--vmesta-ui-muted, #64748b) !important;
    opacity: .86 !important;
}
html:root body #friends-modal .friends-modal-search-block > svg {
    color: var(--vmesta-ui-primary, #2583ff) !important;
    opacity: 1 !important;
}
html:root body #friends-modal .modal-friends-filter-button {
    background: var(--vmesta-ui-panel, #fff) !important;
    color: var(--vmesta-ui-primary, #2583ff) !important;
}

/* Поиск публикаций одинаков в ленте, профиле и любом пространстве. */
html:root body .publisher-search-panel {
    margin-top: .4rem !important;
    border: 0 !important;
    border-radius: .9rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 88%, var(--vmesta-ui-primary, #2583ff) 12%) !important;
    box-shadow: none !important;
}
html:root body .publisher-search-panel > label > div {
    border: 0 !important;
    background: var(--vmesta-ui-panel, #fff) !important;
    box-shadow: none !important;
}
html:root body .publisher-search-panel > label > span {
    color: var(--vmesta-ui-muted, #64748b) !important;
}
html:root body .publisher-search-panel input {
    color: var(--vmesta-ui-ink, #173f73) !important;
    font-size: .68rem !important;
    font-weight: 760 !important;
    caret-color: var(--vmesta-ui-primary, #2583ff) !important;
}
html:root body .publisher-search-panel input::placeholder {
    color: var(--vmesta-ui-muted, #64748b) !important;
    opacity: .82 !important;
}
html:root body :is(.publisher-search-button, .publisher-create-button) {
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------[Сворачиваемый раздел «Ещё»]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 11/34 */
html:root body .profile-sidebar-navigation {
    position: relative;
}
.profile-sidebar-navigation-head {
    position: absolute;
    z-index: 3;
    top: .3rem;
    right: .3rem;
    pointer-events: none;
}
.profile-sidebar-navigation-head > span { display: none; }
.profile-sidebar-navigation-head > button { pointer-events: auto; }
html:root body .profile-sidebar-customize-button.hidden,
html:root body:not(.cover-edit-mode) .profile-sidebar-customize-button,
html:root body.space-route .profile-sidebar-customize-button {
    display: none !important;
}
html:root body.cover-edit-mode:not(.space-route) .profile-sidebar-navigation > #nav-my { padding-right: 2.75rem !important; }
.profile-sidebar-more {
    display: grid;
    gap: .24rem;
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 16%, transparent);
}
.profile-sidebar-more-toggle {
    display: flex !important;
    width: 100%;
    align-items: center;
    gap: .5rem;
    border: 0;
    padding: .5rem .72rem;
    border-radius: .72rem;
    background: transparent;
    color: var(--vmesta-ui-muted, #64748b);
    font-size: .72rem;
    font-weight: 760;
    text-align: left;
}
.profile-sidebar-more-toggle > svg:first-child,
.profile-sidebar-more-menu svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--vmesta-ui-primary, #2583ff);
}
.profile-sidebar-more-toggle > svg:first-child circle { fill: currentColor; stroke: none; }
.profile-sidebar-more-chevron {
    width: .9rem;
    height: .9rem;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .16s ease;
}
.profile-sidebar-more-toggle.is-open .profile-sidebar-more-chevron { transform: rotate(180deg); }
.profile-sidebar-more-menu {
    display: grid;
    gap: .18rem;
    overflow: hidden;
    animation: vmesta-sidebar-more-in .16s ease-out;
}
.profile-sidebar-more-menu[hidden] { display: none !important; }
.profile-sidebar-more-menu > button {
    display: grid;
    min-height: 2.25rem;
    grid-template-columns: 1rem minmax(0,1fr) auto;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-radius: .68rem;
    padding: .42rem .72rem;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 90%, var(--vmesta-ui-primary, #2583ff) 10%);
    color: var(--vmesta-ui-ink, #173f73);
    font-size: .67rem;
    font-weight: 780;
    text-align: left;
}
.profile-sidebar-more-menu > button:hover { background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 78%, var(--vmesta-ui-primary, #2583ff) 22%); }
.profile-sidebar-more-menu small { color: var(--vmesta-ui-muted, #64748b); font-size: .45rem; font-weight: 900; text-transform: uppercase; }
@keyframes vmesta-sidebar-more-in { from { opacity: 0; transform: translateY(-.3rem); } to { opacity: 1; transform: none; } }

/* ------------[Редактор порядка левого меню]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 12/34 */
.sidebar-customizer-modal {
    position: fixed;
    z-index: 21000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.sidebar-customizer-modal.hidden { display: none !important; }
.sidebar-customizer-backdrop { position: absolute; inset: 0; border: 0; background: rgb(2 6 23 / .68); backdrop-filter: blur(10px); }
.sidebar-customizer-dialog {
    position: relative;
    display: grid;
    width: min(100%, 28rem);
    max-height: min(88dvh, 40rem);
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden;
    border: 0;
    border-radius: 1.15rem;
    background: var(--vmesta-ui-panel, #fff);
    box-shadow: 0 2rem 5rem -2rem rgb(2 6 23 / .7);
    color: var(--vmesta-ui-ink, #173f73);
}
.sidebar-customizer-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .8rem; }
.sidebar-customizer-dialog > header > div { display: grid; gap: .15rem; }
.sidebar-customizer-dialog header small { color: var(--vmesta-ui-primary, #2583ff); font-size: .5rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-customizer-dialog h3 { margin: 0; color: var(--vmesta-ui-ink, #173f73); font-size: 1rem; font-weight: 950; }
.sidebar-customizer-dialog p { margin: 0; color: var(--vmesta-ui-muted, #64748b); font-size: .6rem; font-weight: 680; }
.sidebar-customizer-list { display: grid; gap: .38rem; overflow: auto; padding: .25rem 1rem 1rem; }
.sidebar-customizer-item {
    display: grid;
    min-height: 2.8rem;
    grid-template-columns: 1.2rem minmax(0,1fr) 2rem 2rem 2rem;
    align-items: center;
    gap: .35rem;
    border: 0;
    border-radius: .82rem;
    padding: .42rem .48rem .42rem .7rem;
    background: var(--vmesta-ui-soft, #eef4fb);
    cursor: grab;
}
.sidebar-customizer-item.is-dragging { opacity: .45; }
.sidebar-customizer-item.is-hidden-item { opacity: .68; }
.sidebar-customizer-copy { display: grid; min-width: 0; gap: .08rem; }
.sidebar-customizer-item strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-customizer-copy small { color: var(--vmesta-ui-muted, #64748b); font-size: .45rem; font-weight: 850; text-transform: uppercase; }
.sidebar-customizer-grip { display: grid; grid-template-columns: repeat(2,.2rem); gap: .15rem; }
.sidebar-customizer-grip i { width: .2rem; height: .2rem; border-radius: 50%; background: var(--vmesta-ui-muted, #64748b); }
.sidebar-customizer-item > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .62rem; background: var(--vmesta-ui-panel, #fff); color: var(--vmesta-ui-primary, #2583ff); }
.sidebar-customizer-item > button:disabled { opacity: .25; }
.sidebar-customizer-item > button svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sidebar-customizer-item > .sidebar-customizer-visibility { color: var(--vmesta-ui-primary, #2583ff); }
.sidebar-customizer-item.is-hidden-item > .sidebar-customizer-visibility { color: var(--vmesta-ui-muted, #64748b); }
.sidebar-customizer-dialog > footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .42rem; padding: .75rem 1rem; background: var(--vmesta-ui-soft, #eef4fb); }
.sidebar-customizer-dialog > footer button { min-height: 2.15rem; border: 0; border-radius: .65rem; padding: .45rem .7rem; background: var(--vmesta-ui-panel, #fff); color: var(--vmesta-ui-ink, #173f73); font-size: .56rem; font-weight: 900; }
.sidebar-customizer-dialog > footer button.is-primary { background: var(--vmesta-ui-primary, #2583ff); color: #fff; }

/* ------------[Единые крестики и карандаши]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 13/34 */
html:root body :is(
    .vmesta-close-button,
    .space-about-close,
    .notification-history-close,
    button[aria-label^="Закрыть"]
):not([class*="backdrop"]):not(.profile-interests-edit) {
    display: inline-grid !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .68rem !important;
    background: var(--vmesta-ui-soft, #eef4fb) !important;
    color: var(--vmesta-ui-muted, #64748b) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
html:root body :is(
    .vmesta-close-button,
    .space-about-close,
    .notification-history-close,
    button[aria-label^="Закрыть"]
):not([class*="backdrop"]):not(.profile-interests-edit) > svg {
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}
html:root body :is(
    .vmesta-edit-button,
    #edit-profile-btn,
    .space-about-edit-button:not(.is-save),
    #achievement-showcase-edit-button,
    .profile-interests-edit,
    .showcase-edit-button,
    .avatar-edit-corner,
    .cover-motion-btn
) {
    display: inline-grid !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .68rem !important;
    background: var(--vmesta-ui-soft, #eef4fb) !important;
    color: var(--vmesta-ui-primary, #2583ff) !important;
    box-shadow: none !important;
}
html:root body :is(
    .vmesta-edit-button,
    #edit-profile-btn,
    .space-about-edit-button:not(.is-save),
    #achievement-showcase-edit-button,
    .profile-interests-edit,
    .showcase-edit-button,
    .avatar-edit-corner,
    .cover-motion-btn
) > svg {
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html:root body :is(.vmesta-edit-button, #edit-profile-btn, .space-about-edit-button:not(.is-save), #achievement-showcase-edit-button, .profile-interests-edit, .showcase-edit-button, .avatar-edit-corner, .cover-motion-btn):hover,
html:root body :is(.vmesta-close-button, .space-about-close, .notification-history-close, button[aria-label^="Закрыть"]):not([class*="backdrop"]):not(.profile-interests-edit):hover {
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 72%, var(--vmesta-ui-primary, #2583ff) 28%) !important;
    color: var(--vmesta-ui-primary, #2583ff) !important;
}
html:root body :is(.vmesta-edit-button, #edit-profile-btn, .space-about-edit-button, #achievement-showcase-edit-button, .profile-interests-edit, .showcase-edit-button, .avatar-edit-corner, .cover-motion-btn).hidden,
html:root body :is(.vmesta-close-button, .space-about-close, .notification-history-close).hidden,
html:root body #achievement-showcase-edit-button:not(.is-available) {
    display: none !important;
}

/* Кнопка смены аватара всегда показывает контрастный карандаш. */
html:root body #profile-avatar-card > button.upload-avatar-btn.avatar-edit-corner:not(.hidden) {
    background: var(--vmesta-ui-primary, #2583ff) !important;
    color: #fff !important;
}
html:root body #profile-avatar-card > button.upload-avatar-btn.avatar-edit-corner > svg.avatar-edit-icon {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html:root body #profile-avatar-card > button.upload-avatar-btn.avatar-edit-corner > svg.avatar-edit-icon > path {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Пустая часть списка друзей больше не образует отдельную синюю плашку. */
html:root body #friends-modal #modal-friends-list,
html:root body #friends-modal .friends-modal-footer-fill {
    background: var(--vmesta-ui-panel, var(--standard-panel)) !important;
}

html:root body .profile-sidebar-navigation > .nav-item.is-user-hidden {
    display: none !important;
}

@media (max-width: 560px) {
    .sidebar-customizer-dialog > footer { grid-template-columns: 1fr 1fr; }
    .sidebar-customizer-dialog > footer > span { display: none; }
}
@media (max-width: 767px) {
    html:root body #profile-tabs-container.is-own-profile-context .profile-tabs-inner {
        padding-inline: .65rem !important;
    }
    html:root body #profile-tabs-container.is-own-profile-context .profile-contact-link.is-compact .profile-contact-link-copy {
        display: none !important;
    }
    html:root body #profile-tabs-container.is-own-profile-context .profile-contact-link.is-compact {
        padding-inline: .18rem !important;
    }
}

/* ------------[Поиск новых знакомств как в «Мои друзья»]------------ // Оформляет связанный блок интерфейса.
   Поле получает ту же мягкую плашку, а расширенные параметры открываются
   отдельным слоем поверх рекомендаций и больше не меняют высоту страницы. Модуль: «оформление интерфейса». Часть 14/34 */
html:root body .friends-search-toolbar {
    position: relative !important;
    z-index: 70 !important;
}
html:root body .friends-search-content {
    position: relative;
    z-index: 1;
}
html:root body .friends-search-field {
    position: relative !important;
    display: flex !important;
    height: 2.65rem !important;
    align-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: .82rem !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 84%, var(--vmesta-ui-primary, #2583ff) 16%) !important;
    box-shadow: none !important;
}
html:root body .friends-search-field > svg {
    position: absolute !important;
    top: 50% !important;
    left: .95rem !important;
    z-index: 1;
    width: .9rem !important;
    height: .9rem !important;
    margin: 0 !important;
    color: var(--vmesta-ui-primary, #2583ff) !important;
    stroke: currentColor !important;
    pointer-events: none;
    transform: translateY(-50%) !important;
}
html:root body .friends-search-field input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vmesta-ui-ink, #173f73) !important;
    padding: 0 3rem 0 2.65rem !important;
    font-size: .7rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    caret-color: var(--vmesta-ui-primary, #2583ff) !important;
    outline: 0 !important;
}
html:root body .friends-search-field input::placeholder {
    color: var(--vmesta-ui-muted, #64748b) !important;
    opacity: .86 !important;
}
html:root body .friends-search-field .friends-filter-button {
    position: absolute !important;
    top: 50% !important;
    right: .38rem !important;
    display: grid !important;
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: .62rem !important;
    background: var(--vmesta-ui-panel, #fff) !important;
    color: var(--vmesta-ui-primary, #2583ff) !important;
    transform: translateY(-50%) !important;
}
html:root body .friends-search-filters {
    position: absolute !important;
    top: calc(100% - .18rem) !important;
    right: 1rem !important;
    left: 1rem !important;
    z-index: 120 !important;
    width: auto !important;
    max-height: min(70vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 !important;
    border: 1px solid var(--vmesta-ui-line, #dbe4f0) !important;
    background: var(--vmesta-ui-soft, #eef4fb) !important;
    box-shadow: 0 1.4rem 3.4rem -1.35rem rgb(2 6 23 / .58), 0 .45rem 1.15rem -.65rem rgb(15 23 42 / .34) !important;
    transform-origin: top right;
    animation: modal-friends-filter-in .16s ease-out;
    overscroll-behavior: contain;
}
html:root body .friends-search-filters[hidden] {
    display: none !important;
}
@media (max-width: 520px) {
    html:root body .friends-search-filters {
        right: .7rem !important;
        left: .7rem !important;
        max-height: min(72vh, 32rem);
    }
}
/* ------------[Быстрый вход в шапке]------------ // Переключает запомненные аккаунты поверх профиля без повторного ввода пароля. Модуль: «оформление интерфейса». Часть 15/34 */
.top-account-switch-trigger {
    position: absolute;
    left: 7px;
    bottom: -9px;
    z-index: 12;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 999px;
    color: #64748b;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .16);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.top-account-switch-trigger[hidden] { display: none !important; }
.top-account-switch-trigger:hover { color: #d97745; background: #fff7f1; }
.top-account-switch-trigger.is-open { color: #d97745; transform: rotate(180deg); }
.top-account-switch-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.top-account-switch-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: -8px;
    z-index: 10020;
    width: min(310px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    color: #0f172a;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .2);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(-7px) scale(.98);
    transform-origin: top left;
    transition: opacity .18s ease, transform .18s ease;
}

.top-account-switch-menu[hidden] { display: none !important; }
.top-account-switch-menu.is-open { opacity: 1; transform: translateY(0) scale(1); }
.top-account-switch-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 27px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(226, 232, 240, .9);
    border-left: 1px solid rgba(226, 232, 240, .9);
    background: inherit;
    transform: rotate(45deg);
}

.top-account-switch-menu header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 7px 10px;
}

.top-account-switch-menu header span { font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #9a684e; }
.top-account-switch-menu header small { font-size: 9px; font-weight: 800; color: #94a3b8; }
.top-account-switch-list { display: grid; gap: 6px; }

.top-account-switch-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 25px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 15px;
    text-align: left;
    color: inherit;
    background: #f3f6fa;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.top-account-switch-row:hover { border-color: rgba(224, 139, 91, .28); background: #fff4ec; transform: translateX(2px); }
.top-account-switch-row.is-loading { pointer-events: none; opacity: .68; }
.top-account-switch-avatar { position: relative; width: 42px; height: 42px; }
.top-account-switch-avatar img { display: block; width: 100%; height: 100%; border-radius: 14px; object-fit: cover; background: #e2e8f0; }
.top-account-switch-online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #f3f6fa; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .14); }
.top-account-switch-copy { min-width: 0; display: grid; gap: 2px; }
.top-account-switch-copy strong { overflow: hidden; font-size: 12px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.top-account-switch-copy small { overflow: hidden; font-size: 10px; font-weight: 650; color: #7b8ca5; text-overflow: ellipsis; white-space: nowrap; }
.top-account-switch-enter { color: #d97745; font-size: 18px; transition: transform .18s ease; }
.top-account-switch-row:hover .top-account-switch-enter { transform: translateX(3px); }

.dark .top-account-switch-trigger { border-color: rgba(100, 116, 139, .35); color: #94a3b8; background: rgba(30, 41, 59, .97); }
.dark .top-account-switch-trigger:hover,
.dark .top-account-switch-trigger.is-open { color: #f0aa79; background: #263449; }
.dark .top-account-switch-menu { border-color: rgba(71, 85, 105, .7); color: #f8fafc; background: rgba(15, 23, 42, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .48); }
.dark .top-account-switch-menu::before { border-color: rgba(71, 85, 105, .7); }
.dark .top-account-switch-menu header span { color: #e6a276; }
.dark .top-account-switch-menu header small { color: #64748b; }
.dark .top-account-switch-row { background: rgba(30, 41, 59, .92); }
.dark .top-account-switch-row:hover { border-color: rgba(229, 154, 101, .25); background: rgba(67, 48, 49, .92); }
.dark .top-account-switch-online { border-color: #1e293b; }
.dark .top-account-switch-copy small { color: #91a1b8; }

@media (max-width: 720px) {
    .top-account-switch-menu { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; transform-origin: top left; }
    .top-account-switch-menu::before { left: 31px; }
}

/* ------------[Редакторы на границах карточек]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 16/34 */
html:root body :is(.achievement-sidebar-card, #profile-interests-card, #side-photos > div) {
    position: relative;
    overflow: visible;
}
html:root body .profile-sidebar-navigation {
    position: relative;
}
html:root body .profile-sidebar-navigation-head {
    /* Кнопка остаётся на рамке, но не выходит за scrollport меню и не
       заставляет браузер отключать внутреннюю прокрутку. */
    top: .28rem;
    right: .28rem;
}
html:root body :is(
    .profile-sidebar-customize-button,
    #achievement-showcase-edit-button,
    #avatar-showcase-edit,
    #profile-interests-card .profile-interests-edit
) {
    z-index: 8 !important;
    border: 2px solid var(--vmesta-ui-panel, var(--standard-panel, #fff)) !important;
    border-radius: .78rem !important;
    background: var(--vmesta-ui-primary, var(--color-dynamic, #2583ff)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -13px color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 75%, #000) !important;
}
html:root body #achievement-showcase-edit-button {
    position: absolute !important;
    top: -.7rem;
    right: -.62rem;
}
html:root body #avatar-showcase-edit {
    position: absolute !important;
    top: -.7rem;
    right: -.62rem;
}
html:root body #profile-interests-card .profile-interests-edit {
    position: absolute !important;
    top: -.7rem;
    right: -.62rem;
}
html:root body :is(.profile-sidebar-customize-button, #achievement-showcase-edit-button, #avatar-showcase-edit, #profile-interests-card .profile-interests-edit):hover {
    background: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 82%, #fff) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
html:root body.cover-edit-mode:not(.space-route) .profile-sidebar-navigation > #nav-my {
    padding-right: .75rem !important;
}

/* ------------[Библиотека ковров]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 17/34 */
html:root body #cover-image-grid.cover-animation-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: .7rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}
html:root body .cover-animation-grid.hidden { display: none !important; }
.cover-image-group {
    align-self: start;
    min-height: max-content;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 20%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 84%, transparent);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cover-image-group.is-open {
    border-color: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 35%, transparent);
    box-shadow: 0 16px 32px -28px var(--vmesta-ui-primary, #2583ff);
}
.cover-image-group-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    border: 0;
    padding: .85rem 1rem;
    background: transparent;
    color: var(--vmesta-ui-ink, #173f73);
    text-align: left;
}
.cover-image-group-toggle > span { display: grid; min-width: 0; gap: .16rem; }
.cover-image-group-toggle strong { font-size: .72rem; font-weight: 900; }
.cover-image-group-toggle small { color: var(--vmesta-ui-muted, #64748b); font-size: .55rem; font-weight: 650; }
.cover-image-group-toggle em {
    min-width: 1.55rem;
    border-radius: .55rem;
    padding: .28rem .42rem;
    background: var(--vmesta-ui-soft, #eef4fb);
    color: var(--vmesta-ui-primary, #2583ff);
    font-size: .5rem;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}
.cover-image-group-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.cover-image-group.is-open .cover-image-group-toggle svg { transform: rotate(180deg); }
.cover-image-group-content { border-top: 1px solid color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 15%, transparent); padding: .8rem; }
.cover-image-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.cover-library-state {
    grid-column: 1 / -1;
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px dashed color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 26%, transparent);
    border-radius: .85rem;
    color: var(--vmesta-ui-muted, #64748b);
    font-size: .6rem;
    font-weight: 750;
    text-align: center;
}
.cover-library-state > span { width: .8rem; height: .8rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cover-library-spin .7s linear infinite; }
@keyframes cover-library-spin { to { transform: rotate(360deg); } }

/* ------------[Индивидуальные сцены предпросмотра анимаций]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 18/34 */
.cover-animation-preview { isolation: isolate; }
.cover-preview-scene { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cover-preview-scene + .cover-preview-symbol { z-index: 3; width: 1.3rem; height: 1.3rem; opacity: .38; }
.cover-preview-scene i, .cover-preview-scene b, .cover-preview-scene span { position: absolute; display: block; }

.cover-preview-scene-galaxy .preview-orbit { inset: 50% auto auto 50%; width: 58%; height: 36%; border: 1px solid rgb(194 211 255 / .48); border-radius: 50%; transform-origin: center; }
.cover-preview-scene-galaxy .orbit-a { animation: preview-galaxy-orbit 6s linear infinite; }
.cover-preview-scene-galaxy .orbit-b { width: 82%; height: 54%; animation: preview-galaxy-orbit-b 9s linear infinite reverse; }
.cover-preview-scene-galaxy .preview-orbit i { left: 6%; top: 42%; width: .45rem; height: .45rem; border-radius: 50%; background: #f4ae75; box-shadow: 0 0 .65rem currentColor; }
.cover-preview-scene-galaxy > i { left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #fff; animation: preview-star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate; }

.cover-preview-scene-white-ash > i { left: var(--x); top: -12%; width: var(--size); height: var(--size); border-radius: 50%; background: rgb(255 255 255 / .82); filter: blur(.2px); animation: preview-ash-fall var(--duration) linear var(--delay) infinite; }

.cover-preview-scene-web .preview-web-ring { inset: 50% auto auto 50%; width: 4.4rem; height: 4.4rem; border: 1px solid rgb(180 213 255 / .48); border-radius: 50%; transform: translate(-50%, -50%); animation: preview-web-pulse 3s ease-in-out infinite; }
.cover-preview-scene-web .ring-b { width: 7rem; height: 7rem; animation-delay: -.8s; }
.cover-preview-scene-web .preview-web-spoke { left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgb(180 213 255 / .48), transparent); transform-origin: center; animation: preview-web-turn 12s linear infinite; }
.cover-preview-scene-web .spoke-b { transform: rotate(62deg); animation-direction: reverse; }
.cover-preview-scene-web .preview-web-mesh { inset: -18%; opacity: .62; background-image: repeating-linear-gradient(24deg, transparent 0 1.35rem, rgb(180 213 255 / .48) 1.4rem 1.46rem), repeating-linear-gradient(151deg, transparent 0 1.7rem, rgb(180 213 255 / .32) 1.76rem 1.82rem); animation: preview-web-drift 5.5s ease-in-out infinite alternate; }
.cover-preview-scene-web .mesh-b { opacity: .34; transform: rotate(7deg) scale(1.06); animation-delay: -2.1s; animation-direction: alternate-reverse; }
.cover-preview-scene-web .preview-web-tear { left: 62%; top: 44%; width: 2.35rem; height: 2.8rem; border: .15rem solid rgb(7 17 31 / .82); border-radius: 47% 53% 61% 39%; box-shadow: 0 0 .8rem rgb(127 186 255 / .28); transform: rotate(-18deg); animation: preview-web-tear 3.2s ease-in-out infinite; }

.cover-preview-scene-virus .preview-virus-cell { left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; border: .32rem dotted rgb(181 255 205 / .72); border-radius: 44% 56% 48% 52%; transform: translate(-50%, -50%); animation: preview-virus-breathe 2.4s ease-in-out infinite; }
.cover-preview-scene-virus > i { left: var(--x); top: var(--y); width: var(--size); height: var(--size); min-width: .36rem; min-height: .36rem; border-radius: 40% 60% 55% 45%; background: rgb(117 232 164 / .55); animation: preview-virus-drift var(--duration) ease-in-out var(--delay) infinite alternate; }

.cover-preview-scene-microcosm .preview-atom { left: 50%; top: 50%; width: 5.5rem; height: 2rem; border: 1px solid rgb(217 197 255 / .55); border-radius: 50%; transform: translate(-50%, -50%); }
.cover-preview-scene-microcosm .orbit-a { animation: preview-atom-a 3.4s linear infinite; }
.cover-preview-scene-microcosm .orbit-b { animation: preview-atom-b 4.2s linear infinite; }
.cover-preview-scene-microcosm .orbit-c { animation: preview-atom-c 5s linear infinite; }
.cover-preview-scene-microcosm .preview-atom i { left: 4%; top: 50%; width: .38rem; height: .38rem; border-radius: 50%; background: #f0aa79; box-shadow: 0 0 .5rem #f0aa79; }
.cover-preview-scene-microcosm > b { left: 50%; top: 50%; width: .72rem; height: .72rem; border-radius: 50%; background: #efe5ff; transform: translate(-50%, -50%); }

.cover-preview-scene-bubbles > i { left: var(--x); bottom: -1rem; width: calc(var(--size) + .35rem); height: calc(var(--size) + .35rem); border: 1px solid rgb(220 248 255 / .72); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .8), rgb(125 214 255 / .12) 50%, transparent 72%); animation: preview-bubble-rise var(--duration) linear var(--delay) infinite; will-change: transform, opacity; }

.cover-preview-scene-dust > i { left: -10%; top: var(--y); width: calc(var(--size) + .16rem); height: 2px; border-radius: 50%; background: rgb(238 196 151 / .72); animation: preview-dust-flight var(--duration) linear var(--delay) infinite; }
.cover-preview-scene-dust .preview-dust-wave { left: -20%; top: 46%; width: 140%; height: 1px; background: linear-gradient(90deg, transparent, rgb(248 206 166 / .56), transparent); animation: preview-dust-wave 4s ease-in-out infinite; }

.cover-preview-scene-flame-breath > i { left: var(--x); bottom: -20%; width: calc(var(--size) + .3rem); height: calc(var(--size) + 1.35rem); border-radius: 70% 15% 65% 30%; background: linear-gradient(to top, #f06432, #ffbd57 55%, rgb(255 239 168 / .15)); filter: blur(.3px); transform-origin: bottom; animation: preview-flame-rise var(--duration) ease-in var(--delay) infinite; }
.cover-preview-scene-flame-breath .preview-flame-core { left: 50%; bottom: -12%; width: 3.1rem; height: 4.4rem; border-radius: 70% 20% 65% 35%; background: radial-gradient(ellipse at bottom, #fff4bd, #ff9748 48%, transparent 72%); transform: translateX(-50%); animation: preview-flame-core 1.1s ease-in-out infinite alternate; }

@keyframes preview-galaxy-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes preview-galaxy-orbit-b { from { transform: translate(-50%, -50%) rotate(22deg); } to { transform: translate(-50%, -50%) rotate(382deg); } }
@keyframes preview-star-twinkle { to { opacity: .2; transform: scale(.6); } }
@keyframes preview-ash-fall { to { transform: translate(1.3rem, 9rem) rotate(240deg); opacity: .12; } }
@keyframes preview-web-pulse { 50% { opacity: .38; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes preview-web-turn { to { transform: rotate(360deg); } }
@keyframes preview-web-drift { to { transform: translate(.65rem, -.35rem) skewX(-2deg); filter: brightness(1.32); } }
@keyframes preview-web-tear { 50% { transform: rotate(-12deg) scale(1.14); box-shadow: 0 0 1.15rem rgb(127 186 255 / .46); } }
@keyframes preview-virus-breathe { 50% { border-radius: 58% 42% 62% 38%; transform: translate(-50%, -50%) rotate(18deg) scale(1.12); } }
@keyframes preview-virus-drift { to { transform: translate(1rem, -.65rem) rotate(42deg); } }
@keyframes preview-atom-a { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes preview-atom-b { from { transform: translate(-50%, -50%) rotate(60deg); } to { transform: translate(-50%, -50%) rotate(420deg); } }
@keyframes preview-atom-c { from { transform: translate(-50%, -50%) rotate(120deg); } to { transform: translate(-50%, -50%) rotate(480deg); } }
@keyframes preview-bubble-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .85; } 55% { transform: translate3d(1rem, -4rem, 0); opacity: .85; } 88% { opacity: .55; } to { transform: translate3d(-.4rem, -8rem, 0); opacity: 0; } }
@keyframes preview-dust-flight { to { transform: translateX(15rem); opacity: .16; } }
@keyframes preview-dust-wave { 50% { transform: translateX(1.2rem) scaleY(2); opacity: .35; } }
@keyframes preview-flame-rise { 50% { transform: translate(.35rem, -2.8rem) rotate(8deg) scaleX(.72); } to { transform: translate(-.25rem, -5.5rem) rotate(-9deg) scale(.3); opacity: 0; } }
@keyframes preview-flame-core { to { transform: translateX(-50%) scale(.82, 1.08) rotate(2deg); filter: brightness(1.14); } }

/* Северное сияние полностью заменяет прежнюю паутину, сохраняя её id только
   для совместимости с уже сохранённым выбором пользователей. */
.cover-preview-web {
  color: #c9fff0;
  background: radial-gradient(circle at 72% 18%, rgb(135 118 255 / .28), transparent 34%), linear-gradient(145deg, #041426, #092945 55%, #17143d);
}
.cover-preview-web::before {
  background: radial-gradient(circle, rgb(229 248 255 / .72) 0 1px, transparent 1.7px);
  background-size: 28px 23px;
  opacity: .48;
  animation: preview-aurora-stars 8s ease-in-out infinite alternate;
}
#cover-section.cover-anim-web::after {
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
}
.cover-preview-scene-web .preview-aurora-ribbon {
  left: -12%;
  width: 124%;
  height: 2.2rem;
  border-radius: 50%;
  filter: blur(.32rem);
  transform: rotate(-6deg) skewX(-8deg);
  transform-origin: center;
  animation: preview-aurora-drift 4.8s ease-in-out infinite alternate;
}
.cover-preview-scene-web .ribbon-a {
  top: 24%;
  background: linear-gradient(90deg, transparent, rgb(82 241 199 / .58), rgb(91 170 255 / .42), transparent);
}
.cover-preview-scene-web .ribbon-b {
  top: 43%;
  height: 1.7rem;
  background: linear-gradient(90deg, transparent, rgb(116 208 255 / .34), rgb(188 129 255 / .55), transparent);
  animation-delay: -1.7s;
  animation-direction: alternate-reverse;
}
.cover-preview-scene-web .ribbon-c {
  top: 61%;
  height: 1.25rem;
  background: linear-gradient(90deg, transparent, rgb(79 231 208 / .3), rgb(125 149 255 / .42), transparent);
  animation-delay: -3.1s;
}
.cover-preview-scene-web > i {
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgb(232 249 255 / .8);
  animation: preview-star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes preview-aurora-drift {
  to { transform: translate(.7rem, .35rem) rotate(3deg) skewX(7deg) scaleY(.72); filter: blur(.45rem) brightness(1.18); }
}
@keyframes preview-aurora-stars {
  to { background-position: 18px -12px; opacity: .72; }
}

@media (max-width: 760px) {
    .cover-image-group-grid { grid-template-columns: 1fr; }
    html:root body :is(.profile-sidebar-customize-button, #achievement-showcase-edit-button, #avatar-showcase-edit, #profile-interests-card .profile-interests-edit) { top: -.55rem; right: -.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cover-preview-scene *, .cover-library-state > span { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ------------[VMESTA: единый режим редактирования и тематические поверхности]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 19/34 */
html:root body:not(.cover-edit-mode) #achievement-showcase-edit-button,
html:root body:not(.cover-edit-mode) #profile-interests-card .profile-interests-edit,
html:root body:not(.cover-edit-mode) #avatar-showcase-edit {
    display: none !important;
}
html:root body.cover-edit-mode #achievement-showcase-edit-button.is-available,
html:root body.cover-edit-mode #profile-interests-card .profile-interests-edit,
html:root body.cover-edit-mode #avatar-showcase-edit:not(.hidden) {
    display: inline-grid !important;
}

html:root body :is(.about-header-icon-button, .space-about-edit-button).is-back {
    border-color: color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 28%, transparent) !important;
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 88%, var(--vmesta-ui-muted, #64748b) 12%) !important;
    color: var(--vmesta-ui-muted, #64748b) !important;
}

.publication-edit-commit {
    display: inline-flex !important;
    min-width: 7.5rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.publication-edit-commit svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.publication-edit-commit.is-back {
    background: var(--vmesta-ui-soft, #e8eef6) !important;
    color: var(--vmesta-ui-muted, #64748b) !important;
}

/* Быстрый вход не перекрывает зелёный индикатор и наследует текущую тему. */
html:root body .top-account-switch-trigger {
    left: -8px;
    bottom: -7px;
    border-color: color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 30%, transparent);
    background: var(--vmesta-ui-panel, #fff);
    color: var(--vmesta-ui-primary, #2583ff);
}
html:root body .top-account-switch-trigger:is(:hover, .is-open) {
    background: var(--vmesta-tone-3, #eef4fb);
    color: var(--vmesta-ui-primary, #2583ff);
}
html:root body .top-account-switch-menu {
    border-color: color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 22%, transparent);
    background: color-mix(in srgb, var(--vmesta-ui-panel, #fff) 94%, transparent);
    color: var(--vmesta-ui-ink, #173f73);
}
html:root body .top-account-switch-menu::before { border-color: color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 22%, transparent); }
html:root body .top-account-switch-menu header span,
html:root body .top-account-switch-enter { color: var(--vmesta-ui-primary, #2583ff); }
html:root body .top-account-switch-menu header small,
html:root body .top-account-switch-copy small { color: var(--vmesta-ui-muted, #64748b); }
html:root body .top-account-switch-row { background: var(--vmesta-tone-2, #f3f6fa); }
html:root body .top-account-switch-row:hover { border-color: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 30%, transparent); background: var(--vmesta-tone-3, #edf3fa); }
html:root body .top-account-switch-online { border-color: var(--vmesta-tone-2, #f3f6fa); }

/* Уровень подсвечивается одним цельным блоком, включая число опыта. */
html:root body #top-level-widget {
    min-width: 9.4rem !important;
    padding: .38rem .55rem !important;
    border-radius: .72rem;
    background: var(--vmesta-tone-2, #f4f7fb);
    color: var(--vmesta-ui-ink, #173f73);
}
html:root body #top-level-widget:hover { background: var(--vmesta-tone-3, #e9f0f8); }
html:root body #top-display-level,
html:root body #top-display-xp { color: var(--vmesta-ui-primary, #2583ff) !important; }
html:root body #top-level-widget > div:last-child { background: color-mix(in srgb, var(--vmesta-ui-muted, #64748b) 18%, transparent) !important; }
html:root body #top-level-bar { background: var(--vmesta-ui-primary, #2583ff) !important; }

/* Обложки кадрируются из стабильной центральной зоны на всех ширинах. */
html:root body #cover-section { background-position: center 42% !important; }

/* Группы и каналы: гарантированный контраст названий, логина, описания и ссылок. */
html:root body .messenger-room-settings-modal {
    --room-readable-ink: var(--vmesta-ui-ink, var(--msg-text, #173f73));
    --room-readable-muted: var(--vmesta-ui-muted, var(--msg-muted, #64748b));
    --room-readable-panel: var(--vmesta-ui-panel, var(--msg-panel, #fff));
    --room-readable-soft: var(--vmesta-tone-2, var(--msg-menu-soft, #eef3f8));
}
html:root body .messenger-room-settings-modal > section,
html:root body .messenger-room-settings-form { color: var(--room-readable-ink) !important; background: var(--room-readable-panel) !important; }
html:root body .messenger-room-settings-modal :is(h2, label > span, label b, .messenger-room-invite-settings span, .messenger-room-policy b, .messenger-room-members-manage b) { color: var(--room-readable-ink) !important; opacity: 1 !important; }
html:root body .messenger-room-settings-modal :is(label small, p, .messenger-room-policy small, .messenger-room-members-manage small) { color: var(--room-readable-muted) !important; opacity: 1 !important; }
html:root body .messenger-room-settings-form :is(input[type="text"], textarea, select, .messenger-room-handle-field, .messenger-room-invite-settings, .messenger-room-policy, .messenger-room-members-manage) {
    border: 1px solid color-mix(in srgb, var(--room-readable-muted) 24%, transparent) !important;
    background: var(--room-readable-soft) !important;
    color: var(--room-readable-ink) !important;
}
html:root body .messenger-room-invite-settings strong { color: var(--room-readable-ink) !important; overflow-wrap: anywhere; opacity: 1 !important; }
html:root body .messenger-room-invite-settings button { color: var(--vmesta-ui-primary, var(--msg-accent, #2583ff)) !important; }

.signals-opt-in-empty { min-height: min(34rem, 62vh) !important; }
.signals-opt-in-empty .vmesta-empty-visual { width: min(17rem, 72vw) !important; height: auto !important; }
.notification-history-empty.vmesta-empty-state { min-height: 22rem; }
#viewer-comments-list > .vmesta-empty-state { min-height: 13rem; }
.album-card-empty-orbit svg { width: 6.2rem !important; height: 4.7rem !important; fill: none; stroke: currentColor; stroke-width: 2; opacity: .72; }
.album-card-empty-orbit .album-orbit-moon { fill: currentColor; animation: album-orbit-moon 4.8s ease-in-out infinite; transform-origin: center; }
@keyframes album-orbit-moon { 50% { transform: translate(-61px, 8px) scale(.72); opacity: .45; } }

@media (max-width: 760px) {
    html:root body #top-level-widget { min-width: 7.8rem !important; }
    html:root body #cover-section { background-position: center center !important; }
}

/* ------------[Вторая версия интерактивных эффектов обложки]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 20/34 */
.cover-preview-dust { color:#dbeafe!important; background:linear-gradient(145deg,#081126,#25133d)!important; }
.cover-preview-flame-breath { color:#dbeafe!important; background:radial-gradient(circle at 50% 54%,#5e3f23 0 7%,#15142d 28%,#070d1d 72%)!important; }
.cover-preview-microcosm { color:#080c15!important; background:linear-gradient(145deg,#dce8f4,#91a4bb)!important; }
.cover-preview-bubbles { background:linear-gradient(145deg,#65c7e8,#b99ce9 52%,#f2b9a7)!important; }
.cover-preview-scene-microcosm>i{left:var(--x);top:var(--y);width:calc(var(--size) + .18rem);height:calc(var(--size) + .18rem);border-radius:50%;background:#080c15;box-shadow:0 0 0 1px rgb(255 255 255/.35);animation:preview-micro-pulse var(--duration) ease-in-out var(--delay) infinite alternate}
.cover-preview-scene-microcosm .preview-micro-trace{left:8%;top:54%;width:84%;height:1px;background:linear-gradient(90deg,transparent,#070b12 30% 70%,transparent);animation:preview-micro-trace 3.2s ease-in-out infinite}
.cover-preview-scene-dust>i{left:-18%;top:var(--y);width:calc(var(--size) + 2.15rem);height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgb(121 164 255/.22),#fff);transform:rotate(22deg);animation:preview-comet-flight var(--duration) linear var(--delay) infinite}
.cover-preview-scene-dust .preview-comet-core{left:58%;top:28%;width:.55rem;height:.55rem;border-radius:50%;background:#fff;box-shadow:-.8rem -.45rem 1.1rem #719cff,0 0 .7rem #fff;animation:preview-comet-core 2.8s ease-in-out infinite alternate}
.cover-preview-scene-flame-breath .preview-solar-core{left:50%;top:50%;width:1.25rem;height:1.25rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffc168 35%,#f27635 72%);box-shadow:0 0 1.4rem rgb(255 154 70/.8);transform:translate(-50%,-50%)}
.cover-preview-scene-flame-breath .preview-solar-orbit{left:50%;top:50%;width:56%;height:24%;border:1px solid rgb(190 213 255/.4);border-radius:50%;transform:translate(-50%,-50%);animation:preview-solar-spin 5.5s linear infinite}
.cover-preview-scene-flame-breath .preview-solar-orbit.orbit-b{width:82%;height:38%;animation-duration:8s;animation-direction:reverse}
.cover-preview-scene-flame-breath .preview-solar-orbit i{left:4%;top:42%;width:.5rem;height:.5rem;border-radius:50%;background:#77c8ff;box-shadow:0 0 .6rem currentColor}
.cover-preview-scene-bubbles>i{width:calc(var(--size) + .7rem);height:calc(var(--size) + .7rem);border-width:1.5px;background:radial-gradient(circle at 28% 24%,rgb(255 255 255/.86),rgb(121 217 255/.1) 42%,rgb(239 167 255/.12) 68%,transparent 75%);box-shadow:inset -.18rem -.12rem .45rem rgb(255 187 143/.22),0 0 .7rem rgb(255 255 255/.18)}
@keyframes preview-micro-pulse{to{transform:scale(1.7);opacity:.45}}
@keyframes preview-micro-trace{50%{transform:translateY(-1.1rem) rotate(-8deg);filter:drop-shadow(0 0 .3rem #fff)}}
@keyframes preview-comet-flight{to{transform:translate(17rem,6rem) rotate(22deg);opacity:.12}}
@keyframes preview-comet-core{to{transform:translate(1.2rem,.55rem);filter:brightness(1.3)}}
@keyframes preview-solar-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Логин группы/канала — единое поле: знак @ и текст больше не разрезаны цветом. */
html:root body .messenger-room-settings-modal .messenger-room-handle-field{
  display:flex!important;grid-template-columns:none!important;align-items:stretch!important;
  border:1px solid color-mix(in srgb,var(--room-readable-muted) 24%,transparent)!important;
  background:var(--room-readable-soft)!important;color:var(--room-readable-ink)!important;box-shadow:none!important
}
html:root body .messenger-room-settings-modal .messenger-room-handle-field>b{
  display:grid!important;width:2.15rem!important;flex:0 0 2.15rem!important;place-items:center!important;
  padding:0!important;background:transparent!important;color:var(--vmesta-ui-primary,var(--msg-accent,#2583ff))!important
}
html:root body .messenger-room-settings-modal .messenger-room-handle-field>input[type="text"]{
  min-width:0!important;flex:1!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:var(--room-readable-ink)!important;box-shadow:none!important
}
html:root body .messenger-room-settings-modal .messenger-room-handle-field:focus-within{
  background:color-mix(in srgb,var(--room-readable-soft) 82%,var(--vmesta-ui-primary,var(--msg-accent,#2583ff)) 18%)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vmesta-ui-primary,var(--msg-accent,#2583ff)) 50%,transparent)!important
}

/* Пустое обсуждение остаётся частью карточки и получает заметную анимированную сцену. */
#viewer-comments-list>.post-comments-empty-state{min-height:15rem!important;padding-block:1.35rem!important}
#viewer-comments-list>.post-comments-empty-state>.vmesta-empty-visual{width:min(12.5rem,52vw)!important;height:7.3rem!important}
.media-viewer-post-slot #viewer-comments-list>.post-comments-empty-state{min-height:12rem!important}

/* ------------[Единая геометрия настроек профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 21/34 */
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn {
  box-sizing:border-box!important;
  width:calc(100% - .7rem)!important;
  min-height:3.35rem!important;
  margin:.18rem .35rem!important;
  padding:.56rem .65rem!important;
  border:1px solid transparent!important;
  border-radius:.82rem!important;
  background:transparent!important;
  color:var(--vmesta-ui-ink,var(--standard-text-active))!important;
  opacity:1!important;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease!important;
}
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn:is(:hover,:focus-visible),
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn.is-readonly:hover {
  border-color:color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 26%,transparent)!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 84%,var(--vmesta-ui-primary,#2583ff) 16%)!important;
  transform:translateX(.08rem);
  outline:0!important;
}

html:root body #settings-dropdown .settings-profile-rank-btn :is(strong,small) { color:inherit!important; }
html:root body #settings-dropdown .settings-profile-rank-btn small { color:var(--vmesta-ui-muted,var(--standard-text-passive))!important; }
html:root body #settings-dropdown .settings-profile-rank-btn :is(.settings-profile-rank-icon,.settings-profile-action-icon,.settings-profile-guard-icon) {
  border:1px solid color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 20%,transparent)!important;
  border-radius:.7rem!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 78%,var(--vmesta-ui-primary,#2583ff) 22%)!important;
  color:var(--vmesta-ui-primary,#2583ff)!important;
}

/* Все блоки окна друзей начинаются и заканчиваются на одной вертикали. */
html:root body #friends-modal > div { --friends-modal-gutter:1.4rem; }
html:root body #friends-modal > div > .p-8 { padding:1.35rem var(--friends-modal-gutter) 0!important; }
html:root body #friends-modal .friends-modal-tabs {
  display:grid!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  width:100%!important;
  box-sizing:border-box!important;
}
html:root body #friends-modal .friends-modal-tab { width:100%!important; padding-inline:.65rem!important; }
html:root body #friends-modal #modal-friends-list { padding:.85rem var(--friends-modal-gutter) 1rem!important; }
html:root body #friends-modal .friends-modal-footer-fill { height:.55rem!important; }

/* Каталог тем встроен в редактор сразу после изображений ковра. */
html:not(.adaptive-theme) body .cover-themes-pane {
  --theme-catalog-panel:var(--standard-panel,#fff);
  --theme-catalog-soft:var(--standard-panel-soft,#f8fafc);
  --theme-catalog-line:var(--standard-line,#dbe3ee);
  --theme-catalog-text:var(--standard-text-active,#1f4f91);
  --theme-catalog-muted:var(--standard-text-passive,#6984aa);
  --theme-catalog-page:var(--adaptive-background,#f3f7fc);
}
html.adaptive-theme body .cover-themes-pane {
  --theme-catalog-panel:var(--adaptive-ui-modal,var(--adaptive-ui-panel));
  --theme-catalog-soft:var(--adaptive-ui-active,var(--adaptive-surface-2));
  --theme-catalog-line:var(--adaptive-ui-line,var(--adaptive-border));
  --theme-catalog-text:var(--adaptive-text-active,var(--adaptive-text));
  --theme-catalog-muted:var(--adaptive-text-passive,var(--adaptive-muted));
  --theme-catalog-page:var(--adaptive-background,var(--adaptive-surface));
}
html:root body .cover-theme-catalog-mount { display:grid; min-height:0; background:var(--theme-catalog-panel); }
html:root body .cover-theme-catalog-mount .theme-catalog-body { overflow:visible; padding:1rem; }
html:root body .cover-theme-catalog-mount .theme-catalog-footer { position:sticky; z-index:3; bottom:0; border-radius:0 0 1rem 1rem; }

/* Все разделы аккаунта используют одну тематическую поверхность и скруглённую шапку. */
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card {
  overflow:hidden!important;
  border:1px solid var(--vmesta-ui-line,var(--standard-line))!important;
  border-radius:1rem!important;
  background:var(--vmesta-ui-panel,var(--standard-panel))!important;
}
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card-header {
  border-bottom:1px solid var(--vmesta-ui-line,var(--standard-line))!important;
  border-radius:1rem 1rem 0 0!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 84%,var(--vmesta-ui-primary,#2583ff) 16%)!important;
  color:var(--vmesta-ui-ink,var(--standard-text-active))!important;
}
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card-header .cover-account-card-icon {
  border-color:color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 30%,transparent)!important;
  background:color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 15%,transparent)!important;
  color:var(--vmesta-ui-primary,#2583ff)!important;
}
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card-header h3 {
  color:var(--vmesta-ui-primary,#2583ff)!important;
}
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card-header p {
  color:var(--vmesta-ui-muted,var(--standard-text-passive))!important;
}
html:root body #cover-privacy-pane :is(.cover-privacy-intro,.privacy-setting-row,.privacy-setting-card),
html:root body #cover-notifications-pane .notification-preference-group {
  border-color:var(--vmesta-ui-line,var(--standard-line))!important;
  background:var(--vmesta-ui-soft,var(--standard-panel-soft))!important;
}

/* Крестики во всех окнах получают одинаковый оптический центр. */
html:root body button[aria-label*="Закры"]:not([class*="backdrop"]),
html:root body :is(button[class$="-close"],button[class*="-close "]):not([class*="backdrop"]),
html:root body :is(.access-icon-settings-close,.verification-center-close,.album-viewer-close,.album-share-close),
html:root body #album-photo-picker-panel > div:first-child > button {
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
}
html:root body button[aria-label*="Закры"]:not([class*="backdrop"]) > svg,
html:root body :is(button[class$="-close"],button[class*="-close "]):not([class*="backdrop"]) > svg,
html:root body :is(.access-icon-settings-close,.verification-center-close,.album-viewer-close,.album-share-close) > svg {
  display:block!important;
  margin:0!important;
  transform:none!important;
}
html:root body :is(button[class$="-close"],button[class*="-close "]):not([class*="backdrop"]),
html:root body :is(.access-icon-settings-close,.verification-center-close,.album-viewer-close,.album-share-close),
html:root body #album-photo-picker-panel > div:first-child > button {
  padding-bottom:.1rem!important;
}

/* Фото/альбомы сохраняют высоту, а полноэкранный просмотр не двигает профиль. */
html:root body :is(#photos-list-container,#albums-placeholder) {
  min-height:19rem!important;
  align-content:start;
  overflow-anchor:none;
}
html:root body #profile-left-rail { overflow-anchor:none; }
html:root body #album-viewer-modal { overflow:hidden; scrollbar-gutter:stable both-edges; }
html:root body #album-viewer-panel {
  height:calc(100dvh - 3rem)!important;
  min-height:calc(100dvh - 3rem)!important;
  max-height:calc(100dvh - 3rem)!important;
}
@media (max-width:767px) {
  html:root body #friends-modal > div { --friends-modal-gutter:.8rem; }
  html:root body #album-viewer-panel { height:calc(100dvh - 1rem)!important; min-height:calc(100dvh - 1rem)!important; max-height:calc(100dvh - 1rem)!important; }
}

/* ------------[Пустые состояния сообщений без тяжёлого движка]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 22/34 */
.messenger-empty-visual {
  display:block;
  width:7rem;
  max-width:42vw;
  margin:0 auto .7rem;
  color:var(--msg-accent,var(--vmesta-ui-primary,#22a35a));
}
.messenger-empty-visual svg { display:block; width:100%; height:auto; overflow:visible; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.messenger-empty-glyph { fill:color-mix(in srgb,var(--msg-accent,var(--vmesta-ui-primary,#22a35a)) 10%,transparent); }
.messenger-empty-glyph-secondary { opacity:.58; }
.messenger-empty-orbit { opacity:.42; transform-box:fill-box; transform-origin:center; animation:messenger-empty-orbit 10s linear infinite; }
.messenger-empty-orbit ellipse { stroke-dasharray:3 7; }
.messenger-empty-orbit circle { fill:var(--msg-accent,var(--vmesta-ui-primary,#22a35a)); stroke:none; }
.messenger-empty-spark { opacity:.7; transform-box:fill-box; transform-origin:center; animation:messenger-empty-spark 2.8s ease-in-out infinite; }
.messenger-empty-spark.is-second { animation-delay:-1.35s; }
.messenger-empty-alert { fill:var(--msg-accent,var(--vmesta-ui-primary,#22a35a)); stroke:var(--msg-panel,var(--vmesta-ui-panel,#fff)); animation:messenger-empty-pulse 2.2s ease-in-out infinite; }
.messenger-empty-state.is-compact .messenger-empty-visual { width:4.6rem; margin-bottom:.42rem; }
@keyframes messenger-empty-orbit { to { transform:rotate(360deg); } }
@keyframes messenger-empty-spark { 0%,100% { opacity:.32; transform:scale(.78) rotate(0); } 50% { opacity:1; transform:scale(1.15) rotate(90deg); } }
@keyframes messenger-empty-pulse { 0%,100% { transform:scale(.82); opacity:.55; } 50% { transform:scale(1.08); opacity:1; } }
.messenger-conversation-placeholder .messenger-empty-visual { width:8rem; margin-bottom:.8rem; }
.messenger-dialog-empty {
  display:grid;
  min-height:calc(100% - 1.2rem);
  box-sizing:border-box;
  place-content:center;
  justify-items:center;
  padding:2rem 1rem;
  color:var(--msg-muted);
  text-align:center;
}
.messenger-dialog-empty > strong { color:var(--msg-text); font-size:.9rem; font-weight:900; }
.messenger-dialog-empty > span:not(.messenger-empty-visual):not(.messenger-room-welcome-image) { margin-top:.28rem; font-size:.65rem; }
.messenger-room-welcome { max-width:30rem; margin:auto; }
.messenger-room-welcome-image { display:grid; width:6.5rem; height:6.5rem; margin-bottom:.8rem; overflow:hidden; place-items:center; border-radius:1.45rem; background:var(--msg-menu-soft,var(--msg-soft)); }
.messenger-room-welcome-image img { width:100%; height:100%; object-fit:cover; }
.messenger-room-welcome .messenger-room-welcome-kicker { color:var(--msg-accent); font-size:.52rem!important; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.messenger-room-welcome > strong { margin-top:.32rem; font-size:1.08rem; }
.messenger-room-welcome > p { max-width:28rem; margin:.4rem 0 0; color:var(--msg-muted); font-size:.68rem; font-weight:650; line-height:1.55; white-space:pre-line; }

/* ------------[Приветственное письмо в настройках комнаты]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 23/34 */
.messenger-room-welcome-settings { display:grid; grid-template-columns:8.2rem minmax(0,1fr); align-items:stretch; gap:.7rem; padding:.7rem; border:0!important; border-radius:.9rem; background:var(--room-tone-2,var(--msg-menu-soft)); }
.messenger-room-welcome-settings > label:last-child { display:grid; min-width:0; align-content:start; gap:.3rem; }
.messenger-room-welcome-settings > label:last-child > span { color:var(--msg-text); font-size:.68rem; font-weight:900; }
.messenger-room-welcome-settings textarea { min-height:6rem; resize:vertical; }
.messenger-room-welcome-picker { display:grid; min-width:0; justify-items:center; align-content:center; gap:.28rem; cursor:pointer; text-align:center; }
.messenger-room-welcome-picker.is-disabled { cursor:default; opacity:.72; }
.messenger-room-welcome-picker > input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.messenger-room-welcome-preview { display:grid; width:4.4rem; height:4.4rem; overflow:hidden; place-items:center; border-radius:1rem; background:var(--room-tone-4,var(--msg-menu-active)); color:var(--msg-accent); }
.messenger-room-welcome-preview img { width:100%; height:100%; object-fit:cover; }
.messenger-room-welcome-preview .messenger-empty-visual { width:3.8rem; max-width:none; margin:0; }
.messenger-room-welcome-picker > b { color:var(--msg-accent); font-size:.57rem; font-weight:900; }
.messenger-room-welcome-picker > small { color:var(--msg-muted); font-size:.47rem; line-height:1.3; }

/* Полоса настроек заканчивается над закреплённой панелью действий. */
html:root body .messenger-room-settings-form::-webkit-scrollbar-track { margin-block:.6rem 3.8rem; background:transparent; }
html:root body .messenger-room-settings-form::-webkit-scrollbar-thumb { border-radius:999px; background:color-mix(in srgb,var(--msg-accent) 52%,transparent); }

/* ------------[Чистые тематические поверхности без контурных рамок]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 24/34 */
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn,
html:root body #settings-dropdown .settings-profile-rank-btn :is(.settings-profile-rank-icon,.settings-profile-action-icon,.settings-profile-guard-icon),
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) :is(
  .cover-account-card,.cover-account-card-header,.cover-account-card-icon,.cover-privacy-intro,
  .cover-account-list,.cover-account-row,.cover-account-setting-row,.cover-account-toggle-row,.cover-account-notice,
  .privacy-system-note,.privacy-group>div,.privacy-setting-row,.privacy-audience-picker,
  .privacy-audience-option,.notification-preferences-layout,.notification-preference-group,.notification-preference-row,.theme-catalog-section,.theme-monet-card,
  .theme-preset-grid>button,.theme-profile-preview,.theme-builder-grid label,
  .theme-scope-switch button,.theme-builder-actions button,.theme-catalog-footer
),
html:root body :is(.profile-sidebar-customize-button,#profile-sidebar-customize-button) {
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html:root body :is(#cover-themes-pane,#cover-security-pane,#cover-notifications-pane,#cover-data-pane,#cover-privacy-pane) .cover-account-card-header { border-bottom:0!important; }
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn:is(:hover,:focus-visible),
html:root body #settings-dropdown :is(#menu-profile-content,#menu-other-content) .settings-profile-rank-btn.is-readonly:hover {
  border:0!important;
  background:color-mix(in srgb,var(--vmesta-ui-soft,var(--standard-panel-soft)) 68%,var(--vmesta-ui-primary,#2583ff) 32%)!important;
  color:var(--vmesta-ui-ink,var(--standard-text-active))!important;
}
html:root body :is(.cover-editor-tabs button,.privacy-audience-option,.theme-scope-switch button,.theme-preset-grid>button):is(:hover,:focus-visible,.is-active,[aria-pressed="true"]) {
  border:0!important;
  outline:0!important;
  background:color-mix(in srgb,var(--vmesta-ui-soft,var(--standard-panel-soft)) 62%,var(--vmesta-ui-primary,#2583ff) 38%)!important;
  color:var(--vmesta-ui-ink,var(--standard-text-active))!important;
  box-shadow:none!important;
}
html:root body #profile-sidebar-customize-button { background:var(--vmesta-ui-primary,#2583ff)!important; color:#fff!important; }

/* SVG тем всегда рисуется штрихом текущего акцента, а не чёрной заливкой браузера. */
html:root body #cover-themes-pane .cover-account-card-icon { color:color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 78%,var(--vmesta-ui-ink,#17233a) 22%)!important; }
html:root body #cover-themes-pane .cover-account-card-icon svg,
html:root body #cover-themes-pane .cover-account-card-icon svg * { fill:none!important; stroke:currentColor!important; stroke-width:1.9!important; stroke-linecap:round!important; stroke-linejoin:round!important; }
html:root body .cover-editor-tabs button svg,
html:root body .cover-editor-tabs button svg * { color:currentColor!important; stroke:currentColor!important; }
.theme-preset-colors>i { border:0!important; color:#fff!important; text-shadow:0 1px 2px rgb(0 0 0 / .7); box-shadow:none!important; }
.theme-preset-grid>button:is(:hover,.is-active) { transform:translateY(-1px); }

@media (max-width:620px) {
  .messenger-room-welcome-settings { grid-template-columns:1fr; }
  .messenger-dialog-empty { min-height:15rem; }
}
@media (prefers-reduced-motion:reduce) {
  .messenger-empty-orbit,.messenger-empty-spark,.messenger-empty-alert { animation:none!important; }
}

/* ------------[Карандаш на рамке всего блока навигации]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 25/34 */
.profile-sidebar-navigation-frame {
  position:relative;
  min-width:0;
}
html:root body .profile-sidebar-navigation-frame > .profile-sidebar-navigation-head {
  z-index:8;
  top:-.22rem!important;
  right:-.35rem!important;
}

/* ------------[Статичный статус на ковре]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 26/34 */
#cover-section #user-info-group {
  width:min(50rem,calc(100vw - 18rem));
  max-width:calc(100% - 18rem);
}
#cover-section .profile-cover-presence-row {
  display:grid;
  width:100%;
  min-width:0;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:center;
  gap:.65rem;
}
#cover-section .profile-cover-status-card {
  display:flex;
  min-width:12rem;
  min-height:2.65rem;
  max-width:100%;
  align-items:center;
  overflow:hidden;
  border-radius:.82rem;
  background:rgb(2 6 23/.48);
  padding:.48rem .72rem;
  color:#fff;
  box-shadow:0 .55rem 1.4rem rgb(2 6 23/.18);
  backdrop-filter:blur(8px);
}
#cover-section .profile-cover-status-content {
  display:flex;
  width:100%;
  min-width:0;
  align-items:flex-start;
  gap:.52rem;
}
#cover-section .profile-cover-status-icon {
  width:.86rem;
  height:.86rem;
  flex:0 0 auto;
  margin-top:.15rem;
  color:color-mix(in srgb,var(--color-dynamic,#22c55e) 68%,white 32%);
}
#cover-section .status-scroll-container {
  display:block;
  min-width:0;
  overflow:visible;
  white-space:normal;
  -webkit-mask-image:none;
  mask-image:none;
}
#cover-section .status-scroll-text {
  display:-webkit-box;
  min-width:0;
  overflow:hidden;
  padding:0;
  color:rgb(255 255 255/.88)!important;
  font-size:clamp(.64rem,.8vw,.78rem);
  font-style:normal;
  font-weight:680;
  line-height:1.35;
  overflow-wrap:anywhere;
  white-space:normal;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px rgb(0 0 0/.72);
  animation:none!important;
  transform:none!important;
  will-change:auto;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ------------[Каркас профиля без скачков]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 27/34 */
#profile-layout-grid { min-height:42rem; }
.vmesta-profile-skeleton {
  position:absolute;
  z-index:38;
  inset:0 1.5rem auto;
  display:grid;
  min-height:42rem;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:2rem;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility 0s linear .22s;
  --skeleton-base:color-mix(in srgb,var(--adaptive-surface,var(--standard-panel,#fff)) 86%,var(--color-dynamic,#22c55e) 14%);
  --skeleton-soft:color-mix(in srgb,var(--adaptive-surface-muted,var(--standard-panel-soft,#e2e8f0)) 90%,var(--color-dynamic,#22c55e) 10%);
}
:is(html.vmesta-initial-loading body,body.vmesta-route-loading) .vmesta-profile-skeleton { opacity:1;visibility:visible;transition:none; }
:is(html.vmesta-initial-loading body,body.vmesta-route-loading) #profile-layout-grid > :not(#vmesta-profile-skeleton) { opacity:0;pointer-events:none; }
#profile-layout-grid > :not(#vmesta-profile-skeleton) { transition:opacity .18s ease; }
.vmesta-profile-skeleton::after {
  position:absolute;
  inset:0;
  content:"";
  background:linear-gradient(105deg,transparent 34%,rgb(255 255 255/.14) 45%,rgb(255 255 255/.38) 50%,rgb(255 255 255/.14) 55%,transparent 66%);
  transform:translate3d(-120%,0,0);
  animation:vmesta-skeleton-sweep 1.45s ease-in-out infinite;
  will-change:transform;
}
.vmesta-skeleton-column { min-width:0; }
.vmesta-skeleton-left { grid-column:span 2; }
.vmesta-skeleton-center { grid-column:span 7; }
.vmesta-skeleton-right { grid-column:span 3; }
.vmesta-skeleton-avatar,.vmesta-skeleton-post,.vmesta-skeleton-side-card,.vmesta-skeleton-menu {
  display:block;
  border-radius:1.15rem;
  background:var(--skeleton-base);
}
.vmesta-skeleton-avatar { display:grid;position:relative;width:100%;aspect-ratio:1;place-items:center;border-radius:1.3rem; }
.vmesta-skeleton-line { display:block;width:72%;height:.72rem;margin:.85rem 0 0;border-radius:999px;background:var(--skeleton-soft); }
.vmesta-skeleton-line.is-wide { width:100%;height:2.85rem;margin-top:1rem; }
.vmesta-skeleton-menu { display:grid;gap:.65rem;margin-top:1rem;padding:1rem; }
.vmesta-skeleton-menu i { height:1.55rem;border-radius:.55rem;background:var(--skeleton-soft); }
.vmesta-skeleton-tabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-bottom:1rem; }
.vmesta-skeleton-tabs i { height:2.6rem;border-radius:.8rem;background:var(--skeleton-base); }
.vmesta-skeleton-post { position:relative;min-height:12rem;margin-bottom:1rem;padding:1.2rem; }
.vmesta-skeleton-post.is-tall { min-height:18rem; }
.vmesta-skeleton-post > span:first-child { display:flex;align-items:center;gap:.7rem;margin-bottom:1.35rem; }
.vmesta-skeleton-post > span:first-child i { width:2.8rem;height:2.8rem;border-radius:50%;background:var(--skeleton-soft); }
.vmesta-skeleton-post > span:first-child b { width:34%;height:.8rem;border-radius:999px;background:var(--skeleton-soft); }
.vmesta-skeleton-post em,.vmesta-skeleton-side-card em { display:block;width:100%;height:.7rem;margin-top:.72rem;border-radius:999px;background:var(--skeleton-soft); }
.vmesta-skeleton-post em.is-short { width:62%; }
.vmesta-skeleton-side-card { position:relative;min-height:15rem;margin-bottom:1rem;padding:1rem; }
.vmesta-skeleton-side-card.is-compact { min-height:10rem; }
.vmesta-skeleton-side-card i { display:block;width:48%;height:.85rem;margin-bottom:1.25rem;border-radius:999px;background:var(--skeleton-soft); }
.vmesta-skeleton-feedback { --vmesta-loader-accent:var(--theme-accent,var(--color-dynamic,#3b82f6));--vmesta-loader-soft:color-mix(in srgb,var(--vmesta-loader-accent) 12%,transparent);position:absolute;z-index:1;top:50%;left:50%;display:grid;min-width:6rem;justify-items:center;gap:.3rem;transform:translate(-50%,-50%);color:var(--adaptive-text-muted,var(--theme-text-muted,#64748b));text-align:center; }
.vmesta-skeleton-feedback .vmesta-loading-orbit { margin:0; }
.vmesta-skeleton-feedback small { font-size:.65rem;font-weight:850;line-height:1.3; }
@keyframes vmesta-skeleton-sweep { to { transform:translate3d(120%,0,0); } }

/* ------------[Меню близости без наложения]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 28/34 */
html:root body .friend-row-menu-wrap .friend-dropdown {
  position:absolute!important;
  top:calc(100% + .9rem)!important;
  min-width:13rem;
}
html:root body .friend-closeness-menu-action {
  display:flex!important;
  min-height:4rem;
  align-items:center;
  gap:.85rem;
  padding:.82rem .92rem!important;
}
html:root body .friend-closeness-menu-action > svg {
  width:1.15rem;
  height:1.15rem;
  align-self:center;
}

@media (max-width:767px) {
  #cover-section #user-info-group { width:calc(100vw - 10rem);max-width:calc(100vw - 10rem); }
  #cover-section .profile-cover-presence-row { grid-template-columns:1fr;gap:.35rem; }
  #cover-section .profile-cover-status-card { min-width:0;min-height:2.35rem;padding:.4rem .6rem; }
  .vmesta-profile-skeleton { inset:0 1rem;display:block; }
  .vmesta-skeleton-left,.vmesta-skeleton-right { display:none; }
  .vmesta-skeleton-center { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .vmesta-profile-skeleton::after { animation:none; }
}
html:root body.cover-edit-mode:not(.space-route) .profile-sidebar-navigation-frame > .profile-sidebar-navigation-head {
  display:block!important;
}
@media (min-width:768px) {
  #profile-sidebar-shell > .profile-sidebar-navigation-frame {
    display:flex;
    min-height:0;
    flex:1 1 auto!important;
    flex-direction:column;
  }
  #profile-sidebar-shell > .profile-sidebar-navigation-frame > .profile-sidebar-navigation {
    min-height:0;
    flex:1 1 auto;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  #profile-sidebar-shell > .profile-sidebar-navigation-frame > .profile-sidebar-navigation::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
  }
}

/* Внутренняя поверхность каталога заметно отделена от шапки во всех палитрах. */
html:root body #cover-themes-pane .cover-theme-catalog-mount {
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 78%,var(--vmesta-ui-primary,#2583ff) 22%)!important;
}
html:root body #cover-themes-pane .theme-catalog-body {
  background:color-mix(in srgb,var(--vmesta-ui-soft,#f2f6fb) 80%,var(--vmesta-ui-primary,#2583ff) 20%)!important;
}
html:root body #cover-themes-pane .theme-catalog-section {
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 86%,var(--vmesta-ui-primary,#2583ff) 14%)!important;
}

/* «Все сообщения» и три дочерних канала образуют один понятный блок. */
html:root body #cover-notifications-pane .notification-message-family {
  margin:.45rem .45rem .65rem;
  overflow:hidden;
  border-radius:1rem;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 82%,var(--vmesta-ui-primary,#2583ff) 18%);
}
html:root body #cover-notifications-pane .notification-message-family .notification-preference-row {
  margin:0!important;
  padding-inline:.85rem!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
html:root body #cover-notifications-pane .notification-message-family .notification-preference-row.is-category-master {
  border-radius:1rem 1rem 0 0!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 64%,var(--vmesta-ui-primary,#2583ff) 36%)!important;
}
html:root body #cover-notifications-pane .notification-message-family .notification-preference-row:last-child {
  border-radius:0 0 1rem 1rem!important;
  padding-bottom:.75rem!important;
}
html:root body #cover-notifications-pane .notification-message-family .notification-category-label {
  padding:.62rem .85rem .25rem;
  color:var(--vmesta-ui-primary,#2583ff);
}

/* Системный аватар личного хранилища и постоянный онлайн пространств. */
.messenger-saved-avatar {
  position:relative;
  display:grid;
  width:2.75rem;
  height:2.75rem;
  flex:0 0 auto;
  place-items:center;
  border-radius:.9rem;
  background:color-mix(in srgb,var(--msg-accent,var(--vmesta-ui-primary,#22a35a)) 18%,var(--msg-panel,#fff));
  color:var(--msg-accent,var(--vmesta-ui-primary,#22a35a));
}
.messenger-saved-avatar > svg { width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:2; }
.messenger-saved-avatar.is-small { width:2.5rem; height:2.5rem; border-radius:.8rem; }
.messenger-saved-avatar.is-tiny { width:2rem; height:2rem; border-radius:.65rem; }
.messenger-saved-avatar > .online-dot { position:absolute!important; right:-.14rem!important; bottom:-.14rem!important; }
.messenger-chat-row:has(.messenger-saved-avatar) {
  background:color-mix(in srgb,var(--msg-panel,#fff) 84%,var(--msg-accent,var(--vmesta-ui-primary,#22a35a)) 16%);
}
.messenger-dialog-empty.is-saved > span:last-child { max-width:24rem; line-height:1.5; }
.messenger-room-verified-avatar.is-space .online-dot,
[data-identity-type="space"] .online-dot { opacity:1!important; }

/* В профилях пользователей, гостей и пространств две вкладки друзей снова компактные. */
html:root body #friends-modal .friends-modal-tabs {
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  grid-template-columns:none!important;
  align-items:center!important;
  gap:.28rem!important;
  padding:.22rem!important;
}
html:root body #friends-modal .friends-modal-tab {
  width:auto!important;
  min-width:5.6rem!important;
  flex:0 0 auto!important;
  padding:.48rem .82rem!important;
  white-space:nowrap!important;
}
html:root body #friends-modal .friends-modal-tab:last-child { min-width:7.9rem!important; }

/* ------------[Единое пустое обсуждение]------------ // Живая заглушка во всех просмотрщиках публикаций и фотографий. Модуль: «оформление интерфейса». Часть 29/34 */
.viewer-comment-empty {
  min-height:15rem;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:.35rem;
  padding:2rem 1rem;
  color:var(--vmesta-ui-muted,var(--standard-text-passive,#718096));
  text-align:center;
}
.viewer-comment-empty-visual {
  position:relative;
  width:4.6rem;
  height:4.6rem;
  margin-bottom:.55rem;
  display:grid;
  place-items:center;
  border-radius:1.45rem;
  background:color-mix(in srgb,var(--color-dynamic,#2583ff) 12%,var(--vmesta-ui-soft,#eef3f8));
  color:var(--color-dynamic,#2583ff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-dynamic,#2583ff) 18%,transparent);
}
.viewer-comment-empty-visual svg { position:relative;z-index:2;width:2.65rem;height:2.65rem;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:viewer-comment-float 3.2s ease-in-out infinite; }
.viewer-comment-empty-orbit { position:absolute;inset:-.48rem;border:1px dashed color-mix(in srgb,var(--color-dynamic,#2583ff) 36%,transparent);border-radius:50%;animation:viewer-comment-orbit 9s linear infinite; }
.viewer-comment-empty-dot { position:absolute;z-index:3;width:.48rem;height:.48rem;border:2px solid var(--vmesta-ui-panel,#fff);border-radius:50%;background:var(--color-dynamic,#2583ff);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-dynamic,#2583ff) 12%,transparent); }
.viewer-comment-empty-dot-a { top:-.15rem;right:.55rem;animation:viewer-comment-pulse 2s ease-in-out infinite; }
.viewer-comment-empty-dot-b { right:-.18rem;bottom:.7rem;transform:scale(.72);animation:viewer-comment-pulse 2s .7s ease-in-out infinite; }
.viewer-comment-empty strong { color:var(--vmesta-ui-ink,var(--standard-text-active,#1e293b));font-size:.72rem;font-weight:950;letter-spacing:.065em;text-transform:uppercase; }
.viewer-comment-empty > span:last-child { font-size:.64rem;font-weight:700;opacity:.82; }
@keyframes viewer-comment-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-.32rem) rotate(2deg)} }
@keyframes viewer-comment-orbit { to{transform:rotate(360deg)} }
@keyframes viewer-comment-pulse { 0%,100%{opacity:.58;transform:scale(.78)} 50%{opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion:reduce) { .viewer-comment-empty-visual svg,.viewer-comment-empty-orbit,.viewer-comment-empty-dot{animation:none!important} }

/* Разделитель обсуждения занимает всё оставшееся место до правой стенки во всех режимах. */
html:root body :is(#post-viewer.is-discussion-mode,#media-viewer .media-viewer-post-slot) #viewer-comments-block > .viewer-comments-head {
  --discussion-edge:1.25rem;
  width:100%!important;
  display:grid!important;
  grid-template-columns:max-content max-content minmax(2rem,1fr)!important;
  align-items:center!important;
  gap:.5rem!important;
  box-sizing:border-box!important;
}
html:root body #media-viewer .media-viewer-post-slot #viewer-comments-block > .viewer-comments-head { --discussion-edge:.82rem; }
html:root body :is(#post-viewer.is-discussion-mode,#media-viewer .media-viewer-post-slot) #viewer-comments-block > .viewer-comments-head > .h-px {
  display:block!important;
  width:auto!important;
  max-width:none!important;
  min-width:2rem!important;
  margin-right:calc(var(--discussion-edge) * -1)!important;
}

/* Пространства — самостоятельная сущность, поэтому их индикатор всегда зелёный. */
.space-avatar-online { overflow:visible!important;isolation:isolate; }
.space-avatar-online > img { overflow:hidden; }
.space-avatar-online .space-always-online-dot { position:absolute;z-index:4;right:-.08rem;bottom:-.08rem;width:.72rem;height:.72rem; }

/* Компактная анкета: просмотр и редактор родственников больше не накладываются друг на друга. */
html:root body #about-modal .profile-family-list.hidden,
html:root body #about-modal .profile-family-editor.hidden { display:none!important; }
html:root body #about-modal .profile-family-card:not(.is-editing) .profile-family-children-row.has-linked-children { display:none!important; }
html:root body #about-modal .profile-family-editor-row input {
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  outline:0!important;
}
html:root body #about-modal .profile-family-member.is-text-only { min-height:2.65rem;cursor:default; }
html:root body #about-modal .profile-family-member.is-text-only:hover { transform:none; }
html:root body #about-modal .about-modal-body > .grid,
html:root body #about-modal .grid.grid-cols-1.sm\:grid-cols-2 { align-items:start!important;grid-auto-flow:row dense; }
html:root body #about-modal :is(#relationship-card,.profile-family-card,.profile-work-card) { align-self:start!important;height:auto!important;min-height:0!important; }
html:root body #relationship-visual { width:2.2rem!important;max-width:2.2rem!important; }
html:root body #relationship-avatar-pair { width:2.2rem!important;grid-template-columns:2rem!important; }

/* ------------[Семья и родственники]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 30/34 */
html:root body #about-modal > div {
  width:min(58rem,calc(100vw - 2rem))!important;
}
html:root body #about-modal #relationship-card {
  grid-column:auto!important;
}
.profile-family-card {
  min-width:0;
  display:grid;
  align-content:start;
  gap:.65rem;
  padding:.9rem;
  border:0!important;
  border-radius:1rem;
  background:color-mix(in srgb,var(--adaptive-surface,white) 90%,var(--color-dynamic,#22a35a) 10%);
  color:var(--adaptive-text,rgb(30 41 59));
}
.profile-family-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
}
.profile-family-head > div { display:grid;min-width:0;gap:.12rem; }
.profile-family-head span,
.profile-family-group > span {
  color:color-mix(in srgb,var(--color-dynamic,#22a35a) 84%,var(--adaptive-text,rgb(30 41 59)) 16%);
  font-size:.54rem;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.profile-family-head strong { font-size:.78rem;font-weight:950;line-height:1.2; }
.profile-family-head > b {
  display:grid;
  width:2rem;
  height:2rem;
  flex:0 0 auto;
  place-items:center;
  border-radius:.72rem;
  background:color-mix(in srgb,var(--color-dynamic,#22a35a) 18%,transparent);
  color:var(--color-dynamic,#22a35a);
  font-size:.68rem;
}
.profile-family-children-row { margin:0!important; }
.profile-family-list { display:grid;gap:.7rem; }
.profile-family-empty {
  margin:0;
  padding:.72rem;
  border-radius:.72rem;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 90%,var(--color-dynamic,#22a35a) 10%);
  color:var(--adaptive-muted,#718096);
  font-size:.65rem;
  font-weight:750;
}
.profile-family-group { display:grid;gap:.35rem; }
.profile-family-group > div { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.38rem; }
.profile-family-member {
  display:flex;
  min-width:0;
  align-items:center;
  gap:.48rem;
  padding:.48rem;
  border:0!important;
  border-radius:.75rem;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 86%,var(--color-dynamic,#22a35a) 14%);
  color:inherit;
  text-align:left;
  transition:transform .16s ease,background .16s ease;
}
.profile-family-member:hover { transform:translateY(-1px);background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 70%,var(--color-dynamic,#22a35a) 30%); }
.profile-family-avatar { position:relative;width:2rem;height:2rem;flex:0 0 auto; }
.profile-family-avatar img { display:block;width:100%;height:100%;border-radius:50%;object-fit:cover; }
.profile-family-avatar i {
  position:absolute;
  right:-.05rem;
  bottom:-.05rem;
  width:.48rem;
  height:.48rem;
  border:2px solid var(--adaptive-surface,white);
  border-radius:50%;
  background:#94a3b8;
}
.profile-family-avatar i.is-online { background:#22c55e; }
.profile-family-person { display:grid;min-width:0;line-height:1.13; }
.profile-family-person small { color:var(--color-dynamic,#22a35a);font-size:.48rem;font-weight:900; }
.profile-family-person strong { overflow:hidden;font-size:.63rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap; }
.profile-family-person em { overflow:hidden;color:var(--adaptive-muted,#718096);font-size:.48rem;font-style:normal;font-weight:700;text-overflow:ellipsis;white-space:nowrap; }
.profile-family-editor { display:grid;gap:.48rem; }
#profile-family-editor-rows { display:grid;gap:.38rem; }
.profile-family-editor-row {
  display:grid;
  grid-template-columns:minmax(7.5rem,.72fr) minmax(0,1fr) 2rem;
  gap:.35rem;
  align-items:center;
}
.profile-family-editor-row select,
.profile-family-editor-row label {
  min-width:0;
  height:2.25rem;
  border:0!important;
  border-radius:.7rem;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 82%,var(--color-dynamic,#22a35a) 18%);
  color:var(--adaptive-text,rgb(30 41 59));
  font-size:.61rem;
  font-weight:850;
  outline:0;
}
.profile-family-editor-row select { padding:0 .6rem; }
.profile-family-editor-row label { display:flex;align-items:center;gap:.2rem;padding:0 .58rem;color:var(--color-dynamic,#22a35a); }
.profile-family-editor-row input { width:100%;min-width:0;border:0;background:transparent;color:var(--adaptive-text,rgb(30 41 59));font:inherit;outline:0; }
.profile-family-editor-row > button {
  display:grid;
  width:2rem;
  height:2rem;
  place-items:center;
  border:0!important;
  border-radius:.68rem;
  background:color-mix(in srgb,#ef4444 14%,var(--adaptive-surface-2,#f1f5f9));
  color:#ef4444;
  font-size:1rem;
  line-height:1;
}
.profile-family-add {
  display:flex;
  min-height:2.25rem;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border:0!important;
  border-radius:.7rem;
  background:color-mix(in srgb,var(--adaptive-surface-2,#f1f5f9) 70%,var(--color-dynamic,#22a35a) 30%);
  color:var(--color-dynamic,#22a35a);
  font-size:.61rem;
  font-weight:900;
}
.profile-family-add svg { width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
.profile-family-editor > small { color:var(--adaptive-muted,#718096);font-size:.5rem;line-height:1.35; }

@media (max-width:640px) {
  html:root body #about-modal #relationship-card,
  html:root body #about-modal .profile-family-card { grid-column:1/-1!important; }
  .profile-family-group > div { grid-template-columns:1fr; }
  .profile-family-editor-row { grid-template-columns:1fr 2rem; }
  .profile-family-editor-row select { grid-column:1/-1; }
}

/* ------------[Анкета: семья, дети и учёба]------------ // Оформляет связанный блок интерфейса.
   Дети живут рядом с отношениями, родственники — в своей карточке, а работа
   и учёба используют одну геометрию. Модуль: «оформление интерфейса». Часть 31/34 */
html:root body #about-modal > div {
  width:min(48rem,calc(100vw - 1.25rem))!important;
}

html:root body #about-modal .grid.grid-cols-1.sm\:grid-cols-2 {
  align-items:stretch!important;
}

html:root body #about-modal :is(#relationship-card,.profile-family-card,.profile-work-card,.profile-education-card) {
  align-self:stretch!important;
  min-height:13rem!important;
  height:100%!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

html:root body #about-modal .profile-personal-life-details {
  grid-template-columns:1fr!important;
}

.profile-children-section { display:grid;gap:.45rem; }
.profile-children-head { display:flex;align-items:center;justify-content:space-between;gap:.5rem; }
.profile-children-head > span {
  color:color-mix(in srgb,var(--color-dynamic,#22a35a) 84%,var(--adaptive-text,rgb(30 41 59)) 16%);
  font-size:.54rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase;
}
.profile-children-head > b {
  display:grid;min-width:1.55rem;height:1.55rem;place-items:center;border-radius:.55rem;
  background:color-mix(in srgb,var(--color-dynamic,#22a35a) 18%,transparent);
  color:var(--color-dynamic,#22a35a);font-size:.58rem;
}
.profile-children-links:empty { display:none; }
.profile-children-links .profile-family-group > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-children-section.has-linked-children > #modal-user-children { display:none!important; }
.profile-children-editor { margin-top:.2rem; }
#profile-children-editor-rows { display:grid;gap:.38rem; }

html:root body #relationship-visual {
  width:4.45rem!important;
  max-width:4.45rem!important;
}
html:root body #relationship-avatar-pair {
  width:4.45rem!important;
  max-width:4.45rem!important;
  grid-template-columns:repeat(2,2rem)!important;
}
html:root body #relationship-avatar-pair .relationship-self-avatar,
html:root body #relationship-avatar-pair > button {
  display:block!important;width:2rem!important;height:2rem!important;
}

html:root body .space-avatar-online { display:inline-block!important;flex:0 0 auto;box-sizing:border-box; }
html:root body .post-author-avatar > .space-avatar-online {
  width:2.5rem!important;height:2.5rem!important;max-width:2.5rem!important;max-height:2.5rem!important;
}
html:root body .post-author-avatar > .space-avatar-online > img {
  display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;
}

@media (max-width:640px) {
  html:root body #about-modal :is(#relationship-card,.profile-family-card,.profile-work-card,.profile-education-card) {
    min-height:0!important;
  }
  .profile-children-links .profile-family-group > div { grid-template-columns:1fr; }
}

/* ------------[Анкета: ровное окно и сердце пары]------------ // Оформляет связанный блок интерфейса.
   Фиксирует ширину независимо от увеличенного корневого шрифта и помещает
   обе фотографии внутрь цельного сердца. Без партнёра правая половина разорвана. Модуль: «оформление интерфейса». Часть 32/34 */
html:root body #about-modal:not(.hidden) {
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:12px!important;
}

html:root body #about-modal > div {
  isolation:isolate!important;
  flex:0 1 760px!important;
  width:min(760px,calc(100vw - 24px))!important;
  max-width:760px!important;
  max-height:min(92dvh,900px)!important;
  margin:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  transform:none!important;
}

html:root body #about-modal > div > .custom-scrollbar {
  min-width:0!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
}

html:root body #relationship-card .profile-relationship-partner-line {
  grid-template-columns:minmax(0,1fr) 132px!important;
  min-height:94px!important;
  gap:10px!important;
  margin-top:2px!important;
}

html:root body #relationship-card #relationship-edit-meta {
  align-self:center!important;
}

html:root body #relationship-card #relationship-visual {
  align-self:center!important;
  width:132px!important;
  max-width:132px!important;
  min-height:94px!important;
  height:94px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.relationship-heart {
  position:relative;
  width:132px;
  height:94px;
  color:var(--color-dynamic,#2583ff);
  filter:drop-shadow(0 8px 13px color-mix(in srgb,currentColor 18%,transparent));
}

.relationship-heart-shape {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.relationship-heart-fill {
  fill:color-mix(in srgb,currentColor 10%,transparent);
  stroke:none;
}

.relationship-heart-side {
  fill:none;
  stroke:currentColor;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.relationship-heart.is-paired .relationship-heart-shape {
  animation:relationship-heartbeat 3.6s ease-in-out infinite;
  transform-origin:50% 55%;
}

.relationship-heart.is-broken .relationship-heart-side-right {
  opacity:.38;
  stroke-dasharray:7 7;
}

.relationship-heart-crack {
  fill:none;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  animation:relationship-crack-pulse 2.7s ease-in-out infinite;
}

html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair),
html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair).is-single {
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  grid-template-columns:42px 42px!important;
  grid-template-rows:42px!important;
  align-content:start!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding-top:18px!important;
  overflow:visible!important;
}

html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) > *,
html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) .relationship-self-avatar,
html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) > button {
  position:relative!important;
  display:grid!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  line-height:0!important;
}

html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) > :is(span,button) > div,
html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) :is(img,.avatar-placeholder) {
  display:block!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:999px!important;
  object-fit:cover!important;
  object-position:center!important;
}

html:root body :is(#relationship-avatar-pair,.relationship-avatar-pair) > :is(.relationship-self-avatar,button)::after {
  position:absolute;
  inset:-3px;
  border:2px solid color-mix(in srgb,var(--adaptive-surface,white) 82%,currentColor 18%);
  border-radius:999px;
  box-shadow:0 0 0 2px color-mix(in srgb,currentColor 36%,transparent);
  content:"";
  pointer-events:none;
}

.relationship-missing-half {
  border:2px dashed color-mix(in srgb,currentColor 55%,transparent)!important;
  background:color-mix(in srgb,currentColor 8%,transparent)!important;
}

.relationship-missing-half > i {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:999px;
  background:currentColor;
  opacity:.48;
  animation:relationship-missing-drift 2.4s ease-in-out infinite;
}
.relationship-missing-half > i:nth-child(1) { left:8px;top:11px; }
.relationship-missing-half > i:nth-child(2) { right:8px;top:18px;animation-delay:-.8s; }
.relationship-missing-half > i:nth-child(3) { left:18px;bottom:8px;animation-delay:-1.6s; }

@keyframes relationship-heartbeat {
  0%,70%,100% { transform:scale(1); }
  76% { transform:scale(1.035); }
  82% { transform:scale(1); }
  88% { transform:scale(1.02); }
}

@keyframes relationship-crack-pulse {
  0%,100% { opacity:.72;filter:drop-shadow(0 0 0 transparent); }
  50% { opacity:1;filter:drop-shadow(0 0 4px currentColor); }
}

@keyframes relationship-missing-drift {
  0%,100% { transform:translateY(0) scale(.9);opacity:.35; }
  50% { transform:translateY(-3px) scale(1);opacity:.72; }
}

@media (max-width:640px) {
  html:root body #about-modal > div {
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:18px!important;
  }
  html:root body #relationship-card .profile-relationship-partner-line {
    grid-template-columns:minmax(0,1fr) 116px!important;
  }
  html:root body #relationship-card #relationship-visual,
  .relationship-heart { width:116px!important;max-width:116px!important; }
}

@media (prefers-reduced-motion:reduce) {
  .relationship-heart-shape,
  .relationship-heart-crack,
  .relationship-missing-half > i { animation:none!important; }
}

/* ------------[Сердце пары: фиксированная композиция]------------ // Оформляет связанный блок интерфейса.
   Сердце больше не участвует в автопотоке строки: наличие подписи партнёра
   не меняет его координату, а компактный статус освобождает место справа. Модуль: «оформление интерфейса». Часть 33/34 */
html:root body #relationship-card .profile-relationship-layout > .min-w-0 {
  position:relative!important;
  min-height:112px!important;
  padding-right:174px!important;
}

html:root body #relationship-card #modal-user-relationship,
html:root body #relationship-card #relationship-status-picker,
html:root body #relationship-card #edit-partner-wrap {
  width:100%!important;
  max-width:210px!important;
}

html:root body #relationship-card #relationship-status-picker {
  margin-top:5px!important;
}

html:root body #relationship-card #relationship-status-picker :is(.vm-select-shell,.vm-select-trigger) {
  width:100%!important;
}

html:root body #relationship-card #relationship-status-picker .vm-select-trigger {
  min-height:36px!important;
  padding-inline:12px!important;
  border-radius:12px!important;
}

html:root body #relationship-card .profile-relationship-partner-line {
  display:block!important;
  width:100%!important;
  min-height:42px!important;
  margin-top:6px!important;
  overflow:visible!important;
}

html:root body #relationship-card #relationship-edit-meta {
  width:min(100%,210px)!important;
  max-width:210px!important;
}

html:root body #relationship-card #relationship-visual {
  position:absolute!important;
  z-index:2!important;
  top:-10px!important;
  right:0!important;
  grid-column:auto!important;
  width:156px!important;
  max-width:156px!important;
  min-height:112px!important;
  height:112px!important;
  margin:0!important;
  transform:none!important;
}

html:root body #relationship-card .relationship-heart {
  width:156px!important;
  max-width:156px!important;
  height:112px!important;
}

html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair),
html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair).is-single {
  grid-template-columns:44px 44px!important;
  grid-template-rows:44px!important;
  gap:12px!important;
  padding-top:17px!important;
}

html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > *,
html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) .relationship-self-avatar,
html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > button,
html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > :is(span,button) > div,
html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) :is(img,.avatar-placeholder) {
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
}

@media (max-width:640px) {
  html:root body #relationship-card .profile-relationship-layout > .min-w-0 {
    min-height:100px!important;
    padding-right:140px!important;
  }
  html:root body #relationship-card #modal-user-relationship,
  html:root body #relationship-card #relationship-status-picker,
  html:root body #relationship-card #edit-partner-wrap {
    width:100%!important;
    max-width:100%!important;
  }
  html:root body #relationship-card #relationship-visual,
  html:root body #relationship-card .relationship-heart {
    top:-4px!important;
    width:130px!important;
    max-width:130px!important;
    height:96px!important;
    min-height:96px!important;
  }
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair),
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair).is-single {
    grid-template-columns:40px 40px!important;
    grid-template-rows:40px!important;
    gap:9px!important;
    padding-top:14px!important;
  }
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > *,
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) .relationship-self-avatar,
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > button,
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) > :is(span,button) > div,
  html:root body #relationship-card :is(#relationship-avatar-pair,.relationship-avatar-pair) :is(img,.avatar-placeholder) {
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }
}

/* ------------[Лёгкая кинематика сообщений]------------ // Оформляет связанный блок интерфейса.
   Анимируется один слой вместо одновременного движения строки и пузыря. Модуль: «оформление интерфейса». Часть 34/34 */
html:root body .messenger-message.is-entering {
  animation:none!important;
}

html:root body .messenger-message.is-entering > :is(.messenger-bubble,.messenger-room-message-avatar) {
  animation:messenger-message-arrive-fluid 220ms cubic-bezier(.22,1,.36,1) both!important;
  will-change:transform,opacity;
}

@keyframes messenger-message-arrive-fluid {
  from { opacity:0; transform:translate3d(0,.34rem,0) scale(.985); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

html:root body .messenger-bubble.is-video-note-only {
  backface-visibility:hidden;
  will-change:auto;
  transition:filter 150ms ease!important;
}

/* Размер задаёт сам пузырь; дополнительный scale видео и кольца создавал рывок. */
html:root body .messenger-video-note.is-expanding :is(video,.messenger-video-note-ring),
html:root body .messenger-video-note.is-collapsing :is(video,.messenger-video-note-ring) {
  animation:none!important;
}

html:root body .messenger-video-note-ring {
  backface-visibility:hidden;
  transition:
    transform 190ms cubic-bezier(.22,1,.36,1),
    filter 140ms ease!important;
}

html:root body .messenger-inline-media-bar {
  transition:
    opacity 130ms ease,
    transform 180ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s!important;
}

html:root body .messenger-inline-media-bar.hidden {
  transition:
    opacity 130ms ease,
    transform 180ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 180ms!important;
}

@media (prefers-reduced-motion:reduce) {
  html:root body .messenger-message.is-entering > :is(.messenger-bubble,.messenger-room-message-avatar),
  html:root body .messenger-video-note.is-expanding :is(video,.messenger-video-note-ring),
  html:root body .messenger-video-note.is-collapsing :is(video,.messenger-video-note-ring) {
    animation:none!important;
  }
}
/* ------------[Тестовый аудиозвонок один-на-один]------------ // Оформляет входящий, исходящий и активный звонок поверх любого раздела приложения. Модуль: «оформление интерфейса». Часть 1/1 */
.messenger-conversation-actions .messenger-audio-call-button,
.messenger-conversation-actions .messenger-video-call-button {
    color: var(--color-dynamic, #239a55);
}

.messenger-conversation-actions .messenger-audio-call-button .vmesta-entry-call-mark,
.messenger-conversation-actions .messenger-video-call-button .vmesta-entry-call-mark {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
}

.messenger-conversation-actions .messenger-audio-call-button:hover,
.messenger-conversation-actions .messenger-video-call-button:hover {
    background: color-mix(in srgb, var(--color-dynamic, #239a55) 14%, transparent);
}

.vmesta-call-layer {
    --call-accent: var(--theme-accent, var(--color-dynamic, #239a55));
    --call-surface: var(--theme-surface-panel, #f8fbfa);
    --call-surface-soft: var(--theme-surface-nested, #edf4f1);
    --call-control: var(--theme-surface-control, #e4eee9);
    --call-active: var(--theme-surface-active, #d5e7de);
    --call-text: var(--theme-text-primary, #14231d);
    --call-secondary: var(--theme-text-secondary, #4d675b);
    --call-muted: var(--theme-text-muted, #6d7e76);
    --call-line: var(--theme-divider, rgb(35 70 54 / .14));
    --call-success: var(--theme-success, #16a36a);
    --call-warning: var(--theme-warning, #d68a19);
    --call-danger: var(--theme-danger, #dc3545);
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 2rem;
    color: var(--call-text);
}

.vmesta-call-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--call-accent) 20%, transparent), transparent 38rem),
        color-mix(in srgb, var(--theme-surface-page, #07111b) 78%, transparent);
    backdrop-filter: blur(22px) saturate(.72);
    animation: vmesta-call-backdrop-in .28s ease both;
}

.vmesta-call-card {
    position: relative;
    display: flex;
    width: min(58rem, calc(100vw - 4rem));
    height: min(42rem, calc(100dvh - 4rem));
    min-height: 34rem;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    padding: 0;
    border: 1px solid var(--call-line);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 50% 31%, color-mix(in srgb, var(--call-accent) 18%, transparent), transparent 23rem),
        linear-gradient(155deg, color-mix(in srgb, var(--call-surface) 97%, var(--call-accent) 3%), var(--call-surface));
    box-shadow: 0 2.2rem 6rem rgb(0 0 0 / .34), inset 0 1px color-mix(in srgb, var(--call-text) 8%, transparent);
    isolation: isolate;
    animation: vmesta-call-card-in .32s cubic-bezier(.2, .8, .2, 1) both;
    /* Вид и размеры меняются в одном кадре: иначе содержимое большого звонка
       успевает нарисоваться внутри ещё компактной карточки. */
    transition: box-shadow .2s ease;
}

.vmesta-call-layer.view-large .vmesta-call-card,
.vmesta-call-layer.view-large .vmesta-call-backdrop { animation: none; }

.vmesta-call-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16rem;
    width: 44rem;
    height: 38rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-dynamic, #239a55) 14%, transparent);
    filter: blur(4rem);
}

.vmesta-call-topbar {
    display: flex;
    width: 100%;
    height: 4.2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.45rem;
    border-bottom: 1px solid var(--call-line);
    border-radius: 1.45rem 1.45rem 0 0;
    background: color-mix(in srgb, var(--call-surface-soft) 92%, transparent);
}

.vmesta-call-topbar strong {
    color: var(--call-accent);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .2em;
}

.vmesta-call-topbar span {
    color: var(--call-muted);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vmesta-call-topbar > div { display: flex; align-items: center; }
.vmesta-call-topbar button {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border: 1px solid var(--call-line);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--call-control) 75%, var(--call-surface));
    color: var(--call-accent);
    cursor: pointer;
}
.vmesta-call-topbar button:hover { background: var(--call-active); color: var(--call-text); }
.vmesta-call-topbar button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; }
.vmesta-call-topbar-actions { position: relative; display: flex; align-items: center; gap: .4rem; }
.vmesta-call-topbar .vmesta-call-more-toggle[hidden] { display: none; }
.vmesta-call-more-toggle svg circle { fill: currentColor; stroke: none; }
.vmesta-call-more-slot:empty { display: none; }
.vmesta-call-more-menu { position: absolute; z-index: 12; top: calc(100% + .72rem); right: 0; display: grid; width: min(17rem, calc(100vw - 2rem)); max-height: min(22rem, 60vh); gap: .15rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--call-line); border-radius: .9rem; background: var(--call-surface); box-shadow: 0 1rem 2.6rem rgb(0 0 0 / .24); scrollbar-width: none; overscroll-behavior: contain; }
.vmesta-call-more-menu::-webkit-scrollbar { display: none; }
.vmesta-call-more-menu > button { display: flex; width: 100%; min-height: 2.2rem; align-items: center; gap: .55rem; padding: .5rem .58rem; border: 0; border-radius: .62rem; background: transparent; color: var(--call-text); text-align: left; cursor: pointer; font: inherit; font-size: .66rem; font-weight: 750; }
.vmesta-call-more-menu > button:hover { background: var(--call-control); }
.vmesta-call-more-menu > button:disabled { cursor: not-allowed; opacity: .5; }
.vmesta-call-more-menu > button svg { width: 1rem; height: 1rem; flex: 0 0 auto; stroke-width: 1.8; }
.vmesta-call-more-menu > button span { flex: 1; }
.vmesta-call-more-menu span { color: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; }
.vmesta-call-camera-devices { display: grid; max-height: 8rem; gap: .12rem; overflow-y: auto; padding: .2rem .25rem .35rem 1.65rem; scrollbar-width: none; }
.vmesta-call-camera-devices::-webkit-scrollbar { display: none; }
.vmesta-call-camera-devices button { width: 100%; height: auto; min-height: 1.9rem; overflow: hidden; padding: .45rem .5rem; border: 0; border-radius: .5rem; background: transparent; color: var(--call-secondary); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font: inherit; font-size: .6rem; }
.vmesta-call-camera-devices button:hover, .vmesta-call-camera-devices button.is-selected { background: var(--call-active); color: var(--call-accent); }
.vmesta-call-invite-slot:empty { display: none; }
.vmesta-call-compact-popover-slot:empty { display: none; }
.vmesta-call-invite-backdrop { position: absolute; z-index: 20; inset: 4.2rem 0 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: .7rem; border-radius: 0 0 1.45rem 1.45rem; background: rgb(5 10 18 / .16); }
.vmesta-call-invite-dialog { display: grid; width: min(22rem, 100%); max-height: calc(100% - .3rem); gap: .8rem; overflow: hidden; padding: 1rem; border: 1px solid var(--call-line); border-radius: 1.05rem; background: var(--call-surface); box-shadow: 0 1rem 2.8rem rgb(0 0 0 / .22); }
.vmesta-call-invite-dialog header { display: flex; align-items: center; gap: .65rem; }
.vmesta-call-invite-title-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; background: var(--call-active); color: var(--call-accent); }
.vmesta-call-invite-title-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vmesta-call-invite-title { display: grid; min-width: 0; flex: 1; gap: .15rem; }
.vmesta-call-invite-title strong { font-size: .83rem; }
.vmesta-call-invite-title small { color: var(--call-muted); font-size: .59rem; line-height: 1.35; }
.vmesta-call-invite-dialog header button { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; border: 0; border-radius: .55rem; background: var(--call-control); color: var(--call-secondary); cursor: pointer; font-size: 1.15rem; }
.vmesta-call-invite-dialog header button svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; }
.vmesta-call-invite-dialog header button:hover { background: var(--call-active); color: var(--call-text); }
.vmesta-call-invite-capacity { display: flex; flex-wrap: wrap; gap: .38rem; }
.vmesta-call-invite-capacity span { padding: .34rem .5rem; border-radius: .5rem; background: var(--call-surface-soft); color: var(--call-muted); font-size: .58rem; }
.vmesta-call-invite-capacity strong { color: var(--call-text); }
.vmesta-call-invite-section { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vmesta-call-invite-section strong { font-size: .64rem; }
.vmesta-call-invite-section small { color: var(--call-muted); font-size: .55rem; }
.vmesta-call-invite-results { display: grid; min-height: 0; max-height: min(19rem, 44vh); gap: .38rem; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.vmesta-call-invite-results::-webkit-scrollbar { display: none; }
.vmesta-call-invite-empty { display: grid; min-height: 6.3rem; place-content: center; justify-items: center; gap: .28rem; padding: .75rem; border: 1px dashed var(--call-line); border-radius: .8rem; color: var(--call-muted); text-align: center; }
.vmesta-call-invite-empty svg { width: 1.45rem; height: 1.45rem; margin-bottom: .12rem; fill: none; stroke: var(--call-accent); stroke-width: 1.6; }
.vmesta-call-invite-empty strong { color: var(--call-text); font-size: .67rem; }
.vmesta-call-invite-empty span { max-width: 15rem; font-size: .58rem; line-height: 1.4; }
.vmesta-call-invite-contact { display: flex; min-width: 0; align-items: center; gap: .6rem; padding: .5rem; border: 1px solid var(--call-line); border-radius: .75rem; background: var(--call-surface-soft); }
.vmesta-call-invite-contact > img { width: 2.15rem; height: 2.15rem; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.vmesta-call-invite-contact > span { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.vmesta-call-invite-contact > span strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-invite-contact > span small { overflow: hidden; color: var(--call-muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-invite-contact button { display: inline-flex; min-height: 1.95rem; align-items: center; justify-content: center; gap: .28rem; padding: .3rem .5rem; border: 0; border-radius: .55rem; background: var(--call-accent); color: var(--call-surface); cursor: pointer; font: inherit; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.vmesta-call-invite-contact button:hover { filter: brightness(1.12); }
.vmesta-call-invite-contact button:disabled { cursor: wait; opacity: .58; }
.vmesta-call-invite-contact button svg { width: .83rem; height: .83rem; fill: none; stroke: currentColor; stroke-width: 2; }

.vmesta-call-stage {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem .75rem;
}

.vmesta-call-avatar-wrap {
    position: relative;
    display: grid;
    width: 13.5rem;
    height: 13.5rem;
    place-items: center;
    margin-bottom: 1.1rem;
    --call-voice-level: 0;
    isolation: isolate;
}

.vmesta-call-avatar-wrap::before,
.vmesta-call-avatar-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 1rem;
    border-radius: 50%;
    pointer-events: none;
}

.vmesta-call-avatar-wrap::before {
    background: conic-gradient(from 20deg, #4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac);
    inset: -1.65rem;
    opacity: calc(.2 + var(--call-voice-level) * .76);
    filter: blur(calc(1.15rem + var(--call-voice-level) * 1.9rem)) saturate(1.35);
    transform: scale(calc(1.02 + var(--call-voice-level) * .3)) rotate(calc(var(--call-voice-level) * 16deg));
    transition: opacity 80ms linear, transform 90ms linear, filter 90ms linear;
}

.vmesta-call-avatar-wrap::after {
    inset: -.45rem;
    border: .2rem solid color-mix(in srgb, var(--call-accent) calc(46% + var(--call-voice-level) * 45%), transparent);
    opacity: calc(.42 + var(--call-voice-level) * .58);
    box-shadow: 0 0 calc(.8rem + var(--call-voice-level) * 2.8rem) color-mix(in srgb, var(--call-accent) 76%, transparent), inset 0 0 calc(.35rem + var(--call-voice-level) * .85rem) color-mix(in srgb, var(--color-dynamic-secondary, #58b2ff) 45%, transparent);
    transform: scale(calc(.98 + var(--call-voice-level) * .18));
    transition: opacity 80ms linear, transform 90ms linear, box-shadow 90ms linear;
}

.vmesta-call-avatar-wrap:not(.is-speaking)::before,
.vmesta-call-avatar-wrap:not(.is-speaking)::after { opacity: 0; box-shadow: none; }
.vmesta-call-avatar-wrap.is-speaking::before { opacity: .78; animation: vmesta-call-aurora 3.2s ease-in-out infinite alternate; }
.vmesta-call-avatar-wrap.is-speaking::after { border-color: #6cebd0; opacity: 1; box-shadow: 0 0 1.1rem #51dfc2, 0 0 2rem rgb(127 121 255 / .48); }

.vmesta-call-avatar-wrap > i {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--color-dynamic, #239a55) 58%, transparent);
    border-radius: 50%;
    animation: vmesta-call-pulse 2.2s ease-out infinite;
}

.vmesta-call-avatar-wrap > i:nth-child(2) {
    animation-delay: 1.1s;
}

.vmesta-call-avatar-wrap > img {
    position: relative;
    z-index: 2;
    width: 11rem;
    height: 11rem;
    border: .24rem solid color-mix(in srgb, var(--color-dynamic, #239a55) 66%, #dce7e2 34%);
    border-radius: 50%;
    background: var(--call-control);
    box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / .28), 0 0 0 .55rem color-mix(in srgb, var(--call-text) 4%, transparent);
    object-fit: cover;
}

.vmesta-call-stage h2 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    width: min(31rem, 100%);
    font-size: 1.65rem;
    font-weight: 950;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vmesta-call-stage > p {
    min-height: 1.4rem;
    margin: .35rem 0 1rem;
    color: var(--call-muted);
    font-size: .83rem;
    font-weight: 750;
}

.vmesta-call-local-indicator { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; padding: .18rem .5rem .18rem .2rem; border: 1px solid var(--call-line); border-radius: 1rem; background: var(--call-surface-soft); color: var(--call-text); font-size: .65rem; font-weight: 800; }
.vmesta-call-local-avatar { position: relative; display: inline-grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border-radius: 50%; --call-voice-level: 0; isolation: isolate; }
.vmesta-call-local-avatar::before { content: ''; position: absolute; z-index: 0; inset: -.18rem; border-radius: 50%; background: conic-gradient(#4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); opacity: 0; transform: scale(1); transition: transform 85ms linear, opacity 85ms linear, box-shadow 85ms linear; }
.vmesta-call-local-avatar.is-speaking::before { opacity: 1; transform: scale(calc(1.04 + var(--call-voice-level) * .14)); box-shadow: 0 0 .7rem #51dfc2, 0 0 1.25rem rgb(127 121 255 / .5); }
.vmesta-call-local-avatar img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--call-control); object-fit: cover; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-local-indicator,
.vmesta-call-layer.view-compact .vmesta-call-local-indicator { display: none; }

.vmesta-call-video-wall { display: none; }
.vmesta-call-video-wall[hidden] { display: none !important; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-stage { position: relative; display: grid; width: 100%; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-rows: 3.2rem minmax(0, 1fr); align-items: center; justify-items: start; column-gap: .72rem; row-gap: .6rem; padding: .8rem 1rem .6rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap { width: 2.65rem; height: 2.65rem; grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap > i { display: none; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap::before { inset: -.4rem; filter: blur(.45rem); }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap::after { inset: -.12rem; border-width: .1rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap > img { width: 2.48rem; height: 2.48rem; border-width: .1rem; box-shadow: 0 .3rem .7rem rgb(0 0 0 / .12); }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-stage h2 { width: 100%; grid-column: 2; grid-row: 1; align-self: start; margin: .25rem 0 0; font-size: .98rem; text-align: left; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-stage > p { min-height: 0; grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .2rem; font-size: .64rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security-slot { position: absolute; z-index: 4; top: 1.05rem; right: 1.1rem; max-width: 9rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security { width: max-content; max-width: 100%; flex-direction: row; margin: 0; padding: .28rem .38rem; border-radius: .62rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security > span,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security small { display: none; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security > div { min-height: 0; gap: .17rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security b,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security i { width: 1.38rem; height: 1.38rem; border-radius: .38rem; font-size: .78rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall { position: relative; display: block; width: 100%; height: 100%; min-height: 0; grid-column: 1 / -1; grid-row: 2; border-radius: 1rem; background: #172330; }
.vmesta-call-video-tile { position: absolute; display: block; overflow: hidden; padding: 0; border: 1px solid rgb(255 255 255 / .12); border-radius: 1rem; background: #172330; color: #f7fbff; text-align: left; cursor: pointer; box-shadow: 0 .55rem 1.5rem rgb(0 0 0 / .14); }
.vmesta-call-video-tile.is-remote { inset: 0; }
.vmesta-call-video-tile.is-local { z-index: 2; top: .8rem; right: .8rem; width: min(27%, 9.5rem); aspect-ratio: 4 / 3; border: .15rem solid var(--call-surface); border-radius: .8rem; }
.vmesta-call-video-tile.is-extra { z-index: 2; right: .8rem; bottom: .8rem; width: min(34%, 9.5rem); aspect-ratio: 4 / 3; border: .15rem solid var(--call-surface); border-radius: .8rem; }
.vmesta-call-video-tile[hidden] { display: none; }
.vmesta-call-video-wall.focus-local .vmesta-call-video-tile.is-local { z-index: 1; inset: 0; width: auto; height: auto; aspect-ratio: auto; border: 1px solid var(--call-line); border-radius: 1rem; }
.vmesta-call-video-wall.focus-local .vmesta-call-video-tile.is-remote { z-index: 2; inset: .8rem .8rem auto auto; width: min(34%, 9.5rem); height: auto; aspect-ratio: 4 / 3; border: .15rem solid var(--call-surface); border-radius: .8rem; }
.vmesta-call-video-wall.focus-extra .vmesta-call-video-tile.is-extra { z-index: 1; inset: 0; width: auto; height: auto; aspect-ratio: auto; border: 1px solid var(--call-line); border-radius: 1rem; }
.vmesta-call-video-wall.focus-extra .vmesta-call-video-tile.is-remote { z-index: 2; inset: .8rem .8rem auto auto; width: min(34%, 9.5rem); height: auto; aspect-ratio: 4 / 3; border: .15rem solid var(--call-surface); border-radius: .8rem; }
.vmesta-call-video-wall.focus-extra .vmesta-call-video-tile.is-local { top: auto; right: .8rem; bottom: .8rem; }
.vmesta-call-video-tile video { display: none; width: 100%; height: 100%; object-fit: cover; background: #111b26; }
.vmesta-call-video-tile.is-live video { display: block; }
.vmesta-call-video-tile.is-local video { transform: scaleX(-1); }
.vmesta-call-video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .55rem; color: #cbd5e1; }
.vmesta-call-video-placeholder img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.vmesta-call-video-placeholder.is-speaking img { outline: .2rem solid #5be4c6; outline-offset: .15rem; box-shadow: 0 0 1rem #51dfc2, 0 0 2rem rgb(127 121 255 / .5); }
.vmesta-call-video-placeholder svg { width: 2.3rem; height: 2.3rem; fill: none; stroke: var(--call-muted); stroke-width: 1.5; }
.vmesta-call-video-placeholder small { font-size: .65rem; font-weight: 700; }
.vmesta-call-video-tile.is-live .vmesta-call-video-placeholder { display: none; }
.vmesta-call-video-tile > b { position: absolute; right: .45rem; bottom: .45rem; left: .45rem; width: max-content; max-width: calc(100% - .9rem); overflow: hidden; padding: .3rem .45rem; border-radius: .45rem; background: rgb(0 0 0 / .55); color: #fff; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-video-tile > b { display: inline-flex; align-items: center; gap: .38rem; overflow: visible; padding: .18rem .45rem .18rem .2rem; }
.vmesta-call-video-tile > b .vmesta-call-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vmesta-call-tile-avatar { position: relative; isolation: isolate; display: inline-grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.vmesta-call-tile-avatar::before { content: ''; position: absolute; z-index: -1; inset: -.18rem; border-radius: 50%; background: conic-gradient(#4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); opacity: 0; }
.vmesta-call-tile-avatar.is-speaking::before { opacity: 1; box-shadow: 0 0 .7rem #51dfc2, 0 0 1.2rem rgb(127 121 255 / .5); animation: vmesta-call-aurora 3.2s ease-in-out infinite alternate; }
.vmesta-call-tile-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vmesta-call-video-tile.is-local > b .vmesta-call-local-avatar { width: 1.35rem; height: 1.35rem; }
.vmesta-call-video-tile.is-local:not(.is-live) .vmesta-call-video-placeholder small { display: none; }
.vmesta-call-video-wall.focus-local .vmesta-call-video-tile.is-local:not(.is-live) .vmesta-call-video-placeholder small { display: block; }
.vmesta-call-video-wall.focus-local .vmesta-call-video-tile.is-remote .vmesta-call-video-placeholder small { display: none; }
.vmesta-call-room-members { display: none; }
.vmesta-call-compact-members { display: none; }
.vmesta-call-layer.is-group .vmesta-call-security-slot { display: none; }
.vmesta-call-layer.is-group .vmesta-call-room-members { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .5rem; }
.vmesta-call-room-members > span { display: flex; max-width: 11rem; align-items: center; gap: .35rem; padding: .3rem .45rem; border: 1px solid var(--call-line); border-radius: .6rem; background: var(--call-surface-soft); font-size: .55rem; font-weight: 750; }
.vmesta-call-room-members > span.is-invited { opacity: .65; }
.vmesta-call-room-members > span.is-reconnecting { opacity: .72; border-style: dashed; animation: vmesta-call-reconnect-ring 1.3s ease-in-out infinite; }
.vmesta-call-member-avatar { position: relative; isolation: isolate; display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.vmesta-call-member-avatar::before { content: ''; position: absolute; z-index: -1; inset: -.36rem; border-radius: 50%; background: conic-gradient(from 25deg, #4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); filter: blur(.5rem); opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.vmesta-call-room-members > span.is-speaking .vmesta-call-member-avatar { background: conic-gradient(from 25deg, #4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); }
.vmesta-call-room-members > span.is-speaking .vmesta-call-member-avatar::before { opacity: calc(.5 + var(--call-voice-level, 0) * .36); animation: vmesta-call-aurora 3.2s ease-in-out infinite alternate; }
.vmesta-call-member-avatar img { display: block; width: 1.45rem; height: 1.45rem; border-radius: 50%; object-fit: cover; }
@keyframes vmesta-call-aurora { from { transform: scale(1.01) rotate(-10deg); filter: blur(.55rem) hue-rotate(-10deg); } to { transform: scale(1.1) rotate(12deg); filter: blur(.85rem) hue-rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
    .vmesta-call-avatar-wrap.is-speaking::before,
    .vmesta-call-room-members > span.is-speaking .vmesta-call-member-avatar::before,
    .vmesta-call-tile-avatar.is-speaking::before { animation: none; }
}
.vmesta-call-room-members > span > .vmesta-call-member-text { display: grid; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-room-members small { color: var(--call-muted); font-size: .48rem; }
.vmesta-call-layer.is-group.has-video:not(.view-compact) .vmesta-call-room-members { position: absolute; z-index: 4; bottom: 1.3rem; left: 1.5rem; justify-content: start; max-width: min(23rem, calc(100% - 3rem)); margin: 0; }
.vmesta-call-layer.is-group.has-video .vmesta-call-room-members:empty { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-room-members { display: none; }

/* В аудиорежиме каждый голос имеет собственную, одинаково заметную аватарку. */
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-avatar-wrap,
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-local-indicator { display: none; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-room-members {
    display: grid; width: min(31rem, 100%); max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center; gap: .8rem; margin: .4rem 0 1.2rem;
}
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-room-members > span {
    display: flex; width: 100%; max-width: none; min-height: 8rem; flex-direction: column; justify-content: center;
    gap: .65rem; padding: .8rem; border-radius: 1.2rem; background: var(--call-surface-soft);
    text-align: center;
}
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-room-members > span:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(15rem, 100%); justify-self: center; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-member-avatar { width: 4.75rem; height: 4.75rem; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-member-avatar::before { inset: -.55rem; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-member-avatar img {
    width: 4.35rem; height: 4.35rem; box-shadow: 0 .35rem 1rem rgb(0 0 0 / .13);
}
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-room-members > span > .vmesta-call-member-text { width: 100%; font-size: .78rem; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-room-members small { font-size: .61rem; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-stage > h2 { font-size: 1.15rem; }
.vmesta-call-layer.has-participant-grid:not(.has-video):not(.view-compact) .vmesta-call-stage > p { margin-bottom: .35rem; }

.vmesta-call-invite-search { display: flex; align-items: center; gap: .55rem; min-height: 2.45rem; padding: 0 .7rem; border: 1px solid var(--call-line); border-radius: .7rem; background: color-mix(in srgb, var(--call-surface) 65%, var(--call-surface-soft)); }
.vmesta-call-invite-search:focus-within { border-color: var(--call-accent); box-shadow: 0 0 0 .17rem color-mix(in srgb, var(--call-accent) 14%, transparent); }
.vmesta-call-invite-search svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: var(--call-accent); stroke-width: 1.8; }
.vmesta-call-layer .vmesta-call-invite-search > input[type="search"] { width: 100%; min-width: 0; min-height: 2.3rem; margin: 0; padding: .3rem 0; border: 0 !important; border-radius: 0 !important; outline: 0; appearance: none; background: transparent !important; box-shadow: none !important; color: var(--call-text); font: inherit; font-size: .65rem; }
.vmesta-call-invite-search input::placeholder { color: var(--call-muted); }
@media (max-width: 760px) {
    .vmesta-call-invite-backdrop { justify-content: center; align-items: flex-end; padding: .55rem; }
    .vmesta-call-invite-dialog { width: min(24rem, 100%); max-height: min(29rem, calc(100% - .4rem)); }
}

/* Три участника: две равные удалённые камеры и своё видео в углу.
   Четыре: сетка 2×2. По клику выбранная камера занимает левую область,
   остальные остаются в отдельной колонке без абсолютного наложения. */
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4 { display: grid; gap: .5rem; padding: .5rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3:not(.is-focused) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3:not(.is-focused) .vmesta-call-video-tile,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) .vmesta-call-video-tile { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 1px solid rgb(255 255 255 / .16); border-radius: .75rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3:not(.is-focused) .is-remote { grid-column: 1; grid-row: 1; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3:not(.is-focused) .is-extra { grid-column: 2; grid-row: 1; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3:not(.is-focused) .is-local { position: absolute; z-index: 3; inset: .85rem .85rem auto auto; width: min(23%, 8rem); height: auto; aspect-ratio: 4 / 3; border: .14rem solid var(--call-surface); box-shadow: 0 .5rem 1.3rem rgb(0 0 0 / .3); }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) .is-remote { grid-column: 1; grid-row: 1; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) .is-extra { grid-column: 2; grid-row: 1; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) .is-extra2 { grid-column: 1; grid-row: 2; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4:not(.is-focused) .is-local { grid-column: 2; grid-row: 2; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3.is-focused { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 23%); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4.is-focused { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 23%); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3.is-focused .vmesta-call-video-tile,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4.is-focused .vmesta-call-video-tile { position: relative; z-index: 2; inset: auto; width: 100%; height: 100%; min-height: 0; grid-column: 2; grid-row: auto; aspect-ratio: auto; border: 1px solid rgb(255 255 255 / .16); border-radius: .7rem; }
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-3.is-focused .vmesta-call-video-tile.is-focused,
.vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall.layout-4.is-focused .vmesta-call-video-tile.is-focused { z-index: 1; grid-column: 1; grid-row: 1 / -1; }
.vmesta-call-video-wall.layout-3 .vmesta-call-video-tile[hidden],
.vmesta-call-video-wall.layout-4 .vmesta-call-video-tile[hidden] { display: none !important; }
.vmesta-call-video-wall.layout-3 .vmesta-call-video-placeholder img,
.vmesta-call-video-wall.layout-4 .vmesta-call-video-placeholder img { width: 3rem; height: 3rem; }
.vmesta-call-video-wall.layout-3:not(.is-focused) .is-local .vmesta-call-video-placeholder img,
.vmesta-call-video-wall:is(.layout-3,.layout-4).is-focused .vmesta-call-video-tile:not(.is-focused) .vmesta-call-video-placeholder img { width: 2rem; height: 2rem; }
.vmesta-call-video-wall.layout-3:not(.is-focused) .is-local .vmesta-call-video-placeholder small,
.vmesta-call-video-wall:is(.layout-3,.layout-4).is-focused .vmesta-call-video-tile:not(.is-focused) .vmesta-call-video-placeholder small,
.vmesta-call-video-wall.layout-3:not(.is-focused) .is-local > b .vmesta-call-tile-avatar,
.vmesta-call-video-wall:is(.layout-3,.layout-4).is-focused .vmesta-call-video-tile:not(.is-focused) > b .vmesta-call-tile-avatar { display: none; }
.vmesta-call-video-wall.layout-3:not(.is-focused) .is-local > b,
.vmesta-call-video-wall:is(.layout-3,.layout-4).is-focused .vmesta-call-video-tile:not(.is-focused) > b { right: .25rem; bottom: .25rem; left: .25rem; max-width: calc(100% - .5rem); padding: .2rem .4rem; font-size: .54rem; }

#vmesta-call-rejoin-prompt { --call-surface: var(--theme-surface-panel, #fff); --call-text: var(--theme-text-primary, #1b365b); --call-muted: var(--theme-text-muted, #627895); --call-accent: var(--theme-accent, #347cf2); --call-control: var(--theme-surface-soft, #e6efff); --call-line: var(--theme-border-soft, #d8e5fa); position: fixed; z-index: 100020; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(8 16 29 / .62); backdrop-filter: blur(.5rem); }
.vmesta-call-rejoin-card { display: grid; justify-items: center; width: min(23rem, 100%); gap: .8rem; padding: 1.4rem; border: 1px solid var(--call-line, #d8e5fa); border-radius: 1.3rem; background: var(--call-surface, #fff); color: var(--call-text, #1b365b); box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .24); text-align: center; }
.vmesta-call-rejoin-icon { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 1rem; background: var(--call-accent, #347cf2); color: var(--theme-text-inverse, #fff); }
.vmesta-call-rejoin-icon svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.vmesta-call-rejoin-card strong { font-size: 1rem; font-weight: 850; }
.vmesta-call-rejoin-card p { margin: 0; color: var(--call-muted, #627895); font-size: .78rem; line-height: 1.5; }
.vmesta-call-rejoin-card > div { display: flex; width: 100%; gap: .55rem; margin-top: .25rem; }
.vmesta-call-rejoin-card button { flex: 1; min-height: 2.6rem; border: 0; border-radius: .72rem; background: var(--call-control, #e6efff); color: var(--call-text, #1b365b); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 800; }
.vmesta-call-rejoin-card button:last-child { background: var(--call-accent, #347cf2); color: var(--theme-text-inverse, #fff); }

.vmesta-call-actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    flex: 0 0 auto;
    gap: .22rem;
    margin: .15rem 0 2.15rem;
    padding: .42rem .5rem;
    border: 1px solid color-mix(in srgb, var(--call-accent) 24%, var(--call-line));
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--call-surface-soft) 84%, var(--call-accent) 16%);
    box-shadow: 0 .7rem 1.9rem color-mix(in srgb, var(--call-accent) 10%, transparent), inset 0 1px color-mix(in srgb, var(--call-text) 8%, transparent);
}

.vmesta-call-actions > button,
.vmesta-call-action-split > button:first-child {
    display: flex;
    width: 4.4rem;
    flex-direction: column;
    align-items: center;
    gap: .42rem;
    padding: .34rem .22rem .42rem;
    border: 0;
    border-radius: 1.2rem;
    background: transparent;
    box-shadow: none;
    color: var(--call-text);
    cursor: pointer;
    font: inherit;
    font-size: .61rem;
    font-weight: 850;
}

.vmesta-call-actions > button > svg,
.vmesta-call-action-split > button:first-child > svg {
    width: 3.05rem;
    height: 3.05rem;
    padding: .84rem;
    border-radius: 50%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform .2s ease, filter .2s ease, background .2s ease;
}

.vmesta-call-actions > button:hover > svg,
.vmesta-call-action-split > button:first-child:hover > svg {
    transform: translateY(-.18rem) scale(1.04);
    filter: brightness(1.06);
}

.vmesta-call-actions .is-accept > svg {
    background: color-mix(in srgb, var(--call-success) 82%, var(--call-accent) 18%);
    color: #fff;
    box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--call-success) 34%, transparent);
}

.vmesta-call-actions .is-decline > svg {
    background: color-mix(in srgb, var(--call-danger) 82%, var(--call-accent) 18%);
    color: #fff;
    box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--call-danger) 32%, transparent);
}

.vmesta-call-actions > .is-accept > svg,
.vmesta-call-actions > .is-decline > svg {
    width: 3.05rem;
    height: 3.05rem;
    padding: .76rem;
}

.vmesta-call-actions .is-mute > svg {
    background: color-mix(in srgb, var(--call-control) 80%, var(--call-accent) 20%);
    color: var(--call-accent);
}

.vmesta-call-actions .is-mute.is-active > svg {
    background: color-mix(in srgb, var(--call-warning) 76%, var(--call-accent) 24%);
    color: #fff;
}

.vmesta-call-actions .is-mixer > svg {
    background: color-mix(in srgb, var(--call-control) 80%, var(--call-accent) 20%);
    color: var(--call-accent);
}

.vmesta-call-actions .is-mixer.is-active > svg {
    background: var(--call-accent);
    color: #fff;
}
.vmesta-call-actions .is-camera > svg { background: color-mix(in srgb, var(--call-control) 80%, var(--call-accent) 20%); color: var(--call-accent); }
.vmesta-call-actions .is-camera.is-active > svg { background: var(--call-accent); color: #fff; }
.vmesta-call-actions .is-camera:disabled { cursor: not-allowed; opacity: .55; }

.vmesta-call-action-split {
    position: relative;
    display: flex;
    width: 4.4rem;
    justify-content: center;
}

.vmesta-call-action-split > button:first-child { width: 4.4rem; }
.vmesta-call-device-toggle,
.vmesta-call-mixer-toggle {
    position: absolute;
    top: -.22rem;
    right: -.08rem;
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: .14rem solid var(--call-surface);
    border-radius: 50%;
    background: var(--call-control);
    color: var(--call-text);
    cursor: pointer;
}
.vmesta-call-device-toggle:hover,
.vmesta-call-device-toggle.is-active,
.vmesta-call-mixer-toggle:hover,
.vmesta-call-mixer-toggle.is-active { background: var(--call-accent); color: var(--theme-text-inverse, #fff); }
.vmesta-call-device-toggle svg,
.vmesta-call-mixer-toggle svg { width: .72rem; height: .72rem; fill: none; stroke: currentColor; stroke-width: 2.2; }

.vmesta-call-device-menu {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + .9rem);
    left: 50%;
    display: grid;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(25rem, 58vh);
    gap: .65rem;
    overflow: auto;
    padding: .8rem;
    border: 1px solid var(--call-line);
    border-radius: 1rem;
    background: var(--call-surface);
    color: var(--call-text);
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .24), inset 0 1px color-mix(in srgb, var(--call-text) 8%, transparent);
    scrollbar-width: none;
    overscroll-behavior: contain;
    transform: translateX(-50%);
}
.vmesta-call-device-menu::-webkit-scrollbar { display: none; }
.vmesta-call-device-menu section { display: grid; gap: .25rem; }
.vmesta-call-device-menu section + section { padding-top: .6rem; border-top: 1px solid var(--call-line); }
.vmesta-call-device-menu section > strong { padding: .2rem .35rem; color: var(--call-accent); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.vmesta-call-device-menu section > small { padding: .45rem .35rem; color: var(--call-muted); font-size: .59rem; line-height: 1.45; }
.vmesta-call-device-menu section > button {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .58rem .62rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: var(--call-text);
    text-align: left;
    cursor: pointer;
}
.vmesta-call-device-menu section > button:hover { background: var(--call-control); }
.vmesta-call-device-menu section > button > i { width: .85rem; height: .85rem; border: .12rem solid var(--call-muted); border-radius: 50%; background: transparent; }
.vmesta-call-device-menu section > button.is-selected { background: color-mix(in srgb, var(--call-accent) 10%, var(--call-surface)); color: var(--call-text); }
.vmesta-call-device-menu section > button.is-selected > i { border-color: var(--call-accent); background: radial-gradient(circle, var(--call-accent) 0 38%, transparent 42%); }
.vmesta-call-device-menu section > button > span { overflow: hidden; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.vmesta-call-phone-svg,
.vmesta-call-material-svg { fill: currentColor !important; stroke: none !important; }
.vmesta-call-phone-svg path,
.vmesta-call-material-svg path { fill: currentColor !important; stroke: none !important; }
.vmesta-call-layer.is-incoming .vmesta-call-phone-svg.is-answer .phone { animation: vmesta-call-phone-ring .72s ease-in-out infinite; transform-origin: 50% 55%; }
.vmesta-call-phone-svg.is-hangup .phone { transform-origin: 50% 65%; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.vmesta-call-actions .is-decline:hover .vmesta-call-phone-svg.is-hangup .phone { transform: translateY(.12rem) rotate(6deg); }

.vmesta-call-output-modes { display: grid; gap: .38rem; padding-top: .7rem; border-top: 1px solid var(--call-line); }
.vmesta-call-output-modes > strong,
.vmesta-call-mixer-output > strong { color: var(--call-accent); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vmesta-call-output-modes > div { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.vmesta-call-volume-menu .vmesta-call-output-modes > div > button { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: .38rem; padding: .72rem .5rem; border: 1px solid var(--call-line); border-radius: .75rem; background: var(--call-control); color: var(--call-secondary); cursor: pointer; }
.vmesta-call-volume-menu .vmesta-call-output-modes > div > button:hover { background: var(--call-active); color: var(--call-text); }
.vmesta-call-volume-menu .vmesta-call-output-modes > div > button.is-selected { border-color: color-mix(in srgb, var(--call-accent) 62%, var(--call-line)); background: color-mix(in srgb, var(--call-accent) 16%, var(--call-surface)); color: var(--call-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--call-accent) 18%, transparent); }
.vmesta-call-volume-menu .vmesta-call-output-modes > div > button:disabled { cursor: default; opacity: .45; }
.vmesta-call-output-modes button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.vmesta-call-output-modes button span { max-width: 100%; overflow: hidden; font-size: .61rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.vmesta-call-volume-menu {
    position: absolute;
    z-index: 6;
    bottom: calc(100% + .9rem);
    left: 50%;
    display: grid;
    width: min(21rem, calc(100vw - 2rem));
    max-height: min(28rem, 62vh);
    gap: .8rem;
    overflow: auto;
    padding: .9rem;
    border: 1px solid var(--call-line);
    border-radius: 1rem;
    background: var(--call-surface);
    color: var(--call-text);
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .24), inset 0 1px color-mix(in srgb, var(--call-text) 8%, transparent);
    transform: translateX(-50%);
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.vmesta-call-volume-menu::-webkit-scrollbar { width: 0; height: 0; }
.vmesta-call-volume-menu::-webkit-scrollbar-button { display: none; }
.vmesta-call-volume-menu header { display: flex; align-items: center; gap: .65rem; padding-bottom: .15rem; }
.vmesta-call-volume-menu header > svg { width: 1.55rem; height: 1.55rem; padding: .32rem; border-radius: .5rem; background: color-mix(in srgb, var(--call-accent) 14%, transparent); color: var(--call-accent); }
.vmesta-call-volume-menu header > span { display: grid; gap: .06rem; text-align: left; }
.vmesta-call-volume-menu header strong { font-size: .72rem; }
.vmesta-call-volume-menu header small { color: var(--call-muted); font-size: .55rem; }
.vmesta-call-volume-sliders { display: grid; gap: .8rem; padding: .72rem; border: 1px solid var(--call-line); border-radius: .82rem; background: var(--call-surface-soft); }
.vmesta-call-volume-menu label { display: grid; gap: .42rem; }
.vmesta-call-volume-menu label > span { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.vmesta-call-volume-menu label b { min-width: 0; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-volume-label { display: flex; align-items: center; gap: .38rem; }
.vmesta-call-volume-label > svg { width: .88rem; height: .88rem; flex: 0 0 auto; color: var(--call-accent); fill: currentColor; }
.vmesta-call-volume-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-volume-menu output { color: var(--call-accent); font-size: .58rem; font-weight: 850; }
.vmesta-call-volume-menu input[type="range"] { width: calc(100% - .7rem); height: .32rem; margin-inline: .35rem; appearance: none; border-radius: 999px; outline: 0; background: linear-gradient(90deg, var(--call-accent) var(--call-volume), var(--call-control) var(--call-volume)); cursor: pointer; }
.vmesta-call-volume-menu input[type="range"]::-webkit-slider-thumb { width: 1rem; height: 1rem; appearance: none; border: .18rem solid var(--call-surface); border-radius: 50%; background: var(--call-accent); box-shadow: 0 .18rem .55rem rgb(0 0 0 / .22); }
.vmesta-call-volume-menu input[type="range"]::-moz-range-thumb { width: .7rem; height: .7rem; border: .18rem solid var(--call-surface); border-radius: 50%; background: var(--call-accent); box-shadow: 0 .18rem .55rem rgb(0 0 0 / .22); }
.vmesta-call-noise-section { display: grid; gap: .5rem; padding: .72rem; border: 1px solid var(--call-line); border-radius: .82rem; background: var(--call-surface-soft); }
.vmesta-call-noise-section > strong { color: var(--call-accent); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vmesta-call-noise-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.vmesta-call-noise-section button { min-width: 0; min-height: 2.15rem; padding: .38rem .3rem; border: 1px solid var(--call-line); border-radius: .58rem; background: var(--call-control); color: var(--call-secondary); cursor: pointer; font: inherit; font-size: .55rem; font-weight: 850; }
.vmesta-call-noise-section button:hover:not(:disabled) { background: var(--call-active); color: var(--call-text); }
.vmesta-call-noise-section button.is-selected { border-color: color-mix(in srgb, var(--call-accent) 65%, var(--call-line)); background: color-mix(in srgb, var(--call-accent) 17%, var(--call-surface)); color: var(--call-accent); }
.vmesta-call-noise-section button:disabled { cursor: default; opacity: .5; }
.vmesta-call-noise-section > small { color: var(--call-muted); font-size: .53rem; line-height: 1.4; }
.vmesta-call-noise-section .vmesta-call-noise-test { width: 100%; min-height: 2rem; border-color: var(--call-line); background: var(--call-control); color: var(--call-text); font-size: .58rem; }
.vmesta-call-noise-section .vmesta-call-noise-test:disabled { opacity: .7; }
.vmesta-call-noise-section audio { display: block; width: 100%; height: 2rem; }
.vmesta-call-mic-sensitivity { padding-top: .72rem; border-top: 1px solid var(--call-line); }
.vmesta-call-mic-sensitivity > small { color: var(--call-muted); font-size: .52rem; line-height: 1.35; }
.vmesta-call-mic-sensitivity input:disabled { cursor: default; opacity: .5; }
.vmesta-call-mixer-output { display: grid; gap: .4rem; padding: .72rem; border: 1px solid var(--call-line); border-radius: .82rem; background: var(--call-surface-soft); }
.vmesta-call-output-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .58rem; border: 0; border-radius: .7rem; background: var(--call-control); color: var(--call-text); text-align: left; cursor: pointer; }
.vmesta-call-output-toggle:hover { background: var(--call-active); }
.vmesta-call-output-toggle:disabled { cursor: default; opacity: .7; }
.vmesta-call-output-toggle > svg { width: .85rem; height: .85rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
.vmesta-call-output-title { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.vmesta-call-output-title > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--call-accent); fill: currentColor; }
.vmesta-call-output-title > span { display: grid; min-width: 0; gap: .1rem; }
.vmesta-call-output-title strong { font-size: .62rem; }
.vmesta-call-output-title small { overflow: hidden; color: var(--call-muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-output-list { display: grid; gap: .12rem; overflow: visible; }
.vmesta-call-output-list > button { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .56rem .6rem; border: 0; border-radius: .68rem; background: transparent; color: var(--call-text); text-align: left; cursor: pointer; }
.vmesta-call-output-list > button:hover { background: var(--call-control); }
.vmesta-call-output-list > button > i { width: .82rem; height: .82rem; border: .12rem solid var(--call-muted); border-radius: 50%; background: transparent; }
.vmesta-call-output-list > button.is-selected { background: color-mix(in srgb, var(--call-accent) 10%, var(--call-surface)); }
.vmesta-call-output-list > button.is-selected > i { border-color: var(--call-accent); background: radial-gradient(circle, var(--call-accent) 0 38%, transparent 42%); }
.vmesta-call-output-list > button > span { overflow: hidden; font-size: .65rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-output-list > button > svg { width: 1rem; height: 1rem; fill: currentColor; }
.vmesta-call-mixer-output > small { padding: .35rem .1rem 0; color: var(--call-muted); font-size: .56rem; line-height: 1.4; }

.vmesta-call-note {
    position: absolute;
    right: 1rem;
    bottom: .65rem;
    left: 1rem;
    color: color-mix(in srgb, var(--call-muted) 72%, transparent);
    font-size: .56rem;
    font-weight: 700;
    text-align: center;
}

.vmesta-call-security {
    display: flex;
    width: min(22rem, 100%);
    flex-direction: column;
    align-items: center;
    gap: .42rem;
    margin-top: .2rem;
    padding: .62rem .85rem;
    border: 1px solid color-mix(in srgb, var(--call-accent) 28%, var(--call-line));
    border-radius: .9rem;
    background: color-mix(in srgb, var(--call-accent) 10%, var(--call-surface));
}

.vmesta-call-security > span {
    color: color-mix(in srgb, var(--call-accent) 72%, var(--call-text));
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vmesta-call-security > div {
    display: flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: .42rem;
}

.vmesta-call-security b,
.vmesta-call-security i {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: .6rem;
}

.vmesta-call-security b {
    background: color-mix(in srgb, var(--fingerprint-color) 24%, rgb(255 255 255 / .04));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fingerprint-color) 58%, transparent);
    font-size: 1.05rem;
}

.vmesta-call-security i {
    background: color-mix(in srgb, var(--call-accent) 10%, var(--call-surface-soft));
    animation: vmesta-call-key-loading 1.2s ease-in-out infinite alternate;
}

.vmesta-call-security i:nth-child(2) { animation-delay: .12s; }
.vmesta-call-security i:nth-child(3) { animation-delay: .24s; }
.vmesta-call-security i:nth-child(4) { animation-delay: .36s; }
.vmesta-call-security i:nth-child(5) { animation-delay: .48s; }

.vmesta-call-security small {
    color: var(--call-muted);
    font-size: .57rem;
    font-weight: 700;
}

.vmesta-call-layer.is-ended .vmesta-call-avatar-wrap > i,
.vmesta-call-layer.is-active .vmesta-call-avatar-wrap > i {
    animation-duration: 3.6s;
}

/* Во время краткого сетевого обрыва окно остаётся на месте, а статус и
   кольцо аватара показывают автоматическое восстановление соединения. */
.vmesta-call-layer.is-reconnecting #vmesta-call-status {
    color: var(--call-warning);
    font-weight: 850;
}

.vmesta-call-layer.is-reconnecting .vmesta-call-avatar-wrap::after {
    border-color: color-mix(in srgb, var(--call-warning) 72%, transparent);
    animation: vmesta-call-reconnect-ring 1.15s ease-in-out infinite;
}

.vmesta-call-layer.view-compact {
    place-items: start center;
    padding: 4.35rem .5rem .5rem;
    pointer-events: none;
}
.vmesta-call-layer.view-compact .vmesta-call-backdrop { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-card {
    width: min(34rem, calc(100vw - 1rem));
    height: 4.25rem;
    min-height: 0;
    flex-direction: row;
    overflow: visible;
    padding: .38rem .45rem;
    border-radius: .92rem;
    pointer-events: auto;
    animation: none;
}
.vmesta-call-layer.view-compact .vmesta-call-card::before { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-topbar {
    order: 3;
    width: 4.05rem;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.vmesta-call-layer.view-compact .vmesta-call-topbar > :not(div) { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-topbar-actions { gap: .2rem; }
.vmesta-call-layer.view-compact .vmesta-call-more-menu { top: calc(100% + .8rem); }
.vmesta-call-layer.view-compact .vmesta-call-more-menu.is-compact-controls { width: min(15.5rem, calc(100vw - 1rem)); gap: .12rem; }
.vmesta-call-layer.view-compact .vmesta-call-more-menu.is-compact-controls > strong { padding: .35rem .58rem .4rem; color: var(--call-muted); font-size: .57rem; letter-spacing: .07em; text-transform: uppercase; }
.vmesta-call-layer.view-compact .vmesta-call-stage {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    order: 1;
    grid-template-columns: 2.85rem minmax(0, 1fr) 1.85rem;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: start;
    padding: 0 .35rem 0 0;
}
.vmesta-call-layer.view-compact .vmesta-call-avatar-wrap { width: 2.62rem; height: 2.62rem; grid-row: 1 / 3; margin: 0; }
.vmesta-call-layer.view-compact .vmesta-call-avatar-wrap > i { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-avatar-wrap::before { inset: -.65rem; filter: blur(calc(.48rem + var(--call-voice-level) * .8rem)) saturate(1.3); }
.vmesta-call-layer.view-compact .vmesta-call-avatar-wrap::after { inset: -.18rem; border-width: .1rem; }
.vmesta-call-layer.view-compact .vmesta-call-avatar-wrap > img { width: 2.32rem; height: 2.32rem; border-width: .1rem; box-shadow: none; }
.vmesta-call-layer.view-compact .vmesta-call-stage h2 { width: 100%; align-self: end; font-size: .7rem; text-align: left; }
.vmesta-call-layer.view-compact .vmesta-call-stage > p { min-height: 0; align-self: start; margin: .08rem 0 0; font-size: .56rem; }
.vmesta-call-layer.view-compact .vmesta-call-local-indicator { display: grid; grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; border: 0; background: transparent; }
.vmesta-call-layer.view-compact .vmesta-call-local-indicator > span:last-child { display: none; }
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-stage { grid-template-columns: 8.1rem minmax(0, 1fr); column-gap: .45rem; }
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-avatar-wrap,
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-local-indicator { display: none; }
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-stage h2 { min-width: 0; overflow: hidden; grid-column: 2; grid-row: 1; text-overflow: ellipsis; white-space: nowrap; }
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-stage > p { grid-column: 2; grid-row: 2; }
.vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-compact-members { display: flex; grid-column: 1; grid-row: 1 / 3; align-items: center; gap: .15rem; }
.vmesta-call-compact-avatar,
.vmesta-call-compact-empty { position: relative; isolation: isolate; display: grid; width: 1.86rem; height: 1.86rem; flex: 0 0 auto; place-items: center; padding: .1rem; border: 0; border-radius: 50%; background: var(--call-control); }
.vmesta-call-compact-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vmesta-call-compact-avatar::before { content: ''; position: absolute; z-index: -1; inset: -.24rem; border-radius: 50%; background: conic-gradient(#4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); filter: blur(.4rem); opacity: 0; pointer-events: none; }
.vmesta-call-compact-avatar.is-speaking { background: conic-gradient(#4ce8ac, #38c9e9, #718dff, #b47afb, #54ddbb, #4ce8ac); }
.vmesta-call-compact-avatar.is-speaking::before { opacity: calc(.5 + var(--call-voice-level, 0) * .35); animation: vmesta-call-aurora 3.2s ease-in-out infinite alternate; }
.vmesta-call-compact-avatar.is-invited,
.vmesta-call-compact-avatar.is-reconnecting { opacity: .65; }
.vmesta-call-compact-empty { border: 1px dashed var(--call-line); background: transparent; color: var(--call-muted); cursor: pointer; }
.vmesta-call-compact-empty:hover:not(:disabled) { border-color: var(--call-accent); color: var(--call-accent); background: var(--call-active); }
.vmesta-call-compact-empty:disabled { cursor: default; opacity: .5; }
.vmesta-call-compact-empty svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.vmesta-call-layer.view-compact .vmesta-call-security,
.vmesta-call-layer.view-compact .vmesta-call-note { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-actions { min-height: 0; order: 2; gap: .18rem; margin: 0; padding: 0 .12rem; align-items: center; border: 0; background: transparent; box-shadow: none; }
.vmesta-call-layer.view-compact .vmesta-call-actions:empty { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-actions > button,
.vmesta-call-layer.view-compact .vmesta-call-action-split,
.vmesta-call-layer.view-compact .vmesta-call-action-split > button:first-child { width: 1.88rem; }
.vmesta-call-layer.view-compact .vmesta-call-actions > button > span,
.vmesta-call-layer.view-compact .vmesta-call-action-split > button:first-child > span { display: none; }
.vmesta-call-layer.view-compact .vmesta-call-actions > button > svg,
.vmesta-call-layer.view-compact .vmesta-call-action-split > button:first-child > svg { width: 1.7rem; height: 1.7rem; padding: .46rem; }
.vmesta-call-layer.view-compact .vmesta-call-actions > .is-accept > svg,
.vmesta-call-layer.view-compact .vmesta-call-actions > .is-decline > svg { width: 1.7rem; height: 1.7rem; padding: .4rem; }
.vmesta-call-layer.view-compact .vmesta-call-device-toggle,
.vmesta-call-layer.view-compact .vmesta-call-mixer-toggle { top: -.24rem; right: -.16rem; width: .82rem; height: .82rem; border-width: .09rem; }
.vmesta-call-layer.view-compact .vmesta-call-device-menu { top: calc(100% + .85rem); bottom: auto; left: auto; right: -4rem; transform: none; }
.vmesta-call-layer.view-compact .vmesta-call-volume-menu { top: calc(100% + .85rem); bottom: auto; left: auto; right: -4rem; transform: none; }
.vmesta-call-layer.view-compact .vmesta-call-topbar button { width: 1.9rem; height: 1.9rem; border-radius: .58rem; }
.vmesta-call-layer.view-compact .vmesta-call-more-menu > button,
.vmesta-call-layer.view-compact .vmesta-call-camera-devices button { width: 100%; height: auto; min-height: 2.2rem; }
.vmesta-call-layer.view-compact .vmesta-call-compact-popover-slot { position: absolute; z-index: 14; top: calc(100% + .55rem); right: 0; }
.vmesta-call-layer.view-compact .vmesta-call-compact-popover-slot .vmesta-call-volume-menu { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: min(21rem, calc(100vw - 1rem)); max-height: min(28rem, 68vh); transform: none; }
@media (prefers-reduced-motion: reduce) { .vmesta-call-compact-avatar.is-speaking::before { animation: none; } }
.vmesta-call-layer.is-ended .vmesta-call-card { width: min(24rem, calc(100vw - 1rem)); height: auto; min-height: 0; overflow: hidden; }
.vmesta-call-layer.is-ended .vmesta-call-topbar { height: 3.6rem; }
.vmesta-call-layer.is-ended .vmesta-call-more-toggle,
.vmesta-call-layer.is-ended .vmesta-call-view-toggle,
.vmesta-call-layer.is-ended .vmesta-call-compact-members,
.vmesta-call-layer.is-ended .vmesta-call-avatar-wrap,
.vmesta-call-layer.is-ended .vmesta-call-local-indicator,
.vmesta-call-layer.is-ended .vmesta-call-security-slot,
.vmesta-call-layer.is-ended .vmesta-call-room-members,
.vmesta-call-layer.is-ended .vmesta-call-video-wall,
.vmesta-call-layer.is-ended .vmesta-call-actions,
.vmesta-call-layer.is-ended .vmesta-call-note { display: none; }
.vmesta-call-layer.is-ended .vmesta-call-stage { display: flex; flex: 0 0 auto; width: 100%; min-height: 0; align-items: center; justify-content: center; padding: 1.8rem 1rem 1.95rem; }
.vmesta-call-layer.is-ended .vmesta-call-stage h2 { width: 100%; font-size: 1.15rem; }
.vmesta-call-layer.is-ended .vmesta-call-stage > p { margin: .45rem 0 0; font-size: .72rem; }
.vmesta-call-hangup-scene { display: none; }
.vmesta-call-layer.is-ended .vmesta-call-hangup-scene { position: relative; display: block; width: 8.8rem; height: 5.4rem; margin: .1rem auto .6rem; }
.vmesta-call-hangup-scene svg { position: absolute; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vmesta-call-hangup-handset { z-index: 1; top: -.3rem; left: 1.35rem; width: 6.1rem; height: 4.1rem; color: var(--vmesta-ui-primary, #ed5c92); stroke-width: 6; filter: drop-shadow(0 .45rem .6rem rgba(0,0,0,.22)); transform-origin: 76% 76%; animation: vmesta-handset-settle 1.15s cubic-bezier(.2,.8,.3,1) both; }
.vmesta-call-hangup-cradle { bottom: 0; left: .15rem; width: 8.5rem; height: 2.5rem; color: var(--vmesta-ui-ink, #dbe6f4); stroke-width: 5; opacity: .78; }
@keyframes vmesta-handset-settle { 0% { transform: translate(1.8rem,-3.1rem) rotate(-38deg); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(-.18rem,.2rem) rotate(5deg); } 85% { transform: translate(.06rem,-.12rem) rotate(-2deg); } 100% { transform: translate(0,0) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vmesta-call-hangup-handset { animation: none; } }

audio[data-vmesta-call-audio] {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@keyframes vmesta-call-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vmesta-call-card-in {
    from { opacity: 0; transform: translateY(1rem) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vmesta-call-pulse {
    0% { opacity: .7; transform: scale(.78); }
    75%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes vmesta-call-reconnect-ring {
    0%, 100% { opacity: .52; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes vmesta-call-key-loading {
    from { opacity: .35; transform: translateY(0); }
    to { opacity: .9; transform: translateY(-.12rem); }
}

@keyframes vmesta-call-phone-ring {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(6deg); }
}

@keyframes vmesta-call-phone-signal {
    0% { opacity: 0; stroke-dashoffset: 24; transform: scale(.84); transform-origin: 40px 24px; }
    32% { opacity: 1; }
    82%, 100% { opacity: 0; stroke-dashoffset: 0; transform: scale(1.08); transform-origin: 40px 24px; }
}

@keyframes vmesta-call-compact-in {
    from { opacity: 0; transform: translateY(-.8rem) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------[Карточки звонков в личной переписке]------------ // Показывает исход, направление и длительность сохранённого звонка. Модуль: «оформление интерфейса». Часть 1/1 */
.messenger-call-history { width: 100%; margin-block: .18rem; }
.messenger-call-history.is-outgoing { justify-content: flex-end; }
.messenger-call-history-card {
    --message-shape-fill: var(--msg-bubble-in, var(--msg-menu-soft));
    position: relative;
    display: grid;
    width: min(15.5rem, 72%);
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .48rem;
    padding: .43rem .52rem;
    border: 0;
    border-radius: .76rem;
    background: var(--message-shape-fill);
    color: var(--msg-text);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.messenger-call-history.is-outgoing .messenger-call-history-card { --message-shape-fill: var(--msg-bubble-out, var(--msg-menu-active)); background: var(--message-shape-fill); }
.messenger-call-history.has-tail.is-outgoing .messenger-call-history-card { border-bottom-right-radius: .34rem; }
.messenger-call-history.has-tail.is-incoming .messenger-call-history-card { border-bottom-left-radius: .34rem; }
.messenger-call-history-icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .62rem; background: color-mix(in srgb, var(--msg-accent) 12%, transparent); color: var(--msg-accent); }
.messenger-call-history-icon svg { width: 1.28rem; height: 1.28rem; overflow: visible; fill: currentColor; stroke: none; }
.messenger-call-history-icon path { fill: currentColor; stroke: none; }
.messenger-call-history-card.is-declined .messenger-call-history-icon,
.messenger-call-history-card.is-missed .messenger-call-history-icon { background: color-mix(in srgb, var(--msg-accent) 8%, transparent); color: #ef6570; }
.messenger-call-history-card > span:nth-child(2) { display: grid; min-width: 0; gap: .16rem; }
.messenger-call-history-card strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.messenger-call-history-card small { color: var(--msg-muted); font-size: .53rem; line-height: 1.3; }
.messenger-call-history-card time { align-self: end; color: var(--msg-muted); font-size: .46rem; }
html:root body .messenger-call-history .messenger-call-history-card > .messenger-bubble-tail { color: var(--message-shape-fill) !important; fill: currentColor !important; }
html:root body .messenger-call-history .messenger-call-history-card > .messenger-bubble-tail-fill { fill: currentColor !important; }

.messenger-settings-section-title { margin-top: .18rem; padding-top: .55rem; border-top: 1px solid var(--msg-line); }
.messenger-media-settings > .messenger-call-view-setting { align-items: end; }
.messenger-call-view-setting select {
    min-width: 8.8rem;
    padding: .45rem .55rem;
    border: 0;
    border-radius: .58rem;
    outline: 0;
    background: var(--msg-menu-soft);
    color: var(--msg-text);
    font: inherit;
    font-size: .58rem;
    font-weight: 800;
}
.messenger-header-media-settings .messenger-media-settings { width: min(24rem, 88vw); }

@media (max-width: 760px) {
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-stage { grid-template-columns: 2.55rem minmax(0, 1fr); grid-template-rows: 2.9rem minmax(0, 1fr); gap: .45rem .6rem; padding: .65rem .75rem .55rem; }
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap { width: 2.45rem; height: 2.45rem; }
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-avatar-wrap > img { width: 2.3rem; height: 2.3rem; }
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-stage h2 { font-size: .87rem; }
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-video-wall { grid-column: 1 / -1; grid-row: 2; }
    .vmesta-call-layer.is-group.has-video:not(.view-compact) .vmesta-call-room-members { bottom: 1.1rem; left: 1.1rem; }
}

@media (max-width: 560px) {
    .vmesta-call-layer.has-video:not(.view-compact) .vmesta-call-security-slot { top: auto; right: auto; bottom: 1rem; left: 1rem; }
    .vmesta-call-layer { padding: 0; }
    .vmesta-call-card {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .vmesta-call-layer.view-compact { padding: .55rem; }
    .vmesta-call-layer.view-compact .vmesta-call-card { width: calc(100vw - 1rem); height: 4.2rem; min-height: 0; border: 1px solid rgb(255 255 255 / .1); border-radius: .9rem; }
    .vmesta-call-layer.view-compact .vmesta-call-stage { grid-template-columns: 2.8rem minmax(0, 1fr); }
    .vmesta-call-layer.view-compact .vmesta-call-avatar-wrap { width: 2.55rem; height: 2.55rem; }
    .vmesta-call-layer.view-compact .vmesta-call-avatar-wrap > img { width: 2.25rem; height: 2.25rem; }
    .vmesta-call-layer.view-compact .vmesta-call-device-menu { position: fixed; top: 5.6rem; right: .55rem; left: .55rem; width: auto; }
    .vmesta-call-layer.view-compact .vmesta-call-volume-menu { position: fixed; top: 5.6rem; right: .55rem; left: .55rem; width: auto; }
    .vmesta-call-layer:not(.view-compact) .vmesta-call-actions { max-width: calc(100vw - 1rem); flex-wrap: wrap; margin-bottom: 1.3rem; }
    .messenger-call-history-card { width: min(15.5rem, 88%); }
}

@media (max-width: 380px) {
    .vmesta-call-layer.view-compact.has-participant-grid .vmesta-call-stage { grid-template-columns: 7rem minmax(0, 1fr); column-gap: .25rem; }
    .vmesta-call-layer.view-compact .vmesta-call-compact-avatar,
    .vmesta-call-layer.view-compact .vmesta-call-compact-empty { width: 1.6rem; height: 1.6rem; }
    .vmesta-call-layer.view-compact .vmesta-call-stage h2 { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vmesta-call-backdrop,
    .vmesta-call-card,
    .vmesta-call-avatar-wrap > i,
    .vmesta-call-security i,
    .vmesta-call-phone-svg .phone { animation: none !important; }
}

/* ------------[Стабильная полоса пространства при загрузке]------------ //
   На маршруте конкретного пространства профильные вкладки заменяются
   пространственными. Скрываем их содержимое, но сохраняем геометрию строки,
   чтобы две асинхронные подмены не сдвигали всю страницу. Модуль: «оформление интерфейса». Часть 1/1 */
html.vmesta-space-detail-loading body #profile-tabs-container,
html:root body #profile-tabs-container.is-route-pending {
    min-height: 3.5rem;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ------------[Галактический видеоплеер VMESTA]------------ // Собственный тематический плеер для роликов из публикаций и видеотеки. Модуль: «оформление интерфейса». Часть 1/1 */
html:root body #media-viewer-stage:has(.galaxy-video-player:not(.hidden)) {
    cursor: default !important;
    touch-action: manipulation;
}
html:root body .galaxy-video-player {
    --galaxy-accent: var(--theme-accent, var(--color-dynamic, #2dd4bf));
    --galaxy-progress: 0%;
    --galaxy-buffered: 0%;
    --galaxy-volume: 100%;
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(100%, calc((100dvh - 11rem) * 1.7778));
    max-width: 76rem;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 48%, rgb(255 255 255 / .15));
    border-radius: clamp(1rem, 2vw, 1.6rem);
    background:
        radial-gradient(circle at 19% 24%, color-mix(in srgb, var(--galaxy-accent) 34%, transparent), transparent 28%),
        radial-gradient(circle at 82% 68%, color-mix(in srgb, var(--galaxy-accent) 24%, #7c3aed 18%), transparent 32%),
        linear-gradient(145deg, #050816, #080d20 58%, #040711);
    box-shadow: 0 2rem 6rem rgb(0 0 0 / .5), inset 0 0 4rem color-mix(in srgb, var(--galaxy-accent) 8%, transparent);
}
html:root body .galaxy-video-player.hidden { display: none !important; }
html:root body .galaxy-video-player::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 55%, rgb(2 6 23 / .76));
    opacity: .8;
}
html:root body .galaxy-video-space {
    position: absolute;
    z-index: 0;
    inset: -16%;
    overflow: hidden;
    pointer-events: none;
    opacity: .95;
    transition: opacity .35s ease;
}
html:root body .galaxy-video-space::before,
html:root body .galaxy-video-space::after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 34%, transparent);
    border-radius: 50%;
    transform: rotate(-11deg);
    animation: galaxy-player-orbit 18s linear infinite;
}
html:root body .galaxy-video-space::after {
    inset: 26% 8%;
    border-style: dashed;
    opacity: .55;
    transform: rotate(17deg);
    animation-duration: 26s;
    animation-direction: reverse;
}
html:root body .galaxy-video-space > i {
    position: absolute;
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 .9rem .15rem var(--galaxy-accent);
    animation: galaxy-player-star 3.2s ease-in-out infinite;
}
html:root body .galaxy-video-space > i:nth-child(1) { top: 17%; left: 22%; }
html:root body .galaxy-video-space > i:nth-child(2) { top: 28%; right: 17%; animation-delay: -1.1s; }
html:root body .galaxy-video-space > i:nth-child(3) { right: 29%; bottom: 18%; animation-delay: -2.2s; }
html:root body .galaxy-video-space > span {
    position: absolute;
    width: 45%;
    aspect-ratio: 1;
    top: 16%;
    left: 28%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--galaxy-accent) 16%, transparent);
    filter: blur(3rem);
    animation: galaxy-player-nebula 8s ease-in-out infinite;
}
html:root body .galaxy-video-player.is-playing .galaxy-video-space { opacity: .35; }
html:root body #media-viewer-video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    background: transparent;
    cursor: pointer;
    filter: none !important;
}
html:root body .galaxy-video-transport {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: clamp(.65rem, 1.8vw, 1.35rem);
    transform: translate(-50%, -50%);
    transition: opacity .24s ease, transform .24s ease;
}
html:root body .galaxy-video-player.is-playing:not(:hover):not(:focus-within) .galaxy-video-transport { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.92); }
html:root body .galaxy-video-player.is-fast-seeking .galaxy-video-transport { opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, -50%) scale(1) !important; }
html:root body .galaxy-video-center-play {
    position: relative;
    z-index: 1;
    display: grid;
    width: clamp(3.25rem, 5.2vw, 4.15rem);
    height: clamp(3.25rem, 5.2vw, 4.15rem);
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 64%, #fff 36%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--galaxy-accent) 74%, rgb(8 13 32 / .88));
    color: #fff;
    box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--galaxy-accent) 12%, transparent), 0 .8rem 2rem rgb(0 0 0 / .42);
    transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease;
}
html:root body .galaxy-video-center-play::before {
    content: '';
    position: absolute;
    inset: -.48rem;
    border: 1px dashed color-mix(in srgb, var(--galaxy-accent) 60%, transparent);
    border-radius: 50%;
    animation: galaxy-player-orbit 9s linear infinite;
}
html:root body .galaxy-video-center-play:hover { transform: scale(1.05); box-shadow: 0 0 0 .46rem color-mix(in srgb, var(--galaxy-accent) 17%, transparent), 0 .9rem 2.3rem rgb(0 0 0 / .48); }
html:root body .galaxy-video-center-play svg {
    grid-area: 1 / 1;
    width: 42%;
    height: 42%;
    fill: currentColor;
    stroke: currentColor;
    transition: opacity .24s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}
html:root body .galaxy-video-center-play .galaxy-center-icon-play { margin-left: .18rem; opacity: 1; transform: rotate(0) scale(1); }
html:root body .galaxy-video-center-play .galaxy-center-icon-pause { fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: rotate(-45deg) scale(.55); }
html:root body .galaxy-video-player.is-playing .galaxy-center-icon-play { opacity: 0; transform: rotate(45deg) scale(.55); }
html:root body .galaxy-video-player.is-playing .galaxy-center-icon-pause { opacity: 1; transform: rotate(0) scale(1); }
html:root body .galaxy-video-switch {
    position: relative;
    display: grid;
    width: clamp(2.25rem, 3.7vw, 2.9rem);
    height: clamp(2.25rem, 3.7vw, 2.9rem);
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 50%, rgb(255 255 255 / .14));
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--galaxy-accent) 22%, transparent), transparent 46%),
        color-mix(in srgb, var(--galaxy-accent) 10%, rgb(5 8 22 / .82)) !important;
    color: var(--galaxy-accent) !important;
    box-shadow: inset 0 0 0 .18rem rgb(255 255 255 / .025), 0 .55rem 1.35rem rgb(0 0 0 / .3);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, color .2s ease;
}
html:root body .galaxy-video-switch.hidden { display: none !important; }
html:root body .galaxy-video-switch::before {
    content: '';
    position: absolute;
    inset: .24rem;
    border: 1px dashed color-mix(in srgb, var(--galaxy-accent) 38%, transparent);
    border-radius: 50%;
    opacity: .72;
    animation: galaxy-player-orbit 14s linear infinite;
}
html:root body .galaxy-video-switch svg { position: relative; z-index: 1; width: .95rem; height: .95rem; fill: currentColor; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
html:root body .galaxy-video-switch:hover:not(:disabled) { background: var(--galaxy-accent) !important; color: #fff !important; transform: scale(1.08); }
html:root body .galaxy-video-switch:active:not(:disabled) { transform: scale(.76); }
html:root body .galaxy-video-switch.is-pulsing:not(:disabled) { animation: galaxy-player-switch .32s cubic-bezier(.2, .85, .2, 1); }
html:root body .galaxy-video-switch:disabled,
html:root body .galaxy-video-switch.is-disabled { border-color: rgb(148 163 184 / .13) !important; background: rgb(15 23 42 / .32) !important; color: rgb(148 163 184 / .3) !important; cursor: not-allowed; opacity: .56; box-shadow: none; }
html:root body .galaxy-video-switch.is-seeking:not(:disabled) { background: var(--galaxy-accent) !important; color: #fff !important; transform: scale(.9); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--galaxy-accent) 18%, transparent); }
html:root body .galaxy-video-loader { display: none; width: 48%; height: 48%; border: .18rem solid rgb(255 255 255 / .28); border-top-color: #fff; border-radius: 50%; animation: galaxy-player-spin .8s linear infinite; }
html:root body .galaxy-video-player.is-buffering .galaxy-video-center-play { opacity: 1; pointer-events: none; transform: scale(.9); }
html:root body .galaxy-video-player.is-buffering .galaxy-video-center-play svg { display: none; }
html:root body .galaxy-video-player.is-buffering .galaxy-video-loader { display: block; }
html:root body .galaxy-video-seek-feedback {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    min-width: 4.4rem;
    place-items: center;
    gap: .05rem;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 58%, rgb(255 255 255 / .18));
    border-radius: 1.1rem;
    padding: .62rem .75rem;
    background: color-mix(in srgb, var(--galaxy-accent) 18%, rgb(5 8 22 / .78));
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.72);
    box-shadow: 0 .8rem 2rem rgb(0 0 0 / .32), 0 0 1.5rem color-mix(in srgb, var(--galaxy-accent) 22%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
html:root body .galaxy-video-seek-feedback.is-backward { left: 12%; }
html:root body .galaxy-video-seek-feedback.is-forward { right: 12%; }
html:root body .galaxy-video-seek-feedback.is-visible { animation: galaxy-player-seek .56s cubic-bezier(.2, .8, .2, 1); }
html:root body .galaxy-video-seek-feedback.is-visible.is-fast { opacity: 1; transform: translateY(-50%) scale(.9); animation: galaxy-player-fast-seek 1.05s ease-in-out infinite; }
html:root body .galaxy-video-seek-feedback b { font-size: .86rem; font-weight: 950; }
html:root body .galaxy-video-seek-feedback small { color: rgb(226 232 240 / .72); font-size: .48rem; font-weight: 800; text-transform: uppercase; }
html:root body .galaxy-video-controls {
    position: absolute;
    z-index: 5;
    right: clamp(.7rem, 2vw, 1.25rem);
    bottom: clamp(.7rem, 2vw, 1.25rem);
    left: clamp(.7rem, 2vw, 1.25rem);
    display: grid;
    grid-template-columns: 2.15rem auto minmax(4rem, 1fr) auto auto auto auto 2.15rem;
    align-items: center;
    gap: clamp(.35rem, 1vw, .7rem);
    min-height: 3.2rem;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 28%, rgb(255 255 255 / .12));
    border-radius: 1rem;
    padding: .48rem .58rem;
    background: color-mix(in srgb, var(--galaxy-accent) 8%, rgb(5 8 22 / .86));
    color: #f8fafc;
    box-shadow: 0 .9rem 2rem rgb(0 0 0 / .34);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity .25s ease, transform .25s ease;
}
html:root body .galaxy-video-player.is-playing:not(:hover):not(:focus-within) .galaxy-video-controls { opacity: .22; transform: translateY(.35rem); }
html:root body .galaxy-video-control,
html:root body .galaxy-video-speed,
html:root body .galaxy-video-quality-button {
    display: inline-grid;
    height: 2.15rem;
    min-width: 2.15rem;
    place-items: center;
    border: 0 !important;
    border-radius: .7rem;
    background: transparent !important;
    color: rgb(248 250 252 / .9) !important;
    box-shadow: none !important;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
html:root body .galaxy-video-control:hover,
html:root body .galaxy-video-speed:hover,
html:root body .galaxy-video-quality-button:hover { background: color-mix(in srgb, var(--galaxy-accent) 24%, transparent) !important; color: #fff !important; transform: translateY(-1px); }
html:root body #galaxy-video-fullscreen { color: var(--galaxy-accent) !important; }
html:root body #galaxy-video-fullscreen:hover { color: #fff !important; }
html:root body .galaxy-video-control svg { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:root body .galaxy-video-play-toggle svg { grid-area: 1 / 1; fill: currentColor; stroke: none; transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
html:root body .galaxy-video-play-toggle .galaxy-icon-play { opacity: 1; transform: rotate(0) scale(1); }
html:root body .galaxy-video-play-toggle .galaxy-icon-pause { fill: none !important; stroke: currentColor !important; stroke-width: 2.4 !important; stroke-linecap: round; opacity: 0; transform: rotate(-45deg) scale(.55); }
html:root body .galaxy-video-play-toggle .galaxy-icon-play { fill: currentColor !important; stroke: none !important; }
html:root body .galaxy-video-player.is-playing .galaxy-video-play-toggle .galaxy-icon-play { opacity: 0; transform: rotate(45deg) scale(.55); }
html:root body .galaxy-video-player.is-playing .galaxy-video-play-toggle .galaxy-icon-pause { opacity: 1; transform: rotate(0) scale(1); }
html:root body .galaxy-video-player .galaxy-icon-muted,
html:root body .galaxy-video-player.is-muted .galaxy-icon-volume { display: none; }
html:root body .galaxy-video-player.is-muted .galaxy-icon-muted { display: block; }
html:root body .galaxy-video-controls time { min-width: 2.4rem; color: rgb(226 232 240 / .82); font-size: .62rem; font-weight: 850; font-variant-numeric: tabular-nums; text-align: center; }
html:root body .galaxy-video-progress,
html:root body .galaxy-video-volume-group input {
    height: .28rem;
    border: 0;
    border-radius: 999px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right,
        var(--galaxy-accent) 0 var(--galaxy-progress),
        color-mix(in srgb, var(--galaxy-accent) 42%, transparent) var(--galaxy-progress) var(--galaxy-buffered),
        rgb(255 255 255 / .16) var(--galaxy-buffered) 100%);
    cursor: pointer;
}
html:root body .galaxy-video-progress::-webkit-slider-thumb,
html:root body .galaxy-video-volume-group input::-webkit-slider-thumb { width: .78rem; height: .78rem; border: .14rem solid #fff; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--galaxy-accent); box-shadow: 0 0 .7rem var(--galaxy-accent); }
html:root body .galaxy-video-progress::-moz-range-thumb,
html:root body .galaxy-video-volume-group input::-moz-range-thumb { width: .58rem; height: .58rem; border: .14rem solid #fff; border-radius: 50%; background: var(--galaxy-accent); box-shadow: 0 0 .7rem var(--galaxy-accent); }
html:root body .galaxy-video-volume-group { display: flex; width: 6rem; align-items: center; gap: .25rem; }
html:root body .galaxy-video-volume-group input { width: 3.35rem; background: linear-gradient(to right, var(--galaxy-accent) 0 var(--galaxy-volume), rgb(255 255 255 / .18) var(--galaxy-volume) 100%); }
html:root body .galaxy-video-speed { min-width: 2.45rem; padding: 0 .38rem; font-size: .62rem; font-weight: 900; font-variant-numeric: tabular-nums; }
html:root body .galaxy-video-quality { position: relative; }
html:root body .galaxy-video-quality-button {
    display: flex;
    min-width: 3.15rem;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: 0 .35rem;
    color: var(--galaxy-accent) !important;
    font-size: .58rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}
html:root body .galaxy-video-quality-button svg { width: .72rem; height: .72rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
html:root body .galaxy-video-quality-button[aria-expanded="true"] { background: color-mix(in srgb, var(--galaxy-accent) 24%, transparent) !important; color: #fff !important; }
html:root body .galaxy-video-quality-button[aria-expanded="true"] svg { transform: rotate(180deg); }
html:root body .galaxy-video-quality-menu {
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: calc(100% + .55rem);
    display: grid;
    width: 10.5rem;
    gap: .28rem;
    border: 1px solid color-mix(in srgb, var(--galaxy-accent) 38%, rgb(255 255 255 / .15));
    border-radius: .85rem;
    padding: .42rem;
    background: color-mix(in srgb, var(--galaxy-accent) 9%, rgb(5 8 22 / .96));
    box-shadow: 0 1rem 2.4rem rgb(0 0 0 / .48), 0 0 1.4rem color-mix(in srgb, var(--galaxy-accent) 14%, transparent);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}
html:root body .galaxy-video-quality-menu.hidden { display: none !important; }
html:root body .galaxy-video-quality-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .5rem;
    border: 0 !important;
    border-radius: .58rem;
    padding: .46rem .55rem;
    background: transparent !important;
    color: rgb(226 232 240 / .72) !important;
    text-align: left;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
html:root body .galaxy-video-quality-option:hover { background: rgb(255 255 255 / .07) !important; color: #fff !important; }
html:root body .galaxy-video-quality-option:active { transform: scale(.97); }
html:root body .galaxy-video-quality-option.is-active { background: color-mix(in srgb, var(--galaxy-accent) 22%, transparent) !important; color: #fff !important; }
html:root body .galaxy-video-quality-option strong { color: var(--galaxy-accent); font-size: .68rem; font-weight: 950; }
html:root body .galaxy-video-quality-option small { justify-self: end; color: currentColor; font-size: .49rem; font-weight: 750; }
html:root body .galaxy-video-quality-menu > p { margin: .08rem .3rem .18rem; color: rgb(148 163 184 / .7); font-size: .48rem; font-weight: 750; text-align: center; }
html:root body .galaxy-video-player:fullscreen { width: 100vw; max-width: none; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; }

/* ------------[Компактная сцена видео]------------ // Убирает широкие тематические поля вокруг ролика, не растягивая само изображение. Модуль: «оформление интерфейса». Часть 1/4 */
@media (min-width: 768px) {
    html:root body #media-viewer:not(.is-post-expanded):has(#galaxy-video-player:not(.hidden)) #media-viewer-panel {
        padding: 1rem 1rem 4.75rem !important;
    }
    html:root body #media-viewer:not(.is-post-expanded):has(#galaxy-video-player:not(.hidden)) .media-viewer-layout {
        width: min(calc((100dvh - 5.75rem) * 1.7778), calc(100vw - 2rem));
        height: auto;
        max-height: calc(100dvh - 5.75rem);
        aspect-ratio: 16 / 9;
        border-color: color-mix(in srgb, var(--galaxy-accent) 42%, transparent) !important;
        border-radius: 1.25rem;
        background: transparent !important;
    }
    html:root body #media-viewer:not(.is-post-expanded):has(#galaxy-video-player:not(.hidden)) .media-viewer-photo-pane {
        padding: .2rem;
        background: transparent !important;
    }
    html:root body #media-viewer.is-post-expanded:has(#galaxy-video-player:not(.hidden)) #media-viewer-panel {
        padding: 2rem .8rem 4.75rem !important;
    }
    html:root body #media-viewer.is-post-expanded:has(#galaxy-video-player:not(.hidden)) .media-viewer-layout {
        width: min(96rem, 100%);
        border-width: 1px;
        border-radius: 1.2rem;
    }
    html:root body #media-viewer.is-post-expanded:has(#galaxy-video-player:not(.hidden)) .media-viewer-photo-pane {
        padding: .22rem !important;
        background: transparent !important;
    }
    html:root body #media-viewer.is-post-expanded:has(#galaxy-video-player:not(.hidden)) .media-viewer-post-slot {
        flex-basis: clamp(30rem, 40vw, 42rem);
        width: clamp(30rem, 40vw, 42rem);
        max-width: clamp(30rem, 40vw, 42rem);
    }
    html:root body #media-viewer:has(#galaxy-video-player:not(.hidden)) .galaxy-video-player {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 1rem;
    }
}

html:root body #media-viewer :is(#media-viewer-prev, #media-viewer-next):disabled,
html:root body #media-viewer :is(#media-viewer-prev, #media-viewer-next).is-disabled {
    border-color: rgb(148 163 184 / .1) !important;
    background: rgb(15 23 42 / .34) !important;
    color: rgb(148 163 184 / .32) !important;
    cursor: not-allowed !important;
    opacity: .58;
    box-shadow: none !important;
    transform: translateY(-50%) scale(.92) !important;
}
html:root body #media-viewer :is(#media-viewer-prev, #media-viewer-next).is-seeking:not(:disabled) {
    border-color: var(--galaxy-accent, var(--theme-accent, var(--color-dynamic, #2dd4bf))) !important;
    background: var(--galaxy-accent, var(--theme-accent, var(--color-dynamic, #2dd4bf))) !important;
    color: #fff !important;
    box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #2dd4bf)) 18%, transparent) !important;
}
html:root body #media-viewer-open-post {
    min-height: 2.35rem !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, var(--color-dynamic, #3b82f6)) 72%, #fff 28%) !important;
    border-radius: .72rem !important;
    padding-inline: 1rem !important;
    background: var(--theme-accent, var(--color-dynamic, #3b82f6)) !important;
    color: #fff !important;
    box-shadow: 0 .7rem 1.5rem -.9rem var(--theme-accent, var(--color-dynamic, #3b82f6)) !important;
}
html:root body #media-viewer-open-post:hover { filter: brightness(1.08); transform: translateY(-1px); }
html:root body #media-viewer-open-post:active { transform: scale(.97); }

@keyframes galaxy-player-orbit { to { transform: rotate(349deg); } }
@keyframes galaxy-player-star { 50% { opacity: .35; transform: scale(.64); } }
@keyframes galaxy-player-nebula { 50% { opacity: .55; transform: scale(1.15) translate3d(3%, -2%, 0); } }
@keyframes galaxy-player-spin { to { transform: rotate(360deg); } }
@keyframes galaxy-player-seek { 0% { opacity: 0; transform: translateY(-50%) scale(.65); } 28%, 72% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1.08); } }
@keyframes galaxy-player-switch { 0%, 100% { transform: scale(1); } 45% { transform: scale(.7); } 72% { transform: scale(1.12); } }
@keyframes galaxy-player-fast-seek { 0%, 100% { opacity: .78; box-shadow: 0 .8rem 2rem rgb(0 0 0 / .32), 0 0 1rem color-mix(in srgb, var(--galaxy-accent) 16%, transparent); } 50% { opacity: 1; box-shadow: 0 .8rem 2rem rgb(0 0 0 / .32), 0 0 2rem color-mix(in srgb, var(--galaxy-accent) 42%, transparent); } }

@media (max-width: 700px) {
    html:root body .galaxy-video-player { width: 100%; border-radius: .85rem; }
    html:root body .galaxy-video-transport { gap: .55rem; }
    html:root body .galaxy-video-switch { width: 2.15rem; height: 2.15rem; }
    html:root body .galaxy-video-controls { right: .4rem; bottom: .4rem; left: .4rem; grid-template-columns: 1.9rem auto minmax(2.5rem, 1fr) auto auto auto 1.9rem; gap: .25rem; min-height: 2.7rem; padding: .32rem .38rem; border-radius: .72rem; }
    html:root body .galaxy-video-control { width: 1.9rem; min-width: 1.9rem; height: 1.9rem; }
    html:root body .galaxy-video-volume-group { display: none; }
    html:root body .galaxy-video-controls time { min-width: 2.05rem; font-size: .55rem; }
    html:root body .galaxy-video-speed { min-width: 2.1rem; height: 1.9rem; font-size: .55rem; }
    html:root body .galaxy-video-quality-button { min-width: 2.65rem; height: 1.9rem; padding: 0 .22rem; font-size: .52rem; }
    html:root body .galaxy-video-quality-button svg { width: .6rem; height: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    html:root body .galaxy-video-player *,
    html:root body .galaxy-video-player *::before,
    html:root body .galaxy-video-player *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* ------------[Видеоальбомы профиля]------------ // Подборки ссылаются на ролики публикаций и полностью наследуют активную тему. Модуль: «оформление интерфейса». Часть 2/4 */
.profile-video-head-actions,.profile-video-card-actions{display:flex;align-items:center;gap:.45rem}
.profile-video-tabs{display:flex;width:max-content;max-width:100%;gap:.3rem;margin:0 0 1.15rem;padding:.3rem;border:1px solid color-mix(in srgb,var(--video-accent) 16%,transparent);border-radius:.85rem;background:color-mix(in srgb,var(--video-accent) 7%,var(--vmesta-left-reference-surface,#fff))}
.profile-video-tabs button{display:inline-flex;min-height:2.15rem;align-items:center;gap:.45rem;padding:.48rem .78rem;border-radius:.62rem;color:var(--theme-muted,var(--adaptive-muted,#64748b));font-size:.68rem;font-weight:850;transition:background .18s ease,color .18s ease,transform .18s ease}
.profile-video-tabs button b{display:grid;min-width:1.25rem;height:1.25rem;place-items:center;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:.56rem}
.profile-video-tabs button.is-active{background:var(--video-accent);color:#fff;box-shadow:0 .5rem 1.2rem -.8rem var(--video-accent)}
.profile-video-tabs button:active{transform:scale(.97)}
.profile-video-card-copy{min-width:0}.profile-video-card-actions{flex:0 0 auto}
.profile-video-album-add,.profile-video-album-remove,.profile-video-album-card>div>button{display:grid!important;width:2rem;height:2rem;min-height:2rem!important;place-items:center;border:1px solid color-mix(in srgb,var(--video-accent) 24%,transparent)!important;border-radius:.65rem!important;background:color-mix(in srgb,var(--video-accent) 9%,transparent)!important;color:var(--video-accent)!important;transition:transform .18s ease,background .18s ease,color .18s ease!important}
.profile-video-album-add svg,.profile-video-album-remove svg,.profile-video-album-card>div>button svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.profile-video-album-add:hover{background:var(--video-accent)!important;color:#fff!important}.profile-video-album-remove:hover,.profile-video-album-card>div>button:hover{border-color:#ef4444!important;background:#ef4444!important;color:#fff!important}.profile-video-album-add:active,.profile-video-album-remove:active,.profile-video-album-card>div>button:active{transform:scale(.92)}
.profile-video-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.profile-video-album-card{min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--video-accent) 16%,transparent);border-radius:1rem;background:color-mix(in srgb,var(--video-accent) 5%,var(--vmesta-left-reference-surface,#fff))}
.profile-video-album-cover{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--video-accent) 10%,#020617)}
.profile-video-album-cover video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .25s ease,filter .25s ease}.profile-video-album-cover:hover video{transform:scale(1.03);filter:saturate(1.08)}
.profile-video-album-cover>i{position:absolute;right:.5rem;bottom:.5rem;display:grid;min-width:1.65rem;height:1.65rem;place-items:center;padding:0 .35rem;border-radius:.55rem;background:rgb(2 6 23/.76);color:#fff;font-size:.6rem;font-style:normal;font-weight:900}
.profile-video-album-empty{display:grid;width:100%;height:100%;place-items:center;color:color-mix(in srgb,var(--video-accent) 70%,white)}.profile-video-album-empty svg{width:3rem;height:3rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.profile-video-album-card>div{display:flex;min-height:3.8rem;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .75rem}.profile-video-album-card>div>span{display:grid;min-width:0;gap:.15rem}.profile-video-album-card strong{overflow:hidden;color:var(--theme-text,var(--adaptive-text,#0f172a));font-size:.74rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.profile-video-album-card small{color:var(--theme-muted,var(--adaptive-muted,#64748b));font-size:.55rem;font-weight:700}
.profile-video-back{display:grid;width:2rem;height:2rem;place-items:center;margin:0 0 .35rem;border-radius:.65rem;background:color-mix(in srgb,var(--video-accent) 10%,transparent);color:var(--video-accent)}.profile-video-back svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.profile-video-dialog-backdrop{position:fixed;z-index:23500;inset:0;display:grid;place-items:center;padding:1rem;background:rgb(2 6 23/.58);backdrop-filter:blur(10px)}
.profile-video-dialog{display:grid;width:min(28rem,calc(100vw - 2rem));max-height:min(38rem,calc(100dvh - 2rem));gap:1rem;overflow:auto;padding:1rem;border:1px solid color-mix(in srgb,var(--video-accent) 22%,transparent);border-radius:1.25rem;background:var(--vmesta-left-reference-surface,var(--adaptive-surface,#fff));color:var(--theme-text,var(--adaptive-text,#0f172a));box-shadow:0 2rem 5rem rgb(2 6 23/.3)}.profile-video-dialog.is-compact{width:min(25rem,calc(100vw - 2rem))}
.profile-video-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.profile-video-dialog>header>div{display:grid;gap:.2rem}.profile-video-dialog>header span{color:var(--video-accent);font-size:.56rem;font-weight:950;letter-spacing:.16em}.profile-video-dialog>header strong{font-size:1rem;font-weight:950}.profile-video-dialog>header>button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:.72rem;background:color-mix(in srgb,var(--video-accent) 9%,transparent);color:var(--video-accent);font-size:1.2rem}
.profile-video-dialog>label{display:grid;gap:.35rem;color:var(--theme-muted,var(--adaptive-muted,#64748b));font-size:.58rem;font-weight:850}.profile-video-dialog :is(input,select){width:100%;min-height:2.8rem;border:1px solid color-mix(in srgb,var(--video-accent) 20%,transparent);border-radius:.78rem;padding:0 .8rem;background:color-mix(in srgb,var(--video-accent) 6%,transparent);color:var(--theme-text,var(--adaptive-text,#0f172a));font-size:.72rem;font-weight:750;outline:none}.profile-video-dialog :is(input,select):focus{border-color:var(--video-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--video-accent) 12%,transparent)}
.profile-video-dialog>p,.profile-video-album-picker>p{margin:0;color:var(--theme-muted,var(--adaptive-muted,#64748b));font-size:.7rem;line-height:1.55}.profile-video-dialog>footer{display:flex;justify-content:flex-end;gap:.5rem}.profile-video-dialog>footer button{min-height:2.35rem;padding:.55rem .8rem;border-radius:.72rem;background:color-mix(in srgb,var(--video-accent) 9%,transparent);color:var(--video-accent);font-size:.64rem;font-weight:900}.profile-video-dialog>footer button.is-primary{background:var(--video-accent);color:#fff}.profile-video-dialog>footer button.is-danger{background:#ef4444;color:#fff}.profile-video-dialog>footer button:disabled{cursor:wait;opacity:.55}
.profile-video-album-picker{display:grid;gap:.45rem;overflow:auto}.profile-video-album-picker>button{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.7rem;min-height:3rem;padding:.65rem .75rem;border:1px solid color-mix(in srgb,var(--video-accent) 14%,transparent);border-radius:.8rem;background:color-mix(in srgb,var(--video-accent) 5%,transparent);text-align:left;transition:border-color .18s ease,transform .18s ease}.profile-video-album-picker>button:hover{border-color:var(--video-accent);transform:translateY(-1px)}.profile-video-album-picker>button span{overflow:hidden;color:var(--theme-text,var(--adaptive-text,#0f172a));font-size:.7rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.profile-video-album-picker>button small{color:var(--theme-muted,var(--adaptive-muted,#64748b));font-size:.55rem;font-weight:700}.profile-video-album-picker>button svg{width:.9rem;height:.9rem;fill:none;stroke:var(--video-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.profile-video-album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-video-card-copy{align-items:flex-start!important;flex-direction:column}.profile-video-card-actions{width:100%;justify-content:flex-end}}
@media(max-width:460px){.profile-video-album-grid{grid-template-columns:1fr}.profile-video-head-actions{width:100%}.profile-video-head-actions .profile-video-add{width:100%}.profile-video-dialog>footer{flex-direction:column-reverse}.profile-video-dialog>footer button{width:100%}}

/* Видеотека использует тот же компактный набор кнопок, что и раздел фотографий. */
html:root body .profile-video-tabs {
  gap:.25rem;margin-bottom:1.35rem;padding:.25rem;border:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0));
  border-radius:.75rem;background:var(--vmesta-tone-2,var(--adaptive-surface-2,#f8fafc));box-shadow:none;
}
html:root body .profile-video-tabs button {
  min-height:2rem;padding:.45rem 1.25rem;border-radius:.55rem;background:transparent;color:var(--vmesta-ui-muted,var(--adaptive-muted,#94a3b8));
  font-size:.625rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:none;
}
html:root body .profile-video-tabs button:is(:hover,:focus-visible) { color:var(--vmesta-ui-ink,var(--adaptive-text,#334155)); }
html:root body .profile-video-tabs button.is-active {
  background:var(--vmesta-menu-surface,var(--adaptive-surface,#fff));color:var(--vmesta-ui-primary,var(--video-accent,#0d9488));
  box-shadow:0 1px 3px rgb(15 23 42/.08);
}
html:root body .profile-video-add {
  min-height:2.35rem;padding:.55rem 1rem;border:0!important;border-radius:.75rem;
  background:var(--vmesta-menu-surface,var(--adaptive-surface,#fff))!important;color:var(--vmesta-ui-primary,var(--video-accent,#0d9488))!important;
  box-shadow:none!important;font-size:.625rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
}
html:root body .profile-video-add span { color:var(--vmesta-ui-ink,var(--adaptive-text,#334155)); }
html:root body .profile-video-add:hover { background:color-mix(in srgb,var(--vmesta-menu-surface,var(--adaptive-surface,#fff)) 68%,var(--vmesta-ui-primary,var(--video-accent,#0d9488)) 32%)!important; }
html:root body .profile-video-add:active { transform:scale(.95); }
html:root body .profile-video-library .profile-video-albums-empty { min-height:clamp(22rem,50vh,31rem)!important; }
html:root body .profile-video-library .profile-video-albums-empty>.vmesta-empty-visual { width:min(12.5rem,58vw);height:7.8rem; }
@media(max-width:640px){
  html:root body .profile-video-tabs{width:100%}
  html:root body .profile-video-tabs button{flex:1;padding-inline:.65rem}
  html:root body .profile-video-library .profile-video-albums-empty{min-height:19rem!important}
}

/* Диалог вынесен из трансформируемой вкладки: фон всегда покрывает окно браузера целиком. */
html:root body #profile-video-dialog-host {
  --video-accent:var(--vmesta-ui-primary,var(--theme-accent,var(--color-dynamic,#0d9488)));
  position:fixed;z-index:23500;inset:0;
}
html:root body #profile-video-dialog-host .profile-video-dialog-backdrop {
  position:absolute;inset:0;padding:1rem;background:rgb(15 23 42/.38);backdrop-filter:blur(4px);
}
html:root body #profile-video-dialog-host .profile-video-dialog {
  border-color:color-mix(in srgb,var(--video-accent) 22%,transparent);
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));
}
html:root body #profile-video-dialog-host .profile-video-dialog>footer button.is-primary {
  border:0;background:var(--video-accent)!important;color:#fff!important;box-shadow:0 .55rem 1.25rem -.8rem var(--video-accent);
}
html:root body #profile-video-dialog-host .profile-video-dialog>footer button.is-primary:hover { filter:brightness(1.06); }

/* Видеоальбомы повторяют карточки и полноэкранный сценарий фотоальбомов. */
html:root body .profile-video-album-card.album-card {
  position:relative;display:block;min-width:0;padding:.4rem;overflow:visible;cursor:pointer;
  border:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0));border-radius:1rem;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));box-shadow:none;
}
html:root body .profile-video-album-card.album-card:hover { transform:translateY(-2px);box-shadow:0 1rem 2rem -1.6rem rgb(15 23 42/.45); }
html:root body .profile-video-album-card>.album-card-cover {
  display:block;min-height:0;width:100%;aspect-ratio:4/3;padding:0;overflow:hidden;border-radius:.72rem;
  background:color-mix(in srgb,var(--video-accent) 10%,#07111f);
}
html:root body .profile-video-album-card>.album-card-cover video { width:100%;height:100%;object-fit:cover;pointer-events:none; }
html:root body .profile-video-album-card>.album-card-copy {
  display:block;min-height:0;padding:.72rem .55rem .58rem;text-align:left;
}
html:root body .profile-video-album-card>.album-card-copy h3 { margin:0;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));font-size:.78rem;font-weight:950; }
html:root body .profile-video-album-card>.album-card-copy p { margin:.22rem 0 0;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.57rem;font-weight:750; }
html:root body .profile-video-album-card>.album-card-menu-wrap { position:absolute;right:.75rem;top:.75rem;z-index:20;display:block;min-height:0;padding:0; }
html:root body .profile-video-album-card>.album-card-menu-wrap>.album-card-kebab {
  display:grid!important;width:2rem;height:2rem;min-height:2rem!important;padding:0!important;place-items:center;
  border:1px solid rgb(255 255 255/.72)!important;border-radius:.65rem!important;background:rgb(255 255 255/.9)!important;
  color:var(--video-accent)!important;font-size:1.15rem;line-height:1;box-shadow:0 .4rem 1rem rgb(15 23 42/.16)!important;
}
html:root body .profile-video-album-card>.album-card-menu-wrap>.album-card-kebab:hover { border-color:var(--video-accent)!important;background:#fff!important;color:var(--video-accent)!important; }
html:root body .profile-video-album-card .album-card-menu.hidden { display:none!important; }
html:root body .profile-video-album-card .album-card-menu { right:0;top:2.35rem;z-index:8;width:13.5rem; }
html:root body .profile-video-album-card .album-card-menu svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
html:root body .profile-video-album-card .album-card-empty { height:100%;border:0;border-radius:0; }

html:root body #profile-video-dialog-host .profile-video-album-viewer-backdrop {
  position:absolute;z-index:0;inset:0;display:grid;place-items:center;padding:clamp(.55rem,2vw,1.5rem);
  background:rgb(2 6 23/.66);backdrop-filter:blur(9px);
}
html:root body #profile-video-dialog-host .profile-video-album-viewer {
  display:grid;grid-template-rows:auto minmax(0,1fr);width:min(76rem,calc(100vw - 2rem));height:min(48rem,calc(100dvh - 2rem));
  overflow:hidden;border:1px solid color-mix(in srgb,var(--video-accent) 24%,transparent);border-radius:1.35rem;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));box-shadow:0 2rem 6rem rgb(2 6 23/.42);
}
html:root body #profile-video-dialog-host .profile-video-album-viewer>header {
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0));
}
html:root body #profile-video-dialog-host .profile-video-album-viewer>header>div:first-child { min-width:0; }
html:root body #profile-video-dialog-host .profile-video-album-viewer>header>div:first-child>span { color:var(--video-accent);font-size:.56rem;font-weight:950;letter-spacing:.16em; }
html:root body #profile-video-dialog-host .profile-video-album-viewer h2 { margin:.2rem 0 0;overflow:hidden;font-size:1.35rem;font-weight:950;text-overflow:ellipsis;white-space:nowrap; }
html:root body #profile-video-dialog-host .profile-video-album-viewer header p { margin:.18rem 0 0;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.62rem;font-weight:750; }
.profile-video-album-viewer-head-actions { display:flex;align-items:center;gap:.45rem; }
html:root body .profile-video-album-viewer-head-actions>button {
  display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.38rem;padding:.5rem .72rem;
  border:1px solid color-mix(in srgb,var(--video-accent) 16%,transparent);border-radius:.72rem;
  background:color-mix(in srgb,var(--video-accent) 7%,transparent);color:var(--video-accent);font-size:.6rem;font-weight:900;
}
html:root body .profile-video-album-viewer-head-actions>button:hover { background:var(--video-accent);color:#fff; }
html:root body .profile-video-album-viewer-head-actions>button:active { transform:scale(.95); }
html:root body .profile-video-album-viewer-head-actions svg { width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
html:root body .profile-video-album-viewer-head-actions>.profile-video-album-viewer-close { width:2.35rem;padding:0;font-size:1.25rem;font-weight:500; }
.profile-video-album-viewer-body { min-height:0;overflow:auto;padding:1.1rem;overscroll-behavior:contain; }
.profile-video-album-viewer-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem; }
.profile-video-album-viewer-card { min-width:0;overflow:hidden;border:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0));border-radius:.95rem;background:color-mix(in srgb,var(--video-accent) 4%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff))); }
.profile-video-album-viewer-card.is-cover { border-color:color-mix(in srgb,var(--video-accent) 72%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--video-accent) 12%,transparent); }
.profile-video-album-viewer-media { position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#020617; }
.profile-video-album-viewer-media video { display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .22s ease; }
.profile-video-album-viewer-media:hover video { transform:scale(1.025); }
.profile-video-album-viewer-media>small { position:absolute;right:.48rem;bottom:.45rem;padding:.2rem .38rem;border-radius:.4rem;background:rgb(2 6 23/.76);color:#fff;font-size:.52rem;font-weight:850; }
.profile-video-album-viewer-card>div { display:flex;min-height:3.25rem;align-items:center;justify-content:space-between;gap:.55rem;padding:.55rem .65rem; }
.profile-video-album-viewer-card>div>strong { overflow:hidden;font-size:.68rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap; }
.profile-video-album-viewer-card>div>span { display:flex;flex:0 0 auto;gap:.3rem; }
.profile-video-album-viewer-card>div button { display:grid;width:1.85rem;height:1.85rem;place-items:center;border-radius:.58rem;background:color-mix(in srgb,var(--video-accent) 8%,transparent);color:var(--video-accent); }
.profile-video-album-viewer-card>div button:hover,.profile-video-album-viewer-card>div button.is-active { background:var(--video-accent);color:#fff; }
.profile-video-album-viewer-card>div button:disabled { cursor:default;opacity:1; }
.profile-video-album-viewer-card>div svg { width:.82rem;height:.82rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }

html:root body #profile-video-dialog-host .profile-video-dialog-backdrop { z-index:3; }
.profile-video-access-list,.profile-video-library-picker { display:grid;gap:.45rem;overflow:auto; }
.profile-video-access-list>button { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .8rem;border:1px solid color-mix(in srgb,var(--video-accent) 15%,transparent);border-radius:.78rem;background:color-mix(in srgb,var(--video-accent) 5%,transparent);text-align:left; }
.profile-video-access-list>button>span { display:grid;gap:.18rem; }
.profile-video-access-list strong { font-size:.7rem;font-weight:900; }
.profile-video-access-list small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.56rem;font-weight:700; }
.profile-video-access-list i { width:.95rem;height:.95rem;border:2px solid color-mix(in srgb,var(--video-accent) 35%,transparent);border-radius:999px; }
.profile-video-access-list>button.is-active { border-color:var(--video-accent); }
.profile-video-access-list>button.is-active i { border:3px solid color-mix(in srgb,var(--video-accent) 22%,transparent);background:var(--video-accent);background-clip:padding-box; }
.profile-video-library-picker-dialog { width:min(38rem,calc(100vw - 2rem)); }
.profile-video-library-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-video-library-picker>button { display:grid;grid-template-columns:4.6rem minmax(0,1fr) 1.5rem;align-items:center;gap:.65rem;min-width:0;padding:.45rem;border:1px solid color-mix(in srgb,var(--video-accent) 14%,transparent);border-radius:.75rem;background:color-mix(in srgb,var(--video-accent) 5%,transparent);text-align:left; }
.profile-video-library-picker>button:hover { border-color:var(--video-accent); }
.profile-video-library-picker video { width:4.6rem;aspect-ratio:16/10;object-fit:cover;border-radius:.52rem;background:#020617;pointer-events:none; }
.profile-video-library-picker span { overflow:hidden;font-size:.63rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap; }
.profile-video-library-picker svg { width:.9rem;height:.9rem;fill:none;stroke:var(--video-accent);stroke-width:2;stroke-linecap:round; }
.profile-video-library-picker>p { grid-column:1/-1;margin:0;padding:1.4rem;text-align:center; }
.profile-video-own-upload { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.55rem;font-weight:750;white-space:nowrap; }
.profile-video-album-add-menu-wrap { position:relative; }
html:root body .profile-video-album-add-menu-wrap>button {
  display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.38rem;padding:.5rem .72rem;
  border:1px solid color-mix(in srgb,var(--video-accent) 16%,transparent);border-radius:.72rem;
  background:color-mix(in srgb,var(--video-accent) 7%,transparent);color:var(--video-accent);font-size:.6rem;font-weight:900;
}
html:root body .profile-video-album-add-menu-wrap>button:hover { background:var(--video-accent);color:#fff; }
.profile-video-album-add-menu {
  position:absolute;z-index:12;top:calc(100% + .45rem);right:0;display:grid;width:18rem;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--video-accent) 16%,transparent);border-radius:.85rem;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));box-shadow:0 1.25rem 3rem -1.2rem rgb(2 6 23/.45);
}
.profile-video-album-add-menu.hidden { display:none; }
html:root body .profile-video-album-add-menu>button { display:grid;grid-template-columns:1.65rem minmax(0,1fr);align-items:center;gap:.65rem;padding:.75rem .8rem;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));text-align:left; }
html:root body .profile-video-album-add-menu>button:hover { background:color-mix(in srgb,var(--video-accent) 10%,transparent); }
.profile-video-album-add-menu>button+button { border-top:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)); }
.profile-video-album-add-menu>button>span { display:grid;gap:.15rem; }
.profile-video-album-add-menu strong { font-size:.65rem;font-weight:900; }
.profile-video-album-add-menu small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.53rem;font-weight:700; }
.profile-video-album-add-menu svg { width:1rem;height:1rem;fill:none;stroke:var(--video-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }

@media(max-width:900px){.profile-video-album-viewer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-video-album-viewer-head-actions>button span{display:none}}
@media(max-width:560px){
  html:root body #profile-video-dialog-host .profile-video-album-viewer{width:100%;height:100%;border-radius:0}
  html:root body #profile-video-dialog-host .profile-video-album-viewer-backdrop{padding:0}
  .profile-video-album-viewer-grid,.profile-video-library-picker{grid-template-columns:1fr}
  html:root body #profile-video-dialog-host .profile-video-album-viewer>header{padding:.85rem}
  .profile-video-album-viewer-body{padding:.8rem}
  .profile-video-album-add-menu{position:fixed;top:auto;right:.75rem;bottom:.75rem;left:.75rem;width:auto}
}

/* Полноэкранный видеоальбом использует геометрию существующего шаблона фотоальбома. */
html:root body #profile-video-dialog-host .profile-video-album-viewer-backdrop {
  display:flex;align-items:flex-start;justify-content:center;padding:1.5rem;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 14%,rgb(15 23 42/.72));
  backdrop-filter:blur(20px);
}
html:root body #profile-video-dialog-host .profile-video-album-viewer {
  position:relative;display:flex;width:100%;max-width:100rem;height:calc(100dvh - 3rem);max-height:calc(100dvh - 3rem);
  flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 30%,transparent);
  border-radius:1.75rem;background:var(--adaptive-surface,#fff);box-shadow:0 36px 90px -34px color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 32%,rgb(15 23 42));
}
html:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-close {
  position:absolute;z-index:30;top:1rem;right:1rem;display:grid;width:2.75rem;height:2.75rem;min-height:2.75rem;place-items:center;padding:0;
  border:1px solid rgb(148 163 184/.28);border-radius:999px;background:rgb(255 255 255/.78);color:rgb(71 85 105);font-size:1.5rem;line-height:1;backdrop-filter:blur(16px);
}
html:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-close:hover { border-color:var(--color-dynamic,var(--video-accent));background:var(--color-dynamic,var(--video-accent));color:#fff; }
html:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-hero {
  position:relative;z-index:20;display:block;flex:0 0 auto;padding:2.25rem 3rem 1.75rem;text-align:center;
  border-bottom:1px solid var(--adaptive-border,#e2e8f0);background:color-mix(in srgb,var(--adaptive-surface,#fff) 94%,transparent);backdrop-filter:blur(18px);
}
html:root body #profile-video-dialog-host .profile-video-album-viewer-hero h2 {
  max-width:68.75rem;margin:0 auto;overflow:visible;color:var(--adaptive-text-active,#0f172a);font-size:clamp(3rem,5vw,5.2rem);
  font-weight:300;line-height:.95;letter-spacing:-.045em;text-transform:uppercase;white-space:normal;
}
html:root body #profile-video-dialog-host .profile-video-album-viewer-hero>p { margin:1rem 0 0;color:var(--adaptive-muted,#64748b);font-size:.72rem;font-weight:650; }
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions { position:relative;display:flex;width:fit-content;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto 0; }
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions>button,
html:root body #profile-video-dialog-host .profile-video-album-add-menu-wrap>button {
  display:inline-flex;min-height:2.4rem;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .8rem;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 32%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 9%,var(--adaptive-surface,#fff));
  color:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 65%,var(--adaptive-text-active,#0f172a));font-size:.72rem;font-weight:800;
}
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions>button:hover,
html:root body #profile-video-dialog-host .profile-video-album-add-menu-wrap>button:hover,
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions>button.is-primary {
  border-color:var(--color-dynamic,var(--video-accent));background:var(--color-dynamic,var(--video-accent));color:#fff;
}
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions svg { width:1rem;height:1rem; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar {
  display:flex;max-width:70rem;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto 0;padding:.55rem;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 24%,transparent);border-radius:1rem;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 6%,var(--adaptive-surface,#fff));
}
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button { display:inline-flex;min-height:2.25rem;align-items:center;gap:.45rem;padding:.5rem .75rem;border-radius:.75rem;color:var(--adaptive-text,#475569);font-size:.68rem;font-weight:800; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button:hover:not(:disabled) { background:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 12%,transparent);color:var(--color-dynamic,var(--video-accent)); }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button.is-danger { color:#ef4444; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button.is-save { background:var(--color-dynamic,var(--video-accent));color:#fff; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button:disabled { cursor:not-allowed;opacity:.28; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>small { width:100%;color:var(--adaptive-muted,#94a3b8);font-size:.55rem;font-weight:750;text-align:center; }
html:root body #profile-video-dialog-host .profile-video-album-viewer-body {
  display:block;min-height:0;flex:1;overflow-y:auto;padding:1.25rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 5%,var(--adaptive-background,#f1f5f9));overscroll-behavior:contain;
}
.profile-video-album-viewer-empty { display:grid;min-height:45vh;place-items:center;text-align:center; }
.profile-video-album-viewer-empty>div>div,.profile-video-album-viewer-empty>div:first-child { display:grid;width:4rem;height:4rem;place-items:center;margin:0 auto;border-radius:1rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent)) 9%,transparent);color:var(--color-dynamic,var(--video-accent));font-size:1.15rem; }
.profile-video-album-viewer-empty>p { margin:1rem 0 0;color:var(--adaptive-muted,#64748b);font-size:.78rem;font-weight:800; }
.profile-video-album-viewer-card { border-radius:.45rem; }
.profile-video-album-viewer-card.is-selected { box-shadow:inset 0 0 0 4px var(--color-dynamic,var(--video-accent)); }
.profile-video-album-viewer-media .profile-video-album-selection { position:absolute;top:.65rem;left:.65rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:2px solid rgb(255 255 255/.75);border-radius:999px;background:rgb(15 23 42/.45);color:transparent;backdrop-filter:blur(8px); }
.profile-video-album-viewer-card.is-selected .profile-video-album-selection { border-color:var(--color-dynamic,var(--video-accent));background:var(--color-dynamic,var(--video-accent));color:#fff; }
.profile-video-album-selection svg { width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
.profile-video-album-cover-badge { position:absolute;top:.6rem;right:.6rem;padding:.28rem .48rem;border-radius:999px;background:rgb(15 23 42/.72);color:#fff;font-size:.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em; }

html.dark:root body #profile-video-dialog-host .profile-video-album-viewer { background:var(--adaptive-surface,#0f172a); }
html.dark:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-hero { background:color-mix(in srgb,var(--adaptive-surface,#0f172a) 94%,transparent); }
html.dark:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-close { background:rgb(2 6 23/.68);color:#cbd5e1; }

@media(max-width:767px){
  html:root body #profile-video-dialog-host .profile-video-album-viewer-backdrop{padding:.5rem}
  html:root body #profile-video-dialog-host .profile-video-album-viewer{height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem);border-radius:1.25rem}
  html:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-hero{padding:3rem 1rem 1rem}
  html:root body #profile-video-dialog-host .profile-video-album-viewer-hero h2{font-size:clamp(2rem,11vw,3.25rem)}
  html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions>button span,
  html:root body #profile-video-dialog-host .profile-video-album-add-menu-wrap>button span{display:none}
  html:root body #profile-video-dialog-host .profile-video-album-edit-toolbar>button span{display:none}
  html:root body #profile-video-dialog-host .profile-video-album-viewer-body{padding:.5rem}
}

/* Единые окна создания и доступа для фото- и видеоальбомов. */
html:root body :is(#album-create-modal,#album-access-modal),
html:root body #profile-video-dialog-host .profile-video-dialog-backdrop {
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,rgb(15 23 42/.72))!important;
  backdrop-filter:blur(10px)!important;
}
html:root body .album-unified-dialog {
  display:grid;width:min(30rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);gap:1rem;overflow:auto;padding:1.25rem;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 24%,transparent);border-radius:1.5rem;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a));
  box-shadow:0 2rem 5rem -1rem rgb(2 6 23/.38);
}
html:root body .album-unified-dialog>header { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }
html:root body .album-unified-dialog>header>div { display:grid;gap:.22rem; }
html:root body .album-unified-dialog>header>div>span { color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:.57rem;font-weight:950;letter-spacing:.16em; }
html:root body .album-unified-dialog>header>div>strong { color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a));font-size:1.05rem;font-weight:950; }
html:root body .album-unified-dialog>header>div>small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.57rem;font-weight:650; }
html:root body .album-unified-dialog>header>button { display:grid;width:2.4rem;height:2.4rem;flex:0 0 auto;place-items:center;border-radius:.78rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 10%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:1.2rem; }
html:root body .album-unified-dialog>header>button:hover { background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff; }
html:root body .album-unified-dialog>label { display:grid;gap:.4rem;color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 65%,var(--vmesta-ui-muted,var(--adaptive-muted,#64748b)));font-size:.58rem;font-weight:900; }
html:root body .album-unified-dialog :is(input,select) { width:100%;min-height:3rem;padding:0 .85rem;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 20%,transparent);border-radius:.85rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 6%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)));color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a));font-size:.72rem;font-weight:750;outline:none; }
html:root body .album-unified-dialog :is(input,select):focus { border-color:var(--color-dynamic,var(--video-accent,#0d9488));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 13%,transparent); }
html:root body .album-unified-dialog>footer { display:flex;justify-content:flex-end;gap:.55rem; }
html:root body .album-unified-dialog>footer>button { min-height:2.55rem;padding:.58rem .9rem;border-radius:.78rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 8%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:.64rem;font-weight:900; }
html:root body .album-unified-dialog>footer>button.is-primary { background:var(--color-dynamic,var(--video-accent,#0d9488))!important;color:#fff!important;box-shadow:0 .7rem 1.5rem -.9rem var(--color-dynamic,var(--video-accent,#0d9488)); }
html:root body .album-unified-dialog .hidden { display:none!important; }

html:root body .album-access-options { display:grid;gap:.52rem; }
html:root body .album-access-option.album-visibility-option {
  display:grid;grid-template-columns:2.65rem minmax(0,1fr) 1rem;align-items:center;gap:.75rem;width:100%;padding:.65rem .75rem;
  border:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0));border-radius:.9rem;background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 94%,transparent);
  color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a));text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
html:root body .album-access-option:hover { transform:translateY(-1px);border-color:color-mix(in srgb,var(--access-color) 55%,transparent);background:color-mix(in srgb,var(--access-color) 7%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff))); }
html:root body .album-access-option.is-active { border-color:color-mix(in srgb,var(--access-color) 72%,transparent);background:color-mix(in srgb,var(--access-color) 10%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)));box-shadow:0 .7rem 1.7rem -1.35rem var(--access-color); }
.album-access-option.is-public{--access-color:#06b6d4}.album-access-option.is-friends{--access-color:#8b5cf6}.album-access-option.is-private{--access-color:#f59e0b}
html:root body .album-access-icon { display:grid!important;width:2.65rem;height:2.65rem;place-items:center;border-radius:.78rem;background:color-mix(in srgb,var(--access-color) 14%,transparent);color:var(--access-color);font-size:0!important; }
html:root body .album-access-icon svg { width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
html:root body .album-access-option>span:nth-child(2) { display:grid;gap:.16rem; }
html:root body .album-access-option strong { color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a));font-size:.7rem;font-weight:900; }
html:root body .album-access-option small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.55rem;font-weight:700; }
html:root body .album-access-option>i { display:block;width:.92rem;height:.92rem;border:2px solid color-mix(in srgb,var(--access-color) 35%,transparent);border-radius:999px; }
html:root body .album-access-option.is-active>i { border:3px solid color-mix(in srgb,var(--access-color) 23%,transparent);background:var(--access-color);background-clip:padding-box; }

/* Стабильное меню карточки: одинаковое положение и чистая тематическая подсветка. */
html:root body .album-card { overflow:visible; }
html:root body .album-card>.album-card-menu-wrap { position:absolute!important;z-index:30!important;top:.75rem!important;right:.75rem!important;display:block!important;min-height:0!important;padding:0!important; }
html:root body .album-card>.album-card-menu-wrap>.album-card-kebab {
  display:grid!important;width:2.35rem!important;height:2.35rem!important;min-height:2.35rem!important;place-items:center!important;padding:0!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 28%,transparent)!important;border-radius:999px!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 91%,transparent)!important;color:var(--color-dynamic,var(--video-accent,#0d9488))!important;
  box-shadow:0 .55rem 1.25rem -.75rem rgb(15 23 42/.34)!important;backdrop-filter:blur(14px);font-size:1.25rem!important;opacity:1!important;transform:none!important;
}
html:root body .album-card>.album-card-menu-wrap>.album-card-kebab:hover,
html:root body .album-card>.album-card-menu-wrap>.album-card-kebab[aria-expanded="true"] { border-color:var(--color-dynamic,var(--video-accent,#0d9488))!important;background:var(--color-dynamic,var(--video-accent,#0d9488))!important;color:#fff!important;box-shadow:0 .75rem 1.6rem -.8rem var(--color-dynamic,var(--video-accent,#0d9488))!important; }
html:root body .album-card .album-card-menu { position:absolute!important;z-index:40!important;top:calc(100% + .45rem)!important;right:0!important;width:14rem!important;padding:.38rem!important;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 20%,transparent)!important;border-radius:.82rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;color:var(--vmesta-ui-ink,var(--adaptive-text-active,#0f172a))!important;box-shadow:0 1.4rem 3rem -1.2rem rgb(2 6 23/.48)!important; }
html:root body .album-card .album-card-menu button { min-height:2.55rem;color:inherit; }
html:root body .album-card .album-card-menu button:hover { background:color-mix(in srgb,var(--menu-icon-color,var(--color-dynamic,var(--video-accent,#0d9488))) 10%,transparent)!important;color:var(--menu-icon-color,var(--color-dynamic,var(--video-accent,#0d9488))); }
html:root body .album-card .album-card-menu button:nth-child(1){--menu-icon-color:#3b82f6}html:root body .album-card .album-card-menu button:nth-child(2){--menu-icon-color:#8b5cf6}html:root body .album-card .album-card-menu button:nth-child(3){--menu-icon-color:#ef4444}
html:root body .album-card .album-card-menu button svg { padding:.18rem;border-radius:.38rem;background:color-mix(in srgb,var(--menu-icon-color) 13%,transparent);color:var(--menu-icon-color); }

@media(max-width:520px){html:root body .album-unified-dialog{padding:1rem;border-radius:1.15rem}html:root body .album-unified-dialog>footer{flex-direction:column-reverse}html:root body .album-unified-dialog>footer>button{width:100%}}

/* Альбомы: контраст карточек, устойчивые слои и обложка в шапке. */
html:root { scrollbar-gutter:stable; }
html:root body :is(#albums-placeholder,.profile-video-album-grid) { overflow:visible!important;isolation:isolate; }
html:root body .album-card {
  isolation:isolate;overflow:visible!important;
  border-color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 24%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 7%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)))!important;
  box-shadow:0 .7rem 1.8rem -1.25rem rgb(15 23 42/.34)!important;
}
html:root body .album-card:is(:hover,:focus-visible) { z-index:70;box-shadow:0 1.2rem 2.6rem -1.35rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 42%,rgb(15 23 42/.32))!important; }
html:root body .album-card:focus-within { z-index:120!important; }
html:root body .album-card:has(.album-card-menu:not(.hidden)) { z-index:140!important; }
html:root body .album-card>.album-card-cover {
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 18%,transparent);
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,var(--vmesta-ui-soft,var(--adaptive-surface-2,#f1f5f9)))!important;
}
html:root body .album-card>.album-card-copy { position:relative;z-index:1;border-radius:0 0 .72rem .72rem;background:transparent!important; }
html:root body .album-card .album-card-menu { max-width:calc(100vw - 2rem);overflow:visible!important; }
html:root body .album-card .album-card-menu button { overflow:hidden;border-radius:.6rem; }

html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer) { transform:none!important;transition:opacity .2s ease!important; }
html:root body .album-viewer-header { position:relative;isolation:isolate;overflow:hidden; }
html:root body .album-viewer-header-cover {
  position:absolute;z-index:-2;inset:-4%;display:block!important;width:108%;height:108%;object-fit:cover;
  opacity:0;filter:saturate(1.12) blur(2px);transform:scale(1.035);transition:opacity .25s ease;
}
html:root body .album-viewer-header-cover.hidden { display:none!important; }
html:root body .album-viewer-header.has-cover .album-viewer-header-cover { opacity:.62; }
html:root body .album-viewer-header-shade { position:absolute;z-index:-1;inset:0;display:block;background:linear-gradient(180deg,rgb(2 6 23/.54),rgb(2 6 23/.78));opacity:0; }
html:root body .album-viewer-header.has-cover .album-viewer-header-shade { opacity:1; }
html:root body .album-viewer-header-content { position:relative;z-index:1; }
html:root body .album-viewer-header.has-cover :is(h2,p,.album-edit-hint) { color:#fff!important;text-shadow:0 2px 16px rgb(2 6 23/.72); }
html:root body .album-viewer-header.has-cover p { opacity:.86; }
html:root body #profile-video-dialog-host .profile-video-album-viewer-hero h2 { line-height:1.08!important; }
html:root body #profile-video-dialog-host .profile-video-album-viewer-hero>p,
html:root body #profile-video-dialog-host .profile-video-album-viewer-hero>.album-viewer-header-content>p { margin:.72rem 0 0!important;line-height:1.45!important; }

html:root body :is(.album-header-action,.album-share-button,.album-edit-tool) {
  transform:translateZ(0);transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
html:root body :is(.album-header-action,.album-share-button,.album-edit-tool):hover:not(:disabled) { transform:translateY(-1px); }
html:root body :is(.album-header-action,.album-share-button,.album-edit-tool):active:not(:disabled) { transform:scale(.96); }
html:root body .album-header-action:is(.is-active,.is-primary,[aria-pressed="true"]),
html:root body #profile-video-dialog-host .profile-video-album-viewer-head-actions>.album-header-action[aria-pressed="true"] {
  border-color:var(--color-dynamic,var(--video-accent,#0d9488))!important;background:var(--color-dynamic,var(--video-accent,#0d9488))!important;color:#fff!important;
  box-shadow:0 .75rem 1.5rem -.9rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 72%,transparent)!important;
}
html:root body :is(#album-edit-save,#profile-video-dialog-host .album-edit-save) {
  border-color:var(--color-dynamic,var(--video-accent,#0d9488))!important;background:var(--color-dynamic,var(--video-accent,#0d9488))!important;color:#fff!important;opacity:1!important;
  box-shadow:0 .7rem 1.4rem -.85rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 66%,transparent)!important;
}
html:root body :is(#album-edit-save,#profile-video-dialog-host .album-edit-save):hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 82%,#000)!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 86%,#000)!important;color:#fff!important;
}
html:root body .album-edit-tool:disabled { transform:none!important;box-shadow:none!important; }

@media(max-width:640px){
  html:root body .album-card .album-card-menu { right:-.35rem!important;width:min(14rem,calc(100vw - 2rem))!important; }
  html:root body #profile-video-dialog-host .profile-video-album-viewer-hero h2 { line-height:1.12!important; }
}

/* Обложка альбома мягко растворяется в рабочей области без светлого канта. */
html:root body #album-viewer-panel {
  --album-viewer-body-surface:color-mix(in srgb,var(--color-dynamic,#3b82f6) 5%,rgb(241 245 249));
  border:0!important;outline:0!important;
}
html.dark:root body #album-viewer-panel {
  --album-viewer-body-surface:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,rgb(2 6 23));
}
html.adaptive-theme:root body #album-viewer-panel {
  --album-viewer-body-surface:var(--adaptive-ui-active,var(--adaptive-background,#f1f5f9));
}
html:root body #profile-video-dialog-host .profile-video-album-viewer {
  --album-viewer-body-surface:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 5%,var(--adaptive-background,#f1f5f9));
  border:0!important;outline:0!important;
}
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer)>.album-viewer-header {
  border-right:0!important;border-bottom:0!important;border-left:0!important;outline:0!important;
}
html:root body .album-viewer-header.has-cover {
  border:0!important;background:var(--album-viewer-body-surface)!important;
}
html:root body .album-viewer-header.has-cover .album-viewer-header-cover {
  opacity:.78;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgb(0 0 0/.9) 66%,rgb(0 0 0/.58) 82%,rgb(0 0 0/.2) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgb(0 0 0/.9) 66%,rgb(0 0 0/.58) 82%,rgb(0 0 0/.2) 94%,transparent 100%);
}
html:root body .album-viewer-header.has-cover .album-viewer-header-shade {
  opacity:1;background:linear-gradient(180deg,rgb(2 6 23/.55) 0%,rgb(2 6 23/.68) 58%,rgb(2 6 23/.42) 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgb(0 0 0/.82) 76%,rgb(0 0 0/.28) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgb(0 0 0/.82) 76%,rgb(0 0 0/.28) 94%,transparent 100%);
}
html:root body .album-viewer-header.has-cover::after {
  content:"";position:absolute;z-index:0;right:0;bottom:-1px;left:0;height:1.5rem;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--album-viewer-body-surface));
}
html:root body #album-viewer-panel>.album-viewer-body,
html:root body #profile-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-body {
  background:var(--album-viewer-body-surface)!important;
}

/* ------------[Завершённая медиаподборка]------------ // Показывает живое состояние, когда все фото или видео уже добавлены в альбом. Модуль: «оформление интерфейса». Часть 3/4 */
.album-library-complete-state {
  grid-column:1/-1;display:grid;min-height:15rem;place-items:center;align-content:center;gap:.75rem;padding:1.5rem;text-align:center;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));
}
.album-library-complete-state>strong { max-width:28rem;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));font-size:.82rem;font-weight:900;line-height:1.45; }
.album-library-complete-state>small { max-width:25rem;font-size:.62rem;font-weight:700;line-height:1.55; }
.album-library-complete-visual { position:relative;display:grid;width:5.25rem;height:5.25rem;place-items:center;border-radius:1.45rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)));color:var(--color-dynamic,var(--video-accent,#0d9488));box-shadow:0 1.2rem 2.8rem -1.8rem currentColor;overflow:visible; }
.album-library-complete-visual::after { content:"";position:absolute;inset:-.45rem;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:1.75rem;animation:album-complete-breathe 2.7s ease-in-out infinite; }
.album-library-complete-visual svg { width:4rem;height:4rem;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.album-complete-folder { fill:color-mix(in srgb,currentColor 10%,transparent); }
.album-complete-media { fill:color-mix(in srgb,currentColor 18%,transparent); }
.album-complete-check { stroke-width:3;stroke-dasharray:28;animation:album-complete-check 2.7s ease-in-out infinite; }
.album-complete-orbit { stroke-dasharray:4 7;opacity:.38;transform-origin:36px 36px;animation:album-complete-orbit 7s linear infinite; }
.album-complete-satellite { fill:currentColor;stroke:none;transform-origin:36px 36px;animation:album-complete-orbit 4.8s linear infinite reverse; }
@keyframes album-complete-orbit { to { transform:rotate(360deg); } }
@keyframes album-complete-check { 0%,18% { stroke-dashoffset:28;opacity:.3; } 42%,78% { stroke-dashoffset:0;opacity:1; } 100% { stroke-dashoffset:-28;opacity:.3; } }
@keyframes album-complete-breathe { 0%,100% { opacity:.28;transform:scale(.94); } 50% { opacity:.72;transform:scale(1.04); } }

/* Модальные альбомы не дают колесу мыши и touch-жестам уходить на фон. */
:is(.album-viewer-modal-shell,.profile-video-dialog-backdrop,.space-video-modal-backdrop) { overscroll-behavior:none;touch-action:none; }
:is(.album-viewer-body,.profile-video-album-viewer-body,.profile-video-library-picker,.space-video-modal-scroll) { overscroll-behavior:contain;touch-action:pan-y; }

/* Фиксированная геометрия медиа убирает скачки при перерисовке кнопок альбома. */
.profile-video-album-viewer-grid { align-content:start; }
.profile-video-album-viewer-card { contain:layout paint;min-height:0; }
.profile-video-album-viewer-media { contain:layout paint;min-height:0; }
.profile-video-album-viewer-media video,.profile-video-album-cover video { aspect-ratio:16/10;transform:translateZ(0); }
.album-photo-tile { contain:layout paint; }

/* Кнопка дружбы в гостевом профиле равна по размеру и скруглению кнопке звонка. */
#friend-actions-container { min-height:2.7rem;align-items:stretch; }
#friend-action-btn {
  width:2.7rem!important;min-width:2.7rem!important;height:2.7rem!important;padding:0!important;place-items:center!important;align-self:stretch;border-radius:.75rem!important;
  border-color:color-mix(in srgb,var(--color-dynamic,#3b82f6) 30%,transparent)!important;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 11%,var(--adaptive-surface,#fff))!important;color:var(--color-dynamic,#3b82f6)!important;
}
#friend-action-btn:hover { background:var(--color-dynamic,#3b82f6)!important;color:#fff!important;transform:translateY(-1px); }
#friend-action-btn :is(svg,[id*=friend-btn-icon]) { width:1.18rem!important;height:1.18rem!important; }

/* ------------[Видеотека пространства]------------ // Повторяет геометрию и состояния личной видеотеки в контексте пространства. Модуль: «оформление интерфейса». Часть 4/4 */
.space-video-library .space-profile-media-head>div { display:grid;gap:.2rem; }
.space-video-library .space-profile-media-head>div>span { color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:.58rem;font-weight:950;letter-spacing:.17em; }
.space-video-library .space-profile-photo-field { min-height:30rem; }
.space-video-library .profile-video-grid,.space-video-library .profile-video-album-grid { align-content:start; }
.space-video-library .space-profile-media-toolbar b { margin-left:.25rem;padding:.08rem .35rem;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:.55rem; }
#space-video-dialog-host { position:fixed;z-index:23450;inset:0;pointer-events:none; }
#space-video-dialog-host>* { pointer-events:auto; }
#space-video-dialog-host .profile-video-dialog-backdrop,#space-video-dialog-host .profile-video-album-viewer-backdrop { position:absolute;z-index:1;inset:0;display:grid;place-items:center;padding:1rem;background:rgb(2 6 23/.66);backdrop-filter:blur(12px); }
#space-video-dialog-host .profile-video-album-viewer { position:relative;display:grid;width:min(96rem,calc(100vw - 3rem));height:min(54rem,calc(100dvh - 3rem));grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:0;border-radius:1.5rem;background:var(--adaptive-surface,#fff);color:var(--adaptive-text,#0f172a);box-shadow:0 2rem 6rem rgb(2 6 23/.42); }
#space-video-dialog-host .profile-video-album-viewer>.profile-video-album-viewer-close { position:absolute;z-index:20;top:1rem;right:1rem;display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:.8rem;background:rgb(255 255 255/.86);color:#315f58;font-size:1.25rem;backdrop-filter:blur(12px); }
#space-video-dialog-host .profile-video-album-viewer-hero { position:relative;isolation:isolate;overflow:hidden;padding:3rem 4rem 2rem;text-align:center;background:var(--album-viewer-body-surface,color-mix(in srgb,var(--color-dynamic,#0d9488) 5%,var(--adaptive-background,#f1f5f9))); }
#space-video-dialog-host .profile-video-album-viewer-hero h2 { margin:0;font-size:clamp(2.5rem,6vw,5rem);font-weight:300;line-height:1.06; }
#space-video-dialog-host .profile-video-album-viewer-hero p { margin:.65rem 0 0;font-size:.72rem;font-weight:700; }
#space-video-dialog-host .album-viewer-header-cover { position:absolute;z-index:-2;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:.78;filter:saturate(1.08) blur(2px);transform:scale(1.035);mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgb(0 0 0/.75) 77%,transparent 100%); }
#space-video-dialog-host .album-viewer-header-shade { position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgb(2 6 23/.52),rgb(2 6 23/.55) 66%,transparent); }
#space-video-dialog-host .has-cover :is(h2,p) { color:#fff;text-shadow:0 2px 16px rgb(2 6 23/.7); }
#space-video-dialog-host .profile-video-album-viewer-head-actions { justify-content:center;margin-top:1rem; }
#space-video-dialog-host .profile-video-album-viewer-body { min-height:0;overflow:auto;padding:1rem;background:var(--album-viewer-body-surface,color-mix(in srgb,var(--color-dynamic,#0d9488) 5%,var(--adaptive-background,#f1f5f9))); }
#space-video-dialog-host .profile-video-dialog { background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff)); }
.space-video-upload-action { display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;padding:.55rem .8rem;border-radius:.72rem;background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff;font-size:.64rem;font-weight:900;cursor:pointer; }
@media(max-width:700px){#space-video-dialog-host .profile-video-album-viewer{width:calc(100vw - 1rem);height:calc(100dvh - 1rem);border-radius:1.1rem}#space-video-dialog-host .profile-video-album-viewer-hero{padding:3.5rem 1rem 1rem}.space-video-library .space-profile-photo-field{min-height:22rem}}

/* Под альбомом блокируется и html, и body; стабильный scrollbar-gutter сохраняет ширину страницы. */
html.page-scroll-locked-soft,body.page-scroll-locked-soft { overflow:hidden!important; }
.space-profile-photo-field:has(.space-profile-albums-grid),.space-profile-albums-grid { overflow:visible!important; }
.space-profile-albums-grid>.album-card { min-width:0; }

@media (prefers-reduced-motion:reduce) {
  .album-complete-orbit,.album-complete-satellite,.album-complete-check,.album-library-complete-visual::after { animation-duration:8s!important; }
}

/* ------------[Единая медиатека профиля и пространства]------------ // Финальный слой выравнивает карточки, меню, кнопки и модальные окна в обоих контекстах. Модуль: «оформление интерфейса». Часть 1/1 */
html:root body .space-profile-photos-panel,
html:root body .space-video-library.profile-video-section {
  position:relative;isolation:isolate;min-width:0;overflow:visible!important;padding:1.5rem!important;
  border:1px solid var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0))!important;border-radius:1.4rem!important;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a))!important;
  box-shadow:0 1.35rem 3.2rem -2.35rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 45%,rgb(15 23 42/.3))!important;
}
html:root body .space-profile-media-layout { min-width:0;overflow:visible!important; }
html:root body .space-profile-media-head { min-width:0;align-items:flex-start;padding:.15rem 0 1rem; }
html:root body .space-profile-media-head>div { min-width:0; }
html:root body .space-profile-media-head h3 { margin:0;color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:1.05rem;line-height:1.15;letter-spacing:.04em;text-transform:none; }
html:root body .space-profile-photo-field {
  min-width:0;overflow:visible!important;padding:1rem;border:0!important;border-radius:1.1rem!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 5%,var(--vmesta-ui-soft,var(--adaptive-surface-2,#f1f5f9)))!important;
}
html:root body .space-profile-photo-grid { grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:1rem; }
html:root body .space-profile-albums-grid { grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))!important;gap:1rem!important;overflow:visible!important;isolation:isolate; }
html:root body .space-profile-albums-grid>.album-card { width:100%;min-width:0; }
html:root body .space-profile-albums-grid>.album-card:has(.album-card-menu:not(.hidden)) { z-index:180!important; }

html:root body .space-photo-delete {
  display:grid;width:2.2rem;height:2.2rem;place-items:center;border-color:color-mix(in srgb,#ef4444 28%,transparent);border-radius:.7rem;
  background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 92%,transparent);color:#ef4444;
  box-shadow:0 .7rem 1.6rem -.85rem rgb(15 23 42/.45);backdrop-filter:blur(12px);
}
html:root body .space-photo-delete:hover { border-color:#ef4444;background:#ef4444;color:#fff; }
html:root body .space-photo-delete svg { width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }

html:root body .profile-video-card { position:relative;isolation:isolate;overflow:visible!important;min-width:0; }
html:root body .profile-video-card:has(.media-card-menu:not(.hidden)),
html:root body .profile-video-album-viewer-card:has(.media-card-menu:not(.hidden)) { z-index:190!important;overflow:visible!important; }
html:root body .media-card-menu-wrap { position:absolute;z-index:35;top:.65rem;right:.65rem;display:block; }
html:root body .media-card-kebab {
  display:grid;width:2.35rem;height:2.35rem;min-height:2.35rem;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 28%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 91%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488));
  box-shadow:0 .55rem 1.25rem -.75rem rgb(15 23 42/.42);backdrop-filter:blur(14px);transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
html:root body .media-card-kebab:hover,
html:root body .media-card-kebab[aria-expanded="true"] { background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff;box-shadow:0 .8rem 1.7rem -.85rem var(--color-dynamic,var(--video-accent,#0d9488));transform:translateY(-1px); }
html:root body .media-card-kebab svg { width:1.1rem;height:1.1rem;fill:currentColor;stroke:none; }
html:root body .media-card-menu {
  position:absolute;z-index:45;top:calc(100% + .45rem);right:0;display:grid;width:14.5rem;max-width:calc(100vw - 2rem);padding:.4rem;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 18%,transparent);border-radius:.85rem;
  background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));box-shadow:0 1.4rem 3rem -1rem rgb(2 6 23/.46);
}
html:root body .media-card-menu.hidden { display:none!important; }
html:root body .media-card-menu>button {
  display:grid!important;width:100%!important;height:auto!important;min-height:2.65rem!important;grid-template-columns:1.7rem minmax(0,1fr)!important;align-items:center!important;gap:.65rem!important;
  padding:.55rem .65rem!important;border:0!important;border-radius:.62rem!important;background:transparent!important;color:inherit!important;font-size:.66rem!important;font-weight:850!important;text-align:left!important;
}
html:root body .media-card-menu>button:hover { background:color-mix(in srgb,var(--menu-action-color,var(--color-dynamic,var(--video-accent,#0d9488))) 10%,transparent)!important;color:var(--menu-action-color,var(--color-dynamic,var(--video-accent,#0d9488)))!important; }
html:root body .media-card-menu>button:first-child { --menu-action-color:#3b82f6; }
html:root body .media-card-menu>button.is-danger { --menu-action-color:#ef4444;color:#ef4444!important; }
html:root body .media-card-menu>button svg { width:1rem!important;height:1rem!important;padding:.16rem;border-radius:.35rem;background:color-mix(in srgb,var(--menu-action-color,var(--color-dynamic,var(--video-accent,#0d9488))) 13%,transparent);fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round;stroke-linejoin:round; }
html:root body .media-card-inline-actions { display:flex;align-items:center; }
html:root body .media-card-inline-actions .media-card-menu-wrap { position:relative;top:auto;right:auto; }
html:root body .media-card-inline-actions .media-card-menu { top:calc(100% + .35rem);right:0; }

html:root body :is(.profile-video-card,.space-video-card) .profile-video-cover { aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,#020617); }
html:root body :is(.profile-video-card,.space-video-card) .profile-video-cover video { display:block;width:100%;height:100%;object-fit:cover; }
html:root body .profile-video-play {
  display:grid!important;width:3.2rem!important;height:3.2rem!important;place-items:center!important;border:1px solid rgb(255 255 255/.55)!important;border-radius:999px!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 88%,transparent)!important;color:#fff!important;
  box-shadow:0 .8rem 1.8rem -.8rem rgb(2 6 23/.65)!important;opacity:1!important;backdrop-filter:blur(10px);transform:translate(-50%,-50%)!important;
}
html:root body .profile-video-play svg { width:1.3rem!important;height:1.3rem!important;fill:currentColor!important;stroke:none!important;transform:translateX(.08rem); }
html:root body .profile-video-cover:hover .profile-video-play { background:var(--color-dynamic,var(--video-accent,#0d9488))!important;transform:translate(-50%,-50%) scale(1.06)!important; }

html:root body .space-video-library .profile-video-grid,
html:root body .space-video-library .profile-video-album-grid { grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;overflow:visible!important; }
html:root body .space-video-library .profile-video-head-actions { flex-wrap:wrap;justify-content:flex-end; }
html:root body .space-video-library .space-profile-photo-field { min-height:22rem; }
html:root body .space-video-upload-action { gap:.45rem;min-height:2.45rem;padding:.55rem .9rem;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 32%,transparent);border-radius:.75rem;background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff;box-shadow:0 .7rem 1.5rem -.95rem var(--color-dynamic,var(--video-accent,#0d9488)); }
html:root body .space-video-upload-action:hover { filter:brightness(1.06);transform:translateY(-1px); }
html:root body .space-video-upload-action svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

html:root body .space-mini-modal-backdrop {
  position:fixed!important;z-index:23500!important;inset:0!important;display:grid!important;place-items:center!important;overflow:auto!important;padding:1rem!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,rgb(15 23 42/.74))!important;backdrop-filter:blur(12px)!important;
}
html:root body .space-mini-modal.album-unified-dialog { width:min(32rem,calc(100vw - 2rem))!important;max-height:calc(100dvh - 2rem)!important;overflow:auto!important; }
html:root body :is(.album-unified-dialog,#space-video-dialog-host .profile-video-dialog)>header>button svg,
html:root body :is(.album-viewer-close,.profile-video-album-viewer-close) svg { width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
html:root body #space-video-dialog-host .profile-video-dialog-backdrop { background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,rgb(15 23 42/.74));backdrop-filter:blur(12px); }
html:root body #space-video-dialog-host .profile-video-dialog { width:min(32rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 22%,transparent);border-radius:1.5rem;box-shadow:0 2rem 5rem -1rem rgb(2 6 23/.4); }
html:root body #space-video-dialog-host .profile-video-dialog>header>button { display:grid;width:2.45rem;height:2.45rem;place-items:center;border-radius:.78rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 10%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488)); }
html:root body #space-video-dialog-host .profile-video-dialog>header>button:hover { background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff; }
html:root body #space-video-dialog-host .profile-video-dialog>header>button:not(:has(svg)) { font-size:0; }
html:root body #space-video-dialog-host .profile-video-dialog>header>button:not(:has(svg))::before { content:"×";font-size:1.25rem;line-height:1; }

html:root body #space-video-dialog-host .profile-video-album-viewer-backdrop { position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem; }
html:root body #space-video-dialog-host .profile-video-album-viewer { width:100%;max-width:100rem;height:calc(100dvh - 3rem);max-height:calc(100dvh - 3rem);border-radius:1.75rem; }
html:root body #space-video-dialog-host .profile-video-album-viewer-hero { padding:2.25rem 3rem 1.75rem; }
html:root body #space-video-dialog-host .profile-video-album-viewer-hero h2 { font-size:clamp(3rem,5vw,5.2rem);line-height:1.08!important;letter-spacing:-.045em;text-transform:uppercase; }
html:root body #space-video-dialog-host .profile-video-album-viewer-head-actions { display:flex;width:fit-content;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto 0; }
html:root body #space-video-dialog-host .profile-video-album-viewer-head-actions>button,
html:root body #space-video-dialog-host .profile-video-album-add-menu-wrap>button { display:inline-flex;min-height:2.4rem;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .8rem;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 32%,transparent);border-radius:999px;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 9%,var(--adaptive-surface,#fff));color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 65%,var(--adaptive-text,#0f172a));font-size:.72rem;font-weight:800; }
html:root body #space-video-dialog-host .profile-video-album-viewer-head-actions>button:hover,
html:root body #space-video-dialog-host .profile-video-album-add-menu-wrap>button:hover,
html:root body #space-video-dialog-host .profile-video-album-viewer-head-actions>button.is-primary { border-color:var(--color-dynamic,var(--video-accent,#0d9488));background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar { display:flex;max-width:70rem;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto 0;padding:.55rem;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 24%,transparent);border-radius:1rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 6%,var(--adaptive-surface,#fff)); }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button { display:inline-flex;min-height:2.25rem;align-items:center;gap:.45rem;padding:.5rem .75rem;border-radius:.75rem;color:var(--adaptive-text,#475569);font-size:.68rem;font-weight:800; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button:hover:not(:disabled) { background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488)); }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button.is-danger { color:#ef4444; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button.is-save { background:var(--color-dynamic,var(--video-accent,#0d9488));color:#fff; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button:disabled { cursor:not-allowed;opacity:.28; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>small { width:100%;color:var(--adaptive-muted,#94a3b8);font-size:.55rem;font-weight:750;text-align:center; }
html:root body .profile-video-album-viewer-empty { width:100%;min-width:0; }
html:root body .profile-video-album-viewer-empty>.album-library-complete-state { width:min(100%,34rem);min-height:18rem;margin:auto; }

@media(max-width:760px){
  html:root body .space-profile-photos-panel,html:root body .space-video-library.profile-video-section{padding:1rem!important;border-radius:1.1rem!important}
  html:root body .space-profile-media-head{align-items:stretch;flex-direction:column}
  html:root body .space-profile-media-head-actions,html:root body .space-video-library .profile-video-head-actions{justify-content:flex-start}
  html:root body .space-profile-photo-grid,html:root body .space-profile-albums-grid,html:root body .space-video-library .profile-video-grid,html:root body .space-video-library .profile-video-album-grid{grid-template-columns:1fr!important}
  html:root body #space-video-dialog-host .profile-video-album-viewer-backdrop{padding:.5rem}
  html:root body #space-video-dialog-host .profile-video-album-viewer{height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem);border-radius:1.2rem}
  html:root body #space-video-dialog-host .profile-video-album-viewer-hero{padding:3rem 1rem 1rem}
  html:root body #space-video-dialog-host .profile-video-album-viewer-hero h2{font-size:clamp(2rem,11vw,3.25rem)}
  html:root body #space-video-dialog-host .profile-video-album-edit-toolbar>button span{display:none}
  html:root body #space-video-dialog-host .profile-video-album-viewer-body{padding:.5rem}
}

/* Финальные приоритеты V2.0.13: эти правила намеренно стоят после старых слоёв темы. */
html:root body .space-video-library.profile-video-library{position:relative;isolation:isolate;min-width:0;overflow:visible!important;padding:1.5rem!important;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 28%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;border-radius:1.4rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;box-shadow:0 1.35rem 3.2rem -2.35rem color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 45%,rgb(15 23 42/.3))!important}
html:root body .space-video-library .profile-video-library-head{align-items:flex-start;margin-bottom:1rem}html:root body .space-video-library .profile-video-library-head h2{margin:.2rem 0 0;font-size:1.25rem;line-height:1.15}html:root body .space-video-library .profile-video-library-head p{margin:.25rem 0 0}html:root body .space-video-library .profile-video-add{cursor:pointer}html:root body .space-video-library .profile-video-add input{display:none!important}
html:root body .album-unified-dialog,html:root body #space-video-dialog-host .profile-video-dialog{box-sizing:border-box!important;border:1.5px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 38%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 70%,transparent),0 2rem 5rem -1rem rgb(2 6 23/.42)!important}
html:root body .album-unified-dialog :is(input,select){box-sizing:border-box;border:1.5px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 32%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;background-color:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 5%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)))!important}
html:root body .space-access-tabs .album-access-option.album-visibility-option{display:grid!important;grid-template-columns:2.65rem minmax(0,1fr) 1rem!important;align-items:center!important;gap:.75rem!important}html:root body .space-access-tabs .album-access-option>span:nth-child(2){min-width:0;align-self:center}html:root body .space-access-tabs .album-access-option>i{justify-self:end;align-self:center}
.album-access-option.is-followers,.album-access-option.is-subscribers{--access-color:#8b5cf6}.album-access-option.is-managers{--access-color:#f59e0b}
html:root body .album-card-cover{position:relative;overflow:hidden!important}html:root body .album-card-empty-media{display:grid;width:100%!important;height:100%!important;min-height:0!important;place-items:center;overflow:hidden!important;border:0!important;border-radius:inherit!important;background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 17%,transparent),transparent 58%),color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 7%,var(--vmesta-ui-soft,var(--adaptive-surface-2,#f1f5f9)))!important;color:var(--color-dynamic,var(--video-accent,#0d9488))}html:root body .album-card-empty-media svg{display:block;width:min(7.5rem,52%)!important;height:auto!important;max-height:72%!important;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.album-empty-frame{fill:color-mix(in srgb,currentColor 9%,transparent)}.album-empty-glyph{fill:color-mix(in srgb,currentColor 16%,transparent)}.album-empty-orbit{stroke-dasharray:4 7;opacity:.48;transform-origin:47px 40px;animation:album-card-orbit 8s linear infinite}.album-empty-satellite{fill:currentColor;stroke:none;transform-origin:47px 40px;animation:album-card-orbit 5.5s linear infinite reverse}.album-empty-spark{stroke-width:2.5;transform-origin:17px 25px;animation:album-card-spark 2.6s ease-in-out infinite}@keyframes album-card-orbit{to{transform:rotate(360deg)}}@keyframes album-card-spark{0%,100%{opacity:.25;transform:scale(.72)}50%{opacity:1;transform:scale(1.12)}}
html:root body .album-viewer-empty-state{display:grid!important;min-height:18rem;place-items:center;align-content:center;gap:.65rem;padding:1.5rem;text-align:center}html:root body .album-viewer-empty-state>.album-card-empty-media{width:6rem!important;height:6rem!important;border-radius:1.35rem!important}html:root body .album-viewer-empty-state>.album-card-empty-media svg{width:4.8rem!important;max-height:none!important}html:root body .album-viewer-empty-state p{margin:0!important;color:var(--vmesta-ui-ink,var(--adaptive-text,#334155))!important;font-size:.78rem;font-weight:900}html:root body .album-viewer-empty-state small{color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.6rem;font-weight:700}
html:root body .profile-video-album-viewer-grid{overflow:visible!important;isolation:isolate}html:root body .profile-video-album-viewer-card{contain:layout!important;overflow:visible!important;isolation:isolate}html:root body .profile-video-album-viewer-media{overflow:hidden;contain:layout paint}html:root body .profile-video-album-viewer-card>div{position:relative;overflow:visible!important}html:root body .profile-video-album-viewer-card .media-card-inline-actions .media-card-menu{top:auto!important;right:0!important;bottom:calc(100% + .4rem)!important}
html:root body .media-delete-dialog>p{margin:0;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.7rem;line-height:1.55}html:root body .album-unified-dialog>footer>button.is-danger{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:#ef4444!important;color:#fff!important;opacity:1!important;box-shadow:0 .75rem 1.6rem -.9rem rgb(239 68 68/.75)!important}html:root body .album-unified-dialog>footer>button.is-danger:hover{background:#dc2626!important}html:root body .album-unified-dialog>footer>button.is-danger svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){html:root body .space-video-library.profile-video-library{padding:1rem!important;border-radius:1.1rem!important}html:root body .space-video-library .profile-video-library-head{align-items:stretch;flex-direction:column}html:root body .space-video-library .profile-video-head-actions{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.album-empty-orbit,.album-empty-satellite,.album-empty-spark{animation-duration:10s!important}}

/* Финальные приоритеты V2.0.14: общая геометрия медиа и корректный порядок вложенных окон. */
html:root body :is(.space-profile-photos-panel,.space-video-library.profile-video-library){box-sizing:border-box!important;width:100%!important;min-height:36rem!important;border-radius:1.5rem!important}
html:root body .space-profile-photo-field{box-sizing:border-box!important;width:100%!important;min-height:30rem!important;border-radius:1.25rem!important}
html:root body #space-video-dialog-host .profile-video-album-viewer-backdrop{z-index:1!important}
html:root body #space-video-dialog-host .profile-video-dialog-backdrop{z-index:8!important;pointer-events:auto!important}
html:root body :is(.album-viewer-close,.profile-video-album-viewer-close,.album-picker-close,.album-share-close){border-radius:.9rem!important}
html:root body .profile-video-album-viewer-empty>.album-library-complete-state{min-height:clamp(24rem,56vh,38rem)!important}
@media(max-width:760px){html:root body :is(.space-profile-photos-panel,.space-video-library.profile-video-library){min-height:0!important;border-radius:1.15rem!important}html:root body .space-profile-photo-field{min-height:22rem!important;border-radius:1rem!important}}

/* Финальные приоритеты V2.0.15: меню альбомов вынесены из обрезающих контейнеров. */
html:root body #album-floating-menu.album-floating-menu {
  position:fixed!important;z-index:32000!important;right:auto!important;bottom:auto!important;display:grid!important;max-width:calc(100vw - 1rem)!important;max-height:min(24rem,calc(100dvh - 1rem))!important;
  overflow-y:auto!important;padding:.5rem!important;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 24%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;
  border-radius:1rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a))!important;
  box-shadow:0 1.8rem 4.5rem -1.2rem rgb(2 6 23/.56)!important;backdrop-filter:blur(18px)!important;isolation:isolate!important;
}
html:root body #album-floating-menu.album-floating-menu>button { min-height:3rem!important;border-radius:.72rem!important; }
html:root body #album-floating-menu.album-floating-menu>button:hover { background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 10%,transparent)!important; }
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer,#space-video-dialog-host .profile-video-album-viewer)>.album-viewer-header {
  position:relative!important;z-index:60!important;
}
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer,#space-video-dialog-host .profile-video-album-viewer)>.album-viewer-body {
  position:relative!important;z-index:1!important;
}
html:root body .album-card { contain:none!important;overflow:visible!important; }
html:root body :is(#albums-placeholder,.space-profile-albums-grid,.profile-video-album-grid) { contain:none!important;overflow:visible!important; }

html:root body .space-delete-modal-content {
  width:min(25rem,calc(100vw - 2rem))!important;max-width:25rem!important;border-radius:2rem!important;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff))!important;
}
html:root body .space-delete-modal-content>div:first-child { padding:2rem 2rem 1rem!important; }
html:root body .space-delete-modal-content>div:last-child { padding:1rem 1.5rem 1.5rem!important; }
html:root body #space-album-delete-modal .media-delete-confirm { width:min(27rem,calc(100vw - 2rem))!important;max-width:27rem!important; }

html:root body .profile-video-library-upload-dialog { width:min(35rem,calc(100vw - 2rem))!important;gap:1.1rem!important; }
html:root body .profile-video-library-file>small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.56rem;font-weight:700; }
html:root body .profile-video-library-file>input[type="file"] { height:auto!important;min-height:3.4rem!important;padding:.55rem!important;cursor:pointer; }
html:root body .profile-video-library-file>input[type="file"]::file-selector-button {
  min-height:2.25rem;margin-right:.7rem;padding:.45rem .75rem;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 12%,transparent);color:var(--color-dynamic,var(--video-accent,#0d9488));font-size:.64rem;font-weight:900;cursor:pointer;
}
html:root body .profile-video-publish-choice {
  display:grid!important;grid-template-columns:2.7rem minmax(0,1fr)!important;align-items:center!important;gap:.8rem!important;padding:.8rem!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 18%,var(--vmesta-ui-line,var(--adaptive-border,#e2e8f0)))!important;border-radius:1rem!important;
  background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#0d9488)) 6%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)))!important;cursor:pointer;
}
html:root body .profile-video-publish-choice>input[type="checkbox"] {
  appearance:none!important;width:2.7rem!important;height:1.55rem!important;min-height:1.55rem!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;
  background:var(--vmesta-ui-line,var(--adaptive-border,#cbd5e1))!important;box-shadow:inset 0 0 0 1px rgb(15 23 42/.08)!important;cursor:pointer;transition:background .18s ease!important;
}
html:root body .profile-video-publish-choice>input[type="checkbox"]::before { content:"";display:block;width:1.15rem;height:1.15rem;margin:.2rem;border-radius:999px;background:#fff;box-shadow:0 .2rem .5rem rgb(15 23 42/.22);transition:transform .18s ease; }
html:root body .profile-video-publish-choice>input[type="checkbox"]:checked { background:var(--color-dynamic,var(--video-accent,#0d9488))!important; }
html:root body .profile-video-publish-choice>input[type="checkbox"]:checked::before { transform:translateX(1.15rem); }
html:root body .profile-video-publish-choice>span { display:grid;gap:.18rem;min-width:0; }
html:root body .profile-video-publish-choice strong { color:var(--vmesta-ui-ink,var(--adaptive-text,#0f172a));font-size:.7rem;font-weight:900; }
html:root body .profile-video-publish-choice small { color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.56rem;font-weight:700;line-height:1.4; }
html:root body .profile-video-library-upload-dialog>footer .is-primary svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* Финальные приоритеты V2.0.16: доступные крестики, стабильные медиа и единая отправка альбомов. */
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer,#space-video-dialog-host .profile-video-album-viewer) > :is(.album-viewer-close,.profile-video-album-viewer-close) {
  position:absolute!important;z-index:140!important;top:1rem!important;right:1rem!important;display:grid!important;width:2.8rem!important;height:2.8rem!important;min-width:2.8rem!important;min-height:2.8rem!important;place-items:center!important;padding:0!important;
  border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#15945a)) 25%,var(--vmesta-ui-line,var(--adaptive-border,#dbe7e1)))!important;border-radius:.9rem!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 94%,transparent)!important;color:var(--color-dynamic,var(--video-accent,#168653))!important;
  box-shadow:0 .8rem 2rem -.95rem rgb(15 23 42/.42)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;cursor:pointer!important;backdrop-filter:blur(14px)!important;
}
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer,#space-video-dialog-host .profile-video-album-viewer) > :is(.album-viewer-close,.profile-video-album-viewer-close):hover { border-color:var(--color-dynamic,var(--video-accent,#15945a))!important;background:var(--color-dynamic,var(--video-accent,#15945a))!important;color:#fff!important;transform:translateY(-1px); }
html:root body :is(#album-viewer-panel,#profile-video-dialog-host .profile-video-album-viewer,#space-video-dialog-host .profile-video-album-viewer) > :is(.album-viewer-close,.profile-video-album-viewer-close) svg { display:block!important;width:1.15rem!important;height:1.15rem!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;opacity:1!important; }

html:root body #album-floating-menu.album-card-menu>button { --menu-icon-color:var(--color-dynamic,var(--video-accent,#168653));color:var(--vmesta-ui-ink,var(--adaptive-text,#163f2c))!important; }
html:root body #album-floating-menu.album-card-menu>button:nth-child(1) { --menu-icon-color:#3b82f6; }
html:root body #album-floating-menu.album-card-menu>button:nth-child(2) { --menu-icon-color:#8b5cf6; }
html:root body #album-floating-menu.album-card-menu>button:nth-child(3),html:root body #album-floating-menu.album-card-menu>button.is-danger { --menu-icon-color:#ef4444;color:#ef4444!important; }
html:root body #album-floating-menu.album-card-menu>button svg,html:root body #album-floating-menu.album-action-menu>button svg {
  width:1.15rem!important;height:1.15rem!important;padding:.18rem!important;border-radius:.4rem!important;background:color-mix(in srgb,var(--menu-icon-color,var(--color-dynamic,var(--video-accent,#168653))) 13%,transparent)!important;color:var(--menu-icon-color,var(--color-dynamic,var(--video-accent,#168653)))!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}

html:root body .album-viewer-body,html:root body .profile-video-album-viewer-body { overflow-anchor:none!important; }
html:root body .album-photo-wall.is-single { align-content:start!important; }
html:root body .album-photo-wall.is-single .album-photo-tile { display:grid!important;height:clamp(24rem,60vh,44rem)!important;min-height:24rem!important;place-items:center!important;overflow:hidden!important; }
html:root body .album-photo-wall.is-single .album-photo-tile img { width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:contain!important; }
html:root body .album-photo-wall.is-pair .album-photo-tile,html:root body .album-photo-wall.is-gallery .album-photo-tile { aspect-ratio:4/3!important;grid-row-end:auto!important;overflow:hidden!important; }
html:root body .album-photo-wall.is-pair .album-photo-tile img,html:root body .album-photo-wall.is-gallery .album-photo-tile img { width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:cover!important; }
html:root body .profile-video-album-viewer-grid { align-content:start!important; }
html:root body .profile-video-album-viewer-media { aspect-ratio:16/10!important;min-height:0!important; }
html:root body .profile-video-album-viewer-media>video { display:block!important;width:100%!important;height:100%!important;object-fit:cover!important; }

html:root body .media-album-share-backdrop { position:fixed;z-index:34000;inset:0;display:grid;place-items:center;overflow:auto;padding:1rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 12%,rgb(15 23 42/.76));backdrop-filter:blur(14px);opacity:0;transition:opacity .16s ease; }
html:root body .media-album-share-backdrop.is-open { opacity:1; }
html:root body .media-album-share-dialog { position:relative;display:grid;width:min(31rem,calc(100vw - 2rem));justify-items:center;gap:.7rem;padding:2.25rem 2rem 1.7rem;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 25%,var(--vmesta-ui-line,var(--adaptive-border,#dbe7e1)));border-radius:2rem;background:var(--vmesta-ui-panel,var(--adaptive-surface,#fff));color:var(--vmesta-ui-ink,var(--adaptive-text,#163f2c));box-shadow:0 2.5rem 6rem -1.25rem rgb(2 6 23/.58);text-align:center; }
html:root body .media-album-share-close { position:absolute;z-index:2;top:1rem;right:1rem;display:grid;width:2.8rem;height:2.8rem;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 22%,transparent);border-radius:.9rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 9%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)));color:var(--color-dynamic,var(--video-accent,#168653));cursor:pointer; }
html:root body .media-album-share-close:hover { background:var(--color-dynamic,var(--video-accent,#168653));color:#fff; }
html:root body .media-album-share-close svg,html:root body .media-album-share-dialog footer svg { width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
html:root body .media-album-share-hero { display:grid;width:5rem;height:5rem;place-items:center;margin-top:.25rem;border-radius:1.45rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 12%,transparent);color:var(--color-dynamic,var(--video-accent,#168653)); }
html:root body .media-album-share-hero svg { width:2.5rem;height:2.5rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
html:root body .media-album-share-kicker { color:var(--color-dynamic,var(--video-accent,#168653));font-size:.62rem;font-weight:950;letter-spacing:.18em; }
html:root body .media-album-share-dialog h3 { margin:0;max-width:24rem;color:var(--vmesta-ui-heading,var(--adaptive-heading,#1d4f91));font-size:1.45rem;line-height:1.18;overflow-wrap:anywhere; }
html:root body .media-album-share-dialog p { margin:0;max-width:24rem;color:var(--vmesta-ui-muted,var(--adaptive-muted,#64748b));font-size:.72rem;line-height:1.55; }
html:root body .media-album-share-dialog footer { display:grid;width:100%;grid-template-columns:1fr 1.3fr;gap:.65rem;margin-top:.55rem; }
html:root body .media-album-share-dialog footer button { display:inline-flex;min-height:3rem;align-items:center;justify-content:center;gap:.45rem;padding:.65rem 1rem;border:0;border-radius:.9rem;background:color-mix(in srgb,var(--color-dynamic,var(--video-accent,#168653)) 8%,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)));color:var(--color-dynamic,var(--video-accent,#168653));font-size:.72rem;font-weight:900;cursor:pointer; }
html:root body .media-album-share-dialog footer button.is-primary { background:var(--color-dynamic,var(--video-accent,#168653));color:#fff;box-shadow:0 .75rem 1.7rem -.95rem var(--color-dynamic,var(--video-accent,#168653)); }
@media(max-width:520px){html:root body .media-album-share-dialog{padding:4.2rem 1rem 1rem;border-radius:1.4rem}html:root body .media-album-share-dialog footer{grid-template-columns:1fr}}

/* Финальные приоритеты V2.0.17: компактные фото пространства и единая загрузка видео. */
html:root body .space-profile-photo-grid {
  grid-template-columns:repeat(auto-fill,minmax(8.75rem,10.75rem))!important;
  justify-content:start!important;
  align-content:start!important;
}
html:root body .space-profile-photo-tile {
  width:100%!important;
  max-width:10.75rem!important;
  aspect-ratio:1!important;
}
html:root body .profile-video-library-upload-dialog>footer>button.is-primary {
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem!important;
  white-space:nowrap;
}
html:root body .profile-video-library-upload-dialog>footer>button.is-primary .video-library-upload-icon {
  display:block!important;
  width:1.15rem!important;
  height:1.15rem!important;
  flex:0 0 1.15rem!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html:root body .space-video-library-upload-dialog {
  width:min(35rem,calc(100vw - 2rem))!important;
}
@media(max-width:760px){
  html:root body .space-profile-photo-grid {
    grid-template-columns:repeat(auto-fill,minmax(8.75rem,10.75rem))!important;
  }
}
@media(max-width:390px){
  html:root body .space-profile-photo-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html:root body .space-profile-photo-tile {
    max-width:10.75rem!important;
  }
}

/* Финальные приоритеты V2.0.18: медиаблоки без внешней обводки. */
html:root body :is(
  #tab-photos>div,
  #side-photos>div,
  #profile-videos-root>.profile-video-library,
  .space-profile-photos-panel,
  .space-profile-showcase-card,
  .space-video-library.profile-video-library
) {
  border:0!important;
  outline:0!important;
}

/* Кнопка удаления фотографии профиля повторяет контрол пространства. */
html:root body :is(.space-photo-delete,.profile-photo-delete) {
  position:absolute!important;
  z-index:20!important;
  top:.4rem!important;
  right:.4rem!important;
  display:grid!important;
  width:2.2rem!important;
  height:2.2rem!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,#ef4444 28%,transparent)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,var(--adaptive-surface,#fff)) 92%,transparent)!important;
  color:#ef4444!important;
  box-shadow:0 .7rem 1.6rem -.85rem rgb(15 23 42/.45)!important;
  opacity:0;
  transform:translateY(-.25rem);
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:opacity .16s ease,transform .16s ease,background .16s ease,color .16s ease;
}
html:root body #photos-list-container>.group:is(:hover,:focus-within)>.profile-photo-delete,
html:root body .profile-photo-delete:is(:hover,:focus-visible),
html:root body .space-profile-photo-tile:is(:hover,:focus-visible)>.space-photo-delete {
  opacity:1!important;
  transform:translateY(0)!important;
}
html:root body :is(.space-photo-delete,.profile-photo-delete):hover {
  border-color:#ef4444!important;
  background:#ef4444!important;
  color:#fff!important;
}
html:root body :is(.space-photo-delete,.profile-photo-delete) svg {
  display:block;
  width:1.05rem!important;
  height:1.05rem!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
@media(hover:none){
  html:root body .profile-photo-delete,
  html:root body .space-photo-delete {
    opacity:1!important;
    transform:none!important;
  }
}

/* Финальные приоритеты V2.0.19: зелёное поле видеотеки как у фотографий. */
html:root body #profile-videos-root .profile-video-field {
  box-sizing:border-box!important;
  width:100%!important;
  min-height:30rem!important;
  margin-top:1.25rem!important;
  padding:1.25rem!important;
  overflow:visible!important;
  border:0!important;
  border-radius:1.25rem!important;
  background:var(--vmesta-ui-soft,var(--adaptive-surface-2,#e3f2e9))!important;
  box-shadow:none!important;
}
html:root body #profile-videos-root .profile-video-field :is(.profile-video-grid,.profile-video-album-grid,.profile-video-loading) {
  align-content:start!important;
}
@media(max-width:760px){
  html:root body #profile-videos-root .profile-video-field {
    min-height:22rem!important;
    margin-top:1rem!important;
    padding:1rem!important;
    border-radius:1rem!important;
  }
}

/* Финальные приоритеты V2.0.20: зелёное поле видеотеки пространства как у фотографий. */
html:root body .space-video-library .space-video-field {
  box-sizing:border-box!important;
  width:100%!important;
  min-height:30rem!important;
  margin-top:1.25rem!important;
  padding:1.25rem!important;
  overflow:visible!important;
  border:0!important;
  border-radius:1.25rem!important;
  background:var(--vmesta-ui-soft,var(--adaptive-surface-2,#e3f2e9))!important;
  box-shadow:none!important;
}
html:root body .space-video-library .space-video-field :is(.profile-video-grid,.profile-video-album-grid,.profile-video-loading) {
  align-content:start!important;
}
@media(max-width:760px){
  html:root body .space-video-library .space-video-field {
    min-height:22rem!important;
    margin-top:1rem!important;
    padding:1rem!important;
    border-radius:1rem!important;
  }
}

/* Финальные приоритеты V2.0.21: индикаторы и действия видеокарточек внутри дополнительного меню. */
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-kebab svg {
  width:1.4rem!important;
  height:1.4rem!important;
}
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu {
  width:16.5rem!important;
  padding:.5rem!important;
  border-radius:1rem!important;
}
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu>button,
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu-indicator {
  box-sizing:border-box!important;
  display:grid!important;
  width:100%!important;
  min-height:3.25rem!important;
  grid-template-columns:2.2rem minmax(0,1fr)!important;
  align-items:center!important;
  gap:.75rem!important;
  padding:.65rem .7rem!important;
  border:0!important;
  border-radius:.72rem!important;
  font-size:.75rem!important;
  font-weight:850!important;
  line-height:1.25!important;
  text-align:left!important;
}
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu>button svg,
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu-indicator svg {
  box-sizing:content-box!important;
  width:1.3rem!important;
  height:1.3rem!important;
  padding:.28rem!important;
  border-radius:.48rem!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu>button.is-album-action { --menu-action-color:#8b5cf6; }
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu>button.is-post-action { --menu-action-color:#0ea5e9; }
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu-indicator {
  margin-top:.25rem!important;
  background:color-mix(in srgb,var(--indicator-color,#22a65a) 9%,transparent)!important;
  color:color-mix(in srgb,var(--indicator-color,#22a65a) 76%,var(--vmesta-ui-ink,var(--adaptive-text,#0f172a)))!important;
  cursor:default!important;
}
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu-indicator.is-post { --indicator-color:#0ea5e9; }
html:root body :is(#profile-videos-root,.space-video-library,#profile-video-dialog-host,#space-video-dialog-host) .media-card-menu-indicator svg {
  background:color-mix(in srgb,var(--indicator-color,#22a65a) 15%,transparent)!important;
}
html:root body :is(#profile-videos-root,.space-video-library) .profile-video-card-copy {
  min-height:3.25rem!important;
  align-items:center!important;
}
/* ------------[Подарки VMESTA]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 1/1 */
.gift-header-button{position:relative;border:0;background:transparent;padding:0;cursor:pointer}.gift-header-badge{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#f43f5e;color:#fff;font-size:8px;font-weight:900;line-height:14px;text-align:center;box-shadow:0 5px 14px rgba(244,63,94,.35)}.dark .gift-header-badge{border-color:#0f172a}
.profile-gifts-card{margin-top:16px;padding:20px;border-radius:18px;background:var(--vmesta-left-reference-surface,#fff);box-shadow:0 4px 18px rgba(28,67,92,.055)}.profile-gifts-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.profile-gifts-card>header div{display:flex;flex-direction:column}.profile-gifts-card>header span{font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#178a4b}.profile-gifts-card>header span b{display:inline-grid;place-items:center;min-width:21px;height:21px;margin-left:5px;padding:0 6px;border-radius:999px;background:#e9f4ed;color:#168a4b;font-size:9px;letter-spacing:0}.profile-gifts-card>header small{margin-top:3px;font-size:8px;font-weight:800;color:#7b96ad}.profile-gifts-card>header button{border:0;border-radius:12px;background:#e7f3eb;color:#16864a;padding:7px 10px;font-size:8px;font-weight:900;text-transform:uppercase;cursor:pointer}.profile-gifts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.profile-gifts-grid>i{height:70px;border-radius:14px;background:#edf4f7;animation:gift-pulse 1.2s ease-in-out infinite alternate}.profile-gift-item{min-width:0;height:78px;border:1px solid rgba(41,159,91,.09);border-radius:15px;background:linear-gradient(145deg,#f4fbf7,#eaf3fa);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.18s ease}.profile-gift-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(31,114,71,.12)}.profile-gift-item span{font-size:30px;line-height:1}.profile-gift-item small{max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#41627a;font-size:7px;font-weight:800}.profile-gifts-empty{grid-column:1/-1;min-height:92px;border:1px dashed rgba(31,151,80,.22);border-radius:16px;background:#f0f8f3;color:#2a7950;display:flex;align-items:center;justify-content:center;gap:10px;font-size:9px;font-weight:900;cursor:pointer}.profile-gifts-empty svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.gift-center-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px}.gift-center-modal.hidden{display:none}.gift-center-backdrop{position:absolute;inset:0;background:rgba(11,35,42,.72);backdrop-filter:blur(12px)}.gift-center-dialog{position:relative;width:min(1120px,calc(100vw - 32px));max-height:min(880px,calc(100vh - 36px));overflow:hidden;border:1px solid rgba(109,195,145,.42);border-radius:30px;background:#f8fbfa;box-shadow:0 30px 100px rgba(3,26,34,.38);display:flex;flex-direction:column}.gift-center-close{position:absolute;right:22px;top:22px;z-index:2;width:52px;height:52px;border:1px solid #cfe2d7;border-radius:16px;background:#eaf5ee;color:#168d4a;display:grid;place-items:center;cursor:pointer;transition:.16s ease}.gift-center-close:hover{transform:rotate(4deg) scale(1.04);background:#dff2e6}.gift-center-close svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2}.gift-center-head{display:flex;align-items:center;gap:18px;padding:26px 86px 18px 28px;background:linear-gradient(135deg,#fff 0%,#edf8f1 62%,#fff1f4 100%)}.gift-center-head>span{width:64px;height:64px;flex:0 0 auto;border-radius:20px;background:linear-gradient(145deg,#ffedf1,#fff);color:#ee4b6d;display:grid;place-items:center;box-shadow:0 12px 26px rgba(236,72,113,.12)}.gift-center-head>span svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8}.gift-center-head small{font-size:9px;font-weight:900;letter-spacing:.2em;color:#169052}.gift-center-head h2{margin:4px 0 3px;color:#174e8d;font-size:25px;line-height:1;font-weight:900}.gift-center-head p{margin:0;color:#6a859b;font-size:11px;font-weight:700}.gift-center-tabs{display:flex;gap:8px;padding:0 28px 14px;background:#fff}.gift-center-tabs button{border:0;border-radius:14px;background:#edf4f0;color:#62806f;padding:10px 18px;font-size:10px;font-weight:900;text-transform:uppercase;cursor:pointer}.gift-center-tabs button.is-active{background:#229653;color:#fff;box-shadow:0 8px 18px rgba(34,150,83,.18)}.gift-center-tabs b{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:4px;border-radius:999px;background:rgba(255,255,255,.82);color:#e94765;font-size:8px}.gift-center-content{min-height:360px;overflow:auto;padding:22px 28px 28px}.gift-catalog-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:22px}.gift-catalog-search{width:min(300px,100%);margin:0 0 12px auto;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfe2d7;border-radius:14px;background:#fff;color:#209452}.gift-catalog-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.gift-catalog-search input{width:100%;height:40px;border:0;outline:0;background:transparent;color:#1d5078;font:800 10px inherit}.gift-theme-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:13px}.gift-theme-tabs button{flex:0 0 auto;border:1px solid #dbeae1;border-radius:999px;background:#fff;color:#5c7b6a;padding:8px 12px;font-size:9px;font-weight:900;cursor:pointer}.gift-theme-tabs button.is-active{border-color:#259753;background:#e2f3e8;color:#177b43}.gift-catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(105px,1fr));gap:10px}.gift-search-empty{grid-column:1/-1;min-height:220px;border:1px dashed #cfe2d7;border-radius:20px;display:grid;place-items:center;color:#789186;font-size:10px;font-weight:800}.gift-catalog-item{min-height:132px;border:1px solid #e0ebe5;border-radius:19px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;cursor:pointer;transition:.18s ease}.gift-catalog-item:hover{transform:translateY(-2px);border-color:#9bd6b4;box-shadow:0 10px 25px rgba(32,111,67,.09)}.gift-catalog-item.is-selected{border:2px solid #2b9b58;background:linear-gradient(145deg,#f2fff6,#fff3f6);box-shadow:0 12px 25px rgba(34,150,83,.12)}.gift-catalog-item>span{font-size:45px;line-height:1}.gift-catalog-item strong{color:#1d5078;font-size:10px;font-weight:900;text-align:center}.gift-catalog-item small{color:#91a4b1;font-size:7px;font-weight:800;text-transform:uppercase}.gift-compose-card{position:sticky;top:0;align-self:start;padding:20px;border:1px solid #d9e9df;border-radius:22px;background:#fff;box-shadow:0 14px 35px rgba(29,71,54,.08)}.gift-compose-card>small{font-size:8px;font-weight:900;letter-spacing:.18em;color:#1a9450}.gift-compose-preview{display:flex;align-items:center;gap:12px;margin:12px 0 17px;padding:13px;border-radius:17px;background:linear-gradient(135deg,#edf9f1,#fff0f4)}.gift-compose-preview>span{font-size:42px}.gift-compose-preview div{display:flex;flex-direction:column;min-width:0}.gift-compose-preview strong{color:#204f7c;font-size:12px}.gift-compose-preview small{color:#7e98aa;font-size:8px;margin-top:3px}.gift-compose-card>label:not(.gift-anonymous-switch){display:block;margin-top:12px}.gift-compose-card>label>span{display:block;margin-bottom:6px;color:#347456;font-size:9px;font-weight:900}.gift-recipient-field{display:flex;align-items:center;border:1px solid #bfd9ca;border-radius:14px;background:#f8fbf9;overflow:hidden}.gift-recipient-field b{padding-left:12px;color:#239151}.gift-recipient-field input,.gift-compose-card textarea{width:100%;border:0;outline:0;background:transparent;color:#1c4f76;padding:11px;font:800 11px inherit;resize:vertical}.gift-compose-card textarea{border:1px solid #bfd9ca;border-radius:14px;background:#f8fbf9}.gift-anonymous-switch{display:flex;gap:10px;align-items:flex-start;margin:14px 0;cursor:pointer}.gift-anonymous-switch+.gift-anonymous-switch{margin-top:-4px}.gift-anonymous-switch input{position:absolute;opacity:0}.gift-anonymous-switch>i{width:39px;height:23px;flex:0 0 auto;border-radius:999px;background:#c8d8e0;position:relative;transition:.18s}.gift-anonymous-switch>i:after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 2px 5px rgba(0,0,0,.14)}.gift-anonymous-switch input:checked+i{background:#259752}.gift-anonymous-switch input:checked+i:after{transform:translateX(16px)}.gift-anonymous-switch>span{display:flex;flex-direction:column}.gift-anonymous-switch strong{color:#2c5d78;font-size:9px}.gift-anonymous-switch small{margin-top:3px;color:#91a1ad;font-size:7px;line-height:1.35}.gift-send-button{width:100%;border:0;border-radius:15px;background:#229653;color:#fff;padding:12px 15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(34,150,83,.18)}.gift-send-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.gift-send-button:disabled{opacity:.55;cursor:wait}.gift-inbox-list{display:grid;gap:12px}.gift-inbox-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:16px;padding:15px;border:1px solid #d9e9df;border-radius:20px;background:#fff}.gift-inbox-art{width:70px;height:70px;border-radius:20px;background:linear-gradient(145deg,#ebf9ef,#fff0f4);display:grid;place-items:center;font-size:40px}.gift-inbox-copy{display:flex;flex-direction:column;min-width:0}.gift-inbox-copy small{color:#15904e;font-size:8px;font-weight:900;letter-spacing:.14em}.gift-inbox-copy strong{margin-top:4px;color:#1c4e7c;font-size:15px}.gift-inbox-copy p{margin:5px 0 0;color:#6e8799;font-size:10px}.gift-inbox-actions{display:flex;gap:8px}.gift-inbox-actions button,.gift-empty-state button{border:0;border-radius:13px;background:#229653;color:#fff;padding:10px 15px;font-size:9px;font-weight:900;cursor:pointer}.gift-inbox-actions .is-decline{background:#f3f6f5;color:#df4c60}.gift-empty-state{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#537486}.gift-empty-state>span{width:82px;height:82px;border-radius:25px;background:#e8f6ed;color:#269657;display:grid;place-items:center}.gift-empty-state svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.7}.gift-empty-state strong{margin-top:16px;color:#20517f;font-size:17px}.gift-empty-state p{margin:6px 0 17px;font-size:10px}.gift-center-loading{height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#719082;font-size:10px;font-weight:900;text-transform:uppercase}.gift-center-loading i{width:36px;height:36px;border:3px solid #dcebe2;border-top-color:#249653;border-radius:50%;animation:gift-spin .8s linear infinite}
.gift-notif-item{display:flex;align-items:center;gap:10px;margin-bottom:7px;padding:10px;border:1px solid #f5cad4;border-radius:15px;background:linear-gradient(135deg,#fff5f7,#f2fbf5)}.gift-notif-icon{width:42px;height:42px;flex:0 0 auto;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 6px 15px rgba(213,70,104,.11)}.gift-notif-copy{min-width:0;flex:1}.gift-notif-copy>strong{display:block;color:#db4663;font-size:10px}.gift-notif-copy p{margin:2px 0 7px;color:#48677a;font-size:9px;line-height:1.35}.gift-notif-copy>div{display:flex;gap:5px}.gift-notif-copy button,.birthday-gift-action{border:0;border-radius:9px;background:#249653;color:#fff;padding:6px 9px;font-size:8px;font-weight:900;cursor:pointer}.gift-notif-copy button.is-decline{background:#eef3f1;color:#d94b61}.birthday-gift-action{margin-top:7px;background:#e53d69}.messenger-gift-card{position:relative;isolation:isolate;min-width:min(280px,70vw);overflow:hidden;border-radius:19px;background:linear-gradient(135deg,#fff0f4,#f1fff5);padding:15px;display:flex;align-items:center;gap:13px;color:#1b507c}.messenger-gift-card-glow{position:absolute;z-index:-1;right:-35px;top:-45px;width:120px;height:120px;border-radius:50%;background:rgba(248,89,128,.17);filter:blur(2px)}.messenger-gift-card-icon{width:62px;height:62px;flex:0 0 auto;border-radius:18px;background:rgba(255,255,255,.78);display:grid;place-items:center;font-size:38px;box-shadow:0 8px 18px rgba(31,83,62,.1)}.messenger-gift-card>div:last-child{display:flex;flex-direction:column}.messenger-gift-card small{color:#df4567;font-size:7px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.messenger-gift-card strong{margin-top:3px;font-size:12px}.messenger-gift-card p{margin:5px 0 0!important;color:#527084!important;font-size:9px!important;line-height:1.4!important}.messenger-bubble:has(.messenger-gift-card){background:transparent!important;border-color:transparent!important;box-shadow:none!important;padding:0!important}.messenger-bubble:has(.messenger-gift-card)>span{padding:0 8px 4px}
.gift-notif-status{display:inline-flex;margin-top:4px;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:900;text-transform:uppercase}.gift-notif-status.is-accepted{background:#dff3e6;color:#188247}.gift-notif-status.is-declined{background:#f3eeee;color:#a66770}
.dark .profile-gifts-card,.dark .gift-compose-card,.dark .gift-catalog-item,.dark .gift-inbox-item{background:#111c2b;border-color:#23364b}.dark .profile-gift-item{background:linear-gradient(145deg,#142637,#182232);border-color:#294052}.dark .profile-gift-item small,.dark .gift-center-head p,.dark .gift-compose-card input,.dark .gift-compose-card textarea,.dark .gift-catalog-search input{color:#a8bbca}.dark .gift-center-dialog{background:#0f1928;border-color:#2a5940}.dark .gift-center-head{background:linear-gradient(135deg,#111d2c,#13291f,#261823)}.dark .gift-center-tabs{background:#111d2c}.dark .gift-center-tabs button{background:#1b2b36;color:#9bb0a4}.dark .gift-theme-tabs button,.dark .gift-catalog-search{background:#152332;border-color:#294034;color:#a5bcb0}.dark .gift-catalog-item strong,.dark .gift-compose-preview strong,.dark .gift-inbox-copy strong,.dark .gift-empty-state strong{color:#d9e9ff}.dark .gift-compose-preview,.dark .gift-inbox-art{background:linear-gradient(135deg,#183326,#2b1c29)}.dark .gift-recipient-field,.dark .gift-compose-card textarea{background:#121f2d;border-color:#2e493a}.dark .gift-anonymous-switch strong,.dark .gift-inbox-copy p{color:#b6c6d1}.dark .gift-notif-item{background:linear-gradient(135deg,#2b1720,#14281d);border-color:#563141}.dark .messenger-gift-card{background:linear-gradient(135deg,#371b27,#183326);color:#e0edff}
@keyframes gift-spin{to{transform:rotate(360deg)}}@keyframes gift-pulse{to{opacity:.48}}
@media(max-width:850px){.gift-center-modal{padding:8px}.gift-center-dialog{width:100%;max-height:calc(100vh - 16px);border-radius:22px}.gift-center-head{padding:20px 72px 15px 18px}.gift-center-head>span{width:52px;height:52px;border-radius:16px}.gift-center-head h2{font-size:20px}.gift-center-head p{display:none}.gift-center-close{right:14px;top:14px;width:44px;height:44px}.gift-center-tabs{padding:0 18px 12px}.gift-center-content{padding:16px}.gift-catalog-layout{grid-template-columns:1fr}.gift-compose-card{position:static}.gift-catalog-grid{grid-template-columns:repeat(3,minmax(88px,1fr))}.gift-inbox-item{grid-template-columns:58px minmax(0,1fr)}.gift-inbox-art{width:56px;height:56px;font-size:32px}.gift-inbox-actions{grid-column:1/-1}.gift-inbox-actions button{flex:1}}@media(max-width:500px){.gift-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gift-catalog-item{min-height:116px}.gift-catalog-item>span{font-size:38px}.gift-center-head>span{display:none}.gift-center-head{padding-right:68px}.gift-center-head h2{font-size:18px}}
.gift-recipient-field input,.gift-compose-card textarea{font-family:inherit;font-size:11px;font-weight:800}
.gift-catalog-search input{font-family:inherit!important;font-size:10px!important;font-weight:800!important}

/* ------------[История и подробности подарков]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 1/1 */
.gift-history-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:4px 2px}.gift-history-head small{color:#209452;font-size:8px;font-weight:900;letter-spacing:.18em}.gift-history-head h3{margin:4px 0 2px;color:#1c4f86;font-size:20px;font-weight:900}.gift-history-head p{margin:0;color:#7790a1;font-size:10px;font-weight:700}.gift-history-head>button{border:0;border-radius:14px;background:#229653;color:#fff;padding:10px 15px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;cursor:pointer}.gift-history-head>button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.gift-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gift-history-item{position:relative;width:100%;min-width:0;border:1px solid #dceae2;border-radius:21px;background:#fff;padding:14px;display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:.18s ease}.gift-history-item:hover{transform:translateY(-2px);border-color:#95d1ae;box-shadow:0 12px 30px rgba(26,93,59,.1)}.gift-history-art{width:72px;height:72px;border-radius:20px;background:linear-gradient(145deg,#e9f8ee,#fff0f4);display:grid;place-items:center;font-size:40px}.gift-history-copy{min-width:0;display:flex;flex-direction:column}.gift-history-copy>small{color:#249653;font-size:7px;font-weight:900;letter-spacing:.15em}.gift-history-copy>strong{margin:3px 0 7px;color:#1e5081;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gift-history-person{display:flex;align-items:center;gap:7px;min-width:0}.gift-history-person img{width:24px;height:24px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:#eaf4ef}.gift-history-person i{min-width:0;color:#567386;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gift-history-copy time{margin-top:5px;color:#8ca0ad;font-size:8px;font-weight:700}.gift-history-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#edf4f0;color:#5b7b69;padding:6px 9px;font-size:7px;font-style:normal;font-weight:900;white-space:nowrap}.gift-history-status.is-accepted{background:#e2f5e8;color:#19864a}.gift-history-status.is-declined{background:#fff0f2;color:#da4960}.gift-history-status.is-pending{background:#fff6dc;color:#9a6c00}.gift-detail-view{max-width:760px;margin:0 auto}.gift-detail-back{border:0;background:transparent;color:#258c51;display:flex;align-items:center;gap:6px;padding:4px 0 12px;font-size:9px;font-weight:900;cursor:pointer}.gift-detail-back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}.gift-detail-card{position:relative;overflow:hidden;border:1px solid #d8e9df;border-radius:28px;background:linear-gradient(145deg,#fff,#f1fbf4 62%,#fff1f4);padding:30px;text-align:center;box-shadow:0 20px 55px rgba(27,82,59,.1)}.gift-detail-card:before{content:"";position:absolute;right:-70px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(244,80,119,.1)}.gift-detail-art{position:relative;width:138px;height:138px;margin:0 auto 14px;border-radius:38px;background:rgba(255,255,255,.82);display:grid;place-items:center;font-size:84px;box-shadow:0 18px 45px rgba(35,111,69,.13)}.gift-detail-card>small{color:#209452;font-size:8px;font-weight:900;letter-spacing:.2em}.gift-detail-card h3{margin:7px 0 20px;color:#1d5086;font-size:25px;font-weight:900}.gift-detail-people{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}.gift-detail-people>span{border-radius:17px;background:rgba(255,255,255,.75);padding:13px;display:flex;flex-direction:column}.gift-detail-people b{color:#789080;font-size:7px;text-transform:uppercase;letter-spacing:.13em}.gift-detail-people strong{margin-top:4px;color:#245479;font-size:11px}.gift-detail-people small{margin-top:2px;color:#83a091;font-size:8px}.gift-detail-card blockquote{margin:12px 0;border-radius:17px;background:rgba(255,255,255,.75);padding:15px;color:#4e6f83;font-size:11px;font-weight:700;line-height:1.5}.gift-detail-actions{display:flex;justify-content:center;gap:8px;margin-top:16px}.gift-detail-actions button{border:0;border-radius:14px;background:#229653;color:#fff;padding:11px 17px;font-size:9px;font-weight:900;cursor:pointer}.gift-detail-actions .is-decline{background:#fff;color:#df4b62}.gift-detail-actions .is-reply{background:#1e548e}.gift-center-tabs button:last-child{margin-left:auto}.gift-center-tabs button:last-child svg{width:15px;height:15px}

/* Строка поиска остаётся единым скруглённым полем во всех темах. */
html:root body .gift-catalog-search{overflow:hidden!important;background:#fff!important;background-image:none!important;border-radius:14px!important}html:root body .gift-catalog-search>svg,html:root body .gift-catalog-search>input{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}html:root body .gift-catalog-search>input{border-radius:0!important}.dark html:root body .gift-catalog-search,.dark body .gift-catalog-search{background:#152332!important}.dark .gift-history-item{background:#111c2b;border-color:#26394c}.dark .gift-history-copy>strong,.dark .gift-history-head h3,.dark .gift-detail-card h3{color:#dbe9ff}.dark .gift-history-head p,.dark .gift-history-person i,.dark .gift-history-copy time{color:#9fb1bf}.dark .gift-history-art{background:linear-gradient(145deg,#183326,#2b1c29)}.dark .gift-detail-card{background:linear-gradient(145deg,#111d2c,#13291f 62%,#2a1924);border-color:#2a5940}.dark .gift-detail-art,.dark .gift-detail-people>span,.dark .gift-detail-card blockquote{background:rgba(17,28,43,.8)}.dark .gift-detail-people strong,.dark .gift-detail-card blockquote{color:#c7d7e5}.dark .gift-detail-people b,.dark .gift-detail-people small{color:#87a496}

.messenger-gift-card{align-items:stretch;min-width:min(340px,76vw)}.messenger-gift-card-icon{border:0;cursor:pointer}.messenger-gift-card-copy{flex:1;justify-content:center}.messenger-gift-card-copy>button{align-self:flex-start;margin-top:9px;border:0;border-radius:10px;background:#229653;color:#fff;padding:7px 10px;font-size:8px;font-weight:900;cursor:pointer}

@media(max-width:760px){.gift-history-list{grid-template-columns:1fr}.gift-history-item{grid-template-columns:62px minmax(0,1fr)}.gift-history-art{width:60px;height:60px;font-size:34px}.gift-history-status{grid-column:2;justify-self:start}.gift-detail-card{padding:22px 14px}.gift-detail-art{width:112px;height:112px;border-radius:30px;font-size:68px}.gift-detail-people{grid-template-columns:1fr}.gift-history-head{align-items:flex-start}.gift-history-head h3{font-size:17px}.gift-center-tabs{overflow:auto}.gift-center-tabs button{flex:0 0 auto}.gift-center-tabs button:last-child{margin-left:0}}
.gift-recipient-picker{position:relative}.gift-recipient-trigger{width:100%;min-height:58px;border:1px solid #bfd9ca;border-radius:15px;background:#f8fbf9;display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:10px;padding:9px 12px;text-align:left;cursor:pointer}.gift-recipient-trigger>span{width:38px;height:38px;border-radius:12px;background:#e5f4ea;color:#1e9450;display:grid;place-items:center;font-size:14px;font-weight:900}.gift-recipient-trigger>div{display:flex;flex-direction:column;min-width:0}.gift-recipient-trigger strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#20517d;font-size:11px}.gift-recipient-trigger small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8099aa;font-size:8px;font-weight:800}.gift-recipient-trigger>svg{width:19px;height:19px;fill:none;stroke:#299555;stroke-width:2;transition:.16s}.gift-recipient-picker.is-open .gift-recipient-trigger>svg{transform:rotate(180deg)}.gift-recipient-dropdown{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:35;display:none;padding:10px;border:1px solid #c7dfd1;border-radius:16px;background:#fff;box-shadow:0 18px 38px rgba(17,62,42,.2)}.gift-recipient-picker.is-open .gift-recipient-dropdown{display:block}.gift-recipient-dropdown>label{display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:11px;background:#f0f7f3;color:#259453}.gift-recipient-dropdown>label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.gift-recipient-dropdown>label input{width:100%;height:36px;border:0;outline:0;background:transparent;color:#20517d;font-family:inherit;font-size:9px;font-weight:800}.gift-recipient-dropdown>div{max-height:210px;overflow:auto;margin-top:7px;display:grid;gap:4px}.gift-recipient-option{width:100%;border:0;border-radius:11px;background:transparent;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:7px;text-align:left;cursor:pointer}.gift-recipient-option:hover,.gift-recipient-option.is-selected{background:#eaf6ee}.gift-recipient-option>span{width:34px;height:34px;border-radius:10px;background:#e7f2f8;color:#1f6596;display:grid;place-items:center;font-size:12px;font-weight:900}.gift-recipient-option>div{display:flex;flex-direction:column;min-width:0}.gift-recipient-option strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#244f72;font-size:9px}.gift-recipient-option small{margin-top:2px;color:#8299a8;font-size:8px}.gift-recipient-empty{min-height:72px;display:grid;place-items:center;padding:10px;text-align:center;color:#81968b;font-size:9px;font-weight:800}.dark .gift-recipient-trigger{background:#121f2d;border-color:#2e493a}.dark .gift-recipient-trigger strong,.dark .gift-recipient-dropdown>label input,.dark .gift-recipient-option strong{color:#d5e6f7}.dark .gift-recipient-dropdown{background:#111c2b;border-color:#2b4938}.dark .gift-recipient-dropdown>label{background:#172a24}.dark .gift-recipient-option:hover,.dark .gift-recipient-option.is-selected{background:#1a3327}
.gift-recipient-trigger>img,.gift-recipient-option>img{display:block;object-fit:cover;background:#e8f3ed}.gift-recipient-trigger>img{width:38px;height:38px;border-radius:12px}.gift-recipient-option{grid-template-columns:34px minmax(0,1fr) 22px}.gift-recipient-option>img{width:34px;height:34px;border-radius:10px}.gift-recipient-option>i{width:20px;height:20px;border:1px solid #c8ded2;border-radius:7px;display:grid;place-items:center;color:#229452}.gift-recipient-option.is-selected>i{border-color:#229452;background:#229452;color:#fff}.gift-recipient-option>i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}.gift-message-field{position:relative;display:block}.gift-message-field textarea{display:block;min-height:78px;padding-right:42px!important;resize:none!important;transition:min-height .2s ease}.gift-message-field.is-expanded textarea{min-height:210px}.gift-message-expand{position:absolute!important;right:8px!important;bottom:8px!important;z-index:2!important;width:30px!important;height:30px!important;min-width:30px!important;border-radius:9px!important;background:#eaf4ef!important;color:#238d50!important}.gift-message-expand svg{width:17px!important;height:17px!important}.gift-message-field.is-expanded .gift-message-expand svg{transform:rotate(180deg)}.dark .gift-recipient-trigger>img,.dark .gift-recipient-option>img{background:#1a2b37}.dark .gift-recipient-option>i{border-color:#365145}.dark .gift-message-expand{background:#1a3327!important;color:#6fd69a!important}

/* ======[ПОДАРКИ: СТАБИЛЬНОЕ ОКНО, ТЕМЫ И ПОЛНАЯ ВИТРИНА]========== */
/* Окно сохраняет геометрию между каталогом, историями и подробностями. */
html:root body .gift-center-dialog{
  height:min(50rem,calc(100dvh - 2.25rem));
  max-height:calc(100dvh - 2.25rem);
  overflow:hidden;
  scrollbar-gutter:stable;
}
html:root body .gift-center-head{min-height:5.25rem;gap:.85rem;padding:1rem 5rem .8rem 1.25rem}
html:root body .gift-center-head>span{width:3rem;height:3rem;border-radius:.9rem}
html:root body .gift-center-head>span svg{width:1.55rem;height:1.55rem}
html:root body .gift-center-head h2{font-size:1.3rem}
html:root body .gift-center-head p{font-size:.62rem}
html:root body .gift-center-close{top:.85rem;right:.9rem;width:2.7rem;height:2.7rem;border-radius:.85rem}
html:root body .gift-center-tabs{min-height:3.5rem;align-items:center;gap:.65rem;padding:.6rem 1.25rem .75rem;border-top:1px solid color-mix(in srgb,#229653 10%,transparent);border-bottom:1px solid color-mix(in srgb,#229653 10%,transparent)}
html:root body .gift-center-tabs button{margin:0;padding:.65rem 1rem}
html:root body .gift-center-tabs button:last-child{margin-left:auto}
html:root body .gift-center-content{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:1.15rem 1.35rem 1.4rem}

/* Строка поиска берёт поверхность текущей темы и не распадается на белые квадраты. */
html:root body .gift-catalog-search{
  overflow:hidden!important;
  border-color:var(--adaptive-ui-line,var(--standard-line,#cfe2d7))!important;
  background:var(--adaptive-ui-active,var(--standard-panel-soft,#f4f8f6))!important;
  background-image:none!important;
  color:var(--color-dynamic,#209452)!important;
  border-radius:1rem!important;
}
html:root body .gift-catalog-search>svg,
html:root body .gift-catalog-search>input{border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important}
html:root body .gift-catalog-search>input{color:var(--adaptive-text-active,var(--standard-text-active,#dbe9ff))!important;border-radius:0!important}
html:root.dark body .gift-catalog-search,
html:root body.dark .gift-catalog-search,
html:root[data-theme="dark"] body .gift-catalog-search{border-color:#294034!important;background:#152332!important;color:#76d69b!important}
html:root.dark body .gift-catalog-search>input,
html:root body.dark .gift-catalog-search>input,
html:root[data-theme="dark"] body .gift-catalog-search>input{color:#dbe9f5!important}

/* V2.0.32: счётчики и всплывающий фильтр категорий подарков. */
.gift-catalog-search-shell{position:relative;width:min(350px,100%);margin:0 0 12px auto;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px}.gift-catalog-search-shell .gift-catalog-search{width:100%;margin:0}.gift-filter-toggle{width:42px;height:42px;border:1px solid #cfe2d7;border-radius:14px;background:#eaf5ee;color:#209452;display:grid;place-items:center;cursor:pointer;transition:.16s ease}.gift-filter-toggle:hover,.gift-filter-toggle.is-open{background:#229653;color:#fff;border-color:#229653}.gift-filter-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.gift-filter-popover{position:absolute;z-index:12;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 54px));max-height:330px;overflow:auto;padding:10px;border:1px solid #cfe2d7;border-radius:17px;background:#fff;box-shadow:0 20px 50px rgba(19,65,43,.2);display:none}.gift-filter-popover.is-open{display:grid;gap:5px}.gift-filter-popover>small{padding:4px 7px 8px;color:#168c4b;font-size:8px;font-weight:900;letter-spacing:.14em}.gift-filter-popover button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:11px;padding:9px 10px;background:transparent;color:#527261;font-size:10px;font-weight:850;text-align:left;cursor:pointer}.gift-filter-popover button:hover,.gift-filter-popover button.is-active{background:#e7f5ec;color:#157c42}.gift-filter-popover b,.gift-theme-tabs b{display:inline-grid;min-width:21px;height:21px;padding:0 5px;place-items:center;border-radius:999px;background:#e7f3ec;color:#16864a;font-size:8px}.gift-theme-tabs button.is-active b{background:#239654;color:#fff}.dark .gift-filter-toggle,.dark .gift-filter-popover{border-color:#294034;background:#152332;color:#9bd9b2}.dark .gift-filter-popover button{color:#aec5b8}.dark .gift-filter-popover button:hover,.dark .gift-filter-popover button.is-active{background:#1c362a;color:#82d9a4}.dark .gift-filter-popover b,.dark .gift-theme-tabs b{background:#20392d;color:#8cdbab}

/* Четыре раздела журнала: эфир, изученные, подарки и архив. */
.signals-scope-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.signal-sidebar-subnav.is-open{max-height:13rem}.signals-scope-tabs button[data-signal-scope="gifts"] i,.signal-sidebar-subnav #tab-friend-signal-gifts .signal-sidebar-label i{color:#ec4899}.signals-scope-tabs button[data-signal-scope="gifts"]:is(:hover,.is-active),.signal-sidebar-subnav #tab-friend-signal-gifts:is(:hover,.is-active){color:#db2777}.signals-scope-tabs button[data-signal-scope="gifts"].is-active{border-color:rgb(236 72 153/.38)}.signal-sidebar-subnav #tab-friend-signal-gifts.is-active b{background:#ec4899;color:#fff}
@media(max-width:760px){.signals-scope-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.gift-catalog-search-shell{width:100%}}

/* В альбомах остаётся одна зелёная поверхность без второй бело-голубой подложки. */
html:root body #tab-photos #albums-placeholder,
html:root body .space-profile-photo-field>.space-profile-albums-grid{
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Полная коллекция раскрывается отдельной аккуратной строкой под тремя подарками. */
.profile-gifts-all{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto 1.1rem;align-items:center;gap:.5rem;min-height:2.4rem;border:0;border-radius:.8rem;padding:.5rem .7rem;background:#eaf5ee;color:#24754d;font-size:.56rem;font-weight:900;text-align:left;cursor:pointer}
.profile-gifts-all b{display:grid;min-width:1.35rem;height:1.35rem;place-items:center;border-radius:999px;background:#fff;color:#1d8d4c;font-size:.52rem}
.profile-gifts-all svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2}
.profile-gifts-all:hover{background:#dff1e5}
html.dark .profile-gifts-all{background:#183025;color:#8fe1af}
html.dark .profile-gifts-all b{background:#111f2a;color:#8fe1af}

/* Карточка календарного события открывает пояснение и быстрые действия. */
.holiday-details-modal{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;padding:1rem}
.holiday-details-modal.hidden{display:none}
.holiday-details-backdrop{position:absolute;inset:0;border:0;background:rgb(6 24 30/.72);backdrop-filter:blur(.7rem)}
.holiday-details-dialog{position:relative;width:min(29rem,calc(100vw - 2rem));overflow:hidden;border:1px solid color-mix(in srgb,var(--color-dynamic,#229653) 38%,transparent);border-radius:1.6rem;padding:1.65rem;background:var(--adaptive-ui-modal,var(--standard-panel,#fff));box-shadow:0 2rem 5rem rgb(3 22 29/.42);color:var(--adaptive-text-active,var(--standard-text-active,#163b60));text-align:center}
.holiday-details-close{position:absolute;right:.8rem;top:.8rem;display:grid;width:2.35rem;height:2.35rem;place-items:center;border:0;border-radius:.75rem;background:var(--adaptive-ui-active,var(--standard-panel-soft,#eaf5ee));color:var(--color-dynamic,#229653);font-size:1.25rem;cursor:pointer}
.holiday-details-art{display:grid;width:5.5rem;height:5.5rem;margin:.35rem auto .85rem;place-items:center;border-radius:1.6rem;background:color-mix(in srgb,var(--color-dynamic,#229653) 10%,var(--adaptive-ui-active,var(--standard-panel-soft,#f3faf5)));font-size:3.25rem}
.holiday-details-dialog>small{color:var(--color-dynamic,#229653);font-size:.5rem;font-weight:950;letter-spacing:.2em}
.holiday-details-dialog h2{margin:.4rem 0 0;color:inherit;font-size:1.45rem;font-weight:950}
.holiday-details-dialog p{margin:.6rem auto 1.25rem;max-width:23rem;color:var(--adaptive-text-secondary,var(--standard-text-secondary,#678092));font-size:.7rem;font-weight:650;line-height:1.55}
.holiday-details-dialog>div{display:flex;justify-content:center;gap:.55rem}
.holiday-details-dialog>div button{min-height:2.55rem;border:1px solid var(--color-dynamic,#229653);border-radius:.8rem;padding:.6rem .9rem;background:var(--color-dynamic,#229653);color:#fff;font-size:.59rem;font-weight:900;cursor:pointer}
.holiday-details-dialog>div button.is-secondary{background:transparent;color:var(--color-dynamic,#229653)}

/* Крестик события звонка всегда занимает внутреннюю колонку карточки. */
html:root body #toast-container{box-sizing:border-box;max-width:calc(100vw - 1.6rem);padding-right:0!important}
html:root body #toast-container>.messenger-incoming-toast.is-call-event{box-sizing:border-box!important;width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr) 2.7rem!important;padding-right:.2rem!important;overflow:hidden!important}
html:root body .messenger-incoming-toast.is-call-event>.messenger-incoming-toast-close{position:relative!important;inset:auto!important;justify-self:center!important;align-self:start!important;width:2.15rem!important;height:2.15rem!important;margin:.48rem .2rem 0 0!important;border-radius:.72rem!important}

/* Активный раздел подарков заметен одинаково в светлой, тёмной и адаптивной темах. */
html:root body .gift-center-tabs button{
  position:relative;
  border:1px solid transparent!important;
  background:var(--adaptive-ui-active,var(--standard-panel-soft,#edf4f0))!important;
  color:var(--adaptive-text-secondary,var(--standard-text-secondary,#62806f))!important;
  opacity:.72;
  box-shadow:none!important;
  transition:background-color .16s ease,color .16s ease,opacity .16s ease,box-shadow .16s ease,transform .16s ease;
}
html:root body .gift-center-tabs button:is(:hover,:focus-visible){opacity:1;transform:translateY(-1px)}
html:root body .gift-center-tabs button.is-active,
html:root body .gift-center-tabs button[aria-selected="true"]{
  border-color:color-mix(in srgb,#229653 78%,#fff)!important;
  background:#229653!important;
  color:#fff!important;
  opacity:1!important;
  box-shadow:0 0 0 2px color-mix(in srgb,#229653 22%,transparent),0 .5rem 1.15rem rgb(20 118 62/.2)!important;
}
html:root body .gift-center-tabs button:is(.is-active,[aria-selected="true"]) b{background:#fff!important;color:#167b43!important}
html:root body .gift-theme-tabs button.is-active,
html:root body .gift-filter-popover button.is-active{
  border-color:#229653!important;
  background:#229653!important;
  color:#fff!important;
  box-shadow:0 .35rem .9rem rgb(20 118 62/.18)!important;
}
html:root body .gift-theme-tabs button.is-active b,
html:root body .gift-filter-popover button.is-active b{background:#fff!important;color:#167b43!important}

/* Действие дружбы не зависит от яркости пользовательской темы: иконка видна до наведения. */
html:root body #friend-action-btn{
  border-color:#229653!important;
  background:#229653!important;
  color:#fff!important;
}
html:root body #friend-action-btn[data-status="pending"]{border-color:#e3ad32!important;background:#fff5d6!important;color:#986300!important}
html:root body #friend-action-btn:is([data-status="friends"],[data-status="accepted"]){border-color:#8dcda8!important;background:#e6f5eb!important;color:#157944!important}
html:root body #friend-action-btn:is(:hover,:focus-visible){border-color:#187c43!important;background:#187c43!important;color:#fff!important}
html:root body #friend-action-btn #friend-btn-icon-container,
html:root body #friend-action-btn #friend-btn-icon-container svg{
  display:grid!important;
  width:1.25rem!important;
  height:1.25rem!important;
  place-items:center!important;
  color:inherit!important;
  opacity:1!important;
  visibility:visible!important;
}

@media(max-width:760px){
  html:root body .gift-center-dialog{height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem)}
  html:root body .gift-center-head{min-height:4.2rem;padding:.75rem 3.8rem .65rem 1rem}
  html:root body .gift-center-tabs{min-height:3.2rem;padding:.45rem 1rem .65rem;overflow-x:auto}
  html:root body .gift-center-tabs button:last-child{margin-left:0}
  .holiday-details-dialog>div{flex-direction:column}
}
/* Повторное напоминание о дне рождения. */
.birthday-notification-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.birthday-notification-actions .birthday-gift-action{margin-top:0}
.birthday-snooze-action{border:1px solid rgba(36,150,83,.2);border-radius:9px;background:#edf7f1;color:#227e48;padding:6px 9px;font-size:8px;font-weight:900;cursor:pointer}
.birthday-snooze-action:disabled{opacity:.55;cursor:wait}

/* SVG-карточки, активные вкладки и живой статус получателя подарка. */
.gift-center-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.gift-center-tabs button>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gift-artwork-svg{display:block;width:58px;height:58px;max-width:118px;max-height:118px;overflow:hidden}
.gift-catalog-item>span,.gift-compose-preview>span,.gift-history-art,.gift-detail-art{font-size:0}
.gift-compose-preview .gift-artwork-svg{width:52px;height:52px}
.gift-history-art .gift-artwork-svg{width:64px;height:64px}
.gift-detail-art .gift-artwork-svg{width:118px;height:118px}
.profile-gift-item>span{display:grid;width:2.8rem;height:2.8rem;place-items:center}
.profile-gift-item>span .gift-artwork-svg{width:2.7rem;height:2.7rem}
.gift-animated-empty{display:flex!important;flex-direction:column;justify-content:center;gap:5px;padding:24px}
.gift-animated-empty>span{position:relative;width:90px;height:90px;display:grid;place-items:center;margin-bottom:5px}
.gift-animated-empty .gift-artwork-svg{width:78px;height:78px;animation:gift-empty-float 2.8s ease-in-out infinite}
.gift-animated-empty>span>i,.gift-animated-empty>span>b{position:absolute;border:2px solid #35a363;border-radius:50%;animation:gift-empty-orbit 2.6s linear infinite}
.gift-animated-empty>span>i{width:8px;height:8px;left:3px;top:38px}.gift-animated-empty>span>b{width:6px;height:6px;right:8px;top:15px;animation-delay:-1.2s}
.gift-animated-empty strong{color:#20517f;font-size:13px}.gift-animated-empty small{color:#82978c;font-size:8px}
.gift-recipient-avatar{position:relative;display:block;width:38px;height:38px}
.gift-recipient-avatar>img{width:100%;height:100%;display:block;border-radius:12px;object-fit:cover;background:#e8f3ed}
.gift-recipient-option .gift-recipient-avatar{width:34px;height:34px}.gift-recipient-option .gift-recipient-avatar>img{border-radius:10px}
.gift-recipient-presence{position:absolute;right:-2px;bottom:-2px;width:10px!important;height:10px!important;border:2px solid #fff!important;border-radius:50%!important;background:#bdcbd2!important;box-sizing:border-box}
.gift-recipient-presence.is-online{background:#27a65d!important;box-shadow:0 0 0 2px rgba(39,166,93,.14)}
.dark .gift-recipient-presence{border-color:#121f2d!important}
@keyframes gift-empty-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes gift-empty-orbit{0%{transform:rotate(0deg) translateX(3px)}100%{transform:rotate(360deg) translateX(3px)}}

/* Пустые журналы сигналов и постраничная длинная лента. */
.signal-empty-art{position:relative;width:7rem;height:7rem;margin-bottom:.45rem;display:grid;place-items:center;color:var(--color-dynamic,#3b82f6)}
.signal-empty-art>span{position:relative;z-index:2;display:grid;width:4.5rem;height:4.5rem;place-items:center;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:1.35rem;background:color-mix(in srgb,currentColor 10%,var(--adaptive-surface,#fff));animation:signal-empty-float 2.8s ease-in-out infinite;box-shadow:0 18px 35px -25px currentColor}
.signal-empty-art svg{width:2.5rem;height:2.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.signal-empty-art>i,.signal-empty-art>b,.signal-empty-art>em{position:absolute;border:1px solid currentColor;border-radius:50%;opacity:.55;animation:signal-empty-pulse 2.6s ease-out infinite}
.signal-empty-art>i{inset:.5rem}.signal-empty-art>b{inset:1.25rem;animation-delay:.65s}.signal-empty-art>em{width:.55rem;height:.55rem;right:.45rem;top:1rem;background:currentColor;animation:signal-empty-satellite 3.8s linear infinite}
.signal-empty-art.is-gifts{color:#ec4899}.signal-empty-art.is-archive{color:#249653}.signal-empty-art.is-studied{color:#299b63}
.signals-load-more{width:min(100%,22rem);min-height:2.8rem;margin:.25rem auto 0;border:1px solid color-mix(in srgb,var(--color-dynamic,#3b82f6) 32%,var(--adaptive-border,#dbe4ea));border-radius:.85rem;background:color-mix(in srgb,var(--color-dynamic,#3b82f6) 8%,var(--adaptive-surface,#fff));color:var(--color-dynamic,#3b82f6);display:flex;align-items:center;justify-content:center;gap:.55rem;font-size:.58rem;font-weight:950;text-transform:uppercase}
.signals-load-more b{display:grid;min-width:1.35rem;height:1.35rem;place-items:center;border-radius:999px;background:var(--color-dynamic,#3b82f6);color:#fff;font-size:.5rem}
@keyframes signal-empty-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.55rem) rotate(2deg)}}
@keyframes signal-empty-pulse{0%{transform:scale(.72);opacity:.65}85%,100%{transform:scale(1.12);opacity:0}}
@keyframes signal-empty-satellite{0%{transform:rotate(0deg) translateX(-3rem)}100%{transform:rotate(360deg) translateX(-3rem)}}

/* Длинные списки друзей и медиатек растут вместе со страницей. */
.friends-load-more,.space-media-load-more{grid-column:1/-1;width:min(100%,22rem);min-height:2.8rem;margin:.35rem auto 0;border:1px solid color-mix(in srgb,var(--vmesta-ui-primary,#249653) 30%,var(--vmesta-ui-line,#dbe7df));border-radius:.85rem;background:color-mix(in srgb,var(--vmesta-ui-primary,#249653) 8%,var(--vmesta-ui-panel,#fff));color:var(--vmesta-ui-primary,#249653);display:flex;align-items:center;justify-content:center;gap:.55rem;font-size:.6rem;font-weight:950;text-transform:uppercase}
.friends-load-more b,.space-media-load-more b{display:grid;min-width:1.35rem;height:1.35rem;place-items:center;border-radius:999px;background:var(--vmesta-ui-primary,#249653);color:#fff;font-size:.5rem}
.space-profile-photo-field,.profile-video-field,#photos-list-container,#albums-placeholder,#friends-list-full{max-height:none!important;overflow:visible!important}

/* В режиме списка сообщений прокручивается страница; открытая переписка сохраняет собственную ленту. */
@media(min-width:768px){
  body.messages-route .messenger-shell:not(.has-active-chat){height:auto!important;min-height:36rem!important;overflow:visible!important}
  body.messages-route .messenger-shell:not(.has-active-chat) .messenger-dialogs-panel{height:auto!important;min-height:36rem!important;overflow:visible!important}
  body.messages-route .messenger-shell:not(.has-active-chat) .messenger-chat-list{flex:0 0 auto!important;max-height:none!important;overflow:visible!important}
}

/* Пустые будущие разделы магазина выглядят как живые коллекции. */
.vmesta-market-preview-art>svg{animation:market-empty-float 2.8s ease-in-out infinite}
.vmesta-market-preview-art>i{animation:market-empty-bubble 3.2s ease-in-out infinite}
.vmesta-market-preview-art>i:nth-of-type(2){animation-delay:-1.1s}.vmesta-market-preview-art>i:nth-of-type(3){animation-delay:-2.1s}
@keyframes market-empty-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.65rem) rotate(2deg)}}
@keyframes market-empty-bubble{0%,100%{transform:scale(.72);opacity:.35}50%{transform:scale(1.18);opacity:.78}}

/* V2.0.39: цельные скругления сообщений и подарков. */
html:root body.messages-route .messenger-shell:not(.has-active-chat){overflow:hidden!important;border-radius:1.2rem!important}
html:root body.messages-route .messenger-shell:not(.has-active-chat) .messenger-dialogs-panel{border-radius:inherit!important;overflow:hidden!important}
html:root body .gift-center-dialog{scrollbar-gutter:auto!important;isolation:isolate}
html:root body .gift-center-head,
html:root body .gift-center-tabs{box-sizing:border-box;width:100%}

/* Иконки разделов редактора профиля. */
html:root body .cover-editor-tabs .cover-editor-tab{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap}
html:root body .cover-editor-tabs .cover-editor-tab>svg{display:block;width:1rem;height:1rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html:root body .cover-editor-tabs .cover-editor-tab>span{display:block}
@media(max-width:760px){html:root body .cover-editor-tabs .cover-editor-tab{gap:.35rem}html:root body .cover-editor-tabs .cover-editor-tab>svg{width:.9rem;height:.9rem}}

/* V2.0.40: регистрационный календарь использует стабильную геометрию «О себе». */
html:root body.auth-register-page .auth-profile-meta-field .vm-date-shell{min-height:3.65rem;contain:layout}
html:root body.auth-register-page .auth-profile-meta-field .vm-date-trigger{height:3.65rem;min-height:3.65rem;transform:none}
html:root body.auth-register-page #vm-date-portal{transform:none;transition:none}

/* V2.0.41: единая неподвижная панель вкладок друзей и подписчиков. */
html:root body #friends-modal .friends-modal-tabs {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  min-height:3rem!important;
  align-items:stretch!important;
  gap:.25rem!important;
  padding:.25rem!important;
  border-radius:.9rem!important;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 78%,var(--vmesta-ui-primary,#2583ff) 22%)!important;
}
html:root body #friends-modal .friends-modal-tab,
html:root body #friends-modal .friends-modal-tab:last-child {
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  min-height:2.5rem!important;
  flex:1 1 0!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.32rem!important;
  padding:.5rem .65rem!important;
  border-radius:.7rem!important;
  white-space:nowrap!important;
  transform:none!important;
}
html:root body #friends-modal .friends-modal-tab.is-active {
  background:var(--vmesta-ui-panel,#fff)!important;
  color:var(--vmesta-ui-primary,#2583ff)!important;
  box-shadow:0 .35rem .9rem color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 12%,transparent)!important;
}
html:root body #friends-modal .friends-modal-filter-shell { min-height:4.3rem!important; }
html:root body #friends-modal .friends-modal-search-block,
html:root body #friends-modal #modal-friends-search { transform:none!important; }
html:root body #friends-modal .modal-friends-filter-button {
  top:50%!important;
  right:.38rem!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}
html:root body #friends-modal .modal-friend-action,
html:root body #friends-modal .space-subscriber-kebab { transform:none!important; }

/* Живая заглушка в тех же визуальных правилах, что и список друзей. */
html:root body #friends-modal .modal-friends-empty {
  min-height:15rem!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:.38rem!important;
  padding:1.5rem!important;
  color:var(--vmesta-ui-muted,var(--standard-text-passive,#64748b))!important;
  text-align:center!important;
}
.modal-friends-empty-visual {
  position:relative;
  display:grid;
  width:6.2rem;
  height:6.2rem;
  margin-bottom:.8rem;
  place-items:center;
  border-radius:2rem;
  background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 72%,var(--vmesta-ui-primary,#2583ff) 28%);
  color:var(--vmesta-ui-primary,#2583ff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 20%,transparent);
}
.modal-friends-empty-visual > svg { position:relative;z-index:3;width:3rem;height:3rem;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;animation:modal-friends-empty-float 3s ease-in-out infinite; }
.modal-friends-empty-orbit { position:absolute;left:50%;top:50%;border:1px dashed color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 34%,transparent);border-radius:50%;animation:modal-friends-empty-orbit 8s linear infinite; }
.modal-friends-empty-orbit.orbit-one { width:7.35rem;height:4.15rem; }
.modal-friends-empty-orbit.orbit-two { width:4.4rem;height:7.4rem;animation-direction:reverse;animation-duration:10s; }
.modal-friends-empty-orbit > i { position:absolute;left:-.28rem;top:calc(50% - .28rem);width:.56rem;height:.56rem;border:2px solid var(--vmesta-ui-panel,#fff);border-radius:50%;background:var(--vmesta-ui-primary,#2583ff);box-shadow:0 0 .65rem color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 58%,transparent); }
.modal-friends-empty-visual > :is(b,em) { position:absolute;width:.55rem;height:.55rem;border-radius:50%;background:var(--vmesta-ui-primary,#2583ff);opacity:.32;animation:modal-friends-empty-pulse 2.2s ease-in-out infinite; }
.modal-friends-empty-visual > b { right:.72rem;top:.78rem; }
.modal-friends-empty-visual > em { left:.82rem;bottom:.72rem;animation-delay:-1.05s; }
.modal-friends-empty > strong { color:var(--vmesta-ui-ink,var(--standard-text-active,#173f73))!important;font-size:.82rem!important;font-weight:950!important;letter-spacing:.06em;text-transform:uppercase; }
.modal-friends-empty > span { max-width:19rem;font-size:.66rem;font-weight:720;line-height:1.45; }
@keyframes modal-friends-empty-float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.38rem) rotate(2deg)} }
@keyframes modal-friends-empty-orbit { from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes modal-friends-empty-pulse { 0%,100%{opacity:.25;transform:scale(.72)}50%{opacity:.76;transform:scale(1.16)} }

/* Кнопки пространства не меняют геометрию на наведении. */
html:root body :is(.space-left-message,.space-subscribe-split,.space-left-subscribe,.space-followers-count):is(:hover,:focus-visible,:active) { transform:none!important; }

/* Стрелки подменю имеют собственную фиксированную область и не прыгают у края. */
html:root body #settings-dropdown .settings-submenu-back {
  display:flex!important;
  width:calc(100% - .7rem)!important;
  min-height:2.45rem!important;
  margin:.15rem .35rem!important;
  align-items:center!important;
  gap:.48rem!important;
  padding:.45rem .65rem!important;
  border:0!important;
  border-radius:.68rem!important;
  background:transparent!important;
  color:var(--vmesta-ui-muted,var(--standard-text-passive,#64748b))!important;
  font-size:.6rem!important;
  font-weight:900!important;
  text-align:left!important;
}
html:root body #settings-dropdown .settings-submenu-back:hover { background:var(--vmesta-ui-soft,var(--standard-panel-soft,#eef3f8))!important;color:var(--vmesta-ui-primary,#2583ff)!important; }
html:root body #settings-dropdown .settings-submenu-back > svg { display:block;width:1rem;height:1rem;flex:0 0 1rem;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round; }
html:root body #settings-dropdown .settings-profile-next { right:.65rem!important;display:grid!important;width:1.7rem!important;height:1.7rem!important;place-items:center!important;border-radius:.55rem!important;background:var(--vmesta-ui-soft,var(--standard-panel-soft,#eef3f8))!important; }
html:root body #settings-dropdown .settings-profile-next > svg { display:block;width:.82rem;height:.82rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }
html:root body #settings-dropdown .settings-profile-copy { padding-right:2rem!important; }

/* Иконка выхода наследует красный цвет, но не получает тематическую зелёную рамку. */
html:root body #settings-dropdown #menu-main-content > button[onclick*="logout"] .settings-menu-icon {
  border:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Меню действий позиционируется поверх сетки и никогда не прячется под мини-аватарами. */
html:root body #profile-left-rail:has(#profile-safety-menu.is-open),
html:root body #profile-avatar-card:has(#profile-safety-menu.is-open) { position:relative!important;z-index:1200!important;overflow:visible!important; }
html:root body #profile-safety-menu.is-open { z-index:1201!important; }
html:root body #profile-safety-menu.is-open .profile-safety-dropdown { z-index:1202!important;isolation:isolate; }

/* Одноразовое приветствие системы сигналов. */
.signal-welcome-modal { position:fixed;inset:0;z-index:32000;display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .18s ease; }
.signal-welcome-modal.hidden { display:none; }
.signal-welcome-modal.is-visible { opacity:1; }
.signal-welcome-backdrop { position:absolute;inset:0;border:0;background:rgb(7 13 23/.72);backdrop-filter:blur(10px); }
.signal-welcome-dialog { position:relative;display:grid;width:min(31rem,calc(100vw - 2rem));justify-items:center;gap:.65rem;border:1px solid var(--vmesta-ui-line,var(--standard-line,#dbe4ef));border-radius:1.55rem;background:var(--vmesta-ui-panel,var(--standard-panel,#fff));padding:2rem;color:var(--vmesta-ui-ink,var(--standard-text-active,#173f73));text-align:center;box-shadow:0 2rem 5rem rgb(2 6 23/.34);transform:translateY(.7rem) scale(.98);transition:transform .2s ease; }
.signal-welcome-modal.is-visible .signal-welcome-dialog { transform:none; }
.signal-welcome-scene { position:relative;display:grid;width:7.25rem;height:7.25rem;margin-bottom:.35rem;place-items:center;overflow:hidden;border-radius:2.2rem;background:color-mix(in srgb,var(--vmesta-ui-panel,#fff) 70%,var(--vmesta-ui-primary,#2583ff) 30%); }
.signal-welcome-scene > img { position:relative;z-index:3;width:3.4rem;height:3.4rem;animation:signal-welcome-float 3s ease-in-out infinite; }
.signal-welcome-orbit { position:absolute;left:50%;top:50%;border:1px dashed color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 42%,transparent);border-radius:50%;animation:signal-welcome-orbit 9s linear infinite; }
.signal-welcome-orbit.orbit-one { width:8.8rem;height:4.7rem; }
.signal-welcome-orbit.orbit-two { width:5rem;height:8.7rem;animation-direction:reverse;animation-duration:11s; }
.signal-welcome-orbit > i { position:absolute;left:-.28rem;top:calc(50% - .28rem);width:.56rem;height:.56rem;border:2px solid var(--vmesta-ui-panel,#fff);border-radius:50%;background:var(--vmesta-ui-primary,#2583ff); }
.signal-welcome-scene .signal-scene-host { width:7.05rem;height:7.05rem;transform:none; }
.signal-welcome-scene .signal-system-scene { overflow:hidden; }
.signal-welcome-dialog > span { color:var(--vmesta-ui-primary,#2583ff);font-size:.57rem;font-weight:950;letter-spacing:.17em; }
.signal-welcome-dialog > h2 { margin:0;max-width:24rem;font-size:1.35rem;line-height:1.12; }
.signal-welcome-dialog > p { max-width:25rem;margin:0;color:var(--vmesta-ui-muted,var(--standard-text-passive,#64748b));font-size:.72rem;font-weight:650;line-height:1.55; }
.signal-welcome-dialog > div:last-child { display:grid;width:100%;grid-template-columns:1fr 1.45fr;gap:.55rem;margin-top:.55rem; }
.signal-welcome-dialog > div:last-child > button { min-height:2.75rem;border:0;border-radius:.82rem;background:var(--vmesta-ui-soft,var(--standard-panel-soft,#eef3f8));color:var(--vmesta-ui-ink,#173f73);font-size:.63rem;font-weight:900; }
.signal-welcome-dialog > div:last-child > button:last-child { background:var(--vmesta-ui-primary,#2583ff);color:var(--vmesta-ui-on-primary,#fff); }
@keyframes signal-welcome-float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.42rem) rotate(2deg)} }
@keyframes signal-welcome-orbit { from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)} }
@media(max-width:520px){.signal-welcome-dialog{padding:1.5rem 1.15rem}.signal-welcome-dialog>div:last-child{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.modal-friends-empty-visual *,.signal-welcome-scene *{animation:none!important}}

/* V2.0.42: скрытые вкладки редактора не возвращаются из-за общего display. */
html:root body .cover-editor-tabs .cover-editor-tab.hidden { display:none!important; }

/* Выход — единая красная контурная пиктограмма без тематической рамки. */
html:root body #settings-dropdown #menu-main-content > button[onclick*="logout"] {
  color:#e2484f!important;
}
html:root body #settings-dropdown #menu-main-content > button[onclick*="logout"] > span {
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html:root body #settings-dropdown #menu-main-content > button[onclick*="logout"] .settings-logout-icon,
html:root body #settings-dropdown #menu-main-content > button[onclick*="logout"] .settings-logout-icon * {
  color:#e2484f!important;
  fill:none!important;
  stroke:#e2484f!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* V2.0.90: облегчённая кинематика сообщений.
   В профиле страницы самые дорогие кадры приходились на Lottie, layerize,
   blur/clip-path и пересчёт большого дерева. Большие слои больше не анимируют
   размытие или геометрию; короткое движение остаётся на compositor. */
html:root body.messages-route .messenger-message-stream {
  contain:layout style;
}

html:root body.messages-route :is(
  .messenger-pinned-panel,
  .messenger-inline-media-bar,
  .messenger-chat-search,
  .messenger-chat-menu,
  .messenger-message-menu,
  .messenger-reaction-panel,
  .messenger-reaction-picker,
  .messenger-media-settings,
  .messenger-room-panel-layer,
  .messenger-room-panel,
  .messenger-new-modal,
  .messenger-new-modal > section
) {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html:root body.messages-route #messages-root .messenger-message .messenger-bubble {
  filter:none!important;
  box-shadow:0 .16rem .34rem rgb(2 6 23/.07)!important;
}

html:root body.messages-route #messages-root .messenger-sticker-media {
  filter:none!important;
}

html:root body.messages-route #messages-root .messenger-sender-identity-menu {
  clip-path:none!important;
  animation:messenger-compositor-popover-in 135ms cubic-bezier(.22,1,.36,1) both!important;
}

html:root body.messages-route #messages-root .messenger-sender-identity.is-closing .messenger-sender-identity-menu {
  animation:messenger-compositor-popover-out 105ms ease-in both!important;
}

html:root body.messages-route #messages-root :is(
  .messenger-reaction-picker,
  .messenger-chat-search,
  .messenger-recording-panel.is-draft
) {
  animation-duration:135ms!important;
}

html:root body.messages-route #messages-root .messenger-message.is-entering > :is(.messenger-bubble,.messenger-room-message-avatar) {
  animation-duration:145ms!important;
}

html:root body.messages-route #messages-root .messenger-message.is-mention-focus .messenger-bubble {
  animation:none!important;
  outline:1px solid color-mix(in srgb,var(--msg-accent) 58%,transparent);
  outline-offset:2px;
}

@keyframes messenger-compositor-popover-in {
  from { opacity:0; transform:translate3d(0,.3rem,0) scale(.985); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

@keyframes messenger-compositor-popover-out {
  from { opacity:1; transform:translate3d(0,0,0) scale(1); }
  to { opacity:0; transform:translate3d(0,.2rem,0) scale(.985); }
}

@keyframes messenger-day-label-swap {
  from { opacity:0; transform:translate3d(0,-.25rem,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}

/* V2.0.93: поиск в переписке — самостоятельная плавающая карточка.
   Поле и действия визуально разделены, а фиксированная сетка не двигает чат. */
html:root body.messages-route #messages-root .messenger-chat-search {
  --messenger-search-accent:var(--color-dynamic,var(--msg-accent,#22c55e));
  display:grid!important;
  grid-template-columns:2.55rem minmax(8rem,1fr) auto auto!important;
  align-items:center!important;
  gap:.5rem!important;
  padding:.5rem!important;
  border:1px solid color-mix(in srgb,var(--messenger-search-accent) 42%,transparent)!important;
  border-radius:1rem!important;
  background:color-mix(in srgb,var(--msg-panel) 91%,var(--messenger-search-accent) 9%)!important;
  box-shadow:0 .65rem 1.7rem rgb(2 6 23/.13),inset 0 0 0 1px color-mix(in srgb,var(--messenger-search-accent) 12%,transparent)!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-mark {
  display:grid!important;
  width:2.55rem!important;
  min-width:2.55rem!important;
  height:2.55rem!important;
  place-items:center!important;
  border-radius:.78rem!important;
  background:color-mix(in srgb,var(--messenger-search-accent) 16%,var(--msg-panel))!important;
  color:var(--messenger-search-accent)!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-mark .messenger-icon {
  width:1.08rem!important;
  height:1.08rem!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field {
  display:grid;
  min-width:0;
  gap:.1rem;
  padding:.34rem .72rem .4rem;
  border:1px solid color-mix(in srgb,var(--messenger-search-accent) 24%,var(--msg-line))!important;
  border-radius:.78rem;
  background:var(--msg-panel)!important;
  transition:border-color 120ms ease,box-shadow 120ms ease;
}

html:root body.messages-route #messages-root .messenger-chat-search-field:focus-within {
  border-color:color-mix(in srgb,var(--messenger-search-accent) 72%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--messenger-search-accent) 15%,transparent)!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field > span {
  color:var(--messenger-search-accent);
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

html:root body.messages-route #messages-root .messenger-chat-search-field > input {
  width:100%;
  height:1.35rem!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--msg-text)!important;
  font-size:.76rem;
}

html:root body.messages-route #messages-root .messenger-chat-search > #messenger-chat-search-count {
  display:grid;
  min-width:3.65rem!important;
  height:2.55rem;
  place-items:center;
  padding:0 .55rem;
  border:1px solid color-mix(in srgb,var(--messenger-search-accent) 24%,var(--msg-line));
  border-radius:.78rem;
  background:var(--msg-panel);
  color:var(--msg-muted);
  font-size:.64rem;
  font-weight:900;
}

html:root body.messages-route #messages-root .messenger-chat-search-actions {
  display:flex;
  gap:.3rem;
  padding:.24rem;
  border:1px solid color-mix(in srgb,var(--messenger-search-accent) 24%,var(--msg-line));
  border-radius:.86rem;
  background:color-mix(in srgb,var(--msg-panel) 90%,var(--messenger-search-accent) 10%);
}

html:root body.messages-route #messages-root .messenger-chat-search-actions > button {
  display:grid!important;
  width:2.08rem!important;
  height:2.08rem!important;
  place-items:center;
  border:1px solid transparent!important;
  border-radius:.64rem!important;
  background:var(--msg-panel)!important;
  color:var(--messenger-search-accent)!important;
  box-shadow:0 .12rem .3rem rgb(2 6 23/.08)!important;
  cursor:pointer;
  transition:transform 120ms ease,background-color 120ms ease,color 120ms ease;
}

html:root body.messages-route #messages-root .messenger-chat-search-actions > button:hover:not(:disabled) {
  transform:translateY(-1px);
  background:var(--messenger-search-accent)!important;
  color:#fff!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-actions > button:disabled {
  opacity:.36;
  cursor:default;
}

html:root body.messages-route #messages-root .messenger-chat-search-actions > .messenger-chat-search-close {
  color:var(--msg-muted)!important;
}

@media (max-width:640px) {
  html:root body.messages-route #messages-root .messenger-chat-search {
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.38rem!important;
  }
  html:root body.messages-route #messages-root :is(.messenger-chat-search-mark,#messenger-chat-search-count) {
    display:none!important;
  }
}

/* V2.0.94: спокойный поиск без вложенной синей обводки и служебной подписи. */
html:root body.messages-route #messages-root .messenger-chat-search {
  border:0!important;
  background:color-mix(in srgb,var(--msg-panel) 86%,var(--messenger-search-accent) 14%)!important;
  box-shadow:0 .5rem 1.35rem rgb(2 6 23/.1)!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field {
  min-height:2.55rem;
  align-items:center;
  padding:.3rem .72rem;
  border:0!important;
  background:color-mix(in srgb,var(--msg-panel) 94%,var(--messenger-search-accent) 6%)!important;
  box-shadow:none!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field:focus-within {
  border:0!important;
  outline:0!important;
  background:var(--msg-panel)!important;
  box-shadow:none!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field > input {
  height:1.8rem!important;
  color:var(--msg-text)!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-field > input::placeholder {
  color:color-mix(in srgb,var(--msg-muted) 78%,var(--messenger-search-accent) 22%)!important;
  opacity:1;
}

html:root body.messages-route #messages-root .messenger-chat-search > #messenger-chat-search-count,
html:root body.messages-route #messages-root .messenger-chat-search-actions {
  border:0!important;
  box-shadow:none!important;
}

html:root body.messages-route #messages-root .messenger-chat-search-actions > .messenger-chat-search-close {
  border:0!important;
  background:var(--msg-panel)!important;
  color:var(--msg-muted)!important;
  box-shadow:none!important;
}

/* Меню строки друга остаётся компактным: два действия без пустых «этажей». */
html:root body .friend-row-menu-wrap .friend-dropdown {
  top:calc(100% + .38rem)!important;
  min-width:12.25rem!important;
  padding:.24rem!important;
}

html:root body .friend-row-menu-wrap .friend-dropdown.friend-dropdown-up {
  top:auto!important;
  bottom:calc(100% + .38rem)!important;
}

html:root body .friend-row-menu-wrap .friend-dropdown > button,
html:root body .friend-closeness-menu-action {
  min-height:2.7rem!important;
  gap:.62rem!important;
  padding:.48rem .68rem!important;
  line-height:1.15!important;
}

html:root body .friend-closeness-menu-action {
  margin-bottom:.22rem!important;
}

html:root body .friend-closeness-menu-action small {
  margin-top:.08rem!important;
}

/* Полоса прокрутки не залезает под скруглённые углы диалогов и редакторов. */
html:root body :is(
  #viewer-scroll-region,
  #viewer-comments-list,
  #cover-animation-grid,
  #cover-image-grid,
  .cover-editor-pane,
  .cover-editor-search-results,
  .profile-video-dialog,
  .profile-video-album-viewer-body
)::-webkit-scrollbar-track {
  margin-block:.62rem!important;
  border-radius:999px!important;
  background:transparent!important;
}

html:root body :is(
  #viewer-scroll-region,
  #viewer-comments-list,
  #cover-animation-grid,
  #cover-image-grid,
  .cover-editor-pane,
  .cover-editor-search-results,
  .profile-video-dialog,
  .profile-video-album-viewer-body
)::-webkit-scrollbar-thumb {
  border:1px solid transparent!important;
  border-radius:999px!important;
  background-clip:padding-box!important;
}

/* Единая крупная загрузка VMESTA. Используется только в полноразмерных
   областях; маленькие кнопки и локальная передача файлов сохраняют свои
   компактные индикаторы прогресса. */
html:root body .vmesta-loading-state{
  --vmesta-loader-accent:var(--msg-accent,var(--theme-accent,var(--color-dynamic,#3b82f6)));
  --vmesta-loader-soft:var(--msg-accent-soft,color-mix(in srgb,var(--vmesta-loader-accent) 12%,transparent));
  display:grid!important;
  min-height:clamp(12rem,34vh,22rem);
  place-content:center!important;
  justify-items:center!important;
  gap:.42rem!important;
  box-sizing:border-box;
  width:100%;
  padding:1.5rem!important;
  color:var(--adaptive-text-muted,var(--theme-text-muted,var(--msg-muted,#64748b)))!important;
  text-align:center!important;
}
html:root body .vmesta-loading-state.is-compact{min-height:8rem;padding:1rem!important}
html:root body .vmesta-loading-orbit{
  position:relative;
  display:block;
  width:2.65rem;
  height:2.65rem;
  margin:0 0 .3rem;
  border:1px solid color-mix(in srgb,var(--vmesta-loader-accent) 38%,transparent);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 15%,var(--vmesta-loader-accent) 0 .055rem,transparent .07rem),
    radial-gradient(circle at 85% 50%,var(--vmesta-loader-accent) 0 .055rem,transparent .07rem),
    radial-gradient(circle at 50% 85%,var(--vmesta-loader-accent) 0 .055rem,transparent .07rem),
    radial-gradient(circle at 15% 50%,var(--vmesta-loader-accent) 0 .055rem,transparent .07rem),
    radial-gradient(circle at 50% 50%,var(--vmesta-loader-accent) 0 .14rem,transparent .15rem),
    radial-gradient(circle at 50% 50%,transparent 0 34%,color-mix(in srgb,var(--vmesta-loader-accent) 32%,transparent) 35% 37%,transparent 38%),
    radial-gradient(circle at 50% 50%,var(--vmesta-loader-soft) 0 35%,transparent 36%),
    color-mix(in srgb,var(--vmesta-loader-accent) 3%,transparent);
}
html:root body .vmesta-skeleton-feedback .vmesta-loading-orbit{margin:0}
html:root body .vmesta-loading-orbit::before{
  content:'';
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:.16rem;
  height:.56rem;
  border-radius:999px;
  background:var(--vmesta-loader-accent);
  transform-origin:50% 100%;
  animation:vmesta-loading-hour-hand 4.8s linear infinite;
}
html:root body .vmesta-loading-orbit::after{
  content:'';
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:.085rem;
  height:.82rem;
  border-radius:999px;
  background:linear-gradient(to top,color-mix(in srgb,var(--vmesta-loader-accent) 62%,transparent),var(--vmesta-loader-accent));
  transform-origin:50% 100%;
  animation:vmesta-loading-minute-hand 1.2s linear infinite;
}
html:root body .vmesta-loading-orbit>.vmesta-loading-satellite{
  position:absolute;
  z-index:2;
  left:calc(50% - .09rem);
  top:-.09rem;
  display:block;
  box-sizing:border-box;
  width:.18rem;
  height:.18rem;
  min-width:0;
  min-height:0;
  max-width:.18rem;
  max-height:.18rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--vmesta-loader-accent);
  box-shadow:0 0 .3rem color-mix(in srgb,var(--vmesta-loader-accent) 60%,transparent);
  transform-origin:.09rem 1.4rem;
  animation:vmesta-loading-satellite 1.35s linear infinite;
}
html:root body .vmesta-loading-state>strong{color:var(--adaptive-text-strong,var(--theme-text-primary,var(--msg-text,#1e293b)))!important;font-size:.76rem!important;font-weight:950!important;line-height:1.3!important}
html:root body .vmesta-loading-state>small{max-width:22rem;color:inherit!important;font-size:.58rem!important;font-weight:700!important;line-height:1.5!important}
html:root body .vmesta-loading-state.is-waiting-long>small{color:#d97706!important}
@keyframes vmesta-loading-hour-hand{from{transform:translate(-50%,-100%) rotate(28deg)}to{transform:translate(-50%,-100%) rotate(388deg)}}
@keyframes vmesta-loading-minute-hand{from{transform:translate(-50%,-100%) rotate(0)}to{transform:translate(-50%,-100%) rotate(360deg)}}
@keyframes vmesta-loading-satellite{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html:root body .vmesta-loading-orbit::before,html:root body .vmesta-loading-orbit::after,html:root body .vmesta-loading-orbit>.vmesta-loading-satellite{animation:none!important}}

/* Стабильная левая витрина друзей: число и три зарезервированных места не
   меняют ширину, пока параллельно загружается точный серверный список. */
html:root body #friends-count-profile{min-width:2.65rem;text-align:center;font-variant-numeric:tabular-nums}
html:root body #friends-count-profile.is-loading{color:var(--adaptive-text-muted,var(--theme-text-muted,#64748b));animation:profile-friends-count-pulse 1.2s ease-in-out infinite}
html:root body #friends-list-container{min-height:2.65rem;align-items:center}
html:root body .profile-friend-avatar-skeleton{display:block;width:2.5rem;height:2.5rem;border-radius:.75rem;background:linear-gradient(100deg,color-mix(in srgb,var(--theme-accent,#3b82f6) 7%,transparent) 20%,color-mix(in srgb,var(--theme-accent,#3b82f6) 15%,transparent) 42%,color-mix(in srgb,var(--theme-accent,#3b82f6) 7%,transparent) 64%);background-size:220% 100%;animation:profile-friend-skeleton 1.35s ease-in-out infinite}
html:root body .gift-center-loading.vmesta-loading-state{height:auto!important;min-height:min(15rem,42vh)!important;overflow:hidden!important;contain:layout paint}
@keyframes profile-friends-count-pulse{50%{opacity:.42}}
@keyframes profile-friend-skeleton{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){html:root body #friends-count-profile.is-loading,html:root body .profile-friend-avatar-skeleton{animation:none!important}}

/* Витрина пространств: единая тематическая поверхность под переключателем вида и карточками. */
html:root body.spaces-catalog-route .spaces-index-results-panel {
  min-width: 0;
  min-height: clamp(22rem, 52vh, 37rem);
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 12%, var(--vmesta-ui-line, #dfe8f3));
  border-radius: 1.25rem;
  background: var(--theme-surface-panel, #fff);
  color: var(--vmesta-unified-ink, var(--standard-text-active, #1f2937));
  box-shadow: 0 1rem 2.5rem -2rem rgb(0 0 0 / .18);
}

/* Устройства живут в отдельной тематической карточке под настройками входа. */
html:root body #cover-security-pane .cover-devices-card { margin-top: .8rem; }
#cover-devices-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; color: var(--vmesta-ui-ink, #25395b); }
#cover-devices-disclosure > summary::-webkit-details-marker { display: none; }
#cover-devices-disclosure > summary span:first-child { display: grid; gap: .15rem; }
#cover-devices-disclosure > summary strong { font-size: .76rem; }
#cover-devices-disclosure > summary small { color: var(--vmesta-ui-muted, #64748b); font-size: .62rem; }
#cover-devices-disclosure .cover-devices-chevron { color: var(--vmesta-ui-primary, #3b82f6); font-size: 1.2rem; transition: transform .2s ease; }
#cover-devices-disclosure[open] .cover-devices-chevron { transform: rotate(180deg); }
.cover-devices-content { padding: 0 1rem 1rem; }
#cover-devices-status { margin: .4rem 0; color: var(--vmesta-ui-muted, #64748b); font-size: .62rem; }
#cover-devices-status:empty { display: none; }
#cover-devices-list { display: grid; gap: .5rem; }
.cover-device-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-width: 0; padding: .7rem; border: 1px solid var(--vmesta-ui-line, #dce6f3); border-radius: .8rem; background: var(--vmesta-ui-soft, #edf4ff); color: var(--vmesta-ui-ink, #25395b); }
.cover-device-row.is-current { border-color: color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 32%, var(--vmesta-ui-line, #dce6f3)); }
.cover-device-row > div { display: grid; min-width: 0; gap: .14rem; }
.cover-device-row strong { font-size: .65rem; }
.cover-device-row span, .cover-device-row small { color: var(--vmesta-ui-muted, #64748b); font-size: .55rem; overflow-wrap: anywhere; }
.cover-device-row button, #cover-devices-revoke-others { flex: none; padding: .48rem .62rem; border: 0; border-radius: .6rem; background: color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 12%, transparent); color: var(--vmesta-ui-primary, #3b82f6); font-size: .58rem; font-weight: 800; cursor: pointer; }
.cover-device-row button:hover, #cover-devices-revoke-others:hover { background: color-mix(in srgb, var(--vmesta-ui-primary, #3b82f6) 20%, transparent); }
#cover-devices-revoke-others { margin-top: .65rem; }
#cover-devices-revoke-others[hidden] { display: none; }
@media (max-width: 600px) { .cover-device-row { align-items: flex-start; flex-direction: column; } }
html:root body.spaces-catalog-route .spaces-index-results-panel .spaces-index-view-row { margin-bottom: .9rem; }
@media (max-width: 760px) {
  html:root body.spaces-catalog-route .spaces-index-results-panel { min-height: 18rem; padding: .75rem; border-radius: 1rem; }
}

/* В SVG сигнала планета расположена ниже геометрического центра; выравниваем
   её одинаково в наградах, заданиях и профильной витрине. */
html:root body .achievement-badge.tier-signal .achievement-signal-icon { transform: translateY(-.17rem) !important; }
html:root body .achievement-showcase-item.tier-signal > span > .achievement-signal-icon { transform: translateY(-.11rem) !important; }
html:root body .achievement-task-icon.achievement-kind-signal .achievement-signal-icon { transform: translateY(-.12rem) !important; }

/* Устройства оформлены той же типографикой и шириной полей, что и безопасность аккаунта. */
html:root body #cover-devices-disclosure > summary { display:grid;grid-template-columns:minmax(12rem,1fr) minmax(14rem,25rem);align-items:center;gap:1rem;color:var(--theme-text-primary,#25395b); }
html:root body #cover-devices-disclosure > summary strong { font-size:.8rem;font-weight:900; }
html:root body #cover-devices-disclosure > summary small { color:var(--theme-text-muted,#64748b);font-size:.66rem;font-weight:650;line-height:1.45; }
html:root body #cover-devices-disclosure .cover-devices-action { display:flex;align-items:center;justify-content:space-between;min-height:2.7rem;padding:.55rem .8rem;border:1px solid var(--theme-border-subtle,#dce6f3);border-radius:.7rem;background:var(--theme-surface-control,#edf4ff);color:var(--theme-text-primary,#25395b);font-size:.75rem;font-weight:850; }
html:root body #cover-devices-disclosure .cover-devices-chevron { color:var(--theme-accent,#3b82f6); }
html:root body #cover-devices-status { font-size:.66rem;color:var(--theme-text-muted,#64748b); }
html:root body .cover-device-row { padding:.8rem;border-color:var(--theme-border-subtle,#dce6f3);background:var(--theme-surface-control,#edf4ff);color:var(--theme-text-primary,#25395b); }
html:root body .cover-device-row strong { font-size:.75rem;font-weight:900; }
html:root body .cover-device-row :is(span,small) { color:var(--theme-text-muted,#64748b);font-size:.65rem;line-height:1.4; }
html:root body .cover-device-row button,html:root body #cover-devices-revoke-others { font-size:.65rem;font-weight:850;color:var(--theme-accent,#3b82f6); }
@media(max-width:640px){html:root body #cover-devices-disclosure > summary{grid-template-columns:1fr}}

/* Центр верификации: два независимых списка с поиском по серверу. */
html:root body .verification-center-panel { width:min(72rem,calc(100vw - 2rem));max-height:min(88dvh,50rem); }
html:root body .verification-center-body { max-height:calc(min(88dvh,50rem) - 4.8rem);overflow:hidden; }
html:root body .verification-search { display:flex;align-items:center;gap:.6rem;min-height:2.7rem;margin-bottom:.8rem;padding:0 .8rem;border:1px solid var(--theme-border-subtle,#dce6f3);border-radius:.75rem;background:var(--theme-surface-control,#f1f5f9);color:var(--color-dynamic,#3b82f6); }
html:root body .verification-search svg { width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
html:root body .verification-search input { width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--adaptive-text,#25395b);font-size:.72rem;font-weight:700; }
html:root body .verification-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;min-height:0; }
html:root body .verification-column { min-width:0;min-height:0;padding:.8rem;border:1px solid var(--theme-border-subtle,#dce6f3);border-radius:1rem;background:var(--theme-surface-panel,#fff); }
html:root body .verification-column.verification-issued-section { margin:0; }
html:root body .verification-column .verification-request-list { display:grid;align-content:start;max-height:min(58dvh,34rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:.2rem; }
html:root body .verification-column .verification-request-card { grid-template-columns:2.7rem minmax(0,1fr); }
html:root body .verification-column .verification-request-actions { grid-column:1/-1;justify-content:flex-end; }
@media(max-width:760px){html:root body .verification-center-body{overflow-y:auto}html:root body .verification-columns{grid-template-columns:1fr}html:root body .verification-column .verification-request-list{max-height:18rem}}
html:root body :is(.level-settings-list,.space-rating-admin-body) { overscroll-behavior:contain; }