/* ══ MODIX · дизайн-система v7 ══════════════════════════════════════════════
   Собрана по референсам 17.09.2026: стеклянные плитки-иконки с белым символом,
   белые карточки с мягкой тенью, фиолетовая основная кнопка, сине-фиолетовая
   палитра, плотная типографика Inter. Слой лежит поверх base/brand/v5 и
   переопределяет только внешний вид — разметку экранов не меняет.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* градиенты плиток — как в наборе иконок */
  --g-blue:linear-gradient(145deg,#3B82F6 0%,#60A5FA 100%);
  --g-pink:linear-gradient(145deg,#EC4899 0%,#F472B6 100%);
  --g-violet:linear-gradient(145deg,#6D5BFF 0%,#A78BFA 100%);
  --g-green:linear-gradient(145deg,#16A34A 0%,#4ADE80 100%);
  --g-amber:linear-gradient(145deg,#F59E0B 0%,#FBBF24 100%);
  --g-gold:linear-gradient(145deg,#E0A100 0%,#FFD65C 100%);
  --g-red:linear-gradient(145deg,#EF4444 0%,#F87171 100%);
  --g-teal:linear-gradient(145deg,#0D9488 0%,#2DD4BF 100%);
  --g-cyan:linear-gradient(145deg,#0EA5E9 0%,#38BDF8 100%);
  --g-slate:linear-gradient(145deg,#64748B 0%,#94A3B8 100%);
  --primary:#6D5BFF; --primary-2:#8B5CF6; --primary-edge:#4C3ED9;
  --card-sh:0 10px 28px rgba(28,36,104,.08), 0 1px 2px rgba(28,36,104,.06);
  --card-sh-hover:0 14px 34px rgba(28,36,104,.12);
  --tile-sh:0 6px 14px rgba(20,28,90,.18);
  --radius-card:22px; --radius-ctl:14px; --radius-tile:13px;
}
:root[data-theme="dark"],
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --card-sh:0 12px 30px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --card-sh-hover:0 16px 40px rgba(0,0,0,.55);
  --tile-sh:0 6px 16px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --card-sh:0 12px 30px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --card-sh-hover:0 16px 40px rgba(0,0,0,.55);
  --tile-sh:0 6px 16px rgba(0,0,0,.45);
}

/* ── типографика ─────────────────────────────────────────────────────────── */
body{font-family:var(--sans);letter-spacing:-.01em;font-feature-settings:"cv11","ss01","tnum"}
h1,#scrTitle{letter-spacing:-.03em;font-weight:700}
.row .t,.activity-person-name,.b .big,.f .n,.ev-title,.hcard .t,.quick .t{letter-spacing:-.02em}
.cap{font-weight:700;letter-spacing:-.01em;text-transform:none;font-size:15px;color:var(--ink)}
.cap .right{font-weight:600;color:var(--muted)}
.hint,.row .s,.b .sub{letter-spacing:0}

/* ── карточки ────────────────────────────────────────────────────────────── */
.card,.b,.modtile,.pcard,.hcard,.rowcard,.block,.sumstrip,.ev-who,.ev-facts{
  border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--card-sh)}
.card .row+.row,.card>.row+.row{border-top-color:var(--line-2)}

/* ── стеклянные плитки-иконки (белый символ на градиенте, блик сверху) ─── */
.tile,.sq,.quick .tile,.modtile .tile,.hcard .tile,.sumstrip .ico,.mark,.tl .dotc,.ev-head .tile,.pf .head .round{
  position:relative;overflow:hidden;border-radius:var(--radius-tile);color:#fff;
  box-shadow:var(--tile-sh),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08);
  isolation:isolate}
.tile::before,.sq::before,.sumstrip .ico::before,.mark::before,.tl .dotc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 60%);z-index:0}
.tile svg,.sq svg,.sumstrip .ico svg,.mark svg,.tl .dotc svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.tile svg path,.sq svg path,.sumstrip .ico svg path,.mark svg path,.tl .dotc svg path{fill:#fff!important;stroke:#fff!important}
.tile svg path[stroke],.sq svg path[stroke],.sumstrip .ico svg path[stroke],.mark svg path[stroke],.tl .dotc svg path[stroke]{fill:none!important}
.tile.blue,.sq.blue,.ico.blue{background:var(--g-blue)!important}
.tile.pink,.sq.pink,.ico.pink{background:var(--g-pink)!important}
.tile.violet,.sq.violet,.ico.violet{background:var(--g-violet)!important}
.tile.green,.sq.green,.ico.green{background:var(--g-green)!important}
.tile.amber,.sq.amber,.ico.amber{background:var(--g-amber)!important}
.tile.gold,.sq.gold,.ico.gold{background:var(--g-gold)!important}
.tile.red,.sq.red,.ico.red{background:var(--g-red)!important}
.tile.teal,.sq.teal,.ico.teal{background:var(--g-teal)!important}
.tile.cyan,.sq.cyan,.ico.cyan{background:var(--g-cyan)!important}
.tile.slate,.sq.slate,.ico.slate,.tile:not([class*=" "]){background:var(--g-slate)}
/* цветные метки журнала: тон задан inline — оставляем цвет, добавляем стекло */
.mark{color:#fff!important}
.mark[style*="--red"]{background:var(--g-red)!important}
.mark[style*="--amber"]{background:var(--g-amber)!important}
.mark[style*="--violet"]{background:var(--g-violet)!important}
.mark[style*="--blue"]{background:var(--g-blue)!important}
.mark[style*="--green"]{background:var(--g-green)!important}
.mark[style*="--teal"]{background:var(--g-teal)!important}
.tl .dotc[style*="--red"]{background:var(--g-red)!important}
.tl .dotc[style*="--amber"]{background:var(--g-amber)!important}
.tl .dotc[style*="--violet"]{background:var(--g-violet)!important}
.tl .dotc[style*="--blue"]{background:var(--g-blue)!important}
.tl .dotc[style*="--green"]{background:var(--g-green)!important}
.tl .dotc[style*="--teal"]{background:var(--g-teal)!important}
/* Круглые кнопки в шапке профиля тоже оформлены как плитка, но фона им никто
   не задал: белый значок оказывался на светлой кнопке и пропадал. */
.pf .head .round{background:var(--g-slate);border-color:transparent}
.pf .head .round::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 60%);z-index:0}
.pf .head .round svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}

/* размеры */
.row .tile{width:38px;height:38px}
.quick .tile{width:46px;height:46px;border-radius:15px}
.modtile .tile{width:44px;height:44px;border-radius:14px}
.bento .b .sq{width:34px;height:34px;border-radius:11px}
.sumstrip .ico{width:30px;height:30px;border-radius:10px}
.hcard .tile{width:40px;height:40px}
.activity-row .activity-action{width:28px!important;height:28px!important;border-radius:9px!important}

/* ── кнопки ──────────────────────────────────────────────────────────────── */
.btn{border-radius:var(--radius-ctl);font-weight:700;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(28,36,104,.06);border-color:var(--line);transition:transform .08s,box-shadow .12s,background .15s}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:none}
.btn.primary,.fab,.savebar .save,.wizbar .btn.primary,.chip[aria-pressed="true"],.seg .thumb,.tabbar .thumb{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 8px 20px rgba(109,91,255,.32),inset 0 1px 0 rgba(255,255,255,.35)!important}
.btn.primary:active,.fab:active{box-shadow:0 3px 10px rgba(109,91,255,.28)!important}
.btn.danger{background:var(--card);color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);box-shadow:none}
.btn.danger.solid{background:linear-gradient(135deg,#EF4444,#F87171)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(239,68,68,.28)!important}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none}
.btn.sm{min-height:44px;font-size:14px;border-radius:12px}
.btn svg{flex:0 0 auto}
.round,.iconbtn,.q{border-radius:12px;box-shadow:0 1px 2px rgba(28,36,104,.06)}
.chip{border-radius:999px;font-weight:600;border-color:var(--line);background:var(--card)}
.chip[aria-pressed="true"]{outline:0!important}

/* ── главная: карточка владельца, три плитки, баннер подписки, действия ─── */
.ownercard{background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--line);box-shadow:var(--card-sh)!important;border-radius:var(--radius-card);padding:16px}
.ownercard .hello{color:var(--muted);font-size:13px;font-weight:600}
.ownercard .nm{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ownercard .who{color:var(--ink-2);font-size:13px}
.ownercard .online{background:var(--green-soft);color:var(--green);border:0;font-weight:700}
.ownercard .facts{gap:10px}
.ownercard .f{background:var(--card-2)!important;border:1px solid var(--line-2)!important;border-radius:18px!important;padding:12px 10px 10px!important;color:var(--ink)!important;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ownercard .f .tile{width:38px;height:38px;border-radius:12px}
.ownercard .f .n{font-size:24px!important;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.ownercard .f .k{font-size:12px;color:var(--muted);font-weight:600}
.ownercard .f .trend{font-size:11.5px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ownercard .f .trend.muted{color:var(--muted)}
.ownercard .f .bar{width:100%;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.ownercard .f .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.ownercard .subbanner{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;border:0;border-radius:18px;padding:12px 14px;text-align:left;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff;font:inherit;cursor:pointer;
  box-shadow:0 10px 24px rgba(109,91,255,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.ownercard .subbanner .t{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.ownercard .subbanner .s{font-size:12.5px;opacity:.85;font-weight:600}
.ownercard .subbanner .chev{margin-left:auto;opacity:.9}
.ownercard .subbanner svg{flex:0 0 auto}
.quick{gap:10px}
.quick button{border-radius:20px;border:1px solid var(--line);background:var(--card)!important;box-shadow:var(--card-sh)!important;min-height:76px;padding:12px 12px;gap:12px}
.quick button:active{transform:scale(.985);box-shadow:var(--card-sh)}
.quick .t{font-size:15px;font-weight:700}
.quick .s{font-size:12.5px;color:var(--muted);font-weight:500}
.quick button .chev{margin-left:auto;color:var(--muted)}

/* ── бейджи и статусы ────────────────────────────────────────────────────── */
.pill,.mbadge{border-radius:999px;font-weight:700;letter-spacing:0}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.pill.info{background:var(--blue-soft);color:var(--blue)}
.pill.vac{background:var(--amber-soft);color:var(--amber)}
.mbadge.owner{background:var(--gold-soft);color:var(--gold)}
.mbadge.admin{background:var(--blue-soft);color:var(--blue)}
.mbadge.mod{background:var(--green-soft);color:var(--green)}
.mbadge.del{background:var(--red-soft);color:var(--red)}

/* ── уведомления: цветные баннеры с иконкой ─────────────────────────────── */
.toast{border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:700;border:1px solid transparent;
  box-shadow:0 12px 30px rgba(20,28,90,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.toast .tico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;color:#fff}
.toast.ok{background:color-mix(in srgb,#16A34A 14%,var(--card));color:var(--ink);border-color:color-mix(in srgb,#16A34A 35%,transparent)}
.toast.ok .tico{background:var(--g-green)}
.toast.info{background:color-mix(in srgb,#3B82F6 14%,var(--card));color:var(--ink);border-color:color-mix(in srgb,#3B82F6 35%,transparent)}
.toast.info .tico{background:var(--g-blue)}
.toast.warn{background:color-mix(in srgb,#F59E0B 16%,var(--card))!important;color:var(--ink)!important;border-color:color-mix(in srgb,#F59E0B 40%,transparent)}
.toast.warn .tico{background:var(--g-amber)}
.toast.err{background:color-mix(in srgb,#EF4444 14%,var(--card));color:var(--ink);border-color:color-mix(in srgb,#EF4444 40%,transparent)}
.toast.err .tico{background:var(--g-red)}
.toast>svg:first-child{display:none}

/* ── поля ────────────────────────────────────────────────────────────────── */
.search,.field input,.field textarea,input.inp{border-radius:14px;border-color:var(--line);background:var(--card)}
.field input:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,91,255,.18)}

/* ── шапка ──────────────────────────────────────────────────────────────── */
.head .round{border-radius:13px;box-shadow:0 2px 6px rgba(28,36,104,.08)}


/* ── главная v7: точная раскладка эталонного макета ─────────────────────── */
.ownercard.v7{padding:14px;display:flex;flex-direction:row;align-items:center;gap:14px;border-radius:24px}
.ownercard.v7 .top{display:flex;align-items:center;gap:14px;width:100%;min-width:0}
.ownercard.v7 .ava,.ownercard.v7 .ava .img{width:64px!important;height:64px!important;border-radius:18px!important}
.ownercard.v7 .hellorow{margin:0}
.ownercard.v7 .hello{font-size:14px;color:var(--muted);font-weight:600}
.ownercard.v7 .nm{font-size:23px;line-height:1.15;margin-top:1px}
.ownercard.v7 .who{font-size:13.5px;margin-top:1px}
.ownercard.v7 .online{margin-top:7px;padding:5px 11px;font-size:12.5px;border-radius:999px}
.ownercard.v7 .crystalm{width:62px;height:62px;margin-left:auto;flex:0 0 auto}
.ownercard.v7 .q{position:absolute;top:10px;right:10px;opacity:.5}
.ownercard.v7{position:relative}

/* ряд из трёх карточек-показателей */
.factrow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.factrow .f{background:var(--card)!important;border:1px solid var(--line)!important;box-shadow:var(--card-sh)!important;
  border-radius:20px!important;padding:14px 12px!important;display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:0}
.factrow .f .tile{width:44px;height:44px;border-radius:14px}
.factrow .f .n{font-size:clamp(24px,7vw,32px)!important;font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.factrow .f .k{font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.25}
.factrow .f .trend{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--green);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.factrow .f .trend.muted{color:var(--muted);font-weight:600}
.factrow .f .trend.down{color:var(--red)}
.factrow .f .trend svg path{stroke:currentColor!important;fill:none!important}
.factrow .f .barrow{display:flex;align-items:center;gap:7px;width:100%}
.factrow .f .bar{flex:1;height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.factrow .f .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.factrow .f .pct{font-size:12px;font-weight:700;color:var(--muted)}

/* баннер подписки */
.subbanner{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;border:0;border-radius:22px;padding:14px 16px;text-align:left;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff;font:inherit;cursor:pointer;
  box-shadow:0 12px 28px rgba(109,91,255,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.subbanner .tx{min-width:0;flex:1}
.subbanner .t{font-size:17px;font-weight:700;letter-spacing:-.02em}
.subbanner .s{font-size:14px;opacity:.88;font-weight:600;margin-top:2px}
.subbanner .chev{opacity:.95;display:flex}
.subbanner .chev svg path{stroke:#fff!important;fill:none!important}
.subbanner:active{transform:scale(.99)}

/* быстрые действия — пастельные подложки */
.quick button[data-tone]{border:0;box-shadow:none!important}
.quick button[data-tone="blue"]{background:color-mix(in srgb,#3B82F6 10%,var(--card))!important}
.quick button[data-tone="violet"]{background:color-mix(in srgb,#8B5CF6 10%,var(--card))!important}
.quick button[data-tone="green"]{background:color-mix(in srgb,#16A34A 10%,var(--card))!important}
.quick button[data-tone="amber"]{background:color-mix(in srgb,#F59E0B 12%,var(--card))!important}
.quick button[data-tone="gold"]{background:color-mix(in srgb,#E0A100 12%,var(--card))!important}
.quick button[data-tone="red"]{background:color-mix(in srgb,#EF4444 10%,var(--card))!important}
.quick button[data-tone="teal"]{background:color-mix(in srgb,#0D9488 10%,var(--card))!important}
.quick button[data-tone="pink"]{background:color-mix(in srgb,#EC4899 10%,var(--card))!important}
.quick .tile{width:48px;height:48px;border-radius:16px}

/* заголовок раздела и ссылка справа — как в макете */
#v-home .cap{font-size:19px;font-weight:700;letter-spacing:-.03em}
#v-home .cap .caplink,.cap .caplink{color:var(--primary);font-weight:700;font-size:13.5px}
.cap .caplink svg path{stroke:var(--primary)!important;fill:none!important}
.ownercard.v7 .online{align-self:flex-start;margin-top:8px}
.quick .t{font-size:15.5px}

/* карточка владельца: сетка аватар | текст | кристалл, «Онлайн» в потоке под ролью */
.ownercard.v7 .top{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:0!important;position:relative}
.ownercard.v7 .online{position:static!important;grid-column:auto;align-self:flex-start;margin-top:8px;display:inline-flex}
.ownercard.v7 .crystalm{grid-column:3;width:clamp(52px,17vw,72px);margin:0}
.factrow .f .trend{font-size:11.5px;line-height:1.25;white-space:normal}
.factrow .f .k{font-size:13px}
/* быстрые действия: одинаковая высота и ровные две строки подписи */
.quick button{min-height:84px;align-items:center}
.quick .tx{min-width:0;flex:1}
.quick .t{line-height:1.2}
.quick .s{line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* баннер подписки: текст не должен прыгать под корону */
.subbanner{align-items:center}
.subbanner .tx .t{line-height:1.2}
.subbanner .tx .s{line-height:1.25}

.factrow .f .trend{align-items:center}
.factrow .f .trend svg{flex:0 0 auto;margin-top:1px}
.factrow .f .trend span{min-width:0}


/* ── нижняя панель: настоящее жидкое стекло ────────────────────────────────
   Преломление считает js/app/81-liquid-glass.js (карта линзы + расщепление
   цвета по кромке). Здесь — толщина стекла: свечение по краю, внутренние
   блики сверху и снизу, выпуклая активная капля. */
.tabbar.liquid-on{
  background:color-mix(in srgb, var(--card) 24%, transparent)!important;
  border:1px solid color-mix(in srgb,#fff 42%,transparent)!important;
  backdrop-filter:url(#modix-liquid) blur(7px) saturate(210%) brightness(1.08);
  -webkit-backdrop-filter:url(#modix-liquid) blur(7px) saturate(210%) brightness(1.08);
  box-shadow:
    0 24px 48px rgba(16,12,48,.28),
    0 4px 12px rgba(16,12,48,.16),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -14px 24px -16px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
.tabbar.liquid-on::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 80% at 6% 0%, rgba(190,215,255,.45), transparent 58%),
    radial-gradient(120% 80% at 94% 0%, rgba(255,205,240,.35), transparent 58%),
    linear-gradient(0deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%);
  opacity:.9;
}
.tabbar.liquid-on .thumb{
  background:linear-gradient(160deg, color-mix(in srgb,var(--primary) 88%,transparent), color-mix(in srgb,var(--primary-2) 84%,transparent))!important;
  box-shadow:
    0 10px 22px color-mix(in srgb,var(--primary) 45%,transparent),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -8px 14px -10px rgba(0,0,0,.45)!important;
}
:root[data-theme="dark"] .tabbar.liquid-on,
:root:not([data-theme="light"]) .tabbar.liquid-on{
  background:color-mix(in srgb, var(--card) 22%, transparent)!important;
  border-color:color-mix(in srgb,#fff 20%,transparent)!important;
  box-shadow:
    0 26px 54px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -14px 24px -16px rgba(255,255,255,.22)!important;
}


/* ── плавность: на время прокрутки убираем самый дорогой эффект ─────────── */
.tabbar.liquid-on.scrolling{
  backdrop-filter:blur(12px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(170%)!important;
}
.tabbar{will-change:backdrop-filter}
/* строки списков не прячем через content-visibility: у них разная высота,
   и подстановка размера сама даёт прыжки при прокрутке */
/* тени дешевле: одна мягкая вместо двух слоёв на строках */
.row{box-shadow:none}

/* Список чатов сетки. Кнопка «убрать» раньше была круглой кнопкой помощи и
   вставала отдельной строкой: каждая строка выходила вдвое выше нужного. */
.netchats .netadd{margin:10px 12px;width:calc(100% - 24px)}
.netchats .row{padding-top:9px!important;padding-bottom:9px!important;min-height:0!important}
.netchats .row .s{font-size:12px}
.netchats .netx{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;
  margin:0 2px 0 6px;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line)}
.netchats .netx svg{width:13px;height:13px}

/* Состояние загрузки медиа в посте: видно, идёт чтение, получилось или нет. */
.v2-media-progress{margin:8px 0 2px;font-weight:600;display:flex;align-items:center;gap:7px;min-height:18px}
.v2-media-progress.upload-busy{color:var(--accent)}
.v2-media-progress.upload-busy::before{content:"";width:13px;height:13px;flex:0 0 13px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-top-color:var(--accent);
  animation:uploadSpin .8s linear infinite}
.v2-media-progress.upload-done{color:#16A34A}
.v2-media-progress.upload-done::before{content:"✓";font-weight:700}
.v2-media-progress.upload-fail{color:#EF4444}
.v2-media-progress.upload-fail::before{content:"!";font-weight:700}
.v2-media-name{white-space:normal;overflow-wrap:anywhere}
@keyframes uploadSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.v2-media-progress.upload-busy::before{animation:none}}

/* Перетаскивание миниатюр в посте. */
.v2-media-item{cursor:grab;touch-action:manipulation;-webkit-user-select:none;user-select:none}
/* картинку тащит наш обработчик, а не браузер: его призрачная копия
   перебивала жест, и файл «брался», но никуда не вставлялся */
.v2-media-item img,.v2-media-item video{-webkit-user-drag:none;user-select:none}
.v2-media-item img{pointer-events:none}
.v2-media-list.v2-media-reordering{touch-action:none}
.v2-media-list.v2-media-reordering .v2-media-item{transition:transform .14s ease}
.v2-media-item.v2-media-dragging{cursor:grabbing;opacity:.85;transform:scale(1.04);
  box-shadow:0 10px 24px rgba(28,36,104,.24);outline:2px solid var(--accent);outline-offset:2px}
.v2-media-tip{grid-column:1/-1;margin:2px 0 0;opacity:.75}
@media(prefers-reduced-motion:reduce){.v2-media-list.v2-media-reordering .v2-media-item{transition:none}}