:root {
  /* базовые цвета (как раньше) */
  --chat-bg:    #e7f0ff;
  --chat-text:  #0f172a;
  --chat-brd:   #1d4ed8;

  --style-bg:   #fae1ec;
  --style-text: #0f172a;
  --style-brd:  #f1408a;

  --topic-bg:   #dcfce7;
  --topic-text: #0f172a;
  --topic-brd:  #10b981;

  /* НОВОЕ: активные фоны (чуть «ярче») */
  --chat-bg-active:  #dbeafe;  /* blue-100 */
  --style-bg-active: #ffbfd2;  /* pink-200 */
  --topic-bg-active: #bbf7d0;  /* green-200 */
}

.dark {
  /* базовые для дарка (как раньше) */
  --chat-bg:    rgba(59,130,246,.18);
  --chat-text:  #e5e7eb;
  --chat-brd:   #93c5fd;

  --style-bg:   rgba(255, 129, 177, 0.233);
  --style-text: #e5e7eb;
  --style-brd:  #fd749d;

  --topic-bg:   rgba(16,185,129,.18);
  --topic-text: #e5e7eb;
  --topic-brd:  #86efac;

  /* НОВОЕ: активные фоны в дарке — чуть насыщеннее */
  --chat-bg-active:  rgba(59,130,246,.28);
  --style-bg-active: rgba(241, 113, 167, 0.28);
  --topic-bg-active: rgba(16,185,129,.28);
}

/* База — без изменений */
.chat-btn, .style-btn, .topic-btn {
  display:block; width:100%; text-align:left;
  padding:.5rem .75rem; border-radius:1rem;
  font-weight:600; line-height:1.3;
  border:1px solid transparent; /* тонкий 1px */
  transition:background-color .15s, border-color .15s, box-shadow .15s;
}

/* Фоны по умолчанию */
.chat-btn  { background:var(--chat-bg);  color:var(--chat-text); }
.style-btn { background:var(--style-bg); color:var(--style-text); }
.topic-btn { background:var(--topic-bg); color:var(--topic-text); }


/* Hover ТЕПЕРЬ = как активный (для неактивных кнопок) */
.chat-btn:not([data-active="true"]):hover  { 
  background: var(--chat-bg-active); 
  filter: none;
}
.style-btn:not([data-active="true"]):hover { 
  background: var(--style-bg-active); 
  filter: none;
}
.topic-btn:not([data-active="true"]):hover { 
  background: var(--topic-bg-active); 
  filter: none;
}

/* АКТИВНЫЕ: фон чуть ярче + тонкий 1px border соответствующего цвета */
.chat-btn[data-active="true"]  { background:var(--chat-bg-active);  border-color:var(--chat-brd);  box-shadow:none; }
.style-btn[data-active="true"] { background:var(--style-bg-active); border-color:var(--style-brd); box-shadow:none; }
.topic-btn[data-active="true"] { background:var(--topic-bg-active); border-color:var(--topic-brd); box-shadow:none; }

/* Иконка-замок (как было) */
.btn-lock { width:1.1rem; height:1.1rem; margin-left:.25rem; flex:0 0 1.1rem; opacity:.9; }