/* Life Timeline — Верхняя панель и угловые кнопки (аккаунт, отзыв).
   Вынесено без изменений из app/life-timeline.html (строки 863–954 на 31.10.2026).
   Порядок подключения файлов важен: он повторяет исходный порядок правил. */
.topbar {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 5px;
  border-radius: 10px;
  pointer-events: auto;
}

.top-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  background: transparent;
  color: rgba(238, 243, 239, .68);
  font-size: 14px;
  white-space: nowrap;
}

.top-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-action.active,
.top-action:hover {
  background: rgba(255, 255, 255, .052);
  color: var(--text);
}

.top-separator {
  width: 1px;
  height: 22px;
  background: rgba(238, 243, 239, .14);
  margin: 0 2px;
}

.corner-actions {
  position: fixed;
  z-index: 22;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.account-button,
.feedback-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.account-button svg,
.feedback-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(238, 243, 239, .76);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-button {
  color: rgba(238, 243, 239, .78);
}

.feedback-button:hover {
  color: var(--text);
  border-color: rgba(156, 200, 194, .30);
  background: rgba(156, 200, 194, .10);
}