:root{
  --vk-blue:#4A76A8;
  --vk-blue-dark:#3E6691;
  --vk-blue-hover:#5685B5;
  --vk-bg:#F0F2F5;
  --vk-white:#fff;
  --vk-text:#2c2d2e;
  --vk-muted:#818c99;
  --vk-link:#2B587A;
  --vk-border:#DCE1E8;
  --vk-green:#2FAF5A;
  --vk-red:#e64646;
  --danger-soft:#FDECEC;
  --vk-radius:4px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:none;  /* R92: панель — рамка, не тень (лишние слои убраны) */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--vk-bg);color:var(--vk-text);font:13px/1.45 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--vk-link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.topbar{
  background:var(--vk-blue);border-bottom:1px solid var(--vk-blue-dark);
  color:#fff;height:48px;position:sticky;top:0;z-index:100;
}
.topbar-inner{
  max-width:980px;margin:0 auto;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;
}
.logo{
  font-weight:700;font-size:17px;color:#fff!important;text-decoration:none!important;
  letter-spacing:-.03em;margin-right:8px;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.1);
}
.logo span{opacity:.88;font-weight:600}
.top-search{
  flex:1;max-width:260px;height:30px;border:0;border-radius:4px;padding:0 12px;
  background:var(--glass);font-size:13px;color:var(--vk-text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.top-search:focus{outline:none;background:var(--card)}
.top-nav{display:flex;align-items:center;gap:1px;margin-left:auto}
.top-nav a{
  color:#fff!important;text-decoration:none!important;padding:10px 11px;border-radius:4px;
  font-weight:600;font-size:13px;opacity:.96;position:relative;
}
.top-nav a:hover{background:rgba(255,255,255,.14)}
.badge-n{
  position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  background:var(--vk-red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}

.wrap{max-width:980px;margin:14px auto;padding:0 14px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px}
.wrap.auth{grid-template-columns:1fr;max-width:400px;margin-top:56px}

.side{
  /* R93: пользовательское меню без фона и рамки — плоский современный вид */
  background:transparent;border:0;border-radius:var(--vk-radius);
  padding:4px 0;align-self:start;position:sticky;top:62px;box-shadow:none;
}
.side a{
  display:flex;align-items:center;gap:6px;min-width:0;
  padding:8px 14px;color:var(--vk-link);text-decoration:none;font-size:13px;
  transition:background .12s;white-space:nowrap;
}
.side a .side-t,.side a > span:not(.side-ico):not(.cnt){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .cnt{margin-left:auto;flex-shrink:0}
.side a:hover,.side a.is-on{background:var(--fill);text-decoration:none}
.side .side-sep{height:1px;background:var(--vk-border);margin:6px 0}
.side .cnt{
  background:#EDF1F6;color:var(--vk-link);font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.side .cnt.hot{background:var(--vk-red);color:#fff}

.main{min-width:0}
.panel{
  background:var(--card);border:1px solid var(--vk-border);border-radius:var(--vk-radius);
  margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden;
}
.panel-h{
  padding:11px 16px;border-bottom:1px solid var(--vk-border);font-weight:700;font-size:13px;
  color:var(--vk-text);display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fafbfc,#f5f6f8);
}
.panel-b{padding:14px 16px}
.profile-name{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.02em}
.profile-status{color:var(--vk-muted);margin:0 0 12px;font-size:13px;font-style:italic}
.profile-meta{color:var(--vk-muted);font-size:13px;line-height:1.7}
.profile-meta b{color:var(--vk-text);font-weight:600}
.profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,#5685B5,var(--vk-blue));color:#fff!important;border:0;border-radius:4px;
  padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none!important;
  line-height:1.3;border:1px solid var(--vk-blue-dark);
}
.btn:hover{background:linear-gradient(180deg,var(--vk-blue-hover),var(--vk-blue));text-decoration:none!important}
.btn-sec{
  background:linear-gradient(180deg,#f5f7fa,#EDF1F6);color:var(--vk-link)!important;
  border:1px solid #D3DCE6;box-shadow:none;
}
.btn-sec:hover{background:var(--tint-hover)}
.btn-sm{padding:5px 12px;font-size:12px}

.wall-form textarea{
  width:100%;min-height:72px;border:1px solid var(--vk-border);border-radius:4px;
  padding:12px;font:13px/1.45 var(--font);resize:vertical;background:var(--field);
  transition:border-color .15s,background .15s;
}
.wall-form textarea:focus{outline:none;border-color:var(--vk-blue);background:var(--card);box-shadow:0 0 0 3px rgba(74,118,168,.12)}
.wall-form .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}

.post{padding:14px 16px;border-bottom:1px solid var(--vk-border);container-type:inline-size}  /* R90: контейнер для hide-md */
.post:last-child{border-bottom:0}
.post-head{display:flex;gap:12px;align-items:flex-start}
.post-av{
  width:50px;height:50px;border-radius:4px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.post-av img{width:100%;height:100%;object-fit:cover}
.post-author{font-weight:700;color:var(--vk-link);font-size:13px}
.post-time{color:var(--vk-muted);font-size:12px;margin-top:2px}
/* Интервалы записей: pre-wrap + line-height 1.5; переносы строк нормализует accounts/md.py (R84). Единственное правило .post-text — дублей нет (R86). */
.post-text{margin:10px 0 0;white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:13px}
/* R91: компактный разделитель абзацев (accounts/md.py): пустая строка ->
   блок 6px вместо полной пустой строки внутри pre-wrap («огромное расстояние») */
.md-pgap{display:block;height:6px;user-select:none}
.post-img{margin-top:10px;border-radius:4px;overflow:hidden;border:1px solid var(--vk-border)}
.post-img img{width:100%}
.post-acts{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:12px;font-size:12px;align-items:center}  /* R93: современный ряд — компактные пилюли */
.post-acts button,.post-acts a{
  background:none;border:0;color:var(--vk-link);cursor:pointer;padding:0;font:inherit;font-weight:600;
}
.post-acts button:hover{text-decoration:none}
.post-acts .liked{color:var(--vk-red)}
/* R90: ряд действий не должен вылезать за карточку — в узкой колонке подписи второстепенных действий
   («Избранное», «Репост») скрываются, остаются иконки с подсказками; на широких страницах — всё видно */
.post-acts .act-btn svg{width:14px;height:14px}
@container (max-width:490px){.post-acts .hide-md{display:none}}
@container (max-width:539px){.post-acts .hide-md2{display:none}}  /* лента 502 — прячем подписи; профиль 532 — все подписи на месте */

.comments{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.comments.collapsed{margin-top:0;padding-top:0;border-top:0}  /* R93: полосы под рядом действий нет, пока комментарии свернуты */
.comment{display:flex;gap:8px;margin-bottom:8px}
.comment-av{
  width:32px;height:32px;border-radius:3px;flex-shrink:0;
  background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;
}
.comment-av img{width:100%;height:100%;object-fit:cover}
.comment-body{flex:1;background:var(--fill);border-radius:4px;padding:7px 10px;font-size:13px;line-height:1.4}
.comment-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.comment-form input{
  flex:1;border:1px solid var(--vk-border);border-radius:4px;padding:7px 10px;font:13px var(--font);
}
.comment-form input:focus{outline:none;border-color:var(--vk-blue)}

.friends-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.friend-card{
  text-align:center;padding:12px 8px;border:1px solid var(--vk-border);border-radius:4px;
  text-decoration:none!important;color:inherit;transition:background .15s,border-color .15s;
}
.friend-card:hover{background:var(--fill);border-color:#D3DCE6;text-decoration:none}
.friend-card .av{
  width:88px;height:88px;margin:0 auto 8px;border-radius:4px;overflow:hidden;
  background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;
}
.friend-card .av img{width:100%;height:100%;object-fit:cover}
.friend-card .nm{font-size:13px;color:var(--vk-link);font-weight:600}

.mail-item{
  display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--vk-border);
  text-decoration:none!important;color:inherit;transition:background .12s;
}
.mail-item:hover{background:var(--fill)}
.mail-item.is-unread{background:#f0f5fb}
.mail-preview{flex:1;min-width:0}
.mail-preview .nm{font-weight:700;color:var(--vk-link)}
.mail-preview .tx{color:var(--vk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-top:2px}

.chat-thread{max-height:440px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:#f7f8fa}
.bubble{
  max-width:72%;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.4;
  background:var(--card);align-self:flex-start;border:1px solid var(--vk-border);box-shadow:var(--shadow);
  position:relative;
}
.bubble.mine{background:#dae3ef;align-self:flex-end;border-color:#D3DCE6}
.bubble .t{display:flex;align-items:center;justify-content:flex-end;gap:2px;font-size:11px;color:var(--vk-muted);margin-top:4px}
.bubble .t .t-val{white-space:nowrap}
.bubble .t .bb-sender{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-send{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--vk-border);background:var(--card)}
.chat-send input{flex:1;border:1px solid var(--vk-border);border-radius:4px;padding:9px 12px;font:13px var(--font)}
.chat-send input:focus{outline:none;border-color:var(--vk-blue)}

.auth-box{
  background:var(--card);border:1px solid var(--vk-border);border-radius:6px;padding:28px 26px;
}
.auth-box h1{margin:0 0 18px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.auth-field{display:block;margin-bottom:14px;font-size:12px;color:var(--vk-muted);font-weight:600}
.auth-field input{
  display:block;width:100%;margin-top:5px;border:1px solid var(--vk-border);border-radius:4px;
  padding:10px 12px;font:13px var(--font);color:var(--vk-text);
}
.auth-field input:focus{outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.12)}
.msg{padding:10px 14px;border-radius:4px;margin-bottom:12px;font-size:13px}
.msg-error{background:#fce8e8;color:#a33;border:1px solid #f5c6c6}
.msg-info{background:#e3f2fd;color:#1565c0;border:1px solid #bbdefb}

.footer{
  max-width:980px;margin:28px auto 48px;padding:0 14px;color:var(--vk-muted);font-size:12px;
  text-align:center;
}

@media(max-width:760px){
  .wrap{grid-template-columns:1fr;padding:0 10px}
  /* R96: сайдбар на мобайле скрыт — навигация: таб-бар (5 вкладок) + полноэкранный экран «Ещё» (.m-more) */
  .side{display:none}
  .friends-grid{grid-template-columns:repeat(2,1fr)}
  /* R89: поиск на телефоне настраивается в НИЖНЕМ блоке ≤760px —
     после десктопных правил .top-search-wrap (каскад по порядку).
     Единственная точка поиска — шапка; в меню дубля нет. */
  .top-nav a{padding:10px 7px;font-size:12px}
}

/* SVG icons */
.ico{display:inline-block;vertical-align:-3px;flex-shrink:0}
.side-ico{display:inline-flex;width:18px;margin-right:6px;opacity:.75;color:var(--vk-link)}
.side a.is-on .side-ico,.side a:hover .side-ico{opacity:1}
.side a{display:flex;align-items:center}

.act-btn{
  display:inline-flex!important;align-items:center;gap:5px;
  background:none;border:0;color:var(--vk-link);cursor:pointer;padding:6px 10px;font:12px var(--font);font-weight:600;
  border-radius:999px;min-height:30px;  /* R93: пилюля с ровной тап-целью */
}
.act-btn.liked{color:var(--vk-red)}
.act-btn .act-n{font-weight:700;color:var(--vk-muted)}
.act-btn.liked .act-n{color:var(--vk-red)}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--vk-muted);cursor:pointer;padding:4px;
  border-radius:4px;font:inherit;font-size:14px;line-height:1;vertical-align:middle;
}
.btn-icon:hover{color:var(--vk-red);background:var(--danger-soft)}
.post-head{position:relative}
.post-menu{margin-left:auto;display:flex;align-items:center;gap:4px}  /* R93: меню записи — «Избранное» здесь же */
.post-menu .btn-icon{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.post-menu .pm-fav.liked{color:var(--vk-red)}
.post-meta{flex:1;min-width:0}

.file-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--vk-link);font-weight:600;font-size:13px;
  position:relative;overflow:hidden;
}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

.online-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:#2FAF5A;
  margin-left:6px;vertical-align:middle;box-shadow:0 0 0 2px var(--card);
}

.top-search-wrap{position:relative;flex:1;max-width:260px}
.top-search-wrap .top-search{width:100%;padding-left:32px}
.top-search-ico{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#818c99;pointer-events:none;
  display:flex;
}

.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.photo-cell{
  aspect-ratio:1;border-radius:4px;overflow:hidden;border:1px solid var(--vk-border);background:var(--fill);
}
.photo-cell img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.photo-cell:hover img{transform:scale(1.04)}
.album-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-block;padding:4px 10px;background:#EDF1F6;border-radius:12px;
  font-size:12px;font-weight:600;color:var(--vk-link);
}

.back-link{display:inline-flex;align-items:center;gap:4px}
.sep-dot::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#D3DCE6;margin:0 8px;vertical-align:middle}

.btn .ico{margin-right:2px}

@media(max-width:760px){
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Groups */
.group-list{display:flex;flex-direction:column;gap:0}
.group-row{
  display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--vk-border);
  text-decoration:none!important;color:inherit;
}
.group-row:last-child{border-bottom:0}
.group-row:hover{background:var(--fill);margin:0 -16px;padding-left:16px;padding-right:16px}
.group-av{
  width:56px;height:56px;border-radius:4px;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;
}
.group-av.lg{width:100px;height:100px;font-size:36px;border-radius:6px}
.group-info{flex:1;min-width:0}
.group-title{font-weight:700;color:var(--vk-link);font-size:14px}
.group-meta{color:var(--vk-muted);font-size:12px;margin-top:2px}
.group-desc{color:var(--vk-muted);font-size:13px;margin-top:4px}
.group-head{
  display:flex;gap:18px;padding:16px;align-items:flex-start;
}

/* Design polish v6 */
.panel-h{letter-spacing:-.01em}
/* R93: ховер записи — лёгкий тинт СВЕТЛЕЕ карточки, не цвет общего фона (было --field = фон страницы) */
.post:hover{background:var(--post-hover)}
.panel{border-radius:6px}
.topbar{backdrop-filter:saturate(1.1)}

/* Feed 2-col */
.feed-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;align-items:start;
}
.feed-side{position:sticky;top:62px}
.feed-side .panel{margin-bottom:12px}
.post-av.sm{width:40px;height:40px;font-size:13px}
.group-av.sm{width:40px;height:40px;font-size:14px}
.suggest-list{display:flex;flex-direction:column;gap:10px}
.suggest-row{display:flex;align-items:center;gap:10px}
.suggest-info{flex:1;min-width:0}
.suggest-info .post-author{font-size:13px}

@media(max-width:900px){
  .feed-layout{grid-template-columns:minmax(0,1fr)}
  .feed-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
}
@media(max-width:600px){
  .feed-side{grid-template-columns:minmax(0,1fr)}
}

/* Design v7 */
.suggest-row .btn-sm{min-width:28px;padding:4px 8px}
.panel-h a{font-weight:600;font-size:12px}

/* People search */
.people-search-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.people-input,.people-select{
  border:1px solid var(--vk-border);border-radius:4px;padding:8px 12px;font:13px var(--font);
  min-width:160px;
}
.people-input{flex:1;min-width:200px}
.people-input:focus,.people-select:focus{outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.12)}
.people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.people-card{
  display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--vk-border);
  text-decoration:none!important;color:inherit;align-items:center;
}
.people-card:hover{background:var(--fill)}
.people-card .av{
  width:64px;height:64px;border-radius:4px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
}
.people-card .av img{width:100%;height:100%;object-fit:cover}
.people-card .nm{font-weight:700;color:var(--vk-link);font-size:13px}
.people-card .meta{color:var(--vk-muted);font-size:12px;margin-top:2px}
.people-card .st{color:var(--vk-muted);font-size:12px;margin-top:4px;font-style:italic}
.btn-danger{color:#a33!important;border-color:#e0b0b0}

@media(max-width:600px){
  .people-grid{grid-template-columns:1fr}
}

/* Profile cover */

.act-btn.liked .ico{color:var(--vk-red)}
.repost-label{
  display:inline-block;font-size:11px;font-weight:700;color:var(--vk-muted);
  background:var(--fill2);border-radius:3px;padding:1px 6px;margin-right:4px;text-transform:lowercase;
}
.pin-label{
  display:inline-block;font-size:11px;font-weight:700;color:var(--vk-link);
  background:#e8eef6;border-radius:3px;padding:1px 6px;margin-right:4px;
}
.post.is-pinned{background:var(--tint-hover)}
.hashtag{color:var(--vk-link);font-weight:600}
.hashtag:hover{text-decoration:underline}
.tag-title{font-size:16px;color:var(--vk-link)}
.mention{color:var(--vk-link);font-weight:700}
.mention:hover{text-decoration:underline}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  background:#eef2f7;border-radius:12px;font-size:12px;font-weight:600;
  color:var(--vk-link);text-decoration:none!important;
}
.tag-chip:hover{background:var(--tint-hover)}
.tag-chip span{color:var(--vk-muted);font-weight:700}

/* Online friends widget */
.online-list{display:flex;flex-direction:column;gap:8px}
.online-row{
  display:flex;align-items:center;gap:10px;text-decoration:none!important;color:inherit;
  padding:4px;border-radius:4px;
}
.online-row:hover{background:var(--fill)}
.online-row .nm{font-size:13px;font-weight:600;color:var(--vk-link)}
.post-av{position:relative}
.post-av .online-dot.abs,.online-dot.abs{
  position:absolute;right:2px;bottom:2px;width:10px;height:10px;
  border:2px solid var(--card);box-shadow:none;
}
.cnt-inline{
  font-size:11px;font-weight:700;color:var(--vk-muted);margin-left:6px;
}

/* Design v14 */
.topbar{height:48px}
.topbar-inner{height:48px}
.panel{box-shadow:none}  /* R92: плоско — рамка есть */
.panel-h{padding:12px 16px}
.post{padding:16px}
.btn{transition:background .12s}
.btn:active{transform:translateY(1px)}
.wall-form textarea{min-height:80px}

/* Mobile bottom nav */
@media(max-width:760px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .mobile-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;
    background:var(--card);border-top:1px solid var(--vk-border);
    height:52px;justify-content:space-around;align-items:center;
  }
  .mobile-bar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;color:var(--vk-link);text-decoration:none!important;font-size:10px;font-weight:600;
    padding:6px 0;position:relative;
  }
  .mobile-bar a .ico{width:20px;height:20px}
  .mb-ico{position:relative;display:inline-flex}
  .mobile-bar .badge-n{top:-5px;right:-10px;min-width:15px;height:15px;font-size:9px}
  .mobile-bar{padding-bottom:env(safe-area-inset-bottom);height:calc(52px + env(safe-area-inset-bottom))}
}
@media(min-width:761px){
  .mobile-bar{display:none!important}
}

/* Design v15 */
.friend-card .av{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.profile-name{letter-spacing:-.03em}
.hashtag,.mention{border-radius:2px}
.hashtag:hover,.mention:hover{background:var(--hover)}

/* Design v16 */
.logo{font-size:18px;letter-spacing:-.04em}
.panel-h{background:var(--card)}
.suggest-row .act-n{font-size:12px;min-width:20px;text-align:right}
.auth-box{border-radius:8px}
.top-search{border-radius:6px}
.post-av{border-radius:6px}
.friend-card{border-radius:6px;transition:background .12s,border-color .12s}
.friend-card:hover{border-color:#D3DCE6}
.group-av{border-radius:6px}
.btn{border-radius:6px}
.msg{border-radius:6px}

/* Polls */
.poll-box{
  margin:12px 0 4px;padding:12px;background:var(--hover);border:1px solid var(--vk-border);
  border-radius:8px;
}
.poll-q{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--vk-text)}
.poll-opt{margin:0 0 6px}
.poll-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--vk-border);background:var(--card);border-radius:6px;
  padding:8px 12px;font:inherit;cursor:pointer;color:var(--vk-text);text-align:left;
  transition:border-color .12s,background .12s;
}
.poll-btn:hover{border-color:var(--vk-blue);background:var(--tint-hover)}
.poll-n{font-weight:700;color:var(--vk-link);font-size:12px}

/* Poll progress */
.poll-btn{position:relative;overflow:hidden;gap:8px}
.poll-track{
  position:absolute;left:0;top:0;bottom:0;right:0;pointer-events:none;
}
.poll-fill{
  display:block;height:100%;background:rgba(74,118,168,.14);width:0;
  transition:width .35s ease;
}
.poll-label{position:relative;z-index:1;flex:1}
.poll-n{position:relative;z-index:1}
.act.copied{color:#2FAF5A!important}

/* Design v18 */
.panel{border-radius:8px}
.online-dot{box-shadow:0 0 0 2px var(--card)}

.bd-when{margin-left:auto;font-size:11px;color:var(--vk-muted);font-weight:600}
.group-head{display:flex;gap:16px;padding:16px;align-items:flex-start}
.group-av.lg{width:80px;height:80px;font-size:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}

/* Design v19 */
.panel-h{font-size:13px;letter-spacing:-.01em}
.topbar{backdrop-filter:saturate(1.2)}
.btn{font-weight:600}
.act{transition:color .12s}
.act:hover{color:var(--vk-blue-dark,#2B587A)}
.online-stat{
  margin-left:10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.12);padding:3px 8px;border-radius:8px;white-space:nowrap;
}
a.act-n{text-decoration:none!important;color:inherit}
a.act-n:hover{color:var(--vk-link);text-decoration:underline!important}

.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.lightbox[hidden]{display:none!important}
.lightbox img{max-width:min(96vw,1100px);max-height:90vh;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:16px;right:20px;background:transparent;border:0;
  color:#fff;font-size:32px;line-height:1;cursor:pointer;opacity:.85;
}
.lightbox-close:hover{opacity:1}
.post-img{margin:10px 0 4px}
.post-img img{max-width:100%;border-radius:6px;display:block}
.profile-online.is-off{color:var(--vk-muted);font-weight:500}
.comment{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.comment-del{margin-left:auto;opacity:.4}
.comment:hover .comment-del{opacity:1}
.suggest-info .post-time{font-size:12px}

/* Design v23 */
.topbar{box-shadow:0 1px 0 rgba(0,0,0,.06)}
.panel-h{border-bottom:1px solid rgba(0,0,0,.04)}
.btn-sm{min-width:28px}
.suggest-row{padding:6px 0}
.post-link{color:var(--vk-link);word-break:break-all}
.post-link:hover{text-decoration:underline}
.act-danger:hover{color:#e64646!important}

/* Design v24 */
.layout{gap:14px}
.panel{border:1px solid rgba(0,20,50,.06)}
.online-stat{letter-spacing:.02em}
.post-author{letter-spacing:-.01em}
.auth-note{font-size:13px;color:var(--vk-muted);margin:0 0 14px;line-height:1.45}
.invite-code{font-family:var(--font);letter-spacing:.08em;font-size:14px}
.invite-help{font-size:13px;color:var(--vk-muted);margin:0;line-height:1.45}
.invite-row{align-items:center}
.invite-stats{display:flex;gap:16px;margin-top:12px;font-size:13px;color:var(--vk-muted)}
.invite-stats b{color:var(--vk-text);font-weight:700}
.messages{max-width:560px;margin:0 auto 12px}
.msg-ok,.messages .success,.alert-success{
  background:#e8f5e9;border:1px solid #c8e6c9;color:#2e7d32;
  padding:10px 14px;border-radius:6px;font-size:13px;margin:8px 0;
}
.msg-err,.messages .error,.alert-error{
  background:#fdecea;border:1px solid #f5c6cb;color:#c62828;
  padding:10px 14px;border-radius:6px;font-size:13px;margin:8px 0;
}

/* Design v26 */
.auth-box h1{letter-spacing:-.03em}
.auth-field input:focus{
  outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.15);
}
.invite-code{color:var(--vk-link)}
.btn.act-danger{color:#e64646}
.btn.act-danger:hover{background:var(--danger-soft);border-color:#f5c6cb}
.invite-row form{display:inline}
.profile-meta a{font-weight:700}

/* Design v27 */
.auth-box{box-shadow:none;border:1px solid var(--vk-border)}  /* R92: рамка вместо тени */
.panel-h .btn-sm{font-size:12px}
.pager{margin-top:12px}
.pager-info{font-size:13px;font-weight:600;color:var(--vk-muted)}
.empty-hint{padding:24px 16px;text-align:center;color:var(--vk-muted);font-size:13px}

/* Design v28 */
.friend-card .post-time{font-size:11px}
.layout-main .panel+.panel{margin-top:12px}
.profile-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.profile-actions form{display:inline;margin:0}
.btn-danger,.btn.btn-danger{color:#e64646}

/* Design v29 */
.online-stat{backdrop-filter:blur(4px)}
.panel{transition:border-color .15s}  /* R92: без теневой анимации */
.composer-tools{display:flex;align-items:center;gap:4px}
.vis-select{
  height:32px;border:1px solid var(--vk-border);border-radius:6px;
  background:var(--card);color:var(--vk-text);font-size:13px;padding:0 8px;
  cursor:pointer;
}
.vis-select:focus{outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.15)}
.vis-badge{
  display:inline-block;font-size:11px;font-weight:600;color:var(--vk-link);
  background:#e7edf5;padding:1px 6px;border-radius:4px;vertical-align:middle;
}

/* Design v30 */
.file-btn{gap:6px}
.wall-form textarea{min-height:72px}

/* ================= Design v31 — Stories, Reactions, Gifts, Notes, Events, Audio ================= */

/* --- Stories --- */
.stories-strip{
  display:flex;gap:12px;overflow-x:auto;padding:12px 14px;margin-bottom:12px;
  background:var(--card);border:1px solid var(--vk-border);border-radius:8px;
  box-shadow:var(--shadow);scrollbar-width:thin;
}
.stories-strip::-webkit-scrollbar{height:6px}
.stories-strip::-webkit-scrollbar-thumb{background:#d5dce4;border-radius:3px}
.stories-strip.empty{align-items:center;gap:14px}
.story-upload-hint{color:var(--vk-muted);font-size:13px}
.story-bubble{
  background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;flex-shrink:0;font:inherit;
}
.sb-av{
  width:56px;height:56px;border-radius:50%;padding:3px;position:relative;
  background:conic-gradient(from 200deg,#4A76A8,#9EBBD6,#4A76A8);
  display:flex;align-items:center;justify-content:center;transition:transform .15s;
}
.story-bubble:hover .sb-av{transform:scale(1.05)}
.sb-av.me{background:#D3DCE6}
.story-bubble.seen .sb-av{background:#d5dce4}
.sb-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--card)}
.sb-av .sb-plus{
  position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--vk-blue);color:#fff;font-size:14px;line-height:20px;text-align:center;
  border:2px solid var(--card);font-weight:700;
}
.sb-name{font-size:11px;color:var(--vk-text);font-weight:600;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.story-viewer{
  position:fixed;inset:0;z-index:300;background:rgba(12,16,22,.94);
  display:flex;align-items:center;justify-content:center;
}
.story-viewer img{max-width:min(92vw,520px);max-height:78vh;border-radius:8px;box-shadow:0 12px 60px rgba(0,0,0,.5);object-fit:contain}
.story-top{
  position:absolute;top:0;left:0;right:0;padding:14px 18px;z-index:5;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
  display:flex;flex-direction:column;gap:10px;
}
.story-progress{height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.sp-fill{display:block;height:100%;background:var(--card);width:0;border-radius:2px}
.story-author{display:flex;align-items:center;gap:10px;color:#fff;font-size:13px}
.story-author b{text-shadow:0 1px 2px rgba(0,0,0,.4)}
.sv-time{opacity:.8;font-size:12px;margin-left:8px}
.story-actions{margin-left:auto;display:flex;gap:8px}
.story-actions .btn-icon{color:#fff;font-size:16px}
.story-caption{
  position:absolute;bottom:56px;left:0;right:0;text-align:center;color:#fff;padding:0 32px;
  font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.story-nav{
  position:absolute;top:0;bottom:0;width:28%;cursor:pointer;z-index:4;
}
.story-nav.prev{left:0}
.story-nav.next{right:0}
.story-views{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:13px}
.post-av.xs{width:34px;height:34px;font-size:12px;border-radius:50%}

.story-upload{
  position:fixed;inset:0;z-index:310;background:rgba(12,16,22,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.story-upload-box{
  background:var(--card);border-radius:12px;padding:22px;width:min(94vw,380px);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.story-upload-box h3{margin:0 0 14px;font-size:16px}
.story-upload-box input[type=text]{
  width:100%;margin-top:10px;border:1px solid var(--vk-border);border-radius:8px;padding:10px 12px;font:13px var(--font);
}
.story-drop{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  border:2px dashed #D3DCE6;border-radius:8px;padding:26px 16px;cursor:pointer;text-align:center;
  color:var(--vk-link);font-weight:600;font-size:13px;transition:border-color .15s,background .15s;
}
.story-drop:hover{border-color:var(--vk-blue);background:#f4f8fd}
.story-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:0;height:0}
.story-upload-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* --- Reactions --- */
.react-wrap{position:relative;display:inline-flex;align-items:center;gap:6px}
.react-picker{
  position:absolute;bottom:calc(100% + 8px);left:-6px;z-index:60;
  background:var(--card);border:1px solid var(--vk-border);border-radius:24px;
  box-shadow:0 8px 30px rgba(0,20,50,.18);padding:6px 8px;
  display:flex;gap:2px;opacity:0;pointer-events:none;transform:translateY(6px) scale(.95);
  transition:opacity .16s,transform .16s;
}
.react-picker.open{opacity:1;pointer-events:auto;transform:none}
.rp-item{
  border:0;background:none;font-size:22px;cursor:pointer;padding:4px;border-radius:50%;
  transition:transform .12s;line-height:1;
}
.rp-item:hover{transform:scale(1.35) translateY(-3px)}
.rp-item.on{background:#e7eef8}
.react-ico{font-size:15px;line-height:1;display:inline-block}
.react-ico.pop{animation:react-pop .35s ease}
@keyframes react-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.react-btn.liked .react-txt{color:var(--vk-red)}
.react-chips{display:inline-flex;gap:4px;margin-left:2px}
.rc-chip{
  display:inline-flex;align-items:center;gap:3px;background:var(--fill);border-radius:8px;
  padding:2px 8px;font-size:12px;font-weight:700;color:var(--vk-text);
  border:1px solid #e3e8ee;
}

/* --- Post gallery --- */
.post-gallery{margin-top:10px;display:grid;gap:3px;border-radius:8px;overflow:hidden}
.post-gallery.n2{grid-template-columns:1fr 1fr}
.post-gallery.n3{grid-template-columns:1fr 1fr 1fr}
.post-gallery.n4{grid-template-columns:1fr 1fr}
.post-gallery.n5,.post-gallery.n6{grid-template-columns:1fr 1fr 1fr}
.post-gallery.n7,.post-gallery.n8{grid-template-columns:1fr 1fr 1fr 1fr}
.pg-cell{aspect-ratio:1;overflow:hidden;background:#e8ebf0}
.post-gallery.n2 .pg-cell{aspect-ratio:4/3}
.pg-cell img{width:100%;height:100%;object-fit:cover;transition:transform .2s;cursor:zoom-in}
.pg-cell:hover img{transform:scale(1.03)}
.post-img.sm{max-width:340px}

/* --- Link preview --- */
.link-preview{
  display:flex;gap:0;margin-top:10px;border:1px solid var(--vk-border);border-radius:8px;
  overflow:hidden;text-decoration:none!important;color:inherit;background:var(--field);
  transition:border-color .15s;
}
.link-preview:hover{border-color:rgba(74,118,168,.45)}
.lp-img{flex:0 0 128px;background:#e8ebf0}
.lp-img img{width:128px;height:100%;min-height:84px;object-fit:cover}
.link-preview.noimg .lp-img{display:none}
.lp-body{padding:10px 12px;min-width:0}
.lp-host{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--vk-muted);font-weight:700}
.lp-title{font-weight:700;font-size:13px;color:var(--vk-link);margin-top:2px}
.lp-desc{font-size:12px;color:var(--vk-muted);margin-top:3px;line-height:1.4}

/* --- Repost quote --- */
.repost-quote{
  display:flex;gap:10px;margin:10px 0 2px;padding:10px 12px;
  border:1px solid #e6ebf1;border-radius:8px;background:var(--hover);
}
.post-av.xs{width:32px;height:32px;font-size:11px}

/* --- Comments: likes, replies --- */
.comment-main{flex:1;min-width:0}
.comment-sub{display:flex;gap:10px;align-items:center;margin-top:3px;padding-left:2px}
.c-like,.c-reply{
  background:none;border:0;cursor:pointer;font-size:12px;font-weight:600;color:var(--vk-muted);
  padding:0;font-family:var(--font);
}
.c-like:hover,.c-reply:hover{color:var(--vk-link)}
.c-like.on{color:var(--vk-red)}
.c-reply:hover{text-decoration:underline}
.comment.is-reply{margin-left:34px}
.reply-to{font-size:11px;color:var(--vk-muted);background:#e8eef6;border-radius:3px;padding:1px 6px;margin-right:4px}
.comments.collapsed .comment{display:none}
.comments.collapsed .comment-form{display:none}
.comments-toggle{cursor:pointer}
.replying-note{
  font-size:12px;background:#e8eef6;border-radius:4px;padding:2px 8px;margin-bottom:4px;
  display:flex;align-items:center;gap:6px;width:fit-content;
}
.rn-cancel{background:none;border:0;cursor:pointer;color:var(--vk-muted);font-size:13px;padding:0 2px}
.rn-cancel:hover{color:var(--vk-red)}

/* --- Gifts (R94: каталог из ретро-иллюстраций, один подарок = один файл) --- */
.gift-art{
  width:68px;height:68px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.gift-art img{width:100%;height:100%;object-fit:contain}
.gift-item:hover .gift-art{transform:translateY(-2px) scale(1.04)}
.gift-hide{position:absolute;top:-4px;right:2px;z-index:2}
.gift-hide button{
  background:var(--card);border:1px solid var(--vk-border);border-radius:50%;width:18px;height:18px;
  font-size:11px;line-height:1;cursor:pointer;color:var(--vk-muted);opacity:0;transition:opacity .15s;
}
.gift-item:hover .gift-hide button{opacity:1}
.gift-hide button:hover{color:var(--vk-red);border-color:#f5c6c6}
.gifts-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.gift-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;cursor:pointer;
  border:2px solid transparent;border-radius:8px;transition:border-color .12s,background .12s;
}
.gift-card:hover{background:var(--fill)}
.gift-card input{position:absolute;opacity:0;pointer-events:none}
.gift-card:has(input:checked){border-color:var(--vk-blue);background:#eef4fb}
.gift-art.big{width:76px;height:76px}
.gift-title{font-size:12px;font-weight:600;color:var(--vk-text);text-align:center}
.gift-msg{
  width:100%;margin-top:12px;border:1px solid var(--vk-border);border-radius:8px;padding:10px 12px;font:13px var(--font);
}
.gift-msg:focus{outline:none;border-color:var(--vk-blue)}

/* --- Notes --- */
.notes-list{display:flex;flex-direction:column;gap:2px}
.note-row{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:8px;
  text-decoration:none!important;color:inherit;
}
.note-row:hover{background:var(--fill);text-decoration:none!important}
.note-row b{font-size:13px;color:var(--vk-link)}
.note-row .post-time{margin-top:0}
.notes-list.big .note-row{padding:12px 14px}
.note-body{padding:18px 20px}
.note-meta{color:var(--vk-muted);font-size:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.note-text{font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.note-form input[type=text]{
  width:100%;border:1px solid var(--vk-border);border-radius:8px;padding:11px 14px;font:15px var(--font);font-weight:700;
  margin-bottom:10px;
}
.note-form input[type=text]:focus,.note-form textarea:focus{outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.12)}
.note-form textarea{
  width:100%;border:1px solid var(--vk-border);border-radius:8px;padding:12px 14px;font:14px/1.6 var(--font);resize:vertical;
}

/* --- Events --- */
.events-list{display:flex;flex-direction:column;gap:4px}
.event-row{
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:8px;
  text-decoration:none!important;color:inherit;transition:background .12s;
}
.event-row:hover{background:var(--fill);text-decoration:none!important}
.event-row.muted{opacity:.65}
.event-emoji{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:inset 0 -12px 20px rgba(0,0,0,.15), 0 2px 6px rgba(0,20,50,.1);
}
.event-emoji.lg{width:56px;height:56px;font-size:28px}
.event-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.event-title{font-size:14px;color:var(--vk-link)}
.event-meta{font-size:12px;color:var(--vk-muted)}
.event-hero{
  padding:22px 20px;color:#fff;display:flex;align-items:center;gap:16px;
}
.event-hero-emoji{
  width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:34px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.event-h-title{margin:0;font-size:20px;letter-spacing:-.02em}
.event-h-meta{margin-top:5px;font-size:13px;opacity:.92}
.event-desc{font-size:13px;line-height:1.6;margin-bottom:12px;white-space:pre-wrap}
.event-organizer{font-size:13px;color:var(--vk-muted);margin-bottom:12px}
.ev-sub{font-weight:700;font-size:13px;color:var(--vk-muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.event-form .ef-row{display:flex;gap:10px;flex-wrap:wrap}
.event-form .ef-row .auth-field{flex:1;min-width:130px}
.color-inp{height:38px;padding:2px!important;width:60px;cursor:pointer}
.ef-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--vk-text);font-weight:600;margin-top:18px}

/* --- Audio --- */
.audio-list{display:flex;flex-direction:column;gap:2px;padding:8px 12px}
.audio-row{
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;
  transition:background .12s;
}
.audio-row:hover{background:var(--fill)}
.audio-row.playing{background:#e9f1fa}
.audio-play{
  width:30px;height:30px;border-radius:50%;border:0;background:var(--vk-blue);color:#fff;
  font-size:11px;cursor:pointer;flex-shrink:0;transition:transform .12s,background .12s;
  display:flex;align-items:center;justify-content:center;
}
.audio-row:hover .audio-play{transform:scale(1.08)}
.audio-row.playing .audio-play{background:var(--vk-blue-dark)}
.audio-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--vk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-plays{font-size:11px;color:var(--vk-muted);font-weight:600}
.audio-upload-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.file-btn{position:relative;overflow:hidden;transition:opacity .15s}
.file-btn.busy{opacity:.75;pointer-events:none}
.file-btn.busy::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:vd-up-bar 1.1s linear infinite;
}
@keyframes vd-up-bar{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.audio-row.is-fresh{animation:vd-row-in .5s ease}
@keyframes vd-row-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.audio-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:150;height:56px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--vk-border);box-shadow:0 -4px 20px rgba(0,20,50,.08);
  display:flex;align-items:center;gap:12px;padding:0 16px;
}
.ab-play{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--vk-blue);color:#fff;font-size:13px;cursor:pointer;
  flex-shrink:0;
}
.ab-play:hover{background:var(--vk-blue-dark)}
.ab-info{flex:1;min-width:0}
.ab-title{font-size:13px;font-weight:700;color:var(--vk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-progress{height:4px;background:#e5eaf0;border-radius:2px;margin-top:5px;overflow:hidden;cursor:default}
.ab-fill{height:100%;width:0;background:var(--vk-blue);border-radius:2px;transition:width .2s linear}
.ab-skip{background:none;border:0;color:var(--vk-muted);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.ab-skip:hover{color:var(--brand);background:rgba(74,118,168,.12)}
.ab-line{display:flex;align-items:center;gap:8px}
.ab-time{font-size:11px;color:var(--vk-muted);flex:none;font-variant-numeric:tabular-nums;min-width:26px}
.ab-progress{flex:1;cursor:pointer}
.ab-progress:hover .ab-fill{opacity:.85}
.ab-close{background:none;border:0;font-size:18px;color:var(--vk-muted);cursor:pointer;padding:6px}
.ab-close:hover{color:var(--vk-red)}
@media(max-width:760px){.audio-bar{bottom:52px}}

/* --- Tabs (groups) --- */
.tabs{display:flex;gap:2px}
.tabs a{
  padding:7px 14px;border-radius:6px;font-weight:600;font-size:13px;color:var(--vk-link);
  text-decoration:none!important;
}
.tabs a:hover{background:var(--hover)}
.tabs a.is-on{background:#e1e9f2;color:var(--vk-text)}
.topics-list{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.topic-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  text-decoration:none!important;color:inherit;
}
.topic-row:hover{background:var(--fill);text-decoration:none!important}
.topic-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.topic-info b{font-size:13px;color:var(--vk-link)}
.topic-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.topic-form input,.topic-form textarea{
  border:1px solid var(--vk-border);border-radius:8px;padding:10px 12px;font:13px var(--font);width:100%;
}
.topic-form textarea{resize:vertical}
.topic-form input:focus,.topic-form textarea:focus{outline:none;border-color:var(--vk-blue)}
.topic-op{display:flex;gap:12px;padding:16px}
.topic-op .post-text{margin-top:6px}
.group-av.lg img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* --- Chat: typing & ticks --- */
.typing-note{
  padding:6px 16px;color:var(--vk-muted);font-size:12px;background:#f7f8fa;
  border-top:1px solid var(--line-soft);
}
.tdots{display:inline-flex;gap:2px;align-items:flex-end}
.tdots i{
  width:4px;height:4px;border-radius:50%;background:var(--vk-muted);display:inline-block;
  animation:tdot 1.2s infinite;
}
.tdots i:nth-child(2){animation-delay:.15s}
.tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
.chat-status{font-size:11px;color:var(--vk-muted);margin-left:8px}
.bubble .ticks{font-size:10px;color:var(--vk-muted);margin-left:4px}
.bubble .ticks[data-read="1"]{color:#4a9de6}
.chat-panel{display:flex;flex-direction:column}
.chat-thread{max-height:60vh;min-height:280px}
.chat-thread .bubble{animation:bubble-in .18s ease}
@keyframes bubble-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* --- Toasts (R95: единая современная система под разметку vdMakeToast) --- */
.toast-box{
  position:fixed;top:60px;right:16px;z-index:400;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:9px;
  background:rgba(35,41,49,.97);color:#fff;padding:11px 13px;border-radius:12px;
  font-size:13px;font-weight:500;line-height:1.4;box-shadow:0 10px 34px rgba(0,0,0,.3);
  opacity:0;transform:translateX(20px);
  transition:opacity .25s,transform .25s;max-width:320px;
}
.toast.show{opacity:1;transform:none}
.toast .t-ico{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.toast .t-ico svg{width:13px;height:13px}
.toast.t-success .t-ico{background:rgba(76,175,80,.25);color:#8fdd9a}
.toast.t-error .t-ico{background:rgba(235,84,84,.25);color:#ff9d9d}
.toast.t-info .t-ico{background:rgba(96,150,208,.25);color:#a9cdf5}
.toast .t-txt{flex:1;min-width:0;color:#fff;word-break:break-word}
.toast .t-x{flex:0 0 auto;background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;padding:3px;margin:-3px -5px 0 0;border-radius:6px;display:inline-flex}
.toast .t-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.toast:hover .t-bar{animation-play-state:paused}
.toast .t-bar{position:absolute;left:0;right:0;bottom:0;height:2.5px;transform-origin:left;background:rgba(255,255,255,.4);animation-name:vd-t-bar;animation-timing-function:linear;animation-fill-mode:forwards}
.toast.t-success .t-bar{background:rgba(143,221,154,.75)}
.toast.t-error .t-bar{background:rgba(255,157,157,.75)}
.toast.t-info .t-bar{background:rgba(169,205,245,.75)}
@keyframes vd-t-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.err{background:rgba(200,52,52,.96)}  /* legacy */
html[data-theme="dark"] .toast{background:rgba(24,28,34,.98)}
@media (prefers-reduced-motion: reduce){
  .toast .t-bar{animation:none;opacity:0}
}

/* --- Lightbox nav --- */
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(255,255,255,.12);border:0;color:#fff;font-size:34px;line-height:1;
  width:52px;height:52px;border-radius:50%;cursor:pointer;transition:background .15s;
}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-count{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.9);font-size:13px;font-weight:700;
  background:rgba(0,0,0,.45);padding:4px 12px;border-radius:12px;
}

/* --- Misc polish --- */
.inline-form{display:inline-flex;align-items:center;vertical-align:middle;margin:0}
.post{animation:post-in .2s ease}
@keyframes post-in{from{opacity:.6}to{opacity:1}}
.hide-sm{display:inline}
@media(max-width:600px){
  .hide-sm{display:none}
  .react-txt{display:none}
  .comment.is-reply{margin-left:16px}
  .gift-art{width:56px;height:56px;font-size:26px}
  .sb-av{width:48px;height:48px}
  .event-hero{flex-direction:column;align-items:flex-start}
  .toast-box{top:56px;right:10px;left:10px;align-items:center}
}
.vis-badge.ok{background:#e3f4e6;color:#2e7d32}
.online-dot.abs.lg{width:16px;height:16px;right:4px;bottom:4px;border-width:3px}
.video-embed-stack .video-embed{margin-top:10px}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Focus visible for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(74,118,168,.55);outline-offset:1px;
}

/* Scrollbar polish (WebKit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9d2dc;border-radius:5px;border:2px solid var(--fill)}
::-webkit-scrollbar-thumb:hover{background:#aab8c7}

/* Selection */
::selection{background:rgba(74,118,168,.25)}

/* Smooth links/buttons */
.btn,.act-btn,.btn-icon,.side a,.tag-chip,.friend-card{transition:all .13s ease}
.group-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.group-av{overflow:hidden}

/* hidden attribute always wins */
[hidden]{display:none!important}

/* ============ v33 additions: SVG icons, mail tabs, rooms, voice, video, market, achievements ============ */

/* SVG icon alignment */
.side-ico{display:inline-flex;align-items:center;justify-content:center;width:18px}
.side-ico .ico{flex-shrink:0}
.panel-h .ico{vertical-align:-2px;margin-right:4px}
.act-btn .ico,.audio-play svg{display:block}
.react-svg{vertical-align:-3px}
.rc-chip .react-svg{vertical-align:-3px;margin-right:2px}
.rp-item .react-svg{width:20px;height:20px}
.c-like .ico{vertical-align:-2px}
.reply-to .ico{width:12px;height:12px;vertical-align:-1px}
.ticks svg{width:11px;height:11px;display:inline;vertical-align:-1px}
.event-meta .ico{width:13px;height:13px;vertical-align:-2px;margin-right:1px}
.event-emoji .ico{width:20px;height:20px;color:#fff}
.event-hero-emoji .ico{width:40px;height:40px;color:#fff}
.gift-svg{display:block}
.file-btn .ico{vertical-align:-3px}

/* Реакции: пикер крупнее, кнопка лайка активна */
.rp-item{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--card);border:1px solid var(--vk-border);cursor:pointer;transition:transform .12s;padding:0}
.rp-item:hover{transform:translateY(-4px) scale(1.12)}
.rp-item.on{background:#e3edf7;border-color:var(--vk-blue)}
.rp-item .react-svg{width:20px;height:20px}
.react-ico .react-svg{width:17px;height:17px}

/* --- Почта: вкладки --- */
.mail-tabs{gap:2px}
.mail-tab{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:14px;
  font-size:13px;color:var(--vk-link);cursor:pointer;user-select:none;font-weight:600;
}
.mail-tab:hover{background:var(--hover)}
.mail-tab.on{background:var(--vk-blue);color:#fff!important}
.mail-new{margin-left:auto;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.room-av{color:#fff;display:flex;align-items:center;justify-content:center}
.mail-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-soft);position:relative}
.mail-item:hover{background:var(--fill);text-decoration:none}
.mail-item .cnt{position:static}

/* --- Беседы --- */
.room-badge{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff;vertical-align:middle;margin-right:2px}
.room-badge .ico{width:14px;height:14px}
.room-members-toggle{position:relative}
.room-members-toggle summary{list-style:none;cursor:pointer;color:var(--vk-link);display:inline-flex;padding:4px 6px;border-radius:6px}
.room-members-toggle summary:hover{background:var(--hover)}
.room-members-toggle summary::-webkit-details-marker{display:none}
.room-members-pop{
  position:absolute;right:0;top:34px;z-index:60;background:var(--card);border:1px solid var(--vk-border);border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.16);padding:10px;width:240px;text-align:left;
}
.rm-title{font-weight:700;font-size:12px;color:var(--vk-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.rm-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px}
.rm-row:hover{background:var(--fill);text-decoration:none}
.rm-add{display:flex;gap:6px;margin-top:8px}
.rm-add .btn{flex-shrink:0}
.bb-sender{font-size:11px;color:var(--vk-link);opacity:.85;margin-right:4px}
.bubble.mine .bb-sender{display:none}

/* --- Голосовые сообщения --- */
.chat-send{display:flex;align-items:center;gap:8px}
.mic-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--vk-border);background:var(--card);color:var(--vk-blue);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;
}
.mic-btn:hover{background:var(--hover)}
.mic-btn.recording{background:var(--vk-red);border-color:var(--vk-red);color:#fff;animation:pulse-rec 1.2s infinite}
@keyframes pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(230,70,70,.4)}50%{box-shadow:0 0 0 7px rgba(230,70,70,0)}}
.voice-rec{
  display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card)5f5;border-top:1px solid #f5dcdc;
  font-size:13px;color:var(--vk-red);font-weight:600;
}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--vk-red);display:inline-block;animation:pulse-rec 1s infinite}
.voice-row{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.05);border-radius:18px;padding:5px 12px 5px 6px;
  min-width:150px;
}
.bubble.mine .voice-row{background:rgba(255,255,255,.18)}
.voice-play{
  width:28px;height:28px;border-radius:50%;border:0;background:var(--vk-blue);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s;
}
.voice-play:hover{transform:scale(1.08)}
.voice-play svg{width:13px;height:13px}
.voice-wave{display:flex;align-items:center;gap:2px;height:18px;--p:0%}
.voice-wave i{
  width:3px;border-radius:2px;background:var(--vk-blue);opacity:.45;display:inline-block;height:8px;
}
.bubble.mine .voice-wave i{background:var(--card);opacity:.55}
.voice-wave i:nth-child(odd){height:14px}
.voice-wave i:nth-child(3n){height:6px}
.voice-wave i:nth-child(5n){height:16px}
.voice-row.playing .voice-wave i{animation:vwv .9s infinite ease-in-out}
.voice-row.playing .voice-wave i:nth-child(2n){animation-delay:.12s}
.voice-row.playing .voice-wave i:nth-child(3n){animation-delay:.25s}
@keyframes vwv{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}
.voice-dur{font-size:11px;color:var(--vk-muted);font-weight:700;flex-shrink:0}
.bubble.mine .voice-dur{color:rgba(255,255,255,.85)}

/* --- Видео --- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.video-card{
  display:flex;flex-direction:column;border:1px solid var(--vk-border);border-radius:8px;overflow:hidden;
  background:var(--card);text-decoration:none!important;transition:border-color .15s;
}
.video-card:hover{border-color:rgba(74,118,168,.45)}
.video-thumb{position:relative;display:block;background:#1d2733;aspect-ratio:16/9;overflow:hidden}
.video-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.video-play-ov{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.9;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));transition:opacity .15s;
}
.video-play-ov svg{width:34px;height:34px;background:rgba(0,0,0,.5);border-radius:50%;padding:9px;box-sizing:content-box}
.video-card:hover .video-play-ov{opacity:1}
.video-meta{display:flex;flex-direction:column;gap:3px;padding:9px 10px}
.video-title{font-size:13px;color:var(--vk-text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-sub{font-size:11px;color:var(--vk-muted);display:inline-flex;align-items:center;gap:3px}
.video-sub .ico{width:12px;height:12px}
.video-watch{background:#000;display:flex;justify-content:center}
.video-watch video{max-width:100%;width:100%;max-height:62vh;outline:none}
.video-h1{font-size:18px;margin:0 0 6px;letter-spacing:-.02em}
.video-watch-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.video-desc{margin-top:10px;font-size:13px;line-height:1.55;color:var(--vk-text)}

/* --- Барахолка --- */
.market-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.market-search{
  display:flex;align-items:center;gap:6px;flex:1;min-width:180px;border:1px solid var(--vk-border);border-radius:8px;
  padding:0 10px;background:var(--card);color:var(--vk-muted);
}
.market-search input{border:0;outline:none;height:34px;flex:1;font:13px var(--font);background:transparent}
.market-chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--vk-muted);white-space:nowrap}
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.market-card{
  display:flex;flex-direction:column;border:1px solid var(--vk-border);border-radius:8px;overflow:hidden;background:var(--card);
  text-decoration:none!important;transition:border-color .15s;position:relative;
}
.market-card:hover{border-color:rgba(74,118,168,.45)}
.market-card.sold{opacity:.62}
.market-thumb{position:relative;display:block;aspect-ratio:1/1;background:var(--fill);overflow:hidden}
.market-thumb img{width:100%;height:100%;object-fit:cover}
.market-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c3ccd6}
.market-noimg.big svg{width:54px;height:54px}
.market-sold-badge,.market-free-badge{
  position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;color:#fff;
  background:var(--vk-muted);
}
.market-free-badge{background:var(--vk-green)}
.market-info{display:flex;flex-direction:column;gap:3px;padding:9px 10px}
.market-title{font-size:13px;color:var(--vk-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.market-price{font-size:13px;font-weight:700;color:var(--vk-text)}
.market-price.big{font-size:22px;color:var(--vk-blue)}
.market-sub{font-size:11px;color:var(--vk-muted)}
.market-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;padding:16px}
.market-photos{display:flex;flex-direction:column;gap:8px}
.market-photo-main{border-radius:8px;overflow:hidden;border:1px solid var(--vk-border);background:var(--fill);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.market-photo-main img{width:100%;height:100%;object-fit:cover}
.market-photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.market-photo-cell{border-radius:6px;overflow:hidden;border:1px solid var(--vk-border);aspect-ratio:1/1;cursor:zoom-in}
.market-photo-cell img{width:100%;height:100%;object-fit:cover}
.market-side{display:flex;flex-direction:column;gap:10px}
.market-h1{font-size:20px;margin:0;letter-spacing:-.02em}
.market-badges{display:flex;gap:6px;flex-wrap:wrap}
.market-desc{font-size:13px;line-height:1.55;padding:10px 12px;background:#f7f8fa;border-radius:8px}
.market-seller{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.market-seller .btn{margin-left:auto}

/* --- Достижения --- */
.ach-item.done{opacity:1;filter:none;background:var(--tint-hover);border-color:var(--line2)}
.ach-ico .ico{width:18px;height:18px}
.ach-item.done .ach-ico{background:linear-gradient(145deg,#f5b942,#e6960f)}
.ach-item.done .ach-progress i{background:var(--vk-green)}

/* --- Выбор иконки мероприятия --- */
.icon-picker{display:flex;gap:6px;flex-wrap:wrap}
.ip-item input{position:absolute;opacity:0;pointer-events:none}
.ip-art{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vk-border);background:var(--card);color:var(--vk-link);cursor:pointer;transition:all .12s;
}
.ip-art .ico{width:18px;height:18px}
.ip-item input:checked + .ip-art{background:var(--vk-blue);border-color:var(--vk-blue);color:#fff}
.ip-item input:focus-visible + .ip-art{outline:2px solid rgba(74,118,168,.55)}

@media(max-width:760px){
  .market-detail{grid-template-columns:1fr}
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .market-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .room-members-pop{right:-8px}
}
.sv-views-ico{display:inline-flex;align-items:center;vertical-align:-1px;color:rgba(255,255,255,.85)}

/* Mobile topbar: bottom bar covers navigation */
@media(max-width:760px){
  .top-nav{display:none}
  .top-search{max-width:none}
  /* R89: поиск в шапке и на телефоне — свёрнут в круглую кнопку, раскрывается
     по фокусу (растёт flex-basis). Идёт ПОСЛЕ десктопных .top-search-wrap —
     каскад по порядку. Единственная точка поиска — шапка. */
  /* R89: «N онлайн» прячем и на телефоне (на планшетах 761-900 уже скрыт) —
     иначе раскрытому поиску не хватает места (сжатие 202->112px) */
  .online-stat{display:none}
  .top-search-wrap{flex:0 1 34px;max-width:250px;min-width:34px;height:34px;margin-left:auto;transition:flex-basis .18s ease}
  .top-search-wrap:focus-within{flex-basis:min(52vw,250px)}
  .top-search-wrap .top-search{width:100%;height:34px;border-radius:17px;padding-left:34px;padding-right:10px;color:transparent;background:rgba(255,255,255,.14);transition:background .18s ease,color .18s ease}
  .top-search-wrap .top-search:focus{color:var(--vk-text)}
  .top-search-wrap .top-search::placeholder{color:transparent}
  .top-search-wrap:focus-within .top-search{background:var(--card)}
  .top-search-wrap:focus-within .top-search::placeholder{color:#7996B5}
  .top-search-ico{color:rgba(255,255,255,.85)}
  .top-search-wrap:focus-within .top-search-ico{color:#818c99}
  .search-suggest{left:auto;right:-42px;width:min(78vw,300px);min-width:0}
  .chat-thread{max-height:52vh}
  .market-filter .btn{display:none}
}

/* ===== Страница «Приложение» ===== */
.app-hero{margin-bottom:14px}
.app-hero-in{display:flex;gap:22px;padding:22px;align-items:flex-start;flex-wrap:wrap}
.app-icon{width:96px;height:96px;border-radius:20px}
.app-hero-txt{flex:1;min-width:260px}
.app-hero-txt h1{margin:2px 0 6px;font-size:22px;letter-spacing:-.02em}
.app-sub{color:var(--vk-muted);margin:0 0 10px;line-height:1.5;max-width:560px}
.app-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.app-chip{
  display:inline-flex;align-items:center;gap:5px;background:#eef3f8;color:var(--vk-link);
  font-size:12px;font-weight:600;border:1px solid #dbe4ee;border-radius:12px;padding:3px 10px;
}
.app-chip .ico{width:12px;height:12px}
.app-actions{display:flex;gap:8px;flex-wrap:wrap}
.app-dl{font-size:13px;padding:10px 22px}
.app-dl.is-disabled{opacity:.6;cursor:default}
.app-abi{margin-top:10px;font-size:12px;color:var(--vk-muted);display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.app-abi a{color:var(--vk-link);font-weight:600;text-decoration:none}
.app-abi a:hover{text-decoration:underline}
.app-qr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--vk-border);border-radius:var(--vk-radius);background:var(--card)}
.app-qr img{border-radius:4px}
.app-qr span{font-size:11px;color:var(--vk-muted)}

.app-steps{display:grid;gap:14px}
.app-step{display:flex;gap:12px;align-items:flex-start}
.app-step-n{
  flex:0 0 28px;width:28px;height:28px;border-radius:14px;background:linear-gradient(180deg,var(--vk-blue-hover),var(--vk-blue));
  color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.app-step b{font-size:13px}
.app-step p{margin:3px 0 0;color:var(--vk-muted);font-size:13px;line-height:1.5}

.app-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.app-feat{display:flex;gap:11px;align-items:flex-start}
.app-feat-ico{
  flex:0 0 36px;width:36px;height:36px;border-radius:8px;background:#e8eff6;color:var(--vk-blue);
  display:flex;align-items:center;justify-content:center;
}
.app-feat-ico .ico{width:18px;height:18px}
.app-feat b{font-size:13px}
.app-feat p{margin:2px 0 0;color:var(--vk-muted);font-size:12px;line-height:1.45}

@media (max-width:720px){
  .app-feats{grid-template-columns:1fr}
  .app-hero-in{padding:16px}
  .app-qr{order:3;width:100%;flex-direction:row;justify-content:center}
  .app-icon{width:72px;height:72px}
}

/* ===== Просмотр фото (лайтбокс) ===== */
.pv-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(14,18,24,.88);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.pv-overlay[hidden]{display:none}
.pv-lock{overflow:hidden}
.pv-body{display:flex;gap:0;max-width:1080px;width:100%;max-height:92vh;border-radius:8px;overflow:hidden;background:#1c2128;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.pv-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#101418;min-width:0;cursor:zoom-out}
.pv-img-wrap img{max-width:100%;max-height:92vh;display:block}
.pv-side{width:320px;flex:0 0 320px;background:var(--card);display:flex;flex-direction:column;border-left:1px solid var(--vk-border)}
.pv-author{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--vk-border)}
.pv-ava{width:40px;height:40px;border-radius:4px;overflow:hidden;background:var(--vk-blue);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.pv-ava img{width:100%;height:100%;object-fit:cover}
.pv-author-txt{display:flex;flex-direction:column;min-width:0}
.pv-author-name{font-weight:700;font-size:13px;color:var(--vk-link);text-decoration:none}
.pv-author-name:hover{text-decoration:underline}
.pv-date{font-size:12px;color:var(--vk-muted)}
.pv-caption{margin:0;padding:10px 14px;border-bottom:1px solid var(--vk-border);font-size:13px;line-height:1.5;color:var(--vk-text)}
.pv-bar{display:flex;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--vk-border)}
.pv-like{display:inline-flex;gap:6px;align-items:center;background:none;border:none;cursor:pointer;color:var(--vk-muted);font-size:13px;font-weight:700;font-family:inherit;padding:4px 6px;border-radius:4px}
.pv-like:hover{background:var(--fill)}
.pv-like.is-liked{color:#e64646}
.pv-like.is-liked .ico-heart{fill:#e64646;stroke:#e64646}
.pv-cnt{display:inline-flex;gap:5px;align-items:center;color:var(--vk-muted);font-size:13px;font-weight:700}
.pv-actions{margin-left:auto;display:flex;gap:6px}
.pv-act{display:inline-flex;gap:5px;align-items:center;background:var(--fill);border:1px solid var(--vk-border);border-radius:4px;padding:4px 9px;font-size:12px;font-weight:600;color:var(--vk-link);cursor:pointer;font-family:inherit}
.pv-act:hover{background:var(--hover)}
.pv-act.is-done{background:#e7f5e7;border-color:#cfe6cf;color:#3d9640}
.pv-act-danger{color:#c0392b}
.pv-act-danger:hover{background:var(--danger-soft)}
.pv-comments{flex:1;overflow-y:auto;padding:10px 14px;min-height:120px}
.pv-empty{color:var(--vk-muted);font-size:13px;text-align:center;padding:18px 0}
.pv-cmt{display:flex;gap:8px;margin-bottom:10px}
.pv-cava{width:30px;height:30px;border-radius:4px;overflow:hidden;background:var(--vk-blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.pv-cava img{width:100%;height:100%;object-fit:cover}
.pv-cbody{flex:1;min-width:0}
.pv-crow{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.pv-crow b{font-size:13px;color:var(--vk-link)}
.pv-cdate{font-size:11px;color:var(--vk-muted)}
.pv-ctext{font-size:13px;line-height:1.45;color:var(--vk-text);word-wrap:break-word}
.pv-cdel{background:none;border:none;cursor:pointer;color:var(--vk-muted);padding:0 2px}
.pv-cdel:hover{color:#c0392b}
.pv-form{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--vk-border);background:var(--field)}
.pv-input{flex:1;border:1px solid var(--vk-border);border-radius:4px;padding:8px 11px;font:13px var(--font);background:var(--card);color:var(--vk-text)}
.pv-input:focus{outline:none;border-color:var(--vk-blue)}
.pv-send{width:36px;height:36px;border-radius:4px;border:1px solid var(--vk-blue-dark,#3E6691);background:var(--vk-blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.pv-send:hover{background:var(--vk-blue-hover)}
.pv-close,.pv-nav{
  position:fixed;z-index:301;background:rgba(255,255,255,.12);border:none;color:#fff;
  border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.pv-close:hover,.pv-nav:hover{background:rgba(255,255,255,.22)}
.pv-close{top:16px;right:16px}
.pv-nav{top:50%;transform:translateY(-50%)}
.pv-prev{left:16px}
.pv-next{right:16px}
.pv-cdel{color:var(--vk-muted)}
@media (max-width:760px){
  .pv-body{flex-direction:column;max-height:94vh;overflow-y:auto}
  .pv-side{width:100%;flex:none;border-left:none;border-top:1px solid var(--vk-border)}
  .pv-img-wrap img{max-height:44vh}
  .pv-comments{min-height:60px;max-height:180px}
  .pv-nav{display:none}
}

/* ===== Онлайн сейчас ===== */
.online-count{
  background:#e7f5e7;color:#3d9640;font-size:12px;font-weight:700;
  border:1px solid #cfe6cf;border-radius:12px;padding:2px 10px;
}
.online-dot{
  position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:8px;
  background:#2FAF5A;border:2.5px solid var(--card);
}

/* ============================================================
   PROFESSIONAL POLISH LAYER — аддитивный, идентичность VK сохранена
   ============================================================ */

::selection{background:rgba(74,118,168,.22)}

/* Плавные микропереходы на интерактивных элементах */
.btn,.panel .post-actions a,.side a,.tabs a,.pager a,.pager span{
  transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}

/* R92: панели плоские — рамка есть, тень лишняя */
.panel{
  box-shadow:none;
}

/* Кнопки: более чистая градиентная заливка и состояния */
.btn{
  background:linear-gradient(180deg,#5685B5,var(--vk-blue));
  border:1px solid #40709f;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.btn:hover{
  background:linear-gradient(180deg,#5f8ec5,var(--vk-blue-hover));
}
.btn:active{
  background:linear-gradient(180deg,var(--vk-blue-dark),#4173a5);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.15);
}
.btn-sec,.btn-secondary{
  background:var(--fill2);
  border:1px solid var(--vk-border,#D3DCE6);
  box-shadow:none;
  text-shadow:none;
}
.btn-sec:hover,.btn-secondary:hover{background:var(--hover)}

/* Инпуты: фокус-кольцо в фирменном цвете */
textarea,input[type="text"],input[type="password"],input[type="email"],input[type="date"],input[type="search"],select{
  transition:border-color .12s ease,box-shadow .12s ease;
}
textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="date"]:focus,input[type="search"]:focus,select:focus{
  outline:0;
  border-color:#9db8d5;
  box-shadow:0 0 0 3px rgba(74,118,168,.12),inset 0 1px 2px rgba(0,0,0,.03);
}

/* Сайдбар: аккуратный активный пункт и ховеры */
.side a{
  border-radius:4px;
  margin:1px 0;
}
.side a:hover{background:rgba(74,118,168,.07);text-decoration:none}
.side a.active{
  background:linear-gradient(180deg,rgba(74,118,168,.12),rgba(74,118,168,.07));
}

/* Топбар: чуть глубже и чище */
.topbar{
  background:linear-gradient(180deg,#5685B5 0%,var(--vk-blue) 60%,var(--vk-blue-dark) 100%);
}

/* Скроллбар: тонкий, в серо-синей гамме */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#e9ebee}
::-webkit-scrollbar-thumb{background:#c3ccd6;border-radius:5px;border:2px solid #e9ebee}
::-webkit-scrollbar-thumb:hover{background:#a9b6c4}

/* Аватары-заглушки: мягкий градиент */
.avatar-ph,.ph{
  background:linear-gradient(135deg,#dbe3ec,#c6d2e0);
  color:#7c93ad;
}

/* Счётчик уведомлений */
.topbar .cnt{
  font-weight:700;
}

/* Истории: аккуратные карточки */

/* Таблицы и списки: ровные разделители */

/* Мелкая типографика: числа/время чуть светлее */
.post-time,.muted,.time{
  letter-spacing:.01em;
}

/* Доступность: видимый фокус с клавиатуры */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid rgba(74,118,168,.55);
  outline-offset:2px;
}

/* ================= Гости ================= */
.guests-list{display:flex;flex-direction:column}
.guest-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--vk-border)}
.guest-row:last-child{border-bottom:none}
.guest-ava{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--vk-blue);display:flex;align-items:center;justify-content:center;text-decoration:none}
.guest-ava img{width:100%;height:100%;object-fit:cover;display:block}
.guest-ava span{color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px}
.guest-ava .online-dot{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--vk-green);border:2px solid var(--card)}
.guest-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.guest-name{color:var(--vk-link);font-weight:600;font-size:13px;text-decoration:none}
.guest-name:hover{text-decoration:underline}
.guest-city{color:var(--vk-text);font-size:12px}
.guest-time{color:var(--vk-muted);font-size:11px}
@media (max-width:560px){.guest-row .btn{display:none}}

/* ============ Professional polish ============ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(74,118,168,.22)}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(74,118,168,.55);outline-offset:2px;border-radius:2px}
a{transition:color .12s ease}
.btn{transition:background-color .12s ease,border-color .12s ease,transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid rgba(74,118,168,.55);outline-offset:2px}
.panel{transition:border-color .15s ease}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,textarea:focus,select:focus{border-color:var(--vk-blue);box-shadow:0 0 0 2px rgba(74,118,168,.15)}
.side a{transition:background-color .1s ease,color .1s ease}
.cnt{transition:background-color .12s ease}
.topbar{border-bottom:1px solid rgba(255,255,255,.14)}  /* R92: без тени */
.post,.panel{will-change:auto}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fill)}
::-webkit-scrollbar-thumb{background:var(--line2);border:2px solid var(--fill);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* R50: слои слиты. Дизайн-система одна — классика ВКонтакте 2006-2007
   (палитра --vk-*, радиус 4px, системный стек, мягкие тени).
   Ниже — ТОЛЬКО компоненты без аналогов в классике; переменные — алиасы. */
:root{
  --brand:var(--vk-blue);
  --brand-dark:var(--vk-blue-dark);
  --brand-hover:var(--vk-blue-hover);
  --brand-tint:#EDF2F7;
  --brand-ring:#9EBBD6;
  --card:var(--vk-white);
  --card-edge:var(--vk-border);
  --field:var(--vk-bg);
  --fill:#F5F7FA;
  --fill2:#E9EDF1;
  --glass:rgba(255,255,255,.92);
  --hover:#F0F2F5;
  --line:var(--vk-border);
  --line-soft:#E7EBF0;
  --line2:var(--vk-border);
  --ring:rgba(74,118,168,.35);
  --ring-off:rgba(74,118,168,.16);
  --ring-seen:#C9D4E0;
  --ring-strong:var(--vk-blue);
  --tint-hover:#E7EEF6;
  --post-hover:#F7F9FB;  /* R93: ховер записи — светлее карточки, не цвет фона страницы */
  --voice-bg:#E9F0F8;
  --voice-line:#7FA6CF;
  --ok-bg:#E8F7EE;--ok-line:#BFE7CD;--ok-tx:#1F7A3D;
  --err-bg:#FDECEC;--err-line:#F3C1C1;--err-tx:#B23A3A;
  --info-bg:#EAF2FB;--info-line:#C4D9F0;--info-tx:#2B587A;
  --r-card:var(--vk-radius);--r-btn:var(--vk-radius);--r-input:var(--vk-radius);--r-group:6px;
  --shadow-pop:0 6px 24px rgba(23,25,28,.14);
  --dx:0;--dy:0;
  --panel:var(--vk-white);--bg-soft:var(--vk-bg);--bg-2:#EDEEF0;--border:var(--vk-border);
  --green:var(--vk-green);--red:var(--vk-red);--muted:var(--vk-muted);
  --text:var(--vk-text);--text-sec:var(--vk-muted);
}
:root{
  --brand:#4A76A8;
  --brand-dark:#3E6691;
  --brand-hover:#5685B5;
  --brand-tint:#EDF2F7;
  --brand-ring:conic-gradient(from 200deg,#4A76A8,#9EBBD6,#4A76A8);
  --vk-blue:#4A76A8;
  --vk-blue-dark:#3E6691;
  --vk-blue-hover:#5685B5;
  --vk-bg:#F0F2F5;
  --vk-white:#fff;
  --vk-text:#2C2D2E;
  --vk-muted:#7D8B9A;
  --vk-link:#2B587A;
  --vk-border:#DCE1E8;
  --vk-green:#2FAF5A;
  --vk-red:#E64646;
  --vk-radius:4px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:none;  /* R92: плоско */
  --shadow-pop:0 6px 24px rgba(23,25,28,.14);
  --r-card:4px;
  --r-btn:4px;
  --r-input:4px;
  --r-group:6px;
}

input,textarea,select,button{font-family:var(--font)}

.top-search::placeholder{color:#7996B5}

.side a.is-on{font-weight:700}
.side a:hover .side-ico,.side a.is-on .side-ico{opacity:1}


.act-btn:hover{background:var(--hover);text-decoration:none}

.auth-field input:not(:placeholder-shown){background:var(--card)}



.post-author:hover{text-decoration:underline}




.bubble.mine .t{color:var(--vk-muted)}
.bubble.mine .ticks{color:var(--vk-muted)}
.bubble.mine .ticks[data-read="1"]{color:#4a76a8}

.sb-plus{background:var(--brand)}




.audio-play:hover{background:var(--brand-dark)}




.tag-chip:hover span{color:var(--brand)}
.file-btn:hover{background:var(--brand-tint)}



/* ---------- Мобильная навигация ---------- */
@media(max-width:760px){
  .mobile-bar{
    background:var(--glass);backdrop-filter:blur(10px);
    border-top:1px solid var(--vk-border);height:56px;
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -2px 16px var(--card-edge);
  }
  .mobile-bar a{color:var(--vk-muted);border-radius:12px;transition:color .12s}
  .mobile-bar a:active{color:var(--brand)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
}

/* R96: активная вкладка таб-бара + аватар-вкладка «Моя» + кнопка «Ещё» */
.mobile-bar a.is-on{color:var(--brand)}
.mobile-bar a.is-on .ico{color:var(--brand)}
.mb-more{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--vk-muted);font-size:10px;font-weight:600;position:relative}
.mb-more .ico{width:20px;height:20px}
.mb-more:active{color:var(--brand)}
.mb-av{width:24px;height:24px;border-radius:50%;object-fit:cover;display:inline-flex}
.mb-av-txt{align-items:center;justify-content:center;background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;font-size:10px;font-weight:700}
@media(min-width:761px){
  .mobile-bar{display:none!important}
}

/* ---------- Транзишены базовых поверхностей ---------- */
.panel,.side,.friend-card,.btn,.act-btn,.btn-icon,.tag-chip,.tabs a,.mail-tab{transition:all .14s ease}

/* ================================================================================
   DESIGN SYSTEM v2.1 — семантические токены поверхностей + тёмная тема
   Светлая тема = значения по умолчанию. Тёмная: html[data-theme="dark"]
   ================================================================================ */

/* ---------- Тёмная тема ---------- */
html[data-theme="dark"]{
  --vk-bg:#0F1013;
  --card:#1B1C20;
  --fill:#26272C;
  --fill2:#2A2B31;
  --field:#232428;
  --hover:#26272C;
  --tint-hover:#1D2B40;
  --post-hover:#202126;  /* R93: тёмная — светлее карточки #1B1C20, не цвет фона */
  --danger-soft:rgba(230,70,70,.16);
  --line:#2C2E33;
  --line-soft:#242629;
  --line2:#34363C;
  --glass:rgba(17,18,22,.9);
  --card-edge:rgba(255,255,255,.07);
  --ring-off:#3A3C42;
  --ring-seen:#33353A;
  --vk-text:#E6E8EB;
  --vk-muted:#98A0AB;
  --vk-link:#7FA7CC;
  --vk-border:#2C2E33;
  --brand-tint:#1D2B40;
  --shadow:none;  /* R92: плоско */
  --shadow-pop:0 6px 24px rgba(0,0,0,.55);
  --info-tx:#9EBBD6;
  /* R89: тёмные значения токенов алертов — R81 добил не все,
     msg и alert чипы оставались светлыми на тёмном фоне */
  --ok-bg:rgba(46,125,50,.18);--ok-line:rgba(122,201,138,.32);--ok-tx:#7AC98A;
  --err-bg:rgba(198,53,53,.18);--err-line:rgba(239,154,154,.32);--err-tx:#EF9A9A;
  --info-bg:rgba(74,118,168,.22);--info-line:rgba(143,182,224,.32);
  /* R81: добиваем семантические токены, оставшиеся светлыми */
  --panel:var(--card);
  --bg-soft:var(--fill);
  --bg-2:var(--fill2);
  --border:var(--line);
  color-scheme:dark;
}

/* ---------- Переключатель темы ---------- */
.theme-toggle{
  background:none;border:0;cursor:pointer;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;
  color:#fff;transition:background .13s,color .13s;
}
.theme-toggle:hover{background:rgba(255,255,255,.16)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ico-sun{display:none}
html[data-theme="dark"] .theme-toggle .ico-sun{display:block}
html[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* ---------- Точечные поправки тёмной темы ---------- */
html[data-theme="dark"] body{background:var(--vk-bg)}
html[data-theme="dark"] .post-author{color:var(--vk-link)}
html[data-theme="dark"] .story-upload-box{box-shadow:0 24px 70px rgba(0,0,0,.6)}
body{transition:background-color .2s ease,color .2s ease}

/* ---------- Живой поиск: подсказки ---------- */
.search-suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  box-shadow:var(--shadow-pop);overflow:hidden;z-index:130;max-height:420px;overflow-y:auto;
}
.sg-hd{
  padding:9px 14px 4px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--vk-muted);
}
.sg-item{display:flex;align-items:center;gap:10px;padding:8px 14px;text-decoration:none!important;transition:background .1s}
.sg-item:hover,.sg-item.act{background:var(--hover)}
.sg-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,#5685B5,var(--brand-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;
}
.sg-av.g{border-radius:8px}
.sg-av img{width:100%;height:100%;object-fit:cover;display:block}
.sg-col{display:flex;flex-direction:column;min-width:0}
.sg-nm{font-size:13px;font-weight:600;color:var(--vk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-sub{font-size:12px;color:var(--vk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-empty{padding:14px;font-size:13px;color:var(--vk-muted);text-align:center}

/* ---------- Плейлисты ---------- */
.pl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pl-card{
  position:relative;border:1px solid var(--card-edge);border-radius:14px;background:var(--card);
  padding:10px;display:flex;flex-direction:column;gap:8px;text-decoration:none!important;
  transition:border-color .12s ease;
}
.pl-card:hover{border-color:rgba(74,118,168,.4)}
.pl-cover{
  width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#5685B5,var(--brand-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.pl-cover .ico{width:30px;height:30px;opacity:.95}
.pl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-cover.lg{width:96px;height:96px;aspect-ratio:auto;flex:0 0 96px;border-radius:16px}
.pl-cover.lg .ico{width:36px;height:36px}
.pl-nm{font-weight:700;font-size:13px;color:var(--vk-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-sub{font-size:12px;color:var(--vk-muted)}
.pl-hero{display:flex;gap:16px;align-items:center;padding:18px}
.pl-hero-info{min-width:0}
.pl-title{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--vk-text)}
.pl-meta{color:var(--vk-muted);font-size:13px}
.pl-meta a{color:var(--vk-link)}
.pl-actions{margin-top:10px;display:flex;gap:8px}
.pl-create-form{display:flex;gap:8px;align-items:center;margin-left:auto}
.pl-create-input{
  height:32px;border:1px solid var(--line2);border-radius:var(--vk-radius);background:var(--card);
  font:600 12.5px var(--font);color:var(--vk-text);padding:0 11px;width:180px;
}
.pl-create-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,118,168,.14)}
.row-pl{
  border:0;background:none;cursor:pointer;color:var(--vk-muted);
  width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s,background .12s;flex:0 0 28px;
}
.row-pl:hover{color:var(--brand);background:var(--brand-tint)}
.pl-menu{
  position:fixed;z-index:220;width:240px;background:var(--card);
  border:1px solid var(--card-edge);border-radius:12px;box-shadow:var(--shadow-pop);
  overflow:hidden;padding:4px;
}
.pl-menu-hd{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vk-muted);padding:8px 10px 4px}
.pl-menu-item{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:8px 10px;border-radius:8px;font:600 13px var(--font);color:var(--vk-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-menu-item:hover{background:var(--hover)}
.pl-menu-item.create{color:var(--brand);border-top:1px solid var(--line-soft);border-radius:0;margin-top:2px;padding-top:9px}
.pl-menu-empty{padding:8px 10px;font-size:13px;color:var(--vk-muted)}
.panel-h .inline-form{position:static}
.panel-h .pl-create-form .file-btn{margin-right:0}
@media(max-width:760px){
  .pl-cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .pl-hero{padding:14px;gap:12px}
  .pl-cover.lg{width:72px;height:72px;flex:0 0 72px}
  .pl-create-form{flex-wrap:wrap}
  .pl-create-input{width:120px}
}

/* ===== Upload progress (AJAX-загрузка файлов, v40) ===== */
.upl-prog{margin:8px 0 2px;min-width:200px;max-width:420px}
.upl-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--text,#2c2d2e);margin-bottom:4px}
.upl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.upl-pct{color:var(--brand,#4a76a8);font-weight:700;flex:none}
.upl-bar{height:6px;border-radius:3px;background:var(--bg-2,#e0e2e6);overflow:hidden}
.upl-fill{height:100%;width:0;border-radius:3px;background:var(--brand,#4a76a8);transition:width .25s ease}
.upl-msg{font-size:12px;color:var(--muted,#7d8b9a);margin-top:4px}
.upl-prog.is-error .upl-fill{background:var(--red,#e64646)}
.upl-prog.is-error .upl-msg{color:var(--red,#e64646)}
.upl-prog.is-done .upl-fill{background:var(--green,#2faf5a)}
.upl-prog.is-done .upl-msg{color:var(--green,#2faf5a)}
#story-upload .upl-prog{margin:10px 0 4px;max-width:none}

/* ==================== ENGAGEMENT ENGINE ==================== */
/* ==================== ENGAGEMENT ENGINE ==================== */

/* --- Табы ленты «Мои друзья / Интересное» --- */
.feed-tabs{
  display:flex; gap:6px; margin:0 0 12px;
  background:var(--panel, #fff); border:1px solid var(--border, #dce1e6); border-radius:8px; padding:6px;
}
.feed-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; border-radius:6px; font-size:13px; font-weight:600;
  color:var(--text-sec, #656a72); text-decoration:none; transition:background .15s, color .15s;
}
.feed-tab:hover{ background:var(--bg-soft, #f0f2f5); color:var(--text, #1f2430); text-decoration:none; }
.feed-tab.active{ background:var(--brand, #4A76A8); color:#fff; }
.feed-tab.active .ico{ color:#fff; }

/* --- Панель «Моя волна» --- */
.wave-panel{
  background:linear-gradient(135deg, #2B587A 0%, #4A76A8 78%);
  border:none; color:#fff; overflow:hidden; position:relative;
}
.wave-panel::after{
  content:""; position:absolute; right:-46px; top:-46px; width:190px; height:190px;
  border:22px solid rgba(255,255,255,.09); border-radius:50%;
}
.wave-inner{ display:flex; align-items:center; gap:18px; padding:20px 22px; position:relative; z-index:1; }
.wave-disc{
  width:66px; height:66px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.wave-text{ flex:1; min-width:0; }
.wave-title{ margin:0 0 4px; font-size:18px; font-weight:700; color:#fff; letter-spacing:.2px; }
.wave-sub{ margin:0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.85); max-width:560px; }
.wave-start{
  flex:none; background:#fff; color:#2B587A; font-weight:700; padding:10px 18px; border-radius:6px;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:14px;
  transition:filter .12s;
}
.wave-start:hover{ filter:brightness(.96); color:#2B587A; }
.wave-start:active{ transform:translateY(0); }

/* --- Кнопка «Волна» в плеере --- */
.ab-wave{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:999px;
  color:rgba(255,255,255,.85); padding:4px 10px; cursor:pointer; font-size:12px; font-weight:700;
  transition:background .15s, color .15s, border-color .15s;
}
.ab-wave:hover{ background:rgba(255,255,255,.12); color:#fff; }
.ab-wave.active{
  background:#fff; color:#2B587A; border-color:#fff;
}
.ab-wave.loading{ opacity:.55; pointer-events:none; }
@media (max-width:640px){ .ab-wave-label{ display:none; } .ab-wave{ padding:4px 7px; } }

/* --- Лайк на треке --- */
.audio-like{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  background:transparent; border:none; color:var(--text-sec, #818c99);
  cursor:pointer; padding:5px 6px; border-radius:4px; font-size:12px; line-height:1;
  transition:color .15s, background .15s;
}
.audio-like .ico{ width:15px; height:15px; }
.audio-like:hover{ color:#e64646; background:rgba(230,70,70,.08); }
.audio-like.liked{ color:#e64646; }
.audio-like.liked .ico{ fill:#e64646; }
.al-cnt{ min-width:8px; text-align:left; font-weight:600; }

/* --- Поиск в музыке --- */
.panel-h-tools{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.music-search{ display:inline-flex; gap:5px; align-items:center; }
.music-search-input{
  width:210px; max-width:46vw; padding:6px 10px; border:1px solid var(--border, #dce1e6);
  border-radius:6px; font-size:13px; background:var(--bg-soft, #f5f6f8); color:var(--text, #1f2430);
}
.music-search-input:focus{ outline:none; border-color:var(--brand, #4A76A8); background:var(--card); }
.btn-ghost{ background:transparent; }

/* --- Пустая выдача поиска --- */
.audio-list .empty-hint{ padding:14px 4px; }

/* Тёмная тема */
html[data-theme="dark"] .feed-tabs{ background:var(--panel, #232324); border-color:var(--border, #333); }
html[data-theme="dark"] .feed-tab:hover{ background:var(--bg-soft, #2c2c2e); }
html[data-theme="dark"] .wave-panel{ background:linear-gradient(135deg, #1e3a52 0%, #33567a 78%); }
.wave-start.loading{ opacity:.65; pointer-events:none; }
.wave-start.active{ background:#dbe4ee; color:#2B587A; }
html[data-theme="dark"] .wave-start.active{ background:#33567a; color:#fff; }
html[data-theme="dark"] .music-search-input{ background:var(--bg-soft, #2c2c2e); }

/* Мобильная версия */
@media (max-width:640px){
  .wave-inner{ flex-wrap:wrap; gap:12px; padding:16px; }
  .wave-text{ flex-basis:100%; order:2; }
  .wave-start{ order:1; width:100%; justify-content:center; }
  .wave-disc{ order:0; width:52px; height:52px; }
  .music-search-input{ width:150px; }
}

/* wave-start: neutralize .btn color:#fff!important (white-on-white fix) */
.wave-start{ background:#fff!important; color:#2B587A!important; border:1px solid rgba(43,88,122,.4)!important; }
.wave-start .ico{ color:#2B587A!important; }
.wave-start:hover{ background:var(--hover)!important; color:#2B587A!important; }
.wave-start.active{ background:#dbe4ee!important; color:#2B587A!important; border-color:#2B587A!important; }
.wave-start.active .ico{ color:#2B587A!important; }
html[data-theme="dark"] .wave-start.active{ background:#33567a!important; color:#fff!important; border-color:#5a86b0!important; }
html[data-theme="dark"] .wave-start.active .ico{ color:#fff!important; }

/* --- Типографика --- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.015em}
.badge-n,.cnt,.al-cnt,.b-counter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* --- Глобальный focus ring (доступность) --- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--ring-strong)!important;
}
.top-search:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.35)!important}


*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#b9c6d4;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background-color:#98a9bb}
*::-webkit-scrollbar-track{background:transparent}
html[data-theme="dark"] *{scrollbar-color:#4a5260 transparent}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#4a5260;border:2px solid transparent;background-clip:content-box}

html[data-theme="dark"] .panel{box-shadow:none}  /* R92: плоско в тёмной теме тоже */


/* --- Сайдбар: ховеры и активный пункт --- */
.side a,.side-item{transition:background .14s ease,color .14s ease;border-radius:6px}
.side a:active{background:rgba(74,118,168,.12)}
.side a .ico,.side a svg{transition:color .14s ease}

.btn-sec:active{transform:translateY(1px)}

/* --- Инпуты: фокус-подсветка --- */
input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],input[type=number],textarea,select{
  border-radius:var(--r-input);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,textarea:focus,select:focus{box-shadow:var(--ring)}

.msg-mine,.msg.them+.mine,.msg[style*="4A76A8"]{box-shadow:none}  /* R92: плоско */

/* --- Списки: hover строк --- */
.audio-row,.dlg-row,.list-row,.row-link{transition:background .13s ease}
.audio-row:hover,.dlg-row:hover,.list-row:hover{background:var(--bg-soft,var(--brand-tint,#EDF2F7))}

/* --- Волна/медиа-панель: плавающая — рамка вместо тени --- */
.wave-panel{border:1px solid var(--vk-border)}

/* --- Картинки-миниатюры: плавное затемнение --- */
.thumb,.post-img img,.photo-thumb{transition:filter .18s ease}
a:hover>.thumb,a:hover>.post-img img{filter:brightness(.94)}


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

/* --- Печать --- */
@media print{
  .topbar,.side,.audio-bar,#toast-box{display:none!important}
}

/* ===== v45: Профиль — вёрстка VK 2006-2008 (сайдбар + фото-колонка | инфо + стена) ===== */
.pv-cols{display:flex;align-items:flex-start;gap:14px;transition:gap .28s ease}
.pv-left{flex:0 0 210px;min-width:0;transition:flex-basis .28s ease,opacity .2s ease}
.pv-right{flex:1 1 auto;min-width:0}
.pv-cols.pv-single{gap:0}
.pv-cols.pv-single .pv-left{flex-basis:0;opacity:0;overflow:hidden;pointer-events:none}

.pv-photo-panel{padding:12px}
.pv-photo{position:relative;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;color:var(--vk-blue);letter-spacing:-.02em}
.pv-photo img{width:100%;height:100%;object-fit:cover}
.pv-actions .btn{width:100%;justify-content:center;font-size:13px;padding:7px 10px;margin:0}
.pv-actions .inline-form{width:100%;margin:0}
/* R61: на странице профиля кнопки — строго в колонку внутри левой панели */
.pv-photo-panel .pv-actions{margin-left:0;flex-direction:column;align-items:stretch}
.pv-photo-panel .pv-actions .btn{width:100%;white-space:normal}
.pv-actions .inline-form .btn{width:100%}

.pv-block{margin-top:0;padding:12px}
.pv-block-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vk-text);margin-bottom:10px}
.pv-block-h a{color:var(--vk-link);font-weight:700;text-decoration:none}
.pv-block-h a:hover{text-decoration:underline}
.pv-block-h .pv-hlink{margin-left:auto;font-weight:500;font-size:12px;color:var(--vk-muted)}
.pv-block-h .pv-hlink:hover{color:var(--vk-link)}

.pv-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pv-fav{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;text-decoration:none}
.pv-fav span{font-size:12px;font-weight:700;color:var(--vk-blue)}
.pv-fav img{width:100%;height:100%;object-fit:cover}

.pv-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pv-pcell{display:block;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--brand-tint)}
.pv-pcell img{width:100%;height:100%;object-fit:cover;display:block}

.pv-gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pv-gift{position:relative;aspect-ratio:1}
.pv-gift>a{display:block;width:100%;height:100%;text-decoration:none}
.pv-gift-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pv-gift-art img{width:100%;height:100%;object-fit:contain}
.pv-gift .gift-hide{position:absolute;top:0;right:0;z-index:2;margin:0}
.pv-gift .gift-hide button{opacity:0;transition:opacity .15s}
.pv-gift:hover .gift-hide button{opacity:1}

.pv-audio{padding:0;display:flex;flex-direction:column;gap:2px}
.pv-audio .audio-row{padding:5px 6px;border-radius:4px}
.pv-audio .audio-name{font-size:13px}
.pv-audio .audio-play{width:26px;height:26px}
.pv-more{margin-top:8px;font-size:12px}
.pv-more a{color:var(--vk-muted);text-decoration:none}
.pv-more a:hover{color:var(--vk-link)}

.pv-notes{display:flex;flex-direction:column;gap:2px}
.pv-notes .note-row{padding:6px 4px;background:transparent;border-radius:4px}

.pv-ach{display:flex;flex-direction:column;gap:7px}
.pv-ach-row{display:flex;align-items:center;gap:8px;opacity:.5}
.pv-ach-row.done{opacity:1}
.pv-ach-ico{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--vk-muted)}
.pv-ach-ico .ico{width:16px;height:16px}
.pv-ach-row.done .pv-ach-ico{color:var(--vk-blue)}
.pv-ach-body{flex:1;min-width:0}
.pv-ach-name{display:block;font-size:12px;font-weight:600;color:var(--vk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-ach-progress{display:block;height:3px;border-radius:2px;background:var(--line2);overflow:hidden;margin-top:3px}
.pv-ach-progress i{display:block;height:100%;background:var(--vk-blue);border-radius:2px}
.pv-ach-row.done .pv-ach-progress i{background:var(--vk-green)}

.pv-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pv-name{font-size:22px;font-weight:700;margin:0 0 2px;letter-spacing:-.02em;color:var(--vk-text)}
.pv-seen{font-size:13px;color:var(--vk-green);font-weight:600}
.pv-seen.is-off{color:var(--vk-muted);font-weight:500}
.pv-status{color:var(--vk-muted);font-size:13px;font-style:italic;margin:0 0 12px}

.pv-info{display:flex;flex-direction:column;gap:7px}
.pv-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--vk-muted)}
.pv-row b{color:var(--vk-text);font-weight:600}
.pv-row a{color:var(--vk-link);font-weight:600}
.pv-k{flex:0 0 auto}
.pv-muted{color:var(--vk-muted);font-weight:400}
.pv-about b{font-weight:400;color:var(--vk-text)}
.pv-row .pv-hlink{margin-left:auto}

@media(max-width:760px){
  .pv-cols{flex-direction:column;gap:14px}
  .pv-cols.pv-single{gap:14px}
  .pv-cols.pv-single .pv-left{flex-basis:auto;opacity:1;overflow:visible;pointer-events:auto}
  .pv-left{flex:1 1 auto}
  .pv-actions .btn{width:auto;flex:1 1 auto;padding:8px 12px}
  .pv-actions .inline-form{width:auto;flex:1 1 auto}
  .pv-actions .inline-form .btn{width:100%}
  .pv-fgrid,.pv-gifts{grid-template-columns:repeat(6,1fr)}
  .pv-name{font-size:20px}
}

@media(max-width:760px){.pv-cols{align-items:stretch}.pv-right{width:100%;max-width:100%}}

/* ==================== DESIGN POLISH 3 — единая система форм, отступов, мобильных пропорций ====================
   Сетка отступов: 4/8/10/12/14/16/18. Контролы форм: высота 41px, радиус var(--r-input), фокус-ринг rgba(74,118,168,.14).
   Правила аддитивные: идентичность VK 2006-2008 не меняется. */

/* --- 3.1 Формы: любой контрол внутри .auth-field — блочный, на всю ширину, с единой метрикой --- */
.auth-field select,
.auth-field textarea{
  display:block;width:100%;margin-top:5px;
  border:1px solid var(--line2);border-radius:var(--vk-radius);
  background:var(--card);color:var(--vk-text);font:14px var(--font);
}
.auth-field select{height:41px;padding:8px 30px 8px 12px}
.auth-field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,118,168,.14)}
.auth-field select.vis-select{height:41px;font-size:14px;font-weight:500}
.auth-field textarea{padding:11px 14px;min-height:100px;resize:vertical;line-height:1.5}
.auth-field textarea:focus{outline:none;border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px rgba(74,118,168,.14)}
.auth-field input[type=file]{
  display:block;width:100%;margin-top:5px;padding:8px 10px;
  border:1.5px dashed var(--line2);border-radius:var(--r-input);
  background:var(--fill);color:var(--vk-muted);font:13px var(--font);cursor:pointer;
}
.auth-field input[type=file]::file-selector-button{
  margin-right:10px;padding:7px 12px;border:0;border-radius:var(--r-btn);
  background:var(--brand);color:#fff;font:600 12.5px var(--font);cursor:pointer;
}
.auth-field input[type=file]::file-selector-button:hover{background:var(--vk-blue-dark)}
.auth-field input[type=date],.auth-field input[type=time]{height:41px}

/* --- 3.2 Шапки панелей: бэк-линк и заголовок — одна группа слева, действия справа --- */
.panel-h .back-link{font-weight:600}
.panel-h .back-link .ico{vertical-align:-2px}

/* --- 3.3 Чекбоксы фильтров: аккуратный размер, фирменный акцент --- */
.ef-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:0 0 auto}

/* --- 3.4 «Моя волна» на мобильном: диск + заголовок в строке, кнопка снизу на всю ширину --- */
@media(max-width:760px){
  .wave-inner{align-items:center}
  .wave-disc{order:0;flex:0 0 44px;width:44px;height:44px}
  .wave-text{order:1;flex:1 1 0;min-width:0}
  .wave-title{font-size:17px}
  .wave-sub{font-size:12px}
  .wave-start{order:2;width:100%}
}

/* --- 3.5 Профиль на мобильном: фото — компактная карточка, не квадрат на весь экран --- */
@media(max-width:760px){
  .pv-photo{max-width:200px;margin:0 auto}
}

/* --- 3.6 Тулбары в шапках панелей на мобильном: переносятся строкой ниже --- */
@media(max-width:760px){
  .panel-h-tools{width:100%;margin-left:0}
}

/* --- 3.7 Узкие экраны: в строке трека прячем исполнителя, название читается целиком --- */
@media(max-width:480px){
  .audio-row .post-time{display:none}
  .audio-row .audio-name{flex:1 1 auto}
}

/* --- 3.8 Цветовая закт困难的swatch --- */

/* --- 3.8 Поле выбора цвета: компактный свотч, а не полоса на всю ширину --- */
.auth-field input.color-inp{width:64px;height:38px;padding:2px;cursor:pointer}
.auth-field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.auth-field input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.12);border-radius:2px}

.audio-plays,.audio-row .al-cnt{white-space:nowrap}

/* ================================================================================
   POLISH 4 (v51) — единая система отступов, размеров и пропорций
   + доведение тёмной темы до 100% покрытия (без жёстких светлых цветов)
   Отступы: 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 20
   Радиусы: 4 · 6 · 8 · 12 · 16 · 20 · 50% · 999px
   Кегли:   10 · 11 · 12 · 12.5 · 13 · 13.5 · 14 · 15 · 17 · 19 · 20 · 22
   Контролы фильтров: единая высота 36px
   ================================================================================ */

.pv-info{gap:8px}



/* ---- 4.4 Единый стиль действий в шапках панелей ----
   Любая ссылка-действие в .panel-h (кроме .btn) получает один ритм:
   12.5px/600, чип-ховер, иконка 14px. Убирает разнобой
   «создать / загрузить / подать объявление / К странице». */
.panel-h > a:not(.btn){
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--vk-link);
  text-decoration:none;padding:3px 8px;margin:-3px -8px;
  border-radius:6px;white-space:nowrap;
}
.panel-h > a:not(.btn):hover{background:var(--fill2);text-decoration:none}
.panel-h > a:not(.btn) .ico{width:14px;height:14px}

/* ---- 4.5 Фильтровые строки: все контролы одной высоты (36px) ---- */
.market-filter .market-search{height:36px}
.market-filter .market-search input{height:36px}
.market-filter .vis-select,
.people-search-form .vis-select{height:36px}
.market-filter .btn,
.people-search-form .btn{height:36px;padding-top:0;padding-bottom:0}
.people-search-form .people-input{height:36px;padding:0 13px}

/* ---- 4.6 Селект приватности в композере — в общей системе контролов ---- */
.wall-form .row select{
  height:34px;padding:0 26px 0 10px;border:1px solid var(--line2);
  border-radius:8px;background:var(--card);font-size:13px;font-weight:600;
  color:var(--vk-text);
}

/* ---- 4.7 Разделители строк сообществ — на всю ширину ряда ---- */
.group-list .group-row + .group-row{border-top:1px solid var(--line-soft);margin-top:-1px}

/* ================================================================================
   4.8 ТЁМНАЯ ТЕМА: закрываем все оставшиеся жёстко заданные светлые цвета
   ================================================================================ */
html[data-theme="dark"] .btn-sec:hover{background:var(--fill2)}
html[data-theme="dark"] .mail-item.is-unread{background:var(--tint-hover)}
html[data-theme="dark"] .chat-thread{background:var(--fill)}
html[data-theme="dark"] .bubble{background:var(--fill);border-color:var(--line)}
html[data-theme="dark"] .bubble.mine{background:#2B3B55;border-color:#3D5175}
html[data-theme="dark"] .bubble.mine .voice-row{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .bubble.mine .voice-wave i{background:rgba(255,255,255,.55)}
html[data-theme="dark"] .bubble.mine .voice-dur{color:rgba(255,255,255,.85)}
html[data-theme="dark"] .msg-error{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-line)}
html[data-theme="dark"] .msg-info{background:var(--info-bg);color:var(--info-tx);border-color:var(--info-line)}
html[data-theme="dark"] .msg-ok,html[data-theme="dark"] .messages .success,html[data-theme="dark"] .alert-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-tx)}
html[data-theme="dark"] .msg-err,html[data-theme="dark"] .messages .error,html[data-theme="dark"] .alert-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err-tx)}
html[data-theme="dark"] .sep-dot::before{background:var(--line2)}
html[data-theme="dark"] .group-row:hover{background:var(--hover)}
html[data-theme="dark"] .pin-label{background:var(--fill2)}
html[data-theme="dark"] .tag-chip{background:var(--fill2)}
html[data-theme="dark"] .tag-chip:hover{background:var(--fill)}
html[data-theme="dark"] .hashtag:hover,html[data-theme="dark"] .mention:hover{background:var(--fill2)}
html[data-theme="dark"] .rp-item.on{background:var(--tint-hover)}
html[data-theme="dark"] .pg-cell{background:var(--fill)}
html[data-theme="dark"] .lp-img{background:var(--fill)}
html[data-theme="dark"] .reply-to{background:var(--fill2)}
html[data-theme="dark"] .replying-note{background:var(--fill2)}
html[data-theme="dark"] .vis-badge{background:var(--fill2)}
html[data-theme="dark"] .gift-card:hover,html[data-theme="dark"] .note-row:hover,
html[data-theme="dark"] .event-row:hover,html[data-theme="dark"] .audio-row:hover{background:var(--hover)}
html[data-theme="dark"] .sb-av.me,html[data-theme="dark"] .story-bubble.seen .sb-av{background:var(--line2)}
html[data-theme="dark"] .stories-strip::-webkit-scrollbar-thumb{background:var(--fill2)}
html[data-theme="dark"] .market-desc{background:var(--fill);color:var(--vk-text)}
html[data-theme="dark"] .cnt-inline{background:var(--fill2);color:var(--vk-link)}
html[data-theme="dark"] .btn.act-danger:hover{background:var(--err-bg);border-color:var(--err-line)}

/* ---- 4.9 Вспомогательные классы вычищенных шаблонов ---- */
.pv-hint{margin:0 0 10px;font-size:13px;color:var(--vk-muted);line-height:1.45}
.auth-inp{border:1px solid var(--line2);border-radius:var(--r-input,8px);padding:9px 13px;font:13.5px var(--font);background:var(--card);width:100%;color:var(--vk-text)}
.auth-inp:focus{outline:none;border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.14)}
.album-create{display:flex;gap:8px;margin-bottom:12px}
.album-create .auth-inp{flex:1}
.wall-form .row input[type=file]{
  display:block;width:100%;height:41px;padding:8px 12px;border:1.5px dashed var(--line2);
  border-radius:var(--r-input,8px);background:var(--field);font-size:13px;color:var(--vk-muted);cursor:pointer;
}
.wall-form .row input[type=file]::file-selector-button{
  background:var(--vk-blue);color:#fff;border:0;border-radius:6px;padding:7px 12px;
  margin-right:10px;font:600 12.5px var(--font);cursor:pointer;
}

/* ---- 4.10 Страница ошибки 404 ---- */
.err-page{padding:28px 24px}
.err-code{font-size:44px;font-weight:800;color:var(--vk-muted);letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.err-title{font-size:20px;margin:0 0 8px;color:var(--vk-text)}
.err-text{font-size:13px;color:var(--vk-muted);margin:0 0 18px;max-width:480px;line-height:1.5}
.err-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 5.3 Достижения: воздух между названием и прогресс-треком */
.pv-ach-progress{margin-top:5px}
/* 5.4 Брендированная зона загрузки файла (русский текст вместо браузерного) */
.file-zone{
  position:relative;display:block;margin-top:5px;padding:10px;
  border:1.5px dashed var(--line2);border-radius:var(--r-input);
  background:var(--fill);cursor:pointer;transition:border-color .13s,background .13s;
}
.file-zone:hover,.file-zone.drag{border-color:var(--vk-blue);background:var(--brand-tint)}
.file-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.file-zone .file-ui{display:flex;align-items:center;gap:10px;pointer-events:none;min-height:27px}
.file-zone .btnpick{
  flex-shrink:0;padding:7px 12px;border-radius:var(--r-btn);
  background:var(--brand);color:#fff;font:600 12.5px var(--font);white-space:nowrap;
}
.file-zone .file-hint{
  font:13px var(--font);color:var(--vk-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
@media(max-width:600px){
  .file-zone .file-ui{flex-wrap:wrap;row-gap:4px}
}
/* 5.5 Люди/Поиск: пустая ячейка неполного ряда закрывается фоном карточки */
@media(min-width:601px){
  .people-grid:has(> :last-child:nth-child(odd))::after{content:'';background:var(--card)}
}
/* 5.6 Кнопки опасных действий: красный текст на светлой подложке (были красными на синем бренде) */
.btn.btn-danger{background:var(--card);border:1px solid #eec7c7}
.btn.btn-danger:hover{background:var(--danger-soft);border-color:#e6a9a9;box-shadow:none}
html[data-theme="dark"] .btn.btn-danger{background:var(--fill);border-color:#5a3232;box-shadow:none}
html[data-theme="dark"] .btn.btn-danger:hover{background:#3a2727}
/* === end POLISH 5 === */

/* ================= POLISH 6 (v56): финальная нормализация шкалы =================
   Кегли: 11 / 12 / 13 / 14 / 15 / 17 / 18 / 20 / 22 — без дробных
   Радиусы: 4 микро / 6 кнопки-чипы / 8 панели-карточки / 12+ крупные медиа / 999 pill
   Контролы: 24 иконки / 28 поиск / 32 btn-sm-чипы / 36 кнопки-фильтры-селекты / 41 формы
   Отступы: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 */
.side a,.side-item{border-radius:6px}
.auth-box .btn{height:41px}
.wall-form .file-btn{height:32px}
.wall-form .poll-toggle{height:32px;display:inline-flex;align-items:center;margin:0}
.wall-form .poll-toggle summary{display:inline-flex;align-items:center;height:32px;list-style:none}
.music-search-input{height:28px;padding:0 10px}
.theme-toggle{width:32px;height:32px;flex-basis:32px}
.theme-toggle svg{width:18px;height:18px}
.pv-audio .audio-play{width:24px;height:24px}
.audio-like{height:24px;padding:0 6px}
.event-info,.video-meta,.market-info,.online-card{gap:4px}
.pv-ach{gap:6px}
.feed-tab{gap:6px;font-size:13px}
.music-search{gap:4px}
.wave-inner{gap:16px}
.wall-form .row select{height:36px}
.ab-wave{gap:4px}
/* === end POLISH 6 === */

/* ================= HERO (гостевая главная, R85) ================= */
.wrap.auth:has(.hero){max-width:none;margin:0;padding:0}
.hero{position:relative;min-height:calc(100vh - 49px);min-height:calc(100svh - 49px);display:flex;align-items:center;justify-content:center;padding:44px 22px;overflow:hidden;background:linear-gradient(158deg,var(--hero-a,#3e6c9e) 0%,var(--hero-b,#2e5a8a) 52%,var(--hero-c,#223e5e) 100%)}
[data-theme="dark"] .hero{--hero-a:#243a52;--hero-b:#1b2c40;--hero-c:#101c2b}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32;pointer-events:none}
.hero-glow-a{width:520px;height:520px;left:-140px;top:-160px;background:#7fb2e5}
.hero-glow-b{width:460px;height:460px;right:-120px;bottom:-180px;background:#2c4a72;opacity:.5}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:56px;align-items:center;max-width:960px;width:100%}
.hero-promo{min-width:0}
.hero-h{margin:0 0 16px;font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.12;color:#fff}
.hero-lead{margin:0;font-size:clamp(14.5px,1.6vw,17px);line-height:1.6;color:rgba(255,255,255,.82);max-width:460px}
.hero-card{min-width:0}
.hero-auth{margin:0;border:1px solid var(--vk-border);border-radius:14px}
.hero-auth h1{margin-bottom:14px}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:30px;max-width:420px}
  .hero{padding:36px 18px}
  .hero-glow-a{width:340px;height:340px;left:-110px;top:-100px}
  .hero-glow-b{width:300px;height:300px;right:-100px;bottom:-120px}
}

/* Ошибочные страницы в гостевой ветке (панель уже в системе) */
.err-standalone{margin-top:8px}

.top-nav.auth-nav{margin-left:0}

/* ================= POLISH 7 (v60): поля форм — единая высота 41px ================= */
/* .auth-field input фактически был 40px при select/textarea/btn = 41px */
.auth-field input:not([type=file]):not([type=color]){height:41px}
.auth-field input.color-inp{height:41px}

/* ================= R96: мобильное меню нового поколения =================
   Подход сменён по требованию владельца: вместо шторки-гамбургера — нижний
   таб-бар (5 постоянных вкладок: Моя, Лента, Друзья, Чаты, Ещё) и
   ПОЛНОЭКРАННЫЙ экран «Ещё» с плитками-иконками (как в мобильных приложениях
   VK/Instagram). Гамбургер, .side.open и оверлей-затемнение удалены без следа. */
body.menu-open{overflow:hidden}
.m-more{position:fixed;inset:0;z-index:210;background:var(--vk-bg);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:vdMore .22s cubic-bezier(.2,.8,.25,1)}
@keyframes vdMore{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes vdFade{from{opacity:0}to{opacity:1}}
@media(min-width:761px){.m-more{display:none!important}}
.mm-wrap{max-width:480px;margin:0 auto;padding:12px 14px calc(28px + env(safe-area-inset-bottom))}
.mm-head{display:flex;align-items:center;gap:12px;padding:10px 4px 14px;border-bottom:1px solid var(--vk-border);margin-bottom:14px}
.mm-user{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none!important;color:var(--vk-text)!important}
.mm-av{width:48px;height:48px;min-width:48px;max-width:48px;flex:0 0 48px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;font-weight:700;font-size:16px}
.mm-av img{width:100%;height:100%;object-fit:cover}
.mm-col{display:flex;flex-direction:column;min-width:0}
.mm-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-sub{font-size:12px;color:var(--vk-muted)}
.mm-close{margin-left:auto;flex:0 0 36px;width:36px;height:36px;border:0;background:var(--fill);border-radius:50%;color:var(--vk-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mm-close:hover{background:var(--vk-border);color:var(--vk-text)}
.mm-close .ico{width:16px;height:16px}
.mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mm-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;background:var(--card);border:1px solid var(--vk-border);border-radius:14px;color:var(--vk-text)!important;text-decoration:none!important;font:600 11px/1.2 var(--font);cursor:pointer;transition:transform .1s,background .12s,border-color .12s;position:relative;min-width:0}
.mm-tile:active{transform:scale(.95);background:var(--fill)}
.mm-tile.is-on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)!important}
.mm-ico{position:relative;width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
.mm-ico .ico{width:20px;height:20px}
.mm-tile.is-on .mm-ico{background:var(--brand);color:#fff}
.mm-ico .badge-n{top:-5px;right:-7px;min-width:15px;height:15px;font-size:9px}
.mm-lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.mm-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mm-theme{background:var(--fill);border-color:transparent}
.mm-theme .mm-ico{background:var(--card);color:var(--vk-text)}
.mm-theme .ico-sun{display:none}
html[data-theme="dark"] .mm-theme .ico-sun{display:block}
html[data-theme="dark"] .mm-theme .ico-moon{display:none}
.mm-exit{background:var(--card);border-color:transparent;padding:0}
.mm-exit button{background:none;border:0;padding:12px 4px 10px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:7px;font:600 11px/1.2 var(--font);color:#d64545;cursor:pointer;border-radius:14px}
.mm-exit .mm-ico{background:rgba(214,69,69,.12);color:#d64545}
/* === end R96 mobile menu === */

/* кнопка внутри файловой зоны: 28px (была 31px дробная), кегль 12px */
.file-zone .btnpick{height:28px;padding:0 12px;display:inline-flex;align-items:center;font-size:12px}
/* подпись в зоне загрузки истории: 12px вместо 10.8px */
.story-drop-label small{font-size:12px}
/* v64: идентичный фикс по id + единая тап-цель иконных act-btn */
#story-drop-label small{font-size:12px}

/* ================= POLISH 10 (v65): финальная калибровка по шкале =================
   Контролы: 24 иконки / 28 поиск-чипы / 32 btn-sm / 36 кнопки-селекты-чаты / 41 формы
   Радиусы: 4 микро / 6 чипы / 8 карточки / 999 pill / 50% круг
   Отступы: 2/4/6/8/10/12/14/16/20 (+24/32 hero/empty); карточный ритм 12/16-16 */

.pl-create-input{height:32px;font:600 12px var(--font);padding:0 12px;border-radius:6px} /* = btn-sm */
.music-search-input{padding:0 12px}                                      /* индент 12 как всюду */                       /* = file-btn 32 */
.pv-actions .btn{height:32px;padding:0 10px}
.wall-form .row input[type=file]::file-selector-button,
.auth-field input[type=file]::file-selector-button{height:28px;padding:0 12px;font-size:12px} /* = btnpick */


.feed-tab{padding:8px 12px;gap:6px}
.video-meta,.market-info{padding:8px 10px;gap:4px}


.auth-inp{font-size:13px}                                                /* было 13.5 */
.row-pl{font-size:12px}                                                  /* был системный 13.33 */
.wave-inner{padding:20px 24px}                                           /* 22 -> 24 */
/* === end POLISH 10 === */

/* ================= POLISH 10b (v66): финальные три точки ================= */
/* R96: правила .menu-toggle удалены вместе с гамбургером */
/* === end POLISH 10b === */

/* =======================================================================
   POLISH 11 (v67) - аватарки людей КВАДРАТ (аутентично VK 2006-2008).
   Круглыми остаются только служебные элементы: точки онлайна/записи,
   круглые кнопки-действия, винил "Моей волны", медали достижений и
   пикер реакций. Сообщества - скруглённый квадрат 6/8 (не тронуты).
   Блок в конце файла перекрывает прежние border-radius:50% каскадом.
   ======================================================================= */
.avatar-box,.avatar-box img,
.post-av,.post-av.sm,.post-av.xs,
.comment-av,
.friend-card .av,.people-card .av,
.sg-av,
.room-av,.pv-ava,.pv-cava,
.online-ava,.online-ava img,.online-ava>span,
.guest-ava{border-radius:4px}
.people-search-form .people-input{padding:0 12px}    /* 13 -> 12 по шкале (специфичность 0-2-0) */
/* === end POLISH 11b === */

/* =======================================================================
   POLISH 11c (v68): жёсткое закрепление квадратных аватарок людей.
   !important перекрывает и инлайн-стили, и JS-генерируемую разметку.
   ======================================================================= */
.avatar-box,.avatar-box img,
.post-av,.post-av img,.post-av.sm,.post-av.sm img,.post-av.xs,.post-av.xs img,
.comment-av,.comment-av img,
.friend-card .av,.friend-card .av img,
.people-card .av,.people-card .av img,
.sg-av,.sg-av img,
.room-av,.room-av img,
.pv-ava,.pv-ava img,.pv-cava,.pv-cava img,
.pv-fav,.pv-fav img,
.online-ava,.online-ava img,.online-ava>span,
.guest-ava,.guest-ava img{border-radius:4px!important}
/* === end POLISH 11c === */

/* R8 FIX: кружки историй снова круглые — POLISH 11 задевал .sb-av
   групповым селектором и превращал истории в квадраты. */
.sb-av,.sb-av img,.sb-av .sb-plus{border-radius:50%}


/* ================= POLISH 12 (v69): финальный продакшн-свит =================
   1) Мобильная форма поста: инструменты одной строкой (селект справа),
      кнопка «Отправить» — отдельной строкой справа (убирает «лесенку»).
   2) Ссылки внутри пустых состояний — заметные (синий, 600).
   ======================================================================= */
@media(max-width:768px){
  .composer-foot{gap:6px}
  .vis-sel{max-width:130px}
  .composer-foot .btn{padding:7px 14px;font-size:12.5px}
}
.empty-hint a,.empty-hint a:visited{color:var(--vk-blue);font-weight:600}
.empty-hint a:hover{text-decoration:underline}
/* === end POLISH 12 === */

/* === POLISH 13 (v70) — единая система радиусов/высот: добивка разброса === */
/* 1) поповеры, цитаты, превью, бейджи -> 8px (шкала 4/6/8; круги и пилюли — только точки/счётчики) */
.react-picker,.repost-quote,.link-preview,.event-emoji,.event-hero-emoji,.voice-row,.online-count{border-radius:8px}
.mobile-bar a{border-radius:8px}
/* 3) поиск музыки: инпут по высоте кнопки в одном ряду (32) */
.music-search .music-search-input{height:32px}
.pv-audio .audio-row{padding:6px 8px}
/* === end POLISH 13 === */

/* POLISH 13b (v71) — file-btn: перебиваем .wall-form .row input[type=file]{height:41px} (0-2-1 -> 0-3-1) */
.wall-form .row label.file-btn input[type=file],
label.file-btn input[type=file]{height:100%;width:100%;min-height:0;padding:0;border:0;margin:0;border-radius:0;background:none;font:inherit}
/* === end POLISH 13b === */
/* страница: верхний/нижний отступ 18 -> 16 (только десктоп; мобильный 12 не трогаем) */
/* === end POLISH 14 === */

/* === POLISH 15 (v73) — глубокие страницы, формы создания, интерактивные состояния === */
/* 1. icon-picker: радио absolute без positioned-предка -> input разъезжался на всю ширину вьюпорта (hscroll 2104px на /events/new/) */
.ip-item{position:relative}
/* 2. формы создания (события/барахолка/сообщества/видео/беседа): кнопки в рост инпутов 41 */
.event-form .btn{height:41px}
/* 3. вход/регистрация: кнопка отправки в рост полей 41 */
.auth-field ~ .btn{height:41px}
/* 4. онлайн-точка в шапке диалога позиционировалась от вьюпорта (точка в углу экрана + hscroll 2px) */
.panel-h span:has(> .online-dot){position:relative}
/* 5. радиусы 14/16/20 -> 8: поисковые подсказки, карточки плейлистов, сторис, лайтбокс, поповер участников, карточка друга, герой события */
.search-suggest,.pl-card,.story-drop,.lightbox img,.room-members-pop,.friend-card,.event-hero-emoji,.story-viewer img,.story-upload-box{border-radius:8px}
/* 9. поля auth-field: вертикальный паддинг 11 -> 8 (высота 41 зафиксирована, вид не меняется) */
.auth-field input:not([type=file]):not([type=color]){padding-top:8px;padding-bottom:8px}
/* 10. строка «новый альбом» на фото: инпут 35 -> 41, кнопка в рост */
.album-create .auth-inp{height:41px;padding-top:8px;padding-bottom:8px}
.album-create .btn{height:41px}
/* 12. ховер бэк-линка (реакции не было) */
.back-link:hover{color:var(--brand-dark,#3d6a99)}
/* === end POLISH 15 === */

/* POLISH 15b (v74) - ссылки в шапках панелей: отклик ховера (глобальный a:hover{text-decoration:none}, строка ~1616, убил подчёркивание) */
.panel-h a:hover{text-decoration:underline}

/* === POLISH 16 (v75) — главная: композер остался только на стене, полоса историй === */
/* 1) подсказка в полосе историй — по вертикальному центру, без рваного верха */
.story-upload-hint-strip{align-self:center;max-width:300px;line-height:1.45}
/* 2) кнопка «Добавить» — приглушённое имя, акцент остаётся на плюсе */
.stories-strip .story-add .sb-name{color:var(--vk-muted)}
/* === end POLISH 16 === */

/* === POLISH 17 (v76) — у поста своя страница === */
/* 2) страница записи /post/<pk>/ — та же ширина, что лента */
.post-detail{max-width:640px;margin:0 auto}
/* 3) время в шапке поста = ссылка на страницу записи */
.post-time-link{color:var(--vk-muted)}
.post-time-link:hover{color:var(--vk-link);text-decoration:underline}
/* === end POLISH 17 === */

/* === POLISH 17b (v77) — тулбар автора поста в шкалу высот === */
/* edit/pin/delete были 23px (icon 14 + pad 4x2): фиксируем в 24, иконка по центру.
   R93: правило переехало к .post-menu (линия 255) — дубль удалён. */
/* === end POLISH 17b === */

/* === POLISH 18 (v78) — широкая колонка, форма на главной, О проекте, эмодзи, медиатека, статус, POST-выход === */
/* 1) каркас: десктоп шире (1080 -> 1280), поиск и сайдбар пропорционально */

/* 2) лента: правая колонка 240 -> 280, зазор 14 -> 16 */
/* 3) страница записи — той же ширины, что контент */
.post-detail{max-width:760px}
/* 4) «Выход» — POST-формы, стилизованы как соседние ссылки */
.top-logout{display:inline-flex;margin:0}
.top-logout button{background:none;border:0;padding:10px 11px;font:600 13px var(--font);cursor:pointer;color:#fff;border-radius:4px;transition:background .13s}
.top-logout button:hover{background:rgba(255,255,255,.16)}
.btn svg{flex-shrink:0}
.act-btn svg{flex-shrink:0}
.file-btn svg{flex-shrink:0}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:0;padding:0;margin:0;border-radius:8px;color:var(--vk-link);cursor:pointer;transition:background .12s,color .12s}
.tool-btn svg{flex-shrink:0;width:17px;height:17px}
.tool-btn:hover{background:var(--fill);color:var(--brand)}

/* R92: компактный футер композера в ОДНУ строку */
.composer-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.cf-spacer{flex:1 1 auto;min-width:0}
.vis-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0}
.vis-sel{
  height:30px;padding:0 8px;border:1px solid var(--vk-border);border-radius:999px;background:var(--card);
  font:600 12px var(--font);color:var(--vk-text);max-width:190px;cursor:pointer;
}
.vis-sel:focus{outline:none;border-color:var(--vk-blue)}
.c-emoji{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:4px;background:none;color:var(--vk-muted);cursor:pointer;flex-shrink:0}
.c-emoji:hover{color:var(--brand);background:var(--fill)}
/* 6) пикер эмодзи */
.vd-emoji-pop{position:fixed;z-index:1300;width:312px;overflow:auto;background:var(--card);border:1px solid var(--vk-border);border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.28);padding:10px 12px;display:none}
.vd-emoji-pop.show{display:block}
.ve-hd{font-size:11px;font-weight:700;color:var(--vk-muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 2px 4px}
.ve-hd:first-child{margin-top:0}
.ve-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.ve-item{width:32px;height:32px;padding:0;border:0;border-radius:4px;background:none;font-size:19px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ve-item:hover{background:var(--fill)}
/* 7) медиатека: модалка выбора файлов */
.vd-media-modal{position:fixed;inset:0;z-index:1400;background:rgba(10,16,26,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.vd-media-modal[hidden]{display:none}
.vdm-box{width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--vk-border);border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.4);overflow:hidden}
.vdm-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--vk-border)}
.vdm-title{font-weight:700;font-size:14px}
.vdm-tabs{display:flex;gap:2px;margin-left:auto}
.vdm-tab{border:0;background:none;padding:7px 11px;border-radius:4px;font:inherit;font-size:12.5px;font-weight:600;color:var(--vk-muted);cursor:pointer}
.vdm-tab:hover{background:var(--fill);color:var(--vk-text)}
.vdm-tab.is-on{background:var(--brand);color:#fff}
.vdm-x{border:0;background:none;color:var(--vk-muted);cursor:pointer;padding:6px;display:inline-flex;border-radius:4px}
.vdm-x:hover{background:var(--fill);color:var(--vk-text)}
.vdm-body{overflow:auto;padding:14px}
.vdm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.vdm-cell{position:relative;padding:0;border:1px solid var(--vk-border);border-radius:6px;background:var(--fill);aspect-ratio:1;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vdm-cell img{width:100%;height:100%;object-fit:cover;display:block}
.vdm-cell.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.vdm-cap{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.vdm-tick{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.vdm-vico{color:var(--vk-muted)}
.vdm-empty{color:var(--vk-muted);font-size:13px;text-align:center;padding:24px 8px}
.vdm-drop{display:flex;align-items:center;justify-content:center;min-height:160px;border:1px dashed var(--vk-border);border-radius:8px;cursor:pointer;text-align:center;color:var(--vk-muted);font-size:13.5px;line-height:1.5}
.vdm-drop:hover{border-color:var(--brand);color:var(--vk-text)}
.vdm-drop input[type=file]{display:none}
.vdm-upnote{margin-top:8px;font-size:12.5px;color:var(--vk-muted);text-align:center}
.vdm-foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--vk-border)}
.vdm-hint{margin-right:auto;font-size:12.5px;color:var(--vk-muted)}
/* 8) выбранные в форме стены миниатюры */
.vd-picked{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.vd-picked:empty{display:none}
.vd-thumb{position:relative;width:72px;height:72px;border-radius:6px;overflow:hidden;border:1px solid var(--vk-border);display:inline-flex;align-items:center;justify-content:center;background:var(--fill)}
/* R92: кнопка «Сделать обложкой» на фото-чипе; чип-обложка помечается */
.vd-cover-btn{position:absolute;left:2px;top:2px;width:18px;height:18px;border:0;border-radius:999px;background:rgba(12,18,28,.72);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.vd-cover-btn:hover{background:rgba(12,18,28,.92)}
.vd-thumb.is-cover{border-color:var(--brand,#4a76a8);box-shadow:inset 0 0 0 1px var(--brand,#4a76a8)}
.vd-thumb.is-cover::after{content:"Обложка";position:absolute;left:0;right:0;bottom:0;background:var(--brand,#4a76a8);color:#fff;font-size:8.5px;font-weight:700;line-height:1.5;text-align:center;letter-spacing:.02em}
.vd-thumb img{width:100%;height:100%;object-fit:cover}
.vd-thumb.is-video{flex-direction:column;color:var(--vk-muted);font-size:10px;gap:2px;padding:4px}
.vd-thumb-name{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-thumb-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:999px;background:rgba(12,18,28,.72);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vd-thumb-x:hover{background:rgba(12,18,28,.92)}
/* 9) инлайн-статус */
.pv-status-editable{cursor:text}
.pv-status-editable:hover{text-decoration:underline dotted var(--vk-muted);text-underline-offset:3px}
.pv-status-empty{color:var(--vk-muted);cursor:text;font-style:italic}
.pv-status .pv-status-input{width:100%;max-width:420px;font:inherit;color:inherit;background:var(--card);border:1px solid var(--brand);border-radius:4px;padding:6px 10px;outline:none}
/* 10) видео в посте */
.post-videos{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}
.post-video{width:100%;max-height:520px;border-radius:6px;background:#000;outline:none;display:block}
/* 11) вложения в переписке */
.bubble-img{max-width:260px;max-height:320px;border-radius:8px;display:block;margin-bottom:4px;cursor:pointer}
.bubble-video{max-width:320px;border-radius:8px;display:block;margin-bottom:4px;background:#000;outline:none}
.chat-attach{display:flex;align-items:center;gap:10px;margin:8px 16px 0;padding:8px 10px;border:1px solid var(--vk-border);border-radius:6px;background:var(--card)}
.chat-attach[hidden]{display:none}
.ca-thumb{width:44px;height:44px;border-radius:4px;overflow:hidden;background:var(--fill);display:inline-flex;align-items:center;justify-content:center;color:var(--vk-muted);flex-shrink:0}
.ca-thumb img{width:100%;height:100%;object-fit:cover}
.ca-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-x{border:0;background:none;color:var(--vk-muted);cursor:pointer;padding:6px;display:inline-flex;border-radius:4px;flex-shrink:0}
.attach-x:hover{background:var(--fill);color:var(--vk-text)}
/* 12) о проекте: гостевая обёртка шире стандартной auth */
.wrap.auth:has(.about-page){max-width:820px;margin-top:34px}
.wrap.auth:has(.help-page){max-width:820px;margin-top:34px}
.about-page{max-width:760px;margin:0 auto}
.about-hero .about-h{margin:2px 0 8px;font-size:22px;letter-spacing:-.01em}
.about-lead{margin:0;color:var(--vk-text);line-height:1.55;font-size:14px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
.about-card h2{font-size:15px;margin:10px 0 6px}
.about-card p{margin:0;color:var(--vk-muted);font-size:12.5px;line-height:1.55}
.about-ico{display:inline-flex;width:36px;height:36px;border-radius:8px;background:var(--brand-tint);color:var(--brand);align-items:center;justify-content:center}
.about-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--vk-text);font-size:13px;line-height:1.55}
.about-list b{color:var(--vk-text)}
.about-foot p{margin:0;color:var(--vk-muted);font-size:13px;line-height:1.6}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .ve-grid{grid-template-columns:repeat(7,1fr)}
  .vdm-box{max-height:92vh}
  .vdm-tabs{flex-wrap:wrap}
}
/* === end POLISH 18 === */

/* === POLISH 19 (v79) — правовые страницы, Контакты, шапка гостя; фикс мобильной сетки ленты === */
/* 1) фикс двух битых селекторов v78 (потерян [h) — [hidden] снова работает */
/* 2) правовые страницы: та же обёртка, что «О проекте» */
.legal-body h2{font-size:15px;margin:18px 0 6px}
.legal-body h3{font-size:13.5px;margin:14px 0 4px}
.legal-body p{margin:0 0 8px;color:var(--vk-text);line-height:1.6;font-size:13.5px}
.legal-body p a{color:var(--vk-link)}
.legal-body ul{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:var(--vk-text);font-size:13.5px;line-height:1.55}
.legal-upd{color:var(--vk-muted);font-size:12.5px;margin-top:14px}
.legal-rek{margin:10px 0 0;padding:12px 14px;border:1px solid var(--vk-border);border-radius:6px;background:var(--card)}
.legal-rek div{display:flex;gap:10px;padding:3px 0;font-size:13px;line-height:1.5}
.legal-rek b{flex:0 0 190px;color:var(--vk-muted);font-weight:600}
.legal-rek span{flex:1;min-width:0;color:var(--vk-text)}
@media(max-width:600px){.legal-rek b{flex-basis:132px}}
/* === end POLISH 19 === */

/* === POLISH 19b (v80) — навигация в лестнице высот: ряды 36px ровно === */
/* десктоп: 8+8+20=36; мобильные паддинги (9/10px) сохранены */
@media(min-width:761px){
  .top-nav .logout-form button{padding:8px 11px;line-height:20px}
  .side .logout-form button,.side-logout button{padding:8px 12px;line-height:20px}
}
/* === end POLISH 19b === */

/* === POLISH 20 (v82) — единая левая привязка контента; сайдбар в экране; опрос с процентами; треки в записи === */
/* Единая левая привязка: страница записи и текстовые страницы — по левому краю колонки ленты */
.post-detail{margin:0}
.about-page{margin:0}
/* Сайдбар: всегда в пределах экрана, внутренний тонкий скролл (десктоп) */
@media(min-width:761px){
  .side::-webkit-scrollbar{width:6px}
  .side::-webkit-scrollbar-thumb{background:var(--vk-border);border-radius:3px}
  .side::-webkit-scrollbar-track{background:transparent}
}
.poll-pct{position:relative;z-index:1;font-size:12px;font-weight:700;color:var(--vk-muted);min-width:40px;text-align:right}
.poll-check{position:relative;z-index:1;display:none;width:16px;height:16px;color:var(--vk-blue);flex-shrink:0}
.poll-opt.mine .poll-check{display:inline-flex}
.poll-opt.mine .poll-btn{border-color:var(--vk-blue);box-shadow:inset 0 0 0 1px var(--vk-blue)}
.poll-total{margin-top:8px;font-size:12px;color:var(--vk-muted)}
.poll-box.voted .poll-btn{cursor:default}
.poll-box.voted .poll-btn:hover{border-color:var(--vk-border);background:var(--card)}
/* Треки, прикреплённые к записи (переиспользуют глобальный плеер) */
.post-tracks{margin-top:10px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line-soft);padding-top:8px}
.post-tracks .audio-row{border:1px solid var(--vk-border);border-radius:6px;padding:4px 8px;background:var(--card)}
.post-tracks .audio-row:hover{background:var(--tint-hover)}
/* Выбранные треки в композере */
.vd-picked-audio{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.vd-athumb{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--fill);border-radius:6px;font-size:12px;font-weight:600;color:var(--vk-text);max-width:100%}
.vd-athumb svg{flex-shrink:0;color:var(--vk-blue)}
.vd-thumb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
/* === end POLISH 20 === */

/* === POLISH 21 (v83) — выравнивание действий, сайдбар группами, шестерёнка профиля, аватар на странице, настройки по вкладкам, Люди+Онлайн === */
/* 1. Сайдбар (десктоп): компактные ряды 32 (лестница), группы-разделители, мини-аватар «Моя страница» */
@media (min-width:761px){
  .side-logout button{padding:6px 12px}
}
/* 2. Шестерёнка настроек рядом с именем на своей странице */
.pv-title{align-items:center}
.pv-gear{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid var(--vk-border);color:var(--vk-muted);background:var(--card);flex-shrink:0}
.pv-gear:hover{color:var(--vk-link);background:var(--fill);text-decoration:none}
.pv-gear .ico{display:block}
/* 3. Смена фотографии прямо на странице профиля (оверлей снизу, как ВК) */
.pv-photo-edit{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:26px 0 8px;background:linear-gradient(transparent,rgba(2,18,38,.72));color:#fff;font-size:12px;font-weight:600;cursor:pointer;opacity:0;transition:opacity .15s ease;border-radius:0 0 4px 4px}
.pv-photo:hover .pv-photo-edit,.pv-photo:focus-within .pv-photo-edit{opacity:1}
.pv-photo-edit input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pv-photo-edit .ico{color:#fff;flex-shrink:0}
@media (hover:none){.pv-photo-edit{opacity:1}}
/* 4. Настройки: сегмент-вкладки, панели, чёрный список */
.set-tabs{display:flex;gap:2px;background:var(--fill);border-radius:8px;padding:3px;margin-bottom:14px}
.set-tabs button{flex:1;border:0;background:none;padding:7px 8px;border-radius:6px;font:600 13px var(--font);color:var(--vk-muted);cursor:pointer;white-space:nowrap;transition:background .13s,color .13s}
.set-tabs button.on{background:var(--card);color:var(--vk-text);border-color:var(--vk-border)}  /* R92: без тени */
.set-pane[hidden]{display:none}
.set-block-h{font-size:12px;font-weight:700;color:var(--vk-muted);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 8px}
.bl-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.bl-row:last-child{border-bottom:0}
.bl-row .post-av{width:32px;height:32px;font-size:13px;flex-shrink:0}
.bl-row .bl-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 5. Люди: сегмент Все/Онлайн в шапке панели */
.panel-h .seg{margin-left:auto}
/* 6. Мобильные: вкладки настроек со скроллом, шестерёнка крупнее под палец */
@media (max-width:760px){
  .set-tabs{overflow-x:auto}
  .set-tabs button{flex:1 0 auto;padding:7px 12px}
  .pv-gear{width:32px;height:32px}
  .panel-h .seg a{padding:5px 12px}
}
/* === end POLISH 21 === */

/* === POLISH 22 (v84) — ховер действий без подчёркивания, обложка профиля, Друзья списком (поиск+фильтры), Ответы с иконками, скрытие гостей === */
/* 1. Единый ховер всех действий поста: цветовой отклик (было: подчёркивание только у button, у span ничего) */
.post-acts .act-btn{transition:color .12s ease}
.post-acts .act-btn:hover{color:var(--brand-dark,#3d6a99);text-decoration:none}
/* 2. Сегмент-переключатель (общий): заголовки панелей и фильтры друзей */
.seg{display:inline-flex;gap:2px;background:var(--fill);border-radius:8px;padding:3px}
.seg a{padding:4px 12px;border-radius:6px;font:600 12px var(--font);color:var(--vk-muted);text-decoration:none;transition:background .12s,color .12s}
.seg a.on{background:var(--card);color:var(--vk-text);border:1px solid var(--vk-border)}  /* R92: без тени */
/* 3. Обложка профиля: баннер над колонками, управление — у себя */
.pv-cover{position:relative;height:200px;border-radius:8px;overflow:hidden;margin:0 0 12px;border:1px solid var(--vk-border);background:var(--fill)}
.pv-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pv-cover-acts{position:absolute;right:10px;bottom:10px;display:inline-flex;gap:6px}
.pv-cover-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;background:rgba(8,24,44,.55);color:#fff;font:600 12px var(--font);cursor:pointer;border:0;text-decoration:none}
.pv-cover-btn:hover{background:rgba(8,24,44,.78);text-decoration:none}
.pv-cover-btn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pv-cover-btn .ico{color:#fff;flex-shrink:0}
/* 4. Друзья: строка фильтров + компактные строки (как в ВК) вместо крупных плиток */
.friends-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.friends-search{display:flex;gap:6px;flex:1;min-width:200px}
.friends-search input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--vk-border);border-radius:6px;font:13px var(--font);background:var(--card);color:var(--vk-text)}
.friends-search select{height:32px;max-width:150px;border:1px solid var(--vk-border);border-radius:6px;background:var(--card);color:var(--vk-text);font:13px var(--font);padding:0 6px;cursor:pointer}
.friends-list{display:flex;flex-direction:column}
.friend-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;text-decoration:none;transition:background .12s}
.friend-row:hover{background:var(--fill);text-decoration:none}
.friend-row .av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--vk-blue);flex-shrink:0}
.friend-row .av img{width:100%;height:100%;object-fit:cover}
.friend-row .av .online-dot{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--vk-green);border:2px solid var(--card)}
.friend-row .fr-info{display:flex;flex-direction:column;min-width:0}
.friend-row .nm{font-size:13px;font-weight:600;color:var(--vk-link)}
.friend-row .meta{font-size:12px;color:var(--vk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 5. Ответы: свой вид (не как Сообщения) — иконка события в цветном круге */
.ntf-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);text-decoration:none;transition:background .12s}
.ntf-row:last-child{border-bottom:0}
.ntf-row:hover{background:var(--fill);text-decoration:none}
.ntf-row.is-unread{background:#eef4fb}
.ntf-row.is-unread:hover{background:var(--tint-hover)}
.ntf-ico{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ntf-ico.k-like{background:#fde9ec;color:#e64646}
.ntf-ico.k-comment{background:#e8f0fa;color:var(--vk-blue)}
.ntf-ico.k-friend{background:#e6f6ec;color:#2e9e5b}
.ntf-ico.k-room{background:#e8f0fa;color:var(--vk-blue)}
.ntf-ico.k-wall{background:#f2eee6;color:#9c8a5a}
.ntf-body{display:flex;flex-direction:column;min-width:0;flex:1}
.ntf-text{font-size:13px;color:var(--vk-text);line-height:1.4}
.ntf-time{font-size:12px;color:var(--vk-muted);margin-top:2px}
.ntf-dot{width:8px;height:8px;border-radius:50%;background:var(--vk-blue);flex-shrink:0}
/* 6. Гости: скрытие записи крестиком */
.guest-hide{margin-left:2px}
.guest-hide button{background:none;border:0;color:var(--vk-muted);cursor:pointer;padding:6px;border-radius:6px;display:inline-flex;transition:background .12s,color .12s}
.guest-hide button:hover{color:var(--vk-red);background:var(--danger-soft)}
/* 7. Мобильные: обложка ниже, фильтры переносятся */
@media (max-width:760px){
  .pv-cover{height:120px}
  .pv-cover-acts{right:8px;bottom:8px}
  .friends-bar{padding:8px 10px}
}
/* === end POLISH 22 === */

/* === POLISH 23 (v85) — современные тосты справа вверху (все сообщения), цитирование постов/комментариев,
   обрезка фото/обложки с зумом и рекомендациями размера, выбор аватара/обложки из загруженных,
   статус с подтверждением, мобильный профиль: аватар-круг на обложке, действия поста на одной линии === */

/* фолбэк без JS: серверные сообщения остаются видимым компактным стеком */
.vd-mstack{position:fixed;top:14px;right:14px;z-index:1300;display:flex;flex-direction:column;gap:8px;max-width:340px}
.vd-m{background:var(--card);border:1px solid var(--vk-border);border-left:3px solid var(--brand,#4a76a8);border-radius:10px;box-shadow:0 12px 34px rgba(6,20,40,.22);padding:10px 12px;font-size:13px;color:var(--vk-text)}
/* R89: цвет полосы — по тегу Django-сообщения (success/error/info) */
.vd-m-success{border-left-color:#2e7d32}
.vd-m-error{border-left-color:#c63535}
@media(max-width:760px){
  .vd-mstack{left:10px;right:10px;max-width:none}
}


/* 3. Цитирование: рендер [quote=Имя]текст[/quote] + чип над формой + кнопка у комментария */
.vd-quote{margin:8px 0;padding:8px 12px;background:var(--fill);border-left:3px solid var(--brand,#4a76a8);border-radius:6px;color:var(--vk-muted);font-size:13px}
.vd-quote .vd-quote-n{display:block;font-size:12px;font-weight:700;color:var(--brand,#4a76a8);margin-bottom:2px}
html[data-theme="dark"] .vd-quote{background:rgba(255,255,255,.05)}
.quote-note{display:flex;align-items:center;gap:6px;width:100%;padding:5px 10px;background:var(--brand-tint);border-radius:8px;font-size:12px;color:var(--vk-muted);margin-bottom:2px;min-width:0}
.quote-note b{color:var(--vk-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}
.quote-note .qn-x{flex:0 0 auto;border:0;background:none;padding:3px;border-radius:4px;color:var(--vk-muted);cursor:pointer;display:inline-flex}
.quote-note .qn-x:hover{color:var(--vk-text);background:rgba(0,0,0,.06)}
.c-quote{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 5px;line-height:18px;border:0;background:none;font:600 12px var(--font);color:var(--vk-muted);cursor:pointer;border-radius:4px}
.c-quote:hover{color:var(--brand,#4a76a8)}
.c-quote .ico{width:12px;height:12px}

/* 4. Статус: поповер с подтверждением (Сохранить/Отмена/Убрать) */
.pv-status{position:relative}
.pv-status-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:320px;max-width:calc(100vw - 40px);background:var(--card);border:1px solid var(--vk-border);border-radius:12px;box-shadow:var(--shadow-pop,0 6px 24px rgba(23,25,28,.14)),0 14px 44px rgba(6,20,40,.18);padding:12px;display:none;text-align:left}
.pv-status-pop.open{display:block;animation:vd-pop .16s ease}
@keyframes vd-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pv-status-pop .pv-status-input{width:100%;max-width:none;font:13px var(--font);color:var(--vk-text);background:var(--fill);border:1px solid transparent;border-radius:8px;padding:9px 12px;outline:none;transition:border-color .12s,background .12s}
.pv-status-pop .pv-status-input:focus{border-color:var(--brand,#4a76a8);background:var(--card)}
.pv-status-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.pv-status-cnt{font-size:12px;color:var(--vk-muted);margin-right:auto}
.pv-status-pop .btn{height:30px;padding:0 12px;font-size:12px}
.pv-status-pop .pv-st-del{border:0;background:none;font:600 12px var(--font);color:var(--vk-muted);cursor:pointer;padding:0 4px;height:30px}
.pv-status-pop .pv-st-del:hover{color:var(--vk-red,#c0392b)}
html[data-theme="dark"] .pv-status-pop{background:#25272c}

/* 5. Кроп-модалка (аватар/обложка): зум, перетаскивание, рекомендации размера */
.vdc-back{position:fixed;inset:0;z-index:1400;background:rgba(4,12,24,.62);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .18s ease}
.vdc-back.open{opacity:1}
.vdc-box{width:400px;max-width:100%;max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border:1px solid var(--vk-border);border-radius:14px;box-shadow:0 24px 70px rgba(2,10,26,.5);transform:translateY(8px) scale(.985);transition:transform .18s ease}
.vdc-back.open .vdc-box{transform:none}
.vdc-head{display:flex;align-items:center;gap:8px;padding:14px 16px 4px}
.vdc-title{font-size:15px;font-weight:700;color:var(--vk-text)}
.vdc-x{margin-left:auto;border:0;background:none;color:var(--vk-muted);cursor:pointer;width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.vdc-x:hover{background:var(--fill);color:var(--vk-text)}
.vdc-hint{padding:2px 16px 10px;font-size:12px;color:var(--vk-muted);line-height:1.45}
.vdc-stage{padding:0 16px}
.vdc-view{position:relative;margin:0 auto;overflow:hidden;touch-action:none;cursor:grab;background:#0b1522;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vdc-view.dragging{cursor:grabbing}
.vdc-view img{position:absolute;top:0;left:0;user-select:none;-webkit-user-drag:none;max-width:none;will-change:transform}
.vdc-foot{display:flex;align-items:center;gap:10px;padding:12px 16px 4px}
.vdc-zoomlbl{font-size:12px;color:var(--vk-muted);flex:0 0 auto}
.vdc-foot input[type=range]{flex:1;accent-color:var(--brand,#4a76a8);min-width:80px}
.vdc-reset{border:0;background:none;font:600 12px var(--font);color:var(--vk-muted);cursor:pointer;padding:4px 8px;border-radius:4px;flex:0 0 auto}
.vdc-reset:hover{color:var(--vk-text);background:var(--fill)}
.vdc-btns{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px 16px}
.vdc-btns .btn{min-width:96px}
html[data-theme="dark"] .vdc-box{background:#25272c}
@media(max-width:760px){.vdc-back{padding:10px}.vdc-box{width:100%}}

/* 6. Аватар/обложка: «Из загруженных» + подсказка размера */
.pv-photo-tools{display:flex;align-items:center;gap:8px;margin-top:8px}
.pv-lib-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:6px;border:1px solid var(--vk-border);background:var(--card);color:var(--vk-muted);font:600 12px var(--font);cursor:pointer;transition:color .12s,border-color .12s}
.pv-lib-btn:hover{color:var(--brand,#4a76a8);border-color:var(--brand,#4a76a8)}
.pv-lib-btn .ico{width:13px;height:13px}
.pv-size-hint{font-size:12px;color:var(--vk-muted);margin-left:auto;white-space:nowrap}
.pv-cover-acts{flex-wrap:wrap;max-width:calc(100% - 20px)}

/* 7. Мобильный профиль: аватар-круг на обложке, порядок как в современных соцсетях */
@media(max-width:760px){
  .pv-left{display:contents}
  .pv-photo-panel{order:-3;margin:-58px 0 6px;background:transparent;border:0;box-shadow:none;padding:0}
  .pv-photo{width:112px;height:112px;aspect-ratio:auto;max-width:none;border-radius:50%;border:4px solid var(--vk-bg,#fff);margin:0 0 0 12px;font-size:30px}
  .pv-photo-edit{border-radius:0 0 60px 60px;padding:16px 0 6px;font-size:11px}
  .pv-photo-tools{padding:8px 12px 0}
  /* кнопки обложки — в верхний правый угол: низ обложки занят кругом аватара */
  .pv-cover-acts{top:10px;bottom:auto}
  .pv-right{order:-2}
}

/* === POLISH 23b (v86) — кэш-бамп для правок мобильных отступов в блоке v85 === */

/* === POLISH 23b (v86) — ряд инструментов фото в узкой левой колонке (210px):
   кнопка не переносит текст, подсказка уходит на вторую строку === */
.pv-photo-tools{flex-wrap:wrap;row-gap:4px}
.pv-lib-btn{white-space:nowrap}

/* ===== POLISH 24 (v87): цитаты и многострочные комментарии ===== */
.c-tx{white-space:pre-wrap;word-break:break-word}
.vd-quote{white-space:pre-wrap;word-break:break-word}
.comment-body .vd-quote{background:rgba(0,0,0,.05)}
html[data-theme="dark"] .comment-body .vd-quote{background:rgba(255,255,255,.08)}

/* ================= POLISH 25 (v88): цитата вставляется в поле комментария =================
   «Цитата» пишет в textarea «> Имя Пишет: / > текст» — видно и редактируемо;
   чип quote-note убран (цитирование больше не выглядит как «Ответ»).
   Поле многострочное с авторостом (32→140), кнопки выровнены по низу. */
.comment-form textarea[name=text]{
  flex:1;min-width:0;min-height:32px;max-height:140px;border:1px solid var(--vk-border);background:var(--card);
  border-radius:20px;padding:7px 14px;font:13px/1.35 var(--font);resize:none;overflow-y:auto;display:block;
}
.comment-form textarea[name=text]:focus{outline:none;border-color:var(--brand);background:var(--card)}
/* R94: круглая кнопка отправки вместо «OK» (уровень Telegram/VK) */
.c-send{align-self:flex-end;width:36px;height:36px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:filter .12s,transform .12s}
.c-send:hover{filter:brightness(.92)}
.c-send:active{transform:scale(.95)}

/* ===== v89: редактор опроса в композере ===== */
.poll-editor{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px;padding:12px;background:var(--fill);border:1px solid var(--line);border-radius:14px}
.poll-editor[hidden]{display:none}
.poll-editor .pe-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.poll-editor .pe-head .pe-t{font-weight:700;font-size:13px;color:var(--vk-text)}
.poll-editor .pe-x{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--vk-muted);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.poll-editor .pe-x:hover{background:var(--card);color:var(--vk-text)}
.poll-editor input{width:100%;height:38px;padding:0 12px;box-sizing:border-box;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--vk-text);font-size:14px;font-family:inherit}
.poll-editor input::placeholder{color:var(--vk-muted)}
.poll-editor input:focus{outline:none;border-color:var(--brand)}
.poll-trigger.active{color:var(--brand-dark)}

/* R67: удаление сообщения — иконка в пилюле действий (на уровне строки времени) */
.bubble .msg-del{display:inline-flex;margin:0}
.bubble .msg-del button{background:none;border:0;padding:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--vk-muted);cursor:pointer;transition:background .15s,color .15s}
.bubble .msg-del button:hover{color:#e64646;background:rgba(230,70,70,.1)}
.chip-del{display:inline-block;margin-left:3px}
.chip-del button{background:none;border:0;padding:0 1px;font:700 12px/1 Tahoma,sans-serif;color:var(--vk-muted);cursor:pointer;vertical-align:middle}
.chip-del button:hover{color:#e64646}

/* ============ v92 (POLISH 30): композер без дублей, граффити, счётчик символов, видеокружки, карьера ============ */
/* 1) Глобальное правило [hidden]{display:none!important} на месте (ложная тревога консоли — селекторы целы) */
/* 2) Счётчик символов у длинных полей */
.vd-char-counter{display:block;text-align:right;font-size:11.5px;color:var(--vk-muted);margin:4px 2px 0;user-select:none}
.vd-char-counter.near{color:#e64646}
/* 3) Граффити: модалка-холст */
.graffiti-modal{position:fixed;inset:0;z-index:1500;background:rgba(10,16,26,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.graffiti-modal[hidden]{display:none!important}
.gr-box{width:min(860px,96vw);max-height:96vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.35);display:flex;flex-direction:column}
.gr-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.gr-title{font-weight:700;font-size:14px;color:var(--vk-text)}
.gr-x{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--vk-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.gr-x:hover{background:var(--fill);color:var(--vk-text)}
.gr-body{padding:12px 16px}
.gr-canvas{width:100%;display:block;background:#fff;border:1px solid var(--line);border-radius:12px;touch-action:none;cursor:crosshair}
.gr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.gr-swatches{display:inline-flex;gap:6px;flex-wrap:wrap}
.gr-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.gr-swatch.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-tint)}
.gr-color-inp{width:36px;height:30px;border:1px solid var(--line2);border-radius:8px;background:var(--fill);padding:2px;cursor:pointer}
.gr-size-wrap{display:inline-flex;align-items:center;gap:8px;color:var(--vk-muted);font-size:12px}
.gr-size{width:110px;accent-color:var(--brand)}
.gr-size-val{min-width:20px;text-align:right;color:var(--vk-text)}
.gr-btn{height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:9px;background:var(--fill);color:var(--vk-text);font:600 12px var(--font);cursor:pointer}
.gr-btn:hover{background:var(--card)}
.gr-btn.on{border-color:var(--brand);color:var(--brand)}
.gr-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.gr-hint{margin-right:auto;font-size:12px;color:var(--vk-muted)}
/* 4) Загрузчики: зона выбора фото тянется в ряду (Мои фото) */
.file-zone.grow{flex:1;min-width:0}
.wall-form .row .file-zone{display:block}
/* 5) Видеокружки в диалогах (как в Telegram) */
.bubble-circle-wrap{position:relative;display:inline-block;margin:2px 0}
video.bubble-circle{width:190px;height:190px;max-width:60vw;border-radius:50%;object-fit:cover;display:block;cursor:pointer;background:#000;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.circle-dur{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font:11px/1 var(--font);padding:3px 8px;border-radius:10px;pointer-events:none}
.circle-rec{display:flex;align-items:center;gap:12px;margin:8px 0;padding:10px 12px;background:var(--fill);border-radius:14px}
.circle-prev{position:relative;width:72px;height:72px;flex:none}
.circle-prev video{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;background:#000}
.circle-prev .rec-dot{position:absolute;top:-2px;right:-2px}
.circle-rec-info{font-size:13px;color:var(--vk-text);line-height:1.45}
.circle-rec-info small{color:var(--vk-muted)}
/* 6) Аватар профиля кликабелен (курсор задаёт JS при наличии img) */
.pv-photo{cursor:pointer}
/* 7) Карьера: строки «Место работы/Должность» наследуют .pv-row — новых правил не требуется */

/* ============ v93 (POLISH 30-fix): восстановлены селекторы [hidden], повреждённые правкой прошлых сессий
   (.lightbox, глобальный [hidden], .pv-overlay, .graffiti-modal) — без изменения внешнего вида, кэш-бамп ?v=93 ============ */

/* ============ v94 (POLISH 31): граффити всегда в экране, звук «uh-oh» (ICQ-наследие),
   лендинг-иконки по центру, дата запуска в «О проекте», чат: звук + кнопка «вниз» + ссылки ============ */
/* 1) Лендинг (R85): hero-auth — карточка входа на полной-hero главной; feats-чипы удалены владельцем */
/* 2) Граффити: холст подгоняется JS-ом (graffiti.js fit()), здесь — страховки:
      бокс не выше окна, внутренний скролл не уводит панель за экран, страница под модалкой блокируется */
.gr-box{max-height:94vh;overscroll-behavior:contain}
body.vd-lock{overflow:hidden}
/* 3) О проекте: бейдж официальной даты запуска */
.about-since{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0;padding:7px 14px;border-radius:999px;background:var(--brand-tint);color:var(--brand);font-weight:600;font-size:12.5px;line-height:1}
.about-since .ico{width:14px;height:14px}
/* 4) Чаты: переключатель звука, кнопка «Новые сообщения», ссылки в сообщениях */
.snd-toggle .snd-off{display:none}
.snd-toggle.off .snd-on{display:none}
.snd-toggle.off .snd-off{display:inline-block}
.snd-toggle.off{color:var(--vk-muted)}
.chat-jump{position:sticky;bottom:10px;align-self:center;margin-top:-34px;z-index:6;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--card);color:var(--vk-text);border-radius:999px;padding:8px 14px;font:600 12px var(--font);cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.chat-jump:hover{background:var(--fill)}
.chat-jump .cj-n{background:var(--brand);color:#fff;border-radius:9px;padding:1px 7px;font-size:11px;line-height:1.5}
.bubble a{color:var(--vk-link);text-decoration:underline;word-break:break-word}
/* === end v94 === */

/* ============ v95 (POLISH 32): граффити — скроллбар внутри модалки физически невозможен.
   Диагноз живым браузером: fit() брал clientWidth тела ВМЕСТЕ с паддингами (32px) ->
   холст шире контента -> горизонтальный скроллбар в .gr-box (замер: +16px на 1920×1080
   и 390×844). Корневой фикс в graffiti.js (content-box + итеративная самокоррекция),
   здесь — защита в глубину: ============ */
/* 1) скроллбар внутри бокса невозможен: JS-самокоррекция работает и с overflow:hidden
      (scrollHeight/scrollWidth измеряются), а полоса прокрутки не рисуется никогда */
.gr-box{overflow:hidden}
/* 2) высота от модалки (position:fixed inset:0 = реальный видимый экран), а не от vh —
      мобильные URL-бары (vh-квирки iOS/Android) больше не влияют */
.gr-box{max-height:100%}
/* 3) ширина от контейнера, а не 96vw: 96vw + 32px паддинга модалки вылезали за экран
      при ширине окна < 800px (горизонтальное переполнение на телефонах) */
.gr-box{width:min(860px,100%)}
/* 4) сама модалка ничего не прокручивает — страховка от любого переполнения */
.graffiti-modal{overflow:hidden}
/* 5) iOS-надёжная блокировка фона: overflow:hidden на body iOS не останавливает тач-скролл,
      position:fixed останавливает; позицию скролла сохраняет/возвращает graffiti.js */
body.vd-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html.vd-lock{overflow:hidden}
/* === end v95 === */

/* ================= TASK 37 (v96): блоки профиля «Место работы»/«Образование», короткий адрес ================= */
.pv-work{display:flex;align-items:flex-start;gap:10px}
.pv-wico{flex:0 0 34px;width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(74,118,168,.12);color:#4a76a8}
html[data-theme="dark"] .pv-wico{background:rgba(120,160,210,.14);color:#7ba2cd}
.pv-wico .ico{width:17px;height:17px}
.pv-wtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-wtxt b{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.pv-wpos{font-size:12.5px;color:var(--vk-text,#222);opacity:.92}
.pv-wmeta{font-size:12px;color:var(--vk-muted)}
.pv-work-body{padding-top:2px}
/* подсказка короткого адреса в настройках */
.field-hint{display:block;font-size:11.5px;line-height:1.45;color:var(--vk-muted);margin-top:4px;font-weight:400}
.field-hint b{color:var(--vk-text,#222)}
.auth-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--vk-text,#222)}
.auth-check input[type="checkbox"]{width:15px;height:15px;margin:0}
/* конец TASK 37 v96 */

/* ==== v97 (Task 38): добавление вариантов опроса, зум аватара ==== */
.pe-add{align-self:flex-start;height:32px;padding:0 12px;border:1.5px dashed var(--line2);border-radius:10px;background:transparent;color:var(--vk-link);font-size:13px;font-family:inherit;cursor:pointer}
.pe-add:hover{border-color:var(--brand);background:var(--tint-hover)}
.pv-photo img{cursor:zoom-in}
/* ==== end v97 ==== */
/* ==== v98 (Task 39): карьера/образование, реал-тайм проверки, reply, подарки ==== */

/* --- реал-тайм проверки логина и короткого адреса --- */
.check-hint{display:none;margin-top:4px;font-size:12px;line-height:1.35}
.check-hint:empty{display:none}
.check-hint.good,.check-hint.bad,.check-hint.chk{display:flex;align-items:center;gap:5px}
.check-hint.good{color:#1a9c53}
.check-hint.bad{color:#e64646}
.check-hint.chk{color:var(--vk-muted)}
.check-hint.good::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#1a9c53}
.check-hint.bad::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#e64646}
.check-hint.chk::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--vk-muted);border-top-color:transparent;animation:vdspin .7s linear infinite}
@keyframes vdspin{to{transform:rotate(360deg)}}
.check-sugg{display:none;gap:6px;margin-top:5px;flex-wrap:wrap}
.check-sugg.on{display:flex}
.sugg-chip{border:1px solid var(--line2);background:var(--card);color:var(--vk-link);font:600 12px var(--font);padding:3px 9px;border-radius:20px;cursor:pointer;transition:background .13s,border-color .13s}
.sugg-chip:hover{background:var(--tint-hover);border-color:var(--brand)}
html[data-theme="dark"] .sugg-chip{background:var(--tint-hover)}

/* --- вкладки настроек: карьера / образование, динамичные строки --- */
.ent-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.ent-row{position:relative;border:1px solid var(--line2);border-radius:10px;padding:10px 34px 12px 10px;background:var(--card);animation:entIn .18s ease}
@keyframes entIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ent-row.ent-gone{opacity:0;transform:scale(.97);transition:opacity .16s,transform .16s}
.ent-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border:0;background:none;color:var(--vk-muted);font:700 15px/1 Tahoma,sans-serif;cursor:pointer;border-radius:6px}
.ent-del:hover{color:#e64646;background:rgba(230,70,70,.08)}
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ent-f{margin:0!important}
.ent-l{display:block;font-size:11px;color:var(--vk-muted);margin-bottom:3px}
.ent-f input,.ent-f select{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--vk-text);font:13px var(--font)}
.ent-f input:focus,.ent-f select:focus{outline:none;border-color:var(--brand)}
@media (max-width:560px){.ent-grid{grid-template-columns:1fr}}

/* --- ответ на сообщение (цитата) --- */
.msg-quote{display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--brand);background:rgba(74,118,168,.1);border-radius:6px;padding:4px 8px;margin-bottom:5px;max-width:100%;cursor:pointer;transition:background .13s}
.msg-quote:hover{background:rgba(74,118,168,.18)}
html[data-theme="dark"] .msg-quote{background:rgba(120,160,210,.12)}
html[data-theme="dark"] .msg-quote:hover{background:rgba(120,160,210,.2)}
.mq-name{font-size:11px;font-weight:700;color:var(--vk-link)}
.mq-text{font-size:12px;color:var(--vk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
/* R67: «Ответить» — иконка в пилюле действий */
.bubble .msg-reply{width:24px;height:24px;border:0;border-radius:50%;background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--vk-muted);cursor:pointer;padding:0;transition:background .15s,color .15s;line-height:1}
.bubble .msg-reply:hover{color:var(--vk-blue);background:rgba(74,118,168,.12)}
.msg-flash{animation:msgFlash 1.25s ease}
@keyframes msgFlash{0%,60%{box-shadow:0 0 0 2px var(--brand) inset;background:rgba(74,118,168,.14)}100%{box-shadow:none}}
.chat-reply-bar{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:6px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--vk-muted)}
.chat-reply-bar[hidden]{display:none}
.rb-body{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.rb-body b{font-size:12px;color:var(--vk-link)}
.rb-body span{font-size:12px;color:var(--vk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- подарки: анимации отправки и витрины --- */
.gifts-catalog .gift-art{transition:transform .18s ease}
.gifts-catalog .gift-card:hover .gift-art{transform:translateY(-4px) scale(1.07)}
.gifts-catalog .gift-card:has(input:checked) .gift-art{transform:translateY(-2px) scale(1.04)}
.pv-gifts .pv-gift-art{transition:transform .18s ease;animation:giftPop .45s ease backwards}
.pv-gifts .pv-gift:hover .pv-gift-art{transform:translateY(-3px) rotate(-3deg) scale(1.08)}
.pv-gifts .pv-gift:nth-child(1) .pv-gift-art{animation-delay:.02s}
.pv-gifts .pv-gift:nth-child(2) .pv-gift-art{animation-delay:.08s}
.pv-gifts .pv-gift:nth-child(3) .pv-gift-art{animation-delay:.14s}
.pv-gifts .pv-gift:nth-child(4) .pv-gift-art{animation-delay:.2s}
.pv-gifts .pv-gift:nth-child(5) .pv-gift-art{animation-delay:.26s}
.pv-gifts .pv-gift:nth-child(6) .pv-gift-art{animation-delay:.32s}
.pv-gifts .pv-gift:nth-child(7) .pv-gift-art{animation-delay:.38s}
.pv-gifts .pv-gift:nth-child(8) .pv-gift-art{animation-delay:.44s}
@keyframes giftPop{0%{transform:scale(.3);opacity:0}62%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.gift-fly{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:rgba(8,18,32,.55);backdrop-filter:blur(3px)}
.gift-fly[hidden]{display:none}
.gift-fly-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;animation:gfBoxIn .3s ease}
.gf-art{width:150px;height:150px;display:flex;align-items:center;justify-content:center;animation:gfFly 1.25s cubic-bezier(.22,1.1,.36,1) both}
.gf-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
@keyframes gfFly{0%{transform:translateY(46vh) scale(.4) rotate(-8deg);opacity:0}55%{transform:translateY(-3vh) scale(1.12) rotate(2deg);opacity:1}74%{transform:translateY(2vh) scale(1.02) rotate(-1deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
.gf-cap{font:600 15px var(--font);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);animation:gfCap .4s ease .55s both}
@keyframes gfCap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gf-lid{position:absolute;top:calc(50% - 104px);left:50%;width:34px;height:6px;margin-left:-17px;border-radius:4px;background:linear-gradient(90deg,#ffd66b,#ff9f43);opacity:0}
.gift-fly.run .gf-lid{animation:gfLid 1.2s ease .1s both}
@keyframes gfLid{0%{opacity:0;transform:translateY(10px) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-46px) rotate(-24deg)}}
.gf-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd66b;opacity:0;top:50%;left:50%}
.gift-fly.run .gf-spark{animation:gfSpark 1s ease .35s both}
.gift-fly.run .s1{--dx:-86px;--dy:-70px}
.gift-fly.run .s2{--dx:78px;--dy:-88px}
.gift-fly.run .s3{--dx:-108px;--dy:26px}
.gift-fly.run .s4{--dx:104px;--dy:34px}
.gift-fly.run .s5{--dx:-52px;--dy:-112px;background:#8ec5ff}
.gift-fly.run .s6{--dx:58px;--dy:-118px;background:#ff8fa3}
@keyframes gfSpark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ent-row,.pv-gifts .pv-gift-art,.gf-art,.gf-cap{animation:none!important}
  .gifts-catalog .gift-art,.pv-gifts .pv-gift-art{transition:none!important}
}
/* ==== end v98 ==== */
/* ==== v99 (Task 40): профессиональный UI-полиш — фокус, тени, пустые состояния ==== */

/* --- доступный и премиальный фокус-ринг на всех интерактивных --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.auth-field input:focus-visible, .auth-field select:focus-visible, .auth-field textarea:focus-visible{outline:none}
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(74, 118, 168, .13);
}
html[data-theme="dark"] .auth-field input:focus,
html[data-theme="dark"] .auth-field select:focus,
html[data-theme="dark"] .auth-field textarea:focus{box-shadow:0 0 0 3px rgba(123, 162, 205, .16)}
.ent-f input:focus, .ent-f select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(74, 118, 168, .13)}

.btn-danger:hover{filter:brightness(.95)}
.btn[disabled]{transform:none!important; box-shadow:none!important; opacity:.6; cursor:not-allowed}

.pv-block-h{font-weight: 700}
.pv-block-h .cnt-inline{font-variant-numeric: tabular-nums}

/* --- интерактивные карточки: аккуратный подъём --- */
.gift-card, .pv-fav, .bl-row, .rm-row{transition: transform .14s ease, background-color .14s ease}
.pv-fav:hover{transform: translateY(-2px)}

/* --- пустые состояния (единый компонент) --- */
.vd-empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:34px 18px 30px;text-align:center;color:var(--vk-muted)}
.vd-empty .ve-ico{width:54px;height:54px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--vk-muted);flex:0 0 auto}
.vd-empty .ve-ico .ico{width:24px;height:24px}
.vd-empty .ve-t{font-weight:700;color:var(--vk-text);font-size:14px}
.vd-empty .ve-h{font-size:13px;max-width:360px;line-height:1.55}
.vd-empty .ve-h a{color:var(--vk-link)}

html[data-theme="dark"] *{scrollbar-color: rgba(120, 150, 190, .35) transparent}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(120, 150, 190, .32);border:2.5px solid transparent;background-clip:content-box}

html[data-theme="dark"] ::selection{background: rgba(123, 162, 205, .32)}

/* --- пульс онлайна (живая сеть) --- */
@keyframes vdPulse{0%{box-shadow:0 0 0 0 rgba(76, 175, 80, .45)}70%{box-shadow:0 0 0 5px rgba(76, 175, 80, 0)}100%{box-shadow:0 0 0 0 rgba(76, 175, 80, 0)}}

/* --- бейджи: табличные цифры и мягкое появление --- */
@keyframes badgeIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.vd-badge{font-variant-numeric: tabular-nums}
.vd-badge.badge-in{animation: badgeIn .25s ease}

/* --- типографская микрополировка ссылок в панелях --- */
.panel-b a{transition: color .13s ease}
.pv-hlink{font-weight: 600}
.pv-hlink:hover{text-decoration: underline; text-underline-offset: 3px}

/* --- таб-переключатели: плавная смена состояния --- */
.set-tabs button{transition: background-color .15s ease, color .15s ease, box-shadow .15s ease}
.set-tabs button:not(.on):hover{color: var(--vk-text)}

/* --- typing-нота в беседах — как в диалогах --- */
#typing-note{display:flex;align-items:center;gap:6px}

@media (prefers-reduced-motion: reduce){
  .btn, .panel, .gift-card, .pv-fav, .online-dot{animation: none!important; transition: none!important}
}
/* ==== end v99 ==== */
/* ==== v100: служба поддержки, Отчество, официальный бейдж (TASK 41) ==== */
.official-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#4a76a8;color:#fff;vertical-align:2px;margin-left:7px;flex:none}
.official-badge svg{width:11px;height:11px;stroke:#fff}
.email-ro{display:flex;align-items:center;justify-content:space-between;gap:10px}
.email-ro-k{font-weight:600;font-size:13.5px;color:#243447}
.email-ro-v{color:#45688e;background:#f0f2f5;border:1px solid #dce1e8;border-radius:4px;padding:7px 10px;font-size:13.5px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ==== end v100 ==== */

/* ==== TASK 42 v102: реал-тайм тосты событий, «Показать N новых записей», полиш ==== */
.ntf-box{
  position:fixed;bottom:18px;right:18px;z-index:420;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.ntf-toast{
  pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:10px;width:300px;
  background:rgba(38,44,52,.97);color:#fff;border-radius:12px;padding:11px 12px;
  box-shadow:0 10px 34px rgba(0,0,0,.32);opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .28s cubic-bezier(.2,.8,.25,1),transform .28s cubic-bezier(.2,.8,.25,1);
}
.ntf-toast.show{opacity:1;transform:none}
.ntf-toast:hover{background:rgba(46,53,62,.99)}
.ntf-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;overflow:hidden;background:var(--vk-blue);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;
}
.ntf-av img{width:100%;height:100%;object-fit:cover}
/* R62: скоуп тоста — раньше перекрывал страницу «Оповещения» (коллизия .ntf-text) */
.ntf-toast .ntf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ntf-toast .ntf-title{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf-toast .ntf-text{font-size:12.5px;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ntf-x{
  flex:0 0 auto;background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:4px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.ntf-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.feed-new-pill{
  display:flex;align-items:center;gap:7px;margin:0 auto 10px;padding:8px 16px;
  background:var(--vk-blue);color:#fff;border:0;border-radius:20px;cursor:pointer;
  font:600 12.5px/1 var(--font);box-shadow:0 4px 16px rgba(74,118,168,.42);
  opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s,background .15s,box-shadow .2s;
}
.feed-new-pill.show{opacity:1;transform:none}
.feed-new-pill:hover{background:var(--vk-blue-hover);box-shadow:0 6px 20px rgba(74,118,168,.5)}
.feed-new-pill:active{transform:translateY(1px)}
html[data-theme="dark"] .ntf-toast{background:rgba(42,44,50,.98)}
html[data-theme="dark"] .ntf-toast:hover{background:rgba(52,55,62,.99)}
/* Лендинг и регистрация — сдержанный профессиональный полиш (R85: hero-auth) */
.hero-auth{border:1px solid var(--vk-border);border-radius:14px}
.hero-auth h1{letter-spacing:-.01em}
.hero-auth .btn{transition:background .15s,transform .12s}
.hero-auth .btn:hover{filter:brightness(1.06)}
.hero-auth .btn:active{transform:translateY(1px)}
.auth-box .btn{transition:background .15s}
.auth-box .btn:hover{filter:brightness(1.06)}
/* Мобильные экраны */
@media(max-width:760px){
  .ntf-box{left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .ntf-toast{width:auto}
  .feed-new-pill{margin:0 12px 10px}
}
@media(prefers-reduced-motion:reduce){
  .ntf-toast,.feed-new-pill{transition:none}
}
/* ==== end v102 ==== */
.ab-ico{
  background:none;border:0;color:var(--vk-muted);cursor:pointer;
  padding:6px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;flex:none;transition:color .13s ease, background .13s ease;
}
.ab-ico:hover{color:var(--brand);background:rgba(74,118,168,.12)}
.ab-ico.active{color:var(--brand);background:var(--brand-tint)}
.ab-vol{display:flex;align-items:center;gap:2px;flex:none}
.ab-vol .vol-off{display:none}
#ab-vol{
  -webkit-appearance:none;appearance:none;width:72px;height:4px;border-radius:2px;
  background:#e5eaf0;outline:none;cursor:pointer;flex:none;
}
#ab-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,30,60,.25);
  cursor:pointer;transition:transform .12s ease;
}
#ab-vol::-webkit-slider-thumb:hover{transform:scale(1.15)}
#ab-vol::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;background:var(--brand);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,30,60,.25);cursor:pointer;
}
#ab-vol::-moz-range-track{height:4px;border-radius:2px;background:#e5eaf0}
@media(max-width:900px){#ab-vol{display:none}}




















/* ---------- Редактирование трека: карандаш в строке + модалка ---------- */
.row-edit{
  background:none;border:0;color:var(--vk-muted);cursor:pointer;
  padding:6px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;flex:none;transition:color .13s ease, background .13s ease;
}
.row-edit:hover{color:var(--brand);background:var(--brand-tint)}
.aud-edit{
  position:fixed;inset:0;z-index:400;background:rgba(15,25,40,.45);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .14s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.aud-edit-box{
  width:100%;max-width:380px;background:#fff;border-radius:10px;
  box-shadow:0 18px 60px rgba(10,30,60,.3);padding:18px;
  animation:popIn .16s ease both;
}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.aud-edit-h{font-size:15px;font-weight:800;color:var(--vk-text);margin-bottom:14px}
.aud-edit-l{display:block;font-size:12px;font-weight:600;color:var(--vk-muted);margin-bottom:10px}
.aud-edit-l input{
  display:block;width:100%;margin-top:5px;padding:9px 11px;font-size:14px;
  border:1px solid var(--vk-border);border-radius:6px;color:var(--vk-text);
  outline:none;font-family:var(--font);transition:border-color .13s ease, box-shadow .13s ease;
}
.aud-edit-l input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,118,168,.15)}
.aud-edit-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ---------- Всплывающий мессенджер: кнопка-шар + панель ---------- */
.chat-fab{
  position:fixed;right:18px;bottom:18px;z-index:190;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#5b88bd,#3d6a99);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(61,106,153,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(61,106,153,.55)}
.chat-fab.open{transform:scale(1.04)}
.chat-fab-badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;
  background:var(--vk-red);color:#fff;font-size:11px;font-weight:800;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  padding:0 5px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.chat-wdg{
  position:fixed;right:18px;bottom:82px;z-index:195;
  width:348px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 110px);
  background:#fff;border:1px solid var(--vk-border);border-radius:12px;
  box-shadow:0 18px 60px rgba(10,30,60,.28);
  display:flex;flex-direction:column;overflow:hidden;
  animation:wdgIn .18s ease both;
}
@keyframes wdgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.cw-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;flex:none;
  background:linear-gradient(135deg,#5b88bd,#4a76a8);color:#fff;
}
.cw-back{
  background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;
  width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none;
}
.cw-back:hover{background:rgba(255,255,255,.26)}
.cw-title{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cw-title.typing{font-weight:600;opacity:.9}
.cw-all{font-size:11.5px;color:rgba(255,255,255,.85);text-decoration:none;white-space:nowrap;flex:none}
.cw-all:hover{color:#fff;text-decoration:underline}
.cw-x{background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;padding:4px;display:flex;border-radius:4px;flex:none}
.cw-x:hover{color:#fff;background:rgba(255,255,255,.16)}
.cw-body{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
.cw-sect{
  font-size:10.5px;font-weight:800;color:var(--vk-muted);text-transform:uppercase;
  letter-spacing:.5px;padding:9px 12px 5px;
}
.cw-it{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 12px;border:0;background:none;cursor:pointer;font-family:var(--font);
  text-decoration:none;color:var(--vk-text);transition:background .12s ease;
}
.cw-it:hover{background:var(--brand-tint)}
.cw-it.unread{background:#eef4fb}
.cw-it.unread:hover{background:var(--tint-hover)}
.cw-av{
  position:relative;width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#9ebbd6,#6f95b8);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;overflow:hidden;
}
.cw-av img{width:100%;height:100%;object-fit:cover}
.cw-av.g{overflow:visible}
.cw-av.g svg{width:20px;height:20px}
.cw-on{
  position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;
  background:var(--vk-green);border:2px solid #fff;
}
.cw-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cw-nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-tx{font-size:12px;color:var(--vk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-time{font-size:10.5px;color:var(--vk-muted);align-self:flex-start;flex:none;font-variant-numeric:tabular-nums}
.cw-cnt{
  background:var(--vk-red);color:#fff;font-size:10.5px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;padding:0 5px;flex:none;
}
.cw-empty{padding:22px 16px;text-align:center;font-size:12.5px;color:var(--vk-muted);line-height:1.5}
.cw-loading{padding:22px;text-align:center;font-size:12.5px;color:var(--vk-muted)}

/* мини-чат внутри виджета */
.cw-msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 10px 6px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
.cw-msg{
  max-width:78%;padding:7px 10px;border-radius:10px;font-size:13px;line-height:1.4;
  background:var(--brand-tint);color:var(--vk-text);align-self:flex-start;
  word-wrap:break-word;overflow-wrap:break-word;
}
.cw-msg.mine{background:var(--brand);color:#fff;align-self:flex-end}
.cw-msg .cw-txt{display:block;white-space:pre-wrap}
.cw-quote{
  display:block;font-size:11px;padding:3px 6px;margin-bottom:4px;border-radius:5px;
  background:rgba(0,0,0,.06);color:var(--vk-muted);border-left:2px solid var(--vk-muted);
}
.cw-msg.mine .cw-quote{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.6)}
.cw-img,.cw-vid{display:block;max-width:220px;max-height:180px;border-radius:8px;margin-bottom:4px}
.cw-circle{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block}
.cw-mtime{display:block;font-size:9.5px;opacity:.65;margin-top:2px;text-align:right;font-variant-numeric:tabular-nums}
.cw-read{font-size:10px}
.cw-composer{
  display:flex;align-items:flex-end;gap:6px;padding:8px;flex:none;
  border-top:1px solid var(--vk-border);background:#fff;
}
.cw-composer textarea{
  flex:1;min-height:36px;max-height:96px;padding:8px 10px;font-size:13px;
  border:1px solid var(--vk-border);border-radius:8px;resize:none;outline:none;
  font-family:var(--font);color:var(--vk-text);line-height:1.35;
  transition:border-color .13s ease, box-shadow .13s ease;
}
.cw-composer textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,118,168,.14)}
#cw-send{
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;flex:none;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .13s ease, transform .12s ease;
}
#cw-send:hover{background:var(--brand-dark);transform:scale(1.06)}
#cw-send:disabled{opacity:.55;cursor:default;transform:none}


/* ---------- Тёмная тема ---------- */






[data-theme="dark"] .aud-edit{background:rgba(0,0,0,.6)}
[data-theme="dark"] .aud-edit-box{background:#2a2d32}
[data-theme="dark"] .aud-edit-h,[data-theme="dark"] .aud-edit-l input{color:#e8ecf1}
[data-theme="dark"] .aud-edit-l input{background:#22252a;border-color:#3a3f46}
[data-theme="dark"] .chat-wdg{background:#2a2d32;border-color:#3a3f46}
[data-theme="dark"] .chat-fab-badge{border-color:#2a2d32}
[data-theme="dark"] .cw-it{color:#e8ecf1}
[data-theme="dark"] .cw-it:hover{background:#333941}
[data-theme="dark"] .cw-it.unread{background:#2f3948}
[data-theme="dark"] .cw-it.unread:hover{background:#37424f}
[data-theme="dark"] .cw-msg{background:#333941;color:#e8ecf1}
[data-theme="dark"] .cw-msg.mine{background:var(--brand)}
[data-theme="dark"] .cw-quote{background:rgba(255,255,255,.07);color:#9aa7b4}
[data-theme="dark"] .cw-composer{background:#2a2d32;border-top-color:#3a3f46}
[data-theme="dark"] .cw-composer textarea{background:#22252a;border-color:#3a3f46;color:#e8ecf1}
[data-theme="dark"] .cw-on{border-color:#2a2d32}

/* ---------- Мобильные ---------- */
@media(max-width:900px){
  .chat-fab,.chat-wdg{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .aud-edit, .aud-edit-box, .chat-wdg{animation:none}
  .chat-fab,#ab-vol::-webkit-slider-thumb,#cw-send{transition:none}
}
/* ==== end v103 ==== */

/* ============================================================
   TASK 44 (v104): шифрование переписки — защищённые чаты (E2E),
   разделители дат, правка сообщений, апгрейд виджета.
   ============================================================ */

/* --- индикация защищённого режима в шапке диалога --- */
.secret-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(47,175,90,.12);color:#1e7c3f;font-size:11px;font-weight:600;vertical-align:1px;white-space:nowrap}
.secret-badge svg{flex:none}
.secret-btn{position:relative;color:var(--vk-muted)}
.secret-btn:hover{color:var(--vk-text)}
.secret-btn.on{color:var(--vk-green)}
.secret-btn.on::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--vk-green);box-shadow:0 0 0 2px var(--card)}

/* --- инфоблок защищённого чата с кодом безопасности --- */
.secret-info{margin:0 16px 8px;padding:10px 12px;border:1px solid rgba(47,175,90,.35);background:rgba(47,175,90,.06);border-radius:8px}
.secret-info .si-row{display:flex;align-items:flex-start;gap:8px}
.secret-info .si-ico{color:var(--vk-green);flex:none;margin-top:1px}
.secret-info .si-text{flex:1;font-size:12px;color:var(--vk-text)}
.secret-info .si-code{margin-top:8px;font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.5px;color:#1e7c3f;text-align:center;padding:7px 8px;border-radius:6px;background:rgba(47,175,90,.12)}

/* --- подсветка композера в защищённом режиме --- */
.is-secret .chat-send{border-top:1px solid rgba(47,175,90,.35);background:linear-gradient(180deg,rgba(47,175,90,.05),transparent)}
.is-secret .chat-send input:focus{border-color:var(--vk-green);box-shadow:0 0 0 3px rgba(47,175,90,.12)}
.secret-wait{margin:8px 16px;padding:8px 12px;border-radius:8px;background:rgba(255,180,0,.1);border:1px solid rgba(255,180,0,.35);color:#8a6d1a;font-size:12px}

/* --- e2e-пузыри --- */
.bubble.b-e2e{position:relative}
.bubble.b-e2e .b-text::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;opacity:.55;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FAF5A' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");vertical-align:-1px}
.bubble.b-e2e-locked .b-locked{font-style:italic;opacity:.75}
.b-text{white-space:pre-wrap;word-wrap:break-word}

/* --- разделители дат (как в Telegram) --- */
.chat-day,.chat-unread{display:flex;align-items:center;gap:10px;margin:14px auto 8px;max-width:70%;color:var(--vk-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.chat-day::before,.chat-day::after,.chat-unread::before,.chat-unread::after{content:"";flex:1;height:1px;background:var(--vk-border)}

/* --- правка сообщений --- */
/* R67: «Изменить» — иконка в пилюле действий */
.bubble .msg-edit{width:24px;height:24px;border:none;border-radius:50%;background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--vk-muted);cursor:pointer;padding:0;transition:background .15s,color .15s;line-height:1}
.bubble .msg-edit:hover{color:var(--vk-blue);background:rgba(74,118,168,.12)}
.edited-tag{font-size:10px;opacity:.6;font-style:italic;margin-left:2px}
.chat-edit-bar{display:flex;align-items:center;gap:8px;margin:0 16px 8px;padding:7px 12px;border-radius:8px;background:rgba(74,118,168,.08);border:1px solid rgba(74,118,168,.3);color:var(--vk-blue)}
.chat-edit-bar .rb-body{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-edit-bar .rb-body b{font-size:12px}
.chat-edit-bar .rb-body span{font-size:11px;color:var(--vk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- виджет: защищённые диалоги --- */
.cw-it.is-secret .cw-nm{color:#1e7c3f}
.cw-lock{display:inline-block;margin-right:4px;vertical-align:-1px;color:var(--vk-green)}
.cw-msg.cw-e2e-locked .cw-txt{font-style:italic;opacity:.75}
.is-secret .cw-composer textarea:focus{border-color:var(--vk-green)}

/* TASK 44: в защищённом чате медиа-вложения недоступны (fail-closed) */
.is-secret #attach-btn,.is-secret #voice-btn,.is-secret #circle-btn{display:none}

/* ================================================================================
   v106 (TASK 46): редактор опросов v2 (нумерованные варианты, удаление, счётчик)
   + попап-карточка профиля по клику на аватар
   ================================================================================ */

/* ---- Редактор опроса v2 ---- */
.poll-editor{display:flex;flex-direction:column;gap:10px;margin:2px 0 10px;padding:14px;background:var(--fill);border:1px solid var(--line);border-radius:16px;animation:pe-in .18s ease}
.poll-editor[hidden]{display:none}
@keyframes pe-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.poll-editor .pe-head{display:flex;align-items:center;gap:10px;margin:0}
.poll-editor .pe-badge{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:linear-gradient(135deg,var(--brand-hover),var(--brand));color:#fff;display:flex;align-items:center;justify-content:center}
.poll-editor .pe-tt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.poll-editor .pe-tt b{font-weight:700;font-size:13.5px;color:var(--vk-text)}
.poll-editor .pe-tt i{font-style:normal;font-size:11.5px;color:var(--vk-muted)}
.poll-editor .pe-x{width:28px;height:28px;flex:0 0 28px;border:0;border-radius:9px;background:transparent;color:var(--vk-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s}
.poll-editor .pe-x:hover{background:var(--card);color:var(--vk-text)}
.pe-q{position:relative}
.pe-q input{width:100%;height:44px;padding:0 56px 0 13px;box-sizing:border-box;border:1px solid var(--line2);border-radius:11px;background:var(--card);color:var(--vk-text);font-size:14.5px;font-weight:600;font-family:inherit}
.pe-q input::placeholder{color:var(--vk-muted);font-weight:400}
.pe-q input:focus{outline:none;border-color:var(--brand)}
.pe-qcnt{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--vk-muted);user-select:none;pointer-events:none}
.pe-qcnt.near{color:var(--vk-red);font-weight:700}
.pe-opts{display:flex;flex-direction:column;gap:8px}
.pe-opt{display:flex;align-items:center;gap:9px}
.pe-num{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--card);border:1px solid var(--line2);color:var(--vk-muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s;user-select:none}
.pe-opt.filled .pe-num{background:var(--brand);border-color:var(--brand);color:#fff}
.pe-opt input{flex:1;min-width:0;height:40px;padding:0 12px;box-sizing:border-box;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--vk-text);font-size:13.5px;font-family:inherit;transition:border-color .15s}
.pe-opt input::placeholder{color:var(--vk-muted)}
.pe-opt input:focus{outline:none;border-color:var(--brand)}
.pe-opt.pe-miss input{border-color:var(--vk-red)}
.pe-opt.pe-miss .pe-num{border-color:var(--vk-red);color:var(--vk-red)}
.pe-del{width:26px;height:26px;flex:0 0 26px;border:0;border-radius:8px;background:transparent;color:var(--vk-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s}
.pe-del:hover{background:var(--card);color:var(--vk-red)}
.pe-add{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border:1.5px dashed var(--line2);border-radius:10px;background:transparent;color:var(--brand);font-weight:600;font-size:12.5px;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.pe-add:hover{background:var(--brand-tint);border-color:var(--brand)}
.pe-add[hidden]{display:none}
.pe-hint{font-size:12px;color:var(--vk-red);margin-top:-4px}
.pe-hint[hidden]{display:none}
.poll-trigger.active{background:var(--brand-tint);color:var(--brand)}

/* ---- Попап-карточка профиля (клик по аватару) ---- */
.vd-usercard{position:fixed;z-index:2600;width:302px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(8,18,32,.38),0 2px 8px rgba(8,18,32,.16);overflow:visible;animation:uc-in .16s ease}
.vd-usercard[hidden]{display:none}
@keyframes uc-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.vd-usercard .uc-cover{height:62px;border-radius:15px 15px 0 0}
.vd-usercard .uc-av{position:absolute;top:28px;left:16px;width:68px;height:68px;border-radius:50%;border:3px solid var(--card);background:var(--fill);overflow:hidden;display:block;box-shadow:0 2px 8px rgba(8,18,32,.18)}
.vd-usercard .uc-av img{width:100%;height:100%;object-fit:cover;display:block}
.vd-usercard .uc-av span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#fff;letter-spacing:.5px}
.vd-usercard .uc-body{padding:38px 16px 14px;display:flex;flex-direction:column;gap:5px}
.vd-usercard .uc-name{font-weight:700;font-size:15px;color:var(--vk-text);text-decoration:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25}
.vd-usercard .uc-name:hover{text-decoration:underline}
.vd-usercard .uc-online{font-size:10.5px;color:var(--vk-green);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.vd-usercard .uc-check{flex:0 0 auto}
.vd-usercard .uc-sub{font-size:12.5px;color:var(--vk-muted);line-height:1.4;word-break:break-word}
.vd-usercard .uc-fr{font-size:12px;color:var(--vk-muted);text-decoration:none;margin-top:2px}
.vd-usercard .uc-fr:hover{color:var(--brand);text-decoration:underline}
.vd-usercard .uc-actions{display:flex;gap:8px;margin-top:8px}
.vd-usercard .uc-btn{flex:1;display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--fill);color:var(--vk-text);font-size:12.5px;font-weight:600;font-family:inherit;text-decoration:none;cursor:pointer;padding:0 8px;white-space:nowrap;transition:background .15s,filter .15s}
.vd-usercard .uc-btn:hover{background:var(--card);filter:brightness(1.04)}
.vd-usercard .uc-btn.uc-main{background:var(--brand);border-color:var(--brand);color:#fff}
.vd-usercard .uc-btn.uc-main:hover{background:var(--brand-hover)}
.vd-usercard .uc-btn.uc-wait{opacity:.8;cursor:default}
.vd-usercard .uc-btn:disabled{opacity:.6;cursor:wait}
.vd-usercard .uc-sk{background:linear-gradient(90deg,var(--fill),var(--card),var(--fill));background-size:200% 100%;animation:uc-sk 1.1s linear infinite}
.vd-usercard .uc-sk-av{width:68px;height:68px;border-radius:50%;margin:-50px 0 8px}
.vd-usercard .uc-sk-l{height:14px;width:62%;border-radius:6px}
.vd-usercard .uc-sk-s{height:10px;width:40%;border-radius:6px}
@keyframes uc-sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (max-width:640px){
  .vd-usercard{width:min(302px,calc(100vw - 20px))}
}

/* ===== TASK 48 (v108): реакции на сообщения — кнопка, пикер, чипы ===== */
/* Кнопка-смайлик в пилюле действий: видимость пилюлей управляет .msg-acts (R67) */
.bubble .msg-react{border:none;background:transparent;color:var(--muted,#818c99);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;vertical-align:middle;transition:background .15s,color .15s;padding:0}
.bubble .msg-react:hover{background:rgba(74,118,168,.12);color:#4a76a8}
.bubble.rx-busy .msg-react{color:#4a76a8}
/* чипы реакций под текстом пузыря */
.bubble .rx-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bubble .rx-chips:empty{display:none!important}
.rx-chip{display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(74,118,168,.25);background:rgba(74,118,168,.08);border-radius:12px;padding:2px 8px 2px 5px;cursor:pointer;font-size:12px;line-height:1;color:#2c5d92;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;padding-left:5px}
.rx-chip svg{display:block;border-radius:50%}
.rx-chip .rx-n{font-weight:600;font-size:11.5px}
.rx-chip:hover{transform:translateY(-1px);background:rgba(74,118,168,.14);border-color:rgba(74,118,168,.4)}
.rx-chip:active{transform:scale(.94)}
.rx-chip.mine{background:rgba(74,118,168,.16);border-color:#4a76a8}
.rx-chip.mine{color:#1d4a78;box-shadow:0 0 0 1px rgba(74,118,168,.35)}
/* пикер */
.rx-picker{position:absolute;z-index:2600;display:flex;gap:2px;background:#fff;border:1px solid #dce1e6;border-radius:24px;padding:5px 7px;box-shadow:0 6px 24px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08);animation:rx-pop .16s cubic-bezier(.34,1.56,.64,1)}
@keyframes rx-pop{from{opacity:0;transform:translateY(6px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
.rx-opt{border:none;background:transparent;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .14s cubic-bezier(.34,1.56,.64,1),background .15s;padding:0}
.rx-opt svg{width:22px;height:22px}
.rx-opt:hover{transform:scale(1.32) translateY(-2px);background:rgba(74,118,168,.08)}
.rx-opt:active{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.rx-picker{animation:none}.rx-opt:hover{transform:none}.rx-chip:hover{transform:none}}
/* виджет (мини-чат): компактные чипы и кнопка */
.cw-msg .rx-chips{margin-top:2px}
.cw-msg .rx-chip{padding:1px 6px 1px 4px;font-size:11px}
.cw-msg .rx-chip svg{width:13px;height:13px}
.cw-msg .rx-chip .rx-n{font-size:10.5px}
/* тёмная тема */
[data-theme="dark"] .bubble .msg-react{color:#8a97a5}
[data-theme="dark"] .bubble .msg-react:hover{background:rgba(138,177,221,.12);color:#8ab1dd}
[data-theme="dark"] .rx-chip{background:rgba(138,177,221,.09);border-color:rgba(138,177,221,.22);color:#a8c6e8}
[data-theme="dark"] .rx-chip:hover{background:rgba(138,177,221,.16);border-color:rgba(138,177,221,.4)}
[data-theme="dark"] .rx-chip.mine{background:rgba(138,177,221,.2);border-color:#7ea8d4;color:#c6dcf3;box-shadow:0 0 0 1px rgba(138,177,221,.3)}
[data-theme="dark"] .rx-picker{background:#22262b;border-color:#3a3f45;box-shadow:0 8px 28px rgba(0,0,0,.5)}
[data-theme="dark"] .rx-opt:hover{background:rgba(138,177,221,.12)}
/* мобильный: пикер не шире экрана */
@media (max-width:640px){.rx-picker{gap:1px;padding:4px 5px}.rx-opt{width:32px;height:32px}.rx-opt svg{width:20px;height:20px}}

.chat-field{flex:1;display:flex;align-items:center;gap:2px;background:var(--fill);border:1px solid transparent;border-radius:999px;padding:0 4px;min-width:0}
.chat-field:focus-within{border-color:var(--brand);background:var(--card)}
.chat-field input{flex:1;min-width:0;border:none!important;background:transparent!important;box-shadow:none;height:40px;padding:0 6px}
.chat-field .mic-btn{border:none!important;background:transparent!important;width:34px;flex-basis:34px;height:34px}
.chat-field .mic-btn:hover{background:var(--brand-tint)}
.chat-send-btn{display:none!important}
.chat-send:not(.has-text) .voice-trigger{display:flex}
.chat-send.has-text .chat-send-btn{display:inline-flex!important}
.chat-send.has-text .voice-trigger{display:none}
.is-secret .chat-field{background:linear-gradient(180deg,rgba(47,175,90,.07),var(--fill))}
.is-secret .chat-field:focus-within{border-color:var(--vk-green)}
.chat-send:not(.has-text) .chat-send-btn{display:none!important}

/* ==== v110: TASK 58 ==== */
/* --- КРИТИЧЕСКИЙ ФИКС: тёмная тема виджета сообщений.
   .cw-body оставался #fff — «белый корпус», строки невидимы (светлый текст
   из тёмных оверрайдов на белом фоне). Владелец: «Диалоги без стилей». --- */
[data-theme="dark"] .cw-body{background:#2a2d32}
[data-theme="dark"] .cw-msgs{background:#2a2d32}
[data-theme="dark"] .cw-sect{color:#8b95a3}
[data-theme="dark"] .cw-empty,[data-theme="dark"] .cw-loading{color:#8b95a3}
[data-theme="dark"] .cw-msg .cw-quote{background:rgba(255,255,255,.08);color:#a8b4c4;border-left-color:#4a5666}
[data-theme="dark"] .cw-av{box-shadow:inset 0 0 0 1px #3a3f46}
[data-theme="dark"] .cw-time,[data-theme="dark"] .cw-tx{color:#8b95a3}

/* --- КРИТИЧЕСКИЙ ФИКС: композер диалога не растягивался на всю ширину
   панели: .chat-field лежит внутри form#chat-form, у которой не было flex:1
   (поле застревало на 270px — «форма не адаптивная»). --- */
.chat-send > form{flex:1;display:flex;align-items:center;min-width:0}
#chat-form,#room-form{flex:1;display:flex;align-items:center;min-width:0}

/* --- Современный полиш композера (desktop UX) --- */
.chat-field{transition:border-color .13s ease, background .13s ease}
.chat-send .mic-btn{transition:background .12s ease, transform .12s ease, color .12s ease}
.chat-send .chat-send-btn{transition:transform .12s ease, filter .12s ease}
.chat-send .chat-send-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.chat-send .mic-btn:hover{color:var(--brand)}
/* таймер кружка: срочность после 25 с */
#circle-time.warn,#circle-time.warn + small{color:var(--vk-red)}

/* — Раунд 9: выбор участников беседы (room_create) и участники беседы (room) — */
.member-pick{display:grid;gap:4px;max-height:280px;overflow:auto;padding:8px;border:1px solid var(--vk-border);border-radius:var(--r-card);background:var(--card)}
.mp-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-btn);cursor:pointer;user-select:none}
.mp-item:hover{background:var(--fill)}
.mp-item input[type=checkbox]{width:16px;height:16px;margin:0;flex:none;cursor:pointer}
.mp-item .post-av.xs{flex:none}
.mp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}

/* — Раунд 10: кнопка реакции в мини-чате виджета (.cw-msg): была без стилей — */
.cw-msg .msg-react{opacity:0;pointer-events:none;border:none;background:transparent;color:var(--vk-muted,#818c99);width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;vertical-align:middle;transition:opacity .15s,background .15s,color .15s;padding:0;margin:2px 0 0}
.cw-msg:hover .msg-react,.cw-msg:focus-within .msg-react{opacity:.75;pointer-events:auto}
.cw-msg .msg-react:hover{opacity:1;background:rgba(74,118,168,.12);color:#4a76a8}
.cw-msg.mine .msg-react{color:rgba(255,255,255,.85)}
.cw-msg.mine .msg-react:hover{background:rgba(255,255,255,.16);color:#fff}
.cw-msg.rx-busy .msg-react{opacity:1}
@media (hover:none){.cw-msg .msg-react{opacity:.45;pointer-events:auto}}
[data-theme="dark"] .cw-msg .msg-react{color:#8a97a5}
[data-theme="dark"] .cw-msg .msg-react:hover{background:rgba(138,177,221,.12);color:#8ab1dd}

/* R13: сервисный чип звонка — центрированный серый, без пузырных инструментов */
.chat-thread .bubble.b-call{align-self:center;max-width:82%;background:rgba(74,118,168,.08);border:1px solid rgba(74,118,168,.14);box-shadow:none;border-radius:14px;padding:8px 14px 5px}
.chat-thread .bubble.b-call .b-text{font-size:12.5px;line-height:1.45;color:#5b7897;font-weight:500}
.chat-thread .bubble.b-call .msg-acts{display:none}
.chat-thread .bubble.b-call .t{font-size:10.5px;color:rgba(91,120,151,.7)}
html[data-theme="dark"] .chat-thread .bubble.b-call{background:rgba(138,177,221,.10);border-color:rgba(138,177,221,.16)}
html[data-theme="dark"] .chat-thread .bubble.b-call .b-text{color:#8ab1dd}


/* ==== R50: Markdown (единый рендерер accounts/md.py) ==== */
.md-hint{font-size:11px;color:var(--vk-muted);padding:4px 2px 6px}
.md-hint code,.md-code{font-family:var(--font);font-size:11.5px;background:var(--fill);border:1px solid var(--vk-border);border-radius:3px;padding:1px 4px}
.md-pre{font-family:var(--font);font-size:12px;background:var(--fill);border:1px solid var(--vk-border);border-radius:4px;padding:8px 10px;overflow-x:auto;white-space:pre;margin:6px 0}
.md-list{margin:4px 0 4px 18px}
.md-list li{margin:2px 0}
.post-text .md-pre,.note-text .md-pre,.b-text .md-pre,.vd-quote .md-pre{white-space:pre}

/* ==== R50: меню плейлистов плеера; волна в белом аудиобаре ==== */
.pl-menu{position:absolute;z-index:230;background:var(--vk-white);border:1px solid var(--vk-border);border-radius:6px;box-shadow:0 8px 28px rgba(10,30,60,.18);padding:4px;min-width:180px}
.pl-menu-i{display:block;width:100%;text-align:left;background:none;border:0;color:var(--vk-text);font:13px var(--font);padding:7px 10px;border-radius:4px;cursor:pointer}
.pl-menu-i:hover{background:var(--fill);text-decoration:none}
.pl-menu-new{color:var(--vk-blue);font-weight:600}
.audio-bar .ab-wave{color:var(--vk-muted);border-color:var(--vk-border)}
.audio-bar .ab-wave:hover{color:var(--vk-blue);background:var(--fill);border-color:var(--vk-border)}
.audio-bar .ab-wave.active{color:#fff;background:var(--vk-blue);border-color:var(--vk-blue)}
.audio-bar .ab-wave.active:hover{background:var(--vk-blue-dark)}

/* ============================================================
   R61: пункты меню без бордера (чистый фон, как в ВК 2006-2007);
   классы функций, остававшиеся без оформления (аудит шаблонов/JS).
   ============================================================ */
.pv-photo-panel .pv-actions{margin-left:0;flex-direction:column;align-items:stretch}
.pv-photo-panel .pv-actions .btn{width:100%;white-space:normal}

.pv-status.editing .pv-status-txt{opacity:.55}
.people-card .info{flex:1;min-width:0}
.people-card .info .meta,.people-card .info .st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-state{flex-shrink:0}
.event-state .vis-badge{white-space:nowrap}
.e-kind{width:100%;max-width:320px;padding:7px 10px;font:13px var(--font);color:var(--vk-text);background:var(--field);border:1px solid var(--vk-border);border-radius:4px}
.app-abi-label{color:var(--vk-muted);font-size:12px}
.gr-size-lbl{font-size:12px;color:var(--vk-muted);margin-right:6px}
.vdm-pane{padding:14px;border-radius:8px;min-height:180px}
.qr-login{margin-top:14px;text-align:center}
.qr-toggle{color:#2d6fb4;font-size:14px;font-weight:600;text-decoration:none}
.qr-toggle:hover{text-decoration:underline}
.qr-panel{margin-top:10px;padding:14px;border:1px solid var(--vk-border,#dfe6ee);border-radius:12px;background:var(--card,#fff);display:flex;flex-direction:column;align-items:center}
.qr-panel img{background:#fff;border-radius:8px}
.qr-state{margin-top:8px;font-size:13px;color:var(--vk-muted,#5a6672);line-height:1.4;max-width:260px}
.qr-refresh{display:inline-block;margin-top:8px;color:#2d6fb4;font-size:13px;font-weight:600;text-decoration:none}


/* ===== R63: кружки без бабла, эмодзи-пузыри, тач-реакции, подарки, видимость ===== */

/* --- видеокружок: без бабла, ▶-оверлей, время поверх круга --- */
.bubble.b-circle{background:transparent;border:0;box-shadow:none;padding:2px 6px;position:relative}
.bubble.b-circle.mine{background:transparent}
.b-circle .t{position:absolute;right:12px;bottom:14px;z-index:3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);font-size:10.5px}
.bubble-circle-wrap::after{
  content:"";position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.42) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'><polygon points='8 5 20 12 8 19 8 5' fill='white'/></svg>") center/22px 22px no-repeat;
  opacity:1;transition:opacity .15s;pointer-events:none;
}
.bubble-circle-wrap.is-playing::after{opacity:0}
video.bubble-circle{transition:box-shadow .2s}
.bubble-circle-wrap.is-playing video.bubble-circle{box-shadow:0 0 0 3px rgba(74,118,168,.55),0 4px 18px rgba(0,0,0,.25)}
.b-circle .rx-chips{position:relative;z-index:3}

/* --- сообщение из одних смайлов: крупно, без пузыря --- */
.bubble.em-only{background:transparent;border:0;box-shadow:none;padding:4px 6px}
.bubble.em-only .b-text{font-size:42px;line-height:1.25;letter-spacing:2px}
.bubble.em-only .t{margin-top:0}

/* --- тач-устройства: пилюля действий видна постоянно, приглушённо (R67) --- */
@media (hover:none){
  .bubble .msg-acts{opacity:.6;pointer-events:auto;transform:none}
}

/* --- панель «реакции + Ответить» (долгое нажатие) --- */
.rx-sheet{padding-bottom:2px}
.rx-sheet .rx-act{
  display:flex;align-items:center;gap:7px;width:100%;margin-top:4px;padding:8px 10px;
  border:0;border-top:1px solid var(--vk-border);background:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--vk-text);border-radius:0 0 6px 6px;
}
.rx-sheet .rx-act:hover{background:var(--fill)}

/* --- эмодзи-подарки (вместо SVG) --- */
.gift-emoji{font-size:34px;line-height:1;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.gift-card .gift-emoji{font-size:40px}
.pv-gift-art{display:flex;align-items:center;justify-content:center}
.pv-gift-art .gift-emoji{font-size:26px}

/* --- селектор видимости записи (R92: пилюля в футере композера) --- */
.vis-badge{font-size:10.5px;color:var(--vk-muted);border:1px solid var(--vk-border);border-radius:3px;padding:0 4px}

/* --- «Мои файлы»: рестайл медиатеки --- */
.vdm-box{border-radius:10px}
.vdm-head{padding:12px 16px;background:var(--fill)}
.vdm-title{font-size:13.5px}
.vdm-tab{padding:6px 12px;border-radius:14px}
.vdm-body{padding:16px}
.vdm-grid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px}
.vdm-cell{border-radius:8px;transition:border-color .12s}
.vdm-cell:hover{border-color:rgba(74,118,168,.5)}
.vdm-cap{padding:4px 7px;font-size:10.5px}
.vdm-cell-a .vdm-cap{position:static;background:none;color:var(--vk-text);font-size:12.5px;padding:0}
.vdm-cell-a{border:1px solid var(--vk-border);background:var(--card)}
.vdm-cell-a .vdm-aico{
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.vdm-cell-a .vdm-aico svg{stroke:#fff}
.vdm-drop{min-height:140px;border-radius:10px;padding:18px}
.vdm-empty{padding:30px 8px}
.vdm-foot{padding:11px 16px;background:var(--fill)}

/* --- тёмная тема: R63 --- */
html.dark .vis-sel{background:var(--card);color:var(--vk-text)}
html.dark .vis-wrap .vis-sel{background:var(--card);color:var(--vk-text)}
html.dark .vdm-cell-a{background:var(--card);border-color:var(--vk-border)}
html.dark .vdm-cell-a .vdm-cap{color:var(--vk-text)}
html.dark .bubble-circle-wrap::after{background-color:rgba(0,0,0,.5)}
html.dark .rx-sheet .rx-act{border-color:var(--vk-border);color:var(--vk-text)}

/* ===== R62: реакции, треки в чатах/на стене, плеер-контекст, пиксель-фиксы ===== */

/* --- D8: тост оповещений перекрывал страницу «Оповещения» (коллизия .ntf-text) --- */
.ntf-toast .ntf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ntf-toast .ntf-title{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf-toast .ntf-text{font-size:12.5px;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- D9/D10: панель действий профиля — отступ от фото, кнопки в одну строку --- */
.pv-photo-panel .pv-actions{margin-top:10px}
.pv-photo-panel .pv-actions .btn{white-space:nowrap;justify-content:center}
@media (max-width:380px){.pv-actions .btn{font-size:12px;padding:7px 6px}}

/* --- D6: плеер включён — освобождаем низ экрана --- */
.vd-audio-on body{padding-bottom:64px}
.vd-audio-on .chat-fab{bottom:70px}
.vd-audio-on .chat-wdg{bottom:142px}
@media (max-width:760px){
  .vd-audio-on body{padding-bottom:116px}
  .vd-audio-on .chat-fab{bottom:116px}
  .vd-audio-on .chat-wdg{bottom:122px}
}

/* --- D4: список «Мои сообщения» — пиксельная выверка --- */
.mail-item{min-height:62px;padding:10px 16px}
.mail-item .post-av{width:44px;height:44px;flex-shrink:0;font-size:14px}
.mail-item .mail-preview{flex:1;min-width:0}
.mail-item .mail-preview .tx{display:flex;align-items:center;gap:4px;font-size:12.5px}
.mail-item .mail-preview .tx svg{flex-shrink:0;width:13px;height:13px}
.mail-time{margin-left:auto;align-self:flex-start;flex-shrink:0;font-size:11px;color:var(--vk-muted);font-variant-numeric:tabular-nums;padding-top:3px}
@media (max-width:520px){.mail-time{display:none}}

/* --- D3: треки в сообщениях и записях (R92: плейлист встроен в обложку) --- */
.audio-row.audio-embed{max-width:420px;background:var(--card);border:1px solid var(--vk-border);border-radius:8px;padding:6px 10px;margin:4px 0;gap:8px}
.bubble .audio-row.audio-embed{max-width:240px;margin:2px 0 0}
[data-theme="dark"] .audio-row.audio-embed{background:#22252a;border-color:#3a3f46}

/* --- D3: share-кнопка в строке трека --- */
.row-share{background:none;border:0;color:var(--vk-muted);cursor:pointer;padding:6px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:color .14s,background .14s;flex-shrink:0}
.row-share:hover{color:var(--brand);background:var(--brand-tint)}
.pv-audio .row-share{padding:3px}

/* --- D3: share-меню и выбор диалога --- */
.share-menu{min-width:200px}
.dlg-pick{max-height:340px;overflow-y:auto;min-width:260px}
.dlg-pick-cap{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vk-muted);padding:7px 10px 4px}
.dlg-pick-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.dlg-pick-i > img,.dlg-pick-i > span:first-child{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--vk-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.dlg-pick-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlg-pick-cnt{background:var(--vk-red);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 6px;flex-shrink:0}
[data-theme="dark"] .dlg-pick{background:#26292f;border-color:#3a3f46}

/* --- D3: чип выбранного трека и кнопка «Трек» в композере --- */
.vd-thumb.is-audio, .vd-thumb.is-poll{flex-direction:column;color:var(--vk-muted);font-size:10px;gap:2px;padding:4px;background:var(--brand-tint);width:auto;min-width:72px;height:auto;min-height:72px}
.vd-thumb.is-audio .vd-thumb-name, .vd-thumb.is-poll .vd-thumb-name{max-width:110px}



/* --- D2: реакции — пикер с подписью, чипы, взлетающее сердце --- */
.bubble{position:relative}
.rx-picker{flex-wrap:wrap;max-width:280px}
.rx-cap{flex-basis:100%;text-align:center;font-size:10.5px;font-weight:600;color:var(--vk-muted);min-height:14px;padding:1px 4px 0}
.rx-chip.rx-pop{animation:rxChipPop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes rxChipPop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
.fly-heart{position:absolute;left:50%;top:6px;margin-left:-11px;pointer-events:none;z-index:5;animation:flyHeart .75s ease-out both}
@keyframes flyHeart{0%{opacity:0;transform:translateY(8px) scale(.4)}25%{opacity:1;transform:translateY(-2px) scale(1.2)}100%{opacity:0;transform:translateY(-48px) scale(1)}}
@media (prefers-reduced-motion:reduce){.fly-heart{animation:none;opacity:0}.rx-chip.rx-pop{animation:none}}

/* --- D3: модалка медиатеки — список треков --- */
.vdm-list{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto}
.vdm-cell.vdm-cell-a{aspect-ratio:auto;width:100%;flex-direction:row;display:flex;align-items:center;gap:9px;padding:6px 8px;justify-content:flex-start;text-align:left}
.vdm-cell.vdm-cell-a .vdm-cap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.vdm-aico{width:34px;height:34px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* --- D7: полоса загрузки pjax --- */
#vd-pjax-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--vk-blue);z-index:3000;transition:width .18s ease;border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(74,118,168,.55)}

/* =======================================================================
   R64 (v121): мобильная полировка, шапки панелей, «Мои сообщения»
   ======================================================================= */

/* --- 1. Шапка панели: стрелка / заголовок / имя — на одной оси ---
   Корень дефекта: inline-flex .back-link выравнивался по базовой линии
   соседнего текста, а baseline inline-flex без текстовых flex-детей =
   НИЗ иконки-стрелки. Имя собеседника уезжало на ~4px вниз. */
.back-link{vertical-align:middle}
.panel-h > span:has(.back-link){
  display:flex;align-items:center;flex-wrap:wrap;gap:2px 7px;min-width:0;
}

/* --- 2. Список «Мои сообщения»: пиксельные мелочи --- */
.mail-item:last-child{border-bottom:0}
.mail-item:active{background:var(--fill)}
.mail-preview .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-preview .tx{min-width:0}
.mail-item .cnt{flex-shrink:0}
[data-theme="dark"] .mail-item.is-unread:active{background:var(--tint-hover)}

/* --- 3. «Создать беседу» прижата вправо: чип-правило
   .panel-h > a:not(.btn) своим margin:-3px -8px гасило
   margin-left:auto и на десктопе тоже --- */
.panel-h > a.mail-new{margin-left:auto}
@media(max-width:520px){
  .panel-h.mail-tabs{flex-wrap:wrap;row-gap:6px;justify-content:flex-start}
}
@media(max-width:360px){
  .mail-tab{padding:6px 9px;font-size:12px}
  .mail-new{font-size:12px}
}

/* --- 4. Шапка диалога на мобильном: компактные круглые кнопки --- */
@media(max-width:760px){
  .chat-panel .panel-h{padding:10px 12px}
  .chat-panel .panel-h .mic-btn{width:32px;height:32px}
  .md-hint{display:none}
}

/* Markdown-подсказка под композером: стилизована (раньше была без стилей) */
.md-hint{padding:0 16px 10px;font-size:11px;color:var(--vk-muted)}

/* --- 5. Нижняя навигация: 6 подписей на 390px слипались кромка в кромку --- */
.mobile-bar a span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){
  .mobile-bar a{font-size:9px;padding:6px 0}
}

/* =======================================================================
   R65 (v123): усиление UI/UX «Моих сообщений»
   ======================================================================= */

/* --- 1. Поиск по диалогам (мгновенный фильтр обеих вкладок) --- */
.mail-search{
  display:flex;align-items:center;gap:8px;margin:10px 16px;height:36px;
  padding:0 10px;border:1px solid var(--vk-border);border-radius:8px;background:var(--card);
  color:var(--vk-muted);transition:border-color .14s, box-shadow .14s;
}
.mail-search:focus-within{border-color:var(--vk-blue);box-shadow:0 0 0 3px rgba(74,118,168,.12)}
.mail-search input{
  flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;
  font:13px var(--font);color:var(--vk-text);
}
.mail-search input::-webkit-search-cancel-button{display:none}
.mail-q-x{
  border:none;background:var(--fill);color:var(--vk-muted);width:20px;height:20px;
  border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;transition:color .12s,background .12s;
}
.mail-q-x:hover{color:var(--vk-text);background:var(--line-soft, var(--fill))}
.mail-item[hidden]{display:none}
.mail-item .tx-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item.is-unread .mail-preview .nm{color:var(--vk-blue)}
.mail-item.is-unread .tx-t{font-weight:600;color:var(--vk-text)}
.mail-item:focus-visible,.mail-tab:focus-visible,.mail-new:focus-visible{outline:2px solid var(--vk-blue);outline-offset:-2px;border-radius:6px}
.mail-tab:focus-visible,.mail-new:focus-visible{outline-offset:2px}

/* --- 2. Он-лайн точка на аватаре в списке --- */
.mail-item .post-av .online-dot.abs{right:1px;bottom:1px;border-color:var(--card)}

/* --- 3. Разделитель «Непрочитанные сообщения» в диалоге --- */
.chat-unread{color:var(--vk-blue);text-transform:none;font-size:11.5px;letter-spacing:.2px}
.chat-unread::before,.chat-unread::after{background:rgba(74,118,168,.4)}

/* --- 4. Группировка подряд идущих сообщений (плотная упаковка) --- */
.chat-thread .bubble.cont{margin-top:-5px}

/* --- 5. Тёмная тема для нового --- */
html[data-theme="dark"] .mail-search{background:var(--fill);border-color:var(--line)}
html[data-theme="dark"] .mail-q-x{background:#2c3038}
html[data-theme="dark"] .mail-item.is-unread .tx-t{color:#e8eaed}
html[data-theme="dark"] .mail-item.is-unread .mail-preview .nm{color:#7aabde}
html[data-theme="dark"] .chat-unread{color:#7aabde}
html[data-theme="dark"] .chat-unread::before,html[data-theme="dark"] .chat-unread::after{background:rgba(122,171,222,.35)}

/* --- 6. Мобильная вёрстка поиска --- */
@media(max-width:520px){
  .mail-search{margin:8px 10px}
}

/* ==================== R66: «Мои сообщения» — композер, копирование, список ==================== */
.chat-field textarea{flex:1;min-width:0;border:none!important;background:transparent!important;box-shadow:none;min-height:40px;max-height:132px;padding:10px 6px;font:13px/20px var(--font);resize:none;overflow-y:auto;outline:none;display:block;color:var(--vk-text)}
.chat-field textarea:focus{outline:none}
.chat-field textarea::-webkit-scrollbar{width:4px}
.chat-field textarea::-webkit-scrollbar-thumb{background:rgba(128,140,155,.35);border-radius:2px}
/* ==================== R67: действия сообщения — пилюля на уровне строки времени ==================== */
/* Копировать/Реакция/Ответить/Изменить/Удалить — больше не куча в верхнем углу:
   плавающая пилюля сбоку от пузыря, по вертикали — на линии даты/времени (как в TG) */
.bubble .msg-acts{
  position:absolute;bottom:2px;display:inline-flex;align-items:center;gap:1px;padding:2px;
  background:var(--card);border:1px solid var(--vk-border);border-radius:15px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(3px);
  transition:opacity .18s ease .3s,transform .18s ease .3s;z-index:6;
}
.bubble:not(.mine) .msg-acts{left:calc(100% + 6px)}
.bubble.mine .msg-acts{right:calc(100% + 6px)}
.bubble:hover .msg-acts,.bubble:focus-within .msg-acts{opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
/* R68: мост от пузыря к пилюле — зазор больше не рывает hover, курсор доезжает всегда */
.bubble::after{content:"";position:absolute;top:0;bottom:0;z-index:-1}
.bubble:not(.mine)::after{right:-16px;width:22px}
.bubble.mine::after{left:-16px;width:22px}
/* R69: закреплённое сообщение — пилюля зафиксирована без hover, выбранное
   сообщение подсвечено аккуратной ВК-синей рамкой поверх обычной тени */
.bubble.pinned .msg-acts{opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.bubble.pinned{box-shadow:var(--shadow),0 0 0 2px rgba(74,118,168,.3);border-color:#9db4d0}
html[data-theme="dark"] .bubble.pinned{box-shadow:var(--shadow),0 0 0 2px rgba(74,118,168,.5);border-color:#4a76a8}
/* R85: индикатор игры в строке — чистый CSS (3 пульсирующих бара), без canvas и rAF */
.audio-row.audio-embed{position:relative}
.audio-row.audio-embed .aviz{display:none}
.audio-row.audio-embed.playing .aviz{
  display:block;position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none;
  background:
    linear-gradient(var(--brand,#4a76a8),var(--brand,#4a76a8)) 0 50%/3px 100% no-repeat,
    linear-gradient(var(--brand,#4a76a8),var(--brand,#4a76a8)) 6.5px 50%/3px 100% no-repeat,
    linear-gradient(var(--brand,#4a76a8),var(--brand,#4a76a8)) 13px 50%/3px 100% no-repeat;
  animation:avizPulse .8s ease-in-out infinite alternate;
}
.audio-row.audio-embed.playing.paused .aviz{animation-play-state:paused;opacity:.45}
@keyframes avizPulse{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.audio-row.audio-embed.playing .audio-name{padding-right:32px}
html[data-theme="dark"] .bubble .msg-acts{background:var(--fill);border-color:var(--line)}
@media (max-width:360px){.bubble .msg-acts{padding:1px;border-radius:13px}.bubble .msg-acts button,.bubble .msg-acts .msg-react{width:21px;height:21px}}
/* Копировать — иконка в пилюле */
.bubble .msg-copy{width:24px;height:24px;border:0;border-radius:50%;background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--vk-muted);cursor:pointer;padding:0;transition:background .15s,color .15s;line-height:1}
.bubble .msg-copy:hover{color:var(--vk-blue);background:rgba(74,118,168,.12)}
html[data-theme="dark"] .bubble .msg-copy:hover{color:#8ab1dd}
.mail-preview .tx .tx-mine{flex-shrink:0}

/* R92: обложка-плейлист как в ВК — одна карточка .post-audio-card:
   сверху обложка (фото или тёмная «альбомная» волна без фото), на ней
   ЕДИНСТВЕННАЯ кнопка пуска .pac-play, ниже — треклист (все треки) внутри
   той же карточки. Клик по самой обложке ничего не делает — дублей нет. */
.post-audio-card.is-gen .pc-art{position:absolute;inset:0}
.post-audio-card.is-gen .pc-art canvas{display:block;width:100%;height:100%}

/* R71: инлайн-редактирование записи на стене (R88: композер — единый с добавлением) */
.post.editing > :not(.post-head):not(.vd-composer){display:none}
.post .vd-composer{margin:10px 0 4px}
.pe-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.pe-vis{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--fill);color:var(--text);font-size:13px}
.pe-hint{font-size:12px;color:var(--vk-muted)}
.pe-cnt{margin-left:auto;font-size:12px;color:var(--vk-muted);font-variant-numeric:tabular-nums}
.pe-cnt.few{color:#c0392b}
html[data-theme="dark"] .pe-vis{background:var(--fill);border-color:var(--line)}

/* R71: Эфиры — афиша, сцена, чат */
.live-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.live-sec{margin-bottom:18px}
.live-sec:last-child{margin-bottom:0}
.live-sec-t{font-size:12px;font-weight:700;color:var(--vk-muted);margin:0 0 8px;letter-spacing:.4px;text-transform:uppercase}
.live-cards{display:flex;flex-direction:column;gap:8px}
.live-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel,#fff);color:inherit;text-decoration:none;position:relative}
.live-card:hover{border-color:#b7c9de;background:#f7fafd}
html[data-theme="dark"] .live-card:hover{background:var(--fill);border-color:#3a4a5c}
html[data-theme="dark"] .live-av{background:var(--fill2);color:var(--vk-link)}
html[data-theme="dark"] .live-badge{background:var(--fill2);color:var(--vk-link)}
html[data-theme="dark"] .wave-start{background:var(--fill)!important;color:var(--vk-link)!important;border-color:rgba(127,167,204,.45)!important}
html[data-theme="dark"] .wave-start:hover{color:#d7e6f5!important}
.live-av{width:40px;height:40px;border-radius:9px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#dfe7f0;font-size:13px;font-weight:700;color:#4a76a8}
.live-av img{width:100%;height:100%;object-fit:cover}
.live-body{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:84px}
.live-title{font-weight:600;line-height:1.3}
.live-host{font-size:12px;color:var(--vk-muted)}
.live-desc{font-size:12px;color:var(--vk-muted);line-height:1.35}
.live-meta{margin-top:2px}
.live-viewers{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--vk-muted)}
.live-viewers .ico{width:13px;height:13px}
.live-badge{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px;background:#e3eaf2;color:#4a76a8;letter-spacing:.4px;white-space:nowrap}
.live-badge.onair{background:#e5484d;color:#fff;animation:vdOnAir 1.6s ease-in-out infinite}
@keyframes vdOnAir{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
.live-empty{color:var(--vk-muted);font-size:13px;padding:4px 0}

/* сцена эфира */
.live-stage-wrap{padding:0}
.live-stage{position:relative;height:200px;border-radius:12px 12px 0 0;overflow:hidden;background:linear-gradient(180deg,#1c2531,#141b24)}
.live-stage canvas{display:block;width:100%;height:100%}
.live-overlay{position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;align-items:flex-start}
.live-viewers.big{display:inline-flex;align-items:center;gap:6px;background:rgba(20,27,36,.55);color:#dfe9f4;padding:4px 11px;border-radius:12px;font-size:12px}
.live-viewers.big .ico{width:14px;height:14px}
.live-viewers.big b{font-variant-numeric:tabular-nums}
.live-badge.big{position:static;font-size:12px;padding:4px 13px;border-radius:12px}
.live-track-line{position:absolute;left:12px;bottom:10px;right:12px;color:#cfe0f2;font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-head{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 6px}
.live-head-body{min-width:0}
.live-title1{font-size:18px;font-weight:700;line-height:1.25}
.live-sub{font-size:13px;color:var(--vk-muted)}
.live-host-ctl{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.live-desc1{padding:0 16px 12px;font-size:14px;white-space:pre-line;line-height:1.5}
.live-dj{margin:0 16px 14px;border:1px dashed #b7c9de;border-radius:10px;padding:10px 12px;background:#f4f8fc}
.live-dj-t{font-weight:700;font-size:13px;margin-bottom:8px}
.live-dj-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.live-dj-row select{flex:1;min-width:180px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text)}
.live-dj-hint{font-size:12px;color:var(--vk-muted);margin-top:6px}
html[data-theme="dark"] .live-dj{background:#1a222c;border-color:#2d3a49}

/* чат эфира */
.live-chat-panel .panel-b{padding-top:8px}
.live-chat{max-height:340px;min-height:80px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px 8px}
.live-msg{font-size:13.5px;line-height:1.45;word-break:break-word}
.live-msg b{color:var(--vk-blue)}
.live-msg.own b{color:#3d8b40}
html[data-theme="dark"] .live-msg.own b{color:#7dc98a}
.live-msg i{color:var(--vk-muted);font-style:normal;font-size:11px;margin-left:6px}
.live-msg-t{margin-left:6px}
.live-chat-form{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.live-chat-form input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--fill);color:var(--text);font:inherit}
.live-chat-form input:focus{outline:none;border-color:var(--vk-blue,#4a76a8)}
.live-cnt{font-weight:400;color:var(--vk-muted);font-size:12px;margin-left:6px}
.btn-danger{background:#e5484d;border-color:#e5484d;color:#fff}
.btn-danger:hover{background:#d13a3f}

/* создание эфира */
.live-new label.ln-f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;font-weight:600}
.live-new label.ln-f i{font-weight:400;color:var(--vk-muted)}
.live-new input,.live-new textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--fill);color:var(--text);font:inherit}
.live-new textarea{min-height:80px;resize:vertical}
.live-new input:focus,.live-new textarea:focus{outline:none;border-color:var(--vk-blue,#4a76a8)}

@media (max-width:480px){.live-stage{height:160px}.live-chat{max-height:280px}.live-body{padding-right:0}.live-badge{position:static;margin-top:4px;align-self:flex-start}.live-card{flex-wrap:wrap}}

/* R71c: кнопка подключения к эфиру (если браузер заблокировал автозвук) */
.live-join{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 6px 24px rgba(0,0,0,.4)}

/* R72: Эфиры 2.0 — пульт, реакции, закреп, пароль, сет-лист, запись */
.live-overlay-right{display:flex;gap:6px;align-items:center}
.live-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(20,27,36,.55);color:#dfe9f4;padding:4px 10px;border-radius:12px;font-size:12px;backdrop-filter:blur(2px)}
.live-chip.mic{color:#ffd7d9;background:rgba(229,72,77,.35);font-weight:700;letter-spacing:.4px}
.live-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-emo{position:absolute;bottom:8px;animation:vdFloat 2.6s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.35)}
@keyframes vdFloat{0%{transform:translateY(0) scale(.7);opacity:0}12%{opacity:1}100%{transform:translateY(-160px) translateX(-14px) scale(1.25);opacity:0}}
.live-reacts{position:absolute;right:10px;bottom:86px;display:flex;gap:6px}
.live-reacts button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,27,36,.55);font-size:17px;cursor:pointer;transition:transform .12s ease,background .12s ease;line-height:1}
.live-reacts button:hover{transform:scale(1.14);background:rgba(74,118,168,.75)}

/* пульт */
.console{margin:0 16px 14px;display:flex;gap:14px;border:1px solid #2d3a49;border-radius:12px;padding:12px;background:linear-gradient(180deg,#1d2632,#161d26);color:#cfe0f2}
.console-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:150px}
.console-col.wide{flex:1;min-width:220px}
.console-t{font-size:10.5px;font-weight:800;letter-spacing:1.2px;color:#7d94ad}
.console .mic-btn{width:58px;height:58px;border-radius:50%;border:2px solid #3a4a5c;background:#243040;color:#cfe0f2;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.console .mic-btn:hover{border-color:#5d7ea6;transform:scale(1.05)}
.console .mic-btn.on{background:#e5484d;border-color:#ff8a8e;color:#fff;box-shadow:0 0 22px rgba(229,72,77,.55);animation:vdMicPulse 1.5s ease-in-out infinite}
@keyframes vdMicPulse{0%,100%{box-shadow:0 0 14px rgba(229,72,77,.45)}50%{box-shadow:0 0 30px rgba(229,72,77,.75)}}
.vu{border-radius:4px;background:rgba(0,0,0,.35)}
.console-fader{display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:1px;color:#7d94ad;width:100%}
.console-fader input{width:100%;accent-color:#4a76a8}
.rec{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ff9ea2}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:vdRecBlink 1.1s steps(2) infinite}
@keyframes vdRecBlink{50%{opacity:.15}}
.console-kv{font-size:12.5px;color:#a9bdcf}
.console-kv b{color:#e8f1fa;font-variant-numeric:tabular-nums}
.console-hint{font-size:11.5px;color:#7d94ad;line-height:1.45}
.console .live-dj-row select{background:#243040;border-color:#3a4a5c;color:#cfe0f2}
html[data-theme="light"] .console{border-color:#c9d7e6}

/* закреплённое сообщение */
.live-pinned{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;margin-bottom:6px;border:1px solid #d9c98a;background:#fbf6e4;border-radius:9px;font-size:12.5px;line-height:1.4}
html[data-theme="dark"] .live-pinned{background:#2a2718;border-color:#5a5230;color:#e8dfc0}
.lp-ico{flex-shrink:0}
.lp-body{min-width:0;word-break:break-word}
.lp-x{margin-left:auto;border:0;background:none;cursor:pointer;font-size:15px;color:inherit;opacity:.6;padding:0 2px}
.lp-x:hover{opacity:1}

/* пин в сообщениях */
.live-msg{position:relative;padding-right:22px}
.lm-pin{position:absolute;right:0;top:1px;border:0;background:none;cursor:pointer;font-size:11px;opacity:0;transition:opacity .12s;padding:2px}
.live-msg:hover .lm-pin{opacity:.75}

/* печатает… */
.live-typing{font-size:12px;color:var(--vk-muted);min-height:16px;margin-top:4px;font-style:italic}

/* закрытый эфир */
/* R85: вкладки «Эфир / Пульт» на странице эфира */
.live-tabs{display:flex;gap:6px;margin:12px 0 0}
.live-tab{flex:1;max-width:240px;padding:9px 16px;border:1px solid var(--line);background:var(--fill);border-radius:9px;font-size:13.5px;font-weight:600;color:var(--vk-muted);cursor:pointer;transition:background .13s,color .13s,border-color .13s;font-family:inherit}
.live-tab:hover{color:var(--text);border-color:var(--vk-link,#4a76a8)}
.live-tab.is-on{background:var(--vk-link,#4a76a8);border-color:var(--vk-link,#4a76a8);color:#fff}
.live-pane{margin-top:12px;min-width:0}
.pult-empty{display:none;margin-top:12px;padding:20px 16px;color:var(--vk-muted);font-size:13px;text-align:center;border:1px dashed var(--line);border-radius:10px}
#live-console[hidden] ~ .pult-empty{display:block}
#live-console:not([hidden]) ~ .pult-empty{display:none}
.live-unlock{margin:0 16px 14px;border:1px solid #d9c98a;background:#fbf6e4;border-radius:10px;padding:14px 16px}
html[data-theme="dark"] .live-unlock{background:#2a2718;border-color:#5a5230}
.lu-t{font-weight:700;margin-bottom:4px}
.lu-s{font-size:13px;color:var(--vk-muted);margin-bottom:10px}
.live-unlock form{display:flex;gap:8px}
.live-unlock input{flex:1;max-width:240px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--fill);color:var(--text)}
.lu-err{margin-top:8px;font-size:12.5px;color:#c0392b;font-weight:600}

/* запись и сет-лист */
.live-recording{margin:0 16px 14px}
.lr-t,.lt-t{font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--vk-muted);text-transform:uppercase;margin-bottom:6px}
.live-tracklist{margin:0 16px 14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--fill)}
.lt-row{font-size:13px;padding:3px 0;line-height:1.4}
.lt-row i{font-style:normal;color:var(--vk-muted);display:inline-block;width:38px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.console{flex-direction:column}.console-col{width:100%}}

/* ===== R73: сведение микрофон+трек ===== */
.live-console-row{display:flex;align-items:center;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.console-toggle{font-size:9.5px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:6px;border:1px solid #3a4a5c;background:#243040;color:#7d94ad;cursor:pointer}
.console-toggle.on{border-color:#4a76a8;background:#2c3d52;color:#a8c6e6}
.duck-ind{font-size:10.5px;font-weight:700;color:#e8c15a;letter-spacing:.02em}

/* ==================== R74: обложки, камера, DJ Трактор ==================== */
/* обложка эфира на сцене (простой: анонс/архив) */
.live-cover-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(9,14,21,.90),rgba(14,26,42,.80));z-index:1;pointer-events:none}
.lcp-inner{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:0 24px}
.lcp-kicker{font-size:10px;font-weight:800;letter-spacing:2.6px;color:#7fa6d0;text-transform:uppercase}
.lcp-title{font-size:23px;font-weight:800;color:#eaf2fb;text-shadow:0 2px 16px rgba(0,0,0,.55);line-height:1.25}
.lcp-host{font-size:12.5px;color:#a9bdcf}
/* видео у зрителя — поверх холста, под оверлеями */
.live-stage canvas{z-index:0}
.live-cam-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#0b0f15}
.live-stage.has-video #live-stage-cv{opacity:.22}
.live-floats,.live-overlay,.live-track-line,.live-reacts{z-index:2}
.live-cam-prev{position:absolute;right:14px;bottom:14px;width:184px;aspect-ratio:4/3;border-radius:10px;border:1px solid rgba(255,255,255,.24);box-shadow:0 6px 24px rgba(0,0,0,.5);transform:scaleX(-1);z-index:3;background:#000;object-fit:cover}
/* колонка КАМЕРА на пульте */
.cam-btn{width:58px;height:58px;border-radius:50%;border:2px solid #3a4a5c;background:#243040;color:#cfe0f2;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.cam-btn:hover{border-color:#5d7ea6;transform:scale(1.05)}
.cam-btn.on{background:#2e7d43;border-color:#7fd698;color:#fff;box-shadow:0 0 22px rgba(63,180,103,.5);animation:vdCamPulse 2s ease-in-out infinite}
@keyframes vdCamPulse{0%,100%{box-shadow:0 0 10px rgba(63,180,103,.35)}50%{box-shadow:0 0 26px rgba(63,180,103,.6)}}
.cam-state{font-size:11.5px;font-weight:700;color:#8ba3ba}
.cam-btn.on + .cam-state{color:#9fe0b2}
/* DJ Трактор: кнопка и чип */
.console-toggle.dj{letter-spacing:.8px}
.console-toggle.dj.on{border-color:#3f9e5c;background:#23442e;color:#9fe0b2}
.live-chip.dj{color:#9fe0b2;border-color:rgba(99,190,132,.55)}
.live-chip.cam{color:#ffd47f;border-color:rgba(232,193,90,.55)}
/* обложки карточек афиши */
.lc-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:84px;margin:-1px -1px 9px;border-radius:10px 10px 0 0;padding:10px 12px;overflow:hidden;background:linear-gradient(140deg,#274a72,#4a76a8)}
.live-cards .live-card:nth-child(4n+2) .lc-cover{background:linear-gradient(140deg,#1f5c50,#3d8f7a)}
.live-cards .live-card:nth-child(4n+3) .lc-cover{background:linear-gradient(140deg,#463b6e,#7a5fa8)}
.live-cards .live-card:nth-child(4n+4) .lc-cover{background:linear-gradient(140deg,#6e3b3b,#a85f5f)}
.lcc-kick{font-size:9px;font-weight:800;letter-spacing:1.6px;color:rgba(255,255,255,.75);text-transform:uppercase}
.lcc-title{font-size:14.5px;font-weight:800;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4);line-height:1.25}
.lcc-dj{position:absolute;top:9px;left:12px;font-size:9px;font-weight:800;letter-spacing:1px;color:#c9f2d6;background:rgba(24,60,38,.65);border:1px solid rgba(120,220,160,.5);border-radius:6px;padding:2px 6px}
.lcc-eq{position:absolute;top:10px;right:12px;display:flex;gap:2px;align-items:flex-end;height:16px}
.lcc-eq i{width:3px;background:rgba(255,255,255,.9);transform-origin:bottom;animation:lccEq .9s ease-in-out infinite}
.lcc-eq i:nth-child(1){height:60%;animation-delay:0s}
.lcc-eq i:nth-child(2){height:100%;animation-delay:.15s}
.lcc-eq i:nth-child(3){height:42%;animation-delay:.3s}
.lcc-eq i:nth-child(4){height:82%;animation-delay:.45s}
@keyframes lccEq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
/* сет-лист: треки DJ Трактора */
.lt-dj{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;color:#2f7a49;background:#e2f4e8;border:1px solid #bfe3cb;border-radius:5px;padding:1px 6px;margin-right:6px}
/* видео-запись эфира в архиве */
.live-rec-video{width:100%;max-height:360px;border-radius:10px;background:#000;display:block}
/* живость чата эфира */
.live-msg{animation:liveMsgIn .18s ease}
@keyframes liveMsgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ==================== R75: ГОСТИ В ЭФИРЕ (WebRTC) ==================== */
/* строка «в эфире с гостями» на сцене */
.live-guests-line{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:13.5px;font-weight:700;color:#b9e6c3;text-shadow:0 1px 10px rgba(0,0,0,.6);z-index:2;pointer-events:none}
/* кнопка «Стать гостем» у зрителя (под сценой) */
.live-guest-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 2px;flex-wrap:wrap}
.live-guest-btn{background:#2e7d43;border-color:#3f9e5c;color:#fff}
.live-guest-btn:hover{background:#34934d;border-color:#5cc47a}
.live-guest-btn.on{background:#1f5c50;border-color:#3d8f7a;box-shadow:0 0 14px rgba(63,180,132,.35)}
.live-guest-btn:disabled{opacity:.55;cursor:default}
.lg-note{font-size:12px;color:#5d7288}
/* колонка ГОСТИ на пульте */
.guest-list{display:flex;flex-direction:column;gap:6px;max-height:168px;overflow-y:auto;min-height:52px;justify-content:flex-start}
.guest-empty{font-size:11.5px;color:#5d7288;padding:6px 2px}
.lg-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #3a4a5c;border-radius:8px;background:#1b2530;font-size:12px;color:#cfe0f2;animation:liveMsgIn .18s ease}
.lg-row.st-requested{border-color:#8a6d3b;background:#2a2318}
.lg-row.st-live{border-color:#2e5d3f}
.gr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.gr-acts{display:flex;gap:5px}
.gr-btn{width:24px;height:24px;border-radius:6px;border:1px solid #3a4a5c;background:#243040;color:#cfe0f2;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .12s ease;flex-basis:24px;padding:0}
.gr-btn.ok{border-color:#3f9e5c;color:#9fe0b2}
.gr-btn.ok:hover{background:#2e7d43;color:#fff}
.gr-btn.no:hover{background:#8a3038;border-color:#e5484d;color:#fff}
.gr-btn.mute.on{border-color:#b3862d;background:#3a2f14;color:#ffd47f}
.gr-btn.mute:hover{border-color:#e8c15a}
.gr-vu{width:54px;height:10px;flex-basis:54px;border-radius:3px;background:rgba(255,255,255,.05)}
.gr-vol{width:72px;flex-basis:72px;accent-color:#4a76a8;cursor:pointer}
.gr-wait{font-size:11px;color:#8ba3ba;animation:vdCamPulse 1.6s ease-in-out infinite}
/* мобильная колонка гостей */
@media (max-width:640px){
  .gr-vol{width:52px;flex-basis:52px}
  .gr-vu{display:none}
  .live-guests-line{bottom:56px;font-size:12px}
}

/* ============================================================
   R76: адаптив пульта, сетка эфира (сцена+чат), репетиция,
   фильтры камеры, инвайт гостей, атмосфера сцены, Помощь/FAQ
   ============================================================ */

/* ---- пульт: стабильная сетка вместо сжатого flex (5 колонок не влезали) ---- */
/* сетка пульта — по ШИРИНЕ самого пульта (container query), а не вьюпорта */
.live-stage-panel{container-type:inline-size}
.console{display:grid;grid-auto-flow:dense;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"mic cam" "track track" "guests guests" "ether ether";align-items:start}
.console-col{min-width:0}
.c-mic{grid-area:mic}
.c-track{grid-area:track}
.c-cam{grid-area:cam}
.c-guests{grid-area:guests}
.c-ether{grid-area:ether}
.console-fader select{width:100%;padding:6px 8px;border:1px solid #3a4a5c;border-radius:7px;background:#243040;color:#cfe0f2;font-size:12px}
@container (min-width:880px){
  .console{grid-template-columns:minmax(200px,232px) minmax(0,1fr) minmax(200px,232px);grid-template-areas:"mic track cam" "guests guests ether"}
}
@media (max-width:640px){
  .console{grid-template-columns:1fr;grid-template-areas:"mic" "track" "cam" "guests" "ether"}
}

/* ---- сцена выше, видео 16:9, оверлеи не ломаются ---- */
.live-stage{height:224px}
.live-stage.has-video{height:auto;aspect-ratio:16/9;max-height:78vh}
.live-overlay{flex-wrap:wrap;gap:6px}
.live-overlay-right{flex-wrap:wrap;justify-content:flex-end}
.live-host-ctl{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){
  .live-stage{height:172px}
  .live-cam-prev{width:124px;right:10px;bottom:10px}
  .live-chip{font-size:11px;padding:3px 8px}
}
@media (max-width:400px){
  .gr-vol{flex:1 1 100%;width:auto}
  .lg-row{flex-wrap:wrap}
}

/* R78: планшетная зона 761–900px — топ-навбар вылезал за экран (гор.скролл
   на ВСЕХ страницах, 851px при 768px вьюпорте). Поджимаем поиск, прячем
   бейдж «онлайн», уплотняем ссылки — по стилю это ещё десктоп. */
@media (max-width:900px) and (min-width:761px){
  .top-search-wrap{flex:0 1 150px;min-width:110px}
  .top-search{max-width:none}
  .online-stat{display:none}
  .top-nav a{padding:10px 6px;font-size:12.5px}
  .top-nav .logout-form button{padding:10px 7px;font-size:12.5px}
}

/* ---- R78: чат эфира ВСЕГДА под сценой. Контейнер сайта больше не
   расширяется ради чат-колонки (было max-width:1380px — «прыжок» ширины
   всей страницы) и не sticky: страница эфира той же ширины, что и весь сайт ---- */
.live-grid>.live-chat-panel{margin-top:16px}
.live-grid>.live-chat-panel .panel-b{display:flex;flex-direction:column}
@media (min-width:1200px){
  .live-grid .live-chat{max-height:460px}
  .live-stage{height:264px}
}

/* ---- репетиция: янтарный бейдж и кант пульта ---- */
.live-badge.rh{background:#b3862d;color:#fff;animation:none}
.console.rh-mode{border-color:#8a6d3b;box-shadow:0 0 0 1px rgba(190,148,74,.35)}
.console-toggle#live-mon-btn.on{border-color:#b3862d;background:#3a2f14;color:#ffd47f}

/* ---- фильтры камеры: свотчи с превью эффекта ---- */
.cam-filters{display:flex;gap:5px;flex-wrap:wrap}
.cam-f{width:26px;height:26px;border-radius:8px;border:1px solid #3a4a5c;cursor:pointer;padding:0;background:linear-gradient(135deg,#e8b64c 0%,#7a5fa8 55%,#4a76a8 100%);transition:transform .12s ease,box-shadow .12s ease}
.cam-f:hover{transform:scale(1.12)}
.cam-f.on{box-shadow:0 0 0 2px rgba(122,168,232,.85);border-color:#9dc0e8}
.cam-f[data-f="warm"]{filter:saturate(1.5) sepia(.3) hue-rotate(-8deg)}
.cam-f[data-f="cold"]{filter:saturate(1.15) hue-rotate(18deg) brightness(1.08)}
.cam-f[data-f="bw"]{filter:grayscale(1) contrast(1.1)}
.cam-f[data-f="sepia"]{filter:sepia(.75) saturate(1.25)}
.cam-f[data-f="vivid"]{filter:saturate(1.9) contrast(1.15)}
.cam-f[data-f="noir"]{filter:grayscale(1) contrast(1.45) brightness(.9)}
.cam-f[data-f="invert"]{filter:invert(1) hue-rotate(180deg)}

/* ---- инвайт гостя из зрителей ---- */
.console-invite{width:100%;box-sizing:border-box;border:1px dashed #3a4a5c;border-radius:8px;padding:7px 8px;background:rgba(36,48,64,.5)}
.console-invite[hidden]{display:none}
.ci-t{font-size:10.5px;font-weight:800;letter-spacing:.8px;color:#7d94ad;margin-bottom:5px;text-transform:uppercase}
.ci-list{display:flex;flex-direction:column;gap:4px;max-height:118px;overflow-y:auto}
.ci-row{display:flex;align-items:center;gap:8px}
.ci-name{flex:1;min-width:0;font-size:12px;color:#cfe0f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-btn{flex-basis:auto;padding:3px 10px;font-size:11px;font-weight:700;border-radius:6px;border:1px solid #3f9e5c;background:#23442e;color:#9fe0b2;cursor:pointer;white-space:nowrap}
.ci-btn:hover{background:#2e7d43;color:#fff}

/* ---- Помощь / FAQ ---- */
.help-hero{padding:18px 20px}
.help-hero h1{font-size:22px;margin:0 0 6px}
.help-hero p{color:var(--vk-muted);font-size:13.5px;line-height:1.55;margin:0 0 14px;max-width:640px}
.help-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.help-toc a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--vk-blue);background:var(--fill)}
.help-toc a:hover{border-color:var(--vk-blue)}
/* R85: Помощь по вкладкам */
.help-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:2px;background:var(--fill);border-radius:11px}
.help-tab{flex:1 1 auto;min-width:96px;padding:8px 12px;border:0;background:transparent;border-radius:9px;font-size:13px;font-weight:600;color:var(--vk-muted);cursor:pointer;font-family:inherit;transition:background .13s,color .13s;white-space:nowrap}
.help-tab:hover{color:var(--text)}
.help-tab.is-on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,30,60,.12)}
html[data-theme="dark"] .help-tab.is-on{background:var(--fill2,#3a3d44);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.help-sec[hidden]{display:none}
.help-tabpane-hint{color:var(--vk-muted);font-size:12px;margin:0 0 14px}
.help-sec{margin:0 0 30px}
.help-sec h2{font-size:17.5px;margin:0 0 4px;scroll-margin-top:60px}
.help-lead{color:var(--vk-muted);font-size:13.5px;line-height:1.55;margin:0 0 10px}
.help-ol{margin:0 0 12px;padding-left:20px;color:var(--text);font-size:13.5px;line-height:1.6}
.help-ol li{margin:3px 0}
.help-ol li b{color:var(--text)}
.help-shot{margin:10px 0 4px}
.help-shot img{width:100%;border:1px solid var(--line);border-radius:10px;display:block;background:#0d1420}
.help-cap{font-size:12px;color:var(--vk-muted);margin-top:5px;line-height:1.45}
.help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:0 0 12px}
.help-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--fill)}
.help-card b{display:block;margin-bottom:4px;font-size:13.5px}
.help-card span{font-size:12.5px;color:var(--vk-muted);line-height:1.5}
.help-kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel,#fff);font-size:11.5px}
@media (max-width:640px){.help-toc a{font-size:11.5px;padding:5px 9px}}

/* ============================================================
   R77: DJ-пульт заметен — рубильник с лампой, строка «что крутит»,
   подсказка на запланированном эфире
   ============================================================ */
.dj-switch{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:1px solid #3a4a5c;border-radius:9px;background:#243040;color:#cfe0f2;font-size:12.5px;font-weight:800;letter-spacing:.6px;cursor:pointer;transition:border-color .15s ease,background .15s ease;text-align:left}
.dj-switch:hover{border-color:#5d7ea6}
.dj-switch .djs-text{flex:1;min-width:0}
.dj-switch b{color:#7d94ad}
.djs-lamp{width:10px;height:10px;flex-basis:10px;border-radius:50%;background:#46586a;box-shadow:inset 0 0 3px rgba(0,0,0,.55);transition:background .15s ease,box-shadow .15s ease}
.dj-switch.on{border-color:#3f9e5c;background:#23442e;color:#9fe0b2}
.dj-switch.on b{color:#c9f2d6}
.dj-switch.on .djs-lamp{background:#5fe08a;box-shadow:0 0 10px rgba(95,224,138,.85)}
.dj-switch:disabled{opacity:.5;cursor:default}
.dj-now{font-size:11.5px;font-weight:700;color:#9fe0b2;line-height:1.4;word-break:break-word}
.live-soon-hint{margin:0 16px 14px;border:1px dashed var(--line);border-radius:10px;padding:11px 14px;background:var(--fill);color:var(--vk-muted);font-size:13px;line-height:1.55}
.live-soon-hint b{color:var(--text)}

/* ===== R83: тулбар/предпросмотр редактора поста + видео-гость ===== */
.pe-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 8px}
.pe-tbtn{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--fill);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.pe-tbtn:hover{background:var(--hover)}
.pe-tbtn.act{border-color:var(--vk-blue,#4a76a8);color:var(--vk-blue,#4a76a8)}
.pe-prebtn{margin-left:auto;font-weight:500}
.pe-preview{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--card);margin-bottom:8px;overflow-wrap:anywhere}
.pe-cnt{margin-left:auto;color:var(--vk-muted);font-size:12px}
.lg-cam{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;user-select:none}
.lg-cam input{accent-color:var(--vk-blue,#4a76a8)}
.guest-cam-tile{position:absolute;right:12px;bottom:12px;width:200px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);background:#0b0e12;z-index:5}
.guest-cam-tile video{width:100%;height:100%;object-fit:cover;display:block}
.guest-cam-name{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px}
@media (max-width:620px){.guest-cam-tile{width:140px;right:8px;bottom:8px}}
/* R83 */

/* R92: единая карточка «обложка + плейлист» как в ВК (заменяет .post-cover-audio
   и .post-audios.joined): обложка сверху (фото или тёмная «альбомная» волна),
   ЕДИНСТВЕННАЯ кнопка пуска .pac-play по центру обложки, треклист — внутри той же
   карточки. Клик по самой обложке ничего не делает — дублей пуска нет. */
.post-audio-card{margin-top:10px;border-radius:8px;overflow:hidden;border:1px solid var(--vk-border);background:var(--card)}
.pac-cover{position:relative;background:#0d1117}
.pac-cover img{width:100%;display:block;max-height:340px;object-fit:cover}
.pac-cover .pc-art{position:absolute;inset:0}
.post-audio-card.is-gen .pac-cover{height:140px;background:linear-gradient(180deg,#2b3d52,#1a2531)}
.pac-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:rgba(15,23,36,.55);color:#fff;backdrop-filter:blur(2px);
  transition:background .15s ease,transform .12s ease;
}
.pac-play svg{width:20px;height:20px;display:block;margin-left:2px}
.pac-play:hover{background:rgba(15,23,36,.75);transform:translate(-50%,-50%) scale(1.05)}
.post-audio-card.playing .pac-play{background:var(--brand,#4a76a8)}
.pac-list{display:flex;flex-direction:column;background:var(--card);border-top:1px solid var(--vk-border)}
.pac-list .audio-row.audio-embed{max-width:none;background:none;border:0;border-radius:0;margin:0;padding:8px 10px;gap:9px}
.pac-list .audio-row.audio-embed:hover{background:var(--bg-soft,#EDF2F7)}
[data-theme="dark"] .pac-list{background:#22252a;border-color:#3a3f46}
[data-theme="dark"] .pac-list .audio-row.audio-embed:hover{background:#2a2f36}
.pac-list .audio-play{width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;color:var(--vk-link)}
.pac-list .audio-play svg{width:15px;height:15px;display:block}
.pac-list .audio-row.playing .audio-play{color:var(--brand)}
.pac-list .audio-name{font-weight:600;font-size:13px;color:var(--vk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.pc-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.28)}
.pc-fill{display:block;width:0;height:100%;background:var(--brand);transition:width .2s linear}
.post-audio-card .aviz{display:none}
/* ===== R84: медиатека — треки списком, а не плитками ===== */
.vdm-list{display:flex;flex-direction:column;gap:6px}
.vdm-list .vdm-cell-a{position:relative;aspect-ratio:auto;height:auto;display:flex;align-items:center;gap:10px;padding:9px 12px;text-align:left}
.vdm-list .vdm-cell-a .vdm-cap{position:static;color:var(--vk-text);background:none;padding:0;font-size:13px;flex:1 1 auto;min-width:0}
.vdm-list .vdm-cell-a .vdm-tick{position:static;flex:0 0 auto;margin-left:auto}
.vdm-list .vdm-cell-a .vdm-aico{flex:0 0 auto;color:var(--vk-muted)}
.vdm-list .vdm-cell-a:hover{background:var(--hover)}
.vdm-list .vdm-cell-a.on{background:var(--tint-hover)}
/* R84: двойной паддинг панелей модалки (body 16 + pane 14) */
.vdm-pane{padding:0;min-height:140px}

/* ---- R87: кнопка «Зарегистрироваться» в карточке входа на герое — единая точка
   регистрации на всех экранах (в гостевой шапке остаётся только «О проекте») ---- */
.hero-reg{
  display:flex;align-items:center;justify-content:center;
  margin-top:12px;height:42px;border-radius:8px;
  background:var(--vk-blue);color:#fff!important;
  font-weight:600;font-size:14px;text-decoration:none!important;
  transition:background .15s,transform .12s;
}
.hero-reg:hover{background:#3d6a9e}
.hero-reg:active{transform:translateY(1px)}

/* ==================== R93: цитирование выделением (пузырь) и окно «Поделиться» ==================== */
/* Плавающая кнопка «Цитировать» возле выделения: брендовая пилюля, position:fixed — не плывёт при прокрутке */
.vd-sel-quote{
  position:fixed;z-index:2600;border:0;background:var(--brand,#4a76a8);color:#fff;
  font:600 12.5px var(--font);padding:8px 14px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-pop);
  animation:vd-sq-in .14s ease;
}
.vd-sel-quote:hover{background:var(--brand-dark,#3e6691);color:#fff}
@keyframes vd-sq-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Пузырь прикреплённой цитаты в форме комментария (над полем) */
.c-quote-bubble{
  flex-basis:100%;display:flex;align-items:flex-start;gap:8px;
  background:var(--brand-tint);border-left:3px solid var(--brand);
  border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.4;margin-bottom:2px;
}
.cqb-ico{flex-shrink:0;color:var(--brand);margin-top:2px}
.cqb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.cqb-name{color:var(--brand-dark);font-size:11.5px}
.cqb-tx{color:var(--vk-text);white-space:pre-wrap;word-break:break-word}
.cqb-x{background:none;border:0;cursor:pointer;color:var(--vk-muted);padding:3px;border-radius:50%;display:inline-flex;flex-shrink:0}
.cqb-x:hover{background:rgba(0,0,0,.07);color:var(--vk-text)}
[data-theme="dark"] .cqb-x:hover{background:rgba(255,255,255,.09)}

/* Цитата внутри опубликованного комментария */
.c-quote-ref{
  display:flex;align-items:flex-start;gap:6px;margin-top:5px;
  background:var(--brand-tint);border-left:3px solid var(--brand);border-radius:6px;
  padding:5px 8px;font-size:12px;line-height:1.4;text-align:left;
}
.cqr-ico{flex-shrink:0;color:var(--brand);margin-top:2px}
.cqr-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.cqr-name{color:var(--brand-dark);font-size:11.5px}
.cqr-tx{color:var(--vk-text);white-space:pre-wrap;word-break:break-word}

/* Окно «Поделиться» — отправка записи в ЛС */
.vd-share{position:fixed;inset:0;z-index:2700;display:flex;align-items:center;justify-content:center;padding:16px}
.vd-share-bg{position:absolute;inset:0;background:rgba(9,12,16,.55);animation:vd-fade .15s ease}
.vd-share-card{
  position:relative;width:100%;max-width:360px;max-height:min(70vh,480px);display:flex;flex-direction:column;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden;
  animation:vd-pop .16s ease;
}
.vd-share-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.vd-share-x{background:none;border:0;color:var(--vk-muted);cursor:pointer;padding:4px;border-radius:50%;display:inline-flex}
.vd-share-x:hover{background:var(--hover);color:var(--vk-text)}
.vd-share-search{padding:10px 12px 8px}
.vd-share-search input{width:100%;height:36px;border:1px solid var(--vk-border);border-radius:10px;padding:0 12px;font:13px var(--font);background:var(--field)}
.vd-share-search input:focus{outline:none;border-color:var(--brand);background:var(--card)}
.vd-share-list{overflow-y:auto;padding:2px 6px 10px}
.sh-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;padding:8px 10px;border-radius:10px;font:13px var(--font);color:var(--vk-text);text-align:left}
.sh-item:hover{background:var(--hover)}
.sh-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(145deg,#9EBBD6,var(--vk-blue));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.sh-av img{width:100%;height:100%;object-fit:cover}
.sh-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-share-empty{padding:18px;text-align:center;color:var(--vk-muted);font-size:12.5px}
@keyframes vd-fade{from{opacity:0}to{opacity:1}}
@keyframes vd-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .vd-share{align-items:flex-end;padding:0}
  .vd-share-card{max-width:none;border-radius:14px 14px 0 0;max-height:76vh}
}
/* ==================== end R93 ==================== */
/* ===== R104: стена — UI/UX полировка + индикаторы плеера ===== */

/* Играющий трек на стене: имя в цвет бренда, строка мягко подсвечена,
   между треками — спокойные разделители (карточка-плейлист читается) */
.pac-list .audio-row.playing .audio-name{color:var(--brand)}
.pac-list .audio-row.playing{background:var(--tint-hover)}
.pac-list .audio-row.audio-embed + .audio-row.audio-embed{border-top:1px solid var(--line-soft)}

/* Прогресс на обложке-плейлисте: чуть заметнее, ход плавный */
.pc-progress{height:4px;background:rgba(255,255,255,.24)}
.pc-fill{transition:width .15s linear}

/* Ряд действий записи: пилюли получают аккуратный ховер-фон (контактная зона видна) */
.post-acts .act-btn{transition:background .12s,color .12s}
.post-acts .act-btn:hover{background:var(--tint-hover)}

/* Фото записей: мягкий радиус, рамка деликатнее */
.post-img{border-radius:8px}
.post-img.sm{border-radius:6px}
.post-gallery{border-radius:10px}

/* Комментарии: пузырь с «хвостиком» к аватару — живее и современнее */
.comment-body{border-radius:10px 10px 10px 3px}

/* Ссылка-время записи: ховер подчёркивает кликабельность всей шапки */
.post-time-link{text-decoration:none}
.post-time-link:hover{text-decoration:underline}
[data-theme="dark"] .audio-bar{
  background:rgba(24,27,32,.97);
  border-top-color:#3a3f46;
  box-shadow:0 -4px 20px rgba(0,0,0,.45);
}
[data-theme="dark"] .ab-title{color:#e8eaed}
[data-theme="dark"] .ab-progress{background:#33383f}
[data-theme="dark"] .ab-skip,[data-theme="dark"] .ab-close{color:#9aa0a6}
[data-theme="dark"] .ab-skip:hover{color:#8fb6e0;background:rgba(143,182,224,.12)}
[data-theme="dark"] .ab-close:hover{color:#e57373}
[data-theme="dark"] .ab-ico{color:#9aa0a6}
[data-theme="dark"] .ab-ico:hover{color:#8fb6e0}
[data-theme="dark"] .ab-vol{color:#9aa0a6}
[data-theme="dark"] #ab-vol{accent-color:#7ca3d0}









/* ==================== v168 (R105): детальная модернизация UI/UX ====================
   Приоритеты владельца: без лишних слоёв и теней, hover ярче фона, чистые радиусы,
   современная тактильность (Telegram/VK-уровень), паритет тёмной темы через переменные.
   ==================== */

/* 0) Латание селекторов [hidden], повреждённых прошлыми правками (съедено "[h" -> "idden").
   Невалидный селектор = правило выброшено браузером: dead-коды и баги в Firefox/Safari.
   + глобальная гарантия: атрибут hidden сильнее любого авторского display. */
[hidden]{display:none!important}
.lightbox[hidden]{display:none!important}
.pv-overlay[hidden]{display:none}
.vd-media-modal[hidden]{display:none}
.chat-attach[hidden]{display:none}
.set-pane[hidden]{display:none}
.poll-editor[hidden]{display:none}
.graffiti-modal[hidden]{display:none!important}
.chat-reply-bar[hidden]{display:none}
.gift-fly[hidden]{display:none}
.pe-add[hidden]{display:none}
.pe-hint[hidden]{display:none}
.vd-usercard[hidden]{display:none}
.mail-item[hidden]{display:none}
#live-console[hidden] ~ .pult-empty{display:block}
#live-console:not([hidden]) ~ .pult-empty{display:none}
.console-invite[hidden]{display:none}
.help-sec[hidden]{display:none}

/* 1) Токены формы (радиусы) и фокуса — единая геометрия по сайту */
:root{
  --r-md:8px;    /* аватары, мелкие блоки */
  --r-lg:12px;   /* карточки, панели */
  --focus-ring:0 0 0 3px rgba(74,118,168,.16);
}
html[data-theme="dark"]{ --focus-ring:0 0 0 3px rgba(127,167,204,.22); }

/* Клавиатурный фокус — заметное аккуратное кольцо (мышь не мешаем) */
:focus-visible{outline:2px solid var(--brand,#4a76a8);outline-offset:2px}

/* 2) Карточки: единый мягкий радиус (панели/посты/друг-карты) */
.panel{border-radius:var(--r-lg)}
.friend-card{border-radius:var(--r-md)}
.pager.panel{border-radius:var(--r-lg)}

/* 3) Записи на стене */
.post-av{border-radius:var(--r-md);transition:box-shadow .18s ease}
.post:hover .post-av{box-shadow:0 0 0 2px var(--brand-tint)}
.post-author{transition:color .12s ease}
.post-img{border-radius:var(--r-md)}
.post-img img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.post-img:hover img{transform:scale(1.015)}
.post-gallery{border-radius:var(--r-md);overflow:hidden}
.pg-cell img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.pg-cell:hover img{transform:scale(1.02)}
.link-preview{border-radius:var(--r-md);transition:border-color .15s ease,background .15s ease}
.link-preview:hover{border-color:var(--vk-blue)}

/* 4) Ряд действий: тактильные пилюли */
.act-btn{transition:background .13s ease,color .13s ease,transform .06s ease}
.act-btn:active{transform:scale(.94)}
.react-btn .react-ico{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.react-btn:hover .react-ico{transform:scale(1.16)}
.btn-icon{transition:color .12s ease,background .12s ease,transform .06s ease}
.btn-icon:active{transform:scale(.92)}

/* 5) Комментарии: пузыри с мягким хвостиком, форма-пилюля с кольцом фокуса */
.comment-body{border-radius:10px 10px 10px 3px;transition:background .13s ease}
.comment:hover .comment-body{background:var(--hover)}
.comment-av{border-radius:6px}
.comment-form textarea[name=text]{
  border-radius:20px;padding:8px 14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.comment-form textarea[name=text]:focus{box-shadow:var(--focus-ring)}
.comment-form input{border-radius:10px}
/* Форма комментария никогда не прячется под фикс-барами (шапка 48, плеер/таббар 56):
   scroll-margin уважается scrollIntoView — корень бага «форма недоступна при цитировании» */
.comment-form,.comment-form textarea[name=text]{scroll-margin-top:60px;scroll-margin-bottom:72px}

/* 6) Композер записи */
.wall-form textarea{border-radius:10px}

/* 7) Боковое меню: активный пункт — брендовая подложка, иконка оживает */
.side a{border-radius:var(--r-md)}
.side a.is-on{background:var(--brand-tint);color:var(--brand)}
.side-ico{transition:transform .15s ease,opacity .15s ease}
.side a:hover .side-ico{transform:translateX(1px)}

/* 8) Шапка: поиск расширяется, кольцо фокуса; вкладки плавнее */
.top-search{border-radius:8px;transition:background .15s ease,box-shadow .15s ease}
.top-search:focus{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.top-nav a{transition:background .12s ease}

/* 9) Кнопки: микро-подъём без перегруза */
.btn{transition:background .13s ease,transform .06s ease,box-shadow .13s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(43,88,122,.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-sec:hover{box-shadow:none}

/* 10) Выделение текста — брендовый тинт */
::selection{background:rgba(74,118,168,.24)}

/* 11) Серверные сообщения: вариант warning (был только success/error) */
.vd-m-warning{border-left-color:#b8860b}

/* 12) Мобильные фикс-бары: safe-area iPhone */
@media(max-width:760px){
  .audio-bar{height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar{height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* 13) Доступность: уважение к reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* 14) Тёмная тема: паритет новых поверхностей (радиусы наследуют, кольца — токены) */
html[data-theme="dark"] .comment:hover .comment-body{background:var(--fill2)}
html[data-theme="dark"] .btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.45)}
/* ==================== конец v168 ==================== */
/* ==================== v168 (R105): детальная модернизация UI/UX ====================
   Приоритеты владельца: без лишних слоёв и теней, hover ярче фона, чистые радиусы,
   современная тактильность (Telegram/VK-уровень), паритет тёмной темы через переменные.
   ==================== */

/* 0) Латание селекторов [hidden], повреждённых прошлыми правками (съедено "[h" -> "idden").
   Невалидный селектор = правило выброшено браузером: dead-коды и баги в Firefox/Safari.
   + глобальная гарантия: атрибут hidden сильнее любого авторского display. */
[hidden]{display:none!important}
.lightbox[hidden]{display:none!important}
.pv-overlay[hidden]{display:none}
.vd-media-modal[hidden]{display:none}
.chat-attach[hidden]{display:none}
.set-pane[hidden]{display:none}
.poll-editor[hidden]{display:none}
.graffiti-modal[hidden]{display:none!important}
.chat-reply-bar[hidden]{display:none}
.gift-fly[hidden]{display:none}
.pe-add[hidden]{display:none}
.pe-hint[hidden]{display:none}
.vd-usercard[hidden]{display:none}
.mail-item[hidden]{display:none}
#live-console[hidden] ~ .pult-empty{display:block}
#live-console:not([hidden]) ~ .pult-empty{display:none}
.console-invite[hidden]{display:none}
.help-sec[hidden]{display:none}

/* 1) Токены формы (радиусы) и фокуса — единая геометрия по сайту */
:root{
  --r-md:8px;    /* аватары, мелкие блоки */
  --r-lg:12px;   /* карточки, панели */
  --focus-ring:0 0 0 3px rgba(74,118,168,.16);
}
html[data-theme="dark"]{ --focus-ring:0 0 0 3px rgba(127,167,204,.22); }

/* Клавиатурный фокус — заметное аккуратное кольцо (мышь не мешаем) */
:focus-visible{outline:2px solid var(--brand,#4a76a8);outline-offset:2px}

/* 2) Карточки: единый мягкий радиус (панели/посты/друг-карты) */
.panel{border-radius:var(--r-lg)}
.friend-card{border-radius:var(--r-md)}
.pager.panel{border-radius:var(--r-lg)}

/* 3) Записи на стене */
.post-av{border-radius:var(--r-md);transition:box-shadow .18s ease}
.post:hover .post-av{box-shadow:0 0 0 2px var(--brand-tint)}
.post-author{transition:color .12s ease}
.post-img{border-radius:var(--r-md)}
.post-img img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.post-img:hover img{transform:scale(1.015)}
.post-gallery{border-radius:var(--r-md);overflow:hidden}
.pg-cell img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.pg-cell:hover img{transform:scale(1.02)}
.link-preview{border-radius:var(--r-md);transition:border-color .15s ease,background .15s ease}
.link-preview:hover{border-color:var(--vk-blue)}

/* 4) Ряд действий: тактильные пилюли */
.act-btn{transition:background .13s ease,color .13s ease,transform .06s ease}
.act-btn:active{transform:scale(.94)}
.react-btn .react-ico{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.react-btn:hover .react-ico{transform:scale(1.16)}
.btn-icon{transition:color .12s ease,background .12s ease,transform .06s ease}
.btn-icon:active{transform:scale(.92)}

/* 5) Комментарии: пузыри с мягким хвостиком, форма-пилюля с кольцом фокуса */
.comment-body{border-radius:10px 10px 10px 3px;transition:background .13s ease}
.comment:hover .comment-body{background:var(--hover)}
.comment-av{border-radius:6px}
.comment-form textarea[name=text]{
  border-radius:20px;padding:8px 14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.comment-form textarea[name=text]:focus{box-shadow:var(--focus-ring)}
.comment-form input{border-radius:10px}
/* Форма комментария никогда не прячется под фикс-барами (шапка 48, плеер/таббар 56):
   scroll-margin уважается scrollIntoView — корень бага «форма недоступна при цитировании» */
.comment-form,.comment-form textarea[name=text]{scroll-margin-top:60px;scroll-margin-bottom:72px}

/* 6) Композер записи */
.wall-form textarea{border-radius:10px}

/* 7) Боковое меню: активный пункт — брендовая подложка, иконка оживает */
.side a{border-radius:var(--r-md)}
.side a.is-on{background:var(--brand-tint);color:var(--brand)}
.side-ico{transition:transform .15s ease,opacity .15s ease}
.side a:hover .side-ico{transform:translateX(1px)}

/* 8) Шапка: поиск расширяется, кольцо фокуса; вкладки плавнее */
.top-search{border-radius:8px;transition:background .15s ease,box-shadow .15s ease}
.top-search:focus{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.top-nav a{transition:background .12s ease}

/* 9) Кнопки: микро-подъём без перегруза */
.btn{transition:background .13s ease,transform .06s ease,box-shadow .13s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(43,88,122,.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-sec:hover{box-shadow:none}

/* 10) Выделение текста — брендовый тинт */
::selection{background:rgba(74,118,168,.24)}

/* 11) Серверные сообщения: вариант warning (был только success/error) */
.vd-m-warning{border-left-color:#b8860b}

/* 12) Мобильные фикс-бары: safe-area iPhone */
@media(max-width:760px){
  .audio-bar{height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar{height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* 13) Доступность: уважение к reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* 14) Тёмная тема: паритет новых поверхностей (радиусы наследуют, кольца — токены) */
html[data-theme="dark"] .comment:hover .comment-body{background:var(--fill2)}
html[data-theme="dark"] .btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.45)}
/* ==================== конец v168 ==================== */

/* 15) Тёмная тема: контраст имён в цитатах (был brand-dark #3E6691 на тёмном тинте) */
html[data-theme="dark"] .cqb-name,
html[data-theme="dark"] .cqr-name{color:#9CC1E8}
html[data-theme="dark"] .post-acts .act-btn:hover{color:#9CC1E8}
html[data-theme="dark"] .cqb-ico,
html[data-theme="dark"] .cqr-ico{color:#9CC1E8}

/* 16) Пустые состояния и пейджер — воздух и выравнивание */
.empty-hint{padding:30px 18px;text-align:center;color:var(--vk-muted);font-size:13px}
.empty-hint a{font-weight:600}
.pager{border-radius:var(--r-lg)}

/* 17) Пилюли «Цитата/Ответить» — тап-цели и ховеры */
.c-reply,.c-quote{transition:color .12s ease,background .12s ease;padding:2px 6px;border-radius:6px}
.c-reply:hover{background:var(--hover);text-decoration:none}
.c-quote:hover{background:var(--hover)}